🎈 perf: 界面优化

klp-ui/src/views/mes/is/inspectionTask/index.vue

@@ -1,69 +1,34 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
       <el-form-item label="任务单号" prop="taskNo">
-        <el-input
-          v-model="queryParams.taskNo"
-          placeholder="请输入任务单号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="关联委托单ID" prop="commissionId">
-        <el-input
-          v-model="queryParams.commissionId"
-          placeholder="请输入关联委托单ID"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.taskNo" placeholder="请输入任务单号" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="负责人" prop="assignedTo">
-        <el-input
-          v-model="queryParams.assignedTo"
-          placeholder="请输入负责人"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <user-select v-model="queryParams.assignedTo" placeholder="请选择负责人" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="任务开始时间" prop="startTime">
-        <el-date-picker clearable
-          v-model="queryParams.startTime"
-          type="date"
-          value-format="yyyy-MM-dd"
+        <el-date-picker clearable v-model="queryParams.startTime" type="date" value-format="yyyy-MM-dd"
           placeholder="请选择任务开始时间">
         </el-date-picker>
       </el-form-item>
       <el-form-item label="任务完成时间" prop="endTime">
-        <el-date-picker clearable
-          v-model="queryParams.endTime"
-          type="date"
-          value-format="yyyy-MM-dd"
+        <el-date-picker clearable v-model="queryParams.endTime" type="date" value-format="yyyy-MM-dd"
           placeholder="请选择任务完成时间">
         </el-date-picker>
       </el-form-item>
       <el-form-item label="检验结果" prop="result">
-        <el-input
-          v-model="queryParams.result"
-          placeholder="请输入检验结果"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.result" placeholder="请输入检验结果" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="检验结论" prop="conclusion">
-        <el-input
-          v-model="queryParams.conclusion"
-          placeholder="请输入检验结论"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.conclusion" placeholder="请输入检验结论" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="优先级" prop="priority">
-        <el-input
-          v-model="queryParams.priority"
-          placeholder="请输入优先级"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <!-- <el-input v-model="queryParams.priority" placeholder="请输入优先级" clearable @keyup.enter.native="handleQuery" /> -->
+         <el-select v-model="queryParams.priority" placeholder="请选择优先级">
+            <el-option label="普通" value="1" />
+            <el-option label="紧急" value="2" />
+         </el-select>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -73,52 +38,28 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >新增</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-        >修改</el-button>
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
+          @click="handleUpdate">修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-        >删除</el-button>
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
+          @click="handleDelete">删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-        >导出</el-button>
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="inspectionTaskList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="任务ID" align="center" prop="taskId" v-if="false"/>
+      <el-table-column label="任务ID" align="center" prop="taskId" v-if="false" />
       <el-table-column label="任务单号" align="center" prop="taskNo" />
-      <el-table-column label="关联委托单ID" align="center" prop="commissionId" />
-      <el-table-column label="负责人" align="center" prop="assignedTo" />
+      <!-- <el-table-column label="关联委托单ID" align="center" prop="commissionId" /> -->
+      <el-table-column label="负责人" align="center" prop="nickName" />
       <el-table-column label="任务开始时间" align="center" prop="startTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
@@ -132,70 +73,55 @@
       <el-table-column label="检验结果" align="center" prop="result" />
       <el-table-column label="检验结论" align="center" prop="conclusion" />
       <el-table-column label="状态" align="center" prop="status" />
-      <el-table-column label="优先级" align="center" prop="priority" />
+      <el-table-column label="优先级" align="center" prop="priority">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.priority == '1'" type="success">普通</el-tag>
+          <el-tag v-else type="danger">紧急</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+          <el-button size="mini" type="text" icon="el-icon-document" @click="handleResult(scope.row)">录入结果</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
     <!-- 添加或修改检验任务表对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="任务单号" prop="taskNo">
           <el-input v-model="form.taskNo" placeholder="请输入任务单号" />
         </el-form-item>
-        <el-form-item label="关联委托单ID" prop="commissionId">
-          <el-input v-model="form.commissionId" placeholder="请输入关联委托单ID" />
-        </el-form-item>
         <el-form-item label="负责人" prop="assignedTo">
