|
@@ -6,12 +6,29 @@
|
|
|
<p>{{ title }}</p>
|
|
|
</div>
|
|
|
<template v-if="dataList.length">
|
|
|
- <div :class="active ? 'bgActive' : 'bgActivecheckbox'" class="paren_content">
|
|
|
+ <div
|
|
|
+ :class="active ? 'bgActive' : 'bgActivecheckbox'"
|
|
|
+ class="paren_content"
|
|
|
+ >
|
|
|
<template v-if="!type">
|
|
|
- <el-row v-infinite-scroll="load" :infinite-scroll-distance="20" infinite-scroll-disabled="disabled" class="scCont scrollbar" :gutter="16">
|
|
|
+ <el-row
|
|
|
+ v-infinite-scroll="load"
|
|
|
+ :infinite-scroll-distance="20"
|
|
|
+ infinite-scroll-disabled="disabled"
|
|
|
+ class="scCont scrollbar"
|
|
|
+ :gutter="16"
|
|
|
+ >
|
|
|
<el-checkbox-group @change="checkChange" v-model="checkList">
|
|
|
- <el-col :span="number" v-for="(item, index) in dataList" :key="index">
|
|
|
- <div @click="handleBg(item, index)" :class="active && msg === index ? 'bgColor' : ''" class="cide">
|
|
|
+ <el-col
|
|
|
+ :span="number"
|
|
|
+ v-for="(item, index) in dataList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ @click="handleBg(item, index)"
|
|
|
+ :class="active && msg === index ? 'bgColor' : ''"
|
|
|
+ class="cide"
|
|
|
+ >
|
|
|
<div class="cide_header">
|
|
|
<p :title="item.name">{{ item.name }}</p>
|
|
|
<el-checkbox :label="index"></el-checkbox>
|
|
@@ -26,12 +43,27 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-else-if="mainData.length">
|
|
|
- <div :class="active ? 'bgActive' : 'bgActivecheckbox'" class="paren_content">
|
|
|
+ <div
|
|
|
+ :class="active ? 'bgActive' : 'bgActivecheckbox'"
|
|
|
+ class="paren_content"
|
|
|
+ >
|
|
|
<template v-if="type">
|
|
|
<el-row :gutter="16">
|
|
|
- <el-radio-group style="display: block;" @change="radioChange" v-model="radio">
|
|
|
- <el-col :span="number" v-for="(item, index) in mainData" :key="index">
|
|
|
- <div @click.stop="handleBg(index)" :class="active && msg === index ? 'bgColor' : ''" class="cide">
|
|
|
+ <el-radio-group
|
|
|
+ style="display: block"
|
|
|
+ @change="radioChange"
|
|
|
+ v-model="radio"
|
|
|
+ >
|
|
|
+ <el-col
|
|
|
+ :span="number"
|
|
|
+ v-for="(item, index) in mainData"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ @click.stop="handleBg(index)"
|
|
|
+ :class="active && msg === index ? 'bgColor' : ''"
|
|
|
+ class="cide"
|
|
|
+ >
|
|
|
<div class="cide_header">
|
|
|
<p>{{ item.name }}</p>
|
|
|
<el-radio :label="index"></el-radio>
|
|
@@ -92,7 +124,7 @@ export default {
|
|
|
default: () => [],
|
|
|
},
|
|
|
},
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
radio: null,
|
|
|
checkList: [],
|
|
@@ -101,13 +133,13 @@ export default {
|
|
|
msg: null,
|
|
|
pageSize: 100,
|
|
|
pageNum: 1,
|
|
|
- total: '',
|
|
|
- loading: false
|
|
|
+ total: "",
|
|
|
+ loading: false,
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
radioCheck: {
|
|
|
- handler (num) {
|
|
|
+ handler(num) {
|
|
|
this.radio = num;
|
|
|
},
|
|
|
deep: true,
|
|
@@ -117,74 +149,90 @@ export default {
|
|
|
if (msg == 'account') {
|
|
|
this.getRoleData('UserId', 'UserName');
|
|
|
}
|
|
|
- if (msg == 'roleByUpId') {
|
|
|
-
|
|
|
- this.getRoleDataByUpId('roleId');
|
|
|
+ if (msg == "roleByUpId") {
|
|
|
+ this.getRoleDataByUpId("roleId");
|
|
|
}
|
|
|
},
|
|
|
deep: true,
|
|
|
},
|
|
|
dataList: {
|
|
|
- handler (arr) {
|
|
|
- if (this.roleType == 'account') {
|
|
|
- this.checkBoxs(arr, 'UserId');
|
|
|
+ handler(arr) {
|
|
|
+ if (this.roleType == "account") {
|
|
|
+ this.checkBoxs(arr, "UserId");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ checkBoxList: {
|
|
|
+ handler(arr) {
|
|
|
+ if (this.roleType == "roleByUpId") {
|
|
|
+ const datas = [];
|
|
|
+ console.log(arr);
|
|
|
+ this.dataList.forEach((item, index) => {
|
|
|
+ arr.forEach((p) => {
|
|
|
+ if (item.RoleId == p.RoleId) {
|
|
|
+ datas.push(index);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.checkList = datas;
|
|
|
}
|
|
|
},
|
|
|
deep: true,
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
computed: {
|
|
|
- noMore () {
|
|
|
+ noMore() {
|
|
|
return this.pageNum >= this.total;
|
|
|
},
|
|
|
- disabled () {
|
|
|
+ disabled() {
|
|
|
return this.loading || this.noMore;
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
// 选中
|
|
|
- handleBg (item, i) {
|
|
|
+ handleBg(item, i) {
|
|
|
this.msg = i;
|
|
|
this.$emit("checkClick", item);
|
|
|
},
|
|
|
//多选框
|
|
|
- checkChange (arr) {
|
|
|
- const datas = this.formatChecks(arr);;
|
|
|
+ checkChange(arr) {
|
|
|
+ const datas = this.formatChecks(arr);
|
|
|
// if (this.roleType == 'account') {
|
|
|
// datas = this.formatChecks(arr, 'UserId');
|
|
|
// }
|
|
|
this.$emit("checkChange", datas);
|
|
|
},
|
|
|
//单选框
|
|
|
- radioChange (val) {
|
|
|
+ radioChange(val) {
|
|
|
this.$emit("radioChange", val);
|
|
|
},
|
|
|
//格式化选中回调
|
|
|
- formatChecks (arr, key) {
|
|
|
+ formatChecks(arr, key) {
|
|
|
const datas = [];
|
|
|
// const ids = []
|
|
|
this.dataList.forEach((item, index) => {
|
|
|
- arr.forEach(p => {
|
|
|
+ arr.forEach((p) => {
|
|
|
if (index == p) {
|
|
|
datas.push(item);
|
|
|
}
|
|
|
- })
|
|
|
- })
|
|
|
+ });
|
|
|
+ });
|
|
|
// datas.forEach(item => {
|
|
|
// ids.push(item[key])
|
|
|
// })
|
|
|
return datas;
|
|
|
},
|
|
|
//多选框默认选中
|
|
|
- checkBoxs (arr, ids) {
|
|
|
- const datas = []
|
|
|
+ checkBoxs(arr, ids) {
|
|
|
+ const datas = [];
|
|
|
arr.forEach((item, index) => {
|
|
|
- this.checkBoxList.forEach(p => {
|
|
|
+ this.checkBoxList.forEach((p) => {
|
|
|
if (item[ids] == p) {
|
|
|
datas.push(index);
|
|
|
}
|
|
|
- })
|
|
|
- })
|
|
|
+ });
|
|
|
+ });
|
|
|
this.checkList = datas;
|
|
|
},
|
|
|
//获取列表
|
|
@@ -192,12 +240,12 @@ export default {
|
|
|
try {
|
|
|
this.loading = true;
|
|
|
const obj = {
|
|
|
- QueryName: '',
|
|
|
+ QueryName: "",
|
|
|
PageIndex: this.pageNum,
|
|
|
PageSize: this.pageSize,
|
|
|
};
|
|
|
let result = null;
|
|
|
- if (this.roleType == 'account') {
|
|
|
+ if (this.roleType == "account") {
|
|
|
result = await GetAccountList(obj);
|
|
|
}
|
|
|
if (result.code === 0) {
|
|
@@ -223,10 +271,11 @@ export default {
|
|
|
},
|
|
|
|
|
|
//获取列表2
|
|
|
- async getRoleDataByUpId (ids) {
|
|
|
+ async getRoleDataByUpId(ids) {
|
|
|
try {
|
|
|
this.loading = true;
|
|
|
const obj = {
|
|
|
+
|
|
|
GroupIds: this.GroupIds
|
|
|
};
|
|
|
let result = null;
|
|
@@ -239,6 +288,7 @@ export default {
|
|
|
this.dataList.forEach(item => {
|
|
|
item.name = item.RoleName
|
|
|
});
|
|
|
+ this.checkBoxs(this.dataList, "RoleId");
|
|
|
this.loading = false;
|
|
|
} else {
|
|
|
this.$message.error(result.message);
|
|
@@ -251,12 +301,12 @@ export default {
|
|
|
},
|
|
|
|
|
|
//滚动加载数据
|
|
|
- load () {
|
|
|
+ load() {
|
|
|
this.pageNum += 1;
|
|
|
if (this.roleType == 'account') {
|
|
|
this.getRoleData('UserId', 'UserName');
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|