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 | 467 ++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 323 insertions(+), 144 deletions(-)
diff --git a/src/views/console/authority/datascope.vue b/src/views/console/authority/datascope.vue
index 1f5b2ae..e83e530 100644
--- a/src/views/console/authority/datascope.vue
+++ b/src/views/console/authority/datascope.vue
@@ -1,26 +1,26 @@
<!--
* @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>
<div class="dict-main">
- <el-form :inline="true" :model="searchData" abel-width="120px">
+ <el-form :inline="true" :model="searchData" label-width="120px">
<el-form-item label="鑿滃崟鍚嶇О">
<el-input v-model="searchData.name" placeholder="鑿滃崟鍚嶇О" clearable />
</el-form-item>
<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,175 +28,354 @@
</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="attachSize" label="闄勪欢澶у皬">
- <template #default="scope">
- <span class="attachSize">{{scope.row.attachSize}} B</span>
- </template>
- </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="table_del(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-form :inline="true" :model="drawerSearchData" label-width="120px">
+ <el-form-item label="鑿滃崟鍚嶇О">
+ <el-input v-model="drawerSearchData.scopeName" placeholder="鑿滃崟鍚嶇О" clearable />
+ </el-form-item>
+ <el-form-item label="鑿滃崟缂栧彿">
+ <el-input v-model="drawerSearchData.resourceCode" placeholder="鑿滃崟缂栧彿" clearable></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="drawerSearchclick">鎼滅储</el-button>
+ <el-button @click="drawerSearchClearBtn">娓呯┖</el-button>
+ </el-form-item>
+ </el-form>
+ <div>
+ <div class="datascope-drawer-btn">
+ <el-button type="primary" @click="addData">+ 鏂板</el-button>
+ <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-column type="selection" width="55" />
+ <el-table-column prop="scopeName" label="鏉冮檺鍚嶇О"></el-table-column>
+ <el-table-column prop="resourceCode" label="鏉冮檺缂栧彿"></el-table-column>
+ <el-table-column prop="scopeColumn" label="鏉冮檺瀛楁"></el-table-column>
+ <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>
+ </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>
+ </div>
+ </div>
+ </el-drawer>
+ <save-dialog v-if="dialog.save" ref="saveDialog" :scopeTypeNameList="scopeTypeNameList" :tableRow="tableRow"
+ @success="addDatascopeSuccess" @closed="dialog.save = false"></save-dialog>
</div>
</template>
<script>
- import * as ElementPlusIconsVue from '@element-plus/icons-vue'
- let icons = []
- for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
- icons.push(key)
- }
- export default {
- name: "attach",
- data(){
- return {
- icons,
- belongApplicationList: [],
- fileDialogVisible: false,
- getModalData: [],
- selection: [],
- total: 0,
- searchData: {
- name: "",
- code: "",
- belongApplication: "",
- parentId: ""
- },
- dialog: {
- save: false,
- allocation: false
- },
- tableData: []
+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: "CPS",
+ 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;
+ }
+ })
+ },
+ 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();
+ }
+ })
},
- created(){
-
+ 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);
+ })
+ }
+ })
},
- mounted(){
+ //鏌ョ湅
+ 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(() => {
+
+ })
+ },
+ handleClose(done) {
+ this.drawerTableData = [];
+ done();
+ },
+ exportFile(row, index) {
+ window.open(row.link);
+ },
+ codeClick() {
+
+ },
+ searchClearBtn() {
+ this.searchData = {
+ name: "",
+ code: "",
+ belongApplication: "",
+ parentId: ""
+ }
this.searchBtn();
},
- components: {
- ...ElementPlusIconsVue
- },
- methods: {
- exportFile(row,index){
- window.open(row.link);
- },
- codeClick() {
-
- },
- searchClearBtn() {
- this.searchData = {
- name: "",
- code: "",
- belongApplication: "",
- parentId: ""
+ 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];
}
- this.searchBtn();
- },
- 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;
- }
- })
- },
- //鍒犻櫎
- table_del(row) {
-
- },
- //鏌ョ湅
- table_show(row){
- this.dialog.save = true
- this.$nextTick(() => {
- this.$refs.saveDialog.open('show').setData(row)
- })
- },
- handleSelectionChange(selection) {
- this.selection = selection;
- },
- changeDepartment() {
- this.departmentVisible = true;
- },
- handleSizeChange(val) {
- console.log(`姣忛〉 ${val} 鏉);
- this.searchData.current = "1";
- this.searchData.size = val;
- this.searchBtn();
- },
- handleCurrentChange(val) {
- console.log(`褰撳墠椤�: ${val}`);
- this.searchData.current = val;
- this.searchBtn();
}
+ 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:#3b8e8e;
- padding: 0 10px;
- font-size: 12px;
- background-color: #ebf4f4;
- border: 1px solid #d8e8e8;
- }
+.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