产品相关接口联调

yangfeng

2023-08-28 6e84763437df97e194f8c833feca8bdcb90e7103

产品相关接口联调

 src/api/productManage/product.js

@@ -31,3 +31,10 @@
    data
  })
}

// 添加产品获取产品列表
export const getProductListFromGrpc = async (data) => {
  return await axios.get(`/api/p/getProductListFromGrpc`, {
    params: data
  })
}

 src/components/makepager/CommonFormTableView.vue

@@ -19,103 +19,99 @@
          </template>
          <!-- column样式 -->
          <template slot-scope="scope">
            <template v-if="!detailEnter">
              <el-form-item
                v-if="item.input"
                label=" "
                :prop="'tableData.' + scope.$index + '.' + item.prop"
                :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
              >
                <el-input
                  v-model.trim="scope.row[item.prop]"
                  maxlength="50"
            <!-- <template v-if="!detailEnter"> -->
            <el-form-item
              v-if="item.input"
              label=" "
              :prop="'tableData.' + scope.$index + '.' + item.prop"
              :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
            >
              <el-input
                v-model.trim="scope.row[item.prop]"
                maxlength="50"
                size="mini"
                @change="
                  (val) => {
                    commonInputChange(val, item.prop, scope.row)
                  }
                "
              ></el-input>
            </el-form-item>
            <el-form-item v-else-if="item.productName" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
              <div class="custom-name">
                <el-autocomplete
                  v-model="scope.row[item.prop]"
                  :fetch-suggestions="querySearchAsync"
                  value-key="name"
                  size="mini"
                  @change="
                  @select="
                    (val) => {
                      commonInputChange(val, item.prop, scope.row)
                      handleSelectClient(val, item.prop, scope.row)
                    }
                  "
                ></el-input>
              </el-form-item>
              <el-form-item
                v-else-if="item.productName"
                label=" "
                :prop="'tableData.' + scope.$index + '.' + item.prop"
              >
                <div class="custom-name">
                  <el-autocomplete
                    v-model="scope.row[item.prop]"
                    :fetch-suggestions="querySearchAsync"
                    value-key="name"
                    size="mini"
                    @select="
                      (val) => {
                        handleSelectClient(val, item.prop, scope.row)
                      }
                    "
                  ></el-autocomplete>
                  <div class="common-select-btn" @click="selClientClick(scope.row, item.prop)">
                    <i class="el-icon-circle-plus-outline" title="选择"></i>
                  </div>
                  <div class="common-select-btn" @click="clearupClient(scope.row)">
                    <i class="el-icon-remove-outline" title="清除"></i>
                  </div>
                ></el-autocomplete>
                <div class="common-select-btn" @click="selClientClick(scope.row, item.prop)">
                  <i class="el-icon-circle-plus-outline" title="选择"></i>
                </div>
              </el-form-item>
              <el-form-item
                v-else-if="item.date"
                label=" "
                :prop="'tableData.' + scope.$index + '.' + item.prop"
                :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
              >
                <!-- <el-input v-model.trim="scope.row[item.prop]" maxlength="50" size="mini"></el-input> -->
                <el-date-picker v-model="scope.row[item.prop]" type="date" size="mini" style="width: 110px">
                </el-date-picker>
              </el-form-item>
              <el-form-item
                v-else-if="item.inputNumber"
                label=" "
                :prop="'tableData.' + scope.$index + '.' + item.prop"
                :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
              >
                <el-input-number
                  v-model="scope.row[item.prop]"
                  placeholder=""
                  :min="0"
                  :controls="false"
                  size="mini"
                  style="width: 100%; margin-right: 5px"
                  @change="
                    (val) => {
                      commonInputChange(val, item.prop, scope.row)
                    }
                  "
                ></el-input-number>
              </el-form-item>
              <el-form-item
                v-else-if="item.inputFloat"
                label=" "
                :prop="'tableData.' + scope.$index + '.' + item.prop"
                :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
              >
                <el-input-number
                  v-model="scope.row[item.prop]"
                  placeholder=""
                  :min="0"
                  :precision="2"
                  :controls="false"
                  size="mini"
                  style="width: 100%; margin-right: 5px"
                  @change="
                    (val) => {
                      commonInputChange(val, item.prop, scope.row)
                    }
                  "
                ></el-input-number>
              </el-form-item>
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
                <div class="common-select-btn" @click="clearupClient(scope.row)">
                  <i class="el-icon-remove-outline" title="清除"></i>
                </div>
              </div>
            </el-form-item>
            <el-form-item
              v-else-if="item.date"
              label=" "
              :prop="'tableData.' + scope.$index + '.' + item.prop"
              :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
            >
              <!-- <el-input v-model.trim="scope.row[item.prop]" maxlength="50" size="mini"></el-input> -->
              <el-date-picker v-model="scope.row[item.prop]" type="date" size="mini" style="width: 110px">
              </el-date-picker>
            </el-form-item>
            <el-form-item
              v-else-if="item.inputNumber"
              label=" "
              :prop="'tableData.' + scope.$index + '.' + item.prop"
              :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
            >
              <el-input-number
                v-model="scope.row[item.prop]"
                placeholder=""
                :min="0"
                :controls="false"
                size="mini"
                style="width: 100%; margin-right: 5px"
                @change="
                  (val) => {
                    commonInputChange(val, item.prop, scope.row)
                  }
                "
              ></el-input-number>
            </el-form-item>
            <el-form-item
              v-else-if="item.inputFloat"
              label=" "
              :prop="'tableData.' + scope.$index + '.' + item.prop"
              :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
            >
              <el-input-number
                v-model="scope.row[item.prop]"
                placeholder=""
                :min="0"
                :precision="2"
                :controls="false"
                size="mini"
                style="width: 100%; margin-right: 5px"
                @change="
                  (val) => {
                    commonInputChange(val, item.prop, scope.row)
                  }
                "
              ></el-input-number>
            </el-form-item>
            <span v-else>{{ scope.row[item.prop] }}</span>
            <!-- </template> -->
            <!-- <span v-else>{{ scope.row[item.prop] }}</span> -->
          </template>
        </el-table-column>
      </el-table>
