witcarbon-app/src/views/repairDetail.vue

<template>
  <van-nav-bar title="详情" safe-area-inset-top>
    <template #left>
      <van-icon
        :name="require('@/assets/arrow-left.svg')"
        size="24"
        @click="backPath"
      />
    </template>
  </van-nav-bar>
  <div class="page_info">
    <div class="info_list">
      <van-cell-group class="cell_title_icon">
        <van-cell
          title="报修信息"
          :icon="require('@/assets/line.svg')"
          v-if="
            role == 'admin' && (dataForm.status == 2 || dataForm.status == 3)
          "
        />
        <van-cell title="报修时间" :value="dataForm.createDate" />
        <van-cell title="报修位置" :value="dataForm.repairPosition" />
        <van-cell
          title="报修区域"
          :value="`${repairRegion_filter(dataForm.repairRegion)}`"
        />
        <van-cell
          title="报修类型"
          :value="`${repairType_filter(dataForm.repairType)}`"
        />
        <van-cell title="联系人" :value="dataForm.contactPerson" />
        <van-cell title="联系电话" :value="dataForm.contactPhone" />
        <van-cell title="故障描述" :value="dataForm.faultDes" />
        <van-cell title="故障照片" :border="false" class="upload_cell">
          <template #value>
            <van-image
              width="80"
              height="80"
              :src="item"
              v-for="(item, index) in imagesList"
              :key="item + '_' + index"
            />
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group
        class="cell_title_icon"
        v-if="role == 'admin' && (dataForm.status == 2 || dataForm.status == 3)"
      >
        <van-cell title="维修信息" :icon="require('@/assets/line.svg')" />
        <van-cell
          title="紧急程度"
          :value="`${urgency_filter(dataForm.urgency)}`"
        />
        <van-cell title="维修人员" :value="dataForm.repairPersonName" />
        <van-cell title="联系电话" :value="dataForm.repairPersonId" />
        <van-cell
          title="维修完成时间"
          :value="dataForm.repairFinishTime"
          v-if="dataForm.status == 3"
        />
      </van-cell-group>
    </div>
  </div>
  <template v-if="dataForm.status == 2 && role == 'repair'">
    <div class="save_btn">
      <van-button
        block
        type="primary"
        loading-type="spinner"
        :loading="loading"
        loading-text="维修完成"
        @click="handleClick('finish')"
      >
        维修完成
      </van-button>
    </div>
  </template>
  <template v-if="role == 'admin' && dataForm.status == 1">
    <div class="save_btn">
      <van-button
        block
        type="primary"
        loading-type="spinner"
        @click="handleClick('dispatch')"
      >
        指派维修人员
      </van-button>
    </div>
  </template>

  <van-popup
    v-model:show="showPopup"
    position="bottom"
    :style="{ height: '30%' }"
    class="popup_info"
  >
    <van-row class="popup_title">
      <van-col :span="24">{{ popupTitle }}</van-col>
    </van-row>
    <van-divider style="margin: 0" />
    <van-form
      ref="dataForm"
      input-align="right"
      error-message-align="right"
      @submit="onSubmit"
    >
      <van-cell-group :border="false">
        <van-field
          v-model="dataForm.repairPersonName"
          label="维修人员"
          required
          is-link
          placeholder="请选择维修人员"
          clearable
          :rules="[{ required: true, message: '请选择维修人员' }]"
          @click="showRepairPersonPicker = true"
        />
        <van-popup
          v-model:show="showRepairPersonPicker"
          round
          position="bottom"
        >
          <van-picker
            :columns="repairPersonList"
            :columns-field-names="customFieldName"
            @cancel="showRepairPersonPicker = false"
            @confirm="
              (value) => {
                dataForm.repairPersonId = value.id;
                dataForm.repairPersonName = value.name;
                showRepairPersonPicker = false;
              }
            "
          />
        </van-popup>
        <van-field
          v-model="dataForm.urgencyName"
          label="紧急程度"
          required
          is-link
          placeholder="请选择紧急程度"
          clearable
          :rules="[{ required: true, message: '请选择紧急程度' }]"
          @click="showUrgencyPicker = true"
        />
        <van-popup v-model:show="showUrgencyPicker" round position="bottom">
          <van-picker
            :columns="repairUrgencyList"
            @cancel="showUrgencyPicker = false"
            @confirm="
              (value) => {
                dataForm.urgency = value.value;
                dataForm.urgencyName = value.text;
                showUrgencyPicker = false;
              }
            "
          />
        </van-popup>
      </van-cell-group>
      <div class="save_btn">
        <van-button
          block
          type="primary"
          :loading="loading"
          loading-type="spinner"
          loading-text="提交"
          native-type="submit"
        >
          提交
        </van-button>
      </div>
    </van-form>
  </van-popup>
