zkzx_admin/src/views/system/dict/detail.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="one">
          <c-search :is_title="false" :is_back="true" @toBack="toBack" :is_search="true" :fields="fields" @search="toSearch">
            <template #type>
              <el-select v-model="searchForm.type" filterable placeholder="请选择" style="width: 100%" @change="changeType">
                <el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.type"></el-option>
              </el-select>
            </template>
          </c-search>
        </el-col>
        <el-col :span="24" class="two">
          <cButton @toAdd="toAdd()"> </cButton>
        </el-col>
        <el-col :span="24" class="fou">
          <cTable :fields="fields" :opera="opera" :list="list" @query="search" :total="total" @edit="toEdit" @del="toDel">
            <template #type="{ item, row }">
              <template v-if="item.model === 'type'">
                {{ getProps(row, item.model) }}
              </template>
            </template>
          </cTable>
        </el-col>
      </el-col>
    </el-row>
    <cDialog :dialog="dialog" @handleClose="toClose">
      <template v-slot:info>
        <cForm v-if="dialog.type == '1'" :span="24" :fields="formFields" :form="form" :rules="rules" @save="onSubmit">
          <template #is_use>
            <el-radio v-for="(i, index) in is_useList" :key="index" :label="i.value">{{ i.label }}</el-radio>
          </template>
        </cForm>
      </template>
    </cDialog>
  </div>
</template>
<script lang="ts" setup>
import _ from 'lodash';
// import search1 from './parts_two/search-1.vue'
import type { FormRules } from 'element-plus';
import type { Ref } from 'vue';
import { ref, onMounted, getCurrentInstance, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import { DictDataStore } from '@common/src/stores/system/dictData'; // 字典表
import { DictTypeStore } from '@common/src/stores/system/dictType'; // 字典表
import type { IQueryResult } from '@/util/types.util';
const dictType = DictTypeStore();
const dictData = DictDataStore();
const route = useRoute();
const { proxy } = getCurrentInstance() as any;
const loading = ref(false);
// 列表数据
let list: Ref<any> = ref([]);
// 总数
let total: Ref<number> = ref(0);
let skip = 0;
let limit: number = proxy.$limit;
// 列表
let fields: Ref<any[]> = ref([
  { label: '字典类型', model: 'type', isSearch: true, custom: true },
  { label: '字典标签', model: 'label', isSearch: true },
  { label: '字典键值', model: 'value' },
  { label: '字典排序', model: 'sort' },
  { label: '是否使用', model: 'is_use', format: (i) => (i == '0' ? '使用' : '禁用') }
]);
// 操作
let opera: Ref<any[]> = ref([
  { label: '修改', method: 'edit' },
  { label: '删除', method: 'del', confirm: true, type: 'danger' }
]);
const dialog: Ref<{ type: string; show: boolean; title: string }> = ref({ type: '1', show: false, title: '信息管理' });
let form: Ref<any> = ref({});
let is_useList: Ref<any> = ref([]);
// 表单
let formFields: Ref<any[]> = ref([
  { label: '字典类型', model: 'type' },
  { label: '字典标签', model: 'label' },
  { label: '字典键值', model: 'value' },
  { label: '显示排序', model: 'sort', type: 'number' },
  { label: '状态', model: 'is_use', type: 'radio' }
]);
const rules = reactive<FormRules>({
  type: [{ required: true, message: '请输入字典类型', trigger: 'blur' }],
  label: [{ required: true, message: '请输入字典标签', trigger: 'blur' }],
  value: [{ required: true, message: '请输入字典键值', trigger: 'blur' }],
  sort: [{ required: true, message: '请输入显示排序', trigger: 'blur' }]
  // is_use: [{ required: true, message: '请选择是否启用', trigger: 'change' }]
});

// 查询数据
let searchForm: Ref<any> = ref({});
let type: Ref<any> = ref('');
let typeList: Ref<any> = ref([]);

onMounted(async () => {
  loading.value = true;
  await searchOther();
  await search({ skip, limit });
  loading.value = false;
});
// 查询
const search = async (e: { skip: number; limit: number }) => {
  const { skip, limit } = e;
  const condition = _.cloneDeep(searchForm.value);
  let info = { limit: limit, skip: skip, ...condition };
  let res: IQueryResult = await dictData.query(info);
  if (res.errcode == 0) {
    list.value = res.data as any[];
    total.value = res.total;
  }
};
const toSearch = () => {
  search({ skip, limit });
};
const searchOther = async () => {
  if (route.query.type) type.value = route.query.type;
  form.value.type = type.value;
  searchForm.value.type = type.value;
  let res: IQueryResult = await dictType.query();
  if (res.errcode == 0) typeList.value = res.data;
  let aee: IQueryResult = await dictData.query({ type: 'common_use' });
  if (aee.errcode == 0) is_useList.value = aee.data;
};
// 新增
const toAdd = () => {
  dialog.value = { title: '信息管理', show: true, type: '1' };
};
// 修改
const toEdit = async (data) => {
  let res: IQueryResult = await dictData.fetch(data._id);
  if (res.errcode == 0) {
    form.value = res.data as {};
    dialog.value = { title: '信息管理', show: true, type: '1' };
  }
};
// 提交
const onSubmit = async (data) => {
  let res: IQueryResult;
  if (data._id) res = await dictData.update(data);
  else res = await dictData.create(data);
  if (res.errcode == 0) {
    ElMessage({ type: `success`, message: `维护信息成功` });
    toClose();
  }
};
const getProps = (e, model) => {
  if (model == 'type') {
    let data = typeList.value.find((i) => i.type == e.type);
    if (data) return data.name;
  }
};

// 删除
const toDel = async (data) => {
  let res: IQueryResult = await dictData.del(data._id);
  if (res.errcode == 0) {
    ElMessage({ type: `success`, message: `刪除信息成功` });
    search({ skip, limit });
  }
};
// 选择字典名称
const changeType = (value) => {
  type.value = value;
  form.value.type = value;
};
// 返回
const toBack = () => {
  window.history.go(-1);
};
// 弹框关闭
const toClose = () => {
  form.value = { type: type.value };
  searchForm.value = { type: type.value };
  dialog.value = { title: '信息管理', show: false, type: '1' };
  search({ skip, limit });
};
</script>
<style lang="scss" scoped>
.main {
  .one {
    margin: 0 0 10px 0;
  }
  .two {
    margin: 0 0 10px 0;
  }
}
</style>