页面修改

src/components/TravelManager/TravelLeader/Leader.vue

 <style>
-.Leader input.normalBtn {
+  .Leader input.normalBtn {
     width: auto;
     padding: 0 30px;
-}
-.Leader .addCompany {
+  }
+
+  .Leader .addCompany {
     width: 440px;
     height: 600px;
-}
-.Leader .addCompany .el-dialog__body {
+  }
+
+  .Leader .addCompany .el-dialog__body {
     height: 486px;
     overflow: auto;
-}
-.Leader .name_input .el-form-item__content .el-input input {
+  }
+
+  .Leader .name_input .el-form-item__content .el-input input {
     border-radius: 0;
-}
-.Leader .name_input .el-form-item__content .el-input:first-child input {
+  }
+
+  .Leader .name_input .el-form-item__content .el-input:first-child input {
     border-top-left-radius: 17px;
     border-bottom-left-radius: 17px;
-}
-.Leader
-  .cn_name
-  .el-form-item:nth-child(2)
-  .el-form-item__content
-  .el-input:last-child
-  input,
-.Leader .is-error .el-form-item__content {
+  }
+
+  .Leader .cn_name .el-form-item:nth-child(2) .el-form-item__content .el-input:last-child input,
+  .Leader .is-error .el-form-item__content {
     border-top-right-radius: 17px;
     border-bottom-right-radius: 17px;
-}
-.Leader .el-form-item__content .el-textarea {
+  }
+
+  .Leader .el-form-item__content .el-textarea {
     width: 217px;
-}
-.Leader .cn_name .el-form-item:nth-child(1) {
+  }
+
+  .Leader .cn_name .el-form-item:nth-child(1) {
     width: 55%;
     float: left;
-}
-.Leader .cn_name .el-form-item:nth-child(2) {
+  }
+
+  .Leader .cn_name .el-form-item:nth-child(2) {
     width: 45%;
     float: left;
     position: relative;
     left: -5px;
-}
-.Leader .cn_name .el-form-item:nth-child(2) .el-form-item__content {
+  }
+
+  .Leader .cn_name .el-form-item:nth-child(2) .el-form-item__content {
     margin: 0 !important;
-}
-.Leader .cn_name .el-form-item:nth-child(2) .el-form-item__content input {
+  }
+
+  .Leader .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;
-}
-.Leader .cn_name .name_input .el-form-item__content,
-.Leader .cn_name .name_input .el-form-item__content .el-input input {
+  }
+
+  .Leader .cn_name .name_input .el-form-item__content,
+  .Leader .cn_name .name_input .el-form-item__content .el-input input {
     width: 108.5px;
-}
-.Leader .time .el-input--prefix .el-input__inner {
+  }
+
+  .Leader .time .el-input--prefix .el-input__inner {
     padding-left: 30px;
-}
-.Leader .contentDiv {
+  }
+
+  .Leader .contentDiv {
     width: 100%;
     min-height: 500px;
     margin-top: 40px;
-}
-.Leader .query-box {
+  }
+
+  .Leader .query-box {
     border-bottom: none;
-}
-.Leader .listDiv {
+  }
+
+  .Leader .listDiv {
     width: 360px;
     height: 220px;
     background-color: #fff;
@@ -72,8 +82,9 @@
     float: left;
     border-radius: 4px;
     position: relative;
-}
-.Leader .topInfo {
+  }
+
+  .Leader .topInfo {
     width: 100%;
     height: 100%;
     background: url(../../../assets/img/fangwei.png);
@@ -81,65 +92,78 @@
     color: #666666;
     border-radius: 4px;
     position: relative;
-}
-.Leader .leftImg {
+  }
+
+  .Leader .leftImg {
     float: left;
     margin: 16px 0 0 20px;
     width: 80px;
     text-align: center;
-}
-.Leader .leftImg div {
+  }
+
+  .Leader .leftImg div {
     width: 80px;
     height: 80px;
     margin-bottom: 7px;
     overflow: hidden;
-}
-.Leader .leftImg div img {
+  }
+
+  .Leader .leftImg div img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
-}
-.Leader .midInfo {
+  }
+
+  .Leader .midInfo {
     float: left;
     margin: 16px 0 0 20px;
     line-height: 20px;
-}
-.Leader .nainfo {
+  }
+
+  .Leader .nainfo {
     font-size: 14px;
     color: #666;
-}
-.Leader .naIn {
+  }
+
+  .Leader .naIn {
     color: #333;
-}
-.Leader .midList {
+  }
+
+  .Leader .midList {
     margin-top: 16px;
-}
-.Leader .icon-dianhua {
+  }
+
+  .Leader .icon-dianhua {
     color: #47bf8c;
     margin-right: 10px;
-}
-.Leader .leftCode {
+  }
+
+  .Leader .leftCode {
     float: left;
     margin: 5px 0 0 10px;
-}
-.Leader .phoneNum {
+  }
+
+  .Leader .phoneNum {
     float: right;
     font-size: 14px;
     color: #333;
     margin: 35px 30px 0 0;
-}
-.Leader .botmInfo {
+  }
+
+  .Leader .botmInfo {
     float: left;
     width: 100%;
     margin-top: 15px;
-}
-.Leader .lagurage {
+  }
+
+  .Leader .lagurage {
     width: 160px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-}
