TBA_GXPT/ruoyi-ui/src/views/register/componentReg/index.vue

<template>
  <div style="width: 100%;background-color: #F7F7F7;padding-top: 1%;" :style="{'height':heightAll+'px'}">
    <div style="display: flex;width: 100%;margin-left: 1%;">
        <div style="display: flex;width: 20%;align-items: center;">
            <div>
                组件名称:
            </div>
            <el-input v-model="input" style="width:50%;margin-left: 1%;" placeholder="" />
        </div>
        <div style="display: flex;width: 20%;align-items: center;margin-left: -5%;">
            <div>
                组件分类:
            </div>
            <el-select
                v-model="value"
                style="width: 50%;margin-left: 1%;"
            >
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>
        </div>
        <div style="display: flex;width: 20%;align-items: center;margin-left: -5%;">
            <div>
                提供单位:
            </div>
            <el-input v-model="input" style="width: 50%;margin-left: 1%;" placeholder="" />
        </div>
        <div style="display: flex;width: 20%;align-items: center;margin-left: -5%;">
            <div>
                注册时间:
            </div>
            <el-date-picker
            v-model="value1"
            style="width: 50%;margin-left: 1%;"
            type="daterange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            />
        </div>
        <div style="display: flex;width: 20%;align-items: center;margin-left: 20%;">
            <el-button type="primary" style="margin-left: 5%;" @click="getModelListTable" :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="reg" icon="Plus">注册</el-button>
            <!-- <el-button type="" style="margin-left:5%;" plain icon="Plus">切换展示模式</el-button> -->
        </div>
    </div>
    <div style="display: flex;align-items: center;background-color:#EFFAFF ;margin-top: 1%;width: 98%;margin-left: 1%;line-height: 1.5" :style="{'height':heightAll * 0.03+'px'}">
        <div style="margin-left: 0.5%;">
            已选择
        </div>
        <div style="margin-left: 0.5%;">
            0
        </div>
        <div style="margin-left: 0.5%;">
            项
        </div>
        <el-button type="text" style="margin-left:1%;">清空</el-button>
    </div>
    <div style="margin-top: 0%;margin-left: 0%;width: 100%;">
        <el-table 
        :data="tableData" 
        style="width: 98%;margin-left: 1%;margin-top: 0.5%;"
        :cell-style="{ textAlign: 'center', }"
        :header-cell-style="{ textAlign: 'center'}"
        :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
        border 
        :height="tableheight">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="name" label="组件名称">

        </el-table-column>
        <el-table-column prop="className" label="组件分类" width="160"/>
        <el-table-column prop="mdUnit" label="提供单位" width="160"/>
        <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>
              <el-button v-if="scope.row.st1=='3'" type="" plain>不支持</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="st1" label="评价结果" width="140">
            <template #default="scope">
              <el-button v-if="scope.row.st2=='1'" type="success" plain>测试完成</el-button>
              <el-button v-if="scope.row.st2=='2'" type="danger" plain>测试失败</el-button>
              <el-button v-if="scope.row.st2=='3'" type="" plain>暂无评价</el-button>
            </template>
        </el-table-column>
        <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>
            </template>
        </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="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="primary" text size="mini" style="margin-left: -5%;">测试</el-button>
                    <el-button type="primary" @click="showEdit(scope.row)" 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 @click="showDe(scope.row)" 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>
      </el-table>
      <div style="float: right;margin-top: 1%;margin-right: 1%;">
          <el-pagination
            small
            v-model='currentPage'
            @current-change="changePage"
            background
            layout="prev, pager, next"
            :total="totalComReg"
            class="mt-4"
          />
        </div>
        <el-dialog v-model="dialogVisible" title="组件注册" width="50%" @close="clearForm" destroy-on-close :key="tableKey">
          <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
            <el-step title="第一步"></el-step>
            <el-step title="第二步"></el-step>
            <el-step title="第三步"></el-step>
          </el-steps>
            <div v-show="active==0">
              <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
                <div style="background-color: blue;width: 2px;height: 16px;"></div>
                <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">基本信息</div>
              </div>
              <div style="margin-left: 1%;margin-top: 1%;">
                  <el-form :key="tableKey" 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="formJi.name" :disabled="isEdit"/>
                          </el-form-item>
                      </el-col>
                      <el-col :span="9">
                          <el-form-item label="版本号:" prop="version" style="margin-left: -3%;">
                              <el-input v-model="formJi.version" :disabled="isEdit"/>
                          </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="formJi.enname" :disabled="isEdit"/>
                          </el-form-item>
                      </el-col>
                      <el-col :span="9">
                          <el-form-item label="排序:" prop="">
                              <el-input v-model="formJi.region" :disabled="isEdit"/>
                          </el-form-item>
                      </el-col>
                      </el-row>
                      <el-row :gutter="40" style="margin-top: 1%;">
                      <el-col :span="9" >
                          <el-form-item label="模型分类:" prop="type">
                              <el-select
                              v-model="formJi.type"
                               :disabled="isEdit"
                              style="width: 100%;margin-left: 1%;"
                          >
                              <el-option
                              v-for="item in optionsType"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                              />
                          </el-select>
                          </el-form-item>
                      </el-col>
                      <el-col :span="9">
                          <el-form-item label="开发语言:">
                              <el-radio-group v-model="formJi.devlang" class="ml-4" size="small" style="margin-top: -10%;" :disabled="isEdit">
                                  <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="formJi.intro" style="width: 30%;" :disabled="isEdit" :rows="2" resize="none" type="textarea"/>
                      </el-form-item>
                  </el-form>
              </div>
              <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
                  <div style="background-color: blue;width: 2px;height: 16px;"></div>
                  <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%;" :disabled="isEdit" :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-input v-model="formTi.mdUnit" 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="formTi.developer" style="width: 65%;" />
                              <!-- <el-button type="" style="margin-left:1%;">清空</el-button> -->
                          </el-form-item>
                      </el-col>
                      </el-row>
                      <el-row :gutter="40" style="margin-top: 1%;">
                      <el-col :span="9" >
                          <el-form-item label="联系方式:" prop="mdContact"> 
                          <el-input v-model="formTi.mdContact" />
                          </el-form-item>
                      </el-col>
                      </el-row>
                  </el-form>
              </div>
            </div>
            <div v-show="active==1">
              <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
                  <div style="background-color: blue;width: 2px;height: 16px;"></div>
                  <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">模型组件上传</div>
              </div>
              <div style="margin-left: 1%;margin-top: 1%;">
                  <el-form :disabled="isEdit" style="margin-left: 5%;margin-top: 2%;"  :model="formZu" class="demo-form-inline" ref="formRefZu" :rules="rulesZu">
                    <el-form-item label="组件执行路径:" prop="mirrorImageEurl" style="margin-left: -1%;">
                      <el-input v-model="formZu.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
                            ref="uploadRef"
                            :limit="1"
                            accept=".xlsx, .xls"
                            :headers="upload.headers"
                            :action="upload.url + '?file=' + 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的文件
                      </div>
                    </el-form-item>
                  </el-form>
              </div>
              <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
                <div style="background-color: blue;width: 2px;height: 16px;"></div>
                <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">资源需求</div>
              </div>
              <div style="margin-left: 1%;margin-top: 1%;">
                  <el-form :disabled="isEdit" 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="formZu.mdCPU" style="width: 50%;" placeholder=""/>
                              <div style="margin-left: 2%;">
                                个
                              </div>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="内存:" prop="nei">
                            <el-input v-model="formZu.nei" style="width: 50%;" placeholder=""/>
                              <div style="margin-left: 2%;">
                                M
                              </div>
                          </el-form-item>
                      </el-col>
                      </el-row>
                      <el-row :gutter="40">
                      <el-col :span="12">
                          <el-form-item label="是否需要GPU:">
                              <el-switch v-model="formZu.mdGPU" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="平台:" prop="ping">
                            <el-select
                                v-model="formZu.ping"
                                style="width: 50%;"
                            >
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                          </el-form-item>
                      </el-col>
                      </el-row>
                  </el-form>
              </div>
              <!-- <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
                  <div style="background-color: blue;width: 2px;height: 16px;"></div>
                  <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">
                      <el-input v-model="form.region" style="width: 75%;" placeholder="请输入示例" :rows="2" type="textarea"/>
                    </el-form-item>
                  </el-form>
              </div> -->
            </div>
            <div v-show="active==2">
              <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;width: 98%;">
                <div style="background-color: blue;width: 2px;height: 16px;"></div>
                <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">输入参数</div>
                <div style="margin-left: auto">
                  <el-button type="primary">添加</el-button>
                </div>
              </div>
              <el-table 
                :data="tableData1" 
                style="width: 98%;margin-left: 1%;margin-top: 0.5%;"
                :cell-style="{ textAlign: 'center', }"
                :header-cell-style="{ textAlign: 'center'}"
                :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
                border 
                :max-height="tableheight">
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="date1" label="参数名称"></el-table-column>
                <el-table-column prop="date2" label="英文名称"></el-table-column>
                <el-table-column prop="date3" label="类型"></el-table-column>
                <el-table-column prop="date4" label="内容" width="120">
                  <template #default="scope">
                    <div style="display: flex; align-items: center; height: 100%;">
                      {{scope.row.date4}}<el-button @click="" type="text" style="margin-left: 1%;">查看</el-button>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="date5" label="必填"></el-table-column>
                <el-table-column prop="date6" label="率定参数"></el-table-column>
                <el-table-column prop="date7" label="创建时间"></el-table-column>
                <el-table-column prop="date8" label="操作">
                  <template #default="scope">
                    <div style="">
                      <el-button @click="" type="text" style="margin-left: 1%;">编辑</el-button>
                      <el-button @click="" type='danger' text style="margin-left: 2%;">删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;width: 98%;">
                <div style="background-color: blue;width: 2px;height: 16px;"></div>
                <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">输出参数</div>
                <div style="margin-left: auto">
                  <el-button type="primary">添加</el-button>
                </div>
              </div>
              <el-table 
                :data="tableData1" 
                style="width: 98%;margin-left: 1%;margin-top: 0.5%;"
                :cell-style="{ textAlign: 'center', }"
                :header-cell-style="{ textAlign: 'center'}"
                :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
                border 
                :max-height="tableheight">
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="date1" label="参数名称"></el-table-column>
                <el-table-column prop="date2" label="英文名称"></el-table-column>
                <el-table-column prop="date3" label="类型"></el-table-column>
                <el-table-column prop="date4" label="内容" width="120">
                  <template #default="scope">
                    <div style="display: flex; align-items: center; height: 100%;">
                      {{scope.row.date4}}<el-button @click="" type="text" style="margin-left: 1%;">查看</el-button>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="date5" label="必填"></el-table-column>
                <el-table-column prop="date6" label="率定参数"></el-table-column>
                <el-table-column prop="date7" label="创建时间"></el-table-column>
                <el-table-column prop="date8" label="操作">
                  <template #default="scope">
                    <div style="">
                      <el-button @click="" type="text" style="margin-left: 1%;">编辑</el-button>
                      <el-button @click="" type='danger' text style="margin-left: 2%;">删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- <div v-if="active==3">
              <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;width: 98%;">
                <div style="background-color: blue;width: 2px;height: 16px;"></div>
                <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">前处理</div>
                <div style="margin-left: auto">
                  <el-button type="primary">添加</el-button>
                </div>
              </div>
              <el-table 
                :data="tableData2" 
                ref="dragTableRef"
                class="draggable-table"
                row-key="date1"
                style="width: 98%;margin-left: 1%;margin-top: 0.5%;"
                :cell-style="{ textAlign: 'center', }"
                :header-cell-style="{ textAlign: 'center'}"
                :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
                border 
                :max-height="tableheight">
                <el-table-column label="排序">
                  <template #default="scope">
                    <div class="drag-handle">
                      <el-icon ><Sort /></el-icon>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="date1" label="操作名称"></el-table-column>
                <el-table-column prop="date2" label="参数英文名称"></el-table-column>
                <el-table-column prop="date3" label="模式"></el-table-column>
                <el-table-column prop="date4" label="工具组件"></el-table-column>
                <el-table-column prop="date5" label="操作">
                  <template #default="scope">
                    <div style="">
                      <el-button @click="" type="text" style="margin-left: 1%;">编辑</el-button>
                      <el-button @click="" type='danger' text style="margin-left: 2%;">删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;width: 98%;">
                <div style="background-color: blue;width: 2px;height: 16px;"></div>
                <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">输出参数</div>
                <div style="margin-left: auto">
                  <el-button type="primary">添加</el-button>
                </div>
              </div>
              <el-table 
                :data="tableData3" 
                class="draggable-table1"
                row-key="date1"
                style="width: 98%;margin-left: 1%;margin-top: 0.5%;"
                :cell-style="{ textAlign: 'center', }"
                :header-cell-style="{ textAlign: 'center'}"
                :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
                border 
                :max-height="tableheight">
                <el-table-column label="排序">
                  <template #default="scope">
                    <div class="drag-handle">
                      <el-icon ><Sort /></el-icon>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="date1" label="操作名称"></el-table-column>
                <el-table-column prop="date2" label="参数英文名称"></el-table-column>
                <el-table-column prop="date3" label="模式"></el-table-column>
                <el-table-column prop="date4" label="工具组件"></el-table-column>
                <el-table-column prop="date5" label="操作">
                  <template #default="scope">
                    <div style="">
                      <el-button @click="" type="text" style="margin-left: 1%;">编辑</el-button>
                      <el-button @click="" type='danger' text style="margin-left: 2%;">删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;width: 98%;">
                <div style="background-color: blue;width: 2px;height: 16px;"></div>
                <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">后处理</div>
                <div style="margin-left: auto">
                  <el-button type="primary">添加</el-button>
                </div>
              </div>
              <el-table 
                :data="tableData2" 
                class="draggable-table"
                row-key="date1"
                style="width: 98%;margin-left: 1%;margin-top: 0.5%;"
                :cell-style="{ textAlign: 'center', }"
                :header-cell-style="{ textAlign: 'center'}"
                :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
                border 
                :max-height="tableheight">
                <el-table-column label="排序">
                  <template #default="scope">
                    <div class="drag-handle">
                      <el-icon ><Sort /></el-icon>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="date1" label="操作名称"></el-table-column>
                <el-table-column prop="date2" label="参数英文名称"></el-table-column>
                <el-table-column prop="date3" label="模式"></el-table-column>
                <el-table-column prop="date4" label="工具组件"></el-table-column>
                <el-table-column prop="date5" label="操作">
                  <template #default="scope">
                    <div style="">
                      <el-button @click="" type="text" style="margin-left: 1%;">编辑</el-button>
                      <el-button @click="" type='danger' text style="margin-left: 2%;">删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div> -->
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="forward" style="float: left;">上一步</el-button>
                <el-button type="primary" @click="next" v-if="active!=2">
                下一步
                </el-button>
                <el-button type="primary" @click="subEdit" v-if="active==2&&isEdit===false&&isAdd===false">
                提交
                </el-button>
                <el-button type="primary" @click="submit" v-if="active==2&&isEdit===false&&isAdd===true">
                提交
                </el-button>
                <el-button type="primary" @click="dialogVisible = false" v-if="active==2&&isEdit===true">
                确定
                </el-button>
            </span>
            </template>
        </el-dialog>
    </div>
  </div>
