1、工单处理

apps/web-antd/src/views/property/businessManagement/workOrders/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
-import { getVxePopupContainer } from '@vben/utils';
+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, RadioGroup, RadioButton} from 'ant-design-vue';
 
 import {
   useVbenVxeGrid,
@@ -15,12 +15,17 @@ import {
   workOrdersList,
   workOrdersRemove,
 } from '#/api/property/businessManagement/workOrders';
-import type { WorkOrdersForm } from '#/api/property/businessManagement/workOrders/model';
-import { commonDownloadExcel } from '#/utils/file/download';
+import type {WorkOrdersForm} from '#/api/property/businessManagement/workOrders/model';
+import {commonDownloadExcel} from '#/utils/file/download';
 
 import workOrdersModal from './workOrders-modal.vue';
-import { columns, querySchema } from './data';
+import workOrdersDetail from './work-orders-detail.vue';
+import {columns, querySchema} from './data';
+import {onMounted, ref} from "vue";
+import {workOrdersTypeList} from "#/api/property/businessManagement/workOrdersType";
 
+const ordersTypeList = ref<any[]>([]);
+const ordersType = ref<string>('0');
 const formOptions: VbenFormProps = {
   commonConfig: {
     labelWidth: 80,
@@ -41,15 +46,13 @@ const gridOptions: VxeGridProps = {
     // 点击行选中
     // trigger: 'row',
   },
-  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
-  // columns: columns(),
   columns,
   height: 'auto',
   keepSource: true,
   pagerConfig: {},
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues = {}) => {
+      query: async ({page}, formValues = {}) => {
         return await workOrdersList({
           pageNum: page.currentPage,
           pageSize: page.pageSize,
@@ -74,13 +77,21 @@ const [WorkOrdersModal, modalApi] = useVbenModal({
   connectedComponent: workOrdersModal,
 });
 
+const [WorkOrdersDetail, detailApi] = useVbenModal({
+  connectedComponent: workOrdersDetail,
+});
+
 function handleAdd() {
   modalApi.setData({});
   modalApi.open();
 }
+function handleInfo(row) {
+  detailApi.setData({id:row.id});
+  detailApi.open();
+}
 
 async function handleEdit(row: Required<WorkOrdersForm>) {
-  modalApi.setData({ id: row.id });
+  modalApi.setData({id: row.id});
   modalApi.open();
 }
 
@@ -108,11 +119,46 @@ function handleDownloadExcel() {
     fieldMappingTime: formOptions.fieldMappingTime,
   });
 }
+
+async function queryOrderType() {
+  let params = {
+    pageSize: 1000,
+    pageNum: 1
+  }
+  const res = await workOrdersTypeList(params)
+  ordersTypeList.value = res.rows.map((item) => ({
+    label: item.orderTypeName,
+    value: item.id,
+  }));
+  ordersTypeList.value.unshift({
+    label: '全部工单',
+    value: '0',
+  })
+}
+
+onMounted(async () => {
+  await queryOrderType()
+});
+
+async function changeOrdersType(val: string) {
+ await tableApi.formApi.setValues({
+    type: val === '0' ? undefined : val, // '0' 表示全部工单，传 undefined 或清除该字段
+  });
+  console.log(tableApi.formApi.getValues(),'==================')
+  await tableApi.query()
+}
 </script>
 
 <template>
   <Page :auto-content-height="true">
     <BasicTable table-title="工单处理列表">
+      <template #table-title>
+        <RadioGroup v-model:value="ordersType" button-style="solid" @change="changeOrdersType">
+          <RadioButton v-for="item in ordersTypeList"
+                       :value="item.value">{{ item.label }}
+          </RadioButton>
+        </RadioGroup>
+      </template>
       <template #toolbar-tools>
         <Space>
           <a-button
@@ -140,6 +186,12 @@ function handleDownloadExcel() {
       </template>
       <template #action="{ row }">
         <Space>
+          <ghost-button
+            v-access:code="['property:workOrders:info']"
+            @click.stop="handleInfo(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
           <ghost-button
             v-access:code="['property:workOrders:edit']"
             @click.stop="handleEdit(row)"
@@ -163,6 +215,7 @@ function handleDownloadExcel() {
         </Space>
       </template>
     </BasicTable>
-    <WorkOrdersModal @reload="tableApi.query()" />
+    <WorkOrdersModal @reload="tableApi.query()"/>
+    <WorkOrdersDetail/>
   </Page>
 </template>