CKQ/src/views/goaf/danger/activity/Accept.vue

<template>
  <el-drawer
    :title="title"
    :modal-append-to-body="false"
    :modal="false"
    :wrapper-closable="false"
    size="99%"
    :visible.sync="dialogVisible"
  >
    <template slot="title">
      <div class="el-drawer-title">
        <span class="name">{{ title }}</span>
        <el-tabs v-model="tabType">
          <el-tab-pane label="基本信息" name="form" />
          <el-tab-pane label="历史记录" name="history" />
        </el-tabs>
      </div>
    </template>
    <div class="content-container">
      <el-row class="content-body">
        <div v-show="tabType==='form'">
          <VueScroll :ops="ops" style="height: calc(100vh - 400px)">
            <DangerInfo :view-data="viewData" class="form" />
            <work-flow ref="WFlow" />
          </VueScroll>
          <div class="btn-group">
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </div>
        </div>
        <div v-show="tabType==='history'">
          <ActivityHandleRecord ref="ActivityHandleRecord" />
        </div>
      </el-row>
    </div>
  </el-drawer>
</template>

<script>
import VueScroll from 'vuescroll'
import { getDangerById, handleDanger } from '@/api/goaf/dangerApi'
import { WorkFlow, ActivityHandleRecord } from '@/components'
import DangerInfo from '../components/DangerInfo'

export default {
  name: 'AcceptTask',
  components: { VueScroll, DangerInfo, WorkFlow, ActivityHandleRecord },
  props: {
    title: {
      type: [String],
      default: '隐患验收'
    }
  },

  data() {
    return {
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      dialogVisible: false,
      tabType: 'form',
      viewData: {
        groupId: undefined,
        groupName: '',
        dangerId: undefined,
        dangerSource: undefined,
        dangerCode: '',
        dangerTitle: '',
        dangerDesc: '',
        dangerLevel: undefined,
        dangerCatId: undefined,
        dangerCatTitle: '',
        riskPointId: undefined,
        riskPointTitle: '',

        submitGroupId: undefined,
        submitGroupName: '',
        submitPositionId: undefined,
        submitPositionName: '',
        submitAccountId: undefined,
        submitAccountName: '',
        submitTime: '',
        dangerDeadLine: '',

        reviewGroupId: undefined,
        reviewGroupName: '',
        reviewPositionId: undefined,
        reviewPositionName: '',
        reviewAccountId: undefined,
        reviewAccountName: '',
        reviewTime: '',

        rectifyGroupId: undefined,
        rectifyGroupName: '',
        rectifyPositionId: undefined,
        rectifyPositionName: '',
        rectifyAccountId: undefined,
        rectifyAccountName: '',

        dangerReason: '',
        rectifyCat: 1,
        rectifyMeasure: '',
        rectifyRemark: '',
        rectifyTime: '',

        acceptGroupId: undefined,
        acceptGroupName: '',
        acceptPositionId: undefined,
        acceptPositionName: '',
        acceptAccountId: undefined,
        acceptAccountName: '',
        acceptTime: '',
        status: 0,
        attachList: []
      },
      formData: {
        formCode: 'accept',
        dangerId: undefined,
        acceptRemark: '',
        status: 0,
        attachList: []
      },
      rules: { }
    }
  },
  methods: {
    previewList(photos) {
      if (!photos) return null
      if (Array.isArray(photos)) {
        return photos
      }
      return [photos.fileUrl]
    },

    // 显示窗口
    showModel(dangerId, info) {
      this.resetFormData()
      this.dialogVisible = true
      getDangerById(dangerId).then((resp) => {
        const { code, data, msg } = resp
        if (code === 0) {
          this.viewData = info || data
          this.$refs.WFlow.get(dangerId)
          this.$refs.ActivityHandleRecord.getData(dangerId)
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    resetFormData() {
      this.formData = {
        formCode: 'accept',
        dangerId: undefined,
        status: 0,
        attachList: []
      }
    },

    // 保存
    submitForm(formName) {
      this.$nextTick(() => {
        this.$refs.WFlow.handle({}).then((res) => {
          if (res === false) {
            this.$message.error('请检查填写信息')
            return false
          }
          this.handleCommand(res)
        }).catch((error) => {
          console.log(error)
        })
      })
    },

    // 处理
    handleCommand(flow) {
      this.formData.dangerId = this.viewData.dangerId
      this.formData.status = flow.status
      this.formData.acceptRemark = flow.data.actionRemark
      this.formData.attachList = flow.data.attachList
      handleDanger(this.formData).then((resp) => {
        const { code, msg } = resp
        if (code === 0) {
          this.dialogVisible = false
          this.$message.success(msg)
          this.formSuccess()
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    formSuccess() {
      this.$emit('formSuccess')
    },

    resetFormField(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss">

</style>
<style lang="scss" scoped>
.hd-info-component {
  margin: 15px;
  position: relative;
  height: calc(100% - 15px);

  .btn-group {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    .el-button {
      width: 100%;
      margin: 0 0 15px;
    }

    .cancel-btn {
      background: #004F7B;
      border-color: #004F7B;
      color: #FFF;

      &:hover {
        background: #026197;
        border-color: #026197;
      }
    }
  }

  .el-row {
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;

    &:last-child {
      margin-bottom: 0;
    }

    .el-button {
      width: 10%;
    }
  }
}

</style>