</template>
<script   setup>
import { getModelList,addModel,delMdid,getModelFile,getModelDetail,updateModel,modelFile } from "@/api/register/regCom";
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import { Search } from '@element-plus/icons-vue'
import {
  ArrowLeft,
  Plus
} 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";
import { fa } from "element-plus/es/locales.mjs";
const { proxy } = getCurrentInstance();
const dragTableRef = ref()
const dialogVisible = ref(false)
const active = ref(0)
const data = reactive({
  form: {},
  queryParams: {
    "author": 0,
    "cateid": '',
    "className": '',
    "createBy": '',
    "createTime": "",
    "developer": '',
    "devlang": '',
    "enname": '',
    "intro": '',
    "isApproved": 0,
    "isPublic": 0,
    "mdCPU": 0,
    "mdContact": '',
    "mdGpu": 0,
    "mdInOutName": '',
    "mdInOutNameEn": '',
    "mdRunCmd": '',
    "mdRunEnv": '',
    "mdUnit": '',
    "mdid": '',
    "mirrorImageDesc": '',
    "mirrorImageEg": '',
    "mirrorImageUrl": '',
    "modifyBy": "",
    "msgFlag": 0,
    "msgWebHook": '',
    "name": 'test',
    "params": {},
    "remark": '',
    "status": 0,
    "tags": '',
    "type": '',
    "updateBy": '',
    "updateTime": "",
    "version": ''
  },
});

