修改

src/pages/financial/institutionsManagement.vue

+<style scoped>
+    @import "css/cssReset.css";
+  .instMg .query_box_top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center
+  }
+
+  .instMg .query_box_bottom {
+    margin-top: 20px;
+    display: flex;
+    align-items: center
+  }
+
+  .instMg .avatar {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0
+  }
+
+  .avatar-uploader {
+    width: 156px;
+    border-radius: 4px;
+    height: 34px;
+    line-height: 34px;
+    color: #666666;
+    font-size: 12px;
+    text-align: center;
+    overflow: hidden;
+  }
+
+  .instMg .tips {
+    width: 85px;
+    color: #E95252;
+    font-size: 12px;
+    line-height: 20px;
+    position: absolute;
+    top: 30px;
+    right: 90px;
+  }
+
+  .instMg .url .el-input__inner {
+    border-radius: 0;
+    border-top-right-radius: 17px;
+    border-bottom-right-radius: 17px;
+  }
+
+  .instMg .el-input-group__prepend {
+    border-top-left-radius: 17px;
+    border-bottom-left-radius: 17px;
+  }
+
+  .instMg .query-box li label {
+    display: inline-block;
+    min-width: 80px;
+    text-align: right;
+    font-style: normal;
+    margin: 0 20px 0 0;
+  }
+
+  .instMg .addCompany {
+    width: 440px;
+    max-height: 600px;
+  }
+
+  .instMg .addCompany .el-dialog__body {
+    max-height: 486px;
+    overflow: auto;
+  }
+
+  ._scrollbar::-webkit-scrollbar {
+    width: 4px;
+    height: 8px;
+  }
+
+  ._scrollbar::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
+    background: #c9c9c9;
+  }
+
+  ._scrollbar::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    background: #EDEDED;
+  }
+
+  .instMg ._vMG_edit {
+    overflow: auto;
+    display: none;
+    position: fixed;
+    bottom: 0;
+    /* left: 0; */
+    font-family: 'PingFangSc-Fine';
+    border-top: 3px solid #38425d;
+    background-color: #fff;
+    padding: 10px;
+    width: 100%;
+    padding-right: 230px;
+  }
+
+  .instMg ._vMG_edit ._tit {
+    padding-left: 10px;
+    border-left: 3px solid #E95252;
+    font-size: 16px;
+    color: #000000
+  }
+
+  .instMg ._vMG_edit ._tit span {
+    color: #666666;
+    font-size: 14px;
+  }
+
+  .cm_content {
+    padding: 30px 0;
+    overflow-x: auto;
+  }
+
+  /* ._edHeight {
+    height: 400px;
+  } */
+
+  .edHeight {
+    display: block !important;
+    height: 230px;
+  }
+
+  .instMg ._info_box ul {
+    margin-top: 15px
+  }
+
+  .instMg ._info_box ul li {
+    float: left;
+  }
+
+  .instMg_list_item {
+    width: 212px;
+    min-height: 175px;
+    border-radius: 4px;
+    border: 1px solid #ebebeb;
+    float: left;
+    background: rgba(255, 255, 255, 1);
+    overflow: hidden;
+    margin-right: 13px;
+    margin-bottom: 15px;
+  }
+
+  .instMg_list_item:hover {
+    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
+    transition: all linear 0.5s;
+  }
+
+  ._item_top {
+    padding: 10px 0;
+    border-bottom: 1px solid #EEEEEE;
+    position: relative;
+    text-align: center
+  }
+
+  ._item_top img._nom {
+    height: 30px;
+    width: 80%;
+  }
+
+  ._item_bt {
+    padding: 15px 20px;
+    cursor: pointer;
+  }
+
+  ._item_bt p._t {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #666666;
+    margin-bottom: 5px;
+    padding-bottom: 15px
+  }
+
+  ._item_bt p._t span:nth-child(2)._PeopleNum {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+
+  .instMg ._PeopleNum {
+    font-weight: bold;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  ._item_top ._n {
+    padding: 5px;
+    text-align: center;
+  }
+
+  ._item_top ._n span {
+    display: inline-block;
+    padding: 4px 10px;
+    background-color: #2AAEF2;
+    border-radius: 4px;
+    color: #FFFFFF;
+    font-size: 14px
+  }
+
+  ._item_top ._n span._ping {
+    background-color: #47BF8C;
+  }
+
+  ._btn {
+    padding: 0 30px;
+    display: flex;
+    justify-content: space-around;
+  }
+
+  ._btn span {
+    display: inline-block;
+    font-size: 12px;
+    background-color: #E7E7E7;
+    color: #333333;
+    padding: 3px 8px;
+    border-radius: 14px;
+    cursor: pointer;
+  }
+
+  ._btn span:hover {
+    background-color: #E95252;
+    color: white
+  }
+
+  ._up_text {
+    position: absolute;
+    z-index: 10;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    height: 34px;
+    background-color: rgba(243, 243, 243, 0.8);
+  }
+
+  ._tag {
+    display: inline-block;
+    position: absolute;
+    right: 5px;
+    top: 0;
+    background-color: #47bf8c;
+    color: white;
+    font-size: 12px;
+    padding: 2px 3px;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+
+  ._item_top .over_ellipsis {
+    max-width: 100%;
+  }
+
+  .instMg .query-box {
+    padding: 20px 0 0 0;
+  }
+
+  .instMg .po_content {
+    border-collapse: collapse;
+  }
+
+  .instMg .po_content {
+    width: 100%;
+  }
+
+  .instMg .po_content tr:first-child {
+    font-size: 12px;
+    color: #666666;
+    background-color: #DCDCDC;
+  }
+
+  .instMg .po_content tr th,
+  .instMg .po_content tr td {
+    padding: 10px 20px;
+    text-align: left;
+  }
+
+  .instMg .po_content tr td {
+    color: #333333;
+    font-size: 14px;
+    border: 1px solid #E6E6E6;
+  }
+
+  .instMg .po_content tr td .iconfont {
+    font-size: 14px;
+    padding: 4px;
+  }
+
+  .instMg .query-box .iconfont {
+    cursor: pointer;
+    background-color: #E95252;
+    color: white;
+    width: 30px;
+    height: 30px;
+    display: inline-block;
+    text-align: center;
+    line-height: 30px;
+    border-radius: 50%;
+    margin-left: 10px;
+  }
+
+  .instMg ._yuan {
+    width: 12px;
+    height: 12px;
+    background: rgba(233, 82, 82, 1);
+    border-radius: 50%;
+    display: inline-block;
+  }
+
+  .instMg ._yuan._yuan_red {
+    background: #47BF8C;
+  }
+
+  ._flex_rete {
+    cursor: pointer;
+  }
+
+  .display_none {
+    opacity: 0;
+  }
+
+  ._flex_rete .icon-qiehuan {
+    background-color: #E5E5E5;
+    color: white;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    text-align: center;
+    font-size: 12px;
+    padding: 0 !important;
+    line-height: 20px;
+    float: right;
+  }
+
+  ._flex_rete .icon-qiehuan:hover {
+    background-color: rgba(233, 82, 82, 1);
+    color: white;
+  }
+
+</style>
+<template>
+  <div class='flexOne instMg'>
+    <div class='query-box'>
+      <el-form label-width="110px">
+        <el-row>
+          <el-col :span="4" :gutter="35">
+            <el-form-item :label="$t('system.table_jgName')">
+              <el-input v-model="msg.Name"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4" :gutter="35">
+            <el-form-item :label="$t('system.table_jgType')">
+              <el-select filterable v-model='msg.Type'>
+                <el-option :label='$t("pub.unlimitedSel")' value='-1'></el-option>
+                <el-option v-for='item in departmentList' :label='item.Name' :value='item.Id' :key='item.Id'>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <ul>
+        <li>
+          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
+            @click="resetPageIndex(),getList()" />
+          <input type="button" class="normalBtn" :value="$t('pub.addBtn')"
+            @click="addShow=true,text=$t('pub.addBtn'),cancelEdit(),imageUrl=''" />
+          <el-tooltip class="item" effect="dark" :content="$t('fnc.qhpaiban')" placement="top-end">
+            <i v-if="transitionShow" class="iconfont icon-biaoge" @click="switchMethod(1)"></i>
+            <i v-if="transitionShow2" class="iconfont icon-icon-ssan" @click="switchMethod(2)"></i>
+          </el-tooltip>
+        </li>
+      </ul>
+    </div>
+    <div class="cm_content _scrollbar" :class="addShow==true?'_edHeight':''">
+      <div class="clearfix" v-loading='loading' v-if="transitionShow">
+        <div class="instMg_list_item" v-for="(item,index) in DataList">
+          <div class="_item_top">
+            <img v-if="!item.LogoStr" class="_nom" src="../financial/image/bg_c1@2x.png" alt="">
+            <img v-else style="height: 26px;display:inline-block" :src="item.LogoStr" alt="">
+            <p class="_n ">
+              <el-tooltip class="item" effect="dark" :content="item.Name" placement="top-start">
+                <span class="over_ellipsis" :class="item.Type==1?'_ping':''">{{item.Name}}</span>
+              </el-tooltip>
+            </p>
+          </div>
+          <div class="_item_bt">
+            <p class="_t" @click="item.PeopleNum!=0?goUrl('AccountPageList',item.ID):''">
+              <span>{{$t('insManage.im_acc')}}</span>
+              <span class="PingFangSC _PeopleNum" v-if='item.PeopleNum!=0'>{{item.PeopleNum}}</span>
+              <span class="PingFangSC" v-else>-</span>
+            </p>
+            <p class="_btn">
+              <span class="_e"
+                @click="editCurency(item.ID,item.LogoStr),text=$t('pub.updateMsg'),addShow=true">{{$t('pub.updateMsg')}}</span>
+              <span class="_d" @click="financeinfoRemove(item.ID,item.Name)">{{$t('system.table_delete')}}</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <table class="po_content singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0"
+        v-if="transitionShow2" v-loading="loading">
+        <tr>
+          <th>{{$t('system.table_jgName')}}</th>
+          <th>{{$t('system.table_jgCode')}}</th>
+          <th>{{$t('system.table_jgType')}}</th>
+          <th>{{$t('insManage.im_acc')}}</th>
+          <th>{{$t('system.table_operation')}}</th>
+        </tr>
+        <tr v-for="(item,index) in DataList" :key="index">
+          <td>{{item.Name}}</td>
+          <td>{{item.EnCode}}</td>
+          <td>{{item.TypeStr}}</td>
+          <td><span class="PingFangSC _PeopleNum"
+              @click="item.PeopleNum!=0?goUrl('AccountPageList',item.ID):''">{{item.PeopleNum}}</span></td>
+          <td>
+            <el-row>
+              <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start">
+                <el-button type="primary" class="iconfont icon-bianji-smal" circle
+                  @click="editCurency(item.ID,item.LogoStr),text=$t('pub.updateMsg'),addShow=true"></el-button>
+              </el-tooltip>
+              <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
+                <el-button type="danger" class="iconfont icon-img_delete_small" circle
+                  @click="financeinfoRemove(item.ID,item.Name)"></el-button>
+              </el-tooltip>
+            </el-row>
+          </td>
+        </tr>
+      </table>
+      <div class="noData" v-show="noData">
+        {{$t('system.content_noData')}}
+      </div>
+      <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>
+      </div>
+    </div>
+    <div class="_vMG_edit" :class="addShow==true?'edHeight':''">
+      <p class="_tit">{{text}}{{$t('fnc.jigou')}}</p>
+      <el-form class="_info_box clearfix" :model="addMsg" ref="addMsg" :rules="rules" label-width="100px">
+        <el-row>
+          <el-col :span="4" :gutter="35">
+            <el-form-item :label="$t('system.table_jgName')" prop="Name">
+              <el-input v-model="addMsg.Name"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4" :gutter="35">
+            <el-form-item :label="$t('system.table_jgCode')" prop="EnCode">
+              <el-input v-model="addMsg.EnCode"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4" :gutter="35">
+            <el-form-item :label="$t('system.table_jgType')" prop="Type">
+              <el-select filterable v-model='addMsg.Type'>
+                <el-option v-for='item in departmentList' :label='item.Name' :value='item.Id' :key='item.Id'>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4" :gutter="35">
+            <el-form-item :label="$t('system.table_icon')">
+              <el-upload class="avatar-uploader" :http-request="UploadImage" action="" :show-file-list="false"
+                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+                <img v-if="imageUrl" :src="imageUrl" style="height:34px" class="avatar">
+                <p class="_up_text">
+                  <i class="el-icon-plus"></i>
+                  <span v-if="imageUrl" class="repUp">{{$t('system.up_againUp')}}</span>
+                  <span v-else class="repUp">{{$t('system.up_upImg')}}</span>
+                </p>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div>
+        <ul class="clearfix" style="text-align: right;">
+          <li class="_add_saveBtn" style="float: initial;">
+            <button type="button" class="normalBtn" @click="submitForm('addMsg',1)">{{$t('pub.saveBtn')}}</button>
+            <button class="hollowFixedBtn" type="button"
+              @click="cancelEdit(),resetForm('addMsg'),addShow=false">{{$t('pub.cancelBtn')}}</button>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <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.table_jgName')" prop="Name">
+          <el-input type="text" v-model="addMsg.Name" :placeholder="$t('system.ph_jgName')" class="w210"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('system.table_jgCode')" prop="Code">
+          <el-input type="text" v-model="addMsg.Code" :placeholder="$t('system.ph_jgCode')" class="w210"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('system.table_Url')" class='url'>
+          <el-input v-model="addMsg.Url" :placeholder="$t('system.ph_url')" class="w210">
+            <template slot="prepend">Http://</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('system.table_logoImg')">
+
+          <div class="tips">
+            <!-- {{$t('system.up_tips')}} -->
+          </div>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <button class="normalBtn" type="primary"
+          @click="submitForm('addMsg'),resetPageIndex()">{{$t('pub.saveBtn')}}</button> &nbsp;
+        <button class="hollowFixedBtn"
+          @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        msg: {
+          pageIndex: 1,
+          pageSize: 15,
+          Name: '',
+          Type: '-1',
+        },
+        addMsg: {
+          ID: 0,
+          Name: '',
+          EnCode: '',
+          Logo: '',
+          Type: ''
+        },
+
+        DataList: [],
+        total: 0,
+        currentPage: 1,
+        loading: true,
+        outerVisible: false,
+        text: '',
+        dialogTitle: '',
+        departmentList: [],
+        addShow: false,
+        noData: false,
+        imageUrl: '',
+        rules: { //表单必填验证
+          Name: [{
+            required: true,
+            message: this.$t('rule.qsrjgmingcheng'),
+            trigger: 'blur'
+          }],
+          Type: [{
+            required: true,
+            message: this.$t('rule.sxzjgleixing'),
+            trigger: 'change'
+          }],
+        },
+        transitionShow: false,
+        transitionShow2: true,
+        contenWidth: 0,
+        contenHeight: 0,
+        tableSize: 0,
+        blockSize: 0,
+      }
+    },
+    created() {
+      let allH, allW, cH, cW;
+      allH = document.documentElement.clientHeight;
+      allW = document.documentElement.clientWidth;
+      cW = allW - 90;
+      cH = allH - 320; //298 = 顶部导航 50 面包屑83 查询框75 table表头41 分页49
+      this.contenWidth = cW;
+      this.contenHeight = cH;
+      this.tableSize = this.msg.pageSize = parseInt(cH / 45);
+    },
+    methods: {
+      //上传图片
+      UploadImage(file) {
+        let newArr = [];
+        newArr.push(file.file);
+        let fileName = file.file.name;
+        var path = "/Upload/Temporary/";
+        this.UploadSelfFileT(path, newArr, x => {
+          this.imageUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
+          this.addMsg.Logo = x.data.FilePath;
+        });
+      },
+      switchMethod(t) {
+        this.msg.pageIndex = 1;
+        if (t === 1) {
+          this.transitionShow = false;
+          this.transitionShow2 = true;
+          this.msg.pageSize = this.tableSize;
+          this.getList();
+        } else if (t === 2) {
+          this.transitionShow = true;
+          this.transitionShow2 = false;
+          // 宽 220 高 153
+          let cont = parseInt(this.contenWidth / 220) * parseInt(this.contenHeight / 153);
+          this.msg.pageSize = cont;
+          this.getList();
+        }
+      },
+      editCurency(id, src) { //  修改根据ID 获取信息
+        this.apipost('FinancialInstitutions_post_Get', {
+          ID: id
+        }, res => {
+          if (res.data.resultCode == 1) {
+            let data = res.data.data
+            this.addMsg = data
+            this.imageUrl = src ? src : ''
+          } else {
+            this.tips(res.data.message, 'error');
+          }
+        }, err => {})
+      },
+      cancelEdit() { // 取消修改、新增
+        this.addMsg = {
+          ID: 0,
+          Name: '',
+          EnCode: '',
+          Logo: '',
+          Type: ''
+        }
+      },
+      getDepartment() { //获取机构类型
+        this.apipost('FinancialInstitutions_post_GetFinancialInstitutionsTypeList', {}, res => {
+          if (res.data.resultCode == 1) {
+            this.departmentList = res.data.data;
+          }
+        }, err => {})
+      },
+      getList() { //获取列表
+        this.loading = true;
+        this.DataList = [];
+        this.apipost('FinancialInstitutions_post_GetPageList', this.msg, res => {
+          if (res.data.resultCode == 1) {
+            this.total = res.data.data.count;
+            if (this.total > 0) {
+              this.noData = false;
+            } else {
+              this.noData = true;
+            }
+            this.DataList = res.data.data.pageData
+            this.loading = false;
+          }
+        }, err => {})
+      },
+      addInstitutions() { // 保存 修改、新增
+        this.apipost('FinancialInstitutions_post_Set', this.addMsg, res => {
+          if (res.data.resultCode == 1) {
+            this.tips(this.$t('tips.saveYes'), 'success')
+            this.getList();
+            this.initAddMsg();
+            this.imageUrl = '';
+            this.addShow = false
+          } else {
+            this.$message.error(res.data.message)
+          }
+        }, err => {})
+      },
+      financeinfoRemove(id, text) { //删除
+        this.$confirm(this.$t('tips.qrsc') + text + '?', this.$t('tips.tips'), {
+          confirmButtonText: this.$t('pub.sureBtn'),
+          cancelButtonText: this.$t('pub.cancelBtn'),
+          type: 'warning'
+        }).then(() => {
+          this.deletInstitutions(id)
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: this.$t('hotel.hotel_HasBeenCancelled')
+          });
+        });
+      },
+      deletInstitutions(id) {
+        this.apipost('FinancialInstitutions_post_Remove', {
+          ID: id
+        }, res => {
+          if (res.data.resultCode == 1) {
+            this.innerVisible = false;
+            this.tips(this.$t('tips.shanchuchenggong'), 'success')
+          } else {
+            this.tips(res.data.message, 'error');
+          }
+          this.getList();
+        }, err => {})
+      },
+      initAddMsg() { //初始化添加、修改数据
+        let newMsg = {
+          ID: 0,
+          Name: '',
+          Url: '',
+          Code: ''
+        }
+        this.addMsg = newMsg;
+      },
+      submitForm(addMsg) { //提交创建、修改表单
+        this.$refs[addMsg].validate((valid) => {
+          if (valid) {
+            this.addInstitutions()
+          } else {
+            return false;
+          }
+        });
+      },
+      resetPageIndex() { //查询初始化页码
+        this.msg.pageIndex = 1;
+        this.currentPage = 1
+      },
+      handleCurrentChange(val) { //翻页功能按钮
+        this.msg.pageIndex = val;
+        this.getList();
+      },
+      tips(msg, type) {
+        this.$message({
+          message: msg,
+          duration: 2000,
+          type: type
+        });
+      },
+      closeChangeMachie(done) {
+        done();
+        this.resetForm('addMsg');
+      },
+      resetForm(formName) {
+        this.initAddMsg();
+        this.$refs[formName].resetFields();
+        this.imageUrl = '';
+      },
+      handleAvatarSuccess(res, file) { //上传
+        if (res.resultCode == 1) {
+          var img_path = res.data.FullFilePath
+          this.addMsg.Logo = res.data.FilePath
+          this.imageUrl = img_path
+        }
+      },
+      beforeAvatarUpload(file) { //上传-
+        const extension = file.name.split(".")[1] === "jpg";
+        const extension2 = file.name.split(".")[1] === "png";
+        const isLt2M = file.size / 1024 / 1024 < 10;
+        if (!extension && !extension2) {
+          this.$message.error(thi.$t('tips.znsJPGPNGgs'))
+        }
+        if (!isLt2M) {
+          this.$message.error(thi.$t('tips.wjdxbncgsz'))
+        }
+        return extension || (extension2 && isLt2M);
+      },
+      goUrl(path, id) {
+        this.$router.push({
+          name: path,
+          query: {
+            'BackId': id
+          }
+        })
+      },
+    },
+    mounted() {
+      this.getList();
+      this.getDepartment()
+    }
+  }
+
+</script>

src/router/routes.js

@@ -87,6 +87,11 @@ const routes = [{
         component: () =>
           import("pages/financial/TeamRevenueReport.vue")
       },
+      {
+        path: "/financial/institutionsManagement", //金融机构管理
+        component: () =>
+          import("pages/financial/institutionsManagement.vue")
+      },
       {
         path: "/test", //API测试
         component: () =>