feat(components): 添加社区和门店选择组件
- 新增 SelectCommunity 组件用于选择社区数据 - 新增 SelectShopStore 组件用于选择门店数据 - 实现社区选择的数据表格和搜索功能 - 实现门店选择的数据表格和搜索功能 - 集成弹窗模式的选择交互界面 - 添加相应的 API 接口调用支持
This commit is contained in:
126
src/components/SelectCommunity/components/select-data.vue
Normal file
126
src/components/SelectCommunity/components/select-data.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="750"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:title="title"
|
||||
:footer="null"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="userId"
|
||||
:datasource="datasource"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="where.keywords"
|
||||
placeholder="请输入搜索关键词"
|
||||
style="width: 200px"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'roles'">
|
||||
<a-tag v-for="(item, index) in record.roles" :key="index">{{
|
||||
item.roleName
|
||||
}}</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="done(record)">选择</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
ColumnItem,
|
||||
DatasourceFunction
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { EleProTable } from 'ele-admin-pro';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { pageShopCommunity } from "@/api/shop/shopCommunity";
|
||||
import { ShopDealerUser } from "@/api/shop/shopDealerUser/model";
|
||||
import {ShopCommunityParam} from "@/api/shop/shopCommunity/model";
|
||||
|
||||
defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
title?: string;
|
||||
// 修改回显的数据
|
||||
data?: ShopDealerUser | null;
|
||||
type?: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', data: ShopDealerUser): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<ShopCommunityParam>({
|
||||
userId: undefined,
|
||||
name: undefined,
|
||||
keywords: ''
|
||||
});
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id'
|
||||
},
|
||||
{
|
||||
title: '小区名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
where.type = 1;
|
||||
return pageShopCommunity({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = () => {
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
const done = (record: ShopDealerUser) => {
|
||||
updateVisible(false);
|
||||
emit('done', record);
|
||||
};
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
71
src/components/SelectCommunity/index.vue
Normal file
71
src/components/SelectCommunity/index.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-input-group compact>
|
||||
<a-input
|
||||
disabled
|
||||
style="width: calc(100% - 32px)"
|
||||
v-model:value="content"
|
||||
:placeholder="placeholder"
|
||||
/>
|
||||
<a-button @click="openEdit">
|
||||
<template #icon><BulbOutlined class="ele-text-warning" /></template>
|
||||
</a-button>
|
||||
</a-input-group>
|
||||
<!-- 选择弹窗 -->
|
||||
<select-data
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
:title="placeholder"
|
||||
:type="type"
|
||||
@done="onChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { BulbOutlined } from '@ant-design/icons-vue';
|
||||
import { ref } from 'vue';
|
||||
import SelectData from './components/select-data.vue';
|
||||
import { User } from '@/api/system/user/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
value?: any;
|
||||
placeholder?: string;
|
||||
index?: number;
|
||||
type?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择'
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', User): void;
|
||||
(e: 'clear'): void;
|
||||
}>();
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 当前编辑数据
|
||||
const current = ref<User | null>(null);
|
||||
const content = ref<any>();
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: User) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const onChange = (row) => {
|
||||
console.log(row,'sdfsd111')
|
||||
row.index = Number(props.index);
|
||||
emit('done', row);
|
||||
};
|
||||
|
||||
if (props.value) {
|
||||
content.value = props.value;
|
||||
}
|
||||
// 查询租户列表
|
||||
// const appList = ref<App[] | undefined>([]);
|
||||
</script>
|
||||
106
src/components/SelectShopStore/components/select-data.vue
Normal file
106
src/components/SelectShopStore/components/select-data.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:title="title"
|
||||
:footer="null"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:datasource="datasource"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="where.keywords"
|
||||
placeholder="请输入门店关键词"
|
||||
style="width: 240px"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="done(record)">选择</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import type {
|
||||
ColumnItem,
|
||||
DatasourceFunction
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { EleProTable } from 'ele-admin-pro';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { pageShopStore } from '@/api/shop/shopStore';
|
||||
import type { ShopStoreParam } from '@/api/shop/shopStore/model';
|
||||
import type { ShopStore } from '@/api/shop/shopStore/model';
|
||||
|
||||
defineProps<{
|
||||
visible: boolean;
|
||||
title?: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', data: ShopStore): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const { where } = useSearch<ShopStoreParam>({
|
||||
id: undefined,
|
||||
keywords: ''
|
||||
});
|
||||
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{ title: 'ID', dataIndex: 'id', width: 90 },
|
||||
{ title: '门店名称', dataIndex: 'name' },
|
||||
{ title: '电话', dataIndex: 'phone', width: 160 },
|
||||
{ title: '地址', dataIndex: 'address' },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
return pageShopStore({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
tableRef?.value?.reload({ page: 1, where: where as ShopStoreParam });
|
||||
};
|
||||
|
||||
const done = (record: ShopStore) => {
|
||||
updateVisible(false);
|
||||
emit('done', record);
|
||||
};
|
||||
</script>
|
||||
|
||||
63
src/components/SelectShopStore/index.vue
Normal file
63
src/components/SelectShopStore/index.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-input-group compact>
|
||||
<a-input
|
||||
disabled
|
||||
style="width: calc(100% - 32px)"
|
||||
v-model:value="content"
|
||||
:placeholder="placeholder"
|
||||
/>
|
||||
<a-button @click="openEdit">
|
||||
<template #icon><BulbOutlined class="ele-text-warning" /></template>
|
||||
</a-button>
|
||||
</a-input-group>
|
||||
<!-- 选择弹窗 -->
|
||||
<SelectData
|
||||
v-model:visible="showEdit"
|
||||
:title="placeholder"
|
||||
@done="onChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { BulbOutlined } from '@ant-design/icons-vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import SelectData from './components/select-data.vue';
|
||||
import type { ShopStore } from '@/api/shop/shopStore/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '选择门店'
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', data?: ShopStore): void;
|
||||
(e: 'clear'): void;
|
||||
}>();
|
||||
|
||||
const showEdit = ref(false);
|
||||
const content = ref<string>(props.value ?? '');
|
||||
|
||||
const openEdit = () => {
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const onChange = (row?: ShopStore) => {
|
||||
showEdit.value = false;
|
||||
emit('done', row);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(v) => {
|
||||
content.value = v ?? '';
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user