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: 8%;">
            <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="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 
        :max-height="tableheight">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="name" label="组件名称" width="250">

        </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">
            <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="isPublic" 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="操作" >
            <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="primary" text size="mini" style="margin-left: -5%;">查看</el-button>
                    <el-button type="primary" text size="mini" style="margin-left: -5%;">后处理</el-button>
                </div>
            </template>
        </el-table-column>
      </el-table>
      <div style="float: right;margin-top: 1%;margin-right: 1%;">
          <el-pagination
            small
            background
            layout="prev, pager, next"
            :total="50"
            class="mt-4"
          />
        </div>
        <el-dialog v-model="dialogVisible" title="组件注册" width="50%" >
          <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-step title="第四步"></el-step>
          </el-steps>
            <div v-if="active==0">
              <div v-if="active==0" 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 v-if="active==0" style="margin-left: 1%;margin-top: 1%;">
                  <el-form style="margin-left: 5%;"  :model="form" class="demo-form-inline" :rules="rules">
                      <el-row :gutter="40">
                      <el-col :span="9">
                          <el-form-item label="组件名称:" prop="name">
                          <el-input v-model="form.name" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="9">
                          <el-form-item label="版本号:" prop="version">
                              <el-input v-model="form.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"> 
                            <el-input v-model="form.enname" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="9">
                          <el-form-item label="排序:" prop="">
                              <el-input v-model="form.region" />
                          </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="form.type"
                              style="width: 100%;margin-left: 1%;"
                          >
                              <el-option
                              v-for="item in options"
                              :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="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>
                          </el-form-item>
                      </el-col>
                      </el-row>
                      <el-form-item label="组件简介:">
                          <el-input v-model="form.region" style="width: 30%;" :rows="2" type="textarea"/>
                      </el-form-item>
                  </el-form>
              </div>
              <div v-if="active==0" 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 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-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-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-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="form.mdContact" />
                          </el-form-item>
                      </el-col>
                      </el-row>
                  </el-form>
              </div>
            </div>
            <div v-if="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 style="margin-left: 5%;margin-top: 2%;"  :model="form" class="demo-form-inline" :rules="rules">
                      <el-row :gutter="40">
                      <el-col :span="12">
                          <el-form-item label="输入示例数据:" prop="name">
                            <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>
                              <el-input v-model="form.region" style="width: 75%;" placeholder="请输入示例" :rows="2" type="textarea"/>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="输入示例数据:" prop="name">
                            <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>
                              <el-input v-model="form.region" style="width: 75%;" placeholder="请输入示例" :rows="2" type="textarea"/>
                          </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-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>
                      </div>
                      <div style="color: #b1b3b8;">
                        注:请上传后缀名为.jar、·ph、.sh、.exe、.zip、.bat的文件
                      </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 style="margin-left: 5%;margin-top: 2%;"  :model="form" class="demo-form-inline" :rules="rules">
                      <el-row :gutter="40">
                      <el-col :span="12">
                          <el-form-item label="CPU核心数:" prop="mdCPU">
                              <el-input v-model="form.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="name">
                            <el-input v-model="form.region" 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="form.mdGPU" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="平台:" prop="name">
                            <el-select
                                v-model="value"
                                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-if="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">
                下一步
                </el-button>
            </span>
            </template>
        </el-dialog>
    </div>
  </div>
</template>
<script   setup>
import { getModelList,addModel,delMdid } from "@/api/register/regCom";
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import Sortable from 'sortablejs';
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';
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": ''
  },
  rules: {
    name: [{ required: true, message: "不能为空", trigger: "blur" }],
    version: [{ required: true, message: "不能为空", trigger: "blur" }],
    enname: [{ required: true, message: "不能为空", trigger: "blur" }],
    mdUnit: [{ required: true, message: "不能为空", trigger: "blur" }],
    developer: [{ required: true, message: "不能为空", trigger: "blur" }],
    mdContact: [{ required: true, message: "不能为空", trigger: "blur" }],
    mdCPU: [{ required: true, message: "不能为空", trigger: "blur" }],
  }
});

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([])
const heightAll = window.innerHeight
const valueHelpSel = '';
const tableheight = window.innerHeight*0.7
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
function addNewModel(){
  addModel(form).then(res=>{

  })
}
function reg(){
  dialogVisible.value = true
}
function getModelListTable(){
  var par = {
    pageNum: 1,
    pageSize: 10,
  }
  getModelList(par).then(res=>{
    tableData.value = res.rows
    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 = () => {
  console.log(active.value)
  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();
  }

  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) {
    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>