feat: 脚本排序

src/app/mirror/App.vue

@@ -2,7 +2,12 @@
   <div class="mirror-setting">
     <!-- 图片预览 -->
     <el-dialog v-model="dialogVisible">
-      <img style="width: 100%" w-full :src="dialogImageUrl" alt="Preview Image" />
+      <img
+        style="width: 100%"
+        w-full
+        :src="dialogImageUrl"
+        alt="Preview Image"
+      />
     </el-dialog>
     <!-- 分镜配置 -->
     <div class="project-title">
@@ -16,11 +21,12 @@
     </div>
     <div class="content">
       <el-table
+      :key="data.list.length"
         class="main-table"
         key="id"
         border
         v-dragable="dragOptions"
-        :data="data"
+        :data="data.list"
         header-row-class-name="t-head"
         header-cell-class-name="t-cell"
       >
@@ -61,14 +67,19 @@
               ref="upload"
               v-model:file-list="row.fileList"
               class="list-upload-style"
-              :class="{ activefileList: row.fileList && row.fileList.length == 1 }"
+              :class="{
+                activefileList: row.fileList && row.fileList.length == 1,
+              }"
               list-type="picture-card"
               :action="uploadFileUrl"
               :on-success="handleUploadSuccess"
               :limit="1"
             >
-              <div class="uploadImg" v-if="row.fileList && row.fileList.length == 0">
-                  <el-icon><Plus /></el-icon>
+              <div
+                class="uploadImg"
+                v-if="row.fileList && row.fileList.length == 0"
+              >
+                <el-icon><Plus /></el-icon>
               </div>
               <template #file="{ file }">
                 <div style="width: 100%">
@@ -110,14 +121,22 @@
         </el-table-column>
 
         <el-table-column prop="marks" label="备注">
-          <template v-slot="{ row }">
-            <el-input
-              class="gray"
-              type="textarea"
-              :autosize="{ minRows: 3 }"
-              v-model="row.marks"
-              placeholder="点击输入内容"
-            />
+          <template v-slot="{ row, $index }">
+            <div class="marksDiv">
+              <el-input
+                class="gray"
+                type="textarea"
+                :autosize="{ minRows: 3 }"
+                v-model="row.marks"
+                placeholder="点击输入内容"
+              />
+              <span
+                class="table-delete"
+                @click="handleTableRemove($index, row)"
+              >
+                <el-icon><Delete /></el-icon>
+              </span>
+            </div>
           </template>
         </el-table-column>
       </el-table>
@@ -142,7 +161,10 @@ import { ElMessage } from "element-plus";
 import { reactive, ref, onMounted } from "vue";
 import type { UploadFile } from "element-plus";
 import { uploadFile as uploadFileUrl } from "@/request";
