+
将文件拖到此处，或
点击上传
-
只能上传xls/xlsx文件，且不超过5Mb
+
+ 只能上传xls/xlsx文件，且不超过5Mb
+
-
+
更多设置
🤟
👇
-
+
自动识别姓名
全部导入
@@ -56,7 +72,11 @@
-
+
是
否
@@ -64,8 +84,16 @@
-
-
+
+
@@ -92,8 +120,8 @@ export default {
dataSourceImportDisabled: {
type: Boolean,
require: true,
- default: false
- }
+ default: false,
+ },
},
components: { DataSourceImportDialog },
data() {
@@ -102,7 +130,7 @@ export default {
formData: {
dataSourceImportModel: "0",
titleRowNum: 1,
- removeRepeat: "1"
+ removeRepeat: "1",
},
// 表单校验
formRules: {},
@@ -113,11 +141,23 @@ export default {
// 弹窗显示
dialogVisible: false,
// 导入数据预览
- dataSourcePreview: []
+ 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();
// 单数星期黑猫，双数星期白猫
@@ -139,6 +179,7 @@ export default {
if (response.success) {
this.dataSourceFileList = fileList;
this.dataSourcePreview = response.data;
+ this.$store.commit("setDataSourcePreview", this.dataSourcePreview);
this.dialogVisible = true;
this.$message.success("姓名导入成功");
} else {
@@ -175,8 +216,8 @@ export default {
},
scrollIntoTemplateImport() {
this.$emit("scrollIntoTemplateImport");
- }
- }
+ },
+ },
};
diff --git a/src/components/gmhExcel/DataSourceImportDialog.vue b/src/components/gmhExcel/DataSourceImportDialog.vue
index f128320..1101e29 100644
--- a/src/components/gmhExcel/DataSourceImportDialog.vue
+++ b/src/components/gmhExcel/DataSourceImportDialog.vue
@@ -9,28 +9,69 @@
:name="item.index"
>
-
-
-
-
+
+
+
+
-
-
+
+
- {{item.sheetName}} 一共有{{item.nameList.length}}个人，请检查一下对不对
- 有{{item.repeatCount}}个重复的帮你去掉了
+ {{ item.sheetName }} 一共有{{
+ item.nameList.length
+ }}个人，请检查一下对不对
+ 有{{ item.repeatCount }}个重复的帮你去掉了
@@ -41,26 +82,28 @@ export default {
props: {
// 导入数据源数据预览
dataSourcePreview: {
- type: Array
+ type: Array,
},
// 是否显示
dialogVisible: {
type: Boolean,
require: true,
- default: false
+ default: false,
},
dataSourceImportDisabled: {
- type: Boolean
- }
+ type: Boolean,
+ },
},
components: {},
data() {
return {
// 所选中的tab
- activeName: ""
+ activeName: "",
};
},
computed: {},
+ mounted() {
+ },
watch: {},
methods: {
handleClick(val) {},
@@ -68,7 +111,7 @@ export default {
this.$confirm("请确认名单是否正确?", "提示", {
confirmButtonText: "没毛病",
cancelButtonText: "有问题",
- type: "warning"
+ type: "warning",
})
.then(() => {
this.closeDialog();
@@ -76,14 +119,14 @@ export default {
this.$notify({
title: "成功",
message: "名单已经导入成功了，接下来你可以导入模板了",
- type: "success"
+ type: "success",
});
this.$emit("scrollIntoTemplateImport");
})
.catch(() => {
this.$message({
type: "info",
- message: "有问题就改"
+ message: "有问题就改",
});
});
},
@@ -99,16 +142,16 @@ export default {
this.dataSourcePreview[this.activeName].sheetName
}.name}`;
this.$copyText(expr)
- .then(res => {
+ .then((res) => {
console.log("SUCCESS: copy arguments e:", res);
this.$message.success("复制成功！表达式：" + expr);
})
- .catch(err => {
+ .catch((err) => {
console.log("ERR: copy arguments e:", err);
this.$message.error("复制失败，请重试");
});
- }
- }
+ },
+ },
};
diff --git a/src/components/gmhExcel/ImportSteps.vue b/src/components/gmhExcel/ImportSteps.vue
index 0cd3d8f..47efeb2 100644
--- a/src/components/gmhExcel/ImportSteps.vue
+++ b/src/components/gmhExcel/ImportSteps.vue
@@ -2,7 +2,9 @@
- 导入名单🐸
+ 导入名单🐸
@@ -17,8 +19,8 @@ export default {
active: {
type: Number,
require: true,
- default: 0
- }
+ default: 0,
+ },
},
components: {},
data() {
@@ -28,9 +30,9 @@ export default {
watch: {},
methods: {
importClick() {
- this.$message.success("success");
- }
- }
+ this.$bus.$emit("openImportDialog");
+ },
+ },
};
diff --git a/src/components/gmhExcel/SuggestDialog.vue b/src/components/gmhExcel/SuggestDialog.vue
new file mode 100644
index 0000000..17bcab3
--- /dev/null
+++ b/src/components/gmhExcel/SuggestDialog.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/gmhExcel/TemplateImport.vue b/src/components/gmhExcel/TemplateImport.vue
index b32ee25..ee56995 100644
--- a/src/components/gmhExcel/TemplateImport.vue
+++ b/src/components/gmhExcel/TemplateImport.vue
@@ -11,16 +11,25 @@
:rules="rules"
:disabled="templateImportDisabled"
>
-
+
模板设置
🤟
👇
-
+
+
+
+
+
+ 表达式
+ {{ `@{${item.sheetName}.name}` }} 就代表以下的这些名字
+
+
+
+
+
+
+ {{ item.sheetName }}
+
+
+
💨替换后的数据：
-
+
- 生成Excel
+ ①生成Excel
- 去下载文件
+ ②去下载文件
@@ -114,8 +178,8 @@ export default {
templateImportDisabled: {
type: Boolean,
require: true,
- default: false
- }
+ default: false,
+ },
},
components: {},
data() {
@@ -125,17 +189,18 @@ export default {
templateSheetNum: 1,
cellNum: "",
cellData: "",
- newCellData: ""
+ newCellData: "",
},
rules: {
cellNum: [
- { required: true, message: "请输入单元格编号", trigger: "blur" }
- ]
+ { required: true, message: "请输入单元格编号", trigger: "blur" },
+ ],
},
templateFileList: [],
cellSearchDisable: false,
resultExcelName: "",
- moreSetting: false
+ moreSetting: false,
+ allowDownload: false,
};
},
computed: {},
@@ -160,13 +225,16 @@ export default {
this.$message.error(err);
},
cellNumSearch() {
+ if (this.templateFileList.length == 0) {
+ return this.$message.error("宝子，您还没有上传模板文件呢");
+ }
this.$axios
.get("/api/excel/cellNumSearch", {
params: {
- cellRowStr: this.formData.cellNum
- }
+ cellRowStr: this.formData.cellNum,
+ },
})
- .then(res => {
+ .then((res) => {
const { data } = res;
if (data.success) {
this.$message.success("单元格数据获取成功");
@@ -176,7 +244,7 @@ export default {
this.formData.cellData = "";
}
})
- .catch(err => {
+ .catch((err) => {
console.log(err);
});
},
@@ -197,24 +265,25 @@ export default {
if (this.templateFileList.length == 0) {
return this.$message.error("宝子，您还没有上传模板文件呢");
}
- this.$refs["$form"].validate(valid => {
+ this.$refs["$form"].validate((valid) => {
if (valid) {
this.$axios
.post("/api/excel/executeTemplate", {
newCellData: this.formData.newCellData,
cellRowStr: this.formData.cellNum,
- resultExcelName: this.formData.resultExcelName
+ resultExcelName: this.formData.resultExcelName,
})
- .then(res => {
+ .then((res) => {
const { data } = res;
if (data.success) {
this.$emit("setStep", 2);
this.$message.success("Excel处理完成");
+ this.allowDownload = true;
} else {
this.$message.error(data.msg);
}
})
- .catch(err => {
+ .catch((err) => {
console.log(err);
});
} else {
@@ -226,7 +295,7 @@ export default {
gotoDownload() {
this.$axios
.get("/api/excel/gotoDownload")
- .then(res => {
+ .then((res) => {
const { data } = res;
if (data.success) {
this.$emit("setStep", 3);
@@ -234,13 +303,31 @@ export default {
this.$message.error(data.msg);
}
})
- .catch(err => {
+ .catch((err) => {
console.log(err);
});
- }
+ },
+ copyExpr(sheetName) {
+ const expr = `@{${sheetName}.name}`;
+ this.$copyText(expr)
+ .then((res) => {
+ console.log("SUCCESS: copy arguments e:", res);
+ this.$message.success("复制成功！表达式：" + expr);
+ this.$notify({
+ title: "复制成功" + expr,
+ message: "您现在可以把表达式放在名字的位置，用于替换姓名",
+ type: "success",
+ position: "bottom-right",
+ });
+ })
+ .catch((err) => {
+ console.log("ERR: copy arguments e:", err);
+ this.$message.error("复制失败，请重试");
+ });
+ },
},
created() {},
- mounted() {}
+ mounted() {},
};
diff --git a/src/components/gmhExcel/index.vue b/src/components/gmhExcel/index.vue
index 767bf46..c794e51 100644
--- a/src/components/gmhExcel/index.vue
+++ b/src/components/gmhExcel/index.vue
@@ -1,5 +1,35 @@
@@ -30,7 +64,8 @@ export default {
components: { ImportSteps, DataSourceImport, TemplateImport, ExcelDownload },
data() {
return {
- activeStep: 0
+ activeStep: 0,
+ suggestShow: false,
};
},
created() {
@@ -41,10 +76,10 @@ export default {
test() {
this.$axios
.get("/api/test/test")
- .then(res => {
+ .then((res) => {
const { data } = res;
})
- .catch(err => {
+ .catch((err) => {
console.log(err);
});
},
@@ -55,7 +90,7 @@ export default {
window.scroll({
top: document.body.clientHeight,
left: 0,
- behavior: "smooth"
+ behavior: "smooth",
});
}, 500);
}
@@ -63,10 +98,15 @@ export default {
scrollIntoTemplateImport() {
setTimeout(() => {
document.getElementById("templateImport").scrollIntoView({
- behavior: "smooth"
+ behavior: "smooth",
});
}, 500);
- }
+ },
+ openNewWindow() {
+ window.open(
+ "https://chen-test-01-img.oss-cn-beijing.aliyuncs.com/video/gmh-guide.mp4"
+ );
+ },
},
computed: {
// 数据源导入disabled
@@ -76,8 +116,8 @@ export default {
// 模板导入disabled
templateImportDisabled() {
return this.activeStep == 3;
- }
- }
+ },
+ },
};
@@ -110,4 +150,16 @@ export default {
position: fixed;
top: 10px;
}
+.video-guide {
+ position: fixed;
+ bottom: 30%;
+ right: 2%;
+ z-index: 999;
+}
+.suggest-btn {
+ position: fixed;
+ bottom: 36%;
+ right: 2%;
+ z-index: 999;
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index fb17df0..b08a271 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,14 +7,23 @@ import 'element-ui/lib/theme-chalk/index.css';
import VueClipBoard from 'vue-clipboard2'
import axios from 'axios'
+import VueTour from 'vue-tour'
+
+require('vue-tour/dist/vue-tour.css')
+
+Vue.use(VueTour)
Vue.config.productionTip = false
Vue.prototype.$axios = axios
+// Vue.prototype.$bus = new Vue() // 安装事件总线方式一
Vue.use(ElementUI);
Vue.use(VueClipBoard);
new Vue({
+ beforeCreate() {
+ Vue.prototype.$bus = this // 安装事件总线方式二
+ },
router,
store,
render: h => h(App)
diff --git a/src/store/index.js b/src/store/index.js
index ceffa8e..5737b8b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -5,10 +5,14 @@ Vue.use(Vuex)
export default new Vuex.Store({
state: {
+ dataSourcePreview: []
},
getters: {
},
mutations: {
+ setDataSourcePreview(state, param) {
+ state.dataSourcePreview = param
+ }
},
actions: {
},