|
@@ -0,0 +1,188 @@
|
|
|
+<template>
|
|
|
+ <div id="">
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="visible"
|
|
|
+ width="400px"
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :append-to-body="true"
|
|
|
+ @closed="close"
|
|
|
+ >
|
|
|
+ <div slot="title" class="hearders">
|
|
|
+ <div class="leftTitle">{{ index == -1 ? "新增" : "修改" }}</div>
|
|
|
+ <div class="rightBoxs">
|
|
|
+ <img
|
|
|
+ src="@/assets/img/Close@2x.png"
|
|
|
+ alt=""
|
|
|
+ @click="visible = false"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-form
|
|
|
+ size="small"
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ ref="ruleForm"
|
|
|
+ label-width="100px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ >
|
|
|
+ <el-form-item label="姓名" prop="realname">
|
|
|
+ <el-input v-model="ruleForm.realname"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="性别" prop="sex">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.sex"
|
|
|
+ placeholder="请选择性别"
|
|
|
+ style="width:100%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in $store.state.dictList['sys_user_sex']"
|
|
|
+ :key="index"
|
|
|
+ :label="item"
|
|
|
+ :value="item"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="身份证号" prop="idCard">
|
|
|
+ <el-input v-model="ruleForm.idCard"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手机号码" prop="telphone">
|
|
|
+ <el-input v-model="ruleForm.telphone"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学历" prop="eduLevel">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.eduLevel"
|
|
|
+ placeholder="请选择学历"
|
|
|
+ style="width:100%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in $store.state.dictList['edu_level']"
|
|
|
+ :key="index"
|
|
|
+ :label="item"
|
|
|
+ :value="item"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属公司" prop="companyName">
|
|
|
+ <el-input v-model="ruleForm.companyName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="submitForm('ruleForm')">保存</el-button>
|
|
|
+ </div></el-dialog
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ index: -1,
|
|
|
+ visible: false,
|
|
|
+ ruleForm: {
|
|
|
+ realname: "",
|
|
|
+ sex: "",
|
|
|
+ idCard: "",
|
|
|
+ telphone: "",
|
|
|
+ eduLevel: "",
|
|
|
+ companyName: ""
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
|
|
+ sex: [{ required: true, message: "请选择性别", trigger: "change" }],
|
|
|
+ idCard: [
|
|
|
+ { required: true, message: "请输入身份证号", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ telphone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
|
|
|
+ eduLevel: [{ required: true, message: "请选择学历", trigger: "change" }],
|
|
|
+ companyName: [
|
|
|
+ { required: true, message: "请输入所属公司", trigger: "blur" }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.$confirm(
|
|
|
+ `确定${this.index == -1 ? "新增" : "修改"}吗?`,
|
|
|
+ "提示",
|
|
|
+ {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(() => {
|
|
|
+ let row = Object.assign({}, this.ruleForm);
|
|
|
+ this.$emit("backStudentData", this.index, row);
|
|
|
+ this.visible = false;
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openBoxs(index, row) {
|
|
|
+ this.index = index;
|
|
|
+ this.ruleForm = Object.assign({}, row);
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.$refs["ruleForm"].resetFields();
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+/deep/ .el-dialog {
|
|
|
+ border-radius: 8px !important;
|
|
|
+ .el-dialog__header {
|
|
|
+ padding: 0;
|
|
|
+ .hearders {
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0px 18px 0px 20px;
|
|
|
+ border-bottom: 1px solid #e2e2e2;
|
|
|
+ .leftTitle {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #2f4378;
|
|
|
+ }
|
|
|
+ .rightBoxs {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-left: 13px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog__footer {
|
|
|
+ padding: 0;
|
|
|
+ .dialog-footer {
|
|
|
+ padding: 0px 40px;
|
|
|
+ height: 70px;
|
|
|
+ border-top: 1px solid #e2e2e2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.el-button {
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+</style>
|