Merge branch 'master' of http://192.168.5.5:10010/r/web/WMS

zuozhengqing

2024-03-22 05b72b58002a8733b8b31825ea5edabe7e279283

Merge branch 'master' of http://192.168.5.5:10010/r/web/WMS

 src/assets/style/reset-element.scss

@@ -43,8 +43,8 @@
  // background:#2c60c5;
}

.color_F56C6C{
  color:#F56C6C;
.color_F56C6C {
  color: #f56c6c;
}
// .el-menu-item {
//   margin: 8px;
@@ -59,8 +59,8 @@
//   background-position: center;
//   width: 160px !important;
// }
.line_height_30px{
  line-height:30px;
.line_height_30px {
  line-height: 30px;
}

.el-button--primary {
@@ -83,4 +83,8 @@
  color: #fff;
  background-color: #2a78fb;
  border-color: #2a78fb;
}
}
// 颜色
.el-table .onSelect {
  background: #ebf2ff;
}

 src/components/makepager/CommonFormTableView.vue

@@ -55,7 +55,7 @@
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item
              <!-- <el-form-item
                v-else-if="item.productName"
                label=" "
                :prop="'tableData.' + scope.$index + '.' + item.prop"
@@ -69,6 +69,44 @@
                    @select-user="selProductNameClick"
                  >
                  </SimpleSearchInput>
                </div>
              </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>
                  <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
@@ -118,7 +156,7 @@
                    :controls="false"
                    size="mini"
                    style="width: 100%; margin-right: 5px"
                    :min="item.prop==='minInventory'?0:1"
                    :min="item.prop === 'minInventory' ? 0 : 1"
                    @change="
                      (val) => {
                        commonInputChange(val, item.prop, scope.row)
@@ -185,7 +223,7 @@
                    style="width: 80%"
                    @change="
                      (val) => {
                        selLocationClick(val, item.prop,scope.row)
                        selLocationClick(val, item.prop, scope.row)
                      }
                    "
                  >
@@ -286,7 +324,11 @@
                </div>
              </el-form-item>
              <!-- 从 -->
              <el-form-item v-else-if="item.formLocation" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
              <el-form-item
                v-else-if="item.formLocation"
                label=" "
                :prop="'tableData.' + scope.$index + '.' + item.prop"
              >
                <div class="custom-name">
                  <span v-if="scope.row.isEdit || scope.row.editable">{{ scope.row.formLocation }}</span>
                  <el-autocomplete
@@ -388,17 +430,19 @@
        <slot name="tableButton" />
      </el-table>
    </el-form>
    <div v-if="!detailEnter && !isinventory  && !isReorder" style="margin: 10px">
      <el-button size="small" type="primary" @click="add">添加明细行</el-button>
      <!-- <el-button size="small" type="primary" @click="empty">清空</el-button> -->
    <div v-if="!detailEnter && !isinventory && !isReorder" style="margin: 10px">
      <el-button size="small" type="primary" @click="add">新增</el-button>
      <el-button size="small" type="primary" @click="empty">清空</el-button>
    </div>
    <!-- 产品名称 -->
    <!-- <SelectCommonDialog
    <SelectCommonDialog
      v-if="editSelCommonConfig.editVisible"
      :edit-common-config="editSelCommonConfig"
      :sign="sign"
      :selectBoxList="tableList.tableData"
      :quotationNumber="quotationNumber"
      @selClient="selClient"
    /> -->
      @getSelectArray="getSelectArray"
    />
  </div>
</template>

@@ -410,10 +454,10 @@
import { getProductCategoryList } from "@/api/product/productCategory"
import SimpleSearchInput from "@/components/makepager/SimpleSearchInput"
import { getAmountAndPrediction } from "@/api/product/reorderRules"
// import SelectCommonDialog from "@/views/other/commonDialog/SelectCommonDialog"
import SelectCommonDialog from "@/views/other/commonDialog/SelectCommonDialog"
export default {
  name: "CommmonFormTableView",
  components: { SimpleSearchInput },
  components: { SimpleSearchInput, SelectCommonDialog },
  props: {
    detailEnter: {
      type: Boolean,
@@ -448,6 +492,21 @@
    isReorder: {
      type: Boolean,
      default: false
    },
    // 根据报价单查询产品
    quotationNumber: {
      type: [String, Number],
      default: ""
    },
    // 列表新增是否多选
    addTypeIdMultiple: {
      type: Boolean,
      default: false
    },
    // 是否可以操作 添加等
    isOperate: {
      type: Boolean,
      default: true
    }
  },
  data() {
@@ -457,6 +516,7 @@
      tableList: [],
      editSelCommonConfig: {
        editVisible: false,
        isSelectBox: false,
        title: "",
        infomation: {}
      },
@@ -478,8 +538,8 @@
      productName: "",
      productId: "",
      initialPosition: "",
      formLocationList:[],
      toLocationList:[],
      formLocationList: [],
      toLocationList: []
    }
  },
  created() {
@@ -549,7 +609,7 @@
        restaurants = this.productNameOptions
      } else if (value === "productType") {
        restaurants = this.productTypeNameOptions
      }else if(value==="formLocation"){
      } else if (value === "formLocation") {
        restaurants = this.selLocationOptions
      }
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString, value)) : restaurants
@@ -563,6 +623,22 @@
      return (state) => {
        return state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    // 新增
    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
    },
    // 清除选中产品
    setValueNull(val) {
@@ -642,8 +718,8 @@
      })
    },
    // 设置子位置/源位置
    async setLocationList(jointName,tag) {
      if(tag==="fromLocation"){
    async setLocationList(jointName, tag) {
      if (tag === "fromLocation") {
        await getLocationList({
          jointName: jointName,
          page: 1,
@@ -653,7 +729,7 @@
            this.selSonLocationOptions = res.data
          }
        })
      }else if(tag==="toLocation"){
      } else if (tag === "toLocation") {
        await getLocationList({
          jointName: jointName,
          page: 1,
@@ -663,7 +739,7 @@
            this.selToLocationOptions = res.data
          }
        })
      }else{
      } else {
        await getLocationList({
          jointName: jointName,
          page: 1,
@@ -704,7 +780,7 @@
        let selIndex = 0
        this.tableList.tableData.map((ite, index) => {
          // ite.id 是上架规则的, ite.productId是库存调整的
          if (ite.id === row.id&&ite.id!=undefined&&row.id!=undefined) {
          if (ite.id === row.id && ite.id != undefined && row.id != undefined) {
            selIndex = index
            ite.productId = item.id
            ite.productName = item.name
@@ -712,7 +788,7 @@
            ite.productCategory = item.categoryName
            ite.amount = item.amount
            ite.unit = item.unit
          }else if(ite.productId===row.productId){
          } else if (ite.productId === row.productId) {
            selIndex = index
            ite.productId = item.id
            ite.productName = item.name
@@ -879,7 +955,14 @@
    },
    // 新增
    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)
@@ -889,24 +972,17 @@
      this.$emit("emptyProductClick")
    },
    // 清除已选择用户
    clearupClient(row, scope) {
    clearupClient(scope) {
      this.productIndex = scope.$index
      this.tableList.tableData.map((ite, 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.productName = ""
          ite.id = ""
          ite.name = ""
          ite.amount = 1
          ite.number = ""
          ite.purchasePrice = 0
          ite.model = ""
          ite.specs = ""
          ite.unit = ""
          ite.deliveryTime = 0
          ite.shippingDuration = 0
@@ -935,7 +1011,29 @@
    setFormItem(val) {
      console.log(val)
    },
    commoInput() {}
    commoInput() {},
    selClient(item) {
      let list = this.tableList.tableData.map((item) => item.number)
      if (list.findIndex((v) => v == item.number) == -1) {
        this.isRecalculate = true
        // this.editConfig.infomation.client_name = row.name
        this.tableList.tableData.map((ite, index) => {
          if (index === this.productIndex) {
            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.unit = item.unit
          }
        })
      } else {
        this.$message.error("不能选择重复的产品， 请重新选择")
      }
    },
    getSelectArray(val) {
      this.$emit("getSelectArray", val, this.productIndex)
    }
  }
}
</script>

 src/components/makepager/TableCommonView.vue

@@ -1,6 +1,6 @@
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <div :class="{ 'table-view': true, table_height: !showSummary }" v-loading="loading">
  <div class="table-view" v-loading="loading">
    <el-table
      ref="table"
      border
@@ -43,10 +43,10 @@
            <span
              class="Badge"
              :class="{
                greenSlot: scope.row.status == '4'||scope.row.status ==  '完成',
                greenSlot: scope.row.status == '4' || scope.row.status == '完成',
                redSlot: scope.row.status == '5',
                blueSlot: scope.row.status == '3'||scope.row.status ==  '就绪',
                graySlot: scope.row.status == '1',
                blueSlot: scope.row.status == '3' || scope.row.status == '就绪',
                graySlot: scope.row.status == '1'
              }"
              >{{
                item.isCallMethod ? item.getCallMethod(scope.row[item.prop], scope.row) : scope.row[item.prop]
@@ -116,7 +116,7 @@
          highlight: false,
          tableColumn: [
            // table表单
            { label: "", prop: "", min: 200, tooltip: true,textAlign:"center"}
            { label: "", prop: "", min: 200, tooltip: true, textAlign: "center" }
          ]
        }
      },
@@ -239,11 +239,11 @@
                  if (!isNaN(value)) {
                    return prev + curr
                  } else {
                    return prev 
                    return prev
                  }
                }, 0)
                let unitIndex = this.tableList.tableColumn.findIndex(obj => obj.label === column.label);  
                sums[index]=this.tableList.tableColumn[unitIndex].unit+sums[index]
                let unitIndex = this.tableList.tableColumn.findIndex((obj) => obj.label === column.label)
                sums[index] = this.tableList.tableColumn[unitIndex].unit + sums[index]
              } else {
                sums[index] = ""
              }
@@ -348,10 +348,10 @@
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: auto;
    .exceed_width{
      width: 100%;  
      white-space: nowrap;  
      overflow: hidden;  
    .exceed_width {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
@@ -383,13 +383,13 @@
    height: 35px;
    text-align: center;
  }
  .el-table__body-wrapper{
  .el-table__body-wrapper {
    height: unset !important;
  }
  .el-table__cell.is-left{
  .el-table__cell.is-left {
    text-align: left !important;
  }
  .el-table__cell.is-right{
  .el-table__cell.is-right {
    text-align: right !important;
  }
}
@@ -402,7 +402,7 @@
  background: rgba(0, 0, 0, 0);
  z-index: 10;
}
.el-table__cell{
.el-table__cell {
  text-align: unset !important;
}
</style>

 src/views/operate/allot/index.vue

@@ -9,27 +9,72 @@
        @searchClick="getList"
      />
    </div>
    <div class="list-view">
      <div class="table">
        <TableCommonView ref="tableListRef" :table-list="tableList" @selTableCol="selTableCol">
          <template slot="tableButton">
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="tableRowClick(scope.row, '查看')" type="text" size="small">查看</el-button>
                <el-button
                  v-if="scope.row.status !== 4"
                  @click="tableRowClick(scope.row, '编辑')"
                  type="text"
                  size="small"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </template>
        </TableCommonView>
    <div class="body">
      <div class="content-top">
        <div class="list-view">
          <TableCommonView
            ref="tableListRef"
            :table-list="tableList"
            @selTableCol="selTableCol"
            @tableRowClick="topTableRowClick"
            :selectClassRow="selectRow"
          >
            <template slot="tableButton">
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    @click="tableRowClick(scope.row, '查看')"
                    type="text"
                    size="small"
                    >查看</el-button
                  >
                  <el-button
                    v-if="scope.row.status !== 4"
                    @click="tableRowClick(scope.row, '编辑')"
                    type="text"
                    size="small"
                    >编辑</el-button
                  >
                </template>
              </el-table-column>
            </template>
          </TableCommonView>
          <div class="btn-pager">
            <PagerView
              class="page"
              :pager-options="pagerOptions"
              v-on="pagerEvents"
            />
          </div>
        </div>
      </div>
      <div class="btn-pager">
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      <div class="content-bottom">
        <div class="bottom-tabs">
          <div
            class="tab-pane"
            @click="getTab(0)"
            :style="{
              background: TabsIndex == 0 ? '#2a78fb' : '#F1F3F8',
              color: TabsIndex == 0 ? '#fff' : '#666',
            }"
          >
            产品信息
          </div>
        </div>
        <div class="list-view">
          <TableCommonView
            :table-list="productTableList"
            @selTableCol="selBottomTableCol"
          >
            <!-- <template slot="tableButton">
              <el-table-column label="操作" width="160" fixed="right">
                <template slot-scope="scope">
                  <el-button @click="viewClick(scope.row)" type="text" size="small">查看</el-button>
                </template>
              </el-table-column>
            </template> -->
          </TableCommonView>
        </div>
      </div>
    </div>
    <!-- 新建/编辑 -->
@@ -43,10 +88,10 @@
</template>

<script>
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import { getAllList } from "@/api/overview/overview"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin";
import { getAllList } from "@/api/overview/overview";
// import DetailProduct from "@/views/productManage/product/DetailProduct"
import AddOverviewDialog from "@/views/overview/AddOverviewDialog"
import AddOverviewDialog from "@/views/overview/AddOverviewDialog";

export default {
  name: "AllotView",
@@ -55,21 +100,45 @@
  mixins: [pageMixin],
  computed: {},
  data() {
     // 产品信息
     const productColumn = [
      { label: "产品编号", prop: "id", default: true },
      { label: "产品名称", prop: "productName" },
      { label: "产品规格", prop: "specs" },
      { label: "产品型号", prop: "model" },
      { label: "计量单位", prop: "unit" },
      { label: "调出位置", prop: "location" },
      { label: "调入位置", prop: "toLocation" },
      { label: "数量", prop: "amount" }
    ]
    return {
      tableList: {},
      showcol: ["调出位置", "调入位置", "联系人", "日期", "来源单据", "公司", "状态"],
      showcol: [
        "调出位置",
        "调入位置",
        "联系人",
        "日期",
        "来源单据",
        "公司",
        "状态",
      ],
      searchOptions: [],
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
        infomation: {},
      },
      keyword: ""
    }
      keyword: "",
      TabsIndex: "0",
      productTableList: {},
      showBottomCol: ["产品编号", "产品名称", "产品规格", "产品型号", "计量单位","调出位置","调入位置", "数量"],
      tableBottomColumn: productColumn,
      selectRow: {}
    };
  },
  created() {
    this.setTable()
    this.getData()
    this.setTable();
    this.getData();
  },
  methods: {
    setTable() {
@@ -79,16 +148,17 @@
        selectIndex: true,
        showcol: this.showcol,
        allcol: [],
        tableColumn: this.setTableColumn(this.showcol)
      }
      let allcol = []
        tableColumn: this.setTableColumn(this.showcol),
      };
      let allcol = [];
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        if (!this.tableList.tableColumn[i].default) {
          const label = this.tableList.tableColumn[i].label
          allcol.push(label)
          const label = this.tableList.tableColumn[i].label;
          allcol.push(label);
        }
      }
      this.tableList.allcol = allcol
      this.tableList.allcol = allcol;
      this.setBottomList()
    },
    setTableColumn(showcol) {
      let tableColumn = [
@@ -96,38 +166,38 @@
          label: "单号",
          prop: "number",
          isShowColumn: true,
          default: true
          default: true,
        },
        {
          label: "调出位置",
          prop: "from",
          isShowColumn: showcol.includes("调出位置"),
          default: false
          default: false,
        },
        {
          label: "调入位置",
          prop: "to",
          isShowColumn: showcol.includes("调入位置"),
          default: false
          default: false,
        },
        {
          label: "联系人",
          prop: "companyName",
          isShowColumn: showcol.includes("联系人"),
          default: false
          default: false,
        },
        {
          label: "负责人",
          prop: "contacterName",
          isShowColumn: showcol.includes("负责人"),
          default: false
          default: false,
        },
        {
          label: "日期",
          prop: "operationDate",
          isShowColumn: showcol.includes("日期"),
          default: false,
          date: true
          date: true,
        },
        // {
        //   label: "产品可用性",
@@ -152,7 +222,7 @@
          label: "来源单据",
          prop: "sourceNumber",
          isShowColumn: showcol.includes("来源单据"),
          default: false
          default: false,
        },
        // {
        //   label: "欠单",
@@ -194,7 +264,7 @@
          label: "入库类型",
          prop: "operationTypeName",
          isShowColumn: showcol.includes("操作类型"),
          default: false
          default: false,
        },
        // {
        //   label: "公司",
@@ -210,75 +280,200 @@
          default: false,
          status: true,
          isCallMethod: true,
          getCallMethod: this.getStatus
        }
      ]
      return tableColumn
          getCallMethod: this.getStatus,
        },
      ];
      return tableColumn;
    },
    selTableCol(val) {
      this.showcol = val
      this.tableList.tableColumn = this.setTableColumn(val)
      this.showcol = val;
      this.tableList.tableColumn = this.setTableColumn(val);
    },
    // 请求数据
    async getData() {
      await getAllList({
        number: this.keyword,
        page: this.pagerOptions.currPage,
        pageSize: this.pagerOptions.pageSize
        pageSize: this.pagerOptions.pageSize,
      }).then((res) => {
        if (res.code === 200) {
          const list = res.data.map((item) => {
            return {
              ...item,
              from: item.location.jointName,
              to: item.toLocation.name
            }
          })
          this.tableList.tableInfomation = list || []
          this.pagerOptions.totalCount = res.total
              to: item.toLocation.name,
            };
          });
          this.tableList.tableInfomation = list || [];
          this.pagerOptions.totalCount = res.total;
          if (res.total > 0) {
            this.selectRow = this.tableList.tableInfomation.length > 0 ? this.tableList.tableInfomation[0] : {}
            this.topTableRowClick(this.selectRow)
            this.bottomProductData(this.selectRow)
          }
        }
      })
      });
    },
    // 搜索
    getList(val) {
      console.log(val)
      this.keyword = val
      this.pagerOptions.currPage = 1
      this.getData()
      console.log(val);
      this.keyword = val;
      this.pagerOptions.currPage = 1;
      this.getData();
    },
    // 查看 编辑
    tableRowClick(row, val) {
      console.log(row,"查看")
      this.editConfig.visible = true
      this.editConfig.title = val
      row.details.map((item)=>{
        item.fromLocationId=item.fromLocation.jointName
        item.toLocationId=item.toLocation.jointName
      })
      row.location={
        value:row.location.id||row.location.value,
        label:row.location.jointName||row.location.label
      }
      row.toLocation={
        value:row.toLocation.id||row.toLocation.value,
        label:row.toLocation.jointName||row.toLocation.label
      }
      row.locationID=row.location.jointName
      row.locationId=row.location.value
      this.editConfig.infomation = { ...row }
      console.log(row, "查看");
      this.editConfig.visible = true;
      this.editConfig.title = val;
      row.details.map((item) => {
        item.fromLocationId = item.fromLocation.jointName;
        item.toLocationId = item.toLocation.jointName;
      });
      row.location = {
        value: row.location.id || row.location.value,
        label: row.location.jointName || row.location.label,
      };
      row.toLocation = {
        value: row.toLocation.id || row.toLocation.value,
        label: row.toLocation.jointName || row.toLocation.label,
      };
      row.locationID = row.location.jointName;
      row.locationId = row.location.value;
      this.editConfig.infomation = { ...row };
    },
    // 新建
    addBtnClick() {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.visible = true;
      this.editConfig.title = "新建";
    },
    // 状态
    getStatus(val) {
      return val === 1 ? "草稿" : val === 3 ? "就绪" :val===4? "完成": "取消"
    }
  }
}
      return val === 1
        ? "草稿"
        : val === 3
        ? "就绪"
        : val === 4
        ? "完成"
        : "取消";
    },
    // top 行点击
    topTableRowClick(row) {
      this.selectRow = row
      this.bottomProductData(this.selectRow)
    },
    // bottom 产品信息
    // bom 列表
    setBottomList() {
      this.productTableList = {
        selectIndex: true,
        tableInfomation: [],
        allcol: [],
        showcol: this.showBottomCol,
        tableColumn: this.setColumnVisible(this.showBottomCol, this.tableBottomColumn)
      }
      this.setTableList(this.productTableList)
    },
    setTableList(tableList) {
      tableList.allcol = tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
      // this.searchOptions = []
      // for (let i = 0; i < tableList.tableColumn.length; i++) {
      //   const label = tableList.tableColumn[i].label
      //   const value = tableList.tableColumn[i].prop
      //   this.searchOptions.push({ value: value, label: label })
      // }
    },
    setColumnVisible(showCol, tableColumn) {
      return tableColumn.map((ele) => {
        return {
          ...ele,
          isShowColumn: showCol.includes(ele.label)
        }
      })
    },
    getTab(tab) {
      this.TabsIndex = tab
    },
    selBottomTableCol(val) {
      this.showBottomCol = val
      this.productTableList.tableColumn = this.setColumnVisible(val, this.tableBottomColumn)
    },
    // bottom产品信息数据处理
    bottomProductData(arr) {
      const list = arr.details.map((item) => {
        return {
          ...item,
          productName: item.product.name,
          unit: item.product.unit,
          location:arr.location.name,
          toLocation:arr.toLocation.name,
        }
      })
      this.productTableList.tableInfomation = list
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.body {
  box-sizing: border-box;
  padding: 10px 20px;
  border-radius: 12px;
  height: calc(100% - 70px);
  .content-top {
    background-color: #fff;
    border-radius: 12px;
    min-height: 70px;
    height: 48%;
    position: relative;
    .list-view {
      height: calc(100% - 50px);
    }
  }
  .btn-pager {
    display: flex;
    margin-top: 0px;
    .page {
      margin-left: auto;
    }
  }
  .content-bottom {
    .bottom-tabs {
      height: 40px;
      line-height: 40px;
      background: #e6ecf2;
      display: flex;
      .tab-pane {
        width: 100px;
        margin-right: 20px;
        font-size: 14px !important;
        text-align: center;
        cursor: pointer;
        background: #2a78fb;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
      }
    }
    .lable-view {
      background: #e6ecf2;
      height: 40px;
      line-height: 40px;
      .name {
        border-left: 4px solid #2a78fb;
        padding-left: 10px;
      }
    }
    background-color: #fff;
    border-radius: 12px;
    min-height: 70px;
    height: calc(52% - 60px);
    margin-top: 10px;
    // padding: 10px 20px;
    .list-view {
      height: calc(100% - 10px);
    }
  }
}
</style>

 src/views/other/commonDialog/SelectCommonDialog.vue

@@ -1,80 +1,93 @@
<template>
  <div class="edit-selClient-box">
    <el-dialog
      :title="editCommonConfig.title"
      :visible.sync="editConfig.editVisible"
      :width="dialogWidth"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div slot="title" class="tac drawerHeader">{{ editCommonConfig.title }}</div>

      <div class="bg-view">
        <div class="query-bg">
          <!-- <el-input placeholder="请输入内容" v-model="queryInput" size="mini" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option v-for="item in commonOptions" :key="item.id" :label="item.name" :value="item.name">
              </el-option>
            </el-select>
          </el-input> -->
          <SearchCommonView
            ref="searchCommonView"
            :search-options="searchOptions"
            @searchClick="searchClick"
            @resetClick="resetClick"
            :search-sel="searchSel"
          />
          <div class="btn">
            <!-- <el-button type="primary" size="mini" disabled>设置字段</el-button>
            <el-button type="primary" size="mini" disabled>快速创建</el-button> -->
          </div>
          <el-input
            v-model="bomParams.keyword"
            placeholder="搜索产品名称，编码等关键词"
            style="width: 60%; margin-right: 10px"
          ></el-input>
          <el-button type="primary" @click="searchClick">查询</el-button>
        </div>
        <TableCommonView ref="tableListRef" :table-list="tableList" :select-box="false" @selCommonClick="selNameClick">
        <TableCommonView
          class="bg-list"
          ref="tableListRef"
          :loading="loading"
          :table-list="tableList"
          :select-box="editCommonConfig.isSelectBox"
          @selCommonClick="selNameClick"
          @selTableCol="selTableCol"
          @getSelectArray="getSelectArray"
        >
        </TableCommonView>
        <div slot="footer" class="dialog-footer">
          <div class="remark">说明：支持多字段模糊查询，仅显示符合条件的前5条数据</div>
          <div class="btn-pager">
            <PagerView
              class="page"
              :pager-options="pagerOptions"
              :pagerCount="pagerCount"
              layout="total, sizes, prev, pager, next"
              v-on="pagerEvents"
            />
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" v-if="editCommonConfig.isSelectBox">
        <el-button type="primary" @click="saveClick()">确定</el-button>
        <el-button @click="editConfig.editVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getProductListFromGrpc,getProductList } from "@/api/productManage/product"
import { getProductList } from "@/api/product/product"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
export default {
  name: "EditSelCommonDialog",
  mixins: [pageMixin],
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          editVisible: false,
          isSelectBox: false,
          title: "",
          clientId: 0,
          isRequest: true,
          client_name: "",
          tableInfomation: []
        }
      }
    },
    sign: {
      type: String,
      default: ""
    }
  },
  components: {},
  computed: {},
  data() {
    return {
      dialogWidth: "50%",
      dialogWidth: "42rem",
      pagerCount: 5,
      editConfig: this.editCommonConfig,
      queryInput: "",
      select: "全部字段",
      tableData: [],
      searchSelOptions: [],
      loading: false,
      tableList: {},
      searchOptions: [],
      search_map: {},
      searchSel: {},
      keyword: "",
      keywordType: ""
      showcolTop: ["产品规格", "产品型号"],
      selectArray: [],
      bomParams: {
        keyword: "",
        page: 1,
        pageSize: 10,
        types: ["原材料", "半成品", "成品"]
      }
    }
  },
  created() {
@@ -83,22 +96,66 @@
  },
  methods: {
    setTable() {
      if (this.editConfig.title === "产品名称") {
        this.tableList = {
          tableInfomation: [],
          tableColumn: [
            { label: "产品名称", prop: "name", isClick: true },
            { label: "产品编号", prop: "number" }
          ]
        }
        this.searchSel = { value: "name", label: "产品名称" }
      this.tableList = {
        tableInfomation: [],
        selectIndex: false,
        selectBox: this.editCommonConfig.isSelectBox,
        showcol: this.showcolTop,
        allcol: [],
        tableColumn: this.setTopTableColumn(this.showcolTop)
      }
      this.searchOptions = []
      let allcol = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        const label = this.tableList.tableColumn[i].label
        const value = this.tableList.tableColumn[i].prop
        this.searchOptions.push({ value: value, label: label })
        if (!this.tableList.tableColumn[i].default) {
          const label = this.tableList.tableColumn[i].label
          allcol.push(label)
        }
      }
      this.tableList.allcol = allcol
    },
    setTopTableColumn(showcol) {
      let tableColumn = [
        {
          label: "产品名称",
          prop: "name",
          isShowColumn: true,
          default: true,
          isClick: true
        },
        {
          label: "产品编码",
          prop: "id",
          min: 110,
          isShowColumn: true,
          default: true
        },
        {
          label: "产品规格",
          prop: "specs",
          isShowColumn: showcol.includes("产品规格"),
          default: false
        },
        {
          label: "产品型号",
          prop: "type",
          width: 90,
          isShowColumn: showcol.includes("产品型号"),
          default: false
        }
      ]
      return tableColumn
    },
    selTableCol(val) {
      this.showcolTop = val
      this.tableList.tableColumn = this.setTopTableColumn(val)
    },
    // 列表多选
    getSelectArray(val) {
      this.selectArray = val
    },
    saveClick() {
      this.$emit("getSelectArray", this.selectArray)
      this.editConfig.editVisible = false
    },
    // 请求数据
    async getData() {
@@ -109,21 +166,15 @@
    },
    // 产品名称
    async getProductList() {
      // let fn = this.sign == "purchase" ? getProductList : getProductListFromGrpc;
      let fn
      await fn({
        page: 1,
        pageSize: 100
      }).then((res) => {
      this.bomParams.page = this.pagerOptions.currPage ? this.pagerOptions.currPage : 1
      this.bomParams.pageSize = this.pagerOptions.pageSize ? this.pagerOptions.pageSize : 15
      let params = JSON.parse(JSON.stringify(this.bomParams))
      await getProductList(params).then((res) => {
        console.log(res.data)
        if (res.data.code === 200) {
          if (res.data.data.list && res.data.data.list.length > 0) {
            const list = res.data.data.list.map((item) => {
              return {
                ...item
              }
            })
            this.tableList.tableInfomation = list.slice(0, 5) || []
        if (res.code === 200) {
          if (res.data) {
            this.tableList.tableInfomation = res.data || []
            this.pagerOptions.totalCount = res.total ? res.total : 0
          } else {
            this.tableList.tableInfomation = []
          }
@@ -135,25 +186,22 @@
      this.editConfig.editVisible = false
    },
    selNameClick(row) {
      if (this.editCommonConfig.isSelectBox) {
        return true
      }
      this.editConfig.editVisible = false
      if (this.editConfig.title === "产品名称") {
        this.$emit("selClient", row, "productName")
      }
    },
    // 搜索
    searchClick(val, content) {
      console.log(val, content)
      this.search_map = {
        [val.value]: content
      }
      this.keyword = content
      this.keywordType = val.label
    searchClick() {
      this.bomParams.page = 1
      this.total = 0
      this.getData()
    },
    resetClick() {
      this.search_map = {}
      this.keyword = ""
      this.keywordType = ""
      this.getData()
    }
  }
@@ -163,18 +211,18 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.bg-view {
  margin: 10px;
  .bg-list {
    height: 370px;
  }
  .query-bg {
    margin-left: -20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .el-input {
      width: 310px;
      .el-select {
        width: 100px;
      }
    }

    .btn {
      float: right;
    }
@@ -185,13 +233,17 @@
  cursor: pointer;
}
.dialog-footer {
  height: 40px;
  line-height: 40px;
  color: red;
  .btn-pager {
    display: flex;
    margin-top: 0px;
    .page {
      margin-left: auto;
    }
  }
}
::v-deep {
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  .el-dialog__body {
    padding-bottom: 10px !important;
  }
}
</style>

 src/views/overview/AddOverviewDialog.vue

@@ -202,8 +202,8 @@
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" >
                <el-form-item :label="workType === 1?'仓库位置':'源位置'" prop="location">
              <el-col :span="12">
                <el-form-item :label="workType === 1 ? '仓库位置' : '调出位置'" prop="location">
                  <el-select
                    @change="rootLocationChange"
                    v-model="editConfig.infomation.location"
@@ -216,7 +216,7 @@
                      v-for="item in formLocationOptions"
                      :key="item.id"
                      :label="item.jointName"
                      :value="{label:item.jointName,value:item.id}"
                      :value="{ label: item.jointName, value: item.id }"
                    >
                    </el-option>
                  </el-select>
@@ -243,7 +243,7 @@
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="workType === 3">
                <el-form-item  label="仓库位置" prop="toLocation">
                <el-form-item label="调入位置" prop="toLocation">
                  <el-select
                    @change="toLocationChange"
                    v-model="editConfig.infomation.toLocation"
@@ -256,7 +256,7 @@
                      v-for="item in toLocationOptions"
                      :key="item.id"
                      :label="item.jointName"
                      :value="{label:item.jointName,value:item.id}"
                      :value="{ label: item.jointName, value: item.id }"
                    >
                    </el-option>
                  </el-select>
@@ -301,17 +301,22 @@
              <CommonFormTableView
                ref="tableView"
                :islistingrules="true"
                :addTypeIdMultiple="true"
                :product-table-list="productTableList"
                :detail-enter="!showFooter"
                @inputContent="inputContent"
                @addProductClick="addProductClick('操作')"
                @getSelectArray="getSelectArray"
                @emptyProductClick="emptyProductClick"
                @clearupProduct="clearupProduct"
              >
                <template v-if="showFooter" slot="tableButton">
                  <el-table-column label="操作" width="60" fixed="right" align="center">
                    <template slot-scope="scope">
                      <div @click="handleDelClick(scope, '操作')">
                      <!-- <div @click="handleDelClick(scope, '操作')">
                        <i class="el-icon-delete"></i>
                      </div>
                      </div> -->
                      <el-button type="text" size="small" @click.stop="handleDelClick(scope, '操作')">删除</el-button>
                    </template>
                  </el-table-column>
                </template>
@@ -469,9 +474,9 @@
    },
    workType: {
      type: Number,
      default: function() {  
        // return JSON.parse(window.sessionStorage.getItem('paramsData')).workType|| 1; 
        return 1; 
      default: function () {
        // return JSON.parse(window.sessionStorage.getItem('paramsData')).workType|| 1;
        return 1
      }
    },
    addName: {
@@ -492,8 +497,8 @@
      rules: {
        sourceNumber: [{ required: true, message: "请输入来源单据", trigger: "blur" }],
        operationDate: [{ required: true, message: "请选择日期", trigger: "change" }],
        toLocation: [{ required: true, message: "请选择仓库位置", trigger: "change" }],
        location: [{ required: true, message: "请选择源位置", trigger: "change" }],
        toLocation: [{ required: true, message: "请选择位置", trigger: "change" }],
        location: [{ required: true, message: "请选择调出位置", trigger: "change" }],
        operationTypeId: [{ required: true, message: "请选择入库类型", trigger: "change" }],
        number: [{ required: true, validator: this.validateCheckCode, trigger: ["change", "blur"] }]
      },
@@ -511,12 +516,12 @@
      supplierOptions: [], //供应商
      clientOptions: [], //客户
      memberOptions: [{ id: 1, name: "管理员" }],
      formLocationOptions:[],// 源位置
      formLocationOptions: [], // 调出位置
      toLocationOptions: [], // 仓库位置
      showButton: true,
      activeName: "first",
      productTableList: {},
      tableData:[],
      tableData: [],
      countId: 0,
      isNoProduct: true, // 添加明细行时是否有产品未选择
      showEdit: false, // 是否显示编辑按钮
@@ -564,14 +569,13 @@
    }
    this.getLogisticCompanyList()
    this.formInfo()
    if(this.editConfig.title==="查看"||this.editConfig.title==="编辑"){
    if (this.editConfig.title === "查看" || this.editConfig.title === "编辑") {
      setTimeout(() => {
        this.$refs.tableView.setLocationList(this.editConfig.infomation.location.label)
      }, 100);
      }, 100)
    }
  },
  mounted(){
  },
  mounted() {},
  methods: {
    formInfo() {
      this.objCode.type = this.workType === 1 ? "入库编码" : this.workType === 2 ? "出库编码" : "调拨编码"
@@ -624,7 +628,7 @@
        })
      }
    },
    // 获取源位置/仓库位置列表
    // 获取调出位置/仓库位置列表
    async getLocationList() {
      await getLocationList({
        keyWord: "",
@@ -761,7 +765,7 @@
      console.log(validArr, "xxx")
      Promise.all(validArr)
        .then((results) => {
          console.log(results, "执行成功")
          console.log(results, "执行成功", this.tableData)
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].productName.length === 0) {
              this.isNoProduct = true
@@ -785,46 +789,46 @@
            //   })
            // }
            // 产品列表解构
            if(this.editConfig.title === "编辑"||this.editConfig.title === "查看"){
              let arr=[]
              if(this.workType===1){
                params.details.map((item)=>{
            if (this.editConfig.title === "编辑" || this.editConfig.title === "查看") {
              let arr = []
              if (this.workType === 1) {
                params.details.map((item) => {
                  arr.push({
                    operationId:item.operationId,
                    amount:item.amount,
                    productId:item.productId
                    operationId: item.operationId,
                    amount: item.amount,
                    productId: item.productId
                  })
                })
                params.details=arr
              }else if(this.workType===2){
                params.details.map((item)=>{
                  if(item.fromLocationId.value){
                params.details = arr
              } else if (this.workType === 2) {
                params.details.map((item) => {
                  if (item.fromLocationId.value) {
                    arr.push({
                      operationId:item.operationId,
                      amount:item.amount,
                      fromLocationId:item.fromLocationId.value,
                      productId:item.productId,
                      operationId: item.operationId,
                      amount: item.amount,
                      fromLocationId: item.fromLocationId.value,
                      productId: item.productId
                    })
                  }else{
                  } else {
                    arr.push({
                      operationId:item.operationId,
                      amount:item.amount,
                      fromLocationId:item.fromLocation.id,
                      productId:item.productId,
                      operationId: item.operationId,
                      amount: item.amount,
                      fromLocationId: item.fromLocation.id,
                      productId: item.productId
                    })
                  }
                })
                params.details=arr
              }else if(this.workType===3){
                console.log(params.details,"看看")
                params.details.map((item)=>{
                params.details = arr
              } else if (this.workType === 3) {
                console.log(params.details, "看看")
                params.details.map((item) => {
                  arr.push({
                      operationId:item.operationId,
                      amount:item.amount,
                      fromLocationId:item.fromLocationId.value?item.fromLocationId.value:item.fromLocation.id,
                      toLocationId:item.toLocationId.value?item.toLocationId.value:item.toLocation.id,
                      productId:item.productId,
                    })
                    operationId: item.operationId,
                    amount: item.amount,
                    fromLocationId: item.fromLocationId.value ? item.fromLocationId.value : item.fromLocation.id,
                    toLocationId: item.toLocationId.value ? item.toLocationId.value : item.toLocation.id,
                    productId: item.productId
                  })
                  // if(item.fromLocationId.value){
                  //   arr.push({
                  //     operationId:item.operationId,
@@ -843,17 +847,17 @@
                  //   })
                  // }
                })
                params.details=arr
                params.details = arr
              }
            }else if(this.editConfig.title === "新建"){
              if(this.workType===2){
                params.details.map((item)=>{
                  item.fromLocationId=item.fromLocationId.value
            } else if (this.editConfig.title === "新建") {
              if (this.workType === 2) {
                params.details.map((item) => {
                  item.fromLocationId = item.fromLocationId.value
                })
              }else if(this.workType===3){
                params.details.map((item)=>{
                  item.fromLocationId=item.fromLocationId.value
                  item.toLocationId=item.toLocationId.value
              } else if (this.workType === 3) {
                params.details.map((item) => {
                  item.fromLocationId = item.fromLocationId.value
                  item.toLocationId = item.toLocationId.value
                })
              }
            }
@@ -870,7 +874,7 @@
                  this.$message.success("编辑成功")
                }
                this.$parent.getData()
              }else{
              } else {
                this.$message.success(res.msg)
              }
            })
@@ -897,8 +901,8 @@
        contacterID = Object.keys(this.contacterObj).length === 0 ? data.contacterID : this.contacterObj.value
        contacterName = Object.keys(this.contacterObj).length === 0 ? data.contacterName : this.contacterObj.label
      }
      let params={}
      if(this.workType===1||this.workType===2){
      let params = {}
      if (this.workType === 1 || this.workType === 2) {
        params = {
          baseOperationType: data.baseOperationType,
          comment: data.comment || "",
@@ -913,7 +917,7 @@
          operationDate: data.operationDate || "",
          operationTypeId: this.showOperationType ? data.operationTypeId : this.editConfig.operationTypeId,
          operationTypeName: this.receiptType,
          sourceNumber:data.sourceNumber || "" ,
          sourceNumber: data.sourceNumber || "",
          status: 3,
          // toLocationId: data.toLocation.value||0,
          waybillNumber: data.waybillNumber || "",
@@ -924,7 +928,7 @@
          receiverName: data.receiverName || "",
          receiverPhone: data.receiverPhone || ""
        }
      }else if(this.workType===3){
      } else if (this.workType === 3) {
        params = {
          baseOperationType: data.baseOperationType,
          comment: data.comment || "",
@@ -939,9 +943,9 @@
          operationDate: data.operationDate || "",
          operationTypeId: this.showOperationType ? data.operationTypeId : this.editConfig.operationTypeId,
          operationTypeName: this.receiptType,
          sourceNumber:data.sourceNumber || "" ,
          sourceNumber: data.sourceNumber || "",
          status: 3,
          toLocationId: data.toLocation.value||0,
          toLocationId: data.toLocation.value || 0,
          waybillNumber: data.waybillNumber || "",
          weight: data.weight || 0,
          logisticWeight: data.logisticWeight || 0,
@@ -975,6 +979,7 @@
          return {
            ...item,
            productName: item.product.name,
            productId: item.product.id,
            unit: item.product.unit
          }
        })
@@ -983,27 +988,36 @@
        this.tableData = []
      }
      // this.tableData = this.editConfig.title !== "新建" ? list : []
      let tableColumnArr=[]
      if(this.workType===1){
        tableColumnArr= [
          { label: "产品", prop: "productName", productName: true, isRequird: true },
          { label: "数量", prop: "amount", inputFloat: true },
          { label: "计量单位", prop: "unit" }
        ]
      }else if(this.workType===2){
      let tableColumnArr = []
      if (this.workType === 1) {
        tableColumnArr = [
          { label: "产品", prop: "productName", productName: true, isRequird: true },
          { label: "从", prop: "fromLocationId", sonLocation: true, isRequird: true },
          { label: "数量", prop: "amount", inputFloat: true },
          { label: "计量单位", prop: "unit" }
          { label: "产品名称", prop: "productName", productName: true, isRequird: true },
          { label: "产品编码", prop: "productId" },
          { label: "计量单位", prop: "unit" },
          { label: "产品规格", prop: "specs" },
          { label: "产品型号", prop: "model" },
          { label: "数量", prop: "amount", inputFloat: true }
        ]
      }else if(this.workType===3){
      } else if (this.workType === 2) {
        tableColumnArr = [
          { label: "产品", prop: "productName", productName: true, isRequird: true },
          { label: "从", prop: "fromLocationId", sonLocation: true, isRequird: true },
          { label: "至", prop: "toLocationId", toLocation: true,isRequird: true },
          { label: "数量", prop: "amount", inputFloat: true },
          { label: "计量单位", prop: "unit" }
          { label: "产品名称", prop: "productName", productName: true, isRequird: true },
          { label: "产品编码", prop: "productId" },
          { label: "计量单位", prop: "unit" },
          { label: "产品规格", prop: "specs" },
          { label: "产品型号", prop: "model" },
          // { label: "调出位置", prop: "fromLocationId", sonLocation: true, isRequird: true },
          { label: "数量", prop: "amount", inputFloat: true }
        ]
      } else if (this.workType === 3) {
        tableColumnArr = [
          { label: "产品名称", prop: "productName", productName: true, isRequird: true },
          { label: "产品编码", prop: "productId" },
          { label: "计量单位", prop: "unit" },
          { label: "产品规格", prop: "specs" },
          { label: "产品型号", prop: "model" },
          { label: "调出位置", prop: "fromLocationId", sonLocation: true, isRequird: true },
          { label: "调入位置", prop: "toLocationId", toLocation: true, isRequird: true },
          { label: "数量", prop: "amount", inputFloat: true }
        ]
      }
      this.productTableList = {
@@ -1023,56 +1037,92 @@
    // 新增
    addProductClick(value) {
      console.log(value)
      if (value === "操作") {
        console.log(this.tableData)
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].productName.length === 0) {
            this.isNoProduct = false
            break
          } else {
            this.isNoProduct = true
          }
        }
        if (this.isNoProduct) {
          this.countId++
          this.tableData.push({
            countId: this.countId,
            productId: "",
            amount: 0,
            unit: "",
            productName: "",
          })
        }
      } else {
        console.log(this.detailTableData)
        for (let i = 0; i < this.detailTableData.length; i++) {
          if (this.detailTableData[i].name.length === 0) {
            this.isNoDetail = true
            break
          } else {
            this.isNoDetail = false
          }
        }
        if (!this.isNoDetail) {
          this.detailId++
          this.detailTableData.push({
            detailId: this.detailId,
            id: 0,
            amount: 0,
            desc: "",
            name: "",
            number: "",
            price: 0,
            total: 0
          })
        }
      // if (value === "操作") {
      //   console.log(this.tableData)
      //   for (let i = 0; i < this.tableData.length; i++) {
      //     if (this.tableData[i].productName.length === 0) {
      //       this.isNoProduct = false
      //       break
      //     } else {
      //       this.isNoProduct = true
      //     }
      //   }
      //   if (this.isNoProduct) {
      //     this.countId++
      //     this.tableData.push({
      //       countId: this.countId,
      //       productId: "",
      //       amount: 0,
      //       unit: "",
      //       productName: ""
      //     })
      //   }
      // } else {
      //   console.log(this.detailTableData)
      //   for (let i = 0; i < this.detailTableData.length; i++) {
      //     if (this.detailTableData[i].name.length === 0) {
      //       this.isNoDetail = true
      //       break
      //     } else {
      //       this.isNoDetail = false
      //     }
      //   }
      //   if (!this.isNoDetail) {
      //     this.detailId++
      //     this.detailTableData.push({
      //       detailId: this.detailId,
      //       id: 0,
      //       amount: 0,
      //       desc: "",
      //       name: "",
      //       number: "",
      //       price: 0,
      //       total: 0
      //     })
      //   }
      // }
    },
    // 新增方式修改
    getSelectArray(val, index) {
      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)
      }
      console.log(this.tableData)
      let list = this.tableData.map((res) => {
        return {
          ...res,
          productName: res.name,
          productId: res.id
        }
      })
      this.tableData = list
      this.productTableList.tableData = list
      // this.showSummary.show = true
    },
    //  产品清空
    emptyProductClick() {
      this.tableData = []
      this.productTableList.tableData = this.tableData
    },
    clearupProduct(data) {
      this.tableData = data
      this.productTableList.tableData = this.tableData
    },
    // 删除
    handleDelClick(scope, value) {
      console.log(scope)
      if (value === "操作") {
        this.tableData.splice(scope.$index, 1)
        this.productTableList.tableData.splice(scope.$index, 1)
        this.$message.success("删除成功！")
      } else {
        this.detailTableData.splice(scope.$index, 1)
      }
@@ -1186,20 +1236,20 @@
        }
      }
    },
    // 源位置选择
    rootLocationChange(val){
      this.editConfig.infomation.location=val
    // 调出位置选择
    rootLocationChange(val) {
      this.editConfig.infomation.location = val
      // this.productTableList.tableData.map((item)=>{
      //   console.log(item,"item")
      //   // item.toLocationId={}
      //   // item.fromLocationId={}
      // })
      this.$refs.tableView.setLocationList(val.label,"fromLocation")
      this.$refs.tableView.setLocationList(val.label, "fromLocation")
    },
    // 仓库位置选择
    toLocationChange(val){
      this.editConfig.infomation.toLocation=val
      this.$refs.tableView.setLocationList(val.label,"toLocation")
    toLocationChange(val) {
      this.editConfig.infomation.toLocation = val
      this.$refs.tableView.setLocationList(val.label, "toLocation")
    }
  }
}

 src/views/overview/OverviewListView.vue

@@ -14,27 +14,61 @@
        @delSelectClick="delSelectClick"
      />
    </div>
    <div class="list-view">
      <div class="table">
        <TableCommonView ref="tableListRef" :table-list="tableList" @selTableCol="selTableCol">
          <template slot="tableButton">
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="tableRowClick(scope.row, '查看')" type="text" size="small">查看</el-button>
                <el-button
                  v-if="scope.row.status !== 4 && scope.row.status !== 5"
                  @click="tableRowClick(scope.row, '编辑')"
                  type="text"
                  size="small"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </template>
        </TableCommonView>
    <div class="body">
      <!-- <div class="body-card"> -->
      <div class="content-top">
        <div class="list-view">
          <TableCommonView
            ref="tableListRef"
            :table-list="tableList"
            @selTableCol="selTableCol"
            @tableRowClick="tableRowClick"
            :selectClassRow="selectRow"
          >
            <template slot="tableButton">
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button @click="viewEditClick(scope.row, '查看')" type="text" size="small">查看</el-button>
                  <el-button
                    v-if="scope.row.status !== 4 && scope.row.status !== 5"
                    @click="viewEditClick(scope.row, '编辑')"
                    type="text"
                    size="small"
                    >编辑</el-button
                  >
                </template>
              </el-table-column>
            </template>
          </TableCommonView>
          <div class="btn-pager">
            <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
          </div>
        </div>
      </div>
      <div class="btn-pager">
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      <div class="content-bottom">
        <div class="bottom-tabs">
          <div
            class="tab-pane"
            @click="getTab(0)"
            :style="{
              background: TabsIndex == 0 ? '#2a78fb' : '#F1F3F8',
              color: TabsIndex == 0 ? '#fff' : '#666'
            }"
          >
            产品信息
          </div>
        </div>
        <div class="list-view">
          <TableCommonView :table-list="productTableList" @selTableCol="selBottomTableCol">
            <!-- <template slot="tableButton">
              <el-table-column label="操作" width="160" fixed="right">
                <template slot-scope="scope">
                  <el-button @click="viewClick(scope.row)" type="text" size="small">查看</el-button>
                </template>
              </el-table-column>
            </template> -->
          </TableCommonView>
        </div>
      </div>
    </div>
    <!-- 新建/编辑 -->
@@ -83,7 +117,30 @@
      toLabel: "",
      addName: "",
      searchTaskMap: [],
      numberLabel: "单号"
      numberLabel: "单号",
      TabsIndex: "0",
      productTableList: {},
      showBottomCol: ["产品编号", "产品名称", "产品规格", "产品型号", "计量单位", "调出位置", "调入位置", "数量"],
      tableBottomColumn: [],
      selectRow: {},
      productColumn: [
        { label: "产品编号", prop: "id", default: true },
        { label: "产品名称", prop: "productName" },
        { label: "产品规格", prop: "specs" },
        { label: "产品型号", prop: "model" },
        { label: "计量单位", prop: "unit" },
        { label: "数量", prop: "amount" }
      ],
      allotProductColumn: [
        { label: "产品编号", prop: "id", default: true },
        { label: "产品名称", prop: "productName" },
        { label: "产品规格", prop: "specs" },
        { label: "产品型号", prop: "model" },
        { label: "计量单位", prop: "unit" },
        { label: "调出位置", prop: "location" },
        { label: "调入位置", prop: "toLocation" },
        { label: "数量", prop: "amount" }
      ]
    }
  },
  created() {
@@ -140,6 +197,8 @@
        }
      }
      this.tableList.allcol = allcol
      this.tableBottomColumn = this.workType == 3 ? this.allotProductColumn : this.productColumn
      this.setBottomList()
    },
    setTableColumn(showcol) {
      let tableColumn = [
@@ -253,8 +312,31 @@
          })
          this.tableList.tableInfomation = list || []
          this.pagerOptions.totalCount = res.total
          if (res.total > 0) {
            this.selectRow = this.tableList.tableInfomation.length > 0 ? this.tableList.tableInfomation[0] : {}
            this.tableRowClick(this.selectRow)
            this.bottomProductData(this.selectRow)
          }
        }
      })
    },
    // bottom产品信息数据处理
    bottomProductData(arr) {
      const list = arr.details.map((item) => {
        return {
          ...item,
          productName: item.product.name,
          unit: item.product.unit,
          location: arr.location.name,
          toLocation: arr.toLocation.name
        }
      })
      this.productTableList.tableInfomation = list
    },
    // top 行点击
    tableRowClick(row) {
      this.selectRow = row
      this.bottomProductData(this.selectRow)
    },
    // 搜索
    getList(val) {
@@ -264,26 +346,26 @@
      this.getData()
    },
    // 查看 编辑
    tableRowClick(row, val) {
    viewEditClick(row, val) {
      this.editConfig.visible = true
      this.editConfig.title = val
      this.editConfig.operationTypeId = this.params.id
      this.editConfig.code = this.params.code
      row.details.map((item)=>{
        item.fromLocationId=item.fromLocation.jointName
        item.toLocationId=item.toLocation.jointName
      row.details.map((item) => {
        item.fromLocationId = item.fromLocation.jointName
        item.toLocationId = item.toLocation.jointName
      })
      row.location={
        value:row.location.id||row.location.value,
        label:row.location.jointName||row.location.label
      row.location = {
        value: row.location.id || row.location.value,
        label: row.location.jointName || row.location.label
      }
      row.toLocation={
        value:row.toLocation.id||row.toLocation.value,
        label:row.toLocation.jointName||row.toLocation.label
      row.toLocation = {
        value: row.toLocation.id || row.toLocation.value,
        label: row.toLocation.jointName || row.toLocation.label
      }
      row.locationID=row.location.jointName
      row.locationId=row.location.value
      
      row.locationID = row.location.jointName
      row.locationId = row.location.value

      // row.tolocationId=row.tolocation.value
      this.editConfig.infomation = { ...row }
    },
@@ -306,6 +388,47 @@
    delSelectClick() {
      this.params.status = 0
      this.getData()
    },
    // bottom 产品信息
    // bom 列表
    setBottomList() {
      this.productTableList = {
        selectIndex: true,
        tableInfomation: [],
        allcol: [],
        showcol: this.showBottomCol,
        tableColumn: this.setColumnVisible(this.showBottomCol, this.tableBottomColumn)
      }
      this.setTableList(this.productTableList)
    },
    setTableList(tableList) {
      tableList.allcol = tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
      // this.searchOptions = []
      // for (let i = 0; i < tableList.tableColumn.length; i++) {
      //   const label = tableList.tableColumn[i].label
      //   const value = tableList.tableColumn[i].prop
      //   this.searchOptions.push({ value: value, label: label })
      // }
    },
    setColumnVisible(showCol, tableColumn) {
      return tableColumn.map((ele) => {
        return {
          ...ele,
          isShowColumn: showCol.includes(ele.label)
        }
      })
    },
    selBottomTableCol(val) {
      this.showBottomCol = val
      this.productTableList.tableColumn = this.setColumnVisible(val, this.tableBottomColumn)
    },
    getTab(tab) {
      this.TabsIndex = tab
      // if (this.TabsIndex == 0) {
      //   // 产品信息列表
      //   this.setBottomList()
      //   this.getProductInventoryInfo(this.selectRow)
      // }
    }
  }
}
@@ -313,6 +436,69 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.rightContent {
  height: 100%;
  overflow: hidden;
  .body {
    box-sizing: border-box;
    padding: 10px 20px;
    border-radius: 12px;
    height: calc(100% - 70px);
    .content-top {
      background-color: #fff;
      border-radius: 12px;
      min-height: 70px;
      height: 48%;
      position: relative;
      .list-view {
        height: calc(100% - 50px);
      }
    }
    .content-bottom {
      .bottom-tabs {
        height: 40px;
        line-height: 40px;
        background: #e6ecf2;
        display: flex;
        .tab-pane {
          width: 100px;
          margin-right: 20px;
          font-size: 14px !important;
          text-align: center;
          cursor: pointer;
          background: #2a78fb;
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
        }
      }
      .lable-view {
        background: #e6ecf2;
        height: 40px;
        line-height: 40px;
        .name {
          border-left: 4px solid #2a78fb;
          padding-left: 10px;
        }
      }
      background-color: #fff;
      border-radius: 12px;
      min-height: 70px;
      height: calc(52% - 60px);
      margin-top: 10px;
      // padding: 10px 20px;
      .list-view {
        height: calc(100% - 10px);
      }
    }
    .btn-pager {
      display: flex;
      margin-top: 0px;
      .page {
        margin-left: auto;
      }
    }
  }
}
.label-fixed-element {
  background: #e6ecf2;
  position: fixed;
@@ -326,4 +512,13 @@
  margin-top: -60px;
  margin-left: -5px;
}
::v-deep {
  .el-table__header-wrapper {
    position: sticky;
    width: 100%;
    //  left:0px;
    top: 0px;
    z-index: 2000;
  }
}
</style>