qa-prevention-gwj-vue/src/views/safetyenvironmental/inspection/components/confirm.vue

<template>
  <div>
    <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" :title="readOnly?'检查人确认':'确认信息'" top="80px" width="50%">
      <el-form ref="form" :rules="rules" :model="form" label-width="110px" style="width: 500px;">
        <el-form-item label="检查人意见" prop="INSPECTION_USER_OPINION">
          <el-input v-model="form.INSPECTION_USER_OPINION" :autosize="{ minRows: 1}" type="textarea" maxlength="2000" placeholder="这里输入检查人意见（有异议时必填）..." title="检查人意见（有异议时必填）"/>
        </el-form-item>
        <el-form-item label="检查人">
          <el-button data-target="Modal" type="primary" @click="showModal">手写签字</el-button>
        </el-form-item>
        <div v-show="form.INSPECTION_USER_SIGN_IMG != ''" class="demo-image__preview">
          <el-image
            :src="form.INSPECTION_USER_SIGN_IMG"
            style="width: 300px; height: 200px;border:1px solid #eee;margin-left:110px"/>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm()">通 过</el-button>
      </div>
      <el-dialog
        :visible.sync="innerVisible"
        width="30%"
        title="手写签字"
        append-to-body>
        <WriteSign :width="600" :height="300" @subCanvas="subCanvas"/>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import WriteSign from '@/components/WriteSign'
import waves from '@/directive/waves' // waves directive
import formatDate from '@/utils/dateformat'
export default {
  components: { Pagination, WriteSign },
  directives: { waves },
  data() {
    return {
      dialogVisible: false,
      innerVisible: false,
      form: {
        INSPECTION_INSPECTOR_ID: '', // 安全环保检查人员主键ID
        INSPECTION_ID: '', // 安全环保检查ID
        INSPECTION_USER_ID: JSON.parse(sessionStorage.getItem('user')).USER_ID, // 检查人
        INSPECTION_USER_OPINION: '', // 检查人意见（有异议时必填）
        INSPECTION_USER_SIGN_IMG: '', // 检查人签字
        INSPECTION_USER_SIGN_TIME: ''// 检查人签字时间
      },
      rules: {
        INSPECTION_ID: [{ required: true, message: '安全环保检查ID不能为空', trigger: 'blur' }],
        INSPECTION_USER_ID: [{ required: true, message: '检查人不能为空', trigger: 'blur' }]
      },
      readOnly: false
    }
  },

  methods: {
    init(information) {
      if (information) {
        this.form.INSPECTION_USER_SIGN_IMG = information.INSPECTION_USER_SIGN_IMG
        this.form.INSPECTION_USER_OPINION = information.INSPECTION_USER_OPINION
        this.form.INSPECTION_USER_SIGN_TIME = information.INSPECTION_USER_SIGN_TIME
      }
      this.dialogVisible = true
    },
    subCanvas(img64) {
      this.form.INSPECTION_USER_SIGN_IMG = img64
      this.$set(this.form, 'INSPECTION_USER_SIGN_TIME', formatDate(new Date(), 'YYYY-MM-DD HH:mm'))
      this.innerVisible = false
    },
    spare_confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (!this.validStr(this.form.INSPECTION_USER_SIGN_IMG)) {
            this.$message.warning('请在检查人签字处签字！')
            return false
          }
          const loading = this.$loading({
            lock: true,
            text: '数据保存中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.listLoading = true
          requestFN(
            '/safetyenvironmentalinspector/verify',
            { ...this.form,
              INSPECTION_STATUS: '1'
            }
          ).then((data) => {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.listLoading = false
            loading.close()
            this.dialogVisible = false
            this.getQuery()
          }).catch((e) => {
            this.listLoading = false
            loading.close()
          })
        } else {
          return false
        }
      })
    },
    confirm() {
      if (!this.form.INSPECTION_USER_OPINION) {
        this.$message.error('您还未填写意见')
      }
      if (!this.form.INSPECTION_USER_SIGN_IMG) {
        this.$message.error('您还未签字')
        return
      }
      this.$emit('getProposal', this.form)
      this.dialogVisible = false
    },
    showModal() {
      this.innerVisible = true
    }
  }
}

</script>

<style>
.special .el-tree-node {
margin-top: 10px;
}
</style>
<style scoped>
.information >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>