JG-CLIENT-TEMP/src/views/prepare-complete-suit/popUpView/showInfo.vue

<template>
  <div class="midPopUp" v-if="modelValue">
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="14" class="leftView">
          <div class="btns">
            <!-- <el-button :class="selectedType == 'default' ? 'activeBtn' : ''" @click="setSelectedType('default')"
              type="primary" plain>全 部</el-button> -->
            <el-button :class="selectedType == 'yes' ? 'activeBtn' : ''" @click="setSelectedType('yes')"
              :disabled="disabled" type="primary" plain>符 合</el-button>
            <el-button :class="selectedType == 'no' ? 'activeBtn' : ''" @click="setSelectedType('no')"
              :disabled="disabled" type="primary" plain>不符合</el-button>
            <div class="submitBox">
              <el-button type="primary" @click="close" v-if="!bingdingStatus && !outboundStatus" plain>关 闭</el-button>
              <el-button type="primary" style="background-color: #f9bf5c90"
                v-if="!bingdingStatus && selectedType == 'yes'" @click="binding" plain>绑 定</el-button>

              <el-button @click="cancelBingding" type="primary" v-if="bingdingStatus || outboundStatus" plain>取
                消</el-button>
              <el-button type="primary" style="background-color: #f9bf5c90" v-if="!bingdingStatus &&
                selectedType == 'no' &&
                outboundStatus == false
                " @click="outboundFnc" plain>出 库</el-button>
              <el-button type="primary" @click="submit" style="background-color: #f9bf5c90; color: white; border: 0px"
                v-if="bingdingStatus" plain>确 认</el-button>
              <el-button type="primary" @click="submit" style="background-color: #f9bf5c90; color: white; border: 0px"
                v-if="outboundStatus" plain>确 认</el-button>
            </div>
          </div>
          <div class="selectInfoBox">
            <el-scrollbar class="scrollbarTop">
              <div class="scroll">
                <div class="needMaterialInfo">
                  <div>{{ selectRowData.materialName }}</div>
                  <div>{{ selectRowData.materialCode }}</div>
                  <div>
                    已装数量：{{
                      selectRowData.completeNum
                      ? selectRowData.completeNum
                      : "-"
                    }}
                  </div>
                  <div>所需总数：{{ selectRowData.totalMaterial }}</div>
                  <div>
                    还需数量：{{
                      selectRowData.totalMaterial -
                      selectRowData.completeNum +
                      topSum
                    }}
                  </div>
                </div>
                <div class="selectInfoItem" v-if="selectedType == 'yes'" @click="closeTopItem(item.selectedIndex)"
                  v-for="item in setTopItem">
                  <div>料箱名称：</div>
                  <div>{{ item.name }}</div>
                  <div>料箱编号：</div>
                  <div>{{ item.code }}</div>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <el-scrollbar class="scrollbar">
            <template v-for="(item, index) in materialData">
              <div :class="index == outboundIndex
                  ? 'item bound'
                  : item.selected == true
                    ? 'item active'
                    : item.isEnable == 2
                      ? 'item noBound'
                      : 'item'
                " v-if="itemShowStatus(item)" @click="setSelectIndex(index)">
                <div>料箱名称：</div>
                <div>{{ item.name }}</div>
                <div>料箱编号：</div>
                <div>{{ item.code }}</div>
              </div>
            </template>
            <Empty v-if="materialData.length < 1" />
          </el-scrollbar>
        </el-col>
        <el-col :span="10">
          <el-scrollbar class="infoBox">
            <el-table class="infoTable" :data="selectIndexInfoData" border>
              <el-table-column prop="materialName" label="物料名称" width="120" />
              <el-table-column prop="materialNo" label="物料编号" />
              <el-table-column prop="num" label="出入库数量" />
              <el-table-column prop="coordinate" label="储位坐标" />
              <template #empty>
                <Empty />
              </template>
            </el-table>
          </el-scrollbar>
        </el-col>
      </el-row>
    </div>
    <Bangding v-model="showStatus" :title="bindingTitle" @submit="submitData" :submitType="submitType"
      :outboundIndex="outboundIndex" />
  </div>
</template>

