|
@@ -12,7 +12,10 @@
|
|
|
</div>
|
|
|
<div class="reBox">
|
|
|
<div class="first">
|
|
|
- <div><div style="color:red">*</div> 请输入地区</div>
|
|
|
+ <div>
|
|
|
+ <div style="color: red">*</div>
|
|
|
+ 请输入地区
|
|
|
+ </div>
|
|
|
<div>
|
|
|
<el-input
|
|
|
v-model="ruleForm.region"
|
|
@@ -32,17 +35,37 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="first">
|
|
|
- <div>学校</div>
|
|
|
<div>
|
|
|
- <el-input
|
|
|
+ <div style="color: red">*</div>
|
|
|
+ 学校
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-select
|
|
|
v-model="ruleForm.school"
|
|
|
- style="width: 300px"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ @clear="clearSchoolList"
|
|
|
+ :allow-create="false"
|
|
|
+ remote
|
|
|
placeholder="请输入学校"
|
|
|
- ></el-input>
|
|
|
+ :remote-method="remoteMethod"
|
|
|
+ :loading="loading"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="first">
|
|
|
- <div>姓名</div>
|
|
|
+ <div>
|
|
|
+ <div style="color: red">*</div>
|
|
|
+ 姓名
|
|
|
+ </div>
|
|
|
<div>
|
|
|
<el-input
|
|
|
v-model="ruleForm.name"
|
|
@@ -52,7 +75,10 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="first">
|
|
|
- <div>联系方式</div>
|
|
|
+ <div>
|
|
|
+ <div style="color: red">*</div>
|
|
|
+ 联系方式
|
|
|
+ </div>
|
|
|
<div>
|
|
|
<el-input
|
|
|
v-model="ruleForm.phone"
|
|
@@ -61,9 +87,15 @@
|
|
|
></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="isButton">
|
|
|
+ <el-button @click="addRaceUser">确定提交</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="copyright">
|
|
|
+ 版权所有:广州师培社教育科技有限公司 粤ICP备09132871号
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -73,17 +105,96 @@ export default {
|
|
|
return {
|
|
|
ruleForm: {
|
|
|
headportrait: "",
|
|
|
- region: [],
|
|
|
+ region: "",
|
|
|
address: "",
|
|
|
school: "",
|
|
|
name: "",
|
|
|
phone: "",
|
|
|
},
|
|
|
tx: require("../assets/avatar.png"),
|
|
|
+ options: [],
|
|
|
+ list: [],
|
|
|
+ loading: false,
|
|
|
+ schoolList: [],
|
|
|
+ num: "",
|
|
|
};
|
|
|
},
|
|
|
- methods: {},
|
|
|
- created() {},
|
|
|
+ // mounted() {
|
|
|
+ // this.list = this.schoolList.map((item) => {
|
|
|
+ // return { value: `value:${item}`, label: `学校:${item}` };
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ methods: {
|
|
|
+ remoteMethod(query) {
|
|
|
+ if (query !== "") {
|
|
|
+ this.loading = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.loading = false;
|
|
|
+ this.options = this.list.filter((item) => {
|
|
|
+ return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
|
|
|
+ });
|
|
|
+ }, 200);
|
|
|
+ } else {
|
|
|
+ this.options = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearSchoolList() {
|
|
|
+ this.options = [];
|
|
|
+ },
|
|
|
+ getSchool() {
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectOrg")
|
|
|
+ .then((res) => {
|
|
|
+ this.schoolList = res.data[0];
|
|
|
+ this.list = this.schoolList.map((item) => {
|
|
|
+ return { value: item.id, label: item.name };
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addRaceUser() {
|
|
|
+ if (this.ruleForm.region == "") {
|
|
|
+ this.$message.error("请填写地区");
|
|
|
+ return;
|
|
|
+ } else if (this.ruleForm.school == "") {
|
|
|
+ this.$message.error("请填写学校");
|
|
|
+ return;
|
|
|
+ } else if (this.ruleForm.name == "") {
|
|
|
+ this.$message.error("请填写姓名");
|
|
|
+ return;
|
|
|
+ } else if (this.ruleForm.phone == "") {
|
|
|
+ this.$message.error("请填写手机号");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ reg: this.ruleForm.region,
|
|
|
+ res: this.ruleForm.address,
|
|
|
+ sch: this.ruleForm.school,
|
|
|
+ n: this.ruleForm.name,
|
|
|
+ p: this.ruleForm.phone,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.api + "addRaceUser", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.$message({
|
|
|
+ message: "创建成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.num = res.data.num;
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error("创建失败");
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getSchool();
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
@@ -98,6 +209,7 @@ export default {
|
|
|
min-width: unset;
|
|
|
margin: 0;
|
|
|
background: #fff;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
.formTop {
|
|
|
display: flex;
|
|
@@ -129,9 +241,31 @@ export default {
|
|
|
}
|
|
|
.first {
|
|
|
margin: 5px 0;
|
|
|
+ width: 300px;
|
|
|
}
|
|
|
.first > div:nth-child(1) {
|
|
|
margin-bottom: 5px;
|
|
|
font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.first > div:nth-child(2) > .el-select {
|
|
|
+ width: 300px;
|
|
|
+}
|
|
|
+.isButton {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.isButton >>> .el-button {
|
|
|
+ background: #5492ff !important;
|
|
|
+ color: #fff !important;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.copyright {
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ bottom: 15px;
|
|
|
}
|
|
|
</style>
|