From 29838f8cf168e76dfeec0efdae79696bb5e47546 Mon Sep 17 00:00:00 2001
From: yebaochen <942429426@qq.com>
Date: Thu, 20 Feb 2025 17:11:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E5=8D=95modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/registerGlobComp.ts            |   7 +-
 src/views/IO/workOrder/orderSend/data.ts      |  81 +++---
 .../IO/workOrder/orderSend/detailDrawer.vue   | 245 ++++++++++++++++++
 .../IO/workOrder/orderSend/faultModal.vue     | 206 +++++++++++++++
 src/views/IO/workOrder/orderSend/index.vue    |  40 +--
 5 files changed, 519 insertions(+), 60 deletions(-)
 create mode 100644 src/views/IO/workOrder/orderSend/detailDrawer.vue
 create mode 100644 src/views/IO/workOrder/orderSend/faultModal.vue

diff --git a/src/components/registerGlobComp.ts b/src/components/registerGlobComp.ts
index 5a8e591..251b592 100644
--- a/src/components/registerGlobComp.ts
+++ b/src/components/registerGlobComp.ts
@@ -1,8 +1,9 @@
 import type { App } from 'vue';
-import { Button } from './Button';
-import { Input, Layout } from 'ant-design-vue';
+// import { Button } from './Button';
+// import { Input, Layout } from 'ant-design-vue';
 import VXETable from 'vxe-table';
+import Antd from 'ant-design-vue';
 
 export function registerGlobComp(app: App) {
-  app.use(Input).use(Button).use(Layout).use(VXETable);
+  app.use(Antd).use(VXETable);
 }
diff --git a/src/views/IO/workOrder/orderSend/data.ts b/src/views/IO/workOrder/orderSend/data.ts
index 67960c8..7272f72 100644
--- a/src/views/IO/workOrder/orderSend/data.ts
+++ b/src/views/IO/workOrder/orderSend/data.ts
@@ -24,64 +24,71 @@ export const formSchemas: FormSchema[] = [
     },
   },
   {
-    field: 'ioCompany',
-    label: '运维单位',
-    component: 'Select',
+    label: '编号',
+    field: 'workOrderInfoId ',
+    component: 'Input',
     componentProps: {
-      options: [
-        {
-          value: '1',
-          label: '2323',
-        },
-        {
-          value: '2',
-          label: '2323',
-        },
-        {
-          value: '3',
-          label: '2323',
-        },
-      ],
+      placeholder: '输入编号',
     },
   },
   {
-    field: 'planDate',
-    label: '计划日期',
+    field: 'fixRange',
+    label: '保修范围',
     component: 'RangePicker',
   },
+  {
+    label: '地址',
+    field: 'location',
+    component: 'Input',
+    componentProps: {
+      placeholder: '输入天数',
+    },
+  },
 ];
