Jelajahi Sumber

Merge branch 'all-v4-qindao' into 'all-v4'

fix: 选择租户改为树结构

See merge request skyeye/skyeye_frontend/skyeye-admin!230
Fei Liu 1 tahun lalu
induk
melakukan
09676a6687

+ 20 - 12
src/layout/components/Header/SwitchTenant.vue

@@ -1,30 +1,30 @@
 <!-- 切换租户 -->
 <template>
-  <div class="switchTenantLable" v-if="options.length > 0">
+  <div class="switchTenantLable-wrapper" v-if="options.length > 0">
     <div class="switchTenantLable">选择租户</div>
-    <ElSelect
+    <el-tree-select
       v-model="currentTenant"
-      :placeholder="tenantName"
-      style="width: 100px"
+      :data="options"
+      clearable
+      check-strictly
+      placeholder="请选择租户"
       @update:modelValue="handleChange"
-    >
-      <ElOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-    </ElSelect>
+    />
   </div>
 </template>
 <script lang="ts" setup>
-  import { ElSelect } from 'element-plus';
   import { ref, computed, onMounted } from 'vue';
   import { useUserStore } from '@/store/modules/user';
-  import { getListUseZongbu, queryListTenant} from '@/api/tenant';
+  import { queryListTenant} from '@/api/tenant';
   import { useTargetTenantIdSetting } from '@/utils/useTargetTenantIdSetting';
-
+  import { replaceParams } from '@/utils/helper/treeHelper';
+  
   interface TenantOption {
     label: string;
     value: string;
   }
 
-  const { setValue, getValue, isSysTenant } = useTargetTenantIdSetting();
+  const { setValue, getValue } = useTargetTenantIdSetting();
 
   const localTId = getValue();
 
@@ -41,7 +41,7 @@
   onMounted(() => {
     queryListTenant().then((res) => {
       if (!res) return;
-      options.value = res.map((x) => ({ ...x, label: x.tenantName, value: x.id }));
+      options.value = replaceParams(res || [], 'tenantName', 'id')
     });
   });
 
@@ -55,8 +55,16 @@
   .switchTenantLable {
     margin-right: 15px;
     display: inline-block;
+    width: 100px;
   }
   .switchTenantWrapper {
     margin-right: 20px;
   }
+
+  .switchTenantLable-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 200px;
+  }
 </style>

+ 3 - 3
src/types/dept/type.ts

