yos_web/src/HDrpManagement/ProductMag/modules/add.vue

<template>
  <div>
    <el-button type="primary" size="small" @click="onShow(dialogFormVisible=true)" >新增产品</el-button>
    <el-drawer append-to-body title="新增产品" :visible.sync="dialogFormVisible" size="900px" @close="onCancel">
      <div class="drawer__panel" >
        <el-row :gutter="10">
          <el-form label-position="right" label-width="90px" :model="form" :rules="rules" ref="form" size="small">
            <el-col :span="12">
              <el-form-item label="品号" prop="itemno">
                <el-input v-model="form.itemno" placeholder="输入品号" @change="itemnoChange"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="品名" prop="itemname">
                <el-input v-model="form.itemname"  placeholder="输入品名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="ERP品号" prop="erpitemno">
                <el-input v-model="form.erpitemno" placeholder="输入ERP品号" @change="erpitemnoChange"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="ERP品名" prop="erpitemname">
                <el-input v-model="form.erpitemname" placeholder="输入ERP品名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="型号" prop="model">
                <el-input v-model="form.model" placeholder="输入产品型号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规格" prop="spec">
                <el-input v-model="form.spec" placeholder="输入产品规格"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="装箱数" prop="packqty">
                <el-input type="number" v-model="form.packqty" placeholder="输入装箱数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="siteid === 'HY' || siteid === 'YOSTEST1' || siteid === 'TZ'">
              <el-form-item label="商品大类" prop="categories">
                <el-select v-model="form.categories" style="width:100%">
                  <el-option v-for="item in categoriesList" :key="item.index" :value="item.value" :label="item.remarks"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="辅助单位">
                <el-checkbox :true-label="1" :false-label="0" v-model="form.isauxunit" @change="isauxunitChange">是否需要辅助单位</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主单位" prop="unitid">
                <el-select style="width:100%" v-model="form.unitid" placeholder="请选择" @change="unitChange">
                  <el-option
                    v-for="item in unitData"
                    :key="item.unitid"
                    :label="item.unitname"
                    :value="item.unitid">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="辅助单位">
                <el-select style="width:100%" v-model="form.unitgroupid" :disabled="form.isauxunit === 0" placeholder="请选择">
                  <el-option
                    v-for="item in unitGroupData"
                    :key="item.unitgroupid"
                    :label="item.unitgroupname"
                    :value="item.unitgroupid">
                    <p style="float: left">{{ item.unitgroupname }}</p>
                    <p style="float:right;color: #8492a6; font-size: 13px">{{ item.conversionrate }}{{item.unitname}}/{{item.auxunitname}},换算率:{{'1:'+ item.conversionrate}}</p>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="领域" prop="tradefields">
                <el-select style="width:100%" v-model="form.tradefields" multiple placeholder="请选择" clearable>
                  <el-option
                    v-for="item in tradefield"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品标准">
                <el-select style="width:100%" v-model="form.standards" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in standards"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起订量" prop="orderminqty">
                <el-input placeholder="起订量" v-model="form.orderminqty" class="input-with-select">
                  <el-select style="width:100px" v-model="form.orderminqty_auxunit" slot="prepend" placeholder="请选择">
                    <el-option label="主单位" :value="0"></el-option>
                    <el-option :disabled="form.isauxunit === 0" label="辅助单位" :value="1"></el-option>
                  </el-select>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="增量" prop="orderaddqty">
                <el-input placeholder="增量" v-model="form.orderaddqty" class="input-with-select">
                  <el-select style="width:100px" v-model="form.orderaddqty_auxunit" slot="prepend" placeholder="请选择">
                    <el-option label="主单位" :value="0"></el-option>
                    <el-option :disabled="form.isauxunit === 0" label="辅助单位" :value="1"></el-option>
                  </el-select>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="材质" >
                <el-select style="width:100%" v-model="form.material" placeholder="请选择" clearable>
                  <el-option
                      v-for="item in itemmaterial"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重量(kg)">
                <el-input v-model="form.weight" placeholder="重量(kg)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="交期">
                <el-input v-model="form.delivery" placeholder="输入交期(天)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="保修期限">
                <el-input v-model="form.warrantyday" placeholder="输入保修期限(年)"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="满库存量">
                <el-input v-model="form.stockstatus1" placeholder="满库存量"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="缺货提醒">
                <el-input v-model="form.stockstatus2" placeholder="缺货提醒"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工具">
                <el-checkbox :true-label="1" :false-label="0" v-model="form.istool">是否工具</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="营销物料">
                <el-checkbox :true-label="1" :false-label="0" v-model="form.iswuliao">是否物料</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产线">
                <el-input v-model="form.prodline" placeholder="输入产线"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="装置">
                <el-input v-model="form.device" placeholder="输入装置"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="特殊说明">
                <el-input v-model="form.specalnote" type="textarea" placeholder="输入特殊说明"></el-input>
              </el-form-item>
            </el-col>
