页面修改

src/components/Hotel/HotelSupplierHotel.vue

 <style>
-.CM_look {
-  padding: 4px !important;
-  position: relative;
-  top: 1px;
-}
+  .CM_look {
+    padding: 4px !important;
+    position: relative;
+    top: 1px;
+  }
+
 </style>
 <template>
   <div class="flexOne">
     <div class="query-box">
       <ul>
         <li>
-          <input
-            type="button"
-            class="normalBtn"
-            :value="$t('pub.addBtn')"
-            @click="(isShow = true), (dialogTitle = $t('ground.xinzengjdgyfs'))"
-          />
+          <input type="button" class="normalBtn" :value="$t('pub.addBtn')"
+            @click="(isShow = true), (dialogTitle = $t('ground.xinzengjdgyfs'))" />
         </li>
       </ul>
-      <el-dialog
-        :title="dialogTitle"
-        :visible.sync="isShow"
-        center
-        custom-class="w460"
-      >
+      <el-dialog :title="dialogTitle" :visible.sync="isShow" center custom-class="w460">
         <el-form :model="addMsg" label-width="100px">
           <el-form-item :label="$t('hotel.suplier_name')" prop="Name">
             {{ SupplierName }}
           </el-form-item>
           <el-form-item :label="$t('hotel.hotel')">
-            <el-select
-              v-model="addMsg.HotelId"
-              filterable
-              :placeholder="$t('pub.pleaseSel')"
-              class="w220"
-            >
+            <el-select v-model="addMsg.HotelId" filterable :placeholder="$t('pub.pleaseSel')" class="w220">
               <el-option :label="$t('pub.pleaseSel')" :value="0"></el-option>
-              <el-option
-                v-for="item in HotelList"
-                :key="item.ID"
-                :label="item.Name"
-                :value="item.ID"
-              >
+              <el-option v-for="item in HotelList" :key="item.ID" :label="item.Name" :value="item.ID">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item :label="$t('fnc.fkfangshi')">
-            <el-select
-              v-model="addMsg.SubPayType"
-              filterable
-              :placeholder="$t('pub.pleaseSel')"
-              class="w220"
-            >
+            <el-select v-model="addMsg.SubPayType" filterable :placeholder="$t('pub.pleaseSel')" class="w220">
               <el-option :label="$t('pub.pleaseSel')" :value="0"></el-option>
-              <el-option
-                v-for="item in PayTypeList"
-                :key="item.Id"
-                :label="item.name"
-                :value="item.Id"
-              >
+              <el-option v-for="item in PayTypeList" :key="item.Id" :label="item.name" :value="item.Id">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item :label="$t('hotel.hotel_StartDate')">
-            <el-date-picker
-              class="w220"
-              type="date"
-              v-model="addMsg.StartDate"
-              :picker-options="pickerBeginDateBefore"
-              value-format="yyyy-MM-dd"
-              placeholder
-            ></el-date-picker>
+            <el-date-picker class="w220" type="date" v-model="addMsg.StartDate" :picker-options="pickerBeginDateBefore"
+              value-format="yyyy-MM-dd" placeholder></el-date-picker>
           </el-form-item>
 
           <el-form-item :label="$t('hotel.hotel_EndDate')">
-            <el-date-picker
-              class="w220"
-              type="date"
-              v-model="addMsg.EndDate"
-              :picker-options="pickerBeginDateAfter"
-              value-format="yyyy-MM-dd"
-              placeholder
-            ></el-date-picker>
+            <el-date-picker class="w220" type="date" v-model="addMsg.EndDate" :picker-options="pickerBeginDateAfter"
+              value-format="yyyy-MM-dd" placeholder></el-date-picker>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
@@ -95,13 +55,7 @@
         </div>
       </el-dialog>
     </div>
-    <table
-      class="singeRowTable"
-      border="0"
-      cellspacing="0"
-      cellpadding="0"
-      v-loading="loading"
-    >
+    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
       <tr>
         <th>{{ $t("hotel.hotel") }}</th>
         <th>{{ $t("hotel.hotel_StartDate") }}</th>
@@ -115,21 +69,12 @@
         <td>{{ item.EndDateStr }}</td>
         <td>{{ item.SubPayTypeStr }}</td>
         <td>
-          <el-tooltip
-            class="item"
-            effect="dark"
-            :content="$t('system.table_edit')"
-            placement="top-start"
-          >
-            <el-button
-              type="primary"
-              class="iconfont icon-bianji-smal"
-              @click="
+          <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
+            <el-button type="primary" class="iconfont icon-bianji-smal" @click="
                 GetData(item.Id),
                   (isShow = true),
                   (dialogTitle = $t('ground.xinzengjdgyfs'))
