基于SqlSugar的开发框架循序渐进介绍（15）-- 整合代码生成工具进行前端界面的生成

<template>
  <div class="main">
    <!--条件及列表展示-->
    <Search ref="searchRef" @show-import="showImport" @show-add="showAdd" @show-view="showView" @show-edit="showEdit" />
    <!--查看详细组件界面-->
    <view-data ref="viewRef" />
    <!--新增、编辑组件界面-->
    <edit-data ref="editRef" @submit="refreshData" />
    <!--模板导入信息-->
    <import-data ref="importRef" @finish="finishImport" />
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import Search from './search.vue';
import ViewData from './view.vue';
import EditData from './edit.vue';
import ImportData from './import.vue';

<template>
  <el-dialog v-if="isVisible" v-model="isVisible" title="查看信息" append-to-body @close="closeDialog">
    <el-form ref="viewRef" :model="viewForm" label-width="100px">
      <el-tabs type="border-card">
        <el-tab-pane label="基本信息">
          <el-descriptions title="" :column="2" border>
            <el-descriptions-item label="显示名称">
              {{ viewForm.name }}
            </el-descriptions-item>
            <el-descriptions-item label="Web地址">
              {{ viewForm.url }}
            </el-descriptions-item>
            <el-descriptions-item label="Web图标">
              <!-- {{ viewForm.webIcon }} -->
              <icon :icon="viewForm.webIcon" />
            </el-descriptions-item>
            <el-descriptions-item label="排序">
              {{ viewForm.seq }}
            </el-descriptions-item>
            <el-descriptions-item label="可见">
              <el-tag v-if="viewForm.visible" type="success" effect="dark">可见</el-tag>
              <el-tag v-else type="danger" effect="dark">隐藏</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="展开">
              <el-tag v-if="viewForm.expand" type="success" effect="dark">展开</el-tag>
              <el-tag v-else type="" effect="dark">收缩</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              <el-date-picker v-model="viewForm.createTime" align="right" type="datetime" placeholder="选择日期"
                value-format="YYYY-MM-DD HH:mm" disabled />
            </el-descriptions-item>
            <el-descriptions-item label="特殊标签">
              {{ viewForm.tag }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

其他的js代码采用tyepscript语法，我们把它放在
<script setup lang="ts">
//逻辑代码
</script>

//显示窗口
const show = (id: string | number) => {
  if (!$u.test.isNullOrUnDef(id)) {
    menu.Get(id).then((data) => {
      Object.assign(viewForm, data);
      isVisible.value = true; //显示对话框
    });
  }
};
//暴露组件属性和方法
defineExpose({
  show,
});

const viewRef = ref<FormInstance>(); //表单引用
// 表单属性定义
let viewForm = reactive({
  iD: '',
  pid: '',
  name: '',
  icon: '',
  seq: '',
  functionId: '',
  visible: 0,
  expand: 0,
  winformType: '',
  url: '',
  webIcon: '',
  creator: '',
  createTime: '',
  tag: '',
});

//挂载的时候初始化数据
onMounted(() => {
  // 设置默认值
  getTree();
});
// 初始化树列表
let treedata = ref([]);
const getTree = () => {
  // 树列表数据获取
  menu.GetAll().then((data) => {
    treedata.value = []; // 树列表清空
    var list = data?.items;
    if (list) {
      var newTreedata = $u.util.getJsonTree(list, {
        id: 'id',
        pid: 'pid',
        label: 'name',
        children: 'children',
      });
      treedata.value = newTreedata;
    }
  });
};

// 显示查看对话框处理
const viewRef = ref<InstanceType<typeof ViewData>>();
function showView(id) {
  viewRef.value.show(id);
}

<template>
  <div class="main">
    <!--条件及列表展示-->
    <Search ref="searchRef" @show-import="showImport" @show-add="showAdd" @show-view="showView" @show-edit="showEdit" />
    <!--查看详细组件界面-->
    <view-data ref="viewRef" />
    <!--新增、编辑组件界面-->
    <edit-data ref="editRef" @submit="refreshData" />
    <!--模板导入信息-->
    <import-data ref="importRef" @finish="finishImport" />
  </div>
</template>

//新增、编辑表单引用
const editRef = ref<InstanceType<typeof EditData>>();
//显示新增对话框
function showAdd(pid?: string | number) {
 editRef.value.showAdd(pid);
}
// 显示编辑对话框
function showEdit(id) {
  editRef.value.show(id);
}
//新增/更新后刷新
function refreshData() {
  searchRef.value.getlist();
}

//默认标题为[编辑信息]，当show传入id为空的时候，为[新建信息]
let title = ref('编辑信息');
let isAdd = ref(false); //是否新增状态
//显示窗口(编辑/新建)
const showAdd = async (pid?: string | number) => {
  title.value = '新建信息';
  isAdd.value = true;
  resetFields(); //清空表单
  editForm.pid = pid + '';
  isVisible.value = true; //显示对话框
};
const show = async (id?: string | number) => {
  if (!$u.test.isNullOrUnDef(id)) {
    title.value = '编辑信息';
    isAdd.value = false;
    await menu.Get(id).then((data) => {
      Object.assign(editForm, data);
    });
  } else {
    title.value = '新建信息';
    isAdd.value = true;
    resetFields(); //清空表单
  }
  isVisible.value = true; //显示对话框
};

//暴露组件属性和方法
defineExpose({
  show,
  showAdd,
});

const editRef = ref<FormInstance>(); //表单引用
// 表单属性定义（初始化）
let editForm = reactive({
  id: '',
  pid: '',
  name: '',
  icon: '',
  functionId: '',
  winformType: '',
  url: '',
  seq: '001',
  isTop: false,
  expand: 1,
  visible: 1,
  webIcon: '',
  tag: 'web', // Web专用
});

// 保存数据处理
async function submitData() {
  var formEl = editRef.value;
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      //验证成功，执行下面方法
      var result = false;
      if (isAdd.value) {
        result = await menu.Create(editForm); //新增保存
      } else {
        result = await menu.Update(editForm); //编辑保存
      }
      if (result) {
        $u.success('操作成功!'); // 提示信息
        emit('submit'); // 提示刷新数据
        closeDialog(); // 重置窗口状态
      } else {
        $u.error('操作失败');
      }
    }
  });
}

