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

<template>
  <div id="data">
    <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"> </data-table>
    </template>
    <template v-else>
      <el-row>
        <el-col :span="24">
          <el-button icon="el-icon-back" 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>
import methodUtil from '@/util/opera';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('dictData');
export default {
  name: 'dictData',
  props: {},
  components: {},
  data: function () {
    return {
      view: 'list',
      fields: [
        { label: '显示内容', model: 'label' },
        { label: '值', model: 'value' },
        { label: '顺序', model: 'sort' },
        { 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' }],
      defaultSearch: {},
      searchInfo: {},
      searchFields: [
        { label: '显示内容', model: 'label' },
        { label: '值', model: 'value' },
        { label: '状态', model: 'status', type: 'select' },
      ],

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

      infoFields: [
        { label: '显示内容', model: 'label' },
        { label: '值', model: 'value' },
        { label: '顺序', model: 'sort', type: 'number' },
        { label: '状态', model: 'status', type: 'select' },
      ],
      rules: {},
      form: {},
    };
  },
  computed: {
    ...mapState(['user']),
    code() {
      return this.$route.query.code;
    },
  },
  created() {
    this.defaultSearch.code = this.code;
    this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
    ...methodUtil,
    initAddData() {
      this.form.code = this.code;
      this.form.status = '0';
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

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