发布v2.15.1版本，更新内容请查看：https://github.com/bufanyun/hotgo/blob/v2.0/docs/guide-zh-CN/start-update-log.md

web/src/views/org/dept/dept.vue

@@ -1,20 +1,44 @@
 <template>
   <div>
-    <n-card :bordered="false" title="部门管理">
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="部门管理">
+        <!--  这是由系统生成的CURD表格，你可以将此行注释改为表格的描述 -->
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard">
       <BasicForm
+        ref="searchFormRef"
         @register="register"
-        @submit="handleSubmit"
-        @reset="handleReset"
-        @keyup.enter="handleSubmit"
-        ref="formRef"
+        @submit="reloadTable"
+        @reset="reloadTable"
+        @keyup.enter="reloadTable"
       >
         <template #statusSlot="{ model, field }">
           <n-input v-model:value="model[field]" />
         </template>
       </BasicForm>
-      <n-space vertical :size="12">
-        <n-space>
-          <n-button type="primary" @click="addTable">
+      <BasicTable
+        ref="actionRef"
+        openChecked
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        :actionColumn="actionColumn"
+        :scroll-x="1280"
+        :resizeHeightOffset="-10000"
+        :cascade="false"
+        :expanded-row-keys="expandedKeys"
+        @update:expanded-row-keys="updateExpandedKeys"
+        :checked-row-keys="checkedIds"
+        @update:checked-row-keys="handleOnCheckedRow"
+      >
+        <template #tableTitle>
+          <n-button
+            type="primary"
+            @click="addTable"
+            class="min-left-space"
+            v-if="hasPermission(['/dept/edit'])"
+          >
             <template #icon>
               <n-icon>
                 <PlusOutlined />
@@ -22,175 +46,91 @@
             </template>
             添加部门
           </n-button>
-        </n-space>
-
-        <n-data-table
-          v-if="data.length > 0 || !loading"
-          :columns="columns"
-          :data="data"
-          :row-key="rowKey"
-          :loading="loading"
-          :resizeHeightOffset="-20000"
-          default-expand-all
-        />
-      </n-space>
-
-      <n-modal
-        v-model:show="showModal"
-        :show-icon="false"
-        preset="dialog"
-        :title="formParams?.id > 0 ? '编辑部门 #' + formParams?.id : '添加部门'"
-      >
-        <n-form
-          :model="formParams"
-          :rules="rules"
-          ref="formRef"
-          label-placement="left"
-          :label-width="80"
-          class="py-4"
-        >
-          <n-form-item label="上级部门" path="pid">
-            <n-tree-select
-              key-field="id"
-              :options="options"
-              :default-value="optionsDefaultValue"
-              :default-expand-all="true"
-              @update:value="handleUpdateValue"
-            />
-          </n-form-item>
-
-          <n-form-item label="部门名称" path="name">
-            <n-input placeholder="请输入名称" v-model:value="formParams.name" />
-          </n-form-item>
-
-          <n-form-item label="部门编码" path="code">
-            <n-input placeholder="请输入部门编码" v-model:value="formParams.code" />
-          </n-form-item>
-
-          <n-form-item label="负责人" path="leader">
-            <n-input placeholder="请输入负责人" v-model:value="formParams.leader" />
-          </n-form-item>
-
-          <n-form-item label="联系电话" path="phone">
-            <n-input placeholder="请输入联系电话" v-model:value="formParams.phone" />
-          </n-form-item>
-
-          <n-form-item label="邮箱" path="email">
-            <n-input placeholder="请输入邮箱" v-model:value="formParams.email" />
-          </n-form-item>
-
-          <n-form-item label="排序" path="sort">
-            <n-input-number v-model:value="formParams.sort" clearable style="width: 100%" />
-          </n-form-item>
-
-          <n-form-item label="状态" path="status">
-            <n-radio-group v-model:value="formParams.status" name="status">
-              <n-radio-button
-                v-for="status in statusOptions"
-                :key="status.value"
-                :value="status.value"
-                :label="status.label"
-              />
-            </n-radio-group>
-          </n-form-item>
-        </n-form>
-
-        <template #action>
-          <n-space>
-            <n-button @click="() => (showModal = false)">取消</n-button>
-            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
-          </n-space>
+          <n-button
+            type="error"
+            @click="handleBatchDelete"
+            class="min-left-space"
+            v-if="hasPermission(['/dept/delete'])"
+          >
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+          <n-button
+            type="primary"
+            icon-placement="left"
+            @click="handleAllExpanded"
+            class="min-left-space"
+          >
+            全部{{ expandedKeys.length ? '收起' : '展开' }}
+            <template #icon>
+              <div class="flex items-center">
+                <n-icon size="14">
+                  <AlignLeftOutlined />
+                </n-icon>
+              </div>
+            </template>
+          </n-button>
         </template>
