完善页面逻辑

src/views/devide/device.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>设备管理</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/operation/hand.vue

@@ -99,7 +99,7 @@
         >
       </template>
       <template slot-scope="{ row }" slot="menu">
-        <el-button @click="$refs.crud.rowView(row, index)">查看</el-button>
+        <el-button @click="handleView(row)">查看</el-button>
         <el-button @click="handleEdit(row)">编辑</el-button>
         <el-button @click="handleEvaluate(row)">评价并签字</el-button>
       </template>
@@ -148,8 +148,9 @@
       :append-to-body="true"
       width="50%"
     >
-      <div style="height:500px;overflow:auto;">
+      <div style="height:500px;overflow:auto;" >
-        <el-form ref="form" :model="detailForm" label-width="120px">
+        <el-form ref="form" :model="detailForm" label-width="120px" label-position="left">
+          <div v-show="rowStatus == 1 || rowStatus == 2 || rowStatus == 3">
             <div
               style="
                 color: #101010;
@@ -233,10 +234,13 @@
               <el-date-picker
                 v-model="detailForm.addTime"
                 type="datetime"
+                style="width:100%;"
                 disabled
                 placeholder="选择日期时间">
               </el-date-picker>
             </el-form-item>
+          </div>
+          <div v-show="rowStatus == 2 || rowStatus == 3">
             <div
               style="
                 color: #101010;
@@ -252,9 +256,12 @@
                 v-model="detailForm.orderTime"
                 type="datetime"
                 disabled
+                style="width:100%;"
                 placeholder="选择日期时间">
               </el-date-picker>
             </el-form-item>
+          </div>
+          <div v-show="rowStatus == 2 || rowStatus == 3">
             <div
               style="
                 color: #101010;
@@ -319,10 +326,131 @@
                 </el-table-column>
               </el-table>
             </el-form-item>
+          </div>
+          <div v-show="rowStatus == 3 || isEvalute">
+            <div
+              style="
+                color: #101010;
+                font-size: 20px;
+                font-weight: 550;
+                margin-bottom: 20px;
+              "
+            >
+              评价
+            </div>
+            <div>
+              <p>1.您对本次维修的质量方面满意吗？</p>
+              <div style="display:flex;">
+                <div 
+                  style="width: 150px;
+                    border-radius: 5px;
+                    height: 30px;
+                    text-align: center;
+                    line-height: 30px;
+                    margin-right: 20px;
+                    cursor:pointer;"
+                  :style="{background:isQuality == '1' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isQuality == '1' ? '#3a62d7' : '#4f4f4f'}"
+                  @click="clickQualityYes">满意</div>
+                <div
+                  style="width: 150px;
+                    border-radius: 5px;
+                    height: 30px;
+                    background: rgb(239, 239, 239);
+                    text-align: center;
+                    line-height: 30px;
+                    margin-right: 20px;cursor:pointer;"
+                    :style="{background:isQuality == '2' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isQuality == '2' ? '#3a62d7' : '#4f4f4f'}"
+                  @click="clickQualityNo">不满意</div>
+              </div>
+            </div>
+            <div>
+              <p>2.您对本次维修的安全方面满意吗？</p>
+              <div style="display:flex;">
+                <div 
+                  style="width: 150px;
+                    border-radius: 5px;
+                    height: 30px;
+                    background: rgb(239, 239, 239);
+                    text-align: center;
+                    line-height: 30px;
+                    margin-right: 20px;cursor:pointer;"
+                    :style="{background:isSafe == '1' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isSafe == '1' ? '#3a62d7' : '#4f4f4f'}"
+                    @click="clickSafeYes"
+                  >满意</div>
+                <div
+                  style="width: 150px;
+                    border-radius: 5px;
+                    height: 30px;
+                    background: rgb(239, 239, 239);
+                    text-align: center;
+                    line-height: 30px;
+                    margin-right: 20px;cursor:pointer;"
+                    :style="{background:isSafe == '2' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isSafe == '2' ? '#3a62d7' : '#4f4f4f'}"
+                    @click="clickSafeNo"
+                  >不满意</div>
+              </div>
+            </div>
+            <div>
+              <p>3.您对本次维修的时效方面满意吗？</p>
+              <div style="display:flex;margin-bottom:30px;">
+                <div 
+                  style="width: 150px;
+                    border-radius: 5px;
+                    height: 30px;
+                    background: rgb(239, 239, 239);
+                    text-align: center;
+                    line-height: 30px;
+                    margin-right: 20px;cursor:pointer;"
+                    :style="{background:isTime == '1' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isTime == '1' ? '#3a62d7' : '#4f4f4f'}"
+                    @click="clickTimeYes"
+                  >满意</div>
+                <div
+                  style="width: 150px;
+                    border-radius: 5px;
+                    height: 30px;
+                    background: rgb(239, 239, 239);
+                    text-align: center;
+                    line-height: 30px;
+                    margin-right: 20px;cursor:pointer;"
+                    :style="{background:isTime == '2' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isTime == '2' ? '#3a62d7' : '#4f4f4f'}"
+                    @click="clickTimeNo"
+                    >不满意</div>
+              </div>
+            </div>
+          </div>
+          <div v-show="rowStatus == 3 || isEvalute">
+            <div
+              style="
+                color: #101010;
+                font-size: 20px;
+                font-weight: 550;
+                margin-bottom: 20px;
+              "
+            >
+              签名
+            </div>
+            <avue-sign ref="sign"></avue-sign>
+            <el-button @click="clearName">清空</el-button>
+            <el-button @click="confirmName">确定</el-button>
+            <el-form-item label="签名人" prop="personName">
+              <el-input
+                placeholder="请输入签名人"
+                v-model="detailForm.personName"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="签名时间" prop="time">
+              <el-date-picker
+                v-model="detailForm.time"
+                type="datetime"
+                style="width:100%;"
+                placeholder="请选择签名时间">
+              </el-date-picker>
+            </el-form-item>
+          </div>
         </el-form>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="handleCancel">关闭</el-button>
