yxk-electronic-archives/src/views/archiveUtilize/utillizeRecord/module/utilizationProcess.vue

<template>
  <el-dialog :title="title" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="lendFormVisible" :before-close="handleCloseDialog" @opened="opened">
    <div class="setting-dialog">
      <el-form ref="form" :model="form" :rules="rules" inline label-width="100px">
        <el-form-item label="利用人" prop="applicant">
          <el-input v-model="form.applicant" style="width: 280px;" disabled />
        </el-form-item>
        <el-form-item label="利用流程" prop="title">
          <el-input v-model="form.title" style="width: 280px;" />
        </el-form-item>
        <el-form-item label="开始时间" prop="giveStartTime">
          <el-date-picker
            v-model="form.giveStartTime"
            :picker-options="pickerStartTime"
            type="datetime"
            align="right"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            style="width: 280px;"
            disabled
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="giveEndTime">
          <el-date-picker
            v-model="form.giveEndTime"
            :picker-options="pickerEndTime"
            type="datetime"
            align="right"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            style="width: 280px;"
          />
        </el-form-item>
        <el-row>
          <el-form-item label="利用事由" prop="borrowReason">
            <el-input v-model="form.borrowReason" type="textarea" :rows="3" style="width: 703px;" />
          </el-form-item>
        </el-row>
        <!-- <el-row>
          <el-form-item label="状态" prop="status">
            <span class="row-state soon-state">即将到期</span>
            <span class="row-state end-state">利用中</span>
            <span class="row-state cancel-state">已过期</span>
          </el-form-item>
        </el-row> -->
      </el-form>
      <el-table
        ref="table"
        :data="detailArcData"
        style="width: 100%;"
        height="calc(100vh - 560px)"
      >
        <el-table-column type="index" label="序号" align="center" width="55" />
        <el-table-column prop="maintitle" label="档案文件" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="title-style"><span>文件</span>【{{ scope.row.archiveNo }}】{{ scope.row.maintitle }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="checkedId" label="利用方式" width="340">
          <template slot-scope="scope">
            <!-- <el-checkbox v-for="item in scope.row.childMenu" :key="item.value" v-model="item.checked" :label="item.value" :data-a="responsive" @change="changeChecked(item)">{{ item.label }}</el-checkbox> -->
            <el-checkbox-group v-model="scope.row.checkedId" :min="1" class="checkbox-style" @change="changeChecked">
              <el-checkbox v-for="item in scope.row.childMenu" :key="item.value" :label="item.value" :data-a="responsive">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="createTime" label="实体借阅状态" align="center" width="110">
          <template>
            <div>
              <span class="row-state soon-state">即将到期</span>
              <span class="row-state end-state">利用中</span>
            <span class="row-state cancel-state">已过期</span>
            </div>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="handleCloseDialog">取消</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { FetchFondsDetail } from '@/api/system/fonds'
import { FetchIntoFlowBusiness } from '@/api/archivesManage/library'
import { FetchBusinessFlowTitle } from '@/api/collect/collect'
import { mapGetters } from 'vuex'
import { getCurrentTime } from '@/utils/index'
export default {
  name: 'LendForm',
  components: { },
  data() {
    return {
      title: '利用详情',
      lendFormVisible: false,
      form: {
        applicant: null,
        title: null,
        giveStartTime: null,
        giveEndTime: null,
        borrowReason: null,
        fondsNo: null
      },
      checkedEquipments: [],
      detailArcData: [],
      responsive: true,
      uselist: [
        {
          value: 1,
          label: '电子查看'
        },
        {
          value: 2,
          label: '下载'
        },
        {
          value: 3,
          label: '打印'
        },
        {
          value: 4,
          label: '实体借阅'
        }
      ],
      rules: {
        title: [
          { required: true, message: '标题不可为空', trigger: 'blur' }
        ],
        giveStartTime: [
          { required: true, message: '开始时间不可为空', trigger: 'blur' }
        ],
        giveEndTime: [
          { required: true, message: '结束时间不可为空', trigger: 'blur' }
        ],
        borrowReason: [
          { required: true, message: '利用事由不可为空', trigger: 'blur' }
        ]
      },
      checkedArr: []
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'baseApi'
    ]),
    pickerStartTime() {
      const _this = this
      return {
        disabledDate: time => {
          if (_this.form.giveEndTime) {
            const giveEndTime = _this.form.giveEndTime.replace(/-/g, '/')
            return time.getTime() > new Date(giveEndTime)
          }
        }
      }
    },
    pickerEndTime() {
      const _this = this
      return {
        disabledDate: time => {
          if (_this.form.giveStartTime) {
            const giveStartTime = _this.form.giveStartTime.replace(/-/g, '/')
            return time.getTime() < new Date(giveStartTime)
          }
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    opened() {
      this.form.applicant = this.user.username
      this.form.giveStartTime = getCurrentTime()
      this.getFondsDetail()
      // this.$refs.archivesListModule.getViewTable()
      console.log(this.detailArcData)
    },
    // changeChecked(item) {
    //   console.log('item', item)
    //   this.responsive = !this.responsive
    // },
    changeChecked() {
      this.responsive = !this.responsive
      this.checkedArr = []
      this.detailArcData.forEach((item) => {
        for (let i = 0; i < item.checkedId.length; i++) {
          for (let j = 0; j < item.childMenu.length; j++) {
            if (item.checkedId[i] === item.childMenu[j].value) {
              this.checkedArr.push(item.childMenu[j].value)
            }
          }
        }
        console.log(this.checkedArr) // 输出当前选中的所有checkbox的value值
      })
    },
    getFondsDetail() {
      FetchFondsDetail({ id: this.user.fonds.id }).then((res) => {
        this.form.fondsNo = res.fondsNo
        if (res.fondsNo) {
          this.getBusinessFlowTitle()
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getBusinessFlowTitle() {
      const params = {
        'username': this.user.username,
        'fondsNo': this.form.fondsNo,
        'businessType': 5
      }
      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)
      })
    },
    submitForm() {
      console.log(this.form.checkedId)
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const archivesIds = this.detailArcData.map(val => val.archivesId)
          const utilizeDTO = this.detailArcData.map(item => {
            const json = {
              'archivesId': item.archivesId,
              'categoryId': item.categoryPid,
              'categoryLevel': item.categoryLevel,
              'utilizeType': item.checkedId.join(',')
            }
            return json
          })
          const params = {
            'title': this.form.title, // 流程名称
            'applicant': this.user.username, // 申请人
            'businessType': 5,
            'borrowReason': this.form.borrowReason,
            'giveStartTime': this.form.giveStartTime, // 赋权开始时间
            'giveEndTime': this.form.giveEndTime, // 赋权结束时间
            'fondsNo': this.form.fondsNo, // 原始全宗
            'archivesIds': archivesIds,
            'utilizeDTO': utilizeDTO
          }
          FetchIntoFlowBusiness(params).then((res) => {
            if (res.code !== 5001 && res.code !== 500) {
              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.handleCloseDialog()
          }).catch(err => {
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    tableDoubleClick(row) {
      this.lendDetail = true
    },
    handleCloseDialog(done) {
      this.form.title = ''
      this.form.reason = ''
      this.form.giveStartTime = null
      this.form.giveEndTime = null
      this.$refs['form'].resetFields()
      this.lendFormVisible = false
      // 关闭弹框
      // done()
    }
  }
}
</script>

<style lang="scss" scoped>
.recordList-main{
  height: calc(100vh - 236px);
  .start-date,
  .end-date{
    display: flex;
    justify-content: flex-start;
    padding-left: 8px;
    font-size: 14px;
    line-height: 30px;
    color: #0C0E1E;
    span{
      display: block;
      margin-right: 8px;
    }
  }
  .iconfont{
    font-size: 14px;
  }
  .icon-fou{
    color: #A6ADB6;
  }
  .icon-shi{
    color: #12C37A;
  }
  .icon-dengdai{
    color: #FF8329;
  }
  .icon-cuowu1{
    color: #ED4A41;
  }
  .row-state{
    width: 56px;
    padding: 0;
    text-align: center;
  }
}
.title-style{
  span{
    display: inline-block;
    width: 42px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    color: #0348F3;
    background-color: #CAE1FF;
    border-radius: 3px;
  }
}
::v-deep .el-dialog{
  width: 860px !important;
  .el-form-item .el-form-item__content{
    width: 280px;
  }
  .dialog-footer{
    margin-top: 15px !important;
  }
}
::v-deep .el-checkbox-group{
  .el-checkbox{
    margin-right: 10px !important;
  }
}
::v-deep .el-pagination{
  margin: 24px 0 10px 0 !important
}

::v-deep .input-prepend .el-input__inner{
  padding-left: 100px;
}
</style>