| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="search_form"> |
| | | <div class="search-row"> |
| | | <div class="search-item"> |
| | | <span class="search_title">天ï¼</span> |
| | | <el-date-picker |
| | | v-model="searchForm.searchTime" |
| | | type="date" |
| | | placeholder="éæ©æ¥æ" |
| | | clearable |
| | | @change="handleSearchDate" |
| | | /> |
| | | </div> |
| | | <div class="search-item"> |
| | | <el-button type="primary" |
| | | @click="handleQuery">æç´¢ |
| | | </el-button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="table_list"> |
| | | <PIMTable rowKey="id" |
| | | :column="tableColumn" |
| | | :tableData="tableData" |
| | | :page="page" |
| | | :tableLoading="tableLoading" |
| | | @pagination="pagination"> |
| | | </PIMTable> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {onMounted, ref} from "vue"; |
| | | import dayjs from "dayjs"; |
| | | import {getCurrentInstance, reactive, toRefs} from "vue"; |
| | | import {queryProductInputAndOutput} from "../../../api/productionManagement/productionProductMain.js"; |
| | | |
| | | const {proxy} = getCurrentInstance(); |
| | | |
| | | const tableColumn = ref([ |
| | | { |
| | | label: "产ååç§°", |
| | | prop: "productName", |
| | | width: "140", |
| | | }, |
| | | { |
| | | label: "è§æ ¼", |
| | | prop: "model", |
| | | }, |
| | | { |
| | | label: "åä½", |
| | | prop: "unit", |
| | | }, |
| | | { |
| | | label: "æå
¥æ°é", |
| | | prop: "inputQuantity", |
| | | width: "140", |
| | | }, |
| | | { |
| | | label: "äº§åºæ°é", |
| | | prop: "outputQuantity", |
| | | width: "140", |
| | | } |
| | | ]); |
| | | const tableData = ref([]); |
| | | const tableLoading = ref(false); |
| | | const page = reactive({ |
| | | current: 1, |
| | | size: 100, |
| | | total: 0, |
| | | }); |
| | | |
| | | const data = reactive({ |
| | | searchForm: { |
| | | searchTime: dayjs(), |
| | | startTime: dayjs().startOf('day').format("YYYY-MM-DD"), |
| | | endTime: dayjs().add(1, 'day').startOf('day').format("YYYY-MM-DD"), |
| | | }, |
| | | }); |
| | | const {searchForm} = toRefs(data); |
| | | |
| | | // æ¥è¯¢å表 |
| | | /** æç´¢æé®æä½ */ |
| | | const handleQuery = () => { |
| | | page.current = 1; |
| | | getList(); |
| | | }; |
| | | const pagination = obj => { |
| | | page.current = obj.page; |
| | | page.size = obj.limit; |
| | | getList(); |
| | | }; |
| | | const getList = () => { |
| | | tableLoading.value = true; |
| | | const params = {...searchForm.value, ...page}; |
| | | queryProductInputAndOutput(params) |
| | | .then(res => { |
| | | tableLoading.value = false; |
| | | tableData.value = res.data.records; |
| | | page.total = res.data.total; |
| | | }) |
| | | .catch(() => { |
| | | tableLoading.value = false; |
| | | }); |
| | | }; |
| | | |
| | | const handleSearchDate = () => { |
| | | searchForm.value.startTime = dayjs(searchForm.value.searchTime).startOf('day').format("YYYY-MM-DD"); |
| | | searchForm.value.endTime = dayjs(searchForm.value.searchTime).add(1, 'day').startOf('day').format("YYYY-MM-DD"); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | getList(); |
| | | }); |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | .search_form { |
| | | margin-bottom: 20px; |
| | | .search-row { |
| | | display: flex; |
| | | gap: 20px; |
| | | align-items: center; |
| | | .search-item { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 10px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .transfer-card-title { |
| | | font-size: 24px; |
| | | font-weight: bold; |
| | | text-align: center; |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .transfer-card-container { |
| | | display: flex; |
| | | gap: 20px; |
| | | height: 350px; |
| | | .transfer-card-info { |
| | | flex: 1; |
| | | overflow: auto; |
| | | .info-group { |
| | | width: 50%; |
| | | float: left; |
| | | } |
| | | .info-item { |
| | | display: flex; |
| | | margin-bottom: 15px; |
| | | .info-label { |
| | | width: 120px; |
| | | font-weight: bold; |
| | | margin-right: 20px; |
| | | } |
| | | .info-value { |
| | | flex: 1; |
| | | } |
| | | } |
| | | } |
| | | .transfer-card-qr { |
| | | width: 240px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: flex-start; |
| | | } |
| | | } |
| | | </style> |
| | | |
| | | <style lang="scss"> |
| | | @media print { |
| | | @page { |
| | | size: landscape; |
| | | } |
| | | body * { |
| | | visibility: hidden; |
| | | } |
| | | .el-dialog__wrapper, |
| | | .el-dialog, |
| | | .el-dialog__body, |
| | | .transfer-card-title, |
| | | .transfer-card-container, |
| | | .transfer-card-container *, |
| | | .info-item, |
| | | .info-label, |
| | | .info-value { |
| | | visibility: visible; |
| | | } |
| | | .print-button-container { |
| | | visibility: hidden; |
| | | } |
| | | .el-dialog__wrapper { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | margin: 0; |
| | | } |
| | | .el-dialog { |
| | | width: 100% !important; |
| | | max-width: 800px; |
| | | margin: 0 auto !important; |
| | | } |
| | | .el-dialog__header, |
| | | .el-dialog__footer { |
| | | display: none; |
| | | } |
| | | .el-dialog__body { |
| | | padding: 20px; |
| | | } |
| | | .transfer-card-container { |
| | | height: auto; |
| | | display: flex; |
| | | gap: 20px; |
| | | } |
| | | .transfer-card-info { |
| | | flex: 1; |
| | | .info-group { |
| | | width: 100%; |
| | | float: none; |
| | | margin-bottom: 20px; |
| | | } |
| | | .info-item { |
| | | display: flex; |
| | | margin-bottom: 10px; |
| | | .info-label { |
| | | width: 100px; |
| | | font-weight: bold; |
| | | margin-right: 15px; |
| | | white-space: nowrap; |
| | | } |
| | | .info-value { |
| | | flex: 1; |
| | | word-break: break-word; |
| | | } |
| | | } |
| | | } |
| | | .transfer-card-qr { |
| | | width: 160px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: flex-start; |
| | | } |
| | | .qr-container img { |
| | | width: 140px !important; |
| | | height: 140px !important; |
| | | } |
| | | } |
| | | </style> |