-      </n-modal>
+      </BasicTable>
     </n-card>
+    <Edit ref="editRef" @reloadTable="reloadTable" />
   </div>
 </template>
 
-<script lang="ts" setup name="org_dept">
-  import { h, onMounted, ref } from 'vue';
-  import { DataTableColumns, NButton, NTag, useDialog, useMessage } from 'naive-ui';
-  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
-  import { PlusOutlined } from '@vicons/antd';
-  import { TableAction } from '@/components/Table';
-  import { statusActions, statusOptions } from '@/enums/optionsiEnum';
-  import { Delete, Edit, getDeptList, Status } from '@/api/org/dept';
-  import { cloneDeep } from 'lodash-es';
-  import { renderIcon, renderTooltip } from '@/utils';
-  import { HelpCircleOutline } from '@vicons/ionicons5';
-  import { defRangeShortcuts } from '@/utils/dateUtil';
+<script lang="ts" setup>
+  import { h, reactive, ref, onMounted } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { getDeptList, Delete } from '@/api/org/dept';
+  import { PlusOutlined, DeleteOutlined, AlignLeftOutlined } from '@vicons/antd';
+  import { columns, schemas, loadOptions, newState, filterIds } from './model';
+  import { convertListToTree } from '@/utils/hotgo';
+  import Edit from './edit.vue';
 
-  type RowData = {
-    createdAt: string;
-    status: number;
-    name: string;
-    id: number;
-    children?: RowData[];
-  };
+  const dialog = useDialog();
+  const message = useMessage();
+  const { hasPermission } = usePermission();
+  const actionRef = ref();
+  const searchFormRef = ref<any>({});
+  const editRef = ref();
+  const checkedIds = ref([]);
+  const expandedKeys = ref([]);
+  const allTreeKeys = ref([]);
 
-  const rules = {
-    name: {
-      required: true,
-      trigger: ['blur', 'input'],
-      message: '请输入名称',
+  const actionColumn = reactive({
+    width: 160,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+            auth: ['/dept/edit'],
+          },
+          {
+            label: '添加',
+            onClick: handleAdd.bind(null, record),
+            auth: ['/dept/edit'],
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+            auth: ['/dept/delete'],
+          },
+        ],
+      });
     },
-    code: {
-      required: true,
-      trigger: ['blur', 'input'],
-      message: '请输入编码',
-    },
-  };
-
-  const schemas: FormSchema[] = [
-    {
-      field: 'name',
-      component: 'NInput',
-      label: '部门名称',
-      componentProps: {
-        placeholder: '请输入部门名称',
-        onInput: (e: any) => {
-          console.log(e);
-        },
-      },
-      rules: [{ message: '请输入部门名称', trigger: ['blur'] }],
-    },
-    {
-      field: 'code',
-      component: 'NInput',
-      label: '部门编码',
-      componentProps: {
-        placeholder: '请输入部门编码',
-        showButton: false,
-        onInput: (e: any) => {
-          console.log(e);
-        },
-      },
-    },
-    {
-      field: 'leader',
-      component: 'NInput',
-      label: '负责人',
-      componentProps: {
-        placeholder: '请输入负责人',
-        showButton: false,
-        onInput: (e: any) => {
-          console.log(e);
-        },
-      },
-    },
-    {
-      field: 'createdAt',
-      component: 'NDatePicker',
-      label: '创建时间',
-      componentProps: {
-        type: 'datetimerange',
-        clearable: true,
-        shortcuts: defRangeShortcuts(),
-        onUpdateValue: (e: any) => {
-          console.log(e);
-        },
-      },
-    },
-  ];
+  });
 
   const [register, {}] = useForm({
     gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
@@ -198,167 +138,45 @@
     schemas,
   });
 
