代理行业务查询页面开发

src/page/Remittance/RemittanceRouter.js

@@ -41,6 +41,7 @@ const RemittanceRouter = [
   { path: 'auesig', component: () => import('./Autsig/Auesig/views'), name: 'Auesig', meta: { keepAlive: true, title: '自动化签约信息编辑',module: 'Remittance' } },
   { path: 'autrul', component: () => import('./Autsig/Autrul/views'), name: 'Autrul', meta: { keepAlive: true, title: '签约场景配置',module: 'Remittance' } },
 
-
+  // 代理行
+  { path: 'zptsel', component: () => import('./Zptsel/views'), name: 'zptsel', meta: { keepAlive: true, title: '转汇款',module: 'Remittance' } },
 ]
 export default RemittanceRouter

src/page/Remittance/Zptsel/event/index.js

+import Api from '~/service/Api';
+import moment from 'moment';
+
+export default {
+  methods: {
+    async handleSearch() {
+      if ((this.model.infcon.seaownref == '' || this.model.infcon.seaownref == null) && this.model.infcon.opndatfrom == null) {
+        this.$notify.error({ title: '错误', message: '开始日期必输！' });
+        return;
+      }
+      if ((this.model.infcon.seaownref == '' || this.model.infcon.seaownref == null) && this.model.infcon.opndatto == null) {
+        this.$notify.error({ title: '错误', message: '截止日期必输！' });
+        return;
+      }
+      if (this.model.infcon.opndatfrom != null && this.model.infcon.opndatto != null) {
+        if (new Date(this.model.infcon.opndatfrom).getTime() > new Date(this.model.infcon.opndatto).getTime()) {
+          this.$notify.error({ title: '错误', message: '开始日期应小于或等于截止日期！' });
+          return
+        }
+      }
+      if (this.model.infcon.seacur == '' && (this.model.infcon.seaamtfr != '' || this.model.infcon.seaamtto != '')) {
+        this.$notify.error({ title: '错误', message: '输入金额前请先选择币种！' });
+        return
+      }
+      if (this.model.infcon.seaamtfr != '' && this.model.infcon.seaamtto != '') {
+        if (Number(this.model.infcon.seaamtfr) > Number(this.model.infcon.seaamtto)) {
+          this.$notify.error({ title: '错误', message: '金额下限应小于等于金额上限!' });
+          return
+        }
+      }
+
+      this.load = true;
+      let params = {
+        ...this.model.infcon,
+        opndatfrom: this.model.infcon.opndatfrom ? moment(this.model.infcon.opndatfrom).format("YYYY-MM-DD") : '',
+        opndatto: this.model.infcon.opndatto ? moment(this.model.infcon.opndatto).format("YYYY-MM-DD") : '',
+        branch: JSON.parse(sessionStorage.getItem('currentOrg')).departmentNumber,
+        pageNumber: this.pagination.pageIndex,
+        pageSize: this.pagination.pageSize,
+        paytyp: 'I',
+      };
+      delete params.markSet
+      delete params.modifySet
+      let rtnmsg = await Api.post('/Remittance/cptsel/listcp', params);
+      if (rtnmsg.respCode == SUCCESS) {
+        this.stmData.data = [];
+        this.stmData.data = rtnmsg.data.list;
+        this.pagination.total = rtnmsg.data.total;
+      } else {
+        this.$notify.error({ title: '错误', message: '服务请求失败！' });
+      }
+      this.load = false;
+    },
+
+    async handleReset() {
+      this.model.infcon = {}
+    },
+    //柜员列表
+    async getUserList() {
+      let param = {};
+      if (this.model.bchcon) {
+        param.bchcon = this.model.bchcon
+      }
+      let res = await Api.post("/public/quesel/getActUserList", param);
+      if (res.respCode == SUCCESS) {
+        this.userList = res.data.list;
+      }
+    },
+    //获取机构列表
+    async getBranchList() {
+      let branch = JSON.parse(sessionStorage.getItem('currentOrg')).departmentNumber
+      let rtnmsg = await Api.post("/public/rptsel/getBranchList", branch)
+      if (rtnmsg.respCode === SUCCESS) {
+        this.bchtypList = rtnmsg.data.filter(item => (item.lev != 'A' && item.lev != 'B'))
+      }
+    },
+    // pageSize改变
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.pagination.pageIndex = 1;
+      this.pagination.pageSize = val;
+      this.handleSearch();
+    },
+    // 页码改变
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.pagination.pageIndex = val;
+      this.handleSearch();
+    },
+
+    // 详情
+    async details(row) {
+      const params = {
+        ownref: row.ownref,
+      };
+      const res = await Api.post('/manager/trn/getTrnListByOwnref', params);
+      if (res.respCode === SUCCESS) {
+        if (res.data.length === 1) {
+          if (this.oldRefId && this.$refs[this.oldRefId]) {
+            this.$refs[this.oldRefId].showPopper = false;
+          }
+          this.display(res.data[0])
+        } else {
+          this.trnData.data = res.data;
+          this.oldRefId = 'popover_' + row.inr
+          this.$refs[this.oldRefId].showPopper = true;
+        }
+      }
+    },
+    closeDisplayDialog() {
+      if (this.oldRefId) {
+        this.$refs[this.oldRefId].showPopper = false;
+      }
+    },
+
+    // 关闭详情弹框
+    closeDetailsDialog(refId) {
+      if (refId) {
+        this.$refs[refId].showPopper = false;
+      }
+    },
+
+    // 处理
+    async handler(row) {
+      this.handleModel = row;
+      this.trnUrl = 'Remittance';
+      this.inifrm = 'cptsel';
+      this.initdialog = true;
+    },
+
+    //双击表格数据
+    async TableDblRow(row) {
+      this.handler(row)
+    },
+
+    //点击处理弹窗中按钮
+    async handleClick(btn, row) {
+      let obj = {
+        objtyp: 'CPD',
+        objinr: row.inr,
+        pntinr: row.pntinr,
+        pnttyp: row.pnttyp,
+        ledinr: row.ledinr,
+        trnName: btn.code.toLowerCase(),
+      }
+      let isPush = await this.$refs.lockAndPending.checkLockAndPending(obj)
+      if (!isPush) {
+        return
+      }
+      let params = {}
+      let type;
+      if ("挂账退汇" === btn.label.toUpperCase()) {
+        type = "GZTH"
+      } else if ("解付后退汇" === btn.label.toUpperCase()) {
+        type = "JFTH"
+      }
+
+      if (btn.code.toLowerCase() == 'jstopn') {
+        params = {
+          path: "/business/" + btn.code.toLowerCase(),
+        }
+      } else {
+        params = {
+          path: "/business/" + btn.code.toLowerCase(),
+          query: { inr: row.inr, pntinr: row.pntinr, accmod: 'G', type: type }
+        }
+      }
+      this.routerPush(params);
+      this.initdialog = false;
+    },
+    //修改弹窗状态
+    changeBtn(isVisible) {
+      this.initdialog = isVisible;
+    },
+    // 关闭处理弹框
+    closeHandlerDialog() {
+      this.initdialog = false;
+    },
+
+    /**
+     * 打开快照页面
+     * @param {string} inr
+     */
+    display(row) {
+      if (this.oldRefId) {
+        this.$refs[this.oldRefId].showPopper = false;
+      }
+      // 历史快照
+      if (row.inr.length == 8) {
+        this.routerPush({
+          path: '/business/HistoryRecord',
+          query: {
+            businessInr: row.inr,
+            businessType: 'TRN',
+            type: 'view'
+          }
+        })
+      } else if (row.inr.length == 16) {
+        this.routerPush({
+          path: `/display/${row.inifrm.toLowerCase()}`,
+          query: {
+            businessInr: row.inr,
+            businessType: 'TRN'
+          }
+        });
+      }
+    },
+    toCptati() {
+      // 点击开立，清空从待经办进来的时候带的行参数
+      // localStorage.setItem('row_letopn', null)
+      // localStorage.setItem('review_letopn',null)
+      this.routerPush({
+        path: '/business/cptati',
+      });
+    },
+    toCptato() {
+      this.routerPush({
+        path: '/business/cptato',
+      });
+    },
+
+    toZptadv() {
+      this.routerPush({
+        path: '/business/zptadv',
+      });
+    },
+
+    toZptopn() {
+      this.routerPush({
+        path: '/business/zptopn',
+      });
+    },
+    toZpticr() {
+      this.routerPush({
+        path: '/business/zpticr',
+      });
+    },
+    toZptocr() {
+      this.routerPush({
+        path: '/business/zptocr',
+      });
+    },
+    
+    changeOwnref() {
+      if (this.model.infcon.seaownref) {
+        this.model.infcon.opndatfrom = null
+      }
+    },
+    //Info
+    toInfo(row, objtyp, subobjtyp, paytyp) {
+      this.routerPush({
+        path: "/business/cpdinf",
+        query: { inr: row.inr, objtyp: objtyp, pntinr: row.pntinr, subobjtyp: subobjtyp, paytyp: paytyp }
+      });
+    },
+    async getdbCode(codeType, uil, codeNam) {
+      let params = {
+        codeType: codeType,
+        uil: uil ? uil : 'EN'
+      }
+      let rtnmsg = await Api.post("/manager/dic/listDicInfo", params)
+      if (rtnmsg.respCode === SUCCESS) {
+        let curList = rtnmsg.data.map(item => ({
+          value: item.codeValue,
+          label: item.codeName
+        }));
+        this.model.dbCodes[codeNam] = curList
+      }
+    },
+    getCodelabel(value, codenam) {
+      const codeobj = this.model.dbCodes[codenam].find(obj => obj.value === value)
+      return codeobj ? codeobj.label : value;
+    },
+  },
+};

