feat(components): 添加社区和门店选择组件

- 新增 SelectCommunity 组件用于选择社区数据
- 新增 SelectShopStore 组件用于选择门店数据
- 实现社区选择的数据表格和搜索功能
- 实现门店选择的数据表格和搜索功能
- 集成弹窗模式的选择交互界面
- 添加相应的 API 接口调用支持

src/components/SelectCommunity/components/select-data.vue

@@ -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>

src/components/SelectCommunity/index.vue

@@ -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>

src/components/SelectShopStore/components/select-data.vue

@@ -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>
+

src/components/SelectShopStore/index.vue

@@ -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>
+