|
|
@@ -0,0 +1,152 @@
|
|
|
+<template>
|
|
|
+ <a-card :bordered="false">
|
|
|
+ <!-- 抽屉 -->
|
|
|
+ <a-drawer
|
|
|
+ title="字典列表"
|
|
|
+ :width="screenWidth"
|
|
|
+ :visible="visible"
|
|
|
+ @close="onClose"
|
|
|
+ >
|
|
|
+ <!-- 抽屉内容的border -->
|
|
|
+ <div>
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
+ <a-form>
|
|
|
+ <a-row :gutter="10">
|
|
|
+ <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"
|
|
|
+ row-key="id"
|
|
|
+ size="middle"
|
|
|
+ :columns="columns"
|
|
|
+ :data-source="dataSource"
|
|
|
+ :loading="loading"
|
|
|
+ @change="handleTableChange"
|
|
|
+ >
|
|
|
+
|
|
|
+ <span slot="action" slot-scope="text, record">
|
|
|
+ <a @click="handleEdit(record)">编辑</a>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.dictId)">
|
|
|
+ <a>删除</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-drawer>
|
|
|
+ <dict-item-modal ref="modalForm" @ok="modalFormOk" /> <!-- 字典数据 -->
|
|
|
+ </a-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import DictItemModal from './DictItemModal'
|
|
|
+import { listMixin } from '@/mixin/listMixin'
|
|
|
+import { getDicAction } from '@/api/request'
|
|
|
+export default {
|
|
|
+ name: 'DictItemList',
|
|
|
+ components: { DictItemModal },
|
|
|
+ mixins: [listMixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '名称',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'dictLabel'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '数据值',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'dictValue'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'action' }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ title: '操作',
|
|
|
+ visible: false,
|
|
|
+ screenWidth: 800,
|
|
|
+ model: {},
|
|
|
+ dictId: '',
|
|
|
+ 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: {
|
|
|
+ delete: '/system/dict/data/'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 当页面初始化时,根据屏幕大小来给抽屉设置宽度
|
|
|
+ this.resetScreenSize()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ edit(record) {
|
|
|
+ if (record.dictId) {
|
|
|
+ this.dictId = record.dictId
|
|
|
+ }
|
|
|
+ this.model = Object.assign({}, record)
|
|
|
+ this.visible = true
|
|
|
+ // 当其它模块调用该模块时,调用此方法加载字典数据
|
|
|
+ this.loadDataTree()
|
|
|
+ },
|
|
|
+ // 添加字典数据
|
|
|
+ handleAdd() {
|
|
|
+ this.$refs.modalForm.add(this.dictId)
|
|
|
+ this.$refs.modalForm.title = '新增'
|
|
|
+ },
|
|
|
+ handleEdit(record){
|
|
|
+ this.$refs.modalForm.edit(this.dictId,record)
|
|
|
+ this.$refs.modalForm.title = '编辑'
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ loadDataTree() {
|
|
|
+ this.loading = true
|
|
|
+ getDicAction('/system/dict/data/type/', this.model.dictType).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.dataSource = res.rows || res.data
|
|
|
+ } else {
|
|
|
+ this.$message.warning(res.msg)
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+</style>
|