integrated_traffic_vue/src/views/security_commitment_pro/administration/view.vue

<template>
  <layout-card>
    <el-divider content-position="left">基本信息</el-divider>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="承诺书名称">
        {{ info.PROMISE_NAME }}
      </el-descriptions-item>
      <el-descriptions-item label="级别">
        {{ info.LEVELNAME }}
      </el-descriptions-item>
      <el-descriptions-item label="适用期限开始">
        {{ info.PROMISE_TERM_START }}
      </el-descriptions-item>
      <el-descriptions-item label="适用期限结束">
        {{ info.PROMISE_TERM_END }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">承诺人</el-divider>
    <el-descriptions :column="3" border>
      <template v-for="(item, index) in info.people" :key="item.id">
        <el-descriptions-item :label="'部门' + (index + 1)">
          {{ item.DEPTNAME }}
        </el-descriptions-item>
        <el-descriptions-item :label="'岗位' + (index + 1)">
          {{ item.POSTNAME }}
        </el-descriptions-item>
        <el-descriptions-item :label="'人员' + (index + 1)">
          {{ item.USERNAME?.join("、") }}
        </el-descriptions-item>
      </template>
    </el-descriptions>
    <el-divider content-position="left">被承诺人</el-divider>
    <el-descriptions :column="3" border>
      <template v-for="(item, index) in info.coverpeople" :key="item.id">
        <el-descriptions-item :label="'部门' + (index + 1)">
          {{ item.DEPTNAME }}
        </el-descriptions-item>
        <el-descriptions-item :label="'岗位' + (index + 1)">
          {{ item.POSTNAME }}
        </el-descriptions-item>
        <el-descriptions-item :label="'人员' + (index + 1)">
          {{ item.USERNAME?.join("、") }}
        </el-descriptions-item>
      </template>
    </el-descriptions>
    <el-divider content-position="left">承诺内容</el-divider>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="正文">
        {{ info.TEXT }}
      </el-descriptions-item>
      <template v-for="(item, index) in info.DETAIL" :key="item.id">
        <el-descriptions-item :label="'副文' + (index + 1)">
          {{ item.value }}
        </el-descriptions-item>
      </template>
    </el-descriptions>
    <div class="tc mt-10">
      <el-button type="primary" @click="fnView">模 板</el-button>
    </div>
    <view-info
      v-model:visible="data.viewDialog.visible"
      :info="data.viewDialog.info"
    />
  </layout-card>
</template>

<script setup>
import { reactive, ref } from "vue";
import { getAdministrationView } from "@/request/security_commitment_pro.js";
import { useRoute } from "vue-router";
import ViewInfo from "../template/components/view.vue";
import { uniqBy } from "lodash-es";

const route = useRoute();
const { PROMISE_ID } = route.query;
const info = ref({});
const data = reactive({
  viewDialog: {
    visible: false,
    info: {},
  },
});
const fnGetData = async () => {
  const resData = await getAdministrationView({ PROMISE_ID });
  const DETAIL = resData.promistDetail.map((item) => ({
    value: item.COLLATERAL,
    id: item.PROMISEDETAIL_ID,
  }));
  const people = resData.people;
  const coverpeople = resData.coverpeople;
  const newPeople = [];
  const newCoverpeople = [];
  for (let i = 0; i < people.length; i++) {
    newPeople.push({
      ...people[i],
      USERNAME: [],
      id: people[i].PROMISEPEOPLE_ID,
    });
    for (let j = 0; j < newPeople.length; j++) {
      if (people[i].POST_ID === newPeople[j].POST_ID) {
        newPeople[j].USERNAME.push(people[i].USERNAME);
      }
    }
  }
  for (let i = 0; i < coverpeople.length; i++) {
    newCoverpeople.push({
      ...coverpeople[i],
      USERNAME: [],
      id: coverpeople[i].PROMISEPEOPLE_ID,
    });
    for (let j = 0; j < newCoverpeople.length; j++) {
      if (coverpeople[i].POST_ID === newCoverpeople[j].POST_ID) {
        newCoverpeople[j].USERNAME.push(coverpeople[i].USERNAME);
      }
    }
  }
  info.value = {
    ...resData.varList,
    DETAIL,
    people: uniqBy(newPeople, "POST_ID"),
    coverpeople: uniqBy(newCoverpeople, "POST_ID"),
  };
};
fnGetData();
const fnView = () => {
  data.viewDialog.info = {
    ...info.value,
    FILEPATH: "",
    SIGNTIME: "",
    COVERPEOPLE: info.value.coverpeople[0].USERNAME[0],
  };
  data.viewDialog.visible = true;
};
</script>

<style scoped lang="scss"></style>