扫码出库和扫码入库功能开发

zhangwencui

昨天 95fce9ecb77e9615df925eee143ce34647c694ce

 src/pages/inventoryManagement/receiptManagement/index.vue

@@ -1,34 +1,42 @@
<template>
  <view class="stock-in-page">
    <PageHeader title="自定义入库" @back="goBack" />
    
    <PageHeader title="自定义入库"
                @back="goBack" />
    <!-- 搜索区域 -->
    <view class="search-section">
      <view class="search-bar">
        <view class="search-input">
          <up-input
            v-model="searchForm.supplierName"
            placeholder="请输入供应商名称"
            clearable
          />
          <up-input v-model="searchForm.supplierName"
                    placeholder="请输入供应商名称"
                    clearable />
        </view>
        <view class="search-button" @click="handleQuery">
          <up-icon name="search" size="24" color="#999"></up-icon>
        <view class="search-button"
              @click="handleQuery">
          <up-icon name="search"
                   size="24"
                   color="#999"></up-icon>
        </view>
      </view>
      <view class="date-filter" @click="openDatePickerHandler">
      <view class="date-filter"
            @click="openDatePickerHandler">
        <text class="date-text">{{ searchForm.timeStr || '选择日期' }}</text>
        <up-icon name="calendar" size="18" color="#999"></up-icon>
        <up-icon name="calendar"
                 size="18"
                 color="#999"></up-icon>
      </view>
    </view>
    
    <!-- 列表 -->
    <view class="stock-list" v-if="tableData.length > 0">
      <view v-for="(item, index) in tableData" :key="index" class="stock-item">
    <view class="stock-list"
          v-if="tableData.length > 0">
      <view v-for="(item, index) in tableData"
            :key="index"
            class="stock-item">
        <view class="item-header">
          <view class="item-left">
            <view class="batch-icon">
              <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
              <up-icon name="file-text"
                       size="16"
                       color="#ffffff"></up-icon>
            </view>
            <text class="batch-text">{{ item.inboundBatches }}</text>
          </view>
@@ -37,7 +45,6 @@
          </view>
        </view>
        <up-divider></up-divider>
        
        <view class="item-details">
          <view class="detail-row">
            <text class="detail-label">供应商名称</text>
@@ -76,331 +83,341 @@
            <text class="detail-value">{{ item.createBy }}</text>
          </view>
        </view>
        
        <view class="item-actions">
          <u-button type="primary" size="small" @click="handleEdit(item)">编辑</u-button>
          <u-button type="error" size="small" plain @click="handleDeleteSingle(item)">删除</u-button>
          <u-button type="primary"
                    size="small"
                    @click="handleEdit(item)">编辑</u-button>
          <u-button type="error"
                    size="small"
                    plain
                    @click="handleDeleteSingle(item)">删除</u-button>
        </view>
      </view>
    </view>
    
    <view v-else class="no-data">
    <view v-else
          class="no-data">
      <text>暂无数据</text>
    </view>
    
    <!-- 浮动操作按钮 -->
    <view class="fab-button" @click="handleAdd">
      <up-icon name="plus" size="24" color="#ffffff"></up-icon>
    <view class="fab-button"
          @click="handleAdd">
      <up-icon name="plus"
               size="24"
               color="#ffffff"></up-icon>
    </view>
    
    <!-- 日期选择器 -->
    <up-popup :show="showDatePicker" mode="bottom" @close="showDatePicker = false">
      <up-datetime-picker
        :show="true"
        v-model="dateValue"
        @confirm="onDateConfirm"
        @cancel="showDatePicker = false"
        mode="date"
      />
    <up-popup :show="showDatePicker"
              mode="bottom"
              @close="showDatePicker = false">
      <up-datetime-picker :show="true"
                          v-model="dateValue"
                          @confirm="onDateConfirm"
                          @cancel="showDatePicker = false"
                          mode="date" />
    </up-popup>
    
    <!-- 表单弹窗 -->
    <form-dia-manual ref="formDiaManual" @close="getList" @success="getList" />
    <form-dia-manual ref="formDiaManual"
                     @close="getList"
                     @success="getList" />
  </view>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import dayjs from 'dayjs'
