SchedulerCompleteModal.vue 8.05 KB
<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row>
          <a-col :span="24">
            <a-form-item label="图号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['drawingNo']" :disabled="true" placeholder="请输入图号"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="父图号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['parentDrawingNo']" :disabled="true" placeholder="请输入父图号"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['name']" placeholder="请输入名称" :disabled="true"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['qty', { rules: [{ required: true}]}]" placeholder="请输入数量" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="工艺" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select :disabled="true" v-model="technologyTypeModal" :defaultActiveFirstOption="true"
                        style="width: 250px"
                        @change="handleProvinceChange">
                <a-select-option v-for="technologyType in technologyTypeList" :key="technologyType.type">
                  {{ technologyType.name }}
                </a-select-option>
              </a-select>
              <a-select :disabled="true" v-model="technologyModal" style="width: 250px">
                <a-select-option v-for="technology in technologyList" :key="technology.code">
                  {{ technology.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['sequence']" :disabled="true" placeholder="请输入排序"
                              style="width: 500px"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="下图日期/预期完成日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择下图日期/预期完成日期" :disabled="true" v-decorator="['preDate']" :trigger-change="true"
                      style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="完成人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-select-user-by-dep v-model="completeBy" :multi="false"></j-select-user-by-dep>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="实际完成时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择实际完成时间" v-decorator="['completeDate', { rules: [{ required: true}]}]"
                      :trigger-change="true"
                      style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="工时" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                v-decorator="['completetime', { rules: [{ required: true,  message: '请输入正数!', pattern: '[1-9]\\d*|[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*' }] }]"
                placeholder="请输入工时"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="延误原因" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['delayReason']" placeholder="请输入延误原因"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
import pick from 'lodash.pick'

import { getTechnology, getTechnologyType } from '@api/api'

export default {
  name: 'SchedulerCompleteModal',
  components: {},
  props: {
    mainId: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    let technologyTypeList
    let technologyList
    let technologyTypeModal
    let technologyModal
    return {
      form: this.$form.createForm(this),
      title: '操作',
      width: 800,
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      completeBy: '',
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      detailId: 0,
      technologyTypeList,
      technologyList,
      technologyTypeModal,
      technologyModal
    }
  },
  created() {
    this.getTechnologyType()
    this.getTechnologyList()
    this.completeBy = ''
  },
  methods: {
    handleProvinceChange(value) {
      this.getTechnologyList(value)
    },
    add() {
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.technologyModal = record.technology
      this.technologyTypeModal = record.technologyType
      this.detailId = record.id
      this.getTechnologyList(record.technologyType)
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'drawingNo', 'parentDrawingNo', 'name', 'qty', 'preDate', 'sequence', 'completeDate', 'delayReason', 'completeBy'))
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      if (this.completeBy === '') {
        this.$message.warning("请选择完成用户");
      } else {
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            values.drawingNo = (values.drawingNo || '').trim()
            values.name = (values.name || '').trim()
            values.parentDrawingNo = (values.parentDrawingNo || '').trim()

            let formData = {
              'detailId': that.detailId,
              'completeBy': that.completeBy,
              'completeDate': values.completeDate,
              'qty': that.model.qty,
              'delayReason': values.delayReason,
              'completetime': values.completetime
            }
            //let obj = addTransaction(formData)
            obj.then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          }
        })
      }

    },
    handleCancel() {
      this.close()
    },
    popupCallback(row) {
      this.form.setFieldsValue(pick(row, 'headerId', 'drawingNo', 'name', 'qty', 'technology', 'preDate', 'weldTechnology', 'weldBy', 'weldDate', 'machiningTechnology', 'machiningBy', 'machiningDate', 'paintTechnology', 'paintBy', 'paintDate', 'completedDate', 'delayReason'))
    },
    getTechnologyType() {
      const that = this
      let obj = getTechnologyType()
      obj.then((res) => {
        if (res.success) {
          that.technologyTypeList = res.result
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    getTechnologyList(val) {
      const that = this
      let obj = getTechnology({ val })
      obj.then((res) => {
        if (res.success) {
          that.technologyList = res.result
        } else {
          that.$message.warning(res.message)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>