| | |
| | | <template> |
| | | <el-form |
| | | class="login-form" |
| | | status-icon |
| | | :rules="loginRules" |
| | | ref="loginForm" |
| | | :model="loginForm" |
| | | label-width="0" |
| | | > |
| | | <el-form-item prop="username"> |
| | | <el-input |
| | | size="small" |
| | | @keyup.enter.native="handleLogin" |
| | | v-model="loginForm.username" |
| | | auto-complete="off" |
| | | :placeholder="$t('login.username')" |
| | | <div> |
| | | <avue-tabs :option="option" @change="handleChange"></avue-tabs> |
| | | <span v-if="type.prop === 'tab1'"> |
| | | <el-form |
| | | class="login-form" |
| | | status-icon |
| | | :rules="loginRules" |
| | | ref="loginForm" |
| | | :model="loginForm" |
| | | label-width="0" |
| | | > |
| | | <i slot="prefix" class="icon-yonghu" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="password"> |
| | | <el-input |
| | | size="small" |
| | | @keyup.enter.native="handleLogin" |
| | | v-model="loginForm.password" |
| | | auto-complete="off" |
| | | show-password |
| | | :placeholder="$t('login.password')" |
| | | <el-form-item prop="username"> |
| | | <el-input |
| | | size="small" |
| | | @keyup.enter.native="handleLogin" |
| | | v-model="loginForm.username" |
| | | auto-complete="off" |
| | | :placeholder="$t('login.username')" |
| | | clearable="true" |
| | | > |
| | | <i slot="prefix" class="icon-yonghu" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="password"> |
| | | <el-input |
| | | size="small" |
| | | @keyup.enter.native="handleLogin" |
| | | v-model="loginForm.password" |
| | | auto-complete="off" |
| | | show-password |
| | | :placeholder="$t('login.password')" |
| | | clearable="true" |
| | | > |
| | | <i slot="prefix" class="icon-mima" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="password2"> |
| | | <el-input |
| | | size="small" |
| | | @keyup.enter.native="handleLogin" |
| | | v-model="loginForm.password2" |
| | | auto-complete="off" |
| | | show-password |
| | | :placeholder="$t('login.password2')" |
| | | clearable="true" |
| | | > |
| | | <i slot="prefix" class="icon-mima" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="sname"> |
| | | <el-input |
| | | size="small" |
| | | @keyup.enter.native="handleLogin" |
| | | v-model="loginForm.sname" |
| | | auto-complete="off" |
| | | :placeholder="$t('login.name')" |
| | | clearable="true" |
| | | > |
| | | <i slot="prefix" class="icon-yonghu" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="cardid"> |
| | | <el-input |
| | | size="small" |
| | | v-model="loginForm.cardid" |
| | | auto-complete="off" |
| | | :placeholder="$t('login.cardid')" |
| | | clearable="true" |
| | | > |
| | | <i slot="prefix" class="icon-shouji" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <avue-input-tree |
| | | style="width: 580px !important" |
| | | :defaultExpandAll="loginForm.defaultFlag" |
| | | v-model="loginForm.deptid" |
| | | placeholder="请选择部门" |
| | | type="tree" |
| | | :dic="dic" |
| | | ></avue-input-tree> |
| | | <el-form-item class="z-login-submit-prv"> |
| | | <el-button |
| | | size="small" |
| | | type="primary" |
| | | @click.native.prevent="handleLogin" |
| | | class="z-login-submit" |
| | | >{{ $t("login.zc") }} |
| | | </el-button> |
| | | <el-button |
| | | size="small" |
| | | @click.native.prevent="gbs" |
| | | class="z-login-submit" |
| | | >{{ $t("login.gb") }} |
| | | </el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </span> |
| | | <!-- 企业注册 --> |
| | | <span v-else-if="type.prop === 'tab2'"> |
| | | <el-form |
| | | class="login-form" |
| | | status-icon |
| | | :rules="unitRules" |
| | | ref="unitForm" |
| | | :model="unitForm" |
| | | label-width="0" |
| | | > |
| | | <i slot="prefix" class="icon-mima" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="password2"> |
| | | <el-input |
| | | size="small" |
| | | @keyup.enter.native="handleLogin" |
| | | v-model="loginForm.password2" |
| | | auto-complete="off" |
| | | show-password |
| | | :placeholder="$t('login.password2')" |
| | | > |
| | | <i slot="prefix" class="icon-mima" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="sname"> |
| | | <el-input |
| | | size="small" |
| | | @keyup.enter.native="handleLogin" |
| | | v-model="loginForm.sname" |
| | | auto-complete="off" |
| | | :placeholder="$t('login.name')" |
| | | > |
| | | <i slot="prefix" class="icon-yonghu" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="cardid"> |
| | | <el-input |
| | | size="small" |
| | | v-model="loginForm.cardid" |
| | | auto-complete="off" |
| | | :placeholder="$t('login.cardid')" |
| | | > |
| | | <i slot="prefix" class="icon-shouji" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <avue-input-tree |
| | | style="width: 580px !important" |
| | | :defaultExpandAll="loginForm.defaultFlag" |
| | | v-model="loginForm.deptid" |
| | | placeholder="请选择部门" |
| | | type="tree" |
| | | :dic="dic" |
| | | ></avue-input-tree> |
| | | <el-form-item class="z-login-submit-prv"> |
| | | <el-button |
| | | size="small" |
| | | type="primary" |
| | | @click.native.prevent="handleLogin" |
| | | class="z-login-submit" |
| | | >{{ $t("login.zc") }} |
| | | </el-button> |
| | | <el-button size="small" @click.native.prevent="gbs" class="z-login-submit" |
| | | >{{ $t("login.gb") }} |
| | | </el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <el-form-item prop="deptName"> |
| | | <el-input |
| | | size="small" |
| | | @keyup.enter.native="handleUnitRegister" |
| | | v-model="unitForm.deptName" |
| | | auto-complete="off" |
| | | placeholder="企业名称" |
| | | clearable="true" |
| | | > |
| | | <i slot="prefix" class="el-icon-house" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <div style="margin-top: -1.5rem"> |
| | | <i |
| | | slot="prefix" |
| | | style="position: relative; top: 1.9rem; left: 0.5rem" |
| | | class="el-icon-position" |
| | | /> |
| | | <div style="position: relative"> |
| | | <el-form-item prop="jurisdiction"> |
| | | <avue-input-tree |
| | | :props="props" |
| | | :parent="false" |
| | | :defaultExpandedKeys="defaultExpandedKeys" |
| | | v-model="unitForm.jurisdiction" |
| | | style="width: 35rem !important; padding-left: 0.9rem !important" |
| | | placeholder="请选择辖区" |
| | | type="tree" |
| | | :dic="jurisdictionDic" |
| | | > |
| | | </avue-input-tree> |
| | | </el-form-item> |
| | | </div> |
| | | </div> |
| | | <div style="margin-top: -1.5rem"> |
| | | <i |
| | | slot="prefix" |
| | | style="position: relative; top: 1.9rem; left: 0.5rem" |
| | | class="el-icon-wallet" |
| | | /> |
| | | <div style="position: relative"> |
| | | <el-form-item prop="stats"> |
| | | <avue-select |
| | | default-expand-all |
| | | :props="statsProps" |
| | | v-model="unitForm.stats" |
| | | style="width: 35rem !important; padding-left: 0.9rem !important" |
| | | placeholder="请选择企业属性" |
| | | type="tree" |
| | | :dic="statsDic" |
| | | > |
| | | </avue-select> |
| | | </el-form-item> |
| | | </div> |
| | | </div> |
| | | <el-form-item prop="linkman"> |
| | | <el-input |
| | | size="small" |
| | | @keyup.enter.native="handleUnitRegister" |
| | | v-model="unitForm.linkman" |
| | | auto-complete="off" |
| | | placeholder="联系人" |
| | | clearable="true" |
| | | > |
| | | <i slot="prefix" class="el-icon-user" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="phone"> |
| | | <el-input |
| | | size="small" |
| | | v-model="unitForm.phone" |
| | | auto-complete="off" |
| | | placeholder="联系人电话" |
| | | clearable="true" |
| | | > |
| | | <i slot="prefix" class="icon-shouji" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="address"> |
| | | <el-input |
| | | size="small" |
| | | v-model="unitForm.address" |
| | | auto-complete="off" |
| | | placeholder="企业注册地址" |
| | | clearable="true" |
| | | > |
| | | <i slot="prefix" class="el-icon-map-location" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="unit"> |
| | | <el-input |
| | | size="small" |
| | | v-model="unitForm.unit" |
| | | auto-complete="off" |
| | | placeholder="登记机关" |
| | | clearable="true" |
| | | > |
| | | <i slot="prefix" class="el-icon-office-building" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <div style="margin-top: -1.5rem"> |
| | | <i |
| | | slot="prefix" |
| | | style="position: relative; top: 1.9rem; left: 0.5rem" |
| | | class="el-icon-picture-outline" |
| | | /> |
| | | <div style="position: relative; left: 3rem; top: 1rem"> |
| | | <el-form-item prop="businessLicense"> |
| | | <i slot="prefix" class="el-icon-picture-outline" /> |
| | | <el-upload |
| | | class="avatar-uploader" |
| | | action="" |
| | | :show-file-list="false" |
| | | :on-success="handleAvatarSuccess" |
| | | :before-upload="beforeAvatarUpload" |
| | | :http-request="httpRequest" |
| | | placeholder="营业执照" |
| | | > |
| | | <img v-if="imageUrl" :src="imageUrl" class="avatar" /> |
| | | <i v-else class="el-icon-plus avatar-uploader-icon"></i> |
| | | <div class="el-upload__tip" slot="tip"> |
| | | 请上传营业执照,只能上传jpg/png文件,且不超过2MB |
| | | </div> |
| | | </el-upload> |
| | | </el-form-item> |
| | | </div> |
| | | </div> |
| | | <el-form-item class="z-login-submit-prv"> |
| | | <el-button |
| | | size="small" |
| | | type="primary" |
| | | @click.native.prevent="handleUnitRegister" |
| | | class="z-login-submit" |
| | | >{{ $t("login.zc") }} |
| | | </el-button> |
| | | <el-button |
| | | size="small" |
| | | @click.native.prevent="gbs" |
| | | class="z-login-submit" |
| | | >{{ $t("login.gb") }} |
| | | </el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </span> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { isvalidatemobile } from "@/util/validate"; |
| | | import { inster } from "@/api/zc/zc"; |
| | | import { ss, rs } from "@/api/system/dept"; |
| | | import { add } from "@/api/registerUnit/registerUnit"; |
| | | import { ss } from "@/api/system/dept"; |
| | | import { getDictionary } from "@/api/system/dictbiz"; |
| | | import { getJurisdictionTree } from "@/api/jurisdiction/jurisdiction"; |
| | | import { putFile } from "@/api/resource/oss"; |
| | | import { mapGetters } from "vuex"; |
| | | |
| | | export default { |
| | |
| | | } |
| | | }; |
| | | return { |
| | | defaultExpandedKeys: [], |
| | | imageUrl: "", |
| | | props: { |
| | | label: "title", |
| | | }, |
| | | // statsProps: { |
| | | // label: "dictValue", |
| | | // value: "dictKey", |
| | | // }, |
| | | msgText: "", |
| | | msgTime: "", |
| | | dic: [], |
| | | jurisdictionDic: [], |
| | | statsDic: [ |
| | | { |
| | | label:"本市保安公司", |
| | | value:"2" |
| | | }, |
| | | { |
| | | label:"自招保安单位", |
| | | value:"0" |
| | | }, |
| | | { |
| | | label:"跨区域保安公司", |
| | | value:"4" |
| | | }, |
| | | { |
| | | label:"保安培训学校", |
| | | value:"1" |
| | | } |
| | | ], |
| | | dicr: [], |
| | | msgKey: false, |
| | | type: {}, |
| | | option: { |
| | | column: [ |
| | | { |
| | | label: "个人注册", |
| | | prop: "tab1", |
| | | }, |
| | | { |
| | | label: "企业注册", |
| | | prop: "tab2", |
| | | }, |
| | | ], |
| | | }, |
| | | loginForm: { |
| | | cardid: "", |
| | | username: "", |
| | |
| | | deptid: "", |
| | | roleid: "", |
| | | password2: "", |
| | | }, |
| | | unitForm: { |
| | | deptName: "", |
| | | stats: "", |
| | | jurisdiction: "", |
| | | linkman: "", |
| | | phone: "", |
| | | address: "", |
| | | unit: "", |
| | | businessLicense: "", |
| | | }, |
| | | value: "", |
| | | options: [], |
| | |
| | | { required: true, message: "请输入用户名", trigger: "blur" }, |
| | | ], |
| | | }, |
| | | unitRules: { |
| | | deptName: [ |
| | | { required: true, message: "请输入企业名称", trigger: "blur" }, |
| | | ], |
| | | linkman: [{ required: true, message: "请输入联系人", trigger: "blur" }], |
| | | phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }], |
| | | address: [ |
| | | { required: true, message: "请输入企业注册地址", trigger: "blur" }, |
| | | ], |
| | | unit: [{ required: true, message: "请输入登记机关", trigger: "blur" }], |
| | | jurisdiction: [ |
| | | { required: true, message: "请选择辖区", trigger: "blur" }, |
| | | ], |
| | | stats: [ |
| | | { required: true, message: "请选择企业属性", trigger: "blur" }, |
| | | ], |
| | | }, |
| | | passwordType: "password", |
| | | passwordTypes: "password2", |
| | | }; |
| | | }, |
| | | created() { |
| | | this.type = this.option.column[0]; |
| | | this.msgText = this.config.MSGINIT; |
| | | this.msgTime = this.config.MSGTIME; |
| | | // defaultFlag |
| | | this.getJurisdictionTree(); |
| | | // this.getDictionary(); |
| | | }, |
| | | mounted() { |
| | | var that = this; |
| | |
| | | }; |
| | | }, |
| | | }, |
| | | props: [], |
| | | methods: { |
| | | //图片上传 |
| | | beforeAvatarUpload(file) { |
| | | var isJPG = true; |
| | | const picType = file.type; |
| | | const isLt2M = file.size / 1024 / 1024 < 2; |
| | | |
| | | if ( |
| | | picType != "image/jpeg" && |
| | | picType != "image/jpg" && |
| | | picType != "image/png" |
| | | ) { |
| | | isJPG = true; |
| | | this.$message.error("必须时图片格式!"); |
| | | } |
| | | if (!isLt2M) { |
| | | this.$message.error("头像图片不能大于 2MB!"); |
| | | } |
| | | return picType && isLt2M; |
| | | }, |
| | | //自定义上传 |
| | | httpRequest(opt) { |
| | | var that = this; |
| | | const file = opt.file; |
| | | // 根据后台需求数据格式 |
| | | const form = new FormData(); |
| | | // 文件对象 |
| | | form.append("file", file); |
| | | putFile(form).then((res) => { |
| | | that.imageUrl = res.data.data.url; |
| | | }); |
| | | }, |
| | | //注册 tag 切换 |
| | | handleChange(column) { |
| | | this.type = column; |
| | | var height = "500px"; |
| | | if (column.prop == "tab2") { |
| | | height = "800px"; |
| | | } |
| | | this.$emit("height", height); |
| | | }, |
| | | //获取辖区数据 |
| | | getJurisdictionTree() { |
| | | var that = this; |
| | | getJurisdictionTree().then((res) => { |
| | | that.jurisdictionDic = res.data.data; |
| | | that.defaultExpandedKeys = []; |
| | | res.data.data.forEach((item) => { |
| | | that.defaultExpandedKeys.push(item.id); |
| | | }); |
| | | }); |
| | | }, |
| | | //获取企业属性数据 |
| | | getDictionary() { |
| | | var that = this; |
| | | var data = { |
| | | code: "stats", |
| | | }; |
| | | getDictionary(data).then((res) => { |
| | | // console.log(res.data.data, 111111); |
| | | that.statsDic = res.data.data; |
| | | }); |
| | | }, |
| | | ergodicData(val) { |
| | | var arr = []; |
| | | |
| | | val.forEach((item, index) => { |
| | | arr.push({ |
| | | label: item.title, |
| | |
| | | var z = document.querySelector(".z"); |
| | | z.style.display = "none"; |
| | | this.clearValidate("loginForm"); |
| | | this.clearValidate("loginForm"); |
| | | }, |
| | | gb() { |
| | | this.loginForm.cardid = ""; |
| | |
| | | ? (this.passwordType = "password2") |
| | | : (this.passwordType = ""); |
| | | }, |
| | | //个人注册提交 |
| | | handleLogin() { |
| | | this.$refs.loginForm.validate((valid) => { |
| | | if (valid) { |
| | | this.refreshCode(this.loginForm); |
| | | // this.message("dahsiofhiusa"); |
| | | return Promise.reject(new Error("注册成功,待审核")); |
| | | } |
| | | }); |
| | | }, |
| | | //公司注册提交 |
| | | handleUnitRegister() { |
| | | var that = this; |
| | | this.$refs.unitForm.validate((valid) => { |
| | | if (valid) { |
| | | this.unitForm.businessLicense = this.imageUrl; |
| | | //提交 |
| | | add(this.unitForm).then((res) => { |
| | | //恢复表单默认值 |
| | | that.$refs["unitForm"].resetFields(); |
| | | that.imageUrl = ""; |
| | | this.$message({ |
| | | type: "success", |
| | | message: "注冊成功,待审核!", |
| | | }); |
| | | }); |
| | | } |
| | | }); |
| | | }, |
| | |
| | | -webkit-transition: 0.25s; |
| | | transition: 0.25s; |
| | | } |
| | | |
| | | .avatar-uploader .el-upload { |
| | | border: 1px dashed #d9d9d9; |
| | | border-radius: 6px; |
| | | cursor: pointer; |
| | | position: relative; |
| | | overflow: hidden; |
| | | } |
| | | .avatar-uploader .el-upload:hover { |
| | | border-color: #409eff; |
| | | } |
| | | .avatar-uploader-icon { |
| | | font-size: 28px; |
| | | color: #8c939d; |
| | | width: 178px; |
| | | height: 178px; |
| | | line-height: 178px; |
| | | text-align: center; |
| | | } |
| | | .avatar { |
| | | width: 178px; |
| | | height: 178px; |
| | | display: block; |
| | | } |
| | | </style> |