调整j-dict-select-tag组件：增加 :ignoreDisabled="true" 加上后停用的选项变为可选且提示“已停用”

调整JCheckbox组件：停用的选项如果已被勾选则可取消勾选取消后变为不可选
2025-03-19 10:58:26 +08:00 · 2025-03-19 10:58:26 +08:00 · fa204c8c01
parent 4a2e668204
commit fa204c8c01
7 changed files with 278 additions and 276 deletions
--- a/src/components/Form/src/jeecg/components/JCheckbox.vue
+++ b/src/components/Form/src/jeecg/components/JCheckbox.vue
@ -1,21 +1,22 @@
 <template>
  <a-checkbox-group v-bind="attrs" v-model:value="checkboxArray" :options="checkOptions" @change="handleChange">
-    <template #label="{label, value}">
-      <span :class="[useDicColor && getDicColor(value) ? 'colorText' : '']" :style="{ backgroundColor: `${getDicColor(value)}` }">{{ label }}</span>
+    <template #label="{ label, value }">
+      <span :class="[useDicColor && getDicColor(value) ? 'colorText' : '']"
+        :style="{ backgroundColor: `${getDicColor(value)}` }">{{ label }}</span>
    </template>
  </a-checkbox-group>
 </template>

 <script lang="ts">
-  import { defineComponent, computed, watch, watchEffect, ref, unref } from 'vue';
-  import { propTypes } from '/@/utils/propTypes';
-  import { useAttrs } from '/@/hooks/core/useAttrs';
-  import {getDictItems} from "@/api/common/api";
+import { defineComponent, computed, watch, watchEffect, ref, unref } from 'vue';
+import { propTypes } from '/@/utils/propTypes';
+import { useAttrs } from '/@/hooks/core/useAttrs';
+import { getDictItems } from "@/api/common/api";

