jsowell-charger-web/jsowell-ui/src/views/financial/merchant.vue

<template>
  <div class="app-container">
    <!-- <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="110px"
      @submit.native.prevent
    >
      <el-form-item label="运营商名称" prop="merchantName">
        <el-input
          v-model="queryParams.merchantName"
          placeholder="请输入运营商名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          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-table :data="merchantList" style="width: 100%" v-loading="loading">
      <el-table-column prop="merchantName" label="运营商" align="center">
        <template slot-scope="scope">
          <router-link
            :to="{
              path: '/financial/merchant/financeDetail',
              query: {
                merchantId: scope.row.id,
                merchantName: scope.row.merchantName,
              },
            }"
            class="link-type"
          >
            <span>{{ scope.row.merchantName }}</span>
          </router-link>
        </template>
      </el-table-column>

      <el-table-column
        prop="organizationCode"
        label="组织机构代码"
        align="center"
      />
      <el-table-column prop="status" label="状态" align="center" width="130">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.merchant_status"
            :value="scope.row.status"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="managerName"
        label="联系人"
        align="center"
        width="130"
      />
      <el-table-column
        prop="managerPhone"
        label="联系方式"
        align="center"
        width="300"
      />
      <el-table-column prop="createTime" label="入驻时间" align="center" />
      <!--  :to="'/merchant/detail/index/' + scope.row.id" -->
      <!-- <el-table-column prop="address" label="操作" align="center">
        <template slot-scope="scope">
          <router-link
            :to="{
              path: '/financial/merchant/merchantVirtual',
              query: {
                merchantId: scope.row.id,
                merchantName: scope.row.merchantName,
              },
            }"
            class="link-type"
          >
            <span>虚拟财务</span>
          </router-link>
          <router-link
            :to="{
              path: '/financial/merchant/financeDetail',
              query: {
                merchantId: scope.row.id,
              },
            }"
            class="link-type"
          >
            <span style="margin-left: 10px; color: darkblue">清分财务</span>
          </router-link>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getMerchantList"
    />
  </div>
</template>

<script>
import { getFinancialMerchantList } from "@/api/pile/merchant";

export default {
  dicts: ["merchant_status"],
  data() {
    return {
      // 运营商列表
      merchantList: [],
      loading: true,
      showOrHideText: "显示更多查询条件",
      buttonBoolean: false,
      //图标，可根据自己的需求匹配
      icon: "el-icon-caret-bottom",
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getMerchantList();
  },
  methods: {
    showOrHide() {
      if (this.buttonBoolean) {
        this.icon = "el-icon-caret-bottom";
        this.showOrHideText = "显示更多查询条件";
        this.buttonBoolean = !this.buttonBoolean;
      } else {
        this.icon = "el-icon-caret-top";
        this.showOrHideText = "收起";
        this.buttonBoolean = !this.buttonBoolean;
      }
    },
    // 获取运营商列表
    getMerchantList() {
      this.loading = true;
      getFinancialMerchantList(this.queryParams).then((response) => {
        this.merchantList = response.rows;
        // console.log("response", response);
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      console.log("搜索的值", this.queryParams);
      this.queryParams.pageNum = 1;
      this.getMerchantList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep
  .el-descriptions--medium:not(.is-bordered)
  .el-descriptions-item__cell {
  padding-bottom: 4px;
}

::v-deep .el-descriptions__header {
  margin-bottom: 10px;
}

.cardview-box {
  width: 100%;
  margin-bottom: 12px;
  font-size: 16px;
  color: #4a4a4a;
  border: 1px solid #f0f0f0;
}

.cardview-static {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 0 10px;
  height: 46px;
  line-height: 46px;
  background-color: #f0f0f0;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin-bottom: 10px;
}
</style>