xjsaas-ui/src/views/xj/document/maintenance-notice/components/view-dialog.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-11-26 15:49:28
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2025-01-03 10:42:24
 * @FilePath: \znxjxt-ui\src\views\xj\document\maintenance-notice\components\view-dialog.vue
 * @Description: 养护通知单查看弹窗
-->
<template>
  <div class="view-content">
    <div class="view-title">高速公路道路养护作业通知单</div>
    <!-- <div class="view-title-card">编号：{{ viewData.noticeNo || "" }}</div> -->
    <div class="view-table">
      <div class="view-table-top">
        <div class="left-item">
          <div class="left-item-content">
            <div class="name">通知时间</div>
            <div class="value">{{ viewData.issueDate || "" }}</div>
          </div>
          <div class="left-item-content">
            <div class="name">作业完成时间</div>
            <div class="value">{{ viewData.handleTime || "" }}</div>
          </div>
        </div>
        <div class="left-item-title">地点</div>
        <div class="left-item">
          <div class="left-item-content">
            <div class="name">里程桩号</div>
            <div class="value">
              {{ viewData.stakeStart || "" }}—{{ viewData.stakeEnd || "" }}
            </div>
          </div>
          <div class="left-item-content">
            <div class="name">位置</div>
            <div class="value">{{ viewData.segmentName }}</div>
          </div>
        </div>
      </div>
      <!-- <div class="view-table-middle">养护作业项目</div>
      <div class="view-table-content">
        <div class="content-left-item">
          <div class="name">序号</div>
          <div class="value">内 容</div>
        </div>
        <fssm-scroll :showBar="false" style="max-height: 16rem">
          <div
            class="content-left-item"
            v-for="(item, index) in viewData.taskDescription"
            :key="`content-left-item-${index}`"
          >
            <div class="name">{{ index + 1 }}</div>
            <div class="value">
              <fssm-scroll>
                {{ item }}
              </fssm-scroll>
            </div>
          </div>
        </fssm-scroll>
      </div> -->
      <div class="view-table-bottom">
        <span>管理处道路养护工程师：{{ viewData.creator || "" }}</span>
        <span>制表人：{{ viewData.creator || "" }}</span>
        <span>养护单位项目负责人：{{ viewData.receiver || "" }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getMaintenanceNoticeById } from "@/api/xj/document";
import fssmScroll from "@/components/scroll/fssm-scroll.vue";
export default {
  components: { fssmScroll },
  name: "ViewDialog",
  props: {
    dialogItem: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 查看数据
      viewData: {},
    };
  },
  watch: {
    dialogItem: {
      handler(val) {
        this.getNoticeById(val.id);
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    /**
     * @description: 根据id查询养护通知单
     * @param {*} id
     * @return {*}
     */
     getNoticeById(id) {
      getMaintenanceNoticeById({ id }).then(({ code, data }) => {
        if (code === 200) {
          this.viewData = data;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.view-content {
  width: 100%;
  height: 100%;

  .view-title {
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
  }

  .view-title-card {
    display: flex;
    justify-content: flex-end;
    font-size: 1rem;
  }
}

.view-table {
  font-size: 1rem;

  .view-table-top {
    width: 100%;
    height: 6rem;
    display: flex;

    .left-item {
      width: 45%;
      height: 100%;

      .left-item-content {
        width: 100%;
        height: 50%;
        display: flex;

        > div {
          border: 1px solid black;
        }

        .name {
          width: 40%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .value {
          width: 60%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .left-item-title {
      width: 10%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid black;
    }
  }

  .view-table-middle {
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
  }

  .view-table-content {
    width: 100%;
    max-height: 20rem;

    .content-left-item {
      width: 100%;
      height: 4rem;
      display: flex;

      .name {
        width: 10%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid black;
      }

      .value {
        width: 90%;
        height: 100%;
        padding: 0.25rem 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid black;
      }
    }
  }

  .view-table-bottom {
    width: 100%;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>