-
-export const columns: BasicColumn[] = [
+//列表展示
+const responseLevelOptions = [
+  {
+    value: 0,
+    label: '常规',
+  },
   {
-    title: '合同名称',
-    dataIndex: 'contractName',
+    value: 1,
+    label: '紧急',
   },
   {
-    title: '项目名称',
-    dataIndex: 'projectName',
+    value: 2,
+    label: '特级',
   },
+];
+
+export const columns: BasicColumn[] = [
   {
-    title: '计划描述',
-    dataIndex: 'description',
+    title: '编号',
+    dataIndex: 'workOrderInfoId',
   },
   {
-    title: '开始日期',
-    dataIndex: 'startDate',
+    title: '保修时间',
+    dataIndex: 'fixTime',
   },
   {
-    title: '结束日期',
-    dataIndex: 'endDate',
+    title: '响应级别',
+    dataIndex: 'responseLevel',
+    customRender({ text }) {
+      return responseLevelOptions.find((i) => {
+        return i.value == text;
+      })?.label;
+    },
   },
   {
-    title: '频次',
-    dataIndex: 'frequency',
+    title: '故障描述',
+    dataIndex: 'faultDescription',
   },
   {
-    title: '状态',
-    dataIndex: 'status',
+    title: '故障地点',
+    dataIndex: 'faultLocation',
   },
   {
-    title: '完成情况',
-    dataIndex: 'progress',
+    title: '当前状态',
+    dataIndex: 'status',
   },
 ];
diff --git a/src/views/IO/workOrder/orderSend/detailDrawer.vue b/src/views/IO/workOrder/orderSend/detailDrawer.vue
new file mode 100644
index 0000000..a3b4b19
--- /dev/null
+++ b/src/views/IO/workOrder/orderSend/detailDrawer.vue
@@ -0,0 +1,245 @@
+<template>
+  <div>
+    <!-- 抽屉组件 -->
+    <a-drawer
+      title="工单派遣详情"
+      placement="right"
+      :closable="true"
+      :open="visible"
+      @close="onClose"
+      width="600px"
+    >
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="1" tab="详细信息">
+          <a-row :gutter="[16, 16]">
+            <a-col :span="24">
+              <div>所属项目:</div>
+            </a-col>
+          </a-row>
+          <a-row :gutter="[16, 16]">
+            <a-col :span="24">
+              <div>所属合同:</div>
+            </a-col>
+          </a-row>
+          <a-row :gutter="[16, 16]">
+            <a-col :span="12">
+              <div>编号:</div>
+            </a-col>
+            <a-col :span="12">
+              <div>报修人员:</div>
+            </a-col>
+          </a-row>
+          <a-row :gutter="[16, 16]">
+            <a-col :span="12">
+              <div>状态:</div>
+            </a-col>
+            <a-col :span="12">
+              <div>待处理人:</div>
+            </a-col>
+          </a-row>
+          <a-row :gutter="[16, 16]">
+            <a-col :span="12">
+              <div>报修时间:</div>
+            </a-col>
+            <a-col :span="12">
+              <div>是否事故:</div>
+            </a-col>
+          </a-row>
+          <a-row :gutter="[16, 16]">
+            <a-col :span="12">
+              <div>故障大类:</div>
+            </a-col>
+            <a-col :span="12">
+              <div>故障小类:</div>
+            </a-col>
+          </a-row>
+          <a-row :gutter="[16, 16]">
+            <a-col :span="12">
+              <div>所属机构:</div>
+            </a-col>
+            <a-col :span="12">
+              <div>响应级别:</div>
+            </a-col>
+          </a-row>
+          x
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="处理信息" force-render>
+          <a-row :gutter="[16, 16]">
+            <a-col :span="24">
+              <div>维修人员:</div>
+            </a-col>
+          </a-row>
+          <a-row :gutter="[16, 16]">
+            <a-col :span="24">
+              <div>修复时间:</div>
+            </a-col>
+          </a-row>
+          <a-row :gutter="[16, 16]">
+            <a-col :span="24">
+              <div>修复结果:</div>
+            </a-col>
+          </a-row>
+          <a-row :gutter="[16, 16]">
+            <a-col :span="24">
+              <div>费用情况:</div>
+            </a-col>
+          </a-row>
+          <a-row :gutter="[16, 16]">
+            <a-col :span="24">
+              <div>处理图片:</div>
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="流程信息">
+          <div style="margin-left: 20px">
+            <a-timeline>
+              <a-timeline-item>
+                <template #dot>故障上报</template>
+                <div class="timeText">Create a services site 2015-09-01</div>
+              </a-timeline-item>
+              <a-timeline-item>
+                <template #dot>故障派遣</template>
+                <div class="timeText">Create a services site 2015-09-01</div>
+              </a-timeline-item>
+              <a-timeline-item>
+                <template #dot>故障接单</template>
+                <div class="timeText">Create a services site 2015-09-01</div>
+              </a-timeline-item>
+              <a-timeline-item>
+                <template #dot>故障处理</template>
+                <div class="timeText">Create a services site 2015-09-01</div>
+              </a-timeline-item>
+              <a-timeline-item>
+                <template #dot>预审</template>
+                <div class="timeText">Create a services site 2015-09-01</div>
+              </a-timeline-item>
+              <a-timeline-item>
+                <template #dot>初审</template>
+                <div class="timeText">Create a services site 2015-09-01</div>
+              </a-timeline-item>
+            </a-timeline>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="4" tab="历史信息">
+          <a-table :dataSource="historyInfo" :columns="historyColumns" bordered>
+            <template #bodyCell="{ column }">
+              <template v-if="column.key === 'action'">
+                <a-button type="link">查看</a-button>
+              </template>
+            </template>
+          </a-table>
+        </a-tab-pane>
+        <a-tab-pane key="5" tab="延期信息">
+          <a-table :dataSource="delayInfo" :columns="delayColumns" bordered>
+            <template #bodyCell="{ column }">
+              <template v-if="column.key === 'action'">
+                <a-button type="link">查看</a-button>
+              </template>
+            </template>
+          </a-table>
+        </a-tab-pane>
+      </a-tabs>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+  import { ref } from 'vue';
+
+  export default {
+    setup(props, { emit }) {
+      const visible = ref(false);
+
+      // 打开抽屉的方法
+      const showDrawer = () => {
+        visible.value = true;
+      };
+
+      // 关闭抽屉的方法
+      const onClose = () => {
+        visible.value = false;
+      };
+      const activeKey = ref('1');
+      const openModal = () => {
+        emit('openModal');
+      };
+
+      const historyInfo = ref([]);
+      const historyColumns = [
+        {
+          title: '环节',
+          dataIndex: 'stage',
+          key: 'stage',
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          key: 'operation',
+        },
+        {
+          title: '操作人',
+          dataIndex: 'operator',
+          key: 'operator',
+        },
+        {
+          title: '详细信息',
+          dataIndex: 'action',
+          key: 'action  ',
+        },
+      ];
+      const delayInfo = ref([]);
+      const delayColumns = [
+        {
+          title: '申请时间',
+          dataIndex: 'applyTime',
+          key: 'applyTime',
+        },
+        {
+          title: '申请原因',
+          dataIndex: 'applyReason',
+          key: 'applyReason',
+        },
+        {
+          title: '延期时间',
+          dataIndex: 'delayTime',
+          key: 'delayTime',
+        },
+        {
+          title: '详细信息',
+          dataIndex: 'action',
+          key: 'action  ',
+        },
+      ];
+      return {
+        visible,
+        showDrawer,
+        onClose,
+        activeKey,
+        openModal,
+        historyInfo,
+        historyColumns,
+        delayInfo,
+        delayColumns,
+      };
+    },
+  };
+</script>
+
+<style scoped>
+  /* 可选样式调整 */
+  .ant-btn {
+    margin: 20px;
+  }
+
+  /* .singerDetail{
+  margin-bottom: 10px;
+} */
+  div {
+    margin-bottom: 10px;
+  }
+
+  .timeText {
+    margin: 0 0 40px 20px;
+    color: red;
+  }
+</style>
diff --git a/src/views/IO/workOrder/orderSend/faultModal.vue b/src/views/IO/workOrder/orderSend/faultModal.vue
new file mode 100644
index 0000000..ee6ce00
--- /dev/null
+++ b/src/views/IO/workOrder/orderSend/faultModal.vue
@@ -0,0 +1,206 @@
+<template>
+  <a-modal v-model:open="visible" title="表单" @ok="handleOk" width="70%">
+    <a-form :model="form" layout="vertical">
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <a-form-item label="所属项目" name="projectName">
+            <a-input v-model:value="form.projectName" placeholder="所属项目" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="12">
+          <a-form-item label="是否事故" name="isAccident">
+            <a-radio-group v-model:value="form.isAccident">
+              <a-radio :value="1">是</a-radio>
+              <a-radio :value="0">否</a-radio>
+            </a-radio-group>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="报修人员" name="repairer">
+            <a-input v-model:value="form.repairer" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="12">
+          <a-form-item label="响应级别">
+            <a-select v-model:value="form.responseLevel" :options="responseLevelOptions" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="响应时限">
+            <a-input v-model:value="form.responseTime" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="12">
+          <a-form-item label="故障大类" name="faultCategory">
+            <a-select v-model:value="form.faultCategory" :options="[{ value: '前端' }]" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="故障小类" name="faultSubcategory">
+            <a-select v-model:value="form.faultSubcategory" :options="faultSubcategoryOptions" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="12">
+          <a-form-item label="故障机构" name="institution">
+            <a-select v-model:value="form.institution" :options="institutionOptions" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="故障地点" name="faultLocation">
+            <a-input v-model:value="form.faultLocation" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <a-form-item label="故障描述" name="faultDescription">
+            <a-textarea v-model:value="form.faultDescription" :rows="4" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="12">
+          <a-form-item label="是否派遣" name="isDispatched">
+            <a-radio-group v-model:value="form.isDispatched">
+              <a-radio :value="1">是</a-radio>
+              <a-radio :value="0">否</a-radio>
+            </a-radio-group>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12" v-if="form.isDispatched == 1">
+          <a-form-item label="维护要求" name="maintenanceRequirement">
+            <a-select
+              v-model:value="form.maintenanceRequirement"
+              :options="maintenanceRequirementOptions"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]" v-if="form.isDispatched == 1">
+        <a-col :span="24">
+          <a-form-item label="派遣意见" name="dispatchOpinion">
+            <a-textarea v-model:value="form.dispatchOpinion" :rows="4" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-modal>
+</template>
+
+<script>
+  import { reactive, ref } from 'vue';
+
+  export default {
+    setup() {
+      const visible = ref(false);
+      const form = reactive({
+        projectName: '',
+        isAccident: null,
+        repairer: '',
+        responseTime: '',
+        responseLevel: '',
+        faultCategory: '',
+        faultSubcategory: '',
+        institution: '',
+        faultLocation: '',
+        faultDescription: '',
+        isDispatched: null,
+        maintenanceRequirement: '',
+        dispatchOpinion: '',
+      });
+      //下拉框
+      const responseLevelOptions = [
+        {
+          value: 0,
+          label: '常规',
+        },
+        {
+          value: 1,
+          label: '紧急',
+        },
+        {
+          value: 2,
+          label: '特级',
+        },
+      ];
+      const maintenanceRequirementOptions = [
+        {
+          value: 0,
+          label: '常规',
+        },
+        {
+          value: 1,
+          label: '紧急',
+        },
+        {
+          value: 2,
+          label: '特级',
+        },
+      ];
+      const institutionOptions = [
+        {
+          value: 0,
+          label: '常规',
+        },
+        {
+          value: 1,
+          label: '紧急',
+        },
+        {
+          value: 2,
+          label: '特级',
+        },
+      ];
+      const faultSubcategoryOptions = [
+        {
+          value: 0,
+          label: '常规',
+        },
+        {
+          value: 1,
+          label: '紧急',
+        },
+        {
+          value: 2,
+          label: '特级',
+        },
+      ];
+      const showModal = () => {
+        visible.value = true;
+      };
+
+      const handleOk = () => {
+        console.log('Form Data:', form);
+        // 在此处可以添加表单验证逻辑
+        visible.value = false;
+      };
+
+      return {
+        visible,
+        form,
+        showModal,
+        handleOk,
+        responseLevelOptions,
+        maintenanceRequirementOptions,
+        institutionOptions,
+        faultSubcategoryOptions,
+      };
+    },
+  };
+</script>
+
+<style scoped>
+  /* 可选样式调整 */
+  .ant-modal-body {
+    max-width: 600px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/src/views/IO/workOrder/orderSend/index.vue b/src/views/IO/workOrder/orderSend/index.vue
index a52f035..cedc626 100644
--- a/src/views/IO/workOrder/orderSend/index.vue
+++ b/src/views/IO/workOrder/orderSend/index.vue
@@ -2,34 +2,31 @@
   <PageWrapper dense>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button
-          class="<sm:hidden"
-          @click="downloadExcel(exportExcel, '请假信息', getForm().getFieldsValue())"
-          v-auth="'workflow:leave:export'"
-          >导出</a-button
-        >
-
-        <a-button type="primary" @click="handleAdd" v-auth="'workflow:leave:add'">新增</a-button>
+        <a-button type="primary" @click="showFaultModal">故障上报</a-button>
+        <a-button type="primary" @click="showFaultModal">批量上报</a-button>
+        <a-button type="primary" @click="showDrawer">派遣</a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column && record && column.key === 'action'"> </template>
       </template>
     </BasicTable>
+    <faultModal ref="falutModalRef" />
+    <detailDrawer ref="detailDrawerRef" @open-modal="showFaultModal" />
   </PageWrapper>
 </template>
 
 <script setup lang="ts">
   import { PageWrapper } from '@/components/Page';
   import { BasicTable, useTable } from '@/components/Table';
-  import { list, exportExcel } from './api';
-  import { downloadExcel } from '@/utils/file/download';
+  import { list } from './api';
   import { formSchemas, columns } from './data';
-  import { useGo } from '@/hooks/web/usePage';
-  import { PageEnum } from '@/enums/pageEnum';
+  import faultModal from './faultModal.vue';
+  import detailDrawer from './detailDrawer.vue';
+  import { ref } from 'vue';
 
   defineOptions({ name: 'OrderSend' });
 
-  const [registerTable, { reload, getForm }] = useTable({
+  const [registerTable] = useTable({
     rowSelection: {
       type: 'checkbox',
     },
@@ -56,14 +53,17 @@
       fixed: 'right',
     },
   });
-
-  function handleAdd() {
-    go({ path: '/workflow/leaveEdit/index' as PageEnum, query: { type: 'add' } });
-    reload();
-  }
-
+  //弹窗内容
+  const falutModalRef = ref();
+  const showFaultModal = () => {
+    falutModalRef.value.showModal();
+  };
+  //详情抽屉
+  const detailDrawerRef = ref();
+  const showDrawer = () => {
+    detailDrawerRef.value.showDrawer();
+  };
   // 前往审批记录页面
-  const go = useGo();
 </script>
 
 <style scoped></style>