394 lines
12 KiB
Vue
394 lines
12 KiB
Vue
<!-- 用户管理 -->
|
||
<template>
|
||
<div class="app-container model-detail">
|
||
<!-- 用户新增/编辑表单 -->
|
||
<el-card>
|
||
<template #header
|
||
><svg-icon icon-class="pause" style="width: 20px; height: 20px" />数据集基本信息
|
||
</template>
|
||
|
||
<el-form
|
||
ref="userFormRef"
|
||
:model="formData"
|
||
:rules="rules"
|
||
v-loading="loading"
|
||
label-width="100px"
|
||
>
|
||
<el-row style="width: 100%">
|
||
<el-col :lg="12" :xs="24">
|
||
<el-form-item label="数据集名称" prop="username">
|
||
<el-input
|
||
v-model="formData.username"
|
||
:readonly="!!formData.id"
|
||
placeholder="请输入数据集名称"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :lg="12" :xs="24">
|
||
<el-form-item label="数据集版本" prop="roleIds">
|
||
<el-input
|
||
v-model="formData.roleIds"
|
||
:readonly="!!formData.id"
|
||
placeholder="请输入数据集版本"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row style="width: 100%">
|
||
<el-col :lg="12" :xs="24">
|
||
<el-form-item label="适合任务" prop="username1">
|
||
<el-input
|
||
v-model="formData.usernam3e"
|
||
:readonly="!!formData.id"
|
||
placeholder="请输入适合任务"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :lg="12" :xs="24">
|
||
<el-form-item label="数据标签" prop="roleId2s">
|
||
<el-input
|
||
v-model="formData.roleIds3"
|
||
:readonly="!!formData.id"
|
||
placeholder="请输入数据标签"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row style="width: 100%">
|
||
<el-col :lg="12" :xs="24">
|
||
<el-form-item label="数据集格式" prop="username1">
|
||
<el-select
|
||
v-model="formData.roleIds2"
|
||
placeholder="请选择数据集格式"
|
||
style="width: 100%"
|
||
>
|
||
<el-option label="PNG" value="0" />
|
||
<el-option label="jPG" value="1" />
|
||
<el-option label="BMP" value="2" />
|
||
<el-option label="GRAY8" value="3" />
|
||
<el-option label="GRAY16" value="4" />
|
||
<el-option label="RGB24" value="5" />
|
||
<el-option label="H264" value="6" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :lg="12" :xs="24">
|
||
<el-form-item label="是否已标注" prop="rolfeId2s">
|
||
<el-select
|
||
v-model="formData.rolfeId2s"
|
||
placeholder="请选择是否已标注"
|
||
style="width: 100%"
|
||
>
|
||
<el-option label="是" value="1" />
|
||
<el-option label="否" value="2" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row style="width: 100%">
|
||
<el-col :lg="12" :xs="24">
|
||
<el-form-item label="数据集名称" prop="usernamedd">
|
||
<el-input
|
||
v-model="formData.usernamedd"
|
||
:readonly="!!formData.id"
|
||
placeholder="请输入数据集名称"
|
||
:rows="3"
|
||
type="textarea"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :lg="12" :xs="24"> </el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-card>
|
||
<el-card style="margin-top: 12px;">
|
||
<template #header
|
||
><svg-icon icon-class="pause" style="width: 20px; height: 20px" />图片信息<strong
|
||
style="color: #409eff"
|
||
>（15）</strong
|
||
>
|
||
</template>
|
||
<el-form>
|
||
<el-upload
|
||
action="https://jsonplaceholder.typicode.com/posts/"
|
||
list-type="picture-card"
|
||
:file-list="imgList"
|
||
:limit="10"
|
||
:on-preview="handlePictureCardPreview"
|
||
:on-remove="handleRemove"
|
||
>
|
||
<i class="i-ep-plus"></i>
|
||
</el-upload>
|
||
</el-form>
|
||
</el-card>
|
||
<el-card class="card-footer">
|
||
<el-button type="primary" @click="handleUpload"><i-ep-upload-filled />上传图片</el-button>
|
||
<el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
|
||
<el-button @click="closeBack"><i-ep-close />取 消</el-button>
|
||
</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"
|
||
label-width="80px"
|
||
>
|
||
<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
|
||
>
|
||
</el-upload>
|
||
|
||
<el-upload
|
||
action="https://jsonplaceholder.typicode.com/posts/"
|
||
list-type="picture-card"
|
||
:file-list="imgList2"
|
||
:limit="10"
|
||
:on-preview="handlePictureCardPreview"
|
||
:on-remove="handleRemove"
|
||
>
|
||
<i class="i-ep-plus"></i>
|
||
</el-upload>
|
||
</el-form>
|
||
|
||
<!-- 弹窗底部操作按钮 -->
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button type="primary" @click="dialog.visible=false">开始上传</el-button>
|
||
<el-button @click="dialog.visible=false">取 消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</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 dialog = reactive({
|
||
visible: false,
|
||
type: "user-form",
|
||
width: 800,
|
||
title: "",
|
||
});
|
||
|
||
// 校验规则
|
||
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 imgList = [
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
];
|
||
|
||
const imgList2 = [
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
},
|
||
{
|
||
name: "demo.jepg",
|
||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||
}
|
||
];
|
||
|
||
/** 表单提交 */
|
||
const handleSubmit = useThrottleFn(() => {
|
||
loading.value = true;
|
||
setTimeout(() => {
|
||
ElMessage.success("修改用户成功");
|
||
loading.value = false;
|
||
closeBack();
|
||
}, 1000);
|
||
}, 3000);
|
||
|
||
/**
|
||
* 打开弹窗
|
||
*
|
||
* @param type 弹窗类型 用户表单：user-form | 用户导入：user-import
|
||
* @param id 用户ID
|
||
*/
|
||
async function handleUpload() {
|
||
dialog.visible = true;
|
||
dialog.title = "上传标注图片";
|
||
dialog.width = 880;
|
||
}
|
||
|
||
/** 返回默认页面 */
|
||
function closeBack() {
|
||
router.replace({ path: "/dataMgr/datas" });
|
||
}
|
||
|
||
onMounted(() => {
|
||
//handleQuery();
|
||
});
|
||
</script>
|
||
<style scoped lang='scss'>
|
||
.model-detail{
|
||
:deep(.el-card__header){
|
||
padding:8px 4px;
|
||
display: flex;
|
||
align-items: center
|
||
}
|
||
}
|
||
.sp-file{
|
||
color:#29d;
|
||
}
|
||
.tb-base-info{
|
||
line-height: 30px;
|
||
}
|
||
:deep(.svg-icon){
|
||
margin-right:8px;
|
||
}
|
||
.card-footer{
|
||
position: fixed;
|
||
width: calc(100% - 215px);
|
||
bottom: 0px;
|
||
:deep(.el-card__body){
|
||
padding:10px;
|
||
.el-pagination{
|
||
justify-content: end;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style scope>
|
||
.el-upload--picture-card{
|
||
display: none !important;
|
||
}
|
||
.dialog-footer{
|
||
text-align: center;
|
||
}
|
||
</style>
|