From cfa6fbe23b5aea9b400fab78e04239b64d0dda92 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期六, 24 八月 2024 18:44:35 +0800
Subject: [PATCH] 工单下发分页优化

---
 src/views/system/work-order/distribute/index.vue |  363 ++++++++++++++++++++++++++++++++++++++++++++-------
 1 files changed, 308 insertions(+), 55 deletions(-)

diff --git a/src/views/system/work-order/distribute/index.vue b/src/views/system/work-order/distribute/index.vue
index 0a0f18c..5bd701e 100644
--- a/src/views/system/work-order/distribute/index.vue
+++ b/src/views/system/work-order/distribute/index.vue
@@ -2,66 +2,102 @@
   <div class="row">
     <el-row type="flex" justify="left">
       <el-col :span="24" style="position: relative">
-        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+        <el-menu :default-active="activeIndex" class="el-menu" mode="horizontal" @select="handleSelect">
           <el-menu-item index="0" @click="changeUnit(null, '鍏ㄩ儴')">
-            鍏ㄩ儴鍗曚綅
+            鍏ㄩ儴鍗曚綅锛坽{ totalWorkOrders }}锛�
           </el-menu-item>
-          <el-menu-item index="1">
-            鑷祦浜曡繍缁村崟浣�(70/70)
+          <el-menu-item :index="index + 1" v-for="(item, index) in unitList" :key="index" @click="changeUnit(item.id, item.value)">
+            {{ item.unitName }}锛坽{ item.workOrderCount }}锛�
           </el-menu-item>
-          <el-menu-item index="2">
-            澶у畨杩愮淮(50/50)
-          </el-menu-item>
-          <el-menu-item index="3">瀵岄『杩愮淮鍗曚綅(20/70)</el-menu-item>
-          <el-menu-item index="4">楂樻柊杩愮淮鍗曚綅(15/40)</el-menu-item>
-          <el-menu-item index="5">鑽e幙杩愮淮鍗曚綅(90/90)</el-menu-item>
-          <el-menu-item index="6">璐′簳杩愮淮鍗曚綅(45/45)</el-menu-item>
-          <el-menu-item index="7">娌挎哗杩愮淮鍗曚綅(70/70)</el-menu-item>
         </el-menu>
-        <el-tooltip class="item" effect="dark" content="鑷姩涓嬪彂璁剧疆" placement="left">
-          <el-button class="setting" style="" type="success" icon="el-icon-s-tools" circle></el-button>
-        </el-tooltip>
       </el-col>
     </el-row>
 
-    <el-row class="op-warp" type="flex" justify="left" >
-      <el-col :span="24">
-        <el-button size="small" type="info" @click="selectedDistribute" class="op">涓嬪彂閫変腑宸ュ崟</el-button>
-        <el-button size="small" type="danger" @click="allDistribute" class="op">鍏ㄩ儴涓嬪彂</el-button>
+    <el-row class="op-warp">
+      <el-row v-show="showSearch">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+          <el-form-item label="鍏抽敭璇�" prop="keyword">
+            <el-input
+              v-model="queryParams.keyword"
+              placeholder="鍏抽敭璇嶆悳绱�"
+              clearable
+              @keyup.enter.native="page"
+              @clear="page"
+            />
+          </el-form-item>
+          <el-form-item label="鏁呴殰绫诲瀷" prop="errorTypeList">
+            <el-select v-model="queryParams.errorTypeList" multiple placeholder="鏁呴殰绫诲瀷" clearable @change="page" @clear="page">
+              <el-option v-for="dict in dict.type.error_type"
+                         :value="dict.value"
+                         :label="dict.label"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="涓嬪彂鐘舵��" prop="status">
+            <el-select v-model="queryParams.status" @change="page" placeholder="涓嬪彂鐘舵��" clearable>
+              <el-option label="鏈笅鍙�" value="WAIT_DISTRIBUTE"/>
+              <el-option label="宸蹭笅鍙�" value="DISTRIBUTED"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="small" @click="page">鎼滅储</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+
+      <el-row>
+        <el-button size="mini" plain type="info" @click="selectedDistribute" class="op">涓嬪彂閫変腑宸ュ崟</el-button>
+        <el-popconfirm
+          @confirm="allDistribute"
+          title="纭畾瑕佷笅鍙戞墍鏈夊伐鍗曞悧锛�"
+        >
+          <el-button size="mini" plain type="danger" class="op" slot="reference">鍏ㄩ儴涓嬪彂</el-button>
+        </el-popconfirm>
+
         <el-popover
           class="op"
           placement="right"
           width="300px"
           trigger="click">
