| | |
| | | <template> |
| | | <el-container> |
| | | <basic-container> |
| | | <avue-crud |
| | | ref="useCrud" |
| | | :table-loading="loading" |
| | | :data="data" |
| | | :option="option" |
| | | :page.sync="page" |
| | | @selection-change="selectChange" |
| | | @row-click="rowClickHandler" |
| | | @refresh-change="handleRefresh" |
| | | @size-change="sizeChange" |
| | | @current-change="currentChange" |
| | | > |
| | | <template slot="menuLeft"> |
| | | <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">创建 |
| | | </el-button> |
| | | <el-button icon="el-icon-delete" plain size="small" type="danger" @click="delClickHandler">删除 |
| | | </el-button> |
| | | <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出 |
| | | </el-button> |
| | | <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="uploadClickHandler">导入 |
| | | </el-button> |
| | | <el-button icon="el-icon-check" plain size="small" type="primary" |
| | | @click="checkViewClickHandler">查看使用范围 |
| | | </el-button> |
| | | </template> |
| | | |
| | | <el-aside> |
| | | <basic-container> |
| | | <div ref="TreeBox" style="height: calc(100vh - 144px);!important;"> |
| | | <div class="headerCon"> |
| | | <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">创建 |
| | | </el-button> |
| | | <el-button icon="el-icon-edit" plain size="small" type="primary" @click="editClickHandler">修改 |
| | | </el-button> |
| | | <el-button icon="el-icon-delete" plain size="small" type="danger" @click="delClickHandler">删除 |
| | | </el-button> |
| | | <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出 |
| | | </el-button> |
| | | <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="uploadClickHandler">导入 |
| | | </el-button> |
| | | <el-button class="smallBtn" plain size="small" type="primary" |
| | | @click="checkViewClickHandler">查看使用范围 |
| | | </el-button> |
| | | </div> |
| | | <!-- 左侧树 --> |
| | | <div style="height: calc(100vh - 280px);"> |
| | | <avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick"> |
| | | <span slot-scope="{ node, data }" class="el-tree-node__label"> |
| | | <span style="font-size: 15px"> |
| | | <i class="el-icon-s-promotion"></i> |
| | | {{ (node || {}).label }} |
| | | </span> |
| | | </span> |
| | | </avue-tree> |
| | | </div> |
| | | </div> |
| | | </basic-container> |
| | | </el-aside> |
| | | <template slot="menu" slot-scope="{row,index}"> |
| | | <el-button icon="el-icon-edit" plain size="small" type="text" @click="editClickHandler(row)">修改 |
| | | </el-button> |
| | | <el-button icon="el-icon-delete" plain size="small" type="text" @click="delRowClickHandler(row)">删除 |
| | | </el-button> |
| | | </template> |
| | | |
| | | <el-main> |
| | | <basic-container> |
| | | <el-descriptions :column="1" border class="margin-top" size="medium" title="属性信息"> |
| | | <el-descriptions-item :contentStyle="descriptionOption.contentStyle" |
| | | :labelStyle="descriptionOption.labelStyle"> |
| | | <template slot="label"> |
| | | <i :class="icons.id"></i> |
| | | 名称 |
| | | </template> |
| | | <el-tag v-if="nodeRow.id">{{ nodeRow.id }}</el-tag> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item :contentStyle="descriptionOption.contentStyle" |
| | | :labelStyle="descriptionOption.labelStyle"> |
| | | <template slot="label"> |
| | | <i :class="icons.name"></i> |
| | | 标签 |
| | | </template> |
| | | <el-tag v-if="nodeRow.name">{{ nodeRow.name }}</el-tag> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item :contentStyle="descriptionOption.contentStyle" |
| | | :labelStyle="descriptionOption.labelStyle"> |
| | | <template slot="label"> |
| | | <i :class="icons.desc"></i> |
| | | 描述 |
| | | </template> |
| | | <el-tag v-if="nodeRow.description">{{ nodeRow.description }}</el-tag> |
| | | </el-descriptions-item> |
| | | </el-descriptions> |
| | | <!-- <avue-crud>--> |
| | | <!-- :data="data"--> |
| | | <!-- :option="option"--> |
| | | <!-- </avue-crud>--> |
| | | </basic-container> |
| | | </el-main> |
| | | |
| | | </avue-crud> |
| | | |
| | | <!-- 新增 修改 --> |
| | | <el-dialog |
| | |
| | | > |
| | | </avue-crud> |
| | | </el-dialog> |
| | | |
| | | </el-container> |
| | | </basic-container> |
| | | |
| | | </template> |
| | | |
| | |
| | | name: "index", |
| | | data() { |
| | | return { |
| | | data:[], |
| | | option:{ |
| | | ...basicOption |
| | | loading:false, |
| | | data: [], |
| | | option: { |
| | | ...basicOption, |
| | | addBtn: false, |
| | | editBtn: false, |
| | | delBtn: false, |
| | | calcHeight: -60, |
| | | column: [ |
| | | { |
| | | label: '名称', |
| | | prop: 'id', |
| | | sortable: true, |
| | | }, |
| | | { |
| | | label: '标签', |
| | | prop: 'name', |
| | | sortable: true, |
| | | }, |
| | | { |
| | | label: '描述', |
| | | prop: 'description', |
| | | }, |
| | | ] |
| | | }, |
| | | checkViewVisible: false, |
| | | checkViewData: [], |
| | |
| | | ] |
| | | }, |
| | | visible: false, |
| | | treeOption: { |
| | | height: 'auto', |
| | | defaultExpandAll: false, |
| | | menu: false, |
| | | addBtn: false, |
| | | props: { |
| | | label: 'id', |
| | | value: 'id', |
| | | children: 'children' |
| | | } |
| | | }, |
| | | treeData: [], |
| | | nodeRow: {}, |
| | | descriptionOption: { |
| | | labelStyle: 'text-align:center;width:120px', |
| | | contentStyle: 'width:240px;text-align:center;word-break;break-all;' |
| | | }, |
| | | icons: { |
| | | id: 'el-icon-finished', |
| | | name: 'el-icon-tickets', |
| | | desc: 'el-icon-chat-line-square' |
| | | selectList:[], |
| | | lastIndex:null, |
| | | page: { |
| | | currentPage: 1, |
| | | pageSize: 15, |
| | | total: 0, |
| | | pageSizes: [15, 30, 50, 100], |
| | | }, |
| | | } |
| | | }, |
| | |
| | | methods: { |
| | | // 左侧树请求 |
| | | getTreeList() { |
| | | gridStatus({page: 1, limit: -1}).then(res => { |
| | | gridStatus(this.page.currentPage, this.page.pageSize).then(res => { |
| | | const data = res.data.data; |
| | | this.treeData = data; |
| | | this.data = data; |
| | | this.page.total = res.data.total; |
| | | this.loading = false; |
| | | }).catch(err => { |
| | | this.$message.error(err) |
| | | }); |
| | | }, |
| | | |
| | | // 树节点点击事件 |
| | | nodeClick(row) { |
| | | this.nodeRow = row; |
| | | // 表格刷新 |
| | | handleRefresh(){ |
| | | this.getTreeList(); |
| | | }, |
| | | |
| | | // 表格多选 |
| | | selectChange(row){ |
| | | this.selectList = row; |
| | | }, |
| | | |
| | | // 条数 |
| | | sizeChange(val) { |
| | | this.page.pageSize = val; |
| | | this.getTreeList(); |
| | | }, |
| | | |
| | | // 页码 |
| | | currentChange(val) { |
| | | this.page.currentPage = val; |
| | | this.getTreeList(); |
| | | }, |
| | | |
| | | // 行单选 |
| | | rowClickHandler(row) { |
| | | func.rowClickHandler( |
| | | row, |
| | | this.$refs.useCrud, |
| | | this.lastIndex, |
| | | (newIndex) => { this.lastIndex = newIndex; }, |
| | | () => { this.selectList = []; } |
| | | ); |
| | | }, |
| | | |
| | | // 创建按钮 |
| | |
| | | }, |
| | | |
| | | // 编辑按钮 |
| | | editClickHandler() { |
| | | if (func.isEmptyObject(this.nodeRow)) { |
| | | this.$message.error('请至少选择一条数据!'); |
| | | return; |
| | | } |
| | | editClickHandler(row) { |
| | | this.visible = true; |
| | | this.dialogTitle = 'edit'; |
| | | this.form = this.nodeRow; |
| | | this.form = {...row}; |
| | | }, |
| | | |
| | | // 删除 |
| | | delClickHandler() { |
| | | if (func.isEmptyObject(this.nodeRow)) { |
| | | if (this.selectList.length <= 0) { |
| | | this.$message.error('请至少选择一条数据!'); |
| | | return; |
| | | } |
| | |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | const list = [this.nodeRow]; |
| | | this.loading = true; |
| | | deleteStatus(this.selectList).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.$message.success(res.data.obj); |
| | | this.getTreeList(); |
| | | } |
| | | }) |
| | | }).catch(() => { |
| | | this.$message({ |
| | | type: 'info', |
| | | message: '已取消删除' |
| | | }); |
| | | }); |
| | | }, |
| | | |
| | | // 行单个删除 |
| | | delRowClickHandler(row){ |
| | | this.$confirm('您确定要删除所选择的数据吗?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | const list = [row]; |
| | | this.loading = true; |
| | | deleteStatus(list).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.$message.success(res.data.obj); |
| | | this.getTreeList(); |
| | | this.nodeRow = {}; |
| | | } |
| | | }) |
| | | }).catch(() => { |
| | |
| | | saveFunction(this.form).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.$message.success(res.data.obj); |
| | | this.loading = true; |
| | | this.getTreeList(); |
| | | this.visible = false; |
| | | } else { |
| | |
| | | |
| | | // 导出 |
| | | exportClickHandler() { |
| | | if (func.isEmptyObject(this.nodeRow)) { |
| | | if (this.selectList.length <= 0) { |
| | | this.$message.error('请至少选择一条数据!'); |
| | | return; |
| | | } |
| | | |
| | | exportStatus({statusOids: this.nodeRow.oid}).then(res => { |
| | | exportStatus({statusOids: this.selectList.map(item => item.oid).join(',')}).then(res => { |
| | | func.downloadFileByBlobHandler(res); |
| | | this.$message.success('导出成功'); |
| | | }).catch(err => { |
| | |
| | | |
| | | // 查看使用范围 |
| | | checkViewClickHandler() { |
| | | if (func.isEmptyObject(this.nodeRow)) { |
| | | if (this.selectList.length <= 0) { |
| | | this.$message.error('请至少选择一条数据!'); |
| | | return; |
| | | } |
| | | listUsed({oid: this.nodeRow.oid}).then(res => { |
| | | |
| | | if (this.selectList.length > 1) { |
| | | this.$message.error('只能选择一条数据!'); |
| | | return; |
| | | } |
| | | listUsed({oid: this.selectList[0].oid}).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.checkViewVisible = true; |
| | | const data = res.data.data; |
| | | data.forEach(item => { |
| | | item.name = item.id + `( ${item.name} )`; |
| | | item.TreeId = this.nodeRow.id; |
| | | item.TreeId = this.selectList[0].oid; |
| | | }) |
| | | this.checkViewData = res.data.data; |
| | | this.checkViewDataSearch = res.data.data; |
| | |
| | | .el-scrollbar__wrap { |
| | | overflow: auto !important; |
| | | } |
| | | .headerCon{ |
| | | .el-button{ |
| | | width: 82px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .headerCon { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | margin-bottom: 5px; |
| | | |
| | | .el-button + .el-button { |
| | | margin-left: 5px; |
| | | } |
| | | |
| | | .el-button { |
| | | margin-top: 5px; |
| | | } |
| | | } |
| | | |
| | | .headerCon > .el-button:nth-child(4) { |
| | | margin-left: 0; |
| | | } |
| | | |
| | | .headerCon > .el-button:nth-child(7) { |
| | | margin-left: 0; |
| | | } |
| | | |
| | | .upload-demo { |
| | | margin-left: 20px; |
| | | } |
| | | |
| | | .smallBtn { |
| | | width: 82px; |
| | | text-align: center; |
| | | padding-left: 4.5px; |
| | | } |
| | | </style> |