SAAS-FRONTEND/src/views/dept/Dept_PayWay.vue

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="油企名称" prop="deptName">
        <el-input
          v-model="queryParams.deptName"
          placeholder="请输入油企名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="部门状态"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="cyan"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table :data="payList" style="width: 100%">
      <el-table-column prop="deptName" label="油企名称" width="180">
      </el-table-column>
      <el-table-column prop="deptName" label="ID" width="180">
      </el-table-column>
      <el-table-column prop="deptName" label="排序" width="180">
      </el-table-column>

    </el-table>

    <el-dialog
      :title="'配置支付渠道'"
      :visible.sync="payOpen"
      width="800px"
      append-to-body
    >
      <el-form
        ref="payForm"
        :model="payForm"
        :rules="rules"
        label-width="80px"
        label-position="top"
      >
        <el-col :span="23">
          <el-form-item label="支付渠道类型">
            <el-select
              v-model="payForm.payType"
              placeholder="请选择支付渠道"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option label="随行付" value="1"></el-option>
              <el-option label="云闪付" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="使用类型">
            <el-select
              v-model="payForm.useType"
              placeholder="请选择支付渠道的类型"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option label="消费" value="1"></el-option>
              <el-option label="充值" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form-item label="应用渠道">
            <el-select
              v-model="payForm.appType"
              placeholder="请选择支付渠道应用的类型"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option label="微信" value="1"></el-option>
              <el-option label="支付宝" value="2"></el-option>
              <el-option label="银行卡" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!--
          <el-col :span="24">
            <div style="font-size: 22px; font-weight: bolder; margin-top: 20px">
              随行付信息
              <hr />
            </div>
          </el-col>
        -->
        <el-col :span="11" v-if="payForm.payType == '1'">
          <el-form-item label="随行付商户号" prop="mno">
            <el-input
              v-model="payForm.mno"
              maxlength="50"
              placeholder="请输入随行付商户号"
            />
          </el-form-item>
        </el-col>

        <el-col :span="11" :offset="1" v-if="payForm.payType == '1'">
          <el-form-item label="是否分账">
            <el-select
              v-model="payForm.mnoStatus"
              placeholder="请选择是否启用分账"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option label="启用分账" value="1"></el-option>
              <el-option label="禁用分账" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="11" v-if="payForm.payType == '1'">
          <el-form-item label="分账收款商户编号" prop="mnoArray">
            <el-input
              v-model="payForm.mnoArray"
              maxlength="50"
              placeholder="请输入分账收款商户编号"
            />
          </el-form-item>
        </el-col>

        <el-col :span="11" :offset="1" v-if="payForm.payType == '1'">
          <el-form-item label="分账账号比例" prop="mnoProportion">
            <el-input
              v-model="payForm.mnoProportion"
              maxlength="50"
              placeholder="请输入分账账号比例"
            />
          </el-form-item>
        </el-col>
        <!--
          <el-col :span="24">
            <div style="font-size: 22px; font-weight: bolder; margin-top: 20px">
              云闪付信息
              <hr />
            </div>
          </el-col>
          -->
        <el-col :span="11" v-if="payForm.payType == '2'">
          <el-form-item label="云闪付商户号码" prop="merchantNo">
            <el-input
              v-model="payForm.merchantNo"
              maxlength="50"
              placeholder="请输入云闪付商户号码"
            />
          </el-form-item>
        </el-col>

        <el-col :span="11" :offset="1" v-if="payForm.payType == '2'">
          <el-form-item label="云闪付终端号" prop="terminalId">
            <el-input
              v-model="payForm.terminalId"
              maxlength="50"
              placeholder="请输入云闪付终端号"
            />
          </el-form-item>
        </el-col>

        <el-col :span="23" v-if="payForm.payType == '2'">
          <el-form-item label="云闪付密钥" prop="yunKey">
            <el-input
              v-model="payForm.yunKey"
              maxlength="50"
              placeholder="请输入云闪付密钥"
            />
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listDept,
  getDept,
  delDept,
  addDept,
  updateDept,
  listDeptExcludeChild,
  listTree,
  setMnoSplit,
} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { regionData } from "element-china-area-data";
import { getToken } from "@/utils/auth";

