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

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"
          <up-input v-model="searchForm.supplierName"
            placeholder="请输入供应商名称"
            clearable
          />
                    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,174 +83,184 @@
            <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"
    <up-popup :show="showDatePicker"
              mode="bottom"
              @close="showDatePicker = false">
      <up-datetime-picker :show="true"
        v-model="dateValue"
        @confirm="onDateConfirm"
        @cancel="showDatePicker = false"
        mode="date"
      />
                          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 { 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"
    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 total = ref(0);

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

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

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

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

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

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

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

// 新增入库
const handleAdd = () => {
  formDiaManual.value?.openDialog('add')
}
    formDiaManual.value?.openDialog("add");
  };

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

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

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

<style scoped lang="scss">