|
|
@@ -43,8 +43,8 @@
|
|
|
/>
|
|
|
</div>
|
|
|
<div style="display: flex;width: 20%;align-items: center;margin-left: 20%;">
|
|
|
- <el-button type="primary" style="margin-left: 5%;" :icon="Search">查询</el-button>
|
|
|
- <el-button type="primary" style="margin-left: 5%;" icon="Refresh">重置</el-button>
|
|
|
+ <el-button type="primary" style="margin-left: 5%;" @click="getModelListTable" :icon="Search">查询</el-button>
|
|
|
+ <el-button type="primary" style="margin-left: 5%;" @click="submit" icon="Refresh">重置</el-button>
|
|
|
<el-button type="primary" style="margin-left:5%;" @click="reg" icon="Plus">注册</el-button>
|
|
|
<!-- <el-button type="" style="margin-left:5%;" plain icon="Plus">切换展示模式</el-button> -->
|
|
|
</div>
|
|
|
@@ -77,8 +77,8 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="className" label="组件分类" width="160"/>
|
|
|
<el-table-column prop="mdUnit" label="提供单位" width="160"/>
|
|
|
- <el-table-column prop="address2" label="注册人员" width="100"/>
|
|
|
- <el-table-column prop="st3" label="测试状态" width="140">
|
|
|
+ <el-table-column prop="registrant" label="注册人员" width="100"/>
|
|
|
+ <el-table-column prop="status" label="测试状态" width="140">
|
|
|
<template #default="scope">
|
|
|
<el-button v-if="scope.row.st1=='1'" type="success" plain>测试完成</el-button>
|
|
|
<el-button v-if="scope.row.st1=='2'" type="danger" plain>测试失败</el-button>
|
|
|
@@ -92,7 +92,7 @@
|
|
|
<el-button v-if="scope.row.st2=='3'" type="" plain>暂无评价</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="isPublic" label="是否发布" width="140">
|
|
|
+ <el-table-column prop="isApproved" label="是否发布" width="140">
|
|
|
<template #default="scope">
|
|
|
<el-button v-if="scope.row.st3=='1'" type="success" plain>已发布</el-button>
|
|
|
<el-button v-if="scope.row.st3=='2'" type="danger" plain>未发布</el-button>
|
|
|
@@ -100,16 +100,15 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="modifyBy" label="发布时间" width="170"/>
|
|
|
<el-table-column prop="version" label="版本" width="120"/>
|
|
|
- <el-table-column prop="address" label="操作" width="360">
|
|
|
+ <el-table-column prop="address" label="操作" width="300">
|
|
|
<template #default="scope">
|
|
|
<div style="display: flex;justify-content: space-between;width: 80%;">
|
|
|
<el-button type="primary" size="mini" text style="margin-left: -2%;">发布</el-button>
|
|
|
- <el-button type="warning" size="mini" text style="margin-left: -5%;">下架</el-button>
|
|
|
- <el-button type="warning" text size="mini" style="margin-left: -5%;">重置测试</el-button>
|
|
|
<el-button type="primary" text size="mini" style="margin-left: -5%;">测试</el-button>
|
|
|
<el-button type="primary" size="mini" text style="margin-left: -5%;">编辑</el-button>
|
|
|
- <el-button type="danger" text size="mini" style="margin-left: -5%;" @click="handleDelete(scope.row)">注销</el-button>
|
|
|
+ <!-- <el-button type="danger" text size="mini" style="margin-left: -5%;" @click="handleDelete(scope.row)">注销</el-button> -->
|
|
|
<el-button type="primary" text size="mini" style="margin-left: -5%;">查看</el-button>
|
|
|
+ <el-button type="primary" text size="mini" style="margin-left: -5%;">API管理</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -117,13 +116,15 @@
|
|
|
<div style="float: right;margin-top: 1%;margin-right: 1%;">
|
|
|
<el-pagination
|
|
|
small
|
|
|
+ v-model='currentPage'
|
|
|
+ @update = changePage
|
|
|
background
|
|
|
layout="prev, pager, next"
|
|
|
- :total="50"
|
|
|
+ :total="totalComReg"
|
|
|
class="mt-4"
|
|
|
/>
|
|
|
</div>
|
|
|
- <el-dialog v-model="dialogVisible" title="组件注册" width="50%" >
|
|
|
+ <el-dialog v-model="dialogVisible" title="组件注册" width="50%" @close="clearForm">
|
|
|
<el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
|
|
|
<el-step title="第一步"></el-step>
|
|
|
<el-step title="第二步"></el-step>
|
|
|
@@ -135,28 +136,28 @@
|
|
|
<div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">基本信息</div>
|
|
|
</div>
|
|
|
<div v-if="active==0" style="margin-left: 1%;margin-top: 1%;">
|
|
|
- <el-form style="margin-left: 5%;" :model="form" label-position="left" class="demo-form-inline" :rules="rules">
|
|
|
+ <el-form style="margin-left: 5%;" :model="formJi" label-position="left" ref="formRefJi" class="demo-form-inline" :rules="rulesJi">
|
|
|
<el-row :gutter="40">
|
|
|
<el-col :span="9">
|
|
|
<el-form-item label="组件名称:" prop="name" style="margin-left: -3%;">
|
|
|
- <el-input v-model="form.name" />
|
|
|
+ <el-input v-model="formJi.name" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="9">
|
|
|
<el-form-item label="版本号:" prop="version" style="margin-left: -3%;">
|
|
|
- <el-input v-model="form.version" />
|
|
|
+ <el-input v-model="formJi.version" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row :gutter="40" style="margin-top: 1%;">
|
|
|
<el-col :span="9" >
|
|
|
<el-form-item label="组件英文名称:" prop="enname" style="margin-left: -3%;">
|
|
|
- <el-input v-model="form.enname" />
|
|
|
+ <el-input v-model="formJi.enname" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="9">
|
|
|
<el-form-item label="排序:" prop="">
|
|
|
- <el-input v-model="form.region" />
|
|
|
+ <el-input v-model="formJi.region" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -164,11 +165,11 @@
|
|
|
<el-col :span="9" >
|
|
|
<el-form-item label="模型分类:" prop="type">
|
|
|
<el-select
|
|
|
- v-model="form.type"
|
|
|
+ v-model="formJi.type"
|
|
|
style="width: 100%;margin-left: 1%;"
|
|
|
>
|
|
|
<el-option
|
|
|
- v-for="item in options"
|
|
|
+ v-for="item in optionsType"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value"
|
|
|
@@ -178,18 +179,18 @@
|
|
|
</el-col>
|
|
|
<el-col :span="9">
|
|
|
<el-form-item label="开发语言:">
|
|
|
- <el-radio-group v-model="form.devlang" class="ml-4" size="small" style="margin-top: -10%;">
|
|
|
- <el-radio label="1" size="large">C++</el-radio>
|
|
|
- <el-radio label="2" size="large">.net</el-radio>
|
|
|
- <el-radio label="2" size="large">java</el-radio>
|
|
|
- <el-radio label="2" size="large">Python</el-radio>
|
|
|
- <el-radio label="2" size="large">其他</el-radio>
|
|
|
+ <el-radio-group v-model="formJi.devlang" class="ml-4" size="small" style="margin-top: -10%;">
|
|
|
+ <el-radio label="C++" size="large">C++</el-radio>
|
|
|
+ <el-radio label=".net" size="large">.net</el-radio>
|
|
|
+ <el-radio label="java" size="large">java</el-radio>
|
|
|
+ <el-radio label="Python" size="large">Python</el-radio>
|
|
|
+ <el-radio label="其他" size="large">其他</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-form-item label="组件简介:">
|
|
|
- <el-input v-model="form.region" style="width: 30%;" :rows="2" resize="none" type="textarea"/>
|
|
|
+ <el-input v-model="formJi.intro" style="width: 30%;" :rows="2" resize="none" type="textarea"/>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
@@ -198,28 +199,18 @@
|
|
|
<div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">提供单位信息</div>
|
|
|
</div>
|
|
|
<div v-if="active==0" style="margin-left: 1%;margin-top: 1%;">
|
|
|
- <el-form style="margin-left: 5%;margin-top: 2%;" :model="form" class="demo-form-inline" :rules="rules">
|
|
|
+ <el-form style="margin-left: 5%;margin-top: 2%;" :model="formTi" ref="formRefTi" class="demo-form-inline" :rules="rulesTi">
|
|
|
<el-row :gutter="40">
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="提供单位:" prop="mdUnit">
|
|
|
- <el-select
|
|
|
- v-model="form.mdUnit"
|
|
|
- style="width: 65%"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
+ <el-form-item label="提供单位:" prop="ti">
|
|
|
+ <el-input v-model="formTi.ti" style="width: 65%;margin-left: 1%;" placeholder="" />
|
|
|
<!-- <el-button type="primary" style="margin-left: 1%;">选择</el-button>
|
|
|
<el-button type="" style="margin-left:1%;">清空</el-button> -->
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="技术支撑单位:" prop="developer">
|
|
|
- <el-input v-model="form.developer" style="width: 65%;" />
|
|
|
+ <el-input v-model="formTi.developer" style="width: 65%;" />
|
|
|
<!-- <el-button type="" style="margin-left:1%;">清空</el-button> -->
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
@@ -227,7 +218,7 @@
|
|
|
<el-row :gutter="40" style="margin-top: 1%;">
|
|
|
<el-col :span="9" >
|
|
|
<el-form-item label="联系方式:" prop="mdContact">
|
|
|
- <el-input v-model="form.mdContact" />
|
|
|
+ <el-input v-model="formTi.mdContact" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -290,27 +281,26 @@
|
|
|
<div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">模型组件上传</div>
|
|
|
</div>
|
|
|
<div style="margin-left: 1%;margin-top: 1%;">
|
|
|
- <el-form style="margin-left: 5%;margin-top: 2%;" :model="form" class="demo-form-inline" :rules="rules">
|
|
|
- <el-form-item label="组件执行包:" prop="name" style="margin-left: -1%;">
|
|
|
- <el-input v-model="form.region" style="width: 75%;" placeholder="请输入组件执行路径" :rows="2" type="textarea" resize="none"/>
|
|
|
+ <el-form style="margin-left: 5%;margin-top: 2%;" :model="formZu" class="demo-form-inline" ref="formRefZu" :rules="rulesZu">
|
|
|
+ <el-form-item label="组件执行路径:" prop="name" style="margin-left: -1%;">
|
|
|
+ <el-input v-model="rulesZu.mirrorImageEurl" style="width: 75%;" placeholder="请输入组件执行路径" :rows="2" type="textarea" resize="none"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="组件说明文档:" prop="">
|
|
|
<div style="width: 60%;">
|
|
|
<el-upload
|
|
|
- class="upload-demo"
|
|
|
- drag
|
|
|
- action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
|
|
- multiple
|
|
|
- >
|
|
|
- <el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
- <div class="el-upload__text">
|
|
|
- Drop file here or <em>click to upload</em>
|
|
|
- </div>
|
|
|
- <template #tip>
|
|
|
- <div class="el-upload__tip">
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-upload>
|
|
|
+ ref="uploadRef"
|
|
|
+ :limit="1"
|
|
|
+ accept=".xlsx, .xls"
|
|
|
+ :headers="upload.headers"
|
|
|
+ :action="upload.url + '?updateSupport=' + upload.updateSupport"
|
|
|
+ :on-progress="handleFileUploadProgress"
|
|
|
+ :on-success="handleFileSuccess"
|
|
|
+ :auto-upload="false"
|
|
|
+ drag
|
|
|
+ >
|
|
|
+ <el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
+ <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
|
|
+ </el-upload>
|
|
|
</div>
|
|
|
<div style="color: #b1b3b8;width: 100%;">
|
|
|
注:请上传后缀名为.docx .pdf .txt的文件
|
|
|
@@ -323,11 +313,11 @@
|
|
|
<div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">资源需求</div>
|
|
|
</div>
|
|
|
<div style="margin-left: 1%;margin-top: 1%;">
|
|
|
- <el-form style="margin-left: 5%;margin-top: 2%;" :model="form" class="demo-form-inline" :rules="rules">
|
|
|
+ <el-form style="margin-left: 5%;margin-top: 2%;" :model="formZu" class="demo-form-inline" ref="formRefZu" :rules="rulesZu">
|
|
|
<el-row :gutter="40">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="CPU核心数:" prop="mdCPU" style="margin-left: -2%;">
|
|
|
- <el-input v-model="form.mdCPU" style="width: 50%;" placeholder=""/>
|
|
|
+ <el-input v-model="formZu.mdCPU" style="width: 50%;" placeholder=""/>
|
|
|
<div style="margin-left: 2%;">
|
|
|
个
|
|
|
</div>
|
|
|
@@ -335,7 +325,7 @@
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="内存:" prop="name">
|
|
|
- <el-input v-model="form.region" style="width: 50%;" placeholder=""/>
|
|
|
+ <el-input v-model="formZu.region" style="width: 50%;" placeholder=""/>
|
|
|
<div style="margin-left: 2%;">
|
|
|
M
|
|
|
</div>
|
|
|
@@ -345,13 +335,13 @@
|
|
|
<el-row :gutter="40">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="是否需要GPU:">
|
|
|
- <el-switch v-model="form.mdGPU" />
|
|
|
+ <el-switch v-model="formZu.mdGPU" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="平台:" prop="name">
|
|
|
<el-select
|
|
|
- v-model="value"
|
|
|
+ v-model="formZu.name"
|
|
|
style="width: 50%;"
|
|
|
>
|
|
|
<el-option
|
|
|
@@ -573,9 +563,12 @@
|
|
|
<template #footer>
|
|
|
<span class="dialog-footer">
|
|
|
<el-button @click="forward" style="float: left;">上一步</el-button>
|
|
|
- <el-button type="primary" @click="next">
|
|
|
+ <el-button type="primary" @click="next" v-if="active!=2">
|
|
|
下一步
|
|
|
</el-button>
|
|
|
+ <el-button type="primary" @click="submit" v-if="active==2">
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
@@ -593,6 +586,7 @@ import {
|
|
|
} from '@element-plus/icons-vue'
|
|
|
import { reactive } from 'vue'
|
|
|
import { forwardRefProps } from 'element-plus/es/components/tooltip-v2/src/forward-ref.mjs';
|
|
|
+import { getToken } from "@/utils/auth";
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
const dragTableRef = ref()
|
|
|
const dialogVisible = ref(false)
|
|
|
@@ -647,6 +641,47 @@ const data = reactive({
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+const formJi = ref({});
|
|
|
+const rulesJi = reactive({
|
|
|
+ name: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ version: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ enname: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+});
|
|
|
+const formRefJi = ref();
|
|
|
+
|
|
|
+const formTi = ref({});
|
|
|
+const rulesTi = reactive({
|
|
|
+ ti: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ developer: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ mdContact: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+});
|
|
|
+const formRefTi = ref();
|
|
|
+
|
|
|
+const formZu = ref({});
|
|
|
+const rulesZu = reactive({
|
|
|
+ name: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ developer: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ mdCPU: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ mdContact: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+});
|
|
|
+const formRefZu = ref();
|
|
|
+
|
|
|
+const upload = reactive({
|
|
|
+ // 是否显示弹出层(用户导入)
|
|
|
+ open: false,
|
|
|
+ // 弹出层标题(用户导入)
|
|
|
+ title: "",
|
|
|
+ // 是否禁用上传
|
|
|
+ isUploading: false,
|
|
|
+ // 是否更新已经存在的用户数据
|
|
|
+ updateSupport: 0,
|
|
|
+ // 设置上传的请求头部
|
|
|
+ headers: { Authorization: "Bearer " + getToken() },
|
|
|
+ // 上传的地址
|
|
|
+ url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
|
|
|
+});
|
|
|
+const totalComReg = ref()
|
|
|
+const currentPage = ref(1)
|
|
|
const { queryParams, form, rules } = toRefs(data);
|
|
|
const tableData2 = ref([
|
|
|
{ date1:'流域拓扑', date2:'', date3:'single', date4:'基于水文响应' },
|
|
|
@@ -676,6 +711,24 @@ let tableData = ref([{name:'1'}])
|
|
|
const heightAll = window.innerHeight
|
|
|
const valueHelpSel = '';
|
|
|
const tableheight = window.innerHeight*0.7
|
|
|
+const optionsType = [
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '水利专业模型',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '2',
|
|
|
+ label: '排水专业模型',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '3',
|
|
|
+ label: '供水专业模型',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '4',
|
|
|
+ label: '海洋专业模型',
|
|
|
+ },
|
|
|
+]
|
|
|
const options = [
|
|
|
{
|
|
|
value: 'Option1',
|
|
|
@@ -698,6 +751,24 @@ const options = [
|
|
|
label: 'Option5',
|
|
|
},
|
|
|
]
|
|
|
+onMounted(() => {
|
|
|
+ getModelListTable()
|
|
|
+ // addNewModel()
|
|
|
+});
|
|
|
+function submit(){
|
|
|
+ const data = ref({ user:1 });
|
|
|
+ data.value = { ...data.value, ...{ age: 20 } };
|
|
|
+ console.log(data.value)
|
|
|
+ const formTotal = { ...formJi.value,...formTi.value,...formZu.value, };
|
|
|
+ addModel(formTotal).then(res=>{
|
|
|
+
|
|
|
+ })
|
|
|
+}
|
|
|
+function clearForm(){
|
|
|
+ formJi.value = {}
|
|
|
+ formTi.value = {}
|
|
|
+ formZu.value = {}
|
|
|
+}
|
|
|
function addNewModel(){
|
|
|
addModel(form).then(res=>{
|
|
|
|
|
|
@@ -706,13 +777,18 @@ function addNewModel(){
|
|
|
function reg(){
|
|
|
dialogVisible.value = true
|
|
|
}
|
|
|
+function changePage(a){
|
|
|
+ currentPage.value = a
|
|
|
+ getModelListTable()
|
|
|
+}
|
|
|
function getModelListTable(){
|
|
|
var par = {
|
|
|
- pageNum: 1,
|
|
|
+ pageNum: currentPage,
|
|
|
pageSize: 10,
|
|
|
}
|
|
|
getModelList(par).then(res=>{
|
|
|
tableData.value = res.rows
|
|
|
+ totalComReg.value = res.total
|
|
|
console.log(tableData)
|
|
|
})
|
|
|
}
|
|
|
@@ -726,93 +802,32 @@ function handleDelete(row) {
|
|
|
};
|
|
|
const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
|
|
|
const next = () => {
|
|
|
- console.log(active.value)
|
|
|
active.value++
|
|
|
+ // if(active.value==0){
|
|
|
+ // formRefJi.value.validate((valid) => {
|
|
|
+ // formRefTi.value.validate((valid1) => {
|
|
|
+ // if(active.value<2&&valid&&valid1){
|
|
|
+ // active.value++
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // if(active.value==1){
|
|
|
+ // formRefZu.value.validate((valid) => {
|
|
|
+ // if(active.value<2&&valid){
|
|
|
+ // active.value++
|
|
|
+
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
}
|
|
|
const forward = () => {
|
|
|
- console.log(active.value)
|
|
|
- active.value--
|
|
|
-}
|
|
|
-
|
|
|
-let sortableInstance = null;
|
|
|
-
|
|
|
-// 初始化拖拽
|
|
|
-const initSortable = () => {
|
|
|
- const tbody = document.querySelector('.draggable-table .el-table__body-wrapper tbody');
|
|
|
-
|
|
|
- if (!tbody) return;
|
|
|
-
|
|
|
- // 销毁旧实例避免重复绑定
|
|
|
- if (sortableInstance) {
|
|
|
- sortableInstance.destroy();
|
|
|
+ if(active.value>0){
|
|
|
+ active.value--
|
|
|
}
|
|
|
-
|
|
|
- sortableInstance = Sortable.create(tbody, {
|
|
|
- handle: '.drag-handle', // 指定拖动手柄[9](@ref)
|
|
|
- animation: 150,
|
|
|
- ghostClass: 'ghost',
|
|
|
- preventOnFilter: false, // 禁用默认选中行为[7](@ref)
|
|
|
-
|
|
|
- // 拖拽结束回调
|
|
|
- onEnd: (event) => {
|
|
|
- const { oldIndex, newIndex } = event;
|
|
|
-
|
|
|
- // 深拷贝避免数据污染
|
|
|
- const newData = [...tableData2.value];
|
|
|
- const [movedItem] = newData.splice(oldIndex, 1);
|
|
|
- newData.splice(newIndex, 0, movedItem);
|
|
|
-
|
|
|
- tableData2.value = newData; // 响应式更新数据
|
|
|
-
|
|
|
- // 等待DOM更新后重新初始化
|
|
|
- nextTick(() => {
|
|
|
- initSortable();
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
-};
|
|
|
-let sortableInstance1 = null
|
|
|
-const initSortable1 = () => {
|
|
|
- const tbody = document.querySelector('.draggable-table1 .el-table__body-wrapper tbody');
|
|
|
|
|
|
- if (!tbody) return;
|
|
|
-
|
|
|
- // 销毁旧实例避免重复绑定
|
|
|
- if (sortableInstance1) {
|
|
|
- sortableInstance1.destroy();
|
|
|
- }
|
|
|
+}
|
|
|
|
|
|
- sortableInstance1 = Sortable.create(tbody, {
|
|
|
- handle: '.drag-handle', // 指定拖动手柄[9](@ref)
|
|
|
- animation: 150,
|
|
|
- ghostClass: 'ghost',
|
|
|
- preventOnFilter: false, // 禁用默认选中行为[7](@ref)
|
|
|
-
|
|
|
- // 拖拽结束回调
|
|
|
- onEnd: (event) => {
|
|
|
- const { oldIndex, newIndex } = event;
|
|
|
-
|
|
|
- // 深拷贝避免数据污染
|
|
|
- const newData = [...tableData3.value];
|
|
|
- const [movedItem] = newData.splice(oldIndex, 1);
|
|
|
- newData.splice(newIndex, 0, movedItem);
|
|
|
-
|
|
|
- tableData3.value = newData; // 响应式更新数据
|
|
|
-
|
|
|
- // 等待DOM更新后重新初始化
|
|
|
- nextTick(() => {
|
|
|
- initSortable1();
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
-};
|
|
|
-// 生命周期管理
|
|
|
-onMounted(() => {
|
|
|
- nextTick(initSortable);
|
|
|
- nextTick(initSortable1);
|
|
|
- // getModelListTable()
|
|
|
- // addNewModel()
|
|
|
-});
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
if (sortableInstance) {
|