-import { getCaseScriptInfo, CaseScriptSaveOrUpdate } from "@/app/mirror/store/script";
+import {
+  getCaseScriptInfo,
+  CaseScriptSaveOrUpdate,
+} from "@/app/mirror/store/script";
 
 const caseId = ref(null);
 const project = reactive({
@@ -153,34 +175,41 @@ const dialogVisible = ref(false);
 const disabled = ref(false);
 
 const addLine = ref(1);
-const active = ref(0);
+const active = ref(1);
 const dragOptions = [
-  {
-    selector: "thead tr", // add drag support for column
-    option: {
-      // sortablejs's option
-      animation: 150,
-      onEnd: (evt) => {
-        let oldCol: any = {};
-        Object.assign(oldCol, columns.value[evt.oldIndex]);
-        columns.value.splice(evt.oldIndex, 1); // 因为新增了数据，所以要移除原来的列的index要在原来的基础上
-        setTimeout(() => {
-          columns.value.splice(evt.newIndex, 0, oldCol); // 把原来的列数据添加到新的位置，然后再从原位置移除它，触发table的重绘
-        }, 30);
-        console.log(evt.oldIndex, evt.newIndex);
-      },
-    },
-  },
+  // {
+  //   selector: "thead tr", // add drag support for column
+  //   option: {
+  //     // sortablejs's option
+  //     animation: 150,
+  //     onEnd: (evt) => {
+  //       let oldCol: any = {};
+  //       Object.assign(oldCol, columns.value[evt.oldIndex]);
+  //       columns.value.splice(evt.oldIndex, 1); // 因为新增了数据，所以要移除原来的列的index要在原来的基础上
+  //       setTimeout(() => {
+  //         columns.value.splice(evt.newIndex, 0, oldCol); // 把原来的列数据添加到新的位置，然后再从原位置移除它，触发table的重绘
+  //       }, 30);
+  //       console.log(evt.oldIndex, evt.newIndex);
+  //     },
+  //   },
+  // },
   {
     selector: "tbody", // add drag support for row
     option: {
       // sortablejs's option
       animation: 150,
       onEnd: (evt: any) => {
-        // ElMessage.success(
-        //   `Drag the ${evt.oldIndex}th row to ${evt.newIndex}`
+        // let oldItem = sortList.value[evt.oldIndex];
+        // let sortLists = sortList.value.filter(
+        //   (_, index) => index !== evt.oldIndex
         // );
-        console.log(evt.oldIndex, evt.newIndex);
+        // sortLists.splice(evt.newIndex, 0, oldItem);
+        // sortList.value = sortLists;
+        let list = JSON.parse(JSON.stringify(data.newSortList));
+        const target = list.splice(evt.oldIndex, 1);
+        list.splice(evt.newIndex, 0, target[0]);
+        data.newSortList = list
+        console.log(evt.oldIndex, evt.newIndex,data.newSortList, data.list);
       },
     },
   },
@@ -195,60 +224,91 @@ const columns = ref([
   { prop: "marks", label: "备注" },
 ]);
 
-const data = reactive([
-  { id: 1, name: "", desc: "", fileList:[] },
-  { id: 2, name: "", desc: "", fileList:[] },
-  { id: 3, name: "", desc: "", fileList:[] },
-]);
-onMounted(()=> {
-  caseId.value = GetRequest('caseId');
+const data = reactive({
+  list: [{ id: 1, name: "", desc: "", fileList: [] }],
+  newSortList: [],
+});
+const sortList = ref([0]);
+onMounted(() => {
+  caseId.value = GetRequest("caseId");
+  getCaseScriptList();
+  console.log("caseId", caseId); //query传参
+});
+
+function getCaseScriptList() {
   getCaseScriptInfo(caseId.value).then((res) => {
-    console.log('getCaseScriptInfo', res)  //query传参
-  })
-  console.log('caseId', caseId)  //query传参
-})
+    project.title = res.name;
+    data.list = res.content
+    data.newSortList = res.content
+    const idList = data.list.map(ele => ele.id);
+    active.value =Math.max.apply(null,idList) || 1;
+    sortList.value = data.list.map((_, index) => index);
+  }).catch((err) => {
+    console.log(err);
+  });
+}
 function handleAdd() {
-  for(var i = 1; i <= addLine.value; i++) {
+  // let content = sortList.value.map((index) => data.list[index]);
+  // data.list.length = 0;
+  // Object.assign(data.list, content);
+  console.log("add", data.newSortList);
+  for (var i = 1; i <= addLine.value; i++) {
     console.log(i);
-    data.push({ id: data.length + 1, name: "", desc: "", fileList:[] });
+    data.newSortList.push({ id: active.value + 1, name: "", desc: "", fileList: [] });
   }
+  active.value ++;
+  data.list = data.newSortList
+  sortList.value = data.list.map((_, index) => index);
 }
 const handleRemove = (data) => {
-  data.fileList = []
+  data.fileList = [];
 };
-
+const handleTableRemove =(index, datas) => {
+  data.newSortList = data.newSortList.filter(ele => ele.id !== datas.id);
+  console.log("saveProject", data.newSortList);
+  data.list = data.newSortList
+  // let content = sortList.value.map((index) => data.list[index]);
+  // data.list.length = 0;
+  // content.splice(index, 1);
+  // Object.assign(data.list, content);
+  // sortList.value = content.map((_, index) => index);
+  console.log("saveProject", index, datas, data.list);
+}
 const handlePictureCardPreview = (file: UploadFile) => {
   dialogImageUrl.value = file.url!;
   dialogVisible.value = true;
 };
 
 const saveProject = () => {
+  data.list = data.newSortList
+  // let content = sortList.value.map((index) => data.list[index]);
+  console.log("saveProject", data.list, sortList.value);
   CaseScriptSaveOrUpdate({
-    caseId: caseId.value, 
+    caseId: caseId.value,
     name: project.title,
-    content: data,
+    content: data.list,
   }).then((res) => {
-    console.log('saveProject');
-  })
+    console.log("saveProject");
+  });
 };
