style:配置登记簿打印字段

renchao@pashanhoo.com
Showing 4 changed files with 71 additions and 109 deletions
src/views/system/qtjfjmb/components/djbdispositions.vue
src/views/system/qtjfjmb/qtjfjmb.js
src/views/system/qtjfjmb/qtjfjmb.vue
src/views/xxba/components/clxx/dialog/clxxDetailDialog.vue
--- a/src/views/system/qtjfjmb/components/djbdispositions.vue
View file @443bf23
+++ b/src/views/system/qtjfjmb/components/djbdispositions.vue
View file @443bf23
 <!--
 * @Description:
 * @Autor: renchao
- * @LastEditTime: 2023-07-19 16:04:58
+ * @LastEditTime: 2023-09-14 10:53:42
 -->
 <template>
  <div>
@@ -12,61 +12,48 @@
            class="check"
            :indeterminate="isIndeterminate"
            v-model="checkAll"
-            @change="handleCheckAllChange"
+            @change="handleCheckAllChange">待选合集</el-checkbox>
-            >待选合集</el-checkbox
-          >
          <div class="num">/</div>
        </div>
        <el-checkbox-group
          class="concent"
          v-model="checkedCities"
-          @change="handleCheckedCitiesChange"
+          @change="handleCheckedCitiesChange">
-        >
          <el-checkbox
            v-for="city in cities"
            :label="city.name"
-            :key="city.name"
+            :key="city.name">{{ city.despriction }}({{ city.name }})</el-checkbox>
-            >{{ city.despriction }}({{ city.name }})</el-checkbox
-          >
        </el-checkbox-group>
      </div>
      <div class="right">
-        <div class="header">
-          <el-button> 置顶 </el-button>
-          <el-button> 上移 </el-button>
-          <el-button> 下移 </el-button>
-          <el-button> 置底 </el-button>
-        </div>
        <el-table
          class="tablelist"
          :data="datalist"
          ref="listTable"
-          row-key="zd"
+          :key="key"
+          row-key="bsmMb"
          :pagination="false"
          :header-cell-style="{ 'text-align': 'center' }"
          :heightNumSetting="true"
          :minHeight="150"
          height="590"
-          style="width: 100%"
+          style="width: 100%">
-        >
          <el-table-column label="字段" prop="name" min-width="100">
          </el-table-column>
          <el-table-column
            label="字段名称"
            prop="desprictionor"
-            min-width="100"
+            min-width="100">
-          >
          </el-table-column>
          <el-table-column label="字段别名" min-width="100">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.despriction"
                placeholder="请输入内容"
-                @input="sumTime(scope.$index, scope.row.tdsyqx)"
+                @input="sumTime(scope.$index, scope.row.tdsyqx)">
-              >
+                ></el-input>
-                ></el-input
-              >
            </template>
          </el-table-column>
        </el-table>
@@ -80,18 +67,19 @@
 </template>
 <script>