import PageHeader from '@/components/PageHeader.vue'
import FormDiaManual from './components/formDiaManual.vue'
import useUserStore from '@/store/modules/user'
import { formatDateToYMD } from '@/utils/ruoyi'
import {
  getInPageByCustom,
  delStockInCustom
} from "@/api/inventoryManagement/stockIn.js"
  import { ref, reactive, toRefs, onMounted } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import dayjs from "dayjs";
  import PageHeader from "@/components/PageHeader.vue";
  import FormDiaManual from "./components/formDiaManual.vue";
  import useUserStore from "@/store/modules/user";
  import { formatDateToYMD } from "@/utils/ruoyi";
  import {
    getInPageByCustom,
    delStockInCustom,
  } from "@/api/inventoryManagement/stockIn.js";

const userStore = useUserStore()
  const userStore = useUserStore();

const tableData = ref([])
const showDatePicker = ref(false)
const dateValue = ref(new Date().getTime())
const formDiaManual = ref(null)
  const tableData = ref([]);
  const showDatePicker = ref(false);
  const dateValue = ref(new Date().getTime());
  const formDiaManual = ref(null);

const page = reactive({
  current: 1,
  size: 20,
})
const total = ref(0)
  const page = reactive({
    current: 1,
    size: 20,
  });
  const total = ref(0);

const data = reactive({
  searchForm: {
    supplierName: '',
    timeStr: '',
  },
})
const { searchForm } = toRefs(data)
  const data = reactive({
    searchForm: {
      supplierName: "",
      timeStr: "",
    },
  });
  const { searchForm } = toRefs(data);

// 统一用 dayjs 输出 YYYY-MM-DD
const formatYMDLocal = (ts) => dayjs(Number(ts)).format('YYYY-MM-DD')
  // 统一用 dayjs 输出 YYYY-MM-DD
  const formatYMDLocal = ts => dayjs(Number(ts)).format("YYYY-MM-DD");

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
  // 返回上一页
  const goBack = () => {
    uni.navigateBack();
  };

// 查询列表
const handleQuery = () => {
  page.current = 1
  getList()
}
  // 查询列表
  const handleQuery = () => {
    page.current = 1;
    getList();
  };

const getList = () => {
  uni.showLoading({
    title: '加载中...',
    mask: true
  })
  
  const params = {
    ...page,
    supplierName: searchForm.value.supplierName,
    timeStr: searchForm.value.timeStr
  }
  
  getInPageByCustom(params).then(res => {
    uni.hideLoading()
    tableData.value = res.data.records || []
    total.value = res.data.total || 0
  }).catch(() => {
    uni.hideLoading()
    uni.showToast({
      title: '加载失败',
      icon: 'none'
    })
  })
}
  const getList = () => {
    uni.showLoading({
      title: "加载中...",
      mask: true,
    });

// 打开日期选择器（简单可靠）
const openDatePickerHandler = () => {
  // 若已有选中日期，用它初始化；否则用今天
  dateValue.value = searchForm.value.timeStr
    ? dayjs(searchForm.value.timeStr, 'YYYY-MM-DD').valueOf()
    : Date.now()
  showDatePicker.value = true
}
    const params = {
      ...page,
      supplierName: searchForm.value.supplierName,
      timeStr: searchForm.value.timeStr,
    };

// 日期选择确认（与其他页一致：拿时间戳 -> YYYY-MM-DD）
const onDateConfirm = (e) => {
  searchForm.value.timeStr = formatDateToYMD(e.value)
  showDatePicker.value = false
  handleQuery()
}
    getInPageByCustom(params)
      .then(res => {
        uni.hideLoading();
        tableData.value = res.data.records || [];
        total.value = res.data.total || 0;
      })
      .catch(() => {
        uni.hideLoading();
        uni.showToast({
          title: "加载失败",
          icon: "none",
        });
      });
  };

// 新增入库
const handleAdd = () => {
  formDiaManual.value?.openDialog('add')
}
  // 打开日期选择器（简单可靠）
  const openDatePickerHandler = () => {
    // 若已有选中日期，用它初始化；否则用今天
    dateValue.value = searchForm.value.timeStr
      ? dayjs(searchForm.value.timeStr, "YYYY-MM-DD").valueOf()
      : Date.now();
    showDatePicker.value = true;
  };

// 编辑
const handleEdit = (item) => {
  formDiaManual.value?.openDialog('edit', item)
}
  // 日期选择确认（与其他页一致：拿时间戳 -> YYYY-MM-DD）
  const onDateConfirm = e => {
    searchForm.value.timeStr = formatDateToYMD(e.value);
    showDatePicker.value = false;
    handleQuery();
  };

