|
|
@@ -1,92 +1,49 @@
|
|
|
<template>
|
|
|
- <div class="rai-checkbox-content" id="rai-checkbox-content">
|
|
|
- <div class="rai-checkbox-bigS-box">
|
|
|
- <el-checkbox
|
|
|
- v-model="itB.Checked"
|
|
|
- v-for="itB in data.ItemsBig"
|
|
|
- :key="itB.PermissionName"
|
|
|
- @change="(e) => bigServeCheck(e, itB, data)"
|
|
|
- :indeterminate="itB.isIndeterminate && !itB.disabled"
|
|
|
- class="bigS-item"
|
|
|
- :disabled="itB.disabled || (formData.qyBigServeCheck != getQyBigServeCheckNumber(itB.PermissionName) && formData.qyBigServeCheck != 0)"
|
|
|
- >{{ itB.PermissionName }}</el-checkbox
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div class="rai-checkbox-box">
|
|
|
- <div class="rai-checkbox-main-container">
|
|
|
- <div class="rai-checkbox-main-row">
|
|
|
- <div
|
|
|
- class="rai-checkbox-item"
|
|
|
- v-for="it in data.Items"
|
|
|
- :key="it.ChartPermissionId"
|
|
|
- :style="{ width: [23, 148, 62].includes(it.ChartPermissionId) ? '84px' : [156,30,69].includes(it.ChartPermissionId) ? '110px' : '168px' }"
|
|
|
+ <div class="rai-checkbox-box">
|
|
|
+ <!-- 第一行：套餐 -->
|
|
|
+ <el-row :gutter="10" style="margin-bottom: 16px">
|
|
|
+ <el-col v-for="item in packages" :key="item.PermissionName" :span="3">
|
|
|
+ <el-checkbox v-model="item.Checked" @change="onPackageChange(item)" :disabled="item.disabled">
|
|
|
+ {{ item.PermissionName }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 第二行：主模块 -->
|
|
|
+ <div class="main-list">
|
|
|
+ <div class="main-list-item" :class="[item.Child && 'fixed-width']" v-for="item in mainList" :key="item.PermissionName">
|
|
|
+ <div>
|
|
|
+ <el-checkbox v-model="item.Checked" :indeterminate="item.isIndeterminate" :disabled="item.disabled" @change="onMainChange(item)">
|
|
|
+ {{ item.PermissionName }}
|
|
|
+ </el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.Child" style="margin-left: 10px">
|
|
|
+ <el-checkbox
|
|
|
+ v-for="child in item.Child"
|
|
|
+ :key="child.PermissionName"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ v-model="child.Checked"
|
|
|
+ @change="() => onChildChange(item)"
|
|
|
+ style="display: block; margin-right: 15px"
|
|
|
>
|
|
|
- <template v-if="it.Child">
|
|
|
- <el-checkbox
|
|
|
- :label="it.PermissionName"
|
|
|
- style="margin-right: 8px"
|
|
|
- v-model="it.Checked"
|
|
|
- @change="handleItemCheck(it, data)"
|
|
|
- :indeterminate="it.isIndeterminate"
|
|
|
- :disabled="it.disabled"
|
|
|
- ></el-checkbox>
|
|
|
- <el-checkbox-group v-model="data.CheckList" style="height: unset" @change="handleQYChecked(it, data)" :disabled="it.disabled">
|
|
|
- <div class="rai-checkbox-serve-box">
|
|
|
- <el-checkbox :label="itChild.ChartPermissionId" v-for="itChild in it.Child" :key="itChild.ChartPermissionId" class="small-item">{{ itChild.PermissionName }}</el-checkbox>
|
|
|
- </div>
|
|
|
- </el-checkbox-group>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <el-checkbox-group v-model="data.CheckList" style="height: unset; margin-right: 8px" @change="handleQYChecked(it, data)">
|
|
|
- <el-checkbox :label="it.ChartPermissionId" :disabled="it.disabled">{{ it.PermissionName }}</el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
+ {{ child.PermissionName }}
|
|
|
+ </el-checkbox>
|
|
|
</div>
|
|
|
- <el-checkbox-group v-model="data.CheckList" style="height: unset">
|
|
|
- <div class="rai-checkbox-upS-box">
|
|
|
- <el-checkbox
|
|
|
- :label="itU.ChartPermissionId"
|
|
|
- v-for="itU in data.ItemsUp"
|
|
|
- :key="itU.ChartPermissionId"
|
|
|
- class="rai-checkbox-item upS-item"
|
|
|
- :disabled="itU.disabled"
|
|
|
- @change="(e) => handleUpdateChecked(e, itU.PermissionName, data)"
|
|
|
- >{{ itU.PermissionName }}</el-checkbox
|
|
|
- >
|
|
|
- </div>
|
|
|
- </el-checkbox-group>
|
|
|
+ <el-input type="number" style="width: 118px; margin: 0 8px" placeholder="请输入点数" v-if="item.ShowInput" v-model="item.Points"></el-input>
|
|
|
+ <p class="text-content" v-if="item.ChartContent">{{ item.ChartContent }}</p>
|
|
|
</div>
|
|
|
- <div class="rai-checkbox-private-container">
|
|
|
- <el-checkbox-group v-model="data.CheckList" style="height: unset">
|
|
|
- <div class="rai-checkbox-upS-box">
|
|
|
- <el-checkbox
|
|
|
- :label="itP.ChartPermissionId"
|
|
|
- v-for="(itP, inP) in data.ItemsPrivate"
|
|
|
- :key="itP.ChartPermissionId"
|
|
|
- :disabled="itP.disabled"
|
|
|
- :style="{ height: hasNoChild ? '48px' : '95px', width: itP.ChartPermissionId == 52 && data.CheckList.includes(52) ? '220px' : itP.PermissionName.includes('研选') ? '130px' : '84px' }"
|
|
|
- class="rai-checkbox-item upS-item"
|
|
|
- @change="(e) => handlePrivateChecked(e, itP, data)"
|
|
|
- >
|
|
|
- {{ itP.PermissionName }}
|
|
|
- <p v-if="itP.ChartPermissionId == 31" class="checkbox-text">(30000元/年)</p>
|
|
|
- <p v-if="itP.ChartPermissionId == 52" class="checkbox-text">(点/2000元)</p>
|
|
|
- <input
|
|
|
- @click.stop
|
|
|
- @input="validateInteger"
|
|
|
- placeholder="请输入点数"
|
|
|
- style="margin-left: 10px"
|
|
|
- v-if="itP.ChartPermissionId == 52 && data.CheckList.includes(52)"
|
|
|
- v-model="minus_sign_val"
|
|
|
- />
|
|
|
- </el-checkbox>
|
|
|
- </div>
|
|
|
- </el-checkbox-group>
|
|
|
- <div class="rai-checkbox-notice-box" v-if="data.ItemsUp.length > 0">
|
|
|
- <span class="rai-checkbox-notice" v-if="formData.qyBigServeCheck"> 同时包含{{ formData.qyBigServeCheck == 2 ? "12" : "16" }}次专项调研</span>
|
|
|
- <p class="rai-checkbox-notice" v-if="equityGroupDisabled(data.CheckList)">同时包含升级行业各5次专项调研</p>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 第三行：升级模块 -->
|
|
|
+ <div class="bootm-list">
|
|
|
+ <div class="bootm-list-item" v-for="item in upgradeList" :key="item.PermissionName">
|
|
|
+ <el-checkbox v-model="item.Checked" :disabled="item.disabled" @change="onUpgradeChange(item)">
|
|
|
+ {{ item.PermissionName }}
|
|
|
+ </el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="rai-checkbox-notice-box">
|
|
|
+ <span class="rai-checkbox-notice" v-if="this.formData.qyBigServeCheck"> 同时包含{{ this.formData.qyBigServeCheck == 2 ? "12" : "16" }}次专项调研</span>
|
|
|
+ <p class="rai-checkbox-notice" v-if="equityGroupDisabled(raiCheckList)">同时包含升级行业各5次专项调研</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -94,282 +51,292 @@
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: "raiPermissionbox",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- minus_sign_val: "",
|
|
|
- };
|
|
|
- },
|
|
|
+ name: "PermissionCheckboxGroup",
|
|
|
props: {
|
|
|
- data: {
|
|
|
+ allData: {
|
|
|
+ type: Array,
|
|
|
required: true,
|
|
|
- type: Object,
|
|
|
+ },
|
|
|
+ raiCheckList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
},
|
|
|
formData: {
|
|
|
- //formData.qyBigServeCheck 0-无 1- 70万 2- 45万
|
|
|
- required: true,
|
|
|
type: Object,
|
|
|
},
|
|
|
- hasNoChild: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ qyBigServeCheck: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ packages() {
|
|
|
+ return this.allData.filter((item) => item.PermissionName.includes("套餐"));
|
|
|
+ },
|
|
|
+ mainList() {
|
|
|
+ return this.allData.filter((item) => item.PermissionName && !item.PermissionName.includes("升级") && !item.PermissionName.includes("套餐"));
|
|
|
+ },
|
|
|
+ upgradeList() {
|
|
|
+ return this.allData.filter((item) => item.PermissionName.includes("升级"));
|
|
|
},
|
|
|
},
|
|
|
- created() {
|
|
|
- // 回显
|
|
|
- if (this.data.CheckList && this.data.CheckList.length > 0) {
|
|
|
- this.data.Items.map((item) => {
|
|
|
+ methods: {
|
|
|
+ // 处理选中后的id
|
|
|
+ updateCheckList() {
|
|
|
+ const list = [];
|
|
|
+ this.allData.forEach((item) => {
|
|
|
if (item.Child) {
|
|
|
- item.Child.map((t) => {
|
|
|
- this.handleQYChecked(item, this.data);
|
|
|
+ item.Child.forEach((child) => {
|
|
|
+ if (child.Checked) {
|
|
|
+ list.push(child.ChartPermissionId);
|
|
|
+ }
|
|
|
});
|
|
|
- } else {
|
|
|
- this.handleQYChecked(item, this.data);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (item.Checked && item.ChartPermissionId > 0) {
|
|
|
+ list.push(item.ChartPermissionId);
|
|
|
}
|
|
|
});
|
|
|
- this.data.ItemsPrivate.map((itP) => {
|
|
|
- let flag = this.data.CheckList.includes(itP.ChartPermissionId);
|
|
|
- this.handlePrivateChecked(flag, itP, this.data);
|
|
|
- });
|
|
|
- this.data.ItemsUp.map((itU) => {
|
|
|
- let flag = this.data.CheckList.includes(itU.ChartPermissionId);
|
|
|
- this.handleUpdateChecked(flag, itU.PermissionName, this.data);
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 套餐选中逻辑修复
|
|
|
- bigServeCheck(value, itB, item) {
|
|
|
- this.formData.qyBigServeCheck = value ? this.getQyBigServeCheckNumber(itB.PermissionName) : 0;
|
|
|
-
|
|
|
- // 更新 `indeterminate` 状态
|
|
|
- item.ItemsBig.forEach((itB) => (itB.isIndeterminate = false));
|
|
|
+ this.$emit("update:raiCheckList", list);
|
|
|
+ },
|
|
|
+ // 套餐选中后的逻辑
|
|
|
+ onPackageChange(pkg) {
|
|
|
+ if (pkg.Checked) {
|
|
|
+ let indexItme = this.packages.findIndex((item) => item.PermissionName === pkg.PermissionName);
|
|
|
+ this.packages[indexItme == 0 ? 1 : 0].disabled = true;
|
|
|
+ // 取消其他套餐
|
|
|
+ this.packages.forEach((item) => {
|
|
|
+ if (item !== pkg) {
|
|
|
+ item.Checked = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- const bigServeItems = this.hasNoChild
|
|
|
- ? [22, 21, 20, 19, 23, 156, 30, 69]
|
|
|
- : process.env.NODE_ENV === "production"
|
|
|
- ? [22, 39, 21, 38, 20, 37, 19, 36, 23, 156, 30, 69, 148, 62]
|
|
|
- : [22, 37, 21, 36, 20, 35, 19, 34, 23, 156, 30, 69, 148, 62];
|
|
|
+ // 全部先清空
|
|
|
+ this.mainList.forEach((main) => {
|
|
|
+ main.Checked = false;
|
|
|
+ main.isIndeterminate = false;
|
|
|
+ main.disabled = false;
|
|
|
+ if (main.Child) {
|
|
|
+ main.Child.forEach((c) => (c.Checked = false));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.upgradeList.forEach((up) => {
|
|
|
+ up.Checked = false;
|
|
|
+ up.disabled = false;
|
|
|
+ });
|
|
|
|
|
|
- if (value) {
|
|
|
- item.CheckList = [...new Set([...item.CheckList, ...bigServeItems])];
|
|
|
+ // 根据 SetMenuChartPermissionId 选中主模块和子模块
|
|
|
+ pkg.SetMenuChartPermissionId.forEach((id) => {
|
|
|
+ const main = this.allData.find((i) => i.ChartPermissionId === id);
|
|
|
+ if (main) {
|
|
|
+ main.Checked = true;
|
|
|
+ if (main.Child) {
|
|
|
+ main.Child.forEach((c) => (c.Checked = true));
|
|
|
+ this.updateIndeterminate(main);
|
|
|
+ }
|
|
|
+ // 禁用升级
|
|
|
+ const upgrade = this.upgradeList.find((u) => u.PermissionName.includes(main.PermissionName));
|
|
|
+ if (upgrade) {
|
|
|
+ upgrade.disabled = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
} else {
|
|
|
- item.CheckList = item.CheckList.filter((t) => !bigServeItems.includes(t));
|
|
|
- }
|
|
|
-
|
|
|
- if (!this.hasNoChild) {
|
|
|
- // 更新子级状态
|
|
|
- item.Items.forEach((ele) => {
|
|
|
- if (ele.Child) {
|
|
|
- ele.Checked = value;
|
|
|
- this.handleItemCheck(ele, item);
|
|
|
+ this.packages.forEach((item) => (item.disabled = false));
|
|
|
+ // 清空所有勾选
|
|
|
+ this.mainList.forEach((main) => {
|
|
|
+ main.Checked = false;
|
|
|
+ main.isIndeterminate = false;
|
|
|
+ main.disabled = false;
|
|
|
+ if (main.Child) {
|
|
|
+ main.Child.forEach((c) => (c.Checked = false));
|
|
|
}
|
|
|
});
|
|
|
+ this.upgradeList.forEach((up) => {
|
|
|
+ up.Checked = false;
|
|
|
+ up.disabled = false;
|
|
|
+ });
|
|
|
}
|
|
|
+ this.$emit("update:formData", {
|
|
|
+ ...this.formData,
|
|
|
+ qyBigServeCheck: pkg.Checked ? (pkg.PermissionName.includes("70") ? 1 : 2) : 0,
|
|
|
+ });
|
|
|
+ this.updateCheckList();
|
|
|
},
|
|
|
- // 医药、消费、科技、智造（有主客观）选中
|
|
|
- // 父子选中逻辑修复
|
|
|
- handleItemCheck(it, item) {
|
|
|
- const childIds = it.Child.map((t) => t.ChartPermissionId);
|
|
|
+ // 行业选中后的逻辑
|
|
|
+ onMainChange(item) {
|
|
|
+ if (item.Child) {
|
|
|
+ item.Child.forEach((child) => {
|
|
|
+ child.Checked = item.Checked;
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- if (it.Checked) {
|
|
|
- item.CheckList = [...new Set([...item.CheckList, ...childIds])];
|
|
|
- } else {
|
|
|
- item.CheckList = item.CheckList.filter((t) => !childIds.includes(t));
|
|
|
+ const upgradeItem = this.upgradeList.find((up) => up.PermissionName.includes(item.PermissionName));
|
|
|
+ if (upgradeItem) {
|
|
|
+ upgradeItem.disabled = item.Checked;
|
|
|
}
|
|
|
|
|
|
- this.updateParentStatus(it, item);
|
|
|
+ this.updateIndeterminate(item);
|
|
|
+ this.updateCheckList();
|
|
|
},
|
|
|
- // 更新父级状态
|
|
|
- updateParentStatus(it, item) {
|
|
|
- let count = 0;
|
|
|
+ // 行业的主客观
|
|
|
+ onChildChange(parent) {
|
|
|
+ const total = parent.Child.length;
|
|
|
+ const checkedCount = parent.Child.filter((c) => c.Checked).length;
|
|
|
|
|
|
- if (it.Child) {
|
|
|
- it.Child.forEach((child) => {
|
|
|
- if (item.CheckList.includes(child.ChartPermissionId)) count++;
|
|
|
- });
|
|
|
- it.Checked = count === it.Child.length;
|
|
|
- it.isIndeterminate = count > 0 && count < it.Child.length;
|
|
|
+ if (checkedCount === total) {
|
|
|
+ parent.Checked = true;
|
|
|
+ parent.isIndeterminate = false;
|
|
|
+ } else if (checkedCount > 0) {
|
|
|
+ parent.Checked = false;
|
|
|
+ parent.isIndeterminate = true;
|
|
|
+ } else {
|
|
|
+ parent.Checked = false;
|
|
|
+ parent.isIndeterminate = false;
|
|
|
}
|
|
|
|
|
|
- // 更新禁用状态
|
|
|
- const relatedItem = item.ItemsUp.find((up) => up.PermissionName.includes(it.PermissionName));
|
|
|
- if (relatedItem) {
|
|
|
- relatedItem.disabled = count !== 0;
|
|
|
+ const upgradeItem = this.upgradeList.find((up) => up.PermissionName.includes(parent.PermissionName));
|
|
|
+ if (upgradeItem) {
|
|
|
+ upgradeItem.disabled = checkedCount > 0;
|
|
|
}
|
|
|
+ this.updateCheckList();
|
|
|
},
|
|
|
- handleQYChecked(it, item) {
|
|
|
- // console.log(it,item);
|
|
|
- let count = 0;
|
|
|
- if (it.Child) {
|
|
|
- // 有主客观
|
|
|
- it.Child.map((t) => {
|
|
|
- if (item.CheckList.includes(t.ChartPermissionId)) count++;
|
|
|
- });
|
|
|
- it.Checked = count == 2;
|
|
|
- it.isIndeterminate = count == 1;
|
|
|
- }
|
|
|
- if (this.hasNoChild) {
|
|
|
- if (item.CheckList.includes(it.ChartPermissionId)) count++;
|
|
|
- }
|
|
|
- // 设置升级套餐的禁用
|
|
|
- let changeItem = item.ItemsUp.find((itUp) => itUp.PermissionName.includes(it.PermissionName));
|
|
|
- if (changeItem) changeItem.disabled = count != 0;
|
|
|
- // 设置大套餐的状态
|
|
|
- let bigServeCheckNum;
|
|
|
- if (this.formData.qyBigServeCheck) {
|
|
|
- //qyBigServeCheck有值就作用在对应的大套餐
|
|
|
- bigServeCheckNum = this.formData.qyBigServeCheck == 1 ? 1 : 0;
|
|
|
- } else {
|
|
|
- // 默认作用在45万上 原本有状态的话，就作用在有状态的大套餐
|
|
|
- bigServeCheckNum = item.ItemsBig[1].isIndeterminate || item.ItemsBig[1].Checked ? 1 : 0;
|
|
|
- }
|
|
|
- // 正式服 各行业的客观的chartPermissionId和测试服的不一样
|
|
|
- let allChartPermissionIds = process.env.NODE_ENV === "production" ? [22, 39, 21, 38, 20, 37, 19, 36, 23, 156, 30, 69, 148, 62] : [22, 37, 21, 36, 20, 35, 19, 34, 23, 156, 30, 69, 148, 62];
|
|
|
+ // 升级选中后的逻辑
|
|
|
+ onUpgradeChange(upgrade) {
|
|
|
+ const main = this.mainList.find((main) => upgrade.PermissionName.includes(main.PermissionName));
|
|
|
+ if (main) {
|
|
|
+ main.disabled = upgrade.Checked;
|
|
|
|
|
|
- let bigServeItems = this.hasNoChild ? [22, 21, 20, 19, 23, 156, 30, 69] : allChartPermissionIds;
|
|
|
- if (bigServeItems.every((t) => item.CheckList.includes(t))) {
|
|
|
- item.ItemsBig[bigServeCheckNum].Checked = true;
|
|
|
- this.formData.qyBigServeCheck = this.getQyBigServeCheckNumber(item.ItemsBig[bigServeCheckNum].PermissionName);
|
|
|
- } else {
|
|
|
- item.ItemsBig[bigServeCheckNum].Checked = false;
|
|
|
- this.formData.qyBigServeCheck = 0;
|
|
|
+ if (upgrade.Checked) {
|
|
|
+ main.Checked = false;
|
|
|
+ main.isIndeterminate = false;
|
|
|
+ if (main.Child) {
|
|
|
+ main.Child.forEach((c) => (c.Checked = false));
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- item.ItemsBig[bigServeCheckNum].isIndeterminate = bigServeItems.some((t) => item.CheckList.includes(t)) && !item.ItemsBig[bigServeCheckNum].Checked;
|
|
|
+ this.updateCheckList();
|
|
|
},
|
|
|
- handleUpdateChecked(value, name, item) {
|
|
|
- let isDisabled = item.ItemsUp.some((itU) => item.CheckList.includes(itU.ChartPermissionId));
|
|
|
- // 设置大套餐禁用
|
|
|
- item.ItemsBig.map((itb) => (itb.disabled = isDisabled));
|
|
|
- // 设置基础套餐禁用
|
|
|
- item.Items.find((its) => name.includes(its.PermissionName)).disabled = value;
|
|
|
- },
|
|
|
- handlePrivateChecked(value, itP, item) {
|
|
|
- if (![20032, 20031, 31].includes(itP.ChartPermissionId)) return;
|
|
|
- // 买方严选的互斥
|
|
|
- item.ItemsPrivate.forEach((itPri) => {
|
|
|
- if ([20032, 20031, 31].includes(itPri.ChartPermissionId) && itP.ChartPermissionId != itPri.ChartPermissionId && value) {
|
|
|
- itPri.disabled = true;
|
|
|
- } else {
|
|
|
- itPri.disabled = false;
|
|
|
- }
|
|
|
- });
|
|
|
+ // 更新 indeterminate 状态
|
|
|
+ updateIndeterminate(item) {
|
|
|
+ if (!item.Child) return;
|
|
|
+ const total = item.Child.length;
|
|
|
+ const checked = item.Child.filter((c) => c.Checked).length;
|
|
|
+ item.isIndeterminate = checked > 0 && checked < total;
|
|
|
},
|
|
|
+ // 是否有超过100000的点数
|
|
|
equityGroupDisabled(item) {
|
|
|
return item.some((key) => key > 100000);
|
|
|
},
|
|
|
- getQyBigServeCheckNumber(permissionName) {
|
|
|
- return permissionName.includes("70") ? 1 : 2;
|
|
|
- },
|
|
|
- // 数字输入校验
|
|
|
- validateInteger() {
|
|
|
- this.minus_sign_val = this.minus_sign_val.replace(/[^0-9]/g, "");
|
|
|
- if (this.minus_sign_val !== "") {
|
|
|
- this.minus_sign_val = parseInt(this.minus_sign_val, 10);
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 初始化
|
|
|
+ if (this.raiCheckList.length > 0) {
|
|
|
+ // 设置套餐选中与互斥状态
|
|
|
+ if (this.formData.qyBigServeCheck) {
|
|
|
+ const selectedIndex = this.formData.qyBigServeCheck == 2 ? 0 : 1;
|
|
|
+ this.packages[selectedIndex].Checked = true;
|
|
|
+ this.packages[1 - selectedIndex].disabled = true;
|
|
|
}
|
|
|
- },
|
|
|
+
|
|
|
+ // 初始化主模块与子模块状态
|
|
|
+ this.mainList.forEach((main) => {
|
|
|
+ const isMainChecked = this.raiCheckList.includes(main.ChartPermissionId);
|
|
|
+ main.Checked = isMainChecked;
|
|
|
+ main.isIndeterminate = false;
|
|
|
+
|
|
|
+ // 更新子模块
|
|
|
+ if (main.Child) {
|
|
|
+ let checkedCount = 0;
|
|
|
+ main.Child.forEach((child) => {
|
|
|
+ const isChildChecked = this.raiCheckList.includes(child.ChartPermissionId);
|
|
|
+ child.Checked = isChildChecked;
|
|
|
+ if (isChildChecked) checkedCount++;
|
|
|
+ });
|
|
|
+
|
|
|
+ if (checkedCount > 0 && checkedCount < main.Child.length) {
|
|
|
+ main.isIndeterminate = true;
|
|
|
+ main.Checked = false;
|
|
|
+ } else if (checkedCount === main.Child.length) {
|
|
|
+ main.Checked = true;
|
|
|
+ main.isIndeterminate = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 升级模块与主模块互斥处理
|
|
|
+ const upgrade = this.upgradeList.find((up) => up.PermissionName.includes(main.PermissionName));
|
|
|
+ if (upgrade) {
|
|
|
+ upgrade.disabled = isMainChecked || (main.Child && main.Child.some((c) => c.Checked));
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 初始化升级模块状态
|
|
|
+ this.upgradeList.forEach((upgrade) => {
|
|
|
+ const isUpgradeChecked = this.raiCheckList.includes(upgrade.ChartPermissionId);
|
|
|
+ upgrade.Checked = isUpgradeChecked;
|
|
|
+
|
|
|
+ const main = this.mainList.find((m) => upgrade.PermissionName.includes(m.PermissionName));
|
|
|
+ if (main) {
|
|
|
+ main.disabled = isUpgradeChecked;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新总勾选列表
|
|
|
+ this.updateCheckList();
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-.rai-checkbox-content {
|
|
|
- // width: 100%;
|
|
|
- // height: 160px;
|
|
|
- padding: 20px 0 20px 20px;
|
|
|
- border: 1px dashed #aab4cc;
|
|
|
- // display: flex;
|
|
|
- .rai-checkbox-bigS-box {
|
|
|
+<style scoped lang="scss">
|
|
|
+.rai-checkbox-box {
|
|
|
+ width: 102%;
|
|
|
+ .main-list {
|
|
|
display: flex;
|
|
|
- .bigS-item {
|
|
|
- display: inline-flex;
|
|
|
+ padding-right: 15px;
|
|
|
+ border-right: 1px solid #e4e7ed;
|
|
|
+ border-top: 1px solid #e4e7ed;
|
|
|
+ border-bottom: 1px solid #e4e7ed;
|
|
|
+ overflow: hidden;
|
|
|
+ .main-list-item {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
align-items: center;
|
|
|
- padding: 4px 8px;
|
|
|
- height: 22px;
|
|
|
- margin: 0 20px 20px 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .rai-checkbox-box {
|
|
|
- display: flex;
|
|
|
- // flex-wrap: wrap;
|
|
|
- .rai-checkbox-main-container {
|
|
|
- .rai-checkbox-main-row {
|
|
|
- display: flex;
|
|
|
- .small-item {
|
|
|
- display: inline-flex;
|
|
|
- align-items: center;
|
|
|
- border: solid 1px #dcdfe6;
|
|
|
- padding: 4px 12px;
|
|
|
- height: 48px;
|
|
|
- width: 84px;
|
|
|
- margin-right: -1px;
|
|
|
- margin-bottom: -1px;
|
|
|
- &:first-child {
|
|
|
- margin-top: -1px;
|
|
|
- }
|
|
|
- }
|
|
|
+ border-left: 1px solid #e4e7ed;
|
|
|
+ padding: 0 20px;
|
|
|
+ .text-content {
|
|
|
+ position: absolute;
|
|
|
+ left: 10px;
|
|
|
+ bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
- .rai-checkbox-private-container {
|
|
|
- .rai-checkbox-notice-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- border: solid 1px #dcdfe6;
|
|
|
- border-left: none;
|
|
|
- height: 48px;
|
|
|
- margin-right: -1px;
|
|
|
- margin-left: -276px;
|
|
|
- padding-left: 200px;
|
|
|
- .rai-checkbox-notice {
|
|
|
- color: #f00;
|
|
|
- }
|
|
|
- }
|
|
|
+ .fixed-width {
|
|
|
+ width: 150px !important;
|
|
|
}
|
|
|
- .rai-checkbox-upS-box {
|
|
|
- display: flex;
|
|
|
- .upS-item {
|
|
|
- position: relative;
|
|
|
- justify-content: flex-start;
|
|
|
- .checkbox-text {
|
|
|
- position: absolute;
|
|
|
- font-size: 12px;
|
|
|
- color: #999;
|
|
|
- bottom: 15px;
|
|
|
- left: 20px;
|
|
|
- }
|
|
|
- input {
|
|
|
- width: 90px;
|
|
|
- height: 30px;
|
|
|
- border-radius: 4px;
|
|
|
- padding-left: 10px;
|
|
|
- border: 1px solid #dcdfe6;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ .bootm-list {
|
|
|
+ display: flex;
|
|
|
+ border-right: 1px solid #e4e7ed;
|
|
|
+ border-left: 1px solid #e4e7ed;
|
|
|
+ border-bottom: 1px solid #e4e7ed;
|
|
|
+ .bootm-list-item {
|
|
|
+ width: 150px;
|
|
|
+ padding-left: 20px;
|
|
|
+ border-right: 1px solid #e4e7ed;
|
|
|
}
|
|
|
- .rai-checkbox-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- border: solid 1px #dcdfe6;
|
|
|
- margin-bottom: -1px;
|
|
|
- margin-right: -1px;
|
|
|
- padding-left: 12px;
|
|
|
- min-height: 48px;
|
|
|
- width: 168px;
|
|
|
- .rai-checkbox-serve-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- height: unset;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .rai-checkbox-notice-box {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ .rai-checkbox-notice {
|
|
|
+ color: #f00;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
-<style lang="scss">
|
|
|
-#rai-checkbox-content {
|
|
|
- .el-checkbox {
|
|
|
- color: #333333;
|
|
|
+@media screen and (max-width: 1701px) {
|
|
|
+ .rai-checkbox-box {
|
|
|
+ width: 107%;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
bding