<script lang="ts" setup>
import Bangding from "./bangding.vue";
import { vehicleBiding, outBox } from "@/api/prepare";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  workOrderCode: {
    type: String,
  },
  operationId: {
    type: String,
  },
});
const emits = defineEmits(["update:modelValue", "resetOptionsData"]);
const selectedType = ref("yes");
const disabled = ref(false);
const materialData = inject("materialData");
const selectRowData = inject("selectRowData");
const showStatus = ref(false);
const outboundIndex = ref(null);
const bindingTitle = ref("");
//1-出库 2-绑定
const submitType = ref(null);
const bingdingStatus = ref(false);
const outboundStatus = ref(false);
const selectIndex = ref(0);
const itemShowStatus = (item: any) => {
  if (selectedType.value == "yes") {
    if (item.isEnable == 1) {
      return true;
    } else {
      return false;
    }
  } else {
    if (item.isEnable == 0 || item.isEnable == 2) {
      return true;
    } else {
      return false;
    }
  }
};
const setSelectedType = (type: string) => {
  selectedType.value = type;
};
const outboundFnc = () => {
  outboundStatus.value = true;
  disabled.value = true;
};
const selectIndexInfoData = computed(() => {
  if (materialData.value.length > 0) {
    return materialData.value[selectIndex.value].list;
  } else {
    return [];
  }
});
//盒子点击事件
const setSelectIndex = (index: number) => {
  selectIndex.value = index;
  if (selectedType.value == "yes") {
    //在符合的条件下
    if (bingdingStatus.value) {
      if (materialData.value[selectIndex.value].selected == true) {
        materialData.value[selectIndex.value].selected = false;
      } else {
        materialData.value[selectIndex.value].selected = true;
      }
      materialData.value[selectIndex.value].selectedIndex = index;
    }
  } else {
    //在不符合的条件下
    if (
      outboundStatus.value &&
      materialData.value[selectIndex.value].isEnable != 2
    ) {
      outboundIndex.value = selectIndex.value;
    }
  }
};
const closeTopItem = (index: number) => {
  materialData.value[index].selected = false;
};
//展示已选择的待绑定的盒子数组
const setTopItem = computed(() => {
  return materialData.value.filter((item) => item.selected == true);
});
const topSum = computed(() => {
  let sum = 0;
  const array = materialData.value.filter((item) => item.selected == true);
  for (let i = 0; i++; i < array.length) {
    sum = array[i].xxxsum;
  }
  return sum;
});
const close = () => {
  emits("update:modelValue", false);
  reset();
};
const binding = () => {
  bingdingStatus.value = true;
  disabled.value = true;
};
const cancelBingding = () => {
  bingdingStatus.value = false;
  outboundStatus.value = false;
  disabled.value = false;
};
const submit = () => {
  if (outboundStatus.value == true) {
    bindingTitle.value = "确认出库";
  } else {
    bindingTitle.value = "绑定确认";
  }
  showStatus.value = true;
};
const reset = () => {
  selectedType.value = "yes";
  materialData.value = [];
  outboundIndex.value = null;
};
//提交函数（包含绑定、出库）
const submitData = async () => {
  if (bingdingStatus.value == true) {
    const codes = [];
    materialData.value.forEach((item) => {
      if (item.selected == true) {
        codes.push(item.code);
      }
    });
    const { data, code } = await vehicleBiding({
      codes,
      operationId: props.operationId,
      workOrderCode: props.workOrderCode,
    });
    if (code == "200") {
      ElMessage.success("绑定成功！");
      emits("resetOptionsData");
      close();
    }
  } else {
    //出库
    const { data, code } = await outBox({
      vehicleNo: materialData.value[outboundIndex.value].code,
      taskId: 0,
      houseNo: materialData.value[outboundIndex.value].houseNo,
    });
    if (code == "200") {
      ElMessage.success("出库成功！");
      //页面数据删除

      materialData.value.splice(outboundIndex.value, 1);
      outboundIndex.value = null;
    }
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-table__inner-wrapper:before) {
  width: 0 !important;
}

.bound {
  background-color: #a52a2a80 !important;
  color: white;
}

.noBound {
  background-color: grey !important;
  color: white;
}

.leftView {
  width: calc(100vw);

  .activeBtn {
    background-color: #6cc2ff !important;
    color: white !important;
    border: 0px !important;
  }
}

.body {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  padding: 24px;

  .selectInfoBox {
    width: 100%;
    height: 160px;
    border-radius: 16px;
    background-color: #ffffff60;

    .scrollbarTop {
      padding: $p10;
      height: 170px;
      width: calc(100vw * 7 / 12 - 34px);
      margin-bottom: $p10;

      .scroll {
        display: flex;

        .needMaterialInfo {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          width: 200px;
          height: 140px;
          border-radius: 16px;
          background-color: #ffffff60;
          padding: $p10;

          div {
            font-size: $p20;
            line-height: 20px;
            width: 100%;
          }
        }

        .selectInfoItem {
          margin-left: $p10;
          flex-shrink: 0;
          width: 150px;
          height: 140px;
          border-radius: 16px;
          background-color: #ffffff60;
          background-image: url("@/assets/images/caijiwancheng.png");
          background-position: right top;
          background-repeat: no-repeat;
          padding: 20px;
        }
      }
    }
  }

  .infoBox {
    height: calc(100vh - 48px);
    width: calc(100vw * 5 / 12 - 48px);
    border-radius: 16px;
    background-color: #ffffff60;

    .infoTable {
      height: calc(100vh - 48px);
      background-color: white;
    }
  }

  .btns {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-evenly;
    padding-bottom: 10px;

    .submitBox {
      width: 300px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .el-button {
      width: 150px;
      height: 60px;
      border: 1px solid #00000030;
      font-size: $f24;
      color: black;
      background-color: transparent;
      border-radius: 16px;
    }
  }

  .scrollbar {
    height: calc(100vh - 288px);
    margin-top: $p10;

    .item {
      width: 190px;
      height: 180px;
      border-radius: 16px;
      background-color: #ffffff60;
      display: inline-block;
      margin: $p20;
      padding: $p20;
      cursor: pointer;
      box-sizing: border-box;
    }
  }
}

.active {
  background-image: url("@/assets/images/caijiwancheng.png");
  background-position: right top;
  background-repeat: no-repeat;
}
</style>