穿梭框重写

back/src/views/modules/ability/assignedScene/add-update-scene.vue

@@ -116,7 +116,6 @@ import CommonQuestion from '../components/common-question.vue'
 import InfrastructureModal from './components/infrastructure-modal.vue'
 import Cookies from 'js-cookie'
 import upload from '@/views/modules/components/upload'
-
 const btnArray = ['基本信息', '场景痛点', '解决方案', '组合能力', '更多能力', '使用步骤']
 // 数据资源\组件服务
 export const getJson = (type) => {
@@ -163,7 +162,6 @@ export const modalTypeText = {
 }
 
 export const getFuseResourceList = (abilityListObj) => {
-  console.log('abilityListObjabilityListObj',abilityListObj);
   const arr = []
   let length = 0
   for (const key in abilityListObj) {
@@ -176,7 +174,7 @@ export const getFuseResourceList = (abilityListObj) => {
           resourceId: v.id,
           type: key,
           sequence: index,
-          resourceName:v.resourceName,
+          resourceName:v.resourceName|| v.name ,
           deptName:v.deptName,
         })
       })
@@ -331,9 +329,10 @@ export default {
     },
     // 更新表单
     updateDataForm (data) {
-      console.log('datadatadata',data);
+      //console.log('datadatadata',data);
       if (Object.keys(this.getListParams).includes(data.title)) {
         this.abilityListObj[data.title] = data.list
+        console.log(' this.abilityListObj[data.title]3333', this.abilityListObj[data.title]);
       } else {
         // 更多能力、使用步骤
         this.operateFuseAttrList(data.title, data)
@@ -363,6 +362,7 @@ export default {
     // 表单提交
     dataFormSubmitHandle: debounce(
       function () {
+          console.log('this.dataForm------表单提交------>111111', this.dataForm)
         this.$refs.dataForm.validate((valid) => {
           if (!valid) {
             this.$message.error('请检查表单是否填写完整')

back/src/views/modules/ability/components/combine-ability.vue

@@ -16,19 +16,20 @@
               </el-transfer>
             </div>
             <div v-else-if="type==='数据资源'"  class="dataTransfer">
-              <el-transfer v-model="selectedArray" filterable :filter-method="filterMethod" filter-placeholder="请输入名称"
+              <!-- <el-transfer v-model="selectedArray" filter-placeholder="请输入名称"
                     :titles="nameArray" :props="{
                         key: 'id',
                         label: 'name',
                     }" :data="transferData">
                 </el-transfer>
-                <!-- <el-input
+                <el-input
                   v-model="searchValue"
                   placeholder="请输入名称"
                 ></el-input>
                 <el-button @click="rest" class="restClick">重置</el-button> -->
+                 <data-resource-tranfer @updateData="updateResourceDataForm" :selected-data="selectedData" :type="type"></data-resource-tranfer>
             </div>
-            <el-pagination
+            <!-- <el-pagination
               v-if="type==='数据资源'"
               :current-page="currentPage"
               :page-size="15"
@@ -36,7 +37,7 @@
               :total="total"
               @current-change="pageCurrentChangeHandle"
             >
-            </el-pagination>
+            </el-pagination> -->
             <template slot="footer">
                 <el-button @click="showModal = false">{{ $t("cancel") }}</el-button>
                 <el-button type="primary" @click="confirmSubmitHandle()">{{
@@ -52,7 +53,7 @@
 <script>
 import InfrastructureModal from '../assignedScene/components/infrastructure-modal.vue'
 import DisplayList from '../assignedScene/components/display-list.vue'
-
+import dataResourceTranfer from './data-resource-tranfer.vue'
 const sjzyArray = [
   {
     zyname: '城阳区图书馆总分馆、社区图书室明细信息',
@@ -199,7 +200,9 @@ export default {
       total: 0,
       currentPage: 1,
       newNum: 1,
-      searchValue: ''
+      searchValue: '',
+      selectedData:[],
+      newResourceData:[]
     }
   },
   watch: {
@@ -223,10 +226,12 @@ export default {
   },
   methods: {
     async getDataInfo (dataForm) {
+       console.log('dataForm-----====',dataForm);
+       console.log('this.type',this.type);
       await this.getData()
       const arr = []
       const attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type);
-       console.log('attrValue22',attrValue);
+      this.selectedData = attrValue;
       if (attrValue.length > 0) {
         attrValue.map(val => {
           if(val.type==="数据资源"){
@@ -248,6 +253,7 @@ export default {
       }
       // 展示
       this.displayList = JSON.parse(JSON.stringify(arr));
+      this.displayList = Array.from(new Set(this.displayList))
       // 已选中
       this.selectedArray = arr.map(v => v.id)
       this.$nextTick(() => {
@@ -286,7 +292,7 @@ export default {
         this.$http[this.getDataParams.methods](this.getDataParams.url,
           this.getDataParams.postData
         ).then(res => {
-          console.log('res.data----获取列表-------->', res.data)
+          console.log('res.data----数据资源获取列表-------->', res.data)
           this.total = Number(res.data.data.rows)
           if (res.data.code !== 0) {
             return this.$message.error(res.msg)
@@ -302,37 +308,56 @@ export default {
               resourceName:v.zyname
             })
           })
-          this.allData = JSON.parse(JSON.stringify(this.transferData))
+          this.allData = JSON.parse(JSON.stringify(this.transferData));
+          //console.log('this.transferData======43434',this.transferData);
+          //console.log('res.data----retretryry-------->', this.transferData)
         }).catch(err => {
           this.$message.error('未搜索到相关数据资源')
         })
       }
     },
+    //接受数据资源数据
+    updateResourceDataForm(data){
+      let obj = {};
+      data =  data.list.reduce(function(item, next) {
+      obj[next.id] ? '' : obj[next.id] = true && item.push(next);
+       return item;
+       }, []);
+      console.log('变化后的数据222',data); 
+      this.newResourceData = data;
+    },
     filterMethod (query, item) {
       console.log('1111111111111111111111111')
       return item.name && item.name.indexOf(query) > -1
     },
     confirmSubmitHandle () {
-      console.log('tttttt',this.selectedArray)
       if(this.type === "数据资源"){
        //通过选中的数据去查找原始列表数据
-      let selectedObjectList = [];
+      // let selectedObjectList = [];
-      this.selectedArray.forEach((item)=>{
+      // this.selectedArray.forEach((item)=>{
-        let filterData = [];
+      //   let filterData = [];
-        filterData = this.allData.filter(v => v.id == item);
+      //   filterData = this.allData.filter(v => v.id == item);
-        //console.log('filterDatafilterData',filterData);
+      //   //console.log('filterDatafilterData',filterData);
-        selectedObjectList.push(filterData[0]);
+      //   selectedObjectList.push(filterData[0]);
-      });
+      // });
-       this.$emit('update', {
+      //  this.$emit('update', {
-        title: this.type,
+      //   title: this.type,
-        list: selectedObjectList
+      //   list: selectedObjectList
-      })
+      // })
+       if (this.newResourceData.length > this.maxNum) {
+        return this.$message.error('最多选择十条数据！')
+      }
+      this.$emit('update', {
+         title: this.type,
+         list: this.newResourceData
+       });
+        this.displayList = this.newResourceData;
+       this.showModal = false
       }else{
         this.$emit('update', {
         title: this.type,
         list: this.selectedArray
       })
-      }
       if (this.selectedArray.length > this.maxNum) {
         return this.$message.error('最多选择十条数据！')
       }
@@ -343,7 +368,9 @@ export default {
           this.displayList.push(v)
         }
       })
+      this.displayList = Array.from(new Set(this.displayList))
       console.log(this.selectedArray, this.displayList, 'this.displayList')
+      }
     },
     handleChange(){
       //console.log('222222',this.selectedArray);
@@ -376,9 +403,10 @@ export default {
       this.getData()
     }
   },
-  components: { InfrastructureModal, DisplayList },
+  components: { InfrastructureModal, DisplayList,dataResourceTranfer },
   mounted () {
     console.log(this.type, 'this.type')
+    
   }
 }
 </script>
@@ -493,7 +521,7 @@ export default {
     position: absolute;
     font-size: 14px;
     display: inline-block;
-    width: 80%;
+    width: 30%;
     top: 52px;
     left: 12px;
   }

back/src/views/modules/ability/components/data-resource-tranfer.vue

@@ -0,0 +1,414 @@
+<template>
+  <div class="transfer">
+    <div class="leftTransfer">
+      <div class="leftTransfer_title">
+        <el-checkbox
+          :indeterminate="left.isIndeterminate"
+          v-model="left.checkAll"
+          @change="leftHandleCheckAllChange"
+          >{{ titles[0] }}</el-checkbox
+        >
+        <span
+          >{{ left.transferDataChecked.length }}/{{
+            left.transferData.length
+          }}</span
+        >
+      </div>
+      <el-input
+        @input="transferInputLeft"
+        class="transfer_input"
+        placeholder="请输入内容"
+        prefix-icon="el-icon-search"
+        v-model="left.inputValue"
+      >
+      </el-input>
+      <el-checkbox-group
+        class="transfer_group"
+        v-model="left.transferDataChecked"
+        @change="leftHandleCheckedCitiesChange"
+      >
+        <el-checkbox
+          v-for="item in left.transferData"
+          :label="item"
+          :key="item[defaultProps.id]"
+          >{{ item[defaultProps.label] }}</el-checkbox
+        >
+      </el-checkbox-group>
+      <el-pagination
+              :current-page="currentPage"
+              :page-size="15"
+              layout="total, prev, pager, next"
+              :total="total"
+              @current-change="handleCurrentChange"
+            >
+            </el-pagination>
+    </div>
+    <div class="transferButton">
+      <el-button type="primary" @click="push">></el-button>
+      <el-button type="primary" @click="del">{{ "<" }}</el-button>
+    </div>
+    <div class="rightTransfer">
+      <div class="rightTransfer_title">
+        <el-checkbox
+          :indeterminate="right.isIndeterminate"
+          v-model="right.checkAll"
+          @change="rightHandleCheckAllChange"
+          >{{ titles[1] }}</el-checkbox
+        >
+        <span
+          >{{ right.transferDataChecked.length }}/{{
+            right.transferData.length
+          }}</span
+        >
+      </div>
+      <el-input
+        @input="transferInputRight"
+        class="transfer_input"
+        placeholder="请输入内容"
+        prefix-icon="el-icon-search"
+        v-model="right.inputValue"
+      >
+      </el-input>
+      <div style="margin: 5px 0"></div>
+      <el-checkbox-group
+        class="transfer_group"
+        v-model="right.transferDataChecked"
+        @change="rightHandleCheckedCitiesChange"
+      >
+        <el-checkbox
+          v-for="item in right.transferData"
+          :label="item"
+          :key="item[defaultProps.id]"
+          >{{ item[defaultProps.label] }}</el-checkbox
+        >
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+ 
+<script>
+//import { listUser } from "@/api/system/user";
+export default {
+  name: "transferPage",
+  props: {
+    titles: {
+      type: Array,
+      default: () => ["待选列表", "已选列表"],
+    },
+      selectedData: {
+      type: Array,
+      default: () => []
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+  },
+  data() {
+    return {
+      left: {
+        inputValue: "",
+        isIndeterminate: false, //半选按钮
+        checkAll: false, //是否点击全选
+        transferData: [], //穿梭框左侧全部数据
+        transferDataAll: [], //穿梭框左侧全部数据记录
+        transferDataChecked: [], //穿梭框左侧选中数据
+      },
+      right: {
+        inputValue: "",
+        isIndeterminate: false, //半选按钮
+        checkAll: false, //是否点击全选
+        transferData: [], //穿梭框右侧全部数据
+        transferDataAll: [], //穿梭框左侧全部数据记录
+        transferDataChecked: [], //穿梭框右侧选中数据
+      },
+      total: 0,
+       currentPage: 1,
+      queryParams: {
+        current: 1,
+        size: 10,
+      },
+    getDataParams:{ 
+    methods: "post",
+    url: "/resource/getDataResource",
+    postData: {
+        serviceName: "",
+        orderField: "fbrq",
+        orderType: "desc",
+        pageNum: 1,
+        pageSize: 15
+    }
+      },
+      defaultProps: {
+        label: "name",
+        id: "id",
+      },
+    };
+  },
+  created() {
+    this.initTransferData();
+  },
+	watch: {
+    // selectedData:{
+    //   	handler (newName, oldName) {
+		// 			console.log('接受到的已经选中的值',newName);
+    //       this.right.transferData = newName
+		// 		}
+    // },
+			right: {
+				handler (newName, oldName) {
+					//console.log('nnnnnn传递过去的值',newName);
+            this.$emit('updateData', {
+            title: "选中的数据资源",
+            list: newName.transferData
+      })
+				},
+				immediate: false,
+        deep: true
+			}
+		},
+  methods: {
+    // 初始化数据
+    initTransferData() {
+     this.$http[this.getDataParams.methods](this.getDataParams.url,
+          this.getDataParams.postData
+        ).then(response => {
+          console.log('数据资源response---->',response.data.data.data);
+          let responseDataList = [];
+            (response.data.data.data || []).map(v => {
+            responseDataList.push({
+              type: this.type,
+              id: v.guid,
+              name: v.zyname || '--',
+              deptName:v.TGBM,
+              resourceName:v.zyname
+            })
+          });
+        this.left.transferData = responseDataList;
+        this.left.transferData.map((item, index) => {
+          item.current = this.currentPage;
+        });
+        this.total =  Number(response.data.data.rows);
+        this.left.transferDataAll = this.left.transferData;
+        // 获得一个右边的数据，只有纯id
+        let checkedIdArr = this.right.transferData.map((item) => {
+          return item[this.defaultProps.id];
+        });
+        // 左侧数据删除
+        this.left.transferData = this.left.transferData.filter((item) => {
+          if (!checkedIdArr.includes(item[this.defaultProps.id])) {
+            return item;
+          }
+        });
+      });
+      let selectedDataRight = [];
+        (this.selectedData || []).map(v => {
+            selectedDataRight.push({
+              type: v.resource.type,
+              id: v.resource.resourceId,
+              name: v.resource.resourceName,
+              deptName:v.resource.deptName,
+            })
+          });
+          selectedDataRight.map(v => {
+            this.right.transferData.push(v);
+          });
+       let obj = {};
+       this.right.transferData =   this.right.transferData.reduce(function(item, next) {
+       obj[next.id] ? '' : obj[next.id] = true && item.push(next);
+        return item;
+        }, []);
+        this.right.transferDataAll = this.right.transferData;
+       //console.log('this.selectedData',this.selectedData);
+       //console.log('left',this.left);
+       //console.log('rigth',this.right);
+    },
+    // 左侧是否点击全选
+    leftHandleCheckAllChange(val) {
+      this.left.transferDataChecked = val ? this.left.transferData : [];
+      this.left.isIndeterminate = false;
+    },
+    // 左侧勾选数据
+    leftHandleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.left.checkAll = checkedCount === this.left.transferData.length;
+      this.left.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.left.transferData.length;
+    },
+    // 左侧是否点击全选
+    rightHandleCheckAllChange(val) {
+      this.right.transferDataChecked = val ? this.right.transferData : [];
+      this.right.isIndeterminate = false;
+    },
+    // 右侧勾选数据
+    rightHandleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.right.checkAll = checkedCount === this.right.transferData.length;
+      this.right.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.right.transferData.length;
+    },
+    // 穿梭框选中数据
+    push() {
+      // 数据移到右侧
+      this.right.transferData = [
+        ...this.right.transferData,
+        ...this.left.transferDataChecked,
+      ].sort((a, b) => {
+        return a[this.defaultProps.id] - b[this.defaultProps.id];
+      });
+      this.right.transferDataAll = this.right.transferData;
+      // 获得一个右边的数据，只有纯id
+      let checkedIdArr = this.right.transferData.map((item) => {
+        return item[this.defaultProps.id];
+      });
+      // 左侧数据删除
+      this.left.transferData = this.left.transferData.filter((item) => {
+        if (!checkedIdArr.includes(item[this.defaultProps.id])) {
+          return item;
+        }
+      });
+      this.left.transferDataAll = this.left.transferData;
+      // 每次推送完之后，重置选中框
+      this.left.transferDataChecked = [];
+      this.left.isIndeterminate = false;
+      this.left.checkAll = false;
+    },
+    // 穿梭框删除数据 回显的时候根据current回显到当前
+    del() {
+      //过滤当前页选中的数据
+      let arr = this.right.transferDataChecked.filter((item) => {
+        if (this.queryParams.current == item.current) {
+          return item;
+        }
+      });
+      // 数据移到左侧
+      this.left.transferData = [...this.left.transferData, ...arr].sort(
+        (a, b) => {
+          return a[this.defaultProps.id] - b[this.defaultProps.id];
+        }
+      );
+      this.left.transferDataAll = this.left.transferData;
+      // 获得一个右边的数据，只有纯id
+      let checkedIdArr = this.right.transferDataChecked.map((item) => {
+        return item[this.defaultProps.id];
+      });
+      // 删除选中的数据
+      this.right.transferData = this.right.transferData.filter((item) => {
+        if (!checkedIdArr.includes(item[this.defaultProps.id])) {
+          return item;
+        }
+      });
+      this.right.transferDataAll = this.right.transferData;
+      // 每次推送完之后，重置选中框
+      this.right.transferDataChecked = [];
+      this.right.isIndeterminate = false;
+      this.right.checkAll = false;
+    },
+    handleCurrentChange(val) {
+      //console.log('valval',val);
+      this.getDataParams.postData.pageNum = val;
+      this.initTransferData();
+    },
+    transferInputLeft() {
+      if (this.left.inputValue) {
+        this.left.transferData = this.left.transferData.filter(
+          (p) => p[this.defaultProps.label].indexOf(this.left.inputValue) !== -1
+        );
+      } else {
+        this.left.transferData = this.left.transferDataAll;
+      }
+    },
+    transferInputRight() {
+      if (this.right.inputValue) {
+        this.right.transferData = this.right.transferData.filter(
+          (p) =>
+            p[this.defaultProps.label].indexOf(this.right.inputValue) !== -1
+        );
+      } else {
+        this.right.transferData = this.right.transferDataAll;
+      }
+    },
+  },
+};
+</script>
+ 
+<style lang="scss" scoped>
+.transfer {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+  .transferButton {
+    .el-button {
+      display: block;
+      margin: 10px 0;
+    }
+  }
+  .el-checkbox {
+    line-height: 30px;
+  }
+  .transfer_input {
+    margin: 10px 15px 0 15px;
+    width: 85%;
+    .el-input--medium .el-input__inner {
+      height: 36px;
+      line-height: 36px;
+      border-radius: 16px;
+    }
+  }
+  .leftTransfer,
+  .rightTransfer {
+    height: 510px;
+    border: 1px solid #e6ebf5;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #ffffff;
+    display: inline-block;
+    vertical-align: middle;
+    width: 360px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    position: relative;
+    margin: 0 10px;
+ 
+    .el-checkbox {
+      display: block;
+    }
+    .el-input {
+    position: absolute;
+    font-size: 14px;
+    display: inline-block;
+    width: 70%;
+    top: 40px;
+    }
+    .pagination {
+      position: absolute;
+      bottom: -8px;
+      right: 0;
+    }
+    .leftTransfer_title,
+    .rightTransfer_title {
+      display: flex;
+      justify-content: space-between;
+      height: 40px;
+      line-height: 40px;
+      background: #f5f7fa;
+      margin: 0;
+      padding-left: 15px;
+      border-bottom: 1px solid #e6ebf5;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      color: #000000;
+      padding-right: 15px;
+      align-items: center;
+    }
+  }
+}
+.transfer_group {
+  padding-left: 15px;
+  margin-top: 50px;
+    height: 390px;
+    overflow-y: auto;
+}
+</style>