-          <span style="font-weight: bold;font-size: 16px">蹇�熶笅鍙�</span>
+          <span style="font-weight: bold;font-size: 16px">蹇嵎涓嬪彂</span>
           <el-form ref="fastDistributeForm" :model="fastDistributeForm" :rules="fastDistributeRules" label-width="80px">
             <el-form-item label="蹇嵎鏂瑰紡" prop="fastWay">
-              <el-radio v-model="fastDistributeForm.fastWay" label="0">鏈�杩�30鍒嗛挓</el-radio>
-              <el-radio v-model="fastDistributeForm.fastWay" label="01">鏈�杩�1灏忔椂</el-radio>
-              <el-radio v-model="fastDistributeForm.fastWay" label="10">鏈�杩�2灏忔椂</el-radio>
-              <el-radio v-model="fastDistributeForm.fastWay" label="11">鏈�杩�1澶�</el-radio>
-              <el-radio v-model="fastDistributeForm.fastWay" label="101">鑷畾涔�</el-radio>
+              <el-radio v-model="fastDistributeForm.fastWay" label="LAST_HALF_HOUR">鏈�杩�30鍒嗛挓</el-radio>
+              <el-radio v-model="fastDistributeForm.fastWay" label="LAST_HOUR">鏈�杩�1灏忔椂</el-radio>
+              <el-radio v-model="fastDistributeForm.fastWay" label="LAST_TWO_HOUR">鏈�杩�2灏忔椂</el-radio>
+              <el-radio v-model="fastDistributeForm.fastWay" label="LAST_DAY">鏈�杩�1澶�</el-radio>
+              <el-radio v-model="fastDistributeForm.fastWay" label="CUSTOM">鑷畾涔�</el-radio>
             </el-form-item>
-            <el-form-item v-if="fastDistributeForm.fastWay === '101'" label="鏃堕棿鑼冨洿">
+            <el-form-item v-if="fastDistributeForm.fastWay === 'CUSTOM'" label="鏃堕棿鑼冨洿">
               <el-date-picker
                 style="width: 100%"
                 v-model="fastTimeRange"
                 type="datetimerange"
                 range-separator="鑷�"
                 start-placeholder="寮�濮嬫棩鏈�"
+                value-format="yyyy-MM-dd HH:mm:ss"
                 end-placeholder="缁撴潫鏃ユ湡">
               </el-date-picker>
             </el-form-item>
+            <el-form-item label="鏁呴殰绫诲瀷" prop="errorType">
+              <el-select v-model="fastDistributeForm.errorType" multiple>
+                <el-option v-for="dict in dict.type.error_type"
+                           :value="dict.value"
+                           :key="dict.value"
+                           :label="dict.label"/>
+              </el-select>
+            </el-form-item>
             <el-form-item label="鏁伴噺闄愬埗" prop="fastNumLimit">
-              <el-input v-model="fastDistributeForm.fastNumLimit" size="small" type="number" placeholder="姝ゆ宸ュ崟涓嬪彂鏈�澶ф暟閲�"></el-input>
+              <el-input v-model="fastDistributeForm.fastNumLimit" type="number" placeholder="姝ゆ宸ュ崟涓嬪彂鏈�澶ф暟閲�"></el-input>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" size="small" @click="fastDistribute">绔嬪嵆涓嬪彂</el-button>
             </el-form-item>
           </el-form>
-          <el-button slot="reference" type="primary" size="small">蹇嵎涓嬪彂</el-button>
+          <el-button slot="reference" type="primary" size="mini" plain>蹇嵎涓嬪彂</el-button>
         </el-popover>
-      </el-col>
+        <el-button size="mini" plain type="success" @click="handleAdd">鎵嬪姩鏂板宸ュ崟</el-button>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="page"></right-toolbar>
+      </el-row>
     </el-row>
 
     <el-row class="content-warp" type="flex" justify="left">
