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

<template>
  <z-paging
    ref="paging"
    v-model="dataList"
    @query="queryList"
    :default-page-no="Number('1')"
    :default-page-size="Number('10')"
    :auto-show-back-to-top="Boolean(true)"
    bg-color="#f3f3f3"
  >
    <!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
    <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
    <template #top>
      <view class="flex" style="background-color: white">
        <view class="search">
          <uni-search-bar
            radius="5"
            placeholder="输入部件类型查询"
            v-model="componentType"
            @blur="searchInfo"
            @confirm="searchInfo"
          />
        </view>
        <view class="searchmore" @click="showDrawer('showRight')">
          <image :src="`${imgPath}/static/image/更多.png`" alt="" />
        </view>
      </view>
    </template>
    <view class="container">
      <view class="list-panel">
        <view class="list-item" v-for="(item, index) in dataList" :key="index">
          <uni-row>
            <view class="list-title-row">
              <uni-col :span="18">
                <view
                  class="list-title"
                  @click="opendetail(item.componentEnterRecordId)"
                >
                  {{ item.typeName }}
                </view>
              </uni-col>
              <uni-col :span="6">
                <view class="list-tag-right">
                  <view v-if="item.state == '1'">
                    <uni-tag
                      :inverted="true"
                      text="已入库"
                      custom-style="background-color: #78f18c1a; border-color: #fff; color: #4cd964;"
                    />
                  </view>
                  <view v-else-if="item.state == '-1'">
                    <uni-tag
                      :inverted="true"
                      text="已取消"
                      custom-style="background-color: #dedede4d; border-color: #fff; color: #c0c0c0;"
                    />
                  </view>
                  <view v-else-if="item.state == '-2'">
                    <uni-tag
                      :inverted="true"
                      text="已作废"
                      custom-style="background-color: #e6434033; border-color: #fff; color: #e64340;"
                    />
                  </view>
                  <view v-else>
                    <uni-tag
                      :inverted="true"
                      text="待入库"
                      custom-style="background-color: #31d3f31a; border-color: #fff; color: #007aff;"
                    />
                  </view>
                </view>
              </uni-col>
            </view>
          </uni-row>
          <uni-row>
            <uni-col :span="5">
              <view
                class="list-image-panel"
                @click="opendetail(item.componentEnterRecordId)"
              >
                <view
                  v-if="item.typeCover == null || item.typeCover == ''"
                  class="list-image-box"
                >
                  <uni-icons type="image" size="50" color="#e1e1e1" />
                </view>
                <image
                  v-if="item.typeCover != null && item.typeCover != ''"
                  class="list-image-box"
                  mode="scaleToFill"
                  :src="item.typeCover"
                ></image>
              </view>
            </uni-col>
            <uni-col :span="19">
              <uni-row>
                <uni-col :span="20">
                  <view
                    class="list-item-row"
                    @click="opendetail(item.componentEnterRecordId)"
                  >
                    品牌：{{ item.typeBrand }}
                  </view>
                </uni-col>
                <uni-col :span="20">
                  <view
                    class="list-item-row font-weight-6"
                    @click="opendetail(item.componentEnterRecordId)"
                  >
                    入库数量：{{ item.enterQuantity }}
                  </view>
                </uni-col>
              </uni-row>
            </uni-col>
          </uni-row>
          <uni-row>
            <uni-col :span="24">
              <view class="list-botton-box">
                <button
                  class="mini-btn"
                  type="primary"
                  size="mini"
                  plain="true"
                  v-if="item.state == '0'"
                  @click="opendetail(item.componentEnterRecordId)"
                >
                  入库
                </button>
                <button
                  class="mini-btn"
                  type="warn"
                  size="mini"
                  plain="true"
                  v-if="item.state == '1'"
                  @click="
                    dealstate(
                      item.componentEnterRecordId,
                      'invalidateDevicePart',
                      '作废'
                    )
                  "
                >
                  作废
                </button>
                <button
                  class="mini-btn"
                  type="default"
                  size="mini"
                  plain="true"
                  v-if="item.state == '0'"
                  @click="
                    dealstate(
                      item.componentEnterRecordId,
                      'cancelDevicePart',
                      '取消'
                    )
                  "
                >
                  取消
                </button>
              </view>
            </uni-col>
          </uni-row>
        </view>
      </view>
      <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-data-checkbox
              mode="tag"
              v-model="statevalue"
              :localdata="rkstatelist"
            />
          </uni-section>
        </view>
      </uni-drawer>
    </view>
    <template #bottom>
      <view class="nav-panel">
        <uni-goods-nav
          :fill="true"
          :options="[]"
          :buttonGroup="navButtonGroup"
          @buttonClick="navButtonClick"
        />
      </view>
    </template>
  </z-paging>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow, onBackPress } from "@dcloudio/uni-app";
import { showModelMessage, dataFormat } from "@/utils/tools.js";
import * as api from "@/utils/api.js";
import config from "@/utils/config";
const imgPath = config.imgPath;
const userInfo = ref(null);

