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

Merge remote-tracking branch 'origin/develop' into develop

Browse Source
This commit is contained in:
1638245306
2025-03-13 17:40:39 +08:00
parent 341ea62412 2ab80758f0
commit 7555ba1707
4 changed files with 55 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,8 +11,14 @@
<div v-if="props.inputType === 'image' && props.multiple"
style="width: 100%; display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px;">
<el-image v-for="item, index in (data || [])" :src="item" :key="index" fit="scale-down" class="itemList"
:style="{ width: props.inputSize + 'px', aspectRatio: '1 / 1' }" />
<div v-for="item, index in (data || [])" style="position: relative;"
:style="{ width: props.inputSize + 'px', height: props.inputSize + 'px' }">
<el-image :src="item" :key="index" fit="scale-down" class="itemList"
:style="{ width: props.inputSize + 'px', aspectRatio: '1 / 1' }" />
<el-icon v-show="(!!data && !props.disabled)" class="closeHover" :size="16" @click="clearOne(item)">
<Close />
</el-icon>
</div>
<div style="position: relative;" :style="{ width: props.inputSize + 'px', height: props.inputSize + 'px' }">
<div
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
@@ -22,10 +28,6 @@
</div>
<div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
:style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
<el-icon v-show="(!!data && !props.disabled) && !props.multiple" class="closeHover" :size="16"
@click="clear">
<Close />
</el-icon>
</div>
</div>
<div v-if="props.inputType === 'image' && !props.multiple" class="form-display" style="position: relative;"
@@ -350,8 +352,12 @@ const clearState = () => {
// all数据不能清，因为all只会在挂载的时候赋值一次
// listAllData.value = [];
};
const clear = () => { data.value = null; onDataChange(null); }
const clear = () => { data.value = null; onDataChange(null); };
const clearOne = (item: any) => {
let _l = (JSON.parse(JSON.stringify(data.value)) as any[]).filter((i: any) => i !== item)
data.value = _l;
onDataChange(_l);
};
// 网络文件部分
const netLoading = ref<boolean>(false);
@@ -409,7 +415,15 @@ watch(
const { ui } = useUi();
const formValidator = ui.formItem.injectFormItemContext();
const onDataChange = (value: any) => {
emit('update:modelValue', value);
let _v = null;
if (value) {
if (typeof value === 'string') _v = value.replace(/\\/g, '/');
else {
_v = [];
for (let i of value) _v.push(i.replace(/\\/g, '/'));
}
}
emit('update:modelValue', _v);
formValidator.onChange();
formValidator.onBlur();
};

40
web/src/views/system/fileList/crud.tsx
View File

@@ -228,26 +228,26 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
show: false
}
},
fileselectortest: {
title: '文件选择器测试',
type: 'file-selector',
column: {
minWidth: 200
},
form: {
component: {
name: fileSelector,
vModel: 'modelValue',
tabsShow: 0b1111,
itemSize: 100,
multiple: true,
selectable: true,
showInput: true,
inputType: 'image',
valueKey: 'url',
}
}
}
// fileselectortest: {
// title: '文件选择器测试',
// type: 'file-selector',
// column: {
// minWidth: 200
// },
// form: {
// component: {
// name: fileSelector,
// vModel: 'modelValue',
// tabsShow: 0b1111,
// itemSize: 100,
// multiple: true,
// selectable: true,
// showInput: true,
// inputType: 'image',
// valueKey: 'url',
// }
// }
// }
},
},
};