tuanfeng-pc-admin/src/views/proxyStore/manage/index.vue

<template>
    <div class="manage">
        <!-- 搜索 -->
      <div class="formSearch">
        <el-form :inline="true" :model="queryData">
          <el-form-item label="店铺名称">
            <el-input v-model="queryData.shopName" maxlength="20" placeholder="请输入店铺名称" />
          </el-form-item>
          <el-form-item label="店铺编码">
            <el-input v-model="queryData.shopCode" maxlength="20" placeholder="请输入店铺编码" />
          </el-form-item>
          <el-form-item label="负责人">
            <el-input v-model="queryData.chargePersonName" maxlength="20" placeholder="请输入负责人" />
          </el-form-item>
          <el-form-item label="合同状态">
            <el-select v-model="queryData.contractState" placeholder="请选择">
              <el-option label="有效" value="1" />
              <el-option label="无效" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="店铺类型">
            <el-select v-model="queryData.shopType" placeholder="请选择类型">
              <el-option label="品牌工厂" value="1" />
              <el-option label="商圈" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="代理级别">
            <el-select v-model="queryData.shopType" placeholder="请选择代理级别">
              <el-option label="团长" value="1" />
              <el-option label="合伙人" value="2" />
              <el-option label="加盟商" value="3" />
              <el-option label="代理商" value="4" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="onSubmit">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
        <div class="tableBox">
            <el-table ref="multipleTable" :data="tableData" border
                :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark"
                style="width: 100%">
                <el-table-column label="店铺名称" width="220" align="center">
                    <template slot-scope="scope">{{ scope.row.shopName }}</template>
                </el-table-column>
                <el-table-column prop="shopCode" align="center" label="店铺编码" />
                <el-table-column prop="chargePersonName" align="center" label="负责人" />
                <el-table-column prop="chargePersonPhone" align="center" label="联系电话" />
                <el-table-column label="合同状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.contractState === 0">无效</span>
                        <span v-if="scope.row.contractState === 1">有效</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" align="center" label="创建时间" />
            </el-table>
            <div class="fenye">
                <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>

<script>
import { customerMageGetById } from '@/api/proxyStore'
export default {
    created () {
        // this.getAll()
    },
    data() {
        return {
            tableData: [],
            //  请求的参数
            queryData:{
                shopName:"",
                shopCode:"",
                chargePersonName:"",
                contractState:"",
                page:"1",
                pageSize:"10",
                shopType:"",
                agentLevel:"1"
            },
            total: null,
            currentPage: 1
        }
    },
    methods: {
        handleSizeChange(val) {
            this.queryData.pageSize = val
        },
        handleCurrentChange(val) {
            this.queryData.page = val
        },
        async getAll(){
            let res = await customerMageGetById(this.queryData)
            console.log(res);
        },
        onSubmit(){
            this.getAll()
        }
    },
}
</script>

<style lang="scss" scoped>
.manage {
    width: 100%;
    padding: 40px 30px;
    box-sizing: border-box;
}
.fenye{
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>