ebike-ui/ebike-maintenance/pages/warehouse/component/picking.vue

<template>
  <view class="container">
    <view class="search">
      <uni-search-bar
        radius="5"
        placeholder="输入电池编号查询"
        v-model="batteryCode"
        @blur="searchInfo"
        @confirm="searchInfo"
      />
    </view>
    <view class="list-panel">
      <view class="list-item-title">
        <uni-row>
          <uni-col :span="18"> 电池编号 </uni-col>
          <uni-col :span="6"> 操作 </uni-col>
        </uni-row>
      </view>
      <view
        class="list-item"
        v-for="(item, index) in listBatteryCode"
        :key="index"
      >
        <uni-row>
          <view>
            <uni-col :span="18">
              {{ item.batteryCode }}
            </uni-col>
            <uni-col :span="6">
              <uni-icons
                type="minus-filled"
                size="28"
                @click="onBatteryDelClick(item.batteryCode)"
              ></uni-icons>
            </uni-col>
          </view>
        </uni-row>
      </view>
      <empty-component
        height="70vh"
        v-if="listBatteryCode.length === 0"
        description="暂无电池列表"
      />
    </view>
  </view>
  <view class="nav-panel">
    <view class="add-panel" v-if="inputState">
      <uni-easyinput
        class="uni-mt-5"
        v-model="inputCodeValue"
        placeholder="请输入电池编号"
        prefixIcon="down"
        suffixIcon="plus"
        @iconClick="addCodeData"
      >
      </uni-easyinput>
    </view>
    <c-uni-goods-nav
      :fill="true"
      :options="navOptions"
      @click="navOptionsClick"
      :buttonGroup="navButtonGroup"
      @buttonClick="navButtonClick"
    />
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import * as api from "@/utils/api.js";
import { showModelMessage, isNullOrEmpty, dataFormat } from "@/utils/tools.js";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useScanCodeStore } from "@/stores/scancode.js";
import EmptyComponent from "@/components/empty-component/empty-component.vue";

const scancode = useScanCodeStore();
const userInfo = ref(null);
const userDefultOperation = ref(null);

const batteryCode = ref("");
const listBatteryCode = ref([]);
const listBatteryData = ref([]);

const inputState = ref(false);
const inputCodeValue = ref("");
const componentOutRecordId = ref("");

onLoad((options) => {
  userInfo.value = uni.getStorageSync("userInfo");
  userDefultOperation.value = uni.getStorageSync("userDefultOperation");
});

onShow(() => {
  if (!isNullOrEmpty(scancode.code)) {
    const arr = scancode.code;
    for (let i = 0; i < arr.length; i++) {
      if (scancode.type == "pickBattery") {
        const exists = listBatteryData.value.some(
          (item) => item.batteryCode == arr[i]
        );
        if (!exists) {
          const oneBattery = {
            batteryCode: arr[i],
          };
          listBatteryData.value.push(oneBattery);
          inputCodeValue.value = "";
          batteryCode.value = "";
          searchInfo();
        }
      } else break;
    }
    scancode.clearCode();
  }
});

const searchInfo = (e) => {
  if (!isNullOrEmpty(batteryCode.value)) {
    if (listBatteryData.length > 0) {
      const even = listBatteryData.value.filter(
        (item) => item.batteryCode.indexOf(batteryCode.value) > -1
      );
      listBatteryCode.value = even;
    }
  } else {
    listBatteryCode.value = listBatteryData.value;
  }
};

const navOptions = reactive([
  {
    icon: "scan",
    text: "扫码新增",
    disable: false,
  },
  {
    icon: "folder-add",
    text: "编号新增",
    disable: false,
  },
]);

const navButtonGroup = reactive([
  {
    text: "确认领取",
    backgroundColor: "#0078D4",
    color: "#fff",
    disable: false,
  },
]);

const navOptionsClick = (e) => {
  const index = e.index;
  if (index == 0) {
    uni.navigateTo({
      url: `/pages/common/batchscancode?type=pickBattery`, //
    });
  } else if (index == 1) {
    inputState.value = true;
  }
};

