Infsea.vue

<template>
  <div class="eibs-tab">
    <!-- ----------左 ---------->
    <c-list-search @form-reset="handleReset()" @form-search="onSearch()">
      
      <template v-slot="searchSlot">
        <el-form class="m-table-search-form" ref="paramsForm" label-position="right" label-width="110px" size="small" :model="model">
          <el-row>
            <c-col :span="8">
              <el-form-item label="开始时间" prop="beginDate" :rules="rules.beginDate">
                <el-date-picker
                    v-model="model.beginDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    :picker-options="startDatePicker"
                    placeholder="请选择开始时间">
                </el-date-picker>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="业务参考号" prop="ownref" :rules="rules.ownref">
                <c-input
                  v-model="model.ownref"
                  style="width: 100%"
                  placeholder="请输入业务参考号"
                  maxlength="16"
                ></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="结束时间" prop="endDate" :rules="rules.endDate">
                <el-date-picker
                    v-model="model.endDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    :picker-options="endDatePicker"
                    placeholder="请选择结束时间">
                </el-date-picker>
              </el-form-item>
            </c-col>
          </el-row>
          <el-row v-show="searchSlot.searchToggle">
            <c-col :span="8">
              <el-form-item label="工作流" prop="wfesrv">
                <c-select
                  v-model="model.wfesrv"
                  style="width: 100%"
                  placeholder="请选择工作流"
                  dbCode="SRVTXT"
                ></c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="工作流状态" prop="wfesta">
                <c-select
                  v-model="model.wfesta"
                  style="width: 100%"
                  placeholder="请选择工作流状态"
                  dbCode="TRSSTA"
                ></c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="交易代码" prop="inifrm" :rules="rules.inifrm">
                <c-select
                  v-model="model.inifrm"
                  style="width: 100%"
                  placeholder="请选择交易代码"
                  maxlength="6"
                  dbCode="ATPTXT"
                ></c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="交易状态" prop="relflg">
                <c-select
                  v-model="model.relflg"
                  style="width: 100%"
                  placeholder="请选择交易状态"
                  dbCode="RELSTA"
                ></c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="分支机构" prop="bchname">
                <c-select v-model="model.branch" style="width: 100%" placeholder="请选择分支机构">
                  <el-option v-for="item in bchData" :key="item.bchname" :label="item.bchname" :value="item.branch">
                    <span style="float: left">{{ item.branch }} - {{ item.bchname }}</span>
                  </el-option>
                </c-select>
              </el-form-item>
            </c-col>
          </el-row>
        </el-form>
      </template>
    </c-list-search>

    <c-col :span="24">
      <c-paging-table
        :data="trnData"
        :columns="trnColumns"
        :pageNumber="model.pageNum"
        :pageSize="model.pageSize"
        :total="model.total"
        v-on:queryFunc="queryFunc"
        :border="true"
      >
        <c-table-column fixed="right" prop="op" label="操作" width="180px">
          <template slot-scope="{ scope }">
            <c-button
              style="margin-left: 0"
              size="small"
              @click="trnInfo2(scope.$index, scope.row)"
              >详情</c-button
            >
            <!--c-button
              style="margin-left: 5px"
              size="small"
              type="primary"
              @click="trnEdit(scope.$index, scope.row)"
              >修改</c-button
            -->
          </template>
        </c-table-column>
      </c-paging-table>
    </c-col>
  </div>
</template>

<script>
import codes from '~/config/CodeTable'
import { queryByPage } from '~/service/manage/trn.js'
import { getBchlist } from '~/service/manage/pty.js'

