编辑产品接口联调及增加必填项校验

yangfeng

2023-09-21 7c733f2e8d6b3c688ea741183f2b5d60686e841e

编辑产品接口联调及增加必填项校验

 src/components/makepager/pager/PagerView.vue

@@ -40,7 +40,7 @@
      default: () => {
        return {
          currPage: 1,
          pageSize: 10,
          pageSize: 15,
          totalCount: 0
        }
      }

 src/components/makepager/pager/mixin/pageMixin.js

@@ -7,7 +7,7 @@
    return {
      pagerOptions: {
        currPage: 1,
        pageSize: 10,
        pageSize: 15,
        totalCount: 0
      },
      pagerEvents

 src/views/productManage/product/AddProductDialog.vue

@@ -47,7 +47,7 @@
          <div class="basic-info-view">
            <el-row>
              <el-col :span="23">
                <div style="margin-left: 20px">产品名称</div>
                <div style="margin-left: 20px"><span style="color: #f56c6c">*</span>产品名称</div>
                <el-form-item label="" prop="name" label-width="20px">
                  <el-input v-model="editConfig.infomation.name" placeholder="" :disabled="!showFooter"></el-input>
                </el-form-item>
@@ -105,8 +105,8 @@
                      <el-option v-for="item in strategyOptions" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    <div>可储存的产品是您管理库存水平的实物项目。</div>
                    <div>您可以在发货前为其开具结算单。</div>
                    <div class="font_size_13" style="color: gray">可储存的产品是您管理库存水平的实物项目。</div>
                    <div class="font_size_13" style="color: gray">您可以在发货前为其开具结算单。</div>
                  </el-form-item>
                  <el-form-item label="物料类型" prop="model" style="margin-left: 20px">
                    <el-select
@@ -259,6 +259,7 @@
                      :precision="2"
                      :controls="false"
                      style="width: 85%"
                      :disabled="!showFooter"
                    ></el-input-number>
                    <span> kg</span>
                  </el-form-item>
@@ -270,6 +271,7 @@
                      :precision="2"
                      :controls="false"
                      style="width: 85%"
                      :disabled="!showFooter"
                    ></el-input-number>
                    <span> m³</span>
                  </el-form-item>
@@ -285,9 +287,10 @@
                      v-model="editConfig.infomation.deliveryAdvanceTime"
                      placeholder="请输入"
                      :min="0"
                      :precision="2"
                      :precision="0"
                      :controls="false"
                      style="width: 85%"
                      :disabled="!showFooter"
                    ></el-input-number>
                    <span> 天数</span>
                  </el-form-item>
@@ -296,9 +299,10 @@
                      v-model="editConfig.infomation.customerTaxes"
                      placeholder="请输入"
                      :min="0"
                      :precision="2"
                      :precision="0"
                      :controls="false"
                      style="width: 85%"
                      :disabled="!showFooter"
                    ></el-input-number>
                    <span> 天数</span>
                  </el-form-item>
@@ -477,7 +481,7 @@
<script>
// import CommonFormTableView from "@/components/makepager/CommonFormTableView"
import { getProductCategoryList } from "@/api/product/productCategory"
import { getProductList, addProduct } from "@/api/product/product"
import { getProductList, addProduct, updateProduct } from "@/api/product/product"

let inputElement = null
export default {
@@ -489,7 +493,7 @@
        return {
          visible: false,
          title: "新建",
          infomation: { type: [] }
          infomation: {}
        }
      }
    }
@@ -501,11 +505,10 @@
      dialogWidth: "50%",
      editConfig: this.editCommonConfig,
      rules: {
        client_name: [{ required: true, message: "请选择客户名称", trigger: "change" }],
        number: [{ required: true, message: "请输入退款单编号", trigger: "blur" }],
        refundDate: [{ required: true, message: "请选择退款日期", trigger: "change" }],
        memberId: [{ required: true, message: "请选择销售负责人", trigger: "change" }],
        sale_return_nunber: [{ required: true, message: "请选择销售退货单", trigger: "change" }]
        name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
        model: [{ required: true, message: "请选择物料类型", trigger: "change" }],
        salePrice: [{ required: true, message: "请输入销售价格", trigger: "blur" }],
        unit: [{ required: true, message: "请输入单位", trigger: "blur" }]
      },
      memberOptions: [
        {
@@ -630,16 +633,21 @@
      this.setTableForm()
    },
    // 保存
    async saveClick() {
    saveClick(formName) {
      console.log(this.editConfig.infomation)
      await addProduct({
        ...this.editConfig.infomation
      }).then((res) => {
        console.log(res)
        this.editConfig.visible = false
        if (res.code === 200) {
          this.$message.success("添加成功")
          this.$parent.getData()
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let requestUrl = this.editConfig.title === "新建" ? addProduct : updateProduct
          requestUrl({
            ...this.editConfig.infomation
          }).then((res) => {
            console.log(res)
            this.editConfig.visible = false
            if (res.code === 200) {
              this.$message.success("添加成功")
              this.$parent.getData()
            }
          })
        }
      })
    },
@@ -905,5 +913,8 @@
    line-height: 30px;
    font-size: 13px;
  }
  .el-input__inner {
    text-align: left;
  }
}
</style>

 src/views/productManage/product/index.vue

@@ -63,7 +63,7 @@
        </div> -->
      </div>
      <div class="btn-pager">
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
        <PagerView class="page" :pager-options="pagerOptions" :page-size="pageSizes" v-on="pagerEvents" />
      </div>
    </div>
    <!-- 新建/编辑 -->
@@ -99,7 +99,8 @@
        infomation: {}
      },
      isIconIndex: "1", // 1 图标 2 列表
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      pageSizes: [15, 30]
    }
  },
  created() {
@@ -108,6 +109,10 @@
  },
  methods: {
    setTable() {
      if (this.isIconIndex === "1") {
        this.pageSizes = [30, 60]
        this.pagerOptions.pageSize = 30
      }
      this.tableList = {
        tableInfomation: [],
        selectBox: true,
@@ -234,6 +239,7 @@
    addBtnClick() {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.infomation = {}
    },
    // 行点击
    tableRowClick(row) {
@@ -244,7 +250,16 @@
    },
    // 切换列表展现形式
    selIconSwitchClick(value) {
      this.pagerOptions.currPage = 1
      this.isIconIndex = value
      if (value === "1") {
        this.pageSizes = [30, 60]
        this.pagerOptions.pageSize = 30
      } else {
        this.pageSizes = [15, 30]
        this.pagerOptions.pageSize = 15
      }
      this.getData()
    }
  }
}
@@ -288,8 +303,8 @@
  justify-content: flex-start;
  align-content: flex-start;
  .product-box {
    width: 295px;
    height: 84px;
    width: 294px;
    height: 94px;
    margin-bottom: 10px;
    margin-right: 20px;
    border: 1px solid #dee2e6;
@@ -298,6 +313,7 @@
    -webkit-box-shadow: inset 0 0 2px #dee2e6;
    padding: 8px;
    display: flex;
    align-items: center;
    .left {
      width: 60px;
      text-align: center;
@@ -308,6 +324,7 @@
      margin-left: 10px;
      .label {
        color: #212529;
        margin-top: -10px;
        margin-right: 15px;
        word-break: break-all;
        word-wrap: break-word;
@@ -315,7 +332,7 @@
      .price,
      .library {
        color: #495057;
        margin-top: 3px;
        margin-top: 15px;
      }
    }
  }