-.Leader .btnList {
+  }
+
+  .Leader .btnList {
     position: absolute;
     top: 0;
     right: 0;
@@ -151,38 +175,46 @@
     color: #fff;
     font-size: 12px;
     border-radius: 4px;
-}
-.Leader .btnList span {
+  }
+
+  .Leader .btnList span {
     display: inline-block;
     width: 35px;
     cursor: pointer;
     position: relative;
-}
-.Leader .btnList span:last-child{
-  width:65px;
-}
-.Leader .btnList span i {
+  }
+
+  .Leader .btnList span:last-child {
+    width: 65px;
+  }
+
+  .Leader .btnList span i {
     position: absolute;
     top: 11px;
     left: 35px;
     width: 1px;
     height: 10px;
     background-color: #fff;
-}
-.Leader .listDiv:hover .btnList {
+  }
+
+  .Leader .listDiv:hover .btnList {
     display: block;
-}
-.Leader .listDiv:hover {
+  }
+
+  .Leader .listDiv:hover {
     box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
     transition: all linear 0.5s;
-}
-.Leader .leftCode text {
+  }
+
+  .Leader .leftCode text {
     letter-spacing: 18px;
-}
-.Leader .leftCode canvas {
+  }
+
+  .Leader .leftCode canvas {
     height: 60px;
-}
-.Leader ._sanjiao_{
+  }
+
+  .Leader ._sanjiao_ {
     position: absolute;
     top: 0;
     left: 0;
@@ -193,8 +225,9 @@
     border-left: 20px solid #e73828;
     border-right: 20px solid transparent;
     z-index: 20;
-}
-.Leader ._sanjiao_:after {
+  }
+
+  .Leader ._sanjiao_:after {
     content: '同';
     position: absolute;
     top: -15px;
@@ -202,10 +235,12 @@
     white-space: nowrap;
     color: #FFFFFF;
     font-size: 12px;
-}
-.Leader ._sanjiao_._sanjiao_lin:after{
+  }
+
+  .Leader ._sanjiao_._sanjiao_lin:after {
     content: '临';
-}
+  }
+
 </style>
 <template>
   <div class="flexOne Leader">
@@ -234,12 +269,15 @@
         <li>
           <span>
             <em>{{$t('system.query_name')}}</em>
-            <el-input v-model="msg.FullName" clearable @keyup.native.enter="getList" :placeholder="$t('system.ph_in')"></el-input>
+            <el-input v-model="msg.FullName" clearable @keyup.native.enter="getList" :placeholder="$t('system.ph_in')">
+            </el-input>
           </span>
         </li>
         <li>
-          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()" />
-          <input type="button" class="normalBtn" :value="$t('admin.admin_addGuide')" @click="outerVisible = true,dialogTitle='新增领队',initAddMsg()" />
+          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
+            @click="resetPageIndex(),getList()" />
+          <input type="button" class="normalBtn" :value="$t('admin.admin_addGuide')"
+            @click="outerVisible = true,dialogTitle='新增领队',initAddMsg()" />
         </li>
       </ul>
     </div>
@@ -256,11 +294,13 @@
             <span>{{item.TypeEnumStr}}</span>
           </div>
           <div class="midInfo">
