CKQ/src/views/goaf/info/components/Goaf.vue

<template>
  <el-drawer
    :title="title"
    :modal-append-to-body="false"
    :modal="false"
    :wrapper-closable="false"
    size="60%"
    :visible.sync="dialogVisible"
    custom-class="goaf-form-drawer"
  >
    <div class="content-container goaf">
      <el-form ref="ruleForm" :model="formData" :rules="rules" label-position="top" class="goaf-form">
        <el-form-item label="采空区名称" prop="goafName">
          <el-input v-model="formData.goafName" />
        </el-form-item>
        <el-form-item label="矿带" required>
          <el-input-number v-model="formData.goafOrebelt" placeholder="矿带" :controls="false" />
        </el-form-item>
        <el-form-item label="矿体" required>
          <el-input-number v-model="formData.goafOrebody" placeholder="矿体" :controls="false" />
        </el-form-item>
        <el-form-item label="中段" required>
          <el-input-number v-model="formData.goafOreheight" placeholder="中段" :controls="false" />
        </el-form-item>
        <el-form-item label="水平断面均暴露面积" required>
          <el-input-number v-model="formData.goafAvexArea" placeholder="水平断面均暴露面积" :controls="false" />
        </el-form-item>
        <el-form-item label="平均倾向宽度" required>
          <el-input-number v-model="formData.goafAvinWidth" placeholder="平均倾向宽度" :controls="false" />
        </el-form-item>
        <el-form-item label="平均暴露高度" required>
          <el-input-number v-model="formData.goafAvexHeight" placeholder="平均暴露高度 0.0表示“已填充”" :controls="false" />
        </el-form-item>
        <el-form-item label="体积" required>
          <el-input-number v-model="formData.goafVoidVolume" placeholder="体积 0表示“已填充”" :controls="false" />
        </el-form-item>
        <el-form-item label="倾向" required>
          <el-input-number v-model="formData.goafKeyTrend" placeholder="倾向" :controls="false" />
        </el-form-item>
        <el-form-item label="倾角（度）" required>
          <el-input-number v-model="formData.goafKeyDipangle" placeholder="倾角（度）" :controls="false" />
        </el-form-item>
        <el-form-item label="顶板矿柱厚度" required>
          <el-input-number v-model="formData.goafRoofpillarThickness" placeholder="顶板矿柱厚度" :controls="false" />
        </el-form-item>
        <el-form-item label="保安间柱平均厚度" required>
          <el-input-number v-model="formData.goafIncoavThickness" placeholder="保安间柱平均厚度" :controls="false" />
        </el-form-item>
        <el-form-item label="勘探位置" prop="goafExpLocation">
          <el-input v-model="formData.goafExpLocation" />
        </el-form-item>
        <el-form-item label="围岩岩性" prop="goafRockLithology">
          <el-input v-model="formData.goafRockLithology" />
        </el-form-item>
        <el-form-item label="围岩稳定性" prop="goafRockStability">
          <el-input v-model="formData.goafRockStability" />
        </el-form-item>
        <el-form-item label="形成时间" prop="goafFormationTime">
          <el-date-picker
            v-model="formData.goafFormationTime"
            type="date"
            placeholder="请选择形成时间"
            class="date"
            value-format="yyyy-MM-dd"
            :default-value="new Date()"
          />
        </el-form-item>
        <el-form-item label="可充填体积（m³）" required>
          <el-input-number v-model="formData.goafCanfillVolume" placeholder="可充填体积（m³）" :controls="false" />
        </el-form-item>
        <el-form-item label="剩余可充填体积（m³）" required>
          <el-input-number v-model="formData.goafRemainVolume" placeholder="剩余可充填体积（m³）" :controls="false" />
        </el-form-item>
        <el-form-item label="充填方式" prop="goafFillMethod">
          <el-select v-model="formData.goafFillMethod">
            <el-option :value="0" label="废石" />
            <el-option :value="1" label="尾矿" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否填充" prop="goafIsFill">
          <el-select v-model="formData.goafIsFill">
            <el-option :value="0" label="是" />
            <el-option :value="1" label="否" />
          </el-select>
        </el-form-item>
        <el-form-item label="检查表" prop="goafChecklistId">
          <el-select v-model="formData.goafChecklistId" style="width: 100%" filterable placeholder="检查表">
            <el-option
              v-for="item in checklist"
              :key="item.checklistId"
              :label="item.checklistTitle"
              :value="item.checklistId"
              @change="changeCheckList(item.checklistTitle)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="goafInfoRemak" required>
          <el-input v-model="formData.goafInfoRemak" type="textarea" rows="5" />
        </el-form-item>
      </el-form>
      <div class="btn-group">
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        <el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { createGoaf, updateGoaf } from '@/api/goaf/info'
import { getChecklist } from '@/api/goaf/check'

