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