<template>
|
<FormDialog
|
v-model="dialogVisible"
|
operation-type="edit"
|
title="设置发放银行下拉数据"
|
width="640px"
|
@close="handleClose"
|
@confirm="handleConfirm"
|
@cancel="handleCancel"
|
>
|
<el-form ref="formRef" :model="form" label-position="top">
|
<el-row :gutter="16">
|
<el-col :span="24" style="display: flex; justify-content: end; gap: 10px;margin-bottom: 10px">
|
<el-button type="primary" @click="addBank">新增银行</el-button>
|
<el-button @click="resetToEmpty">清空</el-button>
|
</el-col>
|
</el-row>
|
|
<el-table :data="form.banks" border style="width: 100%">
|
<el-table-column label="银行名称" min-width="260">
|
<template #default="{ row }">
|
<el-input
|
v-model="row.bankName"
|
placeholder="例如：中国工商银行"
|
clearable
|
maxlength="50"
|
show-word-limit
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="90" align="center">
|
<template #default="{ $index }">
|
<el-button type="danger" link @click="removeBank($index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="margin-top: 10px; color: #909399; font-size: 12px">
|
提示：这里维护的是“发放银行”下拉框选项数据；保存后在新建/编辑工资表中可选择。
|
</div>
|
</el-form>
|
</FormDialog>
|
</template>
|
|
<script setup>
|
import { computed, reactive, ref, toRefs, watch, getCurrentInstance } from "vue";
|
import FormDialog from "@/components/Dialog/FormDialog.vue";
|
import { bankAdd, bankDelete, bankList, bankUpdate } from "@/api/personnelManagement/bank.js";
|
|
const emit = defineEmits(["update:modelValue", "close", "saved"]);
|
const props = defineProps({
|
modelValue: { type: Boolean, default: false },
|
});
|
|
const { proxy } = getCurrentInstance();
|
|
const dialogVisible = computed({
|
get: () => props.modelValue,
|
set: (val) => emit("update:modelValue", val),
|
});
|
|
const formRef = ref(null);
|
|
const data = reactive({
|
form: {
|
banks: [],
|
},
|
});
|
|
const { form } = toRefs(data);
|
|
function newKey() {
|
return Math.random().toString(36).slice(2);
|
}
|
|
const addBank = () => {
|
form.value.banks.push({
|
_key: newKey(),
|
id: undefined,
|
bankName: "",
|
_originBankName: "",
|
});
|
};
|
|
const removeBank = (index) => {
|
const row = form.value.banks?.[index];
|
if (!row) return;
|
// 未落库的行：直接移除
|
if (!row.id) {
|
form.value.banks.splice(index, 1);
|
return;
|
}
|
// 已落库：调用后端删除
|
bankDelete([row.id]).then(() => {
|
proxy?.$modal?.msgSuccess?.("删除成功");
|
form.value.banks.splice(index, 1);
|
emit("saved");
|
});
|
};
|
|
const resetToEmpty = () => {
|
if (!form.value.banks?.length) return;
|
const ids = form.value.banks.map((b) => b?.id).filter(Boolean);
|
// 若全部是未保存行，则仅清空本地
|
if (!ids.length) {
|
form.value.banks = [];
|
return;
|
}
|
proxy?.$modal
|
?.confirm?.("确定清空所有银行吗？")
|
.then(() => bankDelete(ids))
|
.then(() => {
|
proxy?.$modal?.msgSuccess?.("清空成功");
|
form.value.banks = [];
|
emit("saved");
|
})
|
.catch(() => {});
|
};
|
|
const loadSetting = () => {
|
return bankList().then((res) => {
|
const list = Array.isArray(res?.data) ? res.data : [];
|
form.value.banks = list.map((b) => ({
|
_key: newKey(),
|
id: b?.id,
|
bankName: b?.bankName ?? "",
|
_originBankName: b?.bankName ?? "",
|
}));
|
});
|
};
|
|
const openDialog = () => {
|
loadSetting();
|
};
|
|
watch(
|
() => dialogVisible.value,
|
(val) => {
|
if (val) openDialog();
|
}
|
);
|
|
const handleConfirm = () => {
|
const names = (form.value.banks || [])
|
.map((b) => (b?.bankName == null ? "" : String(b.bankName).trim()))
|
.filter((n) => n !== "");
|
const unique = Array.from(new Set(names));
|
if (!unique.length) {
|
proxy?.$modal?.msgWarning?.("请至少新增一个银行选项");
|
return;
|
}
|
if (unique.length !== names.length) {
|
proxy?.$modal?.msgWarning?.("银行名称不可重复");
|
return;
|
}
|
|
const rows = form.value.banks.map((b) => ({
|
...b,
|
bankName: b?.bankName == null ? "" : String(b.bankName).trim(),
|
}));
|
|
const toAdd = rows.filter((b) => !b.id && b.bankName);
|
const toUpdate = rows.filter((b) => b.id && b.bankName && b.bankName !== (b._originBankName ?? ""));
|
|
Promise.all([
|
...toAdd.map((b) => bankAdd({ bankName: b.bankName })),
|
...toUpdate.map((b) => bankUpdate({ id: b.id, bankName: b.bankName })),
|
])
|
.then(() => loadSetting())
|
.then(() => {
|
proxy?.$modal?.msgSuccess?.("保存成功");
|
dialogVisible.value = false;
|
emit("saved", { options: unique });
|
});
|
};
|
|
const handleCancel = () => {
|
dialogVisible.value = false;
|
};
|
|
const handleClose = () => {
|
emit("close");
|
};
|
|
defineExpose({ openDialog });
|
</script>
|
|
<style scoped></style>
|