<template>
  <div class="main">
    <!--条件及列表展示-->
    <Search ref="searchRef" @show-import="showImport" @show-add="showAdd" @show-view="showView" @show-edit="showEdit" />
    <import-data ref="importRef" @finish="finishImport" />
  </div>
</template>

<template>
  <div>
    <!-- 模板导入信息 -->
    <ele-import :fields="importForm.fields" :filepath="importForm.filepath" :append="importForm.append"
      :formatter="importForm.formatter" :rules="importForm.rules" :tips="importForm.tips" :title="importForm.title"
      :visible="isVisible" :request-fn="saveImport" @close="close" @finish="finishImport" />
  </div>
</template>

// 请求服务端处理上传数据,返回一个Promise对象
const saveImport = async (data) => {
  // console.log(data);
  const result = await menu.SaveImport(data);
  // console.log(result);
  if (result) {
    return Promise.resolve();
  } else {
    return Promise.reject();
  }
};

//显示窗口
const show = () => {
  isVisible.value = true; //显示对话框
};
//暴露组件属性和方法
defineExpose({
  show,
});

const importForm = reactive({
  // Excel 模板导入数据
  // 弹出层标题
  title: '功能菜单导入',
  // 提示信息
  tips: [], // ['商品编号 必填', '产品类型 必填', '商品名称 必填'],
  // 字段名称参照表
  fields: {
    // 字段根据需要裁剪
    pid: '父ID',
    name: '显示名称',
    icon: '图标',
    seq: '排序',
    url: 'Url地址',
    webIcon: '菜单图标',
    systemType_ID: '系统编号',
    tag: '特殊标签',
  },// 附加数据, 在每条记录上都会加这两个字段和值
  append: {
    // company: '广州爱奇迪',
    // leader: '伍华聪'
  },
  // 参数校检, 和 element-ui 中 form表单中传递的rules一样, 都是使用的 async-validator 库
  // https://element.eleme.cn/#/zh-CN/component/form#biao-dan-yan-zheng
  rules: {
    pid: { type: 'string', required: true, message: '父ID必填' },
    name: { type: 'string', required: true, message: '显示名称必填' },
    url: { type: 'string', required: true, message: 'Url地址必填' },
    webIcon: { type: 'string', required: true, message: '菜单图标必填' },
    systemType_ID: { type: 'string', required: true, message: '系统编号必填' },
    tag: { type: 'string', required: true, message: '特殊标签必填' },
  },
  // Excel模板下载地址。注意, 只能是.xlsx的文件, .xls或者.cvs都会报错
  filepath: 'http://localhost:5043/UploadFiles/template/功能菜单.xlsx',
});