CKQ/src/views/goaf/alert/activity/Submit.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>
      </div>
    </template>
    <div class="content-container">
      <el-row class="content-body">
        <div v-show="tabType==='form'">
          <vuescroll :ops="ops" style="height: calc(100vh - 300px)">
            <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="130px">
              <el-form-item label="预警标题" prop="hdangerTitle">
                <el-input v-model="formData.hdangerTitle" />
              </el-form-item>
              <el-form-item label="预警类型" required>
                <el-select v-model="formData.hdangerType" style="width: 100%">
                  <el-option :value="0" label="人员巡检" />
                  <el-option :value="1" label="传感器巡检" />
                </el-select>
              </el-form-item>
              <el-form-item label="采空区" prop="goafId">
                <el-select v-model="formData.goafId" filterable placeholder="采空区名称" style="width: 100%">
                  <el-option value="" label="请选择采空区" disabled />
                  <el-option v-for="item in goafs" :key="item.goafId" :value="item.goafId" :label="item.goafName" />
                </el-select>
              </el-form-item>
              <el-form-item label="检查表" prop="checklistId">
                <el-select v-model="formData.checklistId" style="width: 100%" filterable placeholder="检查表">
                  <el-option
                    v-for="item in checklist"
                    :key="item.checklistId"
                    :label="item.checklistTitle"
                    :value="item.checklistId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="预警等级" prop="hdangerLevel">
                <el-radio-group v-model="formData.hdangerLevel">
                  <el-radio :label="0">较低</el-radio>
                  <el-radio :label="1">一般</el-radio>
                  <el-radio :label="2">较大</el-radio>
                  <el-radio :label="3">重大</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="发生时间" prop="submitTime">
                <el-date-picker
                  v-model="formData.submitTime"
                  type="date"
                  placeholder="设置发生时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  clearable
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item label="整改截止时间" prop="dangerDeadline">
                <el-date-picker
                  v-model="formData.dangerDeadline"
                  type="date"
                  placeholder="设置截止时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  clearable
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item label="描述" prop="hdangerDesc">
                <el-input v-model="formData.hdangerDesc" type="textarea" :rows="5" placeholder="预警描述" />
              </el-form-item>
            </el-form>
            <work-flow ref="WFlow" handle-user="评审人" />
            <div class="btn-group">
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="dialogVisible = false">取消</el-button>
            </div>
          </vuescroll>
        </div>
      </el-row>
    </div>
  </el-drawer>
</template>

