drp-ui/src/views/business/as/aspa-mobile/see/index.vue

<script>
import useColumns from "./columns";
export default {
  name: "ASPA-SEE",
  components: {
    zgdButton: () => import("../operating-btn/zgd/index.vue"),
    clButton: () => import("../operating-btn/cl/index.vue"),
    ElFormatValue: () =>
      import(
        "@/views/business/as/after-sales/components/format-value/index.vue"
      ),
    ElImagePreview: () =>
      import(
        "@/views/business/as/after-sales/components/image-preview/index.vue"
      ),
  },
  data() {
    const { formColumns } = useColumns();
    const params = this.$init.params(formColumns);
    return {
      params,
      formColumns,
      size: "mini",
      loading: false,
      title: "问题详情",
      imgUrl: require("../images/order.png"),
    };
  },
  methods: {
    useBack() {},
    useEdit() {},
  },
  created() {},
};
</script>

<template>
  <div class="ASPA-SEE" v-loading="loading">
    <van-sticky style="width: 100%">
      <van-nav-bar
        :title="title"
        left-text="返回"
        right-text="编辑"
        left-arrow
        @click-left="useBack"
        @click-right="useEdit"
        style="width: 100%"
      />
    </van-sticky>
    <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-row type="flex" justify="end" style="margin: 15px 0">
        <zgd-button :size="size"></zgd-button>
        <cl-button :size="size"></cl-button>
      </el-row>

      <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"
            size="large"
          >
            <div>
              <span
                >[{{
                  handleStatus(
                    flow.problemStateConvert,
                    flow.problemStateSolve
                  )
                }}] {{ flow.content }}</span
              >
              <div style="padding: 6px 0 0">
                <span>处理人：{{ flow.processorName }}</span>
                <el-button
                  v-if="flow.processorWay"
                  type="text"
                  @click="useCall(flow)"
                  style="padding: 0px 12px"
                  >{{ flow.processorWay }}</el-button
                >
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.ASPA-SEE {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #f7f7f7;
  .el-form {
    height: calc(100vh - 46px);
    padding: 16px;
    background-color: #f7f7f7;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .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 {
  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>