merchant-web/src/views/modules/bank-card/index.vue

<template>
  <div style="height: calc(100vh - 200px)">
    <obj-table-plus
      ref="oTable"
      style="height: 100%"
      :tableCols="tableCols"
      :tableProp="tableProp"
      @query="queryList"
      v-model="dataList"
      :tableEvent="tableEvent"
    >
      <template slot="tableTop">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="银行卡状态：">
            <el-select v-model="formInline.status" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="审核中" value="0"></el-option>
              <el-option label="未通过" value="1"></el-option>
              <el-option label="已通过" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="$refs.oTable.reload()"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <div class="mb-2">
          <el-button type="primary" size="small" @click="addProduct"
            >添加银行卡</el-button
          >
          <!-- <el-button
            :disabled="selectList.length <= 0"
            type="danger"
            size="small"
            @click="deleteProduct"
            >批量删除</el-button
          > -->
        </div>
      </template>
    </obj-table-plus>
    <!-- 添加或编辑 -->
    <add-or-update
      @queryList="$refs.oTable.reload()"
      ref="addOrUpdate"
    ></add-or-update>
    <!-- 查看详情 -->
    <viewDetails ref="viewDetails"></viewDetails>
  </div>
</template>

<script>
import AddOrUpdate from "./popup/add-or-update.vue";
import viewDetails from "./popup/view-details.vue";
export default {
  components: { AddOrUpdate, viewDetails },
  data() {
    return {
      dataList: [],
      formInline: {
        status: "",
      },
      tableProp: {
        "auto-resize": true,
        border: true,
        height: "auto",
        "row-id": "id",
        "show-overflow": false,
      },
      productFilterType: "SALE",
      selectList: [],
    };
  },
  methods: {
    addProduct() {
      this.$refs.addOrUpdate.toggle().add();
    },
    deleteProduct() {
      console.log(this.selectList);
      let integers = this.selectList.map((item) => {
        return item.id;
      });
      this.$confirm("此操作将删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("111");
          this.$api.mer_admin.BatchDeleteProducts(integers).then((res) => {
            this.$refs.oTable.reload();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    queryList(pageNo, pageSize) {
      this.$api.mer_admin
        .bankCardPage({
          pageNumber: pageNo,
          pageSize: pageSize,
          linkId: JSON.parse(sessionStorage.getItem("userInfo")).managerId
            ? JSON.parse(sessionStorage.getItem("userInfo")).managerId
            : JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
          status: this.formInline.status,
        })
        .then((res) => {
          console.log(res);
          this.$refs.oTable.complete(
            res.data.data.data,
            Number(res.data.data.total)
          );
        })
        .catch((err) => {
          this.$refs.oTable.complete(false);
        });
    },
  },
  computed: {
    tableCols() {
      return [
        { type: "checkbox", width: "60px", fixed: "left" },
        // { type: "seq", width: "60px", align: "center", title: "序号" },
        {
          title: "持卡人",
          align: "center",
          field: "cardName",
        },
        {
          title: "银行卡号",
          align: "center",
          field: "cardId",
        },
        {
          title: "手机号",
          align: "center",
          field: "telNo",
        },
        {
          title: "企业名称",
          align: "center",
          field: "name",
        },
        {
          title: "状态",
          align: "center",
          field: "status",
          type: "jsx",
          render: ({ row }) => {
            if (row.status == 0) {
              return <span>审核中</span>;
            } else if (row.status == 1) {
              return <span>未通过</span>;
            } else if (row.status == 2) {
              return <span>已通过</span>;
            }
          },
        },
        {
          title: "操作",
          fixed: "right",
          type: "jsx",
          align: "center",
          width: "140px",
          render: (row) => {
            let edit = () => {
              this.$refs.viewDetails.toggle(row).update();
            };
            return (
              <div>
                <el-button size="mini" type="primary" onClick={edit}>
                  详情
                </el-button>
              </div>
            );
          },
        },
      ];
    },
    tableEvent() {
      return {
        "checkbox-all": ({ records, reserves }) => {
          this.selectList = [...records, ...reserves];
        },
        "checkbox-change": ({ records, reserves }) => {
          this.selectList = [...records, ...reserves];
        },
      };
    },
  },
};
</script>

<style lang="scss" scoped></style>