export default {
  data() {
    return {
      title: '采空区信息',
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      checklist: [],
      dialogVisible: false,
      formData: {
        'goafId': '',
        'ocId': '',
        'goafOrebelt': 0,
        'goafOrebody': 0,
        'goafOreheight': 0,
        'goafName': '',
        'goafAvexArea': 0,
        'goafAvinWidth': 0,
        'goafAvexHeight': 0,
        'goafVoidVolume': 0,
        'goafKeyTrend': 0,
        'goafKeyDipangle': 0,
        'goafRoofpillarThickness': 0,
        'goafIncoavThickness': 0,
        'goafExpLocation': '',
        'goafRockLithology': '',
        'goafRockStability': '',
        'goafFormationTime': new Date(),
        'goafCanfillVolume': 0,
        'goafRemainVolume': 0,
        'goafFillMethod': 0,
        'goafIsFill': 0,
        'goafInfoRemak': '',
        'goafChecklistId': '',
        'goafChecklistTitle': ''
      },
      rules: {
        goafName: [{ required: true, message: '采空区名称不能为空', trigger: 'blur' }],
        goafExpLocation: [{ required: true, message: '勘探位置不能为空', trigger: 'blur' }],
        goafRockLithology: [{ required: true, message: '围岩岩性不能为空', trigger: 'blur' }],
        goafRockStability: [{ required: true, message: '围岩稳定性不能为空', trigger: 'blur' }],
        goafFormationTime: [{ required: true, message: '形成时间不能为空', trigger: 'change' }],
        goafIsFill: [{ required: true, message: '形成时间不能为空', trigger: 'change' }],
        goafInfoRemak: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
        goafChecklistId: [{ required: true, message: '请选择检查表', trigger: 'blur' }]
      },
      ctrlLevelList: [],
      positionList: [],
      viewData: {},
      actionType: ''
    }
  },
  created() {
    getChecklist().then((res) => {
      this.checklist = res.data
    })
  },
  methods: {
    // Show Add Dialog
    showAddModel(hazardId, hazardTitle) {
      this.resetFormData()
      this.actionType = 'ADD'
      this.dialogVisible = true
    },

    // Show Edit Dialog
    showEditModel(data) {
      this.resetFormData()
      this.actionType = 'UPDATE'
      this.dialogVisible = true
      this.formData = data
    },

    // Reset Form Data
    resetFormData() {
      this.formData = {
        'ocId': '',
        'goafOrebelt': 0,
        'goafOrebody': 0,
        'goafOreheight': 0,
        'goafName': '',
        'goafAvexArea': 0,
        'goafAvinWidth': 0,
        'goafAvexHeight': 0,
        'goafVoidVolume': 0,
        'goafKeyTrend': 0,
        'goafKeyDipangle': 0,
        'goafRoofpillarThickness': 0,
        'goafIncoavThickness': 0,
        'goafExpLocation': '',
        'goafRockLithology': '',
        'goafRockStability': '',
        'goafFormationTime': '',
        'goafCanfillVolume': 0,
        'goafRemainVolume': 0,
        'goafFillMethod': 0,
        'goafIsFill': 0,
        'goafInfoRemak': '',
        'goafChecklistId': '',
        'goafChecklistTitle': ''
      }
    },

    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          switch (this.actionType) {
            case 'ADD':
              createGoaf(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)
                }
              })
              break

            case 'UPDATE':
              updateGoaf(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)
                }
              })
              break
          }
        } else {
          this.$message.error('error submit!!')
          return false
        }
      })
    },
    formSuccess() {
      this.$emit('formSuccess')
    },
    resetFormField(formName) {
      this.$refs[formName].resetFields()
    },
    changeCheckList(checklistTitle) {
      this.formData.goafChecklistTitle = checklistTitle
    }
  }
}
</script>

  <style lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $bg: #283443;
  $light_gray: #fff;
  $cursor: #fff;

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .login-container .el-input input {
      color: $cursor;
    }
  }

  /* reset element-ui css */
  .content-container {
    .el-input, .el-textarea {
      display: inline-block;
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;

      input, textarea {
        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        min-height: 47px;
        caret-color: $cursor;

        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }

    .el-form-item__label {
      color: #ffffff;
      font-size: 14px;
    }
  }
  .content-container .el-date-editor.date .el-input__inner{
    padding-left: 30px;
    min-height:unset;
  }
  </style>
  <style lang="scss" scoped>

  .content-container {
    margin: 15px;
    position: relative;
    height: calc(100% - 15px);
    .btn-group {
      width: 100%;
      padding:10px 0;
      text-align: right;
      .el-button {
        margin: 0 15px;
      }
      .cancel-btn {
        background: #004F7B;
        border-color: #004F7B;
        color: #FFF;
        &:hover {
          background: #026197;
          border-color: #026197;
        }
      }
    }

  }

  </style>
  <style lang="scss">
  .goaf-form-drawer{
    width: 720px !important;
    max-width: 100%;
    overflow: hidden;
    .goaf-form{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      box-sizing: border-box;
      .el-form-item{
        width: 300px;
        box-sizing: border-box;
        margin-bottom: 20px;
        .el-form-item__label{
          font-size: 14px;
          line-height: 22px;
          padding-bottom: 5px;
          color: rgba(255, 255, 255, 0.7) !important;
        }
        .el-form-item__content{
          width: 300px;
          input{
              width: 300px;
              padding: 0;
              min-height:40px;
              padding-left: 30px;
              box-sizing: border-box;
          }
          .el-input-number--medium{
            width: 300px;
          }
        }

      }
    }
  }
</style>