X-web/src/components/work-flow/node-edit-final-check.vue

<template>
  <div>
    <el-form :model="form" ref="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="工时单价">
            <el-input v-model="form.quotedPrice" placeholder="工时单价"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工序要求" prop="require">
            <el-input v-model="form.require" :disabled="disabled || selectOperator"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所需工时" prop="preTaskTime" v-if="node.type !== 'end'">
            <el-input v-model="form.preTaskTime" :disabled="disabled || selectOperator"
              oninput="value=value.replace(/[^0-9.]/g,'')">
              <i slot="suffix" style="font-style: normal; margin-right: 10px">h</i>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="操作人" v-if="form.operatorName && !selectOperator">
            <el-input :disabled="disabled && selectOperator" v-model="form.operatorName"></el-input>
          </el-form-item>
          <el-form-item label="操作人" prop="operatorId" v-if="selectOperator">
            <el-select v-model="form.operatorId" :disabled="disabled && selectOperator || !isEdit" multiple
              placeholder="请选择" style="width: 100%">
              <el-option v-for="item in operatorIdOptions" :key="item.userId" :label="item.name"
                :value="item.userId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="notes">
            <el-input type="textarea" v-model="form.notes" :disabled="disabled || selectOperator"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div>检验项目</div>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="24">
          <el-form-item label="检验方法">
            <div>
              1.游标卡尺，2.千分尺，3.高度尺，4.百分表，5.R规，6.环规、塞规，7.游标角度尺，8.三坐标，9.模具，10.样板，11.夹具，12.目测，13.组合测量，14.精密测量，15.敲击，16.测厚仪，17.其他
            </div>
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row>
        <el-table :data="form.prodProductionRequireList" style="width: 100%">
          <el-table-column prop="pageNo" label="页次/图区">
            <template slot-scope="scope">
              <el-form-item :prop="'prodProductionRequireList.' + scope.$index + '.pageNo'" :rules="rules.pageNo"
                label-width="0px">
                <el-input v-model="scope.row.pageNo" :disabled="disabled || selectOperator || isEdit"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="inspectionParam" label="检查参数">
            <template slot-scope="scope">
              <el-form-item :prop="'prodProductionRequireList.' +
                scope.$index +
                '.inspectionParam'
                " :rules="rules.inspectionParam" label-width="0px">
                <el-input v-model="scope.row.inspectionParam" :disabled="disabled || selectOperator || isEdit"
                  @blur="inspectionParamBlur($event, scope.$index)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="inspectionMethod" label="检验方法">
            <template slot-scope="scope">
              <el-form-item :prop="'prodProductionRequireList.' +
                scope.$index +
                '.inspectionMethod'
                " :rules="rules.inspectionMethod" label-width="0px">
                <el-select v-model="scope.row.inspectionMethod" placeholder="请选择" style="width: 100%"
                  :disabled="disabled || selectOperator || isEdit">
                  <el-option v-for="item in inspectionMethodOptions" :key="item.value" :label="item.name"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="allowValues" label="允许值">
            <template slot-scope="scope">
              <el-form-item :prop="'prodProductionRequireList.' + scope.$index + '.allowValues'
                " :rules="rules.allowValues" label-width="0px">
                <el-input v-model="scope.row.allowValues" :disabled="disabled || selectOperator || isEdit"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="measureRecord1" label="实测记录1">
            <template slot-scope="scope">
              <div style="margin-bottom:22px;">{{ scope.row.measureRecord1 }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="measureRecord2" label="实测纪录2">
            <template slot-scope="scope">
              <div style="margin-bottom:22px;">{{ scope.row.measureRecord2 }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140px" v-if="!disabled && !isEdit">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-circle-plus" circle @click="addRow"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle @click="removeRow(scope.$index)"
                v-if="scope.$index > 0"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-form-item label="附件" prop="attachList" v-if="!disabled && !selectOperator">
        <upload-component :accept="'*'" v-model="form.attachList" :file-obj-list="form.attachList" />
      </el-form-item>
      <el-form-item v-else prop="attachList">
        <upload-component :display="true" :accept="'*'" v-model="form.attachList" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getWorkType } from '@/api/crafts'
import { workTypeMasterList } from '@/api/worktype'
import UploadComponent from '@/views/modules/common/upload-component-v2'
import NodeEditNormal from '@/components/work-flow/node-edit-normal.vue'
export default {
  name: 'nodeEdit',
  components: { UploadComponent, NodeEditNormal },
  props: {
    data: {
      type: Object,
      default: () => { }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否选择操作人，当选择操作人时，其他字段不可编辑
    selectOperator: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 工种列表
      workTypeOptions: [],
      // 操作人列表
      operatorIdOptions: [],
      node: {},
      form: {
        nodeName: '',
        workTypeId: '',
        operatorId: [],
        prodProductionRequireList: [{}],
        planCompletionTime: ''
      },
      fileList: [],
      inspectionMethodOptions: [
        { value: '1', name: '游标卡尺' },
        { value: '2', name: '千分尺' },
        { value: '3', name: '高度尺' },
        { value: '4', name: '百分表' },
        { value: '5', name: 'R规' },
        { value: '6', name: '环规、塞规' },
        { value: '7', name: '游标角度尺' },
        { value: '8', name: '三坐标' },
        { value: '9', name: '模具' },
        { value: '10', name: '样板' },
        { value: '11', name: '夹具' },
        { value: '12', name: '目测' },
        { value: '13', name: '组合测量' },
        { value: '14', name: '精密测量' },
        { value: '15', name: '敲击' },
        { value: '16', name: '测厚仪' },
        { value: '17', name: '其他' }
      ],
      rules: {
        // attachList: [
        //   { required: true, message: '请上传附件', trigger: 'change' }
        // ],
        nodeName: [
          { required: true, message: '请输入节点名称', trigger: 'blur' }
        ],
        workTypeId: [
          { required: true, message: '请选择工种', trigger: 'blur' }
        ],
        operatorId: [
          { required: true, message: '请选择操作人', trigger: 'blur' }
        ],
        preTaskTime: [
          { required: true, message: '请输入所需工时', trigger: 'blur' }
        ],
        pageNo: [{ required: true, message: '请输入', trigger: 'blur' }],
        inspectionParam: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        inspectionMethod: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        allowValues: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  watch: {
    data(val) {
      this.node = val
      this.form = {
        ...this.form,
        ...this.node
      }
      if (this.node.operatorId) {
        this.form.operatorId = this.node.operatorId.split(',')
      }

      // 附件
      // if (this.node.attachList) {
      //   this.$nextTick(() => {
      //     this.fileList = []
      //     this.node.attachList.forEach((item) => {
      //       this.fileList.push({
      //         name: item.fileName,
      //         url: item.url,
      //         id: item.url
      //       })
      //     })
      //   })
      // }
    },
    disabled(val) {
      this.disabled = val
    },
    isEdit(val) {
      this.isEdit = val
    }
  },
  activated() { },
  created() {
    this.getWorkTypeOptions()
  },
  computed: {},
  mounted() {
    this.node = this.data
    this.form = {
      ...this.form,
      ...this.node
    }
    if (this.node.operatorId) {
      this.form.operatorId = this.node.operatorId.split(',')
    }

    // 附件
    // if (this.node.attachList) {
    //   this.fileList = []
    //   this.node.attachList.forEach((item) => {
    //     this.fileList.push({
    //       name: item.fileName,
    //       url: item.url,
    //       id: item.url
    //     })
    //   })
    // }
    this.getOperatorList()
  },
  methods: {
    getWorkTypeOptions() {
      this.workTypeOptions = []
      getWorkType().then(({ data }) => {
        if (data && data.code === '200') {
          this.workTypeOptions = data.data
        }
      })
    },
    onChage(val) {
      this.workTypeOptions.forEach((v) => {
        if (v.typeId === val) {
          this.form.quotedPrice = Number(v.quotedPrice || 0).toFixed(2)
        }
      })
    },
    // 按工种ID查询操作人列表
    getOperatorList() {
      if (this.node.workTypeId) {
        workTypeMasterList(this.node.workTypeId).then(({ data }) => {
          if (data && data.code === '200') {
            this.operatorIdOptions = []
            data.data.forEach((item) => {
              this.operatorIdOptions.push(item)
            })

            this.onChage(this.node.workTypeId)
          }
        })
      }
    },
    // 校验表单
    validateFormData() {
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate((valid) => {
          if (!valid) {
            // eslint-disable-next-line prefer-promise-reject-errors
            reject()
            return
          }
          resolve()
        })
      })
    },
    // 获取表单数据
    formData() {
      const form = { ...this.form, operatorName: '' }
      form.attachList = []
      if (this.form.operatorId != null) {
        form.operatorId = this.form.operatorId.toString()
        this.form.operatorId.forEach((id) => {
          let op = this.operatorIdOptions.find((t) => t.userId === id)
          if (op.name != null) {
            form.operatorName += op.name + ' '
          }
        })
      }

      // 填充附件
      // let fList = this.fileList
      // if (fList.length > 0) {
      //   form.attachList = []
      //   for (let i = 0; i < fList.length; i++) {
      //     form.attachList.push({
      //       fileName: fList[i].name,
      //       url: fList[i].url
      //     })
      //   }
      // }

      return form
    },

    addRow() {
      this.form.prodProductionRequireList.push({})
    },
    removeRow(index) {
      this.form.prodProductionRequireList.splice(index, 1)
    },
    inspectionParamBlur(event, index) {
      console.log(event)
      console.log(event.target.value)
      this.$http({
        url: this.$http.adornUrl(`/biz-service/technology/infoArgument/${event.target.value}`),
        method: 'get'
      }).then(({ data }) => {
        console.log(data)
        this.form.prodProductionRequireList[index].allowValues = data
        console.log(this.form.prodProductionRequireList)
      })
    }
  }
}
</script>
<style scoped></style>