代码完善

master
chenda 2 years ago
parent 3fb149c4bf
commit 21704aa644

49
package-lock.json generated

@ -14,6 +14,7 @@
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-clipboard2": "^0.3.3", "vue-clipboard2": "^0.3.3",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vue-tour": "^2.0.0",
"vuex": "^3.6.2" "vuex": "^3.6.2"
}, },
"devDependencies": { "devDependencies": {
@ -1845,6 +1846,11 @@
"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
"dev": true "dev": true
}, },
"node_modules/@popperjs/core": {
"version": "2.11.6",
"resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.6.tgz",
"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
},
"node_modules/@sideway/address": { "node_modules/@sideway/address": {
"version": "4.1.4", "version": "4.1.4",
"resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz", "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
@ -5354,8 +5360,7 @@
"node_modules/hash-sum": { "node_modules/hash-sum": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-2.0.0.tgz", "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-2.0.0.tgz",
"integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==", "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg=="
"dev": true
}, },
"node_modules/he": { "node_modules/he": {
"version": "1.2.0", "version": "1.2.0",
@ -5952,6 +5957,11 @@
"graceful-fs": "^4.1.6" "graceful-fs": "^4.1.6"
} }
}, },
"node_modules/jump.js": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/jump.js/-/jump.js-1.0.2.tgz",
"integrity": "sha512-oUkJJ/Y4ATU5qjkXBntCZSKctbSyS3ewe2jrLaUu/cc9jsQiAn0fnTUxQnZz3mJdDdem1Q279zrD6h3n+Cgxtg=="
},
"node_modules/kind-of": { "node_modules/kind-of": {
"version": "6.0.3", "version": "6.0.3",
"resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz", "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz",
@ -9338,6 +9348,17 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true "dev": true
}, },
"node_modules/vue-tour": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/vue-tour/-/vue-tour-2.0.0.tgz",
"integrity": "sha512-vhKzqdhunQ3EoO1733UxhOB389u3EKv2X8JqYhX4tIq4ilqlZtnY3azPFBYPFmnAqHn5RyZBrP2CpqSaxTs8og==",
"dependencies": {
"@popperjs/core": "^2.9.1",
"hash-sum": "^2.0.0",
"jump.js": "^1.0.2",
"vue": "^2.6.12"
}
},
"node_modules/vuex": { "node_modules/vuex": {
"version": "3.6.2", "version": "3.6.2",
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz", "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
@ -11225,6 +11246,11 @@
"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
"dev": true "dev": true
}, },
"@popperjs/core": {
"version": "2.11.6",
"resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.6.tgz",
"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
},
"@sideway/address": { "@sideway/address": {
"version": "4.1.4", "version": "4.1.4",
"resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz", "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
@ -14111,8 +14137,7 @@
"hash-sum": { "hash-sum": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-2.0.0.tgz", "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-2.0.0.tgz",
"integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==", "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg=="
"dev": true
}, },
"he": { "he": {
"version": "1.2.0", "version": "1.2.0",
@ -14581,6 +14606,11 @@
"universalify": "^2.0.0" "universalify": "^2.0.0"
} }
}, },
"jump.js": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/jump.js/-/jump.js-1.0.2.tgz",
"integrity": "sha512-oUkJJ/Y4ATU5qjkXBntCZSKctbSyS3ewe2jrLaUu/cc9jsQiAn0fnTUxQnZz3mJdDdem1Q279zrD6h3n+Cgxtg=="
},
"kind-of": { "kind-of": {
"version": "6.0.3", "version": "6.0.3",
"resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz", "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz",
@ -17220,6 +17250,17 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true "dev": true
}, },
"vue-tour": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/vue-tour/-/vue-tour-2.0.0.tgz",
"integrity": "sha512-vhKzqdhunQ3EoO1733UxhOB389u3EKv2X8JqYhX4tIq4ilqlZtnY3azPFBYPFmnAqHn5RyZBrP2CpqSaxTs8og==",
"requires": {
"@popperjs/core": "^2.9.1",
"hash-sum": "^2.0.0",
"jump.js": "^1.0.2",
"vue": "^2.6.12"
}
},
"vuex": { "vuex": {
"version": "3.6.2", "version": "3.6.2",
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz", "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",

@ -13,6 +13,7 @@
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-clipboard2": "^0.3.3", "vue-clipboard2": "^0.3.3",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vue-tour": "^2.0.0",
"vuex": "^3.6.2" "vuex": "^3.6.2"
}, },
"devDependencies": { "devDependencies": {

@ -1,6 +1,7 @@
<template> <template>
<div id="app"> <div id="app">
<gmh-excel></gmh-excel> <gmh-excel></gmh-excel>
<!-- <v-tour name="myTour" :steps="steps" :options="myOptions"></v-tour> -->
</div> </div>
</template> </template>
@ -9,11 +10,42 @@ import GmhExcel from "@/components/gmhExcel";
export default { export default {
components: { components: {
GmhExcel GmhExcel,
}, },
data() { data() {
return { return {
name: "hh" myOptions: {
useKeyboardNavigation: false, // , ESC
labels: {
//
buttonSkip: "跳过指引", //
buttonPrevious: "上一步", //
buttonNext: "下一步", //
buttonStop: "我知道了", //
},
highlight: false, // target
},
steps: [
{
target: "#step1-upload",
header: {
title: "第一步",
},
content: `在这里上传 <strong>名单文件</strong>!`,
},
// {
// target: ".v-step-1",
// content: "An awesome plugin made with Vue.js!",
// },
// {
// target: '[data-v-step="2"]',
// content:
// "Try it, you'll love it!<br>You can put HTML in the steps and completely customize the DOM to suit your needs.",
// params: {
// placement: "top", // Any valid Popper.js placement. See https://popper.js.org/popper-documentation.html#Popper.placements
// },
// },
],
}; };
}, },
created() { created() {
@ -22,8 +54,10 @@ export default {
document.getElementById("loading-bg").remove(); document.getElementById("loading-bg").remove();
} }
}, },
mounted() {}, mounted() {
methods: {} this.$tours["myTour"].start();
},
methods: {},
}; };
</script> </script>

@ -4,7 +4,12 @@
<el-card class="box-card bottom-10 m-t-125px"> <el-card class="box-card bottom-10 m-t-125px">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>1导入名单</span> <span>1导入名单</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="showCat">🐱</el-button> <el-button
style="float: right; padding: 3px 0"
type="text"
@click="showCat"
>🐱</el-button
>
</div> </div>
<el-form <el-form
@ -35,20 +40,31 @@
> >
<!-- <el-button type="primary" size="small">点击上传📃</el-button> --> <!-- <el-button type="primary" size="small">点击上传📃</el-button> -->
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text"> <div class="el-upload__text" id="step1-upload">
将文件拖到此处 将文件拖到此处
<em>点击上传</em> <em>点击上传</em>
</div> </div>
<div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件且不超过5Mb</div> <div class="el-upload__tip" slot="tip">
只能上传xls/xlsx文件且不超过5Mb
</div>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-button size="medium" type="text" @click="moreSetting = !moreSetting" :disabled="false"> <el-button
size="medium"
type="text"
@click="moreSetting = !moreSetting"
:disabled="false"
>
更多设置 更多设置
<span v-if="moreSetting">🤟</span> <span v-if="moreSetting">🤟</span>
<span v-else>👇</span> <span v-else>👇</span>
</el-button> </el-button>
<el-collapse-transition> <el-collapse-transition>
<el-form-item prop="templateSheetNum" label="⚙️模式:" v-if="moreSetting"> <el-form-item
prop="templateSheetNum"
label="⚙️模式:"
v-if="moreSetting"
>
<el-radio-group v-model="formData.dataSourceImportModel"> <el-radio-group v-model="formData.dataSourceImportModel">
<el-radio label="0">自动识别姓名</el-radio> <el-radio label="0">自动识别姓名</el-radio>
<el-radio label="1">全部导入</el-radio> <el-radio label="1">全部导入</el-radio>
@ -56,7 +72,11 @@
</el-form-item> </el-form-item>
</el-collapse-transition> </el-collapse-transition>
<el-collapse-transition> <el-collapse-transition>
<el-form-item prop="removeRepeat" label="⚙️是否自动去除重复的数据:" v-if="moreSetting"> <el-form-item
prop="removeRepeat"
label="⚙️是否自动去除重复的数据:"
v-if="moreSetting"
>
<el-radio-group v-model="formData.removeRepeat"> <el-radio-group v-model="formData.removeRepeat">
<el-radio label="1"></el-radio> <el-radio label="1"></el-radio>
<el-radio label="0"></el-radio> <el-radio label="0"></el-radio>
@ -64,8 +84,16 @@
</el-form-item> </el-form-item>
</el-collapse-transition> </el-collapse-transition>
<el-collapse-transition> <el-collapse-transition>
<el-form-item prop="titleRowNum" label="🏷️表头所在行:" v-if="moreSetting" v-show="false"> <el-form-item
<el-input-number v-model="formData.titleRowNum" style="width: 200px"></el-input-number> 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-form-item>
</el-collapse-transition> </el-collapse-transition>
</el-form> </el-form>
@ -92,8 +120,8 @@ export default {
dataSourceImportDisabled: { dataSourceImportDisabled: {
type: Boolean, type: Boolean,
require: true, require: true,
default: false default: false,
} },
}, },
components: { DataSourceImportDialog }, components: { DataSourceImportDialog },
data() { data() {
@ -102,7 +130,7 @@ export default {
formData: { formData: {
dataSourceImportModel: "0", dataSourceImportModel: "0",
titleRowNum: 1, titleRowNum: 1,
removeRepeat: "1" removeRepeat: "1",
}, },
// //
formRules: {}, formRules: {},
@ -113,11 +141,23 @@ export default {
// //
dialogVisible: false, dialogVisible: false,
// //
dataSourcePreview: [] dataSourcePreview: [],
}; };
}, },
computed: {}, computed: {},
watch: {}, watch: {},
mounted() {
this.$bus.$on("openImportDialog", () => {
if (
this.dataSourcePreview == null ||
this.dataSourcePreview.length == 0
) {
this.$message.warning("名单还没导入呢");
} else {
this.dialogVisible = true;
}
});
},
created() { created() {
const week = new Date().getDay(); const week = new Date().getDay();
// //
@ -139,6 +179,7 @@ export default {
if (response.success) { if (response.success) {
this.dataSourceFileList = fileList; this.dataSourceFileList = fileList;
this.dataSourcePreview = response.data; this.dataSourcePreview = response.data;
this.$store.commit("setDataSourcePreview", this.dataSourcePreview);
this.dialogVisible = true; this.dialogVisible = true;
this.$message.success("姓名导入成功"); this.$message.success("姓名导入成功");
} else { } else {
@ -175,8 +216,8 @@ export default {
}, },
scrollIntoTemplateImport() { scrollIntoTemplateImport() {
this.$emit("scrollIntoTemplateImport"); this.$emit("scrollIntoTemplateImport");
} },
} },
}; };
</script> </script>

