ebike-ui/ebike-maintenance/pages/warehouse/ebikehouse/vehicleoperation.vue

<template>
  <z-paging
    ref="paging"
    v-model="listdata"
    @query="loadMoreData"
    :default-page-no="1"
    :default-page-size="10"
    :auto-show-back-to-top="true"
    :paging-style="{
      'background-color': '#f3f4f6',
    }"
  >
    <!-- 顶部 -->
    <template #top>
      <view class="flex" style="background-color: white">
        <view class="search">
          <uni-search-bar
            radius="5"
            placeholder="输入车辆编号查询"
            v-model="bikeCodeValue"
            @blur="searchInfo"
            @confirm="searchInfo"
            @clear="searchInfo"
          />
        </view>
        <view class="searchmore" @click="showDrawer('showRight')">
          <image :src="`${imgPath}static/image/更多.png`" alt="" />
        </view>
      </view>
      <z-tabs ref="tabs" :list="tabList" @change="tabChange" />
    </template>

    <view class="container">
      <checkbox-group @change="checkboxGroupChange">
        <view v-for="(item, index) in listdata" :key="index" class="list-item">
          <view class="flex list-title" @click="opendetail(item.bikeId)">
            <checkbox
              :value="item.bikeCode"
              @click.stop
              :checked="item.checked"
            ></checkbox>
            <view
              v-if="item.state == 1 && item.stateName == '待投放'"
              class="title-xz"
            >
            </view>
            <view class="title-wz">
              {{ item.bikeCode }}
            </view>
            <view v-if="item.state == 1" class="title-zt">
              <view v-if="item.stateName == '投放中'" class="cu-tag bg-blue sm">
                {{ item.stateName }}
              </view>
              <view v-else class="cu-tag bg-orange sm">
                {{ item.stateName }}
              </view>
            </view>
            <view v-else class="title-zt">
              <view class="cu-tag bg-green sm">{{ item.stateName }}</view>
            </view>
          </view>
          <view class="flex row">
            <view class="list-name"> 车辆编号 </view>
            <view class="list-value">
              {{ item.bikeCode }}
            </view>
          </view>
          <view class="flex row">
            <view class="list-name"> 车辆型号 </view>
            <view class="list-value">
              {{ item.bikeModel }}
            </view>
          </view>
          <view class="flex row">
            <view class="list-name"> 入库时间 </view>
            <view class="list-value">
              {{ item.enterTime }}
            </view>
          </view>
        </view>
      </checkbox-group>
      <view style="width: 100%; height: 100rpx"></view>
    </view>

    <!-- 底部 -->
    <template #bottom>
      <view class="nav-panel">
        <button
          v-if="statevalue === '1'"
          class="fancy-btn"
          @click="
            handleBtn({
              tip: '请选择需要批量投放的车辆',
              status: 2,
            })
          "
        >
          批量投放
        </button>
        <button
          v-if="statevalue === '2'"
          class="fancy-btn"
          @click="
            handleBtn({
              tip: '请选择需要批量下架的车辆',
              status: 0,
            })
          "
        >
          批量下架
        </button>
      </view>
    </template>
  </z-paging>
  <!-- 筛选 -->
  <uni-drawer ref="showRight" mode="right" :mask-click="false" :width="320">
    <uni-nav-bar
      left-icon="left"
      leftText="返回"
      title="筛选"
      @clickLeft="closeDrawer('showRight')"
    />
    <uni-section title="入库时间" type="line">
      <view style="width: 100%; padding: 0 20px">
        <uni-datetime-picker type="date" v-model="enterTime" />
      </view>
    </uni-section>
  </uni-drawer>
  <!-- 普通弹窗 -->
  <uni-popup ref="popup" background-color="#fff" @change="changepopup">
    <view
      class="popup-content"
      :class="{
        'popup-height': typepopup === 'left' || typepopup === 'right',
      }"
    >
      <view class="padding plcrk">
        <uni-forms
          ref="customForm"
          :rules="customRules"
          :modelValue="customFormData"
        >
          <uni-section v-if="statusZT == 2" title="站点" type="line">
            <uni-forms-item required name="reginvalue">
              <uni-data-select
                v-model="customFormData.reginvalue"
                :localdata="regindata"
                @change="changeZT"
              ></uni-data-select>
            </uni-forms-item>
          </uni-section>
          <uni-section title="请添加设备" type="line">
            <uni-forms-item required name="deviceValues">
              <uni-easyinput
                type="textarea"
                v-model="customFormData.deviceValues"
                placeholder="请输入车辆编号，用逗号(，)隔开，一次最多添加1000个"
              />
            </uni-forms-item>
          </uni-section>
        </uni-forms>
        <button
          style="width: 100%"
          @click="submit"
          :disabled="isSubmit"
          :loading="isSubmit"
          size="mini"
        >
          提交
        </button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as api from "@/utils/api.js";