@@ -69,10 +105,22 @@
         <el-table v-loading="loading" :data="workOrderList" @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55" align="center" />
           <el-table-column label="宸ュ崟鍙�" align="center" prop="workOrderNo"/>
-          <el-table-column label="杩愮淮鍗曚綅" align="center" prop="unitName"/>
-          <el-table-column label="宸ュ崟鏉ユ簮" align="center" prop="source"/>
+          <el-table-column label="鏁呴殰鐐逛綅" align="center" prop="source">
+            <template slot-scope="scope">
+              <el-popover
+                placement="right"
+                :title="scope.row.important ? '閲嶇偣鐐逛綅': '姝e父鐐逛綅'"
+                width="200"
+                trigger="hover">
+                <span :class="{important: scope.row.important}" slot="reference">{{ scope.row.source }}</span>
+              </el-popover>
+            </template>
+          </el-table-column>
           <el-table-column label="鏁呴殰绫诲瀷" align="center" prop="errorType"/>
+          <el-table-column label="杩愮淮鍗曚綅" align="center" prop="unitName"/>
           <el-table-column label="浜х敓鏃堕棿" align="center" prop="createTime"/>
+          <el-table-column v-if="queryParams.status === 'DISTRIBUTED'" label="涓嬪彂浜�" align="center" prop="realName"/>
+          <el-table-column v-if="queryParams.status === 'DISTRIBUTED'" label="涓嬪彂鏃堕棿" align="center" prop="distributeTime"/>
         </el-table>
 
         <pagination
@@ -85,14 +133,79 @@
       </el-col>
 
     </el-row>
