qa-prevention-gwj-vue/src/views/security_commitment/promise_book/components/see.vue

<template>
  <div>
    <el-divider content-position="left">基本信息</el-divider>
    <table class="table-ui">
      <tr>
        <td class="bbg">承诺书名称</td>
        <td>{{ form.PROMISE_NAME }}</td>
      </tr>
      <tr>
        <td class="bbg">级别</td>
        <td>{{ form.LEVELNAME }}</td>
      </tr>
      <tr>
        <td class="bbg">适用期限开始</td>
        <td>{{ form.PROMISE_TERM_START }}</td>
      </tr>
      <tr>
        <td class="bbg">适用期限结束</td>
        <td>{{ form.PROMISE_TERM_END }}</td>
      </tr>
    </table>
    <el-divider content-position="left">承诺人</el-divider>
    <table class="table-ui">
      <tr v-for="(item,index) in form.people" :key="item.id">
        <td class="bbg">{{ '部门' + (index + 1) }}</td>
        <td class="trwidth">{{ item.DEPTNAME }}</td>
        <td class="bbg">{{ '岗位' + (index + 1) }}</td>
        <td class="trwidth">{{ item.POSTNAME }}</td>
        <td class="bbg">{{ '人员' + (index + 1) }}</td>
        <td class="trwidth">{{ item.USERNAME && item.USERNAME.join('、') }}</td>
      </tr>
    </table>
    <el-divider content-position="left">被承诺人</el-divider>
    <table class="table-ui">
      <tr v-for="(item,index) in form.coverpeople" :key="item.id">
        <td class="bbg">{{ '部门' + (index + 1) }}</td>
        <td class="trwidth">{{ item.DEPTNAME }}</td>
        <td class="bbg">{{ '岗位' + (index + 1) }}</td>
        <td class="trwidth">{{ item.POSTNAME }}</td>
        <td class="bbg">{{ '人员' + (index + 1) }}</td>
        <td class="trwidth">{{ item.USERNAME && item.USERNAME.join('、') }}</td>
        <td class="bbg">{{ '岗位名称' + (index + 1) }}</td>
        <td class="trwidth">{{ item.NICKNAME }}</td>
      </tr>
    </table>
    <el-divider content-position="left">承诺内容</el-divider>
    <table class="table-ui">
      <tr>
        <td class="bbg">正文</td>
        <td>{{ form.TEXT }}</td>
      </tr>
      <tr v-for="(item, index) in form.DETAIL" :key="item.id">
        <td class="bbg">{{ '副文' + (index + 1) }}</td>
        <td>{{ item.value }}</td>
      </tr>
    </table>
    <div class="ui-height" />
    <div class="ui-foot">
      <el-button type="primary" @click="goView">模 板</el-button>
      <el-button @click="goBack">取 消</el-button>
    </div>
    <promise-book-dialog :visible.sync="dialog.visible" :dialog-data="dialog.data"/>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
import PromiseBookDialog from './promise_book_dialog'

export default {
  components: {
    PromiseBookDialog
  },
  data() {
    return {
      form: {},
      dialog: {
        visible: false,
        data: {}
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      requestFN(
        '/corppromise/goEdit',
        {
          PROMISE_ID: this.$parent.PROMISE_ID
        }
      ).then((data) => {
        const DETAIL = data.promistDetail.map(item => ({ value: item.COLLATERAL, id: item.PROMISEDETAIL_ID }))
        this.form = { ...data.varList, DETAIL, people: [], coverpeople: [] }
        for (let i = 0; i < data.people2.length; i++) {
          this.form.people.push({
            postList: [],
            userList: [],
            DEPARTMENT_ID: data.people2[i].DEPARTMENT_ID,
            DEPTNAME: data.people2[i].DEPTNAME,
            POST_ID: data.people2[i].POST_ID,
            POSTNAME: data.people2[i].POSTNAME,
            USER_ID: [],
            USERNAME: [],
            id: data.people2[i].PROMISEPEOPLE_ID
          })
          for (let j = 0; j < this.form.people.length; j++) {
            if (data.people2[i].POST_ID === this.form.people[j].POST_ID) {
              this.form.people[j].USER_ID.push(data.people2[i].USER_ID)
              this.form.people[j].USERNAME.push(data.people2[i].USERNAME)
              this.form.people.splice(j + 1, 1)
            }
          }
        }
        for (let i = 0; i < data.coverpeople.length; i++) {
          this.form.coverpeople.push({
            postList: [],
            userList: [],
            DEPARTMENT_ID: data.coverpeople[i].DEPARTMENT_ID,
            DEPTNAME: data.coverpeople[i].DEPTNAME,
            POST_ID: data.coverpeople[i].POST_ID,
            POSTNAME: data.coverpeople[i].POSTNAME,
            NICKNAME: data.coverpeople[i].NICKNAME,
            USER_ID: [],
            USERNAME: [],
            id: data.coverpeople[i].PROMISEPEOPLE_ID
          })
          for (let j = 0; j < this.form.coverpeople.length; j++) {
            if (data.coverpeople[i].POST_ID === this.form.coverpeople[j].POST_ID) {
              this.form.coverpeople[j].USER_ID.push(data.coverpeople[i].USER_ID)
              this.form.coverpeople[j].USERNAME.push(data.coverpeople[i].USERNAME)
              this.form.coverpeople.splice(j + 1, 1)
            }
          }
        }
      })
    },
    goView() {
      this.dialog.visible = true
      this.dialog.data = { ...this.form, DETAIL: this.form.DETAIL, FILEPATH: '', SIGNTIME: '', COVERPEOPLE: this.form.coverpeople[0].USERNAME[0], NICKNAME: this.form.coverpeople[0].NICKNAME }
    },
    goBack() {
      this.$parent.activeName = 'List'
    }
  }
}
</script>

<style scoped>
.trwidth {
  width: 28.3%;
}
.bbg {
  background: #f9f9f9;
  width: 7%;
  text-align: center;
}
</style>