<template>
|
<view class="list">
|
<z-paging
|
ref="pagingRef"
|
v-model="cardList"
|
:fixed="false"
|
:auto-show-back-to-top="true"
|
@query="getList"
|
>
|
<template #top>
|
<CardTitle title="芯线领用" :hideAction="false" :full="false">
|
<template #action>
|
<wd-button type="icon" icon="scan" color="#0D867F" @click="openScan"></wd-button>
|
<wd-button type="icon" icon="add-circle" color="#0D867F" @click="addReport"></wd-button>
|
</template>
|
</CardTitle>
|
</template>
|
<wd-card v-for="(item, index) in cardList" :key="index" type="rectangle" custom-class="round">
|
<template #title>
|
<view class="flex justify-between">
|
<view>
|
<wd-icon name="a-rootlist" color="#0D867F"></wd-icon>
|
<text class="text-[#252525] ml-2 font-medium">{{ item.model }}</text>
|
</view>
|
<view class="text-[#A8A8A8]" @click="toEdit(item.id)">编辑</view>
|
</view>
|
</template>
|
<ProductionCard :data="cardAttr" :value="item" color="#0D867F" />
|
</wd-card>
|
</z-paging>
|
<wd-popup v-model="addDialog.visible" position="bottom" custom-class="yl-popup">
|
<view class="action px-3">
|
<wd-button type="text" @click="cancelAdd">取消</wd-button>
|
<wd-button type="text" @click="submitAdd">确定</wd-button>
|
</view>
|
<SteelCore ref="addFormRef" mode="add" :wireId="paramsId" @refresh="reloadList" />
|
</wd-popup>
|
<wd-popup v-model="editDialog.visible" position="bottom" custom-class="yl-popup">
|
<view class="action px-3">
|
<wd-button type="text" @click="cancelEdit">取消</wd-button>
|
<wd-button type="text" @click="submitEdit">确定</wd-button>
|
</view>
|
<SteelCore
|
ref="editFormRef"
|
mode="edit"
|
:wireId="paramsId"
|
:editData="editDialog.currentItem"
|
@refresh="reloadList"
|
/>
|
</wd-popup>
|
<Scan ref="scanRef" emitName="scanSteelCore" />
|
<wd-toast />
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
import CardTitle from "@/components/card-title/index.vue";
|
import ProductionCard from "../../../components/ProductionCard.vue";
|
import { useToast } from "wot-design-uni";
|
import SteelCore from "./form.vue";
|
import { onLoad, onUnload, onShow, onHide } from "@dcloudio/uni-app";
|
import ManageApi from "@/api/product/manage";
|
import TwistApi from "@/api/product/twist";
|
import zPaging from "@/components/z-paging/z-paging.vue";
|
import Scan from "@/components/scan/index.vue";
|
|
const paramsId = ref();
|
const pagingRef = ref();
|
const addFormRef = ref();
|
const editFormRef = ref();
|
const scanRef = ref();
|
const toast = useToast();
|
const isPageVisible = ref(false); // 标记页面是否可见
|
const addDialog = reactive({
|
visible: false,
|
});
|
const editDialog = reactive({
|
visible: false,
|
currentItem: null as any,
|
editId: undefined as number | undefined,
|
});
|
const cardList = ref<any[]>([]);
|
|
const cardAttr = ref<any[]>([
|
{
|
label: "样品编号",
|
prop: "monofilamentNumber",
|
},
|
{
|
label: "数量",
|
prop: "amount",
|
unitProp: "unit",
|
},
|
{
|
label: "重量",
|
prop: "weight",
|
unitProp: "weightUnit",
|
},
|
{
|
label: "厂家",
|
prop: "supplier",
|
span: 16,
|
},
|
]);
|
|
const toEdit = (id: number) => {
|
const itemToEdit = cardList.value.find((item) => item.id === id);
|
if (itemToEdit) {
|
editDialog.currentItem = itemToEdit;
|
editDialog.editId = id;
|
editDialog.visible = true;
|
}
|
};
|
|
const addReport = () => {
|
if (addFormRef.value) {
|
addFormRef.value.resetFormData();
|
}
|
addDialog.visible = true;
|
};
|
|
const submitAdd = async () => {
|
const success = await addFormRef.value.submit();
|
if (success) {
|
addDialog.visible = false;
|
}
|
};
|
|
const cancelAdd = () => {
|
toast.show("取消");
|
addDialog.visible = false;
|
};
|
|
const submitEdit = async () => {
|
const success = await editFormRef.value.submitEdit(cardList.value, editDialog.editId);
|
if (success) {
|
editDialog.visible = false;
|
reloadList();
|
}
|
};
|
|
const cancelEdit = () => {
|
toast.show("取消");
|
editDialog.visible = false;
|
};
|
|
const getList = async () => {
|
const { code, data } = await ManageApi.getStrandedWireDish({
|
wireId: paramsId.value,
|
type: "钢芯",
|
});
|
if (code == 200) {
|
pagingRef.value.complete(data);
|
}
|
};
|
|
const reloadList = () => {
|
pagingRef.value.refresh();
|
};
|
|
// 扫码相关方法
|
const openScan = () => {
|
scanRef.value.triggerScan();
|
};
|
|
const getScanCode = async (code: any) => {
|
// 检查页面是否可见，如果不可见则不处理扫码数据
|
if (!isPageVisible.value) {
|
return;
|
}
|
|
try {
|
const parseData = JSON.parse(code.code);
|
|
// 打开新增弹框并填充扫码获取的信息
|
addDialog.visible = true;
|
|
// 等待弹框打开后填充表单数据
|
// 使用双重等待：nextTick + setTimeout 确保组件已完全挂载
|
nextTick(() => {
|
setTimeout(() => {
|
if (addFormRef.value) {
|
addFormRef.value.fillFormData(parseData);
|
toast.success("扫码成功，请确认信息");
|
} else {
|
toast.error("表单加载失败，请重试");
|
}
|
}, 200); // 延迟200ms确保弹框和组件已完全渲染
|
});
|
} catch (error) {
|
toast.error("二维码异常，请更换二维码！");
|
}
|
};
|
|
onLoad((options: any) => {
|
// 开启广播监听事件
|
uni.$on("scanSteelCore", getScanCode);
|
paramsId.value = options.id;
|
});
|
|
onShow(() => {
|
// 页面显示时标记为可见
|
isPageVisible.value = true;
|
});
|
|
onHide(() => {
|
// 页面隐藏时标记为不可见
|
isPageVisible.value = false;
|
});
|
|
onUnload(() => {
|
// 取消广播监听事件
|
uni.$off("scanSteelCore", getScanCode);
|
isPageVisible.value = false;
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.list {
|
height: calc(100vh - 120px);
|
padding: 12px;
|
background: #f3f9f8;
|
|
:deep() {
|
.round {
|
border-radius: 4px;
|
}
|
}
|
}
|
|
.action {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
:deep(.wd-button__content) {
|
color: #0d867f;
|
}
|
</style>
|
