jsh_erp/jshERP-web/src/views/stock/components/editForm.vue

<template>
  <a-form :form="form" ref="form">
    <a-row class="form-row" :gutter="24">
      <a-col :xl="6" :lg="8" :md="12" :sm="24" class="form-col">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="盘点单号">
          <a-input disabled placeholder="请输入" v-decorator="['number']" />
        </a-form-item>
      </a-col>
      <a-col :xl="6" :lg="8" :md="12" :sm="24" class="form-col">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="盘点类型">
          <a-select
            placeholder="请选择"
            @change="emitForm"
            v-decorator="['taskType', rules.taskType]"
            :options="taskTypeList"
            :disabled="isDisabled"
          >
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xl="6" :lg="8" :md="12" :sm="24" class="form-col">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" required prop="taskName" label="盘点任务名称">
          <a-input placeholder="请输入" :disabled="isDisabled" v-decorator="['taskName', rules.taskName]" />
        </a-form-item>
      </a-col>
      <a-col :xl="6" :lg="8" :md="12" :sm="24" class="form-col">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="depotId" label="盘点仓库">
          <a-select
            placeholder="请选择"
            v-decorator="['depotId', rules.depotId]"
            :options="depotList"
            :disabled="isDisabled"
            @change="emitForm"
          >
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xl="6" :lg="8" :md="12" :sm="24" class="form-col">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="盘点负责人">
          <a-select placeholder="请选择" v-decorator="['creator']" :options="spinnerList" :disabled="isDisabled">
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xl="6" :lg="8" :md="12" :sm="24" class="form-col">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="创建人">
          <a-input placeholder="请输入" v-decorator="['createByName']" disabled />
        </a-form-item>
      </a-col>
      <a-col :xl="6" :lg="8" :md="12" :sm="24" class="form-col">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="创建时间">
          <a-input placeholder="请输入" disabled v-decorator="['createTime']" />
        </a-form-item>
      </a-col>
      <a-col :xl="6" :lg="8" :md="12" :sm="24" class="form-col">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="盘点库位范围">
          <a-input placeholder="请输入" v-decorator="['positionRange']" disabled />
        </a-form-item>
      </a-col>
      <a-col :xl="6" :lg="8" :md="12" :sm="24" class="form-col">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商品数量">
          <a-input disabled placeholder="请输入" v-decorator="['materialCount']" />
        </a-form-item>
      </a-col>
      <a-col v-if="stockType === 'check'" :xl="6" :lg="8" :md="12" :sm="24" class="form-col">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="盘点人">
          <a-input placeholder="请输入" disabled v-decorator.trim="['operBy']" />
        </a-form-item>
      </a-col>
      <a-col v-if="stockType === 'check'" :xl="6" :lg="8" :md="12" :sm="24" class="form-col">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="完成时间">
          <a-input placeholder="请输入" disabled v-decorator.trim="['operTime']" />
        </a-form-item>
      </a-col>
      <a-col v-show="true" :xl="6" :lg="8" :md="12" :sm="24" class="form-col">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="盘点状态">
          <a-select placeholder="请选择" v-decorator="['taskStatus']" :options="taskStatusList" :disabled="isDisabled">
          </a-select>
        </a-form-item>
      </a-col>
      <a-col v-show="false" :xl="6" :lg="8" :md="12" :sm="24" class="form-col">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="盘点状态">
          <a-input v-decorator="['id']"></a-input>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import pick from 'lodash.pick'

export default {
  name: 'EditForm',
  props: {
    // form: {
    //   type: Object,
    //   default: null,
    // },
    rules: {
      type: Object,
      default: () => {
        return {}
      },
    },
    spinnerList: {
      type: Array,
      default: () => {
        return []
      },
    },
    depotList: {
      type: Array,
      default: () => {
        return []
      },
    },
    stockVisible: {
      type: Boolean,
      default: false,
    },
    total: {
      type: [Number, String],
      default: 0,
    },
    openType: {
      type: String,
      default: 'add',
    },
    stockType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      taskStatusList: [
        { value: 1, label: '未开始' },
        { value: 2, label: '进行中' },
        { value: 3, label: '已完成' },
        { value: 4, label: '已取消' },
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      taskTypeList: [
        { value: 1, label: '全盘' },
        { value: 2, label: '抽盘' },
      ],

      validatorRules: {},
      model: {},
      form: this.$form.createForm(this),
    }
  },
  watch: {
    total(val) {
      this.form.setFieldsValue({ materialCount: val })
    },
    // 监听弹窗显示隐藏，重置表单数据
    stockVisible: {
      handler(val) {
        if (!val) {
          this.form.resetFields()
          this.emitForm()
        }
        if (this.openType === 'add') {
          this.model.taskStatus = 1

          this.$nextTick(() => {
            this.form.setFieldsValue({ taskStatus: 1 })
          })
        }
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    isDisabled() {
      return this.openType === 'detail' || this.model.taskStatus !== 1
    },
  },
  methods: {
    emitForm(val){
      this.$nextTick(() => {
        this.$emit('changeForm', this.form.getFieldsValue())
      })
    }
  },
}
</script>

<style lang="less">
.ant-input-disabled {
  background-color: rgb(255, 255, 255, 0.2) !important;
}
.ant-select-disabled {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
</style>