web-admin/src/views/dev/dict/index.vue

<template>
  <div id="index">
    <template v-if="view === 'list'">
      <data-search :fields="searchFields" v-model="searchInfo" @query="search">
        <template #status>
          <el-option v-for="i in statusList" :key="i.model" :label="i.label" :value="i.value"></el-option>
        </template>
      </data-search>
      <data-btn :fields="btnFields" @add="toAdd" />
      <data-table ref="dataTable" :fields="fields" :opera="opera" :data="list" :total="total" @edit="toEdit" @delete="toDelete" @query="search">
        <template #code="{ row, item }">
          <el-link type="primary" @click="toData(row)">{{ row[item.model] }}</el-link>
        </template>
      </data-table>
    </template>
    <template v-else>
      <el-row>
        <el-col :span="24">
          <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
        </el-col>
        <el-col :span="24">
          <data-form :span="12" :fields="infoFields" :rules="rules" v-model="form" labelWidth="150px" @save="toSave">
            <template #status>
              <el-option v-for="i in statusList" :key="i.model" :label="i.label" :value="i.value"></el-option>
            </template>
          </data-form>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
const _ = require('lodash');
import methodUtil from '@/util/opera';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('dictIndex');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      view: 'list',
      fields: [
        { label: '目录名称', model: 'name' },
        { label: '目录编码', model: 'code', custom: true },
        { label: '状态', model: 'status', format: (i) => (i === '0' ? '使用中' : '已禁用') },
      ],
      opera: [
        { label: '修改', method: 'edit' },
        { label: '删除', method: 'delete', confirm: true, type: 'danger' },
      ],
      list: [],
      total: 0,
      limit: 20,
      btnFields: [{ label: '添加', method: 'add' }],
      searchInfo: {},
      searchFields: [
        { label: '目录名称', model: 'name' },
        { label: '目录编码', model: 'code' },
        { label: '状态', model: 'status', type: 'select' },
      ],

      statusList: [
        { label: '使用', value: '0' },
        { label: '禁用', value: '1' },
      ],

      infoFields: [
        { label: '目录名称', model: 'name' },
        { label: '目录编码', model: 'code' },
        { label: '状态', model: 'status', type: 'select' },
      ],
      rules: {},
      form: {},
    };
  },
  computed: {
    ...mapState(['user']),
  },
  created() {
    this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
    ..._.cloneDeep(methodUtil),
    initAddData() {
      this.form.status = '0';
    },
    toData(row) {
      this.$router.push({ path: '/dev/dict/data', query: { code: row.code } });
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>