You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
196 lines
6.6 KiB
196 lines
6.6 KiB
<template>
|
|
<div>
|
|
<el-row v-loading="elRowLoading">
|
|
<el-col :span="6" style=" overflow-x:auto; height:400px;">
|
|
<span style="font-weight:bold;">请选择机构与部门</span>
|
|
<dept-tree show-root default-expand-all :expand-on-click-node="false" @node-click="handleLeftDeptNodeClick"
|
|
@branch-row-click="branchRowClick"></dept-tree>
|
|
</el-col>
|
|
<el-col :span="15">
|
|
<el-row v-loading="elRowLoading">
|
|
<el-col :span="5" style="margin-left:70px;">
|
|
<el-input v-model="filterBusinessName" placeholder="模糊查询"></el-input>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-button type="danger" @click="selectshopLocationBySysDeptIdMethodLike">模糊搜索</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-loading="elRowLoading">
|
|
<el-col :span="19" style="margin-left:70px;">
|
|
<el-select v-model="myLocationIds" filterable clearable placeholder="请选择门店" multiple style="width:100%">
|
|
<el-option v-for="item in locationIds" :key="item.id" :label="item.branchName" :value="item.id"></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<el-button type="danger" @click="sureMethod">确定</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<el-table :data="shopLocationTable" style="width: 100%;margin-left:70px;">
|
|
|
|
<el-table-column prop="shopId" label="商户编号" width="180" align="center"></el-table-column>
|
|
<el-table-column prop="id" label="门店编号" width="180" align="center"></el-table-column>
|
|
<el-table-column prop="businessName" label="门店名称" align="center"></el-table-column>
|
|
<el-table-column label="操作" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button type="primary" @click="addTomyLocationIds(scope.row,scope.$index)">加入</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination style="float:right" layout="total, sizes, prev, pager, next,jumper" @current-change="handleCurrentChange"
|
|
@size-change="handleSizeChange" :page-sizes="[10,20, 50, 100, 500]" :current-page.sync="pageInfo.pageNum"
|
|
:page-size="pageInfo.pageSize" :total="pageInfo.total"></el-pagination>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import util from "@/common/js/util"; //全局公共库
|
|
import Sticky from "@/components/Sticky"; // 粘性header组件
|
|
import DeptTree from "./DeptTree.vue";
|
|
import {
|
|
selectshopLocationBySysDeptIdApi
|
|
} from "./shopLocation";
|
|
import {
|
|
mapGetters
|
|
} from "vuex";
|
|
export default {
|
|
computed: {
|
|
...mapGetters(["userInfo"])
|
|
},
|
|
props: [],
|
|
watch: {},
|
|
data() {
|
|
return {
|
|
filterBusinessName: "", //搜索名字过滤
|
|
locationIds: [], //选中的LocationIds数组
|
|
myLocationIds: [], //选中的LocationIds数组
|
|
currentSelectDeptObject: {}, //当前选择的部门对象
|
|
elRowLoading: false,
|
|
shopLocationTable: [],
|
|
pageInfo: {
|
|
//分页数据
|
|
total: 0, //服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。 计算出有多少条记录
|
|
pageSize: 10, //每页数据 每页现实的数据的大小
|
|
count: false, //是否需要重新计算总记录数
|
|
pageNum: 1, //当前页码、从1开始计算
|
|
orderFields: [], //排序列 如 ['sex','student_id']，必须为数据库字段
|
|
orderDirs: [] //升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
|
|
}
|
|
};
|
|
}, //end data
|
|
methods: {
|
|
selectshopLocationBySysDeptIdMethodLike() {
|
|
if (
|
|
this.currentSelectDeptObject.branchId == null ||
|
|
this.currentSelectDeptObject.branchId == ""
|
|
) {
|
|
this.$message({showClose: true,
|
|
message: "请选择机构和部门",
|
|
type: "error"
|
|
});
|
|
return;
|
|
}
|
|
this.selectshopLocationBySysDeptIdMethod();
|
|
},
|
|
handleCurrentChange(pageNum) {
|
|
//分页组件的修改当前页数
|
|
this.pageInfo.pageNum = pageNum;
|
|
this.selectshopLocationBySysDeptIdMethod();
|
|
},
|
|
handleSizeChange(pageSize) {
|
|
//分页组建的修改每页显示的大小
|
|
this.pageInfo.pageSize = pageSize;
|
|
this.selectshopLocationBySysDeptIdMethod();
|
|
},
|
|
//点击创建商户对话框左边的树触发的事件
|
|
handleLeftDeptNodeClick(data, node, comp) {
|
|
if (!data.isBranch) {
|
|
//选择的不是机构节点
|
|
let branchId = data.branchId;
|
|
let deptid = data.deptid;
|
|
console.log(data);
|
|
this.pageInfo.count = true;
|
|
this.currentSelectDeptObject = data;
|
|
this.selectshopLocationBySysDeptIdMethod();
|
|
}
|
|
},
|
|
//点击切换机构按钮的时候触发的事件
|
|
branchRowClick: function(row, event, column) {},
|
|
|
|
selectshopLocationBySysDeptIdMethod() {
|
|
let that = this;
|
|
let params = {
|
|
branchId: this.currentSelectDeptObject.branchId,
|
|
deptid: this.currentSelectDeptObject.deptid,
|
|
pageSize: this.pageInfo.pageSize,
|
|
pageNum: this.pageInfo.pageNum,
|
|
count: this.pageInfo.count
|
|
};
|
|
if (
|
|
this.pageInfo.orderFields != null &&
|
|
this.pageInfo.orderFields.length > 0
|
|
) {
|
|
//获取排序的字段的内容 以及排序的方式 按时间倒叙排序
|
|
let orderBys = [];
|
|
for (var i = 0; i < this.pageInfo.orderFields.length; i++) {
|
|
orderBys.push(
|
|
this.pageInfo.orderFields[i] + " " + this.pageInfo.orderDirs[i]
|
|
);
|
|
}
|
|
params.orderBy = orderBys.join(","); //多个排序字段直接进行拼接的处理
|
|
}
|
|
if (this.filterBusinessName != null && this.filterBusinessName != "") {
|
|
//店名模糊搜索
|
|
params.filterBusinessName = "%" + this.filterBusinessName + "%";
|
|
}
|
|
this.elRowLoading = true;
|
|
selectshopLocationBySysDeptIdApi(params)
|
|
.then(res => {
|
|
this.elRowLoading = false;
|
|
let tips = res.data.tips;
|
|
if (tips.isOk) {
|
|
this.pageInfo.total = res.data.total;
|
|
this.pageInfo.count = false;
|
|
that.shopLocationTable = res.data.data;
|
|
}
|
|
// this.$message({showClose: true,
|
|
// message: tips.msg,
|
|
// type: tips.isOk ? "success" : "error"
|
|
// });
|
|
})
|
|
.catch(() => {
|
|
this.elRowLoading = false;
|
|
});
|
|
},
|
|
|
|
sureMethod(row, index) {
|
|
this.$emit("sure", this.locationIds, this.myLocationIds);
|
|
},
|
|
addTomyLocationIds(row, index) {
|
|
let isHavingMyLocationIds = this.myLocationIds.some(s => s == row.id);
|
|
if (isHavingMyLocationIds) {
|
|
return;
|
|
}
|
|
this.myLocationIds.push(row.id);
|
|
|
|
let isHaving = this.locationIds.some(s => s.id == row.id);
|
|
if (isHaving) {
|
|
return;
|
|
}
|
|
this.locationIds.push(row);
|
|
|
|
console.log(this.myLocationIds);
|
|
}
|
|
}, //end methods
|
|
components: {
|
|
"dept-tree": DeptTree,
|
|
sticky: Sticky
|
|
//在下面添加其它组件
|
|
},
|
|
mounted() {}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|