feat:巡检点二维码

apps/web-antd/src/api/property/inspectionManagement/inspectionPoint/model.d.ts

@@ -46,6 +46,10 @@ export interface InspectionPointVO {
    */
   searchValue: string;
 
+  itemName: string;
+
+  createTime: string;
+
 }
 
 export interface InspectionPointForm extends BaseEntity {

apps/web-antd/src/views/property/assetManage/depot/data.ts

@@ -2,6 +2,8 @@ import type {FormSchemaGetter} from '#/adapter/form';
 import type {VxeGridProps} from '#/adapter/vxe-table';
 import {renderDict} from "#/utils/render";
 import {getDictOptions} from "#/utils/dict";
+import {z} from "#/adapter/form";
+import {$t} from "@vben/locales";
 
 
 export const querySchema: FormSchemaGetter = () => [
@@ -30,18 +32,10 @@ export const querySchema: FormSchemaGetter = () => [
 
 export const columns: VxeGridProps['columns'] = [
   {type: 'checkbox', width: 60},
-  {
-    title: '序号',
-    field: 'id',
-    slots: {
-      default: ({rowIndex}) => {
-        return (rowIndex + 1).toString();
-      }
-    }
-  },
   {
     title: '仓库名称',
     field: 'depotName',
+    width:200
   },
   {
     title: '仓库类型',
@@ -50,21 +44,23 @@ export const columns: VxeGridProps['columns'] = [
       default: ({row}) => {
         return renderDict(row.modelType, 'wy_cclx')
       }
-    }
+    },
+    width:180
   },
   {
     title: '状态',
     field: 'state',
-    slots: {default: 'state'}
+    slots: {default: 'state'},
+    width:120
+  },
+  {
+    title: '创建时间',
+    field: 'createTime',
   },
   {
     title: '描述信息',
     field: 'msg',
-  },
-
-  {
-    title: '创建时间',
-    field: 'createTime',
+    minWidth:180,
   },
   {
     field: 'action',
@@ -89,7 +85,7 @@ export const modalSchema: FormSchemaGetter = () => [
     label: '仓库名称',
     fieldName: 'depotName',
     component: 'Input',
-    rules:'required'
+    rules: z.string().min(1,'请输入仓库名称').max(30, { message: '仓库名称过长' }),
   },
   {
     label: '仓库类型',

apps/web-antd/src/views/property/community/data.ts

@@ -154,7 +154,7 @@ export const modalSchema: FormSchemaGetter = () => [
   {
     label: '占地面积',
     fieldName: 'area',
-    component: 'Input',
+    component: 'InputNumber',
   },
   {
     label: '建成时间',

apps/web-antd/src/views/property/inspectionManagement/inspectionPlan/data.ts

@@ -116,7 +116,7 @@ export const modalSchema: FormSchemaGetter = () => [
     label: '计划名称',
     fieldName: 'planName',
     component: 'Input',
-    rules: 'required',
+    rules: z.string().min(1,'请输入计划名称').max(30, { message: '计划名称过长' }),
   },
   {
     label: '巡检路线',

apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/data.ts

@@ -50,6 +50,13 @@ export const columns: VxeGridProps['columns'] = [
     title: '创建时间',
     field: 'createTime',
   },
+  {
+    title: '二维码',
+    field: 'qrcode',
+    slots:{
+      default: 'qrcode'
+    }
+  },
   {
     title: '备注',
     field: 'remark',

apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
-import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import { Modal, Popconfirm, Space,Popover,QRCode } from 'ant-design-vue';
 
 import {
   useVbenVxeGrid,
@@ -17,6 +17,8 @@ import type { InspectionPointForm } from '#/api/property/inspectionManagement/in
 
 import inspectionPointModal from './inspectionPoint-modal.vue';
 import { columns, querySchema } from './data';
+import pointDetail from './point-detail.vue';
+import {ref} from "vue";
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -80,6 +82,10 @@ const [InspectionPointModal, modalApi] = useVbenModal({
   connectedComponent: inspectionPointModal,
 });
 
+const [PointDetail, detailApi] = useVbenModal({
+  connectedComponent: pointDetail,
+});
+
 function handleAdd() {
   modalApi.setData({});
   modalApi.open();
@@ -89,6 +95,10 @@ async function handleEdit(row: Required<InspectionPointForm>) {
   modalApi.setData({ id: row.id });
   modalApi.open();
 }
+async function handleInfo(row: Required<InspectionPointForm>) {
+  detailApi.setData({ id: row.id });
+  detailApi.open();
+}
 
 async function handleDelete(row: Required<InspectionPointForm>) {
   await inspectionPointRemove(row.id);
@@ -108,6 +118,16 @@ function handleMultiDelete() {
     },
   });
 }
+const qrcodeCanvasRef = ref();
+async function handleDownload(row){
+  const url = await qrcodeCanvasRef.value.toDataURL();
+  const a = document.createElement('a');
+  a.download = `${row.pointName}.png`;
+  a.href = url;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}
 </script>
 
 <template>
@@ -134,6 +154,12 @@ function handleMultiDelete() {
       </template>
       <template #action="{ row }">
         <Space>
+          <ghost-button
+            v-access:code="['property:inspectionPoint:info']"
+            @click.stop="handleInfo(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
           <ghost-button
             v-access:code="['property:inspectionPoint:edit']"
             @click.stop="handleEdit(row)"
@@ -156,7 +182,20 @@ function handleMultiDelete() {
           </Popconfirm>
         </Space>
       </template>
+      <template #qrcode="{row}">
+        <Popover :overlay-inner-style="{ padding: 0 }">
+          <template #content>
+            <QRCode ref="qrcodeCanvasRef" :value="row.id" :bordered="false" />
+          </template>
+          <a-button
+            size="small"
+            @click="handleDownload(row)">
+            下载
+          </a-button>
+        </Popover>
+      </template>
     </BasicTable>
     <InspectionPointModal @reload="tableApi.query()" />
+    <PointDetail></PointDetail>
   </Page>
 </template>

apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/point-detail.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {shallowRef} from 'vue';
+import {useVbenModal} from '@vben/common-ui';
+import {Descriptions, DescriptionsItem,QRCode} from 'ant-design-vue';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import {renderDict} from "#/utils/render";
+import {inspectionPointInfo} from "#/api/property/inspectionManagement/inspectionPoint";
+import type {InspectionPointVO} from "#/api/property/inspectionManagement/inspectionPoint/model";
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    pointDetail.value = null;
+  },
+});
+
+const pointDetail = shallowRef<null | InspectionPointVO>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const {id} = modalApi.getData() as { id: number | string };
+  pointDetail.value = await inspectionPointInfo(id);
+  modalApi.modalLoading(false);
+}
+</script>
+
+<template>
+  <BasicModal :footer="false" :fullscreen-button="false" title="巡检点详情" class="w-[70%]">
+    <Descriptions v-if="pointDetail" size="small" :column="2" bordered
+                  :labelStyle="{width:'120px'}">
+      <DescriptionsItem label="巡检点名称">
+        {{ pointDetail.pointName }}
+      </DescriptionsItem>
+      <DescriptionsItem label="巡检点类型">
+        <component
+          :is="renderDict(pointDetail.pointType,'inspection_point_type')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="巡检项目">
+        {{pointDetail.itemName}}
+      </DescriptionsItem>
+      <DescriptionsItem label="nfc编码">
+        {{ pointDetail.nfcCode}}
+      </DescriptionsItem>
+      <DescriptionsItem label="创建时间" :span="2">
+        {{ pointDetail.createTime}}
+      </DescriptionsItem>
+      <DescriptionsItem label="二维码" :span="2">
+        <QRCode  :value="pointDetail.id" />
+      </DescriptionsItem>
+      <DescriptionsItem label="备注" :span="2">
+       {{pointDetail.remark}}
+      </DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template>