|
|
<template>
|
|
|
<!-- 数据源导入 -->
|
|
|
<div>
|
|
|
<el-card class="box-card bottom-10 m-t-125px">
|
|
|
<div slot="header" class="clearfix">
|
|
|
<span>1️⃣导入名单</span>
|
|
|
<el-button
|
|
|
style="float: right; padding: 3px 0"
|
|
|
type="text"
|
|
|
@click="showCat"
|
|
|
>🐱</el-button
|
|
|
>
|
|
|
</div>
|
|
|
|
|
|
<el-form
|
|
|
ref="$form"
|
|
|
:model="formData"
|
|
|
label-position="top"
|
|
|
label-width="100px"
|
|
|
:rules="formRules"
|
|
|
:disabled="dataSourceImportDisabled"
|
|
|
>
|
|
|
<el-form-item prop="upload" label="📖名单上传：">
|
|
|
<el-upload
|
|
|
drag
|
|
|
:action="`/api/excel/dataSourceImport?dataSourceImportModel=${formData.dataSourceImportModel}&removeRepeat=${formData.removeRepeat}`"
|
|
|
:multiple="false"
|
|
|
:on-preview="uploadPreview"
|
|
|
:on-remove="uploadRemove"
|
|
|
:on-success="uploadSuccess"
|
|
|
:on-error="uploadError"
|
|
|
:on-progress="uploadProgress"
|
|
|
:on-change="uploadChange"
|
|
|
:before-upload="uploadBefore"
|
|
|
:before-remove="uploadBeforeRemove"
|
|
|
:on-exceed="uploadOnExceed"
|
|
|
:file-list="dataSourceFileList"
|
|
|
:limit="1"
|
|
|
accept=".xls, .xlsx"
|
|
|
>
|
|
|
<!-- <el-button type="primary" size="small">点击上传📃</el-button> -->
|
|
|
<i class="el-icon-upload"></i>
|
|
|
<div class="el-upload__text" id="step1-upload">
|
|
|
将文件拖到此处，或
|
|
|
<em>点击上传</em>
|
|
|
</div>
|
|
|
<div class="el-upload__tip" slot="tip">
|
|
|
只能上传xls/xlsx文件，且不超过5Mb
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</el-form-item>
|
|
|
<el-button
|
|
|
size="medium"
|
|
|
type="text"
|
|
|
@click="moreSetting = !moreSetting"
|
|
|
:disabled="false"
|
|
|
>
|
|
|
更多设置
|
|
|
<span v-if="moreSetting">🤟</span>
|
|
|
<span v-else>👇</span>
|
|
|
</el-button>
|
|
|
<el-collapse-transition>
|
|
|
<el-form-item
|
|
|
prop="templateSheetNum"
|
|
|
label="⚙️模式："
|
|
|
v-if="moreSetting"
|
|
|
>
|
|
|
<el-radio-group v-model="formData.dataSourceImportModel">
|
|
|
<el-radio label="0">自动识别姓名</el-radio>
|
|
|
<el-radio label="1">全部导入</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
</el-collapse-transition>
|
|
|
<el-collapse-transition>
|
|
|
<el-form-item
|
|
|
prop="removeRepeat"
|
|
|
label="⚙️是否自动去除重复的数据："
|
|
|
v-if="moreSetting"
|
|
|
>
|
|
|
<el-radio-group v-model="formData.removeRepeat">
|
|
|
<el-radio label="1">是</el-radio>
|
|
|
<el-radio label="0">否</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
</el-collapse-transition>
|
|
|
<el-collapse-transition>
|
|
|
<el-form-item
|
|
|
prop="titleRowNum"
|
|
|
label="🏷️表头所在行："
|
|
|
v-if="moreSetting"
|
|
|
v-show="false"
|
|
|
>
|
|
|
<el-input-number
|
|
|
v-model="formData.titleRowNum"
|
|
|
style="width: 200px"
|
|
|
></el-input-number>
|
|
|
</el-form-item>
|
|
|
</el-collapse-transition>
|
|
|
</el-form>
|
|
|
</el-card>
|
|
|
<!-- 数据预览弹窗 -->
|
|
|
<DataSourceImportDialog
|
|
|
:dialogVisible="dialogVisible"
|
|
|
:dataSourcePreview="dataSourcePreview"
|
|
|
@closeDialog="closeDialog"
|
|
|
@setStep="setStep"
|
|
|
@scrollIntoTemplateImport="scrollIntoTemplateImport"
|
|
|
:dataSourceImportDisabled="dataSourceImportDisabled"
|
|
|
></DataSourceImportDialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import DataSourceImportDialog from "@/components/gmhExcel/DataSourceImportDialog";
|
|
|
import { showLoading, hideLoading } from "@/utils/loading";
|
|
|
|
|
|
export default {
|
|
|
name: "DataSourceImport",
|
|
|
props: {
|
|
|
dataSourceImportDisabled: {
|
|
|
type: Boolean,
|
|
|
require: true,
|
|
|
default: false,
|
|
|
},
|
|
|
},
|
|
|
components: { DataSourceImportDialog },
|
|
|
data() {
|
|
|
return {
|
|
|
// 表单数据
|
|
|
formData: {
|
|
|
dataSourceImportModel: "0",
|
|
|
titleRowNum: 1,
|
|
|
removeRepeat: "1",
|
|
|
},
|
|
|
// 表单校验
|
|
|
formRules: {},
|
|
|
// 数据源文件上传列表
|
|
|
dataSourceFileList: [],
|
|
|
// 更多设置显示开关
|
|
|
moreSetting: false,
|
|
|
// 弹窗显示
|
|
|
dialogVisible: false,
|
|
|
// 导入数据预览
|
|
|
dataSourcePreview: [],
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
watch: {},
|
|
|
mounted() {
|
|
|
this.$bus.$on("openImportDialog", () => {
|
|
|
if (
|
|
|
this.dataSourcePreview == null ||
|
|
|
this.dataSourcePreview.length == 0
|
|
|
) {
|
|
|
this.$message.warning("名单还没导入呢");
|
|
|
} else {
|
|
|
this.dialogVisible = true;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
created() {
|
|
|
const week = new Date().getDay();
|
|
|
// 单数星期黑猫，双数星期白猫
|
|
|
const jsonPath =
|
|
|
week % 2 == 0
|
|
|
? "chendahaha/live2D/live2d-widget-model-tororo/assets/tororo.model.json"
|
|
|
: "chendahaha/live2D/live2d-widget-model-hijiki/assets/hijiki.model.json";
|
|
|
catConfig.model.jsonPath = jsonPath;
|
|
|
},
|
|
|
methods: {
|
|
|
closeDialog() {
|
|
|
this.dialogVisible = false;
|
|
|
},
|
|
|
uploadPreview(file) {
|
|
|
this.dialogVisible = true;
|
|
|
},
|
|
|
uploadRemove(file, fileList) {},
|
|
|
uploadSuccess(response, file, fileList) {
|
|
|
if (response.success) {
|
|
|
this.dataSourceFileList = fileList;
|
|
|
this.dataSourcePreview = response.data;
|
|
|
this.$store.commit("setDataSourcePreview", this.dataSourcePreview);
|
|
|
this.dialogVisible = true;
|
|
|
this.$message.success("姓名导入成功");
|
|
|
} else {
|
|
|
this.$message.error(response.msg);
|
|
|
}
|
|
|
hideLoading();
|
|
|
},
|
|
|
uploadError(err, file, fileList) {
|
|
|
hideLoading();
|
|
|
this.dataSourceFileList = fileList;
|
|
|
this.$message.error(err);
|
|
|
},
|
|
|
uploadProgress(event, file, fileList) {},
|
|
|
uploadChange(file, fileList) {},
|
|
|
uploadBefore(file) {
|
|
|
showLoading();
|
|
|
},
|
|
|
uploadBeforeRemove(file, fileList) {},
|
|
|
uploadOnExceed(files, fileList) {
|
|
|
this.$message.warning("只允许上传一个文件，想更换文件请先删除再重新上传");
|
|
|
},
|
|
|
// step组件进行下一步
|
|
|
setStep(val) {
|
|
|
this.$emit("setStep", val);
|
|
|
},
|
|
|
showCat() {
|
|
|
let path = catConfig.model.jsonPath;
|
|
|
if (path.includes("chendahaha")) {
|
|
|
catConfig.model.jsonPath = path.replace("chendahaha", "");
|
|
|
} else {
|
|
|
catConfig.model.jsonPath = "chendahaha" + catConfig.model.jsonPath;
|
|
|
}
|
|
|
initCat();
|
|
|
},
|
|
|
scrollIntoTemplateImport() {
|
|
|
this.$emit("scrollIntoTemplateImport");
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
.transition-box {
|
|
|
margin-bottom: 10px;
|
|
|
width: 200px;
|
|
|
height: 100px;
|
|
|
border-radius: 4px;
|
|
|
background-color: #409eff;
|
|
|
text-align: center;
|
|
|
color: #fff;
|
|
|
padding: 40px 20px;
|
|
|
box-sizing: border-box;
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
</style>
|