<!--            <el-col :span="8">
              <el-form-item label="单品管理">
                <el-checkbox :true-label="1" :false-label="0" v-model="form.skucontrol" @change="isauxunitChange">是否需要单品管理</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="批次管理">
                <el-checkbox :true-label="1" :false-label="0" v-model="form.batchcontrol" @change="isauxunitChange">是否需要批次管理</el-checkbox>
              </el-form-item>
            </el-col>-->
            <el-col :span="12">
              <el-form-item label="服务物料">
                <el-checkbox :true-label="1" :false-label="0" v-model="form.isservice">是否服务物料</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="中线蝶阀">
                <el-checkbox :true-label="1" :false-label="0" v-model="form.isbutterfly"  >是否中线蝶阀</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="12" >
              <el-form-item label="压力等级" >
                <el-select style="width:100%" v-model="form.pressure" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in pressures"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="蝶板驱动" >
                <el-select style="width:100%" v-model="form.butterflyplatedrive" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in butterflyplatedrive"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="连接形式" >
                <el-select style="width:100%" v-model="form.connection" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in connectionmode"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="阀板材质" >
                <el-select style="width:100%" v-model="form.valveplatematerial" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in valveplatematerial"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="阀体材质" >
                <el-select style="width:100%" v-model="form.bodymaterial" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in bodymaterial"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="执行器类型" >
                <el-select style="width:100%" v-model="form.actuatortype" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in actuatortype"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="执行器品牌">
                <el-select style="width:100%" v-model="form.actuatorbrand" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in actuatorbrand"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item  label="产品图">
                <uploadFile
                  ref="upload"
                  style="margin-top:10px"
                  :folderid="folderid"
                  accept=".JPG,.PNG,.jpg,.png"
                  type="image"
                  :bindData="bindData"
                  @onSuccess="uploadSuccess">
                </uploadFile>
                <!-- <previewImage  :image="form.attinfos[0]" :deletebtn="true"
                  @onSuccess="clearCover"></previewImage> -->
                <small style="display:block;margin-top:20px" class="info">注：建议上传图片大小1024x1024，大小不超过2M，格式为JPG/PNG</small>
              </el-form-item>
            </el-col>
          </el-form>

        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="onCancel" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" :loading="loading" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import uploadFile from '@/components/upload/preview_upload.vue'