-  const options = ref<any>([]);
-  const optionsDefaultValue = ref<any>(null);
-  const loading = ref(false);
-  const formRef: any = ref(null);
-  const message = useMessage();
-  const dialog = useDialog();
-  const showModal = ref(false);
-  const formBtnLoading = ref(false);
-  let formParams = ref<any>();
-  const data = ref<any>([]);
-  const rowKey = (row: RowData) => row.id;
-
-  const defaultState = {
-    id: 0,
-    pid: 0,
-    name: '',
-    code: '',
-    type: '',
-    leader: '',
-    phone: '',
-    email: '',
-    sort: 0,
-    status: 1,
-    createdAt: '',
-    updatedAt: '',
+  // 加载普通数表数据
+  const loadDataTable = async (res = {}) => {
+    filterIds.value = [];
+    const params = { ...(searchFormRef.value?.formModel ?? {}), ...res, pagination: false };
+    const dataSource = await getDeptList(params);
+    allTreeKeys.value = expandedKeys.value = dataSource.list.map((item) => item.id);
+    dataSource.list = convertListToTree(dataSource.list, 'id');
+    filterIds.value = dataSource.ids;
+    return dataSource;
   };
 
-  const columns: DataTableColumns<RowData> = [
-    {
-      title(_column) {
-        return renderTooltip(
-          h(
-            NButton,
-            {
-              strong: true,
-              size: 'small',
-              text: true,
-              iconPlacement: 'right',
-            },
-            { default: () => '部门', icon: renderIcon(HelpCircleOutline) }
-          ),
-          '支持上下级部门，点击列表中左侧 > 按钮可展开下级部门列表'
-        );
-      },
-      key: 'name',
-      render(row) {
-        return h(
-          NTag,
-          {
-            type: 'info',
-          },
-          {
-            default: () => row.name,
-          }
-        );
-      },
-      width: 200,
-    },
-    // {
-    //   title: '部门ID',
-    //   key: 'index',
-    //   width: 100,
-    // },
-    {
-      title: '部门编码',
-      key: 'code',
-      width: 100,
-    },
-    {
-      title: '负责人',
-      key: 'leader',
-      width: 100,
-    },
-    {
-      title: '联系电话',
-      key: 'phone',
-      width: 150,
-    },
-    {
-      title: '邮箱',
-      key: 'email',
-      width: 150,
-    },
-    {
-      title: '状态',
-      key: 'status',
-      width: 80,
-      render(row) {
-        return h(
-          NTag,
-          {
-            style: {
-              marginRight: '6px',
-            },
-            type: row.status == 1 ? 'info' : 'error',
-            bordered: false,
-          },
-          {
-            default: () => (row.status == 1 ? '正常' : '已禁用'),
-          }
-        );
-      },
-    },
-    {
-      title: '创建时间',
-      key: 'createdAt',
-      width: 150,
-      render: (rows, _) => {
-        return rows.createdAt;
-      },
-    },
-    {
-      title: '操作',
-      key: 'actions',
-      width: 220,
-      fixed: 'right',
-      render(record: any) {
-        return h(TableAction as any, {
-          style: 'button',
-          actions: [
-            {
-              label: '添加',
-              onClick: handleAddSub.bind(null, record),
-            },
-            {
-              label: '编辑',
-              onClick: handleEdit.bind(null, record),
-            },
-            {
-              label: '删除',
-              onClick: handleDelete.bind(null, record),
-            },
-          ],
-          dropDownActions: statusActions,
-          select: (key) => {
-            updateStatus(record.id, key);
-          },
-        });
-      },
-    },
-  ];
+  // 更新选中的行
+  function handleOnCheckedRow(rowKeys) {
+    checkedIds.value = rowKeys;
+  }
 
+  // 重新加载表格数据
+  function reloadTable() {
+    actionRef.value?.reload();
+  }
+
+  // 添加数据
   function addTable() {
-    showModal.value = true;
-    formParams.value = cloneDeep(defaultState);
-    optionsDefaultValue.value = 0;
+    editRef.value.openModal(null);
   }
 
-  function handleAddSub(record: Recordable) {
-    showModal.value = true;
-    formParams.value = cloneDeep(defaultState);
-    optionsDefaultValue.value = record.id;
+  // 添加树节点下级数据
+  function handleAdd(record: Recordable) {
+    const state = newState(null);
+    state.pid = record.id;
+    editRef.value.openModal(state);
   }
 
+  // 编辑数据
   function handleEdit(record: Recordable) {
-    showModal.value = true;
-    formParams.value = cloneDeep(record);
-    formParams.value.children = 0;
-    optionsDefaultValue.value = formParams.value.pid;
+    editRef.value.openModal(record);
   }
 
+  // 单个删除
   function handleDelete(record: Recordable) {
     dialog.warning({
       title: '警告',
@@ -366,84 +184,53 @@
       positiveText: '确定',
       negativeText: '取消',
       onPositiveClick: () => {
-        Delete(record)
-          .then((_res) => {
-            message.success('操作成功');
-            loadDataTable({});
-          })
-          .catch((e: Error) => {
-            message.error(e.message ?? '操作失败');
-          });
-      },
-      onNegativeClick: () => {
-        // message.error('取消');
+        Delete(record).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
       },
     });
   }
 
-  function updateStatus(id: any, status: any) {
-    Status({ id: id, status: status })
-      .then((_res) => {
-        message.success('操作成功');
-        setTimeout(() => {
-          loadDataTable({});
-        });
-      })
-      .catch((e: Error) => {
-        message.error(e.message ?? '操作失败');
-      });
-  }
-
-  function confirmForm(e: { preventDefault: () => void }) {
-    e.preventDefault();
-    formBtnLoading.value = true;
-    formRef.value.validate((errors: any) => {
-      if (!errors) {
-        Edit(formParams.value).then((_res) => {
-          message.success('操作成功');
-          setTimeout(() => {
-            showModal.value = false;
-            loadDataTable({});
-          });
-        });
-      } else {
-        message.error('请填写完整信息');
-      }
-      formBtnLoading.value = false;
-    });
-  }
-
-  async function handleSubmit(values: Recordable) {
-    await loadDataTable(values);
-  }
-
-  function handleReset(_values: Recordable) {}
-
-  const loadDataTable = async (res: Recordable<any>) => {
-    loading.value = true;
-    const tmp = await getDeptList({ ...res, ...formRef.value?.formModel });
-    data.value = tmp?.list;
-    if (data.value === undefined || data.value === null) {
-      data.value = [];
+  // 批量删除
+  function handleBatchDelete() {
+    if (checkedIds.value.length < 1) {
+      message.error('请至少选择一项要删除的数据');
+      return;
     }
 
-    options.value = [
-      {
-        index: 0,
-        id: 0,
-        label: '顶级部门',
-        children: data.value,
+    dialog.warning({
+      title: '警告',
+      content: '你确定要批量删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          checkedIds.value = [];
+          message.success('删除成功');
+          reloadTable();
+        });
       },
-    ];
-
-    loading.value = false;
-  };
-
-  onMounted(async () => {
-    await loadDataTable({});
-  });
-
-  function handleUpdateValue(value: any) {
-    formParams.value.pid = value;
+    });
   }
+
+  // 收起/展开全部树节点
+  function handleAllExpanded() {
+    if (expandedKeys.value.length) {
+      expandedKeys.value = [];
+    } else {
+      expandedKeys.value = allTreeKeys.value;
+    }
+  }
+
+  // 更新展开的树节点
+  function updateExpandedKeys(openKeys: never[]) {
+    expandedKeys.value = openKeys;
+  }
+
+  onMounted(() => {
+    loadOptions();
+  });
 </script>
+
+<style lang="less" scoped></style>

web/src/views/org/dept/edit.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="showModal"
+      :mask-closable="false"
+      :show-icon="false"
+      preset="dialog"
+      transform-origin="center"
+      :title="formValue.id > 0 ? '编辑部门 #' + formValue.id : '添加部门'"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <n-scrollbar style="max-height: 87vh" class="pr-5">
+        <n-spin :show="loading" description="请稍候...">
+          <n-form
+            ref="formRef"
+            :model="formValue"
+            :rules="rules"
+            :label-placement="settingStore.isMobile ? 'top' : 'left'"
+            :label-width="100"
+            class="py-4"
+          >
+            <n-grid cols="1 s:1 m:1 l:1 xl:1 2xl:1" responsive="screen">
+              <n-gi span="1">
+                <n-form-item label="上级部门" path="pid">
+                  <n-tree-select
+                    :options="treeOption"
+                    v-model:value="formValue.pid"
+                    key-field="id"
+                    label-field="name"
+                    clearable
+                    filterable
+                    default-expand-all
+                    show-path
+                  />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="部门名称" path="name">
+                  <n-input placeholder="请输入部门名称" v-model:value="formValue.name" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="部门编码" path="code">
+                  <n-input placeholder="请输入部门编码" v-model:value="formValue.code" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="部门类型" path="type">
+                  <n-radio-group v-model:value="formValue.type" name="type">
+                    <n-space>
+                      <n-radio v-for="item in options.deptType" :value="item.value">
+                        {{ item.label }}
+                      </n-radio>
+                    </n-space>
+                  </n-radio-group>
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="负责人" path="leader">
+                  <n-input placeholder="请输入负责人" v-model:value="formValue.leader" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="联系电话" path="phone">
+                  <n-input placeholder="请输入联系电话" v-model:value="formValue.phone" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="邮箱" path="email">
+                  <n-input placeholder="请输入邮箱" v-model:value="formValue.email" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="排序" path="sort">
+                  <n-input-number
+                    placeholder="请输入排序"
+                    v-model:value="formValue.sort"
+                    clearable
+                    style="width: 100%"
+                  />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="状态" path="status">
+                  <n-radio-group v-model:value="formValue.status" name="status">
+                    <n-radio-button
+                      v-for="status in options.sys_normal_disable"
+                      :key="status.value"
+                      :value="status.value"
+                      :label="status.label"
+                    />
+                  </n-radio-group>
+                </n-form-item>
+              </n-gi>
+            </n-grid>
+          </n-form>
+        </n-spin>
+      </n-scrollbar>
+      <template #action>
+        <n-space>
+          <n-button @click="closeForm"> 取消 </n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm"> 确定 </n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { Edit, View, MaxSort } from '@/api/org/dept';
+  import { options, State, newState, treeOption, loadTreeOption, rules } from './model';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+
+  const emit = defineEmits(['reloadTable']);
+  const message = useMessage();
+  const settingStore = useProjectSettingStore();
+  const loading = ref(false);
+  const showModal = ref(false);
+  const formValue = ref<State>(newState(null));
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth(520);
+  });
+
+  function openModal(state: State) {
+    showModal.value = true;
+
+    // 加载关系树选项
+    loadTreeOption();
+
+    // 新增
+    if (!state || state.id < 1) {
+      formValue.value = newState(state);
+
+      loading.value = true;
+      MaxSort()
+        .then((res) => {
+          formValue.value.sort = res.sort;
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+      return;
+    }
+
+    // 编辑
+    loading.value = true;
+    View({ id: state.id })
+      .then((res) => {
+        formValue.value = res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        Edit(formValue.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            closeForm();
+            emit('reloadTable');
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function closeForm() {
+    showModal.value = false;
+    loading.value = false;
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
+
+<style lang="less"></style>

web/src/views/org/dept/model.ts

@@ -0,0 +1,247 @@
+import { h, ref } from 'vue';
+import { NTag, NButton } from 'naive-ui';
+import { cloneDeep } from 'lodash-es';
+import { FormSchema } from '@/components/Form';
+import { Dicts } from '@/api/dict/dict';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+import { validate } from '@/utils/validateUtil';
+import { Option, getOptionLabel, getOptionTag } from '@/utils/hotgo';
+import { renderTooltip, renderIcon } from '@/utils';
+import { HelpCircleOutline } from '@vicons/ionicons5';
+import { TreeOption } from '@/api/org/dept';
+import { isNullObject } from '@/utils/is';
+
+export class State {
+  public id = 0; // 部门ID
+  public pid = 0; // 父部门ID
+  public name = ''; // 部门名称
+  public code = ''; // 部门编码
+  public type = 'company'; // 部门类型
+  public leader = ''; // 负责人
+  public phone = ''; // 联系电话
+  public email = ''; // 邮箱
+  public level = 0; // 关系树等级
+  public tree = ''; // 关系树
+  public sort = 0; // 排序
+  public status = 1; // 部门状态
+  public createdAt = ''; // 创建时间
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+export const rules = {
+  email: {
+    required: false,
+    trigger: ['blur', 'input'],
+    type: 'string',
+    validator: validate.email,
+  },
+};
+
+// 表格搜索表单
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'name',
+    component: 'NInput',
+    label: '部门名称',
+    componentProps: {
+      placeholder: '请输入部门名称',
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: [{ message: '请输入部门名称', trigger: ['blur'] }],
+  },
+  {
+    field: 'code',
+    component: 'NInput',
+    label: '部门编码',
+    componentProps: {
+      placeholder: '请输入部门编码',
+      showButton: false,
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'leader',
+    component: 'NInput',
+    label: '负责人',
+    componentProps: {
+      placeholder: '请输入负责人',
+      showButton: false,
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'createdAt',
+    component: 'NDatePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+export const filterIds = ref([]);
+
+// 表格列
+export const columns = [
+  {
+    title(_column) {
+      return renderTooltip(
+        h(
+          NButton,
+          {
+            strong: true,
+            size: 'small',
+            text: true,
+            iconPlacement: 'right',
+          },
+          { default: () => '部门名称', icon: renderIcon(HelpCircleOutline) }
+        ),
+        '支持上下级部门，点击列表中左侧 > 按钮可展开下级部门列表'
+      );
+    },
+    key: 'name',
+    render(row) {
+      const filter = filterIds.value.includes(row.id as never);
+      return h(
+        NTag,
+        {
+          type: 'info',
+          checkable: filter,
+          checked: filter,
+        },
+        {
+          default: () => row.name,
+        }
+      );
+    },
+    width: 200,
+  },
+  {
+    title: '部门编码',
+    key: 'code',
+    width: 100,
+  },
+  {
+    title: '部门类型',
+    key: 'type',
+    align: 'left',
+    width: 100,
+    render(row) {
+      if (isNullObject(row.type)) {
+        return ``;
+      }
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: getOptionTag(options.value.deptType, row.type),
+          bordered: false,
+        },
+        {
+          default: () => getOptionLabel(options.value.deptType, row.type),
+        }
+      );
+    },
+  },
+  {
+    title: '负责人',
+    key: 'leader',
+    width: 100,
+  },
+  {
+    title: '联系电话',
+    key: 'phone',
+    width: 150,
+  },
+  {
+    title: '状态',
+    key: 'status',
+    align: 'left',
+    width: 80,
+    render(row) {
+      if (isNullObject(row.status)) {
+        return ``;
+      }
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: getOptionTag(options.value.sys_normal_disable, row.status),
+          bordered: false,
+        },
+        {
+          default: () => getOptionLabel(options.value.sys_normal_disable, row.status),
+        }
+      );
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+    width: 150,
+  },
+];
+
+// 字典数据选项
+export const options = ref({
+  sys_normal_disable: [] as Option[],
+  deptType: [] as Option[],
+});
+
+// 加载字典数据选项
+export function loadOptions() {
+  Dicts({
+    types: ['sys_normal_disable', 'deptType'],
+  }).then((res) => {
+    options.value = res;
+    for (const item of schemas.value) {
+      switch (item.field) {
+        case 'status':
+          item.componentProps.options = options.value.sys_normal_disable;
+          break;
+      }
+    }
+  });
+}
+
+// 关系树选项
+export const treeOption = ref([]);
+
+// 加载关系树选项
+export function loadTreeOption() {
+  TreeOption().then((res) => {
+    treeOption.value = res;
+  });
+}

web/src/views/org/post/columns.ts

@@ -5,12 +5,12 @@ export const columns = [
   {
     title: 'ID',
     key: 'id',
-    width: 80,
+    width: 100,
   },
   {
     title: '岗位',
     key: 'name',
-    width: 100,
+    width: 200,
     render(row) {
       return h(
         NTag,
@@ -48,17 +48,14 @@ export const columns = [
       );
     },
   },
-  // {
-  //   title: '排序',
-  //   key: 'sort',
-  //   width: 100,
-  // },
+  {
+    title: '备注',
+    key: 'sort',
+    width: 150,
+  },
   {
     title: '创建时间',
     key: 'createdAt',
-    width: 150,
-    render: (rows, _) => {
-      return rows.createdAt;
-    },
+    width: 180,
   },
 ];

web/src/views/org/post/post.vue

@@ -21,6 +21,7 @@
         ref="actionRef"
         :actionColumn="actionColumn"
         @update:checked-row-keys="onCheckedRow"
+        :resizeHeightOffset="-10000"
         :scroll-x="1090"
       >
         <template #tableTitle>
@@ -96,16 +97,17 @@
   </div>
 </template>
 
-<script lang="ts" setup name="org_post">
+<script lang="ts" setup>
   import { h, reactive, ref } from 'vue';
   import { useDialog, useMessage } from 'naive-ui';
   import { BasicTable, TableAction } from '@/components/Table';
   import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
-  import { Delete, Edit, getPostList, Status } from '@/api/org/post';
+  import { Delete, Edit, getPostList } from '@/api/org/post';
   import { columns } from './columns';
   import { DeleteOutlined, PlusOutlined } from '@vicons/antd';
-  import { statusActions, statusOptions } from '@/enums/optionsiEnum';
-  import { defRangeShortcuts } from "@/utils/dateUtil";
+  import { statusOptions } from '@/enums/optionsiEnum';
+  import { defRangeShortcuts } from '@/utils/dateUtil';
+  import { cloneDeep } from 'lodash-es';
 
   const params = ref<any>({
     pageSize: 10,
@@ -179,25 +181,18 @@
 
   const resetFormParams = {
     id: 0,
-    pid: 0,
-    name: '',
     code: '',
-    type: '',
-    leader: '',
-    phone: '',
-    email: '',
-    sort: 0,
+    name: '',
+    remark: '',
+    sort: null,
     status: 1,
-    created_at: '',
-    updated_at: '',
   };
-  let formParams = ref<any>(resetFormParams);
-
+  const formParams = ref<any>(resetFormParams);
   const actionColumn = reactive({
-    width: 220,
+    width: 150,
     title: '操作',
     key: 'action',
-    // fixed: 'right',
+    fixed: 'right',
     render(record) {
       return h(TableAction as any, {
         style: 'button',
@@ -211,10 +206,6 @@
             onClick: handleDelete.bind(null, record),
           },
         ],
-        dropDownActions: statusActions,
-        select: (key) => {
-          updateStatus(record.id, key);
-        },
       });
     },
   });
@@ -227,7 +218,7 @@
 
   function addTable() {
     showModal.value = true;
-    formParams.value = resetFormParams;
+    formParams.value = cloneDeep(resetFormParams);
   }
 
   const loadDataTable = async (res) => {
@@ -237,7 +228,6 @@
   function onCheckedRow(rowKeys) {
     console.log(rowKeys);
     batchDeleteDisabled.value = rowKeys.length <= 0;
-
     checkedIds.value = rowKeys;
   }
 
@@ -282,9 +272,6 @@
           reloadTable();
         });
       },
-      onNegativeClick: () => {
-        // message.error('取消');
-      },
     });
   }
 
@@ -300,9 +287,6 @@
           reloadTable();
         });
       },
-      onNegativeClick: () => {
-        // message.error('取消');
-      },
     });
   }
 
