客户服务

apps/web-antd/src/views/property/businessManagement/workOrderPending/data.ts

@@ -0,0 +1,65 @@
+import type {FormSchemaGetter} from '#/adapter/form';
+import type {VxeGridProps} from '#/adapter/vxe-table';
+import {renderDict} from "#/utils/render";
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'orderNo',
+    label: '工单编号',
+  },
+  {
+    component: 'Input',
+    fieldName: 'orderName',
+    label: '工单名称',
+  },
+  // {
+  //   component: 'Select',
+  //   componentProps: {
+  //     options: getDictOptions('wy_gdclzt'),
+  //   },
+  //   fieldName: 'status',
+  //   label: '状态',
+  // },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '工单编号',
+    field: 'orderNo',
+  },
+  {
+    title: '工单名称',
+    field: 'orderName',
+  },
+  {
+    title: '工单类型',
+    field: 'typeName',
+  },
+  {
+    title: '状态',
+    field: 'status',
+    slots: {
+      default: ({row}) => {
+        return renderDict(row.status, 'wy_gdclzt');
+      },
+    },
+  },
+  {
+    title: '地址',
+    field: 'location',
+  },
+  {
+    title: '计划完成时间',
+    field: 'planCompleTime',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: {default: 'action'},
+    title: '操作',
+    width: 120,
+  },
+];
+
+

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

@@ -1,11 +1,92 @@
 <script setup lang="ts">
+import {Page, useVbenModal, type VbenFormProps} from '@vben/common-ui';
+import {Space} from 'ant-design-vue';
+import {
+  useVbenVxeGrid,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+import {
+  workOrdersList,
+} from '#/api/property/businessManagement/workOrders';
+import workOrdersDetail from './work-orders-detail.vue';
+import {columns, querySchema} from './data';
 
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({page}, formValues = {}) => {
+        return await workOrdersList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          status:'0',
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-workOrders-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [WorkOrdersDetail, detailApi] = useVbenModal({
+  connectedComponent: workOrdersDetail,
+});
+
+function handleInfo(row:any) {
+  detailApi.setData({id:row.id});
+  detailApi.open();
+}
 </script>
 
 <template>
-
+  <Page :auto-content-height="true">
+    <BasicTable table-title="工单待办列表" class="order-work-left-radio">
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['property:workOrders:info']"
+            @click.stop="handleInfo(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
+        </Space>
+      </template>
+    </BasicTable>
+    <WorkOrdersDetail/>
+  </Page>
 </template>
 
-<style scoped>
-
+<style lang="scss" scoped>
 </style>
+

apps/web-antd/src/views/property/businessManagement/workOrderPending/orders-modal.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import {useVbenModal} from '@vben/common-ui';
+import {cloneDeep} from '@vben/utils';
+import {useVbenForm} from '#/adapter/form';
+import {
+  workOrdersInfo,
+  workOrdersUpdate
+} from '#/api/property/businessManagement/workOrders';
+import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
+import {ordersModalSchema} from './data';
+import {personList} from "#/api/property/resident/person";
+import {renderDictValue} from "#/utils/render";
+import {onMounted, ref} from "vue";
+import { useUserStore } from '@vben/stores';
+
+const userStore = useUserStore();
+const emit = defineEmits<{ reload: [] }>();
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-1',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: ordersModalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const record = ref({})
+const title = ref('派单')
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    await queryPersonData()
+    const {id} = modalApi.getData() as { id?: number | string };
+    const {mean} = modalApi.getData() as { rob?: number | string };
+    if (id) {
+      record.value = await workOrdersInfo(id);
+      if(mean === 'rob'){
+        title.value = '抢单'
+        record.value.status = '2';
+        record.value.handler = record.value.initiatorPeople;
+      }else{
+        title.value = '派单'
+        record.value.status = '1';
+        record.value.handler = null;
+      }
+      await formApi.setValues(record.value);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const {valid} = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    if(title.value === '派单'){
+      record.value.handler = data.handler
+    }else{
+      record.value.handler = userStore.userInfo.userId
+    }
+    await  workOrdersUpdate(record.value)
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+
+async function queryPersonData() {
+  let params = {
+    pageSize: 1000,
+    pageNum: 1,
+  }
+  const res = await personList(params);
+  const options = res.rows.map((user) => ({
+    label: user.userName + '-' + renderDictValue(user.gender, 'sys_user_sex') + '-' + user.phone,
+    value: user.id,
+  }));
+  formApi.updateSchema([
+    {
+      componentProps: () => ({
+        options: options,
+        showSearch:true,
+        filterOption: filterOption
+      }),
+      fieldName: 'handler',
+    }])
+}
+
+const filterOption = (input: string, option: any) => {
+  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm/>
+  </BasicModal>
+</template>
+

apps/web-antd/src/views/property/businessManagement/workOrderPending/work-orders-detail.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import {computed, 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);
+const handleRecords=ref<any[]>([])
+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);
+  if(orderDetail.value){
+    handleRecords.value = orderDetail.value.workOrdersRecordVoList.map( (item, index) => ({
+      status: item.status,
+      createTime: item.createTime,
+      handlerName: index === 0 ? item.initiatorPeople : item.handlerName
+    }))
+  }
+  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="工单类型">
+         {{orderDetail.typeName}}
+        </DescriptionsItem>
+        <DescriptionsItem label="发起人">
+          {{ orderDetail.initiatorPeople }}
+        </DescriptionsItem>
+        <DescriptionsItem label="具体位置">
+          {{ orderDetail.location }}
+        </DescriptionsItem>
+        <DescriptionsItem label="计划完成时间">
+          {{ orderDetail.planCompleTime }}
+        </DescriptionsItem>
+      </Descriptions>
+      <Divider orientation="left" orientation-margin="0px">
+        处理记录
+      </Divider>
+      <Timeline>
+        <TimelineItem v-for="(item,index) in handleRecords" :key="index">
+            <p style="display: flex;">类型：
+              <component
+                :is="renderDict(item.status,'wy_gdclzt')"
+              /></p>
+            <p>时间：{{item.createTime}}</p>
+            <p>处理人：{{item.handlerName}}</p>
+        </TimelineItem>
+      </Timeline>
+    </div>
+  </BasicModal>
+</template>

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

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import {computed, ref} from 'vue';
+
+import {useVbenModal} from '@vben/common-ui';
+import {$t} from '@vben/locales';
+import {cloneDeep} from '@vben/utils';
+
+import {useVbenForm} from '#/adapter/form';
+import {
+  workOrdersAdd,
+  workOrdersInfo,
+  workOrdersUpdate
+} from '#/api/property/businessManagement/workOrders';
+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: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-1',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[70%]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    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();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const {valid} = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? workOrdersUpdate(data) : workOrdersAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+
+async function queryPersonData() {
+  let params = {
+    pageSize: 1000,
+    pageNum: 1,
+  }
+  const res = await personList(params);
+  const options = res.rows.map((user) => ({
+    label: user.userName + '-' + renderDictValue(user.gender, 'sys_user_sex') + '-' + user.phone,
+    value: user.id,
+  }));
+  formApi.updateSchema([{
+    componentProps: () => ({
+      options: options,
+      showSearch:true,
+      filterOption: filterOption
+    }),
+    fieldName: 'initiatorName',
+  },
+    {
+      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.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
+
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm/>
+  </BasicModal>
+</template>
+