lishui-web/src/views/modules/deductionshowdetails/DeductionShowDetailsForm.vue

<template>
<div>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
             label-width="120px">
      <el-row  :gutter="15">
        <el-col :span="12">
            <el-form-item label="年份" prop="yearOfEvaluation"
                :rules="[
                 ]">
              <el-input readonly v-model="inputForm.yearOfEvaluation" placeholder="请填写年份"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="名称" prop="unitName"
                :rules="[
                 ]">
              <el-input readonly v-model="inputForm.unitName" placeholder="请填写名称"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="扣分大类" prop="classId"
                        :rules="[
                  {required: true, message:'扣分大类不能为空', trigger:'blur'}
                 ]">
            <el-select v-model="inputForm.classId" placeholder="请选择" @change="selectGoodsByGroupId($event)"  style="width: 100%;">
              <el-option
                v-for="item in bigClass"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="扣分小类" prop="subClassId"
                        :rules="[
                  {required: true, message:'扣分小类不能为空', trigger:'blur'}
                 ]">
            <el-select v-model="inputForm.subClassId" placeholder="请选择" @change="selectVeto($event)"  style="width: 100%;">
              <el-option
                v-for="item in subClass"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="inputForm.veto != 1" label="扣分" prop="deductPoints"
                        :rules="[
                  {required: true,  message:'扣分分数不为空', trigger:'blur'},
                  {validator: isNumberZero, trigger:'blur'}
                 ]">
            <el-input type="number" v-model="inputForm.deductPoints" placeholder="请填写扣分"     ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="扣分详情" prop="deductionDetails"
                        :rules="[
                  {required: true,  message:'扣分详情不为空', trigger:'blur'},
                 ]">
            <el-input type="textarea" resize="none" :autosize="{ minRows: 4, maxRows: 4 }" v-model="inputForm.deductionDetails" placeholder="请填写扣分详情"     ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="日期" prop="deductionDate"
                        :rules="[
                  {required: true,  message:'扣分日期不为空', trigger:'blur'},
                 ]">
            <el-date-picker
              style="width: 100%;"
              readonly
              v-model="inputForm.deductionDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择扣分日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="veto == '1'" label="是否否决" prop="veto"
                        :rules="[
                  {required: true,  message:'是否否决不能为空', trigger:'blur'},
                 ]">
            <el-select v-model="inputForm.veto" placeholder="请选择"  style="width: 100%;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
      <el-button type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        isNumberZero: (rule, value, callback) => {
          const reg = /^[+]?[1-9]+$/
          if (!reg.test(value)) {
            return callback(new Error('情输入正确的扣分分数'))
          }
          this.$http.get(`/database/datalink/dataSource/checkEnName?oldEnName=${this.inputForm.oldEnName}&enName=${value}`).then(({data}) => {
            if (!data.success) {
              return callback(new Error('连接英文名已存在!'))
            } else {
              return callback()
            }
          })
        },
        inputForm: {
          id: '',
          unitId: '',
          classId: '',
          subClassId: '',
          yearOfEvaluation: '',
          unitName: '',
          bigName: '',
          serialNumber: '',
          smallName: '',
          deductPoints: '',
          deductionDetails: '',
          deductionDate: '',
          veto: ''
        },
        bigClass: [],
        subClass: [],
        veto: '0',
        options: [ {
          value: '0',
          label: '否'
        }, {
          value: '1',
          label: '是'
        }]
      }
    },
    components: {
    },
    methods: {
      init (method, id) {
        this.method = method
        this.inputForm.id = id
        if (method === 'add') {
          this.title = `新建扣分详细`
        } else if (method === 'edit') {
          this.title = '修改'
        } else if (method === 'view') {
          this.title = '查看扣分详细'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.$http({
              url: `/deductionShowDetails/deductionShowDetails/queryById?id=${this.inputForm.id}`,
              method: 'get'
            }).then(({data}) => {
              console.log(data)
              this.inputForm = this.recover(this.inputForm, data.deductionShowDetails)
              this.veto = data.deductionShowDetails.veto
              this.$http({
                url: `/deductiondetails/deductionDetails/getBigClass?id=0`,
                method: 'get'
              }).then(({data}) => {
                this.bigClass = data.bigClass
                this.loading = false
                this.$http({
                  url: `/deductiondetails/deductionDetails/getSubClass?id=${this.inputForm.classId}`,
                  method: 'get'
                }).then(({data}) => {
                  this.subClass = data.subClass
                  this.loading = false
                })
              })
              this.loading = false
            })
          }
        })
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$http({
              url: `/deductionShowDetails/deductionShowDetails/update`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              if (data && data.success) {
                this.visible = false
                this.$message.success(data.msg)
                this.$emit('refreshDataList')
              }
              this.loading = false
            })
          }
        })
      },
      selectGoodsByGroupId (val) {
        this.$http({
          url: `/deductiondetails/deductionDetails/getSubClass?id=${this.inputForm.classId}`,
          method: 'get'
        }).then(({data}) => {
          console.log(data)
          this.subClass = data.subClass
          this.inputForm.subClassId = ''
          this.loading = false
        })
      },
      selectVeto (val) {
        console.log(val)
        this.$http({
          url: `/deductiondetails/deductionDetails/getVeto?id=${this.inputForm.subClassId}`,
          method: 'get'
        }).then(({data}) => {
          console.log(data)
          this.veto = data.veto
          this.inputForm.veto = '0'
          this.loading = false
        })
      }
    }
  }
</script>