@@ -316,15 +300,6 @@
     params.value = values;
     reloadTable();
   }
-
-  function updateStatus(id, status) {
-    Status({ id: id, status: status }).then((_res) => {
-      message.success('操作成功');
-      setTimeout(() => {
-        reloadTable();
-      });
-    });
-  }
 </script>
 
 <style lang="less" scoped></style>

web/src/views/org/user/addBalance.vue

@@ -57,7 +57,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, ref, computed, watch } from 'vue';
+  import { ref, computed, watch } from 'vue';
   import {
     addRules as rules,
     addState as State,
@@ -94,8 +94,10 @@
   const params = ref<State>(props.formParams);
   const message = useMessage();
   const formRef = ref<any>({});
-  const dialogWidth = ref('75%');
   const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth();
+  });
 
   function confirmForm(e) {
     e.preventDefault();
@@ -116,10 +118,6 @@
     });
   }
 
-  onMounted(async () => {
-    adaModalWidth(dialogWidth);
-  });
-
   function closeForm() {
     isShowModal.value = false;
   }

web/src/views/org/user/addIntegral.vue

@@ -94,8 +94,10 @@
   const params = ref<State>(props.formParams);
   const message = useMessage();
   const formRef = ref<any>({});
-  const dialogWidth = ref('75%');
   const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth();
