wms项目 产品模块 增加启用多单位的前端开发+新增和编辑产品 2个接口联调

haoxuan

2024-04-16 01d52b4d848d2636fa778689a2c1f783e0e15bd4

wms项目 产品模块  增加启用多单位的前端开发+新增和编辑产品 2个接口联调

 src/views/productManage/product/AddProductDialog.vue

@@ -146,7 +146,7 @@
                      placeholder="单位"
                      filterable
                      @change="Gtechange"
                      style="width: 85%"
                      style="width: calc(85% - 110px)"
                    >
                      <el-option
                        v-for="ele in unitList"
@@ -160,6 +160,14 @@
                      style="font-size: 20px; color: gray"
                      @click="handleUnitShow"
                    ></i>
                    <el-checkbox
                    class="margin_left_10px"
                    :disabled="editConfig.infomation.unit&&showFooter?false:true"
                    v-model="editConfig.infomation.moreUnit"
                    @change="moreUnitChange"
                    ></el-checkbox
                  >
                  <span class="margin_left_10px cursor_pointer"  @click="handleUnitMore">启用多单位</span>
                  </el-form-item>
                  
                  <el-form-item label="产品标签" prop="productTagName">
@@ -542,6 +550,13 @@
      :workList="unitList"
      title="计量单位"
    ></BomDialog>
    <UnitMoreDialog
      ref="unitMoreDialog"
      @saveUnitMore="saveUnitMore"
      :workList="unitList"
      :dataList="editConfig.infomation.moreUnitList"
      title="启用多单位"
    ></UnitMoreDialog>
  </div>
</template>

@@ -555,7 +570,7 @@
import BomDialog from "./components/bomDialog";
import {getUnitInfo,  } from "@/api/basic/standard";
// import { postGetSaveSUnitDict  } from "@/api/basic/standard";

import UnitMoreDialog from "./components/UnitMoreDialog";

