feat: 设置模块系统配置数据字典的项目管理功能

src/api/setting.ts

@@ -24,6 +24,9 @@ export interface PaginationResult {
 export type UserStatus = 1 | 2; // 1: 启用, 2: 禁用
 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 interface DepartmentFormParams {
@@ -187,6 +190,33 @@ export interface projectSettingInfo {
   createdAt?: string;
   updatedAt?: string;
 }
+export interface projectTypeInfo {
+  id: number;
+  systemTenantId: number; // 租户id
+  name: string; // 类型名称
+  color: string; // 颜色
+  type: 1 | 2; // 1系统类型，2租户类型
+  createUserId: number; // 创建人id
+  isCheck: CheckedStatus; // 是否选择：1是，2否
+  isDelete?: DeleteStatus; // 是否选择：1是，0否
+  createdAt?: string;
+  updatedAt?: string;
+}
+export interface ProvinceItem {
+  id: number;
+  name: string; // 省份
+  code: string; // 编码
+  isCheck: 0 | 1;
+}
+export interface LabelForm {
+  id?: number;
+  name: string;
+  color: string;
+}
+export interface CheckProjectParam {
+  id?: number;
+  is_check: projectTypeChecked;
+}
 
 // ==================== 响应类型别名 ====================
 export type DepartmentFormRes = HttpResponse<DepartmentIdData>;
@@ -206,6 +236,15 @@ export type SafeInfoRes = HttpResponse<{ safeSetting: SafeInfo }>;
 export type SettingProjectRes = HttpResponse<{
   projectSetting: projectSettingInfo;
 }>;
+export type SettingProjectTypeListRes = HttpResponse<{
+  projectTypesList: projectTypeInfo[];
+}>;
+export type SettingProjectTypeRes = HttpResponse<{
+  projectType: projectTypeInfo;
+}>;
+export type SettingProjectProvinceRes = HttpResponse<{
+  list: ProvinceItem[];
+}>;
 
 // ==================== 部门相关 API ====================
 export function createDepartment(
@@ -334,3 +373,51 @@ export function saveProjectSetting(
 ): Promise<HttpResponse> {
   return axios.post('setting/saveProjectSetting', params);
 }
+// 数据字典-项目管理-全部项目类型列表
+export function getAllProjectTypeList(): Promise<SettingProjectTypeListRes> {
+  return axios.get('dictionary/getAllProjectTypeList');
+}
+// 数据字典-项目管理-单个项目类型信息
+export function getProjectTypeById(id: number): Promise<SettingProjectTypeRes> {
+  return axios.get(`dictionary/getProjectType?id=${id}`);
+}
+// 数据字典-项目管理-项目地址列表
+export function getProvinceList(): Promise<SettingProjectProvinceRes> {
+  return axios.get(`dictionary/getProvinceList`);
+}
+// 数据字典-项目管理-创建项目类型
+export function createProjectType(params: LabelForm): Promise<HttpResponse> {
+  return axios.post(`dictionary/createProjectType`, params);
+}
+// 数据字典-项目管理-更新项目类型信息
+export function updateProjectType(params: LabelForm): Promise<HttpResponse> {
+  return axios.post(`dictionary/updateProjectType`, params);
+}
+// 数据字典-项目管理-删除项目类型
+export function delProjectType(id: number): Promise<SettingProjectProvinceRes> {
+  return axios.get(`dictionary/delProjectType?id=${id}`);
+}
+// 数据字典-项目管理-启用/禁用项目类型（单个）
+export function checkProjectType(
+  params: CheckProjectParam
+): Promise<HttpResponse> {
+  return axios.post(`dictionary/checkProjectType`, params);
+}
+// 数据字典-项目管理-启用/禁用项目类型（全选）
+export function checkAllProjectType(
+  params: CheckProjectParam
+): Promise<HttpResponse> {
+  return axios.post(`dictionary/checkAllProjectType`, params);
+}
+// 数据字典-项目管理-启用/禁用省份（单个）
+export function checkProvince(
+  params: CheckProjectParam
+): Promise<HttpResponse> {
+  return axios.post(`dictionary/checkProvince`, params);
+}
+// 数据字典-项目管理-启用/禁用省份（全选）
+export function checkAllProvince(
+  params: CheckProjectParam
+): Promise<HttpResponse> {
+  return axios.post(`dictionary/checkAllProvince`, params);
+}

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

@@ -0,0 +1,288 @@
+<template>
+  <a-card title="项目管理">
+    <!-- <template #extra>
+            <a-button type="primary" @click="handleSave">保存</a-button>
+        </template> -->
+    <a-spin style="display: block" :loading="loading">
+      <div
+        v-if="projectLabelList && projectLabelList.length"
+        class="project_label_wrap"
+      >
+        <div class="flex_center_between">
+          <div class="title_wrap">
+            <h4>项目类型（标签类）</h4>
+            <a-checkbox
+              :model-value="
+                checkedProjectLabelId.length === projectLabelList.length &&
+                projectLabelList.length > 0
+              "
+              @change="onCheckAllLabelChange"
+              >全选</a-checkbox
+            >
+          </div>
+          <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">
+          <li
+            v-for="item in projectLabelList"
+            :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>
+        <a-divider />
+        <div class="title_wrap">
+          <h4>项目地址（枚举类）</h4>
+          <a-checkbox
+            :model-value="
+              checkedProjectProvinceId.length === provinceList?.length &&
+              provinceList?.length > 0
+            "
+            @change="onCheckAllProvinceChange"
+            >全选</a-checkbox
+          >
+        </div>
+        <ul
+          style="
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            margin-top: 10px;
+          "
+        >
+          <li
+            v-for="item in provinceList"
+            :key="item.id"
+            style="margin: 15px 30px 0 0"
+          >
+            <a-checkbox
+              :model-value="checkedProjectProvinceId.includes(item.id)"
+              @change="(val) => onProjectProvinceCheckChange(item, val)"
+            >
+              {{ item.name }}
+            </a-checkbox>
+          </li>
+        </ul>
+      </div>
+    </a-spin>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  // getProjectTypeById
+  import {
+    getAllProjectTypeList,
+    projectTypeInfo,
+    getProvinceList,
+    ProvinceItem,
+    checkProjectType,
+    checkAllProjectType,
+    projectTypeChecked,
+    checkAllProvince,
+    checkProvince,
+  } from '@/api/setting';
+  import useLoading from '@/hooks/loading';
+  import { Message } from '@arco-design/web-vue';
+  import projectLabelFormModal from './project-label-form-modal.vue';
+
+  const projectLabelList = ref<projectTypeInfo[]>([]);
+  const provinceList = ref<ProvinceItem[] | null>(null);
+  const checkedProjectLabelId = ref<number[]>([]);
+  const checkedProjectProvinceId = 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 checkAllProjectType(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 checkProjectType(params);
+      if (code === 200) {
+        Message.success(message);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  const checkAllProvinceData = async (checked: boolean) => {
+    try {
+      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);
+    }
+  };
+  const checkProvinceData = async (params: {
+    id: number;
+    is_check: projectTypeChecked;
+  }) => {
+    try {
+      const { code, message } = await checkProvince(params);
+      if (code === 200) {
+        Message.success(message);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  const onCheckAllLabelChange = (checked: boolean) => {
+    if (checked) {
+      // 全选
+      checkedProjectLabelId.value = projectLabelList.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 onCheckAllProvinceChange = (checked: boolean) => {
+    if (checked && provinceList.value) {
+      checkedProjectProvinceId.value = provinceList.value.map(
+        (item) => item.id
+      );
+    } else {
+      checkedProjectProvinceId.value = [];
+    }
+    checkAllProvinceData(checked);
+  };
+  const onProjectProvinceCheckChange = (item, checked) => {
+    if (checked) {
+      if (!checkedProjectProvinceId.value.includes(item.id)) {
+        checkedProjectProvinceId.value.push(item.id);
+      }
+    } else {
+      checkedProjectProvinceId.value = checkedProjectProvinceId.value.filter(
+        (id) => id !== item.id
+      );
+    }
+    checkProvinceData({ id: item.id, is_check: checked ? 1 : 0 });
+  };
+  const getAllProjectTypeListData = async () => {
+    try {
+      setLoading(true);
+      const { code, data } = await getAllProjectTypeList();
+      if (code === 200 && data) {
+        projectLabelList.value = data?.projectTypesList;
+        if (projectLabelList.value?.length === 0) return;
+        checkedProjectLabelId.value = projectLabelList.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;
+  };
+  const getProvinceListData = async () => {
+    try {
+      const { code, data } = await getProvinceList();
+      if (code === 200 && data) {
+        provinceList.value = data?.list;
+        if (provinceList.value?.length === 0) return;
+        checkedProjectProvinceId.value = provinceList.value
+          .filter((i) => i.isCheck === 1)
+          .map((i) => i.id);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  onMounted(async () => {
+    await getAllProjectTypeListData();
+    await getProvinceListData();
+  });
+</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;
+    }
+  }
+</style>

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

@@ -0,0 +1,189 @@
+<template>
+  <a-modal
+    :visible="visible"
+    :title="isEdit ? '编辑项目标签字典' : '新增项目标签字典'"
+    unmount-on-close
+  >
+    <template #footer>
+      <div :class="{ flex_center_between: isEdit }">
+        <template v-if="isEdit">
+          <a-popconfirm
+            :ok-text="$t('cancel')"
+            :cancel-text="$t('delete')"
+            :ok-button-props="{ type: 'outline' }"
+            :cancel-button-props="{
+              type: 'primary',
+              status: 'danger',
+            }"
+            content="确定删除该项目类型？"
+            type="error"
+            @cancel="handleDelLabel"
+          >
+            <a-button type="primary" status="danger">删除</a-button>
+          </a-popconfirm>
+        </template>
+        <a-space>
+          <a-button @click="handleCancel">取消</a-button>
+          <a-button type="primary" @click="handleSubmit">确定</a-button>
+        </a-space>
+      </div>
+    </template>
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      auto-label-width
+      layout="vertical"
+    >
+      <!-- 名称 -->
+      <a-form-item label="名称" field="name" required>
+        <a-input
+          v-model="form.name"
+          :max-length="20"
+          placeholder="请输入标签字典名"
+        />
+      </a-form-item>
+      <!-- 背景样式 -->
+      <a-form-item label="背景样式" field="color" required>
+        <ul class="color_list">
+          <li
+            v-for="item in colorList"
+            :key="item.color"
+            class="color_item"
+            :style="{ backgroundColor: item.color }"
+            @click="chooseLabelColor(item.color)"
+          >
+            <icon-check-circle-fill
+              v-if="form.color === item.color"
+              size="24px"
+              :style="{ color: 'red' }"
+            />
+          </li>
+        </ul>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<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 { Message } from '@arco-design/web-vue';
+
+  const colorList = [
+    { color: '#ecfeec', border: '' },
+    { color: '#eaf3fe', border: '' },
+    { color: '#fef7ea', border: '' },
+    { color: '#fcede9', border: '' },
+    { color: '#e8dbfa', border: '' },
+    { color: '#efefef', border: '' },
+  ];
+  const props = defineProps<{
+    visible: boolean;
+    isEdit: boolean;
+    record?: LabelForm | null;
+  }>();
+  const currentLabelColor = ref<string>('#ecfeec');
+
+  const emit = defineEmits<{
+    (e: 'update:visible', val: boolean): void;
+    (e: 'submitted'): void;
+  }>();
+  //  表单数据
+  const formRef = ref<FormInstance>();
+  const form = reactive<LabelForm>({
+    name: '',
+    color: '',
+    id: undefined,
+  });
+
+  //  校验规则
+  const rules = {
+    name: [{ required: true, message: '请输入名称' }],
+    color: [{ required: true, message: '请选择背景样式' }],
+  };
+
+  const chooseLabelColor = (color: string) => {
+    if (color === currentLabelColor.value) return;
+    form.color = color;
+  };
+  watch(
+    () => props.visible,
+    (val) => {
+      if (val) {
+        if (props.record) {
+          form.id = props.record?.id;
+          form.name = props.record?.name;
+          form.color = props.record?.color ?? '';
+        } else {
+          Object.assign(form, {
+            id: null,
+            name: '',
+            color: '#ecfeec',
+          });
+        }
+      }
+    },
+    { immediate: true }
+  );
+
+  //  表单事件
+  const handleCancel = () => {
+    emit('update:visible', false);
+  };
+  const handleSubmit = async () => {
+    await formRef.value?.validate();
+    const { code, message } = props.isEdit
+      ? await updateProjectType(form)
+      : await createProjectType(form);
+    if (code === 200) {
+      Message.success(message);
+      handleCancel();
+      // 通知父组件更新部门列表数据
+      emit('submitted');
+    }
+  };
+  const handleDelLabel = async () => {
+    try {
+      const { id } = form;
+      if (!id) return;
+      const { code, message } = await delProjectType(id);
+      if (code === 200) {
+        Message.success(message);
+        handleCancel();
+        // 通知父组件更新部门列表数据
+        emit('submitted');
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  .color_list {
+    display: flex;
+    align-items: center;
+
+    .color_item {
+      width: 48px;
+      height: 48px;
+      margin-right: 36px;
+      border: 1px solid transparent;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+</style>

src/views/setting/system/data-dictionary/contrant.ts

@@ -0,0 +1,63 @@
+const dataDictionaryTabs = [
+  { id: 1, text: '系统' },
+  { id: 2, text: '项目管理' },
+  { id: 3, text: '空间管理' },
+  { id: 4, text: '合同管理' },
+  { id: 5, text: '租客管理' },
+  { id: 6, text: '财务管理' },
+  { id: 7, text: '物业管理' },
+];
+const projectHouse = [
+  {
+    title: '默认单价',
+    options: [
+      { type: 1, label: '元/㎡*月' },
+      { type: 2, label: '元/㎡*天' },
+    ],
+  },
+  {
+    title: '面积精度',
+    options: [
+      { type: 1, label: '2位数' },
+      { type: 2, label: '1位数' },
+      { type: 3, label: '整数' },
+    ],
+  },
+  {
+    title: '房源即将到期设置',
+    options: [
+      { type: 1, label: '30' },
+      { type: 2, label: '60' },
+      { type: 3, label: '90' },
+    ],
+  },
+];
+// 在租面积
+const inRentedAreaOptions = [
+  { value: '1', label: '合同起始日期' },
+  { value: '2', label: '合同免租期' },
+  { value: '3', label: '合同装修期' },
+  { value: '4', label: '房源保留' },
+];
+// 可租面积
+const availableAreaOptions = [
+  { value: '1', label: '房源招商' },
+  { value: '2', label: '房源保留' },
+  { value: '3', label: '房源保留' },
+  { value: '4', label: '房源下架' },
+];
+// 天数定义
+const dayeDfinition = [
+  { value: 1, label: '按本年累计天数计算（从1月1日至今）' },
+  { value: 2, label: '按本年整年天数 计算（本年：365天）' },
+  { value: 3, label: '按本月累计天数 计算（从本月1日至今）' },
+  { value: 4, label: '按本月整月天数 计算（本月：31天）' },
+];
+
+export {
+  dataDictionaryTabs,
+  projectHouse,
+  inRentedAreaOptions,
+  availableAreaOptions,
+  dayeDfinition,
+};

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

@@ -1,3 +1,130 @@
 <template>
-  <div> Data Dictionary </div>
+  <div class="system-setting-general">
+    <Breadcrumb
+      :items="[
+        'menu.setting',
+        'menu.setting.system',
+        'setting.data-dictionary',
+      ]"
+    />
+    <a-card class="full_height" :title="t('setting.project')">
+      <a-row :gutter="12">
+        <a-col :span="6">
+          <ul class="setting_tabs_list">
+            <li
+              v-for="item in dataDictionaryTabs"
+              :key="item.id"
+              :class="[
+                'setting_tabs_item',
+                { isChoose: currentSettingId === item.id },
+              ]"
+              @click="chooseSettingTab(item.id)"
+            >
+              {{ item.text }}
+            </li>
+          </ul>
+        </a-col>
+        <a-col :span="18">
+          <projectCard v-if="currentSettingId === 2" />
+        </a-col>
+      </a-row>
+    </a-card>
+  </div>
 </template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } 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';
+
+  const { t } = useI18n();
+  const currentSettingId = ref<number>(2);
+  const chooseSettingTab = (id: number) => {
+    if (id === currentSettingId.value) return;
+    currentSettingId.value = id;
+  };
+  onMounted(() => {});
+</script>
+
+<style lang="less" scoped>
+  .system-setting-general {
+    .setting_tabs_list {
+      border-radius: 6px;
+      border: 1px solid rgba(239, 239, 239, 1);
+      padding: 14px 0;
+      padding-bottom: 200px;
+
+      .setting_tabs_item {
+        padding: 0 20px;
+        height: 42px;
+        line-height: 42px;
+        color: #000;
+        background-color: #fff;
+        cursor: pointer;
+
+        &.isChoose {
+          background-color: #efefef;
+        }
+      }
+    }
+
+    .project_house_list {
+      .project_house_item {
+        margin-top: 20px;
+
+        &:first-child {
+          margin-top: 0;
+        }
+
+        .options {
+          display: flex;
+          align-items: center;
+          background-color: #f2f3f5;
+          width: 430px;
+          height: 36px;
+          margin-top: 10px;
+          padding: 0 3px;
+
+          .subItem {
+            flex: 1;
+            text-align: center;
+            padding: 4px 0;
+            cursor: pointer;
+
+            &.isActive {
+              background-color: #fff;
+            }
+          }
+        }
+      }
+    }
+
+    .in_rented_area,
+    .cumulative_leasing_rate {
+      .tips {
+        color: rgba(187, 187, 187, 1);
+        font-size: 12px;
+        margin-top: 4px;
+      }
+
+      .desc {
+        background-color: #eaf3fe;
+        border-radius: 2px;
+        background-color: rgba(232, 243, 255, 1);
+        color: rgba(29, 33, 41, 1);
+        font-size: 14px;
+        text-align: left;
+        border: 0px solid rgba(121, 121, 121, 1);
+        padding: 12px;
+        margin-top: 12px;
+      }
+
+      .title_item {
+        margin-top: 24px;
+      }
+    }
+  }
+</style>

src/views/setting/system/organization/index.vue

@@ -111,7 +111,7 @@
   } from '@/api/setting';
   import { debounce } from '@/utils';
   import { Message } from '@arco-design/web-vue';
-  import departmentFormModal from '../components/department-form-modal.vue';
+  import departmentFormModal from './components/department-form-modal.vue';
 
   const {
     departmentListData,