oil-station/fuintAdmin/src/views/power/payment/index.vue

<template>
  <div class="box-centenr">
    <div style="width: 100%;display: flex">
      <el-alert
        title="说明"
        type="error"
        description="为了保证加油站商户日常在线支付业务的稳定性，油客里里目前支持多通道支付
                      可以有效的避免单支付通道带来不稳定性，从而造成油站不能正常支付问题
                      加油站一旦出现不能正常支付的情况，可以随时手工切换支付通道，来保证加油站支付收款业务"
        :closable="false"
      >
      </el-alert>

      <div style="width: 150%;display: flex;justify-content: right">
        <div class="mingc">功能状态</div>
        <el-switch
          v-model="value1"
          @change="changeStatus1"
        >
        </el-switch>
      </div>
    </div>
<!--    <div style="margin-top: 20px"><el-button type="primary" icon="el-icon-plus" @click="addMerchant">添加商户信息</el-button></div>-->
    <div class="content-box">
<!--      <el-card class="box-card" shadow="hover" v-for="(item,index) in 10" :key="index">-->
<!--        <div slot="header" class="clearfix">-->
<!--          <span>卡片名称</span>-->
<!--          <el-button style="float: right; padding: 3px 0" type="text">切换为当前通道</el-button>-->
<!--        </div>-->
<!--        <div>商户编号:1861975</div>-->
<!--      </el-card>-->
      <el-card class="box-card" shadow="hover" v-for="item in merchantList" :key="item.id">
        <div slot="header" class="clearfix">
          <span><dict-tag :options="dict.type.payment_channel" :value="item.merchantName"/></span>
          <el-button v-if="item.isUse=='0'"
                     @click="editStatus(item,1)"
                     style="float: right; padding: 3px 0" type="text">切换为当前通道</el-button>
          <el-tag v-else effect="dark" type="success" style="float: right">当前使用中</el-tag>
        </div>
        <div>商户编号: {{ item.mchntCd }}</div>
        <div>备注: <span style="color: #00afff;margin-left: 3px" @click="editRemark(item.id)">{{ item.remark ? item.remark : "--" }}</span></div>
      </el-card>
    </div>
    <el-divider></el-divider>
    <div class="cont-box">
      <div style="width: 40%">
        <el-alert
          title="使用说明"
          type="error"
          description="添加/编辑对应的规则->规则配置正常->发布规则->规则生效
注意:功能状态启用且通道规则发布生效后当前功能才有效,否则使用系统单商户号模式"
          :closable="false"
        >
        </el-alert>
      </div>

      <div style="display: flex;align-items: center">
        <div class="mingc">规则周期</div>
        <el-radio-group v-model="labelPosition" @input="ruleCycle == labelPosition" size="small">
          <el-radio-button label="permanent">永久</el-radio-button>
          <el-radio-button label="singleDay">单日</el-radio-button>
        </el-radio-group>
        <div class="mingc">功能状态</div>
        <el-switch
          v-model="value"
          @change="changeStatus"
        >
        </el-switch>
      </div>
    </div>

    <div class="cont-box" >
      <div><el-button type="primary" icon="el-icon-plus" @click="addOil">添加规则</el-button></div>
      <div><el-button type="success" icon="el-icon-s-promotion" @click="open">发布规则</el-button></div>
    </div>
    <div class="hangbox" v-for="(item,index) in oilConfigList" :key="item.id">
      <div>{{index + 1}}.通道</div>
      <div class="jiaong">{{ item.merchantName }}({{ item.remark }})</div>
      <div> 商户号 </div>
      <div class="jiaong">{{ item.mchntCd }}</div>
<!--      <div> 交易满 </div>-->
      <div> 交易占比 </div>
      <div class="jiaong"> {{ item.proportion }} </div>
      <div style="margin-right: 20px"> %更换支付通道   </div>
<!--      <div class="jiaong"> 参与次数不固定次数 </div>-->

      <el-button type="primary" icon="el-icon-edit" @click="editOilConfig(item.id)">编辑</el-button>
      <el-button type="danger" icon="el-icon-close" @click="deleteOilConfig(item.id)">删除</el-button>
    </div>
<!--    <div class="hangbox" v-for="(item,index) in 3" :key="index">-->
<!--      <div>{{index + 1}}.通道</div>-->
<!--      <div class="jiaong"> 名称 </div>-->
<!--      <div> 商户号 </div>-->
<!--      <div class="jiaong"> 1231213213212</div>-->
<!--&lt;!&ndash;      <div> 交易满 </div>&ndash;&gt;-->
<!--      <div> 交易占比 </div>-->
<!--      <div class="jiaong"> 2 </div>-->
<!--      <div> %更换支付通道 参与次数  </div>-->
<!--      <div class="jiaong"> 不固定次数 </div>-->