-            <div class="nainfo">{{$t('admin.admin_xing')}}：<span class="naIn">{{item.Surname}}/{{item.EnSurname}}</span></div>
+            <div class="nainfo">{{$t('admin.admin_xing')}}：<span class="naIn">{{item.Surname}}/{{item.EnSurname}}</span>
+            </div>
             <div class="nainfo">{{$t('admin.admin_ming')}}：<span class="naIn">{{item.Name}}/{{item.EnName}}</span></div>
             <div class="midList">{{$t('system.table_sex')}}：{{item.Sex==0?'男/M':'女/F'}}</div>
             <div>{{$t('system.query_goCoun')}}：{{item.CountryName}}</div>
-            <el-tooltip class="item" effect="dark" :content="item.LanguageName" placement="top-start" popper-class="max-w200">
+            <el-tooltip class="item" effect="dark" :content="item.LanguageName" placement="top-start"
+              popper-class="max-w200">
               <div class="lagurage" v-if="item.Type==3">{{$t('system.query_Language')}}：{{item.LanguageName}}
               </div>
             </el-tooltip>
@@ -275,7 +315,8 @@
             </div>
           </div>
           <div class="btnList">
-            <span @click="outerVisible=true,updateData(item.ID),dialogTitle='修改领队'">{{$t('pub.updateMsg')}}<i></i></span>
+            <span
+              @click="outerVisible=true,updateData(item.ID),dialogTitle='修改领队'">{{$t('pub.updateMsg')}}<i></i></span>
             <span @click="goUrl('leaderChedule',item.ID)">{{$t('leader.leader_schedule')}}<i></i></span>
             <span @click="goUrl2('leaderStateDetails',item.ID)">{{$t('leader.leader_performance')}}<i></i></span>
             <span @click="deletelist(item.ID)">{{$t('system.table_delete')}}<i></i></span>
@@ -284,10 +325,11 @@
         </div>
       </div>
     </div>
-    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage" layout="total,prev, pager, next, jumper"
-      :page-size=msg.pageSize :total="msg.total">
+    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage"
+      layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total="msg.total">
     </el-pagination>
-    <el-dialog custom-class='addCompany' :title="dialogTitle" :visible.sync="outerVisible" center :before-close="closeChangeMachie">
+    <el-dialog custom-class='addCompany' :title="dialogTitle" :visible.sync="outerVisible" center
+      :before-close="closeChangeMachie">
       <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
         <el-form-item :label="$t('system.query_workType')" prop="LeaderGuidClass">
           <el-select v-model="addMsg.LeaderGuidClass" :placeholder="$t('admin.admin_workType')" class="w210">
@@ -298,10 +340,12 @@
         </el-form-item>
         <div class="cn_name clearfix">
           <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-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-input v-model="addMsg.Name" :placeholder="$t('admin.admin_ming')"
+              v-on:input="setEngName(2,addMsg.Name)"></el-input>
           </el-form-item>
         </div>
         <div class="cn_name clearfix">
@@ -344,11 +388,12 @@
           </el-select>
         </el-form-item> -->
         <el-form-item :label="$t('admin.admin_IDcard')" prop="IdCard" class="other_input">
-          <el-input type="text" v-model="addMsg.IdCard" :placeholder="$t('admin.admin_phIDcard')" class="w210"></el-input>
+          <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'>
-          <el-date-picker class="w210" v-model="addMsg.BirthDate" type="date" :placeholder="$t('admin.admin_phBirthDate')"
-            value-format="yyyy-MM-dd">
+          <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">
@@ -364,13 +409,16 @@
           </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-input type="text" v-model="addMsg.MobilePhone" :placeholder="$t('admin.admin_phPhone')" class="w210">
+          </el-input>
         </el-form-item>
         <el-form-item :label="$t('op.JWPhone')" class="other_input">
-          <el-input type="text" v-model="addMsg.SpareTel" :placeholder="$t('admin.admin_SpareTel')" class="w210"></el-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')" 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-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">
           <el-select v-model="addMsg.IssuePlace" filterable :placeholder="$t('admin.admin_phIssuePlace')" class="w210">
@@ -395,7 +443,8 @@
           </el-radio-group>
         </el-form-item>
         <template>
