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

<template>
  <div class="edu-training-edit">
    <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.letter_status" :value="formData.status"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="介绍信编号" prop="letterNo">
                {{formData.letterNo}}
              </el-form-item>
            </el-col>
          

            <el-col :span="12">
              <el-form-item label="接待机构" prop="receptionOrgIds">
                <!-- <org-tree-select v-model="formData.receptionOrgIds" ref="orgTreeSelect">
                </org-tree-select> -->
                {{formData.receptionOrgNames}}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="reasons" 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="介绍信">
                <K-file-upload
                  ref="upload"
                  :isShowUploadBtn="false"
                  :defaultValue="formData.letterFile"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注">
                {{formData.description}}
              </el-form-item>
            </el-col>
           
          </el-row>
          <el-row :gutter="10" class="mb8">
            <el-col :span="12">
                <h3 class="title">
                  <i class="el-icon-collection-tag"></i>
                  人员信息
                </h3> 
            </el-col>
          </el-row>
          <el-table border :data="formData.userInfos" max-height="500" style="margin-bottom: 10px;">
            <el-table-column label="序号"  align="center"  type="index" width="70" />
            <el-table-column label="来访单位" width="150" 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" class="mb8">
            <el-col :span="12">
                <h3 class="title">
                  <i class="el-icon-collection-tag"></i>
                  接待机构
                </h3> 
            </el-col>
          </el-row>
          <el-table border :data="formData.approveInfos" max-height="500" style="margin-bottom: 10px;">
                  <el-table-column label="机构名称" header-align="center" align="left" prop="orgName" />
                  <el-table-column label="审批状态" align="center" prop="approveStatus" >
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.out_in_approve_status" :value="scope.row.approveStatus"/>
                    </template>                    
                  </el-table-column>
                  <el-table-column label="审批说明" header-align="center" align="center" prop="approveRemark">
                  </el-table-column>
                </el-table>
          
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onHide">关 闭</el-button>
      </div>
    </DialogCom>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import {
  listLetter,
  getLetter,
  delLetter,
  addLetter,
  updateLetter,
} from "@/api/core/letter";
import OrgTreeSelect from "@/components/orgTreeSelect";
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: { OrgTreeSelect, KFileUpload, imgUpload,DataRangePicker },
  data() {
    const params = this.$route.params;
    return {
      id: params ? params.id : null,
      isShow: false,
      title: "录入介绍信",
      formData: this.reset(),
      open: false,
      userInfo: this.resetUserInfo(),
      imageList: [],
    };
  },
  dicts: ["letter_status","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:1,
        status:null,
        ...other,
      };
    },
    resetUserInfo() {
      return {
        userName: null,
        companyName: null,
        idCard: null,
        imgFile: null,
      };
    },

    async show(id) {   
        this.title = "介绍信详情";   
        this.isShow = true;
        getLetter(id).then((response) => {
          let tempRange=[];
          tempRange.push(dayjs(response.data.startTime));
          tempRange.push(new Date(response.data.endTime));
          response.data.range=tempRange;
          this.formData = response.data;          
        });
    },
    onHide() {
      this.isShow = false;
      this.formData = this.reset();
    },
  },
  mounted() {},
};
</script>