@ -9,28 +9,69 @@
:name="item.index" :name="item.index"
> >
<div class="table-s"> <div class="table-s">
<el-table :data="item.nameList" stripe style="width: 100%" @header-click="headerClick"> <el-table
<el-table-column type="index" label="序号" min-width="20%" align="center"></el-table-column> :data="item.nameList"
<el-table-column prop="name" label="姓名" min-width="50%" align="center"></el-table-column> stripe
<el-table-column fixed="right" label="操作" min-width="30%" align="center"> style="width: 100%"
@header-click="headerClick"
>
<el-table-column
type="index"
label="序号"
min-width="20%"
align="center"
></el-table-column>
<el-table-column
prop="name"
label="姓名"
min-width="50%"
align="center"
></el-table-column>
<el-table-column
fixed="right"
label="操作"
min-width="30%"
align="center"
>
<!-- <template slot-scope="scope"> --> <!-- <template slot-scope="scope"> -->
<template> <template>
<el-button type="primary" icon="el-icon-edit" circle size="small"></el-button> <el-button
<el-button type="danger" icon="el-icon-delete" circle size="small"></el-button> type="primary"
icon="el-icon-edit"
circle
size="small"
></el-button>
<el-button
type="danger"
icon="el-icon-delete"
circle
size="small"
></el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<div class="top-10"> <div class="top-10">
<span>{{item.sheetName}} 一共有{{item.nameList.length}}个人请检查一下对不对</span> <span
<span v-if="item.hasRepeat" class="f-right">{{item.repeatCount}}</span> >{{ item.sheetName }} 一共有{{
item.nameList.length
}}个人请检查一下对不对</span
>
<span v-if="item.hasRepeat" class="f-right"
>{{ item.repeatCount }}个重复的帮你去掉了</span
>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="closeDialog"> </el-button> <el-button @click="closeDialog"> </el-button>
<el-button type="primary" @click="nameListNext" v-if="!dataSourceImportDisabled"></el-button> <el-button
type="primary"
@click="nameListNext"
v-if="!dataSourceImportDisabled"
>下一步</el-button
>
</span> </span>
</el-dialog> </el-dialog>
</template> </template>
@ -41,26 +82,28 @@ export default {
props: { props: {
// //
dataSourcePreview: { dataSourcePreview: {
type: Array type: Array,
}, },
// //
dialogVisible: { dialogVisible: {
type: Boolean, type: Boolean,
require: true, require: true,
default: false default: false,
}, },
dataSourceImportDisabled: { dataSourceImportDisabled: {
type: Boolean type: Boolean,
} },
}, },
components: {}, components: {},
data() { data() {
return { return {
// tab // tab
activeName: "" activeName: "",
}; };
}, },
computed: {}, computed: {},
mounted() {
},
watch: {}, watch: {},
methods: { methods: {
handleClick(val) {}, handleClick(val) {},
@ -68,7 +111,7 @@ export default {
this.$confirm("请确认名单是否正确?", "提示", { this.$confirm("请确认名单是否正确?", "提示", {
confirmButtonText: "没毛病", confirmButtonText: "没毛病",
cancelButtonText: "有问题", cancelButtonText: "有问题",
type: "warning" type: "warning",
}) })
.then(() => { .then(() => {
this.closeDialog(); this.closeDialog();
@ -76,14 +119,14 @@ export default {
this.$notify({ this.$notify({
title: "成功", title: "成功",
message: "名单已经导入成功了,接下来你可以导入模板了", message: "名单已经导入成功了,接下来你可以导入模板了",
type: "success" type: "success",
}); });
this.$emit("scrollIntoTemplateImport"); this.$emit("scrollIntoTemplateImport");
}) })
.catch(() => { .catch(() => {
this.$message({ this.$message({
type: "info", type: "info",
message: "有问题就改" message: "有问题就改",
}); });
}); });
}, },
@ -99,16 +142,16 @@ export default {
this.dataSourcePreview[this.activeName].sheetName this.dataSourcePreview[this.activeName].sheetName
}.name}`; }.name}`;
this.$copyText(expr) this.$copyText(expr)
.then(res => { .then((res) => {
console.log("SUCCESS: copy arguments e:", res); console.log("SUCCESS: copy arguments e:", res);
this.$message.success("复制成功!表达式:" + expr); this.$message.success("复制成功!表达式:" + expr);
}) })
.catch(err => { .catch((err) => {
console.log("ERR: copy arguments e:", err); console.log("ERR: copy arguments e:", err);
this.$message.error("复制失败,请重试"); this.$message.error("复制失败,请重试");
}); });
} },
} },
}; };
</script> </script>

