charles
2024-08-06 5ecb7958c96d3f0b6d47b79aff7eb306c2cf690f
src/components/makepager/CommonFormTableView.vue
@@ -16,8 +16,10 @@
        :header-cell-style="{ background: '#f1f3f8', color: '#000009' }"
        :row-class-name="tableRowClassName"
        @row-click="tableRowClick"
                    @selection-change="selectProductArray"
      >
        <el-table-column v-if="tableList.selectBox" type="selection" width="40" align="center"> </el-table-column>
                <el-table-column v-if="tableList.selectBox" type="selection" width="40"
                                 align="center"></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"
@@ -31,7 +33,27 @@
          <!-- 表头样式 -->
          <template slot="header">
            <span v-if="item.isRequird" style="color: #f56c6c">*</span>
            <span>{{ item.label }}</span>
                        <span>
              {{ item.label }}
              <span></span>
              <el-popover
                      placement="top"
                      width="240"
                      trigger="click"
                      v-if="item.isScanCode"
                      @show="startScanCode"
                      :popper-append-to-body="false"
              >
                <el-input placeholder="请输入条码"
                          v-model="scanCode" ref="input"
                          @keyup.enter.native="handlerEnter"
                />
                <span class="scan-code" slot="reference">
                  <img src="@/assets/saoma.png" width="20px">
                  <span style="color:lawngreen">扫码</span>
                </span>
              </el-popover>
            </span>
          </template>
          <!-- column样式 -->
          <template slot-scope="scope">
@@ -120,7 +142,8 @@
                :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
              >
                <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span>
                <el-date-picker v-else v-model="scope.row[item.prop]" type="date" size="mini" style="width: 100%">
                                <el-date-picker v-else v-model="scope.row[item.prop]" type="date" size="mini"
                                                style="width: 100%">
                </el-date-picker>
              </el-form-item>
              <el-form-item
@@ -140,8 +163,7 @@
                    @change="
                      (val) => {
                        commonInputChange(val, item.prop, scope.row)
                      }
                    "
                      }"
                  ></el-input-number>
                </div>
              </el-form-item>
@@ -169,7 +191,8 @@
                  ></el-input-number>
                </div>
              </el-form-item>
              <el-form-item v-else-if="item.select" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
                            <el-form-item v-else-if="item.select" label=" "
                                          :prop="'tableData.' + scope.$index + '.' + item.prop">
                <div class="custom-name">
                  <el-select
                    v-model="scope.row[item.prop]"
