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

<template>
  <div id="menus">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="one">
          <cSearch :is_title="false" :is_back="true" @toBack="toBack"> </cSearch>
        </el-col>
        <el-col :span="24" class="two">
          <cButton @toAdd="toAdd"></cButton>
        </el-col>
        <el-col :span="24" class="thr"> 列表 </el-col>
      </el-col>
    </el-row>
    <cDialog :dialog="dialog" @handleClose="toClose">
      <template v-slot:info>
        <el-col :span="24" class="dialog_one" v-if="dialog.type == '1'">
          <cForm :fields="fields" :form="form" labelWidth="auto" @save="toSave" @dataChange="dataChange">
            <template #type>
              <el-option v-for="(i, index) in typeList" :key="`t${index}`" :label="i.label" :value="i.value"></el-option>
            </template>
            <!--     <template #parent_id>
              <el-option v-for="(i, index) in getOneDimensionList()" :key="`m${index}`" :label="i.name" :value="i._id"></el-option>
            </template>
            <template #icon>
              <el-option v-for="i in iconList" :key="i.dict_value" :label="i.dict_label" :value="i.dict_value">
                <span style="float: left" :class="['iconfont', i.dict_label]"></span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ i.dict_label }}</span>
              </el-option>
            </template>
            <template #status>
              <el-radio-group v-model="form.status">
                <el-radio label="0">使用</el-radio>
                <el-radio label="1">禁用</el-radio>
              </el-radio-group>
            </template> -->
          </cForm>
        </el-col>
      </template>
    </cDialog>
  </div>
</template>

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

// 接口
import { MenusStore } from '@common/src/stores/system/menus';
import type { IQueryResult } from '@/util/types.util';
const menusAxios = MenusStore();

// 路由
const route = useRoute();

// 模块id
const module_id: Ref<any> = ref(['']);
// 菜单列表
const list: Ref<any> = ref([]);

// 弹框
const dialog: Ref<any> = ref({ title: '菜单管理', show: false, type: '1' });
const form: Ref<any> = ref({});
const fields: Ref<any> = ref([
  { label: '菜单名称', model: 'name' },
  { label: '菜单类型', model: 'type', type: 'select' },
  { label: '父级菜单', model: 'parent_id', type: 'select' },
  { label: '顺序', model: 'order_num', type: 'number' },
  { label: '图标', model: 'icon', type: 'select' },
  { label: '状态', model: 'status', custom: true },
  { label: '备注', model: 'remark', type: 'textarea' }
]);

// 字典
const typeList: Ref<any> = ref([
  { label: '目录', value: '0' },
  { label: '菜单', value: '1' },
  { label: '子页面', value: '2' }
]);
// 请求
onMounted(async () => {
  let id = route.query.id;
  if (id) module_id.value = id;
  await search();
});
const search = async () => {
  if (module_id.value) {
    let res: IQueryResult;
    res = await menusAxios.query({ module_id: module_id.value });
    if (res.errcode == '0') {
      list.value = res.data;
    }
  }
};

// 添加
const toAdd = () => {
  form.value = { module_id: module_id.value };
  dialog.value = { title: '菜单管理', show: true, type: '1' };
};
// 选择
const dataChange = ({ model, value }) => {
  if (model == 'type') {
    if (value == '0') {
      fields.value = fields.value.filter((i) => i.model != 'path' && i.model != 'component');
    } else {
      let data = fields.value.find((i) => i.model == 'path');
      if (!data) {
        fields.value.splice(3, 0, { label: '路由地址', model: 'path' }, { label: '组件地址', model: 'component' });
      }
    }
  }
};
// 提交保存
const toSave = async (e) => {
  console.log(e);
};
// 关闭弹框
const toClose = () => {
  dialog.value = { title: '菜单管理', show: false, type: '1' };
  search();
};
// 返回上一页
const toBack = () => {
  window.history.go(-1);
};
</script>
<style scoped lang="scss">
.main {
  .two {
    margin: 0 0 10px 0;
  }
}
</style>