+  });
 
   function confirmForm(e) {
     e.preventDefault();
@@ -116,10 +118,6 @@
     });
   }
 
-  onMounted(async () => {
-    adaModalWidth(dialogWidth);
-  });
-
   function closeForm() {
     isShowModal.value = false;
   }

web/src/views/org/user/columns.ts

@@ -1,5 +1,5 @@
 import { h } from 'vue';
-import { NAvatar, NTag } from 'naive-ui';
+import { NAvatar, NTag, NText } from 'naive-ui';
 import { formatBefore } from '@/utils/dateUtil';
 
 export const columns = [
@@ -17,6 +17,12 @@ export const columns = [
     title: '姓名',
     key: 'realName',
     width: 100,
+    render(row) {
+      if (row.realName == '') {
+        return h(NText, { depth: 3 }, { default: () => '未设置' });
+      }
+      return row.realName;
+    },
   },
   {
     title: '头像',

web/src/views/org/user/list.vue

@@ -20,7 +20,8 @@
       ref="actionRef"
       :actionColumn="actionColumn"
       @update:checked-row-keys="onCheckedRow"
-      :scroll-x="1280"
+      :scroll-x="1500"
+      :resizeHeightOffset="-10000"
     >
       <template #tableTitle>
         <n-button
@@ -86,54 +87,11 @@
         class="py-4"
       >
         <n-grid x-gap="24" :cols="2">
-          <n-gi>
-            <n-form-item label="姓名" path="realName">
-              <n-input placeholder="请输入姓名" v-model:value="formParams.realName" />
-            </n-form-item>
-          </n-gi>
           <n-gi>
             <n-form-item label="用户名" path="username">
               <n-input placeholder="请输入登录用户名" v-model:value="formParams.username" />
             </n-form-item>
           </n-gi>
-        </n-grid>
-
-        <n-grid x-gap="24" :cols="2">
-          <n-gi>
-            <n-form-item label="绑定角色" path="roleId">
-              <n-tree-select
-                key-field="id"
-                :options="options.role"
-                :default-value="formParams.roleId"
-                :default-expand-all="true"
-                @update:value="handleUpdateRoleValue"
-              />
-            </n-form-item>
-          </n-gi>
-          <n-gi>
-            <n-form-item label="所属部门" path="deptId">
-              <n-tree-select
-                key-field="id"
-                :options="options.dept"
-                :default-value="formParams.deptId"
-                :default-expand-all="true"
-                @update:value="handleUpdateDeptValue"
-              />
-            </n-form-item>
-          </n-gi>
-        </n-grid>
-
-        <n-grid x-gap="24" :cols="2">
-          <n-gi>
-            <n-form-item label="绑定岗位" path="postIds">
-              <n-select
-                :default-value="formParams.postIds"
-                multiple
-                :options="options.post"
-                @update:value="handleUpdatePostValue"
-              />
-            </n-form-item>
-          </n-gi>
           <n-gi>
             <n-form-item label="密码" path="password">
               <n-input
@@ -144,7 +102,57 @@
             </n-form-item>
           </n-gi>
         </n-grid>
+
+        <n-grid x-gap="24" :cols="2">
+          <n-gi>
+            <n-form-item label="所属部门" path="deptId">
+              <n-tree-select
+                key-field="id"
+                :options="options.dept"
+                :default-value="formParams.deptId"
+                @update:value="handleUpdateDeptValue"
+                clearable
+                filterable
+                default-expand-all
+              />
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="绑定角色" path="roleId">
+              <n-tree-select
+                key-field="id"
+                :options="options.role"
+                :default-value="formParams.roleId"
+                @update:value="handleUpdateRoleValue"
+                clearable
+                filterable
+                default-expand-all
+              />
+            </n-form-item>
+          </n-gi>
+        </n-grid>
+
         <n-divider title-placement="left">填写更多信息（可选)</n-divider>
+        <n-grid x-gap="24" :cols="2">
+          <n-gi>
+            <n-form-item label="姓名" path="realName">
+              <n-input placeholder="请输入姓名" v-model:value="formParams.realName" />
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="绑定岗位" path="postIds">
+              <n-select
+                :default-value="formParams.postIds"
+                :options="options.post"
+                @update:value="handleUpdatePostValue"
+                multiple
+                clearable
+                filterable
+              />
+            </n-form-item>
+          </n-gi>
+        </n-grid>
+
         <n-grid x-gap="24" :cols="2">
           <n-gi>
             <n-form-item label="手机号" path="mobile">
@@ -163,7 +171,7 @@
             <n-form-item label="性别" path="sex">
               <n-radio-group v-model:value="formParams.sex" name="sex">
                 <n-radio-button
-                  v-for="status in sexOptions"
+                  v-for="status in options.sys_user_sex"
                   :key="status.value"
                   :value="status.value"
                   :label="status.label"
@@ -175,7 +183,7 @@
             <n-form-item label="状态" path="status">
               <n-radio-group v-model:value="formParams.status" name="status">
                 <n-radio-button
-                  v-for="status in statusOptions"
+                  v-for="status in options.sys_normal_disable"
                   :key="status.value"
                   :value="status.value"
                   :label="status.label"
@@ -229,7 +237,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { h, reactive, ref, onMounted } from 'vue';
+  import { h, reactive, ref, onMounted, computed } from 'vue';
   import { useDialog, useMessage } from 'naive-ui';
   import { ActionItem, BasicTable, TableAction } from '@/components/Table';
   import { BasicForm } from '@/components/Form/index';
@@ -237,7 +245,6 @@
   import { columns } from './columns';
   import { PlusOutlined, DeleteOutlined } from '@vicons/antd';
   import { QrCodeOutline } from '@vicons/ionicons5';
-  import { sexOptions, statusOptions } from '@/enums/optionsiEnum';
   import { adaModalWidth } from '@/utils/hotgo';
   import { getRandomString } from '@/utils/charset';
   import { cloneDeep } from 'lodash-es';
@@ -279,16 +286,18 @@
   const formRef = ref<any>({});
   const batchDeleteDisabled = ref(true);
   const checkedIds = ref([]);
-  const dialogWidth = ref('50%');
   const formParams = ref<any>();
   const showQrModal = ref(false);
   const qrParams = ref({
     name: '',
     qrUrl: '',
   });
+  const dialogWidth = computed(() => {
+    return adaModalWidth();
+  });
 
   const actionColumn = reactive({
-    width: 240,
+    width: 280,
     title: '操作',
     key: 'action',
     fixed: 'right',
@@ -389,7 +398,6 @@
   }
 
   const loadDataTable = async (res) => {
-    adaModalWidth(dialogWidth);
     return await List({ ...res, ...searchFormRef.value?.formModel, ...{ roleId: props.type } });
   };
 

web/src/views/org/user/model.ts

@@ -2,11 +2,10 @@ import { cloneDeep } from 'lodash-es';
 import { ref } from 'vue';
 import { getDeptOption } from '@/api/org/dept';
 import { getRoleOption } from '@/api/system/role';
-import { getPostOption } from '@/api/org/post';
 import { FormSchema, useForm } from '@/components/Form';
 import { statusOptions } from '@/enums/optionsiEnum';
 import { defRangeShortcuts } from '@/utils/dateUtil';
-import {Dicts} from "@/api/dict/dict";
+import { Dicts } from '@/api/dict/dict';
 
 // 增加余额/积分.
 
@@ -199,6 +198,8 @@ export const options = ref<any>({
   roleTabs: [{ id: -1, name: '全部' }],
   dept: [],
   post: [],
+  sys_user_sex: [],
+  sys_normal_disable: [],
 });
 
 export async function loadOptions() {
@@ -215,9 +216,11 @@ export async function loadOptions() {
   }
 
   const tmpOptions = await Dicts({
-    types: ['adminPostOption'],
+    types: ['adminPostOption', 'sys_user_sex', 'sys_normal_disable'],
   });
-  options.value.post =tmpOptions?.adminPostOption;
+  options.value.post = tmpOptions?.adminPostOption;
+  options.value.sys_user_sex = tmpOptions?.sys_user_sex;
+  options.value.sys_normal_disable = tmpOptions?.sys_normal_disable;
 }
 
 function treeDataToCompressed(source) {