1

src/components/platformModule/selfFunded.vue

+<style>
+  .selffundedManagement .w150 .el-input {
+    width: 150px;
+  }
+
+  .selffundedManagement .btmAddStore {
+    border-top: 1px solid #d1d1d1;
+    width: 100%;
+    display: none;
+    overflow-x: auto;
+    overflow-y: auto;
+    position: fixed;
+    background: #f9f9f9;
+    bottom: 0;
+  }
+
+  .selffundedManagement .isShow {
+    display: block !important;
+  }
+
+  .selffundedManagement .changeMsg {
+    width: 80%;
+  }
+
+  .selffundedManagement .changeMsg li {
+    float: left;
+  }
+
+  .selffundedManagement .btmTitle {
+    padding: 0 10px;
+    margin: 20px 0 20px 40px;
+    border-left: 3px solid #e95252;
+    font-size: 14px;
+    color: #000000;
+  }
+
+  .selffundedManagement .cityBtnList {
+    margin: 5px 0 20px 40px;
+  }
+
+  .selffundedManagement .query-box li {
+    margin: 5px 30px 5px 0;
+  }
+
+  .selffundedManagement ._addUpload_box>div:hover {
+    background-color: #f5f5f5;
+  }
+
+  .selffundedManagement .el-upload-dragger {
+    font-size: 28px;
+    color: #8c939d;
+    width: 126px;
+    height: 80px;
+    line-height: 41px;
+    text-align: center;
+  }
+
+  .selffundedManagement ._show_img_box {
+    position: fixed;
+    background: rgba(0, 0, 0, .6);
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+    text-align: center;
+  }
+
+  .selffundedManagement ._addUpload_box {
+    display: block;
+  }
+
+  .selffundedManagement ._addUpload_box img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .selffundedManagement ._addUpload_box>div {
+    float: left;
+    width: 138px;
+    height: 92px;
+    border: 1px dashed rgba(210, 210, 210, 1);
+    border-radius: 2px;
+    cursor: pointer;
+    margin-bottom: 10px;
+    padding: 5px;
+    margin-right: 10px;
+    position: relative;
+  }
+
+  .selffundedManagement ._addUpload_box .icon-guanbi1 {
+    font-size: 12px;
+    color: white;
+    display: inline-block;
+    margin-left: 15px;
+    position: absolute;
+    right: -6px;
+    top: -9px;
+    background-color: #f56c6c;
+    border-radius: 50%;
+    height: 20px;
+    width: 20px;
+    text-align: center;
+    line-height: 20px;
+  }
+  .selffundedManagement .d12p {
+    margin-top: 3px;
+    font-size: 12px;
+    color: #999;
+    cursor: pointer;
+    max-height: 40px;
+    line-height: 20px;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .selffundedManagement .d12p:hover {
+    text-decoration: underline;
+    color: #333;
+  }
+</style>
+<template>
+  <div class="flexOne selffundedManagement">
+    <div class="query-box">
+      <ul>
+       
+        <li>
+          <span>{{$t('system.table_country')}}</span>
+          <el-select v-model="msg.QCountry" clearable class="w150" filterable @change="getProvinceList(msg.QCountry,1)"
+            :placeholder="$t('hotel.hotel_country')">
+            <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
+            <el-option v-for='item in countryList' :key="item.ID" :label="item.Name" :value="item.ID">
+            </el-option>
+          </el-select>
+        </li>
+        <li>
+          <span>{{$t('hotel.hotel_nameOf')}}</span>
+          <el-input v-model="msg.ItemName" maxlength="50" class="w150"></el-input>
+        </li>
+        <li>
+          <button class="normalBtn" type="button" @click="addCityInfo">{{$t('pub.addBtn')}}</button>
+          <button class="hollowFixedBtn" type="button"
+            @click="resetPageIndex(),initData()">{{$t('pub.searchBtn')}}</button>
+        </li>
+      </ul>
+    </div>
+    <div class="supplierList clearfix" v-loading="loading">
+      <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
+        <tr>
+          <th width="10%">{{$t('sm.zifeixiangmu')}}</th>
+          <th width="10%">{{$t('system.table_ssLine')}}</th>
+          <th width="10%">{{$t('system.query_cityName')}}</th>
+          <th width="10%">{{$t('sm.yujifeiyong')}}</th>
+          <th>{{$t('fnc.fyshuoming')}}</th>
+          <th width="10%">{{$t('admin.admin_czPerson')}}</th>
+          <th width="10%">{{$t('hotel.table_operattime')}}</th>
+          <th width="10%">{{$t('hotel.table_operat')}}</th>
+        </tr>
+        <tr v-for="item in tabelDate" :key="item.subCode">
+          <td>{{item.ItemName}}</td>
+          <td>{{item.LineName}}</td>
+          <td>{{item.CityName}}</td>
+          <td>{{item.EstimatedCost}}</td>
+          <td>
+            <el-tooltip class="item" effect="dark" :content="item.Explain" placement="top-start"
+                popper-class="max-w250">
+                <p class="d12p"  :title="item.Explain">
+                  {{ item.Explain }}
+                </p>
+              </el-tooltip>
+           
+          </td>
+          <td>{{item.CreateByName}}</td>
+          <td>{{item.CreateTime}}</td>
+          <td>
+            <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start">
+              <el-button type="primary" @click="isShow=true,titleInfo=$t('objFill.xiugaichengshi'),updateCity(item.ID)" icon="el-icon-edit"
+                circle></el-button>
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
+              <el-button type="danger" icon="el-icon-delete" @click="delArea(item.ID,item.CodeLevel)" circle>
+              </el-button>
+            </el-tooltip>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
+      layout="total,prev, pager, next, jumper" :page-size="this.msg.pageSize" :total="total">
+    </el-pagination>
+    <div class="btmAddStore" :class="{'isShow':isShow}">
+      <div class="btmTitle">{{titleInfo}}</div>
+      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
+        <ul class="changeMsg clearfix">
+          <li>
+              <el-form-item :label="$t('sm.zifeixiangmu')" prop="ItemName">
+                <el-input v-model="addMsg.ItemName" class="w150" maxlength="20"></el-input>
+              </el-form-item>
+            </li>
+            <li>
+              <el-form-item :label="$t('system.table_ssLine')" prop="ItemName">
+                <el-select class="w150" v-model="addMsg.LineId" filterable :placeholder="$t('pub.pleaseSel')"   >
+                  <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
+                  <el-option v-for="item in LineList" :label="item.LineName" :value="item.LineID"
+                    :key="item.LineID"></el-option>
+                </el-select>
+            </el-form-item>
+            </li>
+            <li><el-form-item :label="$t('system.table_ssLine')" prop="ItemName">
+              <el-select class='w120' :placeholder="$t('pub.pleaseSel')" filterable v-model="addMsg.CityId"
+                  remote :remote-method="(query) => getCityList(query, selfItem)"
+                  @change="changeCity(selfItem)">
+                  <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
+                  <el-option v-for="item in CityList" :label='item.Name' :value='item.ID' :key='item.ID'>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </li>
+            <li>
+              <el-form-item :label="$t('sm.yujifeiyong')" >
+                <el-input v-model="addMsg.EstimatedCost" class="w150" maxlength="20"></el-input>
+              </el-form-item>
+            </li>
+            <li>
+              <el-form-item :label="$t('fnc.fyshuoming')" >
+                <el-input v-model="addMsg.Explain" class="w150" maxlength="20"></el-input>
+              </el-form-item>
+            </li>
+          
+          <li>
+            <el-form-item :label="$t('objFill.sanma')">
+              <!--prop="ThreeCode"-->
+              <el-input v-model="addMsg.ThreeCode" class="w150" maxlength="3"></el-input>
+            </el-form-item>
+          </li>
+          <li>
+            <el-form-item :label="$t('objFill.jingdu')">
+              <el-input v-model="addMsg.Lng" class="w150"></el-input>
+            </el-form-item>
+          </li>
+          <li>
+            <el-form-item :label="$t('objFill.weidu')">
+              <el-input v-model="addMsg.Lat" class="w150"></el-input>
+            </el-form-item>
+          </li>
+         
+          <li>
+            <div class="cityBtnList">
+              <input type="button" class="hollowFixedBtn" @click="cancelPanel" :value="$t('pub.cancelBtn')" />
+              <input type="button" class="normalBtn" @click="submitForm('addMsg')" :value="$t('pub.saveBtn')" />
+            </div>
+          </li>
+        </ul>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        total: 0,
+        currentPage: 1,
+        loading: true,
+        AreaList: "",
+        RegionList: "",
+        countryList: "",
+        countryListOther: "",
+        provinceList: "",
+        cityList: "",
+        district: "",
+        titleInfo: "",
+        tabelDate: "",
+        isShow: false,
+        District: "",
+        disCountry: false,
+        disProvince: false,
+        disCity: false,
+        LineList:[],
+        CityList:[],
+        msg: {
+          pageIndex: 1,
+          pageSize: 15,
+          ItemName: "",
+          LineId: "0",
+        },
+        addMsg: {
+          Id: 0,
+          ItemName: "",
+          EstimatedCost: "",
+          LineId: 0,
+          CityId: 0,
+          Explain: "",
+        },
+        rules: {
+          ItemName: [{
+            required: true,
+            message: this.$t('objFill.qsrzhongwenmc'),
+            trigger: "change"
+          }],
+          LineId: [{
+            required: true,
+            message: this.$t('visaT.qxzguojia'),
+            trigger: "change"
+          }]
+        },
+        currentUserInfo: {},
+      };
+    },
+    methods: {
+    //获取城市列表
+    getCityList(query, selfItem) {
+        var postMsg = {
+          CodeLevel: 3,
+          Name: '',
+        };
+        if (selfItem.CityName != '') {
+          postMsg.Name = selfItem.CityName;
+        }
+        if (query != '') {
+          postMsg.Name = query;
+        }
+
+        this.apipost("dict_get_Destination_GetCityExtList", postMsg, res => {
+          if (res.data.resultCode == 1) {
+            this.CityList = res.data.data;
+          }
+        })
+      },
+ //获取线路列表
+ getLineList() {
+        this.apipost(
+          "line_post_GetList", {
+            LineDirection: 2,
+          },
+          (res) => {
+            if (res.data.resultCode == 1) {
+              this.LineList = res.data.data;
+            }
+          }
+        );
+      },
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.initData();
+      },
+      resetPageIndex() {
+        this.msg.pageIndex = 1;
+        this.currentPage = 1;
+      },
+      //初始化表格数据
+      initData() {
+        this.loading = true;
+        this.apipost(
+          "selffunded_GetSelfFundedPageList",
+          this.msg,
+          res => {
+            this.loading = false;
+            if (res.data.resultCode == 1) {
+              this.tabelDate = res.data.data.pageData;
+              this.total = res.data.data.count;
+            }
+          },
+          null
+        );
+      },
+      delArea(ID, CodeLevel) {
+        var that = this;
+        this.Confirm(that.$t('tips.shifoushanchu'), function () {
+          let msg = {
+            ID: ID,
+          };
+          that.apipost(
+            "selffunded_RemoveSelfFunded",
+            msg,
+            res => {
+              if (res.data.resultCode == 1) {
+                that.Success(this.$t('tips.shanchuchenggong'));
+                that.initData();
+              } else {
+                that.Error(res.data.message);
+              }
+            },
+            null
+          );
+        });
+      },
+      addCityInfo() {
+        this.isShow = true;
+        this.getLineList();
+        this.titleInfo = this.$t('objFill.xingzenchengshi');
+        this.addMsg.ID = 0;
+      },
+      saveInfo() {
+       
+        this.apipost(
+          "selffunded_SetSelfFunded",
+          this.addMsg,
+          res => {
+            if (res.data.resultCode == 1) {
+              this.initData();
+              this.Success(this.$t('tips.saveYes'));
+              this.isShow = false;
+              this.resetForm("addMsg");
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      },
+      //修改信息
+      updateCity(ID) {
+        let msg = {
+          ID: ID
+        };
+        this.addMsg.ID = ID;
+        this.apipost(
+          "selffunded_GetSelfFunded",
+          msg,
+          res => {
+            if (res.data.resultCode == 1) {
+              this.addMsg = res.data.data;
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      },
+      getProvinceList(ID, type) {
+        //根据省份获取城市
+        let msg = {
+          Id: ID
+        };
+        if (type == 1) {
+          this.msg.QProvince = "";
+          this.msg.QCity = "";
+          this.msg.QDistrict = "";
+        } else if (type == 2) {
+          this.msg.QCity = "";
+          this.msg.QDistrict = "";
+        } else if (type == 3) {
+          this.msg.QDistrict = "";
+        }
+        if (this.msg.QCountry != "" || this.Country != "") {
+          this.apipost(
+            "dict_post_Destination_GetChildList",
+            msg,
+            res => {
+              if (type == 1) {
+                this.provinceList = res.data.data;
+              } else if (type == 2) {
+                this.cityList = res.data.data;
+              } else if (type == 3) {
+                this.district = res.data.data;
+              }
+            },
+            err => {}
+          );
+        }
+      },
+      //取消
+      cancelPanel() {
+        this.isShow = false;
+        this.resetForm("addMsg");
+      },
+      submitForm(addMsg) {
+        //提交创建、修改表单
+        let that = this;
+        that.$refs[addMsg].validate(valid => {
+          if (valid) {
+            that.saveInfo();
+          } else {
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    },
+    created() {
+      this.currentUserInfo = this.getLocalStorage();
+    },
+    mounted() {
+      this.initData();
+    }
+  };
+
+</script>

src/router/config.js

@@ -210,6 +210,16 @@ export default {
                 title: '城市管理'
               },
             },
+            {
+              path: '/selfFunded', //自费项目管理
+              name: 'selfFunded',
+              component: resolve => require(['@/components/platformModule/selfFunded'], resolve),
+              meta: {
+                title: '自费项目管理'
+              },
+            },
+
+            
             {
               path: '/scmAccountManagement', //供应商账号管理
               name: 'scmAccountManagement',