zsxt_nbzs_h5/Web/src/pages/system/dict/_index.vue

<template>
  <container>
    <br />
    <a-card :bordered="false">
      <yo-table
        :columns="columns"
        :load-data="loadData"
        @query="onQuery"
        @resetQuery="onResetQuery"
        ref="table"
      >
        <Auth auth="sysDictType:page" slot="query">
          <a-form-model-item label="类型名称">
            <a-input placeholder="请输入类型名称" v-model="query.name" />
          </a-form-model-item>
          <a-form-model-item label="唯一编码">
            <a-input placeholder="请输入唯一编码" v-model="query.code" />
          </a-form-model-item>
        </Auth>
        <Auth auth="sysDictType:add" slot="operator">
          <a-button @click="onOpen('add-form')" icon="plus">新增字典类型</a-button>
        </Auth>
        <!-- 格式化字段内容 -->
        <span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
        <!-- 添加操作控件 -->
        <span slot="action" slot-scope="text, record">
          <yo-table-actions>
            <Auth auth="sysDictType:edit">
              <a @click="onOpen('edit-form', record)">编辑</a>
            </Auth>
            <Auth auth="sysDictType:delete">
              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
                <a>删除</a>
              </a-popconfirm>
            </Auth>
            <!-- 可在此处添加其他操作控件 -->
          </yo-table-actions>
        </span>
        <div slot="expandedRowRender" slot-scope="record">
          <dict-data :codes="codes" :type="record" />
        </div>
      </yo-table>
    </a-card>
    <br />

    <yo-modal-form :action="$api.sysDictTypeAdd" @ok="onReloadData" ref="add-form" title="新增字典类型">
      <form-body />
    </yo-modal-form>

    <yo-modal-form :action="$api.sysDictTypeEdit" @ok="onReloadData" ref="edit-form" title="编辑字典类型">
      <form-body />
    </yo-modal-form>
  </container>
</template>
<script>
import DictData from './dictdata';

import FormBody from './form';

export default {
  components: {
    DictData,
    FormBody,
  },
  data() {
    return {
      query: {},
      columns: [
        {
          title: '类型名称',
          dataIndex: 'name',
          sorter: true,
        },
        {
          title: '唯一编码',
          dataIndex: 'code',
          sorter: true,
        },
        {
          title: '排序',
          dataIndex: 'sort',
          sorter: true,
        },
        {
          title: '备注',
          dataIndex: 'remark',
          width: 200,
          sorter: true,
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
          sorter: true,
        },
      ],
      codes: {
        commonStatus: [],
      },
    };
  },
  created() {
    this.onLoadCodes();

    /** 根据权限添加操作列 */
    const flag = this.$auth({ sysDictType: [['edit'], ['delete']] });
    if (flag) {
      this.columns.push({
        title: '操作',
        width: '150px',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
      });
    }
  },
  methods: {
    /**
     * 必要的方法
     * 传给yo-table以示意数据接口及其参数和返回的数据结构
     */
    loadData(params) {
      return (
        this.$api
          /** !!此处必须修改调用的接口方法 */
          .sysDictTypePage({
            ...params,
            ...this.query,
          })
          .then((res) => {
            const data = res.data;
            data.rows = data.rows.map(
              (p) =>
                (p = {
                  ...p,
                  data: [],
                  query: {},
                })
            );
            return data;
          })
      );
    },

    /**
     * 有查询功能时的必要方法
     * 加载数据时初始化分页信息
     */
    onQuery() {
      this.$refs.table.onReloadData(true);
    },

    /**
     * 有查询功能时的必要方法
     * 重置查询条件
     */
    onResetQuery() {
      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
      this.query = {};
      this.onQuery();
    },

    /**
     * 必要方法
     * 重新列表数据
     */
    onReloadData() {
      this.$refs.table.onReloadData();
    },

    /**
     * 必要方法
     * 加载字典数据
     * 如果不需要获取相应的字典数据,此方法内容可空
     */
    onLoadCodes() {
      this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'common_status' })]).then(([commonStatus]) => {
        this.codes.commonStatus = commonStatus.data;
      });
    },

    /**
     * 必要方法
     * 绑定数据字典值
     */
    bindCodeValue(code, name) {
      const c = this.codes[name].find((p) => p.code == code);
      if (c) {
        return c.value;
      }
      return null;
    },

    /**
     * 必要方法
     * 从列表页调用窗口的打开方法
     */
    onOpen(formName, record) {
      this.$refs[formName].onOpen({
        record,
      });
    },

    /**
     * 必要方法
     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
     */
    onResult(success, successMessage) {
      if (success) {
        this.$message.success(successMessage);
        this.onReloadData();
      }
    },

    /**
     * 必要方法
     * 删除时调用
     */
    onDelete(record) {
      this.$refs.table.onLoading();
      this.$api
        /** !!此处必须修改调用的接口方法 */
        .sysDictTypeDelete(record)
        .then(({ success }) => {
          this.onResult(success, '删除成功');
        })
        .finally(() => {
          this.$refs.table.onLoaded();
        });
    },
  },
};
</script>