import config from "@/utils/config";
import { stringToArray } from "@/utils/tools";
import { onShow, onUnload } from "@dcloudio/uni-app";

const paging = ref(null);
const tabs = ref(null);
const imgPath = config.imgPath;
const tabList = ref([
  { name: "待投放", value: "1" },
  { name: "投放中", value: "2" },
]);
const listdata = ref([]);

// 查询条件定义
const bikeCodeValue = ref(""); //车辆编号
const statevalue = ref("1"); //状态
const enterTime = ref(""); //入库时间

// 创建 drawer 的 ref 引用
const showRight = ref(null);

// 多选框选中值
const checkboxValue = ref([]);

// 处理 popup
const popup = ref(null);
const typepopup = ref("center");

//提交表单相关信息
const customForm = ref(null);
const customFormData = ref({
  reginvalue: "",
  deviceValues: "",
});

// 校验规则
const customRules = ref({
  reginvalue: {
    rules: [
      {
        required: true,
        errorMessage: "站点信息不能为空",
        trigger: "blur",
      },
    ],
  },
  deviceValues: {
    rules: [
      {
        required: true,
        errorMessage: "车辆编号不能为空！",
        trigger: "blur",
      },
    ],
  },
});
const statusZT = ref(1);

//运营区域下拉值 和列表
const regindata = ref([]);

// 提交按钮状态
const isSubmit = ref(false);

// 数据加载
function loadMoreData(pageNo, pageSize) {
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });

  const params = {
    bikeCode: bikeCodeValue.value, //车辆编号
    enterTime: enterTime.value, //入库时间 例：2025-03-21
    state: statevalue.value,
    pageParam: {
      pageNum: pageNo,
      pageSize: pageSize,
    },
  };

  api
    .callEbikeInfo("getOperationalBikeList", params)
    .then((res) => {
      uni.hideLoading();
      if (res.code === 200) {
        let records = res.data.records;
        records = records.map((item) => {
          item.checked = checkboxValue.value.includes(item.bikeCode);
          return item;
        });
        paging.value.complete(records);
      } else {
        paging.value.complete(false);
      }
    })
    .catch((err) => {
      uni.hideLoading();
      console.error("加载数据失败:", err);
      paging.value.complete(false);
    });
}

//搜索
const searchInfo = () => {
  paging.value.reload();
};

// tab切换
const tabChange = (index) => {
  statevalue.value = tabList.value[index].value;
  checkboxValue.value = [];
  listdata.value = []; // 清空数据
  paging.value.refresh();
};

const checkboxGroupChange = (e) => {
  const { value } = e.detail;
  checkboxValue.value = value;
};

// 打开窗口
const showDrawer = (e) => {
  const drawer = showRight.value;
  drawer.open();
};

// 关闭窗口
const closeDrawer = (e) => {
  const drawer = showRight.value;
  drawer.close();
  searchInfo();
};

// 打开详情
const opendetail = (id) => {
  setTimeout(() => {
    uni.navigateTo({
      url: `/pages/warehouse/ebikehouse/vehicleoperation_view?ebikeId_zcck=${id}`, //
    });
  }, 200); // 延迟100毫秒后执行
};

// 处理弹窗关闭事件
const changepopup = (e) => {
  const { show } = e;
  if (!show) {
    customFormData.value = {
      reginvalue: "",
      deviceValues: "",
    };
  }
};

// 处理按钮点击事件
const handleBtn = ({ tip, status }) => {
  if (checkboxValue.value.length === 0) {
    uni.showToast({
      title: tip,
      icon: "none",
    });
    return;
  }

  customFormData.value.deviceValues = checkboxValue.value.join(",");
  statusZT.value = status;
  popup.value.open("center");
};

const changeZT = (e) => {
  console.log("e:", e);
};

// 处理下架逻辑
const handleLeaveWarehouse = () => {
  isSubmit.value = true; // 设置提交状态为加载中
  const params = {
    bikeCode: stringToArray(customFormData.value.deviceValues, ""), // 车辆编号
    status: statusZT.value,
    reginId: "",
  };

  console.log(params);

  api.callEbikeInfo("vehicleLeaveWarehouse", params).then((res) => {
    isSubmit.value = false;
    if (res.code == 200) {
      popup.value.close("center");
      uni.showToast({
        title: "操作成功",
        icon: "success",
        duration: 2000,
      });
      searchInfo();
    } else {
      uni.showToast({
        title: res.message || "操作失败",
        icon: "none",
        duration: 2000,
      });
    }
  });
};