@@ -178,13 +201,15 @@
                    style="width: 63%"
                    @change="selCommonClick"
                  >
                    <el-option v-for="(item, index) in selOptions" :key="index" :label="item.name" :value="item">
                                        <el-option v-for="(item, index) in selOptions" :key="index" :label="item.name"
                                                   :value="item">
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
              <!-- 位置 -->
              <el-form-item v-else-if="item.location" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
                            <el-form-item v-else-if="item.location" label=" "
                                          :prop="'tableData.' + scope.$index + '.' + item.prop">
                <div class="custom-name">
                  <span v-if="scope.row.isEdit || scope.row.editable">{{
                    scope.row[item.prop]?.label ?? scope.row[item.prop]
@@ -198,7 +223,7 @@
                    style="width: 80%"
                    @change="
                      (val) => {
                        selLocationClick(val, item.prop,scope.row)
                        selLocationClick(val, item.prop,scope.row,1)
                      }
                    "
                  >
@@ -213,7 +238,8 @@
                </div>
              </el-form-item>
              <!-- 产品到达位置 -->
              <el-form-item v-else-if="item.toLocation" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
                            <el-form-item v-else-if="item.toLocation" label=" "
                                          :prop="'tableData.' + scope.$index + '.' + item.prop">
                <div class="custom-name">
                  <span v-if="scope.row.isEdit || scope.row.editable">{{
                    scope.row[item.prop]?.label ?? scope.row[item.prop]
@@ -227,7 +253,7 @@
                    style="width: 80%"
                    @change="
                      (val) => {
                        selLocationClick(val, item.prop, scope.row)
                        selLocationClick(val, item.prop, scope.row,scope.$index)
                      }
                    "
                  >
@@ -235,7 +261,7 @@
                      v-for="(item, index) in selToLocationOptions"
                      :key="index"
                      :label="item.jointName"
                      :value="{ value: item.id, label: item.jointName }"
                                                :value="item.id"
                    >
                    </el-option>
                  </el-select>
@@ -267,7 +293,7 @@
                      v-for="(item, index) in selSonLocationOptions"
                      :key="index"
                      :label="item.jointName"
                      :value="{ value: item.id, label: item.jointName }"
                                                :value="item.id"
                    >
                    </el-option>
                  </el-select>
@@ -289,15 +315,14 @@
                    style="width: 80%"
                    @change="
                      (val) => {
                        selLocationClick(val, item.prop, scope.row)
                        selLocationClick(val, item.prop, scope.row,3)
                      }
                    "
                  >
                    ">
                    <el-option
                      v-for="(ite, index) in selLocationOptions"
                      :key="index"
                      :label="ite.name"
                      :value="{ value: ite.id, label: ite.name }"
                                                :value="item.id"
                    >
                    </el-option>
                  </el-select>
@@ -307,7 +332,8 @@
                </div>
              </el-form-item>
              <!-- 产品 -->
              <el-form-item v-else-if="item.product" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
                            <el-form-item v-else-if="item.product" label=" "
                                          :prop="'tableData.' + scope.$index + '.' + item.prop">
                <div class="custom-name">
                  <span v-if="scope.row.isEdit || scope.row.editable">{{ scope.row.productName }}</span>
                  <template v-else>
@@ -320,9 +346,7 @@
                      @select-user="
                        (val) => {
                          selProductClick(val, scope.row)
                        }
                      "
                    >
                                                }">
                    </SimpleSearchInput>
                  </template>
                </div>
@@ -340,11 +364,9 @@
                    style="width: 100%"
                    v-model="scope.row.productCategory"
                    @focus="productTypeFocus"
                    :fetch-suggestions="
                      (queryString, callback) => {
                                            :fetch-suggestions="(queryString, callback) => {
                        querySearchAsync(queryString, callback, 'formLocation')
                      }
                    "
                      }"
                    value-key="name"
                    @select="handleSelectClient('formLocation', $event)"
                  ></el-autocomplete>
@@ -374,7 +396,8 @@
                </div>
              </el-form-item>
              <!-- 用户 -->
              <el-form-item v-else-if="item.user" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
                            <el-form-item v-else-if="item.user" label=" "
                                          :prop="'tableData.' + scope.$index + '.' + item.prop">
                <div class="custom-name">
                  <span>{{ "管理员" }}</span>
                  <!-- <el-select
@@ -391,7 +414,8 @@
                </div>
              </el-form-item>
              <!-- 路线 -->
              <el-form-item v-else-if="item.route" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
                            <el-form-item v-else-if="item.route" label=" "
                                          :prop="'tableData.' + scope.$index + '.' + item.prop">
                <div class="custom-name">
                  <span v-if="scope.row.isEdit">{{ scope.row[item.prop]?.label ?? scope.row[item.prop] }}</span>
                  <el-select
@@ -417,15 +441,28 @@
                </div>
              </el-form-item>
              <!-- 公司 -->
              <el-form-item v-else-if="item.company" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
                            <el-form-item v-else-if="item.company" label=" "
                                          :prop="'tableData.' + scope.$index + '.' + item.prop">
                <div class="custom-name">
                  <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span>
                  <el-select v-else v-model="scope.row[item.prop]" placeholder="请选择" size="mini" style="width: 80%">
                    <el-option v-for="(item, index) in companyOptions" :key="index" :label="item.name" :value="item">
                                    <el-select v-else v-model="scope.row[item.prop]" placeholder="请选择" size="mini"
                                               style="width: 80%">
                                        <el-option v-for="(item, index) in companyOptions" :key="index"
                                                   :label="item.name" :value="item">
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
                            <!-- 备注 -->
                            <el-form-item v-else-if="item.editInput" label=" "
                                          :prop="'tableData.' + scope.$index + '.' + item.prop">
                                <div class="custom-name">
                                    <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span>
                                    <el-input v-else v-model="scope.row[item.prop]" placeholder="请输入" size="mini"
                                              style="width: 80%"></el-input>
                                </div>
                            </el-form-item>
                            <!-- 产品名称 -->
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
            <span v-else>{{ scope.row[item.prop] }}</span>
@@ -437,6 +474,7 @@
    <div v-if="!detailEnter && !isinventory && !isReorder&&isOperateAdd" 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" type="primary" @click="deleteItems">删除</el-button>
    </div>
    <!-- 产品名称 -->
    <SelectCommonDialog
@@ -445,13 +483,13 @@
      :selectBoxList="tableList.tableData"
      :quotationNumber="quotationNumber"
      @selClient="selClient"
      @getSelectArray="getSelectArray"
    />
                :warehouseId="warehouseId"
                @getSelectArray="getSelectArray"/>
  </div>
</template>
<script>
import { getProductList } from "@/api/product/product"
    import {getProductList, getProductDetailsByBarCodeApi} from "@/api/product/product"
import { getLocationList } from "@/api/warehouseManage/warehouse"
import { getCompanyList } from "@/api/common/other"
import { getRuleList} from "@/api/operate/inventoryAdjustment"
@@ -463,6 +501,10 @@
  name: "CommmonFormTableView",
  components: { SimpleSearchInput, SelectCommonDialog },
  props: {
            warehouseId:{
              type:Number,
              default:0
            },
    detailEnter: {
      type: Boolean,
      default: false
@@ -520,6 +562,7 @@
  },
  data() {
    return {
                scanCode: '',
      total: 0,
      productList: [],
      tableList: [],
@@ -556,15 +599,15 @@
      this.getRuleList()
    } else if (this.isReorder) {
      this.getProductList()
      this.getLocationList()
                //this.getLocationList()
    } else {
      this.getProductList()
      this.getProductCategoryList()
    }
    if (this.islistingrules) {
            /*if (this.islistingrules) {
      this.getToLocationList()
      // this.getCompanyList()
    }
            }*/
    this.tableList = this.productTableList
  },
  computed: {},
@@ -572,9 +615,47 @@
    productTableList() {
      // this.showcol = this.productTableList.showcol
      this.getTableInfo()
            },
            scanCode: {
                handler(newValue, oldValue) {
                    //1.输入不会触发,需要扫入条形码触发
                    if (newValue&&(newValue.length - oldValue.length > 1)) {
                        const codeNum=this.scanCode;
                        this.scanCode="";
                         this.queryProduct(codeNum);
                    }
                }
    }
  },
  methods: {
            deleteItems(){
              this.$emit('deleteItems');
            },
            selectProductArray(val){
                this.$emit('selectProductArray',val);
            },
            handlerEnter() {
                if (this.scanCode.length > 0) {
                    const codeNum=this.scanCode;
                    this.scanCode="";
                    this.queryProduct(codeNum);
                }
            },
            async queryProduct(codeNum) {
                const {code, data, msg} = await getProductDetailsByBarCodeApi(codeNum);
                if (code === 200) {
                    this.$emit("getSelectArray", [data]);
                    this.$message.success(`扫码成功,${data.name}数量加1`);
                } else {
                    this.$message.error(msg);
                }
               // this.scanCode = "";
            },
            startScanCode() {
                this.$nextTick(() => {
                    this.$refs.input[0].focus();
                });
            },
    getTableInfo(){
      this.tableList = this.productTableList
      if (this.tableList.tableData.length === 1 && this.tableList.tableData[0].name === "") {
@@ -611,8 +692,8 @@
            pageSize: 15
          }).then((res) => {
            if (res.code === 200) {
              const list = res.data ? res.data : []
              this.productTypeNameOptions = list
                                const list = res.data ? res.data : [];
                                this.productTypeNameOptions = list;
              this.tableList.tableData[this.tableList.rowClickIndex].productCategory = list[0].name
            }
          })
@@ -626,7 +707,7 @@
      if (value === "product") {
        restaurants = this.productNameOptions
      } else if (value === "productType") {
        restaurants = this.productTypeNameOptions
                    restaurants = this.productTypeNameOptions;
      } else if (value === "formLocation") {
        restaurants = this.selLocationOptions
      }
@@ -739,35 +820,37 @@
    // 设置子位置/源位置
    async setLocationList(jointName, tag) {
      if (tag === "fromLocation") {
        await getLocationList({
          jointName: jointName,
                    /*await getLocationList({
                        warehouseId: jointName,
          page: 1,
          pageSize: 100
        }).then((res) => {
          if (res.code === 200) {
            this.selSonLocationOptions = res.data
                            this.selSonLocationOptions = res.data;
          }
        })
                    })*/
                    this.selSonLocationOptions = jointName;
      } else if (tag === "toLocation") {
        await getLocationList({
          jointName: jointName,
                    /*await getLocationList({
          page: 1,
          pageSize: 100
        }).then((res) => {
          if (res.code === 200) {
            this.selToLocationOptions = res.data
          }
        })
                    })*/
                    this.selToLocationOptions = jointName;
      } else {
        await getLocationList({
          jointName: jointName,
                    /*await getLocationList({
                        warehouseId: jointName,
          page: 1,
          pageSize: 100
        }).then((res) => {
          if (res.code === 200) {
            this.selSonLocationOptions = res.data
                            this.selSonLocationOptions = res.data;
          }
        })
                    })*/
                    this.selSonLocationOptions = jointName;
      }
    },
    // 获取公司列表
@@ -863,8 +946,8 @@
      })
    },
    // 选择位置
    selLocationClick(item, prop, row) {
      console.log("位置选择",item,row)
            selLocationClick(item, prop, row,index) {
                console.log("位置选择1", item,prop ,row);
      if (prop === "areaName") {
        getLocationList({
          jointName: item.label,
@@ -897,7 +980,7 @@
          }
        })
      }
      this.$emit("selLocationClick", item, prop)
                this.$emit("selLocationClick", item, prop,index);
    },
    // 选择子位置
    selSonLocationClick(item,prop,row,scope) {
@@ -905,7 +988,7 @@
    },
    // 获取在库与预测数量
    getAmountAndPrediction(item, val, ite) {
      let selIndex = 0
                let selIndex = 0;
      getAmountAndPrediction({
        locationId: val === "product" ? this.locacionId : ite.value,
        productId: val === "product" ? item.id : this.productId
@@ -945,6 +1028,7 @@
      return row._id ? row._id : row.id
    },
    handleSelectionChange(val) {
                this.productIndex = this.tableList.tableData.length;
      this.$emit("getSelectArray", val)
    },
@@ -978,6 +1062,11 @@
    },
    // 新增
    add() {
                if(this.warehouseId||this.$route.query.workType){
                    if(this.$route.query.workType==3&&!this.warehouseId){
                        this.$message.warning('请先选择调拨地址');
                        return ;
                    }
      if (this.addTypeIdMultiple) {
        this.productIndex = this.tableList.tableData.length
        this.editSelCommonConfig.title = "产品名称"
@@ -985,6 +1074,9 @@
        this.editSelCommonConfig.editVisible = true
      } else {
        this.$emit("addProductClick")
                    }
                }else{
                    this.$message.warning('请先选择仓库')
      }
    },
    commonInputChange(val, prop, row) {
@@ -996,7 +1088,7 @@
    },
    // 清除已选择用户
    clearupClient(scope) {
      this.productIndex = scope.$index
                this.productIndex = scope.$index;
      this.tableList.tableData.map((ite, index) => {
        if (index === this.productIndex) {
          ite.productName = ""
@@ -1034,7 +1126,8 @@
    setFormItem(val) {
      console.log(val)
    },
    commoInput() {},
            commoInput() {
            },
    selClient(item) {
      let list = this.tableList.tableData.map((item) => item.id)
      if (list.findIndex((v) => v == item.id) == -1) {
@@ -1067,9 +1160,24 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .scan-code {
        cursor: pointer;
        margin-left: 10px;
        img, span {
            position: relative;
        }
        img {
            top: 5px;
        }
        span: {
            top: -10px;
        }
    }
.setHeight {
  height: 100%;
}
.page-view {
  min-width: 100px;
@@ -1089,6 +1197,7 @@
    }
  }
}
::v-deep {
  .el-autocomplete {
    height: 28px;
@@ -1131,11 +1240,13 @@
    font-family: PingFangSC-Medium, sans-serif;
  }
}
::v-deep .el-table .el-table__cell {
  padding: 6px 0 !important;
  height: 35px;
  text-align: center;
}
::v-deep .el-table__body-wrapper {
  height: unset !important;
}