8.8 老师-后勤报修

src/views/teacher/logisticsRepair/checkRepair.vue

+<template>
+  <van-nav-bar
+      title="查看报修结果"
+      left-text="返回"
+      left-arrow
+      @click-left="goback"
+  />
+  <div class="">
+    <div class="main">
+      <van-form label-align="right" label-width="110px" ref="checkForm">
+        <van-field
+            readonly
+            label="维修人:"
+            v-model="state.maintainName"
+            rows="1"
+            autosize
+            type="textarea"
+        />
+        <van-field
+            readonly
+            label="维修人联系方式:"
+            v-model="state.maintainPhone"
+            rows="1"
+            autosize
+            type="textarea"
+        />
+        <van-field
+            readonly
+            label="维修结果:"
+            v-model="state.maintainResult"
+            rows="1"
+            autosize
+            type="textarea"
+        />
+        <van-field readonly name="rate" label="评分:">
+          <template #input>
+            <van-rate readonly v-model="state.evaluate" />
+          </template>
+        </van-field>
+        <van-field
+            readonly
+            label="报修单号:"
+            v-model="state.id"
+            rows="1"
+            autosize
+            type="textarea"
+        />
+        <van-field
+            readonly
+            label="报修人:"
+            v-model="state.repairsName"
+            rows="1"
+            autosize
+            type="textarea"
+        />
+        <van-field
+            readonly
+            label="联系方式:"
+            v-model="state.phone"
+            rows="1"
+            autosize
+            type="textarea"
+        />{{state.data}}
+        <van-field
+            readonly
+            label="报修时间:"
+            v-model="state.repairsTime"
+            rows="1"
+            autosize
+            type="textarea"
+        />
+        <van-field
+            readonly
+            label="故障设备:"
+            v-model="state.failureEquipment"
+            rows="1"
+            autosize
+            type="textarea"
+        />
+        <van-field
+
+            label="地点:"
+            v-model="state.failureEquipmentArea"
+            rows="1"
+            autosize
+            type="textarea"
+            readonly
+        />
+        <van-field
+            readonly
+            style="display: flex; flex-direction: column"
+            label="故障描述:"
+            v-model="state.failureEquipmentDescribe"
+            rows="1"
+            type="textarea"
+        />
+        <van-field name="uploader" label="故障图片:">
+          <template #input>
+            <van-uploader :deletable="false" :show-upload="false" v-model="state.failureEquipmentPicture" />
+          </template>
+        </van-field>
+      </van-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, onUpdated, reactive, toRefs } from "vue";
+import { Dialog, Toast } from "vant";
+import { useRouter } from "vue-router";
+import { useStore } from "vuex";
+import {
+  getRepairInfo, //查询报修信息详情
+} from "@/service/repair";
+
+const router = useRouter();
+const store = useStore();
+const state = reactive({
+    maintainName:'', //维修人
+    maintainPhone: "", //维修人联系方式
+    maintainResult: "", //维修结果
+    evaluate:0, //评分
+    id:"", //报修单号
+    repairsName:"", //报修人
+    phone:"", //报修人联系方式
+    repairsTime: "", //报修时间
+    failureEquipment:"", //故障设备
+    failureEquipmentArea:"", //地点
+    failureEquipmentDescribe:"", //故障描述
+    failureEquipmentPicture:[],//故障图片
+});
+const columns = ref([]);
+// 提交表单
+const checkForm = ref(null);
+// 加载效果
+const loading = ref(false);
+const courseNumss = ref([]);
+onMounted( async () => {
+  console.log("3- 组件挂在完毕执行 --- onMounted");
+  //获取路由跳转过来的参数
+  // console.log('router1',JSON.parse(router.currentRoute.value.query.item))
+  console.log('router.currentRoute.value.query',router.currentRoute.value.query)
+  let result = await getRepairInfo(router.currentRoute.value.query.id)
+  console.log('result',result)
+  if(result.code == 200) {
+    Object.assign(state,result.data)
+    state.failureEquipmentPicture = []
+    if(result.data.newFailureEquipmentPicture){
+      const picArr = result.data.newFailureEquipmentPicture.split(',')
+      console.log('picArr',picArr)
+      state.failureEquipmentPicture = picArr.map(item =>{
+        return {url: item}
+      })
+      // console.log('newArr',newArr)
+
+    }
+
+  }
+    // state.id = item.id;
+  // state.maintainName = item.maintainName;
+  // state.maintainPhone = item.maintainPhone;
+  // state.maintainResult = item.maintainResult;
+  // state.evaluate = item.evaluate;
+  // state.repairsName = item.repairsName;
+  // state.phone = item.phone;
+  // state.repairsTime = item.repairsTime;
+  // state.failureEquipment = item.failureEquipment;
+  // state.failureEquipmentArea = item.failureEquipmentArea;
+  // state.failureEquipmentDescribe = item.failureEquipmentDescribe;
+  // state.failureEquipmentPicture = [
+  //     { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
+  //   { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' }]
+  // if(item.newFailureEquipmentPicture){
+  //   state.failureEquipmentPicture = item.newFailureEquipmentPicture.split(',');
+  //
+  // }else{
+  //   state.failureEquipmentPicture = []
+  // }
+});
+const goback = (g) => {
+  router.back();
+};
+
+</script>
+
+<style scoped lang="less">
+/** 最上层banner条 */
+.home {
+  height: 15rem;
+}
+
+.bg_color {
+  background-color: rgb(230, 230, 230);
+}
+
+.m_top {
+  height: 40vw;
+  position: relative;
+}
+
+.main {
+  margin: 15px;
+  height: auto !important;
+  min-height: 80vh;
+  line-height: 20px;
+  border-radius: 50px 50px 70px 70px;
+  // background-color: rgba(255, 199, 0, 100);
+  font-size: 14px;
+  text-align: center;
+  padding-bottom: 15vw;
+
+  .main_search {
+    width: 98vw;
+    height: 15vw;
+
+    .main_search_1 {
+      width: 45vw;
+      height: 14vw;
+      display: inline-block;
+      vertical-align: top;
+      border: yellow 2px;
+    }
+
+    .main_search_2 {
+      width: 45vw;
+      height: 14vw;
+      display: inline-block;
+      vertical-align: top;
+    }
+  }
+
+  .main_list_one {
+    // margin-left: 5vw;
+    margin-top: 5vw;
+    width: 100vw;
+    height: 20vw;
+    line-height: 20px;
+    // border-radius: 6px;
+    background-color: rgb(255, 255, 255);
+    text-align: center;
+    // border: 1px solid rgba(9, 208, 178, 100);
+
+    .main_list_one_left_1 {
+      display: inline-block;
+      margin-top: 2vw;
+      width: 15vw;
+      height: 15vw;
+      border-radius: 50px;
+      // border: 1px solid rgba(187, 187, 187, 100);
+      vertical-align: top;
+    }
+
+    .main_list_one_left_2 {
+      display: inline-block;
+      padding-left: 5vw;
+      width: 70vw;
+      position: relative;
+      top: 2vw;
+      vertical-align: top;
+
+      .left_2_1 {
+        width: 75vw;
+        height: 22px;
+        color: rgba(28, 28, 28, 100);
+        font-size: 15px;
+        text-align: left;
+        font-family: Microsoft YaHei;
+
+        .left_2_1_1 {
+          display: inline-block;
+          width: 60%;
+        }
+
+        .left_2_1_2 {
+          display: inline-block;
+          width: 40%;
+          color: rgb(145, 141, 141);
+          text-align: left;
+          font-size: 10px;
+          font-family: Microsoft YaHei;
+          float: right;
+        }
+      }
+
+      .left_2_2 {
+        width: 60vw;
+        height: 22px;
+        color: rgb(145, 141, 141);
+        text-align: left;
+        font-size: 12px;
+        font-family: Microsoft YaHei;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .main_one_btna {
+    height: auto;
+    position: relative;
+    top: 3vh;
+    line-height: 20px;
+    // border-radius: 0px 0px 26px 26px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    // padding-left: 10vw;
+    // padding-bottom: 10vw;
+  }
+}
+</style>