feat: 产品管理中，机具类型和类别改为获取动态字典值

apps/web-ele/src/views/product-manage/form.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script lan,="ts" setup>
 import type { ProductEntity } from '@vben/types';
 
 import { computed, ref } from 'vue';
@@ -8,6 +8,7 @@ import { useVbenModal } from '@vben/common-ui';
 import { ElMessage } from 'element-plus';
 
 import { useVbenForm, z } from '#/adapter/form';
+import { getDictListApi } from '#/api/dict';
 import {
   addProductApi,
   editProductApi,
@@ -26,6 +27,8 @@ const data = ref();
 const formType = ref<'create' | 'detail' | 'edit'>('create');
 const channelOptions = ref<{ label: string; value: string }[]>([]);
 const scqyOptions = ref<{ label: string; value: string }[]>([]);
+const jjlxOptions = ref<{ label: string; value: string }[]>([]);
+const cplbOptions = ref<{ label: string; value: string }[]>([]);
 
 // 获取渠道商列表
 const fetchChannelOptions = async () => {
@@ -74,6 +77,26 @@ const fetchScqyOptions = async () => {
   }
 };
 
+const fetchDictOptions = async () => {
+  try {
+    const [jjlxRes, cplbRes] = await Promise.all([
+      getDictListApi({ groupname: 'product_jjlx', rows: 999, pageindex: 1 }),
+      getDictListApi({ groupname: 'product_cplb', rows: 999, pageindex: 1 }),
+    ]);
+
+    jjlxOptions.value = (jjlxRes.Data || []).map((item: any) => ({
+      label: item.title,
+      value: item.substance,
+    }));
+    cplbOptions.value = (cplbRes.Data || []).map((item: any) => ({
+      label: item.title,
+      value: item.substance,
+    }));
+  } catch (error) {
+    console.error('获取字典数据失败', error);
+  }
+};
+
 const titleMap = {
   create: '新增产品',
   detail: '产品详情',
@@ -92,14 +115,6 @@ const hasDefaultMerchantId = computed(() => {
   );
 });
 
-// 获取默认渠道商ID的数组形式
-const defaultMerchantIdArray = computed(() => {
-  if (!props.defaultMerchantId) return [];
-  return Array.isArray(props.defaultMerchantId)
-    ? props.defaultMerchantId
-    : [props.defaultMerchantId];
-});
-
 const [BaseForm, baseFormApi] = useVbenForm({
   showDefaultActions: false,
   // 所有表单项共用，可单独在表单内覆盖
@@ -126,14 +141,15 @@ const [BaseForm, baseFormApi] = useVbenForm({
     // { title: '特殊县中央补贴金额', field: 'productstsxzybt' },
     // { title: '机具类型', field: 'productsjjlx' },
     {
-      component: 'Input',
+      component: 'Select',
       fieldName: 'productsjjlx',
       label: '机具类型',
       componentProps: {
-        placeholder: '请输入机具类型',
+        placeholder: '请选择机具类型',
         allowClear: true,
+        options: jjlxOptions,
       },
-      rules: z.string().min(1, { message: '请输入机具类型' }),
+      rules: z.string().min(1, { message: '请选择机具类型' }),
     },
     {
       component: 'Input',
@@ -146,14 +162,26 @@ const [BaseForm, baseFormApi] = useVbenForm({
       rules: z.string().min(1, { message: '请输入产品名称' }),
     },
     {
-      component: 'Input',
+      component: 'Select',
       fieldName: 'productscategory',
       label: '产品类别',
       componentProps: {
-        placeholder: '请输入产品类别',
+        placeholder: '请选择产品类别',
         allowClear: true,
+        options: cplbOptions,
       },
-      rules: z.string().min(1, { message: '请输入产品类别' }),
+      rules: z.string().min(1, { message: '请选择产品类别' }),
+    },
+    {
+      component: 'Select',
+      fieldName: 'productsfl1',
+      label: '一级分类',
+      componentProps: {
+        placeholder: '请选择一级分类',
+        allowClear: true,
+        options: cplbOptions,
+      },
+      rules: z.string().min(1, { message: '请输入一级分类' }),
     },
     {
       component: 'Input',
@@ -223,26 +251,16 @@ const [BaseForm, baseFormApi] = useVbenForm({
       },
       rules: z.string().min(1, { message: '请选择关联生产企业' }),
     },
-    {
-      component: 'Input',
-      fieldName: 'productsfl1',
-      label: '一级分类',
-      componentProps: {
-        placeholder: '请输入一级分类',
-        allowClear: true,
-      },
-      rules: z.string().min(1, { message: '请输入一级分类' }),
-    },
-    {
-      component: 'Input',
-      fieldName: 'productsfl2',
-      label: '二级分类',
-      componentProps: {
-        placeholder: '请输入二级分类',
-        allowClear: true,
-      },
-      // rules: z.string().min(1, { message: '请输入二级分类' }),
-    },
+    // {
+    //   component: 'Input',
+    //   fieldName: 'productsfl2',
+    //   label: '二级分类',
+    //   componentProps: {
+    //     placeholder: '请输入二级分类',
+    //     allowClear: true,
+    //   },
+    //   // rules: z.string().min(1, { message: '请输入二级分类' }),
+    // },
     // {
     //   component: 'Input',
     //   fieldName: 'productsfdmc',
@@ -350,7 +368,11 @@ const [Modal, modalApi] = useVbenModal({
       });
 
       // 获取渠道商列表和生产企业列表
-      await Promise.all([fetchChannelOptions(), fetchScqyOptions()]);
+      await Promise.all([
+        fetchChannelOptions(),
+        fetchScqyOptions(),
+        fetchDictOptions(),
+      ]);
 
       // 如果有默认的渠道商ID，设置默认值
       if (hasDefaultMerchantId.value && data.value.formType === 'create') {

apps/web-ele/src/views/product-manage/index.vue

@@ -3,7 +3,7 @@ import type { VbenFormProps } from '@vben/common-ui';
 
 import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
 
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { MdiDelete, MdiDetail, MdiEdit } from '@vben/icons';
@@ -12,6 +12,7 @@ import { useUserStore } from '@vben/stores';
 import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDictListApi } from '#/api/dict';
 import {
   deleteProductApi,
   editProductApi,
@@ -30,6 +31,29 @@ const userStore = useUserStore();
 const addLinkModalRef = ref<InstanceType<typeof AddLinkModal>>();
 const detailModalRef = ref<InstanceType<typeof ProductDetail>>();
 
+const jjlxOptions = ref<any[]>([]);
+const cplbOptions = ref<any[]>([]);
+
+onMounted(async () => {
+  try {
+    const [jjlxRes, cplbRes] = await Promise.all([
+      getDictListApi({ groupname: 'product_jjlx', rows: 999, pageindex: 1 }),
+      getDictListApi({ groupname: 'product_cplb', rows: 999, pageindex: 1 }),
+    ]);
+
+    jjlxOptions.value = (jjlxRes.Data || []).map((item: any) => ({
+      label: item.title,
+      value: item.substance,
+    }));
+    cplbOptions.value = (cplbRes.Data || []).map((item: any) => ({
+      label: item.title,
+      value: item.substance,
+    }));
+  } catch (error) {
+    console.error('获取字典数据失败', error);
+  }
+});
+
 const formOptions: VbenFormProps = {
   // 默认展开
   collapsed: true,
@@ -57,12 +81,13 @@ const formOptions: VbenFormProps = {
       },
     },
     {
-      component: 'Input',
+      component: 'Select',
       fieldName: 'productsjjlx',
       label: '机具类型',
       componentProps: {
-        placeholder: $t('ui.placeholder.input'),
+        placeholder: $t('ui.placeholder.select'),
         clearable: true,
+        options: jjlxOptions,
       },
     },
     {
@@ -75,12 +100,13 @@ const formOptions: VbenFormProps = {
       },
     },
     {
-      component: 'Input',
+      component: 'Select',
       fieldName: 'productscategory',
       label: '产品类别',
       componentProps: {
-        placeholder: $t('ui.placeholder.input'),
+        placeholder: $t('ui.placeholder.select'),
         clearable: true,
+        options: cplbOptions,
       },
     },
   ],