yxk-electronic-archives/src/views/archivesManage/managementLibrary/module/handOverForm.vue

<template>
  <el-dialog class="detail-dialog" :title="overDetialTitle" :visible.sync="overDetialVisible" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :before-close="handleClose" @opened="opened">
    <div class="setting-dialog">
      <div class="detail-tab tab-content">
        <ul class="tab-nav" style="padding: 0;">
          <li :class="{'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">流程表单</li>
          <li :class="{'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">流程图</li>
        </ul>
        <div v-if="activeIndex == 0">
          <el-form ref="form" :model="form" :rules="rules" inline label-width="110px">
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title" style="width: 280px;" />
            </el-form-item>
            <el-form-item label="申请时间" prop="date">
              <el-input v-model="form.date" style="width: 280px;" disabled />
            </el-form-item>
            <el-form-item label="申请人" prop="applicant">
              <el-input v-model="form.applicant" style="width: 280px;" disabled />
            </el-form-item>
            <el-form-item label="申请人部门" prop="dept">
              <el-input v-model="form.dept" style="width: 280px;" disabled />
            </el-form-item>
            <el-form-item label="申请理由" prop="reason">
              <el-input v-model="form.reason" type="textarea" style="width: 660px;" :rows="4" />
            </el-form-item>
          </el-form>
          <ArchivesListModule v-if="activeIndex == 0" ref="archivesListModule" :selected-category="selectedCategory" :collect-level="collectLevel" :selections="selections" />
        </div>
        <div v-if="activeIndex == 1" class="tab-img">
          <img :src="'data:image/jpeg;base64,'+ srcImg" alt="" :onerror="defaultImg">
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitHandOverForm">提交</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { FetchFondsDetail } from '@/api/system/fonds'
import { FetchBusinessFlowTitle } from '@/api/collect/collect'
import { FetchIntoFlowBusiness } from '@/api/archivesManage/library'
import { mapGetters } from 'vuex'
import ArchivesListModule from '@/views/components/archivesListModule/index'
import { getCurrentTime } from '@/utils/index'
export default {
  name: 'HandOverForm',
  components: { ArchivesListModule },
  props: {
    selectedCategory: {
      type: Object,
      default: function() {
        return {}
      }
    },
    collectLevel: {
      type: Number,
      default: function() {
        return null
      }
    },
    selections: {
      type: Array,
      default: () => []
    },
    isHandOver: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      overType: 3,
      targetFondsNo: null,
      overDetialTitle: '',
      activeIndex: 0,
      overDetialVisible: false,
      form: {
        title: null,
        date: null,
        applicant: null,
        dept: null,
        reason: null,
        fondsNo: null
      },
      rules: {
        title: [
          { required: true, message: '标题不可为空', trigger: 'blur' }
        ]
      },
      defaultImg: 'this.src="' + require('@/assets/images/system/default-img.jpg') + '"',
      srcImg: null
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'baseApi'
    ])
  },
  created() {
  },
  methods: {
    opened() {
      if (this.activeIndex === 0) {
        this.form.applicant = this.user.username
        this.form.dept = this.user.dept.deptsName
        this.form.date = getCurrentTime().split(' ')[0]
        this.getFondsDetail()
        this.$refs.archivesListModule.getViewTable()
      }
    },
    getFondsDetail() {
      FetchFondsDetail({ id: this.user.fonds.id }).then((res) => {
        this.form.fondsNo = res.fondsNo
        if (res.fondsNo) {
          this.getBusinessFlowTitle()
        }
      }).catch(err => {
        console.log(err)
      })
    },
    changeActiveTab(data) {
      this.activeIndex = data
      if (this.activeIndex === 0) {
        console.log('流程表单')
      } else if (this.activeIndex === 1) {
        console.log('流程图')
      }
    },
    getBusinessFlowTitle() {
      const params = {
        'username': this.user.username,
        'fondsNo': this.form.fondsNo,
        'businessType': this.isHandOver ? 6 : this.overType
      }
      FetchBusinessFlowTitle(params).then((res) => {
        if (res.code !== 500) {
          console.log(res)
          this.form.title = res
        } else {
          this.$message({ message: '失败', type: 'error', offset: 8 })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    submitHandOverForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const archivesIds = []
          this.selections.forEach(val => {
            archivesIds.push(val.id)
          })
          const params = {
            'title': this.form.title, // 流程名称
            'applicant': this.user.username, // 申请人
            'archivesIds': archivesIds,
            'businessType': this.isHandOver ? 6 : this.overType,
            'categoryId': this.selectedCategory.id,
            'categoryLevel': this.collectLevel,
            'reason': this.form.reason,
            'fondsNo': this.form.fondsNo, // 原始全宗
            'targetFondsNo': this.targetFondsNo ? this.targetFondsNo.fondsId : null// 目标全宗号
            // 'targetPosition': 'string', // 目的位置
            // 'startPosition': 'string', // 开始位置
            // 'giveStartTime': null, // 赋权开始时间
            // 'giveEndTime': null // 赋权结束时间
          }
          console.log(params)
          FetchIntoFlowBusiness(params).then((res) => {
            if (res.code !== 5001) {
              this.$message({ message: '操作提交成功', type: 'success', offset: 8 })
              this.$emit('close-dialog')
            } else {
              // const message = JSON.parse(res.message)
              // this.$message.error(message.fail.join(',') + '操作提交失败')
              this.$message({ message: res.message, type: 'error', offset: 8 })
            }
            this.handleClose()
          }).catch(err => {
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // dialog - close
    handleClose(done) {
      this.form.title = ''
      this.form.reason = ''
      this.overDetialVisible = false
      this.$refs['form'].resetFields()
      done()
    }
  }
}
</script>
<style lang="scss" scoped>
.tab-img{
  height: 440px;
  overflow: hidden;
  img{
    display: block;
    width: 100%;
    // height: 100%;
  }
}
</style>