@ -2,7 +2,9 @@
<el-card class="box-card bottom-10"> <el-card class="box-card bottom-10">
<el-steps :active="active" finish-status="success"> <el-steps :active="active" finish-status="success">
<el-step> <el-step>
<span style="cursor:pointer;" slot="title" @click="importClick">🐸</span> <span style="cursor: pointer" slot="title" @click="importClick"
>导入名单🐸</span
>
</el-step> </el-step>
<el-step title="导入模板💕"></el-step> <el-step title="导入模板💕"></el-step>
<el-step title="完成👍"></el-step> <el-step title="完成👍"></el-step>
@ -17,8 +19,8 @@ export default {
active: { active: {
type: Number, type: Number,
require: true, require: true,
default: 0 default: 0,
} },
}, },
components: {}, components: {},
data() { data() {
@ -28,9 +30,9 @@ export default {
watch: {}, watch: {},
methods: { methods: {
importClick() { importClick() {
this.$message.success("success"); this.$bus.$emit("openImportDialog");
} },
} },
}; };
</script> </script>

@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>

@ -11,16 +11,25 @@
:rules="rules" :rules="rules"
:disabled="templateImportDisabled" :disabled="templateImportDisabled"
> >
<el-button size="medium" type="text" @click="moreSetting = !moreSetting" :disabled="false"> <el-button
size="medium"
type="text"
@click="moreSetting = !moreSetting"
:disabled="false"
>
模板设置 模板设置
<span v-if="moreSetting">🤟</span> <span v-if="moreSetting">🤟</span>
<span v-else>👇</span> <span v-else>👇</span>
</el-button> </el-button>
<el-collapse-transition> <el-collapse-transition>
<el-form-item prop="templateSheetNum" label="模板所在sheet页" v-if="moreSetting"> <el-form-item
prop="templateSheetNum"
label="模板所在sheet页"
v-if="moreSetting"
>
<el-input-number <el-input-number
v-model="formData.templateSheetNum" v-model="formData.templateSheetNum"
style="width:200px" style="width: 200px"
:step="1" :step="1"
:min="1" :min="1"
:max="250" :max="250"
@ -30,7 +39,9 @@
<el-form-item prop="uploadTemplate" label="模板上传:"> <el-form-item prop="uploadTemplate" label="模板上传:">
<el-upload <el-upload
:action="'/api/excel/template?templateSheetNum=' + formData.templateSheetNum" :action="
'/api/excel/template?templateSheetNum=' + formData.templateSheetNum
"
:multiple="false" :multiple="false"
:on-success="uploadSuccess" :on-success="uploadSuccess"
:on-error="uploadError" :on-error="uploadError"
@ -47,6 +58,7 @@
v-model="formData.cellNum" v-model="formData.cellNum"
style="width=200px" style="width=200px"
:disabled="cellSearchDisable" :disabled="cellSearchDisable"
@keyup.enter.native="cellNumSearch"
> >
<el-button <el-button
slot="append" slot="append"
@ -70,10 +82,48 @@
type="success" type="success"
circle circle
icon="el-icon-bottom" icon="el-icon-bottom"
@click="formData.newCellData=formData.cellData" @click="formData.newCellData = formData.cellData"
></el-button> ></el-button>
</el-tooltip> </el-tooltip>
</el-form-item> </el-form-item>
<el-form-item prop="expr" label="可用表达式(点一下就可以复制):">
<span
class="right-10"
v-for="item in $store.state.dataSourcePreview"
:key="item.sheetName"
>
<el-popover placement="bottom" width="400" trigger="hover">
<div style="height: 300px">
<span
>表达式
{{ `@{${item.sheetName}.name}` }} 就代表以下的这些名字</span
>
<el-table :data="item.nameList" height="290">
<el-table-column
type="index"
label="序号"
min-width="20%"
align="center"
></el-table-column>
<el-table-column
prop="name"
label="姓名"
min-width="50%"
align="center"
></el-table-column>
</el-table>
</div>
<el-button
size="mini"
slot="reference"
type="danger"
@click="copyExpr(item.sheetName)"
>{{ item.sheetName }}</el-button
>
</el-popover>
</span>
</el-form-item>
<el-form-item prop="newCellData"> <el-form-item prop="newCellData">
<span slot="label">💨替换后的数据</span> <span slot="label">💨替换后的数据</span>
<el-input <el-input
@ -85,20 +135,34 @@
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="resultExcelName" label="🤩处理后Excel的文件名字"> <el-form-item prop="resultExcelName" label="🤩处理后Excel的文件名字">
<el-input placeholder="处理好以后的Excel文件名不写就是默认名字" v-model="formData.resultExcelName"></el-input> <el-input
placeholder="处理好以后的Excel文件名不写就是默认名字"
v-model="formData.resultExcelName"
></el-input>
</el-form-item> </el-form-item>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col <el-col
:xs="{span: 8, offset: 8}" :xs="{ span: 8, offset: 8 }"
:sm="{span: 6, offset: 12}" :sm="{ span: 6, offset: 12 }"
:md="{span: 5, offset: 14}" :md="{ span: 5, offset: 14 }"
:lg="{span: 4, offset: 16}" :lg="{ span: 4, offset: 16 }"
:xl="{span: 2, offset: 20}" :xl="{ span: 2, offset: 20 }"
> >
<el-button type="primary" class="f-right right-10" @click="executeTemplate">Excel</el-button> <el-button
type="primary"
class="f-right right-10"
@click="executeTemplate"
>①生成Excel</el-button
>
</el-col> </el-col>
<el-col :xs="8" :sm="6" :md="5" :lg="4" :xl="2"> <el-col :xs="8" :sm="6" :md="5" :lg="4" :xl="2">
<el-button type="success" class="f-right" @click="gotoDownload"></el-button> <el-button
type="success"
class="f-right"
@click="gotoDownload"
:disabled="!allowDownload"
>②去下载文件</el-button
>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
@ -114,8 +178,8 @@ export default {
templateImportDisabled: { templateImportDisabled: {
type: Boolean, type: Boolean,
require: true, require: true,
default: false default: false,
} },
}, },
components: {}, components: {},
data() { data() {
@ -125,17 +189,18 @@ export default {
templateSheetNum: 1, templateSheetNum: 1,
cellNum: "", cellNum: "",
cellData: "", cellData: "",
newCellData: "" newCellData: "",
}, },
rules: { rules: {
cellNum: [ cellNum: [
{ required: true, message: "请输入单元格编号", trigger: "blur" } { required: true, message: "请输入单元格编号", trigger: "blur" },
] ],
}, },
templateFileList: [], templateFileList: [],
cellSearchDisable: false, cellSearchDisable: false,
resultExcelName: "", resultExcelName: "",
moreSetting: false moreSetting: false,
allowDownload: false,
}; };
}, },
computed: {}, computed: {},
@ -160,13 +225,16 @@ export default {
this.$message.error(err); this.$message.error(err);
}, },
cellNumSearch() { cellNumSearch() {
if (this.templateFileList.length == 0) {
return this.$message.error("宝子,您还没有上传模板文件呢");
}
this.$axios this.$axios
.get("/api/excel/cellNumSearch", { .get("/api/excel/cellNumSearch", {
params: { params: {
cellRowStr: this.formData.cellNum cellRowStr: this.formData.cellNum,
} },
}) })
.then(res => { .then((res) => {
const { data } = res; const { data } = res;
if (data.success) { if (data.success) {
this.$message.success("单元格数据获取成功"); this.$message.success("单元格数据获取成功");
@ -176,7 +244,7 @@ export default {
this.formData.cellData = ""; this.formData.cellData = "";
} }
}) })
.catch(err => { .catch((err) => {
console.log(err); console.log(err);
}); });
}, },
@ -197,24 +265,25 @@ export default {
if (this.templateFileList.length == 0) { if (this.templateFileList.length == 0) {
return this.$message.error("宝子,您还没有上传模板文件呢"); return this.$message.error("宝子,您还没有上传模板文件呢");
} }
this.$refs["$form"].validate(valid => { this.$refs["$form"].validate((valid) => {
if (valid) { if (valid) {
this.$axios this.$axios
.post("/api/excel/executeTemplate", { .post("/api/excel/executeTemplate", {
newCellData: this.formData.newCellData, newCellData: this.formData.newCellData,
cellRowStr: this.formData.cellNum, cellRowStr: this.formData.cellNum,
resultExcelName: this.formData.resultExcelName resultExcelName: this.formData.resultExcelName,
}) })
.then(res => { .then((res) => {
const { data } = res; const { data } = res;
if (data.success) { if (data.success) {
this.$emit("setStep", 2); this.$emit("setStep", 2);
this.$message.success("Excel处理完成"); this.$message.success("Excel处理完成");
this.allowDownload = true;
} else { } else {
this.$message.error(data.msg); this.$message.error(data.msg);
} }
}) })
.catch(err => { .catch((err) => {
console.log(err); console.log(err);
}); });
} else { } else {
@ -226,7 +295,7 @@ export default {
gotoDownload() { gotoDownload() {
this.$axios this.$axios
.get("/api/excel/gotoDownload") .get("/api/excel/gotoDownload")
.then(res => { .then((res) => {
const { data } = res; const { data } = res;
if (data.success) { if (data.success) {
this.$emit("setStep", 3); this.$emit("setStep", 3);
@ -234,13 +303,31 @@ export default {
this.$message.error(data.msg); this.$message.error(data.msg);
} }
}) })
.catch(err => { .catch((err) => {
console.log(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() {}, created() {},
mounted() {} mounted() {},
}; };
</script> </script>

@ -1,5 +1,35 @@
<template> <template>
<div> <div>
<div>
<el-tooltip
effect="dark"
content="点我查看视频教程"
placement="left-start"
>
<el-button
type="success"
icon="el-icon-video-camera"
circle
class="video-guide"
@click="openNewWindow"
></el-button>
</el-tooltip>
</div>
<div>
<el-tooltip
effect="dark"
content="点我提交反馈建议"
placement="left-start"
>
<el-button
type="warning"
icon="el-icon-message"
circle
class="suggest-btn"
@click="suggestShow = true"
></el-button>
</el-tooltip>
</div>
<import-steps class="header" :active="activeStep"></import-steps> <import-steps class="header" :active="activeStep"></import-steps>
<data-source-import <data-source-import
:dataSourceImportDisabled="dataSourceImportDisabled" :dataSourceImportDisabled="dataSourceImportDisabled"
@ -15,7 +45,11 @@
></template-import> ></template-import>
</el-collapse-transition> </el-collapse-transition>
<el-collapse-transition> <el-collapse-transition>
<excel-download id="excelDownload" @setStep="setStep" v-if="activeStep == 3"></excel-download> <excel-download
id="excelDownload"
@setStep="setStep"
v-if="activeStep == 3"
></excel-download>
</el-collapse-transition> </el-collapse-transition>
</div> </div>
</template> </template>
@ -30,7 +64,8 @@ export default {
components: { ImportSteps, DataSourceImport, TemplateImport, ExcelDownload }, components: { ImportSteps, DataSourceImport, TemplateImport, ExcelDownload },
data() { data() {
return { return {
activeStep: 0 activeStep: 0,
suggestShow: false,
}; };
}, },
created() { created() {
@ -41,10 +76,10 @@ export default {
test() { test() {
this.$axios this.$axios
.get("/api/test/test") .get("/api/test/test")
.then(res => { .then((res) => {
const { data } = res; const { data } = res;
}) })
.catch(err => { .catch((err) => {
console.log(err); console.log(err);
}); });
}, },
@ -55,7 +90,7 @@ export default {
window.scroll({ window.scroll({
top: document.body.clientHeight, top: document.body.clientHeight,
left: 0, left: 0,
behavior: "smooth" behavior: "smooth",
}); });
}, 500); }, 500);
} }
@ -63,10 +98,15 @@ export default {
scrollIntoTemplateImport() { scrollIntoTemplateImport() {
setTimeout(() => { setTimeout(() => {
document.getElementById("templateImport").scrollIntoView({ document.getElementById("templateImport").scrollIntoView({
behavior: "smooth" behavior: "smooth",
}); });
}, 500); }, 500);
} },
openNewWindow() {
window.open(
"https://chen-test-01-img.oss-cn-beijing.aliyuncs.com/video/gmh-guide.mp4"
);
},
}, },
computed: { computed: {
// disabled // disabled
@ -76,8 +116,8 @@ export default {
// disabled // disabled
templateImportDisabled() { templateImportDisabled() {
return this.activeStep == 3; return this.activeStep == 3;
} },
} },
}; };
</script> </script>
@ -110,4 +150,16 @@ export default {
position: fixed; position: fixed;
top: 10px; top: 10px;
} }
.video-guide {
position: fixed;
bottom: 30%;
right: 2%;
z-index: 999;
}
.suggest-btn {
position: fixed;
bottom: 36%;
right: 2%;
z-index: 999;
}
</style> </style>

@ -7,14 +7,23 @@ import 'element-ui/lib/theme-chalk/index.css';
import VueClipBoard from 'vue-clipboard2' import VueClipBoard from 'vue-clipboard2'
import axios from 'axios' import axios from 'axios'
import VueTour from 'vue-tour'
require('vue-tour/dist/vue-tour.css')
Vue.use(VueTour)
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.prototype.$axios = axios Vue.prototype.$axios = axios
// Vue.prototype.$bus = new Vue() // 安装事件总线方式一
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.use(VueClipBoard); Vue.use(VueClipBoard);
new Vue({ new Vue({
beforeCreate() {
Vue.prototype.$bus = this // 安装事件总线方式二
},
router, router,
store, store,
render: h => h(App) render: h => h(App)

@ -5,10 +5,14 @@ Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
dataSourcePreview: []
}, },
getters: { getters: {
}, },
mutations: { mutations: {
setDataSourcePreview(state, param) {
state.dataSourcePreview = param
}
}, },
actions: { actions: {
}, },

Loading…
Cancel
Save