|
@@ -52,29 +52,22 @@
|
|
|
|
|
|
|
|
<el-row :gutter="20">
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="24">
|
|
<el-col :span="24">
|
|
|
- <el-form-item label="发票附件" prop="invoiceAttachment">
|
|
|
|
|
- <el-button type="primary" size="small" @click="handleOpenFileSelector">
|
|
|
|
|
- <el-icon><Upload /></el-icon>
|
|
|
|
|
- 点击上传
|
|
|
|
|
- </el-button>
|
|
|
|
|
- <div style="color: #999; font-size: 12px; margin-top: 5px">支持jpg/png/xlsx等文件</div>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
-
|
|
|
|
|
- <!-- 附件列表 -->
|
|
|
|
|
- <el-row :gutter="20" v-if="fileList.length > 0">
|
|
|
|
|
- <el-col :span="24">
|
|
|
|
|
- <el-table :data="fileList" border style="width: 100%; margin-top: 10px">
|
|
|
|
|
- <el-table-column type="index" label="序号" width="60" align="center" />
|
|
|
|
|
- <el-table-column prop="name" label="附件名称" min-width="200" align="center" />
|
|
|
|
|
- <el-table-column label="操作" width="150" align="center">
|
|
|
|
|
- <template #default="scope">
|
|
|
|
|
- <el-button link type="primary" size="small" @click="handlePreviewFile(scope.row)">预览</el-button>
|
|
|
|
|
- <el-button link type="danger" size="small" @click="handleRemoveFile(scope.$index)">删除</el-button>
|
|
|
|
|
|
|
+ <el-form-item label="发票附件" prop="invoiceAnnex">
|
|
|
|
|
+ <el-upload
|
|
|
|
|
+ :action="uploadAction"
|
|
|
|
|
+ :on-success="handleUploadSuccess"
|
|
|
|
|
+ :before-upload="beforeUpload"
|
|
|
|
|
+ :on-remove="handleRemoveUploadFile"
|
|
|
|
|
+ :on-preview="handlePreviewUploadFile"
|
|
|
|
|
+ :file-list="fileList"
|
|
|
|
|
+ multiple
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-button type="primary" icon="Upload">点击上传</el-button>
|
|
|
|
|
+ <template #tip>
|
|
|
|
|
+ <div class="el-upload__tip">支持jpg/png/xlsx等文件,单个文件不超过50MB</div>
|
|
|
</template>
|
|
</template>
|
|
|
- </el-table-column>
|
|
|
|
|
- </el-table>
|
|
|
|
|
|
|
+ </el-upload>
|
|
|
|
|
+ </el-form-item>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
</el-row>
|
|
</el-row>
|
|
|
</el-form>
|
|
</el-form>
|
|
@@ -86,15 +79,9 @@
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
-
|
|
|
|
|
- <!-- 文件选择器 -->
|
|
|
|
|
- <FileSelector v-model="fileSelectorVisible" :multiple="true" :allowed-types="[1, 2, 3, 4, 5]" title="选择发票附件" @confirm="handleFileSelected" />
|
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup name="AddInvoiceDialog" lang="ts">
|
|
<script setup name="AddInvoiceDialog" lang="ts">
|
|
|
-import { Upload } from '@element-plus/icons-vue';
|
|
|
|
|
-import FileSelector from '@/components/FileSelector/index.vue';
|
|
|
|
|
-
|
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
const { invoice_type } = toRefs<any>(proxy?.useDict('invoice_type'));
|
|
const { invoice_type } = toRefs<any>(proxy?.useDict('invoice_type'));
|
|
|
interface InvoiceForm {
|
|
interface InvoiceForm {
|
|
@@ -104,7 +91,7 @@ interface InvoiceForm {
|
|
|
invoiceAmount?: number;
|
|
invoiceAmount?: number;
|
|
|
invoiceDate?: string;
|
|
invoiceDate?: string;
|
|
|
remark?: string;
|
|
remark?: string;
|
|
|
- invoiceAttachment?: string;
|
|
|
|
|
|
|
+ invoiceAnnex?: string;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const initFormData: InvoiceForm = {
|
|
const initFormData: InvoiceForm = {
|
|
@@ -114,14 +101,14 @@ const initFormData: InvoiceForm = {
|
|
|
invoiceAmount: undefined,
|
|
invoiceAmount: undefined,
|
|
|
remark: undefined,
|
|
remark: undefined,
|
|
|
invoiceDate: undefined,
|
|
invoiceDate: undefined,
|
|
|
- invoiceAttachment: undefined
|
|
|
|
|
|
|
+ invoiceAnnex: undefined
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const formRef = ref<ElFormInstance>();
|
|
const formRef = ref<ElFormInstance>();
|
|
|
const buttonLoading = ref(false);
|
|
const buttonLoading = ref(false);
|
|
|
const form = ref<InvoiceForm>({ ...initFormData });
|
|
const form = ref<InvoiceForm>({ ...initFormData });
|
|
|
const fileList = ref<any[]>([]);
|
|
const fileList = ref<any[]>([]);
|
|
|
-const fileSelectorVisible = ref(false);
|
|
|
|
|
|
|
+const uploadAction = import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload';
|
|
|
|
|
|
|
|
const dialog = reactive<DialogOption>({
|
|
const dialog = reactive<DialogOption>({
|
|
|
visible: false,
|
|
visible: false,
|
|
@@ -152,14 +139,15 @@ const open = (data?: InvoiceForm) => {
|
|
|
Object.assign(form.value, data);
|
|
Object.assign(form.value, data);
|
|
|
|
|
|
|
|
// 解析附件地址并回显附件列表
|
|
// 解析附件地址并回显附件列表
|
|
|
- if (data.invoiceAttachment) {
|
|
|
|
|
- const urls = data.invoiceAttachment.split(',').filter((url) => url.trim());
|
|
|
|
|
|
|
+ if (data.invoiceAnnex) {
|
|
|
|
|
+ const urls = data.invoiceAnnex.split(',').filter((url) => url.trim());
|
|
|
fileList.value = urls.map((url, index) => {
|
|
fileList.value = urls.map((url, index) => {
|
|
|
const fileName = url.split('/').pop() || `附件${index + 1}`;
|
|
const fileName = url.split('/').pop() || `附件${index + 1}`;
|
|
|
return {
|
|
return {
|
|
|
name: fileName,
|
|
name: fileName,
|
|
|
url: url.trim(),
|
|
url: url.trim(),
|
|
|
- id: undefined
|
|
|
|
|
|
|
+ uid: Date.now() + index,
|
|
|
|
|
+ status: 'success'
|
|
|
};
|
|
};
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
@@ -175,39 +163,46 @@ const reset = () => {
|
|
|
formRef.value?.clearValidate();
|
|
formRef.value?.clearValidate();
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-/** 打开文件选择器 */
|
|
|
|
|
-const handleOpenFileSelector = () => {
|
|
|
|
|
- fileSelectorVisible.value = true;
|
|
|
|
|
|
|
+/** 上传前校验 */
|
|
|
|
|
+const beforeUpload = (file: any) => {
|
|
|
|
|
+ const isLt50M = file.size / 1024 / 1024 < 50;
|
|
|
|
|
+ if (!isLt50M) {
|
|
|
|
|
+ proxy?.$modal.msgWarning('上传文件大小不能超过 50MB!');
|
|
|
|
|
+ }
|
|
|
|
|
+ return isLt50M;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-/** 文件选择完成 */
|
|
|
|
|
-const handleFileSelected = (files: any[]) => {
|
|
|
|
|
- if (files && files.length > 0) {
|
|
|
|
|
- files.forEach((file) => {
|
|
|
|
|
- fileList.value.push({
|
|
|
|
|
- name: file.fileName || file.name,
|
|
|
|
|
- url: file.fileUrl || file.url,
|
|
|
|
|
- id: file.id
|
|
|
|
|
- });
|
|
|
|
|
|
|
+/** 上传成功回调 */
|
|
|
|
|
+const handleUploadSuccess = (response: any, uploadFile: any) => {
|
|
|
|
|
+ if (response.code === 200) {
|
|
|
|
|
+ uploadFile.url = response.data.url;
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ form.value.invoiceAnnex = fileList.value
|
|
|
|
|
+ .map((f) => f.url)
|
|
|
|
|
+ .filter(Boolean)
|
|
|
|
|
+ .join(',');
|
|
|
});
|
|
});
|
|
|
- form.value.invoiceAttachment = fileList.value.map((f) => f.url || f.name).join(',');
|
|
|
|
|
|
|
+ proxy?.$modal.msgSuccess('上传成功');
|
|
|
|
|
+ } else {
|
|
|
|
|
+ proxy?.$modal.msgError(response.msg || '上传失败');
|
|
|
}
|
|
}
|
|
|
- fileSelectorVisible.value = false;
|
|
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
/** 删除文件 */
|
|
/** 删除文件 */
|
|
|
-const handleRemoveFile = (index: number) => {
|
|
|
|
|
- fileList.value.splice(index, 1);
|
|
|
|
|
- form.value.invoiceAttachment = fileList.value.map((f) => f.url || f.name).join(',');
|
|
|
|
|
|
|
+const handleRemoveUploadFile = (uploadFile: any) => {
|
|
|
|
|
+ form.value.invoiceAnnex = fileList.value
|
|
|
|
|
+ .map((f) => f.url)
|
|
|
|
|
+ .filter(Boolean)
|
|
|
|
|
+ .join(',');
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
/** 预览文件 */
|
|
/** 预览文件 */
|
|
|
-const handlePreviewFile = (file: any) => {
|
|
|
|
|
- if (!file.url) {
|
|
|
|
|
|
|
+const handlePreviewUploadFile = (uploadFile: any) => {
|
|
|
|
|
+ if (uploadFile.url) {
|
|
|
|
|
+ window.open(uploadFile.url, '_blank');
|
|
|
|
|
+ } else {
|
|
|
proxy?.$modal.msgWarning('文件地址不存在');
|
|
proxy?.$modal.msgWarning('文件地址不存在');
|
|
|
- return;
|
|
|
|
|
}
|
|
}
|
|
|
- window.open(file.url, '_blank');
|
|
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
/** 提交表单 */
|
|
/** 提交表单 */
|