bug记录

后端

前端

前端校验控制

<template>
  <div>
    <bv-table ref="table" title="支付渠道管理" :search="true" pagination :fetch-api="fetch">

      <!--   功能按钮   -->
      <template #operates>
        <bv-button view="create" @click="add()">新增</bv-button>
        <bv-button show="one" view="modify" @click="modifyData()">修改</bv-button>
        <bv-button show="oneOrMore" view="remove" @click="batchRemove()">删除</bv-button>
      </template>

      <!--   查询条件   -->
      <template #search="{ filter }">
        <bv-col>
          <bv-form-item label="渠道名称" prop="channelName">
            <bv-input v-model="filter.channelName"/>
          </bv-form-item>
        </bv-col>
        <bv-col>
          <bv-form-item label="渠道编码" prop="channelCode">
            <bv-input v-model="filter.channelCode"/>
          </bv-form-item>
        </bv-col>
        <bv-col>
          <bv-form-item label="渠道ID" prop="channelId">
            <bv-input v-model="filter.channelId"/>
          </bv-form-item>
        </bv-col>
        <bv-col>
          <bv-form-item label="支付类型" prop="payType">
            <bv-select clearable v-model="filter.payType" type="enum" key-code="payTypeEnum"/>
          </bv-form-item>
        </bv-col>
        <bv-col>
          <bv-form-item label="状态" prop="state">
            <bv-select clearable v-model="filter.state" type="enum" key-code="stateEnum"/>
          </bv-form-item>
        </bv-col>
      </template>

      <!--   列表字段   -->
      <bv-table-column type="selection"/>
      <bv-table-column label="渠道ID" prop="channelId"/>
      <bv-table-column label="渠道编码" prop="channelCode"/>
      <bv-table-column label="渠道名称" prop="channelName"/>
      <bv-table-column label="支付类型" prop="payType.name"/>
      <bv-table-column label="状态" prop="state.name"/>
      <bv-table-column label="是否支持补单" prop="isRepair.name"/>
      <bv-table-column label="是否支持对账" prop="isCheck.name"/>
      <bv-table-column label="对账解析器" prop="checkResolver"/>
      <bv-table-column label="前置处理器" prop="bankResolver"/>
      <bv-table-column label="创建人" prop="createUserName"/>
      <bv-table-column label="创建时间" prop="createTime"/>
      <bv-table-column label="更新人" prop="modifyUserName"/>
      <bv-table-column label="更新时间" prop="modifyTime"/>
      <bv-table-column label="操作" type="operation">
        <template #default="{ row }">
          <bv-link class="mgl5" type="primary" @click="viewParams(row)">查看渠道参数</bv-link>
        </template>
      </bv-table-column>
    </bv-table>

    <template v-if="dialogFormVisible">
    <bv-dialog title="支付渠道维护" :visible.sync="dialogFormVisible" @close="reset">
      <bv-form :model="item"  ref="form" :rules="rules">
        <bv-row :layout="2">
          <bv-col >
              <bv-form-item label="渠道ID" prop="channelId" required="请输入渠道ID">
                <span  v-if="modifyType==='modify'">{{item.channelId}}</span>
                <bv-input v-model.trim="item.channelId" v-else />
              </bv-form-item>
            </bv-col>
          <bv-col>
            <bv-form-item label="渠道编码" prop="channelCode" required="请输入渠道bh">
              <bv-input v-model.trim="item.channelCode"  />
            </bv-form-item>
          </bv-col>
          <bv-col>
            <bv-form-item label="渠道名称" prop="channelName" required="请输入渠道名称">
              <bv-input v-model.trim="item.channelName" />
            </bv-form-item>
          </bv-col>
          <bv-col >
            <bv-form-item label="支付类型" prop="payType" required="请选择支付类型">
              <bv-select clearable v-model="item.payType" type="enum"  key-code="payTypeEnum"/>
            </bv-form-item>
          </bv-col>
          <bv-col >
            <bv-form-item label="是否启用" prop="state" required="请选择是否启用">
              <bv-select clearable v-model="item.state" type="enum" key-code="stateEnum"/>
            </bv-form-item>
          </bv-col>
          <bv-col >
            <bv-form-item label="是否支持补单" prop="isRepair" required="请选择是否支持补单">
              <bv-select clearable v-model="item.isRepair" type="enum" key-code="yNEnum"/>
            </bv-form-item>
          </bv-col>
          <bv-col >
            <bv-form-item label="是否支持对账" prop="isCheck" required="请选择是否支持对账">
              <bv-select clearable v-model="item.isCheck" type="enum" key-code="yNEnum"/>
            </bv-form-item>
          </bv-col>
          <bv-col >
            <bv-form-item label="对账解析器" prop="checkResolver" >
              <bv-input v-model.trim="item.checkResolver"/>
            </bv-form-item>
          </bv-col>
          <bv-col >
            <bv-form-item label="前置处理器" prop="bankResolver" >
              <bv-input v-model.trim="item.bankResolver"/>
            </bv-form-item>
          </bv-col>
        </bv-row>
        <bv-table ref="paramTable" :search="false" :data="item.params">
          <template #operates>
            <bv-button show="none" view="create" @click="addParam()">新增参数</bv-button>
            <bv-button show="oneOrMore" view="remove" @click="removeParam()">删除参数</bv-button>
          </template>
          <bv-table-column type="selection" />
          <bv-table-column label="参数名称" prop="name">
            <template #default="scope">
              <bv-form-item :prop="'params.' + scope.$index + '.name'" required="请输入参数名称">
                <bv-input v-model="scope.row.name" />
              </bv-form-item>
            </template>
          </bv-table-column>
          <bv-table-column label="参数值" prop="value">
            <template #default="scope">
              <bv-form-item :prop="'params.' + scope.$index + '.value'" required="请输入参数值">
                <bv-input v-model="scope.row.value" />
              </bv-form-item>
            </template>
          </bv-table-column>
          <bv-table-column label="参数描述" prop="description">
            <template #default="scope">
              <bv-form-item :prop="'params.' + scope.$index + '.description'" >
                <bv-input v-model="scope.row.description" />
              </bv-form-item>
            </template>
          </bv-table-column>
        </bv-table>
      </bv-form>
      <template #footer>
        <bv-button view="save" @click="confirm">保存</bv-button>
        <bv-button view="cancel" @click="reset">取消</bv-button>
      </template>
    </bv-dialog>
    </template>
    <bv-dialog title="渠道参数详情" :visible.sync="paramDialogFormVisible" @close="closeParams" >
      <bv-table :search="false" :data="params">
        <bv-table-column label="参数名称" prop="name"/>
        <bv-table-column label="参数值" prop="value"/>
        <bv-table-column label="参数描述" prop="description"/>
      </bv-table>
    </bv-dialog>
  </div>
