采购管理订单页面和新增采购单页面修改

yangfeng

2024-03-07 21d14a5080768c7ecd9cf0df05c064eaa5d5a7b8

采购管理订单页面和新增采购单页面修改

 src/components/makepager/TableCommonView.vue

@@ -326,6 +326,12 @@
      }
      this.$emit("tableRowClassName", row)
    }
  },
  //解决表格抖动问题
  beforeUpdate() {
    this.$nextTick(() => {
      this.$refs["table"].doLayout()
    })
  }
}
</script>

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

@@ -97,11 +97,11 @@
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
              <!-- <el-col :span="12">
                <el-form-item label="单据来源" prop="orderSource">
                  <el-input v-model="editConfig.infomation.orderSource" disabled placeholder="请填写"></el-input>
                </el-form-item>
              </el-col>
              </el-col> -->
              <el-col :span="12">
                <el-form-item label="采购单名称" prop="name">
                  <el-input
@@ -160,6 +160,38 @@
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收货仓库" prop="receiveWarehouse">
                  <el-select
                    placeholder="请选择收货仓库"
                    v-model="editConfig.infomation.receiveWarehouse"
                    clearable
                    style="width: calc(100% - 0px)"
                  >
                    <el-option
                      v-for="(ele, index) in receiveWhouseList"
                      :key="index"
                      :label="ele.name"
                      :value="ele.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地址" prop="address">
                  <el-input v-model="editConfig.infomation.address" placeholder="请填写" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接收人" prop="recipient">
                  <el-input v-model="editConfig.infomation.recipient" placeholder="请填写" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="来源单据" prop="sourceDoc">
                  <el-input v-model="editConfig.infomation.sourceDoc" placeholder="请填写" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
