小区，建筑，楼层

apps/web-antd/src/views/property/greenPlantRentalManagement/productManagement/data.ts

@@ -31,8 +31,13 @@ export const querySchema: FormSchemaGetter = () => [
 export const columns: VxeGridProps['columns'] = [
   { type: 'checkbox', width: 60 },
   {
-    title: '主键',
+    title: '序号',
     field: 'id',
+    slots: {
+      default: ({ rowIndex }) => {
+        return (rowIndex + 1).toString();
+      },
+    },
   },
   {
     title: '产品编号',
@@ -114,7 +119,10 @@ export const modalSchema: FormSchemaGetter = () => [
   {
     label: '产品分类',
     fieldName: 'plantType',
-    component: 'Input',
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('pro_product_classification'),
+    },
     rules: 'required',
   },
   {

apps/web-antd/src/views/property/greenPlantRentalManagement/productManagement/index.vue

@@ -17,8 +17,11 @@ import {
 import type { PropertyForm } from '#/api/property/productManagement/model';
 import { commonDownloadExcel } from '#/utils/file/download';
 
-import propertyModal from './property-modal.vue';
+import PlantsProductModal from './plantsProduct-modal.vue';
+import PlantsProductDetail from './plantsProduct-detail.vue';
 import { columns, querySchema } from './data';
+import unitInfoModal from "#/views/property/resident/unit/unit-detail.vue";
+import type {Resident_unitForm} from "#/api/property/resident/unit/model";
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -78,10 +81,18 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
   gridOptions,
 });
 
-const [PropertyModal, modalApi] = useVbenModal({
-  connectedComponent: propertyModal,
+const [PlantsProduct, modalApi] = useVbenModal({
+  connectedComponent: PlantsProductModal,
 });
 
+const [PlantsProductDetailModal, PlantsProductDetailApi] = useVbenModal({
+  connectedComponent: PlantsProductDetail,
+});
+async function handleInfo(row: Required<PropertyForm>) {
+  PlantsProductDetailApi.setData({ id: row.id });
+  PlantsProductDetailApi.open();
+}
+
 function handleAdd() {
   modalApi.setData({});
   modalApi.open();
@@ -148,6 +159,11 @@ function handleDownloadExcel() {
       </template>
       <template #action="{ row }">
         <Space>
+          <ghost-button
+            @click.stop="handleInfo(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
           <ghost-button
             v-access:code="['property:property:edit']"
             @click.stop="handleEdit(row)"
@@ -171,6 +187,7 @@ function handleDownloadExcel() {
         </Space>
       </template>
     </BasicTable>
-    <PropertyModal @reload="tableApi.query()" />
+    <PlantsProduct @reload="tableApi.query()" />
+    <PlantsProductDetailModal/>
   </Page>
 </template>

apps/web-antd/src/views/property/greenPlantRentalManagement/productManagement/plantsProduct-detail.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type {plantsProduct} from '#/api/property/productManagement/model';
+import {shallowRef} from 'vue';
+import {useVbenModal} from '@vben/common-ui';
+import {Descriptions, DescriptionsItem} from 'ant-design-vue';
+import {visitorManagementInfo} from '#/api/property/visitorManagement';
+import {renderDict} from "#/utils/render";
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    plantsProductDetail.value = null;
+  },
+});
+
+const plantsProductDetail = shallowRef<null | plantsProduct>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const {id} = modalApi.getData() as { id: number | string };
+  const response = await visitorManagementInfo(id);
+  // 赋值
+  plantsProductDetail.value = response;
+  modalApi.modalLoading(false);
+}
+</script>
+
+<template>
+  <BasicModal :footer="false" :fullscreen-button="false" title="产品管理信息" class="w-[70%]">
+    <Descriptions v-if="plantsProductDetail" size="small" :column="2" bordered :labelStyle="{width:'100px'}">
+      <DescriptionsItem label="产品编号">
+        {{ plantsProductDetail.plantCode }}
+      </DescriptionsItem>
+      <DescriptionsItem label="产品名称">
+        {{ plantsProductDetail.plantName }}
+      </DescriptionsItem>
+      <DescriptionsItem label="产品分类" v-if="plantsProductDetail.plantType!=null">
+        <component
+          :is="renderDict(plantsProductDetail.plantType,'pro_product_classification')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="图片">
+        {{ plantsProductDetail.imgPath }}
+      </DescriptionsItem>
+      <DescriptionsItem label="规格">
+        {{ plantsProductDetail.specification }}
+      </DescriptionsItem>
+      <DescriptionsItem label="租金">
+        {{ plantsProductDetail.rent }}
+      </DescriptionsItem>
+      <DescriptionsItem label="库存数量">
+        {{ plantsProductDetail.inventory }}
+      </DescriptionsItem>
+      <DescriptionsItem label="状态" v-if="plantsProductDetail.state!=null">
+        <component
+          :is="renderDict(plantsProductDetail.state,'product_management_status')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="备注">
+        {{ plantsProductDetail.remark }}
+      </DescriptionsItem>
+      <DescriptionsItem label="创建时间">
+        {{ plantsProductDetail.createTime }}
+      </DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template>