字典选择组件默认过滤禁用字典

suyuan32 · Jun 23, 2024 · 9c9a34c · 9c9a34c
1 parent 54de635
commit 9c9a34c
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 55 deletions.
diff --git a/src/components/Form/src/components/DictionarySelect.vue b/src/components/Form/src/components/DictionarySelect.vue
@@ -15,66 +15,68 @@
   </Select>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, watch, onMounted } from 'vue';
-  import { Select } from 'ant-design-vue';
-  import { useAttrs } from '@vben/hooks';
-  import { LoadingOutlined } from '@ant-design/icons-vue';
-  import { useI18n } from '@/hooks/web/useI18n';
-  import { propTypes } from '@/utils/propTypes';
-  import { useDictionaryStore } from '@/store/modules/dictionary';
-  import { DefaultOptionType } from 'ant-design-vue/lib/select';
-  import { useRuleFormItem } from '@/hooks/component/useFormItem';
+import { defineComponent, ref, watch, onMounted } from 'vue';
+import { Select } from 'ant-design-vue';
+import { useAttrs } from '@vben/hooks';
+import { LoadingOutlined } from '@ant-design/icons-vue';
+import { useI18n } from '@/hooks/web/useI18n';
+import { propTypes } from '@/utils/propTypes';
+import { useDictionaryStore } from '@/store/modules/dictionary';
+import { DefaultOptionType } from 'ant-design-vue/lib/select';
+import { useRuleFormItem } from '@/hooks/component/useFormItem';
 
-  export default defineComponent({
-    name: 'DictionarySelect',
-    components: {
-      Select,
-      LoadingOutlined,
-    },
-    inheritAttrs: false,
-    props: {
-      dictionaryName: propTypes.string.def(''),
-      value: [String, Number],
-      cache: propTypes.bool.def(true),
-    },
-    emits: ['options-change', 'change', 'update:value'],
-    setup(props, { emit }) {
-      const loading = ref(false);
-      const emitData = ref<any[]>([]);
-      const attrs = useAttrs();
-      const { t } = useI18n();
-      const options = ref<DefaultOptionType[]>();
+export default defineComponent({
+  name: 'DictionarySelect',
+  components: {
+    Select,
+    LoadingOutlined,
+  },
+  inheritAttrs: false,
+  props: {
+    dictionaryName: propTypes.string.def(''),
+    value: [String, Number],
+    cache: propTypes.bool.def(true),
+  },
+  emits: ['options-change', 'change', 'update:value'],
+  setup(props, { emit }) {
+    const loading = ref(false);
+    const emitData = ref<any[]>([]);
+    const attrs = useAttrs();
+    const { t } = useI18n();
+    const options = ref<DefaultOptionType[]>();
 
-      // Embedded in the form, just use the hook binding to perform form verification
-      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+    // Embedded in the form, just use the hook binding to perform form verification
+    const [state] = useRuleFormItem(props, 'value', 'change', emitData);
 
-      onMounted(() => {
-        handleFetch();
-      });
+    onMounted(() => {
+      handleFetch();
+    });
 
-      watch(
-        () => state.value,
-        (v) => {
-          emit('update:value', v);
-        },
-      );
+    watch(
+      () => state.value,
+      (v) => {
+        emit('update:value', v);
+      },
+    );
 
-      async function handleFetch() {
-        loading.value = true;
-        const dictStore = useDictionaryStore();
-        const dictData = await dictStore.getDictionary(props.dictionaryName, props.cache);
-        if (dictData != null) {
-          options.value = dictData.data;
-        }
-        loading.value = false;
+    async function handleFetch() {
+      loading.value = true;
+      const dictStore = useDictionaryStore();
+      const dictData = await dictStore.getDictionary(props.dictionaryName, props.cache);
+      if (dictData != null) {
+        options.value = dictData.data.filter(el => {
+          return el.status == 1
+        });
       }
+      loading.value = false;
+    }
 
-      function handleChange(_, ...args) {
-        emitData.value = args;
-        emit('change', args);
-      }
+    function handleChange(_, ...args) {
+      emitData.value = args;
+      emit('change', args);
+    }
 
-      return { state, attrs, loading, t, options, handleFetch, handleChange };
-    },
-  });
+    return { state, attrs, loading, t, options, handleFetch, handleChange };
+  },
+});
 </script>
diff --git a/src/store/modules/dictionary.ts b/src/store/modules/dictionary.ts
@@ -4,8 +4,12 @@ import { DefaultOptionType } from 'ant-design-vue/lib/select';
 import { ref } from 'vue';
 import { DICT_INFO_KEY } from '@/enums/cacheEnum';
 
+interface DictionaryDataDefaultOptionType extends DefaultOptionType {
+  status?: string | number | null;
+}
+
 interface DictionaryData {
-  data: DefaultOptionType[];
+  data: DictionaryDataDefaultOptionType[];
 }
 
 const requestCache = new Map<
@@ -61,6 +65,7 @@ export const useDictionaryStore = defineStore({
           dataConv.value.push({
             label: result.data.data[i].title,
             value: result.data.data[i].value,
+            status: result.data.data[i].status,
           });
         }