const paging = ref(null);
const dataList = ref([]);
const navButtonGroup = [
  {
    text: "新增入库",
    backgroundColor: "#0078D4",
    color: "#fff",
  },
];
// 查询条件定义
const componentType = ref("");
const statevalue = ref(""); //状态
const rkstate = ref("0"); //状态
const rkstatelist = ref([
  {
    text: "全部",
    value: "",
  },
  {
    text: "待入库",
    value: "0",
  },
  {
    text: "已入库",
    value: "1",
  },
  {
    text: "已取消",
    value: "-1",
  },
  {
    text: "已作废",
    value: "-2",
  },
]);

onShow(() => {
  if (paging && paging.value) paging.value.refresh();
});

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

const queryList = (pageNo, pageSize) => {
  // 组装参数
  const params = {
    componentType: componentType.value,
    state: statevalue.value,
    sortBy: "created_at",
    sortMethod: "desc",
    pageParam: {
      pageNum: pageNo,
      pageSize: pageSize,
    },
  };

  api.callOperateApi("ebikeComponentEnterRecords/list", params).then((res) => {
    if (res.code === 200) {
      paging.value.complete(res.data.records);
    } else {
      paging.value.complete(false);
    }
  });
};

// 创建 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 navButtonClick = (e) => {
  const index = e.index;
  if (index == 0) {
    setTimeout(() => {
      uni.navigateTo({
        url: `/pages/warehouse/component/enterdetails`, //
      });
    }, 200); // 延迟100毫秒后执行
  }
};

const dealstate = (componentEnterRecordId, url, mes) => {
  api
    .callOperateApi(
      "ebikeComponent/" +
        url +
        "?componentEnterRecordId=" +
        componentEnterRecordId,
      {},
      "get"
    )
    .then((res) => {
      if (res.code == "200") {
        uni.showToast({
          title: mes + "成功",
          icon: "success",
          duration: 5000,
        });
        queryList(1, 10);
      } else {
        uni.showToast({
          title: mes + "失败",
          icon: "error",
          duration: 5000,
        });
      }
    });
};

const listBatteryData = ref([]);
const listHelmetData = ref([]);
const getBatteryList = (
  componentEnterRecordId,
  pageNo = 1,
  pageSize = 100,
  callback
) => {
  // 组装参数
  const params = {
    componentEnterRecordId: componentEnterRecordId,
    pageParam: {
      pageNum: pageNo,
      pageSize: pageSize,
    },
  };
  api.callOperateApi("ebikeBatteryEnterRecords/list", params).then((res) => {
    if (res.code === 200) {
      listBatteryData.value.push(...res.data.records);
      if (res.data.totalRow > pageNo * pageSize) {
        pageNo += 1;
        getBatteryList(componentEnterRecordId, pageNo, pageSize, callback);
      } else {
        if (callback) callback(true);
      }
    } else {
      if (callback) callback(false);
    }
  });
};

const getHelmetList = (
  componentEnterRecordId,
  pageNo = 1,
  pageSize = 100,
  callback
) => {
  // 组装参数
  const params = {
    componentEnterRecordId: componentEnterRecordId,
    pageParam: {
      pageNum: pageNo,
      pageSize: pageSize,
    },
  };
  api.callOperateApi("ebikeHelmetEnterRecords/list", params).then((res) => {
    if (res.code === 200) {
      listHelmetData.value.push(...res.data.records);
      if (res.data.totalRow > pageNo * pageSize) {
        pageNo += 1;
        getHelmetList(componentEnterRecordId, pageNo, pageSize, callback);
      } else {
        if (callback) callback();
      }
    }
  });
};

const savestate = (componentEnterRecordId, state) => {
  // 组装参数
  const params = {
    componentEnterRecordId: componentEnterRecordId,
    state: state,
    updateUser: userInfo.value.username,
    updateAt: dataFormat(new Date(), "yyyy-MM-dd HH:mm:ss"),
  };
  api
    .callOperateApi("ebikeComponentEnterRecords/update", params)
    .then((res) => {
      if (res.code != 200) {
        showModelMessage(res.message);
        return;
      }
      paging.value.refresh();
    });
};

const opendetail = (componentEnterRecordId) => {
  setTimeout(() => {
    uni.navigateTo({
      url: `/pages/warehouse/component/enterdetails?componentEnterRecordId=${componentEnterRecordId}`, //
    });
  }, 200); // 延迟100毫秒后执行
};
</script>

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

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

.close {
  padding: 10px;
}

.search {
  width: 90%;
}

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

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

.searchlist {
  padding: 15px;
}

.nav-panel {
  padding-bottom: 20px;
  background-color: #fff;
}

.list-item {
  padding: 10px;
  margin: 10px;
  /* border: 1px solid #d6d4d4; */
  border-radius: 5px;
  background-color: #fff;
  /* box-shadow: 2px 2px 4px 2px rgba(212, 212, 212, 0.6); */
}

.list-title-row {
  line-height: 25px;
}

.list-title {
  font-weight: 600;
  font-size: 15px;
}

.list-tag-right {
  width: 100%;
  text-align: right;
  font-size: 12px;
}

.list-image-panel {
  width: 100%;
  text-align: left;
}

.list-image-box {
  width: 50px;
  height: 50px;
  background-color: #fafafa;
}

.list-item-row {
  font-size: 12px;
  padding: 4px 0px;
}

.font-weight-6 {
  font-weight: 600;
}

.list-botton-box {
  border-top: 1px solid #d6d4d4;
  padding: 10px 0px 0px 0px;
  text-align: right;
}

button {
  margin-left: 5px;
  border-radius: 5px;
}
</style>