页面修改

src/components/LeaderManagement/leaderScheduleManager.vue

 <style>
-.guidScheduleMg .el-input--prefix .el-input__inner {
-  padding-left: 30px;
-}
-.guidScheduleMg .query-box ul .el-input {
-  width: 150px;
-}
-.guidScheduleMg .guidScheduleMg_list {
-  padding: 20px 0;
-}
-.guidScheduleMg .guidScheduleMg_list > li {
-  float: left;
-  height: 180px;
-  width: 300px;
-  margin: 0 15px;
-  margin-bottom: 20px;
-  overflow: hidden;
-  background: rgba(255, 255, 255, 1);
-  -webkit-box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
-  box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
-}
-.guidScheduleMg .guidScheduleMg_list > li > div {
-  height: 180px;
-  position: relative;
-  border-radius: 4px;
-  overflow: hidden;
-}
-.guidScheduleMg .guidScheduleMg_list > li .hl_img {
-  width: 100%;
-  height: 100%;
-  filter: blur(10px);
-  position: absolute;
-}
-.guidScheduleMg .hl_top {
-  color: #ffffff;
-}
-.guidScheduleMg .hl_tit {
-  width: 230px;
-  font-size: 14px;
-  position: absolute;
-  left: 10px;
-  top: 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-decoration: underline;
-  cursor: pointer;
-}
-.guidScheduleMg .hl_radius {
-  width: 80px;
-  height: 80px;
-  background-color: #ffffff;
-  border: solid 4px rgba(193, 193, 193, 0.46);
-  line-height: 75px;
-  font-size: 16px;
-  border-radius: 50%;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  color: #e95252;
-  text-align: center;
-  font-size: 16px;
-}
-.guidScheduleMg .hl_row {
-  width: 80%;
-  height: 30px;
-  background: rgba(23, 21, 26, 0.2);
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  font-size: 12px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10%;
-}
-.guidScheduleMg .hl_row > li {
-  list-style: disc;
-}
-.guidScheduleMg .guidScheduleMg_info {
-  padding: 0 65px;
-}
-.guidScheduleMg .guidScheduleMg_info .hl_info {
-  color: #333333;
-}
-.guidScheduleMg .guidScheduleMg_info .hl_info span {
-  color: #666666;
-}
-.guidScheduleMg .hl_flight {
-  padding-top: 20px;
-}
-.guidScheduleMg .hl_flight li {
-  display: flex;
-  align-items: center;
-}
-.guidScheduleMg ._go {
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-  background-color: #ff7862;
-  color: white;
-  font-size: 14px;
-  text-align: center;
-  line-height: 20px;
-  border-radius: 4px;
-  margin-right: 10px;
-}
-.guidScheduleMg ._textB14 {
-  color: #333333;
-  font-size: 14px;
-}
-.guidScheduleMg ._timeCity {
-  margin: 15px 49px;
-}
-.guidScheduleMg ._time {
-  color: #666666;
-  font-size: 18px;
-  font-weight: 700;
-}
-.guidScheduleMg ._city {
-  color: #ff7862;
-  font-size: 14px;
-  text-align: center;
-}
-.guidScheduleMg ._line {
-  display: flex;
-  align-items: center;
-}
-.guidScheduleMg ._line span {
-  display: inline-block;
-  width: 50px;
-  height: 2px;
-  background-color: #ff7862;
-}
-.guidScheduleMg ._line span._lr {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  border: solid 2px #ff7862;
-  background-color: white;
-}
-.guidScheduleMg ._flight_num,
-._flight_name {
-  color: #999999;
-  font-size: 14px;
-  font-weight: 700;
-  margin-left: 15px;
-}
-.guidScheduleMg ._flight_name {
-  font-weight: lighter;
-}
-.guidScheduleMg ._margintop30 {
-  margin-top: 30px;
-}
-.guidScheduleMg ._details {
-  margin-left: 20px;
-  padding-top: 20px;
-}
-.guidScheduleMg ._details > li {
-  border-left: 1px solid #e9e9e9;
-  position: relative;
-  padding-bottom: 15px;
-  padding-left: 40px;
-  padding-top: 15px;
-}
-.guidScheduleMg ._d_radius {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  display: inline-block;
-  position: absolute;
-  left: -20px;
-  top: 0px;
-  background-color: #e95252;
-  text-align: center;
-  line-height: 40px;
-  font-size: 18px;
-  color: white;
-  font-weight: 700;
-}
-.guidScheduleMg ._Itinerary {
-  color: #333333;
-  font-size: 18px;
-  display: flex;
-  align-items: center;
-}
-.guidScheduleMg ._Itinerary .iconfont {
-  color: #666666;
-}
-.guidScheduleMg ._d_city,
-._d_time {
-  display: inline-block;
-  padding: 0 20px;
-}
-.guidScheduleMg ._d_time {
-  padding: 0 10px 0 0;
-}
-.guidScheduleMg ._d_info {
-  color: #666666;
-  font-size: 14px;
-  line-height: 22px;
-  padding-top: 16px;
-}
-.guidScheduleMg ._food_hotel {
-  padding-top: 25px;
-}
-.guidScheduleMg ._food_hotel ._food,
-._hotel {
-  float: left;
-  width: 50%;
-}
-.guidScheduleMg ._food_hotel .iconfont::before {
-  font-size: 18px;
-  color: #07a767;
-}
-.guidScheduleMg ._food_hotel ._hotel .iconfont::before {
-  color: #2595ee;
-}
-.guidScheduleMg ._fh_tit {
-  font-size: 16px;
-}
-.guidScheduleMg ._fist {
-  padding-bottom: 10px;
-}
-.guidScheduleMg ._meidonfxi {
-  text-align: center;
-  padding: 25px 0;
-}
-.guidScheduleMg ._meidonfxi .iconfont {
-  display: block;
-  font-size: 50px;
-  color: #d6d6d6;
-}
-.guidScheduleMg ._meidonfxi p {
-  color: #999999;
-  font-size: 14px;
-}
-.guidScheduleMg .el-dialog__header .el-dialog__title {
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 80%;
-  margin: 0 auto;
-}
-.guidScheduleMg .TypeOne {
-  color: #47bf8c;
-}
-.guidScheduleMg .TypeTwo {
-  color: #e95252;
-}
-.guidScheduleMg .typeThree {
-  color: #666666;
-}
-.guidScheduleMg .leaderName {
-  position: relative;
-  top: -10px;
-  left: 5px;
-}
-.guidScheduleMg .headerImg {
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-  display: inline-block;
-}
-.guidScheduleMg .headerImg img {
-  width: 100%;
-  height:100%;
-  border-radius:50%;
-}
-.guidScheduleMg .grayLi img {
-  -webkit-filter: grayscale(1) blur(10px) !important;
-}
-.guidScheduleMg ._vMG_edit{display: none;position:absolute;bottom:0;font-family: 'PingFangSc-Fine';left: 0;border-top:3px solid #38425d;background-color:#fff;padding:10px;width: 100%;}
-.guidScheduleMg ._vMG_edit ._tit{padding-left: 10px;border-left: 3px solid #E95252; font-size: 16px;color: #000000}
-.guidScheduleMg ._vMG_edit ._tit span{color: #666666;font-size: 14px}
-.guidScheduleMg ._edHeight{height:400px;}
-.guidScheduleMg .edHeight{display: block !important;height: 170px;}
-.guidScheduleMg .edHeight form{padding-top: 20px;}
-.guidScheduleMg ._vMG_edit .el-date-editor.el-input,.guidScheduleMg ._vMG_edit .el-date-editor.el-input__inner{
-  width: 100% !important;
-}
+  .guidScheduleMg .el-input--prefix .el-input__inner {
+    padding-left: 30px;
+  }
+
+  .guidScheduleMg .query-box ul .el-input {
+    width: 150px;
+  }
+
+  .guidScheduleMg .guidScheduleMg_list {
+    padding: 20px 0;
+  }
+
+  .guidScheduleMg .guidScheduleMg_list>li {
+    float: left;
+    height: 180px;
+    width: 300px;
+    margin: 0 15px;
+    margin-bottom: 20px;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 1);
+    -webkit-box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
+    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
+  }
+
+  .guidScheduleMg .guidScheduleMg_list>li>div {
+    height: 180px;
+    position: relative;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .guidScheduleMg .guidScheduleMg_list>li .hl_img {
+    width: 100%;
+    height: 100%;
+    filter: blur(10px);
+    position: absolute;
+  }
+
+  .guidScheduleMg .hl_top {
+    color: #ffffff;
+  }
+
+  .guidScheduleMg .hl_tit {
+    width: 230px;
+    font-size: 14px;
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .guidScheduleMg .hl_radius {
+    width: 80px;
+    height: 80px;
+    background-color: #ffffff;
+    border: solid 4px rgba(193, 193, 193, 0.46);
+    line-height: 75px;
+    font-size: 16px;
+    border-radius: 50%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: #e95252;
+    text-align: center;
+    font-size: 16px;
+  }
+
+  .guidScheduleMg .hl_row {
+    width: 80%;
+    height: 30px;
+    background: rgba(23, 21, 26, 0.2);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    font-size: 12px;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10%;
+  }
+
+  .guidScheduleMg .hl_row>li {
+    list-style: disc;
+  }
+
+  .guidScheduleMg .guidScheduleMg_info {
+    padding: 0 65px;
+  }
+
+  .guidScheduleMg .guidScheduleMg_info .hl_info {
+    color: #333333;
+  }
+
+  .guidScheduleMg .guidScheduleMg_info .hl_info span {
+    color: #666666;
+  }
+
+  .guidScheduleMg .hl_flight {
+    padding-top: 20px;
+  }
+
+  .guidScheduleMg .hl_flight li {
+    display: flex;
+    align-items: center;
+  }
+
+  .guidScheduleMg ._go {
+    display: inline-block;
+    height: 20px;
+    width: 20px;
+    background-color: #ff7862;
+    color: white;
+    font-size: 14px;
+    text-align: center;
+    line-height: 20px;
+    border-radius: 4px;
+    margin-right: 10px;
+  }
+
+  .guidScheduleMg ._textB14 {
+    color: #333333;
+    font-size: 14px;
+  }
+
+  .guidScheduleMg ._timeCity {
+    margin: 15px 49px;
+  }
+
+  .guidScheduleMg ._time {
+    color: #666666;
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  .guidScheduleMg ._city {
+    color: #ff7862;
+    font-size: 14px;
+    text-align: center;
+  }
+
+  .guidScheduleMg ._line {
+    display: flex;
+    align-items: center;
+  }
+
+  .guidScheduleMg ._line span {
+    display: inline-block;
+    width: 50px;
+    height: 2px;
+    background-color: #ff7862;
+  }
+
+  .guidScheduleMg ._line span._lr {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    border: solid 2px #ff7862;
+    background-color: white;
+  }
+
+  .guidScheduleMg ._flight_num,
+  ._flight_name {
+    color: #999999;
+    font-size: 14px;
+    font-weight: 700;
+    margin-left: 15px;
+  }
+
+  .guidScheduleMg ._flight_name {
+    font-weight: lighter;
+  }
+
+  .guidScheduleMg ._margintop30 {
+    margin-top: 30px;
+  }
+
+  .guidScheduleMg ._details {
+    margin-left: 20px;
+    padding-top: 20px;
+  }
+
+  .guidScheduleMg ._details>li {
+    border-left: 1px solid #e9e9e9;
+    position: relative;
+    padding-bottom: 15px;
+    padding-left: 40px;
+    padding-top: 15px;
+  }
+
+  .guidScheduleMg ._d_radius {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: inline-block;
+    position: absolute;
+    left: -20px;
+    top: 0px;
+    background-color: #e95252;
+    text-align: center;
+    line-height: 40px;
+    font-size: 18px;
+    color: white;
+    font-weight: 700;
+  }
+
+  .guidScheduleMg ._Itinerary {
+    color: #333333;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+  }
+
+  .guidScheduleMg ._Itinerary .iconfont {
+    color: #666666;
+  }
+
+  .guidScheduleMg ._d_city,
+  ._d_time {
+    display: inline-block;
+    padding: 0 20px;
+  }
+
+  .guidScheduleMg ._d_time {
+    padding: 0 10px 0 0;
+  }
+
+  .guidScheduleMg ._d_info {
+    color: #666666;
+    font-size: 14px;
+    line-height: 22px;
+    padding-top: 16px;
+  }
+
+  .guidScheduleMg ._food_hotel {
+    padding-top: 25px;
+  }
+
+  .guidScheduleMg ._food_hotel ._food,
+  ._hotel {
+    float: left;
+    width: 50%;
+  }
+
+  .guidScheduleMg ._food_hotel .iconfont::before {
+    font-size: 18px;
+    color: #07a767;
+  }
+
+  .guidScheduleMg ._food_hotel ._hotel .iconfont::before {
+    color: #2595ee;
+  }
+
+  .guidScheduleMg ._fh_tit {
+    font-size: 16px;
+  }
+
+  .guidScheduleMg ._fist {
+    padding-bottom: 10px;
+  }
+
+  .guidScheduleMg ._meidonfxi {
+    text-align: center;
+    padding: 25px 0;
+  }
+
+  .guidScheduleMg ._meidonfxi .iconfont {
+    display: block;
+    font-size: 50px;
+    color: #d6d6d6;
+  }
+
+  .guidScheduleMg ._meidonfxi p {
+    color: #999999;
+    font-size: 14px;
+  }
+
+  .guidScheduleMg .el-dialog__header .el-dialog__title {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 80%;
+    margin: 0 auto;
+  }
+
+  .guidScheduleMg .TypeOne {
+    color: #47bf8c;
+  }
+
+  .guidScheduleMg .TypeTwo {
+    color: #e95252;
+  }
+
+  .guidScheduleMg .typeThree {
+    color: #666666;
+  }
+
+  .guidScheduleMg .leaderName {
+    position: relative;
+    top: -10px;
+    left: 5px;
+  }
+
+  .guidScheduleMg .headerImg {
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    display: inline-block;
+  }
+
+  .guidScheduleMg .headerImg img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+
+  .guidScheduleMg .grayLi img {
+    -webkit-filter: grayscale(1) blur(10px) !important;
+  }
+
+  .guidScheduleMg ._vMG_edit {
+    display: none;
+    position: absolute;
+    bottom: 0;
+    font-family: 'PingFangSc-Fine';
+    left: 0;
+    border-top: 3px solid #38425d;
+    background-color: #fff;
+    padding: 10px;
+    width: 100%;
+  }
+
+  .guidScheduleMg ._vMG_edit ._tit {
+    padding-left: 10px;
+    border-left: 3px solid #E95252;
+    font-size: 16px;
+    color: #000000
+  }
+
+  .guidScheduleMg ._vMG_edit ._tit span {
+    color: #666666;
+    font-size: 14px
+  }
+
+  .guidScheduleMg ._edHeight {
+    height: 400px;
+  }
+
+  .guidScheduleMg .edHeight {
+    display: block !important;
+    height: 170px;
+  }
+
+  .guidScheduleMg .edHeight form {
+    padding-top: 20px;
+  }
+
+  .guidScheduleMg ._vMG_edit .el-date-editor.el-input,
+  .guidScheduleMg ._vMG_edit .el-date-editor.el-input__inner {
+    width: 100% !important;
+  }
+
 </style>
 <template>
-     <div class="flexOne guidScheduleMg">
-       <div class="query-box">
-           <ul>
-             <li>
-                <span>
-                  <em>领队/导游</em>
-                  <el-select v-model="msg.LeaderId" filterable :placeholder="$t('admin.admin_phBirthPlace')" class="w210">
-                    <el-option v-for='item in leaderList'
-                               :key="item.ID"
-                               :label="item.Name"
-                               :value="item.ID">
-                    </el-option>
-                  </el-select>
-                </span>
-             </li>
-             <li>
-              <span>
-                <em>档期类型</em>
-                <el-select v-model="msg.ScheduleType" filterable :placeholder="$t('admin.admin_phBirthPlace')" class="w210">
-                  <el-option :label="$t('system.ph_buxian')" value='0'></el-option>
-                  <el-option label="休假" value='1'></el-option>
-                  <el-option label="领队" value='2'></el-option>
-                  <el-option label="领队兼导游" value='3'></el-option>
-                  <el-option label="导游" value='4'></el-option>
-                </el-select>
-              </span>
-             </li>
-              <li>
-                <span>
-                  <em>时间</em>
-                  <el-date-picker
-                    v-model="msg.YearMonth"
-                    value-format="yyyy-MM"
-                    type="month"
-                    placeholder="选择月">
-                  </el-date-picker>
-                </span>
-              </li>
-              <li>
-                <input type="button" class="normalBtn" value="新增档期" @click="addMsg.LeaderId = msg.LeaderId, addShow = true,text='新增',resetForm('addMsg')"/>
-               <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()"/>
-              </li>
-           </ul>           
-       </div>
-       <div :class="addShow==true?'_edHeight':''"  v-loading="loading">
-         <table border="0" cellspacing="1" cellpadding="0" class="singeRowTable" style="border: 1px solid rgb(230, 230, 230);background: #ccc;width: 100%">
-            <tr>
-              <th>领队姓名</th>
-              <th>开始日期</th>
-              <th>结束日期</th>
-              <th>档期类型</th>
-              <th>团队编号</th>
-              <th>备注</th>
-              <th>操作人</th>
-              <th>操作</th>
-            </tr>
-           <tr  v-for="(item, index) in dataList">
-              <td>{{item.LeaderName}}</td>
-              <td>{{item.StartDate}}</td>
-              <td>{{item.EndDate}}</td>
-              <td>
-                <span v-if="item.ScheduleType===0">无安排</span>
-                <span v-if="item.ScheduleType===1">休假</span>
-                <span v-if="item.ScheduleType===2">领队</span>
-                <span v-if="item.ScheduleType===3">领队兼导游</span>
-                <span v-if="item.ScheduleType===4">导游</span>
-              </td>
-              <td><span style="text-decoration: underline;cursor: pointer;color: #3980C8;" @click="goUrl('productQuery',item.TCID)">{{item.TCID}}</span></td>
-              <td>{{item.Remarks}}</td>
-              <td>{{item.OperationName}}</td>
-              <td>
-                <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
-                  <el-button type="primary" class="iconfont icon-bianji-smal" circle @click="editLeader(item)"></el-button>
-                </el-tooltip>
-                <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
-                  <el-button type="danger" class="iconfont icon-img_delete_small" circle @click="removeLeader(item)"></el-button>
-                </el-tooltip>
-              </td>
-           </tr>
-         </table>
-       </div>
-       <div class="_vMG_edit" :class="addShow==true?'edHeight':''">
-         <el-row>
-           <el-col :span="20">
-             <p class="_tit">{{text}}档期资料</p>
-           </el-col>
-           <el-col :span="4" class="_add_saveBtn">
-             <button type="button" class="normalBtn" @click="loading ? '' : submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
-             <button class="hollowFixedBtn" type="button" @click="resetForm('addMsg'),addShow=false">{{$t('pub.cancelBtn')}}</button>
-           </el-col>
-         </el-row>
-         <el-form class=" clearfix" :model="addMsg" ref="addMsg" :rules="rules" label-width="100px">
-           <el-row>
-             <el-col :span="4">
-               <el-form-item label="名称：" prop="LeaderId">
-                 <el-select v-model="addMsg.LeaderId" filterable :placeholder="$t('admin.admin_phBirthPlace')">
-                   <el-option v-for='item in leaderList'
-                              :key="item.ID"
-                              :label="item.Name"
-                              :value="item.ID">
-                   </el-option>
-                 </el-select>
-               </el-form-item>
-             </el-col>
-             <el-col :span="4">
-               <el-form-item label="开始时间：" prop="sDate">
-                 <el-date-picker
-                   v-model="addMsg.StartDate"
-                   type="date"
-                   placeholder="请选择"
-                   value-format="yyyy-MM-dd">
-                 </el-date-picker>
-               </el-form-item>
-             </el-col>
-             <el-col :span="4">
-               <el-form-item label="结束时间：" prop="eDate">
-                 <el-date-picker
-                   v-model="addMsg.EndDate"
-                   type="date"
-                   placeholder="请选择"
-                   value-format="yyyy-MM-dd">
-                 </el-date-picker>
-               </el-form-item>
-             </el-col>
-             <el-col :span="12">
-               <el-form-item label="备注：" prop="eDate">
-                 <el-input type="textarea" v-model="addMsg.Remarks"></el-input>
-               </el-form-item>
-             </el-col>
-           </el-row>
-         </el-form>
-       </div>
-        <div class="noData" v-show="noData">
-            {{$t('system.content_noData')}}
-        </div>
-         <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
-    </el-pagination>
-        <el-dialog custom-class='ComTeamPlan_info_box' :title="tripTitle" :visible.sync="outerVisible" center >
-            <commonTeamInfo ref="comTeam"></commonTeamInfo>
-		</el-dialog>
+  <div class="flexOne guidScheduleMg">
+    <div class="query-box">
+      <ul>
+        <li>
+          <span>
+            <em>领队/导游</em>
+            <el-select v-model="msg.LeaderId" filterable :placeholder="$t('admin.admin_phBirthPlace')" class="w210">
+              <el-option :label="$t('pub.unlimitedSel')" :value="0"> </el-option>
+              <el-option v-for='item in leaderList' :key="item.ID" :label="item.Name" :value="item.ID">
+              </el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>档期类型</em>
+            <el-select v-model="msg.ScheduleType" filterable :placeholder="$t('admin.admin_phBirthPlace')" class="w210">
+              <el-option :label="$t('system.ph_buxian')" :value='0'></el-option>
+              <el-option label="休假" value='1'></el-option>
+              <el-option label="领队" value='2'></el-option>
+              <el-option label="领队兼导游" value='3'></el-option>
+              <el-option label="导游" value='4'></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>时间</em>
+            <el-date-picker v-model="msg.YearMonth" value-format="yyyy-MM" type="month" placeholder="选择月">
+            </el-date-picker>
+          </span>
+        </li>
+        <li>
+          <input type="button" class="normalBtn" value="新增档期"
+            @click="addMsg.LeaderId = msg.LeaderId, addShow = true,text='新增',resetForm('addMsg')" />
+          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
+            @click="resetPageIndex(),getList()" />
+        </li>
+      </ul>
     </div>
-   
+    <div :class="addShow==true?'_edHeight':''">
+      <table border="0" cellspacing="1" cellpadding="0" class="singeRowTable"  v-loading="loading"
+        style="border: 1px solid rgb(230, 230, 230);background: #ccc;width: 100%">
+        <tr>
+          <th>领队/导游姓名</th>
+          <th>开始日期</th>
+          <th>结束日期</th>
+          <th>档期类型</th>
+          <th>团队编号</th>
+          <th>备注</th>
+          <th>操作人</th>
+          <th>操作</th>
+        </tr>
+        <tr v-for="(item, index) in dataList">
+          <td>{{item.LeaderName}}/{{item.GuideName}} </td>
+          <td>{{item.StartDate}}</td>
+          <td>{{item.EndDate}}</td>
+          <td>
+            <span v-if="item.TypeId===0">系统参团</span>
+            <span v-if="item.TypeId===1">休假</span>
+          </td>
+          <td><span style="text-decoration: underline;cursor: pointer;color: #3980C8;"
+              @click="goUrl('productQuery',item.TCID)">{{item.TCID}}</span></td>
+          <td>{{item.Remarks}}</td>
+          <td>{{item.OperationName}}</td>
+          <td>
+            <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
+              <el-button type="primary" class="iconfont icon-bianji-smal" circle @click="editLeader(item)"></el-button>
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
+              <el-button type="danger" class="iconfont icon-img_delete_small" circle @click="removeLeader(item)">
+              </el-button>
+            </el-tooltip>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div class="_vMG_edit" :class="addShow==true?'edHeight':''">
+      <el-row>
+        <el-col :span="20">
+          <p class="_tit">{{text}}档期资料</p>
+        </el-col>
+        <el-col :span="4" class="_add_saveBtn">
+          <button type="button" class="normalBtn"
+            @click="loading ? '' : submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
+          <button class="hollowFixedBtn" type="button"
+            @click="resetForm('addMsg'),addShow=false">{{$t('pub.cancelBtn')}}</button>
+        </el-col>
+      </el-row>
+      <el-form class=" clearfix" :model="addMsg" ref="addMsg" :rules="rules" label-width="100px">
+        <el-row>
+          <el-col :span="4">
+            <el-form-item label="名称：" prop="LeaderId">
+              <el-select v-model="addMsg.LeaderId" filterable :placeholder="$t('admin.admin_phBirthPlace')">
+                <el-option :label="$t('pub.unlimitedSel')" :value="0"> </el-option>
+                <el-option v-for='item in leaderList' :key="item.ID" :label="item.Name" :value="item.ID">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="开始时间：" prop="sDate">
+              <el-date-picker v-model="addMsg.StartDate" type="date" placeholder="请选择" value-format="yyyy-MM-dd">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="结束时间：" prop="eDate">
+              <el-date-picker v-model="addMsg.EndDate" type="date" placeholder="请选择" value-format="yyyy-MM-dd">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注：" prop="eDate">
+              <el-input type="textarea" v-model="addMsg.Remarks"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="noData" v-show="noData">
+      {{$t('system.content_noData')}}
+    </div>
+    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
+      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="total">
+    </el-pagination>
+    <el-dialog custom-class='ComTeamPlan_info_box' :title="tripTitle" :visible.sync="outerVisible" center>
+      <commonTeamInfo ref="comTeam"></commonTeamInfo>
+    </el-dialog>
+  </div>
+
 </template>
 <script>
-import commonTeamInfo from "../commonPage/commonTeamInfo.vue";
-export default {
-  data() {
-    return {
-      msg: {
-        pageIndex: 1,
-        pageSize: 10,
-        LeaderId: "0",
-        ScheduleType:"0",
-        YearMonth: "",
-        TCID:0,
-      },
-      addMsg: {
-        LeaderId: '',
-        StartDate: '',
-        EndDate: '',
-        Remarks: '',
-      },
-      LeaderName: "",
-      EmPhoto:"",
-      TripList: "",
-      dataList: "",
-      total: 0,
-      currentPage: 1,
-      loading: false,
-      noData: false,
-      outerVisible: false,
-      addShow: false,
-      tripTitle: "",
-      leaderList:[],
-      text:'',
-      rules: {//表单必填验证
-        LeaderId: [
-          { required: true, message: '请填写领队名称', trigger: 'blur' }
-        ],
-        StartDate: [
-          {  type: 'date', required: true, message: '请选择开始时间', trigger: 'change' }
-        ],
-        EndDate: [
-          {  type: 'date', required: true, message: '请选择结束时间', trigger: 'change' }
-        ],
-      },
-    };
-  },
-  created(){
-    let date = new Date();
-    let year = date.getFullYear();
-    let month = date.getMonth() < 10 ? ('0' + ( date.getMonth()+1)) : date.getMonth() + 1;
-    this.msg.YearMonth = year + '-' + month;
-  },
-  components: {
-    commonTeamInfo: commonTeamInfo
-  },
-  methods: {
-    goUrl: function (path, id) { // 页面跳转
-      this.$router.push({path:path,query:{TCIDList:id,blank:'y',isShow:false}})
+  import commonTeamInfo from "../commonPage/commonTeamInfo.vue";
+  export default {
+    data() {
+      return {
+        msg: {
+          pageIndex: 1,
+          pageSize: 10,
+          LeaderId: 0,
+          ScheduleType: 0,
+          YearMonth: "",
+          TCID: 0,
+        },
+        addMsg: {
+          LeaderId: 0,
+          StartDate: '',
+          EndDate: '',
+          Remarks: '',
+        },
+        LeaderName: "",
+        EmPhoto: "",
+        TripList: "",
+        dataList: "",
+        total: 0,
+        currentPage: 1,
+        loading: false,
+        noData: false,
+        outerVisible: false,
+        addShow: false,
+        tripTitle: "",
+        leaderList: [],
+        text: '',
+        rules: { //表单必填验证
+          LeaderId: [{
+            required: true,
+            message: '请填写领队名称',
+            trigger: 'blur'
+          }],
+          StartDate: [{
+            type: 'date',
+            required: true,
+            message: '请选择开始时间',
+            trigger: 'change'
+          }],
+          EndDate: [{
+            type: 'date',
+            required: true,
+            message: '请选择结束时间',
+            trigger: 'change'
+          }],
+        },
+      };
     },
-    removeLeader: function (obj) { // 删除安排
-      if (obj.ScheduleType === 1) {
-        this.$confirm('是否删除“'+obj.LeaderName+'”的休假安排？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.apipost('LeaderSchedule_post_RemoveHoliday', {Id:obj.Id}, res=>{
-            if (res.data.resultCode===1) {
-              this.$message.success(res.data.message);
-              this.getList();
-            } else {
-              this.$message.error(res.data.message);
-            }
-          }, null)
-        }).catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消删除'
-          });
-        });
-      } else {
-        this.$message.error('系统参团安排，请联系合作专线人员，凭团号，在报名清单处协助处理！')
-      }
+    created() {
+      let date = new Date();
+      let year = date.getFullYear();
+      let month = date.getMonth() < 10 ? ('0' + (date.getMonth() + 1)) : date.getMonth() + 1;
+      this.msg.YearMonth = year + '-' + month;
     },
-    editLeader: function (obj) {  //  修改
-      if (obj.ScheduleType === 1) {
-        this.text='修改';
-        this.addMsg = JSON.parse(JSON.stringify(obj));
-        this.addShow=true;
-      } else {
-        this.$message.error('系统参团安排，请联系合作专线人员，凭团号，在报名清单处协助处理！')
-      }
+    components: {
+      commonTeamInfo: commonTeamInfo
     },
-    submitForm: function (addMsg) {//提交创建、修改表单
-      let that = this;
-      that.$refs[addMsg].validate((valid) => {
-        if (valid) {
-          that.addDC()
+    methods: {
+      goUrl: function (path, id) { // 页面跳转
+        this.$router.push({
+          path: path,
+          query: {
+            TCIDList: id,
+            blank: 'y',
+            isShow: false
+          }
+        })
+      },
+      removeLeader: function (obj) { // 删除安排
+        if (obj.ScheduleType === 1) {
+          this.$confirm('是否删除“' + obj.LeaderName + '”的休假安排？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.apipost('LeaderSchedule_post_RemoveHoliday', {
+              Id: obj.Id
+            }, res => {
+              if (res.data.resultCode === 1) {
+                this.$message.success(res.data.message);
+                this.getList();
+              } else {
+                this.$message.error(res.data.message);
+              }
+            }, null)
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '已取消删除'
+            });
+          });
         } else {
-          console.log('error submit!!');
-          return false;
+          this.$message.error('系统参团安排，请联系合作专线人员，凭团号，在报名清单处协助处理！')
         }
-      });
-    },
-    resetForm: function (formName) {//弹出框取消 初始化谈框内表单
-      this.$refs[formName].resetFields();
-      this.addMsg = {
-        LeaderId: this.msg.LeaderId,
-        StartDate: '',
-        EndDate: '',
-        Remarks: '',
-      }
-    },
-    addDC: function () {  // 保存数据
-      this.loading = true;
-      this.apipost('LeaderSchedule_post_SetHolidaySchedule', this.addMsg, res=>{
-        if (res.data.resultCode===1) {
-          this.$message.success(res.data.message);
-          this.getList();
-          this.addShow = false;
+      },
+      editLeader: function (obj) { //  修改
+        if (obj.ScheduleType === 1) {
+          this.text = '修改';
+          this.addMsg = JSON.parse(JSON.stringify(obj));
+          this.addShow = true;
         } else {
-          this.$message.error(res.data.message);
+          this.$message.error('系统参团安排，请联系合作专线人员，凭团号，在报名清单处协助处理！')
         }
-        this.loading = false;
-      }, null)
-    },
-    getLeaderList: function () {  // 获取领队下拉列表
-      this.apipost('leader_post_GetList', {Type: 0}, res=>{
-        if (res.data.resultCode===1) {
-          this.leaderList = res.data.data;
-          this.msg.LeaderId = this.addMsg.LeaderId = this.leaderList[0].ID;
-          this.getList();
-        } else {
-          this.$message.error(res.data.message);
+      },
+      submitForm: function (addMsg) { //提交创建、修改表单
+        let that = this;
+        that.$refs[addMsg].validate((valid) => {
+          if (valid) {
+            that.addDC()
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm: function (formName) { //弹出框取消 初始化谈框内表单
+        this.$refs[formName].resetFields();
+        this.addMsg = {
+          LeaderId: 0,
+          StartDate: '',
+          EndDate: '',
+          Remarks: '',
         }
-      }, null)
-    },
-    getList: function() {  // 获取数据列表
-      this.loading = true;
-      //获取列表数据
-      this.apipost(
-        "LeaderSchedule_post_GetLeaderGuideSchedulePageList",
-        this.msg,
-        res => {
-          if (res.data.resultCode == 1) {
-            this.LeaderName = res.data.data.pageData.LeaderName;
-            this.EmPhoto= res.data.data.pageData.EmPhoto;
-            this.total = res.data.data.count;
-            this.dataList = res.data.data.pageData;
-            this.noData = !this.total > 0;
+      },
+      addDC: function () { // 保存数据
+        this.loading = true;
+        this.apipost('LeaderSchedule_post_SetHolidaySchedule', this.addMsg, res => {
+          if (res.data.resultCode === 1) {
+            this.$message.success(res.data.message);
+            this.getList();
+            this.addShow = false;
           } else {
-            this.Error(res.data.message);
+            this.$message.error(res.data.message);
           }
           this.loading = false;
-        },
-        err => {}
-      );
-    },
-    resetPageIndex: function() {
-      //查询初始化页码
-      this.msg.pageIndex = 1;
-      this.currentPage = 1;
+        }, null)
+      },
+      getLeaderList: function () { // 获取领队下拉列表
+        this.apipost('leader_post_GetList', {
+          Type: 0
+        }, res => {
+          if (res.data.resultCode === 1) {
+            this.leaderList = res.data.data;
+            this.getList();
+          } else {
+            this.$message.error(res.data.message);
+          }
+        }, null)
+      },
+      getList: function () { // 获取数据列表
+        this.loading = true;
+        //获取列表数据
+        this.apipost(
+          "LeaderSchedule_post_GetLeaderGuideSchedulePageList",
+          this.msg,
+          res => {
+            this.loading = false;
+            if (res.data.resultCode == 1) {
+              this.LeaderName = res.data.data.pageData.LeaderName;
+              this.EmPhoto = res.data.data.pageData.EmPhoto;
+              this.total = res.data.data.count;
+              this.dataList = res.data.data.pageData;
+              this.noData = !this.total > 0;
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      },
+      resetPageIndex: function () {
+        //查询初始化页码
+        this.msg.pageIndex = 1;
+        this.currentPage = 1;
+      },
+      handleCurrentChange: function (val) {
+        //翻页功能按钮
+        this.msg.pageIndex = val;
+        this.getList();
+      }
     },
-    handleCurrentChange: function(val) {
-      //翻页功能按钮
-      this.msg.pageIndex = val;
-      this.getList();
-    }
-  },
-  mounted() {
-    if(this.$route.query.TCID)
-    {
-      this.msg.TCID=this.$route.query.TCID;
+    mounted() {
+      if (this.$route.query.TCID) {
+        this.msg.TCID = this.$route.query.TCID;
+      }
+      this.getLeaderList();
     }
-    this.getLeaderList();
-  }
-};
+  };
+
 </script>