drp-ui/src/views/business/as/after-sales/progress/details.vue

<!-- 进度查询-详情 -->
<script>
import useColumns from "./columns";
import { ProblemItem } from "@/api/business/as/after-sales";
export default {
  name: "asDetails",
  props: {
    value: {
      type: [String, Number],
      require: true,
    },
  },
  components: {
    ElFormatValue: () => import("../components/format-value/index.vue"),
    ElImagePreview: () => import("../components/image-preview/index.vue"),
  },
  data() {
    const { formColumns } = useColumns();
    const params = this.$init.params(formColumns);
    return {
      title: "进度详情",
      width: "100%",
      loading: false,
      visible: false,
      size: "medium",
      formColumns,
      params: {
        ...params,
        problemPicture: [],
      },
      imgUrl: require("../images/order.png"),
      phone: "",
      show: false,
      actions: [
        { name: "拨号", key: "call" },
        { name: "复制", key: "copy" },
      ],
    };
  },
  computed: {
    problemId: {
      get() {
        return this.$props.value;
      },
      set() {},
    },
  },
  methods: {
    setVisible(prop) {
      this.visible = prop;
    },
    hide() {
      this.params = {
        ...this.$init.params(this.formColumns),
        problemPicture: [],
      };
      this.visible = false;
      this.$emit("refresh");
    },
    beforeOpen() {
      this.fetchItem(this.problemId);
    },
    async fetchItem(id) {
      try {
        this.loading = true;

        let { code, data } = await ProblemItem({ id });
        if (code === 200) {
          this.params = data;
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    useCall(prop) {
      // this.phone = prop.phone;
      this.phone = prop.processorWay;
      this.show = true;
    },
    async onSelect({ key, name }) {
      this.show = false;
      if (key === "call") {
        window.location.href = `tel:${this.phone}`;
        return;
      }
      if (key === "copy") {
        let clipboard = navigator.clipboard || {
          writeText: (text) => {
            let copyInput = document.createElement("input");
            copyInput.value = text;
            document.body.appendChild(copyInput);
            copyInput.select();
            document.execCommand("copy");
            document.body.removeChild(copyInput);
          },
        };
        if (clipboard) {
          await clipboard.writeText(this.phone);
          return this.$toast("已复制到剪贴板");
        }
        // await navigator.clipboard.writeText(this.phone);
        //
      }
    },
    onCancel() {},
  },
  created() {},
};
</script>

<template>
  <el-drawer
    :size="width"
    v-bind="$attrs"
    v-on="$listeners"
    v-loading="loading"
    :visible.sync="visible"
    :show-close="false"
    destroy-on-close
    @close="hide"
    @open="beforeOpen"
  >
    <div
      slot="title"
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <van-nav-bar
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="hide"
        style="width: 100%"
      />
    </div>

    <el-form :model="params">
      <el-descriptions :column="1" :size="size" :reverse="true">
        <template slot="title">
          <div class="mes_title">
            <div style="display: flex; align-items: center">
              <el-image
                style="width: 16px; height: 16px; margin-right: 10px"
                :src="imgUrl"
                fit="contain"
              ></el-image>
              <span>单号:{{ params.problemCode }}</span>
            </div>
            <span>{{
              params.createTime &&
              new Date(params.createTime.replace(/-/g, "/")).Format(
                "yyyy-MM-dd HH:mm"
              )
            }}</span>
          </div>
        </template>

        <el-descriptions-item
          v-for="({ item, attr }, index) in formColumns"
          :label="item.title"
        >
          <el-format-value
            v-if="attr.is === 'el-select'"
            v-model="params[item.key]"
            :dicts="attr.options"
          ></el-format-value>
          <el-image-preview
            v-else-if="attr.is === 'el-image-preview'"
            v-model="params[item.key]"
          ></el-image-preview>
          <span v-else>{{ params[item.key] }}</span>
        </el-descriptions-item>
      </el-descriptions>

      <el-card shadow="never">
        <p class="dispose">
          <span>工单处理状态</span>
          <span style="color: #ff8500; font-size: 12px"
            >持续时长:{{ params.processingTime }}</span
          >
        </p>
        <el-timeline style="padding: 16px 12px">
          <el-timeline-item
            v-for="(flow, index) in params.processFlow"
            :key="index"
            :timestamp="flow.timestamp"
            color="#0095ff"
            size="large"
          >
            <div>
              <span>{{ flow.content }}</span>
              <div>
                <span>处理人：{{ flow.processorName }}</span>
                <el-button
                  type="text"
                  @click="useCall(flow)"
                  style="padding: 6px 12px 0px"
                  >{{ flow.processorWay }}</el-button
                >
              </div>
            </div>
          </el-timeline-item>
          <el-timeline-item color="#ff8500" size="large"></el-timeline-item>
        </el-timeline>
      </el-card>
      <van-action-sheet
        v-model="show"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @cancel="onCancel"
        @select="onSelect"
      />
    </el-form>
  </el-drawer>
</template>

<style scoped lang="scss">
::v-deep .el-drawer__header {
  padding: 0 !important;
  margin: 0 !important;
}
.el-form {
  height: 100%;
  padding: 16px;
  background-color: #f7f7f7;
}

.el-descriptions {
  padding: 12px;
  background-color: #fff;
  border-radius: 4px;
}
::v-deep .el-descriptions__header {
  margin: 0 0 12px;
  color: #303133;
}
::v-deep .el-descriptions__title {
  width: 100%;
}
.mes_title {
  width: 100%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
::v-deep .van-uploader__upload {
  display: none;
}

.el-card {
  margin: 10px 0;
  font-size: 14px;
}
::v-deep .el-card__body {
  padding: 0;
}
.dispose {
  border-bottom: 1px solid #e2dede;
  margin: 0;
  line-height: 28px;
  padding: 6px 12px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>