const navButtonClick = (e) => {
  const index = e.index;
  let sucessMsg = "领取成功";
  let errorMsg = "领取失败";
  if (index == 0) {
    if (listBatteryData.value.length == 0) {
      showModelMessage("电池列表不能为空！");
      return false;
    }
    saveBatteryApply((bresult, message) => {
      if (!bresult) {
        uni.showToast({
          title: message,
          icon: "none",
          duration: 5000,
        });
      } else {
        saveBaseInfo((bresult1, message1) => {
          if (!bresult1) {
            uni.showToast({
              title: errorMsg,
              icon: "error",
              duration: 5000,
            });
          } else {
            saveBatteryData((bresult2, message2) => {
              if (!bresult2) {
                uni.showToast({
                  title: errorMsg,
                  icon: "error",
                  duration: 5000,
                });
              } else {
                uni.showToast({
                  title: sucessMsg,
                  icon: "success",
                  duration: 1000,
                  success: (res) => {
                    setTimeout(function () {
                      uni.navigateBack();
                    }, 1000);
                  },
                });
              }
            });
          }
        });
      }
    });
  }
};

const saveBaseInfo = (callback) => {
  const params = {
    componentOutRecordId: "",
    owningRegion: userDefultOperation.value.regionId,
    componentType: "262711452730000",
    outQuantity: listBatteryData.value.length,
    createdUser: userInfo.value.username,
    createdAt: dataFormat(new Date(), "yyyy-MM-dd HH:mm:ss"),
    state: "1",
  };
  api.callOperateApi("ebikeComponentOutRecords/save", params).then((res) => {
    if (res.code == "200") {
      componentOutRecordId.value = res.data;
      callback(true, "");
    } else callback(false, res.message);
  });
};

const saveBatteryData = (callback) => {
  const listdatas = [];
  listBatteryData.value.forEach((item, index) => {
    listdatas.push(item.batteryCode);
  });
  const params = {
    componentOutRecordId: componentOutRecordId.value,
    batteryCodes: listdatas,
  };
  api
    .callOperateApi(
      "ebikeBatteryOutRecords/batchSaveByComponentOutRecordId",
      params
    )
    .then((res) => {
      if (res.code == "200") {
        callback(true, "");
      } else {
        callback(false, res.message);
      }
    });
};

const saveBatteryApply = (callback) => {
  const listdatas = [];
  listBatteryData.value.forEach((item, index) => {
    listdatas.push(item.batteryCode);
  });
  const params = {
    batteryCodes: listdatas,
  };
  api.callMaintenanceApi("ebikeBatteryApply/apply", params).then((res) => {
    if (res.code == "200") {
      callback(true, "");
    } else {
      callback(false, res.message);
    }
  });
};

const onBatteryDelClick = (dbatteryCode) => {
  const index = listBatteryData.value.findIndex(
    (item) => item.batteryCode == dbatteryCode
  );
  if (index != -1) {
    listBatteryData.value.splice(index, 1);
    batteryCode.value = "";
    searchInfo();
  }
};

const addCodeData = (lx) => {
  if (lx == "suffix") {
    if (isNullOrEmpty(inputCodeValue.value)) {
      showModelMessage("电池编号不能为空！");
      return;
    }
    if (listBatteryData.value.length > 0) {
      const exists = listBatteryData.value.some(
        (item) => item.batteryCode == inputCodeValue.value
      );
      if (exists) {
        showModelMessage("电池编号重复录入！");
        return;
      }
    }
    const oneBattery = {
      batteryCode: inputCodeValue.value,
    };
    listBatteryData.value.push(oneBattery);
    inputCodeValue.value = "";
    inputState.value = false;
    batteryCode.value = "";
    searchInfo();
  } else {
    inputCodeValue.value = "";
    inputState.value = false;
  }
};
</script>

<style scoped>
.container {
  padding: 15px;
  background-color: #fff;
}

.nav-panel {
  position: fixed;
  bottom: 0rpx;
  width: 100%;
  padding-bottom: 10px;
  z-index: 999;
  background-color: #fff;
}

.add-panel {
  padding: 0px 25px 10px 25px;
}

.list-panel {
  padding: 0px 10px 55px 10px;
}

.list-item-title {
  background-color: #f7f7f7;
  color: #ababab;
  line-height: 40px;
  border-radius: 5px;
  padding: 0px 15px;
}

.list-item {
  line-height: 40px;
  padding: 0px 15px;
  border-bottom: 1px solid #f7f7f7;
}
</style>