|
|
@@ -0,0 +1,256 @@
|
|
|
+<template>
|
|
|
+ <div style="width: 98%;display: flex;align-items: center;justify-content: space-between;padding-top: 1%;margin-left: 1%;">
|
|
|
+ <div style="font-size: 20px;">
|
|
|
+ 模型应用
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-input size="mini" v-model="dcName" style="width: 100%;margin-left: 1%;" placeholder="搜索项目"/>
|
|
|
+ <el-button type="primary" @click="showAdd" size="mini" style="margin-left:5%;" :icon="Plus">新增 </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 98%;display: flex;align-items: center;justify-content: space-between;padding-top: 1%;margin-left: 1%;">
|
|
|
+ <el-select
|
|
|
+ v-model="formJi"
|
|
|
+ class="noBorSel"
|
|
|
+ placeholder="全部"
|
|
|
+ style="width: 10%;margin-left: 0%;"
|
|
|
+ >
|
|
|
+ <el-option label="全部" :value="1" />
|
|
|
+ <el-option label="已发布" :value="2" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div style="height: 70vh;width: 98%;margin-left:1%;background-color: transparent;margin-top: 1%;display: flex;flex-wrap: wrap;justify-content: space-between;">
|
|
|
+ <div v-for="(item,index) in modelList">
|
|
|
+ <div class="coz-card" @mouseenter="setHoverIndex(index)" @mouseleave="resetHoverIndex">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div style="margin-left: 8%;margin-top: 5%;">
|
|
|
+ {{ item.appTitle }}
|
|
|
+ </div>
|
|
|
+ <img style="width: 90px;height: 90px;margin-left: 40%;margin-top: 8%;border-radius: 12px;" :src="item.appIcon" alt="">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-tag style="margin-left: 8%;margin-top: -2%;">应用</el-tag>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;align-items: center;margin-left: 8%;margin-top: 4%;line-height: 1.5;width: 85%;">
|
|
|
+ <img style="width: 4%;height: 4%;border-radius: 12px;" src="@/assets/images/touxiang.png" alt="">
|
|
|
+ <div style="margin-left: 3%;font-size: 12px;">
|
|
|
+ 创建人：{{ item.createBy }} 更新时间：{{item.createTime}}
|
|
|
+ </div>
|
|
|
+ <el-icon style="color: red;margin-left: auto;cursor: pointer;" @click="delModel(item)" v-if="hoverIndex === index"><Delete /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-pagination
|
|
|
+ v-if="total>12"
|
|
|
+ small
|
|
|
+ background
|
|
|
+ style="margin-top: 0.8%;float: right;margin-right: 1%;"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="total"
|
|
|
+ v-model="pageNum"
|
|
|
+ @change="changePage"
|
|
|
+ class="mt-4"
|
|
|
+ />
|
|
|
+ <el-dialog
|
|
|
+ title="新增模型应用"
|
|
|
+ v-model="isContentVisible"
|
|
|
+ width="30%"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <el-form ref="formAddref" :model="formAdd" label-width="100px" class="coz-mg-card" :rules="rulesAdd">
|
|
|
+ <el-form-item label="模型名称:" prop="appTitle">
|
|
|
+ <el-input v-model="formAdd.appTitle" placeholder="请输入应用名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="模型描述:" prop="appNote">
|
|
|
+ <el-input type="textarea" v-model="formAdd.appNote" placeholder="请输入应用描述"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图标:">
|
|
|
+ <div style="display: flex;width: 100%;">
|
|
|
+ <img v-if="!previewUrl" style="width: 80px;height:80px;margin-left: 0%;margin-top: 0%;border-radius: 12px;" src="@/assets/images/defaultModel.png" alt="">
|
|
|
+ <img v-if="previewUrl" style="width: 80px;height:80px;margin-left: 0%;margin-top: 0%;border-radius: 12px;" :src="previewUrl" alt="">
|
|
|
+ </div>
|
|
|
+ <el-upload
|
|
|
+ ref="uploadRef"
|
|
|
+ style="margin-top: 3%;"
|
|
|
+ :limit="1"
|
|
|
+ :show-file-list="false"
|
|
|
+ :file-list="fileList"
|
|
|
+ :headers="upload.headers"
|
|
|
+ :on-progress="handlepro"
|
|
|
+ :on-success="handleFileSuccess"
|
|
|
+ :on-change="handleChange"
|
|
|
+ :action="upload.url + '?file=' + upload.updateSupport"
|
|
|
+ :auto-upload="false"
|
|
|
+ >
|
|
|
+ <el-button @click="clearDefault" plain type="primary" size="mini" style="margin-left:auto;width: 80px;" :icon="Upload">上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="isContentVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="submitAdd">确定</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onMounted, ref } from 'vue'
|
|
|
+import { Search,RefreshRight,Plus,Download,Upload,Delete,Setting,Minus} from '@element-plus/icons-vue'
|
|
|
+import { getModellist,addModeling } from '@/api/standardization/modeling'
|
|
|
+import { getToken } from '@/utils/auth'
|
|
|
+import imagePath from '@/assets/images/defaultModel.png';
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const heightAll = window.innerHeight
|
|
|
+const isContentVisible = ref(false)
|
|
|
+const pageNum = ref(1)
|
|
|
+const modelList = ref([])
|
|
|
+const total = ref(0)
|
|
|
+const hoverIndex = ref(-1)
|
|
|
+const uploadRef = ref()
|
|
|
+const fileList = ref([
|
|
|
+ {
|
|
|
+ url: imagePath,
|
|
|
+ status: 'ready',
|
|
|
+ raw: new File([], 'default.png')
|
|
|
+ },
|
|
|
+]);
|
|
|
+const formAdd = ref({
|
|
|
+ appTitle: '',
|
|
|
+ appNote: '',
|
|
|
+});
|
|
|
+const formAddref = ref()
|
|
|
+const rulesAdd = reactive({
|
|
|
+ appTitle: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ appNote: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+});
|
|
|
+const upload = reactive({
|
|
|
+ // 是否显示弹出层（用户导入）
|
|
|
+ open: false,
|
|
|
+ // 弹出层标题（用户导入）
|
|
|
+ title: "",
|
|
|
+ // 是否禁用上传
|
|
|
+ isUploading: false,
|
|
|
+ // 是否更新已经存在的用户数据
|
|
|
+ updateSupport: '',
|
|
|
+ // 设置上传的请求头部
|
|
|
+ headers: { Authorization: "Bearer " + getToken() },
|
|
|
+ // 上传的地址
|
|
|
+ url: import.meta.env.VITE_APP_BASE_API + "/common/upload"
|
|
|
+});
|
|
|
+const previewUrl = ref()
|
|
|
+const setHoverIndex = (index) => {
|
|
|
+ hoverIndex.value = index;
|
|
|
+};
|
|
|
+
|
|
|
+const resetHoverIndex = () => {
|
|
|
+ hoverIndex.value = -1;
|
|
|
+};
|
|
|
+function submitAdd(){
|
|
|
+ formAddref.value.validate(async (valid) => {
|
|
|
+ if(valid){
|
|
|
+ if (uploadRef.value?.uploadFiles?.length === 0) {
|
|
|
+ uploadRef.value.handleStart({
|
|
|
+ uid: Date.now(),
|
|
|
+ name: 'default.png',
|
|
|
+ status: 'ready',
|
|
|
+ raw: new File([], 'default.png') // 创建虚拟文件对象
|
|
|
+ });
|
|
|
+ }
|
|
|
+ nextTick(() => {
|
|
|
+ uploadRef.value.submit(); // 触发上传
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+}
|
|
|
+function handlepro(event, file, fileList){
|
|
|
+ console.log("上传进度:", event.percent);
|
|
|
+ console.log("当前文件:", file);
|
|
|
+ console.log("文件列表:", fileList);
|
|
|
+};
|
|
|
+function handleFileSuccess(response, file, fileList){
|
|
|
+ console.log("上传成功的响应:", response);
|
|
|
+ if(response.code===200){
|
|
|
+ formAdd.value.appIcon = response.fileName
|
|
|
+ addModeling(formAdd.value).then(res => {
|
|
|
+ if(res.code === 200){
|
|
|
+ proxy.$message({
|
|
|
+ message: '新增成功',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ isContentVisible.value = false;
|
|
|
+ getList();
|
|
|
+ } else {
|
|
|
+ proxy.$message.error('新增失败');
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ proxy.$message.error('新增失败');
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+function clearDefault(){
|
|
|
+ uploadRef.value.clearFiles();
|
|
|
+}
|
|
|
+function handleChange(file, fileList){
|
|
|
+ const rawFile = file.raw;
|
|
|
+ console.log("原始文件对象:", rawFile);
|
|
|
+
|
|
|
+ previewUrl.value = URL.createObjectURL(rawFile);
|
|
|
+ console.log("预览地址:", fileList);
|
|
|
+}
|
|
|
+function showAdd(){
|
|
|
+ isContentVisible.value = true
|
|
|
+}
|
|
|
+function changePage(val) {
|
|
|
+ console.log(val)
|
|
|
+ pageNum.value = val,
|
|
|
+ getList()
|
|
|
+}
|
|
|
+function getList() {
|
|
|
+ var par = {
|
|
|
+ pageSize: 12,
|
|
|
+ pageNum: pageNum.value,
|
|
|
+ }
|
|
|
+ getModellist(par).then(response => {
|
|
|
+ modelList.value = response.rows
|
|
|
+ total.value = response.total
|
|
|
+ })
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ getList()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+:deep(.el-upload .el-upload--picture-card) {
|
|
|
+ height: 100px !important;
|
|
|
+ width: 100px !important;
|
|
|
+}
|
|
|
+.coz-card {
|
|
|
+ flex-grow: 1;
|
|
|
+ margin-left: 1%;
|
|
|
+ margin-top: 5%;
|
|
|
+ height: 20vh;
|
|
|
+ width: 24vw;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px solid;
|
|
|
+ border-style: solid;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ border-color: #e9e9eb;
|
|
|
+ transition: all 150ms ease-out;
|
|
|
+}
|
|
|
+.coz-card:hover {
|
|
|
+ box-shadow: 0 10px 12px 0 rgba(28, 31, 35, 0.06);
|
|
|
+}
|
|
|
+/* 自定义类名需保留 */
|
|
|
+.coz-stroke-primary {
|
|
|
+ stroke: var(--primary-color); /* 需替换为实际颜色值 */
|
|
|
+}
|
|
|
+.coz-mg-card {
|
|
|
+ margin: 10px; /* 根据实际需求调整 */
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
