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

<template>
  <z-paging
    ref="paging"
    v-model="listdata"
    @query="loadMoreData"
    :default-page-no="1"
    :default-page-size="4"
    :auto-show-back-to-top="true"
  >
    <template #top>
      <view class="flex">
        <view class="search">
          <uni-search-bar
            radius="5"
            placeholder="输入车辆编号查询"
            v-model="bikeCodeValue"
            @blur="searchInfo"
            @confirm="search"
          />
        </view>
        <view class="searchmore" @click="showDrawer('showRight')">
          <image :src="`${imgPath}static/image/更多.png`" alt="" />
        </view>
      </view>
    </template>
    <view class="container">
      <!-- <scroll-view ref="scroView" class="scroll-view" :scroll-y="true" @scrolltolower="loadMoreData"
				:scroll-top="scroTop" @scroll="handleScroll">
				<uni-load-more v-if="isupshow" iconType="circle" status="loading" /> -->
      <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)">
            <view v-if="item.state == 0" class="title-xz">
              <checkbox :value="item.bikeCode" @click.stop></checkbox>
              <!-- <checkbox disabled="true" :value="item.bikeId" @click.stop></checkbox> -->
            </view>
            <view v-else class="title-xz">
              <!-- <checkbox :value="item.bikeCode" @click.stop></checkbox> -->
            </view>
            <view class="title-wz">
              {{ item.bikeCode }}
            </view>
            <view v-if="item.state == 0" class="title-zt">
              <view class="cu-tag bg-orange sm">待出库</view>
            </view>
            <view v-else-if="item.state == 4" class="title-zt">
              <view class="cu-tag bg-yellow sm">待维修</view>
            </view>
            <view v-else-if="item.state == 5" class="title-zt">
              <view class="cu-tag bg-yellow sm">维修中</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>
      <!-- 	<uni-load-more :status="status" />
			</scroll-view> -->
      <!-- 回到顶部按钮 -->
      <!-- <text class="cuIcon-top lg text-gray back-to-top" @click="scrollToTop"></text> -->
    </view>
    <template #bottom>
      <view class="nav-panel">
        <uni-goods-nav
          :fill="true"
          :options="[]"
          :buttonGroup="navButtonGroup"
          @buttonClick="navButtonClick"
        />
      </view>
    </template>
  </z-paging>

  <uni-drawer ref="showRight" mode="right" :mask-click="false">
    <view>
      <uni-nav-bar
        left-icon="left"
        leftText="返回"
        rightText="X"
        title="筛选"
        @clickLeft="closeDrawer('showRight')"
        @clickRight="closeDrawer('showRight')"
      />
    </view>
    <view class="searchlist">
      <uni-section title="入库时间" type="line">
        <uni-datetime-picker
          type="date"
          return-type="timestamp"
          v-model="enterTime"
        />
      </uni-section>
      <uni-section title="状态" type="line">
        <uni-data-checkbox
          mode="tag"
          v-model="statevalue"
          :localdata="sjztlist"
        />
      </uni-section>
    </view>
  </uni-drawer>
  <view>
    <!-- 普通弹窗 -->
    <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 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>
          <view class="button-group">
            <button
              style="width: 100%"
              type="primary"
              @click="submit"
              size="mini"
            >
              提交
            </button>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as api from "@/utils/api.js";
import { forEach } from "lodash";
import config from "@/utils/config";
import { stringToArray } from "@/utils/tools";

const imgPath = config.imgPath;
const listdata = ref([]);
const popup = ref(null);
const typepopup = ref("center");
// 获取滚动容器的引用
const scroTop = ref(0);
const navButtonGroup = [
  {
    text: "批量上架",
    backgroundColor: "#0078D4",
    color: "#fff",
  },
];
//下拉刷新
const isupshow = ref(false);
const paging = ref(null);

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

