采购订单公共组件修改和收货信息状态、收货状态必填、添加产品改为多选

yangfeng

2024-03-12 ee71c2a66079c43fbaf9b23d2d2f73427d4dd76c

采购订单公共组件修改和收货信息状态、收货状态必填、添加产品改为多选

 src/components/makepager/CommonFormTableView.vue

@@ -2,20 +2,18 @@
  <div class="page-view">
    <el-form ref="form" :model="tableList" :show-message="false" label-position="right">
      <el-table
        ref="fromTable"
        :data="tableList.tableData"
        style="width: 100%"
        :show-summary="showSummary.show"
        :summary-method="getSummaries"
        :span-method="arraySpanMethod"
        @row-click="rowClick"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :row-key="(row) => row.productId"
      >
        <el-table-column
          type="index"
          v-if="tableList.tableColumn && tableList.tableColumn.length > 0"
          label="编号"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column v-if="selectBox" type="selection" :reserve-selection="true" width="40" align="center">
        </el-table-column>
        <el-table-column v-if="tableList.isReturn" type="index" label="#" width="50" align="center"></el-table-column>
        <el-table-column
          v-for="(item, i) in tableList.tableColumn"
          :key="i"
@@ -32,147 +30,186 @@
          </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
                :disabled="item.disabled"
                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
                  :disabled="item.disabled"
                  v-model="scope.row[item.prop]"
                  :fetch-suggestions="querySearchAsync"
                  value-key="name"
                  style="width: calc(100% - 70px)"
            <template v-if="!detailEnter || isOperate">
              <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"
                  @select="
                  :disabled="!isOperate"
                  @change="
                    (val) => {
                      handleSelectClient(val, item.prop, scope.row)
                      commonInputChange(val, item.prop, scope.row, scope)
                    }
                  "
                ></el-autocomplete>
                <div
                  v-if="!item.disabled"
                  class="common-select-btn"
                  @click="selClientClick(scope.row, item.prop, scope)"
                >
                  <i class="el-icon-circle-plus-outline" title="选择"></i>
                </div>
                <div v-if="!item.disabled" class="common-select-btn" @click="clearupClient(scope.row, scope)">
                  <i class="el-icon-remove-outline" title="清除"></i>
                </div>
                <template v-if="!item.disabled">
                  <div class="common-select-btn" v-if="scope.$index != 0" @click="deleteClient(scope.row, scope)">
                    <i class="el-icon-delete" title="删除"></i>
                ></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"
                    :disabled="!isOperate"
                    size="mini"
                    @select="
                      (val) => {
                        handleSelectClient(val, item.prop, scope.row)
                      }
                    "
                  ></el-autocomplete>

                  <div
                    v-if="scope.row[item.prop] && scope.row[item.prop].length > 0 && isOperate"
                    class="common-select-btn"
                    @click="handleEditClient(scope, item.prop)"
                  >
                    <i class="el-icon-edit" title="编辑"></i>
                  </div>
                </template>
              </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
                :disabled="item.disabled"
                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: '输入不能为空' }]"
            >
              <!-- 采购管理 -->
              <template v-if="item.multiply">
                  <div
                    v-if="scope.row[item.prop] && scope.row[item.prop].length > 0 && isOperate"
                    class="common-select-btn"
                    @click="clearupClient(scope)"
                  >
                    <i class="el-icon-remove-outline" title="清除"></i>
                  </div>
                  <div class="common-select-btn" v-else @click="selClientClick(scope, item.prop)">
                    <i class="el-icon-circle-plus-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
                  :disabled="!isOperate"
                  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
                  :disabled="item.disabled"
                  :value="scope.row[showSummary.multiply[0]] * scope.row[showSummary.multiply[1]]"
                  v-model="scope.row[item.prop]"
                  placeholder=""
                  :min="0"
                  :precision="2"
                  :controls="false"
                  :disabled="!isOperate"
                  size="mini"
                  style="width: 100%; margin-right: 5px"
                  @input="
                  @change="
                    (val) => {
                      commonInputChange(val, item.prop, scope.row)
                      commonInputChange(val, item.prop, scope.row, scope)
                    }
                  "
                ></el-input-number>
              </template>
              <template v-else>
              </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
                  :disabled="item.disabled"
                  v-model="scope.row[item.prop]"
                  placeholder=""
                  :min="0"
                  :precision="2"
                  :disabled="!isOperate"
                  :controls="false"
                  size="mini"
                  style="width: 100%; margin-right: 5px"
                  @change="
                    (val) => {
                      commonInputChange(val, item.prop, scope.row)
                      commonInputChange(val, item.prop, scope.row, scope)
                    }
                  "
                ></el-input-number>
              </template>
              </el-form-item>
              <span v-else>
                <template>
                  {{ scope.row[item.prop] }}
                </template>
              </span>
            </template>
            <el-form-item
              v-else-if="item.inputNumber && selectBox"
              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"
                :disabled="!isOperate"
                size="mini"
                style="width: 100%; margin-right: 5px"
                @change="
                  (val) => {
                    commonInputChange(val, item.prop, scope.row, scope)
                  }
                "
              ></el-input-number>
            </el-form-item>
            <span v-else>{{ scope.row[item.prop] }}</span>
            <!-- </template> -->
            <!-- <span v-else>{{ scope.row[item.prop] }}</span> -->
            <span v-else style="text-align: right">{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="40" v-if="!detailEnter" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" :disabled="!isOperate" @click="deleteClick(scope)">删除</el-button>
          </template>
        </el-table-column>
        <slot name="tableButton" />
      </el-table>
    </el-form>
    <div v-if="!detailEnter" style="margin: 10px">
      <el-button :disabled="tableList.disabled" size="small" type="primary" @click="add">新增</el-button>
      <el-button :disabled="tableList.disabled" size="small" type="primary" @click="empty">清空</el-button>
      <el-button size="small" type="primary" :disabled="!isOperate" @click="add">新增</el-button>
      <!-- <el-button size="small" type="primary" disabled>导入明细</el-button> -->
      <el-button size="small" type="primary" :disabled="!isOperate" @click="empty">清空</el-button>
    </div>
    <!-- 产品名称 -->
    <div v-if="false && (showSummary.total || showSummary.refundable)" style="height: 42px; line-height: 42px">
      <el-row :gutter="10">
        <el-col v-if="showSummary.total" :span="3" :offset="21">
          <span style="font-weight: bold">合计</span>
          <span style="margin-left: 10px">{{ total }}</span>
        </el-col>
        <el-col v-if="showSummary.refundable" :span="3" :offset="21">
          <span style="font-weight: bold">应退款</span>
          <span style="margin-left: 10px">0.00</span>
        </el-col>
      </el-row>
    </div>
    <!-- 合同订单 -->
    <SelectCommonDialog
      v-if="editSelCommonConfig.editVisible"
      :edit-common-config="editSelCommonConfig"
      :sign="sign"
      :selectBoxList="tableList.tableData"
      :quotationNumber="quotationNumber"
      @selClient="selClient"
      @getSelectArray="getSelectArray"
    />
  </div>
</template>
@@ -192,13 +229,36 @@
      type: String,
      default: ""
    },
    selectBox: {
      type: Boolean,
      default: false
    },
    // 那个页面 用来判断计算方式
    pageName: {
      type: String,
      default: ""
    },
    // 列表新增是否多选
    addTypeIdMultiple: {
      type: Boolean,
      default: false
    },
    // 根据报价单查询产品
    quotationNumber: {
      type: [String, Number],
      default: ""
    },
    // 是否可以操作 添加等
    isOperate: {
      type: Boolean,
      default: true
    },
    productTableList: {
      type: Object,
      default: () => {
        return {
          tableProductList: [],
          disabled: false,
          tableData: [], // 接口返回数据
          isReturn: false,
          tableColumn: [
            // table表单
            { label: "", prop: "", min: 200, tooltip: true }
@@ -214,15 +274,9 @@
          total: false,
          refundable: false,
          sumProp: [],
          multiply: [],
          titleProp: ["#", "产品名称"],
          mergeNumber: 1
        }
      }
    },
    recalculateShow: {
      type: [Boolean],
      defalut: true
    }
  },
  data() {
@@ -232,27 +286,31 @@
      tableList: [],
      editSelCommonConfig: {
        editVisible: false,
        isSelectBox: false,
        title: "",
        infomation: {}
      },
      productIndex: 0,
      tableProductLists: []
      productIndex: 0
    }
  },
  created() {
    this.getProductList()
    this.tableList = this.productTableList
    if (!this.selectBox) {
      this.getProductList()
    }
    this.getTableInfo()
  },
  computed: {},
  watch: {
    productTableList() {
      this.tableList = this.productTableList
    productTableList: {
      handler() {
        this.getTableInfo()
      },
      immediate: true
    }
  },
  computed: {},
  methods: {
    // 选择行
    rowClick(row) {
      this.$emit("rowClick", row)
    getTableInfo() {
      this.tableList = this.productTableList
    },
    // 产品名称
    async getProductList() {
@@ -272,6 +330,7 @@
    handleReserve(row) {
      return row._id ? row._id : row.id
    },
    // 多选
    handleSelectionChange(val) {
      this.$emit("getSelectArray", val)
    },
@@ -301,9 +360,13 @@
          sums[index] = "小计:"
          return
        }
        const title = this.showSummary.titleProp
        const title = ["#", "产品名称", "产品编号", "单位", "销售单价", "成本单价"]
        // 去除某些不需要计算的数据
        if (title.includes(column.label)) {
          sums[index] = ""
          return
        }
        if (this.pageName == "quotation" && column.label == "毛利") {
          sums[index] = ""
          return
        }
@@ -330,7 +393,6 @@
      })
      return sums
    },

    // 数字换行为金额显示格式
    number_format(number, decimals, dec_point, thousands_sep) {
      decimals = 2 //这里默认设置保留两位小数，也可以注释这句采用传入的参数
@@ -361,18 +423,61 @@
    },
    // 新增
    add() {
      this.$emit("addProductClick")
      if (this.addTypeIdMultiple) {
        this.productIndex = this.tableList.tableData.length
        this.editSelCommonConfig.title = "产品名称"
        this.editSelCommonConfig.isSelectBox = true
        this.editSelCommonConfig.editVisible = true
      } else {
        this.$emit("addProductClick")
      }
    },
    commonInputChange(val, prop, row) {
      this.$emit("inputContent", val, prop, row)
    commonInputChange(val, prop, row, scope) {
      if (prop === "amount") {
        this.tableList.tableData.map((ite) => {
          if (ite.name === row.name) {
            ite.total = row.amount * row.purchasePrice
          }
        })
      }
      if (this.pageName == "quotation" && prop == "cost" && scope.row.cost) {
        let value = scope.row.cost
        let reg2 = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
        if (!reg2.test(value) || value == 0) {
          this.$message.error("成本单价需要填写大于0的2位小数！")
          return true
        }
        this.$forceUpdate()
      }
      if (this.pageName == "quotation") {
        if (prop == "purchasePrice" || prop == "cost") {
          if (scope.row.purchasePrice && scope.row.cost) {
            let profit = Number(scope.row.purchasePrice) - Number(scope.row.cost)
            scope.row.profit = profit + ""
            let margin = (
              ((Number(scope.row.purchasePrice) - Number(scope.row.cost)) * 100) /
              Number(scope.row.cost)
            ).toFixed(2)
            scope.row.margin = margin + ""
          }
        }
      }
      this.$emit("inputContent", val, prop, row, scope)
    },
    // 清空
    empty() {
      this.$emit("emptyProductClick")
    },
    // 删除
    deleteClick(scope) {
      this.tableList.tableData.splice(scope.$index, 1)
      this.$forceUpdate()
      this.$message.success("删除成功！")
      this.$emit("deleteClick", scope)
    },
    // 选择产品名称相关方法
    querySearchAsync(queryString, cb) {
      var restaurants = this.tableProductLists
      var restaurants = this.productList
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      cb(results)
    },
@@ -382,98 +487,82 @@
      }
    },
    handleSelectClient(item, prop, row) {
      // this.clientId = item.id
      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.purchasePrice = item.purchasePrice
          ite.price = item.purchasePrice
          ite.total = item.amount ? item.amount * item.purchasePrice : 1 * 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)
      }
      this.$emit("handleProduct", item, row)
    },
    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, scope) {
      console.log(row, prop)
    // 新增
    selClientClick(scope, prop) {
      console.log(scope, prop)
      this.productIndex = scope.$index
      this.editSelCommonConfig.title = "产品名称"
      this.editSelCommonConfig.isSelectBox = true
      this.editSelCommonConfig.editVisible = true
    },
    // 编辑
    handleEditClient(scope, prop) {
      console.log(scope, prop)
      this.productIndex = scope.$index
      this.editSelCommonConfig.title = "产品名称"
      this.editSelCommonConfig.isSelectBox = false
      this.editSelCommonConfig.editVisible = true
    },
    selClient(item) {
      console.log(item)
      console.log(this.tableList.tableData)
      if (this.detailEnter) {
        this.tableList.tableData.map((ite) => {
          ite.id
          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
        })
        this.setEditName(item, this.tableList.tableData[0].id)
      } else {
      let list = this.tableList.tableData.map((item) => item.number)
      if (list.findIndex((v) => v == item.number) == -1) {
        // this.editConfig.infomation.client_name = row.name
        this.tableList.tableData.map((ite, index) => {
          if (index === this.productIndex) {
            ite.name = item.name
            ite.productId = item.id
            ite.productIndex = this.productIndex + 1
            ite.amount = item.amount || 1
            ite.number = item.number
            ite.purchasePrice = item.purchasePrice
            ite.price = item.purchasePrice
            ite.total = item.amount ? item.amount * item.purchasePrice : 1 * item.purchasePrice
            ite.unit = item.unit
            ite.deliveryTime = item.deliveryTime
            ite.shippingDuration = item.shippingDuration
            this.$set(this.tableList.tableData, index, ite)
            this.$forceUpdate()
            // this.$set(this.tableList.tableData, index, ite)
            // this.$forceUpdate()
          }
        })
        console.log(this.tableList.tableData, "=====chanp")
      } else {
        this.$message.error("不能选择重复的产品， 请重新选择")
      }
    },
    getSelectArray(val) {
      let list = val.map((item) => {
        let productId = item.id
        this.$delete(item, "id")
        return {
          ...item,
          productId: productId,
          amount: 1,
          price: item.purchasePrice,
          total: 1 * item.purchasePrice
        }
      })
      this.$emit("getSelectArray", list, this.productIndex)
    },
    // 清除已选择用户
    clearupClient(row, scope) {
    clearupClient(scope) {
      this.productIndex = scope.$index
      this.tableList.tableData.map((ite, index) => {
        console.log(scope.$index)
        if (scope.$index && scope.$index >= 0) {
          if (index === this.productIndex) {
            ite.name = ""
            ite.amount = 1
            ite.number = ""
            ite.purchasePrice = 0
            ite.unit = ""
            ite.deliveryTime = 0
            ite.shippingDuration = 0
          }
        } else {
        if (index === this.productIndex) {
          ite.productId = ""
          ite.name = ""
          ite.amount = 1
          ite.number = ""
@@ -484,14 +573,18 @@
        }
      })
      this.$emit("clearupProduct", this.tableList.tableData)
    },
    deleteClient(row, scope) {
      if (this.tableList.tableData.length == 1) {
        this.$message.error("至少保留一条，不能刪除了！")
        return true
      }
      this.tableList.tableData.splice(scope.$index, 1)
    }
    // 多选设置已选中
    // toggleSelection(rows) {
    //   console.log("88888888888888888888888888888888888888888")
    //   console.log(rows)
    //   if (rows) {
    //     rows.forEach((row) => {
    //       this.$refs.fromTable.toggleRowSelection(row, true)
    //       console.log(row)
    //     })
    //   }
    // }
  }
}
</script>
@@ -499,14 +592,10 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.page-view {
  min-width: 100px;

  .el-form-item {
    margin-bottom: 0;

    .custom-name {
      display: flex;

      .common-select-btn {
        margin-left: 5px;
        font-size: 18px;
@@ -515,29 +604,25 @@
    }
  }
}

::v-deep {
  .el-form-item__label {
    display: none;
  }

  .el-table__footer-wrapper tbody td.el-table__cell {
    background-color: #fff;
    // text-align: right;
    font-weight: bold;
  }

  .el-input--suffix .el-input__inner {
    padding-right: 0px;
  }

  .el-table .cell,
  .el-table th.el-table__cell > .cell {
    padding: 0 5px;
  }

  .el-input__inner {
    text-align: left;
    // text-align: left;
    text-align: center !important;
  }
}
</style>

 src/components/makepager/TableCommonView.vue

@@ -1,109 +1,140 @@
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <div class="table-view">
  <div class="table-view" v-loading="loading">
    <el-table
      ref="table"
      border
      :data="tableList.tableInfomation"
      tooltip-effect="dark"
      style="width: 100%"
      :height="'calc(100% - 0px)'"
      :max-height="tableList.maxHeight"
      style="width: 100%"
      :lazy="tableList.lazy"
      size="mini"
      :show-summary="showSummary.show"
      :summary-method="getSummaries"
      :span-method="arraySpanMethod"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#f1f3f8', color: '#000009', 'font-size': '14px' }"
      :highlight-current-row="tableList.highlight"
      :row-class-name="tableRowClassName"
      :header-cell-style="{ background: '#f1f3f8', color: '#000009', 'font-size': '12px', 'font-family': 'PingFangSC' }"
      size="mini"
      @row-click="tableRowClick"
      :row-key="tableList.key"
      :default-expand-all="tableList.isDefaultExpandAll"
      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
      :row-class-name="tableRowClassName"
    >
      <el-table-column align="center" v-if="tableList.selectBox" type="selection" width="40"> </el-table-column>
      <el-table-column align="center" v-if="tableList.selectIndex" type="index" label="序号" width="50">
      </el-table-column>
      <template v-for="(item, i) in tableList.tableColumn">
        <el-table-column
          align="center"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :min-width="item.min"
          show-overflow-tooltip
          :sortable="item.sortable"
          v-if="item.isShowColumn"
        >
          <template slot-scope="scope">
            <span v-if="item.price">{{ "￥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
            <div v-else-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div>
            <span v-else-if="item.isTime">{{
              dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) === "1900-01-01 00:06:26"
                ? "--"
                : dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop])
      <el-table-column v-if="selectBox" type="selection" width="40" :selectable="selectable"> </el-table-column>
      <el-table-column v-if="tableList.selectIndex" 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"
        v-if="item.isShowColumn"
      >
        <template slot-scope="scope">
          <span v-if="item.price">{{ "￥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
          <div v-else-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div>
          <span v-else-if="item.isTime">{{
            dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) === "1900-01-01 00:06:26"
              ? "--"
              : dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop])
          }}</span>
          <span v-else-if="item.isClick && scope.row[item.prop]" class="sel-name" @click="selNameClick(scope.row)">{{
            scope.row[item.prop]
          }}</span>
          <span v-else-if="item.isFirst">{{ scope.row[item.prop] ? "是" : "否" }}</span>
          <span
            v-else-if="item.isSalesLeadClick && scope.row[item.prop]"
            class="sel-name"
            @click="selSalesLeadClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span
            v-else-if="item.isClientClick && scope.row[item.prop]"
            class="sel-name"
            @click="selClientClick(scope.row)"
            >{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span
          >
          <span
            v-else-if="item.isContactClick && scope.row[item.prop]"
            class="sel-name"
            @click="selContactsClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span
            v-else-if="item.isMasterClick && scope.row[item.prop]"
            class="sel-name"
            @click="selMasterClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span
            v-else-if="item.isServiceOrder && scope.row[item.prop]"
            class="sel-name"
            @click="selServiceOrderClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span
            v-else-if="item.isCommonClick && scope.row[item.prop]"
            class="sel-name"
            @click="selCommonClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <div v-else-if="item.isProductName" class="product-view">
            <ul v-if="scope.row.products && scope.row.products.length > 0">
              <li v-for="(item, index) in scope.row.products" :key="index">
                <div class="name-view">
                  {{ item.name }}
                </div>
              </li>
            </ul>
            <div v-else class="no-product">{{ "--" }}</div>
          </div>
          <div v-else-if="item.isProductAmount" class="product-view">
            <ul v-if="scope.row.products && scope.row.products.length > 0">
              <li v-for="(item, index) in scope.row.products" :key="index">
                <div class="name-view">
                  {{ item.amount }}
                </div>
              </li>
            </ul>
            <div v-else class="no-product">{{ "--" }}</div>
          </div>
          <div v-else-if="item.isProductPrice" class="product-view">
            <ul v-if="scope.row.products && scope.row.products.length > 0">
              <li v-for="(item, index) in scope.row.products" :key="index">
                <div class="name-view">
                  {{ item.price }}
                </div>
              </li>
            </ul>
            <div v-else class="no-product">{{ "--" }}</div>
          </div>
          <div v-else-if="item.isProductTotal" class="product-view">
            <ul v-if="scope.row.products && scope.row.products.length > 0">
              <li v-for="(item, index) in scope.row.products" :key="index">
                <div class="name-view">
                  {{ item.total }}
                </div>
              </li>
            </ul>
            <div v-else class="no-product">{{ "--" }}</div>
          </div>
          <!-- 调用方法显示文字 -->
          <div v-else-if="item.isCallMethod">
            <span :class="item.isClass ? item.getClassName(scope.row[item.prop], scope.row) : ''">{{
              item.getCallMethod(scope.row[item.prop], scope.row)
            }}</span>
            <span
              v-else-if="item.isClick && scope.row[item.prop]"
              class="sel-name"
              @click="selCommonClick(scope.row)"
              >{{ scope.row[item.prop] }}</span
            >
            <span v-else-if="item.isFirst">{{ scope.row[item.prop] ? "是" : "否" }}</span>
            <span
              v-else-if="item.isCommonClick && scope.row[item.prop]"
              class="sel-name"
              @click="selCommonClick(scope.row)"
              >{{ scope.row[item.prop] }}</span
            >
            <div v-else-if="item.isProductName" class="product-view">
              <ul v-if="scope.row.products && scope.row.products.length > 0">
                <li v-for="(item, index) in scope.row.products" :key="index">
                  <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
                    {{ item.name }}
                  </div>
                </li>
              </ul>
              <div v-else class="no-product">{{ "--" }}</div>
            </div>
            <div v-else-if="item.isProductAmount" class="product-view">
              <ul v-if="scope.row.products && scope.row.products.length > 0">
                <li v-for="(item, index) in scope.row.products" :key="index">
                  <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
                    {{ item.amount }}
                  </div>
                </li>
              </ul>
              <div v-else class="no-product">{{ "--" }}</div>
            </div>
            <div v-else-if="item.isProductPrice" class="product-view">
              <ul v-if="scope.row.products && scope.row.products.length > 0">
                <li v-for="(item, index) in scope.row.products" :key="index">
                  <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
                    {{ item.price }}
                  </div>
                </li>
              </ul>
              <div v-else class="no-product">{{ "--" }}</div>
            </div>
            <div v-else-if="item.isProductTotal" class="product-view">
              <ul v-if="scope.row.products && scope.row.products.length > 0">
                <li v-for="(item, index) in scope.row.products" :key="index">
                  <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
                    {{ item.total }}
                  </div>
                </li>
              </ul>
              <div v-else class="no-product">{{ "--" }}</div>
            </div>
            <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
          </template>
        </el-table-column>
      </template>
          </div>
          <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
        </template>
      </el-table-column>
      <slot name="tableButton" />
      <div slot="empty">
        <el-empty description="暂无数据"></el-empty>
      </div>
    </el-table>

    <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
    <div class="styleBtn">
      <i @click="checkCol()" class="label">...</i>
@@ -118,16 +149,18 @@
export default {
  name: "TableCommonView",
  props: {
    selectBox: {
      type: Boolean,
      default: false
    },
    tableList: {
      type: Object,
      default: () => {
        return {
          selectBox: false,
          selectIndex: false,
          selectIndex: true,
          tableInfomation: [], // 接口返回数据
          showcol: [],
          allcol: [],
          highlight: false,
          tableColumn: [
            // table表单
            { label: "", prop: "", min: 200, tooltip: true }
@@ -141,8 +174,7 @@
        return {
          show: false,
          sumProp: [],
          mergeNumber: 1,
          totalName: "本页总计"
          mergeNumber: 1
        }
      }
    },
@@ -152,14 +184,24 @@
      default: () => {
        return {}
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    selectBoxList: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      iscolopen: false,
      showcol: []
    }
  },
  computed: {},
  watch: {
    "tableList.showcol": {
      handler(newVal) {
@@ -168,7 +210,6 @@
      immediate: true
    }
  },
  computed: {},
  methods: {
    onMaskClick() {
      this.iscolopen = false
@@ -195,10 +236,16 @@
              .querySelector(".el-table__footer")
            var cell = current.rows[0].cells
            for (let i = 0; i < this.showSummary.mergeNumber; i++) {
              cell[i].style.display = "none"
              cell[i] && cell[i].style && (cell[i].style.display = "none")
            }
            cell[this.showSummary.mergeNumber].classList.remove("is-left")
            cell[this.showSummary.mergeNumber].colSpan = this.showSummary.mergeNumber.toString()
            if (cell[this.showSummary.mergeNumber]) {
              if (cell[this.showSummary.mergeNumber].classList) {
                cell[this.showSummary.mergeNumber].classList.remove("is-left")
              }
              if (cell[this.showSummary.mergeNumber].colSpan) {
                cell[this.showSummary.mergeNumber].colSpan = this.showSummary.mergeNumber.toString()
              }
            }
          }
        })
      }
@@ -210,7 +257,7 @@
        const sums = []
        columns.forEach((column, index) => {
          if (index === this.showSummary.mergeNumber) {
            sums[index] = this.showSummary.totalName
            sums[index] = "本页总计"
          }
          const values = data.map((item) => Number(item[column.property]))
          if (this.showSummary.sumProp.includes(column.property)) {
@@ -309,7 +356,31 @@
      }
      return fmt
    },
    // 公共详情
    // 新建编辑选择弹窗
    selNameClick(row) {
      this.$emit("selCommonClick", row)
    },
    // 销售线索
    selSalesLeadClick(row) {
      this.$emit("selSalesLeadClick", row)
    },
    // 客户名称
    selClientClick(row) {
      this.$emit("selClientClick", row)
    },
    // 联系人姓名
    selContactsClick(row) {
      this.$emit("selContactsClick", row)
    },
    // 销售总单
    selMasterClick(row) {
      this.$emit("selMasterClick", row)
    },
    // 客户服务单
    selServiceOrderClick(row) {
      this.$emit("selServiceOrderClick", row)
    },
    // 公共（销售机会、报价单、销售总单、销售子单。。。）
    selCommonClick(row) {
      this.$emit("selCommonClick", row)
    },
@@ -325,13 +396,15 @@
        }
      }
      this.$emit("tableRowClassName", row)
    },
    selectable(row) {
      let list = this.selectBoxList.map((item) => item.number)
      if (list.findIndex((v) => v == row.number) == -1) {
        return true
      } else {
        return false
      }
    }
  },
  //解决表格抖动问题
  beforeUpdate() {
    this.$nextTick(() => {
      this.$refs["table"].doLayout()
    })
  }
}
</script>
@@ -339,9 +412,6 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.table-view {
  // margin-top: 20px;
  // margin-right: 10px;
  // margin-bottom: 40px;
  position: relative;
  height: 100%;
  .blue {
@@ -360,19 +430,22 @@
    margin-left: -10px;
    margin-right: -11px;
    li {
      height: 57px;
      line-height: 57px;
      height: 22px;
      line-height: 22px;
      .name-view {
        padding-left: 10px;
        border-bottom: 1px solid #ebeef5;
      }
      .no-bottom {
        border-bottom: 0px;
        border-bottom: 0;
      }
    }
    li:last-child .name-view {
      border-bottom: none;
    }
    .no-product {
      height: 57px;
      line-height: 57px;
      height: 22px;
      line-height: 22px;
    }
  }
}
@@ -406,9 +479,12 @@
  .el-table .cell .el-button--text.el-button--small {
    padding: 4px 0;
  }
  .el-table .onSelect {
    background: #ebf2ff;
  }
}

::v-deep .el-table .el-table__cell {
  padding: 6px 0 !important;
  height: 35px;
  text-align: center;
}

.overSpread1 {
@@ -428,8 +504,8 @@
  // line-height: 26px;
  // background: #06c062;
  top: 0;
  right: 2px;
  z-index: 9999;
  right: -6px;
  z-index: 11;
  .label {
    position: absolute;
    top: 6px;
@@ -441,7 +517,7 @@
  }
  .checkbox-group {
    width: 160px;
    height: 330px;
    height: 300px;
    overflow: auto;
    display: flex;
    flex-direction: column;

 src/views/other/commonDialog/SelectCommonDialog.vue

@@ -28,12 +28,15 @@
            <el-button type="primary" size="mini" disabled>快速创建</el-button> -->
          </div>
        </div>
        <TableCommonView 
        <TableCommonView
          class="bg-list"
          ref="tableListRef"
          :table-list="tableList"
          :select-box="false" 
          :select-box="editCommonConfig.isSelectBox"
          :selectBoxList="selectBoxList"
          @selCommonClick="selNameClick"
          @selTableCol="selTableCol"
          @getSelectArray="getSelectArray"
        >
        </TableCommonView>
        <div slot="footer" class="dialog-footer">
@@ -42,6 +45,10 @@
            <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" v-if="editCommonConfig.isSelectBox">
        <el-button type="primary" size="small" @click="saveClick()">确定</el-button>
        <el-button size="small" @click="editConfig.editVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
@@ -60,7 +67,11 @@
      default: () => {
        return {
          editVisible: false,
          isSelectBox: false,
          title: "",
          clientId: 0,
          isRequest: true,
          client_name: "",
          tableInfomation: []
        }
      }
@@ -68,6 +79,10 @@
    sign: {
      type: String,
      default: ""
    },
    selectBoxList: {
      type: Array,
      default: () => []
    }
  },
  components: {},
@@ -87,13 +102,18 @@
      searchSel: {},
      keyword: "",
      keywordType: "",
      showProductCol: ["产品名称", "产品编号"],
      showProductCol: ["产品名称", "产品编号", "销售单价", "单位", "产品规格", "型号"],
      tableProductColumn: [
        { label: "产品名称", prop: "name", isClick: true },
        { label: "产品编号", prop: "number" }
        { label: "产品编号", prop: "number" },
        { label: "销售单价", prop: "purchasePrice" },
        { label: "单位", prop: "unit" },
        { label: "产品规格", prop: "specifications" },
        { label: "型号", prop: "modelNumber" }
      ],
      showCol: [],
      tableColumn: []
      tableColumn: [],
      selectArray: []
    }
  },
  created() {
@@ -133,17 +153,17 @@
      }
    },
    selTableCol(val) {
      this.showcol = val;
      this.tableList.tableColumn = this.setColumnVisible(val);
      this.showcol = val
      this.tableList.tableColumn = this.setColumnVisible(val)
    },
    // setColumnVisible(showCol){
    //   return  this.tableColumn.map(ele=>{
    //     return {
    //       ...ele,
    //       isShowColumn:showCol.includes(ele.label)
    //     }
    //   })
    // },
    // 列表多选
    getSelectArray(val) {
      this.selectArray = val
    },
    saveClick() {
      this.$emit("getSelectArray", this.selectArray)
      this.editConfig.editVisible = false
    },
    // 请求数据
    async getData() {
      this.loading = true
@@ -155,7 +175,7 @@
    async getProductList() {
      let fn = this.sign == "purchase" ? getProductList : getProductListFromGrpc
      await fn({
        keyword:this.keyword,
        keyword: this.keyword,
        page: this.pagerOptions.currPage,
        pageSize: this.pagerOptions.pageSize
      }).then((res) => {
@@ -186,7 +206,7 @@
    },
    // 搜索
    searchClick(content) {
      console.log( content)
      console.log(content)
      this.keyword = content
      this.getData()
    },

 src/views/purchaseManage/purchase/components/AddPurchase.vue

@@ -231,11 +231,13 @@
              :detailEnter="editCommonConfig.detailEnter"
              :show-summary="showSummary"
              :recalculateShow="false"
              :addTypeIdMultiple="true"
              :product-table-list="productTableList"
              sign="purchase"
              @inputContent="inputContent"
              @getSummaries="getSummaries"
              @addProductClick="addProductClick"
              @getSelectArray="getSelectArray"
              @emptyProductClick="emptyProductClick"
              @clearupProduct="clearupProduct"
              @rowClick="rowClick"
@@ -393,7 +395,8 @@
          },
          { validator: this.validatorNumThree, trigger: "change" }
        ],
        number: [{ required: true, validator: this.validateCheckCode, trigger: ["change", "blur"] }]
        number: [{ required: true, validator: this.validateCheckCode, trigger: ["change", "blur"] }],
        warehouse: [{ required: true, message: "请选择", trigger: "change" }]
      },
      productTableList: {},
      showSummary: {
@@ -616,6 +619,8 @@
                  if (res.code === 200) {
                    this.$message.success("创建成功")
                    this.$parent.getData()
                  } else {
                    this.$message.error(res.msg)
                  }
                })
              }