export default {
  name: '',
  props: ['model'],
  inject: ['root'],
  data() {
    return {
      rules: {
        beginDate: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
        endDate: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
        ownref: [{ required: false, message: '请输入业务参考号', trigger: 'blur' },
                { validator: this.checkLang, trigger: 'blur' }],
        inifrm: [{ required: false, message: '请输入交易代码', trigger: 'blur' },
                { validator: this.checkEn, trigger: 'blur' }]
      },
      bchData: [],
      trnData: [],
      trnColumns: [
        { label: '交易代码', prop: 'inifrm', width: '120' },
        { label: '业务编号', prop: 'ownref', width: '150' },
        { label: '币种', prop: 'reloricur', width: '100' },
        { label: '金额', prop: 'reloriamt', width: '100' },
        { label: '交易开始时间', prop: 'inidattim', width: '160' },
        { label: '交易状态', prop: 'relflg', width: '120' },
        { label: '客户经理ID', prop: 'usr', width: '120' },
        { label: '工作流', prop: 'wfesrv', width: '150' },
        { label: '工作流状态', prop: 'wfesta', width: '120' },
      ],
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate(),
    }
  },
  computed: {},
  activated() {
    // const { update } = this.$route.params
    // if (update) {
      // TODO
      //this.onDblTrnSearch()
      //获取当前页数
    // }
  },
  watch: {
    '$store.state.UserContext.currentOrg': {
      handler(newVal) {
        this.onbchSearch()
      }
    }
  },
  created() {
    this.model.beginDate = this.getNowDate();
    this.model.endDate = this.getNowDate();
    this.onDblTrnSearch()
    this.onbchSearch()
  },
  methods: {
    getNowDate() {
      const timeOne = new Date()
      const year = timeOne.getFullYear()
      let month = timeOne.getMonth() + 1
      let day = timeOne.getDate()
      month = month < 10 ? '0' + month : month
      day = day < 10 ? '0' + day : day
      const NOW_MONTHS_AGO = `${year}-${month}-${day}`
      return NOW_MONTHS_AGO
    },
    beginDate(){
      const self = this
      return {
        disabledDate(time){
          if (self.model.endDate) {  //如果结束时间不为空，则小于结束时间
            return time.getTime() > new Date(self.model.endDate).getTime();
          } else {
            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
          }
        }
      }
    },
    processDate() {
      const  self = this
      return {
        disabledDate(time) {
          if (self.model.beginDate) {  //如果开始时间不为空，则结束时间大于开始时间
            return time.getTime() < new Date(self.model.beginDate).getTime() - 86400000;  
        } else {
            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
          }
        }
      }
    },
    checkLang(rule, value, callback) {
      if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          callback(new Error('不能包含中文!'))
        } else {
          callback()
        }
      }
      callback()
    },
    checkEn(rule, value, callback) {
      if (/[a-zA-z]$/.test(value) == false) {
        callback(new Error('只能输入英文!'))
      } else {
        callback()
      }
    },
    onbchSearch(){
      getBchlist().then((res) => {
        if(res.respCode == SUCCESS) {
          this.$set(this, "bchData", res.data)
        }
      })
    },
    handleReset() {
      this.$refs.paramsForm.resetFields()
      this.onDblTrnSearch()
    },
    onSearch() {
      this.model.pageNum = 1
      this.model.pageSize=PageSize
      this.onDblTrnSearch()
    },
    onDblTrnSearch() {
      delete this.model.modifySet;
      if(this.model.beginDate == null || this.model.endDate == null){
        this.$notify.error("请选择查询时间范围");
      } else {
        queryByPage(this.model).then((res) => {
          if(res.respCode == SUCCESS) {
            const list = res.data.list
            this.trnData = list
            this.model.pageNum = res.data.pageNumber
            this.model.pageSize = res.data.pageSize
            this.model.total = res.data.total
          }
        })
      }
    },
    queryFunc(pageNumber, pageSize) {
      this.model.pageNum = pageNumber
      this.model.pageSize = pageSize
      this.onDblTrnSearch()
    },
    getCodesByKey(key) {
      return codes[key] || []
    },
    trnAdd() {
      this.$router.push(`/business/dbatrn`)
    },
    trnInfo(index, row) {
      this.$router.push(`/business/dbitrn/${row.inr}`)
    },

    //详情
		async trnInfo2(idx, row) {
			this.$router.push({
				path: '/business/trnrelDetail1',
				query: {
					inr: row.inr,
					inifrm: row.inifrm.toLocaleLowerCase(),
					businessType: row['objtyp'],
          type:'dbltrn'
				}
			});
		},

    trnEdit(index, row) {
      this.$router.push(`/business/dbetrn/${row.inr}`)
    },
  },
}
</script>

<style scoped>
.table-button-item-list {
  padding: 0;
  margin: 0;
}
.table-button-item-list li {
  list-style: none;
  padding: 5px 0;
  text-align: center;
  color: #606266;
  cursor: pointer;
}
</style>