src/views/model/mpk/file/index.vue

@@ -1,4 +1,19 @@
<template>
  <el-row :gutter="20">
    <!-- 左侧树 -->
    <el-col :span="4" :xs="24">
      <ContentWrap class="h-1/1">
        <el-tree
          style="max-width: 600px"
          :data="treeData"
          :props="treeProps"
          default-expand-all
          highlight-current
          @node-click="handleNodeClick"
        />
      </ContentWrap>
    </el-col>
    <el-col :span="20" :xs="24">
  <!-- 搜索工作栏 -->
  <ContentWrap>
    <el-form
@@ -46,10 +61,10 @@
      <el-table-column prop="pyChineseName" label="模型名称"/>
      <el-table-column prop="pyName" label="模型文件" header-align="center" align="center" min-width="300"/>
      <el-table-column prop="pyType" label="模型类型" :formatter="(r,c,v) => getDictLabel(DICT_TYPE.MODEL_TYPE,v)"/>
      <el-table-column prop="menuName" label="所属菜单" width="120px"/>
      <el-table-column prop="groupName" label="所属组" width="120px"/>
      <el-table-column prop="remark" label="备注" width="200px"/>
      <el-table-column prop="createDate" label="创建时间" :formatter="dateFormatter" width="170px"/>
          <el-table-column prop="menuName" label="所属菜单" min-width="120px"/>
          <el-table-column prop="groupName" label="所属组" min-width="120px"/>
          <el-table-column prop="remark" label="备注" min-width="100px"/>
          <el-table-column prop="createDate" label="创建时间" :formatter="dateFormatter" width="180px"/>
      <el-table-column label="操作" align="center" width="200px">
        <template #default="scope">
          <div class="flex items-center justify-center">
@@ -103,21 +118,28 @@
  <MpkGenerator ref="mpkGenerator"/>
  <GeneratorCodeHistory ref="generatorCodeHistory"/>
  <MpkRun ref="mpkRun"/>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
  import {dateFormatter} from '@/utils/formatTime'
  import * as MpkApi from '@/api/model/mpk/mpk'
  import * as MpkMenuApi from '@/api/model/mpk/menu'
  import MpkGenerator from './MpkGenerator.vue'
  import GeneratorCodeHistory from './MpkGeneratorHistory.vue'
  import MpkRun from './MpkRun.vue'
  import * as UserApi from "@/api/system/user";
  import { DICT_TYPE, getDictLabel } from '@/utils/dict'
  import {useAppStoreWithOut} from "@/store/modules/app";
  import {ElTree} from "element-plus";

  defineOptions({name: 'MpkFile'})

  const message = useMessage() // 消息弹窗
  const {t} = useI18n() // 国际化

  const treeProps = {
    children: 'children',
    label: 'label',
  }

  const loading = ref(true) // 列表的加载中
  const total = ref(0) // 列表的总页数
@@ -125,9 +147,11 @@
  const queryParams = reactive({
    page: 1,
    pageSize: 10,
    pyName: ''
    pyName: '',
    label: ''
  })
  const queryFormRef = ref() // 搜索的表单
  const treeData = ref([])

  const getList = async () => {
    loading.value = true
@@ -138,6 +162,11 @@
    } finally {
      loading.value = false
    }
  }

  const getTree = async () => {
    const data = await MpkMenuApi.getTree()
    treeData.value = data
  }

  /** 操作分发 */
@@ -198,12 +227,19 @@
    }
  }

  const handleNodeClick = (data: Tree) => {
    queryParams.label = data.label
    getList()
  }

  onActivated((to) => {
    getList()
    getTree()
  })

  /** 初始化 **/
  onMounted(async () => {
    await getList()
    await getTree()
  })
</script>