From bb036407bcc0f26a9a0f246aca100d87db2f6e76 Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期四, 20 十月 2022 14:54:30 +0800 Subject: [PATCH] 优化 --- src/components/dispatch/index.vue | 834 +++++++++++++++++++++++++++++++---------------------------- 1 files changed, 435 insertions(+), 399 deletions(-) diff --git a/src/components/dispatch/index.vue b/src/components/dispatch/index.vue index eb46b15..978fe10 100644 --- a/src/components/dispatch/index.vue +++ b/src/components/dispatch/index.vue @@ -1,421 +1,457 @@ <template> - <div class="dispatch"> - <el-form ref="form" :model="dispatch" :rules="rules" label-width="120px"> - <!-- 閫夋嫨璺濈 --> - <el-form-item label="璺濈:" prop="distance"> - <el-radio-group v-model="dispatch.distance"> - <el-radio :label="1">100m浠ュ唴</el-radio> - <el-radio :label="2">300m浠ュ唴</el-radio> - <el-radio :label="3">500m浠ュ唴</el-radio> - <el-radio :label="4">1km浠ュ唴</el-radio> - <el-radio :label="5">2km浠ュ唴</el-radio> - <el-radio :label="6">3km浠ュ唴</el-radio> - </el-radio-group> - </el-form-item> - <!-- 閫夋嫨鎵ф硶杞� --> - <el-form-item label="閫夋嫨鎵ф硶杞�:" prop="enforcementCar"> - <el-select v-model="dispatch.enforcementCar" placeholder="璇烽�夋嫨"> - <el-option v-for="item in carOptions" :key="item.id" :label="item.carNumber" :value="item.id"> - </el-option> - </el-select> - </el-form-item> - <!-- 閫夋嫨浜哄憳 --> - <div class="form-person"> - <!-- 閮ㄩ棬 --> - <el-form-item label="閫夋嫨浜哄憳:" prop="createUser"> - <el-select v-model="dispatch.createUser" placeholder="璇烽�夋嫨閮ㄩ棬" @change="handleTopChange"> - <el-option v-for="item in departOptions" :key="item.id" :label="item.departName" - :value="item.id"> - </el-option> - </el-select> - </el-form-item> - <!-- 涓槦 --> - <el-form-item prop="enforcementTeam" class="person-item"> - <el-select v-model="dispatch.enforcementTeam" placeholder="閫夋嫨涓槦" - :disabled="squadronOptions.length!==0 && squadronOptions?false:true" @change="handleMidChange"> - <el-option v-for="item in squadronOptions" :key="item.id" :label="item.departName" - :value="item.id"> - </el-option> - </el-select> - </el-form-item> - <el-form-item prop='lawEnforcer' class="person-item"> - <!-- 浜哄憳 --> - <el-select v-model="dispatch.lawEnforcer" placeholder="璇烽�夋嫨浜哄憳" - :disabled="personOptions.length !== 0 && personOptions? false:true" @change="handlePerChange"> - <el-option v-for="item in personOptions" :key="item.id" :label="item.username" :value="item.id"> - </el-option> - </el-select> - </el-form-item> - </div> - <div class="form-footer"> - <!-- 鎵ф硶浜哄憳缂栧彿 --> - <el-form-item label="鎵ф硶浜哄憳缂栧彿:" prop="lawEnforcerName"> - <el-input v-model="dispatch.lawEnforcerName" disabled></el-input> - </el-form-item> - <!-- 鎵ф硶浜哄憳鑱旂郴鏂瑰紡 --> - <el-form-item label="鑱旂郴鏂瑰紡:" prop="contactWay"> - <el-input v-model="dispatch.contactWay" disabled></el-input> - </el-form-item> - <el-button type="primary">鍙戦�佺煭淇�</el-button> - </div> - <div class="form-time"> - <el-form-item label="娲鹃仯鎰忚" prop="dispatchOpinion"> - <el-input v-model="dispatch.dispatchOpinion" placeholder="璇疯緭鍏ユ淳閬f剰瑙�"></el-input> - </el-form-item> - <el-form-item label="澶勭疆鏃ユ湡" prop="disposeDate"> - <el-date-picker v-model="dispatch.disposeDate" type="datetime" placeholder="閫夋嫨鏃ユ湡鏃堕棿"> - </el-date-picker> - </el-form-item> - </div> - </el-form> - <div class="map"> - <!-- <MyMap></MyMap> --> - </div> - <div class="footer"> - <el-button type="primary" @click="handleDispatch">纭畾</el-button> - <el-button @click="handleBack">杩斿洖</el-button> - </div> + <div class="dispatch"> + <el-form ref="form" :model="dispatch" :rules="rules" label-width="120px"> + <!-- 閫夋嫨璺濈 --> + <el-form-item label="璺濈:" prop="distance"> + <el-radio-group v-model="dispatch.distance"> + <el-radio :label="1">100m浠ュ唴</el-radio> + <el-radio :label="2">300m浠ュ唴</el-radio> + <el-radio :label="3">500m浠ュ唴</el-radio> + <el-radio :label="4">1km浠ュ唴</el-radio> + <el-radio :label="5">2km浠ュ唴</el-radio> + <el-radio :label="6">3km浠ュ唴</el-radio> + </el-radio-group> + </el-form-item> + <!-- 閫夋嫨鎵ф硶杞� --> + <el-form-item label="閫夋嫨鎵ф硶杞�:" prop="enforcementCar"> + <el-select v-model="dispatch.enforcementCar" placeholder="璇烽�夋嫨"> + <el-option + v-for="item in carOptions" + :key="item.id" + :label="item.carNumber" + :value="item.id" + > + </el-option> + </el-select> + </el-form-item> + <!-- 閫夋嫨浜哄憳 --> + <div class="form-person"> + <!-- 閮ㄩ棬 --> + <el-form-item label="閫夋嫨浜哄憳:" prop="createUser"> + <el-select + v-model="dispatch.createUser" + placeholder="璇烽�夋嫨閮ㄩ棬" + @change="handleTopChange" + > + <el-option + v-for="item in departOptions" + :key="item.id" + :label="item.departName" + :value="item.id" + > + </el-option> + </el-select> + </el-form-item> + <!-- 涓槦 --> + <el-form-item prop="enforcementTeam" class="person-item"> + <el-select + v-model="dispatch.enforcementTeam" + placeholder="閫夋嫨涓槦" + :disabled=" + squadronOptions.length !== 0 && squadronOptions ? false : true + " + @change="handleMidChange" + > + <el-option + v-for="item in squadronOptions" + :key="item.id" + :label="item.departName" + :value="item.id" + > + </el-option> + </el-select> + </el-form-item> + <el-form-item prop="lawEnforcer" class="person-item"> + <!-- 浜哄憳 --> + <el-select + v-model="dispatch.lawEnforcer" + placeholder="璇烽�夋嫨浜哄憳" + :disabled=" + personOptions.length !== 0 && personOptions ? false : true + " + @change="handlePerChange" + > + <el-option + v-for="item in personOptions" + :key="item.id" + :label="item.username" + :value="item.id" + > + </el-option> + </el-select> + </el-form-item> + </div> + <div class="form-footer"> + <!-- 鎵ф硶浜哄憳缂栧彿 --> + <el-form-item label="鎵ф硶浜哄憳缂栧彿:" prop="lawEnforcerName"> + <el-input v-model="dispatch.lawEnforcerName" disabled></el-input> + </el-form-item> + <!-- 鎵ф硶浜哄憳鑱旂郴鏂瑰紡 --> + <el-form-item label="鑱旂郴鏂瑰紡:" prop="contactWay"> + <el-input v-model="dispatch.contactWay" disabled></el-input> + </el-form-item> + <el-button type="primary">鍙戦�佺煭淇�</el-button> + </div> + <div class="form-time"> + <el-form-item label="娲鹃仯鎰忚" prop="dispatchOpinion"> + <el-input + v-model="dispatch.dispatchOpinion" + placeholder="璇疯緭鍏ユ淳閬f剰瑙�" + ></el-input> + </el-form-item> + <el-form-item label="澶勭疆鏃ユ湡" prop="disposeDate"> + <el-date-picker + v-model="dispatch.disposeDate" + type="datetime" + placeholder="閫夋嫨鏃ユ湡鏃堕棿" + value-format="yyyy-MM-dd HH:mm:ss" + > + </el-date-picker> + </el-form-item> + </div> + </el-form> + <div class="map"> + <!-- <MyMap></MyMap> --> </div> + <div class="footer"> + <el-button type="primary" @click="handleDispatch">纭畾</el-button> + <el-button @click="handleBack">杩斿洖</el-button> + </div> + </div> </template> <script> -import MyMap from '@/components/map' -import {parseTime } from '@/utils/index' +import MyMap from "@/components/map"; +import { parseTime } from "@/utils/index"; export default { - components: { - MyMap + components: { + MyMap, + }, + props: ["id", "changeDialog", "refresh", "mytype"], + created() { + // 鍒ゆ柇杞﹁締绫诲瀷 + this.mytype === 1 ? this.getLawCarList() : this.getSoilCarList(); + this.getDepartList(); + }, + data() { + const checkPhone = (rule, value, callback) => { + if (value) { + const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/; + if (!rep.test(value)) { + callback("璇疯緭鍏ユ纭殑鎵嬫満鍙风爜"); + } else { + callback(); + } + } else { + callback(); + } + }; + const checkOpinion = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error("娲鹃仯鎰忚涓嶈兘涓虹┖")); + } + }; + const checkDistance = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error("璺濈涓嶈兘涓虹┖")); + } + }; + const checkTeam = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error("澶勭疆鏃ユ湡涓嶈兘涓虹┖")); + } + }; + const checkPerson = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(); + } + }; + const checkNumber = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(); + } + }; + const checkDepart = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error("璇烽�夋嫨閮ㄩ棬")); + } + }; + return { + dispatch: { + baseCaseId: 0, //妗堜欢id + contactWay: "", //鑱旂郴鏂瑰紡 + dispatchOpinion: "", //澶勭疆鎰忚 + disposeDate: "", //澶勭疆鏃ユ湡 + distance: 0, //璺濈 + enforcementCar: "", //鎵ф硶杞� + enforcementTeam: "", //鎵ф硶涓槦 + lawEnforcer: "", //鎵ф硶浜哄憳 + lawEnforcerName: "", //鎵ф硶缂栧彿, + createUser: null, + }, + rules: { + createUser: [ + { + required: true, + trigger: "change", + validator: checkDepart, + }, + ], + contactWay: [ + { + required: false, + trigger: "blur", + validator: checkPhone, + }, + ], + dispatchOpinion: [ + { required: true, trigger: "change", validator: checkOpinion }, + ], + // distance: [ + // { required: true, trigger: "change", validator: checkDistance }, + // ], + // enforcementTeam: [ + // { required: true, trigger: 'change', validator: checkTeam } + // ], + lawEnforcer: [ + { required: true, trigger: "change", validator: checkPerson }, + ], + lawEnforcerName: [ + { required: false, trigger: "change", validator: checkNumber }, + ], + disposeDate: [ + { + required: true, + trigger: "false", + validator: checkTeam, + }, + ], + }, + carOptions: [ + { + label: "杞﹁締涓�", + value: 1, + }, + { + label: "杞﹁締浜�", + value: 2, + }, + ], + departOptions: [], + carOptions: [ + { + label: "杞﹁締涓�", + value: 1, + }, + { + label: "杞﹁締浜�", + value: 2, + }, + ], + squadronOptions: [], + personOptions: [], + }; + }, + methods: { + // 鎵ц璋冨害 + handleDispatch() { + console.log(this.dispatch); + this.$refs.form.validate((valid) => { + console.log(valid); + if (valid) { + const { dispatch, id } = this; + // dispatch.disposeDate = new Date(); + console.log(id); + dispatch.baseCaseId = id; + console.log(dispatch); + this.$axios({ + method: "post", + url: `sccg/dispatch_handle/dispatch`, + data: dispatch, + }).then((res) => { + this.$message({ + type: res.code === 200 ? "success" : "error", + message: res.code === 200 ? "璋冨害鎴愬姛" : res.message, + }); + this.$emit("changeDialog", { flag: false }); + this.refresh(); + }); + } else { + return false; + } + }); }, - props: ['id', 'changeDialog', 'refresh', 'mytype'], - created() { - // 鍒ゆ柇杞﹁締绫诲瀷 - this.mytype === 1 ? this.getLawCarList() : this.getSoilCarList(); - this.getDepartList(); + // 鍙栨秷璋冨害 + handleBack() { + this.$emit("changeDialog", { flag: false }); }, - data() { - const checkPhone = (rule, value, callback) => { - if (value) { - const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/ - if (!rep.test(value)) { - callback("璇疯緭鍏ユ纭殑鎵嬫満鍙风爜"); - } else { - callback(); - } - } else { - callback() - } - } - const checkOpinion = (rule, value, callback) => { - if (value) { - callback(); - } else { - callback(new Error('娲鹃仯鎰忚涓嶈兘涓虹┖')) - } - } - const checkDistance = (rule, value, callback) => { - if (value) { - callback(); - } else { - callback(new Error('璺濈涓嶈兘涓虹┖')) - } - } - const checkTeam = (rule, value, callback) => { - if (value) { - callback(); - } else { - callback(new Error('澶勭疆鏃ユ湡涓嶈兘涓虹┖')) - } - } - const checkPerson = (rule, value, callback) => { - if (value) { - callback(); - } else { - callback() - } - } - const checkNumber = (rule, value, callback) => { - if (value) { - callback(); - } else { - callback() - } - } - const checkDepart = (rule, value, callback) => { - if (value) { - callback(); - } else { - callback(new Error('璇烽�夋嫨閮ㄩ棬')) - } - } - return { - dispatch: { - baseCaseId: 0,//妗堜欢id - contactWay: "",//鑱旂郴鏂瑰紡 - dispatchOpinion: "",//澶勭疆鎰忚 - disposeDate: "",//澶勭疆鏃ユ湡 - distance: 0,//璺濈 - enforcementCar: '',//鎵ф硶杞� - enforcementTeam: "",//鎵ф硶涓槦 - lawEnforcer: '',//鎵ф硶浜哄憳 - lawEnforcerName: "",//鎵ф硶缂栧彿, - createUser: null, - }, - rules: { - createUser: [ - { - required: true, trigger: 'change', validator: checkDepart - } - ], - contactWay: [ - { - required: false, trigger: 'blur', validator: checkPhone - } - ], - dispatchOpinion: [ - { required: true, trigger: 'change', validator: checkOpinion } - ], - distance: [ - { required: true, trigger: 'change', validator: checkDistance } - ], - // enforcementTeam: [ - // { required: true, trigger: 'change', validator: checkTeam } - // ], - lawEnforcer: [ - { required: true, trigger: 'change', validator: checkPerson } - ], - lawEnforcerName: [ - { required: false, trigger: 'change', validator: checkNumber } - ], - disposeDate: [ - { - required: true, trigger: 'false', validator: checkTeam - } - ] - }, - carOptions: [ - { - label: '杞﹁締涓�', - value: 1, - }, - { - label: '杞﹁締浜�', - value: 2, - }, - ], - departOptions: [ - ], - carOptions: [ - { - label: '杞﹁締涓�', - value: 1, - }, - { - label: '杞﹁締浜�', - value: 2, - }, - ], - squadronOptions: [ - ], - personOptions: [ - - ], - } + // 鑾峰彇鎵ф硶杞﹁締 + getLawCarList() { + this.$axios({ + method: "get", + url: `sccg/car_Manage/query_enforce?current=1&size=1000`, + }).then((res) => { + this.carOptions = res.data.records; + console.log(res, this.carOptions); + }); }, - methods: { - // 鎵ц璋冨害 - handleDispatch() { - console.log(this.dispatch); - this.$refs.form.validate((valid) => { - console.log(valid); - if (valid) { - const { dispatch, id } = this; - dispatch.disposeDate = new Date(); - console.log(id); - dispatch.baseCaseId = id; - console.log(dispatch); - this.$axios({ - method: 'post', - url: `sccg/dispatch_handle/dispatch`, - data: { - ...dispatch, - disposeDate:parseTime(dispatch.disposeDate) - } - }) - .then(res => { - this.$message({ - type: res.code === 200 ? 'success' : 'error', - message: res.code === 200 ? '璋冨害鎴愬姛' : res.message, - }) - this.$emit('changeDialog', { flag: false }); - this.refresh(); - }) - } else { - return false; - } - }) - }, - // 鍙栨秷璋冨害 - handleBack() { - this.$emit('changeDialog', { flag: false }) - }, - // 鑾峰彇鎵ф硶杞﹁締 - getLawCarList() { - this.$axios({ - method: 'get', - url: `sccg/car_Manage/query_enforce?current=1&size=1000` - }) - .then(res => { - this.carOptions = res.data.records; - console.log(res, this.carOptions); - }) - }, - // 鑾峰彇娓e湡杞﹁締 - getSoilCarList() { - this.$axios({ - method: 'get', - url: `sccg/car_Manage/query_slag?current=1&size=1000` - }) - .then(res => { - this.carOptions = res.data.records; - console.log(res); - }) - }, - // 鑾峰彇椤剁骇閮ㄩ棬 - getDepartList() { - this.$axios({ - method: 'get', - url: `sccg/depart/query_father`, - }) - .then(res => { - this.departOptions = res.data; - }) - }, - // 鑾峰彇涓槦 - async getTeamList(id) { - console.log(id); - await this.$axios({ - method: 'get', - url: `sccg/depart/query_father_children?fatherId=${id}` - }) - .then(res => { - this.squadronOptions = res.data; - }) - .catch(err => { - console.log(err); - }) - }, - // 鑾峰彇閮ㄩ棬涓嬬殑鐢ㄦ埛 - async getDepartUserList(id) { - console.log(id); - await this.$axios({ - method: 'get', - url: `sccg/admin/getDepartUser/${id}`, - }) - .then(res => { - console.log(res); - if (res.code === 200) { - this.personOptions = res.data; - } else { - this.personOptions = []; - } - if(this.personOptions.length === 0){ - this.$message({ - type: 'warning', - message: '璇ヤ腑闃熶笅娌℃湁浜哄憳' - }) - } - }) - .catch(err => { - this.$message({ - type: 'error', - message: '璇ラ儴闂ㄤ汉鍛樹笉瓒筹紝璇锋崲涓儴闂�' - }) - }) - }, - // 閮ㄩ棬鏇存敼 - async handleTopChange(id) { - this.dispatch.lawEnforcer = ''; - this.dispatch.enforcementTeam = ''; - this.dispatch.contactWay = ''; - this.dispatch.lawEnforcerName = ''; - await this.getTeamList(id); - // if (this.squadronOptions.length === 0) { - // await this.getDepartUserList(id); - // } - }, - // 涓槦鏇存敼 - async handleMidChange(id) { - this.dispatch.lawEnforcer = ''; - this.dispatch.contactWay = ''; - this.dispatch.lawEnforcerName = ''; - await this.getDepartUserList(id); - }, - // 浜哄憳鏇存敼 - async handlePerChange(id) { - let obj = await this.getLawUser(id); - this.dispatch.lawEnforcerName = obj.nickName; - this.dispatch.contactWay = obj.mobile; - }, - // 鑾峰彇鎵ф硶浜哄憳淇℃伅 - async getLawUser(id) { - let obj = {} - await this.$axios({ - method: 'get', - url: `sccg/admin/${id}` - }) - .then(res => { - obj = res.data; - }) - return obj; - } + // 鑾峰彇娓e湡杞﹁締 + getSoilCarList() { + this.$axios({ + method: "get", + url: `sccg/car_Manage/query_slag?current=1&size=1000`, + }).then((res) => { + this.carOptions = res.data.records; + console.log(res); + }); }, - watch: { - 'squadronOptions.length': { - handler(newval, oldval) { - console.log(newval); - if (newval === 0) { - console.log(1); - this.$message({ - type: 'warning', - message: '璇ラ儴闂ㄤ笅娌℃湁涓槦' - }) - } - }, - deep: true - }, - } -} + // 鑾峰彇椤剁骇閮ㄩ棬 + getDepartList() { + this.$axios({ + method: "get", + url: `sccg/depart/query_father`, + }).then((res) => { + this.departOptions = res.data; + }); + }, + // 鑾峰彇涓槦 + async getTeamList(id) { + console.log(id); + await this.$axios({ + method: "get", + url: `sccg/depart/query_father_children?fatherId=${id}`, + }) + .then((res) => { + this.squadronOptions = res.data; + }) + .catch((err) => { + console.log(err); + }); + }, + // 鑾峰彇閮ㄩ棬涓嬬殑鐢ㄦ埛 + async getDepartUserList(id) { + console.log(id); + await this.$axios({ + method: "get", + url: `sccg/admin/getDepartUser/${id}`, + }) + .then((res) => { + console.log(res); + if (res.code === 200) { + this.personOptions = res.data; + } else { + this.personOptions = []; + } + if (this.personOptions.length === 0) { + this.$message({ + type: "warning", + message: "璇ヤ腑闃熶笅娌℃湁浜哄憳", + }); + } + }) + .catch((err) => { + this.$message({ + type: "error", + message: "璇ラ儴闂ㄤ汉鍛樹笉瓒筹紝璇锋崲涓儴闂�", + }); + }); + }, + // 閮ㄩ棬鏇存敼 + async handleTopChange(id) { + this.dispatch.lawEnforcer = ""; + this.dispatch.enforcementTeam = ""; + this.dispatch.contactWay = ""; + this.dispatch.lawEnforcerName = ""; + await this.getTeamList(id); + // if (this.squadronOptions.length === 0) { + // await this.getDepartUserList(id); + // } + }, + // 涓槦鏇存敼 + async handleMidChange(id) { + this.dispatch.lawEnforcer = ""; + this.dispatch.contactWay = ""; + this.dispatch.lawEnforcerName = ""; + await this.getDepartUserList(id); + }, + // 浜哄憳鏇存敼 + async handlePerChange(id) { + let obj = await this.getLawUser(id); + this.dispatch.lawEnforcerName = obj.nickName; + this.dispatch.contactWay = obj.mobile; + }, + // 鑾峰彇鎵ф硶浜哄憳淇℃伅 + async getLawUser(id) { + let obj = {}; + await this.$axios({ + method: "get", + url: `sccg/admin/${id}`, + }).then((res) => { + obj = res.data; + }); + return obj; + }, + }, + watch: { + "squadronOptions.length": { + handler(newval, oldval) { + console.log(newval); + if (newval === 0) { + console.log(1); + this.$message({ + type: "warning", + message: "璇ラ儴闂ㄤ笅娌℃湁涓槦", + }); + } + }, + deep: true, + }, + }, +}; </script> <style lang="scss" scoped> .dispatch { - padding: 50px 20px 10px; + padding: 50px 20px 10px; - .form-person { - display: flex; + .form-person { + display: flex; - .person-item { - margin-left: -100px; - } + .person-item { + margin-left: -100px; } + } - .form-footer { - display: flex; - align-items: center; - line-height: 40px; + .form-footer { + display: flex; + align-items: center; + line-height: 40px; - .el-button { - margin-bottom: 22px; - margin-left: 40px; - } + .el-button { + margin-bottom: 22px; + margin-left: 40px; } + } - .map { - height: 388px; - width: 100%; - } + .map { + height: 388px; + width: 100%; + } - .footer { - display: flex; - justify-content: flex-end; - padding: 10px 20px; - } + .footer { + display: flex; + justify-content: flex-end; + padding: 10px 20px; + } } </style> \ No newline at end of file -- Gitblit v1.8.0