-  export default defineComponent({
+export default defineComponent({
  name: 'JCheckbox',
  props: {
-      value:propTypes.oneOfType([propTypes.string, propTypes.number]),
+    value: propTypes.oneOfType([propTypes.string, propTypes.number]),
    dictCode: propTypes.string,
    useDicColor: propTypes.bool.def(false),
    options: {
@ -36,9 +37,9 @@
    watchEffect(() => {
      //update-begin-author:taoyan date:2022-7-4 for:issues/I5E7YX AUTO在线表单进入功能测试之后一直卡在功能测试界面
      let temp = props.value;
-        if(!temp && temp!==0){
+      if (!temp && temp !== 0) {
        checkboxArray.value = []
-        }else{
+      } else {
        temp = temp + '';
        checkboxArray.value = temp.split(',')
      }
@ -54,6 +55,7 @@
     */
    watchEffect(() => {
      props && initOptions();
+      checkboxArray.value && loadDictOptions()
    });

    /**
@ -82,7 +84,7 @@
      //update-end-author:taoyan date:2022-6-21 for: 字典数据请求前将参数编码处理，但是不能直接编码，因为可能之前已经编码过了
      getDictItems(temp).then((res) => {
        if (res) {
-            checkOptions.value = res.map((item) => ({value: item.value, label: item.text, color: item.color}));
+          checkOptions.value = res.map((item) => ({ value: item.value, label: item.text, disabled: item.status != 0 && !checkboxArray.value.includes(item.value), color: item.color }));
          //console.info('res', dictOptions.value);
        } else {
          console.error('getDictItems error: : ', res);
@ -110,11 +112,11 @@
    };
    return { checkboxArray, checkOptions, attrs, handleChange, getDicColor };
  },
-  });
+});
 </script>
 <style lang="less" scoped>
-  // update-begin--author:liaozhiyang---date:20230110---for：【QQYUN-7799】字典组件（原生组件除外）加上颜色配置
-  .colorText {
+// update-begin--author:liaozhiyang---date:20230110---for：【QQYUN-7799】字典组件（原生组件除外）加上颜色配置
+.colorText {
  display: inline-block;
  height: 20px;
  line-height: 20px;
@ -123,6 +125,6 @@
  background-color: red;
  color: #fff;
  font-size: 12px;
-  }
-  // update-begin--author:liaozhiyang---date:20230110---for：【QQYUN-7799】字典组件（原生组件除外）加上颜色配置
-</style>
+}
+
+// update-begin--author:liaozhiyang---date:20230110---for：【QQYUN-7799】字典组件（原生组件除外）加上颜色配置</style>
--- a/src/components/Form/src/jeecg/components/JDictSelectTag.vue
+++ b/src/components/Form/src/jeecg/components/JDictSelectTag.vue
@ -2,7 +2,7 @@
  <a-radio-group v-if="compType === CompTypeEnum.Radio" v-bind="attrs" v-model:value="state"
    @change="handleChangeRadio">
    <template v-for="item in dictOptions" :key="`${item.value}`">
-      <a-radio :value="item.value">
+      <a-radio :value="item.value" :disabled="item.disabled">
        <span :class="[useDicColor && item.color ? 'colorText' : '']"
          :style="{ backgroundColor: `${useDicColor && item.color}` }">
          {{ item.label }}
@ -14,7 +14,7 @@
  <a-radio-group v-else-if="compType === CompTypeEnum.RadioButton" v-bind="attrs" v-model:value="state"
    buttonStyle="solid" @change="handleChangeRadio">
    <template v-for="item in dictOptions" :key="`${item.value}`">
-      <a-radio-button :value="item.value">
+      <a-radio-button :value="item.value" :disabled="item.disabled">
        {{ item.label }}
      </a-radio-button>
    </template>
@ -31,10 +31,10 @@
      :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="item.disabled">
+        <a-select-option :value="item.value" :disabled="!ignoreDisabled && item.disabled">
          <span :class="[useDicColor && item.color ? 'colorText' : '']"
            :style="{ backgroundColor: `${useDicColor && item.color}` }" :title="item.label">
-            {{ item.label }}
+            {{ item.label }}<span style="color:rgb(255 39 39);">{{ ignoreDisabled && item.disabled ? '(已停用)' : '' }}</span>
          </span>
        </a-select-option>
      </template>
@ -75,6 +75,7 @@ export default defineComponent({
      required: false,
    },
    style: propTypes.any,
+    ignoreDisabled: propTypes.bool.def(false),
  },
  emits: ['options-change', 'change', 'update:value'],
  setup(props, { emit, refs }) {
@ -133,7 +134,7 @@ export default defineComponent({
          prev.push({
            label: next['text'] || next['label'],
            value: stringToNumber ? +value : value,
-            disabled:next['status'] != 0,
+            disabled: next['status'] != 0,
            color: next['color'],
            ...omit(next, ['text', 'value', 'color']),
          });
--- a/src/views/config/directiveTag/DirectiveTagList.vue
+++ b/src/views/config/directiveTag/DirectiveTagList.vue
@ -15,7 +15,7 @@
            <a-form-item name="izEnabled">
              <template #label><span title="是否启用">是否启用</span></template>
              <j-dict-select-tag type='list' v-model:value="queryParam.izEnabled" dictCode="iz_enabled"
-                placeholder="请选择是否启用" allowClear />
+                :ignoreDisabled="true" placeholder="请选择是否启用" allowClear />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
--- a/src/views/config/serviceCategory/ConfigServiceCategoryList.vue
+++ b/src/views/config/serviceCategory/ConfigServiceCategoryList.vue
@ -15,7 +15,7 @@
            <a-form-item name="izEnabled">
              <template #label><span title="是否启用">是否启用</span></template>
              <j-dict-select-tag type='list' v-model:value="queryParam.izEnabled" dictCode="iz_enabled"
-                placeholder="请选择是否启用" allowClear />
+                :ignoreDisabled="true" placeholder="请选择是否启用" allowClear />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
--- a/src/views/config/serviceDirective/ConfigServiceDirectiveList.vue
+++ b/src/views/config/serviceDirective/ConfigServiceDirectiveList.vue
@ -10,7 +10,7 @@
              <template #label><span title="服务类别">服务类别</span></template>
              <j-dict-select-tag type="list" v-model:value="queryParam.categoryId"
                :dictCode="`config_service_category,category_name,id,del_flag = 0 order by sort asc`"
-                placeholder="请选择服务类别" allow-clear />
+                :ignoreDisabled="true" placeholder="请选择服务类别" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :lg="6">
@ -18,7 +18,7 @@
              <template #label><span title="服务类型">服务类型</span></template>
              <j-dict-select-tag type="list" v-model:value="queryParam.typeId"
                :dictCode="`config_service_type,type_name,id,del_flag = 0 order by sort asc`" placeholder="请选择服务类型"
-                allowClear />
+                :ignoreDisabled="true" allowClear />
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
@ -26,7 +26,7 @@
              <a-form-item name="instructionTagId">
                <template #label><span title="指令标签">指令标签</span></template>
                <j-dict-select-tag v-model:value="queryParam.instructionTagId" dictCode="instruction_tag"
-                  placeholder="请选择指令标签" allowClear />
+                  :ignoreDisabled="true" placeholder="请选择指令标签" allowClear />
              </a-form-item>
            </a-col>
            <a-col :lg="6">
@ -51,34 +51,34 @@
              <a-form-item name="izReimbursement">
                <template #label><span title="医保报销">医保报销</span></template>
                <j-dict-select-tag type='list' v-model:value="queryParam.izReimbursement" dictCode="med_ins_reimb"
-                  placeholder="请选择医保报销" allowClear />
+                  :ignoreDisabled="true" placeholder="请选择医保报销" allowClear />
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item name="izPreferential">
                <template #label><span title="机构优惠">机构优惠</span></template>
                <j-dict-select-tag type='list' v-model:value="queryParam.izPreferential"
-                  dictCode="institutional_discount" placeholder="请选择机构优惠" allowClear />
+                  dictCode="institutional_discount" :ignoreDisabled="true" placeholder="请选择机构优惠" allowClear />
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item name="chargingFrequency">
                <template #label><span title="收费频次">收费频次</span></template>
-                <j-dict-select-tag type="list" v-model:value="queryParam.chargingFrequency" dictCode="billing_frequency"
+                <j-dict-select-tag type="list" v-model:value="queryParam.chargingFrequency" dictCode="billing_frequency" :ignoreDisabled="true"
                  placeholder="请选择收费频次" allowClear />
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item name="cycleType">
                <template #label><span title="周期类型">周期类型</span></template>
-                <j-dict-select-tag type="list" v-model:value="queryParam.cycleType" dictCode="period_type"
+                <j-dict-select-tag type="list" v-model:value="queryParam.cycleType" dictCode="period_type" :ignoreDisabled="true"
                  placeholder="请选择周期类型" allowClear />
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item name="izEnabled">
                <template #label><span title="是否启用">是否启用</span></template>
-                <j-dict-select-tag type='list' v-model:value="queryParam.izEnabled" dictCode="iz_enabled"
+                <j-dict-select-tag type='list' v-model:value="queryParam.izEnabled" dictCode="iz_enabled" :ignoreDisabled="true"
                  placeholder="请选择是否启用" allowClear />
              </a-form-item>
            </a-col>
--- a/src/views/config/serviceType/ConfigServiceTypeList.vue
+++ b/src/views/config/serviceType/ConfigServiceTypeList.vue
@ -10,7 +10,7 @@
              <template #label><span title="服务类别">服务类别</span></template>
              <j-dict-select-tag type='list' v-model:value="queryParam.categoryId"
                :dictCode="`config_service_category,category_name,id,del_flag = 0 order by sort asc`"
-                placeholder="请选择服务类别" allowClear />
+                :ignoreDisabled="true" placeholder="请选择服务类别" allowClear />
            </a-form-item>
          </a-col>
          <a-col :lg="6">
@ -24,7 +24,7 @@
              <a-form-item name="izEnabled">
                <template #label><span title="是否启用">是否启用</span></template>
                <j-dict-select-tag type='list' v-model:value="queryParam.izEnabled" dictCode="iz_enabled"
-                  placeholder="请选择是否启用" allowClear />
+                  :ignoreDisabled="true" placeholder="请选择是否启用" allowClear />
              </a-form-item>
            </a-col>
          </template>
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@ -18,8 +18,7 @@
            </a-menu-item>
          </a-menu>
        </template>
-        <a-button
-          >批量操作
+        <a-button>批量操作
          <Icon icon="ant-design:down-outlined"></Icon>
        </a-button>
      </a-dropdown>
@ -38,33 +37,33 @@
 </template>

 <script lang="ts" name="system-dict" setup>
-  //ts语法
-  import { ref, computed, unref } from 'vue';
-  import { BasicTable, TableAction } from '/src/components/Table';
-  import { useDrawer } from '/src/components/Drawer';
-  import { useModal } from '/src/components/Modal';
-  import DictItemList from './components/DictItemList.vue';
-  import DictModal from './components/DictModal.vue';
-  import DictRecycleBinModal from './components/DictRecycleBinModal.vue';
-  import { useMessage } from '/src/hooks/web/useMessage';
-  import { removeAuthCache, setAuthCache } from '/src/utils/auth';
-  import { columns, searchFormSchema } from './dict.data';
-  import { list, deleteDict, batchDeleteDict, getExportUrl, getImportUrl, refreshCache, queryAllDictItems } from './dict.api';
-  import { DB_DICT_DATA_KEY } from '/src/enums/cacheEnum';
-  import { useUserStore } from '/@/store/modules/user';
+//ts语法
+import { ref, computed, unref } from 'vue';
+import { BasicTable, TableAction } from '/src/components/Table';
+import { useDrawer } from '/src/components/Drawer';
+import { useModal } from '/src/components/Modal';
+import DictItemList from './components/DictItemList.vue';
+import DictModal from './components/DictModal.vue';
+import DictRecycleBinModal from './components/DictRecycleBinModal.vue';
+import { useMessage } from '/src/hooks/web/useMessage';
+import { removeAuthCache, setAuthCache } from '/src/utils/auth';
+import { columns, searchFormSchema } from './dict.data';
+import { list, deleteDict, batchDeleteDict, getExportUrl, getImportUrl, refreshCache, queryAllDictItems } from './dict.api';
+import { DB_DICT_DATA_KEY } from '/src/enums/cacheEnum';
+import { useUserStore } from '/@/store/modules/user';

-  const { createMessage } = useMessage();
-  //字典model
-  const [registerModal, { openModal }] = useModal();
-  //字典配置drawer
-  const [registerDrawer, { openDrawer }] = useDrawer();
-  import { useListPage } from '/@/hooks/system/useListPage';
+const { createMessage } = useMessage();
+//字典model
+const [registerModal, { openModal }] = useModal();
+//字典配置drawer
+const [registerDrawer, { openDrawer }] = useDrawer();
+import { useListPage } from '/@/hooks/system/useListPage';

-  //回收站model
-  const [registerModal1, { openModal: openRecycleModal }] = useModal();
+//回收站model
+const [registerModal1, { openModal: openRecycleModal }] = useModal();

-  // 列表页面公共参数、方法
-  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+// 列表页面公共参数、方法
+const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
  designScope: 'dict-template',
  tableProps: {
    title: '数据字典',
@ -86,47 +85,47 @@
    url: getImportUrl,
  },
  //update-end---author:wangshuai ---date:20220616  for：[issues/I5AMDD]导入/导出功能，操作后提示没有传递 export.url/import.url 参数--------------
-  });
+});

-  //注册table数据
-  const [registerTable, { reload, updateTableDataRecord }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
+//注册table数据
+const [registerTable, { reload, updateTableDataRecord }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;

-  /**
+/**
 * 新增事件
 */
-  function handleCreate() {
+function handleCreate() {
  openModal(true, {
    isUpdate: false,
  });
-  }
-  /**
+}
+/**
 * 编辑事件
 */
-  async function handleEdit(record: Recordable) {
+async function handleEdit(record: Recordable) {
  openModal(true, {
    record,
    isUpdate: true,
  });
-  }
-  /**
+}
+/**
 * 详情
 */
-  async function handleDetail(record) {
+async function handleDetail(record) {
  openModal(true, {
    record,
    isUpdate: true,
  });
-  }
-  /**
+}
+/**
 * 删除事件
 */
-  async function handleDelete(record) {
+async function handleDelete(record) {
  await deleteDict({ id: record.id }, reload);
-  }
-  /**
+}
+/**
 * 批量删除事件
 */
-  async function batchHandleDelete() {
+async function batchHandleDelete() {
  await batchDeleteDict({ ids: selectedRowKeys.value }, () => {
    // update-begin--author:liaozhiyang---date:20240701---for：【TV360X-1665】数据字典批量删除后选中也清空
    reload();
@ -134,21 +133,21 @@
    selectedRows.value = [];
    // update-end--author:liaozhiyang---date:20240701---for：【TV360X-1665】数据字典批量删除后选中也清空
  });
-  }
-  /**
+}
+/**
 * 成功回调
 */
-  function handleSuccess({ isUpdate, values }) {
+function handleSuccess({ isUpdate, values }) {
  if (isUpdate) {
    updateTableDataRecord(values.id, values);
  } else {
    reload();
  }
-  }
-  /**
+}
+/**
 * 刷新缓存
 */
-  async function handlerRefreshCache() {
+async function handlerRefreshCache() {
  const result = await refreshCache();
  if (result.success) {
    const res = await queryAllDictItems();
@ -161,19 +160,19 @@
  } else {
    createMessage.error('刷新缓存失败！');
  }
-  }
-  /**
+}
+/**
 * 字典配置
 */
-  function handleItem(record) {
+function handleItem(record) {
  openDrawer(true, {
    id: record.id,
  });
-  }
-  /**
+}
+/**
 * 操作栏
 */
-  function getTableAction(record) {
+function getTableAction(record) {
  return [
    {
      label: '编辑',
@ -191,7 +190,7 @@
      },
    },
  ];
-  }
+}
 </script>

 <style scoped></style>