From 1e8d99a4fdee40b7b38fbd03e5a7f871c5ebf3e7 Mon Sep 17 00:00:00 2001
From: 潘志宝 <979469083@qq.com>
Date: 星期二, 24 九月 2024 15:16:41 +0800
Subject: [PATCH] MDK文件配置修改
---
src/api/model/mpk/menu.ts | 5
src/views/model/mpk/file/MpkForm.vue | 114 +++++++++------
src/views/model/mpk/file/index.vue | 242 +++++++++++++++++++--------------
src/api/model/mpk/mpk.ts | 3
4 files changed, 212 insertions(+), 152 deletions(-)
diff --git a/src/api/model/mpk/menu.ts b/src/api/model/mpk/menu.ts
index bcc7223..91aeb2f 100644
--- a/src/api/model/mpk/menu.ts
+++ b/src/api/model/mpk/menu.ts
@@ -11,6 +11,11 @@
return request.get({ url: '/model/mpk/menu/list' })
}
+// 查询列表
+export const getTree = () => {
+ return request.get({ url: '/model/mpk/menu/tree' })
+}
+
// 获得
export const getMenu = (id: number) => {
return request.get({ url: '/model/mpk/menu/get?id=' + id })
diff --git a/src/api/model/mpk/mpk.ts b/src/api/model/mpk/mpk.ts
index 44800d0..d522b30 100644
--- a/src/api/model/mpk/mpk.ts
+++ b/src/api/model/mpk/mpk.ts
@@ -10,7 +10,8 @@
pyModule: string
remark?: string
modelMethods: object
- filePath: string
+ filePath: string,
+ menuAndGroup: any
}
export const getPage = async (params: PageParam) => {
diff --git a/src/views/model/mpk/file/MpkForm.vue b/src/views/model/mpk/file/MpkForm.vue
index ab9916f..b7a937a 100644
--- a/src/views/model/mpk/file/MpkForm.vue
+++ b/src/views/model/mpk/file/MpkForm.vue
@@ -13,8 +13,23 @@
>
<el-divider content-position="left">模型信息</el-divider>
<el-row :gutter="8">
- <el-col :span="20">
- <el-form-item label="模型名称" prop="pyName">
+ <el-col :span="12">
+ <el-form-item label="模型类型" prop="pyType">
+ <el-radio-group v-model="formData.pyType" @change="pyTypeChange">
+ <el-radio-button
+ v-for="dict in getDictOptions(DICT_TYPE.MODEL_TYPE)"
+ :key="dict.label"
+ :label="dict.value"
+ >
+ {{ dict.label }}
+ </el-radio-button>
+ </el-radio-group>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="8">
+ <el-col :span="8">
+ <el-form-item label="模型文件" prop="pyName">
<el-input disabled v-model="formData.pyName" placeholder=""/>
</el-form-item>
</el-col>
@@ -41,26 +56,11 @@
</el-row>
<el-row :gutter="8">
<el-col :span="12">
- <el-form-item label="模型中文名称" prop="pyChineseName">
+ <el-form-item label="模型名称" prop="pyChineseName">
<el-input v-model="formData.pyChineseName" placeholder=""/>
</el-form-item>
</el-col>
- <el-col :span="12">
- <el-form-item label="模型类型" prop="pyType">
- <el-select
- v-model="formData.pyType"
- placeholder="请选择"
- @change="pyTypeChange"
- >
- <el-option
- v-for="dict in getDictOptions(DICT_TYPE.MODEL_TYPE)"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </el-form-item>
- </el-col>
+
</el-row>
<el-row :gutter="8">
<el-col :span="12">
@@ -76,20 +76,36 @@
</el-row>
<el-row :gutter="8">
<el-col :span="12">
- <el-form-item label="所属菜单" prop="menuName">
- <el-input v-model="formData.menuName" placeholder=""/>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="所属组" prop="groupName">
- <el-input v-model="formData.groupName" placeholder=""/>
+ <el-form-item label="所属目录" prop="menuAndGroup">
+ <el-cascader
+ style="width: 100%;"
+ v-model="formData.menuAndGroup"
+ :options="treeData"
+ @change="handleChange"
+ />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="8">
<el-col :span="12">
- <el-form-item label="icon" prop="icon">
- <el-input v-model="formData.icon" placeholder=""/>
+ <el-form-item label="图标" prop="icon">
+ <el-select v-model="formData.icon" clearable filterable placeholder="请选择图标">
+ <el-option
+ v-for="item in iconList"
+ :key="item.iconName"
+ :label="item.iconName"
+ :value="item.iconName"
+ >
+ <span style="float: left">{{ item.iconName}}</span>
+ <span
+ style="
+ float: right;
+ color: var(--el-text-color-secondary);
+ font-size: 13px;">
+ <img :src="'/SimtreeUnitImage/' + item.iconName" style="height: 24px;" :alt=" item.iconDesc" />
+ </span>
+ </el-option>
+ </el-select>
</el-form-item>
</el-col>
</el-row>
@@ -174,21 +190,6 @@
<el-table-column align="center" label="参数类型" prop="valueType"/>
<el-table-column align="center" label="最大值" prop="max"/>
<el-table-column align="center" label="最小值" prop="min"/>
- <!-- <el-table-column align="center" label="选项" width="50">-->
- <!-- <template #default="props">-->
- <!-- <div v-if="props.row.type === 'select'">-->
- <!-- <el-popover placement="left" :width="400">-->
- <!-- <template #reference>-->
- <!-- <Icon icon="ep:more" />-->
- <!-- </template>-->
- <!-- <el-table width="50%" :data="props.row.settingSelects" border size="small">-->
- <!-- <el-table-column align="center" label="key" prop="selectKey"/>-->
- <!-- <el-table-column align="center" label="name" prop="name"/>-->
- <!-- </el-table>-->
- <!-- </el-popover>-->
- <!-- </div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
<el-table-column label="操作" fixed="right" header-align="center" align="center" width="100">
<template #default="scope">
<el-button
@@ -234,8 +235,10 @@
<SettingForm ref="settingFormRef"/>
</template>
<script lang="ts" setup>
- import {DICT_TYPE, getDictOptions} from '@/utils/dict'
+ import {DICT_TYPE, getDictOptions, getIntDictOptions} from '@/utils/dict'
import * as MpkApi from '@/api/model/mpk/mpk'
+ import * as MpkIconApi from '@/api/model/mpk/icon'
+ import * as MpkMenuApi from '@/api/model/mpk/menu'
import {FormRules} from 'element-plus'
import {getAccessToken, getTenantId} from "@/utils/auth";
import SettingForm from './SettingForm.vue'
@@ -249,7 +252,10 @@
const route = useRoute() // 路由
const router = useRouter();
- /** settingForm弹窗 */
+ const treeData = ref([])
+ const iconList = ref([] as MpkIconApi.MpkIconVO)
+
+/** settingForm弹窗 */
const settingFormRef = ref()
// 添加setting
const addSetting = (methodSettings) => {
@@ -271,7 +277,7 @@
pyChineseName: undefined,
pyName: undefined,
pkgName: undefined,
- pyType: undefined,
+ pyType: 'predict',
className: undefined,
pyModule: undefined,
icon: undefined,
@@ -280,6 +286,7 @@
remark: undefined,
modelMethods: [],
filePath: undefined,
+ menuAndGroup: [],
})
const formRules = reactive<FormRules>({
@@ -301,7 +308,7 @@
pyModule: [
{required: true, message: '模型路径不能为空', trigger: 'blur'}
],
- menuName: [
+ menuAndGroup: [
{required: true, message: '所属目录不能为空', trigger: 'blur'}
],
})
@@ -349,7 +356,7 @@
pyName: undefined,
pyChineseName: undefined,
pkgName: undefined,
- pyType: undefined,
+ pyType: 'predict',
className: undefined,
pyModule: undefined,
icon: undefined,
@@ -360,6 +367,10 @@
filePath: undefined
}
formRef.value?.resetFields()
+ }
+
+ const handleChange = function () {
+
}
const addRow = function () {
@@ -412,6 +423,7 @@
title.value = t('action.' + type)
formType.value = type
resetForm()
+ pyTypeChange()
// 修改时，设置数据
if (id) {
formLoading.value = true
@@ -421,6 +433,12 @@
formLoading.value = false
}
}
+
+ // 加载图标列表
+ iconList.value = await MpkIconApi.getList()
+
+ // 加载菜单，分组
+ treeData.value = await MpkMenuApi.getTree()
})
const pyTypeChange = () => {
diff --git a/src/views/model/mpk/file/index.vue b/src/views/model/mpk/file/index.vue
index 31302ee..d0eed44 100644
--- a/src/views/model/mpk/file/index.vue
+++ b/src/views/model/mpk/file/index.vue
@@ -1,123 +1,145 @@
<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="模型文件" 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 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="模型名称"/>
+ <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.pageSize"
+ 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) // 列表的总页数
@@ -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>
--
Gitblit v1.9.3