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><span class="titleLabel">所属项目：</span>{{ detail.projectName }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">所属合同：</span>{{ detail.contractName }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">编号：</span>{{ detail.id }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">报修人员：</span>{{ detail.repairer }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">状态：</span>{{ detail.status }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">待处理人：</span>{{ detail.handler }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">报修时间：</span>{{ detail.repairTime }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">是否事故：</span>{{ detail.isAccident }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">故障大类：</span>{{ detail.faultCategory }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">故障小类：</span>{{ detail.faultSubcategory }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">所属机构：</span>{{ detail.institution }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">响应级别：</span>{{ detail.responseLevel }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">响应时限(小时)：</span>{{ detail.responseTime }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">故障地址：</span>{{ detail.faultLocation }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">故障描述：</span>{{ detail.faultDescription }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">故障图片：</span>{{ detail.faultImg }}</div>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="处理信息" force-render>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">维修人员：</span>{{ detail.fixPeople }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">修复时间：</span>{{ detail.fixTime }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">修复结果：</span>{{ detail.fixResult }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">费用情况：</span>{{ detail.cost }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">处理图片：</span>{{ detail.handleImg }}</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 { reactive, ref } from 'vue';
  import { getInfo } from './api';

  export default {
    setup(props, { emit }) {
      //抽屉详情
      let detail = reactive({
        projectName: '',
        contractName: '',
        id: '',
        status: null,
        repairer: '',
        handler: '',
        repairTime: '',
        institution: '',
        isAccident: null,
        faultCategory: '',
        faultSubcategory: '',
        responseLevel: null,
        responseTime: '',
        faultLocation: '',
        faultDescription: '',
        faultImg: '',
        fixPeople: '',
        fixTime: '',
        fixResult: '',
        cost: '',
        handleImg: '',
      });
      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  ',
        },
      ];

      // 打开抽屉的方法
      const visible = ref(false);
      const showDrawer = async (id) => {
        const data = await getInfo(id);
        for (let i in detail) {
          detail[i] = data[i];
        }
        visible.value = true;
        console.log(detail);
      };

      // 关闭抽屉的方法
      const onClose = () => {
        visible.value = false;
      };
      const activeKey = ref('1');
      const openModal = () => {
        emit('openModal');
      };

      return {
        visible,
        showDrawer,
        onClose,
        activeKey,
        openModal,
        historyInfo,
        historyColumns,
        delayInfo,
        delayColumns,
        detail,
      };
    },
  };
</script>

<style scoped>
  /* 可选样式调整 */
  .ant-btn {
    margin: 20px;
  }

  /* .singerDetail{
  margin-bottom: 10px;
} */
  div {
    margin-bottom: 10px;
  }

  .timeText {
    margin: 0 0 40px 20px;
    color: red;
  }

  .titleLabel {
    color: gray;
  }
</style>