上传组件

This commit is contained in:
‘huanghaiixia’
2025-12-09 17:13:57 +08:00
parent c44db962c3
commit 9b43f5ed55
8 changed files with 142 additions and 43 deletions

View File

@ -56,7 +56,7 @@
:multiple="multiple"
:beforeUpload="beforeUpload"
:listType="listType"
:show-upload-list="{ showDownloadIcon, showPreviewIcon, showRemoveIcon }"
:show-upload-list="showUploadList"
@remove="handleRemove"
@download="handleDownload"
@preview="handlePreview"
@ -67,7 +67,7 @@
<div :style="style" v-else>
<a-button :loading="loading" :disabled="loading" v-if="!disabled">
<upload-outlined />
点击上传
{{ btnTip || '点击上传' }}
</a-button>
<div v-if="VITE_GLOB_UPLOAD_ALERT_TIP?.trim()" style="color: red; margin-top: 8px">
{{ VITE_GLOB_UPLOAD_ALERT_TIP }}
@ -161,6 +161,16 @@ import { methodOf } from 'lodash-es';
showDownloadIcon: {
type: Boolean,
default: true
},
showUploadList: {
type: Boolean,
default: true
},
fileList: Array,
btnTip: String,
dataDelete: { // 是否调接口删除
type: Boolean,
default: false
}
});
@ -178,9 +188,9 @@ import { methodOf } from 'lodash-es';
tableName.value = data.tableName;
columnName.value = data.columnName;
}else{
tableId.value = '';
tableName.value = '';
columnName.value = '';
tableId.value = props.value || '';
tableName.value = props.tableName || '';
columnName.value = props.columnName || '';
}
}
@ -193,8 +203,35 @@ import { methodOf } from 'lodash-es';
const previewFile = ref('');
const previewTitle = ref('');
watch(
() => props.fileList,
async (val) => {
if (val) {
fileList.value = props.fileList
if (fileList.value.length) {
fileList.value.forEach((x) => {
x.name = x.fileOrg;
x.url = x.filePath;
x.thumbUrl = x.thUrl;
x.status = 'done'; //没有则不会展示下载按钮
});
}
bindValues(fileList.value[0]);
} else {
bindValues(undefined);
}
if (!val) {
fileList.value = [];
}
},
{
immediate: true
}
);
const refreshList = async (val:any) => {
if (val) {
if (props.dataDelete) return
let _list = await getFileList({ tableName: props.tableName, columnName: props.columnName,tableId: props.value });
fileList.value = _list.filter((o) => !removeIds.value.includes(o.id));
if (fileList.value.length) {
@ -205,6 +242,7 @@ import { methodOf } from 'lodash-es';
x.status = 'done'; //没有则不会展示下载按钮
});
bindValues(fileList.value[0]);
emit('change', fileList.value);
}
} else {
bindValues(undefined);
@ -249,10 +287,20 @@ import { methodOf } from 'lodash-es';
});
let tableIdValue = tableId.value;
bindValues(res[0]);
if (props.dataDelete) {
let fileArr = res||[]
fileArr.forEach((x) => {
x.status = 'done'; //没有则不会展示下载按钮
x.url = x.fileUrl;
x.thumbUrl = x.thUrl;
x.name = x.fileOrg;
});
fileList.value = [...fileList.value, ...fileArr]
}
emit('update:value', tableId.value);
emit('update:tableName', tableName.value);
emit('update:columnName', columnName.value);
emit('change');
emit('change', fileList.value);
if(tableIdValue==tableId.value){
await refreshList(tableId.value);
}
@ -293,6 +341,17 @@ import { methodOf } from 'lodash-es';
}
const handleRemove = async (info) => {
const id = info.response ? info.response.data.id : info.id;
if (props.dataDelete) {
const index = fileList.value.findIndex((x) => x.id === id);
fileList.value.splice(index, 1);
emit('update:value', tableId.value);
emit('change', fileList.value);
notification.success({
message: 'Tip',
description: '删除成功!'
});
return
}
const status = await deleteFile([id]);
if (status) {
removeIds.value.push(id);
@ -303,7 +362,7 @@ import { methodOf } from 'lodash-es';
emit('update:value', tableId.value);
emit('update:tableName', tableName.value);
emit('update:columnName', columnName.value);
emit('change');
emit('change', fileList.value);
await refreshList(tableId.value);
notification.success({
message: 'Tip',

View File

@ -174,9 +174,9 @@
tableName.value = data.tableName;
columnName.value = data.columnName;
}else{
tableId.value = '';
tableName.value = '';
columnName.value = '';
tableId.value = props.value || '';
tableName.value = props.tableName || '';
columnName.value = props.columnName || '';
}
}
const deleteFlag = ref(false);
@ -262,13 +262,14 @@
x.url = x.fileUrl;
x.thumbUrl = x.thUrl;
x.fileSize = x.fileSize
x.name = x.fileOrg;
});
bindValues(res[0]);
fileList.value = [...fileList.value, ...fileArr]
emit('update:value', tableId.value);
emit('update:tableName', tableName.value);
emit('update:columnName', columnName.value);
emit('change');
emit('change', fileList.value);
loading.value = false;
} catch (error) {
console.error(error);

View File

@ -33,9 +33,9 @@
</a-col>
<a-col :span="24">
<a-form-item label="上传附件" name="fileList" :label-col="{ span: 4 }" :wrapper-col="{ span: 24 }">
<UploadNew :file-list="formState.fileList" :disabled="isDisable" @change="changeUplod" :multiple="true" :maxSize="200" :accept="accept" />
<div style="color: #ccc; font-size: 12px">{{ fileTip }}</div>
<Upload :disabled="isDisable" v-model:value="formState.filePath" v-model:tableName="tableName" v-model:columnName="columnName"
:multiple="true" @change="changeUplod" :dataDelete="true" :file-list="formState.fileList" :maxSize="200" :accept="accept"></Upload>
</a-form-item>
</a-col>
</a-row>
@ -50,11 +50,13 @@ import { Form, message } from 'ant-design-vue';
import { useI18n } from '/@/hooks/web/useI18n';
import type { Rule } from 'ant-design-vue/es/form';
import { useMessage } from '/@/hooks/web/useMessage';
import UploadNew from '/@/components/Form/src/components/UploadNew.vue';
import { getDocCpList } from '/@/api/sales/Customer';
import type { FormInstance } from 'ant-design-vue';
import dayjs from 'dayjs';
import Upload from '/@/components/Form/src/components/Upload.vue';
const tableName = 'Customer'
const columnName = 'fileList'
const { t } = useI18n();
const isUpdate = ref(true);
const isDisable = ref(false);
@ -68,14 +70,18 @@ const emit = defineEmits(['success','register']);
const getTitle = computed(() => (!unref(isUpdate) ? t('新增证书') : t('编辑证书')));
let formState = reactive({
docTypeCode: '',
fileList: []
fileList: [],
filePath: ''
});
const list = ref()
const rules = {
docTypeCode: [{ required: true, message: "该项为必填项", trigger: 'change' }],
};
const curData = ref()
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
curData.value = ''
formState.filePath = ''
getOption()
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
@ -85,7 +91,9 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
let dateFrom = data.record?.dateFrom ? dayjs(data.record?.dateFrom) : null
let dateTo = data.record?.dateTo ? dayjs(data.record?.dateTo) : null
Object.assign(formState, {...data.record,dateFrom, dateTo})
formState.filePath = formState.fileList[0]?.xjrFileId
let json = JSON.parse(JSON.stringify(data.record))
formState.filePath = (json?.fileList||[])[0]?.tableId
curData.value = json?.docTypeCode
}
});
@ -108,7 +116,7 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
}
function changeUplod (val) {
formState.fileList = val
console.log(val, 532, formState.filePath)
console.log(val, 532, )
}
async function getOption() {
optionList = await getDocCpList({'valid': 'Y'})
@ -124,17 +132,10 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
...formState,
dateFrom: formState.dateFrom ? dayjs(formState.dateFrom).format('YYYY-MM-DD') : '',
dateTo: formState.dateTo ? dayjs(formState.dateTo).format('YYYY-MM-DD') : '',
fileList: formState.fileList.map(v => {
return {
fileOrg: v.name,
filePath: v.url,
fileSize: v.fileSize,
xjrFileId: v.tableId
}
})
fileList: formState.fileList || []
}
let idx =list.value.findIndex(v => v.docTypeCode == obj.docTypeCode)
if (idx > -1) {
if (idx > -1 && formState.docTypeCode !=curData.value) {
message.warn('证书已存在')
formRef.value.resetFields();
closeModal();

View File

@ -284,11 +284,15 @@
<span style="font-size: 12px;font-weight: normal;">上传公司财报等附件</span>
</div>
</template>
<UploadNew v-if="!isDisable" style="margin-bottom: 10px;" :file-list="dataFile" :showUploadList="false" :btnTip="btnTip" @change="changeUplod" :multiple="true"/>
<Upload v-if="!isDisable" style="margin-bottom: 10px;" :file-list="dataFile" :showUploadList="false"
v-model:value="formState.filePath" v-model:tableName="tableName" v-model:columnName="columnName"
:btnTip="btnTip" @change="changeUplod" :multiple="true" :dataDelete="true"
:showDownloadIcon="false"
/>
<a-table :columns="columnsFile" :data-source="dataFile" >
<template #bodyCell="{ column,record,index, text }">
<template v-if="column.dataIndex === 'fileOrg'">
<a :href="record.presignedUrl||record.filePath" :download="record.fileOrg" target="_blank">{{record.fileOrg}}</a>
<a @click="handleDownload(record)">{{record.fileOrg}}</a>
</template>
<template v-if="column.dataIndex === 'docDesc' && !isDisable">
<a-input :placeholder="t('请输入附件说明')" :disabled="isDisable" v-model:value="record.docDesc" />
@ -328,7 +332,12 @@
import dayjs from 'dayjs';
import { getAppEnvConfig } from '/@/utils/env';
import { message } from 'ant-design-vue';
import UploadNew from '/@/components/Form/src/components/UploadNew.vue';
import Upload from '/@/components/Form/src/components/Upload.vue';
import { parseDownloadUrl} from '/@/api/system/file';
import { downloadByUrl } from '/@/utils/file/download';
const tableName = '1';
const columnName = '1'
const formType = ref('2'); // 0 新建 1 修改 2 查看
const formRef = ref();
@ -474,6 +483,11 @@
}
});
const handleDownload = (info) => {
const url = parseDownloadUrl(info.response ? info.response.data.fileUrl : info.fileUrl);
const fileName = info.response ? info.response.data.fileOrg : info.fileOrg;
downloadByUrl({ url, fileName: fileName});
};
async function getList(id) {
spinning.value = true
try {
@ -535,6 +549,7 @@
if (type == 'certificate') {
if (btn == 'edit' || btn == 'view') {
openModalCertificate(true, {record: record,isUpdate: true, btnType: btn, list: dataCertificate});
console.log(record, 'record', dataCertificate)
}
if (btn == 'delete') {
dataCertificate.splice(index, 1)
@ -602,6 +617,7 @@
if (idx <0) {
dataCertificate.push(val)
}
console.log(dataCertificate, 'dataCertificate')
}
const handleSuccessContact = (val)=> {
if (curIdx.value != null) {
@ -657,20 +673,27 @@
})
return
}
let arrCertificate = JSON.parse(JSON.stringify(dataCertificate))
arrCertificate.forEach(v => {
v.dateFrom = v.dateFrom ? dayjs(v.dateFrom ).format('YYYY-MM-DD HH:mm:ss') : '';
v.dateTo = v.dateTo ? dayjs(v.dateTo ).format('YYYY-MM-DD HH:mm:ss'): '';
(v.fileList || []).forEach(i => {
i.id = ''
})
})
let arrUploadList = JSON.parse(JSON.stringify(dataFile.value))
arrUploadList.forEach(v => {
v.id= ''
})
let obj = {
...formState,
lngCustomerBankList: dataBank,
lngCustomerDocList: dataCertificate.map(v =>{
return {
...v,
dateFrom: v.dateFrom ? dayjs(v.dateFrom ).format('YYYY-MM-DD HH:mm:ss') : '',
dateTo: v.dateTo ? dayjs(v.dateTo ).format('YYYY-MM-DD HH:mm:ss'): ''
}
}),
lngCustomerDocList: arrCertificate,
lngCustomerContactList: dataContact,
lngFileUploadList: dataFile.value
lngFileUploadList: arrUploadList
}
console.log(arrCertificate, 'arrCertificate')
spinning.value = true;
let request = !formState.id ? addLngCustomer :updateLngCustomer

View File

@ -126,7 +126,7 @@
},
schemas: customSearchFormSchema,
fieldMapToTime: [],
showResetButton: false,
showResetButton: true,
},
beforeFetch: (params) => {
return { ...params, FormId: formIdComputedRef.value, PK: 'id' };

View File

@ -196,7 +196,13 @@
state.formModel = values;
let obj = {
...values,
lngGradeSystemItemList: dataList.value
lngGradeSystemItemList: dataList.value.map(v => {
return {
...v,
gsId: values.gsId,
id: values.id,
}
})
}
let saveVal = await updateLngGradeSystem(obj);
await submitFormEvent(customFormEventConfigs, state.formModel,

View File

@ -14,7 +14,7 @@
</a-col>
<a-col :span="24">
<a-form-item label="评价部门" name="eDeptCode" >
<a-cascader v-model:value="formState.eDeptCode" :options="options" :load-data="loadData"
<a-cascader v-model:value="formState.eDeptCode" :options="options" :load-data="loadData" @change="onChange"
:field-names="{label: 'fullName', value: 'code', children: 'children'}" placeholder="请选择部门"/>
</a-form-item>
</a-col>
@ -98,6 +98,9 @@ const loadData: CascaderProps['loadData'] = async (selectedOptions) => {
})
} catch (error) {}
}
const onChange = (value, selectedOptions) => {
console.log(value, 55,selectedOptions )
}
onMounted(() => {
});

