From 60b5992752011494493d776b2fe6f2006e02a49d Mon Sep 17 00:00:00 2001
From: buhuazhen <hua100783@gmail.com>
Date: 星期三, 27 八月 2025 14:24:11 +0800
Subject: [PATCH] Merge branch 'feature/0826' into dev_JLMY
---
src/views/payable/index.vue | 399 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 399 insertions(+), 0 deletions(-)
diff --git a/src/views/payable/index.vue b/src/views/payable/index.vue
new file mode 100644
index 0000000..4bd682c
--- /dev/null
+++ b/src/views/payable/index.vue
@@ -0,0 +1,399 @@
+<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>
--
Gitblit v1.9.3