-              "
-            ></el-button>
+              "></el-button>
           </el-tooltip>
         </td>
       </tr>
@@ -138,169 +83,195 @@
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      msg: {
-        SupplierId: 0
-      },
-      loading: false,
-      isShow: false, //是否显示新增修改
-      //供应商名称
-      SupplierName: "",
-      dialogTitle: this.$t("ground.xinzengjdgyfs"),
-      //数据源
-      dataList: [],
-      HotelList: [], //酒店列表
-      //添加修改供应商酒店信息
-      addMsg: {
-        Id: 0, //编号
-        SupplierId: 0, //
-        HotelId: 0,
-        StartDate: "",
-        EndDate: "",
-        SubPayType: 0
-      },
-      //付款方式
-      PayTypeList: [
-        {
-          name: this.$t("ground.xianfu"),
-          Id: 1
+  export default {
+    data() {
+      return {
+        msg: {
+          SupplierId: 0
         },
-        {
-          name: this.$t("ground.qiandan"),
-          Id: 2
+        loading: false,
+        isShow: false, //是否显示新增修改
+        //供应商名称
+        SupplierName: "",
+        dialogTitle: this.$t("ground.xinzengjdgyfs"),
+        //数据源
+        dataList: [],
+        HotelList: [], //酒店列表
+        //添加修改供应商酒店信息
+        addMsg: {
+          Id: 0, //编号
+          SupplierId: 0, //
+          HotelId: 0,
+          StartDate: "",
+          EndDate: "",
+          SubPayType: 0
         },
-        { name: this.$t("ground.yufu"), Id: 4 }
-      ],
-      pickerBeginDateBefore: {
-        disabledDate: time => {
-          if (this.addMsg.EndDate == null) {
-            return false;
-          } else {
-            let endTime = new Date(this.addMsg.EndDate);
-            return endTime.getTime() < time.getTime();
-          }
-        }
-      },
-      pickerBeginDateAfter: {
-        disabledDate: time => {
-          let startTime = new Date(this.addMsg.StartDate);
-          return startTime.getTime() >= time.getTime();
-        }
-      }
-    };
-  },
-  mounted() {
-    this.msg.SupplierId = this.$route.query.ID;
-    this.addMsg.SupplierId = this.$route.query.ID;
-    this.SupplierName = this.$route.query.Name;
-    this.getList();
-    this.getHotelList();
-  },
-  methods: {
-    //初始化数据
-    initData() {
-      this.addMsg.Id = 0;
-      this.addMsg.SupplierId = this.$route.query.ID;
-      this.addMsg.HotelId = 0;
-      this.addMsg.StartDate = "";
-      this.addMsg.EndDate = "";
-      this.addMsg.SubPayType = 0;
-    },
-    SaveData() {
-      if (this.addMsg.HotelId <= 0) {
-        this.Info(this.$t("ground.qingxuanzejiud"));
-        return;
-      }
-      if (this.addMsg.SubPayType <= 0) {
-        this.Info(this.$t("ground.qingxuanzefkfs"));
-        return;
-      }
-      if (this.addMsg.StartDate == "") {
-        this.Info(this.$t("ground.qingxuanzekssjs"));
-        return;
-      }
-      if (this.addMsg.EndDate == "") {
-        this.Info(this.$t("ground.qingxuanzejssjs"));
-        return;
-      }
-      this.apipost(
-        "supplier_post_SetSupplierDetailService",
-        this.addMsg,
-        res => {
-          this.loading = false;
-          if (res.data.resultCode == 1) {
-            this.Success(res.data.message);
-            this.initData();
-            this.isShow = false;
-            this.getList();
-          } else {
-            this.Error(res.data.message);
+        //付款方式
+        PayTypeList: [{
+            name: this.$t("ground.xianfu"),
+            Id: 1
+          },
+          {
+            name: this.$t("ground.qiandan"),
+            Id: 2
+          },
+          {
+            name: this.$t("ground.shiwudk"),
+            Id: 3
+          },
+          {
+            name: this.$t("ground.yufu"),
+            Id: 4
+          },
+          {
+            name: this.$t("ground.yufukuandk"),
+            Id: 5
+          },
+          {
+            name: this.$t("ground.gongsihetzf"),
+            Id: 6
+          },
+
+          {
+            name: this.$t("ground.yuejie"),
+            Id: 9
+          },
+          {
+            name: this.$t("ground.lingduidydf"),
+            Id: 10
+          },
+          {
+            name: this.$t("ground.shuaka"),
+            Id: 11
+          },
+        ],
+        pickerBeginDateBefore: {
+          disabledDate: time => {
+            if (this.addMsg.EndDate == null) {
+              return false;
+            } else {
+              let endTime = new Date(this.addMsg.EndDate);
+              return endTime.getTime() < time.getTime();
+            }
           }
         },
-        null
-      );
-    },
-    //根据编号获取实体
-    GetData(Id) {
-      this.apipost(
-        "supplier_post_GetEntityService",
-        {
-          Id: Id
-        },
-        res => {
-          this.loading = false;
-          if (res.data.resultCode == 1) {
-            var nData = res.data.data;
-            this.addMsg.Id = nData.Id;
-            this.addMsg.HotelId = nData.HotelId;
-            this.addMsg.SubPayType = nData.SubPayType;
-            this.addMsg.StartDate = nData.StartDateStr;
-            this.addMsg.EndDate = nData.EndDateStr;
-          } else {
-            this.Error(res.data.message);
+        pickerBeginDateAfter: {
+          disabledDate: time => {
+            let startTime = new Date(this.addMsg.StartDate);
+            return startTime.getTime() >= time.getTime();
           }
-        },
-        null
-      );
+        }
+      };
     },
-    //获取数据
-    getList() {
-      this.loading = true;
-      this.apipost(
-        "supplier_get_GetListService",
-        this.msg,
-        res => {
-          this.loading = false;
-          if (res.data.resultCode == 1) {
-            this.dataList = res.data.data;
-          } else {
-            this.Error(res.data.message);
-          }
-        },
-        null
-      );
+    mounted() {
+      this.msg.SupplierId = this.$route.query.ID;
+      this.addMsg.SupplierId = this.$route.query.ID;
+      this.SupplierName = this.$route.query.Name;
+      this.getList();
+      this.getHotelList();
     },
-    //获取酒店列表
-    getHotelList() {
-      this.loading = true;
-      this.apipost(
-        "hotel_post_GetList",
-        {
-          QCountry: 651
-        },
-        res => {
-          this.loading = false;
-          if (res.data.resultCode == 1) {
-            this.HotelList = res.data.data;
-          } else {
-            this.Error(res.data.message);
-          }
-        },
-        null
-      );
+    methods: {
+      //初始化数据
+      initData() {
+        this.addMsg.Id = 0;
+        this.addMsg.SupplierId = this.$route.query.ID;
+        this.addMsg.HotelId = 0;
+        this.addMsg.StartDate = "";
+        this.addMsg.EndDate = "";
+        this.addMsg.SubPayType = 0;
+      },
+      SaveData() {
+        if (this.addMsg.HotelId <= 0) {
+          this.Info(this.$t("ground.qingxuanzejiud"));
+          return;
+        }
+        if (this.addMsg.SubPayType <= 0) {
+          this.Info(this.$t("ground.qingxuanzefkfs"));
+          return;
+        }
+        if (this.addMsg.StartDate == "") {
+          this.Info(this.$t("ground.qingxuanzekssjs"));
+          return;
+        }
+        if (this.addMsg.EndDate == "") {
+          this.Info(this.$t("ground.qingxuanzejssjs"));
+          return;
+        }
+        this.apipost(
+          "supplier_post_SetSupplierDetailService",
+          this.addMsg,
+          res => {
+            this.loading = false;
+            if (res.data.resultCode == 1) {
+              this.Success(res.data.message);
+              this.initData();
+              this.isShow = false;
+              this.getList();
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          null
+        );
+      },
+      //根据编号获取实体
+      GetData(Id) {
+        this.apipost(
+          "supplier_post_GetEntityService", {
+            Id: Id
+          },
+          res => {
+            this.loading = false;
+            if (res.data.resultCode == 1) {
+              var nData = res.data.data;
+              this.addMsg.Id = nData.Id;
+              this.addMsg.HotelId = nData.HotelId;
+              this.addMsg.SubPayType = nData.SubPayType;
+              this.addMsg.StartDate = nData.StartDateStr;
+              this.addMsg.EndDate = nData.EndDateStr;
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          null
+        );
+      },
+      //获取数据
+      getList() {
+        this.loading = true;
+        this.apipost(
+          "supplier_get_GetListService",
+          this.msg,
+          res => {
+            this.loading = false;
+            if (res.data.resultCode == 1) {
+              this.dataList = res.data.data;
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          null
+        );
+      },
+      //获取酒店列表
+      getHotelList() {
+        this.loading = true;
+        this.apipost(
+          "hotel_post_GetList", {
+            QCountry: 651
+          },
+          res => {
+            this.loading = false;
+            if (res.data.resultCode == 1) {
+              this.HotelList = res.data.data;
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          null
+        );
+      }
     }
-  }
-};
+  };
+
 </script>