From 4124ccb65f8496e7b935212bb4812b45cc054120 Mon Sep 17 00:00:00 2001 From: zhangzeli <123456> Date: 星期四, 06 一月 2022 17:03:07 +0800 Subject: [PATCH] 优化 --- src/views/your/car-manage/carManage.vue | 654 ++++++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 490 insertions(+), 164 deletions(-) diff --git a/src/views/your/car-manage/carManage.vue b/src/views/your/car-manage/carManage.vue index 5d96e6d..5c60506 100644 --- a/src/views/your/car-manage/carManage.vue +++ b/src/views/your/car-manage/carManage.vue @@ -7,17 +7,16 @@ <div class="search"> <Card> <Row class="operation"> - <Button @click="addRole" type="primary" icon="md-add">娣诲姞瑙掕壊</Button> - <Button @click="delAll" icon="md-trash">鎵归噺鍒犻櫎</Button> + <Button @click="addCar" type="primary" icon="md-add">娣诲姞杞﹁締</Button> <Button @click="init" icon="md-refresh">鍒锋柊</Button> <Button type="dashed" @click="openTip = !openTip">{{ openTip ? "鍏抽棴鎻愮ず" : "寮�鍚彁绀�" }}</Button> <Input - v-model="searchForm.key" + v-model="searchForm.carNo" suffix="ios-search" @on-change="getDataList" - placeholder="杈撳叆鍏抽敭璇嶆悳绱�" + placeholder="杈撳叆杞︾墝鍙锋悳绱�" clearable style="width: 250px" /> @@ -60,26 +59,90 @@ :mask-closable="false" :width="500" > - <Form - ref="roleForm" - :model="roleForm" - :label-width="80" - :rules="roleFormValidate" - > - <FormItem label="瑙掕壊鍚嶇О" prop="name"> - <Input - v-model="roleForm.name" - placeholder="鎸夌収Spring Security绾﹀畾寤鸿浠モ�楻OLE_鈥欏紑澶�" - /> + <Form ref="carForm" :model="carForm" :label-width="80" :rules="carFormValidate"> + <FormItem label="鍝佺墝" prop="brand"> + <Input v-model="carForm.brand"/> </FormItem> - <FormItem label="澶囨敞" prop="description"> - <Input v-model="roleForm.description" /> + <FormItem label="鍨嬪彿" prop="model"> + <Input v-model="carForm.model" /> + </FormItem> + <FormItem label="鎺掗噺" prop="displacement"> + <Input v-model="carForm.displacement" /> + </FormItem> + <Form-item label="璐疆骞翠唤"> + <Row> + <Col span="11"> + <Date-picker @on-change="change1" type="date" + value="yyyy-MM-dd" placeholder="閫夋嫨鏃ユ湡" v-model="carForm.buyYear"></Date-picker> + </Col> + </Row> + </Form-item> + <FormItem label="鐗岀収" prop="carNo"> + <Input v-model="carForm.carNo" /> + </FormItem> + <FormItem label="鍔犳补鍗″彿" prop="addOilCode"> + <Input v-model="carForm.addOilCode" /> + </FormItem> + <FormItem label="鍙告満" prop="userId"> + <Select v-model="carForm.userId" filterable> + <Option v-for="item in userList" :value="item.id" :key="item.id">{{ item.nickname }}</Option> + </Select> + </FormItem> + <FormItem label="閰嶉�佸憳" prop="followUserId"> + <Select v-model="carForm.followUserId" filterable> + <Option v-for="item in driverList" :value="item.id" :key="item.id">{{ item.nickname }}</Option> + </Select> </FormItem> </Form> <div slot="footer"> - <Button type="text" @click="cancelRole">鍙栨秷</Button> - <Button type="primary" :loading="submitLoading" @click="submitRole" + <Button type="text" @click="carRole">鍙栨秷</Button> + <Button type="primary" :loading="submitLoading" @click="submitCar" >鎻愪氦</Button + > + </div> + </Modal> + <Modal :title="modalTitle" v-model="equipmentVisible" :mask-closable="false" :width="1044"> + <Row class="operation" style="padding-bottom: 20px"> + <Button @click="addEquipment" type="primary" icon="md-add">娣诲姞璁惧</Button> + <Button @click="init" icon="md-refresh">鍒锋柊</Button> + </Row> + <Table :loading="loading" border :columns="columns2" :data="data2" ref="table" + sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"> + + + </Table> + </Modal> + <Modal :title="modalTitle" v-model="addEquipmentVisible" :mask-closable="false" :width="500"> + <Form ref="equipmentForm" :model="equipmentForm" :label-width="80" :rules="equipmentFormValidate"> + <FormItem label="璁惧" prop="type"> + <Select v-model="equipmentForm.type"> + <Option :value="0">杞︽満</Option> + <Option :value="1">鎽勫儚鏈�</Option> + <Option :value="2">鎶撴媿鏈�</Option> + <Option :value="3">pad</Option> + </Select> + </FormItem> + <FormItem label="璁惧" prop="status"> + <Select v-model="equipmentForm.status"> + <Option :value="0">姝e父</Option> + <Option :value="1">鍋滅敤</Option> + </Select> + </FormItem> + <FormItem label="缂栧彿" prop="code"> + <Input v-model="equipmentForm.code" /> + </FormItem> + <FormItem label="ip鍦板潃" prop="ip"> + <Input v-model="equipmentForm.ip" /> + </FormItem> + <FormItem label="绔彛鍙�" prop="port"> + <Input v-model="equipmentForm.port" /> + </FormItem> + + </Form> + <div slot="footer"> + <Button type="text" @click="carRole">鍙栨秷</Button> + <Button type="primary" :loading="submitLoading" @click="submitEquipment" + >鎻愪氦</Button > </div> </Modal> @@ -128,22 +191,14 @@ <!-- 鏁版嵁鏉冮檺 --> <Modal :title="modalTitle" - v-model="depModalVisible" + v-model="carModalVisible" :mask-closable="false" :width="500" class="depModal" > - <Alert show-icon - >榛樿鍙煡鐪嬪叏閮ㄦ暟鎹紝鑷畾涔夋暟鎹寖鍥存椂璇峰嬀閫変笅鏂规暟鎹�</Alert - > - <Form :label-width="85"> - <FormItem label="鏁版嵁鑼冨洿"> - <Select v-model="dataType" transfer> - <Option :value="0">鍏ㄩ儴鏁版嵁鏉冮檺</Option> - <Option :value="1">鑷畾涔夋暟鎹潈闄�</Option> - <Option :value="2">鏈儴闂ㄥ強浠ヤ笅鏁版嵁鏉冮檺</Option> - <Option :value="3">鏈儴闂ㄦ暟鎹潈闄�</Option> - </Select> + <Form :label-width="85" ref="removeForm" :model="removeForm"> + <FormItem label="绉婚櫎鍘熷洜" prop="removeReason"> + <Input v-model="removeForm.removeReason"/> </FormItem> </Form> <div v-show="dataType == 1" style="margin-top: 15px"> @@ -164,7 +219,7 @@ <Button type="primary" :loading="submitDepLoading" - @click="submitDepEdit" + @click="submitRemove" >鎻愪氦</Button > </div> @@ -174,11 +229,7 @@ <script> import { - getRoleList, getAllPermissionList, - addRole, - editRole, - deleteRole, setDefaultRole, editRolePerm, initDepartment, @@ -186,9 +237,21 @@ editRoleDep, } from "@/api/index"; +import { + getAll, + addCar, + getCarList, + editCar, + deleteCar, + getEquipment, + addEquipment, + getUser, + getDriver, + deleteEquipment, +} from "@/api/open"; import util from "@/libs/util.js"; export default { - name: "role-manage", + name: "car-manage", data() { return { maxHeight: 510, @@ -204,6 +267,9 @@ sortType: "desc", modalType: 0, roleModalVisible: false, + addEquipmentVisible: false, + equipmentVisible: false, + carModalVisible: false, permModalVisible: false, depModalVisible: false, modalTitle: "", @@ -215,11 +281,19 @@ order: "desc", // 榛樿鎺掑簭鏂瑰紡 key: "", }, - roleForm: { - name: "", - description: "", + carForm: { + status : 0 }, - roleFormValidate: { + type: { + type : 0 + }, + equipmentForm: { + status : 0 + }, + removeForm: { + status : 1 + }, + carFormValidate: { name: [ { required: true, message: "瑙掕壊鍚嶇О涓嶈兘涓虹┖", trigger: "change" }, ], @@ -238,35 +312,38 @@ align: "center", }, { - title: "鍝佺墝", - key: "brand", - width: 100, - sortable: true, - }, - { - title: "鍨嬪彿", - key: "model", - width: 100, - sortable: true, - }, - { - title: "鎺掗噺", - key: "displacement", - width: 100, - sortable: true, - }, - { - title: "璐疆骞翠唤", - key: "buyYear", - minWidth: 150, - sortable: true, - }, - { - title: "鐗岀収", + title: "杞︾墝鍙�", key: "carNo", - width: 170, + width: 110, sortable: true, - sortType: "desc", + }, + { + title: "鐘舵��", + key: "status", + width: 100, + sortable: true, + render: (h, params) => { + let re = ""; + if (params.row.status == 0) { + return h("div", [ + h("Badge", { + props: { + status: "success", + text: "姝e父", + }, + }), + ]); + } else if (params.row.status == 1) { + return h("div", [ + h("Badge", { + props: { + status: "error", + text: "绉婚櫎", + }, + }), + ]); + } + }, }, { title: "绉婚櫎鍘熷洜", @@ -275,51 +352,50 @@ sortable: true, }, { - title: "褰撳墠椹鹃┒浜篒D", - key: "userId", + title: "鍙告満", + key: "nickName", width: 100, - sortable: true, }, { - title: "褰撳墠璺熻溅浜篒D", - key: "followUserId", + title: "閰嶉�佸憳", + key: "followNickName", width: 100, - sortable: true, }, { - title: "璁剧疆涓烘敞鍐岀敤鎴烽粯璁よ鑹�", - key: "defaultRole", - align: "center", - width: 200, + title: "鍝佺墝", + key: "brand", + width: 100, + }, + { + title: "鍨嬪彿", + key: "model", + width: 100, + }, + { + title: "鎺掗噺", + key: "displacement", + width: 100, + }, + { + title: "鍔犳补鍗″彿", + key: "addOilCode", + minWidth: 120, + sortable: true, render: (h, params) => { - if (params.row.defaultRole) { - return h("div", [ - h("Checkbox", { - props: { - value: true, - }, - on: { - "on-change": () => { - this.cancelDefault(params.row); - }, - }, - }), - ]); - } else { - return h("div", [ - h("Checkbox", { - props: { - value: false, - }, - on: { - "on-change": () => { - this.setDefault(params.row); - }, - }, - }), - ]); - } - }, + return h("div",params.row.addOilCode=="undefined" ? '':params.row.addOilCode); + } + }, + { + title: "璐疆骞翠唤", + key: "buyYear", + minWidth: 120, + sortable: true, + }, + { + title: "鐧昏鏃ユ湡", + key: "createTime", + minWidth: 180, + sortable: true, }, { title: "鎿嶄綔", @@ -334,11 +410,11 @@ { on: { click: () => { - this.editPerm(params.row); + this.equipment(params.row); }, }, }, - "鑿滃崟鏉冮檺" + "璁惧" ), h("Divider", { props: { @@ -350,11 +426,11 @@ { on: { click: () => { - this.editDep(params.row); + this.removeCar(params.row); }, }, }, - "鏁版嵁鏉冮檺" + "绉婚櫎杞﹁締" ), h("Divider", { props: { @@ -392,21 +468,165 @@ }, }, ], + columns2: [ + { + type: "selection", + width: 60, + align: "center", + }, + { + type: "index", + width: 60, + align: "center", + }, + { + title: "璁惧绫诲瀷", + key: "type", + width: 130, + sortable: true, + render: (h, params) => { + let re = ""; + if (params.row.type == 0) { + return h("div", [ + h("Badge", { + props: { + text: "杞︽満", + }, + }), + ]); + } else if (params.row.type == 1) { + return h("div", [ + h("Badge", { + props: { + text: "鎽勫儚鏈�", + }, + }), + ]); + }else if (params.row.type == 2) { + return h("div", [ + h("Badge", { + props: { + text: "鎶撴媿鏈�", + }, + }), + ]); + }else if (params.row.type == 3) { + return h("div", [ + h("Badge", { + props: { + text: "pad", + }, + }), + ]); + } + }, + }, + { + title: "缂栧彿", + key: "code", + width: 120, + }, + { + title: "鐘舵��", + key: "status", + width: 120, + sortable: true, + render: (h, params) => { + let re = ""; + if (params.row.status == 0) { + return h("div", [ + h("Badge", { + props: { + status: "success", + text: "姝e父", + }, + }), + ]); + } else if (params.row.status == 1) { + return h("div", [ + h("Badge", { + props: { + status: "error", + text: "鍋滅敤", + }, + }), + ]); + } + }, + }, + { + title: "ip鍦板潃", + key: "ip", + width: 120, + }, + { + title: "绔彛鍙�", + key: "port", + width: 120, + sortable: true, + }, + { + title: "鎿嶄綔", + key: "action", + align: "center", + width: 280, + render: (h, params) => { + return h("div", [ + h( + "a", + { + on: { + click: () => { + this.editEquipment(params.row); + }, + }, + }, + "缂栬緫" + ), + h("Divider", { + props: { + type: "vertical", + }, + }), + h( + "a", + { + on: { + click: () => { + this.removeEquipment(params.row); + }, + }, + }, + "鍒犻櫎" + ), + ]); + }, + }, + ], data: [], + data2: [], total: 0, + total2: 0, permData: [], editRolePermId: "", selectAllFlag: false, depData: [], dataType: 0, + carId: '', + driverList: [], + userList: [], editDepartments: [], + buyYear:'' }; }, + methods: { + change1(e){ + this.buyYear = e; + }, init() { this.getDataList(); // 鑾峰彇鎵�鏈夎彍鍗曟潈闄愭爲 - this.getPermList(); }, renderContent(h, { root, node, data }) { let icon = ""; @@ -463,6 +683,22 @@ this.searchForm.pageSize = v; this.getDataList(); }, + getAllUser(){ + getDriver({type:0}).then((res)=>{ + if (res.success){ + this.userList=res.result; + } + }); + //this.type.type=1; + getDriver({type:1}).then((res)=>{ + if (res.success){ + this.driverList=res.result; + } + }); + this.type.type=0; + console.log(this.userList); + console.log(this.driverList); + }, changeSort(e) { this.searchForm.sort = e.key; this.searchForm.order = e.order; @@ -473,15 +709,21 @@ }, getDataList() { this.loading = true; - getRoleList(this.searchForm).then((res) => { + getCarList(this.searchForm).then((res) => { this.loading = false; if (res.success) { - this.data = res.result.content; - this.total = res.result.totalElements; - if (this.data.length == 0 && this.searchForm.pageNumber > 1) { - this.searchForm.pageNumber -= 1; - this.getDataList(); - } + this.data = res.result.records; + this.total = res.result.total; + } + }); + }, + getEquipmentList(carId) { + this.loading = true; + this.searchForm.carId=carId; + getEquipment(this.searchForm).then((res) => { + this.loading = false; + if (res.success) { + this.data2 = res.result.records; } }); }, @@ -509,16 +751,17 @@ } }); }, - cancelRole() { + carRole() { this.roleModalVisible = false; }, - submitRole() { - this.$refs.roleForm.validate((valid) => { + submitCar() { + this.carForm.buyYear = this.buyYear; + this.$refs.carForm.validate((valid) => { if (valid) { if (this.modalType == 0) { // 娣诲姞 this.submitLoading = true; - addRole(this.roleForm).then((res) => { + addCar(this.carForm).then((res) => { this.submitLoading = false; if (res.success) { this.$Message.success("鎿嶄綔鎴愬姛"); @@ -528,7 +771,7 @@ }); } else { this.submitLoading = true; - editRole(this.roleForm).then((res) => { + editCar(this.carForm).then((res) => { this.submitLoading = false; if (res.success) { this.$Message.success("鎿嶄綔鎴愬姛"); @@ -540,17 +783,83 @@ } }); }, - addRole() { + submitEquipment() { + this.$refs.equipmentForm.validate((valid) => { + this.equipmentForm.carId = this.carId; + if (valid) { + if (this.modalType == 0) { + // 娣诲姞 + this.submitLoading = true; + addEquipment(this.equipmentForm).then((res) => { + this.submitLoading = false; + if (res.success) { + this.$Message.success("鎿嶄綔鎴愬姛"); + this.getEquipmentList(this.carId); + this.addEquipmentVisible = false; + this.getEquipmentList(this.carId); + } + }); + } else { + this.submitLoading = true; + addEquipment(this.equipmentForm).then((res) => { + this.submitLoading = false; + if (res.success) { + this.$Message.success("鎿嶄綔鎴愬姛"); + this.getEquipmentList(this.carId); + this.addEquipmentVisible = false; + } + }); + } + } + + }); + }, + submitRemove(){ + this.$refs.removeForm.validate((valid) => { + if (valid) { + this.submitLoading = true; + editCar(this.removeForm).then((res) => { + this.submitLoading = false; + if (res.success) { + this.$Message.success("鎿嶄綔鎴愬姛"); + this.getDataList(); + this.carModalVisible = false; + } + }); + } + }); + }, + equipment(row) { + this.carId = row.id + this.getEquipmentList(row.id); + this.modalType = 0; + this.modalTitle = "璁惧淇℃伅"; + this.$refs.carForm.resetFields(); + delete this.carForm.id; + this.equipmentVisible = true; + }, + addCar() { + this.getAllUser(); this.modalType = 0; this.modalTitle = "娣诲姞杞﹁締"; - this.$refs.roleForm.resetFields(); - delete this.roleForm.id; + this.$refs.carForm.resetFields(); + delete this.carForm.id; this.roleModalVisible = true; }, + addEquipment() { + this.equipmentForm={}; + this.modalType = 0; + this.modalTitle = "娣诲姞璁惧"; + this.$refs.carForm.resetFields(); + delete this.carForm.id; + this.addEquipmentVisible = true; + }, edit(v) { + this.getAllUser(); + this.buyYear = v.buyYear; this.modalType = 1; - this.modalTitle = "缂栬緫杞﹁締"; - this.$refs.roleForm.resetFields(); + this.modalTitle = "缂栬緫"; + this.$refs.carForm.resetFields(); // 杞崲null涓�"" for (let attr in v) { if (v[attr] == null) { @@ -559,21 +868,70 @@ } let str = JSON.stringify(v); let roleInfo = JSON.parse(str); - this.roleForm = roleInfo; + this.carForm = roleInfo; this.roleModalVisible = true; + }, + editEquipment(v) { + this.modalType = 1; + this.modalTitle = "缂栬緫璁惧"; + this.$refs.equipmentForm.resetFields(); + // 杞崲null涓�"" + for (let attr in v) { + if (v[attr] == null) { + v[attr] = ""; + } + } + let str = JSON.stringify(v); + let roleInfo = JSON.parse(str); + this.equipmentForm = roleInfo; + this.addEquipmentVisible = true; + }, + removeCar(v) { + this.dataType = 0; + this.modalTitle = "绉婚櫎杞﹁締"; + this.$refs.carForm.resetFields(); + // 杞崲null涓�"" + for (let attr in v) { + if (v[attr] == null) { + v[attr] = ""; + } + } + let str = JSON.stringify(v); + let roleInfo = JSON.parse(str); + roleInfo.status=1 + this.removeForm = roleInfo; + this.carModalVisible = true; + }, remove(v) { this.$Modal.confirm({ title: "纭鍒犻櫎", - content: "鎮ㄧ‘璁よ鍒犻櫎杞﹁締 " + v.name + " ?", + content: "鎮ㄧ‘璁よ鍒犻櫎鍚� ", loading: true, onOk: () => { - deleteRole({ ids: v.id }).then((res) => { + deleteCar({ ids: v.id }).then((res) => { this.$Modal.remove(); if (res.success) { this.clearSelectAll(); this.$Message.success("鍒犻櫎鎴愬姛"); this.getDataList(); + } + }); + }, + }); + }, + removeEquipment(v) { + this.$Modal.confirm({ + title: "纭鍒犻櫎", + content: "鎮ㄧ‘璁よ鍒犻櫎鍚� ", + loading: true, + onOk: () => { + deleteEquipment({ ids: v.id }).then((res) => { + this.$Modal.remove(); + if (res.success) { + this.clearSelectAll(); + this.$Message.success("鍒犻櫎鎴愬姛"); + this.getEquipmentList(this.carId); } }); }, @@ -628,7 +986,7 @@ ids += e.id + ","; }); ids = ids.substring(0, ids.length - 1); - deleteRole({ ids: ids }).then((res) => { + deleteCar({ ids: ids }).then((res) => { this.$Modal.remove(); if (res.success) { this.$Message.success("鍒犻櫎鎴愬姛"); @@ -739,38 +1097,6 @@ callback(res.result); } }); - }, - editDep(v) { - this.dataType = 0; - this.editRolePermId = v.id; - this.modalTitle = "鍒嗛厤 " + v.name + " 鐨勬暟鎹潈闄�"; - if (v.dataType) { - this.dataType = v.dataType; - } - // 鍖归厤鍕鹃�� - let roleDepIds = v.departments; - this.editDepartments = roleDepIds; - this.depTreeLoading = true; - initDepartment({ openDataFilter: false }).then((res) => { - this.depTreeLoading = false; - if (res.success) { - res.result.forEach(function (e) { - e.selected = false; - if (e.isParent) { - e.loading = false; - e.children = []; - } - if (e.status == -1) { - e.title = "[宸茬鐢╙ " + e.title; - e.disabled = true; - } - }); - this.depData = res.result; - // 鍒ゆ柇瀛愯妭鐐� - this.checkDepTree(this.depData, roleDepIds); - } - }); - this.depModalVisible = true; }, expandCheckDep(v) { // 鍒ゆ柇灞曞紑瀛愯妭鐐� -- Gitblit v1.9.1