feat: 设备表单增加产品选择功能

- 为设备表单添加产品选择弹窗组件
- 实现产品选择后的数据回填和图片自动设置
- 禁用编辑模式下的产品字段
- 移除旧的产品下拉选项变更逻辑
- 添加产品选择相关的状态管理和事件处理
- 更新表单架构以支持产品选择按钮渲染

apps/web-antd/src/components/product-select/data.ts

@@ -33,10 +33,12 @@ export const querySchema: FormSchemaGetter = () => [
   {
     component: 'Select',
     componentProps: {
+      allowClear: true,
       options: enabledOptions,
     },
     fieldName: 'enabled',
     label: '启用状态',
+    defaultValue: '1',
   },
 ];
 

apps/web-antd/src/views/application/platform/platform-drawer.vue

@@ -123,9 +123,8 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
     const { id } = drawerApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
 
-    const record = await platformInfo(id);
-
     if (isUpdate.value && id) {
+      const record = await platformInfo(id);
       formApi.setState((prev) => {
         const currentSchema = prev?.schema ?? [];
         const newSchema = [];

apps/web-antd/src/views/device/device/data.ts

@@ -105,6 +105,7 @@ export const drawerSchema: FormSchemaGetter = () => [
   {
     label: '所属产品',
     fieldName: 'productId',
+    disabled: true,
     component: 'Select',
     componentProps: {},
     rules: 'selectRequired',

apps/web-antd/src/views/device/device/device-drawer.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import type { ProductVO } from '#/api/device/product/model';
+
+import { computed, defineAsyncComponent, h, ref } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 import { cloneDeep } from '@vben/utils';
 
+import { Modal } from 'ant-design-vue';
+
 import { useVbenForm } from '#/adapter/form';
 import { deviceAdd, deviceInfo, deviceUpdate } from '#/api/device/device';
 import { productList } from '#/api/device/product';
@@ -15,6 +19,10 @@ import { drawerSchema } from './data';
 
 const emit = defineEmits<{ reload: [] }>();
 
+const ProductSelectTable = defineAsyncComponent(
+  () => import('../../../components/product-select/product-select-table.vue'),
+);
+
 const deviceStore = useDeviceStore();
 
 const isUpdate = ref(false);
@@ -22,6 +30,34 @@ const title = computed(() => {
   return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
 });
 
+// 产品选择相关状态
+const productSelectModalVisible = ref(false);
+const selectedProduct = ref<[] | ProductVO>([]);
+
+const schema = drawerSchema().map((item) => {
+  if (item.fieldName === 'productId') {
+    return {
+      ...item,
+      // renderComponentContent: (model) => ({
+      //   addonAfter: () =>
+      //     h('button', { onClick: openProductSelectModal }, '选择产品'),
+      // }),
+      suffix: () =>
+        h(
+          'button',
+          {
+            class:
+              'w-[100px] bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded transition duration-200',
+            type: 'primary',
+            onClick: openProductSelectModal,
+          },
+          '选择产品',
+        ),
+    };
+  }
+  return item;
+});
+
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     // 默认占满两列
@@ -33,7 +69,7 @@ const [BasicForm, formApi] = useVbenForm({
       class: 'w-full',
     },
   },
-  schema: drawerSchema(),
+  schema,
   showDefaultActions: false,
   wrapperClass: 'grid-cols-2',
 });
@@ -68,6 +104,28 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
     if (isUpdate.value && id) {
       const record = await deviceInfo(id);
       await formApi.setValues(record);
+      // 编辑时回显选中的产品
+      if (record.productId) {
+        // 这里需要根据productId获取产品信息，暂时设置为空，后续可以通过API获取
+        selectedProduct.value = [
+          {
+            id: record.productId,
+            productName: record.productObj?.productName || '已选择产品',
+            imgId: record.imgId,
+          },
+        ] as ProductVO[];
+        // 更新按钮显示文本
+        // formApi.updateSchema([
+        //   {
+        //     componentProps: {
+        //       disabled: isUpdate.value,
+        //       onClick: openProductSelectModal,
+        //       placeholder: selectedProduct.value[0].productName,
+        //     },
+        //     fieldName: 'productId',
+        //   },
+        // ]);
+      }
     } else {
       await formApi.setFieldValue('imgId', deviceStore.getDefaultDeviceImgId);
     }
@@ -105,14 +163,68 @@ async function handleConfirm() {
 async function handleClosed() {
   await formApi.resetForm();
   resetInitialized();
+  // 重置产品选择状态
+  selectedProduct.value = [];
+  productSelectModalVisible.value = false;
 }
 
+// 产品选择相关事件处理
+const openProductSelectModal = () => {
+  const { id } = drawerApi.getData() as { id?: number | string };
+  if (id) {
+    Modal.error({
+      title: '不可编辑产品',
+    });
+  } else {
+    productSelectModalVisible.value = true;
+  }
+};
+
+const onProductChange = (products: ProductVO[]) => {
+  if (products.length > 0) {
+    selectedProduct.value = products;
+    // 设置表单值
+    formApi.setFieldValue('productId', products[0].id);
+    // 自动设置设备图片
+    formApi.setFieldValue('imgId', products[0].imgId || '');
+    // 更新按钮显示文本
+    // formApi.updateSchema([
+    //   {
+    //     renderComponentContent: (model) => ({
+    //       addonAfter: () =>
+    //         h(
+    //           'button',
+    //           {
+    //             onClick: openProductSelectModal,
+    //           },
+    //           '选择产品',
+    //         ),
+    //     }),
+    //     fieldName: 'productId',
+    //   },
+    // ]);
+  }
+};
+
+const okProductSelectModal = () => {
+  if (selectedProduct.value.length > 0) {
+    productSelectModalVisible.value = false;
+  } else {
+    Modal.error({
+      title: '请选择产品',
+    });
+  }
+};
+
+const closeProductSelectModal = () => {
+  productSelectModalVisible.value = false;
+};
+
 async function getProductOptionList() {
   try {
     const res = await productList({
       pageNum: 1,
       pageSize: 1000,
-      enabled: '1',
     });
 
     const productOptions = res.rows.map((item) => ({
@@ -128,15 +240,6 @@ async function getProductOptionList() {
         componentProps: {
           options: productOptions || [],
           placeholder,
-          onChange: (value: number | string) => {
-            // 当产品选择变化时，自动设置设备图片
-            if (value) {
-              const selectedProduct = productOptions.find(
-                (option) => option.value === value,
-              );
-              formApi.setFieldValue('imgId', selectedProduct?.imgId || '');
-            }
-          },
         },
         fieldName: 'productId',
       },
@@ -150,5 +253,23 @@ async function getProductOptionList() {
 <template>
   <BasicDrawer :title="title">
     <BasicForm />
+
+    <!-- 产品选择弹窗 -->
+    <Modal
+      title="产品选择"
+      :open="productSelectModalVisible"
+      :width="1100"
+      destroy-on-close
+      @ok="okProductSelectModal"
+      @cancel="closeProductSelectModal"
+    >
+      <div>
+        <ProductSelectTable
+          v-model="selectedProduct"
+          :multiple="false"
+          @change="onProductChange"
+        />
+      </div>
+    </Modal>
   </BasicDrawer>
 </template>