zkzx_admin/src/views/system/module/index.vue

<template>
  <el-row>
    <el-col :span="24" class="main animate__animated animate__backInRight">
      <el-col :span="24" class="one">
        <cSearch :is_title="false" :is_search="true" :fields="fields" @search="toSearch">
          <template #is_use>
            <el-option v-for="i in is_useList" :key="i.value" :label="i.label" :value="i.value"></el-option>
          </template>
        </cSearch>
      </el-col>
      <el-col :span="24" class="two">
        <cButton @toAdd="toAdd"></cButton>
      </el-col>
      <el-col :span="24" class="thr">
        <cTable :fields="fields" :opera="opera" :list="list" :total="total" @query="search" @edit="toEdit" @del="toDel" @menu="toMenu"></cTable>
      </el-col>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
// 基础
import type { Ref } from 'vue';
import { onMounted, ref, getCurrentInstance } from 'vue';
import router from '@/router';

import { ElMessage } from 'element-plus';
// 接口
import { ModuleStore } from '@common/src/stores/system/module';
import { DictDataStore } from '@common/src/stores/system/dictData';
import type { IQueryResult } from '@/util/types.util';
const moduleAxios = ModuleStore();
const dictAxios = DictDataStore();

const { proxy } = getCurrentInstance() as any;

// 分页数据
const list: Ref<any> = ref([]);
const total: Ref<any> = ref(0);
const skip = 0;
const limit = proxy.$limit;
const fields: Ref<any> = ref([
  { label: '模块名称', model: 'name', isSearch: true },
  { label: '模块地址', model: 'url' },
  { label: '模块简介', model: 'brief' },
  { label: '是否使用', model: 'is_use', format: (i) => getDict(i, 'is_use'), type: 'select', isSearch: true }
]);
const opera: Ref<any> = ref([
  { label: '菜单管理', method: 'menu' },
  { label: '修改', method: 'edit', type: 'warning' },
  { label: '删除', method: 'del', confirm: true, type: 'danger' }
]);
// 查询
const searchInfo: Ref<any> = ref({});
// 字典表
const is_useList: Ref<any> = ref([]);

// 请求
onMounted(async () => {
  await searchOther();
  await search({ skip, limit });
});
const search = async (e: { skip: number; limit: number }) => {
  const info = { skip: e.skip, limit: e.limit, ...searchInfo.value };
  const res: IQueryResult = await moduleAxios.query(info);
  if (res.errcode == '0') {
    list.value = res.data;
    total.value = res.total;
  }
};
const toSearch = (e) => {
  searchInfo.value = e;
  search({ skip, limit });
};
//
const getDict = (e, model) => {
  if (model == 'is_use') {
    let data = is_useList.value.find((i) => i.value == e);
    if (data) return data.label;
    else return '暂无';
  }
};

// 添加
const toAdd = () => {
  router.push({ path: '/system/module/detail' });
};

// 修改
const toEdit = (e) => {
  router.push({ path: '/system/module/detail', query: { id: e._id } });
};
// 删除
const toDel = async (e) => {
  let res: IQueryResult;
  res = await moduleAxios.del(e._id);
  if (res.errcode == '0') {
    ElMessage({ message: `删除信息成功`, type: 'success' });
    search({ skip, limit });
  } else {
    ElMessage({ message: `${res.errmsg}`, type: 'error' });
  }
};
// 菜单管理
const toMenu = (e) => {
  router.push({ path: '/system/module/menus', query: { id: e._id } });
};
// 查询其他信息
const searchOther = async () => {
  let res: IQueryResult;
  // 是否使用
  res = await dictAxios.query({ type: 'common_use' });
  if (res.errcode == '0') is_useList.value = res.data;
};
</script>
<style scoped lang="scss">
.main {
  .two {
    margin: 0 0 10px 0;
  }
}
</style>