CKQ/src/views/goaf/alert/activity/Rectify.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 - 300px)">
            <DangerInfo :view-data="viewData" class="form" />
            <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="130px">
              <el-form-item label="隐患描述" prop="s">
                <el-input v-model="formData.hdangerDesc" type="textarea" :rows="10" placeholder="隐患描述" />
              </el-form-item>
              <!-- <el-form-item label="整改类型" prop="rectifyCat">
                <el-select v-model="formData.rectifyCat" style="width: 100%" filterable placeholder="选择整改类型">
                  <el-option label="自行整改" :value="1" />
                  <el-option label="外协整改" :value="2" />
                </el-select>
              </el-form-item> -->

              <el-form-item label="整改措施" prop="rectifyMeasure">
                <el-input v-model="formData.rectifyMeasure" type="textarea" :rows="10" placeholder="请填写整改措施" />
              </el-form-item>
            </el-form>
            <work-flow ref="WFlow" handle-user="验收人" />
          </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 { getDangerById, updateDanger } from '@/api/goaf/dangerApi'
import Vuescroll from 'vuescroll'
import { WorkFlow, ActivityHandleRecord } from '@/components'
import DangerInfo from '../components/DangerInfo'

export default {
  name: 'RectifyTask',
  components: { Vuescroll, DangerInfo, WorkFlow, ActivityHandleRecord },
  props: {
    title: {
      type: [String],
      default: '隐患整改'
    }
  },

  data() {
    return {
      transferVisible: false,
      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: '',

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

        acceptGroupId: undefined,
        acceptGroupName: '',
        acceptPositionId: undefined,
        acceptPositionName: '',
        acceptAccountId: undefined,
        acceptAccountName: '',
        acceptTime: '',
        status: 0,
        attachList: []
      },
      formData: {
        formCode: 'rectify',
        dangerId: undefined,
        status: 0,
        attachList: []
      },
      rules: {
        hdangerDesc: [
          { required: true, message: '请输入隐患发生原因', trigger: 'blur' }
        ],
        rectifyMeasure: [
          { required: true, message: '请输入整改措施', trigger: 'blur' }
        ]
      },
      attachList: []
    }
  },
  methods: {
    previewList(photos) {
      if (!photos) return null
      if (Array.isArray(photos)) {
        return photos
      }
      return [photos.fileUrl]
    },

    // 显示窗口
    showModel(dangerId) {
      this.resetFormData()
      this.dialogVisible = true
      getDangerById(dangerId).then((resp) => {
        const { code, data, msg } = resp
        if (code === 0) {
          this.viewData = 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: 'rectify',
        dangerId: undefined,
        hdangerDesc: '',
        rectifyCat: 1,
        rectifyMeasure: '',
        rectifyRemark: '',
        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.hdangerId = this.viewData.hdangerId
      if (flow.curActivityCode === 'review') {
        this.formData.status = 1
      }
      if (flow.curActivityCode === 'rectify') {
        this.formData.status = 2
      }
      if (flow.curActivityCode === 'accept') {
        this.formData.status = 3
      }
      this.formData.rectifyRemark = flow.data.actionRemark
      this.formData.attachList = flow.data.attachList

      this.formData.rectifyAccountId = flow.user.accountIdTo
      this.formData.rectifyAccountName = flow.user.accountNameTo
      this.formData.rectifyGroupId = flow.user.groupIdTo
      this.formData.rectifyGroupName = flow.user.groupNameTo
      this.formData.rectifyPositionId = flow.user.positionIdTo
      this.formData.rectifyPositionName = flow.user.positionNameTo

      updateDanger(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>