ebike-plus-wx-maintenance/src/pages-sub/operation/carOperation/carOperation.vue

<script lang="ts" setup>
import { batchRemoveInventoryAPI, getInventoryListAPI, getOperatoringAllListAPI } from '@/api/warehouse'
import { useAppStore, useOperatorStore } from '@/store'

definePage({
  style: {
    navigationBarTitleText: '运营车辆',
    navigationBarBackgroundColor: '#1488f5',
    navigationBarTextStyle: 'white',
  },
})

const appStore = useAppStore()
const operatorStore = useOperatorStore()
const paging = ref<any>(null)
const list = ref<any>([])
const checkboxValue = ref<any>([])
const operatorAllList = ref<any>([])
const regionId_list = ref<any>([])

const modalRef = ref<any>(null)

// 刷新列表
function refreshList() {
  list.value = []
}

// 获取列表
async function queryList(pageNo: number, pageSize: number) {
  try {
    uni.showLoading({
      title: '加载中',
    })
    const { records } = await getInventoryListAPI({
      pageNum: pageNo,
      pageSize,
    })
    uni.hideLoading()
    paging.value.complete(records)
  }
  catch (e) {
    uni.hideLoading()
    paging.value.complete(false)
  }
}

// 车辆上架
function vehicleHoisting() {
  modalRef.value.open()
}

// 获取列表
async function getOperatoringAllList() {
  try {
    const res = await getOperatoringAllListAPI()
    if (res && res.length > 0) {
      regionId_list.value = res.map((item) => {
        return {
          text: item.regionName,
          value: item.regionId,
        }
      })
    }
  }
  catch (e) {
    console.error(new Error('获取运营区'))
  }
}

// 提交
async function submit() {
  try {
    uni.showLoading({
      title: '正在提交中。。。',
    })
    const res = await batchRemoveInventoryAPI({
      bikeCodes: checkboxValue.value,
    })
    uni.hideLoading()
    modalRef.value.close()
    modalRef.value.closeLoading()
    paging.value.reload()
    checkboxValue.value = []
  }
  catch (e) {
    modalRef.value.closeLoading()
    uni.hideLoading()
  }
}

onMounted(async () => {
  operatorAllList.value = await operatorStore.getOperatorList()
  getOperatoringAllList()
})
</script>

<template>
  <view>
    <z-paging
      ref="paging"
      v-model="list"
      :default-page-no="Number('1')"
      :default-page-size="Number('10')"
      :auto-show-back-to-top="Boolean(true)"
      bg-color="#f3f3f3"
      @query="queryList"
      @refresher-touchend="refreshList"
    >
      <view class="container">
        <uv-checkbox-group
          v-model="checkboxValue"
          size="20"
        >
          <view class="list-panel">
            <view
              v-for="(item) in list"
              :key="item.bikeInfoId"
              class="list-item"
            >
              <view class="header d-flex align-center justify-between">
                <view class="d-flex align-center">
                  <uv-checkbox
                    :name="item.bikeCode"
                  />
                </view>
                <uv-tags :text="appStore.translateDictValue(item.status, 'BIKE_STATUS')" size="mini" />
              </view>
              <view class="body">
                <view class="icon">
                  <uv-icon
                    name="dianpingche"
                    custom-prefix="custom-icon"
                    size="34"
                    color="#1488f5"
                  />
                </view>
                <view class="content fz-28">
                  <view class="brand">
                    车辆编号：{{ item.bikeCode }}
                  </view>
                  <view class="brand">
                    运营商：{{ operatorStore.translateOperatorId(item.operatorId, operatorAllList) }}
                  </view>
                  <view class="brand">
                    运营区域：{{ item.regionName }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </uv-checkbox-group>
      </view>
      <template #bottom>
        <view class="bottom-button-zaping">
          <uv-button :disabled="checkboxValue.length <= 0" type="primary" text="车辆下架" @click="vehicleHoisting" />
        </view>
      </template>
    </z-paging>

    <uv-modal ref="modalRef" title="车辆下架" confirm-text="下架" show-cancel-button :async-close="true" @confirm="submit">
      <view class="tips">
        当前选择下架的车辆：{{ checkboxValue.join(",") }}
      </view>
    </uv-modal>
  </view>
</template>

<style lang="scss" scoped>
.container {
  .list-panel {
    padding: 10px 5px 0px 0px;
    width: 100%;

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

      .header {
        width: 100%;
        margin-bottom: 20rpx;
      }

      .body {
        width: 100%;
        display: flex;
        align-items: center;

        .content {
          display: flex;
          margin-left: 20rpx;
          flex-direction: column;
          justify-content: center;
          padding-bottom: 10rpx;

          .brand {
            margin-bottom: 10rpx;
          }
        }
      }
    }
  }
}

.tips {
  width: 100%;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}
</style>