style:申请材料目录

 <!--
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-09-13 11:10:27
+ * @LastEditTime: 2023-09-13 13:48:47
 -->
 <template>
   <div class="clmlmx-box">
@@ -58,7 +58,7 @@
             label: "材料名称",
             render: (h, scope) => {
               return (
-                (this.formData.ableOperation && scope.row.isrequired != '1') ?
+                (this.formData.ableOperation && scope.row.sfxjcl == '1') ?
                   <el-input value={scope.row.sjmc} onInput={(val) => { scope.row.sjmc = val }}></el-input> : <span>{scope.row.sjmc}</span>
               )
             }
@@ -143,19 +143,16 @@
             width: "100",
             render: (h, scope) => {
               return (
-                <div>
-                  <el-button
-                    type="text"
-                    icon="el-icon-delete"
-                    disabled={!(scope.row.ys == 0 && scope.row.sfxjcl == '1') || !this.formData.ableOperation}
-                    onClick={() => {
-                      this.handleDelete(scope.$index, scope.row);
-                    }}
-                  >
-                    删除
-                  </el-button>
-
-                </div >
+                <el-button
+                  type="text"
+                  icon="el-icon-delete"
+                  disabled={!(scope.row.ys == 0 && scope.row.sfxjcl == '1') || !this.formData.ableOperation}
+                  onClick={() => {
+                    this.handleDelete(scope.$index, scope.row);
+                  }}
+                >
+                  删除
+                </el-button>
               )
             }
           }

 <!--
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-09-13 09:18:13
+ * @LastEditTime: 2023-09-13 13:46:03
 -->
 <template>
   <div class="clmlmx-box">
-    <lb-table :column="column" :key="key" :heightNumSetting="true" :calcHeight="500" :pagination="false" :data="tableData">
+    <lb-table :column="column" :key="key" row-key="bsmMaterial" ref="listTable" :heightNumSetting="true" :calcHeight="500" :pagination="false"
+      :data="tableData">
     </lb-table>
     <div class="text-center">
       <el-button @click="handleCancel">取消</el-button>
@@ -30,23 +31,27 @@
     data () {
       return {
         loading: false,
+        sortable: null,
         column: [
           {
-            width: '50',
-            renderHeader: (h, scope) => {
-              return <div> {
-                <i class="el-icon-plus pointer" onClick={() => { this.handleAdd() }}></i>
-              }
-              </div>
-            },
+            prop: "isrequired",
+            label: "是否必选",
+            width: "80",
             render: (h, scope) => {
-              return (
-                <div>
-                  {
-                    <i class="el-icon-minus pointer" onClick={() => { this.handleDelete(scope.$index, scope.row) }}></i>
-                  }
-                </div>
-              )
+              if (scope.row.isrequired === "1") {
+                return (
+                  <div>
+                    <span>必选</span>
+                  </div>
+                );
+              }
+              else {
+                return (
+                  <div>
+                    <span>可选</span>
+                  </div>
+                )
+              }
             }
           },
           {
@@ -85,6 +90,15 @@
             }
           },
           {
+            label: "扫描时间",
+            width: "140",
+            render: (h, scope) => {
+              return (
+                <span>{scope.row.sjsj}</span>
+              )
+            }
+          },
+          {
             label: "页数",
             width: "80",
             render: (h, scope) => {
@@ -104,30 +118,35 @@
             },
           },
           {
+            label: "是否新建材料",
+            width: "80",
+            render: (h, scope) => {
+              if (scope.row.sfxjcl && scope.row.sfxjcl == '1') {
+                return (
+                  <span>是</span>
+                );
+              } else {
+                return (
+                  <span>否</span>
+                );
+              }
+            },
+          },
+          {
             label: "操作",
             width: "100",
             render: (h, scope) => {
               return (
-                <div>
-                  <el-button
-                    type="text"
-                    disabled={scope.$index == 0}
-                    onClick={() => {
-                      this.moveUpward(scope.$index, scope.row);
-                    }}
-                  >
-                    上移
-                  </el-button>
-                  <el-button
-                    type="text"
-                    disabled={scope.$index + 1 == this.tableData.length}
-                    onClick={() => {
-                      this.moveDown(scope.$index, scope.row);
-                    }}
-                  >
-                    下移
-                  </el-button>
-                </div >
+                <el-button
+                  type="text"
+                  icon="el-icon-delete"
+                  disabled={!(scope.row.count == 0 && scope.row.sfxjcl == '1') || !this.formData.ableOperation}
+                  onClick={() => {
+                    this.handleDelete(scope.$index, scope.row);
+                  }}
+                >
+                  删除
+                </el-button>
               )
             }
           }
@@ -136,6 +155,14 @@
         tableData: []
       }
     },
+    mounted () {
+      this.initSort()
+    },
+    beforeDestroy () {
+      if (this.sortable) {
+        this.sortable.destroy();
+      }
+    },
     watch: {
       'formData.data': {
         handler: function (val, oldVal) {
@@ -160,6 +187,7 @@
       },
       handleSubmit () {
         this.loading = true
+        store.dispatch('user/reWorkFresh', false)
         updateClml(this.tableData).then(res => {
           this.loading = false
           if (res.code == 200) {
@@ -198,60 +226,6 @@
         })
       },
       /**
-       * @description: 上移
-       * @param {*} index
-       * @param {*} row
-       * @author: renchao
-       */
-      moveUpward (index, row) {
-        let obj = {
-          xh: row.xh,
-          bsmSlsq: row.bsmSlsq,
-          moveDirection: "UP",
-        };
-        // 接口待调
-        moveClml(obj).then(async (res) => {
-          if (res.code == 200) {
-            let res = await this.clmlInitList()
-            if (res == 200) {
-              this.$message({
-                message: '上移成功',
-                type: 'success'
-              })
-            }
-          } else {
-            this.$message.error(res.message);
-          }
-        })
-      },
-      /**
-       * @description: 下移
-       * @param {*} index
-       * @param {*} row
-       * @author: renchao
-       */
-      moveDown (index, row) {
-        let obj = {
-          xh: row.xh,
-          bsmSlsq: row.bsmSlsq,
-          moveDirection: "DOWN",
-        }
-        // 接口待调
-        moveClml(obj).then(async (res) => {
-          if (res.code == 200) {
-            let res = await this.clmlInitList()
-            if (res == 200) {
-              this.$message({
-                message: '下移成功',
-                type: 'success'
-              })
-            }
-          } else {
-            this.$message.error(res.message);
-          }
-        })
-      },
-      /**
        * @description: 材料目录删除
        * @param {*} index
        * @param {*} row
@@ -281,6 +255,19 @@
             message: '已取消删除'
           })
         })
+      },
+      initSort () {
+        const el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
+        this.sortable = Sortable.create(el, {
+          ghostClass: 'sortable-ghost',
+          setData: function (dataTransfer) {
+            dataTransfer.setData('Text', '')
+          },
+          onEnd: evt => {
+            const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
+            this.tableData.splice(evt.newIndex, 0, targetRow);
+          }
+        })
       }
     }
   }