View File

@ -63,7 +63,7 @@
const filterColumns = cloneDeep(filterColumnAuth(columns));
const customConfigColums =ref(filterColumns);
const customSearchFormSchema =ref(searchFormSchema);
const selectedKeys = ref<string[]>([]);
const tableRef = ref();
//所有按钮
const buttons = ref([{"isUse":true,"name":"新增","code":"add","icon":"ant-design:plus-outlined","isDefault":true,"type":"primary"},{"isUse":true,"name":"编辑","code":"edit","icon":"ant-design:form-outlined","isDefault":true},{"isUse":true,"name":"启用","code":"enable","icon":"ant-design:form-outlined","isDefault":true,"type":"primary"},{"isUse":true,"name":"作废","code":"disable","icon":"ant-design:stop-outlined","isDefault":true,"type":"dashed"},{"isUse":true,"name":"刷新","code":"refresh","icon":"ant-design:reload-outlined","isDefault":true},{"isUse":true,"name":"查看","code":"view","icon":"ant-design:eye-outlined","isDefault":true},{"isUse":true,"name":"数据日志","code":"datalog","icon":"ant-design:profile-outlined","isDefault":true},{"isUse":true,"name":"删除","code":"delete","icon":"ant-design:delete-outlined","isDefault":true}]);
@ -102,7 +102,7 @@
},
schemas: customSearchFormSchema,
fieldMapToTime: [],
showResetButton: false,
showResetButton: true,
},
beforeFetch: (params) => {
return { ...params, FormId: formIdComputedRef.value, PK: 'id' };
@ -121,13 +121,19 @@
dataIndex: 'action',
slots: { customRender: 'action' },
},
rowSelection: {
type: 'checkbox',
onChange: onSelectChange
},
tableSetting: {
size: false,
setting: false,
},
});
function onSelectChange(rowKeys: string[]) {
selectedKeys.value = rowKeys;
}
function dbClickRow(record) {
if (!actionButtonConfig?.value.some(element => element.code == 'view')) {
return;