<template>
<a-card :bordered="false">
<!-- 抽屉 -->
<a-drawer
title="字典列表"
: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="名称">
<a-input style="width: 120px;" placeholder="请输入名称" v-model="queryParam.itemText"></a-input>
</a-form-item>
</a-col>
<a-col :md="9" :sm="24">
<a-form-item label="状态" style="width: 170px" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select
placeholder="请选择"
v-model="queryParam.status"
>
<a-select-option value="1">正常</a-select-option>
<a-select-option value="0">禁用</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="7" :sm="24">
<span style="float: left;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery">搜索</a-button>
<a-button type="primary" @click="searchReset" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
<a-row>
<a-col :md="2" :sm="24">
<a-button style="margin-bottom: 10px" type="primary" @click="handleAdd">新增</a-button>
</a-col>
</a-row>
</a-form>
</div>
<div>
<a-table
ref="table"
rowKey="id"
size="middle"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
@change="handleTableChange"
:rowClassName="getRowClassname"
>
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</span>
<span slot="status" slot-scope="text, record">
<a-tag :key="status" :color="record.itemColor">
{{ record.itemText }}
</a-tag>
</span>
</a-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 { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
name: 'DictItemList',
mixins: [JeecgListMixin],
components: { DictItemModal },
data() {
return {
columns: [
{
title: '名称',
align: 'center',
dataIndex: 'itemText'
},
{
title: '数据值',
align: 'center',
dataIndex: 'itemValue'
},
{
title: '标签颜色',
align: 'center',
dataIndex: 'itemColor',
scopedSlots: { customRender: 'status' }
},
{
title: '排序',
align: 'center',
dataIndex: 'sortOrder'
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
scopedSlots: { customRender: 'action' }
}
],
queryParam: {
dictId: '',
dictName: '',
itemText: '',
delFlag: '1',
status: []
},
title: '操作',
visible: false,
screenWidth: 800,
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: '请输入名称!' }] },
itemValue: { rules: [{ required: true, message: '请输入数据值!' }] }
},
url: {
list: '/sys/dictItem/list',
delete: '/sys/dictItem/delete',
deleteBatch: '/sys/dictItem/deleteBatch'
}
}
},
created() {
// 当页面初始化时,根据屏幕大小来给抽屉设置宽度
this.resetScreenSize()
},
methods: {
add(dictId) {
this.dictId = dictId
this.edit({})
},
edit(record) {
if (record.id) {
this.dictId = record.id
}
this.queryParam = {}
this.form.resetFields()
this.model = Object.assign({}, record)
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------
var 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 = '新增'
},
showDrawer() {
this.visible = true
},
onClose() {
this.visible = false
this.form.resetFields()
this.dataSource = []
},
// 抽屉的宽度随着屏幕大小来改变
resetScreenSize() {
let 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;
}
//update--begin--autor:wangshuai-----date:20191204------for：系统管理 数据字典禁用和正常区别开，添加背景颜色 teambition JT-22------
</style>