+
+    <!-- 娣诲姞鎴栦慨鏀广�愯濉啓鍔熻兘鍚嶇О銆戝璇濇 -->
+    <el-dialog :title="detailName" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="杩愮淮鍗曚綅" prop="unitId">
+          <el-select v-model="form.unitId" placeholder="璇烽�夋嫨">
+            <el-option
+              v-for="item in unitList"
+              :key="item.id"
+              :label="item.unitName"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="宸ュ崟鏉ユ簮" prop="source">
+          <el-select
+            v-model="form.source"
+            filterable
+            remote
+            reserve-keyword
+            placeholder="璇烽�夋嫨鏉ユ簮"
+            :remote-method="remoteGetPoints"
+            @change="setPointId"
+            :loading="selectLoading">
+            <el-option
+              v-for="item in pointList"
+              :key="item.id"
+              :label="item.value"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="鏁呴殰绫诲瀷" prop="errorType">
+          <el-select v-model="form.errorType" multiple>
+            <el-option v-for="dict in dict.type.error_type"
+                       :value="dict.value"
+                       :key="dict.value"
+                       :label="dict.label"/>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">鍙� 娑�</el-button>
+        <el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
+import {distributeWorkOrder, fastDistribute, addWorkOrder, updateWorkOrder, selectedIdsDistribute} from '@/api/platform/work-order'
+import {workList} from "@/api/platform/unit";
+import { pointSelectData } from "@/api/platform/point";
 export default {
+  dicts: ['error_type'],
   name: 'index',
   data() {
     return {
+      showSearch: true,
+      selectedIdsDistributeForm: {
+        ids: [],
+        unitId: null
+      },
+      unitList: [],
+      settingForm: {
+        // 绂荤嚎
+        outLine: null,
+        // 瑙嗛鍙敤
+        videoQuality: "",
+        // 瑙嗛鏍囨敞
+        videoLabel: ""
+      },
       // 褰撳墠杩愮淮鍗曚綅
       unitId: null,
       unitName: "",
@@ -102,22 +215,40 @@
       fastTimeRange: [],
       // 涓嬪彂
       fastDistributeForm: {
-        fastWay: '',
+        fastWay: null,
         fastNumLimit: null,
         start: null,
         end: null,
         unitId: null
       },
+      // 鑷姩鐢熸垚宸ュ崟瑙勫垯
+      settingRules: {
+        outLine: [
+          { required: true, message: "璇峰~鍐欑偣浣嶇绾挎椂闀�", trigger: "blur" }
+        ],
+        videoQuality: [
+          { required: true, message: "璇峰~鍐欒棰戝彲鐢ㄧ▼搴�", trigger: "change" }
+        ],
+        videoLabel: [
+          { required: true, message: "璇峰~鍐欑偣瑙嗛鏍囨敞鍑嗙‘鐜�", trigger: "blur" }
+        ],
+      },
       // 涓嬪彂琛ㄥ崟楠岃瘉
       fastDistributeRules: {
         fastWay: [
-          { required: true, message: "璇烽�夋嫨蹇�熷垎鍙戞柟寮�", trigger: "change" }
+          { required: true, message: "璇烽�夋嫨蹇�熷垎鍙戞柟寮�", trigger: "blur" }
         ],
         fastNumLimit: [
-          { required: true, message: "璇疯緭鍏ュ揩閫熷垎鍙戞暟閲忛檺鍒�", trigger: "change" }
+          { required: true, message: "璇疯緭鍏ュ揩閫熷垎鍙戞暟閲忛檺鍒�", trigger: "blur" }
+        ],
+        errorType: [
+          { required: true, message: "璇锋晠闅滅被鍨�", trigger: "blur" }
         ],
       },
       queryParams: {
+        unitId: null,
+        keyword: '',
+        status: 'WAIT_DISTRIBUTE',
         pageNum: 1,
         pageSize: 10,
       },
@@ -128,13 +259,71 @@
       activeIndex: '0',
       loading: false,
       workOrderList: [],
+      // 寮瑰嚭灞傛爣棰�
+      title: "",
+      // 鏄惁鏄剧ず寮瑰嚭灞�
+      open: false,
+      // 琛ㄥ崟鍙傛暟
+      form: {
+      },
+      // 涓嬫媺鍔犺浇
+      selectLoading: false,
+      // 鐐逛綅list
+      pointList: [],
+      // 琛ㄥ崟鏍¢獙
+      rules: {
+        source: [
+          { required: true, message: "宸ュ崟鏉ユ簮涓嶈兘涓虹┖", trigger: "blur" }
+        ],
+        workOrderNo: [
+          { required: true, message: "宸ュ崟鍙蜂笉鑳戒负绌�", trigger: "blur" }
+        ],
+        unitId: [
+          { required: true, message: "杩愮淮鍗曚綅涓嶈兘涓虹┖", trigger: "blur" }
+        ],
+        errorType: [
+          { required: true, message: "璇烽�夋嫨鏁呴殰绫诲瀷", trigger: "blur" }
+        ],
+      }
     }
   },
+  mounted() {
+    this.page();
+  },
+  computed: {
+    totalWorkOrders() {
+      return this.unitList.reduce((total, item) => total + item.workOrderCount, 0);
+    },
+  },
   methods: {
+    setPointId(selectedValue) {
+      const selectedItem = this.pointList.find(item => item.value === selectedValue);
+      this.form.serialNumber = selectedItem.id
+    },
+    submitSetting() {
+      this.$refs['settingForm'].validate((valid) => {
+        if (valid) {
+          this.$modal.msgSuccess("淇濆瓨鎴愬姛")
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    page() {
+      this.loading = true;
+      this.selectUnit();
+      distributeWorkOrder(this.queryParams).then(res => {
+        this.workOrderList = res.data.records;
+        this.total = res.total;
+        this.loading = false;
+      })
+    },
     changeUnit(unitId, unitName) {
       this.unitId = unitId;
+      this.queryParams.unitId = unitId;
       this.unitName = unitName;
-      // todo 瑙﹀彂鏁版嵁鏌ヨ
+      this.page()
     },
     clearFastDistributeForm() {
       this.fastDistributeForm.fastWay = ''
@@ -142,34 +331,28 @@
       this.fastDistributeForm.end = null
       this.fastDistributeForm.fastNumLimit = null
       this.fastTimeRange = []
+      this.fastDistributeForm.errorType = null
     },
-    allDis() {},
     // 鍏ㄩ儴涓嬪彂
     allDistribute() {
-      this.$modal.confirm("纭畾瑕佷笅鍙�" + (this.unitId ? this.unitName + "涓嬬殑" : "鎵�鏈夊伐鍗�") + "鍚楋紵").then(function() {
-        return this.allDis();
-      }).then(() => {
-        // this.getList();
-        // this.$modal.msgSuccess("鍒犻櫎鎴愬姛");
-      }).catch(() => {});
+      this.selectedIdsDistributeForm.unitId = this.unitId
+      selectedIdsDistribute(this.selectedIdsDistributeForm).then(res => {
+        this.$message.success("宸ュ崟涓嬪彂鎴愬姛")
+        this.page();
+      })
     },
     // 蹇�熶笅鍙�
     fastDistribute() {
       this.$refs['fastDistributeForm'].validate((valid) => {
         if (valid) {
-          // 濡傛灉鏄嚜瀹氫箟鏂瑰紡锛岄偅涔堟椂闂存蹇呭~
-          if (this.fastDistributeForm.fastWay === '101' && !this.fastTimeRange.length > 0) {
-            this.$message.warning("璇烽�夋嫨鏃堕棿鑼冨洿")
-            return false
-          }
-          if (this.fastTimeRange.length > 0) {
-            this.fastDistributeForm.start = this.fastTimeRange[0]
-            this.fastDistributeForm.end = this.fastTimeRange[1]
-          }
+          this.fastDistributeForm.start = this.fastTimeRange[0]
+          this.fastDistributeForm.end = this.fastTimeRange[1]
           this.fastDistributeForm.unitId = this.unitId
-          // todo 鎻愪氦蹇�熷彂甯冭姹�
-        } else {
-          return false
+          fastDistribute(this.fastDistributeForm).then(res => {
+            res.code == 200 ? this.$message.success(res.msg) : this.$message.warning(res.msg)
+            this.clearFastDistributeForm();
+            this.page();
+          })
         }
       })
     },
@@ -179,7 +362,13 @@
         this.$message.warning("璇峰厛閫夋嫨瑕佷笅鍙戠殑宸ュ崟")
         return
       }
-      // todo 涓嬪彂宸ュ崟
+      this.selectedIdsDistributeForm.unitId = this.unitId;
+      this.selectedIdsDistributeForm.ids = this.multipleSelection;
+      selectedIdsDistribute(this.selectedIdsDistributeForm).then(res => {
+        this.$message.success("宸ュ崟涓嬪彂鎴愬姛")
+        this.selectedIdsDistributeForm.ids = [];
+        this.page();
+      })
     },
     handleSelect(key, keyPath) {
       console.log(key, keyPath);
@@ -191,11 +380,74 @@
     handleSelectionChange(selection) {
       this.multipleSelection = selection.map(item => item.id)
     },
+    /** 鏂板鎸夐挳鎿嶄綔 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "娣诲姞鍚堝悓";
+    },
+    // 琛ㄥ崟閲嶇疆
+    reset() {
+      this.form = {};
+      this.resetForm("form");
+    },
+    /** 鎻愪氦鎸夐挳 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateWorkOrder(this.form).then(response => {
+              this.$modal.msgSuccess("淇敼鎴愬姛");
+              this.open = false;
+              this.page();
+            });
+          } else {
+            addWorkOrder(this.form).then(response => {
+              this.$modal.msgSuccess("鏂板鎴愬姛");
+              this.open = false;
+              this.page();
+            });
+          }
+        }
+      });
+    },
+    // 鍙栨秷鎸夐挳
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 杩愮淮鍏徃涓嬫媺鏁版嵁
+    selectUnit() {
+      workList().then(res => {
+        this.unitList = res.data;
+      })
+    },
+    // 杩滅▼鎼滅储鐐逛綅
+    remoteGetPoints(query) {
+      if (query !== '') {
+        this.selectLoading = true;
+        let data = {
+          "keyword": query
+        }
+        pointSelectData(data).then(res => {
+          this.pointList = res.data;
+          this.selectLoading = false;
+        })
+      } else {
+        this.pointList = [];
+      }
+    },
   }
 }
 </script>
 
 <style scoped>
+.important {
+  color: red;
+}
+/deep/ .el-popover__title {
+  margin-bottom: 0px;
+}
 .row {
   padding: 0 20px;
 }
@@ -213,4 +465,5 @@
   top: 10px;
   right:5px
 }
+
 </style>

--
Gitblit v1.8.0