<!--      <el-button type="primary" icon="el-icon-edit">编辑</el-button>-->
<!--      <el-button type="danger" icon="el-icon-close">删除</el-button>-->
<!--    </div>-->
    <div class="hsize">注:规则按照顺序进行处理并自动更换支付通道，新增或变更规则后需要发布当前规则才生效,发布生效后的规则将从序号1的配置生效</div>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form1" ref="form1" :rules="rules" >
        <el-form-item label="支付通道" :label-width="formLabelWidth" prop="merchantName" width="300px">
          <el-select
            v-model="form1.merchantName"
            placeholder="全部"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="dict in dict.type.payment_channel"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商户号" :label-width="formLabelWidth" prop="mchntCd" >
          <el-input v-model="form1.mchntCd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark" >
          <el-input v-model="form1.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitMerchant">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="show" width="25%" style="margin-top: 200px">
      <span>请输入备注信息</span>
      <el-input placeholder="请输入备注信息" style="margin-top: 20px"
        v-model="merchantConfig.remark"
        clearable>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="submitRemark">确 定</el-button>
      </span>
    </el-dialog>

<!--    编辑通道规则-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible"
               width="30%">
      <el-form :model="form" ref="form">

        <el-form-item label="支付通道" :label-width="formLabelWidth" width="300px">
          <el-select v-model="form.merchConfigId"
                     @change="changeMerch"
                     :disabled="isDis" placeholder="请选择商户信息" style="width: 100%">
            <el-option
              v-for="item in merchantList" :key="item.id"
              :label="item.merchantName"
              :value="item.id">
              <span style="float: left">
                <dict-tag :options="dict.type.payment_channel" :value="item.merchantName"/>
              </span>
              <span style="color: #30a1ff">({{ item.remark ? item.remark : "--" }})</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.mchntCd }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商户号" :label-width="formLabelWidth">
          <el-input v-model="form.mchntCd" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="交易占比" :label-width="formLabelWidth">
          <el-input v-model="form.proportion" autocomplete="off">
            <template slot="append">%</template>
          </el-input>
          <div>交易占比满足规则后切换到下一个支付通道</div>
        </el-form-item>
<!--        <el-form-item label="参与次数" :label-width="formLabelWidth">-->
<!--          <el-radio-group v-model="form.resource" >-->
<!--            <el-radio label="不固定次数"></el-radio>-->
<!--            <el-radio label="固定次数"></el-radio>-->
<!--          </el-radio-group>-->
<!--          <div>是否限制当前配置在生效期间内的参与次数</div>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="排序" :label-width="formLabelWidth">-->
<!--          <el-input-number v-model="form.num" controls-position="right"  :min="1" :max="100"></el-input-number>-->
<!--          <div>数值越大顺序越在前</div>-->
<!--        </el-form-item>-->


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clearOil">取 消</el-button>
        <el-button type="primary" @click="submitOilConfig">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  addMerchant,
  editMerchant,
  editMerchantRemark,
  listMerchant,
  merchantInfo
} from "@/api/payConfig/merchantconfig";
import {
  addOilConfig,
  delOilConfig,
  editOilConfig,
  isOpenOilConfig,
  listOilConfig,
  oilConfigInfo
} from "@/api/payConfig/oilconfig";
import {addUser, getUserMobile, updateUser} from "@/api/staff/user/user";