import previewImage from '@/components/previewImage/index.vue'
import {mapGetters} from "vuex";
export default {
  components:{uploadFile,previewImage},
  data () {
    return {
      dialogFormVisible:false,
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      form:{
        "attinfos":[],
        "itemid":0,
        "isauxunit":0,
        "unitid":'',
        "unitgroupid":'',
        "itemno":'',
        "itemname":'',
        "model": "",
        "spec": "",
        "orderminqty": 1, //订单起订量
        "orderaddqty": 1, //订单增量
        "orderminqty_auxunit": 0, //订单起订量控制单位（0:主单位；1:辅助单位）
        "orderaddqty_auxunit": 0, //订单增量控制单位（0:主单位；1:辅助单位
        "remarks": "", //可选
        "barcode": "", //可选
        "skucontrol": 0, //可选
        "batchcontrol": 0, //可选
        "grossweight": '', //可选
        "weight": '', //可选
        "height": '', //可选
        "width": '', //可选
        "length": '', //可选
        "caliber": "", //可选,口径
        "pressure": "", //可选,压力
        "material": "", //可选,材质
        "standards": "", //可选,产品标准
        "tradefields": '', //可选,领域
        "stockstatus2": '', //可选,库存缺货标准
        "stockstatus1": '', //可选,库存充足标准
        "warrantyday": '', //可选,保修期（年）
        "iswuliao": 0, //可选,是否营销物料
        "isservice": 0, //可选,是否服务物料
        "butterflyplatedrive": "",
        "connection": "",
        "valveplatematerial": "",
        "bodymaterial": "",
        "actuatortype": "",
        "actuatorbrand": "",
        "isbutterfly": 0,
        "erpitemno": "",
        "erpitemname": "",
        "specalnote": "",
        "prodline": "",
        "device": "",
        "packqty":'1',
        "tags":'',
        "categories":""
      },
      rules:{
         itemno: [
          { required: true, message: '请输入输入产品编号', trigger: 'blur' },
        ],
        itemname: [
          { required: true, message: '请输入输入产品名称', trigger: 'blur' },
        ],
        isauxunit: [
          { type: 'number', required: true, message: '辅助单位管理不可为空', trigger: 'change' },
        ],
        batchcontrol: [
          { required: true,message:'批次管理不可为空', trigger:'change'}
        ],
        skucontrol: [
          { required: true,message:'单品管理不可为空', trigger:'change'}
        ],
        unitid: [
          { required: true,message:'请输入主单位', trigger:'change'}
        ],
        tradefields: [
          { required: true,message:'请选择领域', trigger:'change'}
        ],
        categories: [
          { required: true,message:'请选择商品大类', trigger:'change'}
        ],
      },
      unitGroupData:[],
      unitData:[],
      bindData:{},
      tradefield:[],// 领域
      standards:[],// 产品标准
      pressures:[],// 压力等级
      itemmaterial:[], // 材质
      butterflyplatedrive:[],// 蝶板驱动
      valveplatematerial:[],// 阀板材质
      bodymaterial:[],// 阀体材质
      actuatortype:[], // 执行器类型
      actuatorbrand:[],// 执行器品牌
      connectionmode:[],// 连接形式
      categoriesList:[],//商品大类
      siteid:JSON.parse(sessionStorage.getItem('active_account')).siteid
    }
  },
  computed:{
    ...mapGetters({
      loading:'loading'
    })
  },
  methods:{
    onShow () {
      this.unitlist()
      this.unitGrouplist()
      this.fieldData()
      this.standardData()
      this.pressureData()
      this.itemmaterialData()
      this.butterflyplatedriveData()
      this.valveplatematerialData()
      this.bodymaterialData()
      this.actuatortypeData()
      this.actuatorbrandData()
      this.connectionmodeData()
      this.getCategoriesList()
    },
    // 查询领域
    async fieldData () {
      const res = await this.$store.dispatch('optiontypeselect','tradefield')
      this.tradefield = res.data
    },
    // 查询产品标准
    async standardData () {
      const res = await this.$store.dispatch('optiontypeselect','itemstandards')
      this.standards = res.data
    },

    // 查询压力等级
    async pressureData () {
      const res = await this.$store.dispatch('optiontypeselect','pressurelevel')
      this.pressures = res.data
    },

    // 查询材质
    async itemmaterialData () {
      const res = await this.$store.dispatch('optiontypeselect','itemmaterial')
      this.itemmaterial = res.data
    },
    // 查询蝶板驱动
    async butterflyplatedriveData () {
      const res = await this.$store.dispatch('optiontypeselect','butterflyplatedrive')
      this.butterflyplatedrive = res.data
    },
    // 阀板材质
    async valveplatematerialData () {
      const res = await this.$store.dispatch('optiontypeselect','valveplatematerial')
      this.valveplatematerial = res.data
    },
    // 阀体材质
    async bodymaterialData () {
      const res = await this.$store.dispatch('optiontypeselect','bodymaterial')
      this.bodymaterial = res.data
    },
    // 执行器类型
    async actuatortypeData () {
      const res = await this.$store.dispatch('optiontypeselect','actuatortype')
      this.actuatortype = res.data
    },
    // 执行器品牌
    async actuatorbrandData () {
      const res = await this.$store.dispatch('optiontypeselect','actuatorbrand')
      this.actuatorbrand = res.data
    },
    // 连接形式
    async connectionmodeData () {
      const res = await this.$store.dispatch('optiontypeselect','connectionmode')
      this.connectionmode = res.data
    },
    async unitlist () {
      const res = await this.$api.requested({
        "id": "20220922084803",
        "version":1,
        "nocache": true,
        "content": {
          "pageSize":1000,
          "where":{
            "condition":""
          }
        }
      })
      this.unitData = res.data
    },
    async unitGrouplist () {
       const res = await this.$api.requested({
        "id": "20220922084503",
        "version":1,
        "nocache": true,
        "content": {
          "pageSize":1000,
          "where":{
            "condition":"",
            "unitid":this.form.unitid
          }
        }
      })
      this.unitGroupData = res.data
    },
    onSubmit () {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        this.$store.commit('setLoading',true)
        const res = await this.$api.requested({
          "id": 20220923141502,
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.$store.commit('setLoading',false)
          this.bindData = {
            ownertable:'plm_item',
            ownerid:res.data.itemid,
            usetype:'default'
          }
         /* this.setTag(res.data.itemid,res.data.rowindex)*/
          this.$refs['form'].resetFields();
          this.$refs['upload'].toUpload()
          this.$emit('onSuccess')
          this.refresh()
          this.dialogFormVisible = false
          this.$store.dispatch('changeDetailDrawer',true)
          this.$router.push({path:'/productmagDetail',query:{id:res.data.itemid,rowindex:res.data.rowindex}})
        })
      })

    },
    async setTag(id,rowindex){
      const res = await this.$api.requested({
        "id": 20220929090901,
        "content": {
          "ownertable":"plm_item",
          "ownerid":id,
          "datatag":[this.form.tags]
        }
      })
      console.log(res.data,'标签设置结果')
      this.$refs['form'].resetFields();
      this.$refs['upload'].toUpload()
      this.$emit('onSuccess')
      this.refresh()
      this.dialogFormVisible = false
      this.$store.dispatch('changeDetailDrawer',true)
      this.$router.push({path:'/productmagDetail',query:{id:id,rowindex:rowindex}})
    },
    onCancel(){
      this.dialogFormVisible = false
      this.$refs['form'].resetFields();
      this.form={
        "attinfos":[],
        "itemid":0,
        "isauxunit":0,
        "unitid":'',
        "unitgroupid":'',
        "itemno":'',
        "itemname":'',
        "model": "",
        "spec": "",
        "orderminqty": 1, //订单起订量
        "orderaddqty": 1, //订单增量
        "orderminqty_auxunit": 0, //订单起订量控制单位（0:主单位；1:辅助单位）
        "orderaddqty_auxunit": 0, //订单增量控制单位（0:主单位；1:辅助单位
        "remarks": "", //可选
        "barcode": "", //可选
        "skucontrol": 0, //可选
        "batchcontrol": 1, //可选
        "grossweight": '', //可选
        "weight": '', //可选
        "height": '', //可选
        "width": '', //可选
        "length": '', //可选
        "packqty":'1',
        "tags":'',
        "categories":""
      }
    },
    unitChange () {
       this.unitGrouplist()
    },
    isauxunitChange (val) {
      if (val === 0) {
        this.form.orderminqty_auxunit = this.form.orderaddqty_auxunit = 0
        this.form.unitgroupid = ''
      }
    },
    uploadSuccess(res){
      this.$emit('onSuccess')
    },
    refresh () {
      this.form = {
        "attinfos":[],
        "itemid":0,
        "isauxunit":0,
        "unitid":'',
        "unitgroupid":'',
        "itemno":'',
        "itemname":'',
        "model": "",
        "spec": "",
        "orderminqty": 1, //订单起订量
        "orderaddqty": 1, //订单增量
        "orderminqty_auxunit": 0, //订单起订量控制单位（0:主单位；1:辅助单位）
        "orderaddqty_auxunit": 0, //订单增量控制单位（0:主单位；1:辅助单位
        "remarks": "", //可选
        "barcode": "", //可选
        "skucontrol": 0, //可选
        "batchcontrol": 1, //可选
        "grossweight": '', //可选
        "weight": '', //可选
        "height": '', //可选
        "width": '', //可选
        "length": '', //可选
        "caliber": "", //可选,口径
        "pressure": "", //可选,压力
        "material": "", //可选,材质
        "standards": "", //可选,产品标准
        "tradefields": '', //可选,领域
        "stockstatus2": 0, //可选,库存缺货标准
        "stockstatus1": 100, //可选,库存充足标准
        "warrantyday": 1, //可选,保修期（年）
        "iswuliao": 0, //可选,是否营销物料
        "isservice": 0, //可选,是否服务物料
        "butterflyplatedrive": "",
        "connection": "",
        "valveplatematerial": "",
        "bodymaterial": "",
        "actuatortype": "",
        "actuatorbrand": "",
        "isbutterfly": 0,
        "erpitemno": "",
        "erpitemname": "",
        "specalnote": "",
        "prodline": "",
        "device": "",
        "packqty":"1",
        "categories":""
      }
    },
    itemnoChange(){
      this.form.itemno=this.form.itemno.replace(/^\s+|\s+$/g,'')
    },
    erpitemnoChange(){
      this.form.erpitemno = this.form.erpitemno.replace(/^\s+|\s+$/g,'')
    },

    /*获取可选商品大类*/
    async getCategoriesList () {
      let res = await this.$store.dispatch('optiontypeselect','categories')

      this.categoriesList= res.data

      this.form.categories = this.categoriesList.length > 0?this.categoriesList[0].remarks:''
    },
    hasDisabledTag (item) {
      let arr = []
      let arr2 = []
      arr = this.tagList.filter(item=>{
        return this.form.tags.includes(item.tag)
      })
      arr.forEach(e=>{
        arr2 = arr2.concat(e.mutextag)
      })
      arr2 = this.form.tags.length === 0?[]:arr2
      let _isSame = arr2.some(tag=>item.tag === tag)
      return _isSame
    },
  },
  mounted () {

  }
}

</script>
<style>
</style>