aiot-app/pages/pda/components/outsourceList.vue

<template>
  <view>
    <!-- 委外下一步 -->
    <u-popup :show="show" :mode="mode" :closeOnClickOverlay="false">
      <view class="card_box">
        <view class="item_box rx-bc">
          <view class="item_one rx-sc">
            <view class="lable">委外名称：</view>
            <view style="color: #157a2c">{{ outObj.name }}</view>
          </view>
        </view>

        <view class="item_box rx-bc">
          <view class="item_one perce50 rx-sc">
            <view class="lable">委外类型：</view>
            <view style="color: #157a2c">{{
              outObj.type == 4 ? "带料委外" : "无料委外"
            }}</view>
          </view>

          <view class="item_one perce50 rx-sc">
            <view class="lable">直接入库：</view>
            <view style="color: #157a2c">{{
              outObj.isInWarehouse == 1 ? "是" : "否"
            }}</view>
          </view>
        </view>
      </view>

      <u-tabs
        :list="tabList"
        @click="handTab"
        lineWidth="30"
        lineColor="#157A2C"
        :activeStyle="{
          color: '#157A2C',
        }"
        :inactiveStyle="{
          color: '#303133',
        }"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
      >
      </u-tabs>
      <view class="box_list">
        <u-list @scrolltolower="scrolltolower" class="z_list">
          <view v-if="actTab == '物品清单'">
            <view
              class="rx-bc"
              v-if="outObj.isStraight != 1 && clientEnvironmentId != 2"
            >
              <view style="margin-left: 24rpx">
                <checkbox
                  v-if="!seletedAll"
                  color="#fff"
                  :checked="seletedAll"
                  @tap="_seletedAll"
                  >全选
                </checkbox>
                <checkbox
                  class="select-all"
                  color="#fff"
                  v-else
                  :checked="seletedAll"
                  @tap="_seletedAll"
                >
                  取消全选
                </checkbox>
              </view>

              <view
                >勾选：<text style="color: #157a2c"
                  >{{ checkListLen || 0 }}个</text
                >
              </view>
            </view>

            <u-form
              labelPosition="left"
              :model="outObj"
              labelWidth="180"
              labelAlign="left"
              class=""
              v-if="checkListLen > 0 && clientEnvironmentId != 2"
            >
              <u-form-item label="收货仓库:" borderBottom prop="warehouseId">
                <zxz-uni-data-select
                  :localdata="warehouseList"
                  v-model="outObj.warehouseId"
                  dataValue="id"
                  dataKey="name"
                  filterable
                  format="{name}"
                ></zxz-uni-data-select>
              </u-form-item>
            </u-form>

            <checkbox-group
              v-for="(item, index) in pickOutInList"
              :key="index"
              @change="(e) => selectVal(e, item, index)"
            >
              <label class="listBox rx-bs">
                <view class="listBox-sel">
                  <checkbox
                    v-if="
                      (item.rootCategoryLevelId != 11 ||
                        (item.rootCategoryLevelId == 11 && item.status != 1)) &&
                      clientEnvironmentId != 2
                    "
                    :value="item.code"
                    color="#fff"
                    :disabled="outObj.isStraight == 1"
                    :checked="item.checked"
                  />
                </view>

                <view class="listBox-con">
                  <view class="listBox-top rx-bc">
                    <view> {{ item.name }}</view>
                    <view class="code">
                      {{
                        item.rootCategoryLevelId == 4
                          ? item.codeNumber
                          : item.code
                      }}
                    </view>
                  </view>

                  <view class="listBox-bottom rx">
                    <view
                      v-for="(itm, index) in tableH(item.rootCategoryLevelId)"
                      :key="index"
                      class="items"
                      v-if="!itm.formatter"
                    >
                      <text>{{ itm.label }}</text
                      >{{ item[itm.prop] }}
                    </view>

                    <view
                      class="items"
                      v-if="
                        item.rootCategoryLevelId == 1 &&
                        item.isConsumable == 1 &&
                        item.rootCategoryLevelId != 11 &&
                        item.rootCategoryLevelId != 4
                      "
                    >
                      <text>可用库存</text>{{ item.availableCountBase }}
                      {{ item.unit }}
                    </view>

                    <view
                      class="items"
                      v-if="
                        [1, 2, 9, 23].includes(
                          Number(item.rootCategoryLevelId)
                        ) && item.isConsumable == 0
                      "
                    >
                      <text>刻码</text>{{ item.extInfo.engrave }}
                    </view>

                    <view
                      class="items"
                      v-if="
                        [1, 2, 9, 23].includes(
                          Number(item.rootCategoryLevelId)
                        ) && item.isConsumable == 0
                      "
                    >
                      <text>物料代号</text>{{ item.extInfo.materielCode }}
                    </view>

                    <view
                      class="items"
                      v-if="
                        [1, 2, 9, 23].includes(
                          Number(item.rootCategoryLevelId)
                        ) && item.isConsumable == 0
                      "
                    >
                      <text>客户代号</text>{{ item.extInfo.clientCode }}
                    </view>

                    <view
                      class="items"
                      v-if="
                        [1, 2, 9, 23].includes(
                          Number(item.rootCategoryLevelId)
                        ) && item.isConsumable == 0
                      "
                    >
                      <text>重量</text>{{ item.extInfo.newWeight }}
                      {{ item.extInfo.weightUnit }}
                    </view>

                    <view
                      class="items"
                      v-if="
                        [1, 2, 9, 23].includes(
                          Number(item.rootCategoryLevelId)
                        ) && item.isConsumable == 1
                      "
                    >
                      <text>数量</text>{{ item.feedQuantity }}
                    </view>

                    <view
                      class="items"
                      v-if="
                        [1, 2, 9, 23].includes(
                          Number(item.rootCategoryLevelId)
                        ) && item.isConsumable == 1
                      "
                    >
                      <text>重量</text>{{ item.weight || 0 }}
                      {{ item.weightUnit }}
                    </view>

                    <view
                      class="items"
                      v-if="
                        [1, 2, 9, 23].includes(
                          Number(item.rootCategoryLevelId)
                        ) && item.isConsumable == 1
                      "
                    >
                      <text>规格</text> {{ item.specification }}
                    </view>

                    <view
                      class="items"
                      v-if="
                        [1, 2, 9, 23].includes(
                          Number(item.rootCategoryLevelId)
                        ) && item.isConsumable == 1
                      "
                    >
                      <text>型号</text> {{ item.modelType }}
                    </view>
                  </view>
                </view>
              </label>
            </checkbox-group>
          </view>

          <view v-if="actTab == '带料清单'">
            <view class="title_box rx-bc">
              <view></view>
              <view class="right_box rx-ec">
                <u-button
                  type="success"
                  size="small"
                  class="u-reset-button"
                  @click="addPicking(2)"
                  text="添加"
                ></u-button>
              </view>
            </view>
            <view v-for="(item, index) in bomMaterialList" :key="index">
              <label class="listBox rx-bs">
                <view class="listBox-sel">
                  <view class="round">{{ index + 1 }}</view>
                </view>

                <view class="listBox-con">
                  <view class="listBox-bottom rx">
                    <view class="items">
                      <text>名称</text>{{ item.name }}
                    </view>

                    <view class="items">
                      <text>编码</text>{{ item.code }}
                    </view>

                    <view
                      v-for="(itm, index) in tableH(item.rootCategoryLevelId)"
                      :key="index"
                      class="items"
                      v-if="!itm.formatter"
                    >
                      <text>{{ itm.label }}</text
                      >{{ item[itm.prop] }}
                    </view>

                    <view
                      class="items"
                      v-if="item.isDemandQuantity && clientEnvironmentId != 2"
                    >
                      <text>数量</text
                      >{{
                        checkListLen == 0
                          ? item.demandQuantity
                          : item.count * (checkListLen || 1)
                      }}
                    </view>
                    <view
                      class="items content_num"
                      v-if="!item.isDemandQuantity && clientEnvironmentId != 2"
                    >
                      <text>数量</text>
                      <input
                        style="8px !important"
                        v-model="item.demandQuantity"
                      />
                    </view>

                    <view
                      class="items"
                      v-if="item.isDemandQuantity && clientEnvironmentId == 2"
                    >
                      <text>数量</text
                      >{{ item.count * (outObj.formedNumLast || 1) }}
                    </view>
                    <view
                      class="items content_num"
                      v-if="!item.isDemandQuantity && clientEnvironmentId == 2"
                    >
                      <text>数量</text>
                      <input
                        style="8rpx !important"
                        v-model="item.demandQuantity"
                      />
                    </view>
                  </view>
                </view>
              </label>
            </view>
          </view>

          <view v-if="actTab == '产出清单'">
            <view class="title_box rx-bc">
              <view></view>
              <view class="right_box rx-ec">
                <u-button
                  type="success"
                  size="small"
                  class="u-reset-button"
                  @click="addPicking(3)"
                  text="添加"
                ></u-button>
              </view>
            </view>

            <view v-for="(item, index) in standardOutputList" :key="index">
              <label class="listBox rx-bs">
                <view class="listBox-sel">
                  <view class="round">{{ index + 1 }}</view>
                </view>

                <view class="listBox-con">
                  <view class="listBox-bottom rx">
                    <view class="items">
                      <text>名称</text>{{ item.name }}
                    </view>

                    <view class="items">
                      <text>编码</text>{{ item.code }}
                    </view>

                    <view
                      v-for="(itm, index) in tableH(item.rootCategoryLevelId)"
                      :key="index"
                      class="items"
                      v-if="!itm.formatter"
                    >
                      <text>{{ itm.label }}</text
                      >{{ item[itm.prop] }}
                    </view>

                    <view class="items content_num">
                      <text>数量</text>
                      <input
                        style="8rpx !important"
                        v-model="item.demandQuantity"
                      />
                    </view>
                  </view>
                </view>
              </label>
            </view>
          </view>
        </u-list>

        <view class="operate_box rx-bc">
          <u-button size="small" class="u-reset-button" @click="close">
            取消
          </u-button>
          <u-button
            type="success"
            size="small"
            class="u-reset-button"
            @click="handOK(0)"
          >
            提交
          </u-button>

          <u-button
            type="success"
            size="small"
            class="u-reset-button"
            @click="handOK(1)"
          >
            提交并发布
          </u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  checkOutsourceMaterial,
  applyoutsourceSave,
  getWarehouseList,
} from "@/api/pda/workOrder.js";

