soc_web/src/views/core/outIn/approve/dialog.approve.letter.detail.vue

<template>
    <DialogCom
      :title="title"
      @close="onHide"
      :visible.sync="isShow"
      width="1000px"
    >
      <div class="page-body">
        <el-descriptions
          :column="2"
          border
          size="medium"
          :label-style="labelStyle"
          :contentStyle="content_style">
          <el-descriptions-item label="介绍信类型">
            <dict-tag :options="dict.type.out_in_type" :value="formData.type"/>
          </el-descriptions-item>
<!--          <el-descriptions-item label="当前状态">-->
<!--            <dict-tag :options="dict.type.letter_status" :value="formData.status"/>-->
<!--          </el-descriptions-item>-->
          <el-descriptions-item label="介绍信编号">{{formData.letterNo}}</el-descriptions-item>
          <el-descriptions-item label="接待机构">{{formData.receptionOrgNames}}</el-descriptions-item>
          <el-descriptions-item label="来访事由">{{formData.reasons}}</el-descriptions-item>
          <el-descriptions-item label="开具日期">{{formData.startTimeStr}}</el-descriptions-item>
          <el-descriptions-item label="有效天数">{{formData.effectiveDays}}</el-descriptions-item>
          <el-descriptions-item label="介绍信附件">
            <K-file-upload
              ref="upload"
              :isShowUploadBtn="false"
              :defaultValue="formData.letterFile"
            />
          </el-descriptions-item>
          <el-descriptions-item label="备注">{{formData.description}}</el-descriptions-item>

        </el-descriptions >

        <el-row :gutter="10">
          <el-col :span="12">
            <h3>
              <i class="el-icon-collection-tag"></i>
              人员信息
            </h3>
          </el-col>
        </el-row>
        <el-table border :data="formData.userInfos" height="300">
          <el-table-column label="序号"  align="center"  type="index" width="70" />
          <el-table-column label="来访单位" width="100" align="center" prop="companyName" />
          <el-table-column label="来访人员" width="100" align="center" prop="userName" />
          <el-table-column label="证件类型" width="100" align="center" prop="idType">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.letter_id_type" :value="scope.row.idType"/>
            </template>
          </el-table-column>
          <el-table-column label="证件号码" width="200" align="center" prop="idCard">
          </el-table-column>
          <el-table-column label="证件图片" align="center" prop="imgFile">
            <template slot-scope="scope">
              <ImageListPreview v-model="scope.row.imgFile"></ImageListPreview>
            </template>
          </el-table-column>
        </el-table>
        <el-row :gutter="10">
          <el-col :span="12">
            <h3>
              <i class="el-icon-collection-tag"></i>
              审批信息
            </h3>
          </el-col>
        </el-row>
        <el-descriptions
          :column="2"
          border
          size="medium"
          :label-style="labelStyle"
          :contentStyle="content_style">
          <el-descriptions-item label="审批状态">
            <dict-tag :options="dict.type.out_in_approve_status" :value="formData.approveLog.approveStatus"/>
          </el-descriptions-item>
          <el-descriptions-item label="审批时间"> {{formData.approveLog.approveTime}}</el-descriptions-item>
          <el-descriptions-item label="审批说明">  {{formData.approveLog.approveRemark}}</el-descriptions-item>
        </el-descriptions >
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
        <el-button @click="onHide">关  闭</el-button>
      </div>
    </DialogCom>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import {
  getLetter,
  approveLetter,
} from "@/api/core/letter";
import KFileUpload from "@/components/K-FileUpload/index.vue";
import dayjs from "dayjs";
import imgUpload from "@/components/ImageUpload";
import DataRangePicker from "@/components/dateTime/daterange.picker.vue";
export default {
  components: { KFileUpload, imgUpload,DataRangePicker },
  data() {
    const params = this.$route.params;
    return {
      labelStyle: {
        color: "#000",
        "text-align": "center",
        height: "40px",
        "min-width": "150px",
        "word-break": "keep-all",
      },
      content_style: {
        "text-align": "left",
        "min-width": "300px",
        "word-break": "break-all",
      },
      id: params ? params.id : null,
      isShow: false,
      title: "来访事项审批详情",
      formData: this.reset(),
      formFileListDefualtValue: [],
    };
  },
  dicts: ['out_in_type','out_in_approve_status','letter_id_type'],
  props: {},
  watch: {},
  created() {},
  computed: {
    ...mapState(["loginUser", "org"]),
  },
  methods: {
    ...mapMutations([]),
    reset(other = {}) {
      return {
        reasons: null,
        letterNo:null,
        receptionOrgIds: [],
        range:[],
        description: null,
        letterFile: [],
        userInfos: [],
        type:null,
        approveLog:{
          approveStatus:null,
          approveRemark:null
        },
        ...other,
      };
    },
    async show(id) {
        this.title = "来访事项审批详情";
        this.isShow = true;
        getLetter(id).then((response) => {
          this.formData = response.data;
          this.formFileListDefualtValue=this.formData.letterFile;
        });
    },
    onHide() {
      this.isShow = false;
      this.formData = this.reset();
      // this.$refs["upload"].clearFiles();
    },
  },
  mounted() {},
};
</script>