export default {
  mixins: [codeMixin],
@@ -576,6 +591,7 @@
  components: { 
    IconCropper,
    BomDialog, 
    UnitMoreDialog,
  },
  computed: {
    modalTitle() {
@@ -688,6 +704,33 @@
    // 单位
    handleUnitShow() {
      this.editRow.editDialogVisible = true;
    },
    // 启用多单位
    handleUnitMore(){
      if(this.editConfig.infomation.unit){
        this.$refs.unitMoreDialog.editDialogVisible = true;
      }else{
        this.$message.error('请先选择单位！')
      }
    },
    saveUnitMore(list){
      this.editConfig.infomation.moreUnitList=list
    },
    // 启用多单位的开关
    moreUnitChange(){
      let string=false;
      if(this.editConfig.infomation.moreUnitList&&this.editConfig.infomation.moreUnitList.length>0){
        for(let i in this.editConfig.infomation.moreUnitList){
          if(this.editConfig.infomation.moreUnitList[i].unit&&this.editConfig.infomation.moreUnitList[i].amount){
            string=true;
            break;
          }
        }
      }
      if(!string){
        this.editConfig.infomation.moreUnit=false
        this.$message.error('请先配置多单位！')
      }
    },
    handleConfirmSave(dataList) {
      saveUnitDict({ data: dataList }).then((res) => {
@@ -839,6 +882,11 @@
        params.codeStandardID = this.autoCodeObj.codeStandardID
        params.autoIncr = this.autoCodeObj.maxAutoIncr
      }
      if(params.moreUnitList.length>0){
        for(let i in params.moreUnitList){
          params.moreUnitList[i].amount=Number(params.moreUnitList[i].amount)
        }
      }
      requestUrl(params).then((res) => {
        console.log(res)
        this.editConfig.visible = false

 src/views/productManage/product/components/UnitMoreDialog.vue

New file
@@ -0,0 +1,251 @@
<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="editDialogVisible"
    width="35rem"
    class="add-event-dialog"
    @close="shutdown"
    append-to-body
  >
    <div slot="title" class="tac drawerHeader">
      {{ title }}
    </div>
    <div class="drawerContent">
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        :inline="true"
        label-width="0"
        label-position="left"
      >
        <div class="form-item" v-for="(item, index) in form.formList" :key="index">
          <el-row>
            <el-col :span="2" class="col-name">1</el-col>
            <el-col :span="7">
              <el-form-item
                label=""
                :prop="`formList.${index}.unit`"
                :rules="[
                  {
                    required: item.amount?true:false,
                    message: '请选择',
                    trigger: 'change',
                  },
                ]"
              >
                <el-select
                  v-model.number="form.formList[index].unit"
                  placeholder="单位"
                  filterable
                  clearable
                  :popper-append-to-body="false"
                  size="mini"
                >
                  <el-option
                    v-for="ele in workList"
                    :key="ele.id"
                    :label="ele.name"
                    :value="ele.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1" class="col-name">≈</el-col>
            <el-col :span="7">
              <el-form-item
                label=""
                :prop="`formList.${index}.amount`"
                :rules="[
                  {
                    required: item.unit?true:false,
                    message: '请填写大于零的2位小数',
                    trigger: ['change', 'blur'],
                    validator: validatorNum,
                  },
                ]"
              >
                <el-input
                  v-model="item.amount"
                  placeholder="请输入"
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2" class="col-name">包</el-col>
            <el-col :span="5" v-if="index==0"> 
              <el-form-item
                label=""
                :prop="`formList.${index}.floating`"
              >
              <el-checkbox
                    class="margin_left_10px"
                    v-model="item.floating"
                    >浮动换算</el-checkbox
                  >
                </el-form-item>
            </el-col>
            <el-col :span="5" class="col-name" v-else> 
              <el-button
                @click="delItem(index)"
                type="text"
                size="small"
                style="text-align:center;"
                >清空</el-button
              >
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer tac">
      <el-button @click="shutdown">取消</el-button
      ><el-button
        type="primary"
        @click="handleConfirmSave()"
        style="margin-left: 16px; color: #fff; background-color: #2a78fb"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    dataList: {
      type: [Array],
    },
    workList: {
      type: [Array],
    },
  },
  data() {
    return {
      editDialogVisible: false,
      
      form: {
        formList: [
          {
            unit:'',
            amount:'',
            floating:false,
          },
          {
            unit:'',
            amount:null,
            floating:false,
          },
          {
            unit:'',
            amount:null,
            floating:false,
          }
        ],
      },
      rules: {},
    };
  },
  watch: {
    editDialogVisible(newVal) {
      if (newVal) {
        this.getInfo()
      }
    },
    dataList() {
    },
  },
  mounted() {},
  methods: {
    getInfo(){
      if(this.dataList&&this.dataList.length>0){
        this.form.formList = this.dataList;
          for(let i in this.form.formList){
            this.form.formList[i].amount=this.form.formList[i].amount==0?null:this.form.formList[i].amount
          }
      }else{
        this.form.formList = [
          {
            unit:'',
            amount:null,
            floating:false,
          },
          {
            unit:'',
            amount:null,
            floating:false,
          },
          {
            unit:'',
            amount:null,
            floating:false,
          }
        ]
      }
    },
    delItem(index){
      this.$set(this.form.formList[index],'unit','')
      this.$set(this.form.formList[index],'amount','')
    },
    validatorNum(rule, value, callback) {
      if(rule.required){
        if (value == undefined || value == null) {
          callback(new Error("请输入有效数字"));
        } else {
          let reg2 =
            /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
          if (!reg2.test(value) || value == 0) {
            callback(new Error("请填写大于零的2位小数的数字"));
          } else {
            callback();
          }
        }
      }else{
        callback();
      }
    },
    handleConfirmSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.shutdown()
          this.$emit('saveUnitMore',this.form.formList)
        }
      })
    },
    shutdown() {
      this.editDialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.drawerContent{
  height:200px;
  overflow-y: auto;
  .el-form{
    width:100%;
   
    .col-name{
      line-height:40px;
      text-align:center;
    }
  }
}
.drawerFooter {
  margin-top: 16px;
  margin-right: 20px;
  text-align: right;
  .el-button {
    width: 80px;
    height: 38px;
    border-color: rgba(0, 0, 0, 0.1);
    font-family: PingFangSC-Medium, sans-serif;
    color: #000;
  }
}

</style>