205 lines
4.4 KiB
Vue
205 lines
4.4 KiB
Vue
<script setup>
|
|
import { defineEmits, defineProps, ref, watch } from "vue";
|
|
import { morePermission } from "@/utils/auth";
|
|
|
|
const props = defineProps({
|
|
visible: { type: Boolean, default: false },
|
|
title: { type: String, default: "选择数据" },
|
|
params: {
|
|
type: Object,
|
|
default: () => ({
|
|
moneyId: "",
|
|
feeMoneyIds: [],
|
|
}),
|
|
},
|
|
});
|
|
const emit = defineEmits(["update:visible", "confirm"]);
|
|
|
|
const tableData = ref([]);
|
|
const localVisible = ref(props.visible);
|
|
(watch(
|
|
() => props.visible,
|
|
(val) => {
|
|
localVisible.value = val;
|
|
if (val) {
|
|
tableData.value = props.params.feeMoneyIds.map((item, index) => ({
|
|
id: index + 1,
|
|
feeMoneyId: item, // 费用币种
|
|
moneyId: props.params.moneyId, // 收款币种
|
|
exrate: item === props.params.moneyId ? 1 : "", // 汇率默认值
|
|
}));
|
|
}
|
|
},
|
|
),
|
|
{ immediate: true });
|
|
// 关闭弹窗
|
|
function handleClose() {
|
|
emit("update:visible", false);
|
|
}
|
|
|
|
// 点击确认
|
|
function handleConfirm() {
|
|
emit("confirm", tableData.value);
|
|
emit("update:visible", false);
|
|
}
|
|
|
|
const columns = [
|
|
{
|
|
prop: "feeMoneyId",
|
|
label: "费用币种",
|
|
edit_width: "90",
|
|
readOnly: "1",
|
|
},
|
|
{
|
|
prop: "moneyId",
|
|
label: "收款币种",
|
|
edit_width: "90",
|
|
readOnly: "1",
|
|
},
|
|
{
|
|
prop: "exrate",
|
|
label: "汇率",
|
|
edit_width: "110",
|
|
},
|
|
];
|
|
</script>
|
|
<template>
|
|
<el-dialog
|
|
v-model="localVisible"
|
|
:title="title"
|
|
width="400px"
|
|
:before-close="handleClose"
|
|
align-center
|
|
class="g3dialogfooter"
|
|
draggable
|
|
>
|
|
<div class="g3pagecontainer">
|
|
<div class="g3container">
|
|
<vxe-table
|
|
ref="tableRef"
|
|
border
|
|
stripe
|
|
header-align="center"
|
|
:data="tableData"
|
|
:filter-config="{
|
|
showIcon: false,
|
|
}"
|
|
:column-drag-config="{
|
|
showIcon: false,
|
|
trigger: 'cell',
|
|
}"
|
|
:row-config="{
|
|
useKey: true,
|
|
keyField: 'id',
|
|
}"
|
|
:cell-config="{
|
|
height: 26,
|
|
}"
|
|
:column-config="{
|
|
resizable: true,
|
|
drag: true,
|
|
}"
|
|
:edit-config="{
|
|
trigger: 'click',
|
|
mode: 'row',
|
|
autoClear: false,
|
|
showStatus: false,
|
|
showIcon: false,
|
|
}"
|
|
show-overflow
|
|
show-header-overflow
|
|
show-footer-overflow
|
|
height="100%"
|
|
>
|
|
<vxe-column
|
|
v-for="column in columns"
|
|
:key="column.prop"
|
|
:field="column.prop"
|
|
:title="column.label"
|
|
:width="column.edit_width || column.width"
|
|
align="center"
|
|
:edit-render="{ autoFocus: true, enabled: true }"
|
|
>
|
|
<template #edit="{ row }">
|
|
<el-input
|
|
v-model="row[column.prop]"
|
|
size="small"
|
|
:disabled="column.readOnly === '1'"
|
|
/>
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
</div>
|
|
</div>
|
|
<template #footer>
|
|
<div class="dialogfooter">
|
|
<el-button @click="handleClose" class="g3button"> 取消 </el-button>
|
|
<el-button
|
|
type="primary"
|
|
@click="handleConfirm"
|
|
class="g3button"
|
|
:disabled="morePermission(3)"
|
|
>
|
|
确认
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.g3pagecontainer {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 180px;
|
|
padding: 2px 2px;
|
|
}
|
|
.g3container {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding: 10px 10px 0px 10px;
|
|
background-color: #ffffff;
|
|
}
|
|
.dialogfooter {
|
|
margin: 8px 0px 16px 0px;
|
|
padding-right: 10px;
|
|
}
|
|
.g3button {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
:deep(.vxe-cell) {
|
|
padding: 0px !important;
|
|
}
|
|
</style>
|
|
<style>
|
|
.el-dialog.g3dialogfooter {
|
|
--el-dialog-padding-primary: 4px;
|
|
}
|
|
.el-dialog.g3dialogfooter .el-dialog__header {
|
|
padding: 3px 20px 5px 0px;
|
|
}
|
|
.el-dialog.g3dialogfooter .el-dialog__title {
|
|
color: #1f2225;
|
|
margin-left: 11px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
font-family:
|
|
v-sans,
|
|
system-ui,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
sans-serif,
|
|
"Apple Color Emoji",
|
|
"Segoe UI Emoji",
|
|
"Segoe UI Symbol";
|
|
}
|
|
.el-dialog.g3dialogfooter .el-dialog__headerbtn {
|
|
width: 38px;
|
|
height: 42px;
|
|
}
|
|
</style>
|