export default {
  dicts: ['payment_channel'],
  name: 'peizhi',
  data(){
    return{
      // 是否禁用
      isDis:false,
      // 商户配置信息
      merchantList:[],
      // 商品规则配置信息
      oilConfigList:[],
      // 规则周期
      ruleCycle:"singleDay",
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        num: 1,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      form1:{},
      formLabelWidth: '80px',
      dialogFormVisible:false,
      dialogVisible:false,
      show:false,
      value:false,
      value1:true,
      labelPosition: 'singleDay',
      title:"",
      merchantConfig:{},
      rules:{
        merchantName: [
          { required: true, message: '请选择支付通道', trigger: 'blur' },
        ],
        mchntCd: [
          { required: true, message: '请填写商户号', trigger: 'blur' },
        ],
      }
    }
  },
  created() {
    this.getList();
  },
  methods:{
    // 修改商户备注信息
    submitRemark(){
      editMerchantRemark(this.merchantConfig).then(res => {
        if (res.data===1){
          this.$modal.msgSuccess("修改成功")
          this.getList()
          this.show = false
        }
      })
    },
    // 打开修改商户备注信息对话框
    editRemark(id){
      this.title = "备注"
      this.show = true
      merchantInfo(id).then(res => {
        this.merchantConfig = res.data
      })
    },
    submitMerchant(){
      this.$refs["form1"].validate(valid => {
        if (valid) {
          addMerchant(this.form1).then(res => {
            if (res.data == 1){
              this.$modal.msgSuccess("添加成功");
              this.getList()
              this.dialogVisible = false
            }else {
              this.$modal.msgError("添加失败，此通道暂未配置");
            }
          })
        }
      })
    },
    // 添加商户号信息
    addMerchant(){
      this.title = "添加商户信息"
      this.dialogVisible = true
      this.form1 = {}
    },
    // 删除支付配置信息
    deleteOilConfig(id){
      this.$confirm('确认删除此通道规则吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delOilConfig(id).then( response => {
          this.$message({
            type: 'success',
            message: '规则数据删除成功'
          });
          this.getList();
          this.value1 = true;
          this.changeStatus1();
        })
      }).catch(() => {});
    },
    // 添加商户信息
    addOil(){
      this.title = "添加商户规则"
      this.dialogFormVisible = true;
      this.form = {
        name: '',
        region: '',
        date1: '',
        date2: '',
        num: 1,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    },
    // 选择下拉商户信息
    changeMerch(val){
      this.merchantList.forEach(item => {
        if (item.id == val){
          this.form.mchntCd = item.mchntCd
        }
      })
    },
    // 提交按钮
    submitOilConfig(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id) {
            editOilConfig(this.form).then(response => {
              this.$modal.msgSuccess("修改通道成功");
              this.getList();
              this.dialogFormVisible = false;
              this.isDis = false;
            });
          } else {
            addOilConfig(this.form).then( response => {
              if (response.data==0){
                this.$modal.msgError("已存在当前通道商户号的规则");
              }else {
                this.$modal.msgSuccess("新增通道成功");
                this.getList();
                this.dialogFormVisible = false;
                this.isDis = false;
              }
            })
          }
        }
      });
    },
    // 取消按钮
    clearOil(){
      this.dialogFormVisible = false;
      this.isDis = false;
    },
    // 修改支付配置信息
    editOilConfig(id){
      this.title = "修改商户规则"
      this.isDis = true;
      this.dialogFormVisible = true;
      oilConfigInfo(id).then( response => {
        this.form = response.data
      })
    },
    // 修改启用状态
    changeStatus(){
      if (this.value){
        isOpenOilConfig({isOpen:1,ruleCycle:this.ruleCycle}).then( response => {
          if (response.data!=1){
            this.$message({
              type: 'error',
              message: '支付通道切换失败,请确保交易占比相加满足百分之百'
            });
            this.value = false;
            this.value1 = true;
          }else {
            this.$message({
              type: 'success',
              message: '发布成功!'
            });
            this.value1 = false;
          }
        })
      }else {
        isOpenOilConfig({isOpen:0,ruleCycle:this.ruleCycle}).then( response => {
          this.value1 = true;
        })
      }
    },
    changeStatus1(){
      if (this.value1){
        isOpenOilConfig({isOpen:0,ruleCycle:this.ruleCycle}).then( response => {
          this.value = false;
        })
      }else {
        isOpenOilConfig({isOpen:1,ruleCycle:this.ruleCycle}).then( response => {
          if (response.data!=1){
            this.$message({
              type: 'error',
              message: '支付通道切换失败,请确保交易占比相加满足百分之百'
            });
            this.value = false;
            this.value1 = true;
          }else {
            this.$message({
              type: 'success',
              message: '发布成功!'
            });
            this.value = true;
          }
        })
      }
    },
    // 修改商户使用状态
    editStatus(data,isUse){
      this.$confirm('确定将当前支付配置切换为商户号('+data.mchntCd+')吗?切换后实时生效!', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        data.isUse = isUse
        editMerchant(data).then( response => {
          this.getList();
          this.$message({
            type: 'success',
            message: '支付通道切换成功,已实时切换为商户号('+data.mchntCd+')'
          });
        })
      }).catch(() => {});
    },
    // 获取商户列表信息
    getList(){
      listMerchant().then( response => {
        this.merchantList = response.data;
        this.merchantList.forEach(item => {
          if (item.isOpenRule == "1"){
            this.value1 = false;
            this.value = true;
          }
        })
      })
      listOilConfig().then( response => {
        this.oilConfigList = response.data;
      })
    },
    open() {
      this.$confirm('此操作会发布件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.value1 = false;
        this.changeStatus1()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消发布'
        });
      });
    }
  }


}
</script>

<style scoped>
.box-centenr{
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}
.content-box{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.box-card{
  width: 24%;
  margin-right: 15px;
  margin-bottom: 15px;
}
.cont-box{
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: 20px 0px;
}
.hangbox{
  width: 100%;
  border-bottom: 1px solid #f4f5f6;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 15px 0px;
}
.jiaong{
  text-align: center;
  box-sizing: border-box;
  padding: 5px 20px;
  background: #F2F6FC;
  color: #409EFF;
  font-weight: bold;
  margin: 0px 5px;
  border-radius: 4px;

}
.mingc{
  margin: 0px 10px;
  color: #999;
}
.hsize{
  color: #999;
}


</style>