CostumingPlatform/ant-design-vue-jeecg/src/views/process/modules/ZyProcessForm.vue

<template>
  <a-spin :spinning="confirmLoading" style="padding: 10px 20px">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row type="flex" justify="space-between">
          <a-col :span="11">
            <a-form-model-item label="企业" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enterpriseId">
              <j-select-depart  v-model="model.enterpriseId" placeholder="请输入企业名称" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="服装类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="typeName ">
              <j-popup
                  v-model="model.typeName"
                  field="type_name"
                  org-fields="type_name,nums"
                  dest-fields="typeName,styleId"
                  code="cloths_type"
                  :multi="false"
                  @input="popupCallback"
              />
            </a-form-model-item>
            <a-input  v-model="model.styleId" hidden/>
          </a-col>
          <a-col :span="11">
            <a-form-model-item label="工序代码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="processCode">
              <a-input v-model="model.processCode" placeholder="请输入工序代码"  disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="工序名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="processName">
              <a-input v-model="model.processName" placeholder="请输入工序名称"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row type="flex" justify="space-between">
          <a-col :span="11">
            <a-form-model-item label="品质要求" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="qualityRequire">
              <a-input v-model="model.qualityRequire" placeholder="请输入品质要求"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="工序时间（秒）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="processTime">
              <a-input v-model="model.processTime" placeholder="请输入工序时间"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="11">
            <a-form-model-item label="工序单价（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="price">
              <a-input-number v-model="model.price" placeholder="请输入工序单价" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="工序等级（键值对）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="grade">
              <j-dict-select-tag placeholder="请输入工序等级" dictCode="fabric_grade"
                                 v-model="model.grade"></j-dict-select-tag>
            </a-form-model-item>
          </a-col>
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="面料代码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fabricNum">-->
<!--              <a-input v-model="model.fabricNum" placeholder="请输入面料代码"  ></a-input>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="面料等级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fabricGrade">-->
<!--              <a-input v-model="model.fabricGrade" placeholder="请输入面料等级"  ></a-input>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
          <a-col :span="11">
            <a-form-model-item label="针距（针/厘米）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="needlePitch">
              <a-input-number v-model="model.needlePitch" placeholder="请输入针距（针/厘米）" style="width: 100%" />
            </a-form-model-item>
          </a-col>
<!--          <a-col :span="11">-->
<!--            <a-form-model-item label="机器名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="machineId">-->
<!--              <j-dict-select-tag type="list" v-model="model.machineId" dictCode="zy_devicetype,name,id" placeholder="请选择机器名" />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
          <a-col :span="12">
            <a-form-model-item label="手工宽放（毫米）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="manualWide">
              <a-input v-model="model.manualWide" placeholder="请输入手工宽放"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="11">
            <a-form-model-item label="手工时间（秒）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="manualTime">
              <a-input v-model="model.manualTime" placeholder="请输入手工时间" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="机器转速（转/分钟）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="machineSpeed">
              <a-input-number v-model="model.machineSpeed" placeholder="请输入机器转速" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="11">
            <a-form-model-item label="机器宽放（毫米）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="machineWide">
              <a-input v-model="model.machineWide" placeholder="请输入机器宽放"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="机器时间（秒）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="machineTime">
              <a-input-number v-model="model.machineTime" placeholder="请输入机器时间" style="width: 100%" />
            </a-form-model-item>
          </a-col>
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="机器浮于" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="machineFloat">-->
<!--              <a-input v-model="model.machineFloat" placeholder="请输入机器浮于"  ></a-input>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
          <a-col :span="11">
            <a-form-model-item label="绑包宽放（毫米）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bundleWide">
              <a-input v-model="model.bundleWide" placeholder="请输入绑包宽放"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="绑包时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bundleTime">
              <a-input v-model="model.bundleTime" placeholder="请输入绑包时间"  ></a-input>
            </a-form-model-item>
          </a-col>
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="部件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="componentId">-->
<!--              <j-dict-select-tag type="list" v-model="model.componentId" dictCode="zy_cloths_component,parts_name,id" placeholder="请选择部件表" />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="是否为瓶颈工序" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isBottleneck">-->
<!--              <a-input-number v-model="model.isBottleneck" placeholder="请输入是否为瓶颈工序" style="width: 100%" />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enterpriseId">-->
<!--              <a-input v-model="model.enterpriseId" placeholder="请输入企业名称"  ></a-input>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->