@@ -788,7 +793,7 @@
            purchaseId: 0,
            productId: Number(this.productId),
            productIndex: this.productIndex,
            amount: 0,
            amount: 1,
            name: "",
            number: "",
            price: 0,
@@ -813,6 +818,7 @@
        supplierId: undefined,
        tableData: this.tableData,
        disabled: this.editConfig.isDisabled,
        isReturn: true,
        tableColumn: [
          {
            label: "产品名称",
@@ -828,7 +834,7 @@
          { label: "数量", prop: "amount", inputNumber: true, disabled: this.editConfig.isDisabled },
          {
            label: "采购单价",
            prop: "price",
            prop: "purchasePrice",
            inputFloat: true,
            isRequird: true,
            disabled: this.editConfig.isDisabled
@@ -841,12 +847,10 @@
    },
    // 产品列表输入
    inputContent(val, prop, row) {
      // this.productId = row.productId;
      this.productIndex = row.productIndex
      let num = 0
      this.tableData.map((item) => {
        num += item.amount
        if (item.productIndex === row.productIndex) {
        if (item.number === row.number) {
          item[prop] = val
        }
      })
@@ -880,18 +884,35 @@
    },
    // 产品新增
    addProductClick() {
      this.productIndex++
      this.tableData.push({
        productIndex: this.productIndex,
        productId: "",
        id: 0,
        amount: 0,
        desc: "",
        name: "",
        number: "",
        price: 0,
        total: 0
      })
      // this.productIndex++
      // this.tableData.push({
      //   productIndex: this.productIndex,
      //   productId: "",
      //   id: 0,
      //   amount: 0,
      //   desc: "",
      //   name: "",
      //   number: "",
      //   price: 0,
      //   total: 0
      // })
      // this.showSummary.show = true
    },
    // 新增方式修改
    getSelectArray(val, index) {
      console.log(val, "ddd99999")
      if (this.tableData.length == 1 && this.tableData[0].number.length == 0) {
        this.tableData = []
      }
      if (index < this.tableData.length) {
        this.tableData.splice(index, 1)
        val.map((item, ind) => {
          this.tableData.splice(index + ind, 0, item)
        })
      } else {
        this.tableData = this.tableData.concat(val)
      }
      this.productTableList.tableData = this.tableData
      this.showSummary.show = true
    },
    //  产品清空

 src/views/purchaseManage/purchase/index.vue

@@ -142,27 +142,27 @@
  data() {
    // 产品信息
    const productColumn = [
      { label: "产品编号", prop: "productId", default: true },
      { label: "产品名称", prop: "productName" },
      { label: "产品编号", prop: "number", default: true },
      { label: "产品名称", prop: "name" },
      { label: "规格", prop: "specifications" },
      { label: "型号", prop: "modelNumber" },
      { label: "采购数量", prop: "amount" },
      { label: "已发货数量", prop: "sendAmount" },
      { label: "已入库数量", prop: "overAmount" },
      { label: "单位", prop: "unit" },
      { label: "采购单价", prop: "price", price: true },
      { label: "采购单价", prop: "purchasePrice", price: true },
      { label: "价税合计", prop: "total", price: true }
    ]
    // 收货信息
    const recriveColumn = [
      { label: "入库单号", prop: "number", default: true },
      { label: "入库单号", prop: "operationNumber", default: true },
      { label: "收货仓库", prop: "warehouseName" },
      { label: "产品名称", prop: "productName" },
      { label: "产品编码", prop: "productId" },
      { label: "产品名称", prop: "name" },
      { label: "产品编码", prop: "number" },
      { label: "数量", prop: "amount" },
      { label: "入库时间", prop: "overTime" },
      { label: "收货人", prop: "principal" },
      { label: "状态", prop: "status" }
      { label: "状态", prop: "status", isCallMethod: true, getCallMethod: this.getpurchaseStatus }
    ]
    return {
      purchaseStatusList: getDataByType("purchaseStatus"),

 src/views/supplierManage/supplier/AddNewProduct.vue

@@ -15,10 +15,13 @@
        <div class="basic-info-view">
          <CommonFormTableView
            ref="productTable"
            :addTypeIdMultiple="true"
            :product-table-list="productTableList"
            :detail-enter="detailEnter"
            :isOperate="isOperate"
            @inputContent="inputContent"
            @addProductClick="addProductClick"
            @getSelectArray="getSelectArray"
            @emptyProductClick="emptyProductClick"
            @clearupProduct="clearupProduct"
            @selCommonName="selCommonName"
@@ -63,6 +66,7 @@
      isNoProduct: true,
      supplierId: this.addCommonConfig.infomation.supplierId,
      detailEnter: true,
      isOperate: true,
      deliveryTime: this.addCommonConfig.infomation.deliveryTime, // 供货时长
      shippingDuration: this.addCommonConfig.infomation.shippingDuration, // 物流时长
      purchasePrice: this.addCommonConfig.infomation.purchasePrice // 采购价格
@@ -144,8 +148,8 @@
      }
      return params
    },
    handleProduct(item,row){
      this.editConfig.infomation.id=row.id
    handleProduct(item, row) {
      this.editConfig.infomation.id = row.id
    },
    setTableForm() {
      if (this.editConfig.title === "添加") {
@@ -160,15 +164,16 @@
            number: "",
            price: 0,
            total: 0,
            supplierId:this.supplierId
            supplierId: this.supplierId
          }
        ]
      } else {
        this.tableData = [{ ...this.editConfig.infomation}]
        this.tableData = [{ ...this.editConfig.infomation }]
        this.detailEnter = true
      }
      this.productTableList = {
        tableData: this.tableData,
        isReturn: true,
        tableColumn: [
          { label: "产品名称", prop: "name", productName: true, isRequird: true, width: 250 },
          { label: "产品编码", prop: "number" },
@@ -182,36 +187,46 @@
    },
    // 产品列表输入
    inputContent(val, prop, row) {
      this.productId = row.productId
      this.deliveryTime = row.deliveryTime
      this.shippingDuration = row.shippingDuration
      this.purchasePrice = row.purchasePrice
      this.tableData.map((item) => {
        if (item.productId === row.productId) {
        if (item.number === row.number) {
          item[prop] = val
          item.supplierId =Number(this.supplierId)
          item.deliveryTime = this.deliveryTime
          item.shippingDuration = this.shippingDuration
          item.purchasePrice = this.purchasePrice
          item.supplierId = Number(this.supplierId)
        }
      })
    },
    // 产品新增
    addProductClick() {
      this.productId++
      this.tableData.push({
        productId: this.productId,
        id: 0,
        amount: 0,
        desc: "",
        name: "",
        number: "",
        purchasePrice: 0,
        total: 0,
        deliveryTime: 0,
        shippingDuration: 0,
        supplierId: this.supplierId
      })
      // this.productId++
      // this.tableData.push({
      //   productId: this.productId,
      //   id: 0,
      //   amount: 0,
      //   desc: "",
      //   name: "",
      //   number: "",
      //   purchasePrice: 0,
      //   total: 0,
      //   deliveryTime: 0,
      //   shippingDuration: 0,
      //   supplierId: this.supplierId
      // })
    },
    // 新增方式修改
    getSelectArray(val, index) {
      console.log(val, "ddd99999")
      if (this.tableData.length == 1 && this.tableData[0].number.length == 0) {
        this.tableData = []
      }
      if (index < this.tableData.length) {
        this.tableData.splice(index, 1)
        val.map((item, ind) => {
          this.tableData.splice(index + ind, 0, item)
        })
      } else {
        this.tableData = this.tableData.concat(val)
      }
      this.productTableList.tableData = this.tableData
      // this.showSummary.show = true
    },
    //  产品清空
    emptyProductClick() {