<script>
import { getChecklist } from '@/api/goaf/check'
import { handleDanger, getDangerById } from '@/api/goaf/dangerApi'
import { getGoafBaseInfo } from '@/api/goaf/info'
import Vuescroll from 'vuescroll'
import { mapGetters } from 'vuex'
import { WorkFlow } from '@/components'
export default {
  name: 'SubmitTask',
  components: {
    Vuescroll,
    WorkFlow
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      dialogVisible: false,
      tabType: 'form',
      formData: {
        'formCode': 'submit',
        'hdangerId': 1,
        'dangerId': undefined,
        'hdangerTitle': '', // 预警标题
        'dangerCatId': undefined, // 预警类别ID
        'hdangerLevel': 1, // 预警等级
        'hdangerDesc': '', // 描述
        'hdangerType': 0,
        'submitTime': new Date(),
        'dangerDeadline': '', // 截止时间
        'goafId': undefined,
        'submitGroupId': '',
        'submitGroupName': '',
        'submitPositionId': '',
        'submitPositionName': '',
        'submitAccountId': '',
        'submitAccountName': '',
        'checklistId': ''
      },
      goafs: [],
      checklist: [],
      rules: {
        hdangerTitle: [
          { required: true, message: '请输入预警标题', trigger: 'blur' }
        ],
        goafId: [
          { required: true, message: '请选择采空区', trigger: 'change' }
        ],
        checklistId: [
          { required: true, message: '请选择检查表', trigger: 'change' }
        ],
        hdangerLevel: [
          { required: true, message: '请输选择预警等级', trigger: 'blur' }
        ],
        submitTime: [
          { required: true, message: '发生时间', trigger: 'blur' }
        ],
        dangerDeadline: [
          { required: true, message: '截止时间', trigger: 'blur' }
        ],
        accountIdTo: [
          { required: true, message: '请选择执行人', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'userData'
    ])
  },
  methods: {

    // 启动
    start(params) {
      const wfDefId = 1
      this.dialogVisible = true
      const userData = JSON.parse(JSON.stringify(this.userData))
      this.formData.ocId = userData.ocId

      getChecklist().then((res) => {
        this.checklist = res.data
      })
      getGoafBaseInfo().then((res) => {
        this.goafs = res.data
      })
      this.$nextTick(() => {
        this.$refs.WFlow.start(wfDefId).then((res) => {
          if (res > 0) {
            this.formData.hdangerId = res
          } else {
            this.$message.error('流程初始化失败')
          }
        })
      })
      if (params) {
        this.formData.checklistId = params.checklistId
        this.formData.goafId = params.goafId
        this.formData.hdangerDesc = params.checkItemNopass
        this.formData.hdangerTitle = params.checkItemNopass
      }
    },

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

    resetFormData() {
      this.formData = {
        'formCode': 'submit',
        'hdangerId': 1,
        'dangerId': undefined,
        'hdangerTitle': '', // 预警标题
        'dangerCatId': undefined, // 预警类别ID
        'hdangerLevel': 1, // 预警等级
        'hdangerDesc': '', // 描述
        'submitTime': new Date(),
        'dangerDeadline': '', // 截止时间
        'goafId': undefined,
        'hdangerType': 0,
        'submitGroupId': '',
        'submitGroupName': '',
        'submitPositionId': '',
        'submitPositionName': '',
        'submitAccountId': '',
        'submitAccountName': '',
        'checklistId': ''
      }
    },
    // 保存
    submitForm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$nextTick(() => {
            this.$refs.WFlow.handle({}).then((res) => {
              this.handleCommand(res)
            }).catch((error) => {
              console.log(error)
            })
          })
        } else {
          this.$message.error('提交失败请检查')
        }
      })
    },

    // 提交
    handleCommand(flow) {
      const attachList = flow.data.attachList
      this.formData.submitRemark = flow.data.actionRemark
      this.formData.attachList = attachList
      if (Array.isArray(attachList) && attachList.length > 0) {
        const attach = attachList[0]
        this.formData.scenePhoto = attach.fileUrl
        this.formData.sceneIcon = attach.fileIcon
      }
      // this.formData.submitGroupId = this.userData.groupId
      // this.formData.submitGroupName = this.userData.groupName
      // this.formData.submitPositionId = this.userData.positionId
      // this.formData.submitPositionName = this.userData.positionName
      // this.formData.submitAccountId = this.userData.userId
      // this.formData.submitAccountName = this.userData.userName
      this.formData.reviewAccountId = flow.user.accountIdTo
      this.formData.reviewAccountName = flow.user.accountNameTo
      this.formData.reviewGroupId = flow.user.groupIdTo
      this.formData.reviewGroupName = flow.user.groupNameTo
      this.formData.reviewPositionId = flow.user.positionIdTo
      this.formData.reviewPositionName = flow.user.positionNameTo

      if (flow.curActivityCode === 'review') {
        this.formData.status = 1
      }
      if (flow.curActivityCode === 'rectify') {
        this.formData.status = 2
      }
      if (flow.curActivityCode === 'accept') {
        this.formData.status = 3
      }

      handleDanger(this.formData).then((resp) => {
        const { code, msg } = resp
        if (code === 0) {
          this.$emit('formSuccess')
          this.dialogVisible = false
          this.$message.success(msg)
        } else {
          this.$message.error(msg)
        }
      })
    },
    formSuccess() {
      this.$emit('formSuccess')
    },

    resetForm(formName) {
      this.$refs[formName].resetFields()
    }

  }
}
</script>

<style lang="scss">
</style>
<style lang="scss" scoped>
.content-container {
  position: relative;
  height: calc(100% - 15px);
  .ruleForm {
    margin: 0 100px;
  }

  .btn-group {
    width: 100%;
    text-align: center;

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

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

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

}

</style>