// 删除单条
const handleDeleteSingle = (item) => {
  // 检查是否是本人创建
  if (item.createBy !== userStore.nickName) {
    uni.showToast({
      title: '不可删除他人维护的数据',
      icon: 'none'
    })
    return
  }
  
  uni.showModal({
    title: '删除',
    content: '确认删除该入库记录吗？',
    success: (res) => {
      if (res.confirm) {
        delStockInCustom({ ids: [item.id] }).then(() => {
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          })
          getList()
        }).catch(() => {
          uni.showToast({
            title: '删除失败',
            icon: 'none'
          })
        })
      }
  // 新增入库
  const handleAdd = () => {
    formDiaManual.value?.openDialog("add");
  };

  // 编辑
  const handleEdit = item => {
    formDiaManual.value?.openDialog("edit", item);
  };

  // 删除单条
  const handleDeleteSingle = item => {
    // 检查是否是本人创建
    if (item.createBy !== userStore.nickName) {
      uni.showToast({
        title: "不可删除他人维护的数据",
        icon: "none",
      });
      return;
    }
  })
}

onShow(() => {
  getList()
})
    uni.showModal({
      title: "删除",
      content: "确认删除该入库记录吗？",
      success: res => {
        if (res.confirm) {
          delStockInCustom({ ids: [item.id] })
            .then(() => {
              uni.showToast({
                title: "删除成功",
                icon: "success",
              });
              getList();
            })
            .catch(() => {
              uni.showToast({
                title: "删除失败",
                icon: "none",
              });
            });
        }
      },
    });
  };

  onShow(() => {
    getList();
  });
</script>

<style scoped lang="scss">
.stock-in-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 80px;
}
  .stock-in-page {
    min-height: 100vh;
    background: #f5f5f5;
    padding-bottom: 80px;
  }

.search-section {
  background: #fff;
  padding: 16px;
  margin-bottom: 12px;
}
  .search-section {
    background: #fff;
    padding: 16px;
    margin-bottom: 12px;
  }

.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
  .search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }

.search-input {
  flex: 1;
}
  .search-input {
    flex: 1;
  }

.search-button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 8px;
}
  .search-button {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 8px;
  }

.date-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f5f5f5;
  border-radius: 8px;
}
  .date-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 8px;
  }

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

.stock-list {
  padding: 0 16px;
}
  .stock-list {
    padding: 0 16px;
  }

.stock-item {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
  .stock-item {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

.item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
  .item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

.item-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
  .item-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

.batch-icon {
  width: 32px;
  height: 32px;
  background: #2979ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
  .batch-icon {
    width: 32px;
    height: 32px;
    background: #2979ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.batch-text {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
  .batch-text {
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }

.time-text {
  font-size: 12px;
  color: #999;
}
  .time-text {
    font-size: 12px;
    color: #999;
  }

.item-details {
  margin: 12px 0;
}
  .item-details {
    margin: 12px 0;
  }

.detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
  .detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
  }

.detail-label {
  font-size: 14px;
  color: #666;
}
  .detail-label {
    font-size: 14px;
    color: #666;
  }

.detail-value {
  font-size: 14px;
  color: #333;
  text-align: right;
  flex: 1;
  margin-left: 12px;
}
  .detail-value {
    font-size: 14px;
    color: #333;
    text-align: right;
    flex: 1;
    margin-left: 12px;
  }

.detail-value.highlight {
  color: #2979ff;
  font-weight: 500;
}
  .detail-value.highlight {
    color: #2979ff;
    font-weight: 500;
  }

.detail-value.price {
  color: #ff6b00;
  font-weight: 500;
}
  .detail-value.price {
    color: #ff6b00;
    font-weight: 500;
  }

.item-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f5f5f5;
}
  .item-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f5f5f5;
  }

.no-data {
  text-align: center;
  padding: 60px 0;
  color: #999;
  font-size: 14px;
}
  .no-data {
    text-align: center;
    padding: 60px 0;
    color: #999;
    font-size: 14px;
  }

.fab-button {
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 56px;
  height: 56px;
  background: #2979ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(41, 121, 255, 0.4);
  z-index: 999;
}
  .fab-button {
    position: fixed;
    right: 20px;
    bottom: 80px;
    width: 56px;
    height: 56px;
    background: #2979ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(41, 121, 255, 0.4);
    z-index: 999;
  }
</style>