<template>
|
<BaseCard
|
size="small"
|
direction="top-left"
|
borderless="t"
|
v-loading="loading"
|
>
|
<template #content>
|
<div class="download">
|
<el-button
|
@click="downloadTemplate"
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
>下载模板</el-button
|
>
|
</div>
|
<el-form :model="formInfo" :rules="rules" ref="formRef">
|
<el-form-item label="时间" prop="dateTime">
|
<el-date-picker
|
v-model="formInfo.dateTime"
|
type="date"
|
placeholder="选择时间"
|
size="small"
|
/>
|
</el-form-item>
|
<el-form-item label="">
|
<label
|
><el-checkbox
|
v-model="formInfo.update"
|
label=""
|
size="small"
|
/>覆盖旧数据</label
|
>
|
</el-form-item>
|
<el-form-item>
|
<el-upload
|
v-model:file-list="formInfo.file"
|
accept=".xlsx"
|
:limit="1"
|
:auto-upload="false"
|
>
|
<el-button
|
:disabled="!formInfo.dateTime && !formInfo.groupId"
|
type="primary"
|
class="el-button-custom select-file-button"
|
size="small"
|
>选择文件</el-button
|
>
|
</el-upload>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button
|
@click="handleImportClick"
|
type="primary"
|
class="el-button-custom import-button"
|
size="small"
|
>
|
导入
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</template>
|
</BaseCard>
|
</template>
|
<script>
|
import gridApi from '@/api/gridApi';
|
import { dayjs, ElMessage } from 'element-plus';
|
export default {
|
props: {
|
gridGroup: {
|
type: Object,
|
default: () => {}
|
}
|
},
|
emits: ['submit'],
|
methods: {
|
downloadTemplate() {
|
gridApi.downloadTemplate();
|
},
|
handleImportClick() {
|
this.$refs.formRef.validate((valid) => {
|
if (valid) {
|
this.loading = true;
|
const isUpdate = this.formInfo.update ? 1 : 0;
|
const type = 0;
|
|
const formData = new FormData();
|
// 文件转换为二进制
|
const reader = new FileReader();
|
reader.readAsArrayBuffer(this.formInfo.file[0].raw);
|
reader.onload = async (theFile) => {
|
const binary = new Blob([theFile.target.result], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
|
formData.append('excel', binary);
|
formData.append('groupId', this.gridGroup.id);
|
formData.append('type', type);
|
formData.append(
|
'dateTime',
|
dayjs(this.formInfo.dateTime).format('YYYY-MM-DD HH:mm:ss')
|
);
|
formData.append('update', isUpdate);
|
gridApi
|
.importData(formData)
|
.then((res) => {
|
this.loading = false;
|
if (res && res.data.success) {
|
// 导入成功，触发父组件刷新事件
|
this.$emit('submit');
|
ElMessage({
|
message: res.data.result,
|
type: 'success'
|
});
|
} else {
|
ElMessage({
|
message: res.data.result,
|
type: 'warning'
|
});
|
}
|
})
|
};
|
}
|
});
|
}
|
},
|
data() {
|
return {
|
loading: false,
|
formInfo: {
|
dateTime: undefined,
|
groupId: undefined,
|
update: false,
|
file: []
|
},
|
rules: {
|
dateTime: [{ required: true, message: '时间不能为空', trigger: 'blur' }]
|
}
|
};
|
}
|
};
|
</script>
|
<style scoped>
|
.download {
|
display: flex;
|
justify-content: flex-end;
|
}
|
.select-file-button {
|
margin-left: 5px;
|
}
|
.import-button {
|
margin-left: 5px;
|
margin-top: -7px;
|
}
|
::v-deep .el-upload-list__item-file-name {
|
max-width: 50% !important;
|
}
|
</style>
|