-          <el-input v-model="form.assignedTo" placeholder="请输入负责人" />
+          <user-select v-model="form.assignedTo" placeholder="请选择负责人" />
         </el-form-item>
         <el-form-item label="任务开始时间" prop="startTime">
-          <el-date-picker clearable
-            v-model="form.startTime"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
+          <el-date-picker clearable v-model="form.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
             placeholder="请选择任务开始时间">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="任务完成时间" prop="endTime">
-          <el-date-picker clearable
-            v-model="form.endTime"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
+        <!-- <el-form-item label="任务完成时间" prop="endTime">
+          <el-date-picker clearable v-model="form.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
             placeholder="请选择任务完成时间">
           </el-date-picker>
-        </el-form-item>
-        <el-form-item label="检验结果" prop="result">
+        </el-form-item> -->
+        <!-- <el-form-item label="检验结果" prop="result">
           <el-input v-model="form.result" placeholder="请输入检验结果" />
         </el-form-item>
         <el-form-item label="检验结论" prop="conclusion">
           <el-input v-model="form.conclusion" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="优先级" prop="priority">
-          <el-input v-model="form.priority" placeholder="请输入优先级" />
+          <el-select v-model="form.priority" placeholder="请选择优先级">
+            <el-option label="普通" value="1" />
+            <el-option label="紧急" value="2" />
+          </el-select>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
@@ -206,17 +132,36 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="检验结果" :visible.sync="resultDialogVisible" width="500px">
+      <el-form ref="resultForm" :model="resultForm" :rules="resultRules" label-width="120px">
+        <el-form-item label="检验结果" prop="result">
+          <el-input v-model="resultForm.result" placeholder="请输入检验结果" />
+        </el-form-item>
+        <el-form-item label="检验结论" prop="conclusion">
+          <el-input v-model="resultForm.conclusion" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitResult">确 定</el-button>
+        <el-button @click="cancelResult">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { listInspectionTask, getInspectionTask, delInspectionTask, addInspectionTask, updateInspectionTask } from "@/api/mes/is/inspectionTask";
+import UserSelect from "@/components/KLPService/UserSelect";
 
 export default {
   name: "InspectionTask",
+  components: {
+    UserSelect
+  },
   data() {
     return {
-      // 按钮loading
+      // 按钮loading  
       buttonLoading: false,
       // 遮罩层
       loading: true,
@@ -254,11 +199,25 @@ export default {
       form: {},
       // 表单校验
       rules: {
+      },
+      resultDialogVisible: false,
+      resultForm: {},
+      resultRules: {
+        result: [{ required: true, message: "请输入检验结果", trigger: "blur" }],
+        conclusion: [{ required: true, message: "请输入检验结论", trigger: "blur" }]
       }
     };
   },
-  created() {
-    this.getList();
+  watch: {
+    "$route.query.commissionId": {
+      handler(newVal) {
+        if (newVal) {
+          this.queryParams.commissionId = newVal;
+          this.getList();
+        }
+      },
+      immediate: true
+    }
   },
   methods: {
     /** 查询检验任务表列表 */
@@ -280,7 +239,7 @@ export default {
       this.form = {
         taskId: undefined,
         taskNo: undefined,
-        commissionId: undefined,
+        commissionId: this.$route.query.commissionId,
         assignedTo: undefined,
         startTime: undefined,
         endTime: undefined,
@@ -310,7 +269,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.taskId)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -331,6 +290,10 @@ export default {
         this.title = "修改检验任务表";
       });
     },
+    handleResult(row) {
+      this.resultDialogVisible = true;
+      this.resultForm = row;
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
@@ -376,7 +339,30 @@ export default {
       this.download('is/inspectionTask/export', {
         ...this.queryParams
       }, `inspectionTask_${new Date().getTime()}.xlsx`)
+    },
+    cancelResult() {
+      this.resultDialogVisible = false;
+      this.resetForm("resultForm");
+    },
+    submitResult() {
+      this.$refs["resultForm"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          const payload = {
+            ...this.resultForm,
+            endTime: this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
+            status: '已完成',
+          }
+          updateInspectionTask(payload).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.resultDialogVisible = false;
+            this.getList();
+          }).finally(() => {
+            this.buttonLoading = false;
+          });
+        }
+      });
     }
   }
-};
+}
 </script>