赵忠林
482e2a2718
- 添加 .editorconfig 文件统一代码风格 - 添加 .env.development 和 .env.example 环境配置文件 - 添加 .eslintignore 和 .eslintrc.js 代码检查配置 - 添加 .gitignore 版本控制忽略文件配置 - 添加 .prettierignore 格式化忽略配置 - 添加隐私协议HTML文件 - 添加API密钥管理组件基础结构
144 lines
3.3 KiB
Vue
144 lines
3.3 KiB
Vue
<template>
|
|
<!-- 搜索表单 -->
|
|
<a-form
|
|
:model="searchForm"
|
|
layout="inline"
|
|
class="search-form"
|
|
@finish="handleSearch"
|
|
>
|
|
<a-form-item label="商户名称">
|
|
<a-input
|
|
v-model:value="searchForm.merchantName"
|
|
placeholder="请输入商户名称"
|
|
allow-clear
|
|
style="width: 160px"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<a-form-item label="联系人">
|
|
<a-input
|
|
v-model:value="searchForm.realName"
|
|
placeholder="请输入联系人"
|
|
allow-clear
|
|
style="width: 160px"
|
|
:maxlength="20"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<a-form-item label="联系电话">
|
|
<a-input
|
|
v-model:value="searchForm.phone"
|
|
placeholder="请输入联系电话"
|
|
allow-clear
|
|
style="width: 160px"
|
|
:maxlength="11"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<a-form-item label="店铺类型">
|
|
<a-input
|
|
v-model:value="searchForm.shopType"
|
|
placeholder="请输入店铺类型"
|
|
allow-clear
|
|
style="width: 160px"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<a-form-item label="状态">
|
|
<a-select
|
|
v-model:value="searchForm.status"
|
|
placeholder="请选择状态"
|
|
allow-clear
|
|
style="width: 120px"
|
|
>
|
|
<a-select-option :value="0">待审核</a-select-option>
|
|
<a-select-option :value="1">审核通过</a-select-option>
|
|
<a-select-option :value="2">审核驳回</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
|
|
<a-form-item>
|
|
<a-space>
|
|
<a-button type="primary" html-type="submit">
|
|
<template #icon>
|
|
<SearchOutlined />
|
|
</template>
|
|
查询
|
|
</a-button>
|
|
<a-button @click="resetForm">
|
|
<template #icon>
|
|
<ReloadOutlined />
|
|
</template>
|
|
重置
|
|
</a-button>
|
|
<a-button type="primary" @click="emit('add')">
|
|
<template #icon>
|
|
<PlusOutlined />
|
|
</template>
|
|
新增
|
|
</a-button>
|
|
<a-dropdown v-if="selection.length > 0">
|
|
<template #overlay>
|
|
<a-menu>
|
|
<a-menu-item key="1" @click="emit('remove', selection)">
|
|
<DeleteOutlined />
|
|
批量删除
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
<a-button>
|
|
批量操作
|
|
<DownOutlined />
|
|
</a-button>
|
|
</a-dropdown>
|
|
</a-space>
|
|
</a-form-item>
|
|
</a-form>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive } from 'vue';
|
|
import {
|
|
SearchOutlined,
|
|
ReloadOutlined,
|
|
PlusOutlined,
|
|
DeleteOutlined,
|
|
DownOutlined
|
|
} from '@ant-design/icons-vue';
|
|
|
|
const emit = defineEmits(['search', 'add', 'remove']);
|
|
|
|
// 搜索表单数据
|
|
const searchForm = reactive({
|
|
merchantName: '',
|
|
realName: '',
|
|
phone: '',
|
|
shopType: '',
|
|
status: undefined
|
|
});
|
|
|
|
// 搜索事件
|
|
const handleSearch = () => {
|
|
emit('search', { ...searchForm });
|
|
};
|
|
|
|
// 重置表单
|
|
const resetForm = () => {
|
|
Object.assign(searchForm, {
|
|
merchantName: '',
|
|
realName: '',
|
|
phone: '',
|
|
shopType: '',
|
|
status: undefined
|
|
});
|
|
emit('search', { ...searchForm });
|
|
};
|
|
|
|
defineProps({
|
|
selection: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
});
|
|
</script>
|