ops-management-platform-frontend/src/views/IO/workOrder/orderSearch/detailDrawer.vue

<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>