|  | @@ -0,0 +1,347 @@
 | 
	
		
			
				|  |  | +<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"
 | 
	
		
			
				|  |  | +          :rules="formDataRules"
 | 
	
		
			
				|  |  | +          label-width="120px"
 | 
	
		
			
				|  |  | +        >
 | 
	
		
			
				|  |  | +          <el-row>
 | 
	
		
			
				|  |  | +            <el-col :span="12">
 | 
	
		
			
				|  |  | +              <el-form-item prop="reasons" label="出入事由">
 | 
	
		
			
				|  |  | +                <el-input
 | 
	
		
			
				|  |  | +                  v-model="formData.reasons"
 | 
	
		
			
				|  |  | +                  placeholder="请输入出入事由"
 | 
	
		
			
				|  |  | +                  :length="200"
 | 
	
		
			
				|  |  | +                />
 | 
	
		
			
				|  |  | +              </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>
 | 
	
		
			
				|  |  | +              </el-form-item>
 | 
	
		
			
				|  |  | +            </el-col>
 | 
	
		
			
				|  |  | +            <el-col :span="12">
 | 
	
		
			
				|  |  | +              <el-form-item label="介绍信编号" prop="letterNo">
 | 
	
		
			
				|  |  | +                <el-input
 | 
	
		
			
				|  |  | +                  v-model="formData.letterNo"
 | 
	
		
			
				|  |  | +                  placeholder="请输入介绍信编号"
 | 
	
		
			
				|  |  | +                  :length="200"
 | 
	
		
			
				|  |  | +                />
 | 
	
		
			
				|  |  | +              </el-form-item>
 | 
	
		
			
				|  |  | +            </el-col>
 | 
	
		
			
				|  |  | +            <el-col :span="12">
 | 
	
		
			
				|  |  | +              <el-form-item prop="range" label="介绍信有效期">
 | 
	
		
			
				|  |  | +                <DataRangePicker
 | 
	
		
			
				|  |  | +              v-model="formData.range"
 | 
	
		
			
				|  |  | +              key="daterange"
 | 
	
		
			
				|  |  | +              type="daterange"
 | 
	
		
			
				|  |  | +            />
 | 
	
		
			
				|  |  | +              </el-form-item>
 | 
	
		
			
				|  |  | +            </el-col>
 | 
	
		
			
				|  |  | +            <el-col :span="12">
 | 
	
		
			
				|  |  | +              <el-form-item label="上传介绍信" prop="letterFile">
 | 
	
		
			
				|  |  | +                <K-file-upload
 | 
	
		
			
				|  |  | +                  ref="upload"
 | 
	
		
			
				|  |  | +                  :defaultValue="formFileListDefualtValue"
 | 
	
		
			
				|  |  | +                  v-model="formData.letterFile"
 | 
	
		
			
				|  |  | +                />
 | 
	
		
			
				|  |  | +              </el-form-item>
 | 
	
		
			
				|  |  | +            </el-col>
 | 
	
		
			
				|  |  | +            <el-col :span="12">
 | 
	
		
			
				|  |  | +              <el-form-item label="备注" prop="description">
 | 
	
		
			
				|  |  | +                <el-input
 | 
	
		
			
				|  |  | +                  v-model="formData.description"
 | 
	
		
			
				|  |  | +                  placeholder="请输入备注"
 | 
	
		
			
				|  |  | +                  maxlength="100"
 | 
	
		
			
				|  |  | +                />
 | 
	
		
			
				|  |  | +              </el-form-item>
 | 
	
		
			
				|  |  | +            </el-col>
 | 
	
		
			
				|  |  | +          </el-row>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          <el-row :gutter="10" class="mb8">
 | 
	
		
			
				|  |  | +            <el-col :span="1.5">
 | 
	
		
			
				|  |  | +              <el-button
 | 
	
		
			
				|  |  | +                type="primary"
 | 
	
		
			
				|  |  | +                plain
 | 
	
		
			
				|  |  | +                icon="el-icon-plus"
 | 
	
		
			
				|  |  | +                size="mini"
 | 
	
		
			
				|  |  | +                @click="handleAddUser"
 | 
	
		
			
				|  |  | +                >新增人员</el-button
 | 
	
		
			
				|  |  | +              >
 | 
	
		
			
				|  |  | +            </el-col>
 | 
	
		
			
				|  |  | +          </el-row>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          <el-table :data="formData.userInfos">
 | 
	
		
			
				|  |  | +            <el-table-column label="人员姓名" align="center" prop="userName" />
 | 
	
		
			
				|  |  | +            <el-table-column label="单位" align="center" prop="companyName" />
 | 
	
		
			
				|  |  | +            <el-table-column label="证件号码" align="center" prop="idCard">
 | 
	
		
			
				|  |  | +            </el-table-column>
 | 
	
		
			
				|  |  | +            <el-table-column label="证件照" align="center" prop="imgFile">
 | 
	
		
			
				|  |  | +              <template slot-scope="scope">
 | 
	
		
			
				|  |  | +                <img width="50" height="50" :src="scope.row.imgFile" />
 | 
	
		
			
				|  |  | +              </template> </el-table-column
 | 
	
		
			
				|  |  | +            >
 | 
	
		
			
				|  |  | +            <el-table-column
 | 
	
		
			
				|  |  | +              label="操作"
 | 
	
		
			
				|  |  | +              align="center"
 | 
	
		
			
				|  |  | +              class-name="small-padding fixed-width"
 | 
	
		
			
				|  |  | +            >
 | 
	
		
			
				|  |  | +              <template slot-scope="scope">
 | 
	
		
			
				|  |  | +                <el-button size="mini" type="text" @click="editUser(scope.row)"
 | 
	
		
			
				|  |  | +                  >编辑</el-button
 | 
	
		
			
				|  |  | +                >
 | 
	
		
			
				|  |  | +                <el-button size="mini" type="text" @click="remove(scope.row)"
 | 
	
		
			
				|  |  | +                  >移除</el-button
 | 
	
		
			
				|  |  | +                >
 | 
	
		
			
				|  |  | +              </template>
 | 
	
		
			
				|  |  | +            </el-table-column>
 | 
	
		
			
				|  |  | +          </el-table>
 | 
	
		
			
				|  |  | +        </el-form>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      <DialogCom
 | 
	
		
			
				|  |  | +        title="添加出入人员"
 | 
	
		
			
				|  |  | +        :visible.sync="open"
 | 
	
		
			
				|  |  | +        width="600px"
 | 
	
		
			
				|  |  | +        append-to-body
 | 
	
		
			
				|  |  | +        @close="onHideUser"
 | 
	
		
			
				|  |  | +      >
 | 
	
		
			
				|  |  | +        <el-form
 | 
	
		
			
				|  |  | +          ref="formUser"
 | 
	
		
			
				|  |  | +          :model="userInfo"
 | 
	
		
			
				|  |  | +          :rules="userInfoRules"
 | 
	
		
			
				|  |  | +          label-width="120px"
 | 
	
		
			
				|  |  | +        >
 | 
	
		
			
				|  |  | +          <el-form-item label="人员姓名" prop="userName">
 | 
	
		
			
				|  |  | +            <el-input v-model="userInfo.userName" placeholder="请输入姓名" />
 | 
	
		
			
				|  |  | +          </el-form-item>
 | 
	
		
			
				|  |  | +          <el-form-item label="单位" prop="companyName">
 | 
	
		
			
				|  |  | +            <el-input v-model="userInfo.companyName" placeholder="请输入单位" />
 | 
	
		
			
				|  |  | +          </el-form-item>
 | 
	
		
			
				|  |  | +          <el-form-item label="证件号码" prop="idCard">
 | 
	
		
			
				|  |  | +            <el-input v-model="userInfo.idCard" placeholder="请输入证件号码" />
 | 
	
		
			
				|  |  | +          </el-form-item>
 | 
	
		
			
				|  |  | +          <el-form-item prop="imgFile" label="上传证件照">
 | 
	
		
			
				|  |  | +            <!-- <ImageListPreview v-model="userInfo.imgFile"></ImageListPreview> -->
 | 
	
		
			
				|  |  | +            <imgUpload ref="uploadimage" type="more" :value="userInfo.imgFile"
 | 
	
		
			
				|  |  | +                           @input="imageListChanged"></imgUpload>
 | 
	
		
			
				|  |  | +          </el-form-item>
 | 
	
		
			
				|  |  | +        </el-form>
 | 
	
		
			
				|  |  | +        <div slot="footer" class="dialog-footer">
 | 
	
		
			
				|  |  | +          <el-button type="primary" @click="submitUser">确 定</el-button>
 | 
	
		
			
				|  |  | +          <el-button @click="onHideUser">取 消</el-button>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +      </DialogCom>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      <div slot="footer" class="dialog-footer">
 | 
	
		
			
				|  |  | +        <el-button type="primary" @click="submitForm">确 定</el-button>
 | 
	
		
			
				|  |  | +        <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(),
 | 
	
		
			
				|  |  | +      formDataRules: {
 | 
	
		
			
				|  |  | +        reasons: [{ required: true, message: "请输入出入事由" }],
 | 
	
		
			
				|  |  | +        letterNo: [{ required: true, message: "请输入介绍信编号" }],
 | 
	
		
			
				|  |  | +        receptionOrgIds: [{ required: true, message: "请选择接待机构" }],
 | 
	
		
			
				|  |  | +        range: [{ required: true, message: "请选择介绍信有效期" }],      
 | 
	
		
			
				|  |  | +        userInfos: [{ required: true, message: "请添加出入人员" }],
 | 
	
		
			
				|  |  | +        letterFile:[{ required: true, message: "请上传介绍信" }],
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      userInfoRules: {
 | 
	
		
			
				|  |  | +        userName: [{ required: true, message: "请输入姓名" }],
 | 
	
		
			
				|  |  | +        companyName: [{ required: true, message: "请输入单位" }],
 | 
	
		
			
				|  |  | +        idCard: [{ required: true, message: "请输入证件号码" }],
 | 
	
		
			
				|  |  | +        imgFile: [{ required: true, message: "请上传证件照" }],
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      startDatepickerOptions: {
 | 
	
		
			
				|  |  | +        disabledDate: this.endDisabledDate,
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      endDatepickerOptions: {
 | 
	
		
			
				|  |  | +        disabledDate: this.endDisabledDate,
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      formFileListDefualtValue: [],
 | 
	
		
			
				|  |  | +      open: false,
 | 
	
		
			
				|  |  | +      userInfo: this.resetUserInfo(),
 | 
	
		
			
				|  |  | +      imageList: [],
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  dicts: ["letter_status"],
 | 
	
		
			
				|  |  | +  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:0,
 | 
	
		
			
				|  |  | +        ...other,
 | 
	
		
			
				|  |  | +      };
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    resetUserInfo() {
 | 
	
		
			
				|  |  | +      return {
 | 
	
		
			
				|  |  | +        userName: null,
 | 
	
		
			
				|  |  | +        companyName: null,
 | 
	
		
			
				|  |  | +        idCard: null,
 | 
	
		
			
				|  |  | +        imgFile: null,
 | 
	
		
			
				|  |  | +      };
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    async show(id, other = {}) {     
 | 
	
		
			
				|  |  | +      if (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;
 | 
	
		
			
				|  |  | +          this.formFileListDefualtValue=this.formData.letterFile;
 | 
	
		
			
				|  |  | +        });        
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      else 
 | 
	
		
			
				|  |  | +      {
 | 
	
		
			
				|  |  | +        this.isShow = true;
 | 
	
		
			
				|  |  | +        this.title = "录入介绍信";
 | 
	
		
			
				|  |  | +        this.formData = this.reset();       
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    handleAddUser() {
 | 
	
		
			
				|  |  | +      this.open = true;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    imageListChanged(list) {
 | 
	
		
			
				|  |  | +      this.userInfo.imgFile = list;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    endDisabledDate(time) {
 | 
	
		
			
				|  |  | +      //小于开始日期禁止选择
 | 
	
		
			
				|  |  | +      let startDate = new Date();
 | 
	
		
			
				|  |  | +      startDate.setTime(startDate.getTime() - 3600 * 1000 * 24);
 | 
	
		
			
				|  |  | +      if (this.formData.trainingStartDateTime) {
 | 
	
		
			
				|  |  | +        startDate = new Date(
 | 
	
		
			
				|  |  | +          dayjs(this.formData.trainingStartDateTime).format("YYYY-MM-DD")
 | 
	
		
			
				|  |  | +        );
 | 
	
		
			
				|  |  | +        startDate.setTime(startDate.getTime() - 3600 * 1000 * 24);
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      return time.getTime() < new Date(startDate).getTime();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    startDateChanged(time) {
 | 
	
		
			
				|  |  | +      if (
 | 
	
		
			
				|  |  | +        dayjs(this.formData.startTime).isAfter(dayjs(this.formData.endTime))
 | 
	
		
			
				|  |  | +      ) {
 | 
	
		
			
				|  |  | +        this.formData.endTime = this.formData.startTime;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    endDateChanged(time) {
 | 
	
		
			
				|  |  | +      if (
 | 
	
		
			
				|  |  | +        dayjs(this.formData.startTime).isAfter(dayjs(this.formData.endTime))
 | 
	
		
			
				|  |  | +      ) {
 | 
	
		
			
				|  |  | +        this.formData.startTime = this.formData.endTime;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    onHide() {
 | 
	
		
			
				|  |  | +      this.isShow = false;
 | 
	
		
			
				|  |  | +      this.formData = this.reset();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    onHideUser() {
 | 
	
		
			
				|  |  | +      this.open = false;
 | 
	
		
			
				|  |  | +      this.imageList = [];
 | 
	
		
			
				|  |  | +      this.userInfo = this.resetUserInfo();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    submitUser() {
 | 
	
		
			
				|  |  | +      this.$refs["formUser"].validate((valid) => {
 | 
	
		
			
				|  |  | +        if (valid) {
 | 
	
		
			
				|  |  | +          this.open = false;
 | 
	
		
			
				|  |  | +          console.log("================", this.userInfo);
 | 
	
		
			
				|  |  | +          this.formData.userInfos.push(this.userInfo);
 | 
	
		
			
				|  |  | +          this.userInfo = this.resetUserInfo();
 | 
	
		
			
				|  |  | +          this.imageList = [];
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    submitForm() {
 | 
	
		
			
				|  |  | +      this.$refs["form"].validate((valid) => {
 | 
	
		
			
				|  |  | +        if (valid) {
 | 
	
		
			
				|  |  | +          if (this.formData.userInfos.length <= 0) {
 | 
	
		
			
				|  |  | +            this.$message.error("请添加人员");
 | 
	
		
			
				|  |  | +            return;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +          console.log("================", this.formData);
 | 
	
		
			
				|  |  | +          if (this.formData.id != null) {
 | 
	
		
			
				|  |  | +            updateLetter(this.formData).then((response) => {
 | 
	
		
			
				|  |  | +              this.$modal.msgSuccess("修改成功");
 | 
	
		
			
				|  |  | +              this.isShow = false;
 | 
	
		
			
				|  |  | +              this.formData = this.reset();
 | 
	
		
			
				|  |  | +              this.$emit("success", this.formData);
 | 
	
		
			
				|  |  | +            });
 | 
	
		
			
				|  |  | +          } else {
 | 
	
		
			
				|  |  | +            addLetter(this.formData).then((response) => {
 | 
	
		
			
				|  |  | +              this.$modal.msgSuccess("新增成功");
 | 
	
		
			
				|  |  | +              this.isShow = false;
 | 
	
		
			
				|  |  | +              this.formData = this.reset();
 | 
	
		
			
				|  |  | +              this.$emit("success", this.formData);
 | 
	
		
			
				|  |  | +            });
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    editUser(row) {
 | 
	
		
			
				|  |  | +      this.open = true;
 | 
	
		
			
				|  |  | +      this.userInfo = row;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    remove(row) {
 | 
	
		
			
				|  |  | +      console.log("================", row);
 | 
	
		
			
				|  |  | +      this.formData.userInfos.splice(this.formData.userInfos.indexOf(row), 1);
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  mounted() {},
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 |