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-form
          ref="form"
          :model="formData"
          label-width="120px"
          label-suffix=":">             
          <el-row>
            <el-col :span="24">
              <el-form-item label="介绍信类型">
              <dict-tag :options="dict.type.out_in_type" :value="formData.type"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="介绍信编号">
              {{formData.letterNo}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="接待机构" prop="receptionOrgIds">
                {{formData.receptionOrgNames}}
                <!-- <org-tree-select v-model="formData.receptionOrgIds" ref="orgTreeSelect">
                </org-tree-select> -->
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="来访事由">
              {{formData.reasons}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item  label="开具日期">
              {{formData.startTimeStr}}
              </el-form-item>
            </el-col>
           
            <el-col :span="12">
              <el-form-item  label="有效天数">
                {{ formData.effectiveDays}}
              </el-form-item>
            </el-col>
           
            <el-col :span="12">
              <!-- <el-form-item label="介绍信" prop="letterNo">               
              </el-form-item> -->
              <el-form-item label="介绍信附件">
                <K-file-upload ref="upload" :isShowUploadBtn="false"
                                :defaultValue="formFileListDefualtValue"
                                v-model="formData.letterFile"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="letterNo">
                {{formData.description}}
              </el-form-item>
            </el-col>          
          </el-row>
          <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-row>
            <el-col :span="12">
              <el-form-item label="审批状态">   
                <dict-tag :options="dict.type.out_in_approve_status" :value="formData.approveLog.approveStatus"/> 
                <!-- <el-radio v-model="formData.approveStatus" label="1">同意</el-radio>
                <el-radio v-model="formData.approveStatus" label="2">不同意</el-radio>            -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审批说明"> 
               {{formData.approveLog.approveRemark}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审批时间"> 
               {{formData.approveLog.approveTime}}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </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 {
      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>