249 lines
9.0 KiB
Vue
249 lines
9.0 KiB
Vue
<template>
|
|
<a-card :bordered="false">
|
|
<!-- 抽屉 -->
|
|
<a-drawer
|
|
:title="$t('dict.dictList')"
|
|
:width="screenWidth"
|
|
@close="onClose"
|
|
:visible="visible"
|
|
>
|
|
<!-- 抽屉内容的border -->
|
|
<div
|
|
:style="{
|
|
padding:'10px',
|
|
border: '1px solid #e9e9e9',
|
|
background: '#fff',
|
|
}">
|
|
|
|
<div class="table-page-search-wrapper">
|
|
<a-form layout="inline" :form="form" @keyup.enter.native="searchQuery">
|
|
<a-row :gutter="10">
|
|
<a-col :md="8" :sm="12">
|
|
<a-form-item :label="$t('name')">
|
|
<j-input style="width: 120px;" :placeholder="$t('pleaseEnter') + $t('name')" v-model="queryParam.itemText"></j-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="9" :sm="24">
|
|
<a-form-item :label="$t('status')" style="width: 170px" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<a-select
|
|
:placeholder="$t('pleaseSelect')"
|
|
v-model="queryParam.status"
|
|
>
|
|
<a-select-option value="1">{{ $t('normal') }}</a-select-option>
|
|
<a-select-option value="0">{{ $t('disable') }}</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="7" :sm="24">
|
|
<span style="float: right;" class="table-page-search-submitButtons">
|
|
<a-button icon="search" type="primary" @click="searchQuery">{{ $t('query') }}</a-button>
|
|
<a-button icon="reload" type="primary" ghost @click="searchReset" style="margin-left: 8px">{{ $t('reset') }}</a-button>
|
|
</span>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row>
|
|
<a-col :md="2" :sm="24">
|
|
<a-button style="margin-bottom: 10px" icon="plus" type="primary" @click="handleAdd" v-if="model.isReadOnly === IsReadOnlyEnums.configurable.value || model.isReadOnly === IsReadOnlyEnums.subConfigurable.value">{{ $t('newlyAdded') }}</a-button>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</div>
|
|
<div>
|
|
<j-table
|
|
ref="table"
|
|
can-drag
|
|
:class="{'tree-table': attributeType === TagsAttributeTypeEnums.TREE.value}"
|
|
:bordered="true"
|
|
size="middle"
|
|
rowKey="id"
|
|
:columns="columns"
|
|
:dataSource="dataSource"
|
|
:pagination="ipagination"
|
|
:loading="loading"
|
|
:scroll="{x: '100%', y: yScrollHeight}"
|
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
|
@change="handleTableChange"
|
|
:rowClassName="getRowClassname"
|
|
>
|
|
<div slot="action" class="table-action" slot-scope="{text, record}">
|
|
<a class="action-edit" v-if="record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value" @click="handleEdit(record)" v-has="'sys:dict:operation'">{{ $t('edit') }}</a>
|
|
<a-divider type="vertical" v-if="record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value" @click="handleDelete(record.id)" v-has="'sys:dict:operation'"/>
|
|
<a class="table-del" v-if="record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value" @click="handleDelete(record.id)" v-has="'sys:dict:operation'">{{ $t('delete') }}</a>
|
|
</div>
|
|
</j-table>
|
|
</div>
|
|
</div>
|
|
</a-drawer>
|
|
<dict-item-modal ref="modalForm" @ok="modalFormOk"></dict-item-modal> <!-- 字典数据 -->
|
|
</a-card>
|
|
</template>
|
|
|
|
<script>
|
|
import pick from 'lodash.pick'
|
|
import { filterObj } from '@/utils/util'
|
|
import DictItemModal from './modules/DictItemModal'
|
|
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
|
import JInput from '@/components/jero/JInput'
|
|
import { IsReadOnlyEnums, TagsAttributeTypeEnums } from '../../enums/commonEnums'
|
|
import JTable from '../../components/jero/JTable'
|
|
|
|
export default {
|
|
name: 'DictItemList',
|
|
mixins: [JeroListMixin],
|
|
components: { DictItemModal, JInput, JTable },
|
|
data () {
|
|
return {
|
|
IsReadOnlyEnums,
|
|
TagsAttributeTypeEnums,
|
|
columns: [
|
|
{
|
|
title: this.$t('name'),
|
|
align: 'center',
|
|
ellipsis: true,
|
|
dataIndex: 'itemText'
|
|
},
|
|
{
|
|
title: this.$t('englishName'),
|
|
align: 'center',
|
|
ellipsis: true,
|
|
dataIndex: 'enName'
|
|
},
|
|
{
|
|
title: this.$t('dict.dataValue'),
|
|
align: 'center',
|
|
width: 150,
|
|
dataIndex: 'itemValue'
|
|
},
|
|
{
|
|
title: this.$t('operation'),
|
|
dataIndex: 'action',
|
|
align: 'center',
|
|
width: 150,
|
|
scopedSlots: { customRender: 'action' }
|
|
}
|
|
],
|
|
queryParam: {
|
|
dictId: '',
|
|
dictName: '',
|
|
itemText: '',
|
|
delFlag: '1',
|
|
status: []
|
|
},
|
|
isReadOnly: IsReadOnlyEnums.configurable.value,
|
|
title: this.$t('operation'),
|
|
visible: false,
|
|
screenWidth: 1200,
|
|
model: {},
|
|
dictId: '',
|
|
status: 1,
|
|
labelCol: {
|
|
xs: { span: 5 },
|
|
sm: { span: 5 }
|
|
},
|
|
wrapperCol: {
|
|
xs: { span: 12 },
|
|
sm: { span: 12 }
|
|
},
|
|
form: this.$form.createForm(this),
|
|
validatorRules: {
|
|
itemText: { rules: [{ required: true, message: this.$t('pleaseEnter') + this.$t('name') + '!' }] },
|
|
itemValue: { rules: [{ required: true, message: this.$t('pleaseEnter') + this.$t('dict.dataValue') + '!' }] }
|
|
},
|
|
url: {
|
|
list: '/sys/dictItem/page',
|
|
delete: '/sys/dictItem/delete',
|
|
deleteBatch: '/sys/dictItem/deleteBatch'
|
|
},
|
|
// 标签类型
|
|
attributeType: undefined
|
|
}
|
|
},
|
|
created () {
|
|
// 当页面初始化时,根据屏幕大小来给抽屉设置宽度
|
|
this.resetScreenSize()
|
|
},
|
|
methods: {
|
|
add (dictId) {
|
|
this.dictId = dictId
|
|
this.edit({})
|
|
},
|
|
edit (record) {
|
|
if (record.id) {
|
|
this.dictId = record.id
|
|
this.isReadOnly = record.isReadOnly // 父级readonly的值 用于判断是否可以编辑
|
|
}
|
|
this.queryParam = {}
|
|
this.form.resetFields()
|
|
this.model = Object.assign({}, record)
|
|
this.attributeType = Number(this.model.attributeType) // 标签类型，用于辨别是下拉框还是树形结构
|
|
this.model.dictId = this.dictId
|
|
this.model.status = this.status
|
|
this.visible = true
|
|
this.$nextTick(() => {
|
|
this.form.setFieldsValue(pick(this.model, 'itemText', 'itemValue'))
|
|
})
|
|
// 当其它模块调用该模块时,调用此方法加载字典数据
|
|
this.loadData()
|
|
},
|
|
|
|
getQueryParams () {
|
|
// update--begin--autor:wangshuai-----date:20191204------for：清空总条数 teambition JT-113------
|
|
this.ipagination.total = 0
|
|
// update--end--autor:wangshuai-----date:20191204------for：清空总条数 teambition JT-113------
|
|
const param = Object.assign({}, this.queryParam)
|
|
param.dictId = this.dictId
|
|
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)
|
|
},
|
|
|
|
// 添加字典数据
|
|
handleAdd () {
|
|
this.$refs.modalForm.add(this.dictId)
|
|
this.$refs.modalForm.title = this.$t('newlyAdded')
|
|
},
|
|
showDrawer () {
|
|
this.visible = true
|
|
},
|
|
onClose () {
|
|
this.visible = false
|
|
this.form.resetFields()
|
|
this.dataSource = []
|
|
},
|
|
// 抽屉的宽度随着屏幕大小来改变
|
|
resetScreenSize () {
|
|
const screenWidth = document.body.clientWidth
|
|
if (screenWidth < 600) {
|
|
this.screenWidth = screenWidth
|
|
} else {
|
|
this.screenWidth = 600
|
|
}
|
|
},
|
|
// update--begin--autor:wangshuai-----date:20191204------for：系统管理 数据字典禁用和正常区别开，添加背景颜色 teambition JT-22------
|
|
// 增加样式方法返回值
|
|
getRowClassname (record) {
|
|
if ((record.status + '') === '0') {
|
|
return 'data-rule-invalid'
|
|
}
|
|
}
|
|
// update--end--autor:wangshuai-----date:20191204------for：系统管理 数据字典禁用和正常区别开，添加背景颜色 teambition JT-22------
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
//update--begin--autor:wangshuai-----date:20191204------for：系统管理 数据字典禁用和正常区别开，添加背景颜色 teambition JT-22------
|
|
/deep/ .data-rule-invalid{
|
|
background: #f4f4f4;
|
|
color: #bababa;
|
|
}
|
|
/deep/ .table-page-search-wrapper .ant-form-inline .ant-form-item > .ant-form-item-label {
|
|
min-width: 40px;
|
|
}
|
|
//update--begin--autor:wangshuai-----date:20191204------for：系统管理 数据字典禁用和正常区别开，添加背景颜色 teambition JT-22------
|
|
</style>
|