export default {
  name: "Dept",
  components: { Treeselect },
  data() {
    return {
      regionDataOptions: regionData, // 地址组件
      selectedRegionData: [],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 表格树数据
      deptList: [],
      // 部门树选项
      deptOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      isShow: false,
      showIsLngFlag: false,
      splitShow: false,
      // 状态数据字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        deptName: undefined,
        status: undefined,
      },
      // 表单参数
      form: {},
      payWayOptions: [
        {
          label: "微信支付",
          value: 1,
          children: [
            {
              label: "随行付",
              value: 1,
            },
            {
              label: "云闪付",
              value: 2,
            },
            {
              label: "全民付",
              value: 3,
            },
          ],
        },
        {
          label: "支付宝支付",
          value: 2,
          children: [
            {
              label: "随行付",
              value: 1,
            },
            {
              label: "云闪付",
              value: 2,
            },
            {
              label: "上海富友",
              value: 4,
            },
          ],
        },
        {
          label: "银行卡",
          value: 3,
          children: [
            {
              label: "随行付",
              value: 1,
            },
            {
              label: "云闪付",
              value: 2,
            },
          ],
        },
      ],
      // 表单校验
      rules: {
        parentId: [
          { required: true, message: "上级部门不能为空", trigger: "blur" },
        ],
        deptName: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
        ],
        orderNum: [
          { required: true, message: "显示排序不能为空", trigger: "blur" },
        ],
        // singleStationFlag: [
        //   { required: true, message: "站点类型不能为空", trigger: "change" }
        // ],
        email: [
          {
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },

      payList: [
        {
          enterpriseName: "",
          deptName: "李哈哈",
        },
        {
          enterpriseName: "",
          deptName: "李哈哈",
        },
      ],
      imgUpConfig: {
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        addressUrl: process.env.VUE_APP_BASE_API + "/common/upload",
        limit: 5,
      },
      groupOpen: false,
      payOpen: true,
      payForm: {
        payType: "1", // 支付渠道类型
        useType: "0", // 使用类型
        appType: "2", // 应用渠道
      },
    };
  },
  created() {
    this.getList();
    this.getDicts("sys_normal_disable").then((response) => {
      this.statusOptions = response.data;
    });
  },
  methods: {
  
    handleAdd(row) {
      this.payForm = {};
      this.payOpen = true;
    },
    handleChangeRegionData(value) {
      console.log(this.form.regionData);
      console.log(this.form);
    },
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isLt5M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
      }
      return isLt5M;
    },
    handleAvatarRemove(file, fileList) {
      this.form.licenseImg = fileList;
    },
    handleAvatarSuccess(response, file, fileList) {
      this.form.licenseImg = [
        ...this.form.licenseImg,
        {
          name: file.name,
          url: response.url,
        },
      ];
    },
    /** 查询部门列表 */
    getList() {
      this.loading = true;
      // listTree(this.queryParams).then(response => {
      //   this.deptList = this.handleTree(response.data, "deptId");
      //   this.loading = false;
      // });
      listDept(this.queryParams).then((response) => {
        this.deptList = this.handleTree(response.data, "deptId");
        this.loading = false;
      });
    },
    selectDepart(val) {
      this.form.jiBie = parseInt(val.jiBie);
      if (val.jiBie == 1) {
        this.isShow = true;
        this.showIsLngFlag = false;
      } else {
        this.isShow = false;
        this.showIsLngFlag = true;
      }
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children,
      };
    },
    // 字典状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.isShow = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        deptId: undefined,
        parentId: undefined,
        deptName: undefined,
        orderNum: undefined,
        leader: undefined,
        phone: undefined,
        email: undefined,
        status: "0",
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd1(row) {
      this.reset();
      if (row != undefined) {
        this.form.parentId = row.deptId;
        //判断级别 1是集团，如果是集团展示的是油站的所有数据
        if (row.jiBie == 1) {
          this.form.jiBie = parseInt(row.jiBie);
          this.isShow = true;
          this.isLngFlag = false;
        } else {
          this.isLngFlag = true;
          this.isShow = false;
        }
      }
      this.open = true;
      this.title = "添加部门";
      listDept().then((response) => {
        this.deptOptions = this.handleTree(response.data, "deptId");
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      getDept(row.deptId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改部门";
      });
      listDeptExcludeChild(row.deptId).then((response) => {
        this.deptOptions = this.handleTree(response.data, "deptId");
      });
      //判断级别 1是集团，如果是集团展示的是油站的所有数据
      if (row.jiBie == 2) {
        this.isShow = true;
        this.showIsLngFlag = false;
      } else {
        this.isShow = false;
        this.showIsLngFlag = true;
      }
    },
    //设置分账的参数
    handleMnoSplit(row) {
      this.$confirm('是否进行分账设置,点击确定跳转确认页面"', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return setMnoSplit(row.deptId);
        })
        .then((res) => {
          // this.getList();
          window.open(res.msg, "_blank");
          //this.msgSuccess("分账设置成功");
        });
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.deptId != undefined) {
            updateDept(this.form).then((response) => {
              //window.location=response.message;
              this.msgSuccess("修改成功");
              this.open = false;
              this.isShow = false;
              this.getList();
            });
          } else {
            addDept(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.isShow = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm(
        '是否确认删除名称为"' + row.deptName + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delDept(row.deptId);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
  },
};
</script>