<template>
|
<div class="app-container">
|
<div class="search-wrapper">
|
<el-form :model="searchForm" class="demo-form-inline">
|
<el-row :gutter="20">
|
<el-col :span="4">
|
<el-form-item>
|
<el-input v-model="searchForm.returnNo" placeholder="请输入退货单号" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item>
|
<el-input v-model="searchForm.customerName" placeholder="客户名称" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item>
|
<el-input v-model="searchForm.salesContractNo" placeholder="销售单号" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item>
|
<el-input v-model="searchForm.shippingNo" placeholder="关联出库单号" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item>
|
<el-button type="primary" @click="handleQuery">搜索</el-button>
|
<el-button @click="handleReset">重置</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<div class="table_list">
|
<div class="table_header" style="display:flex;justify-content:space-between;align-items:center;">
|
<div>
|
<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"
|
:tableData="tableData"
|
:page="page"
|
:isSelection="true"
|
@selection-change="handleSelectionChange"
|
:tableLoading="tableLoading"
|
@pagination="pagination"
|
/>
|
</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>
|
</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 { returnManagementList, returnManagementDel } from "@/api/salesManagement/returnOrder.js";
|
const { proxy } = getCurrentInstance();
|
|
const formDia = ref();
|
const openForm = (type, row) => {
|
nextTick(() => formDia.value?.openDialog(type, row));
|
};
|
|
const handleRowDelete = (row) => {
|
if (!row?.id) return;
|
ElMessageBox.confirm("该退货单将被删除，是否确认删除？", "删除提示", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
returnManagementDel({ ids: 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 },
|
{ label: "已审核", value: 2 }
|
]);
|
|
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: "operation",
|
dataType: "action",
|
align: "center",
|
fixed: "right",
|
width: 140,
|
operation: [
|
{ name: "编辑", type: "text", clickFun: (row) => openForm("edit", row) },
|
{ name: "删除", 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 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] = "");
|
};
|
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);
|
ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
returnManagementDel({ ids: ids.join(",") }).then(() => {
|
proxy.$modal.msgSuccess("删除成功");
|
getList();
|
});
|
});
|
};
|
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.search-wrapper {
|
background: white;
|
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>
|
