--no commit message

+/*
+ * @Description: 字典接口
+ * @Autor: renchao
+ * @LastEditTime: 2023-05-16 16:06:51
+ */
+import request from '@/utils/request'
+let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl'))
+
+/**
+ * @description: 获取登记簿全部字段
+ * @author: renchao
+ */
+ export function getFieldList (params) {
+  return request({
+    url: SERVER.SERVERAPI + '/rest/sys/SysDjbFieldDO/getFieldList',
+    method: 'get',
+    params
+  })
+}
+/**
+ * @description: 获取登记簿打印字段
+ * @author: renchao
+ */
+ export function getFieldListByQlxx (params) {
+  return request({
+    url: SERVER.SERVERAPI + '/rest/sys/SysDjbFieldDO/getFieldListByQlxx',
+    method: 'get',
+    params
+  })
+}
+/**
+ * @description: 保存登记簿打印字段
+ * @param {*} data
+ * @author: renchao
+ */
+ export function save (bsmMb,data) {
+  return request({
+    url: SERVER.SERVERAPI + `/rest/sys/SysDjbFieldDO/save/${bsmMb}`,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * @description: 获取登记簿打印字段
+ * @author: renchao
+ */
+//  export function getQllxList () {
+//   return request({
+//     url: SERVER.SERVERAPI + '/rest/sys/SysDjbFieldDO/getQllxList',
+//     method: 'get'
+//   })
+// }

@@ -4,115 +4,379 @@
  * @LastEditTime: 2023-07-19 16:04:58
 -->
 <template>
-    <div style="text-align: center"  class="djbdisposition">
+  <div style="text-align: center" class="transfer">
     <el-transfer
-      style="text-align: left; display: inline-block"
-      v-model="value4"
       filterable
+      :filter-method="filterMethod"
+      filter-placeholder="请输入关键词搜索"
+      v-model="value"
+      target-order="unshift"
       :left-default-checked="[]"
       :right-default-checked="[]"
-      :titles="['全选', '全选']"
+      :titles="['待选合集', '已选合集']"
       :button-texts="['转到左边', '转到右边']"
-      :format="{
-        noChecked: '${total}',
-        hasChecked: '${checked}/${total}'
-      }"
-      @change="handleChange"
-      :data="data">
-      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
+      @right-check-change="choose"
+      :data="datalist"
+      v-loading="loading"
+    >
+      <div slot-scope="{ option }">
+        <div
+          class="default-tranfer-item"
+          @mouseenter="indexKey = option.key"
+          @mouseleave="indexKey = null"
+        >
+          <span>{{ option.despriction }}</span>
+          <div
+            v-show="value.includes(option.key) && indexKey === option.key"
+            class="button-group"
+          >
+            <!--  阻止事件冒泡  -->
+            <!-- 自定义数据项，将上、下、底部、顶部的排序功能放在数据项里面 -->
+            <em
+              class="el-icon-top"
+              @click.stop.prevent="publicMobileMethod('handleUp', option.key)"
+            ></em>
+            <em
+              class="iconfont icon-huidaodingbu"
+              @click.stop.prevent="publicMobileMethod('handleTop', option.key)"
+            ></em>
+            <em
+              class="el-icon-bottom"
+              @click.stop.prevent="publicMobileMethod('handleDown', option.key)"
+            ></em>
+            <em
+              class="el-icon-download"
+              @click.stop.prevent="
+                publicMobileMethod('handleBottom', option.key)
+              "
+            ></em>
+          </div>
+        </div>
+      </div>
     </el-transfer>
     <div class="btn">
       <el-button @click="$popupCacel">取消</el-button>
       <el-button type="primary" @click="submitForm" plain>确定</el-button>
     </div>
+    <!-- <footer class="footer">
+        <div>
+          <el-button class="cancel" size="mini" @click="$popupCacel">取消</el-button>
+          <el-button class="determine" size="mini" @click="submitForm">确定</el-button>
+        </div>
+      </footer> -->
   </div>
 </template>
 
 <script>
-  import { updateSysSqywmbsz, getSysSqywmbszDetailById } from '@/api/sysSqywmbsz'
-  export default {
+import { getFieldList, getFieldListByQlxx, save } from "@/api/SysDjbFieldDO";
+export default {
   props: {
     formData: {
       type: Object,
-        default: () => { }
-      }
+      default: () => {},
     },
-    mounted () {
-      console.log("this.formData",this.formData);
-      // if (this.formData.bsmMb) {
-      //   this.$startLoading()
-      //   getSysSqywmbszDetailById(this.formData.bsmMb).then(res => {
-      //     this.$endLoading()
-      //     let { result } = res
-      //     this.ruleForm = result ? result : {}
-      //   })
-      // }
   },
   data() {
-      const generateData = _ => {
-        const data = [];
-        for (let i = 1; i <= 43; i++) {
-          data.push({
-            key: i,
-            label: `备选项 ${ i }`,
-            disabled: i % 4 === 0
-          });
-        }
-        return data;
-      };
     return {
-        data: generateData(),
-        value4: [],
+      loading: true,
+      datalist:[],
+      list: [], // 全部数据
+      value: [], // 选中数据
+      item: [], // 右侧勾选数据
+      chuanlist: [],
+      indexKey: null, // 高亮显示
+      filterMethod(query, item) {
+        return item.despriction.indexOf(query) > -1;
+      },
     };
   },
+  mounted() {
+    this.generateData();
+  },
 
   methods: {
-      handleChange(value, direction, movedKeys) {
-        console.log("shijian ",this.data.value, direction, movedKeys);
+    /**
+     * 初始数据集
+     * @returns {*[]}
+     */
+    generateData() {
+      const data = [];
+      this.value = [];
+      getFieldList({ qllx: this.formData.qllx }).then((res) => {
+        if (res.code === 200) {
+          let listss = res.result;
+          listss.forEach((item, index) => {
+            this.list.push({
+              key: index,
+              name: item.name,
+              despriction: item.despriction,
+            });
+          });
+          getFieldListByQlxx({ qllx: this.formData.qllx }).then((res) => {
+            let listss = res.result;
+            if (res.code === 200) {
+              this.list.forEach((el, idx) => {
+                listss.forEach((item) => {
+                  if (el.name == item.name) {
+                    this.value.push(idx);
+                  }
+                });
+              });
+               this.datalist=this.list
+              //   this.list.forEach((item,index) => {
+              //   this.value.push({
+              //   key: index,
+              //   name:item.name,
+              //   despriction: item.despriction,
+              // });
+              // });
+            }
+          });
+        }
+      });
     },
+    /**
+     * 确定选择
+     */
+    submitForm() {
+      this.value.forEach((item) => {
+        this.chuanlist.push(this.list[item]);
+      });
 
-
+      save(this.formData.bsmMb, this.chuanlist).then((res) => {
+        if (res.code == 200) {
+          this.$popupCacel();
+          this.$message({
+            message: "保存成功",
+            type: "success",
+          });
+        } else {
+          this.$message({
+            message: "保存失败",
+            type: "error",
+          });
+        }
+      });
+    },
     /**
-       * @description: submitForm
-       * @author: renchao
+     * 监听右侧选中
      */
-      submitForm () {
-        let that = this
-        updateSysSqywmbsz(this.ruleForm).then(res => {
-          if (res.code === 200) {
-            this.$popupCacel()
-            that.$message({
-              message: '修改成功',
-              type: 'success'
-            })
+    choose(value) {
+      this.item = value;
+    },
+    /**
+     * 右侧数据点击排序
+     */
+    publicMobileMethod(direction, key) {
+      const self = this;
+      let index;
+      // 判断是否超出一条
+      const item = self.item;
+      if (item.length === 1 || item.length === 0) {
+        self.value.forEach((val, indexs) => {
+          // 获取需移动数据的下标
+          if (val === key) {
+            index = indexs;
           }
-        })
+        });
+        if (
+          index === 0 &&
+          direction !== "handleBottom" &&
+          direction !== "handleDown"
+        ) {
+          return self.$message("没有上移的空间了");
         }
+        if (
+          index === self.value.length - 1 &&
+          direction !== "handleUp" &&
+          direction !== "handleTop"
+        ) {
+          return self.$message("没有下移的空间了");
         }
+        // 改变的数组
+        const changeItem = self.value[index];
+        // 根据下标在数组中删除该数据
+        self.value.splice(index, 1);
+        // 判断加入数组位置
+        if (direction) {
+          // 置顶
+          direction === "handleTop" && self.value.unshift(changeItem);
+          // 置底
+          direction === "handleBottom" && self.value.push(changeItem);
+          // 上移
+          direction === "handleUp" &&
+            self.value.splice(index - 1, 0, changeItem);
+          // 下移
+          direction === "handleDown" &&
+            self.value.splice(index + 1, 0, changeItem);
         }
+      } else {
+        self.$message.error("只能选择一条数据进行上下移动");
+      }
+    },
+  },
+};
 </script>
 <style scoped lang="scss">
-  @import "~@/styles/mixin.scss";
-  @import "~@/styles/dialogBoxheader.scss";
-.djbdisposition{
+@import "~@/styles/mixin.scss";
+@import "~@/styles/dialogBoxheader.scss";
+
+.determine.el-button--mini {
+  background-color: #2a76cd;
+  color: #ffffff;
+}
+
+.el-transfer__button.cancel,
+.el-button--mini.cancel {
+  &:focus,
+  &:hover {
+    background: #ffffff;
+    border-color: #2a76cd;
+    color: #2a76cd;
+  }
+}
+
+.el-transfer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .el-transfer-panel__item {
+    margin-right: 0;
+  }
+
+  .default-tranfer-item {
     width: 100%;
-  height: 700px;
-  .btn{
-    margin-top: 20px;
-    // background-color: salmon;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .button-group {
+      em {
+        margin-right: 8px;
+      }
+    }
+  }
+  /deep/.el-checkbox-group {
+    .el-checkbox {
+      display: flex;
+      position: relative;
+      .el-checkbox__input {
+        position: absolute;
+        left: 10px;
+      }
+    }
+    .el-checkbox:last-of-type {
+      margin-right: 30px;
+    }
+  }
+
+  .el-input.el-input--small {
+    .el-input__inner {
+      border-radius: 4px;
+    }
+  }
+
+  .el-transfer__buttons {
+    padding: 0;
+    margin: 0 17px;
 
+    .el-transfer__button {
+      display: block;
+      margin: 0 0 5px 0;
+      padding: 4px 8px;
+    }
+
+    .el-button--primary.el-transfer__button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #2a76cd;
+      border-color: #2a76cd;
+    }
+
+    .el-button--primary.is-disabled {
+      background-color: #a0cfff;
+      border-color: #a0cfff;
+    }
+  }
+
+  .el-checkbox__input.is-indeterminate {
+    .el-checkbox__inner {
+      background: #2a76cd;
+      border-color: #2a76cd;
+    }
+  }
+
+  .el-transfer-panel {
+    width: 49%;
+    border-radius: 0;
+  }
+
+  .el-transfer-panel__body {
+    .el-checkbox__label {
+      &:hover {
+        color: #2a76cd;
+      }
     }
-  /deep/.el-transfer{
-.el-transfer-panel{
+  }
+
+  .el-transfer-panel__header {
+    .el-checkbox {
+      .el-checkbox__label {
+        font-size: 14px;
+
+        span {
+          left: 100px;
+        }
+      }
+    }
+  }
+
+  .el-transfer-panel__footer {
+    top: 0;
+    left: 61%;
+    background-color: transparent;
+    display: flex;
+    width: 30%;
+    justify-content: right;
+    border-color: transparent;
+
+    .el-button--text {
+      color: #b5b5b5;
+      margin-left: 5px;
+
+      .icon-huidaodingbu {
+        font-size: 16px;
+      }
+
+      em {
+        font-size: 14px;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .el-transfer-panel:first-child {
+    .el-transfer-panel__header {
+      .el-checkbox {
+        .el-checkbox__label {
+          span {
+            left: 84px;
+          }
+        }
+      }
+    }
+  }
+}
+
+/deep/.el-transfer {
+  .el-transfer-panel {
     width: 400px;
-  height: 640px;
-  .el-transfer-panel__body .is-with-footer{
     height: 700px;
+    .el-transfer-panel__list.is-filterable {
+      height: 606px;
     }
-  .el-transfer-panel__list.is-filterable{
-    height: 570px;
   }
 }
-}
- }
 </style>