|
|
@@ -7,7 +7,7 @@
|
|
|
<div v-for="(item, index) in areaList" :key="index">
|
|
|
<input
|
|
|
type="checkbox"
|
|
|
- :value="item.sign"
|
|
|
+ :value="item.area"
|
|
|
v-model="checkedBoxList"
|
|
|
/><span>{{ item.area }}</span>
|
|
|
</div>
|
|
|
@@ -20,11 +20,12 @@
|
|
|
list="drls"
|
|
|
class="inputStyle focusStyle"
|
|
|
v-model="addByCustomize"
|
|
|
+ placeholder="DLR Code / 经销商"
|
|
|
/>
|
|
|
- <datalist id="drls" value="12">
|
|
|
- <option value="BMW" />
|
|
|
- <option value="Ford" />
|
|
|
- <option value="Volvo" />
|
|
|
+ <datalist id="drls">
|
|
|
+ <option v-for="(item, index) in dlrList" :key="index" :value="item">
|
|
|
+ {{ item }}
|
|
|
+ </option>
|
|
|
</datalist>
|
|
|
<button @click.prevent="addBySelf">添加</button>
|
|
|
</div>
|
|
|
@@ -34,8 +35,9 @@
|
|
|
<div class="table">
|
|
|
<Table
|
|
|
:tableData="tableData"
|
|
|
+ :currentPage="currentPage"
|
|
|
+ :pageSize="pageSize"
|
|
|
@change_icon="changeIcon"
|
|
|
- :imgFlag="imgFlag"
|
|
|
>
|
|
|
</Table>
|
|
|
</div>
|
|
|
@@ -92,7 +94,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- sum: 120,
|
|
|
+ sum: 0,
|
|
|
pageSize: 10,
|
|
|
currentPage: 1,
|
|
|
areaList: [
|
|
|
@@ -123,37 +125,47 @@ export default {
|
|
|
},
|
|
|
], // 按区域添加
|
|
|
checkedBoxList: [],
|
|
|
- addByCustomize: [],
|
|
|
+ addByCustomize: "",
|
|
|
tableData: [],
|
|
|
- imgFlag: new Array(this.pageSize).fill(true), // 筛选栏用添加图片还是删除图片
|
|
|
dlrList: [],
|
|
|
AllDlr: [],
|
|
|
+ idList: [],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
submit: function () {
|
|
|
- this.$emit("submit", this.checkedBoxList, this.addByCustomize);
|
|
|
+ this.dlrIdList();
|
|
|
+ this.$emit("submit", this.idList);
|
|
|
},
|
|
|
hideModal: function () {
|
|
|
this.$emit("hide_modal");
|
|
|
},
|
|
|
// 点击按区域添加button
|
|
|
addByArea: function () {
|
|
|
- console.log(this.checkedBoxList);
|
|
|
+ let req = {
|
|
|
+ localArea: this.checkedBoxList,
|
|
|
+ };
|
|
|
+ this.getDlrData(req);
|
|
|
},
|
|
|
// 自定义添加
|
|
|
addBySelf: function () {
|
|
|
- console.log(this.addByCustomize);
|
|
|
+ let req = {
|
|
|
+ queryParams: this.addByCustomize,
|
|
|
+ };
|
|
|
+ this.getDlrData(req);
|
|
|
},
|
|
|
// 筛选
|
|
|
changeIcon: function (i) {
|
|
|
- this.imgFlag.splice(i, 1, !this.imgFlag[i]);
|
|
|
- console.log(i);
|
|
|
+ let index = (this.currentPage - 1) * this.pageSize + i;
|
|
|
+ this.AllDlr[index].flag = !this.AllDlr[index].flag;
|
|
|
},
|
|
|
// 获取某一页面的数据,展示在表格
|
|
|
changePage: function (page) {
|
|
|
this.currentPage = page;
|
|
|
- console.log(page);
|
|
|
+ this.tableData = this.AllDlr.slice(
|
|
|
+ (this.currentPage - 1) * this.pageSize,
|
|
|
+ this.currentPage * this.pageSize
|
|
|
+ );
|
|
|
},
|
|
|
// 点击上一页,下一页,首页,尾页
|
|
|
jumpPage: function (item) {
|
|
|
@@ -171,43 +183,24 @@ export default {
|
|
|
this.currentPage = this.totalPage;
|
|
|
break;
|
|
|
}
|
|
|
- console.log(this.currentPage);
|
|
|
+ this.tableData = this.AllDlr.slice(
|
|
|
+ (this.currentPage - 1) * this.pageSize,
|
|
|
+ this.currentPage * this.pageSize
|
|
|
+ );
|
|
|
},
|
|
|
mousewheel: function (e) {
|
|
|
e.preventDefault();
|
|
|
},
|
|
|
- // 获取所有经销商信息接口
|
|
|
- getAllDlr: function (data = {}) {
|
|
|
- this.$http({
|
|
|
- method: "post",
|
|
|
- url: "/sys/agent/selectAgentInfoList",
|
|
|
- data: data,
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- if (res.data && res.data.code === 200) {
|
|
|
- this.dlrList = [];
|
|
|
- this.AllDlr = res.data.data;
|
|
|
- let resData = JSON.parse(JSON.stringify(res.data.data));
|
|
|
- resData.forEach((item) => {
|
|
|
- // 获取自定义下拉框的值
|
|
|
- if (item.dlrCode || item.dlrName) {
|
|
|
- this.dlrList.push({
|
|
|
- dlrCode: item.dlrCode,
|
|
|
- });
|
|
|
- this.dlrList.push({
|
|
|
- dlrName: item.dlrName,
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- console.log(res);
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.log(err);
|
|
|
- });
|
|
|
+ // 选中经销商的id 组成列表
|
|
|
+ dlrIdList: function () {
|
|
|
+ this.idList = [];
|
|
|
+ this.AllDlr.forEach((element) => {
|
|
|
+ if(element.flag) {
|
|
|
+ this.idList.push(element.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- // 分页获取所有进销商信息接口
|
|
|
+ // 获取进销商信息 接口
|
|
|
getDlrData: function (data = {}) {
|
|
|
this.$http({
|
|
|
method: "post",
|
|
|
@@ -215,9 +208,29 @@ export default {
|
|
|
data: data,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
+ this.tableData = [];
|
|
|
+ this.AllDlr = [];
|
|
|
+ this.dlrList = [];
|
|
|
if (res.data && res.data.code === 200) {
|
|
|
- this.tableData = res.data.data;
|
|
|
+ // 整合数据, 主要目的是加一个 flag,在用户点击筛选的时候,好判断
|
|
|
+ res.data.data.forEach((item) => {
|
|
|
+ this.AllDlr.push({
|
|
|
+ id: item.id,
|
|
|
+ dlrCode: item.dlrCode,
|
|
|
+ dlrName: item.dlrName,
|
|
|
+ localArea: item.localArea,
|
|
|
+ flag: true,
|
|
|
+ });
|
|
|
+ });
|
|
|
this.sum = res.data.count;
|
|
|
+ this.tableData = this.AllDlr.slice(0, this.pageSize);
|
|
|
+ // 获取自定义添加datalist下拉框的值
|
|
|
+ if (this.dlrList.length === 0) {
|
|
|
+ this.AllDlr.forEach((item) => {
|
|
|
+ this.dlrList.push(item.dlrName);
|
|
|
+ this.dlrList.push(item.dlrCode);
|
|
|
+ });
|
|
|
+ }
|
|
|
} else {
|
|
|
console.log(res);
|
|
|
}
|
|
|
@@ -229,7 +242,7 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
this.getDlrData();
|
|
|
- }
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -248,7 +261,6 @@ export default {
|
|
|
width: 800px;
|
|
|
height: 650px;
|
|
|
background-color: #fff;
|
|
|
- transform: translateY(-50px);
|
|
|
padding: 20px 30px;
|
|
|
.addByArea {
|
|
|
display: flex;
|