diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index a7cc6f62..de5006c9 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -192,7 +192,7 @@ const modalStateFrom = Form.useForm(
       {
         required: true,
         min: 1,
-        max: 30,
+        max: 50,
         message: t('views.system.dept.className') + t('common.unableNull'),
       },
     ],
@@ -621,26 +621,34 @@ onMounted(() => {
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
-      <a-form layout="horizontal">
+      <a-form layout="horizontal" :label-col="{ span: 6 }" :labelWrap="true">
+        <a-form-item
+          :label="t('views.system.dept.highClass')"
+          name="parentId"
+          :label-col="{ span: 3 }"
+          :labelWrap="true"
+        >
+          <a-tree-select
+            :value="modalState.from.parentId"
+            disabled
+            :tree-data="modalState.treeData"
+            :field-names="{
+              children: 'children',
+              label: 'deptName',
+              value: 'deptId',
+            }"
+            tree-node-label-prop="deptName"
+          >
+            <template #suffixIcon></template>
+          </a-tree-select>
+        </a-form-item>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              :label="t('views.system.dept.highClass')"
-              name="parentId"
+              :label="t('views.system.dept.className')"
+              name="deptName"
             >
-              <a-tree-select
-                :value="modalState.from.parentId"
-                disabled
-                :tree-data="modalState.treeData"
-                :field-names="{
-                  children: 'children',
-                  label: 'deptName',
-                  value: 'deptId',
-                }"
-                tree-node-label-prop="deptName"
-              >
-                <template #suffixIcon></template>
-              </a-tree-select>
+              {{ modalState.from.deptName }}
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -652,6 +660,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
+
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.dept.status')" name="status">
@@ -668,21 +677,16 @@ onMounted(() => {
           </a-col>
         </a-row>
         <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
+          <a-col :lg="24" :md="24" :xs="24">
             <a-form-item
-              :label="t('views.system.dept.className')"
-              name="deptName"
+              :label="t('views.system.dept.admin')"
+              name="leader"
+              :label-col="{ span: 3 }"
+              :labelWrap="true"
             >
-              {{ modalState.from.deptName }}
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.system.dept.admin')" name="leader">
               {{ modalState.from.leader }}
             </a-form-item>
           </a-col>
-        </a-row>
-        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.dept.phone')" name="phone">
               {{ modalState.from.phone }}
@@ -713,7 +717,12 @@ onMounted(() => {
       @ok="fnModalOk"
       @cancel="fnModalCancel"
     >
-      <a-form name="modalStateFrom" layout="horizontal">
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
+      >
         <a-form-item
           :label="t('views.system.dept.highClass')"
           name="parentId"
@@ -751,18 +760,6 @@ onMounted(() => {
 
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.system.dept.admin')"
-              name="leader"
-              v-bind="modalStateFrom.validateInfos.leader"
-            >
-              <a-input
-                v-model:value="modalState.from.leader"
-                allow-clear
-              ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
             <a-form-item :label="t('views.system.dept.status')" name="status">
               <a-select
                 v-model:value="modalState.from.status"
@@ -772,8 +769,11 @@ onMounted(() => {
               </a-select>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
-            <a-form-item :label="t('views.system.dept.showSort')" name="orderNum">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.dept.showSort')"
+              name="orderNum"
+            >
               <a-input-number
                 v-model:value="modalState.from.orderNum"
                 :min="0"
@@ -785,6 +785,20 @@ onMounted(() => {
         </a-row>
 
         <a-row :gutter="16">
+          <a-col :span="24">
+            <a-form-item
+              :label="t('views.system.dept.admin')"
+              name="leader"
+              v-bind="modalStateFrom.validateInfos.leader"
+              :label-col="{ span: 3 }"
+              :labelWrap="true"
+            >
+              <a-input
+                v-model:value="modalState.from.leader"
+                allow-clear
+              ></a-input>
+            </a-form-item>
+          </a-col>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.dept.phone')"
@@ -800,7 +814,7 @@ onMounted(() => {
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-            :label="t('views.system.dept.email')"
+              :label="t('views.system.dept.email')"
               name="email"
               v-bind="modalStateFrom.validateInfos.email"
             >