supply-front/src/views/finance/credit_list.vue

<template>
  <div class="app-container">
    <div v-if="showRecord">
      <!-- 筛选条件 -->
      <div>
        <el-form
          ref="searchForm"
          :model="searchForm"
          label-width="100px"
          size="small"
          label-position="left"
        >
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="经销商编码" prop="">
                <el-input placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="经销商名称" prop="">
                <el-input placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="关联钱包" prop="">
                <el-input placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="总信用额度" prop="">
                <el-input placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="24" :lg="24">
              <el-form-item label="" class="fr">
                <el-button size="small">清空</el-button>
                <el-button size="small" type="primary">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 按钮 -->
      <div class="btn-group clearfix">
        <div class="fl">
          <el-button type="primary" size="small" @click="showAddFn"
            >新建</el-button
          >
          <el-button type="primary" size="small" @click="recordFn"
            >详情</el-button
          >
        </div>
        <div class="fr">
          <el-button type="primary" size="small">导出</el-button>
          <el-button type="primary" size="small">打印</el-button>
        </div>
      </div>
      <!-- 列表 -->
      <div class="mymain-container">
        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="dataList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
          >
            <el-table-column
              label="序号"
              align="center"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="经销商编码"
              prop=""
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="经销商名称"
              prop=""
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="当前信用额度"
              prop=""
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="上次额度"
              prop=""
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="关联钱包"
              prop=""
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="操作"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="">
                <el-button type="text" class="textColor" slot="reference"
                  >设置额度</el-button
                >
                <el-button type="text" class="textColor" slot="reference"
                  >记录</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="fr">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <CreditListDetail v-else />
    <!-- 新增弹窗 -->
    <el-dialog
      title="提货人档案"
      :visible.sync="dialogForm"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form label-width="120px">
        <el-form-item label="经销商名称" prop="customerId" label-width="120px">
          <el-select class="selectStyle" placeholder="请选择">
            <el-option> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="信用变更额度" prop="">
          <el-input></el-input>
        </el-form-item>

        <el-form-item label="关联钱包" prop="customerId">
          <el-select class="selectStyle" placeholder="请选择">
            <el-option> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="addDataFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CreditListDetail from "./components/credit_list-detail";
export default {
  components: {
    CreditListDetail,
  },
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: [], // 列表数据
      searchForm: {}, //搜索表单
      listLoading: false, // 列表加载loading
      showRecord: true,
      dialogForm: false, //弹窗表单
    };
  },
  methods: {
    //新建
    showAddFn() {
      this.dialogForm = true;
    },
    //确定
    addDataFn() {},
    //取消
    cancelFn() {
      this.dialogForm = false;
    },
    recordFn() {
      this.showRecord = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.selectStyle {
  width: 100%;
}
</style>