Files
workspace/code/新建文件夹/cw/assistance/daily-expenses/list.vue
T
2026-08-03 17:33:57 +08:00

491 lines
13 KiB
Vue

<script setup>
import g3filter from "@/components/query-conditions/g3filter.vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { computed, onMounted, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/store/user";
import axios from "@/utils/axios";
import { getAlignByFormat, updateTableFooterData } from "@/utils/column";
import { getTablePage, getTableColumns, handleSaveColumn } from "@/utils/dodata";
import { confirmDelete, delBefore } from "@/utils/doDel";
import { morePermission, getQxSql } from "@/utils/auth";
import { ExportVxeTableExcel } from "@/utils/excel";
import { handleSs, handleSh, handleBh, handleShowshdetail } from "@/views/shcenter";
import { setColumnListConfig } from "@/utils/dodata";
defineOptions({
name: "Daily",
});
const tableRef = ref(null);
const userStore = useUserStore();
const route = useRoute();
const moduleid = ref(route.meta.moduleid);
const router = useRouter();
const columns = ref([]);
const tableData = ref([]);
const tableFooterData = computed(() => {
return updateTableFooterData(columns.value, tableData.value);
});
const saving = ref(false);
const loading = ref(false);
const error = ref(null);
const searchCondition = ref("");
// 分页参数
const pagination = reactive({
currentPage: 1,
pageSize: 20,
total: 0,
});
// 列配置
async function addColumn() {
const result = await getTableColumns("v_cw_daily");
if (result.success) {
columns.value = result.data;
} else {
ElMessage.error(`加载失败: ${result.error}`);
}
}
async function loadTableData(whereClause = "") {
loading.value = true;
try {
// searchCondition.value = whereClause;
await getTablePage({
tableName: "v_cw_daily",
whereClause,
page: pagination.currentPage,
size: pagination.pageSize,
pkColumn: "b_id desc",
moduleId: moduleid.value,
targetRef: tableData,
paginationTarget: pagination,
errorRef: error,
});
} finally {
loading.value = false;
}
}
function handleRowDblClick({ row }) {
handleEditClick(row);
}
function handleEditId(row) {
handleEditClick(row);
}
// 点击行显示详情
function handleEditClick(row) {
router.push({
name: "dailyexpensesdetail",
query: { id: row.b_id, op: "mod" },
});
}
const query_visible = ref(true);
function handleSearchVisible() {
query_visible.value = !query_visible.value;
}
function handleAdd() {
router.push({
name: "dailyexpensesdetail",
query: { op: "new" },
});
}
async function deleteRows(rows) {
if (!rows || !rows.length) {
ElMessage.warning("请选择要删除的数据");
return;
}
// 逐条校验
for (const row of rows) {
const res = await delBefore(moduleid.value, row.b_id);
if (!res?.success) {
ElMessage.error(res?.message || "删除校验执行失败");
return;
}
}
if (!(await confirmDelete(rows))) return;
// 执行删除请求
const ids = rows.map((row) => row.b_id);
const params = {
moduleid: moduleid.value,
ID: ids.join(","), // 支持批量删除
};
const response = await axios.get("/deleteobject", { params });
ElMessage.success(response.data.message);
if (response.data.message == "批量操作成功") {
pagination.currentPage = 1;
await loadTableData(await buildSqlWhere());
}
}
function handleDelClick(row) {
deleteRows([row]);
}
async function buildSqlWhere() {
let sql = searchCondition.value;
const qxsql = await getQxSql(moduleid.value, userStore.getUserId());
if (qxsql) {
sql += qxsql;
}
return sql;
}
async function handlefilter(filtersql) {
pagination.currentPage = 1;
searchCondition.value = filtersql;
await loadTableData(await buildSqlWhere());
}
// 每页条数变化
async function handleSizeChange(val) {
pagination.pageSize = val;
await loadTableData(await buildSqlWhere());
}
// 当前页变化
async function handleCurrentChange(val) {
pagination.currentPage = val;
await loadTableData(await buildSqlWhere());
}
onMounted(async () => {
await addColumn();
});
</script>
<template>
<div class="g3pagecontainer">
<div class="g3container">
<div v-show="query_visible" class="g3query">
<g3filter :module-id="moduleid" @update:search="handlefilter" />
</div>
<div class="g3main">
<div class="g3containerheader">
<div class="g3flex">
<el-button :disabled="morePermission(1)" type="primary" @click="handleAdd">
新建
</el-button>
</div>
<div class="g3flex">
<div class="g3-svg-query g3mright10" @click="handleSearchVisible">
<SvgIcon name="search" />
</div>
<el-dropdown>
<div class="g3-svg-query">
<SvgIcon name="more" />
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
:disabled="morePermission(7)"
@click="handleSs(tableRef.getCheckboxRecords())"
>
送审
</el-dropdown-item>
<el-dropdown-item
:disabled="morePermission(7)"
@click="handleSh(tableRef.getCheckboxRecords())"
>
审核
</el-dropdown-item>
<el-dropdown-item
:disabled="morePermission(7)"
@click="handleBh(tableRef.getCheckboxRecords())"
>
驳回
</el-dropdown-item>
<el-dropdown-item
divided
:disabled="morePermission(9)"
@click="() => setColumnListConfig(tableRef, 'v_bc_khht')"
>
栏位设定
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<div class="g3grid">
<vxe-table
ref="tableRef"
border
stripe
header-align="center"
:data="tableData"
:show-footer="true"
:footer-data="tableFooterData"
:loading="loading"
:sort-config="{
// showIcon: false,
trigger: 'cell',
}"
:filter-config="{
showIcon: false,
}"
:column-drag-config="{
showIcon: false,
trigger: 'cell',
}"
:row-config="{
useKey: true,
isCurrent: true,
isHover: true,
}"
size="small"
:cell-config="{
height: 26,
}"
:column-config="{
resizable: true,
drag: true,
}"
show-overflow
show-header-overflow
show-footer-overflow
height="100%"
@cell-dblclick="handleRowDblClick"
>
<vxe-column type="checkbox" width="50" align="center" />
<vxe-column
v-for="column in columns"
:key="column.prop"
:field="column.prop"
:title="column.label"
:width="column.width"
:align="getAlignByFormat(column.displayFormat)"
:params="column"
sortable
>
<template #default="{ row }">
<template v-if="column.edit_type == 'checkbox'">
<el-checkbox v-model="row[column.prop]" disabled true-value="1" false-value="0" />
</template>
<template v-else-if="['b_id'].includes(column.prop)">
<span class="g3-color" @click="handleEditId(row)">
{{ row[column.prop] }}
</span>
</template>
<template v-else>
{{ row[column.prop] }}
</template>
</template>
</vxe-column>
<vxe-column width="180" align="center" fixed="right" title="操作">
<template #default="{ row }">
<div class="tableactions">
<el-button
:disabled="morePermission(3)"
link
type="primary"
size="small"
style="font-size: 14px"
@click="handleEditClick(row)"
>
编辑
</el-button>
<el-button
:disabled="morePermission(4)"
link
type="danger"
size="small"
style="font-size: 14px"
@click="handleDelClick(row)"
>
删除
</el-button>
<el-dropdown>
<span class="el-dropdown-link">
更多
<el-icon class="el-icon--right">
<ArrowDown />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :disabled="morePermission(7)" @click="handleSs([row])">
送审
</el-dropdown-item>
<el-dropdown-item :disabled="morePermission(7)" @click="handleSh([row])">
审核
</el-dropdown-item>
<el-dropdown-item :disabled="morePermission(7)" @click="handleBh([row])">
驳回
</el-dropdown-item>
<el-dropdown-item
:disabled="morePermission(7)"
@click="handleShowshdetail(row)"
>
审核进度
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</vxe-column>
</vxe-table>
</div>
<div class="g3pagination">
<el-pagination
:current-page="pagination.currentPage"
:page-sizes="[20, 50, 100]"
:page-size="pagination.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total"
size="small"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
<el-alert v-if="error" :title="error" type="error" show-icon closable @close="error = ''" />
</div>
</div>
</template>
<style lang="scss" scoped>
.g3pagecontainer {
box-sizing: border-box;
display: flex;
background-color: #f2f3f5;
width: 100%;
height: 100%;
}
.g3container {
display: flex;
flex-direction: column;
min-width: 0;
height: 100%;
width: 100%;
}
.g3query {
padding: 10px 10px 8px 10px;
margin-bottom: 6px;
background-color: #ffffff;
border: 1px solid #e4e7ed;
border-radius: 6px;
box-shadow: 0 0 12px #0000000d;
}
.g3main {
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
padding: 10px;
background-color: #ffffff;
border: 1px solid #e4e7ed;
border-radius: 6px;
box-shadow: 0 0 12px #0000000d;
box-sizing: border-box;
min-height: 0;
}
.g3containerheader {
display: flex;
justify-content: space-between;
height: 32px;
margin-bottom: 8px;
width: 100%;
}
.g3flex {
display: flex;
}
.g3mright10 {
margin-right: 10px;
}
.g3grid {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
width: 100%;
}
.g3pagination {
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 10px;
}
.g3-svg-query {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
padding: 8px;
white-space: nowrap;
cursor: pointer;
border: 1px solid #dcdfe6;
}
.g3-svg-query:hover {
border-color: #badeff;
background-color: #e8f4ff;
}
.tableactions {
display: flex;
align-items: center;
justify-content: center;
}
/**下拉 */
.el-dropdown-link {
cursor: pointer;
display: flex;
color: #409eff;
align-items: center;
margin-left: 14px;
}
/* 查询日期图标 */
:deep(.g3-prefix .el-input__prefix) {
display: none !important;
}
.el-dropdown .g3-svg-query:focus,
.el-dropdown-link:focus {
outline: none !important;
}
.g3-color {
color: #409eff;
cursor: pointer;
}
/* ---------------添加disabled 修改效果 */
:deep(.el-input.is-disabled .el-input__inner) {
cursor: default;
}
:deep(.el-button.is-disabled) {
cursor: default;
}
/* ------------------ */
/* -------------------- */
:deep(.vxe-cell--wrapper) {
overflow: hidden;
/* 隐藏溢出 */
text-overflow: ellipsis;
/* 文本溢出显示省略号 */
white-space: nowrap;
/* 不换行 */
}
/* -------------------- */
</style>