|
@@ -4,6 +4,8 @@
|
|
|
<template #tableTitle>
|
|
|
<a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button>
|
|
|
<a-button preIcon="ant-design:cloud-upload-outlined" type="primary" @click="handleExtract">提取</a-button>
|
|
|
+ <a-button preIcon="ant-design:vertical-align-top-outlined" type="primary" @click="handleUpload">导入</a-button>
|
|
|
+ <a-button preIcon="ant-design:vertical-align-bottom-outlined" type="primary" @click="handleDownload">导出</a-button>
|
|
|
</template>
|
|
|
<template #action="{ record }">
|
|
|
<a class="table-action-link" @click="handleEdit(record)">编辑</a>
|
|
@@ -31,8 +33,37 @@
|
|
|
</div>
|
|
|
</a-form>
|
|
|
</a-modal>
|
|
|
-
|
|
|
-
|
|
|
+<!-- 导入弹窗 -->
|
|
|
+<a-modal v-model:visible="visibleUpload" width="450px" :footer="null" :title="titleUpload" centered destroyOnClose>
|
|
|
+ <a-form :model="formStateUpload" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" autocomplete="off">
|
|
|
+ <a-form-item label="报表类型:">
|
|
|
+ <JDictSelectTag v-model:value="formStateUpload.reportType" placeholder="请选择报表类型" dictCode="reportType"
|
|
|
+ style="width: 240px" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="文件上传">
|
|
|
+ <a-upload :before-upload="beforeUpload" @remove="handleRemove" :multiple="false" :file-list="fileList">
|
|
|
+ <a-button type="primary" preIcon="ant-design:cloud-upload-outlined">选择文件</a-button>
|
|
|
+ </a-upload>
|
|
|
+ </a-form-item>
|
|
|
+ <div class="opertion-btn">
|
|
|
+ <a-button type="primary" @click="confirmUpload">确定</a-button>
|
|
|
+ <a-button type="success" style="margin-left:10px" @click="cancelUpload">取消</a-button>
|
|
|
+ </div>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+ <!-- 导出弹窗 -->
|
|
|
+ <a-modal v-model:visible="visibleDown" width="450px" :footer="null" :title="titleDown" centered destroyOnClose>
|
|
|
+ <a-form :model="formStateDown" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" autocomplete="off">
|
|
|
+ <a-form-item label="报表类型:">
|
|
|
+ <JDictSelectTag v-model:value="formStateDown.reportType" placeholder="请选择报表类型" dictCode="reportType"
|
|
|
+ style="width: 240px" />
|
|
|
+ </a-form-item>
|
|
|
+ <div class="opertion-btn">
|
|
|
+ <a-button type="primary" @click="confirmDownload">确定</a-button>
|
|
|
+ <a-button type="success" style="margin-left:10px" @click="cancelDownload">取消</a-button>
|
|
|
+ </div>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -45,6 +76,7 @@ import { useModal } from '/@/components/Modal';
|
|
|
import DeviceModal from './DeviceModal.vue';
|
|
|
import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
import { useListPage } from '/@/hooks/system/useListPage';
|
|
|
+import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
|
|
|
const props = defineProps({
|
|
|
columnsType: {
|
|
@@ -72,6 +104,14 @@ const props = defineProps({
|
|
|
type: Function,
|
|
|
required: true,
|
|
|
},
|
|
|
+ getImportUrl: {
|
|
|
+ type: Function,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ getExportUrl: {
|
|
|
+ type: Function,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
deleteById: {
|
|
|
type: Function,
|
|
|
required: true,
|
|
@@ -99,7 +139,7 @@ const props = defineProps({
|
|
|
});
|
|
|
|
|
|
const emit = defineEmits(['submitSuccess', 'editHandler']);
|
|
|
-
|
|
|
+const { createMessage } = useMessage();
|
|
|
let visibleTq = ref(false)//控制手动提取弹窗的显示与隐藏
|
|
|
let titleTq = ref('提取信息')
|
|
|
let formStateTq = reactive({
|
|
@@ -108,7 +148,20 @@ let formStateTq = reactive({
|
|
|
const isUpdate = ref(false);
|
|
|
const record = reactive({});
|
|
|
const formSchemaData = ref(props.formSchema);
|
|
|
+//导入弹窗信息
|
|
|
+const visibleUpload=ref(false)
|
|
|
+const titleUpload=ref('导入')
|
|
|
+let formStateUpload=reactive({
|
|
|
+ reportType:'',
|
|
|
+})
|
|
|
+let fileList = reactive<any[]>([]); //上传文件列表
|
|
|
|
|
|
+//导出弹窗信息
|
|
|
+let visibleDown=ref(false)
|
|
|
+let titleDown=ref('导出')
|
|
|
+let formStateDown=reactive({
|
|
|
+ reportType:''
|
|
|
+})
|
|
|
watch(
|
|
|
() => props.formSchema,
|
|
|
(val) => {
|
|
@@ -126,7 +179,7 @@ const [registerModal, { openModal, closeModal }] = useModal();
|
|
|
const columnList = getTableHeaderColumns(props.columnsType);
|
|
|
|
|
|
// 列表页面公共参数、方法
|
|
|
-const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useListPage({
|
|
|
+const { prefixCls, tableContext, doRequest } = useListPage({
|
|
|
designScope: props.designScope,
|
|
|
tableProps: {
|
|
|
title: props.title,
|
|
@@ -158,13 +211,6 @@ const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useList
|
|
|
// return Object.assign(params, { column: 'createTime', devicekind: props.deviceType });
|
|
|
// },
|
|
|
},
|
|
|
- // exportConfig: {
|
|
|
- // name: props.title,
|
|
|
- // url: props.getExportUrl,
|
|
|
- // },
|
|
|
- // importConfig: {
|
|
|
- // url: props.getImportUrl,
|
|
|
- // },
|
|
|
});
|
|
|
|
|
|
//注册table数据
|
|
@@ -232,6 +278,81 @@ function cancelTq() {
|
|
|
formStateTq.reportType = ''
|
|
|
visibleTq.value = false
|
|
|
}
|
|
|
+//打开导入弹窗
|
|
|
+function handleUpload(){
|
|
|
+visibleUpload.value=true
|
|
|
+formStateUpload.reportType=''
|
|
|
+fileList.length=0
|
|
|
+}
|
|
|
+ //上传文件
|
|
|
+ let beforeUpload = (file) => {
|
|
|
+ fileList.length = 0;
|
|
|
+ let index = file.name.indexOf('.');
|
|
|
+ let name = file.name.substring(index + 1);
|
|
|
+ if (name == 'png' || name == 'jpg' || name == 'gif' || name == 'psd' || name == 'webp') {
|
|
|
+ createMessage.warning('禁止上传图片类型的文件!');
|
|
|
+ } else {
|
|
|
+ fileList.push(file);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ // 文件移除
|
|
|
+ let handleRemove = (file) => {
|
|
|
+ const index = fileList.indexOf(file);
|
|
|
+ const newFileList = fileList.slice();
|
|
|
+ newFileList.splice(index, 1);
|
|
|
+ fileList.length = 0;
|
|
|
+ };
|
|
|
+ //确定上传
|
|
|
+ async function confirmUpload(){
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', fileList[0]);
|
|
|
+ formData.append('reportType', formStateUpload.reportType);
|
|
|
+ await props.getImportUrl(formData, reload);
|
|
|
+ visibleUpload.value=false
|
|
|
+
|
|
|
+ }
|
|
|
+ //取消上传
|
|
|
+ function cancelUpload(){
|
|
|
+visibleUpload.value=false
|
|
|
+formStateUpload.reportType=''
|
|
|
+ }
|
|
|
+ //打开导出弹窗
|
|
|
+ function handleDownload(){
|
|
|
+ visibleDown.value=true
|
|
|
+ formStateDown.reportType=''
|
|
|
+ }
|
|
|
+ //确定导出
|
|
|
+ async function confirmDownload(){
|
|
|
+ let res=await props.getExportUrl({reportType:formStateDown.reportType})
|
|
|
+ let filename = `${new Date().getTime()}.xlsx`;
|
|
|
+ downFilePublic(res, filename);
|
|
|
+ visibleDown.value=false
|
|
|
+ }
|
|
|
+ // 下载公用方法
|
|
|
+function downFilePublic(content, fileName) {
|
|
|
+ const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
|
|
|
+ // 对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
|
|
|
+ // IE10以上支持blob但是依然不支持download
|
|
|
+ if ('download' in document.createElement('a')) {
|
|
|
+ // 支持a标签download的浏览器
|
|
|
+ const link = document.createElement('a'); // 创建a标签
|
|
|
+ link.download = fileName; // a标签添加属性
|
|
|
+ link.style.display = 'none';
|
|
|
+ link.href = URL.createObjectURL(blob);
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click(); // 执行下载
|
|
|
+ URL.revokeObjectURL(link.href); // 释放url
|
|
|
+ document.body.removeChild(link); // 释放标签
|
|
|
+ } else {
|
|
|
+ // 其他浏览器
|
|
|
+ navigator.msSaveBlob(blob, fileName);
|
|
|
+ }
|
|
|
+}
|
|
|
+ //取消导出
|
|
|
+ function cancelDownload(){
|
|
|
+ visibleDown.value=false
|
|
|
+ formStateDown.reportType=''
|
|
|
+ }
|
|
|
/**
|
|
|
* 操作列定义
|
|
|
* @param record
|
|
@@ -258,8 +379,6 @@ function getActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
|
|
|
|
|
|
defineExpose({
|
|
|
doRequest,
|
|
|
- onExportXls,
|
|
|
- onImportXls,
|
|
|
reload,
|
|
|
getForm,
|
|
|
});
|