feat: 设置->数据字典->租客管理

.eslintrc.js

@@ -51,7 +51,7 @@ module.exports = {
     '@typescript-eslint/ban-ts-comment': 0,
     '@typescript-eslint/no-unused-vars': 1,
     '@typescript-eslint/no-empty-function': 1,
-    '@typescript-eslint/no-explicit-any': 1, // 改为警告
+    '@typescript-eslint/no-explicit-any': 0, // 改为警告
     'no-console': process.env.NODE_ENV === 'production' ? 2 : 1, // 生产环境禁用console
     'import/extensions': [
       2,

src/api/setting.ts

@@ -26,7 +26,8 @@ export type ManagerStatus = 1 | 2; // 1: 是主管, 2: 否
 export type DataType = 1 | 2 | 3; // 1: 全部数据权限, 2: 自定义数据权限, 3: 仅本人数据
 export type CheckedStatus = 1 | 2; // 是否选择：1是，2否
 export type DeleteStatus = 0 | 1; // 是否选择：1是 0否
-export type projectTypeChecked = 0 | 1; // 是否选择：1是 0否
+export type ProjectTypeChecked = 0 | 1; // 是否选择：1是 0否
+export type TenantDictionaryType = 1 | 2 | 3 | 4; // 类型：1租客类型，2租客来源，3租客行业分类，4租客企业规模
 
 // ==================== 部门相关类型 ====================
 export interface DepartmentFormParams {
@@ -208,14 +209,22 @@ export interface ProvinceItem {
   code: string; // 编码
   isCheck: 0 | 1;
 }
-export interface LabelForm {
+export interface DictionaryForm {
   id?: number;
   name: string;
-  color: string;
+  color?: string;
+  type?: TenantDictionaryType | null;
 }
 export interface CheckProjectParam {
   id?: number;
-  is_check: projectTypeChecked;
+  is_check: ProjectTypeChecked;
+  type?: TenantDictionaryType;
+}
+export interface SettingTenantDictionaryObj {
+  TenantTypeList: projectTypeInfo[];
+  TenantSourceList: projectTypeInfo[];
+  TenantIndustryList: projectTypeInfo[];
+  TenantEnterpriseList: projectTypeInfo[];
 }
 
 // ==================== 响应类型别名 ====================
@@ -245,7 +254,15 @@ export type SettingProjectTypeRes = HttpResponse<{
 export type SettingProjectProvinceRes = HttpResponse<{
   list: ProvinceItem[];
 }>;
-
+export type SettingRoomTagsRes = HttpResponse<{
+  roomTagsList: projectTypeInfo[];
+}>;
+export type SettingRoomTagRes = HttpResponse<{
+  roomTag: projectTypeInfo;
+}>;
+export type SettingTenantDictionaryRes = HttpResponse<{
+  allList: SettingTenantDictionaryObj;
+}>;
 // ==================== 部门相关 API ====================
 export function createDepartment(
   params: DepartmentFormParams
@@ -386,11 +403,15 @@ export function getProvinceList(): Promise<SettingProjectProvinceRes> {
   return axios.get(`dictionary/getProvinceList`);
 }
 // 数据字典-项目管理-创建项目类型
-export function createProjectType(params: LabelForm): Promise<HttpResponse> {
+export function createProjectType(
+  params: DictionaryForm
+): Promise<HttpResponse> {
   return axios.post(`dictionary/createProjectType`, params);
 }
 // 数据字典-项目管理-更新项目类型信息
-export function updateProjectType(params: LabelForm): Promise<HttpResponse> {
+export function updateProjectType(
+  params: DictionaryForm
+): Promise<HttpResponse> {
   return axios.post(`dictionary/updateProjectType`, params);
 }
 // 数据字典-项目管理-删除项目类型
@@ -421,3 +442,81 @@ export function checkAllProvince(
 ): Promise<HttpResponse> {
   return axios.post(`dictionary/checkAllProvince`, params);
 }
+// 数据字典-空间管理-全部房源标签列表
+export function getRoomTagList(): Promise<SettingRoomTagsRes> {
+  return axios.get(`dictionary/getRoomTagList`);
+}
+// 数据字典-项目管理-单个房源标签信息
+export function getRoomTagById(id: number): Promise<SettingRoomTagRes> {
+  return axios.get(`dictionary/getRoomTag?id=${id}`);
+}
+// 数据字典-空间管理-创建房源标签
+export function createRoomTag(params: DictionaryForm): Promise<HttpResponse> {
+  return axios.post(`dictionary/createRoomTag`, params);
+}
+// 数据字典-空间管理-更新房源标签
+export function updateRoomTag(params: DictionaryForm): Promise<HttpResponse> {
+  return axios.post(`dictionary/updateRoomTag`, params);
+}
+// 数据字典-空间管理-删除房源标签
+export function delRoomTag(id: number): Promise<SettingProjectProvinceRes> {
+  return axios.get(`dictionary/delRoomTag?id=${id}`);
+}
+// 数据字典-空间管理-禁用/启用 房源标签(单个)
+export function checkRoomTag(params: CheckProjectParam): Promise<HttpResponse> {
+  return axios.post(`dictionary/checkRoomTag`, params);
+}
+// 数据字典-空间管理-禁用/启用 房源标签（全选）
+export function checkAllRoomTag(
+  params: CheckProjectParam
+): Promise<HttpResponse> {
+  return axios.post(`dictionary/checkAllRoomTag`, params);
+}
+// 数据字典-租客管理-全部租客标签列表（包含所有类型标签）
+export function getAllTenantDictionaryList(): Promise<SettingTenantDictionaryRes> {
+  return axios.get(`dictionary/getAllTenantDictionaryList`);
+}
+// 数据字典-租客管理-单个租客标签信息
+export function getTenantDictionary(
+  id: number,
+  type: TenantDictionaryType
+): Promise<SettingRoomTagsRes> {
+  return axios.get(`dictionary/getTenantDictionary?id=${id}&type=${type}`);
+}
+// 数据字典-租客管理-创建租客标签
+export function createTenantDictionary(
+  params: DictionaryForm
+): Promise<HttpResponse> {
+  return axios.post(`dictionary/createTenantDictionary`, params);
+}
+// 数据字典-租客管理-更新租客标签
+export function updateTenantDictionary(
+  params: DictionaryForm
+): Promise<HttpResponse> {
+  return axios.post(`dictionary/updateTenantDictionary`, params);
+}
+// 数据字典-租客管理-删除租客标签
+export function delTenantDictionary(
+  id: number,
+  type: TenantDictionaryType
+): Promise<SettingRoomTagsRes> {
+  return axios.get(`dictionary/delTenantDictionary?id=${id}&type=${type}`);
+}
+// 数据字典-租客管理-禁用/启用 租客标签(单个)
+export function checkTenantDictionary(
+  params: CheckProjectParam
+): Promise<HttpResponse> {
+  return axios.post(`dictionary/checkTenantDictionary`, params);
+}
+// 数据字典-租客管理-禁用/启用 租客标签（全选）
+export function checkAllTenantDictionary(
+  params: CheckProjectParam
+): Promise<HttpResponse> {
+  return axios.post(`dictionary/checkAllTenantDictionary`, params);
+}
+// 数据字典-租客管理--已启用列表（type：1租客类型，2租客来源，3租客行业分类，4租客企业规模）
+export function getTenantDictionaryListByType(
+  type: TenantDictionaryType
+): Promise<SettingRoomTagsRes> {
+  return axios.get(`dictionary/getTenantDictionaryList?type=${type}`);
+}

src/views/setting/system/data-dictionary/components/label-form-modal.vue

@@ -1,8 +1,9 @@
 <template>
   <a-modal
     :visible="visible"
-    :title="isEdit ? '编辑项目标签字典' : '新增项目标签字典'"
+    :title="title"
     unmount-on-close
+    @cancel="handleCancel"
   >
     <template #footer>
       <div :class="{ flex_center_between: isEdit }">
@@ -15,9 +16,9 @@
               type: 'primary',
               status: 'danger',
             }"
-            content="确定删除该项目类型？"
+            content="确定删除该数据字典类型？"
             type="error"
-            @cancel="handleDelLabel"
+            @cancel="handleDel"
           >
             <a-button type="primary" status="danger">删除</a-button>
           </a-popconfirm>
@@ -68,12 +69,8 @@
 <script setup lang="ts">
   import { ref, reactive, watch } from 'vue';
   import type { FormInstance } from '@arco-design/web-vue';
-  import {
+  import { DictionaryForm, TenantDictionaryType } from '@/api/setting';
-    LabelForm,
+  import { HttpResponse } from '@/api/interceptor';
-    createProjectType,
-    updateProjectType,
-    delProjectType,
-  } from '@/api/setting';
   import { Message } from '@arco-design/web-vue';
 
   const colorList = [
@@ -85,9 +82,14 @@
     { color: '#efefef', border: '' },
   ];
   const props = defineProps<{
+    title: string;
     visible: boolean;
-    isEdit: boolean;
+    isEdit?: boolean;
-    record?: LabelForm | null;
+    record?: DictionaryForm | null;
+    type?: TenantDictionaryType | null; // 标签类型
+    createApi: (payload: DictionaryForm) => Promise<HttpResponse>; // 新增API
+    updateApi: (payload: DictionaryForm) => Promise<HttpResponse>; // 编辑API
+    delApi: any; // 删除api
   }>();
   const currentLabelColor = ref<string>('#ecfeec');
 
@@ -97,10 +99,11 @@
   }>();
   //  表单数据
   const formRef = ref<FormInstance>();
-  const form = reactive<LabelForm>({
+  const form = reactive<DictionaryForm>({
     name: '',
     color: '',
     id: undefined,
+    type: props.type || null,
   });
 
   //  校验规则
@@ -118,9 +121,10 @@
     (val) => {
       if (val) {
         if (props.record) {
-          form.id = props.record?.id;
+          form.id = props.record?.id ?? undefined;
           form.name = props.record?.name;
           form.color = props.record?.color ?? '';
+          form.type = props.record?.type ?? null;
         } else {
           Object.assign(form, {
             id: null,
@@ -139,9 +143,15 @@
   };
   const handleSubmit = async () => {
     await formRef.value?.validate();
+    if (props.isEdit) {
+      form.type = props.record?.type ?? null;
+    } else {
+      delete form.id;
+      form.type = props.type;
+    }
     const { code, message } = props.isEdit
-      ? await updateProjectType(form)
+      ? await props.updateApi(form)
-      : await createProjectType(form);
+      : await props.createApi(form);
     if (code === 200) {
       Message.success(message);
       handleCancel();
@@ -149,11 +159,11 @@
       emit('submitted');
     }
   };
-  const handleDelLabel = async () => {
+  const handleDel = async () => {
     try {
-      const { id } = form;
+      const { id, type } = form;
       if (!id) return;
-      const { code, message } = await delProjectType(id);
+      const { code, message } = await props.delApi(id, type || null);
       if (code === 200) {
         Message.success(message);
         handleCancel();
@@ -161,7 +171,7 @@
         emit('submitted');
       }
     } catch (error) {
-      console.error(error);
+      // console.error(error);
     }
   };
 </script>

src/views/setting/system/data-dictionary/components/project-card.vue

@@ -23,14 +23,8 @@
           <a-button type="text" @click="handleAddLabel"
             ><icon-plus />新增</a-button
           >
-          <projectLabelFormModal
-            v-model:visible="showLabelModal"
-            :record="currentLabelFormInfo"
-            :is-edit="isEdit"
-            @submitted="getAllProjectTypeListData"
-          />
         </div>
-        <ul style="display: flex; align-items: center; margin-top: 10px">
+        <ul class="ul_wrap">
           <li
             v-for="item in projectLabelList"
             :key="item.id"
@@ -68,14 +62,7 @@
             >全选</a-checkbox
           >
         </div>
-        <ul
+        <ul class="ul_wrap">
-          style="
-            display: flex;
-            align-items: center;
-            flex-wrap: wrap;
-            margin-top: 10px;
-          "
-        >
           <li
             v-for="item in provinceList"
             :key="item.id"
@@ -90,6 +77,16 @@
           </li>
         </ul>
       </div>
+      <labelFormModal
+        v-model:visible="showLabelModal"
+        :record="currentLabelFormInfo"
+        :is-edit="isEdit"
+        :create-api="createProjectType"
+        :del-api="delProjectType"
+        :update-api="updateProjectType"
+        :title="isEdit ? '编辑项目标签字典' : '新增项目标签字典'"
+        @submitted="getAllProjectTypeListData"
+      />
     </a-spin>
   </a-card>
 </template>
@@ -104,13 +101,16 @@
     ProvinceItem,
     checkProjectType,
     checkAllProjectType,
-    projectTypeChecked,
+    ProjectTypeChecked,
     checkAllProvince,
     checkProvince,
+    createProjectType,
+    updateProjectType,
+    delProjectType,
   } from '@/api/setting';
   import useLoading from '@/hooks/loading';
   import { Message } from '@arco-design/web-vue';
-  import projectLabelFormModal from './project-label-form-modal.vue';
+  import labelFormModal from './label-form-modal.vue';
 
   const projectLabelList = ref<projectTypeInfo[]>([]);
   const provinceList = ref<ProvinceItem[] | null>(null);
@@ -123,18 +123,18 @@
 
   const checkAllProjectTypeData = async (checked: boolean) => {
     try {
-      const params = { is_check: (checked ? 1 : 0) as projectTypeChecked };
+      const params = { is_check: (checked ? 1 : 0) as ProjectTypeChecked };
       const { code, message } = await checkAllProjectType(params);
       if (code === 200) {
         Message.success(message);
       }
     } catch (error) {
-      console.error(error);
+      // console.error(error);
     }
   };
   const checkProjectTypeData = async (params: {
     id: number;
-    is_check: projectTypeChecked;
+    is_check: ProjectTypeChecked;
   }) => {
     try {
       const { code, message } = await checkProjectType(params);
@@ -142,23 +142,23 @@
         Message.success(message);
       }
     } catch (error) {
-      console.error(error);
+      // console.error(error);
     }
   };
   const checkAllProvinceData = async (checked: boolean) => {
     try {
-      const params = { is_check: (checked ? 1 : 0) as projectTypeChecked };
+      const params = { is_check: (checked ? 1 : 0) as ProjectTypeChecked };
       const { code, message } = await checkAllProvince(params);
       if (code === 200) {
         Message.success(message);
       }
     } catch (error) {
-      console.error(error);
+      // console.error(error);
     }
   };
   const checkProvinceData = async (params: {
     id: number;
-    is_check: projectTypeChecked;
+    is_check: ProjectTypeChecked;
   }) => {
     try {
       const { code, message } = await checkProvince(params);
@@ -166,7 +166,7 @@
         Message.success(message);
       }
     } catch (error) {
-      console.error(error);
+      // console.error(error);
     }
   };
   const onCheckAllLabelChange = (checked: boolean) => {
@@ -227,7 +227,7 @@
           .map((i) => i.id);
       }
     } catch (error) {
-      console.error(error);
+      // console.error(error);
     } finally {
       setLoading(false);
     }
@@ -254,7 +254,7 @@
           .map((i) => i.id);
       }
     } catch (error) {
-      console.error(error);
+      // console.error(error);
     }
   };
 
@@ -284,5 +284,12 @@
     .edit_icon {
       margin-left: 5px;
     }
+
+    .ul_wrap {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      margin-top: 10px;
+    }
   }
 </style>

src/views/setting/system/data-dictionary/components/room-card.vue

@@ -0,0 +1,196 @@
+<template>
+  <a-card title="空间管理">
+    <a-spin style="display: block" :loading="loading">
+      <div
+        v-if="roomTagsList && roomTagsList.length"
+        class="project_label_wrap"
+      >
+        <div class="flex_center_between">
+          <div class="title_wrap">
+            <h4>项目类型（标签类）</h4>
+            <a-checkbox
+              :model-value="
+                checkedProjectLabelId.length === roomTagsList.length &&
+                roomTagsList.length > 0
+              "
+              @change="onCheckAllLabelChange"
+              >全选</a-checkbox
+            >
+          </div>
+          <a-button type="text" @click="handleAddLabel"
+            ><icon-plus />新增</a-button
+          >
+          <labelFormModal
+            v-model:visible="showLabelModal"
+            :create-api="createRoomTag"
+            :update-api="updateRoomTag"
+            :del-api="delRoomTag"
+            :title="isEdit ? '编辑项目标签字典' : '新增项目标签字典'"
+            :record="currentLabelFormInfo"
+            :is-edit="isEdit"
+            @submitted="getAllRoomTagListData"
+          />
+        </div>
+        <ul class="ul_wrap">
+          <li
+            v-for="item in roomTagsList"
+            :key="item.id"
+            style="margin: 5px 30px 0 0"
+          >
+            <a-checkbox
+              :model-value="checkedProjectLabelId.includes(item.id)"
+              @change="(val) => onProjectTypeCheckChange(item, val)"
+            >
+              {{ item.name }}
+              <span
+                class="circle"
+                :style="{
+                  borderColor: item.color,
+                  backgroundColor: item.color,
+                }"
+              ></span>
+              <icon-edit
+                v-if="item.type === 2"
+                class="edit_icon"
+                @click.stop.prevent="handleEditLabel(item, $event)"
+              />
+            </a-checkbox>
+          </li>
+        </ul>
+      </div>
+    </a-spin>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import {
+    getRoomTagList,
+    projectTypeInfo,
+    checkRoomTag,
+    checkAllRoomTag,
+    ProjectTypeChecked,
+    createRoomTag,
+    updateRoomTag,
+    delRoomTag,
+  } from '@/api/setting';
+  import useLoading from '@/hooks/loading';
+  import { Message } from '@arco-design/web-vue';
+  import labelFormModal from './label-form-modal.vue';
+
+  const roomTagsList = ref<projectTypeInfo[]>([]);
+  const checkedProjectLabelId = ref<number[]>([]);
+  const { loading, setLoading } = useLoading(true);
+  const showLabelModal = ref<boolean>(false);
+  const isEdit = ref<boolean>(false);
+  const currentLabelFormInfo = ref(null);
+
+  const checkAllProjectTypeData = async (checked: boolean) => {
+    try {
+      const params = { is_check: (checked ? 1 : 0) as ProjectTypeChecked };
+      const { code, message } = await checkAllRoomTag(params);
+      if (code === 200) {
+        Message.success(message);
+      }
+    } catch (error) {
+      // console.error(error);
+    }
+  };
+  const checkProjectTypeData = async (params: {
+    id: number;
+    is_check: ProjectTypeChecked;
+  }) => {
+    try {
+      const { code, message } = await checkRoomTag(params);
+      if (code === 200) {
+        Message.success(message);
+      }
+    } catch (error) {
+      // console.error(error);
+    }
+  };
+  const onCheckAllLabelChange = (checked: boolean) => {
+    if (checked) {
+      // 全选
+      checkedProjectLabelId.value = roomTagsList.value.map((item) => item.id);
+    } else {
+      // 取消全选
+      checkedProjectLabelId.value = [];
+    }
+    checkAllProjectTypeData(checked);
+  };
+  const onProjectTypeCheckChange = (item, checked) => {
+    if (checked) {
+      if (!checkedProjectLabelId.value.includes(item.id)) {
+        checkedProjectLabelId.value.push(item.id);
+      }
+    } else {
+      checkedProjectLabelId.value = checkedProjectLabelId.value.filter(
+        (id) => id !== item.id
+      );
+    }
+    checkProjectTypeData({ id: item.id, is_check: checked ? 1 : 0 });
+  };
+  const getAllRoomTagListData = async () => {
+    try {
+      setLoading(true);
+      const { code, data } = await getRoomTagList();
+      if (code === 200 && data) {
+        roomTagsList.value = data?.roomTagsList;
+        if (roomTagsList.value?.length === 0) return;
+        checkedProjectLabelId.value = roomTagsList.value
+          .filter((i) => i.isCheck === 1)
+          .map((i) => i.id);
+      }
+    } catch (error) {
+      // console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleAddLabel = () => {
+    showLabelModal.value = true;
+    isEdit.value = false;
+    currentLabelFormInfo.value = null;
+  };
+  const handleEditLabel = (item, event) => {
+    if (event) event.preventDefault();
+    showLabelModal.value = true;
+    isEdit.value = true;
+    currentLabelFormInfo.value = item;
+  };
+
+  onMounted(async () => {
+    await getAllRoomTagListData();
+  });
+</script>
+
+<style lang="less" scoped>
+  .project_label_wrap {
+    .title_wrap {
+      display: flex;
+      align-items: center;
+    }
+
+    .circle {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      border: 1px solid #ccc;
+      border-radius: 50%;
+      margin-left: 4px;
+      vertical-align: middle;
+    }
+
+    .edit_icon {
+      margin-left: 5px;
+    }
+
+    .ul_wrap {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      margin-top: 10px;
+    }
+  }
+</style>

src/views/setting/system/data-dictionary/components/tenant-card.vue

@@ -0,0 +1,407 @@
+<template>
+  <a-card title="租客管理">
+    <a-spin style="display: block" :loading="loading">
+      <div
+        v-if="tenantTypeList && tenantTypeList.length"
+        class="project_label_wrap"
+      >
+        <div class="flex_center_between">
+          <div class="title_wrap">
+            <h4>租客类型（标签类）</h4>
+            <a-checkbox
+              :model-value="
+                checkedTenantTypeId.length === tenantTypeList.length &&
+                tenantTypeList.length > 0
+              "
+              @change="(checked) => onCheckAllChange(checked, 1)"
+              >全选</a-checkbox
+            >
+          </div>
+          <a-button type="text" @click="handleAddLabel(1)"
+            ><icon-plus />新增</a-button
+          >
+        </div>
+        <ul class="ul_wrap">
+          <li
+            v-for="item in tenantTypeList"
+            :key="item.id"
+            style="margin: 5px 30px 0 0"
+          >
+            <a-checkbox
+              :model-value="checkedTenantTypeId.includes(item.id)"
+              @change="(checked) => onSingleCheckChange(item, checked, 1)"
+            >
+              {{ item.name }}
+              <span
+                class="circle"
+                :style="{
+                  borderColor: item.color,
+                  backgroundColor: item.color,
+                }"
+              ></span>
+              <icon-edit
+                v-if="item.type === 2"
+                class="edit_icon"
+                @click.stop.prevent="handleEditLabel(item, $event, 1)"
+              />
+            </a-checkbox>
+          </li>
+        </ul>
+        <a-divider />
+        <div class="flex_center_between">
+          <div class="title_wrap">
+            <h4>租客来源（枚举类）</h4>
+            <a-checkbox
+              :model-value="
+                checkedTenantSourceId.length === tenantSourceList?.length &&
+                tenantSourceList?.length > 0
+              "
+              @change="(checked) => onCheckAllChange(checked, 2)"
+              >全选</a-checkbox
+            >
+          </div>
+          <a-button type="text" @click="handleAddLabel(2)"
+            ><icon-plus />新增</a-button
+          >
+        </div>
+        <ul class="ul_wrap">
+          <li
+            v-for="item in tenantSourceList"
+            :key="item.id"
+            style="margin: 15px 30px 0 0"
+          >
+            <a-checkbox
+              :model-value="checkedTenantSourceId.includes(item.id)"
+              @change="(checked) => onSingleCheckChange(item, checked, 2)"
+            >
+              {{ item.name }}
+              <span
+                class="circle"
+                :style="{
+                  borderColor: item.color,
+                  backgroundColor: item.color,
+                }"
+              ></span>
+              <icon-edit
+                v-if="item.type === 2"
+                class="edit_icon"
+                @click.stop.prevent="handleEditLabel(item, $event, 2)"
+              />
+            </a-checkbox>
+          </li>
+        </ul>
+        <a-divider />
+        <div class="flex_center_between">
+          <div class="title_wrap">
+            <h4>行业分类（枚举类）</h4>
+            <a-checkbox
+              :model-value="
+                checkedTenantIndustryId.length === tenantIndustryList?.length &&
+                tenantIndustryList?.length > 0
+              "
+              @change="(checked) => onCheckAllChange(checked, 3)"
+              >全选</a-checkbox
+            >
+          </div>
+          <a-button type="text" @click="handleAddLabel(3)"
+            ><icon-plus />新增</a-button
+          >
+        </div>
+        <ul class="ul_wrap">
+          <li
+            v-for="item in tenantIndustryList"
+            :key="item.id"
+            style="margin: 15px 30px 0 0"
+          >
+            <a-checkbox
+              :model-value="checkedTenantIndustryId.includes(item.id)"
+              @change="(checked) => onSingleCheckChange(item, checked, 3)"
+            >
+              {{ item.name }}
+              <span
+                class="circle"
+                :style="{
+                  borderColor: item.color,
+                  backgroundColor: item.color,
+                }"
+              ></span>
+              <icon-edit
+                v-if="item.type === 2"
+                class="edit_icon"
+                @click.stop.prevent="handleEditLabel(item, $event, 3)"
+              />
+            </a-checkbox>
+          </li>
+        </ul>
+        <a-divider />
+        <div class="flex_center_between">
+          <div class="title_wrap">
+            <h4>企业规模（枚举类）</h4>
+            <a-checkbox
+              :model-value="
+                checkedTenantEnterpriseId.length ===
+                  tenantEnterpriseList?.length &&
+                tenantEnterpriseList?.length > 0
+              "
+              @change="(checked) => onCheckAllChange(checked, 4)"
+              >全选</a-checkbox
+            >
+          </div>
+          <a-button type="text" @click="handleAddLabel(4)"
+            ><icon-plus />新增</a-button
+          >
+        </div>
+        <ul class="ul_wrap">
+          <li
+            v-for="item in tenantEnterpriseList"
+            :key="item.id"
+            style="margin: 15px 30px 0 0"
+          >
+            <a-checkbox
+              :model-value="checkedTenantEnterpriseId.includes(item.id)"
+              @change="(checked) => onSingleCheckChange(item, checked, 4)"
+            >
+              {{ item.name }}
+              <span
+                class="circle"
+                :style="{
+                  borderColor: item.color,
+                  backgroundColor: item.color,
+                }"
+              ></span>
+              <icon-edit
+                v-if="item.type === 2"
+                class="edit_icon"
+                @click.stop.prevent="handleEditLabel(item, $event, 4)"
+              />
+            </a-checkbox>
+          </li>
+        </ul>
+      </div>
+      <labelFormModal
+        v-model:visible="showLabelModal"
+        :create-api="createTenantDictionary"
+        :update-api="updateTenantDictionary"
+        :del-api="delTenantDictionary"
+        :type="currentTenantDictionaryType"
+        :title="isEdit ? '编辑项目标签字典' : '新增项目标签字典'"
+        :record="currentLabelFormInfo"
+        :is-edit="isEdit"
+        @submitted="getAllTenantDictionaryListData"
+      />
+    </a-spin>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import {
+    getAllTenantDictionaryList,
+    projectTypeInfo,
+    checkTenantDictionary,
+    checkAllTenantDictionary,
+    ProjectTypeChecked,
+    TenantDictionaryType,
+    createTenantDictionary,
+    updateTenantDictionary,
+    delTenantDictionary,
+  } from '@/api/setting';
+  import useLoading from '@/hooks/loading';
+  import { Message } from '@arco-design/web-vue';
+  import labelFormModal from './label-form-modal.vue';
+
+  const tenantTypeList = ref<projectTypeInfo[]>([]);
+  const tenantSourceList = ref<projectTypeInfo[]>([]);
+  const tenantIndustryList = ref<projectTypeInfo[]>([]);
+  const tenantEnterpriseList = ref<projectTypeInfo[]>([]);
+  const currentTenantDictionaryType = ref<TenantDictionaryType>(1);
+
+  const checkedTenantTypeId = ref<number[]>([]);
+  const checkedTenantSourceId = ref<number[]>([]);
+  const checkedTenantIndustryId = ref<number[]>([]);
+  const checkedTenantEnterpriseId = ref<number[]>([]);
+
+  const { loading, setLoading } = useLoading(true);
+  const showLabelModal = ref<boolean>(false);
+  const isEdit = ref<boolean>(false);
+  const currentLabelFormInfo = ref(null);
+
+  // 通用全选处理
+  const onCheckAllChange = async (
+    checked: boolean,
+    type: TenantDictionaryType
+  ) => {
+    let listRef;
+    let checkedRef;
+    switch (type) {
+      case 1:
+        listRef = tenantTypeList;
+        checkedRef = checkedTenantTypeId;
+        break;
+      case 2:
+        listRef = tenantSourceList;
+        checkedRef = checkedTenantSourceId;
+        break;
+      case 3:
+        listRef = tenantIndustryList;
+        checkedRef = checkedTenantIndustryId;
+        break;
+      case 4:
+        listRef = tenantEnterpriseList;
+        checkedRef = checkedTenantEnterpriseId;
+        break;
+      default:
+        // eslint-disable-next-line no-console
+        console.warn(`Unhandled type: ${type}`);
+        return;
+    }
+    if (checked) {
+      checkedRef.value = listRef.value.map((item) => item.id);
+    } else {
+      checkedRef.value = [];
+    }
+    try {
+      const params = {
+        is_check: (checked ? 1 : 0) as ProjectTypeChecked,
+        type,
+      };
+      const { code, message } = await checkAllTenantDictionary(params);
+      if (code === 200) {
+        Message.success(message);
+      }
+    } catch (error) {
+      // console.error(error);
+    }
+  };
+
+  // 通用单选处理
+  const onSingleCheckChange = async (
+    item: projectTypeInfo,
+    checked: boolean,
+    type: TenantDictionaryType
+  ) => {
+    let checkedRef;
+    switch (type) {
+      case 1:
+        checkedRef = checkedTenantTypeId;
+        break;
+      case 2:
+        checkedRef = checkedTenantSourceId;
+        break;
+      case 3:
+        checkedRef = checkedTenantIndustryId;
+        break;
+      case 4:
+        checkedRef = checkedTenantEnterpriseId;
+        break;
+      default:
+        // eslint-disable-next-line no-console
+        console.warn(`Unhandled type: ${type}`);
+        return;
+    }
+    if (checked) {
+      if (!checkedRef.value.includes(item.id)) {
+        checkedRef.value.push(item.id);
+      }
+    } else {
+      checkedRef.value = checkedRef.value.filter((id) => id !== item.id);
+    }
+    try {
+      const params = {
+        id: item.id,
+        is_check: (checked ? 1 : 0) as ProjectTypeChecked,
+        type,
+      };
+      const { code, message } = await checkTenantDictionary(params);
+      if (code === 200) {
+        Message.success(message);
+      }
+    } catch (error) {
+      // console.error(error);
+    }
+  };
+
+  const getAllTenantDictionaryListData = async () => {
+    try {
+      setLoading(true);
+      const { code, data } = await getAllTenantDictionaryList();
+      if (code === 200 && data) {
+        const { allList } = data;
+        tenantTypeList.value = allList?.TenantTypeList || [];
+        tenantSourceList.value = allList?.TenantSourceList || [];
+        tenantIndustryList.value = allList?.TenantIndustryList || [];
+        tenantEnterpriseList.value = allList?.TenantEnterpriseList || [];
+        if (tenantTypeList.value?.length) {
+          checkedTenantTypeId.value = tenantTypeList.value
+            .filter((i) => i.isCheck === 1)
+            .map((i) => i.id);
+        }
+        if (tenantSourceList.value?.length) {
+          checkedTenantSourceId.value = tenantSourceList.value
+            .filter((i) => i.isCheck === 1)
+            .map((i) => i.id);
+        }
+        if (tenantIndustryList.value?.length) {
+          checkedTenantIndustryId.value = tenantIndustryList.value
+            .filter((i) => i.isCheck === 1)
+            .map((i) => i.id);
+        }
+        if (tenantEnterpriseList.value?.length) {
+          checkedTenantEnterpriseId.value = tenantEnterpriseList.value
+            .filter((i) => i.isCheck === 1)
+            .map((i) => i.id);
+        }
+      }
+    } catch (error) {
+      // console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleAddLabel = (type: TenantDictionaryType) => {
+    currentTenantDictionaryType.value = type;
+    showLabelModal.value = true;
+    isEdit.value = false;
+    currentLabelFormInfo.value = null;
+  };
+  const handleEditLabel = (item, event, type: TenantDictionaryType) => {
+    if (event) event.preventDefault();
+    currentTenantDictionaryType.value = type;
+    showLabelModal.value = true;
+    isEdit.value = true;
+    currentLabelFormInfo.value = item;
+  };
+  onMounted(async () => {
+    await getAllTenantDictionaryListData();
+  });
+</script>
+
+<style lang="less" scoped>
+  .project_label_wrap {
+    .title_wrap {
+      display: flex;
+      align-items: center;
+    }
+
+    .circle {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      border: 1px solid #ccc;
+      border-radius: 50%;
+      margin-left: 4px;
+      vertical-align: middle;
+    }
+
+    .edit_icon {
+      margin-left: 5px;
+    }
+
+    .ul_wrap {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      margin-top: 10px;
+    }
+  }
+</style>

src/views/setting/system/data-dictionary/index.vue

@@ -26,6 +26,8 @@
         </a-col>
         <a-col :span="18">
           <projectCard v-if="currentSettingId === 2" />
+          <roomCard v-if="currentSettingId === 3" />
+          <tenantCard v-if="currentSettingId === 5" />
         </a-col>
       </a-row>
     </a-card>
@@ -33,12 +35,14 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted } from 'vue';
+  import { ref } from 'vue';
   import { useI18n } from 'vue-i18n';
   // import { } from '@/api/setting';
   // import { Message } from '@arco-design/web-vue';
   import { dataDictionaryTabs } from './contrant';
   import projectCard from './components/project-card.vue';
+  import roomCard from './components/room-card.vue';
+  import tenantCard from './components/tenant-card.vue';
 
   const { t } = useI18n();
   const currentSettingId = ref<number>(2);
@@ -46,7 +50,6 @@
     if (id === currentSettingId.value) return;
     currentSettingId.value = id;
   };
-  onMounted(() => {});
 </script>
 
 <style lang="less" scoped>