-function handleUploadSuccess(response: any, uploadFile: UploadFile ) {
+function handleUploadSuccess(response: any, uploadFile: UploadFile) {
   uploadFile.url = response.data;
   console.log(response, uploadFile);
 }
 
 function GetRequest(value) {
-    var url = decodeURI(window.location.search); //?id="123456"&name="www";
-    var object = {};
-    if (url.indexOf("?") != -1)//url中存在问号，也就说有参数。  
-    {
-      var str = url.substr(1);  //得到?后面的字符串
-      var strs = str.split("&");  //将得到的参数分隔成数组[id="123456",name="www"];
-      for (var i = 0; i < strs.length; i++) {
-        object[strs[i].split("=")[0]] = strs[i].split("=")[1];//得到{id:'123456',name:'www'}
-      }
+  var url = decodeURI(window.location.search); //?id="123456"&name="www";
+  var object = {};
+  if (url.indexOf("?") != -1) {
+    //url中存在问号，也就说有参数。
+    var str = url.substr(1); //得到?后面的字符串
+    var strs = str.split("&"); //将得到的参数分隔成数组[id="123456",name="www"];
+    for (var i = 0; i < strs.length; i++) {
+      object[strs[i].split("=")[0]] = strs[i].split("=")[1]; //得到{id:'123456',name:'www'}
     }
-    return object[value];
   }
+  return object[value];
+}
 </script>
 
 <style lang="scss">
@@ -343,35 +403,44 @@ tbody {
   color: white;
   text-align: center;
 }
-.activefileList{
-  .el-upload-list--picture-card{
-
-
+.activefileList {
+  .el-upload-list--picture-card {
   }
-  .el-upload--picture-card{
+  .el-upload--picture-card {
     display: none;
   }
 }
 .list-upload-style {
   width: 100%;
   text-align: center;
-  .el-upload-list, .el-upload--text {
+  .el-upload-list,
+  .el-upload--text {
     width: 100%;
   }
-  .el-upload-list__item-thumbnail, .el-upload--picture-card{
+  .el-upload-list__item-thumbnail,
+  .el-upload--picture-card {
     min-height: 73px;
     height: 73px;
     width: 100%;
   }
-  .uploadImg, .el-upload-list__item {
+  .uploadImg,
+  .el-upload-list__item {
     width: 100%;
     min-height: 73px;
     height: 73px;
     line-height: 73px;
-    .el-upload-list__item-thumbnail{
+    .el-upload-list__item-thumbnail {
       width: 100%;
       object-fit: cover;
     }
   }
 }
+.marksDiv{
+  position: relative;
+  .table-delete{
+    position: absolute;
+    right: -10px;
+    top: -3px;
+  }
+}
 </style>

src/app/mirror/store/script.ts

@@ -58,8 +58,16 @@ export enum FirePaggingRoute {
   teached = 2,
 }
 
-export const getCaseScriptInfo = async (caseId) =>
-  (await axios.get(getCaseScriptInfoUrl, { params:{caseId, ingoreRes: true} }));
+export const getCaseScriptInfo = async (caseId) => {
+  let res = await axios.get(getCaseScriptInfoUrl, { params:{caseId, ingoreRes: true} });
+  console.log(res);
+  if(res && res.code === 0) {
+    return res.data;
+  }else{ 
+    // window.location.href = '/'
+    throw "用户未登录";
+  }
+}
 
 export const CaseScriptSaveOrUpdate = async (fire: Omit<Fire, "id">) =>
   axios.post(getCaseScriptSaveOrUpdateUrl, fire, {params: {ingoreRes: true}});