feat: 设置->数据字典->租客管理
This commit is contained in:
Zzz1zz
+1
-1
@@ -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,
|
||||
|
||||
+106
-7
@@ -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}`);
|
||||
}
|
||||
|
||||
+29
-19
@@ -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 {
|
||||
LabelForm,
|
||||
createProjectType,
|
||||
updateProjectType,
|
||||
delProjectType,
|
||||
} from '@/api/setting';
|
||||
import { DictionaryForm, TenantDictionaryType } from '@/api/setting';
|
||||
import { HttpResponse } from '@/api/interceptor';
|
||||
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;
|
||||
record?: LabelForm | null;
|
||||
isEdit?: boolean;
|
||||
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 createProjectType(form);
|
||||
? await props.updateApi(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>
|
||||
@@ -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
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
"
|
||||
>
|
||||
<ul class="ul_wrap">
|
||||
<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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user