admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加onSave，onClose和onClosed事件，优化数据保存逻辑：表单会在选择时实时变化但不点确定则不会进行实际数据修改（表单数据会复原）（实时变化是否修改待定）

Browse Source
This commit is contained in:
阿辉
2024-11-27 16:46:32 +08:00
parent 4177f84a62
commit 9cc071edcd
1 changed files with 25 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
web/src/components/fileSelector/index.vue
View File

@@ -23,7 +23,7 @@
</div>
<div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
:style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
<el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="dataClear">
<el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="clear">
<Close />
</el-icon>
</div>
@@ -41,7 +41,7 @@
</div>
<div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
:style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
<el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="dataClear">
<el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="clear">
<Close />
</el-icon>
</div>
@@ -59,13 +59,13 @@
</div>
<div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
:style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
<el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="dataClear">
<el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="clear">
<Close />
</el-icon>
</div>
</div>
<el-dialog v-model="selectVisiable" :draggable="false" width="50%" :align-center="false"
@open="if (listData.length === 0) listRequest();" @closed="clear" modal-class="_overlay">
@open="if (listData.length === 0) listRequest();" @close="onClose" @closed="onClosed" modal-class="_overlay">
<template #header>
<span class="el-dialog__title">文件选择</span>
<el-divider style="margin: 0;" />
@@ -112,8 +112,8 @@
</div>
</div>
<template #footer v-if="props.showInput">
<el-button type="default" @click="selectVisiable = false">取消</el-button>
<el-button type="primary" @click="selectVisiable = false">确定</el-button>
<el-button type="default" @click="onClose">取消</el-button>
<el-button type="primary" @click="onSave">确定</el-button>
</template>
</el-dialog>
</div>
@@ -216,7 +216,7 @@ const onItemClick = async (e: MouseEvent) => {
target.classList.add('active');
data.value = fileId;
}
onDataChange(data.value);
// onDataChange(data.value);
};
// 每次列表刷新都得更新一下选择状态，因为所有标签页共享列表
const selectedInit = async () => {
@@ -230,8 +230,22 @@ const selectedInit = async () => {
}
};
const uploadRef = ref<any>();
const onSave = () => {
onDataChange(data.value);
emit('onSave', data.value);
selectVisiable.value = false;
};
const onClose = () => {
data.value = props.modelValue;
emit('onClose');
selectVisiable.value = false;
};
const onClosed = () => {
clearState();
emit('onClosed');
};
// 清空状态
const clear = () => {
const clearState = () => {
filterForm.name = '';
pageForm.page = 1;
pageForm.limit = 10;
@@ -240,12 +254,12 @@ const clear = () => {
// all数据不能清，因为all只会在挂载的时候赋值一次
// listAllData.value = [];
};
const dataClear = () => { data.value = null; onDataChange(null); }
const clear = () => { data.value = null; onDataChange(null); }
// fs-crud部分
const data = ref<any>(null);
const emit = defineEmits(['update:modelValue']);
const emit = defineEmits(['update:modelValue', 'onSave', 'onClose', 'onClosed']);
watch(() => props.modelValue, (val) => { data.value = val; }, { immediate: true });
const { ui } = useUi();
const formValidator = ui.formItem.injectFormItemContext();
@@ -255,8 +269,7 @@ const onDataChange = (value: any) => {
formValidator.onBlur();
};
defineExpose({ data, onDataChange, selectVisiable, clear, dataClear });
defineExpose({ data, onDataChange, selectVisiable, clearState, clear });
onMounted(() => {
if (props.multiple && props.inputType !== 'selector')