<template>
|
<div class="dictionaries-management-page" :style="{height:pageHeight}">
|
<!-- 字典管理 start -->
|
<div class="block-frame dictionaries-block">
|
<!-- 头部 -->
|
<div class="header-view">
|
<span class="title-text">字典管理</span>
|
<div class="header-action">
|
<el-input v-model.trim="query.searchVal" placeholder="字典编码/名称" size="small" class="default-form-width" >
|
<template #append><el-icon class="search-icon-btn" @click="onSearch"><e-icon-search /></el-icon></template>
|
</el-input>
|
<el-button type="primary" size="small" @click.stop="onNew('dictionary')">
|
<el-icon class="btn-left-icon"><e-icon-plus /></el-icon>新增
|
</el-button>
|
</div>
|
</div>
|
<!-- body -->
|
<div class="containter-view">
|
<el-scrollbar>
|
<div class="padding-border">
|
<!-- 字典管理 表格 start -->
|
<el-table :data="list" border stripe highlight-current-row @current-change="handleCurrentChange">
|
<el-table-column width="50" label="序号" fixed>
|
<template #default="scope">{{(queried.page-1)*queried.pageSize+(scope.$index+1)}}</template>
|
</el-table-column>
|
<el-table-column prop="code" label="字典编码" />
|
<el-table-column prop="name" label="字典名称" />
|
<el-table-column label="操作" width="180" fixed="right" align="center">
|
<template #default="scope">
|
<el-button type="primary" size="small" @click.stop="onOpenModifyModal(scope.row)">
|
<el-icon class="btn-left-icon"><e-icon-edit /></el-icon>编辑
|
</el-button>
|
<el-button type="danger" size="small" @click.stop="onCancel(scope.row.Id)">
|
<el-icon class="btn-left-icon"><e-icon-delete /></el-icon>删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- 字典管理 表格 end -->
|
<!-- 字典管理 分页 start-->
|
<div class="pagination-row" v-if="total>queried.pageSize">
|
<el-pagination :pager-count="5" layout="prev, pager, next, jumper" :total="total" @current-change="onPageList" />
|
</div>
|
<!-- 字典管理 分页 end -->
|
</div>
|
</el-scrollbar>
|
</div>
|
</div>
|
<!-- 字典管理 end -->
|
<div class="divider-view"></div>
|
|
<!-- 字典数据 start -->
|
<div class="block-frame data-block">
|
<!-- 头部 -->
|
<div class="header-view">
|
<span class="title-text">字典【{{detailRow.name}}】数据管理</span>
|
<el-button type="primary" size="small" @click.stop="onNew('data')" :disabled="!detailRow.Id">
|
<el-icon class="btn-left-icon"><e-icon-plus /></el-icon>新增
|
</el-button>
|
</div>
|
|
<!-- body -->
|
<div class="containter-view">
|
<el-scrollbar>
|
<div class="padding-border">
|
<!-- 字典管理 表格 start -->
|
<el-table :data="dataList" border stripe >
|
<el-table-column width="50" label="序号" fixed>
|
<template #default="scope">{{scope.$index+1}}</template>
|
</el-table-column>
|
<el-table-column prop="code" label="编码" />
|
<el-table-column prop="name" label="名称" />
|
<el-table-column label="操作" width="180" fixed="right" align="center">
|
<template #default="scope">
|
<el-button type="primary" size="small" @click.stop="onOpenDataModifyModal(scope.row)">
|
<el-icon class="btn-left-icon"><e-icon-edit /></el-icon>编辑
|
</el-button>
|
<el-button type="danger" size="small" @click.stop="onDataCancel(scope.row.id)">
|
<el-icon class="btn-left-icon"><e-icon-delete /></el-icon>删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- 字典管理 表格 end -->
|
</div>
|
</el-scrollbar>
|
</div>
|
</div>
|
<!-- 字典数据 end -->
|
<form-modal v-model:visible="formVisible" :type="formType" :row="actionRow" @submitCallback="onFormSubmitCallback" />
|
<data-form-modal v-model:visible="dataFormVisible" :type="dataFormType" :row="dataActionRow"
|
:parent="detailRow" @submitCallback="onDataFormSubmitCallback" />
|
</div>
|
</template>
|
|
<script>
|
import {Plus,Edit,Delete,Search} from '@element-plus/icons'
|
import FormModal from './compontents/FormModal.vue'
|
import DataFormModal from './compontents/DataFormModal.vue'
|
const defaultQuery = {
|
searchVal:'',
|
searchVal_FilterMode:1,
|
searchFormInputAttrs:['code','name']
|
}
|
export default {
|
name:'dictionariesManagementPage',
|
components:{FormModal,DataFormModal,'e-icon-plus':Plus,'e-icon-edit':Edit,'e-icon-delete':Delete,'e-icon-search':Search},
|
inject:['getSubPageSize'],
|
data(){
|
return {
|
list:[],
|
total:0,
|
query:{...defaultQuery},
|
queried:{...this.$config.pagination},
|
actionRow:{},
|
formType:'',
|
formVisible:false,
|
detailRow:{},
|
dataList:[],
|
dataActionRow:{},
|
dataFormType:'',
|
dataFormVisible:false
|
}
|
},
|
computed:{
|
pageHeight(){
|
let res = null;
|
try{
|
res = this.getSubPageSize().height + 'px'
|
}catch(e){
|
res = 'auto'
|
}
|
return res;
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods:{
|
/* 页面初始化 */
|
init(){
|
this.reset()
|
},
|
onNew(type){
|
if (type==='dictionary') {
|
this.formType = 'add';
|
this.formVisible = true;
|
} else {
|
this.dataFormType = 'add';
|
this.dataFormVisible = true;
|
}
|
},
|
onSearch(){
|
this.newList()
|
},
|
/* 字典管理 翻页功能 */
|
onPageList(page){
|
this.queried.page = page;
|
this.getList();
|
},
|
/* 字典管理 删除后的表格刷新 */
|
delRefresh(callback){
|
let len = this.list.length;
|
if (len===1 && this.queried.page>1) {
|
this.queried.page--;
|
}
|
this.getList(callback,false)
|
},
|
/* 字典管理 重置 */
|
reset(){
|
this.query = {...defaultQuery}
|
this.newList()
|
},
|
/* 字典新增/编辑成功提交后的回调 */
|
onFormSubmitCallback(needLoading) {
|
if (this.formType==='add') {
|
this.newList(needLoading)
|
} else {
|
this.getList()
|
}
|
},
|
/* 字典管理 表格刷新至首页 */
|
newList(needLoading=true,callback){
|
this.queried = {...this.query,...this.$config.pagination}
|
this.getList(callback,needLoading)
|
},
|
/* 字典管理 更新数据表 */
|
getList(callback,needLoading=true){
|
if (needLoading) {
|
this.$loading();
|
}
|
this.$api.post('Get',this.queried,{block:'dictionaryBase'}).then((d)=>{
|
this.total = d.total;
|
this.list = d.list || []
|
this.detailRow = {};
|
this.dataList = [];
|
if (needLoading) {
|
this.$loading().close();
|
}
|
callback && callback(true)
|
}).catch((err)=>{
|
if (needLoading) {
|
this.$loading().close();
|
}
|
callback && callback(false)
|
})
|
},
|
/* 字典管理 打开编辑弹窗 */
|
onOpenModifyModal(obj){
|
this.actionRow = obj;
|
this.formType = 'modify';
|
this.formVisible = true;
|
},
|
/* 字典管理 删除按钮 */
|
onCancel(id){
|
this.$confirm('确定要删除该字典吗？<br />系统数据，请谨慎操作！', '删除警示', {
|
dangerouslyUseHTMLString:true
|
}).then(()=>{
|
this.dealCancel(id)
|
}).catch(()=>{});
|
},
|
/* 字典管理 删除处理事件 */
|
dealCancel(id){
|
this.$loading();
|
this.$api.delete('Delete',{id},{block:'dictionaryBase'}).then(()=>{
|
this.delRefresh(()=>{
|
this.$loading().close();
|
})
|
}).catch((err)=>{
|
this.$loading().close();
|
})
|
},
|
handleCurrentChange(currentRow){
|
if (!currentRow) return false; /* 表格刷新，该方法会被调起，需要阻止事件，避免出错 */
|
this.detailRow = currentRow
|
this.getDataList();
|
},
|
/* 字典数据 新增/编辑成功提交后的回调 */
|
onDataFormSubmitCallback(needLoading) {
|
this.getDataList(()=>{},needLoading)
|
},
|
/* 字典数据 更新数据表 */
|
getDataList(callback,needLoading=true){
|
if (needLoading) {
|
this.$loading();
|
}
|
this.$api.get('GetCodeItemsBySetId',{setId:this.detailRow.Id},{block:'dictionary'}).then((d)=>{
|
this.dataList = d || []
|
if (needLoading) {
|
this.$loading().close();
|
}
|
callback && callback(true)
|
}).catch((err)=>{
|
if (needLoading) {
|
this.$loading().close();
|
}
|
callback && callback(false)
|
})
|
},
|
/* 字典数据 打开编辑弹窗 */
|
onOpenDataModifyModal(obj){
|
this.dataActionRow = obj;
|
this.dataFormType = 'modify';
|
this.dataFormVisible = true;
|
},
|
/* 字典数据 删除按钮 */
|
onDataCancel(id){
|
this.$confirm('确定要删除该数据吗？<br />系统数据，请谨慎操作！', '删除警示', {
|
dangerouslyUseHTMLString:true
|
}).then(()=>{
|
this.dealDataCancel(id)
|
}).catch(()=>{});
|
},
|
/* 字典数据 删除处理事件 */
|
dealDataCancel(id){
|
this.$loading();
|
this.$api.delete('Delete',{id},{block:'dictionary'}).then(()=>{
|
this.getDataList(()=>{
|
this.$loading().close();
|
},false)
|
}).catch((err)=>{
|
this.$loading().close();
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.dictionaries-management-page{
|
display: flex;
|
.divider-view{
|
width: 20px;
|
}
|
.block-frame{
|
background-color: #FFFFFF;
|
border-radius: 6px;
|
width: 10px;
|
flex-grow: 1;
|
position: relative;
|
box-sizing: border-box;
|
height: 100%;
|
padding-top: 50px;
|
&>.header-view{
|
position: absolute;
|
top:0;
|
left: 0;
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding:8px;
|
border-bottom: 1px solid #DCDCDC;
|
box-sizing: border-box;
|
.title-text{
|
font-weight: bold;
|
font-size: 16px;
|
}
|
.header-action{
|
display: flex;
|
.el-input{
|
margin-right: 8px;
|
}
|
}
|
.search-icon-btn{
|
cursor: pointer;
|
padding: 0 12px;
|
&.disabled-btn{
|
cursor: default;
|
}
|
}
|
}
|
&>.containter-view{
|
height: 100%;
|
.padding-border{
|
padding: 8px;
|
}
|
}
|
}
|
}
|
</style>
|
<style>
|
.dictionaries-management-page .el-input-group__append{
|
padding: 0;
|
}
|
</style>
|
