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

<!-- 进度查询-列表 -->
<script>
import Cookies from "js-cookie";
import { ProblemList } from "@/api/business/as/after-sales";
export default {
  name: "Progress",
  components: {
    ProgressDetail: () => import("./details.vue"),
  },
  data() {
    return {
      size: "mini",
      loading: false,
      title: "进度查询",
      imgUrl: require("../images/order.png"),
      dataList: [],
      checkedId: null,
    };
  },
  methods: {
    useBack() {
      this.$router.go(-1);
    },
    handleDetail(prop) {
      this.checkedId = prop.id;
      let { setVisible } = this.$refs.ProgressDetail;
      setVisible(true);
    },
    async getList() {
      try {
        this.loading = true;
        // const { id } = this.$store.state.salesUser;
        const userId = Cookies.get("salesId");
        let { code, rows } = await ProblemList({ userId });
        if (code === 200) {
          this.dataList = rows;
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    // 处理状态
    handleStatus(convert, solve) {
      // problemStateConvert 是否转工单 0 转工单  1 未转工单
      // problemStateSolve   是否解决   0 已解决  1 未解决
      if (convert == "0") {
        return solve == "0" ? "转工单-已解决" : "转工单-待解决";
      } else {
        return solve == "0" ? "已解决" : "待解决";
      }
    },
  },
  created() {
    this.getList();
  },
};
</script>

<template>
  <el-card
    v-loading="loading"
    shadow="never"
    :body-style="{
      height: '100%',
      padding: 0,
      display: 'flex',
      'flex-direction': 'column',
      'align-items': 'center',
    }"
  >
    <van-sticky style="width: 100%">
      <van-nav-bar
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="useBack"
        style="width: 100%"
      />
    </van-sticky>
    <el-row>
      <el-col
        v-for="data in dataList"
        :span="24"
        @click.native="handleDetail(data)"
      >
        <div class="mes_title">
          <div style="display: flex; align-items: center">
            <el-image
              style="width: 16px; height: 16px; margin-right: 12px"
              :src="imgUrl"
              fit="contain"
            ></el-image>
            <span>{{ data.problemCode }}</span>
          </div>
          <span>{{
            new Date(data.createTime.replace(/-/g, "/")).Format(
              "yyyy-MM-dd HH:mm"
            )
          }}</span>
        </div>
        <p
          class="van-ellipsis"
          style="color: #333; font-size: 14px; margin: 5px 0px"
        >
          <el-tag
            :size="size"
            style="margin-right: 8px"
            :type="
              data.processFlow[0].problemStateSolve == '0'
                ? 'success'
                : 'danger'
            "
            >{{
              handleStatus(
                data.processFlow[0].problemStateConvert,
                data.processFlow[0].problemStateSolve
              )
            }}</el-tag
          >

          <span>{{ data.processFlow[0].content }}</span>
        </p>
        <p class="van-ellipsis" style="margin: 0">
          问题描述：{{ data.problemDescription }}
        </p>
      </el-col>
    </el-row>
    <progress-detail
      ref="ProgressDetail"
      v-model="checkedId"
      @refresh="getList"
    ></progress-detail>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #f7f7f7;
}
.el-row {
  width: 100%;
  height: calc(100vh - 46px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 4px;
  .el-col {
    margin-bottom: 16px;
    background-color: #fff;
    padding: 12px;
    font-size: 12px;
    color: #9b9b9b;
    .mes_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    span {
      align-self: center;
    }
  }
}
</style>