<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="工具名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="toolId">-->
<!--              <j-dict-select-tag type="list" v-model="model.toolId" dictCode="zy_tool,name,id" placeholder="请选择工具名称" />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="款式名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="styleId">-->
<!--              <a-input v-model="model.styleId" placeholder="请输入款式名称"  ></a-input>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="款式名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="styleId">-->
<!--              <j-dict-select-tag  v-model="model.styleId"  placeholder="请输入款式名称" dictCode="zy_cloths_style,style_names,id" />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
          <a-col :span="11">
            <a-form-model-item label="工段代码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="worksectionCode">
              <a-input v-model="model.worksectionCode" placeholder="请输入工段代码"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="工序类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="processType">
              <j-dict-select-tag type="radio" v-model="model.processType" dictCode="processType" placeholder="" />
            </a-form-model-item>
          </a-col>
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="合同号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contractNum">-->
<!--              <a-input v-model="model.contractNum" placeholder="请输入合同号"  ></a-input>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
          <a-col :span="11">
            <a-form-model-item label="合计（手工TMU）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="totalManualTmu">
              <a-input-number v-model="model.totalManualTmu" placeholder="请输入合计（手工TMU）" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="合计（机器TMU）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="totalMachineTmu">
              <a-input-number v-model="model.totalMachineTmu" placeholder="请输入合计（机器TMU）" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="11">
            <a-form-model-item label="合计（手工秒）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="totalMaunal">
              <a-input-number v-model="model.totalMaunal" placeholder="请输入合计（手工秒）" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="合计（机器秒）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="totalMachine">
              <a-input-number v-model="model.totalMachine" placeholder="请输入合计（机器秒）" style="width: 100%" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="48">
            <a-form-model-item label="工艺描述" :labelCol="labelCol1" :wrapperCol="wrapperCol1" prop="processDescribe">
              <a-textarea v-model="model.processDescribe" rows="2" placeholder="请输入工艺描述"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="48">
            <a-form-model-item label="做工说明" :labelCol="labelCol1" :wrapperCol="wrapperCol1" prop="mkExplain">
              <a-textarea v-model="model.mkExplain" rows="2" placeholder="请输入做工说明"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row type="flex"  align="middle" class="imageDiv">
          <a-col :span="8">
            <a-form-model-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="image" >
              <j-image-upload isMultiple  v-model="model.image" ></j-image-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="视频" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="vedio">
              <j-upload v-model="model.vedio"   ></j-upload>
            </a-form-model-item>
          </a-col>
        </a-row>

      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import store from '@/store'

  export default {
    name: 'ZyProcessForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
          processCode:'',
          processType:0,
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        labelCol1: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol1: {
          xs: { span: 24 },
          sm: { span: 21 },
        },
        labelCol2: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 21 },
        },
        confirmLoading: false,
        validatorRules: {
          processTime:[
            {
              pattern: /^\d+$/,message:'请输入正整数'
            },
          ],
          manualWide:[
            {
              pattern: /^\d+$/,message:'请输入正整数'
            },
          ],
          machineWide:[
            {
              pattern: /^\d+$/,message:'请输入正整数'
            },
          ],
          bundleWide:[
            {
              pattern: /^\d+$/,message:'请输入正整数'
            },
          ],
           fabricNum: [
              { required: true, message: '请输入面料代码!'},
           ],
          enterpriseId: [
            { required: true, message: '请选择企业!'},
          ],
          typeId: [
            { required: true, message: '请选择款式!'},
          ],
          price:[{
             pattern: /^\d*\.?\d+$/,message:'请输入正数'
           },],
          processCode: [
            { required: true, message: '请输入工序代码!'},
          ],
          processName: [
            { required: true, message: '请输入工序名称!'},
          ],

        },
        url: {
          add: "/base/zyProcess/add",
          edit: "/base/zyProcess/edit",
          queryById: "/base/zyProcess/queryById",
          sort:"/base/zyProcess/sort"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.model.typeName=this.model.styleId_dictText
        if(this.model.codes==1){
          var n=6;
          getAction(this.url.sort,{id:this.model.styleId}).then((res)=>{
            // console.log(res.result)
            var num=parseInt(res.result,10)+1
            num=num.toString()
            while(num.length<n){
              num="0"+num
            }
            this.model.processCode=this.model.styleId+num;
            // console.log(this.model.processCode)
          })
        }
        this.visible = true;
      },
      submitForm () {
        const that = this;
        console.log(this.model)
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              this.model.createBy=store.getters.userInfo.realname
              httpurl+=this.url.add;
              method = 'post';
            }else{
              this.model.updateBy=store.getters.userInfo.realname
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
        console.log(this.model)
      },
      popupCallback(value,row){
        var n=6;
        this.model = Object.assign(this.model, row);
        getAction(this.url.sort,{id:this.model.styleId}).then((res)=>{
          // console.log(res.result)
         var num=parseInt(res.result,10)+1
          num=num.toString()
          while(num.length<n){
            num="0"+num
          }
          this.model.processCode=this.model.styleId+num;
          // console.log(this.model.processCode)
        })
      },
    }
  }
</script>
<style scoped>
  /deep/ .imageDiv .ant-row{
    margin-bottom: 0;
  }
</style>