ops-management-platform-frontend/src/views/IO/patrol/patroling/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="24">
              <div><span class="titleLabel">运维单位：</span>{{ detail.ioCompany }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">开始日期：</span>{{ detail.startDate }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">结束日期：</span>{{ detail.endDate }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">频次：</span>{{ detail.frequency }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">完成情况：</span>{{ detail.progress }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">计划描述：</span>{{ detail.description }}</div>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="完成情况">
          <a-table :dataSource="finishStatus" :columns="finishColumns" bordered />
        </a-tab-pane>
      </a-tabs>
    </a-drawer>
  </div>
</template>

<script>
  import { reactive, ref } from 'vue';
  // import { getInfo } from './api';
  export default {
    setup() {
      //抽屉详情
      let detail = reactive({
        projectName: '',
        contractName: '',
        ioCompany: '',
        startDate: '',
        endDate: '',
        frequency: null,
        progress: '',
        description: '',
      });
      const finishStatus = ref([]);
      const finishColumns = [
        {
          title: '开始日期',
          dataIndex: 'startDate',
          key: 'startDate',
        },
        {
          title: '结束日期',
          dataIndex: 'endDate',
          key: 'endDate',
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
        },
        {
          title: '完成日期',
          dataIndex: 'finishDate',
          key: 'finishDate  ',
        },
      ];

      // 打开抽屉的方法
      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 showDrawer = () => {
        visible.value = true;
      };
      // 关闭抽屉的方法
      const onClose = () => {
        visible.value = false;
      };
      const activeKey = ref('1');

      return {
        visible,
        showDrawer,
        onClose,
        activeKey,
        finishStatus,
        finishColumns,
        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>