-import Sortable from "sortablejs";
+  import Sortable from 'sortablejs'
-import { getFieldList, getFieldListByQlxx, save } from "@/api/SysDjbFieldDO";
+  import { getFieldList, getFieldListByQlxx, save } from "@/api/SysDjbFieldDO";
-export default {
+  export default {
    props: {
      formData: {
        type: Object,
-      default: () => {},
+        default: () => { },
      },
    },
-  data() {
+    data () {
      return {
        checkAll: false,
+        sortable: null,
        checkedCities: [],
        cities: [],
        datalist: [],
@@ -100,82 +88,53 @@ export default {
        isIndeterminate: true,
      };
    },
-  mounted() {
+    mounted () {
-    this.generateData();
+      this.generateData()
-    this.initSort();
    },
-  beforeDestroy() {
+    beforeDestroy () {
      if (this.sortable) {
        this.sortable.destroy();
      }
    },
+    watch: {
+      key: {
+        handler (newName, oldName) {
+          this.initSort()
+        }
+      }
+    },
    methods: {
-    changeIndex(array, index1, index2) {
+      changeIndex (array, index1, index2) {
        array[index1] = array.splice(index2, 1, array[index1])[0];
-      /** splice 会修改原来的数组 slice 不会 返回的是删除后的数据 所以 index2要删除的位置，删除1个数据 返回是index2的数据 然后最后一个参数是新增的数据为index的数据 */
      },
-    initSort() {
+      initSort () {
-      this.datalist=[]
-      this.datalist =this.tablelist
        const el = this.$refs.listTable.$el.querySelectorAll(
          ".el-table__body-wrapper > table > tbody"
        )[0];
-      this.sortable = Sortable.create(el, {
+        this.sortable = new Sortable(el, {
          ghostClass: "sortable-ghost",
          setData: function (dataTransfer) {
            dataTransfer.setData("Text", "");
          },
          onEnd: (evt) => {
-          console.log("evt.oldIndex", evt.oldIndex);
+            // 其他排序逻辑
-          console.log("evt.newIndex", evt.newIndex);
+            // const targetRow = this.datalist.splice(evt.oldIndex, 1)[0]
-          const targetRow = this.tablelist.splice(evt.oldIndex, 1)[0];
+            // this.datalist.splice(evt.newIndex, 0, targetRow);
-          console.log("targetRow", targetRow);
+          }
-          // this.changeIndex(this.datalist,evt.newIndex,evt.oldIndex)
+        })
-          // console.log("this.datalist", this.datalist);
-          this.datalist.splice(evt.newIndex, 0, targetRow);
-          console.log();
-          this.$set(this.datalist,targetRow);
-        },
-      });
      },
-    //      initSort () {
-    //   const el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
-    //   this.sortable =new Sortable(el, {
-    //     onEnd: (evt) => { // 监听拖动结束事件
-    //       console.log(this) // this是当前vue上下文
-    //       console.log(evt.oldIndex) // 当前行的被拖拽前的顺序
-    //       console.log(evt.newIndex)
-    //      const currRow = this.tableData.splice(evt.oldIndex, 1)[0]
-    //       this.datalist.splice(evt.newIndex, 0, currRow)
-    //     }
-    //     })
-    // },
-    //    initSort(){
-    //   let el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
-    //   //设置配置
-    //   let _this = this
-    //   Sortable.create(el, {
-    //     animation: 150,
-    //     sort: true,
-    //     // draggable: '.el-table__row', // 设置可拖拽行的类名(el-table自带的类名)
-    //     forceFallback: true,
-    //     onEnd({newIndex, oldIndex}) {
-    //       let currRow = _this.datalist.splice(oldIndex, 1)[0];
-    //       _this.datalist.splice(newIndex, 0, currRow);
-    //     }
-    //   })
-    // },
      /**
       * @description: 初始数据集
       * @author: renchao
       */
-    generateData() {
+      generateData () {
+        let that = this
        getFieldList({ qllx: this.formData.qllx }).then((res) => {
          if (res.code === 200) {
            let listss = res.result;
            listss.forEach((item, index) => {
-            this.cities.push({
+              that.cities.push({
                name: item.name,
                despriction: item.despriction,
                desprictionor: item.despriction,
@@ -186,22 +145,25 @@ export default {
              if (res.code === 200) {
                let listss = res.result;
                listss.forEach((item, index) => {
-                this.tablelist.push({
+                  that.tablelist.push({
                    name: item.name,
                    despriction: item.despriction,
                    desprictionor: item.despriction,
                  });
-                this.datalist =this.tablelist
+                  that.$nextTick(() => {
-                this.checkedCities.push(item.name);
+                    that.datalist = this.tablelist
-              });
+                    that.checkedCities.push(item.name);
+                  })
+                })
+                that.initSort()
              }
            });
          }
        });
      },
-    handleCheckAllChange(val) {
+      handleCheckAllChange (val) {
-      let checkedlist=[]
+        let checkedlist = []
-      let orlist=[]
+        let orlist = []
        checkedlist = val ? this.cities : [];
        this.isIndeterminate = false;
        console.log("this.checkedCities", this.checkedCities);
@@ -215,12 +177,13 @@ export default {
            }
          });
        });
-      console.log("orlist",orlist);
+        this.checkedCities = orlist
-      this.checkedCities=orlist
        this.tablelist = lists;
-       this.datalist =this.tablelist
+        this.datalist = this.tablelist
+        // 其他排序逻辑
+        this.initSort()
      },
-    handleCheckedCitiesChange(value) {
+      handleCheckedCitiesChange (value) {
        console.log("value", value, this.checkedCities);
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
@@ -236,10 +199,11 @@ export default {
          });
        });
        this.tablelist = lists;
-      this.datalist =this.tablelist
+        this.datalist = this.tablelist
+        // 其他排序逻辑
+        this.initSort()
      },
-    submitForm() {
+      submitForm () {
-      console.log("this.datalistdss", this.datalist);
        save(this.formData.bsmMb, this.datalist).then((res) => {
          if (res.code == 200) {
            this.$popupCacel();
@@ -256,12 +220,12 @@ export default {
        });
      },
    },
-};
+  };
 </script>
 <style scoped lang="scss">
-@import "~@/styles/mixin.scss";
+  @import "~@/styles/mixin.scss";
-@import "~@/styles/dialogBoxheader.scss";
+  @import "~@/styles/dialogBoxheader.scss";
-.fieldcheck {
+  .fieldcheck {
    width: 100%;
    height: 650px;
    display: flex;
@@ -317,10 +281,10 @@ export default {
        height: 680px;
      }
    }
-}
+  }
-.btn {
+  .btn {
    margin-top: 10px;
    width: 100%;
    text-align: center;
-}
+  }
 </style>
--- a/src/views/system/qtjfjmb/qtjfjmb.js
View file @443bf23
+++ b/src/views/system/qtjfjmb/qtjfjmb.js
View file @443bf23
 /*
 * @Description:
 * @Autor: renchao
- * @LastEditTime: 2023-04-11 13:53:12
+ * @LastEditTime: 2023-09-14 10:51:36
 */
 import filter from '@/utils/filter.js'
 let vm = null
@@ -61,7 +61,7 @@ class data extends filter {
      },
      {
        label: '操作',
-        width: '160',
+        width: '130',
        render: (h, scope) => {
          return (
            <div>
--- a/src/views/system/qtjfjmb/qtjfjmb.vue
View file @443bf23
+++ b/src/views/system/qtjfjmb/qtjfjmb.vue
View file @443bf23
 <!--
 * @Description:
 * @Autor: renchao
- * @LastEditTime: 2023-08-09 10:09:12
+ * @LastEditTime: 2023-09-14 10:02:08
 -->
 <template>
  <div class="from-clues">
@@ -89,8 +89,8 @@
      editClick (row) {
        this.$popupDialog("其他及附记模板", "system/qtjfjmb/components/editDialog", row, '60%')
      },
-      djbdisposition(row){
+      djbdisposition (row) {
-           this.$popupDialog("配置登记簿打印字段", "system/qtjfjmb/components/djbdispositions", row, '60%')
+        this.$popupDialog("配置登记簿打印字段", "system/qtjfjmb/components/djbdispositions", row, '70%')
      }
    }
  }
--- a/src/views/xxba/components/clxx/dialog/clxxDetailDialog.vue
View file @443bf23
+++ b/src/views/xxba/components/clxx/dialog/clxxDetailDialog.vue
View file @443bf23
 <!--
 * @Description:
 * @Autor: renchao
- * @LastEditTime: 2023-09-13 17:08:53
+ * @LastEditTime: 2023-09-14 10:12:23
 -->
 <template>
  <div class="clmlmx-box">
@@ -141,7 +141,6 @@
    mounted () {
      this.initSort()
      this.tableData = _.cloneDeep(this.formData.data)
-      console.log(this.formData.bsmCompany);
    },
    beforeDestroy () {
      if (this.sortable) {
@@ -185,7 +184,6 @@
       * @author: renchao
       */
      handleDelete (index, row) {
-        let that = this
        this.$confirm('此操作将永久删除该 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',