删除穿梭框测试页面
李靖
1 year ago
parent
82ee5db859
commit
5ae84ff69a
@ -1,186 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-input
|
|
||||||
class="transfer_input"
|
|
||||||
placeholder="请输入内容"
|
|
||||||
v-model="knowledgeQuery.name"
|
|
||||||
clearable
|
|
||||||
@change="filterKonwledgeFn"
|
|
||||||
>
|
|
||||||
</el-input>
|
|
||||||
<el-transfer
|
|
||||||
v-model="knowledgeIds"
|
|
||||||
:titles="['选择知识点', '已选择知识点']"
|
|
||||||
:button-texts="['移除', '添加']"
|
|
||||||
:data="knowledgeData"
|
|
||||||
@change="handleKnowledgeChange"
|
|
||||||
>
|
|
||||||
<div class="transfer-footer" slot="left-footer">
|
|
||||||
<el-pagination
|
|
||||||
:pager-count="3"
|
|
||||||
@size-change="transferSizeChange"
|
|
||||||
@current-change="transferCurrentChange"
|
|
||||||
:current-page="transferCurrentPage"
|
|
||||||
:page-sizes="[10, 20, 50, 100]"
|
|
||||||
:page-size="transferPageSize"
|
|
||||||
layout=" sizes, prev, pager, next"
|
|
||||||
:total="transferTotal"
|
|
||||||
>
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
<div class="transfer-footer" slot="right-footer">
|
|
||||||
<el-pagination
|
|
||||||
:pager-count="3"
|
|
||||||
@size-change="transferSizeChange"
|
|
||||||
@current-change="transferCurrentChange"
|
|
||||||
:current-page="transferCurrentPage"
|
|
||||||
:page-sizes="[10, 20, 50, 100]"
|
|
||||||
:page-size="transferPageSize"
|
|
||||||
layout=" sizes, prev, pager, next"
|
|
||||||
:total="transferTotal"
|
|
||||||
>
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</el-transfer>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
getListProduct,
|
|
||||||
getRightList,
|
|
||||||
addProduct,
|
|
||||||
updateProduct,
|
|
||||||
getProduct,
|
|
||||||
delProduct,
|
|
||||||
} from "@/api/technology/routeprodproduct";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "Routeprodproductnew",
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
knowledgeQuery: {
|
|
||||||
// 数据传参列表
|
|
||||||
cursor: 1,
|
|
||||||
limit: 10,
|
|
||||||
searchCount: true,
|
|
||||||
name: "",
|
|
||||||
},
|
|
||||||
knowledgeIds: [], // 穿梭框选中项组成的数组
|
|
||||||
knowledgeData: [], // 穿梭框要绑定的数据
|
|
||||||
preKnowledgeData: [], // 上一页的穿梭框数据源
|
|
||||||
transferCurrentPage: 1, //穿梭框分页当前页
|
|
||||||
transferPageSize: 10, //穿梭框分页当前pagesize
|
|
||||||
transferTotal: 0, //分页数据总数
|
|
||||||
leftQueryParams: {
|
|
||||||
routeId: this.routeId,
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 20
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
routeId: undefined,
|
|
||||||
optType: undefined,
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.getKnowledges();
|
|
||||||
// this.getRightListFun();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 获取目前已选中的穿梭框选像id用于回显
|
|
||||||
getKnowledges() {
|
|
||||||
const _this = this
|
|
||||||
getListProduct(this.leftQueryParams).then(response => {
|
|
||||||
// this.LPages = Math.ceil(response.total/this.LPageSize)
|
|
||||||
// this.leftList = response.rows;
|
|
||||||
// this.Ltotal = response.total;
|
|
||||||
// this.LPageNum = this.leftQueryParams.pageNum;
|
|
||||||
// this.LNextPage = this.leftQueryParams.pageNum+1;
|
|
||||||
// this.loading = false;
|
|
||||||
this.knowledges = response.rows;
|
|
||||||
this.knowledges.forEach((e) => {
|
|
||||||
_this.knowledgeIds.push(e.id);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 获取分页展示的数据
|
|
||||||
getKnowledgesFn() {
|
|
||||||
getKnowledgesByPage(this.knowledgeQuery).then((res) => {
|
|
||||||
// 获取所有的穿梭框展示数据
|
|
||||||
console.log("res章节列表", res);
|
|
||||||
this.transferTotal = res.result.total;
|
|
||||||
this.dialogKnowledgeVisible = true;
|
|
||||||
this.preKnowledgeData = [...this.knowledgeData];
|
|
||||||
// 将数据转成穿梭框要求的格式并去重
|
|
||||||
this.knowledgeData = res.result.records
|
|
||||||
.map((item, index) => {
|
|
||||||
return {
|
|
||||||
key: item.id,
|
|
||||||
label: item.name,
|
|
||||||
};
|
|
||||||
})
|
|
||||||
.filter((item, index, self) => {
|
|
||||||
return self.findIndex((el) => el.key == item.key) === index;
|
|
||||||
});
|
|
||||||
// console.log(' this.knowledgeData', this.knowledgeData)
|
|
||||||
this.getChooseDataFn();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// pageSize 改变
|
|
||||||
transferSizeChange(size) {
|
|
||||||
this.knowledgeQuery.limit = size;
|
|
||||||
this.getKnowledgesFn();
|
|
||||||
},
|
|
||||||
// currentPage 改变时
|
|
||||||
transferCurrentChange(page) {
|
|
||||||
this.knowledgeQuery.cursor = page;
|
|
||||||
this.transferCurrentPage = page;
|
|
||||||
this.getKnowledgesFn();
|
|
||||||
},
|
|
||||||
// 获取到选中的穿梭数据,将选中的数据添加到分页展示的数据中
|
|
||||||
getChooseDataFn() {
|
|
||||||
this.knowledgeData = this.knowledgeData.filter((item) => {
|
|
||||||
return !this.knowledgeIds.includes(item.key);
|
|
||||||
});
|
|
||||||
// console.log('knowledgeIds_55', this.knowledgeIds)
|
|
||||||
// knowledgeIds 存着选中的选项id
|
|
||||||
const pushArrVal = this.preKnowledgeData.filter((item, index, self) => {
|
|
||||||
return this.knowledgeIds.includes(item.key);
|
|
||||||
});
|
|
||||||
// console.log('pushArrVal', pushArrVal)
|
|
||||||
this.knowledgeData.push(...pushArrVal);
|
|
||||||
// console.log('this.knowledgeData——888', this.knowledgeData) // 获取到了已经选过得数据
|
|
||||||
// console.log(' this.preKnowledgeData', this.preKnowledgeData)
|
|
||||||
},
|
|
||||||
// 穿梭框添加操作
|
|
||||||
handleKnowledgeChange(value, direction, movedKeys) {
|
|
||||||
this.knowledges = [];
|
|
||||||
for (let i = 0; i < value.length; i++) {
|
|
||||||
this.knowledgeIds[i] = value[i];
|
|
||||||
for (let j = 0; j < this.knowledgeData.length; j++) {
|
|
||||||
if (this.knowledgeData[j].key == value[i]) {
|
|
||||||
this.knowledges.push({
|
|
||||||
id: this.knowledgeData[j].key,
|
|
||||||
name: this.knowledgeData[j].label,
|
|
||||||
category: this.knowledgeData[j].category,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 穿梭框搜索
|
|
||||||
filterKonwledgeFn(val) {
|
|
||||||
this.transferCurrentPage = 1;
|
|
||||||
this.knowledgeQuery.cursor = 1;
|
|
||||||
this.getKnowledgesFn();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.el-transfer-panel {
|
|
||||||
width: 350px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue