From f93b6d356be07984700bf9cdde1bc40254f444e6 Mon Sep 17 00:00:00 2001
From: dev_ljl <2590379346@qq.com>
Date: Wed, 9 Jul 2025 18:12:28 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E5=B7=A5=E5=8D=95=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../businessManagement/workOrders/data.ts     | 60 ++++--------
 .../businessManagement/workOrders/index.vue   | 75 +++++++++++---
 .../workOrders/work-orders-detail.vue         | 98 +++++++++++++++++++
 .../workOrders/workOrders-modal.vue           | 27 ++++-
 .../conferenceReservations-modal.vue          |  5 +-
 .../conferenceSettings-modal.vue              |  5 +-
 6 files changed, 214 insertions(+), 56 deletions(-)
 create mode 100644 apps/web-antd/src/views/property/businessManagement/workOrders/work-orders-detail.vue

diff --git a/apps/web-antd/src/views/property/businessManagement/workOrders/data.ts b/apps/web-antd/src/views/property/businessManagement/workOrders/data.ts
index b6a1479f..2cc814ab 100644
--- a/apps/web-antd/src/views/property/businessManagement/workOrders/data.ts
+++ b/apps/web-antd/src/views/property/businessManagement/workOrders/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 {h} from "vue";
+import {Rate} from "ant-design-vue";
 
 
 export const querySchema: FormSchemaGetter = () => [
@@ -15,12 +17,6 @@ export const querySchema: FormSchemaGetter = () => [
     fieldName: 'orderName',
     label: '工单名称',
   },
-  {
-    component: 'Select',
-    componentProps: {},
-    fieldName: 'type',
-    label: '工单类型',
-  },
   {
     component: 'Select',
     componentProps: {
@@ -44,13 +40,8 @@ export const columns: VxeGridProps['columns'] = [
     minWidth: 180,
   },
   {
-    title: '工单类型',
-    field: 'type',
-    slots: {
-      default: ({row}) => {
-        return renderDict(row.type, 'wy_gdlx');
-      },
-    },
+    title: '派单时间',
+    field: 'dispatchTime',
     width: 100,
   },
   {
@@ -63,26 +54,6 @@ export const columns: VxeGridProps['columns'] = [
     },
     width: 100,
   },
-  {
-    title: '派单时间',
-    field: 'dispatchTime',
-    width: 100,
-  },
-  {
-    title: '发起人姓名',
-    field: 'initiatorName',
-    width: 100,
-  },
-  {
-    title: '发起人手机号',
-    field: 'initiatorPhone',
-    width: 100,
-  },
-  {
-    title: '处理人姓名',
-    field: 'handler',
-    width: 100,
-  },
   {
     title: '地址',
     field: 'location',
@@ -101,12 +72,26 @@ export const columns: VxeGridProps['columns'] = [
   {
     title: '评价',
     field: 'serviceEvalua',
-    width: 100,
+    width: 180,
+    slots:{
+      default: ({ row }) => {
+        return h(Rate, {
+          value: row.serviceEvalua || 0,
+          disabled: true,
+        });
+      },
+    },
+
   },
   {
     title: '是否超时',
     field: 'isTimeOut',
     width: 100,
+    slots: {
+      default: ({row}) => {
+        return renderDict(row.status, 'wy_sf');
+      },
+    },
   },
   {
     field: 'action',
@@ -136,7 +121,7 @@ export const modalSchema: FormSchemaGetter = () => [
   {
     label: '工单类型',
     fieldName: 'type',
-    component: 'Select',
+    component: 'ApiSelect',
     componentProps: {},
     rules: 'selectRequired',
   },
@@ -169,11 +154,6 @@ export const modalSchema: FormSchemaGetter = () => [
     rules: 'selectRequired',
 
   },
-  // {
-  //   label: '发起人手机号',
-  //   fieldName: 'initiatorPhone',
-  //   component: 'Input',
-  // },
   {
     label: '处理人',
     fieldName: 'handler',
diff --git a/apps/web-antd/src/views/property/businessManagement/workOrders/index.vue b/apps/web-antd/src/views/property/businessManagement/workOrders/index.vue
index 0f88e535..b07e1cc2 100644
--- a/apps/web-antd/src/views/property/businessManagement/workOrders/index.vue
+++ b/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>
diff --git a/apps/web-antd/src/views/property/businessManagement/workOrders/work-orders-detail.vue b/apps/web-antd/src/views/property/businessManagement/workOrders/work-orders-detail.vue
new file mode 100644
index 00000000..dd1f38de
--- /dev/null
+++ b/apps/web-antd/src/views/property/businessManagement/workOrders/work-orders-detail.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+
+import {ref, shallowRef} from 'vue';
+
+import {useVbenModal} from '@vben/common-ui';
+
+import {Descriptions, DescriptionsItem, Timeline, TimelineItem, Rate,Divider} 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 {workOrdersInfo} from "#/api/property/businessManagement/workOrders";
+import type {WorkOrdersVO} from "#/api/property/businessManagement/workOrders/model";
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    orderDetail.value = null;
+  },
+});
+
+const orderDetail = shallowRef<null | WorkOrdersVO>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+
+  const {id} = modalApi.getData() as { id: number | string };
+  // 赋值
+  orderDetail.value = await workOrdersInfo(id);
+
+  modalApi.modalLoading(false);
+}
+
+
+</script>
+
+<template>
+  <BasicModal :footer="false" :fullscreen-button="false" title="工单详情信息" class="w-[70%]">
+    <div v-if="orderDetail">
+      <Descriptions size="small" :column="2" :labelStyle="{width:'100px'}">
+        <DescriptionsItem label="订单号">
+          {{ orderDetail.orderNo }}
+        </DescriptionsItem>
+        <DescriptionsItem label="工单名称">
+          {{ orderDetail.orderName }}
+        </DescriptionsItem>
+        <DescriptionsItem label="工单类型">
+          <component
+            :is="renderDict(orderDetail.customerType,'wy_khlx')"
+          />
+        </DescriptionsItem>
+        <DescriptionsItem label="发起人">
+          {{ orderDetail.rentalPeriod }}
+        </DescriptionsItem>
+        <DescriptionsItem label="派单时间">
+          {{ orderDetail.dispatchTime }}
+        </DescriptionsItem>
+        <DescriptionsItem label="处理人">
+          {{ orderDetail.totalAmount + "元" }}
+        </DescriptionsItem>
+        <DescriptionsItem label="具体位置" :span="2">
+          {{ orderDetail.location }}
+        </DescriptionsItem>
+        <DescriptionsItem label="计划完成时间">
+          {{ orderDetail.planCompleTime }}
+        </DescriptionsItem>
+        <DescriptionsItem label="完成时间">
+          {{ orderDetail.compleTime }}
+        </DescriptionsItem>
+        <DescriptionsItem label="评价">
+          <Rate :value="orderDetail.serviceEvalua" disabled/>
+        </DescriptionsItem>
+        <DescriptionsItem label="是否超时">
+          <component
+            :is="renderDict(orderDetail.isTimeOut,'wy_sf')"
+          />
+        </DescriptionsItem>
+      </Descriptions>
+      <Divider orientation="left" orientation-margin="0px">
+        处理记录
+      </Divider>
+      <Timeline>
+        <TimelineItem>
+          <p>类型：</p>
+          <p>时间：</p>
+          <p>处理人：</p>
+        </TimelineItem>
+      </Timeline>
+    </div>
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/property/businessManagement/workOrders/workOrders-modal.vue b/apps/web-antd/src/views/property/businessManagement/workOrders/workOrders-modal.vue
index 86043c1f..4c071fbb 100644
--- a/apps/web-antd/src/views/property/businessManagement/workOrders/workOrders-modal.vue
+++ b/apps/web-antd/src/views/property/businessManagement/workOrders/workOrders-modal.vue
@@ -16,6 +16,7 @@ import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
 import {modalSchema} from './data';
 import {personList} from "#/api/property/resident/person";
 import {renderDictValue} from "#/utils/render";
+import {workOrdersTypeList} from "#/api/property/businessManagement/workOrdersType";
 
 const emit = defineEmits<{ reload: [] }>();
 
@@ -60,11 +61,13 @@ const [BasicModal, modalApi] = useVbenModal({
     }
     modalApi.modalLoading(true);
     await queryPersonData()
+    await queryWorkOrdersType()
     const {id} = modalApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
 
     if (isUpdate.value && id) {
       const record = await workOrdersInfo(id);
+      record.isTimeOut=record.isTimeOut.toString()
       await formApi.setValues(record);
     }
     await markInitialized();
@@ -111,6 +114,7 @@ async function queryPersonData() {
   formApi.updateSchema([{
     componentProps: () => ({
       options: options,
+      showSearch:true,
       filterOption: filterOption
     }),
     fieldName: 'initiatorName',
@@ -118,14 +122,35 @@ async function queryPersonData() {
     {
       componentProps: () => ({
         options: options,
+        showSearch:true,
         filterOption: filterOption
       }),
       fieldName: 'handler',
     }])
 }
 
+async function queryWorkOrdersType() {
+  let params = {
+    pageSize: 1000,
+    pageNum: 1
+  }
+  const res = await workOrdersTypeList(params)
+  const options = res.rows.map((item) => ({
+    label: item.orderTypeName,
+    value: item.id,
+  }));
+  formApi.updateSchema([{
+    componentProps: () => ({
+      options: options,
+      filterOption: filterOption,
+      showSearch:true,
+    }),
+    fieldName: 'type',
+  }])
+}
+
 const filterOption = (input: string, option: any) => {
-  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
 };
 
 </script>
diff --git a/apps/web-antd/src/views/property/roomBooking/conferenceReservations/conferenceReservations-modal.vue b/apps/web-antd/src/views/property/roomBooking/conferenceReservations/conferenceReservations-modal.vue
index 11e0c516..c1188e17 100644
--- a/apps/web-antd/src/views/property/roomBooking/conferenceReservations/conferenceReservations-modal.vue
+++ b/apps/web-antd/src/views/property/roomBooking/conferenceReservations/conferenceReservations-modal.vue
@@ -152,14 +152,15 @@ async function queryUnitData() {
   formApi.updateSchema([{
     componentProps: () => ({
       options: options,
-      filterOption: filterOption
+      filterOption: filterOption,
+      showSearch:true,
     }),
     fieldName: 'unit',
   }])
 }
 
 const filterOption = (input: string, option: any) => {
-  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
 };
 
 async function changeProjectNum() {
diff --git a/apps/web-antd/src/views/property/roomBooking/conferenceSettings/conferenceSettings-modal.vue b/apps/web-antd/src/views/property/roomBooking/conferenceSettings/conferenceSettings-modal.vue
index 42d4c3f2..8ddf3bab 100644
--- a/apps/web-antd/src/views/property/roomBooking/conferenceSettings/conferenceSettings-modal.vue
+++ b/apps/web-antd/src/views/property/roomBooking/conferenceSettings/conferenceSettings-modal.vue
@@ -122,14 +122,15 @@ async function queryPerson() {
   formApi.updateSchema([{
     componentProps: () => ({
       options: options,
-      filterOption: filterOption
+      filterOption: filterOption,
+      showSearch:true,
     }),
     fieldName: 'principals',
   }])
 }
 
 const filterOption = (input: string, option: any) => {
-  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
 };
 
 /**