</template>
<script>
import Api from "../utils/api";
import { isEmpty } from "@/utils/index.js";
import VCountUp from "./CountUp";
export default {
  components: {
    "v-count-up": VCountUp,
  },
  data() {
    return {
      role: "",
      loading: false,
      showImgPreview: false,
      imagesList: [],
      showPopup: false,
      popupTitle: "工单指派",
      showRepairPersonPicker: false,
      showUrgencyPicker: false,
      repairPersonList: [],
      customFieldName: {
        text: "name",
        value: "id",
      },
      repairUrgencyList: [
        { text: "非常紧急", value: 1 },
        { text: "紧急", value: 2 },
        { text: "普通", value: 3 },
      ],
      dataForm: {
        id: "",
        repairPersonId: "",
        repairPersonName: "",
        urgency: "",
        urgencyName: "",
        repairTime: "",
        repairFinishTime: "",
        repairPositionName: "",
        repairRegion: "",
        status: "",
        repairType: "",
        contactPerson: "",
        contactPhone: "",
        faultDes: "",
        faultPics: "",
      },
    };
  },
  created() {
    this.role = localStorage.getItem("role");
    this.getDataDetail();
    this.getUserList();
  },
  methods: {
    repairType_filter(val) {
      if (isEmpty(val)) {
        return "";
      }
      if (val == 1) {
        return "水";
      }
      if (val == 2) {
        return "电";
      }
      if (val == 3) {
        return "其他";
      }
    },
    repairRegion_filter(val) {
      if (isEmpty(val)) {
        return "";
      }
      if (val == 1) {
        return "公共区域";
      }
      if (val == 2) {
        return "室内";
      }
    },
    urgency_filter(val) {
      if (isEmpty(val)) {
        return "";
      }
      if (val == 1) {
        return "非常紧急";
      }
      if (val == 2) {
        return "紧急";
      }
      if (val == 3) {
        return "普通";
      }
    },
    //获取维修人员
    getUserList() {
      Api.repairInfoUser({
        page: 1,
        limit: 100,
      }).then((res) => {
        if (res.code == 0) {
          this.repairPersonList = res.data.list;
        }
      });
    },
    getDataDetail() {
      Api.repairInfoDetail(this.$route.query.id).then((res) => {
        if (res.code == 0) {
          this.dataForm = res.data;
          this.imagesList = this.dataForm.faultPics.split(",");
        } else {
        }
      });
    },
    handleClick(type) {
      if (type == "finish") {
        this.$dialog
          .confirm({
            message: "请确认是否维修完成",
          })
          .then(() => {
            this.loading = true;
            setTimeout(() => {
              this.loading = false;
            }, 2000);
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      }
      if (type == "dispatch") {
        this.showPopup = !this.showPopup;
        this.$nextTick(() => {
          this.$refs.dataForm.resetValidation();
        });
      }
    },
    onSubmit() {
      this.$toast.loading({
        message: "保存中...",
        forbidClick: true,
      });
      Api.repairInfoDispatch({
        id: this.dataForm.id,
        repairPersonId: this.dataForm.repairPersonId,
        urgency: this.dataForm.urgency,
      }).then((res) => {
        if (res.code == 0) {
          this.$toast.success("保存成功");
          this.showPopup = false;
          this.getDataDetail();
        } else {
          this.$toast.fail("保存失败");
        }
      });
    },
    backPath() {
      this.$router.back();
    },
  },
};
</script>
<style lang="scss" scoped>
.page_info {
  .info_list {
    /deep/ {
      .upload_cell {
        .van-cell__title {
          flex: unset;
        }
        .van-image {
          margin-left: 8px;
          margin-bottom: 8px;
        }
      }
      .cell_title_icon {
        .van-icon {
          display: flex;
          align-items: center;
        }
      }
      .van-cell__left-icon{
        margin-right: 0;
      }
    }
  }
}
</style>
<style lang="scss">
.popup_info {
  box-shadow: 0px -10px 20px 0px rgba(27, 32, 38, 0.1);
  border-radius: 20px 20px 0px 0px;
  /deep/ {
    .popup_title {
      padding: 14px 0;
      font-weight: 600;
      font-size: 16px;
      color: #333333;
      text-shadow: 0px -10px 20px rgba(27, 32, 38, 0.1);
    }
  }
  .van-field__label {
    color: #666666;
  }
}
</style>