254 lines
8.3 KiB
Vue
254 lines
8.3 KiB
Vue
<template>
|
|
<a-card :bordered="false">
|
|
|
|
<!-- 左侧面板 -->
|
|
<div class="table-page-search-wrapper">
|
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
|
<a-row :gutter="24">
|
|
<a-col :md="7" :sm="8">
|
|
<a-form-item :label="$t('dict.dictionaryName')" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
|
|
<j-input :placeholder="$t('pleaseEnter')+$t('dict.dictionaryName')"
|
|
v-model="queryParam.dictName"></j-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="7" :sm="8">
|
|
<a-form-item :label="$t('dict.dictionaryNumber')" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
|
|
<j-input :placeholder="$t('pleaseEnter')+$t('dict.dictionaryNumber')"
|
|
v-model="queryParam.dictCode"></j-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<div style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
|
|
<a-col :md="7" :sm="8">
|
|
<a-button type="primary" @click="searchQuery" icon="search">{{ $t('query') }}</a-button>
|
|
<a-button type="primary" @click="searchReset" ghost icon="reload" style="margin-left: 8px">{{ $t('reset')
|
|
}}
|
|
</a-button>
|
|
</a-col>
|
|
</div>
|
|
</a-row>
|
|
</a-form>
|
|
</div>
|
|
<div class="table-operator" style="border-top: 5px">
|
|
<a-button @click="handleAdd" type="primary" icon="plus" v-has="'sys:dict:operation'">{{ $t('add') }}</a-button>
|
|
<a-button type="primary" icon="download" ghost @click="handleExportXls($t('dict.dictInfo'))"
|
|
v-has="'sys:dict:operation'">{{ $t('export') }}
|
|
</a-button>
|
|
<a-upload v-has="'sys:dict:operation'" name="file" :showUploadList="false" :multiple="false"
|
|
:headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
|
|
<a-button type="primary" icon="import" ghost>{{ $t('import') }}</a-button>
|
|
</a-upload>
|
|
<a-button type="primary" icon="sync" ghost v-has="'sys:dict:operation'" @click="refleshCache()">
|
|
{{ $t('dict.refreshCache') }}
|
|
</a-button>
|
|
|
|
<a-button type="primary" icon="hdd" ghost @click="openDeleteList">{{ $t('recycleBin') }}</a-button>
|
|
</div>
|
|
|
|
<j-table
|
|
rowKey="id"
|
|
can-drag
|
|
:columns="columns"
|
|
:dataSource="dataSource"
|
|
:pagination="ipagination"
|
|
:scroll="{x: '100%', y: yScrollHeight}"
|
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
|
:operation-list="operationList"
|
|
@change="handleTableChange"
|
|
@operationClick="operationClick"
|
|
>
|
|
</j-table>
|
|
|
|
<dict-modal ref="modalForm" @ok="modalFormOk"></dict-modal> <!-- 字典类型 -->
|
|
<dict-item-list v-show="false" ref="dictItemList"></dict-item-list>
|
|
<dict-delete-list ref="dictDeleteList" @refresh="() =>loadData()"></dict-delete-list>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { filterObj } from '@/utils/util'
|
|
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
|
import DictModal from './modules/DictModal'
|
|
import DictItemList from './DictItemList'
|
|
import DictDeleteList from './DictDeleteList'
|
|
import JInput from '@/components/jero/JInput'
|
|
import { getAction } from '@/api/manage'
|
|
import { UI_CACHE_DB_DICT_DATA } from '@/store/mutation-types'
|
|
import Vue from 'vue'
|
|
import JTable from '../../components/jero/JTable'
|
|
import { IsReadOnlyEnums } from '../../enums/commonEnums'
|
|
|
|
export default {
|
|
name: 'DictList',
|
|
mixins: [JeroListMixin],
|
|
components: { DictModal, DictItemList, DictDeleteList, JInput, JTable },
|
|
data () {
|
|
return {
|
|
description: '这是数据字典页面',
|
|
visible: false,
|
|
// 查询条件
|
|
queryParam: {
|
|
dictCode: '',
|
|
dictName: ''
|
|
},
|
|
// 表头
|
|
columns: [
|
|
{
|
|
title: '#',
|
|
dataIndex: '',
|
|
key: 'rowIndex',
|
|
width: 60,
|
|
align: 'center',
|
|
customRender: function (t, r, index) {
|
|
return parseInt(index) + 1
|
|
}
|
|
},
|
|
{
|
|
title: this.$t('dict.dictionaryName'),
|
|
align: 'left',
|
|
width: 100,
|
|
dataIndex: 'dictName',
|
|
scopedSlots: { customRender: 'text' }
|
|
},
|
|
{
|
|
title: this.$t('dict.dictionaryEnglishName'),
|
|
align: 'left',
|
|
width: 100,
|
|
dataIndex: 'dictEnglishName',
|
|
scopedSlots: { customRender: 'text' }
|
|
},
|
|
{
|
|
title: this.$t('dict.dictionaryNumber'),
|
|
align: 'left',
|
|
width: 100,
|
|
dataIndex: 'dictCode',
|
|
scopedSlots: { customRender: 'text' }
|
|
},
|
|
{
|
|
title: this.$t('description'),
|
|
align: 'left',
|
|
dataIndex: 'description',
|
|
width: 200,
|
|
scopedSlots: { customRender: 'text' }
|
|
},
|
|
{
|
|
title: this.$t('operation'),
|
|
// dataIndex: 'action',
|
|
align: 'left',
|
|
width: 170,
|
|
scopedSlots: { customRender: 'action' }
|
|
}
|
|
],
|
|
canOpeFlag: process.env.VUE_APP_TAG_FLAG === '0', // 是否可以操作编辑和删除，开发环境可以
|
|
dict: '',
|
|
labelCol: {
|
|
xs: { span: 8 },
|
|
sm: { span: 5 }
|
|
},
|
|
wrapperCol: {
|
|
xs: { span: 16 },
|
|
sm: { span: 19 }
|
|
},
|
|
url: {
|
|
list: '/sys/dict/page',
|
|
delete: '/sys/dict/delete',
|
|
exportXlsUrl: 'sys/dict/exportXls',
|
|
importExcelUrl: 'sys/dict/importExcel',
|
|
refleshCache: 'sys/dict/refleshCache',
|
|
queryAllDictItems: 'sys/dict/queryAllDictItems'
|
|
},
|
|
operationList: [
|
|
// 字典配置
|
|
{
|
|
text: this.$t('system.tag.dictionaryConfiguration'),
|
|
clickEvent: 'editDictItem'
|
|
},
|
|
// 编辑
|
|
{
|
|
text: this.$t('edit'),
|
|
clickEvent: 'handleEdit',
|
|
has: 'sys:dict:operation',
|
|
show: (record) => {
|
|
return (this.canOpeFlag || record.isReadOnly === IsReadOnlyEnums.configurable.value)
|
|
}
|
|
},
|
|
// 删除
|
|
{
|
|
text: this.$t('delete'),
|
|
clickEvent: 'handleDelete',
|
|
has: 'sys:dict:operation',
|
|
show: (record) => {
|
|
return (this.canOpeFlag || record.isReadOnly === IsReadOnlyEnums.configurable.value)
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
importExcelUrl: function () {
|
|
return `${window._CONFIG.domianURL}/${this.url.importExcelUrl}`
|
|
}
|
|
},
|
|
methods: {
|
|
getQueryParams () {
|
|
const param = Object.assign({}, this.queryParam, this.isorter)
|
|
param.field = this.getQueryField()
|
|
param.pageNo = this.ipagination.current
|
|
param.pageSize = this.ipagination.pageSize
|
|
if (this.superQueryParams) {
|
|
param.superQueryParams = encodeURI(this.superQueryParams)
|
|
param.superQueryMatchType = this.superQueryMatchType
|
|
}
|
|
return filterObj(param)
|
|
},
|
|
// 取消选择
|
|
cancelDict () {
|
|
this.dict = ''
|
|
this.visible = false
|
|
this.loadData()
|
|
},
|
|
// 编辑字典数据
|
|
editDictItem (record) {
|
|
this.$refs.dictItemList.edit(record)
|
|
},
|
|
// 重置字典类型搜索框的内容
|
|
searchReset () {
|
|
const that = this
|
|
that.queryParam.dictName = ''
|
|
that.queryParam.dictCode = ''
|
|
that.loadData(this.ipagination.current)
|
|
},
|
|
openDeleteList () {
|
|
this.$refs.dictDeleteList.show()
|
|
},
|
|
refleshCache () {
|
|
getAction(this.url.refleshCache).then((res) => {
|
|
if (res.success) {
|
|
// 重新加载缓存
|
|
getAction(this.url.queryAllDictItems).then((res) => {
|
|
if (res.success) {
|
|
Vue.ls.remove(UI_CACHE_DB_DICT_DATA)
|
|
Vue.ls.set(UI_CACHE_DB_DICT_DATA, res.result, 7 * 24 * 60 * 60 * 1000)
|
|
}
|
|
})
|
|
this.$message.success(this.$t('dict.refreshCache') + this.$t('dict.complete') + '!')
|
|
}
|
|
}).catch(e => {
|
|
this.$message.warn(this.$t('dict.refreshCache') + this.$t('dict.failed') + '!')
|
|
console.log('刷新失败', e)
|
|
})
|
|
}
|
|
},
|
|
watch: {
|
|
openKeys (val) {
|
|
console.log('openKeys', val)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@import '~@assets/less/common.less';
|
|
/deep/ .table-page-search-wrapper .ant-form-inline .ant-form-item > .ant-form-item-label {
|
|
min-width: 60px;
|
|
}
|
|
</style>
|