feat:巡检点二维码

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>