<template>
|
<div class="app-container">
|
<el-form :inline="true" :model="queryParams" class="search-form">
|
<el-form-item v-if="shouldShowSearch" label="搜索">
|
<el-input
|
v-model="queryParams.searchAll"
|
:placeholder="searchPlaceholder"
|
clearable
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleQuery">查询</el-button>
|
<!-- <el-button @click="resetQuery">重置</el-button>-->
|
</el-form-item>
|
</el-form>
|
<el-card>
|
|
|
<!-- 操作按钮区 -->
|
<!-- <el-row :gutter="24" class="table-toolbar">-->
|
<!-- <el-button-->
|
<!-- :icon="Plus"-->
|
<!-- type="primary"-->
|
<!-- v-show="activeTab === 'payable'"-->
|
<!-- @click="handleAdd"-->
|
<!-- >新增应付款项</el-button>-->
|
|
<!-- </el-row>-->
|
<!-- 表格组件 -->
|
<div class="table-container">
|
<!-- 加载状态 -->
|
<el-skeleton v-if="loading" animated>
|
<template #template>
|
<el-skeleton-item variant="h1" style="width: 40%"/>
|
<div style="padding: 14px;">
|
<el-skeleton-item variant="text"/>
|
<el-skeleton-item variant="text"/>
|
<el-skeleton-item variant="text"/>
|
</div>
|
</template>
|
</el-skeleton>
|
|
<!-- 数据表格 -->
|
<data-table
|
v-else
|
:showOverflowTooltip="false"
|
:border="true"
|
@edit="handleEdit"
|
:columns="columns"
|
:loading="loading"
|
style="width: 100%; height: calc(100vh - 29em)"
|
:show-selection="activeTab === 'payable'"
|
:table-data="tableData"
|
>
|
<!-- 空状态插槽 -->
|
<template #empty>
|
<el-empty
|
:description="`暂无${currentTabConfig?.label || ''}数据`"
|
:image-size="120"
|
>
|
<template #description>
|
<p>暂无{{ currentTabConfig?.label || '' }}数据</p>
|
</template>
|
</el-empty>
|
</template>
|
</data-table>
|
</div>
|
|
|
<pagination
|
v-if="total > 0"
|
:layout="'total, prev, pager, next, jumper'"
|
:limit="state.pageSize"
|
:current-page="state.current"
|
:total="total"
|
@pagination="handlePageChange"
|
/>
|
|
<!-- 查看详情弹窗 -->
|
<DilogTable
|
v-model="dialogTableVisible"
|
:title="dialogTableTitle"
|
:table-data="dialogTableData"
|
:columns="dialogTableColumns"
|
@submit="handleSubmit"
|
@success="payableHandleSuccess"
|
width="70%"
|
height="500px"
|
/>
|
</el-card>
|
<PayableDialog
|
v-model:dialogPayableFormVisible="dialogPayableFormVisible"
|
v-model:form="copyForm"
|
:title="title"
|
@submit="handleSubmit"
|
@success="payableHandleSuccess"
|
ref="productionDialogs">
|
</PayableDialog>>
|
</div>
|
</template>
|
|
<script setup>
|
import {computed, onMounted, reactive, ref, nextTick, toRefs} from "vue";
|
import {ElMessage} from "element-plus";
|
import {Delete, Plus} from "@element-plus/icons-vue";
|
|
// 组件导入
|
import DataTable from "@/components/Table/ETable.vue";
|
import Pagination from "@/components/PIMTable/Pagination.vue";
|
import DilogTable from "@/components/dialog/DilogTable.vue";
|
|
// API 服务导入
|
import {findPayablePage} from "@/api/payable/index"
|
|
const userStore = useUserStore();
|
const dictStore = useDictStore()
|
import useUserStore from "@/store/modules/user";
|
import useDictStore from "@/store/modules/dict"
|
import PayableDialog from "@/views/payable/components/PayableDialog.vue";
|
|
let userList = ref([]);
|
userStore.getUserList().then((res) => {
|
userList.value = res;
|
});
|
|
|
// 响应式状态管理 - 使用解构和默认值
|
const productionDialogs = ref(null); // 添加ref声明
|
const initFormState = () => ({consumables: false});
|
const dialogPayableFormVisible = ref(false);
|
const addOrEdit = ref("edit");
|
const state = reactive({
|
form: initFormState(),
|
title: "",
|
copyForm: {},
|
loading: false,
|
activeTab: "payable",
|
selectedRows: [],
|
tableData: [],
|
// 分页状态
|
pageNum: 1,
|
pageSize: 10,
|
current: 1,
|
total: 0,
|
// 查询参数
|
queryParams: {
|
searchAll: "",
|
},
|
});
|
const userInfo = ref({});
|
|
onMounted(() => {
|
let res = userStore.getInfo();
|
userInfo.value = res.user;
|
getList()
|
})
|
const handleEdit = (row) => {
|
form.value = JSON.parse(JSON.stringify(row));
|
addOrEdit.value = "edit";
|
handleAddEdit()
|
}
|
const handleAddEdit = () => {
|
addOrEdit.value == "add" ? (title.value = "新增") : addOrEdit.value == "viewRow" ? (title.value = "查看") : (title.value = "编辑");
|
title.value = title.value + "应付管理";
|
openDialog();
|
};
|
|
const openDialog = () => {
|
if (addOrEdit.value === "edit" || addOrEdit.value === "viewRow") {
|
// 确保复制一份数据，避免直接引用
|
copyForm.value = JSON.parse(JSON.stringify(form.value));
|
// console.log(copyForm.value)
|
copyForm.value.fileList = copyForm.value.attachFileList.map((item) => {
|
return {
|
id: item.id,
|
url: item.downloadUrl,
|
uid: item.id,
|
status: "success",
|
name: item.originalFilename
|
}
|
})
|
dialogPayableFormVisible.value = true;
|
// 触发ref里面的方法
|
return;
|
}
|
};
|
|
|
const handleQuery = () => {
|
state.loading = true;
|
state.current = 1;
|
getList()
|
}
|
|
const handlePageChange = (it) => {
|
state.current = it.page
|
getList();
|
}
|
|
|
|
|
const getList = async () => {
|
loading.value = true;
|
try {
|
let resp = await findPayablePage(
|
{
|
current: state.current,
|
pageSize: state.current
|
, ...state.queryParams
|
})
|
tableData.value = resp.data.records
|
total.value = resp.data.total || 0;
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
// 使用解构简化访问
|
const {
|
form,
|
title,
|
copyForm,
|
loading,
|
activeTab,
|
selectedRows,
|
current,
|
tableData,
|
pageNum,
|
pageSize,
|
total,
|
queryParams,
|
} = toRefs(state);
|
|
// 添加缺失的响应式变量
|
const dialogTableVisible = ref(false);
|
const dialogTableTitle = ref('');
|
const dialogTableData = ref([]);
|
const dialogTableColumns = ref([]);
|
|
|
const payableHandleSuccess = (val) => {
|
ElMessage.success("操作成功");
|
dialogPayableFormVisible.value = false;
|
getList()
|
}
|
const handleSubmit = (val) => {
|
if (val.result.code !== 200) {
|
ElMessage.error("操作失败：" + val.result.msg);
|
return;
|
}
|
ElMessage.success(val.title + val.result.msg);
|
dialogPayableFormVisible.value = false;
|
getList();
|
};
|
|
// 标签页配置 - 便于后续扩展
|
const tabsConfig = {
|
payable: {
|
searchPlaceholder: "",
|
showSearch: true,
|
// deleteApi: ,
|
columns: [
|
/* 暂时不知道是否需要 {prop: "equipmentNo", label: "供应商名称", minWidth: 100},*/
|
{prop: "ticketNo", label: "发票号", minWidth: 100},
|
{prop: "paymentAmount", label: "付款金额(元)", minWidth: 100},
|
// {prop: "specification", label: "附件", minWidth: 100},
|
{
|
prop: "payableType", label: "付款类型", minWidth: 100,
|
formatter: (row) => {
|
if (row.payableType == null) {
|
return ""
|
}
|
const dictItem = dictStore.getDictDataByTypeAndValue("payable_type", row.payableType);
|
return dictItem ? dictItem.label : "";
|
}
|
},
|
{
|
prop: "registrantId", label: "录入人", minWidth: 100,
|
formatter: (row) => {
|
// 匹配用户信息
|
const user = userList.value.find((user) => user.userId === row.registrantId);
|
return user ? user.nickName : "未知用户";
|
},
|
},
|
{prop: "registrationDate", label: "录入日期", minWidth: 100},
|
],
|
}
|
};
|
|
|
// 当前标签页配置
|
const currentTabConfig = computed(() => tabsConfig[activeTab.value]);
|
|
// 计算属性
|
const searchPlaceholder = computed(
|
() => currentTabConfig.value?.searchPlaceholder || "请输入搜索信息"
|
);
|
const shouldShowSearch = computed(
|
() => currentTabConfig.value?.showSearch || false
|
);
|
const columns = computed(() => currentTabConfig.value?.columns || []);
|
const selectedCount = computed(() => selectedRows.value.length);
|
|
|
// 动态获取操作列宽度
|
const getOperationsWidth = () => {
|
if (activeTab.value === 'equipmentRequisition') {
|
return 250; // 为归还按钮预留更多空间
|
}
|
return 200; // 默认宽度
|
};
|
|
|
</script>
|
|
<style scoped>
|
/* 响应式布局 */
|
@media screen and (min-width: 768px) {
|
.search-form :deep(.el-form-item) {
|
width: 50%;
|
}
|
}
|
|
@media screen and (min-width: 1200px) {
|
.search-form :deep(.el-form-item) {
|
width: 16%;
|
}
|
}
|
|
.table-toolbar {
|
margin-bottom: 20px;
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
}
|
|
.app-container {
|
padding: 18px !important;
|
}
|
|
/* 响应式表格 */
|
@media screen and (max-width: 768px) {
|
.table-toolbar {
|
flex-direction: column;
|
}
|
|
.table-toolbar .el-button {
|
width: 100%;
|
}
|
}
|
|
/* 表格工具栏 */
|
.table-toolbar,
|
.table-toolbar > * {
|
margin: 0 0 0 0 !important;
|
}
|
|
.table-toolbar {
|
margin-bottom: 20px !important;
|
}
|
|
.el-form--inline .el-form-item {
|
margin-right: 25px;
|
}
|
|
.main-container {
|
background: red !important;
|
}
|
|
/* 设备状态样式 */
|
.status-using {
|
color: #409eff;
|
font-weight: 500;
|
}
|
|
.status-partial-return {
|
color: #e6a23c;
|
font-weight: 500;
|
}
|
|
.status-returned {
|
color: #67c23a;
|
font-weight: 500;
|
}
|
|
.status-unknown {
|
color: #909399;
|
font-weight: 500;
|
}
|
|
/* 状态标签样式 */
|
:deep(.el-table .cell .status-tag) {
|
font-size: 12px;
|
padding: 2px 6px;
|
border-radius: 4px;
|
white-space: nowrap;
|
}
|
</style>
|
