--no commit message

xiaomiao
Showing 1 changed file with 80 additions and 70 deletions
src/views/system/qtjfjmb/components/djbdispositions.vue
--- a/src/views/system/qtjfjmb/components/djbdispositions.vue
View file @4f0d1e2
+++ b/src/views/system/qtjfjmb/components/djbdispositions.vue
View file @4f0d1e2
@@ -8,51 +8,64 @@
    <div class="fieldcheck">
      <div class="left">
        <div class="header">
+          <div class="headerconcent">
            <el-checkbox
              class="check"
              :indeterminate="isIndeterminate"
              v-model="checkAll"
-            @change="handleCheckAllChange">待选合集</el-checkbox>
+              @change="handleCheckAllChange"
-          <div class="num">/</div>
+              >待选合集</el-checkbox
+            >
+            <div class="num">
+              总数{{ cities.length }} 已选{{ datalist.length }}
+            </div>
+          </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">{{ city.despriction }}({{ city.name }})</el-checkbox>
+            :key="city.name"
+            >{{ city.despriction }}({{ city.name }})</el-checkbox
+          >
        </el-checkbox-group>
      </div>
      <div class="right">
        <el-table
          class="tablelist"
          :data="datalist"
+          border
          ref="listTable"
          :key="key"
          row-key="name"
          :pagination="false"
-          :header-cell-style="{ 'text-align': 'center' }"
          :heightNumSetting="true"
          :minHeight="150"
-          height="590"
+          height="650"
-          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>
@@ -66,16 +79,16 @@
 </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,
@@ -87,48 +100,51 @@
      isIndeterminate: true,
    };
  },
-    mounted () {
+  mounted() {
-      this.generateData()
+    this.generateData();
  },
-    beforeDestroy () {
+  beforeDestroy() {
    if (this.sortable) {
      this.sortable.destroy();
    }
  },
  watch: {
    key: {
-        handler (newName, oldName) {
+      handler(newName, oldName) {
-          this.initSort()
+        this.initSort();
-        }
+      },
-      }
+    },
  },
  methods: {
-      changeIndex (array, index1, index2) {
+    changeIndex(array, index1, index2) {
      array[index1] = array.splice(index2, 1, array[index1])[0];
    },
-      initSort () {
+    initSort() {
-           const el =  this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
+      const el = this.$refs.listTable.$el.querySelectorAll(
+        ".el-table__body-wrapper > table > tbody"
+      )[0];
      // const sortable = new Sortable(el, options);
      // 根据具体需求配置options配置项
      const sortable = new Sortable(el, {
-	        onEnd: (evt) => { // 监听拖动结束事件
+        onEnd: (evt) => {
-	          console.log(this) // this是当前vue上下文
+          // 监听拖动结束事件
-	          console.log(evt.oldIndex) // 当前行的被拖拽前的顺序
+          console.log(this); // this是当前vue上下文
-	          console.log(evt.newIndex) // 当前行的被拖拽后的顺序
+          console.log(evt.oldIndex); // 当前行的被拖拽前的顺序
+          console.log(evt.newIndex); // 当前行的被拖拽后的顺序
          // 这里就可以写我们需要传给后台的逻辑代码
          // 我们有了 evt.oldIndex 和 evt.newIndex 这两个参数做索引，我们可以根据绑定在表格上面的 data 这个 Array 找到两个相应的记录。就可以针对数据进行操作啦。
          // 下面将拖拽后的顺序进行修改
-	          const currRow = this.datalist.splice(evt.oldIndex, 1)[0]
+          const currRow = this.datalist.splice(evt.oldIndex, 1)[0];
-	          this.datalist.splice(evt.newIndex, 0, currRow)
+          this.datalist.splice(evt.newIndex, 0, currRow);
-          }
+        },
-        })
+      });
    },
    /**
     * @description: 初始数据集
     * @author: renchao
     */
-      generateData () {
+    generateData() {
-        let that = this
+      let that = this;
      getFieldList({ qllx: this.formData.qllx }).then((res) => {
        if (res.code === 200) {
          let listss = res.result;
@@ -150,38 +166,37 @@
                  desprictionor: item.despriction,
                });
                that.$nextTick(() => {
-                    that.datalist = this.tablelist
+                  that.datalist = this.tablelist;
                  that.checkedCities.push(item.name);
-                  })
+                });
-                })
+              });
-                that.initSort()
+              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);
      let lists = [];
      this.cities.forEach((item, index) => {
        checkedlist.forEach((el) => {
-            orlist.push(el.name)
+          orlist.push(el.name);
          if (item.name == el.name) {
            lists.push(this.cities[index]);
          }
        });
      });
-        this.checkedCities = orlist
+      this.checkedCities = orlist;
      this.datalist = lists;
      // 其他排序逻辑
-        this.initSort()
+      this.initSort();
    },
-      handleCheckedCitiesChange (value) {
+    handleCheckedCitiesChange(value) {
      console.log("value", value, this.checkedCities);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
@@ -191,16 +206,15 @@
      this.cities.forEach((item, index) => {
        this.checkedCities.forEach((el) => {
          if (item.name == el) {
-              console.log("1");
            lists.push(this.cities[index]);
          }
        });
      });
      this.datalist = lists;
      // 其他排序逻辑
-        this.initSort()
+      this.initSort();
    },
-      submitForm () {
+    submitForm() {
      save(this.formData.bsmMb, this.datalist).then((res) => {
        if (res.code == 200) {
          this.$popupCacel();
@@ -217,19 +231,19 @@
      });
    },
  },
-  };
+};
 </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;
  justify-content: space-between;
  .left,
  .right {
-      width: 47%;
+    width: 49%;
    height: 650px;
    border: 1px solid rgb(230, 230, 230);
  }
@@ -237,16 +251,15 @@
    .header {
      width: 100%;
      height: 50px;
-        line-height: 50px;
      background-color: rgba(243, 242, 242, 0.897);
-        display: flex;
+      .headerconcent {
-        justify-content: space-around;
+        width: 90%;
-        align-items:center .check {
+        height: 50px;
-          height: 20px;
        margin: auto;
-        }
+        line-height: 50px;
-        .num {
+        display: flex;
-          height: 20px;
+        justify-content: space-between;
+        align-items: center;
      }
    }
    .concent {
@@ -273,15 +286,12 @@
      line-height: 50px;
      background-color: rgba(243, 242, 242, 0.897);
    }
-      .tablelist {
-        margin-top: 10px;
-        height: 680px;
-      }
-    }
  }
-  .btn {
+}
+.btn {
  margin-top: 10px;
  width: 100%;
  text-align: center;
-  }
+}
 </style>