sxyanzhu
/
AIManage
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交代码

main
姜玉琦 2024-06-17 23:13:49 +08:00
parent d0f995bd55
commit ca21f99a22
5 changed files with 685 additions and 454 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/api/menu/index.ts
View File

@ -149,7 +149,7 @@ class MenuAPI {
component: "manage/calculate/index",
name: "calculate",
meta: {
title: "算子库管理",
title: "算子管理",
icon: "user",
hidden: false,
roles: ["ADMIN", "GUEST"],
@ -157,19 +157,45 @@ class MenuAPI {
alwaysShow: false,
},
},
// {
// path: "operatorLibrary2",
// component: "/operatorLibrary/index2",
// name: "operatorLibrary2",
// meta: {
// title: "算子库管理2",
// icon: "role",
// hidden: false,
// roles: ["ADMIN6", "GUEST", "ADMIN"],
// keepAlive: true,
// alwaysShow: false,
// },
// },
{
path: "calculateEdit",
component: "manage/calculate/edit",
name: "calculateEdit",
meta: {
title: "算子编辑",
icon: "user",
hidden: true,
roles: ["ADMIN", "GUEST"],
keepAlive: true,
alwaysShow: false,
},
},
{
path: "calculateParam",
component: "manage/calculateParam/index",
name: "calculateParam",
meta: {
title: "算子参数管理",
icon: "user",
hidden: false,
roles: ["ADMIN", "GUEST"],
keepAlive: true,
alwaysShow: false,
},
},
{
path: "calculateParamEdit",
component: "manage/calculateParam/edit",
name: "calculateParamEdit",
meta: {
title: "算子参数编辑",
icon: "user",
hidden: true,
roles: ["ADMIN", "GUEST"],
keepAlive: true,
alwaysShow: false,
},
},
],
},
{

199
src/views/manage/calculate/edit.vue 100644
View File

@ -0,0 +1,199 @@
<!-- 用户管理 -->
<template>
<div class="app-container">
<!-- 用户新增/编辑表单 -->
<el-card shadow="never" class="table-container">
<template #header> 新增算子 </template>
<el-row>
<el-col :lg="12" :xs="24">
<el-form
ref="userFormRef"
:model="formData"
:rules="rules"
v-loading="loading"
label-width="80px"
>
<el-form-item label="算子名称" prop="username">
<el-input
v-model="formData.username"
:readonly="!!formData.id"
placeholder="请输入算子名称"
/>
</el-form-item>
<el-form-item label="算子版本" prop="nickname">
<el-input v-model="formData.nickname" placeholder="请输入算子版本" />
</el-form-item>
<el-form-item label="算子说明" prop="mobile">
<el-input
v-model="formData.mobile"
:rows="2"
type="textarea"
placeholder="请输入算子说明"
maxlength="11"
/>
</el-form-item>
<el-form-item label="算子类型" prop="roleIds">
<el-row style="width:100%">
<el-col :span="12">
<el-select
v-model="formData.roleIds"
placeholder="请选择算子类型"
style="width: 100%"
>
<el-option label="图像分类" value="1" />
<el-option label="目标检测" value="2" />
</el-select>
</el-col>
<el-col :span="12">
<el-select
v-model="formData.roleIds"
placeholder="请选择算子类型"
style="width: 100%"
>
<el-option label="图像分类" value="1" />
<el-option label="目标检测" value="2" />
</el-select>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="适配硬件" prop="mobile">
<el-input
v-model="formData.mobile"
:rows="3"
type="textarea"
placeholder="请输入适配硬件"
maxlength="11"
/>
</el-form-item>
<el-form-item label="算子文件" prop="email">
<el-upload
v-model:file-list="fileList"
class="upload-demo"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
multiple
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:limit="3"
:on-exceed="handleExceed"
>
<el-button type="primary"
><el-icon class="el-icon--upload"> <i-ep-upload-filled /> </el-icon
>选择文件</el-button
>
<template #tip>
<div class="el-upload__tip">tar files with a size less than 10M.</div>
</template>
</el-upload>
</el-form-item>
</el-form>
</el-col>
<el-col :lg="12" :xs="24">
<div style="padding-left: 35px">
<el-divider content-position="left"
><strong style="color: #409eff">算子参数</strong></el-divider
>
<el-table :data="list" style="width: 100%" stripe>
<el-table-column prop="csmc" label="参数名称"> </el-table-column>
<el-table-column prop="csmc" label="参数描述"> </el-table-column>
<el-table-column label="操作" fixed="right" width="120">
<template #default="scope">
<el-button type="warning" size="small"><i-ep-edit />查看参数</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
</el-card>
<el-card class="button-scope">
<div class="buttonml-55">
<el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
<el-button @click="closeBack"><i-ep-close />取 消</el-button>
</div>
</el-card>
</div>
</template>
<script setup lang="ts">
defineOptions({
name: "User",
inheritAttrs: false,
});
import UserAPI from "@/api/user";
import { UserForm } from "@/api/user/model";
const router = useRouter();
const loading = ref(false); // 加载状态
const calTypeList = ref<OptionType[]>(); // 角色下拉数据源
// 用户表单数据
const formData = reactive<UserForm>({
status: 1,
});
// 校验规则
const rules = reactive({
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
email: [
{
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: "请输入正确的邮箱地址",
trigger: "blur",
},
],
mobile: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
});
const list = [
{
csmc: "图像分类算子名称",
csms: "进行19种类型的图像分类模型",
},
{
csmc: "目标检测算子名称",
csms: "人员检测的模型",
},
];
/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
loading.value = true;
setTimeout(() => {
ElMessage.success("修改用户成功");
loading.value = false;
closeBack();
}, 1000);
}, 3000);
/** 返回默认页面 */
function closeBack() {
router.replace({ path: "/operatorLibrary/calculate" });
}
onMounted(() => {
//handleQuery();
});
</script>
<style scope>
.button-scope {
position: fixed;
width: calc(100% - 220px);
bottom: 0px;
}
.buttonml-55 {
margin-left: 55px;
}
</style>