@@ -723,7 +755,7 @@
        this.tableData = [
          {
            purchaseId: 0,
            productId:Number(this.productId),
            productId: Number(this.productId),
            productIndex: this.productIndex,
            amount: 0,
            name: "",

 src/views/purchaseManage/purchase/index.vue

@@ -16,7 +16,7 @@
    </div>

    <div class="body">
      <div class="body-card">
      <div class="content-top">
        <div class="list-view">
          <TableCommonView
            ref="tableListRef"
@@ -72,6 +72,41 @@
          <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
        </div>
      </div>
      <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
            class="tab-pane"
            @click="getTab(1)"
            :style="{
              background: TabsIndex == 1 ? '#2a78fb' : '#F1F3F8',
              color: TabsIndex == 1 ? '#fff' : '#666'
            }"
          >
            收货信息
          </div>
        </div>
        <div class="list-view">
          <TableCommonView :loading="loading" :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>

    <!-- 新建/编辑销售线索 -->
@@ -97,6 +132,29 @@
  mixins: [pageMixin],
  computed: {},
  data() {
    // 产品信息
    const productColumn = [
      { label: "产品编号", prop: "number", default: true },
      { label: "产品名称", prop: "name" },
      { label: "规格型号", prop: "desc" },
      { label: "采购数量", prop: "purchaseAmount" },
      { label: "已发货数量", prop: "margin" },
      { label: "已入库数量", prop: "amount" },
      { label: "单位", prop: "unit" },
      { label: "采购单价", prop: "price", price: true },
      { label: "价税合计", prop: "total", price: true }
    ]
    // 收货信息
    const recriveColumn = [
      { label: "入库单号", prop: "number", default: true },
      { label: "收货仓库", prop: "name" },
      { label: "产品名称", prop: "orderAmount" },
      { label: "产品编码", prop: "invoice" },
      { label: "数量", prop: "carrier" },
      { label: "入库时间", prop: "waybill" },
      { label: "收货人", prop: "warehouse" },
      { label: "状态", prop: "amount" }
    ]
    return {
      purchaseStatusList: getDataByType("purchaseStatus"),
      tableLoading: false,
@@ -127,7 +185,28 @@
        { label: "经办人", prop: "handledBy", min: 130 },
        { label: "制单人", prop: "creator", min: 130 }
      ],
      showCol: ["采购单号", "采购单名称", "单据类型", "供应商名称", "采购数量", "收货仓库", "经办人", "制单人"]
      showCol: ["采购单号", "采购单名称", "单据类型", "供应商名称", "采购数量", "收货仓库", "经办人", "制单人"],
      tableBottomColumn: [],
      showBottomCol: [],
      TabsIndex: "0",
      productTableList: {},
      // 产品信息
      productColumn: productColumn,
      showProductCol: [
        "产品编号",
        "产品名称",
        "规格型号",
        "采购数量",
        "已发货数量",
        "已入库数量",
        "单位",
        "采购单价",
        "价税合计"
      ],
      // 收货信息
      recriveColumn: recriveColumn,
      showReceiveCol: ["入库单号", "收货仓库", "产品名称", "产品编号", "数量", "入库时间", "收货人", "状态"],
      loading: false
    }
  },
  created() {
@@ -169,8 +248,8 @@
        return "--"
      }
    },
    setColumnVisible(showCol) {
      return this.tableColumn.map((ele) => {
    setColumnVisible(showCol, tableColumn) {
      return tableColumn.map((ele) => {
        return {
          ...ele,
          isShowColumn: showCol.includes(ele.label)
@@ -183,9 +262,13 @@
        selectIndex: true,
        showcol: this.showCol,
        allcol: [],
        tableColumn: this.setColumnVisible(this.showCol)
        tableColumn: this.setColumnVisible(this.showCol, this.tableColumn)
      }
      this.tableList.allcol = this.tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
      // bottom 产品信息/收货信息
      this.tableBottomColumn = this.productColumn
      this.showBottomCol = this.showProductCol
      this.setBottomList()
    },
    selTableCol(val) {
      this.showcol = val
@@ -406,6 +489,76 @@
      setTimeout(() => {
        this.tableLoading = false
      }, 3000)
    },
    // 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 })
      }
    },
    // bottom 产品信息
    selBottomTableCol(val) {
      this.showcol = val
      this.productTableList.tableColumn = this.setColumnVisible(val, this.tableBottomColumn)
    },
    //获取当前选中资源的id
    getTab(tab) {
      this.TabsIndex = tab
      if (this.TabsIndex == 0) {
        // 产品信息列表
        this.tableBottomColumn = this.productColumn
        this.showBottomCol = this.showProductCol
        this.setBottomList()
        this.getProductInventoryInfo(this.selectRow)
      } else if (this.TabsIndex == 1) {
        // 收货信息列表
        this.tableBottomColumn = this.recriveColumn
        this.showBottomCol = this.showReceiveCol
        this.setBottomList()
        // if (this.selectRow.status == 1) {
        //   this.productTableList.tableInfomation = []
        // } else {
        this.getProductInventoryInfo(this.selectRow)
        // }
      }
    },
    // 状态
    getStatus(val) {
      return val === 1 ? "待确认" : val === 2 ? "待出库" : val === 3 ? "出库完成" : val === 4 ? "已关闭" : "--"
    },
    // 获取产品/收货信息
    async getProductInventoryInfo(row) {
      console.log(row)
      // if (this.TabsIndex == 0 || row.status == 1) {
      //   this.productTableList.tableInfomation = row.products || []
      // } else {
      //   if (row.number) {
      //     this.loading = true
      //     await getProductInventoryInfo(row.number)
      //       .then((res) => {
      //         this.productTableList.tableInfomation = res.data?.length > 0 ? res.data : []
      //         this.loading = false
      //       })
      //       .catch(() => {
      //         this.productTableList.tableInfomation = []
      //         this.loading = false
      //       })
      //   }
      // }
    }
  }
}
@@ -438,15 +591,51 @@
    padding: 10px 20px;
    border-radius: 12px;
    height: calc(100% - 92px);
    &-card {
    .content-top {
      background-color: #fff;
      border-radius: 12px;
      height: 100%;
      overflow: hidden;
      min-height: 70px;
      height: 48%;
      position: relative;
      .list-view {
        height: calc(100% - 60px);
      }
    }
    .list-view {
      height: calc(100% - 60px);
      overflow: hidden;
    .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;