import { tableHeader } from "../common.js";
import { EventBus } from "@/utils/eventBus.js";
export default {
  data() {
    return {
      mode: "center",
      show: false,
      topHight: 20 || 20,

      outObj: {},

      tabList: [
        {
          name: "物品清单",
        },
        {
          name: "带料清单",
        },
        {
          name: "产出清单",
        },
      ],

      actTab: "物品清单",

      bomMaterialList: [],
      pickOutInList: [],
      materialList: [],
      standardOutputList: [],

      isFirstTask: null,

      clientEnvironmentId:
        uni.getStorageSync("userInfo") &&
        uni.getStorageSync("userInfo").clientEnvironmentId, // *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境

      seletedAll: false, //全选状态
      checkListLen: 0,

      warehouseList: [],
    };
  },

  created() {
    EventBus.$on("outEvent", this.handleEvent);
  },

  computed: {},

  methods: {
    open(obj) {
      this.outObj = obj;
      (this.actTab = "物品清单"), this.outsourceMaterialFn();
      this.getWarehouseFn();
      this.show = true;
    },

    outsourceMaterialFn() {
      let param = {
        taskId: this.outObj.taskId,
        taskIds: this.outObj.taskIds,
        workOrderId: this.outObj.workOrderId,
        quantity: this.outObj.formedNumLast,
      };
      checkOutsourceMaterial(param).then((res) => {
        let _arr = [];
        _arr = [...res.pickOutInList, ...res.materialList];
        this.pickOutInList = _arr.reduce((acc, item) => {
          const existingItem = acc.find((existing) => existing.id === item.id);
          if (!existingItem) {
            acc.push(item);
          }
          return acc;
        }, []);

        this.bomMaterialList = res.bomMaterialList.map((m) => {
          return {
            ...m,
            isDemandQuantity: true,
          };
        });
        this.standardOutputList = res.standardOutputList;
        this.$forceUpdate();
      });
    },

    // 仓库
    getWarehouseFn() {
      getWarehouseList().then((res) => {
        this.warehouseList = res;
      });
    },

    handTab(item) {
      this.actTab = item.name;
    },

    close() {
      this.show = false;
    },

    handleEvent({ message }) {
      console.log(message, "message999999999999");

      if (message.pid == 3) {
        this.standardOutputList = [
          ...this.standardOutputList,
          ...message.memoList,
        ];
      } else {
        if (message.pid == 2) {
          this.bomMaterialList = message.memoList;
          // console.log(this.bomMaterialList,'1111111111');
          // return
        }
      }
    },

    tableH(type) {
      return tableHeader(type);
    },
    //勾选
    selectVal(e, val, index) {
      this.pickOutInList[index].checked = !this.pickOutInList[index].checked;
      this.checkListLen = this.pickOutInList.filter(
        (f) => f.checked == true
      ).length;
    },

    _seletedAll() {
      if (!this.seletedAll) {
        this.seletedAll = true;

        this.pickOutInList.map((item) => {
          this.$set(item, "checked", true);
        });
      } else {
        this.seletedAll = false;
        this.pickOutInList.map((item) => {
          this.$set(item, "checked", false);
        });
      }

      this.checkListLen = this.pickOutInList.filter(
        (f) => f.checked == true
      ).length;
    },

    scrolltolower() {},

    addPicking(id) {
      const storageKey = Date.now() + "";
      let arr = null;
      if (id == 3) {
        arr = [
          {
            standardOutputList: this.standardOutputList,
          },
        ];
      } else {
        arr = [
          {
            bomMaterialList: this.bomMaterialList,
          },
        ];
      }

      uni.setStorageSync(storageKey, arr);
      uni.navigateTo({
        url: `/pages/pda/workOrder/search/index?id=${id}&storageKey=${storageKey}&isType=weiwai&taskId=${this.outObj.taskId}&classIds=[1,23,9]`,
      });
    },

    handOK(isRelease) {
      if (this.checkListLen > 0 && !this.outObj.warehouseId) {
        uni.showToast({
          title: "请选择仓库",
          icon: "none",
        });
        return;
      }
      let _pickOutInList = [];
      if (this.clientEnvironmentId == 2) {
        _pickOutInList = this.pickOutInList;
      } else {
        _pickOutInList = this.pickOutInList.filter((f) => f.checked == true);
      }

      let param = {
        ...this.outObj,
        isRelease: isRelease,
        bomMaterialList: this.bomMaterialList,
        pickOutInList: _pickOutInList,
        materialList: this.materialList,
        standardOutputList: this.standardOutputList,
      };
      applyoutsourceSave(param).then((res) => {
        uni.showToast({
          title: "提交成功",
          icon: "none",
        });
        this.$emit("close", true);
        this.checkListLen = 0;
        this.close();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.z_list {
  max-height: 860rpx;
  padding: 10rpx;
  box-sizing: border-box;
}

.box_list {
  min-height: 100rpx;
  width: 96vw;

  /deep/ .baseForm {
    padding: 0 20rpx;
  }
}

.operate_box {
  padding: 10rpx 32rpx;

  /deep/ .u-button {
    width: 28%;
  }
}

/deep/ .u-tabs__wrapper__nav {
  background: #f5f5f5 !important;
}

.listBox {
  margin-top: 8rpx;
  padding: 8rpx 24rpx;
  background: #fff;

  /deep/ .uni-checkbox-input-checked {
    background-color: $theme-color !important;
    border-color: $theme-color !important;
  }

  .listBox-sel {
    margin-top: 10rpx;
    margin-right: 8rpx;

    .round {
      width: 32rpx;
      height: 32rpx;
      line-height: 32rpx;
      text-align: center;
      border-radius: 50%;
      background: $theme-color;
      font-size: 24rpx;
      font-style: normal;
      font-weight: 400;
      color: #fff;
    }
  }

  .round {
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    border-radius: 50%;
    background: $theme-color;
    font-size: 24rpx;
    font-style: normal;
    font-weight: 400;
    color: #fff;
  }

  .listBox-con {
    width: 650rpx;
    font-weight: 400;
  }

  .listBox-top {
    margin-top: 6rpx;
    color: #090a0a;
    font-size: 28rpx;
    font-style: normal;
    font-weight: 800;
  }

  .listBox-bottom {
    color: #090a0a;
    font-size: 24rpx;
    font-style: normal;
    flex-wrap: wrap;

    .items {
      width: calc(50% - 1px);
      border-left: 1rpx solid #e3e5e5;
      border-right: 1rpx solid #e3e5e5;
      border-bottom: 1rpx solid #e3e5e5;
      box-sizing: border-box;
      word-break: break-all;

      text {
        display: inline-block;
        background: #f7f9fa;
        padding: 8rpx 10rpx;
        color: #157a2c;
      }

      &:nth-child(1),
      &:nth-child(2) {
        border-top: 1rpx solid #e3e5e5;
        margin-top: 8rpx;
      }
    }
  }
}

.card_box {
  width: 92vw;
  padding: 16rpx 32rpx;
  box-sizing: border-box;
  border-bottom: 2rpx solid #e1e1e1;

  .item_box {
    margin-top: 10rpx;

    .item_one {
      width: 100%;
      font-size: 26rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 38rpx;
      word-wrap: break-word;
    }

    .gylx {
      color: $theme-color;
    }

    .perce50 {
      width: 50%;
    }
  }
}

.content_num {
  display: flex;
  align-items: center;
  padding: 0 4rpx;

  /deep/ .uni-input-input {
    border: 2rpx solid #f0f8f2;
    background: #f0f8f2;
    color: $theme-color;
  }
}
</style>