487
src/views/manage/calculate/index.vue
View File

@ -12,7 +12,6 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="算子类型" prop="status">
<el-select
v-model="queryParams.status"
@ -20,11 +19,11 @@
clearable
style="width: 200px"
>
<el-option label="启用" value="1" />
<el-option label="禁用" value="0" />
<el-option label="图像分类" value="1" />
<el-option label="目标检测" value="2" />
<el-option label="人脸识别" value="3" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
<el-button @click="resetQuery">
@ -39,9 +38,7 @@
<template #header>
<div class="flex justify-between">
<div>
<el-button
type="success"
@click="openDialog('user-form')"
<el-button type="success" @click="openDialog('user-form')"
><i-ep-plus />添加算子</el-button
>
<el-button
@ -51,7 +48,7 @@
><i-ep-delete />算子例程下载</el-button
>
</div>
<div>
<!-- <div>
<el-dropdown split-button>
导入
<template #dropdown>
@ -68,7 +65,7 @@
<el-button class="ml-3" @click="handleExport"
><template #icon><i-ep-download /></template>导出</el-button
>
</div>
</div> -->
</div>
</template>
@ -91,10 +88,7 @@
@click="openDialog('user-form', scope.row.id)"
><i-ep-edit />查看</el-button
>
<el-button
type="danger"
size="small"
@click="resetPassword2(scope.row)"
<el-button type="danger" size="small" @click="handleDelete(scope.row)"
><i-ep-delete />删除</el-button
>
</template>
@ -109,176 +103,19 @@
@pagination="handleQuery"
/>
</el-card>
<!-- 弹窗 -->
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
:width="dialog.width"
append-to-body
@close="closeDialog"
>
<!-- 用户新增/编辑表单 -->
<el-form
v-if="dialog.type === 'user-form'"
ref="userFormRef"
:model="formData"
:rules="rules"
label-width="120px"
>
<el-form-item label="算子名称" prop="username">
<el-input
v-model="formData.username"
:readonly="!!formData.id"
placeholder="请输入算子名称"
/>
</el-form-item>
<el-form-item label="算子版本" prop="nickname">
<el-input v-model="formData.nickname" placeholder="请输入算子版本" />
</el-form-item>
<el-form-item label="算子说明" prop="mobile">
<el-input
v-model="formData.mobile"
:rows="2"
type="textarea"
placeholder="请输入算子说明"
maxlength="11"
/>
</el-form-item>
<el-form-item label="算子类型" prop="roleIds">
<el-select v-model="formData.roleIds" multiple placeholder="请选择算子类型">
<el-option
v-for="item in roleList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="适配硬件" prop="mobile">
<el-input
v-model="formData.mobile"
:rows="3"
type="textarea"
placeholder="请输入适配硬件"
maxlength="11"
/>
</el-form-item>
<el-form-item label="算子文件" prop="email">
<el-upload
v-model:file-list="fileList"
class="upload-demo"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
multiple
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:limit="3"
:on-exceed="handleExceed"
>
<el-button type="primary"><el-icon class="el-icon--upload">
<i-ep-upload-filled />
</el-icon>选择文件</el-button>
<template #tip>
<div class="el-upload__tip">
json files with a size less than 10M.
</div>
</template>
</el-upload>
</el-form-item>
<el-form-item label="参数文件" prop="email">
<el-upload
v-model:file-list="fileList"
class="upload-demo"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
multiple
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:limit="3"
:on-exceed="handleExceed"
>
<el-button type="primary"><el-icon class="el-icon--upload">
<i-ep-upload-filled />
</el-icon>选择文件</el-button>
<template #tip>
<div class="el-upload__tip">
json files with a size less than 10M.
</div>
</template>
</el-upload>
</el-form-item>
</el-form>
<!-- 用户导入表单 -->
<el-form
v-else-if="dialog.type === 'user-import'"
:model="importData"
label-width="100px"
>
<el-form-item label="部门">
<el-tree-select
v-model="importData.deptId"
placeholder="请选择部门"
:data="deptList"
filterable
check-strictly
/>
</el-form-item>
<el-form-item label="Excel文件">
<el-upload
ref="uploadRef"
action=""
drag
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
:limit="1"
:auto-upload="false"
:file-list="importData.fileList"
:on-change="handleFileChange"
:on-exceed="handleFileExceed"
>
<el-icon class="el-icon--upload">
<i-ep-upload-filled />
</el-icon>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
</el-upload>
</el-form-item>
</el-form>
<!-- 弹窗底部操作按钮 -->
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="closeDialog">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
defineOptions({
name: "User",
name: "calculateIndex",
inheritAttrs: false,
});
import UserAPI from "@/api/user";
import DeptAPI from "@/api/dept";
import RoleAPI from "@/api/role";
import { UserForm, UserQuery, UserPageVO } from "@/api/user/model";
import type { UploadInstance } from "element-plus";
import { genFileId } from "element-plus";
import MultiUpload from "@/components/Upload/MultiUpload.vue";
import { UserQuery } from "@/api/user/model";
const queryFormRef = ref(ElForm); // 查询表单
const userFormRef = ref(ElForm); // 用户表单
const uploadRef = ref<UploadInstance>(); // 上传组件
const router = useRouter();
const loading = ref(false); // 加载状态
const removeIds = ref([]); // 删除用户ID集合 用于批量删除
@ -288,9 +125,6 @@ const queryParams = reactive<UserQuery>({
});
const dateTimeRange = ref("");
const total = ref(0); // 数据总数
const pageData = ref<UserPageVO[]>(); // 用户分页数据
const deptList = ref<OptionType[]>(); // 部门下拉数据源
const roleList = ref<OptionType[]>(); // 角色下拉数据源
watch(dateTimeRange, (newVal) => {
if (newVal) {
@ -301,89 +135,49 @@ watch(dateTimeRange, (newVal) => {
const tableData = [
{
szmc: '图像分类算子名称',
szlx: '图像分类',
bb: '1.2',
spyj: '进行19种类型的图像分类模型',
hlcjsj: '2024-05-03',
szmc: "图像分类算子名称",
szlx: "图像分类",
bb: "1.2",
spyj: "进行19种类型的图像分类模型",
hlcjsj: "2024-05-03",
},
{
szmc: '目标检测算子名称',
szlx: '目标检测',
bb: '1.5',
spyj: '人员检测的模型',
hlcjsj: '2024-06-07',
szmc: "目标检测算子名称",
szlx: "目标检测",
bb: "1.5",
spyj: "人员检测的模型",
hlcjsj: "2024-06-07",
},
{
szmc: '人脸识别算子名称',
szlx: '人脸识别',
bb: '1.0.0',
spyj: '人脸识别',
hlcjsj: '2024-06-08',
szmc: "人脸识别算子名称",
szlx: "人脸识别",
bb: "1.0.0",
spyj: "人脸识别",
hlcjsj: "2024-06-08",
},
{
szmc: '数据分析算子名称',
szlx: '数据分析',
bb: '1.6.1',
spyj: '进行数据分离ETL工具',
hlcjsj: '2024-06-08',
szmc: "数据分析算子名称",
szlx: "数据分析",
bb: "1.6.1",
spyj: "进行数据分离ETL工具",
hlcjsj: "2024-06-08",
},
]
// 弹窗对象
const dialog = reactive({
visible: false,
type: "user-form",
width: 800,
title: "",
});
// 用户表单数据
const formData = reactive<UserForm>({
status: 1,
});
// 用户导入数据
const importData = reactive({
deptId: undefined,
file: undefined,
fileList: [],
});
// 校验规则
const rules = reactive({
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
email: [
{
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: "请输入正确的邮箱地址",
trigger: "blur",
},
],
mobile: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
});
];
/** 查询 */
function handleQuery() {
loading.value = true;
UserAPI.getPage(queryParams)
.then((data) => {
console.log("handleQuery", data);
pageData.value = data.list;
total.value = data.total;
})
.finally(() => {
loading.value = false;
});
ElMessage.success("查询成功");
loading.value = false;
// UserAPI.getPage(queryParams)
// .then((data) => {
// console.log("handleQuery", data);
// pageData.value = data.list;
// total.value = data.total;
// })
// .finally(() => {
// loading.value = false;
// });
}
/** 重置查询 */
@ -402,26 +196,8 @@ function handleSelectionChange(selection: any) {
removeIds.value = selection.map((item: any) => item.id);
}
/** 重置密码 */
function resetPassword(row: { [key: string]: any }) {
ElMessageBox.prompt("请输入用户「" + row.username + "」的新密码", "重置密码", {
confirmButtonText: "确定",
cancelButtonText: "取消",
}).then(({ value }) => {
if (!value || value.length < 6) {
// 检查密码是否为空或少于6位
ElMessage.warning("密码至少需要6位字符，请重新输入");
return false;
}
UserAPI.updatePassword(row.id, value).then(() => {
ElMessage.success("密码重置成功，新密码是：" + value);
});
});
}
/** 重置密码 */
function resetPassword2(row: { [key: string]: any }) {
/** 删除数据 */
function handleDelete(row: { [key: string]: any }) {
ElMessageBox.confirm("确认删除算子?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
@ -431,20 +207,6 @@ function resetPassword2(row: { [key: string]: any }) {
});
}
/** 加载角色下拉数据源 */
async function loadRoleOptions() {
RoleAPI.getOptions().then((data) => {
roleList.value = data;
});
}
/** 加载部门下拉数据源 */
async function loadDeptOptions() {
DeptAPI.getOptions().then((data) => {
deptList.value = data;
});
}
/**
* 打开弹窗
*
@ -452,172 +214,17 @@ async function loadDeptOptions() {
* @param id 用户ID
*/
async function openDialog(type: string, id?: number) {
dialog.visible = true;
dialog.type = type;
if (dialog.type === "user-form") {
// 用户表单弹窗
//await loadDeptOptions();
//await loadRoleOptions();
if (id) {
dialog.title = "修改算子";
// UserAPI.getFormData(id).then((data) => {
// Object.assign(formData, { ...data });
// });
} else {
dialog.title = "新增算子";
}
} else if (dialog.type === "user-import") {
// 用户导入弹窗
dialog.title = "导入算子";
dialog.width = 600;
//loadDeptOptions();
}
}
/**
* 关闭弹窗
*
* @param type 弹窗类型 用户表单：user-form | 用户导入：user-import
*/
function closeDialog() {
dialog.visible = false;
if (dialog.type === "user-form") {
userFormRef.value.resetFields();
userFormRef.value.clearValidate();
formData.id = undefined;
formData.status = 1;
} else if (dialog.type === "user-import") {
importData.file = undefined;
importData.fileList = [];
}
}
/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
if (dialog.type === "user-form") {
userFormRef.value.validate((valid: any) => {
if (valid) {
const userId = formData.id;
loading.value = true;
if (userId) {
UserAPI.update(userId, formData)
.then(() => {
ElMessage.success("修改用户成功");
closeDialog();
resetQuery();
})
.finally(() => (loading.value = false));
} else {
UserAPI.add(formData)
.then(() => {
ElMessage.success("新增用户成功");
closeDialog();
resetQuery();
})
.finally(() => (loading.value = false));
}
}
});
} else if (dialog.type === "user-import") {
if (!importData?.deptId) {
ElMessage.warning("请选择部门");
return false;
}
if (!importData?.file) {
ElMessage.warning("上传Excel文件不能为空");
return false;
}
UserAPI.import(importData?.deptId, importData?.file).then((data) => {
ElMessage.success("导入用户成功");
closeDialog();
resetQuery();
});
}
}, 3000);
/** 删除用户 */
function handleDelete(id?: number) {
const userIds = [id || removeIds.value].join(",");
if (!userIds) {
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm("确认删除用户?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(function () {
UserAPI.deleteByIds(userIds).then(() => {
ElMessage.success("删除成功");
resetQuery();
});
});
router.replace({ path: "/operatorLibrary/calculateEdit" });
}
/** 下载导入模板 */
function downloadTemplate() {
UserAPI.downloadTemplate().then((response: any) => {
const fileData = response.data;
const fileName = decodeURI(
response.headers["content-disposition"].split(";")[1].split("=")[1]
);
const fileType =
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
const blob = new Blob([fileData], { type: fileType });
const downloadUrl = window.URL.createObjectURL(blob);
const downloadLink = document.createElement("a");
downloadLink.href = downloadUrl;
downloadLink.download = fileName;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
window.URL.revokeObjectURL(downloadUrl);
});
}
/** Excel文件 Change */
function handleFileChange(file: any) {
importData.file = file.raw;
}
/** Excel文件 Exceed */
function handleFileExceed(files: any) {
uploadRef.value!.clearFiles();
const file = files[0];
file.uid = genFileId();
uploadRef.value!.handleStart(file);
importData.file = file;
ElMessage.success("下载模板成功");
}
/** 导出用户 */
function handleExport() {
UserAPI.export(queryParams).then((response: any) => {
const fileData = response.data;
const fileName = decodeURI(
response.headers["content-disposition"].split(";")[1].split("=")[1]
);
const fileType =
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
const blob = new Blob([fileData], { type: fileType });
const downloadUrl = window.URL.createObjectURL(blob);
const downloadLink = document.createElement("a");
downloadLink.href = downloadUrl;
downloadLink.download = fileName;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
window.URL.revokeObjectURL(downloadUrl);
});
ElMessage.success("导出成功");
}
onMounted(() => {

168
src/views/manage/calculateParam/edit.vue 100644
View File

@ -0,0 +1,168 @@
<!-- 用户管理 -->
<template>
<div class="app-container">
<!-- 用户新增/编辑表单 -->
<el-card shadow="never" class="table-container">
<template #header> 新增算子参数 </template>
<el-row>
<el-col :lg="12" :xs="24">
<el-form
ref="userFormRef"
:model="formData"
:rules="rules"
v-loading="loading"
label-width="80px"
>
<el-form-item label="参数名称" prop="username">
<el-input
v-model="formData.username"
:readonly="!!formData.id"
placeholder="请输入算子参数名称"
/>
</el-form-item>
<el-form-item label="参数类型" prop="roleIds">
<el-row style="width:100%">
<el-col :span="12">
<el-select
v-model="formData.roleIds"
multiple
placeholder="请选择参数主类型"
>
<el-option
v-for="item in calTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-col>
<el-col :span="12">
<el-select
v-model="formData.roleIds"
multiple
placeholder="请选择参数子类型"
>
<el-option
v-for="item in calTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="参数说明" prop="mobile">
<el-input
v-model="formData.mobile"
:rows="2"
type="textarea"
placeholder="请输入参数说明"
maxlength="11"
/>
</el-form-item>
<el-form-item label="参数文件" prop="email">
<el-upload
v-model:file-list="fileList"
class="upload-demo"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
multiple
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:limit="3"
:on-exceed="handleExceed"
>
<el-button type="primary"
><el-icon class="el-icon--upload"> <i-ep-upload-filled /> </el-icon
>选择文件</el-button
>
<template #tip>
<div class="el-upload__tip">json files with a size less than 10M.</div>
</template>
</el-upload>
</el-form-item>
</el-form>
</el-col>
<el-col :lg="12" :xs="24"></el-col>
</el-row>
</el-card>
<el-card class="button-scope">
<div class="buttonml-55">
<el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
<el-button @click="closeBack"><i-ep-close />取 消</el-button>
</div>
</el-card>
</div>
</template>
<script setup lang="ts">
defineOptions({
name: "User",
inheritAttrs: false,
});
import UserAPI from "@/api/user";
import { UserForm } from "@/api/user/model";
const router = useRouter();
const loading = ref(false); // 加载状态
const calTypeList = ref<OptionType[]>(); // 角色下拉数据源
// 用户表单数据
const formData = reactive<UserForm>({
status: 1,
});
// 校验规则
const rules = reactive({
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
email: [
{
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: "请输入正确的邮箱地址",
trigger: "blur",
},
],
mobile: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
});
/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
loading.value = true;
setTimeout(() => {
ElMessage.success("修改用户成功");
loading.value = false;
closeBack();
}, 1000);
}, 3000);
/** 返回默认页面 */
function closeBack() {
router.replace({ path: "/operatorLibrary/calculateParam" });
}
onMounted(() => {
//handleQuery();
});
</script>
<style scope>
.button-scope {
position: fixed;
width: calc(100% - 220px);
bottom: 0px;
}
.buttonml-55 {
margin-left: 55px;
}
</style>

231
src/views/manage/calculateParam/index.vue 100644
View File

@ -0,0 +1,231 @@
<!-- 用户管理 -->
<template>
<div class="app-container">
<div class="search-container">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="参数名称" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="请输入算子参数名称"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="主类型" prop="status">
<el-select
v-model="queryParams.status"
placeholder="全部类型"
clearable
style="width: 200px"
>
<el-option label="前置算子" value="1" />
<el-option label="后置算子" value="2" />
</el-select>
</el-form-item>
<el-form-item label="子类型" prop="statusv">
<el-select
v-model="queryParams.statusv"
placeholder="全部类型"
clearable
style="width: 200px"
>
<el-option label="图像分类" value="1" />
<el-option label="格式转换" value="2" />
<el-option label="人脸识别" value="3" />
<el-option label="图像缩放" value="4" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
<el-button @click="resetQuery">
<i-ep-refresh />
重置</el-button
>
</el-form-item>
</el-form>
</div>
<el-card shadow="never" class="table-container">
<template #header>
<div class="flex justify-between">
<div>
<el-button type="success" @click="openDialog('user-form')"
><i-ep-plus />添加算子参数</el-button
>
</div>
<!-- <div>
<el-dropdown split-button>
导入
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="downloadTemplate">
<i-ep-download />下载模板</el-dropdown-item
>
<el-dropdown-item @click="openDialog('user-import')">
<i-ep-top />导入数据</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button class="ml-3" @click="handleExport"
><template #icon><i-ep-download /></template>导出</el-button
>
</div> -->
</div>
</template>
<el-table
v-loading="loading"
:data="tableData"
stripe
@selection-change="handleSelectionChange"
>
<el-table-column label="算子参数名称" align="center" prop="szmc" width="250" />
<el-table-column label="算子主类型" align="center" prop="szlx" />
<el-table-column label="算子子类型" align="center" prop="szzlx" />
<el-table-column label="参数描述" width="180" align="center" prop="bb" />
<el-table-column label="互联时间" width="180" align="center" prop="hlcjsj" />
<el-table-column label="操作" fixed="right" width="220">
<template #default="scope">
<el-button
type="warning"
size="small"
@click="openDialog('user-form', scope.row.id)"
><i-ep-edit />查看参数</el-button
>
<el-button type="danger" size="small" @click="handleDelete(scope.row)"
><i-ep-delete />删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
</el-card>
</div>
</template>
<script setup lang="ts">
defineOptions({
name: "calculateIndex",
inheritAttrs: false,
});
import { UserQuery } from "@/api/user/model";
const queryFormRef = ref(ElForm); // 查询表单
const router = useRouter();
const loading = ref(false); // 加载状态
const removeIds = ref([]); // 删除用户ID集合 用于批量删除
const queryParams = reactive<UserQuery>({
pageNum: 1,
pageSize: 10,
});
const dateTimeRange = ref("");
const total = ref(0); // 数据总数
watch(dateTimeRange, (newVal) => {
if (newVal) {
queryParams.startTime = newVal[0];
queryParams.endTime = newVal[1];
}
});
const tableData = [
{
szmc: "RGB24格式转换算子参数",
szlx: "前处理",
szzlx: "格式转换",
bb: "",
hlcjsj: "2024-05-03",
},
{
szmc: "图像缩放算子参数",
szlx: "前处理",
szzlx: "图像缩放",
bb: "专业的图像缩放",
hlcjsj: "2024-06-07",
},
{
szmc: "人脸识别算子",
szlx: "后处理",
szzlx: "人脸识别",
bb: "好高大上的人脸识别算子模型",
hlcjsj: "2024-06-08",
}
];
/** 查询 */
function handleQuery() {
loading.value = true;
ElMessage.success("查询成功");
loading.value = false;
// UserAPI.getPage(queryParams)
// .then((data) => {
// console.log("handleQuery", data);
// pageData.value = data.list;
// total.value = data.total;
// })
// .finally(() => {
// loading.value = false;
// });
}
/** 重置查询 */
function resetQuery() {
queryFormRef.value.resetFields();
dateTimeRange.value = "";
queryParams.pageNum = 1;
queryParams.deptId = undefined;
queryParams.startTime = undefined;
queryParams.endTime = undefined;
handleQuery();
}
/** 行选中 */
function handleSelectionChange(selection: any) {
removeIds.value = selection.map((item: any) => item.id);
}
/** 删除数据 */
function handleDelete(row: { [key: string]: any }) {
ElMessageBox.confirm("确认删除算子参数?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(function () {
ElMessage.success("删除成功");
});
}
/**
* 打开弹窗
*
* @param type 弹窗类型 用户表单：user-form | 用户导入：user-import
* @param id 用户ID
*/
async function openDialog(type: string, id?: number) {
router.replace({ path: "/operatorLibrary/calculateParamEdit" });
}
/** 下载导入模板 */
function downloadTemplate() {
ElMessage.success("下载模板成功");
}
/** 导出用户 */
function handleExport() {
ElMessage.success("导出成功");
}
onMounted(() => {
//handleQuery();
});
</script>