web/src/views/sys/dict/DictItemList.vue

<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>