From eef1ef0be935d4a3d8fc691b2666f41796b2d4a5 Mon Sep 17 00:00:00 2001 From: gaoshp <291585735@qq.com> Date: 星期一, 04 十一月 2024 19:57:08 +0800 Subject: [PATCH] 增加列表显示 --- src/views/console/authority/datascope.vue | 564 ++++++++++++++++++++++++++++--------------------------- 1 files changed, 287 insertions(+), 277 deletions(-) diff --git a/src/views/console/authority/datascope.vue b/src/views/console/authority/datascope.vue index 09b2e06..e83e530 100644 --- a/src/views/console/authority/datascope.vue +++ b/src/views/console/authority/datascope.vue @@ -1,9 +1,9 @@ <!-- * @Author: lzhe lzhe@example.com * @Date: 2024-03-26 10:28:33 - * @LastEditors: lzhe lzhe@example.com - * @LastEditTime: 2024-04-02 17:48:31 - * @FilePath: /smart-web/src/views/master/person/main/index.vue + * @LastEditors: gaoshp + * @LastEditTime: 2024-10-05 21:26:31 + * @FilePath: /cps-web/src/views/console/authority/datascope.vue * @Description: 杩欐槸榛樿璁剧疆,璇疯缃甡customMade`, 鎵撳紑koroFileHeader鏌ョ湅閰嶇疆 杩涜璁剧疆: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <template> @@ -15,12 +15,12 @@ <el-form-item label="鑿滃崟缂栧彿"> <el-input v-model="searchData.code" placeholder="鑿滃崟缂栧彿" clearable></el-input> </el-form-item> - <el-form-item label="鎵�灞炲簲鐢�"> + <!-- <el-form-item label="鎵�灞炲簲鐢�"> <el-select v-model="searchData.belongApplication" style="width: 100%"> - <el-option key="CPS" label="CPS" value="CPS"/> - <el-option key="FMS" label="FMS" value="FMS"/> + <el-option key="CPS" label="CPS" value="CPS" /> + <el-option key="FMS" label="FMS" value="FMS" /> </el-select> - </el-form-item> + </el-form-item> --> <el-form-item> <el-button type="primary" @click="searchclick">鎼滅储</el-button> <el-button @click="searchClearBtn">娓呯┖</el-button> @@ -28,34 +28,38 @@ </el-form> <div> <div class="dict-table"> - <el-table ref="multipleTableRef" :data="tableData" border row-key="id" style="width: 100%" class="multipleTableRef" @selection-change="handleSelectionChange" :tree-props="{ children: 'children', hasChildren: 'has' }"> + <el-table ref="multipleTableRef" :data="tableData" border row-key="id" style="width: 100%" + class="multipleTableRef" @selection-change="handleSelectionChange" + :tree-props="{ children: 'children', hasChildren: 'has' }"> <el-table-column type="selection" width="55" /> <el-table-column prop="name" label="鑿滃崟鍚嶇О"></el-table-column> <el-table-column prop="path" label="璺敱鍦板潃"></el-table-column> <el-table-column prop="source" label="鑿滃崟鍥炬爣"> <template #default="scope"> - <component v-if="icons.includes(scope.row.source)" style="width: 20px;height: 20px;" - :is='scope.row.source'></component> - </template> + <component v-if="icons.includes(scope.row.source)" style="width: 20px;height: 20px;" + :is='scope.row.source'></component> + </template> </el-table-column> <el-table-column prop="code" label="鑿滃崟缂栧彿"></el-table-column> <el-table-column prop="alias" label="鑿滃崟鍒悕"></el-table-column> <el-table-column prop="sort" label="鑿滃崟鎺掑簭"></el-table-column> <el-table-column prop="isOpen" label="鏂扮獥鍙�"> <template #default="scope"> - <div>{{scope.row.isOpen == 0?"鏄�":"鍚�"}}</div> + <div>{{ scope.row.isOpen == 0 ? "鏄�" : "鍚�" }}</div> </template> </el-table-column> - <el-table-column prop="belongApplication" label="鎵�灞炲簲鐢�"></el-table-column> + <!-- <el-table-column prop="belongApplication" label="鎵�灞炲簲鐢�"></el-table-column> --> <el-table-column fixed="right" label="鎿嶄綔"> <template #default="scope"> - <el-button text type="primary" size="small" @click="showDrawer(scope.row, scope.$index)">鏉冮檺閰嶇疆</el-button> + <el-button text type="primary" size="small" + @click="showDrawer(scope.row, scope.$index)">鏉冮檺閰嶇疆</el-button> </template> </el-table-column> </el-table> </div> </div> - <el-drawer title="[鎺у埗涓績]鏁版嵁鏉冮檺閰嶇疆" v-model="drawer" :direction="direction" :before-close="handleClose" size="920" class="drawerStyle"> + <el-drawer title="[鎺у埗涓績]鏁版嵁鏉冮檺閰嶇疆" v-model="drawer" :direction="direction" :before-close="handleClose" size="920" + class="drawerStyle"> <el-form :inline="true" :model="drawerSearchData" label-width="120px"> <el-form-item label="鑿滃崟鍚嶇О"> <el-input v-model="drawerSearchData.scopeName" placeholder="鑿滃崟鍚嶇О" clearable /> @@ -74,7 +78,8 @@ <el-button type="danger" plain @click="delData">鍒犻櫎</el-button> </div> <div class="dict-table"> - <el-table ref="multipleTableRef" :data="drawerTableData" border style="width: 100%" class="multipleTableRef" @selection-change="drawerHandleSelectionChange"> + <el-table ref="multipleTableRef" :data="drawerTableData" border style="width: 100%" + class="multipleTableRef" @selection-change="drawerHandleSelectionChange"> <el-table-column type="selection" width="55" /> <el-table-column prop="scopeName" label="鏉冮檺鍚嶇О"></el-table-column> <el-table-column prop="resourceCode" label="鏉冮檺缂栧彿"></el-table-column> @@ -82,290 +87,295 @@ <el-table-column prop="scopeTypeName" label="瑙勫垯鍒嗙被"></el-table-column> <el-table-column fixed="right" label="鎿嶄綔"> <template #default="scope"> - <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">鏌ョ湅</el-button> - <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">缂栬緫</el-button> - <el-button text type="primary" size="small" @click="table_del(scope.row, scope.$index)">鍒犻櫎</el-button> + <el-button text type="primary" size="small" + @click="table_show(scope.row, scope.$index)">鏌ョ湅</el-button> + <el-button text type="primary" size="small" + @click="table_edit(scope.row, scope.$index)">缂栬緫</el-button> + <el-button text type="primary" size="small" + @click="table_del(scope.row, scope.$index)">鍒犻櫎</el-button> </template> </el-table-column> </el-table> - <el-pagination - style="margin-top: 12px;" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="currentPage4" - :page-sizes="[15, 50, 100]" - :page-size="15" - layout="total, sizes, prev, pager, next, jumper" - :total="drawerTotal"> + <el-pagination style="margin-top: 12px;" @size-change="handleSizeChange" + @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[15, 50, 100]" + :page-size="15" layout="total, sizes, prev, pager, next, jumper" :total="drawerTotal"> </el-pagination> </div> </div> </el-drawer> - <save-dialog v-if="dialog.save" ref="saveDialog" :scopeTypeNameList="scopeTypeNameList" :tableRow="tableRow" @success="addDatascopeSuccess" @closed="dialog.save=false"></save-dialog> + <save-dialog v-if="dialog.save" ref="saveDialog" :scopeTypeNameList="scopeTypeNameList" :tableRow="tableRow" + @success="addDatascopeSuccess" @closed="dialog.save = false"></save-dialog> </div> </template> <script> - import saveDialog from './addDatascope' - import * as ElementPlusIconsVue from '@element-plus/icons-vue' - let icons = [] - for (const [key, component] of Object.entries(ElementPlusIconsVue)) { - icons.push(key) - } - export default { - name: "datascope", - data(){ - return { - scopeTypeNameList: [], - dialog: { - save: false - }, - drawerTotal: 0, - direction: "rtl", - drawer: false, - icons, - belongApplicationList: [], - fileDialogVisible: false, - getModalData: [], - selection: [], - drawerSelection: [], - total: 0, - drawerSearchData: { - scopeName: "", - resourceCode: "", - menuId: "", - current: 1, - size: 10 - }, - searchData: { - name: "", - code: "", - belongApplication: "", - parentId: "" - }, - dialog: { - save: false, - allocation: false - }, - tableData: [], - drawerTableData: [], - rowId: "", - tableRow: {} - } - }, - created(){ - - }, - mounted(){ - this.getscopeTypeNameList();//瑙勫垯鍒嗙被鏋氫妇 - this.searchBtn(); - }, - components: { - ...ElementPlusIconsVue,saveDialog - }, - methods: { - getscopeTypeNameList() { //瑙勫垯鍒嗙被鏋氫妇 - this.$HTTP.get("/api/blade-system/dict/dictionary?code=data_scope_type").then(res=> { - if(res.code == 200) { - this.scopeTypeNameList = res.data; - } - }) +import saveDialog from './addDatascope' +import * as ElementPlusIconsVue from '@element-plus/icons-vue' +let icons = [] +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + icons.push(key) +} +export default { + name: "datascope", + data() { + return { + scopeTypeNameList: [], + dialog: { + save: false }, - addDatascopeSuccess() { - this.drawerSearchclick(); + drawerTotal: 0, + direction: "rtl", + drawer: false, + icons, + belongApplicationList: [], + fileDialogVisible: false, + getModalData: [], + selection: [], + drawerSelection: [], + total: 0, + drawerSearchData: { + scopeName: "", + resourceCode: "", + menuId: "", + current: 1, + size: 10 }, - //娣诲姞鏉冮檺 - addData(){ - this.dialog.save = true - this.$nextTick(() => { - this.$refs.saveDialog.open() - }) + searchData: { + name: "", + code: "", + belongApplication: "CPS", + parentId: "" }, - // 鍒犻櫎 - delData() { - if(this.drawerSelection.length == 0) { - this.$message({ - message: '璇烽�夋嫨鑷冲皯涓�鏉℃暟鎹�', - type: 'warning' - }); - return; + dialog: { + save: false, + allocation: false + }, + tableData: [], + drawerTableData: [], + rowId: "", + tableRow: {} + } + }, + created() { + + }, + mounted() { + this.getscopeTypeNameList();//瑙勫垯鍒嗙被鏋氫妇 + this.searchBtn(); + }, + components: { + ...ElementPlusIconsVue, saveDialog + }, + methods: { + getscopeTypeNameList() { //瑙勫垯鍒嗙被鏋氫妇 + this.$HTTP.get("/api/blade-system/dict/dictionary?code=data_scope_type").then(res => { + if (res.code == 200) { + this.scopeTypeNameList = res.data; } - var selStr = ""; - this.drawerSelection.map(item=> { - selStr += item.id + "," - }) - selStr = selStr.replace(/,$/, ''); - var that = this; - this.$HTTP.post("/api/blade-system/data-scope/remove?ids="+selStr).then(res=> { - if(res.code == 200) { + }) + }, + addDatascopeSuccess() { + this.drawerSearchclick(); + }, + //娣诲姞鏉冮檺 + addData() { + this.dialog.save = true + this.$nextTick(() => { + this.$refs.saveDialog.open() + }) + }, + // 鍒犻櫎 + delData() { + if (this.drawerSelection.length == 0) { + this.$message({ + message: '璇烽�夋嫨鑷冲皯涓�鏉℃暟鎹�', + type: 'warning' + }); + return; + } + var selStr = ""; + this.drawerSelection.map(item => { + selStr += item.id + "," + }) + selStr = selStr.replace(/,$/, ''); + var that = this; + this.$HTTP.post("/api/blade-system/data-scope/remove?ids=" + selStr).then(res => { + if (res.code == 200) { + that.$message.success("鎿嶄綔鎴愬姛"); + that.drawerSearchclick(); + } + }) + }, + table_edit(row) { //缂栬緫 + this.dialog.save = true + this.$HTTP.get("/api/blade-system/data-scope/detail?id=" + row.id).then(res => { + if (res.code == 200) { + this.dialog.save = true; + this.$nextTick(() => { + this.$refs.saveDialog.open('edit').setData(res.data); + }) + } + }) + }, + //鏌ョ湅 + table_show(row) { //鏌ョ湅 + this.dialog.save = true + this.$nextTick(() => { + this.$refs.saveDialog.open('show').setData(row) + }) + }, + table_del(row) { + var that = this; + this.$confirm(`纭畾灏嗛�夋嫨鏁版嵁鍒犻櫎?`, '', { + type: 'warning' + }).then(() => { + this.$HTTP.post("/api/blade-system/data-scope/remove?ids=" + row.id).then(res => { + if (res.code == 200) { that.$message.success("鎿嶄綔鎴愬姛"); that.drawerSearchclick(); } }) - }, - table_edit(row){ //缂栬緫 - this.dialog.save = true - this.$HTTP.get("/api/blade-system/data-scope/detail?id="+row.id).then(res=> { - if(res.code == 200) { - this.dialog.save = true; - this.$nextTick(() => { - this.$refs.saveDialog.open('edit').setData(res.data); - }) - } - }) - }, - //鏌ョ湅 - table_show(row){ //鏌ョ湅 - this.dialog.save = true - this.$nextTick(() => { - this.$refs.saveDialog.open('show').setData(row) - }) - }, - table_del(row) { - var that = this; - this.$confirm(`纭畾灏嗛�夋嫨鏁版嵁鍒犻櫎?`, '', { - type: 'warning' - }).then(() => { - this.$HTTP.post("/api/blade-system/data-scope/remove?ids="+row.id).then(res=> { - if(res.code == 200) { - that.$message.success("鎿嶄綔鎴愬姛"); - that.drawerSearchclick(); - } - }) - }).catch(() => { + }).catch(() => { - }) - }, - handleClose(done) { - this.drawerTableData = []; - done(); - }, - exportFile(row,index){ - window.open(row.link); - }, - codeClick() { - - }, - searchClearBtn() { - this.searchData = { - name: "", - code: "", - belongApplication: "", - parentId: "" - } - this.searchBtn(); - }, - showDrawer(row){ - this.rowId = row.id; - this.tableRow = row; //鍚庨潰缁勪欢浼氱敤鍒� - this.drawerSearchclick(); - this.drawer = true; - }, - drawerSearchclick() { - var obj = {}; - for(var key in this.drawerSearchData) { - if(this.drawerSearchData[key]) { - obj[key] = this.drawerSearchData[key]; - } - } - obj.menuId = this.rowId; - this.$HTTP.get("/api/blade-system/data-scope/list?"+this.$TOOL.qsStringify(obj)).then(res=> { - if(res.code == 200) { - this.drawerTableData = res.data.records; - this.drawerTotal = res.data.total; - } - }) - }, - drawerSearchClearBtn() { - this.drawerSearchData = { - scopeName: "", - resourceCode: "", - menuId: this.rowId, - current: 1, - size: 10 - } - this.drawerSearchclick(); - }, - searchclick() { - this.searchBtn(); - }, - searchBtn() { - var obj = {}; - for(var key in this.searchData) { - if(this.searchData[key]) { - obj[key] = this.searchData[key]; - } - } - this.$HTTP.get("/api/blade-system/menu/lazy-menu-list",obj).then(res=> { - if(res.code == 200) { - this.tableData = res.data; - } - }) - }, - handleSelectionChange(selection) { - this.selection = selection; - }, - drawerHandleSelectionChange(selection) { - this.drawerSelection = selection; - }, - changeDepartment() { - this.departmentVisible = true; - }, - handleSizeChange(val) { - console.log(`姣忛〉 ${val} 鏉); - this.drawerSearchData.current = "1"; - this.drawerSearchData.size = val; - this.drawerSearchclick(); - }, - handleCurrentChange(val) { - console.log(`褰撳墠椤�: ${val}`); - this.drawerSearchData.current = val; - this.drawerSearchclick(); + }) + }, + handleClose(done) { + this.drawerTableData = []; + done(); + }, + exportFile(row, index) { + window.open(row.link); + }, + codeClick() { + + }, + searchClearBtn() { + this.searchData = { + name: "", + code: "", + belongApplication: "", + parentId: "" } + this.searchBtn(); + }, + showDrawer(row) { + this.rowId = row.id; + this.tableRow = row; //鍚庨潰缁勪欢浼氱敤鍒� + this.drawerSearchclick(); + this.drawer = true; + }, + drawerSearchclick() { + var obj = {}; + for (var key in this.drawerSearchData) { + if (this.drawerSearchData[key]) { + obj[key] = this.drawerSearchData[key]; + } + } + obj.menuId = this.rowId; + this.$HTTP.get("/api/blade-system/data-scope/list?" + this.$TOOL.qsStringify(obj)).then(res => { + if (res.code == 200) { + this.drawerTableData = res.data.records; + this.drawerTotal = res.data.total; + } + }) + }, + drawerSearchClearBtn() { + this.drawerSearchData = { + scopeName: "", + resourceCode: "", + menuId: this.rowId, + current: 1, + size: 10 + } + this.drawerSearchclick(); + }, + searchclick() { + this.searchBtn(); + }, + searchBtn() { + var obj = {}; + for (var key in this.searchData) { + if (this.searchData[key]) { + obj[key] = this.searchData[key]; + } + } + this.$HTTP.get("/api/blade-system/menu/lazy-menu-list", obj).then(res => { + if (res.code == 200) { + this.tableData = res.data; + } + }) + }, + handleSelectionChange(selection) { + this.selection = selection; + }, + drawerHandleSelectionChange(selection) { + this.drawerSelection = selection; + }, + changeDepartment() { + this.departmentVisible = true; + }, + handleSizeChange(val) { + console.log(`姣忛〉 ${val} 鏉); + this.drawerSearchData.current = "1"; + this.drawerSearchData.size = val; + this.drawerSearchclick(); + }, + handleCurrentChange(val) { + console.log(`褰撳墠椤�: ${val}`); + this.drawerSearchData.current = val; + this.drawerSearchclick(); } } +} </script> <style scoped> - .dict-main { - background-color: #fff; - margin: 8px; - padding: 8px; - } - .dict-Btn { - display: flex; - justify-content: space-between; - border-bottom: 1px solid #dcdfe6; - margin-bottom: 8px; - padding-left: 8px; - padding-right: 8px; - } - .dict-btn-bottom { - padding-left: 8px; - padding-right: 8px; - margin-bottom: 8px; - } - .dict-table { - padding-left: 8px; - padding-right: 8px; - margin-bottom: 8px; - - } - .multipleTableRef { - margin-bottom: 8px; - } - .attachSize { - color:#409eff; - padding: 0 10px; - font-size: 12px; - background-color: #ebf4f4; - border: 1px solid #d8e8e8; - } - /deep/ .drawerStyle { - padding: 20px; - } - .datascope-drawer-btn { - margin-bottom: 8px; - padding-left: 8px; - padding-right: 8px; - } +.dict-main { + background-color: #fff; + margin: 8px; + padding: 8px; +} + +.dict-Btn { + display: flex; + justify-content: space-between; + border-bottom: 1px solid #dcdfe6; + margin-bottom: 8px; + padding-left: 8px; + padding-right: 8px; +} + +.dict-btn-bottom { + padding-left: 8px; + padding-right: 8px; + margin-bottom: 8px; +} + +.dict-table { + padding-left: 8px; + padding-right: 8px; + margin-bottom: 8px; + +} + +.multipleTableRef { + margin-bottom: 8px; +} + +.attachSize { + color: #409eff; + padding: 0 10px; + font-size: 12px; + background-color: #ebf4f4; + border: 1px solid #d8e8e8; +} + +/deep/ .drawerStyle { + padding: 20px; +} + +.datascope-drawer-btn { + margin-bottom: 8px; + padding-left: 8px; + padding-right: 8px; +} </style> -- Gitblit v1.9.3