dialog中write組件代碼
let ImageList = reactive<UploadFile[]>([])const formSchema = reactive<FormSchema[]>([{field: 'ImageFiles',label: '現場圖片',component: 'Upload',colProps: { span: 24 },componentProps: {limit: 5,action: PATH_URL + `/upload`,headers: {[userStore.getTokenKey]: userStore.getToken},autoUpload: true,// fileList: ImageList,multiple: true,listType: 'picture-card',beforeUpload: (file: File) => {const isImage = /^image\//.test(file.type)const isLt10M = file.size / 1024 / 1024 < 10if (!isImage) {ElMessage.error('只能上傳圖片文件!')return false}if (!isLt10M) {ElMessage.error('圖片大小不能超過 10MB!')return false}return true},onSuccess: (response: UploadResponse, uploadFile: UploadFile) => {if (response.code === 200) {// 更新文件信息Object.assign(uploadFile, {url: MINO_SERVER + response.data.path,path: response.data.path,id: response.data.id,name: response.data.fullname})ImageList.push(uploadFile)handleImageUpdate(ImageList)} else {uploadFile.status = 'error'}},onError: (_: Error, uploadFile: UploadFile) => {uploadFile.status = 'error'},onPreview: (uploadFile: UploadFile) => {if (uploadFile.url) {window.open(uploadFile.url)}},beforeRemove: async (uploadFile: UploadFile) => {const newList = ImageList.filter((item) => item.id !== uploadFile.id)ImageList = newListhandleImageUpdate(ImageList)},onExceed: () => {ElMessage.warning('最多只能上傳5張圖片')},slots: {default: () => (<div><ElIcon class="avatar-uploader-icon" size="26" style="color:#165DFF">+</ElIcon></div>),tip: () => (<div class="el-upload__tip" style="width:420px;color:#606266">支持jpg、png格式，單個文件不超過10M，最多上傳5張</div>)}}},])const handleImageUpdate = (imageList) => {setValues({ ImageFiles: imageList })setSchema([{field: 'ImageFiles',path: 'componentProps.fileList',value: imageList}])
}//回顯時處理數據watch(() => props.currentRow,(currentRow) => {if (!currentRow) return// console.log(currentRow)setValues(currentRow)if (currentRow.ImageFiles && currentRow.ImageFiles.length) {currentRow.ImageFiles?.forEach((item) => {item.name = item.fullnameitem.url = MINO_SERVER + item.path})Object.assign(ImageList, currentRow.ImageFiles)handleImageUpdate(ImageList)} else {ImageList.splice(0, ImageList.length)handleImageUpdate(ImageList)}},{deep: true,immediate: true}
)
index頁面記得處理提交的數據?
)
