<style> .guideMg input.normalBtn { width: auto; padding: 0 30px; } .guideMg .addCompany { width: 440px; height: 600px; } .guideMg .addCompany .el-dialog__body { height: 486px; overflow: auto; } .guideMg .name_input .el-form-item__content .el-input input { border-radius: 0; } .guideMg .name_input .el-form-item__content .el-input:first-child input { border-top-left-radius: 17px; border-bottom-left-radius: 17px; } .guideMg .cn_name .el-form-item:nth-child(2) .el-form-item__content .el-input:last-child input, .guideMg .is-error .el-form-item__content { border-top-right-radius: 17px; border-bottom-right-radius: 17px; } .guideMg .el-form-item__content .el-textarea { width: 217px; } .guideMg .cn_name .el-form-item:nth-child(1) { width: 55%; float: left; } .guideMg .cn_name .el-form-item:nth-child(2) { width: 45%; float: left; position: relative; left: -5px; } .guideMg .cn_name .el-form-item:nth-child(2) .el-form-item__content { margin: 0 !important; } .guideMg .cn_name .el-form-item:nth-child(2) .el-form-item__content input { border-radius: 0; border-top-right-radius: 17px; border-bottom-right-radius: 17px; } .guideMg .cn_name .name_input .el-form-item__content, .guideMg .cn_name .name_input .el-form-item__content .el-input input { width: 108.5px; } .guideMg .time .el-input--prefix .el-input__inner { padding-left: 30px; } .guideMg .contentDiv { width: 100%; min-height: 500px; margin-top: 40px; } .guideMg .query-box { border-bottom: none; } .guideMg .listDiv { width: 360px; height: 220px; background-color: #fff; margin: 0 40px 40px 0; float: left; border-radius: 4px; } .guideMg .topInfo { width: 100%; height: 100%; background: url(../../assets/img/fangwei.png); font-size: 12px; color: #666666; border-radius: 4px; position: relative; } .guideMg .leftImg { float: left; margin: 16px 0 0 20px; width: 80px; text-align: center; } .guideMg .leftImg div { width: 80px; height: 80px; margin-bottom: 7px; overflow: hidden; } .guideMg .leftImg div img { width: 100%; height: 100%; border-radius: 50%; } .guideMg .midInfo { float: left; margin: 16px 0 0 20px; line-height: 20px; } .guideMg .nainfo { font-size: 14px; color: #666; } .guideMg .naIn { color: #333; } .guideMg .midList { margin-top: 16px; } .guideMg .icon-dianhua ,.guideMg .icon-zuoji{ color: #47bf8c; margin-right: 10px; } .guideMg .leftCode { float: left; margin: 5px 0 0 10px; } .guideMg .phoneNum { float: right; font-size: 14px; color: #333; margin: 15px 30px 0 0; } .guideMg .botmInfo { float: left; width: 100%; margin-top: 15px; } .guideMg .lagurage { width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .guideMg .btnList { position: absolute; top: 0; right: 0; height: 30px; line-height: 30px; display: none; background-color: #e95252; text-align: center; color: #fff; font-size: 12px; border-radius: 4px; } .guideMg .btnList span { display: inline-block; width: 35px; cursor: pointer; position: relative; } .guideMg .btnList span i { position: absolute; top: 11px; left: 35px; width: 1px; height: 10px; background-color: #fff; } .guideMg .listDiv:hover .btnList { display: block; } .guideMg .listDiv:hover { box-shadow: 0px 0px 20px rgba(191, 191, 191, 1); transition: all linear 0.5s; } .guideMg .leftCode text { letter-spacing: 18px; } .guideMg .leftCode canvas { height: 60px; } .guideMg ._sanjiao_{ position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 20px solid #e73828; border-bottom: 20px solid transparent; border-left: 20px solid #e73828; border-right: 20px solid transparent; } .guideMg ._sanjiao_:after { content: '外'; position: absolute; top: -15px; left: -14px; white-space: nowrap; color: #FFFFFF; font-size: 12px; } .guideMg ._regMsg{ width: 380px; } .guideMg ._regMsg .el-dialog__body div { display: flex; } .guideMg ._regMsg .el-dialog__body div p{ color: #666; width: 50%; } .guideMg ._regMsg .el-dialog__body div p i{ display: inline-block; width: 80px; text-align: right; } .guideMg ._regMsg .el-dialog__body div p span{ color: #333; } .guideMg ._regMsg .el-dialog__body p._regMsg_tips{ color: red; font-size: 12px; margin-top: 10px; text-align: center; } .guideMg ._regMsg .el-dialog__body{ padding-bottom: 0; } </style> <template> <div class="flexOne guideMg"> <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px"> <table> <tr> <td> <el-form-item> <el-radio-group v-model="addMsg.LeaderGuidClass"> <el-radio :label="0">{{$t('admin.admin_waiGuideT')}}</el-radio> <el-radio :label="1">{{$t('admin.admin_GuideLeibieT')}}</el-radio> </el-radio-group> </el-form-item> </td> </tr> <tr> <el-form-item :label="$t('system.query_workType')" prop="Type" v-if="addMsg.LeaderGuidClass==0"> <el-select v-model="addMsg.Type" :placeholder="$t('admin.admin_workType')" class="w210"> <el-option v-for='item in workTypeList' :key="item.Value" :label="item.Key" :value="item.Value"> </el-option> </el-select> </el-form-item> </td> <td> <el-form-item :label="$t('admin.admin_language')" class='multiple_input LanguageList' v-if="addMsg.Type==3&&addMsg.LeaderGuidClass==0"> <el-select v-model="LanguageIdS" multiple :placeholder="$t('admin.admin_phlanguage')" class="w210"> <el-option v-for='item in LanguageList' :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </el-form-item> </td> <td> <el-form-item label="类型" v-if="addMsg.Type==2&&addMsg.LeaderGuidClass==0"> <el-radio-group v-model="addMsg.LeaderGuidType"> <el-radio label="1">长线</el-radio> <el-radio label="2">短线</el-radio> </el-radio-group> </el-form-item> </td> <td> <el-form-item :label="$t('admin.admin_Surname')" prop="Surname" class="name_input"> <el-input v-model="addMsg.Surname" :placeholder="$t('admin.admin_xing')" v-on:input="setEngName(1,addMsg.Surname)"></el-input> </el-form-item> <el-form-item prop="Name" class="name_input"> <el-input v-model="addMsg.Name" :placeholder="$t('admin.admin_ming')" v-on:input="setEngName(2,addMsg.Name)"></el-input> </el-form-item> </td> <td> <div class="cn_name clearfix" v-if="addMsg.LeaderGuidClass==0"> <el-form-item :label="$t('admin.admin_EnSurname')" prop="EnSurname" class="name_input"> <el-input v-model="addMsg.EnSurname" :placeholder="$t('admin.admin_xing')"></el-input> </el-form-item> <el-form-item prop="EnName" class="name_input"> <el-input v-model="addMsg.EnName" :placeholder="$t('admin.admin_ming')"></el-input> </el-form-item> </div> </td> </tr> </table> <el-form-item :label="$t('system.query_goCoun')" prop="CountryID" v-if="addMsg.LeaderGuidClass==0"> <el-select v-model="addMsg.CountryID" filterable :placeholder="$t('admin.admin_choCou')" class="w210"> <el-option v-for='item in countryList' :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </el-form-item> <el-form-item :label="$t('system.query_company')" prop="RB_Branch_id" v-if="addMsg.LeaderGuidClass==0"> <el-select v-model="addMsg.RB_Branch_id" filterable :placeholder="$t('system.ph_choice')" class="w210" @change="getDerpartMent(addMsg.RB_Branch_id)"> <el-option v-for='item in BranchList' :key="item.Id" :label="item.BName" :value="item.Id"> </el-option> </el-select> </el-form-item> <el-form-item :label="$t('admin.admin_IDcard')" prop="IdCard" class="other_input" v-if="addMsg.LeaderGuidClass==0"> <el-input type="text" v-model="addMsg.IdCard" :placeholder="$t('admin.admin_phIDcard')" class="w210"></el-input> </el-form-item> <el-form-item :label="$t('admin.admin_BirthDate')" prop="BirthDate" class='time' v-if="addMsg.LeaderGuidClass==0"> <el-date-picker class="w210" v-model="addMsg.BirthDate" type="date" :placeholder="$t('admin.admin_phBirthDate')" value-format="yyyy-MM-dd"> </el-date-picker> </el-form-item> <el-form-item :label="$t('admin.admin_BirthPlace')" prop="BirthPlace" v-if="addMsg.LeaderGuidClass==0"> <el-select v-model="addMsg.BirthPlace" filterable :placeholder="$t('admin.admin_phBirthPlace')" class="w210"> <el-option v-for='item in cityList' :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </el-form-item> <el-form-item :label="$t('system.table_sex')" prop="Sex" v-if="addMsg.LeaderGuidClass==0"> <el-select v-model="addMsg.Sex" :placeholder="$t('leader.leader_Sex')" class="w210"> <el-option v-for='item in SexOptions' :key="item.value" :label="item.type" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item :label="$t('pub.mbPhoneNum')" prop="MobilePhone" class="other_input"> <el-input type="text" v-model="addMsg.MobilePhone" :placeholder="$t('admin.admin_phPhone')" class="w210"></el-input> </el-form-item> <el-form-item label="电话" prop="SpareTel" class="other_input"> <el-input type="text" v-model="addMsg.SpareTel" :placeholder="$t('admin.admin_SpareTel')" class="w210"></el-input> </el-form-item> <el-form-item :label="$t('system.table_Passport')" v-if="addMsg.LeaderGuidClass==0" prop="Passport" class="other_input"> <el-input type="text" v-model="addMsg.Passport" :placeholder="$t('system.ph_Passport')" maxlength="9" class="w210"></el-input> </el-form-item> <el-form-item :label="$t('admin.admin_IssuePlace')" prop="IssuePlace" v-if="addMsg.LeaderGuidClass==0"> <el-select v-model="addMsg.IssuePlace" filterable :placeholder="$t('admin.admin_phIssuePlace')" class="w210"> <el-option v-for='item in cityList' :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </el-form-item> <el-form-item :label="$t('admin.admin_IssueDate')" prop="IssueDate" class='time' v-if="addMsg.LeaderGuidClass==0"> <el-date-picker class="w210" v-model="addMsg.IssueDate" type="date" :placeholder="$t('admin.admin_choDate')" value-format="yyyy-MM-dd"> </el-date-picker> </el-form-item> <el-form-item :label="$t('admin.admin_ExpiryDate')" prop="ExpiryDate" class='time' v-if="addMsg.LeaderGuidClass==0"> <el-date-picker class="w210" v-model="addMsg.ExpiryDate" type="date" :placeholder="$t('admin.admin_choDate')" value-format="yyyy-MM-dd"> </el-date-picker> </el-form-item> <el-form-item :label="$t('admin.admin_VisaNumber')" prop="VisaNumber" v-if="addMsg.LeaderGuidClass==0"> <el-radio-group v-model="addMsg.VisaNumber"> <el-radio label="0">{{$t('pub.manyTime')}}</el-radio> <el-radio label="1">{{$t('pub.singleTime')}}</el-radio> </el-radio-group> </el-form-item> <el-form-item :label="$t('hotel.hotel_remark')" v-if="addMsg.LeaderGuidClass==0"> <el-input type="textarea" v-model="addMsg.Remarks" class="w210"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> <button class="hollowFixedBtn" @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button> </div> <el-dialog custom-class='_regMsg' title="提示" :visible.sync="regMsgVisible" center> <div> <p><i>工作类型:</i><span>{{regMsg.TypeName}}</span></p> <p><i>姓名:</i><span>{{regMsg.Name}}</span></p> </div> <div> <p><i>账号:</i><span>{{regMsg.LoginName}}</span></p> <p><i>密码:</i><span>{{regMsg.PassWord}}</span></p> </div> <p class="_regMsg_tips">密码请妥善保管,修改密码请联系行政人员</p> <div slot="footer" class="dialog-footer" style="text-align: right"> <button class="hollowFixedBtn" @click="regMsgVisible=false">确定</button> </div> </el-dialog> </div> </template> <script> export default { data() { return { outerVisible: false, //选择的语言 LanguageIdS: "", //下拉框默认值 DefaultSelectValue: 0, //分公司默认值 BranchDefaultValue: -1, //请求数据参数 msg: { Type: '0', FullName: "", RB_Branch_id: -1, pageIndex: 1, pageSize: 8, total: 0, currentPage: 1, // 查询类型【1-地接查询(领兼地和导游),2-操作查询领队】 QueryType: 0, LeaderGuidClass: -1 }, addMsg: { ID: "0", Type: "", EmployeeId: "", Surname: "", Name: "", EnSurname: "", EnName: "", IdCard: "", BirthDate: "", BirthPlace: "", Sex: "", MobilePhone: "", Passport: "", IssuePlace: "", IssueDate: "", ExpiryDate: "", CountryID: "", LanguageId: "", Remarks: "", VisaNumber: "", LeaderGuidType: "", LeaderGuidClass: 0, SpareTel: '', emRB_Department_Id: '', emRB_Post_Id: '', RB_Branch_id: '', EmPassword: '', EmAccount: '', }, getDepartmentMsg: { RB_Group_Id: '0', RB_Branch_Id: '-1', Status: '0', }, PostList: [], getPostMsg: { RB_Group_Id: '0', RB_Branch_Id: '-1', RB_Department_Id: '0', }, SexOptions: [{ value: "0", type: "男" }, { value: "1", type: "女" } ], //数据列表 DataList: [], //国家列表 countryList: [], //城市列表 cityList: [], //语言列表 LanguageList: [], //工作类型列表 workTypeList: [], //员工列表 EmployeeList: [], //分公司列表 BranchList: [], //部门 departMentList: [], //操作标题 dialogTitle: "", //加载层 loading: true, hidePassworShow: true, regMsgVisible: false, regMsg: {}, rules: { //表单必填验证 CountryID: [{ required: true, message: "请选择国家", trigger: "change" }], Type: [{ required: true, message: "请选择工作类型", trigger: "change" }], RB_Branch_id: [{ required: true, message: "请选择所属公司", trigger: "change" }], emRB_Department_Id: [{ required: true, message: "请选择所属部门", trigger: "change" }], emRB_Post_Id: [{ required: true, message: "请选择所属岗位", trigger: "change" }], Surname: [{ required: true, message: "请输入中文姓", trigger: "change" }, { pattern: this.$commonUtils.Regex.el_IsChinese, message: "请输入中文姓" } ], Name: [{ required: true, message: "请输入中文名", trigger: "change" }, { pattern: this.$commonUtils.Regex.el_IsChinese, message: "请输入中文名" } ], EnSurname: [{ required: true, message: "请输入英文姓", trigger: "change" }, { pattern: this.$commonUtils.Regex.el_IsEnglish, message: "请输入英文姓" } ], EnName: [{ required: true, message: "请输入英文名", trigger: "change" }, { pattern: this.$commonUtils.Regex.el_IsEnglish, message: "请输入英文名" } ], IdCard: [{ required: true, message: "请输正确的身份证号", trigger: "change" }, { pattern: this.$commonUtils.Regex.el_IsIDnumber, message: "请输正确的身份证号" } ], BirthDate: [{ required: true, message: "请选择出生日期", trigger: "change" }], Sex: [{ required: true, message: "请选择性别", trigger: "change" }], MobilePhone: [{ required: true, message: "请输正确的手机号", trigger: "change" }, { pattern: this.$commonUtils.Regex.el_isInteger, message: "请输正确的手机号" } ], // SpareTel: [ // { // pattern: this.$commonUtils.Regex.el_isInteger, // message: "请输正确的电话" // } // ], Passport: [{ required: true, message: "请输正确的护照号", trigger: "change" }, { pattern: this.$commonUtils.Regex.el_IsNumEn, message: "请输正确的护照号" } ], IssuePlace: [{ required: true, message: "请选择签发国家", trigger: "change" }], IssuePlaceCity: [{ required: true, message: "请选择签发城市", trigger: "change" }], IssueDate: [{ required: true, message: "请选择签发日期", trigger: "change" }], ExpiryDate: [{ required: true, message: "请选择过期日", trigger: "change" }], BirthPlace: [{ required: true, message: "请选择国家", trigger: "change" }], EmPassword: [{ required: true, message: "请输入登录账号", trigger: "blur" }], EmAccount: [{ required: true, message: "请输入登录密码", trigger: "blur" }], } }; }, methods: { setEngName(type, name) { if (type == 1 && name != "") { this.addMsg.EnSurname = this.$languageUtils.ConvertChineseToPinYin( name ); } else { this.addMsg.EnName = this.$languageUtils.ConvertChineseToPinYin(name); } }, goUrl(path, ID) { this.$router.push({ path: path, query: { id: ID, blank: 'y', tab: '档期管理' } }); }, goUrl2(path, ID) { this.$router.push({ path: path, query: { id: ID, Type: 2, blank: 'y', tab: '绩效统计' } }); }, //获取现有领队列表 getList() { var that = this; that.loading = true; that.apipost( "leader_post_GetPageList", that.msg, res => { that.loading = false; if (res.data.resultCode == 1) { that.DataList = res.data.data.pageData; that.msg.total = res.data.data.count; } else { that.Error(res.data.message); } }, err => {} ); }, getCountry() { //获取国家 this.apipost( "dict_post_Destination_GetCountry", {}, res => { this.countryList = res.data.data; }, err => {} ); }, //获取工作类型(值获取领兼地和导游) getWorkType() { this.apipost( "leader_post_GetType", {}, res => { if (res.data.resultCode == 1) { res.data.data.forEach(item => { // if (item.Value != 1) { this.workTypeList.push(item); // } }); } }, err => {} ); }, //获取中国下面的城市列表 getCityList() { this.apipost( "dict_post_Destination_GetChildList", { Id: 2 }, res => { this.cityList = res.data.data; }, err => {} ); }, //获取语言 getLanguage() { this.apipost( "language_post_GetList", {}, res => { this.LanguageList = res.data.data; }, err => {} ); }, //获取员工列表获取账号 getEmployeeList() { let msg = { GroupId: "", BranchId: "", DepartmentId: "", PostId: "", IsLeave: "0" }; this.apipost( "admin_get_EmployeeGetList", msg, res => { this.EmployeeList = res.data.data; }, err => {} ); }, //获取公司列表 getBranchList() { let msg = { Status: "0", is_show: "", RB_Group_Id: "" }; this.apipost( "admin_get_BranchGetList", msg, res => { this.BranchList = res.data.data; }, err => {} ); }, //获取部门 getDerpartMent(id) { this.getDepartmentMsg.RB_Branch_Id = id; this.apipost('admin_get_DepartmentGetList', this.getDepartmentMsg, res => { if (res.data.resultCode == 1) { this.departMentList = res.data.data; } else {} }, err => {}) }, //岗位 getPost(id, id2) { this.getPostMsg.RB_Department_Id = id2; this.getPostMsg.RB_Branch_Id = id; this.apipost('admin_get_PostGetList', this.getPostMsg, res => { if (res.data.resultCode == 1) { this.PostList = res.data.data; } else {} }, err => {}) }, //添加 addGroupGuide() { this.apipost( "leader_post_Set", this.addMsg, res => { if (res.data.resultCode == 1) { this.Success("保存成功!"); this.getList(); this.outerVisible = false; this.initAddMsg(); if (res.data.message !== "保存成功") { this.regMsgVisible = true; this.regMsg = res.data.data; } } else { this.Error(res.data.message); } }, err => {} ); }, submitForm(addMsg) { //提交创建、修改表单 let that = this; let LanguageSring = ""; if (this.LanguageIdS != "") { that.LanguageIdS.forEach(x => { LanguageSring = LanguageSring + x + ","; }); } that.addMsg.LanguageId = LanguageSring; that.$refs[addMsg].validate(valid => { if (valid) { that.addGroupGuide(); } else { return false; } }); }, deletelist(ID) { var that = this; that.Confirm("是否删除?", function () { that.apipost( "leader_post_Remove", { ID: ID }, res => { if (res.data.resultCode == 1) { that.getList(); } }, err => {} ); }); }, initAddMsg() { //初始化创建、修改表单数据 let newMsg = { ID: "0", Type: "", EmployeeId: "", Surname: "", Name: "", EnSurname: "", EnName: "", IdCard: "", BirthDate: "", BirthPlace: "", Sex: "", MobilePhone: "", Passport: "", IssuePlace: "", IssueDate: "", ExpiryDate: "", CountryID: "", LanguageId: "", Remarks: "", VisaNumber: "", LeaderGuidType: "", LeaderGuidClass: 0, SpareTel: '', emRB_Department_Id: '', emRB_Post_Id: '', RB_Branch_id: '', EmAccount: '', EmPassword: '' }; this.addMsg = newMsg; }, //翻页功能按钮 handleCurrentChange(val) { this.msg.pageIndex = val; this.getList(); }, //查询初始化页码 resetPageIndex() { this.msg.pageIndex = 1; this.msg.currentPage = 1; }, //修改 updateData(ID) { this.LanguageIdS = []; this.apipost( "leader_post_Get", { ID: ID }, res => { let LanguageIdArr = []; this.addMsg = res.data.data; this.addMsg.Type = this.addMsg.Type.toString(); this.addMsg.Sex = this.addMsg.Sex.toString(); this.addMsg.LeaderGuidType = this.addMsg.LeaderGuidType.toString(); this.addMsg.VisaNumber = this.addMsg.VisaNumber.toString(); if (this.addMsg.emRB_Department_Id) { this.getPost(this.addMsg.RB_Branch_id, this.addMsg.emRB_Department_Id); this.getDerpartMent(this.addMsg.RB_Branch_id) } if (this.addMsg.LanguageId) { this.addMsg.LanguageId = this.addMsg.LanguageId.substr( 0, this.addMsg.LanguageId.length - 1 ); LanguageIdArr = this.addMsg.LanguageId.split(","); LanguageIdArr.forEach(x => { this.LanguageIdS.push(Number(x)); }); } this.getCityList(); }, err => {} ); }, //弹出框关闭初始化弹框内表单 closeChangeMachie(done) { done(); this.resetForm("addMsg"); }, //弹出框取消 初始化谈框内表单 resetForm(formName) { this.$refs[formName].resetFields(); this.LanguageIdS = []; } }, mounted() { this.getList(); this.getCountry(); this.getCityList(); this.getWorkType(); this.getLanguage(); this.getEmployeeList(); this.getBranchList(); let userInfo = this.getLocalStorage(); // this.getPostMsg.RB_Group_Id=this.getDepartmentMsg.RB_Group_Id=this.addMsg.RB_Group_id=this.msg.RB_Group_id=userInfo.RB_Group_id; //集团 } }; </script>