src/page/Remittance/Zptsel/model/index.js

+
+export default class Zptsel {
+  constructor() {
+    this.data = {
+      dbCodes: {
+        cptrou: [],
+      },
+      infcon: {
+        seaownref: '',
+        opndatfrom: new Date((new Date).getTime() - (7 * 24 * 60 * 60 * 1000)),
+        opndatto: new Date(),
+        searef: '',
+        route: '',
+        isClosed: '',
+        seacur: '',
+        seaamtfr: '',
+        seaamtto: '',
+        branchinr: '',
+        ownusr: '',
+
+      }
+    }
+  }
+}

src/page/Remittance/Zptsel/views/Infsea.vue

+<template>
+  <div class="eibs-tab">
+    <c-list-search @form-reset="handleReset('paramsForm')" @form-search="handleSearch">
+      <template v-slot="searchSlot">
+        <el-form class="m-table-search-form" ref="paramsForm" label-position="right" label-width="110px" size="small">
+          <el-row>
+            <c-col :span="8">
+              <el-form-item label="业务编号" prop="infcon.seaownref" style="width: 100%">
+                <c-input v-model="model.infcon.seaownref" maxlength="16" @change="changeOwnref"
+                  placeholder="请输入业务编号"></c-input>
+              </el-form-item>
+            </c-col>
+
+            <c-col :span="8">
+              <el-form-item label="日期" prop="infcon.opndatfrom" style="width: 100%">
+                <c-col :span="11">
+                  <c-date-picker type="date" v-model="model.infcon.opndatfrom" placeholder="请选择起始日期"
+                    value-format="yyyy-MM-dd" style="width: 100%"></c-date-picker>
+                </c-col>
+                <c-col :span="2" style="text-align: center">
+                  <label style="display: inline-block; width: 100%">-</label>
+                </c-col>
+                <c-col :span="11">
+                  <c-date-picker type="date" v-model="model.infcon.opndatto" placeholder="请选择截止日期" style="width: 100%"
+                    value-format="yyyy-MM-dd"></c-date-picker>
+                </c-col>
+              </el-form-item>
+            </c-col>
+            <c-col :span="8">
+              <el-form-item label="客户号/名称" prop="infcon.searef" style="width: 100%">
+                <c-input v-model="model.infcon.searef" placeholder="请输入客户号/名称" style="width: 100%">
+                </c-input>
+              </el-form-item>
+            </c-col>
+          </el-row>
+          <el-row v-show="searchSlot.searchToggle">
+            <c-col :span="8">
+              <el-form-item label="汇款邮路" prop="infcon.route" style="width: 100%">
+                <c-select v-model="model.infcon.route" dbCode="cptrou" placeholder="请选择汇款邮路"></c-select>
+              </el-form-item>
+            </c-col>
+            <c-col :span="8">
+              <el-form-item label="汇款状态" prop="infcon.seasta" style="width: 100%">
+                <c-select v-model="model.infcon.seasta" :code="cptmod" placeholder="请选择汇款状态"></c-select>
+              </el-form-item>
+            </c-col>
+            <c-col :span="8">
+              <el-form-item label="是否闭卷" prop="infcon.isClosed" style="width: 100%">
+                <c-select v-model="model.infcon.isClosed" dbCode='cxmflg' placeholder="请选择是否闭卷">
+                </c-select>
+              </el-form-item>
+            </c-col>
+            <c-col :span="8">
+              <el-form-item label="币种" prop="infcon.seacur" style="width: 100%">
+                <c-select v-model="model.infcon.seacur" :isShowKeyAndLabel="true" style="width: 100%" placeholder="请选择币种"
+                  dbCode="curtxt">
+                </c-select>
+              </el-form-item>
+            </c-col>
+            <c-col :span="8">
+              <el-form-item label="金额区间" prop="infcon.seaamtfr" style="width: 100%">
+                <c-col :span="11">
+                  <c-input v-model="model.infcon.seaamtfr" type="number" :precision="2" placeholder="请输入金额下限"
+                    style="width: 100%"></c-input>
+                </c-col>
+                <c-col :span="2" style="text-align: center">
+                  <label style="display: inline-block; width: 100%">-</label>
+                </c-col>
+                <c-col :span="11">
+                  <c-input v-model="model.infcon.seaamtto" type="number" :precision="2" placeholder="请输入金额上限"
+                    style="width: 100%"></c-input>
+                </c-col>
+              </el-form-item>
+            </c-col>
+            <c-col :span="8">
+              <el-form-item label="业务机构" prop="bchcon" style="width: 100%">
+                <c-select clearable placeholder="请选择业务机构" style="width: 100%" v-model="model.infcon.branchinr">
+                  <el-option :key="item.branch" :label="item.bchname" :value="item.inr" v-for="item in bchtypList">
+                  </el-option>
+                </c-select>
+              </el-form-item>
+            </c-col>
+            <c-col :span="8">
+              <el-form-item label="经办柜员" prop="usrcon" style="width: 100%">
+                <c-select clearable placeholder="请选择经办柜员" style="width: 100%" v-model="model.infcon.ownusr">
+                  <el-option :key="item.extkey + index" :label="item.extkey + '-' + item.nam" :value="item.extkey"
+                    v-for="(item, index) in userList">
+                  </el-option>
+                </c-select>
+              </el-form-item>
+            </c-col>
+          </el-row>
+        </el-form>
+      </template>
+    </c-list-search>
+
+
+    <c-col :span="24" style="margin-top: 0px">
+      <c-button class="medium_bcs" size="medium" type="primary" style="margin-right: 15px" @click="toZptadv">
+        转汇汇入
+      </c-button>
+      <c-button class="medium_bcs" size="medium" type="primary" style="margin-right: 15px" @click="toZptopn">
+        转汇汇出
+      </c-button>
+      <c-button class="medium_bcs" size="medium" type="primary" style="margin-right: 15px" @click="toZptadvTh">
+        转汇汇入退汇
+      </c-button>
+      <c-button class="medium_bcs" size="medium" type="primary" style="margin-right: 15px" @click="toZptopnTh">
+        转汇汇出退汇
+      </c-button>
+    </c-col>
+
+    <div>
+      <c-col :span="24">
+        <c-tabs v-model="activeTab" type="card" ref="elment">
+          <el-table v-loading="load" :data="stmData.data" height="calc(100vh - 310px)" border :columns="stmData.columns"
+            :showButtonFlg="true" :highlight-current-row="true" @row-dblclick="TableDblRow">
+            <el-table-column v-for="(item, key) in stmData.columns" :key="key" :label="item.label" :prop="item.prop"
+              :min-width="item.width">
+              <template slot-scope="scope">
+                <div style="text-align: center" v-if="item.prop.indexOf('amt') >= 0">
+                  {{ moneyFormat(scope.row[item.prop], scope.row.cur) }}</div>
+                <div style="text-align: center" v-else-if="item.prop.indexOf('accmod') >= 0">{{ cptmod.find(obj =>
+                  obj.value === scope.row[item.prop]) ? cptmod.find(obj => obj.value === scope.row[item.prop]).label :
+                  scope.row[item.prop] }}</div>
+                <div style="text-align: center" v-else-if="item.prop.indexOf('cptrou') >= 0">
+                  {{ getCodelabel(scope.row[item.prop], 'cptrou') }}</div>
+                <div v-else>{{ scope.row[item.prop] }}</div>
+              </template>
+            </el-table-column>
+            <!-- 自定义组件里加了最右边的一列”操作“ -->
+            <el-table-column fixed="right" prop="op" label="操作" width="180px">
+              <template slot="header">
+                <!-- 插槽里放了一个文字 一个按钮 -->
+                <c-col :span="11" style="text-align: center"><span>操作</span>
+                </c-col>
+              </template>
+              <template slot-scope="scope">
+                <c-button style="margin-right: 7px" size="small" type="text" @click="handler(scope.row)">处理
+                </c-button>
+                <!-- 申请一个弹出主键放在插槽，加工已渲染的数据 -->
+                <el-popover placement="top-start" title="历史信息" width="1200" trigger="manual"
+                  v-clickOutside="closeDisplayDialog" :ref="'popover_' + scope.row.inr">
+                  <div style="
+                      text-align: right;
+                      margin-top: -30px;
+                      margin-right: 5px;
+                      font-size: 16px;
+                    ">
+                    <span class="el-icon-close" style="cursor: pointer"
+                      @click="closeDetailsDialog('popover_' + scope.row.inr)"></span>
+                  </div>
+                  <el-table :data="trnData.data" :columns="trnData.columns" :showButtonFlg="true">
+                    <el-table-column v-for="(item, key) in trnData.columns" :key="key" :label="item.label"
+                      :prop="item.prop" :width="item.width">
+                      <template slot-scope="scope">
+                        <div>{{ scope.row[item.prop] }}</div>
+                      </template>
+                    </el-table-column>
+                    <el-table-column fixed="right" prop="op" label="操作" width="100px">
+                      <template slot-scope="scope">
+                        <c-button style="margin-left: 0" size="small" @click="display(scope.row)">快照</c-button>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                  <c-button style="margin-left: 0px" size="small" type="text" @click="details(scope.row)"
+                    slot="reference">
+                    快照
+                  </c-button>
+                  <c-button style="margin-left: 0" type="text" size="small" slot="reference"
+                    @click="toInfo(scope.row, 'CPD', '', 'I')">
+                    Info
+                  </c-button>
+                </el-popover>
+
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="pagination-box" style="display:block">
+            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+              :current-page.sync="pagination.pageIndex" :page-sizes="[10, 20, 50, 100, 500]"
+              :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
+            </el-pagination>
+          </div>
+        </c-tabs>
+      </c-col>
+      <!-- 点击处理ba弹框 -->
+      <el-dialog v-if="initdialog" v-dialogDrag :visible.sync="initdialog" title="交易列表" append-to-body width="70%">
+        <m-busbtn ref="childs" :trnUrl="trnUrl" :inifrm="inifrm" :activeTab="activeTab" :model="handleModel"
+          @onChoose="handleClick">
+        </m-busbtn>
+      </el-dialog>
+      <!--业务锁及待处理数据弹窗-->
+      <m-chklap ref="lockAndPending" @changeBtn="changeBtn"></m-chklap>
+    </div>
+  </div>
+</template>
+<script>
+import BusNavbar from "~/components/business/BusNavbar1";
+import CheckLockAndPending from "~/components/business/CheckLockAndPending";
+
+import event from "../event";
+
+export default {
+  inject: ["root"],
+  props: ["model", "codes"],
+  mixins: [event],
+  components: {
+    "m-busbtn": BusNavbar,
+    "m-chklap": CheckLockAndPending,
+  },
+  data() {
+    return {
+      bchtypList: [],
+      userList: [],
+      curinr: "",
+      ownref: "",
+      activeTab: "cd",
+      handleModel: {},
+      trnUrl: "",
+      inifrm: "",
+      load: false,
+      oldRefId: "",
+      trnData: {
+        columns: [
+          {
+            label: "业务编号",
+            prop: "ownref",
+            width: "160"
+          },
+          {
+            label: "交易名称",
+            prop: "inifrmname",
+            width: "220"
+          },
+          {
+            label: "交易码",
+            prop: "inifrm",
+            width: "100"
+          },
+          {
+            label: "交易时间",
+            prop: "inidattim",
+            width: "160"
+          },
+          {
+            label: "状态",
+            prop: "relflgName",
+            width: "100"
+          },
+          {
+            label: "币种",
+            prop: "reloricur",
+            width: "100"
+          },
+          {
+            label: "金额",
+            prop: "reloriamt",
+            width: "150"
+          },
+        ],
+        data: [],
+      },
+      stmData: {
+        columns: [
+          {
+            label: "业务编号",
+            prop: "ownref",
+            width: "200px"
+          },
+          {
+            label: "客户号",
+            prop: "pyeExtkey",
+            width: "180px"
+          },
+          {
+            label: "客户名称",
+            prop: "pyeName",
+            width: "250px"
+          },
+          {
+            label: "转汇类型",
+            prop: "zhtyp",
+            width: "250px"
+          },
+          {
+            label: "日期",
+            prop: "credat",
+            width: "150px"
+          },
+          {
+            label: "汇款邮路",
+            prop: "cptrou",
+            width: "150px"
+          },
+          {
+            label: "币种",
+            prop: "cur",
+            width: "120px"
+          },
+          {
+            label: "金额",
+            prop: "amt",
+            width: "120px"
+          },
+          {
+            label: "汇款状态",
+            prop: "accmod",
+            width: "120px"
+          },
+          {
+            label: "经办柜员",
+            prop: "ownusr",
+            width: "120px"
+          }
+        ],
+        data: [
+        ]
+      },
+      pagination: {
+        pageIndex: 1,
+        pageSize: 10,
+        total: 0
+      },
+
+      initdialog: false,
+      handlerDataList: [],
+      currentHandleRow: {},
+      cptmod: [
+        { label: "正常解付", value: "0" },
+        { label: "挂账待处理", value: "2" },
+        { label: "挂账后解付", value: "G" },
+        { label: "退汇", value: "3" }
+      ],
+    };
+  },
+
+  methods: {},
+  mounted() {
+    this.getdbCode('cptrou', '', 'cptrou');
+    this.getUserList();
+    this.getBranchList();
+  }
+};
+</script>
+<style>
+.pagination-box {
+  width: 100%;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 10px;
+  background: #fff;
+  margin-top: 5px;
+}
+
+.btn-group-wrap {
+  max-height: 200px;
+  width: 100%;
+  overflow-y: auto;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.btn-item {
+  margin-bottom: 10px;
+  margin-right: 10px;
+}
+
+.medium_bcs {
+  border-radius: 5px;
+}
+</style>

src/page/Remittance/Zptsel/views/index.vue

+<template>
+  <div class="eContainer-search">
+    <el-form :model="model" :rules="rules" ref="modelForm" label-width="120px" label-position="right" size="small" :validate-on-rule-change="false">
+      <c-content>
+        <m-infsea :model="model" :codes="codes" ref="infsea" />
+      </c-content>
+    </el-form>
+  </div>
+</template>
+<script>
+
+import CodeTable from "~/config/CodeTable";
+import Zptsel from "../model";
+import event from "../event"
+import Infsea from "./Infsea";
+
+export default {
+  name: "Zptsel",
+  components: {
+    "m-infsea": Infsea,
+  },
+  provide() {
+    return {
+      root: this
+    }
+  },
+  mixins: [event],    // 里面包含了Default、Check等的公共处理
+  data() {
+    return {
+      tabVal: "infsea",
+      trnName: "zptsel",
+      model: new Zptsel().data,
+      rules: null,
+      codes: { ...CodeTable },
+    };
+  },
+  methods: {},
+  created: async function () { },
+};
+</script>
+<style scoped></style>