删除穿梭框测试页面
李靖
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