穿梭框重写

This commit is contained in:
unknown 2022-10-17 13:38:46 +08:00
parent 4d65cc11e9
commit e26937bc37
3 changed files with 470 additions and 28 deletions

View File

@ -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('请检查表单是否填写完整')

View File

@ -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 = [];
this.selectedArray.forEach((item)=>{
let filterData = [];
filterData = this.allData.filter(v => v.id == item);
//console.log('filterDatafilterData',filterData);
selectedObjectList.push(filterData[0]);
});
// let selectedObjectList = [];
// this.selectedArray.forEach((item)=>{
// let filterData = [];
// filterData = this.allData.filter(v => v.id == item);
// //console.log('filterDatafilterData',filterData);
// selectedObjectList.push(filterData[0]);
// });
// this.$emit('update', {
// title: this.type,
// list: selectedObjectList
// })
if (this.newResourceData.length > this.maxNum) {
return this.$message.error('最多选择十条数据!')
}
this.$emit('update', {
title: this.type,
list: selectedObjectList
})
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;
}

View File

@ -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>