CKQ/src/views/goaf/alert/activity/Review.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 - 200px)">
            <DangerInfo :view-data="viewData" class="form" />
            <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="130px">
              <el-form-item label="预警描述" prop="hdangerDesc">
                <el-input v-model="formData.hdangerDesc" type="textarea" placeholder="预警描述" autosize readonly />
              </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="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: 200px"
                />
              </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>

        <div v-show="tabType==='history'">
          <ActivityHandleRecord ref="ActivityHandleRecord" />
        </div>
      </el-row>
    </div>
  </el-drawer>
</template>

<script>
import { updateDanger, getDangerById } from '@/api/goaf/dangerApi'
import Vuescroll from 'vuescroll'
import { WorkFlow, ActivityHandleRecord } from '@/components'
import DangerInfo from '../components/DangerInfo'
import { parseTime } from '@/utils'
export default {
  name: 'ReviewTask',
  components: { Vuescroll, DangerInfo, WorkFlow, ActivityHandleRecord },
  filters: {},
  props: {
    title: {
      type: [String],
      default: ''
    }
  },

  data() {
    return {
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      dialogVisible: false,
      tabType: 'form',
      rules: { },
      viewData: {
        hdangerId: undefined,
        dangerCode: '',
        dangerTitle: '',
        dangerSource: undefined,
        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: 'review',
        hdangerId: undefined,
        status: 0,
        hdangerLevel: '',
        dangerDeadline: '',
        attachList: []
      }
    }
  },
  mounted() {
  },
  methods: {
    previewList(photos) {
      if (!photos) return null
      if (Array.isArray(photos)) {
        const list = photos.map((item) => {
          return item.fileUrl
        })
        return list
      }
      return [photos.fileUrl]
    },

    // 显示窗口
    showModel(hdangerId, info) {
      this.resetFormData()
      this.dialogVisible = true
      getDangerById(hdangerId).then((resp) => {
        const { code, data, msg } = resp
        if (code === 0) {
          this.viewData = info || data
          this.formData = {
            ...this.formData,
            hdangerLevel: data.hdangerLevel,
            dangerDeadline: data.dangerDeadline,
            hdangerDesc: data.hdangerDesc.replace(/；/g, ';\n').replace(/ /g, '')
          }
          this.$refs.WFlow.get(hdangerId)
          this.$refs.ActivityHandleRecord.getData(hdangerId)
        } else {
          this.$message.error(msg)
        }
      })
    },

    // 重置
    resetFormData() {
      this.formData = {
        formCode: 'review',
        hdangerId: undefined,
        status: 0,
        hdangerLevel: '',
        dangerDeadline: '',
        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.reviewRemark = flow.data.actionRemark
      this.formData.reviewTime = parseTime(new Date())
      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.$emit('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>