tft-fe/src/views/qualityManagement/components/samplingAdd.vue

<template>
  <el-drawer
    title="抽检录入"
    :visible.sync="visible"
    size="70%"
    class="samplingAdd"
  >
    <el-form
      ref="form"
      :rules="rules"
      label-width="80px"
      :model="form"
      class="form-box"
    >
      <el-row :gutter="20" class="first-line">
        <el-col :span="8">
          <el-form-item label="抽检人" prop="detector">
            <el-input v-model="form.detector"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="玻璃ID" prop="glassId">
            <el-input v-model="form.glassId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="抽检时间" prop="detectTime">
            <el-date-picker
              v-model="form.detectTime"
              type="datetime"
              placeholder="选择抽检时间"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div style="display: inline-block; margin-right: 10px">
            <el-form-item label="型号" prop="model">
              <el-radio-group v-model="form.model" @change="selectStandard">
                <el-radio-button
                  v-for="item in productModelVoList"
                  :key="item.dataCode"
                  :label="item.dataName"
                  >{{ item.dataName }}</el-radio-button
                >
              </el-radio-group>
            </el-form-item>
          </div>
          <div style="display: inline-block">
            <el-form-item label="检验项目" prop="detectItem">
              <el-select
                v-model="form.detectItem"
                placeholder="检验项目"
                style="width: 100%"
                @change="selectItem"
              >
                <el-option
                  v-for="item in testItemList"
                  :key="item.dataCode"
                  :label="item.dataName"
                  :value="item.dataName"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="margin-bottom: 20px">
          <base-table
            :table-props="tableProps"
            :table-data="tableData"
            :max-height="tableH"
            highlight-current-row
            @emitFun="inputChange"
          />
        </el-col>
      </el-row>
      <el-row class="bottom">
        <el-col :span="24" style="text-align: right">
          <el-form-item>
            <el-button @click="closeForm">取消</el-button>
            <el-button type="primary" @click="submitForm">保存</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-drawer>
</template>
<script>
import inputArea from './InputArea'
import { tableHeight } from '@/utils/index'
import { getProcessDetectList, detectInput } from '@/api/qualityManagement'
import moment from 'moment'
const tableProps = [
  {
    prop: 'detectItem',
    label: '检验项目'
  },
  {
    prop: 'detectPoint',
    label: '检测点'
  },
  {
    prop: 'detectStandard',
    label: '检验标准'
  },
  {
    prop: 'value',
    label: '实测值',
    subcomponent: inputArea
  },
  {
    prop: 'result',
    label: '抽检结果',
    subcomponent: inputArea
  },
  {
    prop: 'remark',
    label: '备注',
    subcomponent: inputArea
  }
]
export default {
  name: 'SamplingAdd',
  data() {
    return {
      visible: false,
      form: {
        model: '',
        detectItem: '',
        detector: '',
        glassId: '',
        detectTime: ''
      },
      testItemList: JSON.parse(localStorage.getItem('publicList'))
        .checkItemVoList,
      productModelVoList: JSON.parse(localStorage.getItem('publicList'))
        .productModelVoList,
      rules: {
        model: [{ required: true, message: '请输入选择型号', trigger: 'blur' }],
        detectItem: [
          { required: true, message: '请选择检验项目', trigger: 'change' }
        ],
        detector: [
          { required: true, message: '请输入抽检人', trigger: 'blur' }
        ],
        glassId: [
          { required: true, message: '请选择玻璃ID', trigger: 'change' }
        ],
        detectTime: [
          { required: true, message: '请选择抽检时间', trigger: 'change' }
        ]
      },
      tableProps,
      tableData: [],
      tableH: tableHeight(250)
    }
  },
  methods: {
    init() {
      this.visible = true
      window.addEventListener('resize', () => {
        this.tableH = tableHeight(250)
      })
      this.form.model = 'G8.5'
      this.form.detectTime = new Date()
    },
    selectItem() {
      this.getStandard()
    },
    selectStandard() {
      if (this.form.detectItem) {
        this.getStandard()
      }
    },
    getStandard() {
      getProcessDetectList({
        productSpec: this.form.model,
        detectItem: this.form.detectItem
      }).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.tableData = res.data
        } else {
          this.tableData = []
        }
      })
    },
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.tableData.length === 0) {
            this.$message({
              message: '请先到标准设置中添加该检测项目的检测点',
              type: 'error',
              duration: 2000
            })
            return false
          }
          // for (let item of this.tableData) {
          //   if (!item.value || !item.result) {
          //     this.$message({
          //       message: '表格中有数据空缺，请检查',
          //       type: 'error',
          //       duration: 1500
          //     })
          //     return false
          //   }
          // }
          let arr = []
          for (let i of this.tableData) {
            let obj = {}
            obj.detectStandardId = i.id
            obj.detectTime = moment(this.form.detectTime).format(
              'yyyy-MM-DDTHH:mm:ss'
            )
            obj.detector = this.form.detector
            obj.glassId = this.form.glassId
            obj.remark = i.remark ? i.remark : ''
            obj.result = i.result ? i.result : ''
            obj.value = i.value ? i.value : ''
            arr.push(obj)
          }
          detectInput(arr).then((res) => {
            if (res.code === 0) {
              this.$message({
                message: '保存成功',
                type: 'success',
                duration: 1500,
                onClose: () => {}
              })
              this.$emit('successSubmit')
              this.formClear()
              this.visible = false
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    closeForm() {
      this.formClear()
      this.visible = false
    },
    formClear() {
      this.$refs.form.resetFields()
      this.tableData = []
    },
    inputChange(val) {
      this.tableData[val._pageIndex - 1][val.prop] = val[val.prop]
    }
  }
}
</script>
<style lang="scss" scoped>
.samplingAdd {
  .form-box {
    height: 100%;
    padding: 0 32px;
    position: relative;
    .first-line {
      border-bottom: 1px solid rgba(233, 233, 233, 1);
      margin-bottom: 23px;
    }
  }
  .bottom {
    position: absolute;
    bottom: 0;
    right: 32px;
  }
}
</style>