162 lines
4.3 KiB
Vue
162 lines
4.3 KiB
Vue
<template>
|
|
<el-dialog title="请选择用户" width="1000px" v-model="visible">
|
|
<div class="content">
|
|
<el-form :model="queryForm" inline>
|
|
<!-- <el-form-item>
|
|
<el-input v-model="queryForm.no" placeholder="请输入商户号" />
|
|
</el-form-item> -->
|
|
<el-form-item>
|
|
<el-input v-model="queryForm.shopName" placeholder="请输入商户名称" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="Search" :loading="tableData.loading" @click="searchHandle">查询</el-button>
|
|
<el-button icon="Refresh" :loading="tableData.loading" @click="resetHandle">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table :data="tableData.list" v-loading="tableData.loading" stripe border
|
|
style="width: 100%; margin-top: 20px;">
|
|
<el-table-column label="商户名称" prop="shopName"></el-table-column>
|
|
<el-table-column label="联系人姓名" prop="contactName"></el-table-column>
|
|
<el-table-column label="联系人电话" prop="phone"></el-table-column>
|
|
<el-table-column label="店铺类型" prop="shopType" width="100">
|
|
<template #default="scope">
|
|
<el-tag :type="typeFilter(scope.row.shopType).type">{{ typeFilter(scope.row.shopType).label }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="100">
|
|
<template #default="scope">
|
|
<el-button type="primary" @click="selectHandle(scope.row)">选择</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="row mt14">
|
|
<el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
|
|
:page-sizes="[10, 30, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
|
|
:total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
|
</div>
|
|
</div>
|
|
<!-- <template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="visible = false">取消</el-button>
|
|
<el-button type="primary" @click="">确定</el-button>
|
|
</div>
|
|
</template> -->
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import ShopApi from "@/api/account/shop";
|
|
|
|
// 店铺类型过滤器
|
|
type TagType = 'primary' | 'success' | 'danger' | 'info' | 'warning';
|
|
function typeFilter(shopType: string): { value: string; label: string; type: TagType } {
|
|
const typs: Array<{ value: string; label: string; type: TagType }> = [
|
|
{
|
|
value: 'only',
|
|
label: '单店',
|
|
type: 'primary'
|
|
},
|
|
{
|
|
value: 'chain',
|
|
label: '连锁',
|
|
type: 'success'
|
|
},
|
|
{
|
|
value: 'join',
|
|
label: '加盟',
|
|
type: 'danger'
|
|
}
|
|
];
|
|
|
|
const obj = typs.find(item => item.value === shopType);
|
|
return obj ? obj : { value: shopType, label: shopType, type: 'info' };
|
|
}
|
|
|
|
const visible = ref(false);
|
|
|
|
const queryForm = ref({
|
|
shopName: "",
|
|
});
|
|
|
|
// 分页大小发生变化
|
|
function handleSizeChange(e: number) {
|
|
tableData.size = e;
|
|
getTableData();
|
|
}
|
|
|
|
// 分页发生变化
|
|
function handleCurrentChange(e: number) {
|
|
tableData.page = e;
|
|
getTableData();
|
|
}
|
|
|
|
// 查询
|
|
function searchHandle() {
|
|
tableData.page = 1;
|
|
getTableData();
|
|
}
|
|
|
|
// 重置
|
|
function resetHandle() {
|
|
queryForm.value.shopName = "";
|
|
tableData.page = 1;
|
|
getTableData();
|
|
}
|
|
|
|
const tableData = reactive({
|
|
loading: false,
|
|
page: 1,
|
|
size: 10,
|
|
total: 0,
|
|
list: [],
|
|
});
|
|
|
|
// 获取店铺列表
|
|
async function getTableData() {
|
|
try {
|
|
tableData.loading = true;
|
|
const res: any = await ShopApi.getList({
|
|
page: tableData.page,
|
|
size: tableData.size,
|
|
shopName: queryForm.value.shopName,
|
|
});
|
|
tableData.list = res.records;
|
|
tableData.total = res.totalRow;
|
|
} catch (err) {
|
|
console.error(err);
|
|
} finally {
|
|
tableData.loading = false;
|
|
}
|
|
}
|
|
|
|
const emits = defineEmits<{
|
|
(e: 'success', row: any): void;
|
|
}>();
|
|
|
|
function selectHandle(row: any) {
|
|
console.log("选择商户：", row);
|
|
emits('success', row);
|
|
visible.value = false;
|
|
}
|
|
|
|
function show() {
|
|
visible.value = true;
|
|
}
|
|
|
|
defineExpose({
|
|
show,
|
|
});
|
|
|
|
onMounted(() => {
|
|
getTableData();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.row {
|
|
&.mt14 {
|
|
margin-top: 14px;
|
|
}
|
|
}
|
|
</style> |