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

@@ -1,133 +1,157 @@
<template>
  <!-- 搜索工作栏 -->
  <ContentWrap>
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="模型名称" prop="pyName">
        <el-input
          v-model="queryParams.pyName"
          placeholder="请输入模型名称"
          clearable
          class="!w-240px"
  <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"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px"/>
          重置
        </el-button>
        <div class="ml-12px">
          <router-link :to="'/file/form'">
            <el-button type="primary" plain v-hasPermi="['mpk:file:create']">
              <Icon icon="ep:plus" class="mr-5px"/>新增</el-button>
          </router-link>
        </div>

      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table
      v-loading="loading"
      :data="list"
      row-key="id"
    >
      <el-table-column prop="pyChineseName" label="模型中文名称"/>
      <el-table-column prop="pyName" label="模型名称"/>
      <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 label="操作" align="center" width="200px">
        <template #default="scope">
          <div class="flex items-center justify-center">
            <router-link :to="'/file/form/' + scope.row.id">
              <el-button type="primary" link v-hasPermi="['mpk:file:update']">
                <Icon icon="ep:edit"/>修改
              </el-button>
            </router-link>
            <el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['mpk:file:delete']">
              <Icon icon="ep:delete"/>删除
      </ContentWrap>
    </el-col>
    <el-col :span="20" :xs="24">
      <!-- 搜索工作栏 -->
      <ContentWrap>
        <el-form
          class="-mb-15px"
          :model="queryParams"
          ref="queryFormRef"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="模型名称" prop="pyName">
            <el-input
              v-model="queryParams.pyName"
              placeholder="请输入模型名称"
              clearable
              class="!w-240px"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery">
              <Icon icon="ep:search" class="mr-5px"/>
              搜索
            </el-button>
            <div class="pl-12px">
              <el-dropdown @command="(command) => handleCommand(command, scope.row)" trigger="click">
                <el-button type="primary" link>
                  <Icon icon="ep:d-arrow-right" /> 更多
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      command="generatorCode"
                    >
                      生成代码
                    </el-dropdown-item>
                    <el-dropdown-item
                      command="generatorHistory"
                    >
                      生成历史
                    </el-dropdown-item>
                    <el-dropdown-item
                      command="mpkRunDialog"
                    >
                      运行
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            <el-button @click="resetQuery">
              <Icon icon="ep:refresh" class="mr-5px"/>
              重置
            </el-button>
            <div class="ml-12px">
              <router-link :to="'/file/form'">
                <el-button type="primary" plain v-hasPermi="['mpk:file:create']">
                  <Icon icon="ep:plus" class="mr-5px"/>新增</el-button>
              </router-link>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.page"
      :total="total"
      @pagination="getList"
    />
  </ContentWrap>

  <MpkGenerator ref="mpkGenerator"/>
  <GeneratorCodeHistory ref="generatorCodeHistory"/>
  <MpkRun ref="mpkRun"/>
          </el-form-item>
        </el-form>
      </ContentWrap>

      <!-- 列表 -->
      <ContentWrap>
        <el-table
          v-loading="loading"
          :data="list"
          row-key="id"
        >
          <el-table-column prop="pyChineseName" label="模型名称" header-align="center" align="center" min-width="100" />
          <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="所属菜单" 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">
                <router-link :to="'/file/form/' + scope.row.id">
                  <el-button type="primary" link v-hasPermi="['mpk:file:update']">
                    <Icon icon="ep:edit"/>修改
                  </el-button>
                </router-link>
                <el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['mpk:file:delete']">
                  <Icon icon="ep:delete"/>删除
                </el-button>
                <div class="pl-12px">
                  <el-dropdown @command="(command) => handleCommand(command, scope.row)" trigger="click">
                    <el-button type="primary" link>
                      <Icon icon="ep:d-arrow-right" /> 更多
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                          command="generatorCode"
                        >
                          生成代码
                        </el-dropdown-item>
                        <el-dropdown-item
                          command="generatorHistory"
                        >
                          生成历史
                        </el-dropdown-item>
                        <el-dropdown-item
                          command="mpkRunDialog"
                        >
                          运行
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
          v-model:limit="queryParams.limit"
          v-model:page="queryParams.page"
          :total="total"
          @pagination="getList"
        />
      </ContentWrap>

      <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) // 列表的总页数
  const list = ref([]) // 字典表格数据
  const queryParams = reactive({
    page: 1,
    pageSize: 10,
    pyName: ''
    limit: 10,
    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>