soc_web/src/views/core/outIn/outInLog/dialog.approve.request.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"
          :rules="formDataRules"
          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.letterType"/>
              </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.orgName}}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="出入事由">
              {{formData.letterReasons}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item  label="介绍信有效期">
              {{formData.startTimeStr+'~'+formData.endTimeStr}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item  label="有效天数">
                {{ formData.effectiveDays}}
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="介绍信附件">
                <image-file-list-preview v-model="formData.letterFile"></image-file-list-preview>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="备注" prop="letterNo">
                {{formData.letterDescription}}
              </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 size="small" :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="审批操作" prop="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="审批说明" prop="approveRemark">
                <el-input
                  v-model="formData.approveRemark"
                  placeholder="请输入审批说明"
                  maxlength="100"
                />
              </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>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import {
  // getLetter,
  getOutInRequest,
  approveOutInRequest,
} 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";
import imageFileListPreview from "@/components/ImageFileListPreview/index.vue";
export default {
  components: {imageFileListPreview, KFileUpload, imgUpload,DataRangePicker },
  data() {
    const params = this.$route.params;
    return {
      id: params ? params.id : null,
      isShow: false,
      title: "出入事项审批",
      formData: this.reset(),
      formDataRules: {
        approveStatus: [{ required: true, message: "请勾选审批结果" }],
      },
      formFileListDefualtValue: [],
    };
  },
  dicts: ['out_in_type','letter_id_type'],
  props: {},
  watch: {},
  created() {},
  computed: {
    ...mapState(["loginUser", "org"]),
  },
  methods: {
    ...mapMutations([]),
    reset(other = {}) {
      return {
        id: null,
        reasons: null,
        letterNo:null,
        receptionOrgIds: [],
        range:[],
        description: null,
        letterFile: [],
        userInfos: [],
        type:null,
        approveRemark:null,
        approveStatus:null,
        approveSignImg:null,
        ...other,
      };
    },
    // checkApprove(rule,value,callback)
    // {
    //   console.log("checkApprove rule",rule);
    //   console.log("checkApprove value",value);
    //   console.log("checkApprove callback",callback);
    // },
    async show(id, signImg,other = {}) {
      if (id) {
        this.title = "出入事项审批";
        this.isShow = true;
        getOutInRequest(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.formData.approveStatus = "1";
          this.formData.approveSignImg = signImg;
          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();
      this.$refs["upload"].clearFiles();
    },

    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let  {approveRemark,approveStatus,id,approveSignImg} = this.formData;
          let tempRquest={approveRemark,approveStatus,id:id,approveSignImg};

          approveOutInRequest(tempRquest).then((response) => {
              this.$modal.msgSuccess("提交成功");
              this.isShow = false;
              this.formData = this.reset();
              this.$emit("success", this.formData);
            });
        }
      });
    },
  },
  mounted() {},
};
</script>