-          <el-form-item :label="$t('op.AccountOverdue')" v-if="addMsg.LeaderGuidClass!== '0'" prop="ValidDate" class='time'>
+          <el-form-item :label="$t('op.AccountOverdue')" v-if="addMsg.LeaderGuidClass!== '0'" prop="ValidDate"
+            class='time'>
             <el-date-picker class="w210" v-model="addMsg.ValidDate" type="date" :placeholder="$t('admin.admin_choDate')"
               value-format="yyyy-MM-dd">
             </el-date-picker>
@@ -411,22 +460,23 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> &nbsp;
-        <button class="hollowFixedBtn" @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button>
+        <el-button type="primary" class="normalBtn" @click="submitForm('addMsg')" :loading="saveLoading">{{$t('pub.saveBtn')}}
+        </el-button>
+        <el-button class="hollowFixedBtn" @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}
+        </el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 <script>
-export default {
+  export default {
     data() {
       return {
         outerVisible: false,
         //选择的语言
         LanguageIdS: "",
         //默认图片
-      defaultImg:
-        'this.src="' + require("../../../assets/img/default_head_img.jpg") + '"',
+        defaultImg: 'this.src="' + require("../../../assets/img/default_head_img.jpg") + '"',
         //下拉框默认值
         DefaultSelectValue: 0,
         //分公司默认值
@@ -456,7 +506,7 @@ export default {
           BirthPlace: "",
           Sex: "",
           MobilePhone: "",
-        SpareTel:'',
+          SpareTel: '',
           Passport: "",
           IssuePlace: "",
           IssueDate: "",
@@ -469,8 +519,7 @@ export default {
           LeaderGuidClass: "",
           ValidDate: "",
         },
-      SexOptions: [
-        {
+        SexOptions: [{
             value: "0",
             type: "男"
           },
@@ -499,29 +548,22 @@ export default {
         loading: true,
         rules: {
           //表单必填验证
-        CountryID: [
-          {
+          CountryID: [{
             required: true,
             message: this.$t('visaT.qxzguojia'),
             trigger: "change"
-          }
-        ],
-        LeaderGuidClass: [
-          {
+          }],
+          LeaderGuidClass: [{
             required: true,
             message: "请选择工作类型",
             trigger: "change"
-          }
-        ],
-        RB_Branch_id: [
-          {
+          }],
+          RB_Branch_id: [{
             required: true,
             message: "请选择所属公司",
             trigger: "change"
-          }
-        ],
-        Surname: [
-          {
+          }],
+          Surname: [{
               required: true,
               message: "请输入中文姓",
               trigger: "change"
@@ -531,8 +573,7 @@ export default {
               message: "请输入中文姓"
             }
           ],
-        Name: [
-          {
+          Name: [{
               required: true,
               message: "请输入中文名",
               trigger: "change"
@@ -542,8 +583,7 @@ export default {
               message: "请输入中文名"
             }
           ],
-        EnSurname: [
-          {
+          EnSurname: [{
               required: true,
               message: "请输入英文姓",
               trigger: "change"
@@ -553,8 +593,7 @@ export default {
               message: "请输入英文姓"
             }
           ],
-        EnName: [
-          {
+          EnName: [{
               required: true,
               message: "请输入英文名",
               trigger: "change"
@@ -564,8 +603,7 @@ export default {
               message: "请输入英文名"
             }
           ],
-        IdCard: [
-          {
+          IdCard: [{
               required: true,
               message: "请输正确的身份证号",
               trigger: "change"
@@ -575,22 +613,17 @@ export default {
               message: "请输正确的身份证号"
             }
           ],
-        BirthDate: [
-          {
+          BirthDate: [{
             required: true,
             message: "请选择出生日期",
             trigger: "change"
-          }
-        ],
-        Sex: [
-          {
+          }],
+          Sex: [{
             required: true,
             message: "请选择性别",
             trigger: "change"
-          }
-        ],
-        MobilePhone: [
-          {
+          }],
+          MobilePhone: [{
               required: true,
               message: "请输正确的手机号",
               trigger: "change"
@@ -600,8 +633,7 @@ export default {
               message: "请输正确的手机号"
             }
           ],
-        Passport: [
-          {
+          Passport: [{
               required: true,
               message: "请输正确的护照号",
               trigger: "change"
@@ -611,49 +643,38 @@ export default {
               message: "请输正确的护照号"
             }
           ],
-        IssuePlace: [
-          {
+          IssuePlace: [{
             required: true,
             message: "请选择签发国家",
             trigger: "change"
-          }
-        ],
-        IssuePlaceCity: [
-          {
+          }],
+          IssuePlaceCity: [{
             required: true,
             message: "请选择签发城市",
             trigger: "change"
-          }
-        ],
-        IssueDate: [
-          {
+          }],
+          IssueDate: [{
             required: true,
             message: "请选择签发日期",
             trigger: "change"
-          }
-        ],
-        ExpiryDate: [
-          {
+          }],
+          ExpiryDate: [{
             required: true,
             message: "请选择过期日",
             trigger: "change"
-          }
-        ],
-        ValidDate: [
-          {
+          }],
+          ValidDate: [{
             required: true,
             message: "请选择过期日",
             trigger: "change"
-          }
-        ],
-        BirthPlace: [
-          {
+          }],
+          BirthPlace: [{
             required: true,
             message: this.$t('visaT.qxzguojia'),
             trigger: "change"
-          }
-        ]
-      }
+          }]
+        },
+        saveLoading:false,
       };
     },
     methods: {
@@ -661,7 +682,12 @@ export default {
       AccountManage(item) {
         this.$router.push({
           name: "empBankAccount",
-        query: { id: item.ID, type: 7,blank:'y',tab:'账户管理'}
+          query: {
+            id: item.ID,
+            type: 7,
+            blank: 'y',
+            tab: '账户管理'
+          }
         });
       },
       setEngName(type, name) {
@@ -678,8 +704,8 @@ export default {
           path: path,
           query: {
             id: ID,
-          blank:'y',
-          tab:'档期管理'
+            blank: 'y',
+            tab: '档期管理'
           }
         });
       },
@@ -689,8 +715,8 @@ export default {
           query: {
             id: ID,
             Type: 2,
-          blank:'y',
-          tab:'绩效统计'
+            blank: 'y',
+            tab: '绩效统计'
           }
         });
       },
@@ -716,8 +742,7 @@ export default {
       getCountry() {
         //获取国家
         this.apipost(
-        "dict_post_Destination_GetCountry",
-        {},
+          "dict_post_Destination_GetCountry", {},
           res => {
             this.countryList = res.data.data;
           },
@@ -727,8 +752,7 @@ export default {
       //获取工作类型(值获取领兼地和导游)
       getWorkType() {
         this.apipost(
-        "leader_post_GetType",
-        {},
+          "leader_post_GetType", {},
           res => {
             if (res.data.resultCode == 1) {
               res.data.data.forEach(item => {
@@ -744,8 +768,7 @@ export default {
       //获取中国下面的城市列表
       getCityList() {
         this.apipost(
-        "dict_post_Destination_GetChildList",
-        {
+          "dict_post_Destination_GetChildList", {
             Id: 2
           },
           res => {
@@ -757,8 +780,7 @@ export default {
       //获取语言
       getLanguage() {
         this.apipost(
-        "language_post_GetList",
-        {},
+          "language_post_GetList", {},
           res => {
             this.LanguageList = res.data.data;
           },
@@ -801,10 +823,12 @@ export default {
       },
       //添加
       addGroupGuide() {
+        this.saveLoading=true;
         this.apipost(
           "leader_post_Set",
           this.addMsg,
           res => {
+            this.saveLoading=false;
             if (res.data.resultCode == 1) {
               this.Success(this.$t('tips.saveYes'));
               this.getList();
@@ -814,7 +838,9 @@ export default {
               this.Error(res.data.message);
             }
           },
-        err => {}
+          err => {
+            this.saveLoading=false;
+          }
         );
       },
       submitForm(addMsg) {
@@ -837,10 +863,9 @@ export default {
       },
       deletelist(ID) {
         var that = this;
-      that.Confirm(this.$t('tips.shifoushanchu'), function() {
+        that.Confirm(this.$t('tips.shifoushanchu'), function () {
           that.apipost(
-          "leader_post_Remove",
-          {
+            "leader_post_Remove", {
               ID: ID
             },
             res => {
@@ -892,8 +917,7 @@ export default {
       updateData(ID) {
         this.LanguageIdS = [];
         this.apipost(
-        "leader_post_Get",
-        {
+          "leader_post_Get", {
             ID: ID
           },
           res => {
@@ -938,5 +962,6 @@ export default {
       this.getEmployeeList();
       this.getBranchList();
     }
-};
+  };
+
 </script>