</template>

<script>
import { fetch, create, modify, remove } from '@/api/pay/pay-channel'

export default {
  name: 'PayChannel',
  data() {
    return {
      rules: {
        channelCode: [
          // { required: true, message: '请输入渠道编号', trigger: 'blur' },
          { pattern: /^\d{0,4}$/, required: true, message: '请输入最长4位数字', trigger: 'blur' }
        ]
      },
      fetch,
      create,
      modify,
      remove,
      modifyType: null,
      dialogFormVisible: false,
      paramDialogFormVisible: false,
      item: {
        params: []
      }, // 新增保存渠道信息
      params: [] // 参数详情列表
    }
  },
  methods: {
    addParam() {
      this.item.params.push({
        id__: ++this.id__,
        name: '',
        value: '',
        description: ''
      })
    },
    removeParam() {
      const selections = this.$refs.paramTable.selection
      if (selections && selections.length > 0) {
        selections.forEach((selection) => {
          this.item.params.splice(this.item.params.findIndex(item => (item.id__ ? item.id__ === selection.id__ : item.name === selection.name)), 1)
        })
        this.$refs.table.clearSelection()
      }
    },
    viewParams(row) {
      this.paramDialogFormVisible = true
      if (row.params !== undefined) {
        this.params = JSON.parse(row.params)
      }
    },
    add() {
      this.item.state = 1
      this.item.isRepair = 1
      this.item.isCheck = 1
      this.modifyType = 'add'
      this.dialogFormVisible = true
    },
    modifyData() {
      const row = this.$refs.table.selection[0]
      this.modifyType = 'modify'
      console.log(row)
      this.item = {
        id: row.id,
        channelName: row.channelName,
        channelCode: row.channelCode,
        channelId: row.channelId,
        payType: row.payType.code,
        state: row.state.code,
        isRepair: row.isRepair.code,
        isCheck: row.isCheck.code,
        checkResolver: row.checkResolver,
        bankResolver: row.bankResolver,
        params: row.params !== undefined ? JSON.parse(row.params) : []
      }
      this.dialogFormVisible = true
    },
    // 确认保存
    confirm() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          this.$message.warning('请补充必填字段')
          return false
        }
        // 设置交易场景多个英文逗号分隔 数组转字符串
        console.log(this.item)
        if (this.modifyType === 'add') {
          this.create(this.item).then(() => {
            this.reset()
            this.$refs.table.fetchData()
          }).catch(() => {
          });
        } else {
          this.modify(this.item).then(() => {
            this.reset()
            this.$refs.table.fetchData()
          }).catch(() => {
          });
        }
      })
    },
    closeParams() {
      this.paramDialogFormVisible = false
    },
    reset() {
      this.item = {
        params: []
      }
      this.$refs.form.clearValidate()
      this.dialogFormVisible = false
    },
    removeData(row) {
      this.$confirm(`此操作将删除【${row.channelName}】, 是否继续?`).then(() => {
        this.remove(row.channelId).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.$refs.table.fetchData()
        }).catch(() => {})
      }).catch(() => {
      })
    },
    batchRemove() {
      const selections = this.$refs.table.selection
      const idList = []
      if (selections && selections.length > 0) {
        selections.forEach((selection) => {
          idList.push(selection.channelId)
        })
        this.$confirm('确认要删除选中的数据吗?').then(() => {
          this.remove(idList.map(String).join(',')).then(() => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.$refs.table.fetchData()
          }).catch(() => {})
        }).catch(() => {
        })
      }
    }

  }
}
</script>

<style lang="scss" scoped>
  .mgl5 {
    margin-left: 5px;
  }
</style>

注意form表单中加 :rules

修改为空时修改失败bug

页面下拉框回显不同步，显示最后一个选项

配置

更新getway和portal，从xshell下载的路径