//提交表单相关信息
const customForm = ref(null);
const customFormData = ref({
  reginvalue: "",
  deviceValues: "",
});
// 校验规则
const customRules = ref({
  reginvalue: {
    rules: [
      {
        required: true,
        message: "请选择运营区域",
        trigger: "blur",
      },
    ],
  },
  deviceValues: {
    rules: [
      {
        required: true,
        errorMessage: "车辆编号不能为空！",
        trigger: "blur",
      },
    ],
  },
});
// 查询条件定义
const bikeCodeValue = ref(""); //车辆编号
const enterTime = ref(null); //入库时间
const statevalue = ref("0,4,5"); //状态（待维修，待入库
const statusZT = ref(0);
const sjztlist = ref([
  {
    text: "全部",
    value: "0,4",
  },
  {
    text: "待出库",
    value: 0,
  },
  {
    text: "待维修",
    value: 4,
  },
  {
    text: "维修中",
    value: 5,
  },
]);
const status = ref("more"); //,more,loading，noMore
const selectedItems = ref([]);
const usableHeight = ref(0);
onMounted(() => {
  // 获取设备信息
  const systemInfo = uni.getSystemInfoSync();
  // 获取屏幕高度和状态栏高度
  const screenHeight = systemInfo.screenHeight;
  const statusBarHeight = systemInfo.statusBarHeight;
  // 计算去掉状态栏后的可用区域高度
  usableHeight.value = screenHeight - statusBarHeight - 170;
  let userOperation = uni.getStorageSync("userOperation");
  userOperation.forEach((res) => {
    let quyuemap = {
      text: res.operationRegionName,
      value: res.operationRegionId,
    };
    regindata.value.push(quyuemap);
  });
});
const checkboxGroupChange = (e) => {
  selectedItems.value = e.target.value;
};
const opendetail = (id) => {
  uni.setStorageSync("ebikeId_zcck", id);
  setTimeout(() => {
    uni.navigateTo({
      url: `/pages/warehouse/ebikehouse/ebikehouse_view?ebikeId_zcck=${id}`, //
    });
  }, 200); // 延迟100毫秒后执行
};
const loadMoreData = (pageNo, pageSize) => {
  // 组装参数
  const params = {
    bikeCode: bikeCodeValue.value, //车辆编号
    enterTime: enterTime.value, //入库时间 例：2025-03-21
    state: statevalue.value,
    pageParam: {
      pageNum: pageNo,
      pageSize: pageSize,
    },
  };
  api.callEbikeInfo("pageQueryEbikeList", params).then((res) => {
    if (res.code === 200) {
      const records = res.data.records;
      paging.value.complete(res.data.records);
    } else {
      paging.value.complete(false);
    }
  });
};

const submit = (ref) => {
  customForm.value
    .validate()
    .then((res) => {
      const params = {
        bikeCode: stringToArray(customFormData.value.deviceValues, ""), //车辆编号
        status: statusZT.value, //入库时间 例：2025-03-21
        reginId: customFormData.value.reginvalue,
      };
      console.log(params);

      api.callEbikeInfo("vehicleLeaveWarehouse", params).then((res) => {
        if (res.code == 200) {
          popup.value.close("center");
          uni.showToast({
            title: "操作成功",
            icon: "success",
            duration: 2000,
          });
          searchInfo();
        } else {
          uni.showToast({
            title: "操作失败",
            icon: "error",
            duration: 2000,
          });
        }
      });
    })
    .catch((err) => {
      console.log("err", err);
    });
};

const onPullDownRefresh = () => {
  console.log("onPullDownRefresh");
  setTimeout(function () {
    uni.stopPullDownRefresh();
    console.log("stopPullDownRefresh");
  }, 1000);
};
// 创建 drawer 的 ref 引用
const showRight = ref(null);

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

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

const changeZT = (e) => {
  console.log("e:", e);
};
const changepopup = (e) => {};
//批量出库事件按钮
const navButtonClick = (index, content) => {
  uni.showModal({
    title: "确认上架",
    content: "您确定要进行上架操作吗？",
    success: (res) => {
      if (res.confirm) {
        customFormData.value.deviceValues = selectedItems.value;
        popup.value.open("center");
        statusZT.value = 1;
      } else if (res.cancel) {
      }
    },
  });
};
</script>

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

.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: 10px;
  border-radius: 5px;
}

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

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

.list-value {
  width: 70%;
  color: #4f4f53;
  font-size: 13px;
  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;
}

.back-to-top {
  position: fixed;
  bottom: 135px;
  right: 30px;
  border: none;
  font-size: 30px;
  cursor: pointer;
  z-index: 10;
}

.nav-panel {
  height: 70px;
  width: 100%;
  padding-bottom: 20px;
  background-color: #fff;
}

.plcrk {
  width: 240px;
  height: 360px;
}
</style>