| | |
| | | 'å®¡æ ¸ä¸': 'å®¡æ ¸ä¸', |
| | | 'å®¡æ ¸æç»': 'å®¡æ ¸æç»', |
| | | 'å®¡æ ¸éè¿': 'å®¡æ ¸éè¿', |
| | | 'å·²åè´§': 'å·²åè´§', |
| | | '0': 'å¾
å®¡æ ¸', |
| | | '1': 'å®¡æ ¸ä¸', |
| | | '2': 'å®¡æ ¸æç»', |
| | |
| | | 'å®¡æ ¸ä¸': 'warning', |
| | | 'å®¡æ ¸æç»': 'danger', |
| | | 'å®¡æ ¸éè¿': 'success', |
| | | 'å·²åè´§': 'success', |
| | | '0': 'info', |
| | | '1': 'warning', |
| | | '2': 'danger', |
| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <el-dialog v-model="dialogVisible" title="éè´§å详æ
" width="90%" @close="closeDia"> |
| | | <div v-loading="loading"> |
| | | <span class="descriptions">åºæ¬ä¿¡æ¯</span> |
| | | <el-descriptions :column="4" border> |
| | | <el-descriptions-item label="éè´§åå·">{{ detail.returnNo }}</el-descriptions-item> |
| | | <el-descriptions-item label="åæ®ç¶æ"> |
| | | <el-tag :type="getStatusType(detail.status)">{{ getStatusText(detail.status) }}</el-tag> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="客æ·åç§°">{{ detail.customerName }}</el-descriptions-item> |
| | | <el-descriptions-item label="éå®åå·">{{ detail.salesContractNo }}</el-descriptions-item> |
| | | <el-descriptions-item label="ä¸å¡å">{{ detail.salesman }}</el-descriptions-item> |
| | | <el-descriptions-item label="å
³èåºåºåå·">{{ detail.shippingNo }}</el-descriptions-item> |
| | | <el-descriptions-item label="项ç®åç§°">{{ detail.projectName }}</el-descriptions-item> |
| | | <el-descriptions-item label="å¶å人">{{ detail.maker }}</el-descriptions-item> |
| | | <el-descriptions-item label="å¶åæ¶é´">{{ detail.makeTime }}</el-descriptions-item> |
| | | <el-descriptions-item label="éè´§åå ">{{ detail.returnReason }}</el-descriptions-item> |
| | | <el-descriptions-item label="鿬¾æ»é¢">{{ detail.refundAmount }}</el-descriptions-item> |
| | | </el-descriptions> |
| | | |
| | | <div style="padding-top: 20px"> |
| | | <span class="descriptions">产åå表</span> |
| | | <PIMTable :isShowPagination="false" rowKey="id" :column="tableColumn" :tableData="tableData" /> |
| | | </div> |
| | | </div> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button @click="closeDia">å
³é</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref } from "vue"; |
| | | import { returnManagementGetById, returnManagementGetByShippingId } from "@/api/salesManagement/returnOrder.js"; |
| | | |
| | | const dialogVisible = ref(false); |
| | | const loading = ref(false); |
| | | const detail = ref({}); |
| | | const tableData = ref([]); |
| | | const availableProducts = ref([]); |
| | | |
| | | const tableColumn = [ |
| | | {align: "center", label: "产å大类", prop: "productCategory"}, |
| | | {align: "center", label: "è§æ ¼åå·", prop: "specificationModel"}, |
| | | {align: "center", label: "åä½", prop: "unit", width: 80}, |
| | | {align: "center", label: "æ»æ°é", prop: "quantity", width: 120}, |
| | | {align: "center", label: "å·²éè´§æ°é", prop: "totalReturnNum", width: 120}, |
| | | {align: "center", label: "æªéè´§æ°é", prop: "unQuantity", width: 120}, |
| | | {align: "center", label: "éè´§æ°é", prop: "returnQuantity", width: 120}, |
| | | {align: "center", label: "é货产ååä»·", prop: "price", width: 120}, |
| | | {align: "center", label: "é货产åéé¢", prop: "amount", width: 120}, |
| | | {align: "center", label: "æ¯å¦æè´¨éé®é¢", prop: "isQuality", width: 140, formatData: (v) => ({ "1": "æ¯", "2": "å¦" }[String(v)] ?? v)}, |
| | | {align: "center", label: "夿³¨", prop: "remark", width: 150}, |
| | | ]; |
| | | |
| | | const getStatusType = (status) => { |
| | | const statusMap = { |
| | | 0: "warning", |
| | | 1: "success" |
| | | }; |
| | | return statusMap[status] || "info"; |
| | | }; |
| | | |
| | | const getStatusText = (status) => { |
| | | const statusMap = { |
| | | 0: "å¾
å¤ç", |
| | | 1: "å·²å¤ç" |
| | | }; |
| | | return statusMap[status] || "æªç¥"; |
| | | }; |
| | | |
| | | const openDialog = async (row) => { |
| | | if (!row?.id) return; |
| | | dialogVisible.value = true; |
| | | loading.value = true; |
| | | try { |
| | | const res = await returnManagementGetById({ returnManagementId: row.id }); |
| | | detail.value = res?.data ?? res ?? {}; |
| | | |
| | | if (detail.value.shippingId) { |
| | | const productRes = await returnManagementGetByShippingId({ shippingId: detail.value.shippingId }); |
| | | if (productRes.code === 200) { |
| | | availableProducts.value = productRes.data.productDtoData || []; |
| | | } |
| | | } |
| | | |
| | | const list = |
| | | detail.value?.returnSaleProducts || |
| | | detail.value?.returnSaleProductList || |
| | | detail.value?.returnSaleProductDtoData || |
| | | []; |
| | | |
| | | tableData.value = Array.isArray(list) ? list.map(raw => { |
| | | const productId = raw?.returnSaleLedgerProductId ?? raw?.saleLedgerProductId ?? raw?.id; |
| | | const product = availableProducts.value.find((p) => p.id === productId); |
| | | const normalized = { |
| | | ...raw, |
| | | id: productId, |
| | | returnQuantity: Number(raw?.num ?? raw?.returnQuantity ?? 0), |
| | | price: Number(raw?.taxInclusiveUnitPrice ?? raw?.price ?? 0), |
| | | amount: Number(raw?.amount ?? 0).toFixed(2), |
| | | isQuality: raw?.isQuality ?? 2, |
| | | remark: raw?.remark ?? "", |
| | | }; |
| | | return product ? { ...product, ...normalized } : normalized; |
| | | }) : []; |
| | | } catch (e) { |
| | | console.error("Failed to load detail", e); |
| | | } finally { |
| | | loading.value = false; |
| | | } |
| | | }; |
| | | |
| | | const closeDia = () => { |
| | | dialogVisible.value = false; |
| | | detail.value = {}; |
| | | tableData.value = []; |
| | | availableProducts.value = []; |
| | | }; |
| | | |
| | | defineExpose({ openDialog }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .descriptions { |
| | | margin-bottom: 20px; |
| | | display: inline-block; |
| | | font-size: 1rem; |
| | | font-weight: 600; |
| | | padding-left: 12px; |
| | | position: relative; |
| | | } |
| | | .descriptions::before { |
| | | content: ""; |
| | | position: absolute; |
| | | left: 0; |
| | | top: 50%; |
| | | transform: translateY(-50%); |
| | | width: 4px; |
| | | height: 1rem; |
| | | background-color: #002FA7; |
| | | border-radius: 2px; |
| | | } |
| | | </style> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-form-item label="项ç®é¶æ®µï¼" prop="projectStage"> |
| | | <el-input v-model="form.projectStage" placeholder="项ç®é¶æ®µ" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-form-item label="å¶å人ï¼" prop="maker"> |
| | | <el-select v-model="form.maker" filterable placeholder="è¯·éæ©å¶å人"> |
| | | <el-option v-for="u in userOptions" :key="u.value" :label="u.label" :value="u.value" /> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-form-item label="ç»ç®äººï¼" prop="settler"> |
| | | <el-select v-model="form.settler" filterable placeholder="è¯·éæ©ç»ç®äºº"> |
| | | <el-option v-for="u in userOptions" :key="u.value" :label="u.label" :value="u.value" /> |
| | | <el-form-item label="ç¶æï¼" prop="status"> |
| | | <el-select v-model="form.status" placeholder="è¯·éæ©ç¶æ"> |
| | | <el-option label="å¾
å¤ç" :value="0" /> |
| | | <el-option label="å·²å¤ç" :value="1" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-form-item label="ç¶æï¼" prop="status"> |
| | | <el-select v-model="form.status" placeholder="è¯·éæ©ç¶æ"> |
| | | <el-option label="å¾
å®¡æ ¸" :value="0" /> |
| | | <el-option label="å®¡æ ¸ä¸" :value="1" /> |
| | | <el-option label="å·²å®¡æ ¸" :value="2" /> |
| | | </el-select> |
| | | <el-form-item label="éè´§åå ï¼" prop="returnReason"> |
| | | <el-input v-model="form.returnReason" placeholder="请è¾å
¥éè´§åå " /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-form-item label="鿬¾æ»é¢ï¼" prop="refundAmount"> |
| | | <el-input v-model="form.refundAmount" disabled placeholder="èªå¨è®¡ç®" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | placeholder="请è¾å
¥" |
| | | type="number" |
| | | @input="(val) => handleReturnQuantityChange(val, row)" |
| | | /> |
| | | </template> |
| | | <template #price="{ row }"> |
| | | <el-input |
| | | v-model="row.price" |
| | | style="width:100px" |
| | | placeholder="请è¾å
¥" |
| | | type="number" |
| | | @input="(val) => handlePriceChange(val, row)" |
| | | /> |
| | | </template> |
| | | <template #amount="{ row }"> |
| | | <el-input |
| | | v-model="row.amount" |
| | | style="width:100px" |
| | | placeholder="èªå¨è®¡ç®" |
| | | type="number" |
| | | disabled |
| | | /> |
| | | </template> |
| | | <template #isQuality="{ row }"> |
| | | <el-select v-model="row.isQuality" placeholder="è¯·éæ©" style="width:120px"> |
| | | <el-option label="æ¯" :value="1" /> |
| | | <el-option label="å¦" :value="2" /> |
| | | </el-select> |
| | | </template> |
| | | <template #remark="{ row }"> |
| | | <el-input |
| | | v-model="row.remark" |
| | | style="width:130px" |
| | | placeholder="请è¾å
¥" |
| | | /> |
| | | </template> |
| | | <template #action="{ row, index }"> |
| | |
| | | customerId: "", |
| | | shippingId: "", |
| | | projectId: "", |
| | | projectStage: "", |
| | | maker: "", |
| | | makeTime: "", |
| | | settler: "", |
| | | status: 0, |
| | | returnReason: "", |
| | | refundAmount: "", |
| | | }, |
| | | rules: { |
| | | returnNo: [{ |
| | |
| | | {align: "center", label: "å·²éè´§æ°é", prop: "totalReturnNum", width: 120 }, |
| | | {align: "center", label: "æªéè´§æ°é", prop: "unQuantity", width: 120 }, |
| | | {align: "center", label: "éè´§æ°é", prop: "returnQuantity", dataType: "slot", slot: "returnQuantity", width: 120 }, |
| | | {align: "center", label: "é货产ååä»·", prop: "price", dataType: "slot", slot: "price", width: 120 }, |
| | | {align: "center", label: "é货产åéé¢", prop: "amount", dataType: "slot", slot: "amount", width: 120 }, |
| | | {align: "center", label: "æ¯å¦æè´¨éé®é¢", prop: "isQuality", dataType: "slot", slot: "isQuality", width: 140 }, |
| | | {align: "center", label: "夿³¨", prop: "remark", dataType: "slot", slot: "remark", width: 150 }, |
| | | {align: "center", label: "æä½" , prop: "action", dataType: "slot", slot: "action", width: 120 }, |
| | | ]); |
| | | const tableData = ref([]); |
| | |
| | | id: productId, |
| | | returnSaleProductId, |
| | | returnSaleLedgerProductId: productId, |
| | | productModelId: raw?.productModelId, |
| | | num, |
| | | returnQuantity: Number.isFinite(num) ? num : 0, |
| | | price: Number(raw?.taxInclusiveUnitPrice ?? raw?.price ?? 0), |
| | | amount: Number(raw?.amount ?? 0).toFixed(2), |
| | | isQuality: raw?.isQuality ?? 2, |
| | | remark: raw?.remark ?? "", |
| | | }; |
| | | }; |
| | | |
| | |
| | | return product ? { ...product, ...normalized } : normalized; |
| | | }) |
| | | : []; |
| | | |
| | | calculateTotalRefund(); |
| | | }; |
| | | |
| | | const openDialog = async (type, row) => { |
| | |
| | | customerId: "", |
| | | shippingId: "", |
| | | projectId: "", |
| | | projectStage: "", |
| | | maker: "", |
| | | makeTime: "", |
| | | settler: "", |
| | | status: 0, |
| | | returnReason: "", |
| | | refundAmount: "", |
| | | }); |
| | | form.value.maker = userStore.nickName || userStore.name || ""; |
| | | form.value.makeTime = new Date().toISOString().replace('T', ' ').split('.')[0]; // Default to now |
| | |
| | | if (!valid) return; |
| | | const returnSaleProducts = (tableData.value || []).map(el => ({ |
| | | returnSaleLedgerProductId: el.returnSaleLedgerProductId ?? el.id, |
| | | productModelId: el.productModelId, |
| | | unit: el.unit, |
| | | num: Number(el.num ?? el.returnQuantity ?? 0), |
| | | price: Number(el.price ?? 0), |
| | | amount: Number(el.amount ?? 0), |
| | | isQuality: el.isQuality ?? 2, |
| | | remark: el.remark ?? "", |
| | | id: operationType.value === "edit" ? (el.returnSaleProductId ?? "") : "" |
| | | })); |
| | | const payload = { ...form.value, returnSaleProducts }; |
| | |
| | | if(res.code === 200){ |
| | | // If backend returns project info, set it |
| | | if (res.data.projectId) form.value.projectId = res.data.projectId; |
| | | if (res.data.projectStage) form.value.projectStage = res.data.projectStage; |
| | | |
| | | // Store available products for selection |
| | | availableProducts.value = res.data.productDtoData || []; |
| | |
| | | const current = Number(val); |
| | | |
| | | if (current > max) { |
| | | // Need nextTick to ensure update if user typed too fast or pasted |
| | | proxy.$nextTick(() => { |
| | | row.returnQuantity = max; |
| | | row.num = max; |
| | |
| | | } else { |
| | | row.num = current; |
| | | } |
| | | calculateRowAmount(row); |
| | | calculateTotalRefund(); |
| | | }; |
| | | |
| | | const handlePriceChange = (val, row) => { |
| | | if (val === "" || val === null) { |
| | | row.price = 0; |
| | | } |
| | | calculateRowAmount(row); |
| | | calculateTotalRefund(); |
| | | }; |
| | | |
| | | const calculateRowAmount = (row) => { |
| | | const quantity = Number(row.returnQuantity || 0); |
| | | const price = Number(row.price || 0); |
| | | row.amount = (quantity * price).toFixed(2); |
| | | }; |
| | | |
| | | const calculateTotalRefund = () => { |
| | | const total = tableData.value.reduce((sum, row) => { |
| | | return sum + Number(row.amount || 0); |
| | | }, 0); |
| | | form.value.refundAmount = total.toFixed(2); |
| | | }; |
| | | |
| | | const availableProducts = ref([]); |
| | |
| | | |
| | | // Removed checkSelectable to allow toggling existing items |
| | | const confirmProductSelection = () => { |
| | | // Rebuild tableData based on selection, preserving existing data (returnQuantity) |
| | | const newTableData = []; |
| | | |
| | | selectedProducts.value.forEach(product => { |
| | | // Check if product was already in tableData to preserve user input |
| | | const existing = tableData.value.find(item => item.id === product.id); |
| | | if (existing) { |
| | | newTableData.push(existing); |
| | | } else { |
| | | // Create new entry |
| | | newTableData.push({ |
| | | ...product, // Keep all product display fields (productName, model, unit, etc.) |
| | | |
| | | // Map to backend entity structure for submission |
| | | ...product, |
| | | returnSaleLedgerProductId: product.id, |
| | | returnQuantity: 0, // Default input |
| | | num: 0, // Backend quantity field |
| | | |
| | | // Ensure display fields are available if they come from 'product' |
| | | // If product has different field names than tableColumn expects, map them here |
| | | productModelId: product.productModelId, |
| | | returnQuantity: 0, |
| | | num: 0, |
| | | price: Number(product.taxInclusiveUnitPrice ?? 0), |
| | | amount: "0.00", |
| | | isQuality: 2, |
| | | remark: "", |
| | | productName: product.productName, |
| | | specificationModel: product.specificationModel, |
| | | unit: product.unit, |
| | |
| | | <el-form :model="searchForm" class="demo-form-inline"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="4"> |
| | | <el-form-item> |
| | | <el-form-item label="éè´§åå·"> |
| | | <el-input v-model="searchForm.returnNo" placeholder="请è¾å
¥éè´§åå·" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-form-item> |
| | | <el-form-item label="客æ·åç§°"> |
| | | <el-input v-model="searchForm.customerName" placeholder="客æ·åç§°" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-form-item> |
| | | <el-form-item label="éå®åå·"> |
| | | <el-input v-model="searchForm.salesContractNo" placeholder="éå®åå·" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-form-item> |
| | | <el-form-item label="å
³èåºåºåå·"> |
| | | <el-input v-model="searchForm.shippingNo" placeholder="å
³èåºåºåå·" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | </el-form> |
| | | </div> |
| | | <div class="table_list"> |
| | | <div class="table_header" style="display:flex;justify-content:space-between;align-items:center;"> |
| | | <div> |
| | | <div class="table_header" style="display: flex;justify-content: flex-end;margin-bottom: 10px;"> |
| | | <el-button type="primary" @click="openForm('add')">æ°å»ºéå®éè´§</el-button> |
| | | </div> |
| | | <div> |
| | | <el-button type="danger" plain @click="handleDelete">å é¤</el-button> |
| | | <el-button @click="columnsDialogVisible = true">åè¡¨åæ®µ</el-button> |
| | | </div> |
| | | </div> |
| | | <PIMTable |
| | | rowKey="id" |
| | | :column="visibleColumns" |
| | | :column="tableColumn" |
| | | :tableData="tableData" |
| | | :page="page" |
| | | :isSelection="true" |
| | | @selection-change="handleSelectionChange" |
| | | :tableLoading="tableLoading" |
| | | @pagination="pagination" |
| | | /> |
| | | > |
| | | <template #status="{ row }"> |
| | | <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag> |
| | | </template> |
| | | </PIMTable> |
| | | </div> |
| | | <form-dia ref="formDia" @close="handleQuery" /> |
| | | |
| | | <el-dialog v-model="columnsDialogVisible" title="èªå®ä¹æ¾ç¤ºå项" width="600px"> |
| | | <div class="columns-tip">注ï¼å表项æ¾ç¤ºä¸å¾å°äº5é¡¹ï¼æå¨å³ä¾§ææå¯è°æ´æ¾ç¤ºé¡ºåº</div> |
| | | <ul class="columns-list"> |
| | | <li v-for="(col, idx) in allColumns" :key="col.prop" |
| | | class="columns-item" |
| | | draggable="true" |
| | | @dragstart="onDragStart(idx)" |
| | | @dragover.prevent |
| | | @drop="onDrop(idx)"> |
| | | <el-checkbox v-model="col.selected">{{ col.label }}</el-checkbox> |
| | | <span class="drag-handle">â¡</span> |
| | | </li> |
| | | </ul> |
| | | <template #footer> |
| | | <el-button @click="resetColumns">æ¢å¤é»è®¤</el-button> |
| | | <el-button type="primary" @click="saveColumns">ä¿å</el-button> |
| | | </template> |
| | | </el-dialog> |
| | | <detail-dia ref="detailDia" /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import { reactive, ref, toRefs, computed, getCurrentInstance, nextTick, onMounted } from "vue"; |
| | | import { ElMessageBox } from "element-plus"; |
| | | import FormDia from "./components/formDia.vue"; |
| | | import DetailDia from "./components/detailDia.vue"; |
| | | import { returnManagementList, returnManagementDel, returnManagementHandle } from "@/api/salesManagement/returnOrder.js"; |
| | | const { proxy } = getCurrentInstance(); |
| | | |
| | | const formDia = ref(); |
| | | const detailDia = ref(); |
| | | const openForm = (type, row) => { |
| | | nextTick(() => formDia.value?.openDialog(type, row)); |
| | | }; |
| | | |
| | | const openDetail = (row) => { |
| | | nextTick(() => detailDia.value?.openDialog(row)); |
| | | }; |
| | | |
| | | const handleRowDelete = (row) => { |
| | |
| | | const { searchForm } = toRefs(data); |
| | | |
| | | const documentStatusOptions = ref([ |
| | | { label: "å¾
å®¡æ ¸", value: 0 }, |
| | | { label: "å®¡æ ¸ä¸", value: 1 }, |
| | | { label: "å·²å®¡æ ¸", value: 2 } |
| | | { label: "å¾
å¤ç", value: 0 }, |
| | | { label: "å·²å¤ç", value: 1 } |
| | | ]); |
| | | |
| | | const defaultColumns = [ |
| | | { label: "éè´§åå·", prop: "returnNo", minWidth: 160 }, |
| | | { label: "åæ®ç¶æ", prop: "status", minWidth: 120, formatData: (v) => ({ "0": "å¾
å®¡æ ¸", "1": "å®¡æ ¸ä¸", "2": "å·²å®¡æ ¸" }[String(v)] ?? v) }, |
| | | { label: "å¶åæ¶é´", prop: "makeTime", minWidth: 170 }, |
| | | { label: "客æ·åç§°", prop: "customerName", minWidth: 220 }, |
| | | { label: "éå®åå·", prop: "salesContractNo", minWidth: 160 }, |
| | | { label: "ä¸å¡å", prop: "salesman", minWidth: 120 }, |
| | | { label: "å
³èåºåºåå·", prop: "shippingNo", minWidth: 170 }, |
| | | { label: "项ç®åç§°", prop: "projectName", minWidth: 180 }, |
| | | { label: "项ç®é¶æ®µ", prop: "projectStage", minWidth: 120 }, |
| | | { label: "å¶å人", prop: "maker", minWidth: 120 }, |
| | | { label: "ç»ç®äºº", prop: "settler", minWidth: 120 }, |
| | | { label: "éè´§åå·", prop: "returnNo", width: 160 }, |
| | | { label: "åæ®ç¶æ", prop: "status", width: 90, dataType: "slot", slot: "status" }, |
| | | { label: "å¶åæ¶é´", prop: "makeTime", width: 170 }, |
| | | { label: "客æ·åç§°", prop: "customerName", width: 220 }, |
| | | { label: "éå®åå·", prop: "salesContractNo", width: 160 }, |
| | | { label: "ä¸å¡å", prop: "salesman", width: 120 }, |
| | | { label: "å
³èåºåºåå·", prop: "shippingNo", width: 170 }, |
| | | { label: "项ç®åç§°", prop: "projectName", width: 180 }, |
| | | { label: "å¶å人", prop: "maker", width: 120 }, |
| | | { |
| | | label: "æä½", |
| | | prop: "operation", |
| | | dataType: "action", |
| | | align: "center", |
| | | fixed: "right", |
| | | width: 160, |
| | | width: 240, |
| | | operation: [ |
| | | { name: "ç¼è¾", disabled: (row) => row.status !== 0, type: "text", clickFun: (row) => openForm("edit", row) }, |
| | | { name: "å¤ç", disabled: (row) => row.status !== 0, type: "text", clickFun: (row) => handleRowHandle(row) }, |
| | | { name: "鿬¾å¤ç", disabled: (row) => row.status !== 0, type: "text", clickFun: (row) => handleRowHandle(row) }, |
| | | { name: "详æ
", type: "text", clickFun: (row) => openDetail(row) }, |
| | | { name: "å é¤", disabled: (row) => row.status !== 0, type: "text", clickFun: (row) => handleRowDelete(row) }, |
| | | ], |
| | | }, |
| | | ]; |
| | | const COLUMNS_KEY = "return_order_columns_v2"; |
| | | const columnsDialogVisible = ref(false); |
| | | const allColumns = ref([]); |
| | | |
| | | const initColumns = () => { |
| | | const saved = localStorage.getItem(COLUMNS_KEY); |
| | | if (saved) { |
| | | try { |
| | | const parsed = JSON.parse(saved); |
| | | // åå¹¶é»è®¤åä¸å·²ä¿åé
ç½®ï¼é¿å
åç»æ°å¢å丢失 |
| | | const map = new Map(parsed.map(c => [c.prop, c])); |
| | | allColumns.value = defaultColumns.map(d => { |
| | | const found = map.get(d.prop); |
| | | return { ...d, selected: found ? !!found.selected : true }; |
| | | }); |
| | | // 以ä¿åç顺åºä¸ºå |
| | | const order = parsed.map(p => p.prop); |
| | | allColumns.value.sort((a, b) => order.indexOf(a.prop) - order.indexOf(b.prop)); |
| | | return; |
| | | } catch {} |
| | | } |
| | | allColumns.value = defaultColumns.map(c => ({ ...c, selected: true })); |
| | | }; |
| | | initColumns(); |
| | | |
| | | const visibleColumns = computed(() => allColumns.value.filter(c => c.selected)); |
| | | |
| | | let dragFrom = -1; |
| | | const onDragStart = (idx) => { |
| | | dragFrom = idx; |
| | | }; |
| | | const onDrop = (to) => { |
| | | if (dragFrom < 0 || dragFrom === to) return; |
| | | const arr = [...allColumns.value]; |
| | | const [moved] = arr.splice(dragFrom, 1); |
| | | arr.splice(to, 0, moved); |
| | | allColumns.value = arr; |
| | | dragFrom = -1; |
| | | }; |
| | | |
| | | const resetColumns = () => { |
| | | allColumns.value = defaultColumns.map(c => ({ ...c, selected: true })); |
| | | localStorage.removeItem(COLUMNS_KEY); |
| | | }; |
| | | const saveColumns = () => { |
| | | const toSave = allColumns.value.map(({ label, prop, width, selected }) => ({ label, prop, width, selected })); |
| | | localStorage.setItem(COLUMNS_KEY, JSON.stringify(toSave)); |
| | | columnsDialogVisible.value = false; |
| | | }; |
| | | const tableColumn = defaultColumns; |
| | | |
| | | const tableData = ref([]); |
| | | const tableLoading = ref(false); |
| | |
| | | |
| | | const handleReset = () => { |
| | | Object.keys(searchForm.value).forEach(k => searchForm.value[k] = ""); |
| | | handleQuery(); |
| | | }; |
| | | const handleSelectionChange = (selection) => { |
| | | selectedRows.value = selection; |
| | |
| | | }); |
| | | }; |
| | | |
| | | const getStatusType = (status) => { |
| | | const statusMap = { |
| | | 0: "warning", |
| | | 1: "success" |
| | | }; |
| | | return statusMap[status] || "info"; |
| | | }; |
| | | |
| | | const getStatusText = (status) => { |
| | | const statusMap = { |
| | | 0: "å¾
å¤ç", |
| | | 1: "å·²å¤ç" |
| | | }; |
| | | return statusMap[status] || "æªç¥"; |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | getList(); |
| | | }); |
| | |
| | | padding: 1rem 1rem 0 1rem; |
| | | border: 8px; |
| | | border-radius: 16px; |
| | | } |
| | | .table_list { |
| | | height: calc(100vh - 230px); |
| | | min-height: 360px; |
| | | background: #fff; |
| | | margin-top: 20px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | .columns-tip{color:#909399;margin-bottom:10px;font-size:12px;} |
| | | .columns-list{list-style:none;padding:0;margin:0;max-height:360px;overflow:auto;} |
| | | .columns-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid #f0f0f0;border-radius:6px;margin-bottom:8px;cursor:move;background:#fff;} |
| | | .columns-item .drag-handle{color:#909399;padding-left:12px;user-select:none;} |
| | | .table_header { |
| | | margin-bottom: 15px; |
| | | } |
| | | </style> |