@@ -123,15 +119,6 @@
    <div v-if="!detailEnter" style="margin: 10px">
      <el-button size="small" type="primary" @click="add">新增</el-button>
      <el-button size="small" type="primary" @click="empty">清空</el-button>

      <el-button
        size="small"
        v-if="recalculateShow"
        type="primary"
        @click="recalculate"
        :disabled="isRecalculate ? false : true"
        >重算</el-button
      >
    </div>
    <!-- 产品名称 -->
    <SelectCommonDialog
@@ -143,7 +130,7 @@
</template>

<script>
import { getProductList } from "@/api/productManage/product"
import { getProductListFromGrpc } from "@/api/productManage/product"
import SelectCommonDialog from "@/views/other/commonDialog/SelectCommonDialog"
export default {
  name: "CommmonFormTableView",
@@ -193,24 +180,18 @@
        title: "",
        infomation: {}
      },
      productIndex: 0,
      isRecalculate: true
      productIndex: 0
    }
  },
  created() {
    this.getProductList()
    this.tableList = this.productTableList
    if (this.tableList.tableData.length === 1 && this.tableList.tableData[0].name === "") {
      this.isRecalculate = false
    } else {
      this.isRecalculate = true
    }
  },
  computed: {},
  methods: {
    // 产品名称
    async getProductList() {
      await getProductList({
      await getProductListFromGrpc({
        page: 1,
        pageSize: 100
      }).then((res) => {
@@ -322,7 +303,6 @@
    },
    // 清空
    empty() {
      this.isRecalculate = false
      this.$emit("emptyProductClick")
    },
    // 选择产品名称相关方法
@@ -338,16 +318,41 @@
    },
    handleSelectClient(item, prop, row) {
      // this.clientId = item.id
      this.isRecalculate = true
      console.log(item, prop, row)
      this.tableList.tableData.map((ite) => {
        if (ite.name === item.name) {
          ite.ID = row.ID
          ite.amount = item.amount || 1
          ite.number = item.number
          ite.price = item.price
          ite.total = item.amount ? item.amount * item.price : 1 * item.price
          ite.purchasePrice = item.purchasePrice
          ite.unit = item.unit
          ite.deliveryTime = item.deliveryTime
          ite.shippingDuration = item.shippingDuration
          ite.modelNumber = item.modelNumber
        }
      })
      if (this.detailEnter) {
        this.setEditName(item, row.ID)
      }
    },
    setEditName(item, ID) {
      let selRow = {
        ID: ID,
        deliveryTime: item.deliveryTime,
        maximumStock: item.maximumStock,
        minimumStock: item.minimumStock,
        modelNumber: item.modelNumber,
        name: item.name,
        number: item.number,
        productType: item.productType,
        purchasePrice: item.purchasePrice,
        remark: item.remark,
        shippingDuration: item.shippingDuration,
        specifications: item.specifications,
        supplierId: item.supplierId,
        unit: item.unit
      }
      this.$emit("selCommonName", selRow)
    },
    selClientClick(row, prop) {
      console.log(row, prop)
@@ -358,28 +363,55 @@
    selClient(item) {
      console.log(item)
      console.log(this.tableList.tableData)
      this.isRecalculate = true
      // this.editConfig.infomation.client_name = row.name
      this.tableList.tableData.map((ite, index) => {
        if (index === this.productIndex) {
      if (this.detailEnter) {
        this.tableList.tableData.map((ite) => {
          ite.ID
          ite.name = item.name
          ite.amount = item.amount || 1
          ite.number = item.number
          ite.price = item.price
          ite.total = item.amount ? item.amount * item.price : 1 * item.price
        }
      })
          ite.purchasePrice = item.purchasePrice
          ite.unit = item.unit
          ite.deliveryTime = item.deliveryTime
          ite.shippingDuration = item.shippingDuration
        })
        this.setEditName(item, this.tableList.tableData[0].ID)
      } else {
        this.tableList.tableData.map((ite, index) => {
          if (index === this.productIndex) {
            ite.name = item.name
            ite.amount = item.amount || 1
            ite.number = item.number
            ite.purchasePrice = item.purchasePrice
            ite.unit = item.unit
            ite.deliveryTime = item.deliveryTime
            ite.shippingDuration = item.shippingDuration
          }
        })
      }
    },
    // 清除已选择用户
    clearupClient(row) {
      this.productIndex = row.productId - 1
      this.tableList.tableData.map((ite, index) => {
        if (index === this.productIndex) {
        console.log(row.productId)
        if (row.productId && row.productId >= 0) {
          if (index === this.productIndex) {
            ite.name = ""
            ite.amount = 1
            ite.number = ""
            ite.purchasePrice = 0
            ite.unit = ""
            ite.deliveryTime = 0
            ite.shippingDuration = 0
          }
        } else {
          ite.name = ""
          ite.amount = 1
          ite.number = ""
          ite.price = 0
          ite.total = 0
          ite.purchasePrice = 0
          ite.unit = ""
          ite.deliveryTime = 0
          ite.shippingDuration = 0
        }
      })
      this.$emit("clearupProduct", this.tableList.tableData)

 src/components/makepager/TableCommonView.vue

@@ -11,8 +11,6 @@
      :summary-method="getSummaries"
      :span-method="arraySpanMethod"
      @selection-change="handleSelectionChange"
      highlight-current-row
      @row-click="tableRowClick"
      :header-cell-style="{ background: '#ECF4FF', color: '#666' }"
    >
      <el-table-column v-if="tableList.selectBox" type="selection" width="40"> </el-table-column>

 src/views/other/commonDialog/SelectCommonDialog.vue

@@ -39,7 +39,7 @@
</template>

<script>
import { getProductList } from "@/api/productManage/product"
import { getProductListFromGrpc } from "@/api/productManage/product"
export default {
  name: "EditSelCommonDialog",
  props: {
@@ -105,7 +105,7 @@
    },
    // 产品名称
    async getProductList() {
      await getProductList({
      await getProductListFromGrpc({
        page: 1,
        pageSize: 100
      }).then((res) => {

 src/views/productManage/product/DetailProduct.vue

@@ -35,13 +35,13 @@
                  </div>
                </li>
              </ul>
              <div class="business_scope">
              <!-- <div class="business_scope">
                <div class="content-title">{{ "图片：" }}</div>
                <div class="bigImg-div">
                  <i class="el-icon-picture-outline icon" v-if="!valueUrl"></i>
                  <img class="bigImg" :src="valueUrl" v-if="valueUrl" />
                </div>
              </div>
              </div> -->
              <div class="business_scope">
                <div class="content-title">{{ "备注信息：" }}</div>
                <div class="content-data">{{ remark ? remark : "--" }}</div>

 src/views/supplierManage/supplier/AddNewProduct.vue

@@ -15,10 +15,12 @@
        <div class="basic-info-view">
          <CommonFormTableView
            :product-table-list="productTableList"
            :detail-enter="detailEnter"
            @inputContent="inputContent"
            @addProductClick="addProductClick"
            @emptyProductClick="emptyProductClick"
            @clearupProduct="clearupProduct"
            @selCommonName="selCommonName"
          />
        </div>
      </div>
@@ -31,7 +33,7 @@
</template>

<script>
// import { createProduct, updateProduct } from "@/api/productManage/product"
import { createProduct, updateProduct } from "@/api/productManage/product"
import CommonFormTableView from "@/components/makepager/CommonFormTableView"
export default {
  name: "AddNewProduct",
@@ -56,7 +58,9 @@
      productTableList: {},
      tableData: [],
      productId: 1,
      isNoProduct: true
      isNoProduct: true,
      supplierId: this.addCommonConfig.infomation.supplierId,
      detailEnter: true
    }
  },
  created() {
@@ -72,49 +76,52 @@
    // 保存
    saveClick() {
      console.log(this.editConfig.infomation)
      const params = this.saveParams()
      console.log(params)
      if (this.editConfig.title === "添加") {
        // createProduct(params).then((res) => {
        //   console.log(res)
        //   this.editConfig.visible = false
        //   if (res.code === 200) {
        //     this.$message.success("添加成功")
        //     this.$parent.getData()
        //   }
        // })
        createProduct({
          list: this.tableData
        }).then((res) => {
          console.log(res)
          this.editConfig.visible = false
          if (res.code === 200) {
            this.$message.success("添加成功")
            this.$parent.getProductList()
          }
        })
      } else {
        // updateProduct(params).then((res) => {
        //   console.log(res)
        //   this.editConfig.visible = false
        //   if (res.code === 200) {
        //     this.$message.success("编辑成功")
        //     this.$parent.getData()
        //   }
        // })
        const params = this.saveParams()
        updateProduct(params).then((res) => {
          console.log(res)
          this.editConfig.visible = false
          if (res.code === 200) {
            this.$message.success("编辑成功")
            this.$parent.getProductList()
          }
        })
      }
    },
    saveParams() {
      // let data = this.editConfig.infomation
      let data = this.editConfig.infomation
      let params = {
        deliveryTime: 0,
        id: 0,
        maximumStock: 0,
        minimumStock: 0,
        name: "string",
        number: "string",
        productType: "string",
        purchasePrice: 0,
        remark: "string",
        shippingDuration: 0,
        specifications: "string",
        supplierId: 0,
        unit: "string"
        deliveryTime: data.deliveryTime || 0,
        id: data.ID || 0,
        maximumStock: data.maximumStock || 0,
        minimumStock: data.minimumStock || 0,
        modelNumber: data.modelNumber || "",
        name: data.name || "",
        number: data.number || "",
        productType: data.productType || "",
        purchasePrice: data.purchasePrice || 0,
        remark: data.remark || "",
        shippingDuration: data.shippingDuration || 0,
        specifications: data.specifications || "",
        supplierId: this.supplierId || 0,
        unit: data.unit || ""
      }
      return params
    },
    setTableForm() {
      if (this.editConfig.title === "添加" || this.editConfig.infomation.products.length === 0) {
      if (this.editConfig.title === "添加") {
        this.detailEnter = false
        this.tableData = [
          {
            productId: this.productId,
@@ -124,14 +131,13 @@
            name: "",
            number: "",
            price: 0,
            total: 0
            total: 0,
            supplierId: this.supplierId
          }
        ]
      } else {
        this.tableData = this.editConfig.infomation.products
        this.tableData.map((item, index) => {
          item.productId = index + 1
        })
        this.tableData = [{ ...this.editConfig.infomation }]
        this.detailEnter = true
      }
      this.productTableList = {
        tableData: this.tableData,
@@ -152,6 +158,7 @@
      this.tableData.map((item) => {
        if (item.productId === row.productId) {
          item[prop] = val
          item.supplierId = this.supplierId
        }
      })
    },
@@ -166,7 +173,8 @@
        name: "",
        number: "",
        price: 0,
        total: 0
        total: 0,
        supplierId: this.supplierId
      })
    },
    //  产品清空
@@ -181,7 +189,8 @@
          name: "",
          number: "",
          price: 0,
          total: 0
          total: 0,
          supplierId: this.supplierId
        }
      ]
      this.productTableList.tableData = this.tableData
@@ -190,6 +199,11 @@
    clearupProduct(data) {
      this.tableData = data
      this.productTableList.tableData = this.tableData
    },
    selCommonName(row) {
      console.log("1133")
      console.log(row)
      this.editConfig.infomation = row
    }
  }
}

 src/views/supplierManage/supplier/AddSupplier.vue

@@ -229,7 +229,7 @@
      editConfig: this.addCommonConfig,
      rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        responsiblePersonId: [{ required: true, message: "请选择", trigger: "change" }],
        responsiblePersonName: [{ required: true, message: "请选择", trigger: "change" }],
        phone: [
          { required: false, message: "", trigger: "blur" },
          { len: 11, message: "长度在11个字符", trigger: "blur" },

 src/views/supplierManage/supplier/RaleteSupplierList.vue

@@ -16,6 +16,8 @@
        </div>
      </div>
      <div slot="footer" class="dialog-footer"></div>
      <!-- 详情 -->
      <DetailSupplier v-if="commonDetail.visible" :common-detail="commonDetail" />
    </el-dialog>
  </div>
</template>
@@ -23,6 +25,7 @@
<script>
import { getProductList } from "@/api/productManage/product"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import DetailSupplier from "@/views/supplierManage/supplier/DetailSupplier"
export default {
  name: "AddSupplierDialog",
  mixins: [pageMixin],
@@ -37,13 +40,17 @@
      }
    }
  },
  components: {},
  components: { DetailSupplier },
  computed: {},
  data() {
    return {
      dialogWidth: "80%",
      editConfig: this.commonConfig,
      tableList: {}
      tableList: {},
      commonDetail: {
        visible: false,
        infomation: {}
      }
    }
  },
  created() {
@@ -90,8 +97,8 @@
    },
    selCommonClick(row) {
      console.log(row)
      // this.commonDetail.visible = true
      // this.commonDetail.infomation = { ...row }
      this.commonDetail.visible = true
      this.commonDetail.infomation = { ...row }
    }
  }
}

 src/views/supplierManage/supplier/index.vue

@@ -13,28 +13,49 @@
        </div>
      </div>
      <template>
        <TableCommonView
          ref="tableListRef"
          :table-list="tableList"
          @selCommonClick="selCommonClick"
          @tableRowClick="tableRowClick"
        <el-table
          ref="tableSupplier"
          border
          :data="tableList.tableInfomation"
          tooltip-effect="dark"
          style="width: 100%"
          :lazy="tableList.lazy"
          highlight-current-row
          @row-click="tableRowClick"
          :header-cell-style="{ background: '#ECF4FF', color: '#666' }"
        >
          <template slot="tableButton">
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.status === 0"
                  @click="enableClick(scope.row, '启用')"
                  type="text"
                  size="small"
                  >启用</el-button
                >
                <el-button v-else @click="enableClick(scope.row, '停用')" type="text" size="small">停用</el-button>
                <el-button @click="modifyClick(scope.row)" type="text" size="small">修改</el-button>
              </template>
            </el-table-column>
          </template>
        </TableCommonView>
          <el-table-column type="index" label="序号" width="50"> </el-table-column>
          <el-table-column
            v-for="(item, i) in tableList.tableColumn"
            :key="i"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :min-width="item.min"
            show-overflow-tooltip
            :sortable="item.sortable"
          >
            <template slot-scope="scope">
              <div v-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div>
              <span
                v-else-if="item.isCommonClick && scope.row[item.prop]"
                class="sel-name"
                @click="selCommonClick(scope.row)"
                >{{ scope.row[item.prop] }}</span
              >
              <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status === 0" @click="enableClick(scope.row, '启用')" type="text" size="small"
                >启用</el-button
              >
              <el-button v-else @click="enableClick(scope.row, '停用')" type="text" size="small">停用</el-button>
              <el-button @click="modifyClick(scope.row)" type="text" size="small">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="btn-pager">
          <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
        </div>
@@ -215,6 +236,9 @@
          } else {
            this.supplierId = 0
          }
          this.$nextTick(() => {
            this.$refs.tableSupplier.setCurrentRow(this.tableList.tableInfomation[0])
          })
          this.getProductList()
        }
      })
@@ -274,7 +298,6 @@
    },
    // 修改供应商
    modifyClick(row) {
      console.log(row)
      this.editConfig.visible = true
      this.editConfig.title = "修改"
      this.editConfig.infomation = { ...row }
@@ -289,12 +312,14 @@
    addNewProductClick() {
      this.newProductConfig.visible = true
      this.newProductConfig.title = "添加"
      this.newProductConfig.infomation = { supplierId: this.supplierId }
    },
    // 修改产品
    editClick(row) {
      console.log(row)
      this.newProductConfig.visible = true
      // this.newProductConfig.title = "修改"
      this.newProductConfig.title = "修改"
      this.newProductConfig.infomation = { ...row }
    },
    // 删除
    delClick(row) {
@@ -352,6 +377,10 @@
        margin-right: 20px;
      }
    }
    .sel-name {
      color: $color-primary;
      cursor: pointer;
    }
    .btn-pager {
      display: flex;
      .page {

 vue.config.js

@@ -14,7 +14,7 @@
  devServer: {
    proxy: {
      "/api": {
        target: "http://192.168.20.118:8889", // http://192.168.20.119:8002 http://fai365.com:30150/
        target: "http://192.168.20.119:8004", // http://192.168.20.119:8004 http://fai365.com:30150/
        ws: true,
        changeOrigin: true
      }