+        <el-button @click="handleClose">关闭</el-button>
         <el-button type="primary" @click="handleConfirm">评价并签字</el-button>
       </span>
     </el-dialog>
@@ -587,7 +715,6 @@ export default {
       },
       data: [],
       videoList: "", //上传成功的视频
-
       form2Option: {
         emptyBtn: false,
         submitBtn: false,
@@ -671,6 +798,12 @@ export default {
         ],
       },
       detailForm: {},
+      rowStatus:'',
+      isEvalute:false,
+      isQuality:0,
+      isSafe:0,
+      isTime:0,
+      nameImg:''
     };
   },
   directives: {
@@ -912,6 +1045,11 @@ export default {
         });
       }
     },
+    // 点击关闭按钮
+    handleClose(){
+      this.detailForm = {}
+      this.detailVisible = false
+    },
     // 点击取消按钮
     handleCancel() {
       this.dialogVisible = false;
@@ -1111,6 +1249,50 @@ export default {
       this.dialogVisible = true;
     },
 
+    clickQualityYes(){
+      this.isQuality = 1
+    },
+    clickQualityNo(){
+      this.isQuality = 2
+    },
+    clickSafeYes(){
+      this.isSafe = 1
+    },
+    clickSafeNo(){
+      this.isSafe = 2
+    },
+    clickTimeYes(){
+      this.isTime = 1
+    },
+    clickTimeNo(){
+      this.isTime = 2
+    },
+
+    confirmName(){
+      this.nameImg = this.$refs.sign.submit(80, 50);
+    },
+
+    clearName(){
+     this.$refs.sign.clear()
+     this.nameImg = ''
+    },
+    
+
+    // 点击行内的评价并签字按钮
+    handleEvaluate(row){
+      this.rowStatus = row.operationStatus
+      this.detailVisible = true
+      this.detailForm = row
+      this.isEvalute = true
+    },
+
+    // 查看
+    handleView(row){
+      this.rowStatus = row.operationStatus 
+      this.detailVisible = true
+      this.detailForm = row
+    },
+
     // 点击保存按钮
     handleSave() {
       this.dialogVisible = false;
@@ -1151,6 +1333,8 @@ export default {
     onLoad(page, params = {}) {
       this.data = [
         {
+          addPerson:'张三',
+          addPersonPhone:'13325412312',
           operationNo: "WX-20240820-01",
           deviceName: "通风柜",
           errPosition: "一楼102室",
@@ -1159,6 +1343,7 @@ export default {
           operationDate: "2024-02-15",
           operationStatus: 1,
           finishDate: "2024-02-26",
+          addTime:'2024-02-15 16:00:05',
           errorVideo: "/i/movie.ogg",
           errorImg: [
             "https://api.avuejs.com/imgview/1721789673575.jpg",
@@ -1166,6 +1351,8 @@ export default {
           ],
         },
         {
+          addPerson:'张三',
+          addPersonPhone:'13325412312',
           operationNo: "WX-20240820-01",
           deviceName: "通风柜",
           errPosition: "一楼102室",
@@ -1174,10 +1361,24 @@ export default {
           operationDate: "2024-02-15",
           operationStatus: 2,
           finishDate: "2024-02-26",
+          addTime:'2024-02-15 16:00:05',
           errorVideo: "https://api.avuejs.com/imgview/主动管控页面.mp4",
           errorImg: [],
-        },
+          orderTime:'2024-02-18 15:32:10',
-        {
+          maintainPerson:'李四',
+          maintainName:'通风柜',
+          errorReason:'故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因',
+          dealMethod:'处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法',
+          tableData:[
+            {name:'物料1',money:100.00},
+            {name:'物料2',money:100.00},
+            {name:'物料3',money:58.50},
+            {name:'物料4',money:32.00},
+          ]
+        },
+        {
+          addPerson:'张三',
+          addPersonPhone:'13325412312',
           operationNo: "WX-20240820-01",
           deviceName: "通风柜",
           errPosition: "一楼102室",
@@ -1186,8 +1387,20 @@ export default {
           operationDate: "2024-02-15",
           operationStatus: 3,
           finishDate: "2024-02-26",
+          addTime:'2024-02-15 16:00:05',
           errorVideo: "https://api.avuejs.com/imgview/主动管控页面.mp4",
           errorImg: [],
+          orderTime:'2024-02-18 15:32:10',
+          maintainPerson:'李四',
+          maintainName:'通风柜',
+          errorReason:'故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因',
+          dealMethod:'处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法',
+          tableData:[
+            {name:'物料1',money:100.00},
+            {name:'物料2',money:100.00},
+            {name:'物料3',money:58.50},
+            {name:'物料4',money:32.00},
+          ]
         },
       ];
       this.loading = false;