// 处理投放逻辑
const handleLaunch = () => {
  // 在这里编写投放的具体逻辑
  console.log("投放逻辑执行");
  isSubmit.value = true;
  const params = {
    bikeCodes: stringToArray(customFormData.value.deviceValues, ""), // 车辆编号
    status: statusZT.value,
    siteId: customFormData.value.reginvalue,
    dispatchType: "仓库车调度",
  };
  console.log(params);

  // 例如，调用API处理投放
  api.callEbikeInfo("createWorkOrderDispatch", params).then((res) => {
    isSubmit.value = false;
    if (res.code == 200) {
      popup.value.close("center");
      // 显示成功提示
      uni.showToast({
        title: "操作成功",
        icon: "success",
        duration: 1000,
      });
      // 延时跳转，确保提示完毕后再跳转
      setTimeout(() => {
        uni.navigateTo({
          url: `/pages/warehouse/vehicledispatch/vehicledispatch?orderId=${res.data}`,
        });
      }, 1000); // 跳转延迟与提示时长一致
    } else {
      uni.showToast({
        title: res.message || "操作失败",
        icon: "none",
        duration: 2000,
      });
    }
  });
};

//  提交表单
const submit = () => {
  customForm.value
    .validate()
    .then((res) => {
      if (statusZT.value == 0) {
        // 下架
        handleLeaveWarehouse();
      } else {
        // 投放
        handleLaunch();
      }
    })
    .catch((err) => {
      console.log("err", err);
    });
};

onMounted(() => {
  let userDefultOperation = uni.getStorageSync("userDefultOperation");
  //获取站点信息
  api
    .callOperateApi(
      "ebikeRegion/getRegion?regionId=" + userDefultOperation.operationRegionId,
      {},
      "get"
    )
    .then((res) => {
      if (res.code == 200) {
        res.data.forEach((res) => {
          let quyuemap = {
            text: res.siteName,
            value: res.siteRegionId,
          };
          regindata.value.push(quyuemap);
        });
      }
    });
});

onShow(() => {
  uni.$on("refreshData", (data) => {
    const { isRefresh } = data;
    if (isRefresh) {
      paging.value.refresh();
    }
  });
});

onUnload(() => {
  uni.$off("refreshData");
});
</script>

<style scoped lang="scss">
.container {
  padding: 10px 0px 0px 0px;
}

.list-title {
  margin: 5px 0px;
  border-bottom: 1px solid #f0f0f0;
}

.list-title .title-xz {
  margin: 5px;
}

.list-title .title-wz {
  margin-left: 5px;
  font-size: 14px;
  line-height: 35px;
  font-weight: bold;
}

.list-title .title-zt {
  margin-left: 8px;
  margin-top: 5px;
}

.list-item {
  background: #fff;
  padding: 10px;
  margin: 13px 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

button {
  margin-top: 20px;
  padding: 15rpx;
  background-color: #007aff;
  color: white;
  border-radius: 10rpx;
}

.list-name {
  color: #999999;
  font-size: 14px;
  width: 30%;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}

.list-value {
  width: 70%;
  color: #4f4f53;
  font-size: 14px;
  font-weight: 400;
}

.row {
  margin: 8px 5px;
}

.scroll-view {
  height: 100%;
}

.example-body {
  padding: 10px;
}

.scroll-view {
  /* #ifndef APP-NVUE */
  width: 100%;
  height: 100%;
  /* #endif */
  flex: 1;
}

.scroll-view-box {
  flex: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.info {
  padding: 15px;
  color: #666;
}

.info-text {
  font-size: 14px;
  color: #666;
}

.info-content {
  padding: 5px 15px;
}

.close {
  padding: 10px;
}

.search {
  width: 90%;
}

.searchmore {
  width: 10%;
  padding-top: 15px;
}

.searchmore image {
  width: 25px;
  height: 25px;
}

.searchlist {
  padding: 15px;
}

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

.plcrk {
  width: 80vw;
  height: 360px;
}

.fancy-btn {
  background-color: #0078d4; /* 主色 */
  color: #fff; /* 白色文字 */
  border: none;
  padding: 5px 24px; /* 舒服的内边距 */
  font-weight: 600;
  border-radius: 10px; /* 圆角 */
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.25s ease; /* 平滑过渡 */
  font-size: 30rpx;
}

/* active 点击时 */
.fancy-btn:active {
  background-color: #0078d4bd;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

radio::before,
checkbox::before {
  font-family: "cuIcon";
  content: "\e645";
  position: absolute;
  color: #ffffff !important;
  top: 41%;
  margin-top: -8px;
  right: 5px;
  font-size: 32rpx;
  line-height: 16px;
  pointer-events: none;
  transform: scale(1, 1);
  transition: all 0.3s ease-in-out 0s;
  z-index: 9;
}
</style>