| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="search_form"> |
| | | <el-form :model="searchForm" class="demo-form-inline" :inline="true"> |
| | | <el-form-item label="éè´§åå·"> |
| | | <el-input v-model="searchForm.returnNo" placeholder="请è¾å
¥éè´§åå·" clearable /> |
| | | </el-form-item> |
| | | <el-form-item label="客æ·åç§°"> |
| | | <el-input v-model="searchForm.customerName" placeholder="客æ·åç§°" clearable /> |
| | | </el-form-item> |
| | | <el-form-item label="éå®åå·"> |
| | | <el-input v-model="searchForm.salesContractNo" placeholder="éå®åå·" clearable /> |
| | | </el-form-item> |
| | | <el-form-item label="å
³èæ¹å·"> |
| | | <el-input v-model="searchForm.shippingNo" placeholder="å
³èæ¹å·" clearable /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="handleQuery">æç´¢</el-button> |
| | | <el-button @click="handleReset">éç½®</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <div class="table_list"> |
| | | <div class="table_header" style="display: flex;justify-content: flex-end;margin-bottom: 10px;"> |
| | | <el-button type="primary" @click="openForm('add')">æ°å»ºéå®éè´§</el-button> |
| | | <el-button type="danger" :disabled="selectedRows.length === 0 || selectedRows.some(row => row.status !== 0)" @click="handleDelete">å é¤</el-button> |
| | | </div> |
| | | <PIMTable |
| | | rowKey="id" |
| | | :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" /> |
| | | <detail-dia ref="detailDia" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | 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) => { |
| | | if (!row?.id) return; |
| | | ElMessageBox.confirm("该éè´§åå°è¢«å é¤ï¼æ¯å¦ç¡®è®¤å é¤ï¼", "å é¤æç¤º", { |
| | | confirmButtonText: "确认", |
| | | cancelButtonText: "åæ¶", |
| | | type: "warning", |
| | | }).then(() => { |
| | | returnManagementDel([row.id]).then(() => { |
| | | proxy.$modal.msgSuccess("å 餿å"); |
| | | getList(); |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | const handleRowHandle = (row) => { |
| | | if (!row?.id) return; |
| | | ElMessageBox.confirm("æ¯å¦å¤ç该éè´§åï¼å¤çåå°æ æ³ä¿®æ¹", "å¤çæç¤º", { |
| | | confirmButtonText: "确认", |
| | | cancelButtonText: "åæ¶", |
| | | type: "warning", |
| | | }).then(() => { |
| | | returnManagementHandle({ returnManagementId: String(row.id) }).then(() => { |
| | | proxy.$modal.msgSuccess("å¤çæå"); |
| | | getList(); |
| | | }); |
| | | }); |
| | | } |
| | | |
| | | const data = reactive({ |
| | | searchForm: { |
| | | returnNo: "", |
| | | status: "", |
| | | customerName: "", |
| | | salesContractNo: "", |
| | | salesman: "", |
| | | shippingNo: "", |
| | | projectName: "", |
| | | salesLedgerId: "", |
| | | makeTime: "" |
| | | } |
| | | }); |
| | | const { searchForm } = toRefs(data); |
| | | |
| | | const documentStatusOptions = ref([ |
| | | { label: "å¾
å¤ç", value: 0 }, |
| | | { label: "å·²å¤ç", value: 1 } |
| | | ]); |
| | | |
| | | const defaultColumns = [ |
| | | { label: "éè´§åå·", prop: "returnNo", minWidth: 160 }, |
| | | { label: "åæ®ç¶æ", prop: "status", minWidth: 90, dataType: "slot", slot: "status" }, |
| | | { 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: "maker", minWidth: 120 }, |
| | | { |
| | | label: "æä½", |
| | | prop: "operation", |
| | | dataType: "action", |
| | | align: "center", |
| | | fixed: "right", |
| | | minWidth: 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: "详æ
", type: "text", clickFun: (row) => openDetail(row) }, |
| | | { name: "å é¤", disabled: (row) => row.status !== 0, type: "text", clickFun: (row) => handleRowDelete(row) }, |
| | | ], |
| | | }, |
| | | ]; |
| | | const tableColumn = defaultColumns; |
| | | |
| | | const tableData = ref([]); |
| | | const tableLoading = ref(false); |
| | | const page = reactive({ current: 1, size: 10, total: 0 }); |
| | | const selectedRows = ref([]); |
| | | const tableHeight = computed(() => "calc(100% - 80px)"); |
| | | |
| | | const handleReset = () => { |
| | | Object.keys(searchForm.value).forEach(k => searchForm.value[k] = ""); |
| | | handleQuery(); |
| | | }; |
| | | const handleSelectionChange = (selection) => { |
| | | selectedRows.value = selection; |
| | | }; |
| | | const handleQuery = () => { |
| | | page.current = 1; |
| | | getList(); |
| | | }; |
| | | const pagination = (obj) => { |
| | | page.current = obj.page; |
| | | page.size = obj.limit; |
| | | getList(); |
| | | }; |
| | | const getList = () => { |
| | | tableLoading.value = true; |
| | | returnManagementList({ ...searchForm.value, ...page }).then(res => { |
| | | tableLoading.value = false; |
| | | tableData.value = res?.data?.records || []; |
| | | page.total = res?.data?.total || 0; |
| | | }).finally(() => tableLoading.value = false); |
| | | }; |
| | | const handleOut = () => { |
| | | ElMessageBox.alert("导åºåè½å¾
æ¥å
¥æ¥å£", "æç¤º"); |
| | | }; |
| | | const handleDelete = () => { |
| | | let ids = []; |
| | | if (selectedRows.value.length === 0) { |
| | | proxy.$modal.msgWarning("è¯·éæ©æ°æ®"); |
| | | return; |
| | | } |
| | | ids = selectedRows.value.map(i => i.id); |
| | | console.log(ids); |
| | | ElMessageBox.confirm("éä¸çå
容å°è¢«å é¤ï¼æ¯å¦ç¡®è®¤å é¤ï¼", "å é¤æç¤º", { |
| | | confirmButtonText: "确认", |
| | | cancelButtonText: "åæ¶", |
| | | type: "warning", |
| | | }).then(() => { |
| | | returnManagementDel( ids ).then(() => { |
| | | proxy.$modal.msgSuccess("å 餿å"); |
| | | getList(); |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | 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(); |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .table_list { |
| | | margin-top: unset; |
| | | } |
| | | </style> |