From 7d05c69630d066c0992368423f90e440e3638f91 Mon Sep 17 00:00:00 2001 From: 田源 <lastanimals@163.com> Date: 星期日, 29 九月 2024 11:01:51 +0800 Subject: [PATCH] 整合代码 --- Source/UBCS-WEB/src/views/integration/systemInfo.vue | 686 ++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 460 insertions(+), 226 deletions(-) diff --git a/Source/UBCS-WEB/src/views/integration/systemInfo.vue b/Source/UBCS-WEB/src/views/integration/systemInfo.vue index c1cf5ae..90d9aac 100644 --- a/Source/UBCS-WEB/src/views/integration/systemInfo.vue +++ b/Source/UBCS-WEB/src/views/integration/systemInfo.vue @@ -1,235 +1,469 @@ <template> - <basic-container> - <avue-crud ref="crud" :table-loading="loading" :data="data" :option="option" :page.sync="page" :search.sync="search" - @on-load="getDataList" @row-save="handleSave" @row-del="handleDelete" @row-update="handleEdit" - @refresh-change="handleRefresh" @size-change="handleSizePage" @current-change="handleCurrentPage" - @selection-change="selectionChange" @row-click="handleRowClick"> - <template slot="menuLeft"> - <!-- <el-button icon="el-icon-search" size="small" type="primary" @click="handleStatus">鏌� 璇� - </el-button> --> - <el-button icon="el-icon-delete" size="small" type="danger" @click="handleDeleteByIds">鍒� 闄� - </el-button> - </template> - <template slot="search" slot-scope="{row,size}"> - <el-select v-model="selectValue" size="small" @change="handleSelect"> - <el-option v-for="item in selectOption" :key="item.value" :label="item.label" :value="item.value"> - </el-option> - </el-select> - <el-input :placeholder="`璇疯緭鍏�${selectValue === 'id' ? '绯荤粺缂栧彿' : '绯荤粺鍚嶇О'}骞舵寜鍥炶溅鏌ヨ`" :size="size" - style="width:300px;margin-left: 10px;" v-model="search[selectValue]" clearable - @keyup.enter.native="handleEnter" @clear="handleClear"></el-input> - </template> - </avue-crud> - </basic-container> + <basic-container> + <avue-crud ref="crud" :data="data" :option="option" :page.sync="page" :permission="permissionList" + :search.sync="search" + :table-loading="loading" + @on-load="getDataList" @row-save="handleSave" @row-del="handleDelete" @row-update="handleEdit" + @refresh-change="handleRefresh" @size-change="handleSizePage" @current-change="handleCurrentPage" + @selection-change="selectionChange" @row-click="handleRowClick"> + <template slot="menuLeft"> + <!-- <el-button icon="el-icon-search" size="small" type="primary" @click="handleStatus">鏌� 璇� + </el-button> --> + <el-button v-if="permissionList.delBtn" icon="el-icon-delete" size="small" type="danger" + @click="handleDeleteByIds">鍒� 闄� + </el-button> + </template> + <template slot="search" slot-scope="{row,size}"> + <el-select v-model="selectValue" size="small" @change="handleSelect"> + <el-option v-for="item in selectOption" :key="item.value" :label="item.label" :value="item.value"> + </el-option> + </el-select> + <el-input v-model="search[selectValue]" :placeholder="`璇疯緭鍏�${selectValue === 'id' ? '绯荤粺缂栧彿' : '绯荤粺鍚嶇О'}骞舵寜鍥炶溅鏌ヨ`" + :size="size" clearable style="width:300px;margin-left: 10px;" + @clear="handleClear" @keyup.enter.native="handleEnter"></el-input> + </template> + <template v-if="permissionList.empower" #menu="{row,index,size}"> + <el-button icon="el-icon-menu" size="small" type="text" @click="classifyHandler(row)">鍒嗙被鎺堟潈</el-button> + </template> + + + </avue-crud> + <el-dialog :visible.sync="dialogVisible" append-to-body class="avue-dialog avue-dialog--top" title="鍒嗙被鎺堟潈" + top="-50px"> + + <el-row> + <el-col :span="10"> + <avue-tree ref="tree" + v-model="TreeForm" + :data="TreeData" + :option="TreeOption" + @check-change="checkChange"> + </avue-tree> + </el-col> + </el-row> + + <div slot="footer" class="dialog-footer" style="height: 50px;line-height: 50px"> + <el-button icon="el-icon-plus" size="small" type="primary" @click="empower">鎺� 鏉�</el-button> + <el-button icon="el-icon-close" size="small" type="danger" @click="resetting">閲� 缃�</el-button> + </div> + </el-dialog> + </basic-container> </template> <script> -import { getSysInfoList, sysInfoAdd, sysInfoEdit, sysInfoDel } from '@/api/integration/sysInfo.js' -export default { - data() { - return { - loading: false, - page: { - currentPage: 1, - pageSize: 10, - total: 0 - }, - selectOption: [{ - value: 'id', - label: '绯荤粺缂栧彿' - }, { - value: 'name', - label: '绯荤粺鍚嶇О' - }], - selectValue: 'id', - search: {}, - delIds: [], - data: [], - option: { - height: "auto", - tip:false, - border: true, - align: 'center', - menuAlign: 'center', - index: true, - searchMenuSpan: 8, - searchBtn: false, - emptyBtn: false, - columnBtn: false, - defaultSort: { - prop: 'id,name', - order: 'descending' - }, - selection: true, - column: [ - { - label: '绯荤粺缂栧彿', - prop: 'id', - sortable: true, - rules: [{ - required: true, - message: '绯荤粺缂栧彿涓嶈兘涓虹┖', - trigger: 'blur' - }], - // maxlength: 30, //瀛楁暟闄愬埗 - }, { - label: '绯荤粺鍚嶇О', - prop: 'name', - sortable: true, - rules: [{ - required: true, - message: '绯荤粺鍚嶇О涓嶈兘涓虹┖', - trigger: 'blur' - }], - // maxlength: 30, //瀛楁暟闄愬埗 - }, - { - label: '绯荤粺鎻忚堪', - prop: 'description', - type: 'textarea' - } - ] - }, - } - }, - methods: { - // 鑾峰彇鍒楄〃 - async getDataList() { - this.loading = true - console.log(this.search) - const { pageSize, currentPage } = this.page - let param = { size: pageSize, current: currentPage } - this.search = Object.keys(this.search) - .filter((key) => this.search[key] !== null && this.search[key] !== undefined && this.search[key] !== "") - .reduce((acc, key) => ({ ...acc, [key]: this.search[key] }), {}); - const response = await getSysInfoList({ ...param, ...this.search }) - if (response.status === 200) { - console.log(response) - this.loading = false - const data = response.data.data - this.data = data.records - this.page.total = data.total - } else this.loading = false - }, - // 鏂板 - async handleSave(row, done, loading) { - try { - const response = await sysInfoAdd(row) - if (response.status === 200) { - this.$message({ - type: 'success', - message: '鏂板鏁版嵁鎴愬姛锛�' - }) - done(row) - // this.$refs.crud.refreshTable() - // this.getDataList() - } - } catch { - loading() - } - }, - // 缂栬緫 - async handleEdit(row, index, done, loading) { - try { - const { oid, id, name, description } = row - const response = await sysInfoEdit({ oid, id, name, description }) - if (response.status === 200) { - loading() - this.$message({ - type: 'success', - message: '淇敼鏁版嵁鎴愬姛锛�' - }) - done(row) - } - } catch { - loading() - } - }, - // 鍒犻櫎鍗曟潯 - handleDelete(row) { - const { oid } = row - this.deleteSysInfo({ oids: oid }) - }, - // 澶氭潯鏁版嵁鍒犻櫎 - handleDeleteByIds() { - const { oids } = this.delIds - if (this.$utilFunc.isEmpty(oids)) { - this.$message({ - type: "error", - message: "璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�!" - }) - } else { - this.deleteSysInfo(this.delIds) - } - }, - // 鍒犻櫎鎺ュ彛 - deleteSysInfo(param) { - this.$confirm('鏄惁纭畾鍒犻櫎閫夋嫨鐨勯泦鎴愮郴缁�?', '鎻愮ず', { - confirmButtonText: '纭畾', - cancelButtonText: '鍙栨秷', - type: 'warning' - }).then(async () => { - const response = await sysInfoDel(param) - if (response.status === 200) { - console.log(response) - this.$message({ - type: 'success', - message: '鍒犻櫎鎴愬姛!' - }); - this.getDataList() - } - }) - }, - // 閫夋嫨妗嗗唴瀹归�夋嫨鍚� - handleSelect(event) { - this.selectValue = event - if (this.selectValue === 'id') { - this.search['name'] = '' - delete this.search['name'] - } else { - this.search['id'] = '' - delete this.search['id'] - } - }, - // enter鎼滅储 - handleEnter() { - if (this.search[this.selectValue] === '') return - else this.getDataList() +import { + getSysInfoList, + sysInfoAdd, + sysInfoEdit, + sysInfoDel, + sysInfoTree, + batchAddSave +} from '@/api/integration/sysInfo.js' +import {mapGetters} from "vuex"; - }, - // 杈撳叆妗嗘竻绌� - handleClear() { - this.search = {} - this.getDataList() - }, - // 鍒锋柊鎸夐挳 - handleRefresh() { - this.getDataList() - }, - handleSizePage(event) { - this.page.pageSize = event - }, - handleCurrentPage(event) { - this.page.currentPage = event - }, - // 鐐瑰嚮閫夋嫨 - handleRowClick(row) { - this.$refs.crud.toggleRowSelection(row, true) - }, - // 澶氶�� - selectionChange(list) { - console.log(list) - let newData = list.map(item => { - const { oid } = item - return oid - }) - this.delIds = { oids: newData.toString() } - console.log(this.delIds) - }, +export default { + data() { + return { + checkAll: {}, + ParentList: [], + ParentRemoveList: [], + //閬垮厤缂撳瓨 + reload: Math.random(), + TreeLoading: false, + TreeOption: { + defaultExpandAll: false, + multiple: true, + addBtn: false, + filter: false + }, + TreeData: [], + TreeForm: {}, + loading: false, + dialogVisible: false, + page: { + currentPage: 1, + pageSize: 10, + total: 0 + }, + selectOption: [{ + value: 'id', + label: '绯荤粺缂栧彿' + }, { + value: 'name', + label: '绯荤粺鍚嶇О' + }], + selectValue: 'id', + search: {}, + delIds: [], + data: [], + } + }, + created() { + }, + computed: { + ...mapGetters(["permission"]), + permissionList() { + return { + addBtn: this.vaildData(this.permission.systemInfo.systemInfo_add, false), + editBtn: this.vaildData(this.permission.systemInfo.systemInfo_edit, false), + delBtn: this.vaildData(this.permission.systemInfo.systemInfo_delete, false), + empower: this.vaildData(this.permission.systemInfo.systemInfo_empower, false), + } + }, + option() { + return { + height: "auto", + calcHeight: 20, + tip: false, + border: true, + align: 'center', + menuAlign: 'center', + index: true, + searchMenuSpan: 8, + searchBtn: false, + emptyBtn: false, + columnBtn: false, + defaultSort: { + prop: 'id,name', + order: 'descending' + }, + selection: true, + column: [ + { + label: '绯荤粺缂栧彿', + prop: 'id', + sortable: true, + rules: [{ + required: true, + message: '绯荤粺缂栧彿涓嶈兘涓虹┖', + trigger: 'blur' + }], + // maxlength: 30, //瀛楁暟闄愬埗 + }, { + label: '绯荤粺鍚嶇О', + prop: 'name', + sortable: true, + rules: [{ + required: true, + message: '绯荤粺鍚嶇О涓嶈兘涓虹┖', + trigger: 'blur' + }], + // maxlength: 30, //瀛楁暟闄愬埗 + }, + { + label: '绯荤粺鎻忚堪', + prop: 'description', + type: 'textarea' + } + ] + } + } + }, + methods: { + //閲嶇疆 + resetting() { + this.$refs.tree.setCheckedKeys([]) + // console.log(this.ParentList) + }, + empower() { + batchAddSave(this.checkAll.oid, this.checkAll.id, this.ParentList).then(res => { + // console.log(res.data) + if (res.data.code === 200) { + this.$message.success(res.data.msg) + this.dialogVisible = false; + } + }) + }, + //鍒嗙被鎺堟潈澶氶�夊洖璋� + checkChange(row, checked) { + if (checked) { + this.addAllChildren(row.children); + this.addToParentList(row); + // 鍕鹃�夎鏃跺皢鎵�鏈夎妭鐐规坊鍔犲埌ParentList涓� + } else { + this.removeAllChildren(row.children); + this.removeFromParentList(row); + // 鍙栨秷鍕鹃�夊皢鎵�鏈夎妭鐐规坊鍔犱粠ParentList涓Щ闄� + } + // console.table(this.ParentList); + }, + //瀛愯妭鐐规坊鍔� + addAllChildren(children) { + for (let child of children) { + this.addToParentList(child); + // 灏嗗瓙鑺傜偣娣诲姞鍒� ParentList 涓� + if (child.children && child.children.length > 0) { + this.addAllChildren(child.children); + } + } + }, + //瀛愯妭鐐圭Щ闄� + removeAllChildren(children) { + for (let child of children) { + this.removeFromParentList(child); + // 灏嗗瓙鑺傜偣浠� ParentList 涓Щ闄� + if (child.children && child.children.length > 0) { + this.removeAllChildren(child.children); + } + } + }, + //褰撳墠鐖惰妭鐐规坊鍔� + addToParentList(item) { + const classifyOid = item.attributes.classifyOid; + if (!this.isClassifyOidExists(classifyOid)) { + const record = { + oid: item.oid, + classifyId: item.attributes.classifyId, + classifyOid: classifyOid, + }; + this.ParentList.push(record); + } + }, + //褰撳墠鐖惰妭鐐圭Щ闄� + removeFromParentList(item) { + const classifyOid = item.attributes.classifyOid; + if (this.isClassifyOidExists(classifyOid)) { + const index = this.findIndexByClassifyOid(classifyOid); + if (index !== -1) { + this.ParentList.splice(index, 1); + } + } + }, + //鍒ら噸-ParentList + isClassifyOidExists(classifyOid) { + return this.ParentList.some(item => item.classifyOid === classifyOid); + }, + //鏌ユ壘index浣嶇疆 + findIndexByClassifyOid(classifyOid) { + return this.ParentList.findIndex(item => item.classifyOid === classifyOid); + }, + //鍒嗙被鎺堟潈 + classifyHandler(row) { + this.loading = true; + this.checkAll = row + sysInfoTree({systemOid: row.oid, systemId: row.id}).then(res => { + let List = []; + let value = 0; + let NumberList = []; + + function traverse(obj, parent) { + //閲嶆柊鏋勫缓涓�娆¢�変腑褰撳墠row鐨勬暟鎹� + const record = { + label: obj.text, + oid: obj.oid, + attributes: { + classifyId: obj.attributes.classifyId, + classifyOid: obj.attributes.classifyOid, + selected: obj.attributes.selected + }, + classParentOid: obj.parentId, + value: value, + children: [] + }; + //褰撳墠宸查�夋嫨鏁版嵁鍥炲~ + if (record.attributes.selected == 'true') { + NumberList.push(record.value); + } + if (parent) { + const stingChild = parent.children.find(child => child.label === record.label); + if (stingChild) { + record.value = stingChild.value; // 浣跨敤宸插瓨鍦ㄧ殑瀛愯妭鐐圭殑value鍊� + } else { + parent.children.push(record); + value++; + } + } else { + const stingRecord = List.find(item => item.label === record.label); + if (stingRecord) { + record.value = stingRecord.value; // 浣跨敤宸插瓨鍦ㄧ殑椤跺眰鑺傜偣鐨剉alue鍊� + } else { + List.push(record); + value++; + } + } + if (obj.children && obj.children.length > 0) { + for (let child of obj.children) { + traverse(child, record); + } + } + } + + for (let item of res.data) { + traverse(item, null); + } + // console.log('list', List); + this.TreeData = List; + // this.ModifyProperties(this.TreeData, 'text', 'label'); + // 鏍规嵁this.TreeData鐨勯暱搴﹁绠楀欢杩熸椂闂� + const delayTime = this.TreeData.length * 1; + setTimeout(() => { + this.loading = false; + this.reload = Math.random(); + this.dialogVisible = true; + + this.$nextTick(() => { + if (this.$refs.tree) { + this.$refs.tree.setCheckedKeys(NumberList); + } + }); + }, delayTime); + }); + }, + //瀹氫箟涓�涓慨鏀规暟鎹睘鎬у悕鐨勬柟娉� + ModifyProperties(obj, oldName, newName) { + for (let key in obj) { + if (key === oldName) { + obj[newName] = obj[key]; + delete obj[key]; + } + if (typeof obj[key] === 'object') { + this.ModifyProperties(obj[key], oldName, newName); + } + } + }, + async getDataList() { + this.loading = true; + const {pageSize, currentPage} = this.page; + const conditions = {}; + if (Object.keys(this.search).length > 0) { + for (const key in this.search) { + if (this.search[key]) { + conditions[`conditionMap[${key}_like]`] = this.search[key]; + } + } + } + const response = await getSysInfoList(pageSize, currentPage, conditions); + if (response.status === 200) { + // console.log(response); + this.loading = false; + const data = response.data.data; + this.data = data.records; + this.page.total = data.total; + } else { + this.loading = false; + } + }, + // 鏂板 + async handleSave(row, done, loading) { + try { + const response = await sysInfoAdd(row) + if (response.status === 200) { + this.$message({ + type: 'success', + message: '鏂板鏁版嵁鎴愬姛锛�' + }) + done(row) + await this.getDataList(); + // this.$refs.crud.refreshTable() + // this.getDataList() + } + } catch { + loading() + } + }, + // 缂栬緫 + async handleEdit(row, index, done, loading) { + try { + const {oid, id, name, description} = row + const response = await sysInfoEdit({oid, id, name, description}) + if (response.status === 200) { + loading() + this.$message({ + type: 'success', + message: '淇敼鏁版嵁鎴愬姛锛�' + }) + done(row) + } + await this.getDataList(); + } catch { + loading() + } + }, + // 鍒犻櫎鍗曟潯 + handleDelete(row) { + const {oid} = row + this.deleteSysInfo({oids: oid}) + }, + // 澶氭潯鏁版嵁鍒犻櫎 + handleDeleteByIds() { + const {oids} = this.delIds + if (this.$utilFunc.isEmpty(oids)) { + this.$message({ + type: "error", + message: "璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�!" + }) + } else { + this.deleteSysInfo(this.delIds) + } + }, + // 鍒犻櫎鎺ュ彛 + deleteSysInfo(param) { + this.$confirm('鏄惁纭畾鍒犻櫎閫夋嫨鐨勯泦鎴愮郴缁�?', '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(async () => { + const response = await sysInfoDel(param) + if (response.status === 200) { + // console.log(response) + this.$message({ + type: 'success', + message: '鍒犻櫎鎴愬姛!' + }); + await this.getDataList() + } + }) + }, + // 閫夋嫨妗嗗唴瀹归�夋嫨鍚� + handleSelect(event) { + this.selectValue = event + if (this.selectValue === 'id') { + this.search['name'] = '' + delete this.search['name'] + } else { + this.search['id'] = '' + delete this.search['id'] + } + }, + // enter鎼滅储 + handleEnter() { + this.getDataList() + }, + // 杈撳叆妗嗘竻绌� + handleClear() { + this.search = {} + this.getDataList() + }, + // 鍒锋柊鎸夐挳 + handleRefresh() { + this.getDataList() + }, + handleSizePage(event) { + this.page.pageSize = event + }, + handleCurrentPage(event) { + this.page.currentPage = event + }, + // 鐐瑰嚮閫夋嫨 + handleRowClick(row) { + this.$refs.crud.toggleRowSelection(row, true) + }, + // 澶氶�� + selectionChange(list) { + let newData = list.map(item => { + const {oid} = item + return oid + }) + this.delIds = {oids: newData.toString()} + // console.log(this.delIds) + }, + } } </script> <style lang="scss" scoped> -::v-deep(.avue-crud .el-select) { - width: 100px !important; -} + ::v-deep{ + .avue-crud .el-select { + width: 100px !important; + } + } </style> -- Gitblit v1.9.3