From ac82481de1ed2421eddbbffc51e4ac6c34ccf61f Mon Sep 17 00:00:00 2001 From: zhangzeli <123456> Date: 星期五, 22 十月 2021 16:07:42 +0800 Subject: [PATCH] 后台车辆管理 --- src/views/your/car-manage/carManage.less | 13 src/views/your/car-manage/carManage.vue | 892 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/api/open.js | 7 3 files changed, 911 insertions(+), 1 deletions(-) diff --git a/src/api/open.js b/src/api/open.js index f76b174..bbbeb5b 100644 --- a/src/api/open.js +++ b/src/api/open.js @@ -40,4 +40,9 @@ // 鍒犻櫎瀹㈡埛绔� export const deleteClient = (params) => { return postRequest('/client/delByIds', params) -} \ No newline at end of file +} + +// 鍒嗛〉鑾峰彇杞﹁締淇℃伅 +export const getCarList = (params) => { + return getRequest('/car/getByPage', params) +} diff --git a/src/views/your/car-manage/carManage.less b/src/views/your/car-manage/carManage.less new file mode 100644 index 0000000..789f8db --- /dev/null +++ b/src/views/your/car-manage/carManage.less @@ -0,0 +1,13 @@ +.permModal { + .ivu-modal-body { + max-height: 560px; + overflow: auto; + } +} + +.depModal { + .ivu-modal-body { + max-height: 500px; + overflow: auto; + } +} \ No newline at end of file diff --git a/src/views/your/car-manage/carManage.vue b/src/views/your/car-manage/carManage.vue new file mode 100644 index 0000000..5d96e6d --- /dev/null +++ b/src/views/your/car-manage/carManage.vue @@ -0,0 +1,892 @@ +<style lang="less"> +@import "@/styles/table-common.less"; +@import "@/styles/drawer-common.less"; +@import "./carManage.less"; +</style> +<template> + <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="init" icon="md-refresh">鍒锋柊</Button> + <Button type="dashed" @click="openTip = !openTip">{{ + openTip ? "鍏抽棴鎻愮ず" : "寮�鍚彁绀�" + }}</Button> + <Input + v-model="searchForm.key" + suffix="ios-search" + @on-change="getDataList" + placeholder="杈撳叆鍏抽敭璇嶆悳绱�" + clearable + style="width: 250px" + /> + </Row> + <Alert show-icon v-show="openTip"> + 宸查�夋嫨 + <span class="select-count">{{ selectList.length }}</span> 椤� + <a class="select-clear" @click="clearSelectAll">娓呯┖</a> + </Alert> + <Table + :loading="loading" + border + :columns="columns" + :data="data" + ref="table" + sortable="custom" + @on-sort-change="changeSort" + @on-selection-change="changeSelect" + ></Table> + <Row type="flex" justify="end" class="page"> + <Page + :current="searchForm.pageNumber" + :total="total" + :page-size="searchForm.pageSize" + @on-change="changePage" + @on-page-size-change="changePageSize" + :page-size-opts="[10, 20, 50]" + size="small" + show-total + show-elevator + show-sizer + ></Page> + </Row> + </Card> + + <!-- 缂栬緫 --> + <Modal + :title="modalTitle" + v-model="roleModalVisible" + :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_鈥欏紑澶�" + /> + </FormItem> + <FormItem label="澶囨敞" prop="description"> + <Input v-model="roleForm.description" /> + </FormItem> + </Form> + <div slot="footer"> + <Button type="text" @click="cancelRole">鍙栨秷</Button> + <Button type="primary" :loading="submitLoading" @click="submitRole" + >鎻愪氦</Button + > + </div> + </Modal> + <!-- 鑿滃崟鏉冮檺 --> + <Drawer + :title="modalTitle" + v-model="permModalVisible" + :mask-closable="false" + :width="500" + draggable + > + <div :style="{ maxHeight: maxHeight }" class="drawer-content"> + <div style="position: relative"> + <Tree + ref="tree" + :data="permData" + show-checkbox + :render="renderContent" + :check-strictly="true" + ></Tree> + <Spin size="large" fix v-if="treeLoading"></Spin> + </div> + </div> + <div class="drawer-footer br"> + <Button + type="primary" + :loading="submitPermLoading" + @click="submitPermEdit" + >鎻愪氦</Button + > + <Button @click="selectTreeAll">鍏ㄩ��/鍙嶉��</Button> + <Select + v-model="openLevel" + @on-change="changeOpen" + style="width: 110px" + transfer + > + <Option value="0">灞曞紑鎵�鏈�</Option> + <Option value="1">鏀跺悎鎵�鏈�</Option> + <Option value="2">浠呭睍寮�涓�绾�</Option> + <Option value="3">浠呭睍寮�涓ょ骇</Option> + </Select> + <Button type="text" @click="cancelPermEdit">鍙栨秷</Button> + </div> + </Drawer> + <!-- 鏁版嵁鏉冮檺 --> + <Modal + :title="modalTitle" + v-model="depModalVisible" + :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> + </FormItem> + </Form> + <div v-show="dataType == 1" style="margin-top: 15px"> + <div style="position: relative"> + <Tree + ref="depTree" + :data="depData" + :load-data="loadData" + @on-toggle-expand="expandCheckDep" + multiple + style="margin-top: 15px" + ></Tree> + <Spin size="large" fix v-if="depTreeLoading"></Spin> + </div> + </div> + <div slot="footer"> + <Button type="text" @click="depModalVisible = false">鍙栨秷</Button> + <Button + type="primary" + :loading="submitDepLoading" + @click="submitDepEdit" + >鎻愪氦</Button + > + </div> + </Modal> + </div> +</template> + +<script> +import { + getRoleList, + getAllPermissionList, + addRole, + editRole, + deleteRole, + setDefaultRole, + editRolePerm, + initDepartment, + loadDepartment, + editRoleDep, +} from "@/api/index"; + +import util from "@/libs/util.js"; +export default { + name: "role-manage", + data() { + return { + maxHeight: 510, + openTip: true, + openLevel: "0", + loading: true, + treeLoading: true, + depTreeLoading: true, + submitPermLoading: false, + submitDepLoading: false, + searchKey: "", + sortColumn: "createTime", + sortType: "desc", + modalType: 0, + roleModalVisible: false, + permModalVisible: false, + depModalVisible: false, + modalTitle: "", + searchForm: { + // 鎼滅储妗嗗垵濮嬪寲瀵硅薄 + pageNumber: 1, // 褰撳墠椤垫暟 + pageSize: 10, // 椤甸潰澶у皬 + sort: "createTime", // 榛樿鎺掑簭瀛楁 + order: "desc", // 榛樿鎺掑簭鏂瑰紡 + key: "", + }, + roleForm: { + name: "", + description: "", + }, + roleFormValidate: { + name: [ + { required: true, message: "瑙掕壊鍚嶇О涓嶈兘涓虹┖", trigger: "change" }, + ], + }, + submitLoading: false, + selectList: [], + columns: [ + { + type: "selection", + width: 60, + align: "center", + }, + { + type: "index", + width: 60, + 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: "鐗岀収", + key: "carNo", + width: 170, + sortable: true, + sortType: "desc", + }, + { + title: "绉婚櫎鍘熷洜", + key: "removeReason", + width: 170, + sortable: true, + }, + { + title: "褰撳墠椹鹃┒浜篒D", + key: "userId", + width: 100, + sortable: true, + }, + { + title: "褰撳墠璺熻溅浜篒D", + key: "followUserId", + width: 100, + sortable: true, + }, + { + title: "璁剧疆涓烘敞鍐岀敤鎴烽粯璁よ鑹�", + key: "defaultRole", + align: "center", + width: 200, + 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); + }, + }, + }), + ]); + } + }, + }, + { + title: "鎿嶄綔", + key: "action", + align: "center", + fixed: "right", + width: 280, + render: (h, params) => { + return h("div", [ + h( + "a", + { + on: { + click: () => { + this.editPerm(params.row); + }, + }, + }, + "鑿滃崟鏉冮檺" + ), + h("Divider", { + props: { + type: "vertical", + }, + }), + h( + "a", + { + on: { + click: () => { + this.editDep(params.row); + }, + }, + }, + "鏁版嵁鏉冮檺" + ), + h("Divider", { + props: { + type: "vertical", + }, + }), + h( + "a", + { + on: { + click: () => { + this.edit(params.row); + }, + }, + }, + "缂栬緫" + ), + h("Divider", { + props: { + type: "vertical", + }, + }), + h( + "a", + { + on: { + click: () => { + this.remove(params.row); + }, + }, + }, + "鍒犻櫎" + ), + ]); + }, + }, + ], + data: [], + total: 0, + permData: [], + editRolePermId: "", + selectAllFlag: false, + depData: [], + dataType: 0, + editDepartments: [], + }; + }, + methods: { + init() { + this.getDataList(); + // 鑾峰彇鎵�鏈夎彍鍗曟潈闄愭爲 + this.getPermList(); + }, + renderContent(h, { root, node, data }) { + let icon = ""; + if (data.level == 0) { + icon = "ios-navigate"; + } else if (data.level == 1) { + icon = "md-list-box"; + } else if (data.level == 2) { + icon = "md-list"; + } else if (data.level == 3) { + icon = "md-radio-button-on"; + } else { + icon = "md-radio-button-off"; + } + return h( + "span", + { + style: { + display: "inline-block", + cursor: "pointer", + }, + on: { + click: () => { + if (data.status == -1) { + return; + } + data.checked = !data.checked; + }, + }, + }, + [ + h("span", [ + h("Icon", { + props: { + type: icon, + size: "16", + }, + style: { + "margin-right": "8px", + "margin-bottom": "3px", + }, + }), + h("span", data.title), + ]), + ] + ); + }, + changePage(v) { + this.searchForm.pageNumber = v; + this.getDataList(); + this.clearSelectAll(); + }, + changePageSize(v) { + this.searchForm.pageSize = v; + this.getDataList(); + }, + changeSort(e) { + this.searchForm.sort = e.key; + this.searchForm.order = e.order; + if (e.order == "normal") { + this.searchForm.order = ""; + } + this.getDataList(); + }, + getDataList() { + this.loading = true; + getRoleList(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(); + } + } + }); + }, + getPermList() { + this.treeLoading = true; + getAllPermissionList().then((res) => { + if (res.success) { + this.deleteDisableNode(res.result); + this.permData = res.result; + this.treeLoading = false; + } + this.treeLoading = false; + }); + }, + // 閫掑綊鏍囪绂佺敤鑺傜偣 + deleteDisableNode(permData) { + let that = this; + permData.forEach(function (e) { + if (e.status == -1) { + e.title = "[宸茬鐢╙ " + e.title; + e.disabled = true; + } + if (e.children && e.children.length > 0) { + that.deleteDisableNode(e.children); + } + }); + }, + cancelRole() { + this.roleModalVisible = false; + }, + submitRole() { + this.$refs.roleForm.validate((valid) => { + if (valid) { + if (this.modalType == 0) { + // 娣诲姞 + this.submitLoading = true; + addRole(this.roleForm).then((res) => { + this.submitLoading = false; + if (res.success) { + this.$Message.success("鎿嶄綔鎴愬姛"); + this.getDataList(); + this.roleModalVisible = false; + } + }); + } else { + this.submitLoading = true; + editRole(this.roleForm).then((res) => { + this.submitLoading = false; + if (res.success) { + this.$Message.success("鎿嶄綔鎴愬姛"); + this.getDataList(); + this.roleModalVisible = false; + } + }); + } + } + }); + }, + addRole() { + this.modalType = 0; + this.modalTitle = "娣诲姞杞﹁締"; + this.$refs.roleForm.resetFields(); + delete this.roleForm.id; + this.roleModalVisible = true; + }, + edit(v) { + this.modalType = 1; + this.modalTitle = "缂栬緫杞﹁締"; + this.$refs.roleForm.resetFields(); + // 杞崲null涓�"" + for (let attr in v) { + if (v[attr] == null) { + v[attr] = ""; + } + } + let str = JSON.stringify(v); + let roleInfo = JSON.parse(str); + this.roleForm = roleInfo; + this.roleModalVisible = true; + }, + remove(v) { + this.$Modal.confirm({ + title: "纭鍒犻櫎", + content: "鎮ㄧ‘璁よ鍒犻櫎杞﹁締 " + v.name + " ?", + loading: true, + onOk: () => { + deleteRole({ ids: v.id }).then((res) => { + this.$Modal.remove(); + if (res.success) { + this.clearSelectAll(); + this.$Message.success("鍒犻櫎鎴愬姛"); + this.getDataList(); + } + }); + }, + }); + }, + setDefault(v) { + this.loading = true; + let params = { + id: v.id, + isDefault: true, + }; + setDefaultRole(params).then((res) => { + this.loading = false; + if (res.success) { + this.$Message.success("鎿嶄綔鎴愬姛"); + this.getDataList(); + } + }); + }, + cancelDefault(v) { + this.loading = true; + let params = { + id: v.id, + isDefault: false, + }; + setDefaultRole(params).then((res) => { + this.loading = false; + if (res.success) { + this.$Message.success("鎿嶄綔鎴愬姛"); + this.getDataList(); + } + }); + }, + clearSelectAll() { + this.$refs.table.selectAll(false); + }, + changeSelect(e) { + this.selectList = e; + }, + delAll() { + if (this.selectList.length <= 0) { + this.$Message.warning("鎮ㄨ繕鏈�夋嫨瑕佸垹闄ょ殑鏁版嵁"); + return; + } + this.$Modal.confirm({ + title: "纭鍒犻櫎", + content: "鎮ㄧ‘璁よ鍒犻櫎鎵�閫夌殑 " + this.selectList.length + " 鏉℃暟鎹�?", + loading: true, + onOk: () => { + let ids = ""; + this.selectList.forEach(function (e) { + ids += e.id + ","; + }); + ids = ids.substring(0, ids.length - 1); + deleteRole({ ids: ids }).then((res) => { + this.$Modal.remove(); + if (res.success) { + this.$Message.success("鍒犻櫎鎴愬姛"); + this.clearSelectAll(); + this.getDataList(); + } + }); + }, + }); + }, + editPerm(v) { + this.editRolePermId = v.id; + this.modalTitle = "鍒嗛厤 " + v.name + " 鐨勮彍鍗曟潈闄�"; + // 鍖归厤鍕鹃�� + let rolePerms = v.permissions; + if (this.treeLoading) { + this.$Message.warning("鑿滃崟鏉冮檺鏁版嵁鍔犺浇涓紝璇风◢鍚庣偣鍑绘煡鐪�"); + return; + } + // 閫掑綊鍒ゆ柇瀛愯妭鐐� + this.checkPermTree(this.permData, rolePerms); + this.permModalVisible = true; + }, + // 閫掑綊鍒ゆ柇瀛愯妭鐐� + checkPermTree(permData, rolePerms) { + let that = this; + permData.forEach(function (p) { + if (that.hasPerm(p, rolePerms) && p.status != -1) { + p.checked = true; + } else { + p.checked = false; + } + if (p.children && p.children.length > 0) { + that.checkPermTree(p.children, rolePerms); + } + }); + }, + // 鍒ゆ柇瑙掕壊鎷ユ湁鐨勬潈闄愯妭鐐瑰嬀閫� + hasPerm(p, rolePerms) { + let flag = false; + for (let i = 0; i < rolePerms.length; i++) { + if (p.id == rolePerms[i].permissionId) { + flag = true; + break; + } + } + if (flag) { + return true; + } + return false; + }, + // 鍏ㄩ�夊弽閫� + selectTreeAll() { + this.selectAllFlag = !this.selectAllFlag; + let select = this.selectAllFlag; + this.selectedTreeAll(this.permData, select); + }, + // 閫掑綊鍏ㄩ�夎妭鐐� + selectedTreeAll(permData, select) { + let that = this; + permData.forEach(function (e) { + e.checked = select; + if (e.children && e.children.length > 0) { + that.selectedTreeAll(e.children, select); + } + }); + }, + submitPermEdit() { + this.submitPermLoading = true; + let permIds = ""; + let selectedNodes = this.$refs.tree.getCheckedNodes(); + selectedNodes.forEach(function (e) { + permIds += e.id + ","; + }); + permIds = permIds.substring(0, permIds.length - 1); + editRolePerm({ + roleId: this.editRolePermId, + permIds: permIds, + }).then((res) => { + this.submitPermLoading = false; + if (res.success) { + this.$Message.success("鎿嶄綔鎴愬姛"); + // 鏍囪閲嶆柊鑾峰彇鑿滃崟鏁版嵁 + this.$store.commit("setAdded", false); + util.initRouter(this); + this.getDataList(); + this.permModalVisible = false; + } + }); + }, + cancelPermEdit() { + this.permModalVisible = false; + }, + loadData(item, callback) { + loadDepartment(item.id, { openDataFilter: false }).then((res) => { + 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; + } + }); + 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) { + // 鍒ゆ柇灞曞紑瀛愯妭鐐� + this.checkDepTree(v.children, this.editDepartments); + }, + // 鍒ゆ柇瀛愯妭鐐� + checkDepTree(depData, roleDepIds) { + let that = this; + depData.forEach(function (p) { + if (that.hasDepPerm(p, roleDepIds)) { + p.selected = true; + } else { + p.selected = false; + } + }); + }, + // 鍒ゆ柇瑙掕壊鎷ユ湁鐨勬潈闄愯妭鐐瑰嬀閫� + hasDepPerm(p, roleDepIds) { + let flag = false; + for (let i = 0; i < roleDepIds.length; i++) { + if (p.id == roleDepIds[i].departmentId) { + flag = true; + break; + } + } + if (flag) { + return true; + } + return false; + }, + submitDepEdit() { + let depIds = ""; + if (this.dataType == 1) { + let selectedNodes = this.$refs.depTree.getSelectedNodes(); + selectedNodes.forEach(function (e) { + depIds += e.id + ","; + }); + depIds = depIds.substring(0, depIds.length - 1); + } + this.submitDepLoading = true; + editRoleDep({ + roleId: this.editRolePermId, + dataType: this.dataType, + depIds: depIds, + }).then((res) => { + this.submitDepLoading = false; + if (res.success) { + this.$Message.success("鎿嶄綔鎴愬姛"); + this.getDataList(); + this.depModalVisible = false; + } + }); + }, + changeOpen(v) { + if (v == "0") { + this.permData.forEach((e) => { + e.expand = true; + if (e.children && e.children.length > 0) { + e.children.forEach((c) => { + c.expand = true; + if (c.children && c.children.length > 0) { + c.children.forEach(function (b) { + b.expand = true; + }); + } + }); + } + }); + } else if (v == "1") { + this.permData.forEach((e) => { + e.expand = false; + if (e.children && e.children.length > 0) { + e.children.forEach((c) => { + c.expand = false; + if (c.children && c.children.length > 0) { + c.children.forEach(function (b) { + b.expand = false; + }); + } + }); + } + }); + } else if (v == "2") { + this.permData.forEach((e) => { + e.expand = true; + if (e.children && e.children.length > 0) { + e.children.forEach((c) => { + c.expand = false; + if (c.children && c.children.length > 0) { + c.children.forEach(function (b) { + b.expand = false; + }); + } + }); + } + }); + } else if (v == "3") { + this.permData.forEach((e) => { + e.expand = true; + if (e.children && e.children.length > 0) { + e.children.forEach((c) => { + c.expand = true; + if (c.children && c.children.length > 0) { + c.children.forEach(function (b) { + b.expand = false; + }); + } + }); + } + }); + } + }, + }, + mounted() { + this.maxHeight = Number(document.documentElement.clientHeight - 121) + "px"; + this.init(); + }, +}; +</script> \ No newline at end of file -- Gitblit v1.9.1