上传组件
This commit is contained in:
@ -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',
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -126,7 +126,7 @@
|
||||
},
|
||||
schemas: customSearchFormSchema,
|
||||
fieldMapToTime: [],
|
||||
showResetButton: false,
|
||||
showResetButton: true,
|
||||
},
|
||||
beforeFetch: (params) => {
|
||||
return { ...params, FormId: formIdComputedRef.value, PK: 'id' };
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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(() => {
|
||||
});
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user