const isEdit = ref(true)
const isAdd = ref(true)
const formJi = ref({
  name:'',
  version:'',
  enname:'',
  devlang:'',
  intro:'',
  type:''
});
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({
  developer:'',
  mdContact:'',
  mdUnit:''
});
const rulesTi = reactive({
  mdUnit: [{ required: true, message: '必填', trigger: 'blur' }],
  developer: [{ required: true, message: '必填', trigger: 'blur' }],
  mdContact: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefTi = ref();

const formZu = ref({
  mirrorImageEurl:'',
  mdCPU:'',
  mdGPU:''
});
const rulesZu = reactive({
  mirrorImageEurl: [{ required: true, message: '必填', trigger: 'blur' }],
  mdCPU: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefZu = ref();

const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: '',
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/common/upload"
});
const tableKey = ref(0);
const totalComReg = ref()
const currentPage = ref(1)
const { queryParams, form, rules } = toRefs(data);
const tableData2 = ref([ 
  { date1:'流域拓扑', date2:'', date3:'single', date4:'基于水文响应' },
  { date1:'雨量站', date2:'', date3:'single', date4:'基于水文响应' },
  { date1:'水库', date2:'', date3:'single', date4:'基于水文响应' }
]);
const tableData3 = ref([
  { date1:'流域拓扑', date2:'', date3:'single', date4:'基于水文响应' },
  { date1:'水库', date2:'', date3:'single', date4:'基于水文响应' },
  { date1:'雨量站', date2:'', date3:'single', date4:'基于水文响应' }
]);
const tableData1= [{date1:'初始状态',
  date2:'sts',
  date3:'数据项',
  date4:'初始状态',
  date5:'是',
  date6:'否',
  date7:'2023-09-08'
}]
const checkGroup = [
    {label:'水文预报'},
    {label:'维水动力'},
    {label:'二维水动力'},
    {label:'机器学习'},
]
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',
    label: 'Option1',
  },
]
const uploadRef = ref(null);
const parForm = ref('')
onMounted(() => {
  getModelListTable()
  // addNewModel()
});
function updateSameProperties(target, source) {
  Object.keys(target).forEach(key => {
    if (source.hasOwnProperty(key)) {
      target[key] = source[key]; // 仅更新同名属性
    }
  });
  return target;
}
function showDe(row){
  dialogVisible.value = true
  isEdit.value = true
  getModelDetail(row.mdid).then(res=>{
    parForm.value = res.data
    formJi.value = updateSameProperties(formJi.value,res.data)
    formTi.value = updateSameProperties(formTi.value,res.data)
    formZu.value = updateSameProperties(formZu.value,res.data)
  })
}
async function showEdit(row){
  isAdd.value = false
  dialogVisible.value = true
  await nextTick()
  isEdit.value = false
  getModelDetail(row.mdid).then(res=>{
    parForm.value = res.data
    formJi.value = updateSameProperties(formJi.value,res.data)
    formTi.value = updateSameProperties(formTi.value,res.data)
    formZu.value = updateSameProperties(formZu.value,res.data)
  })
}
function mergeObjects(...objects) {
    return { ...objects.reduce((acc, obj) => ({ ...acc, ...obj }), {}) };
}
function subEdit(){
  const formTotal = { ...formJi.value,...formTi.value,...formZu.value,...parForm.value };
  const par = mergeObjects(parForm.value, formJi.value, formTi.value,formZu.value)
  console.log(par)
  updateModel(par).then(res=>{
    if(res.code===200){
      proxy.$modal.msgSuccess("修改成功");
      dialogVisible.value = false
    }
  })
}
async function submit(){
  const formTotal = { ...formJi.value,...formTi.value,...formZu.value,};
  // debugger
  await addModel(formTotal).then(res=>{
    upload.updateSupport = res.msg
  })
  if(uploadRef.value?.uploadFiles?.length > 0){
    uploadRef.value?.submit()
  }
  else{
    proxy.$modal.msgSuccess("保存成功");
    dialogVisible.value = false
  }
  getModelList()
}
async function handleFileSuccess(response, file, fileList){
  console.log(response)
  var par = {
    filename: response.originalFilename,
    isDocument: '',
    isMainLibrary: '',
    mdid: upload.updateSupport,
    relativePath: response.fileName,
    signature:''
  }
  console.log(par)
  await modelFile(par).then(res=>{
    if(res.code===200){
      proxy.$modal.msgSuccess("保存成功");
      dialogVisible.value = false
    }
  })
  getModelListTable()
};
function clearForm(){
  formJi.value = {
    name:'',
    version:'',
    enname:'',
    devlang:'',
    intro:'',
    type:''
  }
  formTi.value = {
    developer:'',
    mdContact:'',
    mdUnit:''
  }
  formZu.value = {
    developer:'',
    mdContact:'',
    mdUnit:''
  }
  active.value = 0
}
function reg(){
  isAdd.value = true
  isEdit.value = false
  dialogVisible.value = true
}
function changePage(a){ 
  
  currentPage.value = a
  getModelListTable()
}
function getModelListTable(){
  tableData.value = []
  var par = {
    pageNum: currentPage.value,
    pageSize: 10,
  }
  console.log(par)
  getModelList(par).then(res=>{
    tableData.value = res.rows
    totalComReg.value = res.total
    console.log(tableData)
  })
}
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除？').then(function () {
    return delMdid(row.mdid);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
};
const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
const next = () => {
  if(active.value==0){
    formRefJi.value.validate((valid) => {
      formRefTi.value.validate((valid1) => {
        // console.log(formTi.value)
        console.log(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 = () => {
  if(active.value>0){
    active.value--
  }
  
}


onUnmounted(() => {
  if (sortableInstance) {
    sortableInstance.destroy(); // 组件卸载时销毁实例
  }
  if (sortableInstance1) {
    sortableInstance1.destroy(); // 组件卸载时销毁实例
  }
});
</script>
<style scoped>
.drag-handle {
  cursor: move;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

/* 防止文字选中 */
:deep(.el-table__row) {
  user-select: none;
  -webkit-user-select: none;
}
</style>
<style scoped lang="scss">


.el-table .el-table__row td {
  height: 60px !important; /* 行高 */
}
.custom-tree-node {
  display: flex;       /* 启用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 8px;            /* 图标与文字间距 */
}
</style>