需要修改的文件:src\components\Form\src\jeecg\components\JDictSelectTag.vue
找到对应的ant Design组件位置添加disabled判断并执行计算函数
<a-select v-else :placeholder="placeholder" v-bind="attrs" v-model:value="state" :filterOption="handleFilterOption"
:getPopupContainer="getPopupContainer" :style="style" @change="handleChange">
<a-select-option v-if="showChooseOption" :value="null">请选择…</a-select-option>
<template v-for="item in dictOptions" :key="`${item.value}`">
<a-select-option :value="item.value" :disabled="DisableChecksums(item.value, disable, enable)">
<span style="display: inline-block; width: 100%" :title="item.label">
{{ item.label }}
</span>
</a-select-option>
</template>
</a-select>
接收属性传入值
props: {
disable: propTypes.array.def([]), // 禁用数组
enable: propTypes.array.def([]), // 启用数组
},
计算函数
/**
* 根据给定的值判断是否禁用校验和
* @param value 需要判断的值
* @param disable 禁用列表,数组形式
* @param enable 启用列表,数组形式
* @returns {boolean} 返回一个布尔值,指示是否禁用校验和
*/
function DisableChecksums(value, disable, enable) {
// 判断值是否在启用列表中
const isEnabled = enable.includes("" + value)
// 判断值是否在禁用列表中
const isDisabled = disable.includes("" + value)
// 如果禁用列表为空但启用列表不为空,则返回启用判断的反义
if (!disable.length && enable.length) {
return !isEnabled
// 如果启用列表为空但禁用列表不为空,则返回禁用判断的结果
} else if (!enable.length && disable.length) {
return isDisabled
} else {
// 如果值同时在启用和禁用列表中,打印错误并返回true
if (isDisabled && isEnabled) {
console.error('请检查字典配置是否正确,disable和enable不能重复');
return true;
} else if (isDisabled && !isEnabled) {
// 值在禁用列表中且不在启用列表中,返回true
return true;
} else if (!isDisabled && isEnabled) {
// 值在启用列表中且不在禁用列表中,返回false
return false;
} else if (!isDisabled && !isEnabled) {
// 值既不在启用列表中也不在禁用列表中,返回false
return false
} else {
// 如果执行到这里,表示逻辑有错误,打印错误信息
console.error("逻辑错误,请前往查看");
}
}
}
注意:传入值一定要是字符串数组【disable(禁用数组)和enable(启用数组)数组值不要重复】,可以只写一个
<JDictSelectTag v-model:value="orderMainModel.workStartType" :disable='["1", "9"]':enable="['yes', '大于', '4', '5']" :showChooseOption="false" placeholder="请选择打卡状态" dictCode="attendance" />
个人的小小优化,不完美之处还望同僚们指正