@@ -1,4 +1,4 @@
-import { id } from "element-plus/es/locale"
+import { IS_DISABLED } from "@/types/common/constants"
 
 /* V4: 部门树结构 */
 export interface DeptTreeItem {
@@ -6,7 +6,7 @@ export interface DeptTreeItem {
   deptName: string, // 部门名称
   parentId: number | null, // 上级部门 id
   orderNum: number | undefined, // 排序
-  isDisabled: boolean | number, // 状态: 0-启用, 1-禁用
+  isDisabled: IS_DISABLED, // 状态: 0-启用, 1-禁用
   createdBy: number, // 创建人
   updatedBy: number, // 更新人
   createdAt: string, // 创建时间
@@ -19,4 +19,4 @@ export type DeptTree = DeptTreeItem & { children: DeptTreeItem[] }
 
 export type addDeptProps = Pick<DeptTreeItem, 'isDisabled' | 'parentId' | 'deptName' | 'orderNum'>
 
-export type editDeptProps = addDeptProps & {id: DeptTreeItem['id']}
+export type editDeptProps = addDeptProps & {id?: DeptTreeItem['id']}

+ 24 - 46
src/views/auth/dept/CreateDrawer.vue

@@ -23,10 +23,7 @@
         <el-input-number placeholder="请输入排序" v-model="formParams.orderNum" />
       </el-form-item>
       <el-form-item label="状态" prop="isDisabled">
-        <el-switch v-model="formParams.isDisabled">
-          <template #checked> 启用 </template>
-          <template #unchecked> 禁用 </template>
-        </el-switch>
+        <el-switch v-model="formParams.isDisabled" :active-value="1" :inactive-value="0" />
       </el-form-item>
     </el-form>
 
@@ -43,11 +40,22 @@
   import { ref, computed, watch } from 'vue';
   import { ElMessage } from 'element-plus';
   import type { editDeptProps } from '@/types/dept/type';
-  import {  deptInfo, updateDepartments, saveDept } from '@/api/auth/dept';
+  import { updateDepartments, saveDept } from '@/api/auth/dept';
   import { replaceParams } from '@/utils/helper/treeHelper';
-  import { IS_DISABLED } from '@/types/scene/constant';
+  import { IS_DISABLED } from '@/types/common/constants';
   import { DeptTreeItem } from '@/types/dept/type';
-
+  
+  interface Props {
+    title: string;
+    width: number;
+    deptList: Array<DeptTreeItem>;
+    dataSource: DeptTreeItem;
+  }
+  const emit = defineEmits(['change']);
+  const props = withDefaults(defineProps<Props>(), {
+    title: '添加部门',
+    width: 450,
+  });
   const rules = {
     deptName: {
       required: true,
@@ -55,20 +63,10 @@
       trigger: 'blur',
     },
   };
-
-  const emit = defineEmits(['change']);
-  const props = withDefaults(
-    defineProps<{ title: string; width: number; deptList: Array<DeptTreeItem>; dataSource: DeptTreeItem; }>(),
-    {
-      title: '添加部门',
-      width: 450,
-    },
-  );
-
   const defaultValueRef = () => ({
     id: null,
     parentId: null,
-    isDisabled: true,
+    isDisabled: 1,
     deptName: '',
     orderNum: undefined,
   });
@@ -90,12 +88,7 @@
 
   const formParams = ref<editDeptProps>(defaultValueRef());
 
-  function openDrawer(id?) {
-    if (id) {
-      formParams.value.id = id;
-      getInfo();
-      return;
-    }
+  function openDrawer() {
     isDrawer.value = true;
   }
 
@@ -110,7 +103,7 @@
       }
       const msg = formParams.value.id ? '编辑成功' : '添加成功';
       const params = { ...formParams.value };
-      params.isDisabled = formParams.value.isDisabled ? IS_DISABLED.FALSE : IS_DISABLED.TRUE;
+      params.isDisabled = formParams.value.isDisabled ? IS_DISABLED.YES : IS_DISABLED.NO;
       if (formParams.value.id) {
         updateDepartments(params).then(() => {
           message.success(msg);
@@ -119,7 +112,7 @@
           closeDrawer();
         });
       } else {
-        delete params.id
+        delete params.id;
         saveDept(params).then(() => {
           message.success(msg);
           emit('change');
@@ -135,36 +128,21 @@
     formParams.value = Object.assign(formParams.value, defaultValueRef());
   }
 
-  function getInfo() {
-    deptInfo({ id: formParams.value.id }).then((res) => {
-      const params = {
-        id: res.id,
-        parentId: res.parentId,
-        isDisabled: res.isDisabled,
-        deptName: res.deptName,
-        orderNum: res.orderNum,
-      };
-      formParams.value = Object.assign(formParams.value, params);
-      isDrawer.value = true;
-    });
-  }
-
   watch(
     () => props.dataSource,
     (value) => {
       if (value) {
         Object.entries(value).forEach(([key, value]) => {
-          if (['id', 'parentId', 'deptName', 'orderNum'].includes(key)) {
+          if (['id', 'parentId', 'deptName', 'orderNum', 'isDisabled'].includes(key)) {
             formParams.value[key] = value;
           }
-        })
-        formParams.value.isDisabled = value?.isDisabled === IS_DISABLED.FALSE ? true : false; 
+        });
       }
     },
     {
-      immediate: true
-    }
-  )
+      immediate: true,
+    },
+  );
 
   defineExpose({
     openDrawer,

+ 2 - 5
src/views/auth/dept/dept.vue

@@ -44,6 +44,7 @@
       :title="drawerTitle"
       :deptList="tableData"
       :data-source="currentDept"
+      :width="450"
       @change="reloadTable"
       v-else
     />
@@ -54,7 +55,7 @@
   import { h, reactive, ref } from 'vue';
   import { ElMessage } from 'element-plus';
   import { BasicTable, TableAction, BasicColumn } from '@/components/Table';
-  import { deptTreeList, deleteDept, getAllDepartments , deleteDepartments} from '@/api/auth/dept';
+  import { getAllDepartments , deleteDepartments} from '@/api/auth/dept';
   import { FileAddOutlined } from '@vicons/antd';
   import CreateDrawer from './CreateDrawer.vue';
   import CreateDrawer_shangfei from './CreateDrawer-shangfei.vue';
@@ -86,10 +87,6 @@
     tenantId: 0
   });
 
-  const params = reactive({
-    deptName: '',
-  });
-
   const actionColumn: BasicColumn = reactive({
     width: 150,
     title: '操作',