316 lines
9.3 KiB
Vue
316 lines
9.3 KiB
Vue
<template>
|
|
<basic-container class="settlement-import-page">
|
|
<avue-crud
|
|
ref="crud"
|
|
:option="option"
|
|
:table-loading="loading"
|
|
:data="rows"
|
|
v-model:page="page"
|
|
@search-change="searchChange"
|
|
@search-reset="searchReset"
|
|
@current-change="currentChange"
|
|
@size-change="sizeChange"
|
|
@refresh-change="refreshChange"
|
|
@on-load="onLoad"
|
|
>
|
|
<template #menu-left>
|
|
<el-button
|
|
v-if="hasPermission('settlement_import_add')"
|
|
type="primary"
|
|
@click="openCreate"
|
|
>新增</el-button
|
|
>
|
|
</template>
|
|
|
|
<template #batchNo="{ row }">
|
|
<el-link type="primary" @click="openDetail(row)">{{ row.batchNo || '-' }}</el-link>
|
|
</template>
|
|
|
|
<template #importStatusName="{ row }">
|
|
<el-tag :type="statusTagType(row.importStatus)" effect="plain">{{
|
|
row.importStatusName || importStatusLabel(row.importStatus)
|
|
}}</el-tag>
|
|
</template>
|
|
|
|
<template #menu="{ row }">
|
|
<el-link type="primary" @click="openDetail(row)">查看</el-link>
|
|
<el-link v-if="row.importStatus === 'draft'" type="primary" @click="editDraft(row)"
|
|
>编辑</el-link
|
|
>
|
|
<el-link
|
|
v-if="row.importStatus === 'draft' && hasPermission('settlement_import_delete')"
|
|
type="danger"
|
|
@click="handleDelete(row)"
|
|
>删除</el-link
|
|
>
|
|
<el-link
|
|
v-if="row.importStatus === 'completed' && hasPermission('settlement_import_void')"
|
|
type="danger"
|
|
@click="openVoid(row)"
|
|
>作废</el-link
|
|
>
|
|
</template>
|
|
</avue-crud>
|
|
|
|
<el-dialog v-model="voidVisible" title="作废导入结算单" width="480px" append-to-body>
|
|
<el-form
|
|
ref="voidFormRef"
|
|
:model="voidForm"
|
|
:rules="voidRules"
|
|
label-position="right"
|
|
label-width="auto"
|
|
>
|
|
<el-form-item label="作废原因" prop="reason">
|
|
<el-input
|
|
v-model="voidForm.reason"
|
|
type="textarea"
|
|
:rows="4"
|
|
maxlength="200"
|
|
show-word-limit
|
|
placeholder="请输入作废原因"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="voidVisible = false">取消</el-button>
|
|
<el-button type="danger" :loading="voidLoading" @click="submitVoid">确认作废</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</basic-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { h } from 'vue';
|
|
import { ElOption, ElSelect } from 'element-plus';
|
|
import { mapGetters } from 'vuex';
|
|
import * as api from '@/api/settlement/settlementImport';
|
|
import { settlementImportOption, importStatusLabel } from '@/option/settlement/settlementImport';
|
|
|
|
const SETTLEMENT_IMPORT_LIST_REFRESH_KEY = 'settlement-import-list-refresh';
|
|
|
|
export default {
|
|
name: 'SettlementImport',
|
|
data() {
|
|
return {
|
|
rows: [],
|
|
loading: false,
|
|
query: {},
|
|
option: settlementImportOption(),
|
|
page: {
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
pageSizes: [10, 20, 50, 100],
|
|
total: 0,
|
|
},
|
|
batchNoOptions: [],
|
|
voidVisible: false,
|
|
voidLoading: false,
|
|
voidForm: { id: null, reason: '' },
|
|
voidRules: {
|
|
reason: [
|
|
{ required: true, message: '请输入作废原因', trigger: 'blur' },
|
|
{ max: 200, message: '作废原因不能超过200个字', trigger: 'blur' },
|
|
],
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(['permission', 'userInfo']),
|
|
isAdmin() {
|
|
const authority = this.userInfo?.authority || '';
|
|
return String(authority).includes('admin');
|
|
},
|
|
},
|
|
created() {
|
|
this.setBatchNoSearchRender();
|
|
this.loadOptions();
|
|
},
|
|
activated() {
|
|
this.consumeListRefresh();
|
|
},
|
|
watch: {
|
|
$route(to, from) {
|
|
if (
|
|
to.path === '/settlement/settlement-import' &&
|
|
from?.path === '/settlement/settlement-import/form'
|
|
) {
|
|
this.consumeListRefresh();
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
consumeListRefresh() {
|
|
if (sessionStorage.getItem(SETTLEMENT_IMPORT_LIST_REFRESH_KEY) !== '1') {
|
|
return;
|
|
}
|
|
sessionStorage.removeItem(SETTLEMENT_IMPORT_LIST_REFRESH_KEY);
|
|
this.page.currentPage = 1;
|
|
this.loadOptions();
|
|
this.onLoad(this.page);
|
|
},
|
|
hasPermission(code) {
|
|
return this.isAdmin || this.validData(this.permission?.[code], false);
|
|
},
|
|
importStatusLabel,
|
|
statusTagType(status) {
|
|
if (status === 'draft') return 'info';
|
|
if (status === 'completed') return 'success';
|
|
if (status === 'voided') return 'danger';
|
|
return '';
|
|
},
|
|
unwrapData(response) {
|
|
const body = response?.data || response || {};
|
|
return body?.data !== undefined ? body.data : body;
|
|
},
|
|
/** 批次号搜索控件：可搜索 + 可手输，选项来自已导入批次 */
|
|
setBatchNoSearchRender() {
|
|
const column = this.findColumn(this.option.column, 'batchNo');
|
|
if (!column) return;
|
|
column.renderSearch = scope =>
|
|
h(
|
|
ElSelect,
|
|
{
|
|
modelValue: scope.row?.batchNo ?? '',
|
|
'onUpdate:modelValue': value => {
|
|
if (scope.row) scope.row.batchNo = value ?? '';
|
|
},
|
|
clearable: true,
|
|
filterable: true,
|
|
allowCreate: true,
|
|
defaultFirstOption: true,
|
|
placeholder: '请选择',
|
|
style: 'width: 100%',
|
|
},
|
|
() =>
|
|
this.batchNoOptions.map(item =>
|
|
h(ElOption, { key: item.value, label: item.label, value: item.value })
|
|
)
|
|
);
|
|
},
|
|
async loadOptions() {
|
|
try {
|
|
const response = await api.getOptions();
|
|
const options = this.unwrapData(response) || {};
|
|
const batchNos = Array.isArray(options.batchNos) ? options.batchNos : [];
|
|
this.batchNoOptions = batchNos.map(item => {
|
|
if (typeof item === 'string') {
|
|
return { label: item, value: item };
|
|
}
|
|
const value = item.id ?? item.value ?? item.name ?? item.batchNo ?? '';
|
|
const label = item.name ?? item.label ?? item.batchNo ?? value;
|
|
return { label: String(label || ''), value: String(value || '') };
|
|
});
|
|
} catch (error) {
|
|
this.batchNoOptions = [];
|
|
}
|
|
},
|
|
onLoad(page) {
|
|
this.loading = true;
|
|
api
|
|
.getList(page.currentPage, page.pageSize, { ...this.query })
|
|
.then(response => {
|
|
const data = this.unwrapData(response) || {};
|
|
this.rows = data.records || [];
|
|
this.page.total = Number(data.total || 0);
|
|
})
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
searchChange(params, done) {
|
|
this.query = { ...params };
|
|
this.page.currentPage = 1;
|
|
this.onLoad(this.page);
|
|
done();
|
|
},
|
|
searchReset() {
|
|
this.query = {};
|
|
this.page.currentPage = 1;
|
|
this.onLoad(this.page);
|
|
},
|
|
currentChange(currentPage) {
|
|
this.page.currentPage = currentPage;
|
|
},
|
|
sizeChange(pageSize) {
|
|
this.page.pageSize = pageSize;
|
|
},
|
|
refreshChange() {
|
|
this.loadOptions();
|
|
this.onLoad(this.page);
|
|
},
|
|
openCreate() {
|
|
this.$router.push({
|
|
path: '/settlement/settlement-import/form',
|
|
query: { name: '新增导入结算单' },
|
|
});
|
|
},
|
|
openDetail(row) {
|
|
if (!row?.id) return;
|
|
this.$router.push({
|
|
path: '/settlement/settlement-import/form',
|
|
query: { id: row.id, mode: 'view', name: '查看导入结算单' },
|
|
});
|
|
},
|
|
editDraft(row) {
|
|
this.$router.push({
|
|
path: '/settlement/settlement-import/form',
|
|
query: { id: row.id, name: '编辑导入结算单' },
|
|
});
|
|
},
|
|
async handleDelete(row) {
|
|
if (!row?.id) return;
|
|
try {
|
|
await this.$confirm('确认删除该草稿批次？删除后不可恢复。', '提示', {
|
|
type: 'warning',
|
|
});
|
|
await api.removeDraft(row.id);
|
|
this.$message.success('删除成功');
|
|
this.refreshChange();
|
|
} catch (error) {
|
|
if (error === 'cancel' || error === 'close') return;
|
|
this.$message.error(error?.message || '删除失败');
|
|
}
|
|
},
|
|
openVoid(row) {
|
|
this.voidForm = { id: row.id, reason: '' };
|
|
this.voidVisible = true;
|
|
this.$nextTick(() => this.$refs.voidFormRef?.clearValidate());
|
|
},
|
|
async submitVoid() {
|
|
await this.$refs.voidFormRef?.validate();
|
|
this.voidLoading = true;
|
|
try {
|
|
await api.voidBatch({
|
|
id: this.voidForm.id,
|
|
reason: String(this.voidForm.reason || '').trim(),
|
|
});
|
|
this.$message.success('作废成功');
|
|
this.voidVisible = false;
|
|
this.onLoad(this.page);
|
|
this.loadOptions();
|
|
} finally {
|
|
this.voidLoading = false;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.settlement-import-page :deep(.el-table) {
|
|
--el-table-border-color: #eff1f7;
|
|
}
|
|
|
|
.settlement-import-page :deep(.el-table__body tr:nth-child(even) > td.el-table__cell),
|
|
.settlement-import-page
|
|
:deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--left),
|
|
.settlement-import-page
|
|
:deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--right) {
|
|
background: #fafafa;
|
|
}
|
|
|
|
:deep(.settlement-import-page.basic-container .basic-container__card > .el-card__body) {
|
|
padding: 0;
|
|
}
|
|
</style>
|