zant-admin 1.0.4 → 2.0.1

package/src/components/edit/organizationalStructure/EmployeeEdit.vue

@@ -0,0 +1,295 @@
+<template>
+  <a-drawer
+    :title="editTitle"
+    :width="540"
+    :open="open"
+    :body-style="{ paddingBottom: '80px' }"
+    :footer-style="{ textAlign: 'right' }"
+    @close="onClose"
+    :destroyOnClose="true"
+  >
+    <a-skeleton :loading="initloading" active>
+      <a-form :model="formInfo" ref="formRef" layout="vertical">
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="工号" name="employeeNo" :rules="[{ required: true, message: '请输入工号' }]">
+              <a-input v-model:value="formInfo.employeeNo" placeholder="请输入" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="姓名" name="name" :rules="[{ required: true, message: '请输入姓名' }]">
+              <a-input v-model:value="formInfo.name" placeholder="请输入" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="性别" name="gender">
+              <a-select
+                v-model:value="formInfo.gender"
+                placeholder="请选择"
+                :options="genderOptions"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="手机号" name="mobile" :rules="[{ required: true, message: '请输入手机号' }]">
+              <a-input v-model:value="formInfo.mobile" placeholder="请输入" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="邮箱" name="email">
+              <a-input v-model:value="formInfo.email" placeholder="请输入" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="身份证号" name="idCard">
+              <a-input v-model:value="formInfo.idCard" placeholder="请输入" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-form-item label="所属组织" name="departmentId" :rules="[{ required: true, message: '请选择所属组织' }]">
+          <a-tree-select
+            v-model:value="formInfo.departmentId"
+            show-search
+            style="width: 100%"
+            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+            placeholder="请选择"
+            allow-clear
+            tree-default-expand-all
+            :tree-data="orgTree"
+            tree-node-filter-prop="label"
+          />
+        </a-form-item>
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="主职位" name="positionId">
+              <a-select
+                v-model:value="formInfo.positionId"
+                placeholder="请选择"
+                :options="positionOptions"
+                show-search
+                :filter-option="filterOption"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="直属上级" name="managerId">
+              <a-select
+                v-model:value="formInfo.managerId"
+                placeholder="请选择"
+                :options="managerOptions"
+                show-search
+                allow-clear
+                :filter-option="filterOption"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="员工状态" name="status" :rules="[{ required: true, message: '请选择员工状态' }]">
+              <a-select
+                v-model:value="formInfo.status"
+                placeholder="请选择"
+                :options="statusOptions"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="员工类型" name="employeeType" :rules="[{ required: true, message: '请选择员工类型' }]">
+              <a-select
+                v-model:value="formInfo.employeeType"
+                placeholder="请选择"
+                :options="employeeTypeOptions"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="入职日期" name="entryDate">
+              <a-date-picker
+                v-model:value="formInfo.entryDate"
+                style="width: 100%"
+                value-format="YYYY-MM-DD"
+                placeholder="请选择"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="离职日期" name="leaveDate">
+              <a-date-picker
+                v-model:value="formInfo.leaveDate"
+                style="width: 100%"
+                value-format="YYYY-MM-DD"
+                placeholder="请选择"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-form-item label="是否启用" name="isEnable">
+          <a-switch v-model:checked="formInfo.isEnable" />
+        </a-form-item>
+      </a-form>
+    </a-skeleton>
+    <template #extra>
+      <a-space>
+        <a-button type="primary" @click="onSave" :loading="loading">保存</a-button>
+        <a-button @click="resetForm">重置</a-button>
+      </a-space>
+    </template>
+  </a-drawer>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref, reactive, watch } from 'vue'
+import { message } from 'ant-design-vue'
+import employee from '@/api/methods/employee'
+import department from '@/api/methods/department'
+import position from '@/api/methods/position'
+import useFormCRUD from '@/utils/useFormCRUD'
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const genderOptions = [
+  { label: '未知', value: 0 },
+  { label: '男', value: 1 },
+  { label: '女', value: 2 },
+]
+
+const statusOptions = [
+  { label: '试用期', value: 0 },
+  { label: '正式', value: 1 },
+  { label: '离职', value: 2 },
+  { label: '待入职', value: 3 },
+]
+
+const employeeTypeOptions = [
+  { label: '正式员工', value: 0 },
+  { label: '实习生', value: 1 },
+  { label: '外包', value: 2 },
+  { label: '兼职', value: 3 },
+]
+
+const defaultformInfo = {
+  id: null,
+  employeeNo: '',
+  name: '',
+  gender: 0,
+  mobile: '',
+  email: '',
+  idCard: '',
+  departmentId: null,
+  positionId: null,
+  managerId: null,
+  entryDate: null,
+  leaveDate: null,
+  status: 0,
+  employeeType: 0,
+  isEnable: true,
+}
+
+const formInfo = reactive({ ...defaultformInfo })
+const editTitle = ref('新增')
+const formRef = ref(null)
+const orgTree = ref([])
+const positionOptions = ref([])
+const managerOptions = ref([])
+const emit = defineEmits(['close', 'updateData'])
+const { loading, save } = useFormCRUD(employee)
+
+const filterOption = (input, option) => {
+  return option.label.toLowerCase().includes(input.toLowerCase())
+}
+
+const resetForm = () => {
+  Object.assign(formInfo, defaultformInfo)
+  formRef.value?.resetFields()
+}
+
+const initloading = ref(false)
+
+const init = async id => {
+  initloading.value = true
+  const isEdit = !!id
+  editTitle.value = isEdit ? '修改' : '新增'
+
+  if (isEdit) {
+    try {
+      const res = await employee.get({ id })
+      initloading.value = false
+      Object.assign(formInfo, res.data)
+    } catch (error) {
+      message.error('获取信息失败，请重试')
+      initloading.value = false
+    }
+  } else {
+    initloading.value = false
+    resetForm()
+  }
+}
+
+const onSave = async () => {
+  await save(formRef.value, formInfo, {
+    onSuccess: () => {
+      emit('updateData')
+      onClose()
+    },
+  })
+}
+
+const onClose = () => {
+  resetForm()
+  emit('close')
+}
+
+// 根据部门Id获取职位列表
+const getPositionByDept = async (departmentId) => {
+  if (!departmentId) {
+    positionOptions.value = []
+    return
+  }
+  try {
+    const res = await position.getpositionByDepartmentId({ departmentId })
+    positionOptions.value = res.data || []
+  } catch (error) {}
+}
+
+// 监听部门变化，重新获取职位列表
+watch(
+  () => formInfo.departmentId,
+  (newVal, oldVal) => {
+    if (oldVal !== undefined && oldVal !== null) {
+      formInfo.positionId = null
+    }
+    getPositionByDept(newVal)
+  },
+)
+
+// 获取组织树
+const getOrgTree = async () => {
+  try {
+    const res = await department.getTreeSelectNotopdepartment()
+    orgTree.value = res.data
+  } catch (error) {}
+}
+
+// 设置所属组织（从列表页传入）
+const setDepartmentId = departmentId => {
+  formInfo.departmentId = departmentId
+}
+
+defineExpose({
+  init,
+  getOrgTree,
+  setDepartmentId,
+})
+</script>

package/src/components/edit/organizationalStructure/PositionEdit.vue

@@ -0,0 +1,166 @@
+<template>
+  <a-drawer
+    :title="editTitle"
+    :width="540"
+    :open="open"
+    :body-style="{ paddingBottom: '80px' }"
+    :footer-style="{ textAlign: 'right' }"
+    @close="onClose"
+    :destroyOnClose="true"
+  >
+    <a-skeleton :loading="initloading" active>
+      <a-form :model="formInfo" ref="formRef" layout="vertical">
+        <a-form-item label="所属组织" name="departmentId">
+          <a-tree-select
+            v-model:value="formInfo.departmentId"
+            show-search
+            style="width: 100%"
+            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+            placeholder="请选择（留空表示全局共享职位）"
+            allow-clear
+            tree-default-expand-all
+            :tree-data="orgTree"
+            tree-node-filter-prop="label"
+          />
+        </a-form-item>
+        <a-form-item label="职位名称" name="name" :rules="[{ required: true, message: '请输入职位名称' }]">
+          <a-input v-model:value="formInfo.name" placeholder="请输入" />
+        </a-form-item>
+        <a-form-item label="职位编码" name="code">
+          <a-input v-model:value="formInfo.code" placeholder="请输入" />
+        </a-form-item>
+        <a-form-item label="分类" name="type" :rules="[{ required: true, message: '请选择分类' }]">
+          <a-select
+            v-model:value="formInfo.type"
+            placeholder="请选择"
+            :options="typeOptions"
+          />
+        </a-form-item>
+        <a-form-item label="职位级别" name="level" :rules="[{ required: true, message: '请输入职位级别' }]">
+          <a-input-number
+            v-model:value="formInfo.level"
+            :min="0"
+            style="width: 100%"
+            placeholder="请输入"
+          />
+        </a-form-item>
+        <a-form-item label="排序序号" name="sort">
+          <a-input-number
+            v-model:value="formInfo.sort"
+            :min="0"
+            style="width: 100%"
+            placeholder="请输入"
+          />
+        </a-form-item>
+        <a-form-item label="是否启用" name="isEnable">
+          <a-switch v-model:checked="formInfo.isEnable" />
+        </a-form-item>
+      </a-form>
+    </a-skeleton>
+    <template #extra>
+      <a-space>
+        <a-button type="primary" @click="onSave" :loading="loading">保存</a-button>
+        <a-button @click="resetForm">重置</a-button>
+      </a-space>
+    </template>
+  </a-drawer>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref, reactive } from 'vue'
+import { message } from 'ant-design-vue'
+import position from '@/api/methods/position'
+import department from '@/api/methods/department'
+import useFormCRUD from '@/utils/useFormCRUD'
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const typeOptions = [
+  { label: '高层', value: 0 },
+  { label: '中层', value: 1 },
+  { label: '基层', value: 2 },
+]
+
+const defaultformInfo = {
+  id: null,
+  departmentId: null,
+  name: '',
+  code: '',
+  type: 0,
+  level: 0,
+  sort: 0,
+  isEnable: true,
+}
+
+const formInfo = reactive({ ...defaultformInfo })
+const editTitle = ref('新增')
+const formRef = ref(null)
+const orgTree = ref([])
+const emit = defineEmits(['close', 'updateData'])
+const { loading, save } = useFormCRUD(position)
+
+const resetForm = () => {
+  Object.assign(formInfo, defaultformInfo)
+  formRef.value?.resetFields()
+}
+
+const initloading = ref(false)
+
+const init = async id => {
+  initloading.value = true
+  const isEdit = !!id
+  editTitle.value = isEdit ? '修改' : '新增'
+
+  if (isEdit) {
+    try {
+      const res = await position.get({ id })
+      initloading.value = false
+      Object.assign(formInfo, res.data)
+    } catch (error) {
+      message.error('获取信息失败，请重试')
+      initloading.value = false
+    }
+  } else {
+    initloading.value = false
+    resetForm()
+  }
+}
+
+const onSave = async () => {
+  await save(formRef.value, formInfo, {
+    onSuccess: () => {
+      emit('updateData')
+      onClose()
+    },
+  })
+}
+
+const onClose = () => {
+  resetForm()
+  emit('close')
+}
+
+// 获取组织树
+const getOrgTree = async () => {
+  try {
+    const res = await department.getTreeSelectNotopdepartment()
+    orgTree.value = res.data
+  } catch (error) {}
+}
+
+// 设置所属组织（从列表页传入）
+const setDepartmentId = departmentId => {
+  formInfo.departmentId = departmentId
+}
+
+defineExpose({
+  init,
+  getOrgTree,
+  setDepartmentId,
+})
+</script>

package/src/components/edit/sysMenuEdit.vue

@@ -263,9 +263,10 @@ const addSubmenu = record => {
   formInfo.parentId = record.id
   formInfo.path = record.path + '/'
   formInfo.sort = record.sort
+  formInfo.type = 2
 }
 const addSubtn = record => {
-  editTitle.value = '新增按照'
+  editTitle.value = '新增按钮'
   resetForm()
   formInfo.id = null
   formInfo.parentId = record.id

package/src/config/index.js

@@ -1,74 +1,74 @@
-/**
- * 全局配置文件
- * 用于定义项目的全局配置信息
- */
-
-// 项目基本信息
-export const projectConfig = {
-  // 项目名称
-  name: 'ZAntAdmin',
-  // 项目版本
-  version: '1.0.0',
-  // 项目描述
-  description: '基于 Vue 3.5 + Ant Design Vue 的管理系统',
-  // 项目作者
-  author: 'ZC',
-  // 项目主页
-  homepage: '',
-  // 项目仓库
-  repository: '',
-}
-
-// API 配置
-export const apiConfig = {
-  // API 基础路径
-  baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
-  // 请求超时时间
-  timeout: 10000,
-  // 请求头
-  headers: {
-    'Content-Type': 'application/json',
-  },
-}
-
-// 应用配置
-export const appConfig = {
-  // 应用标题
-  title: projectConfig.name,
-  // 应用图标
-  icon: '/logo.png',
-  // 默认语言
-  defaultLanguage: 'zh-cn',
-  // 默认主题
-  defaultTheme: 'dark',
-  // 默认导航模式
-  defaultNavigationMode: 'side',
-  // 默认表格大小
-  defaultTableSize: 'middle',
-  // 默认表格边框
-  defaultTableBordered: true,
-  // 是否显示页脚
-  showFooter: true,
-  // 页脚文本
-  footerText: `© ${new Date().getFullYear()} ${projectConfig.name}`,
-}
-
-// 路由配置
-export const routerConfig = {
-  // 首页路径
-  homePath: '/console',
-  // 登录页路径
-  loginPath: '/login',
-  // 404 页面路径
-  notFoundPath: '/404',
-  // 是否开启路由守卫
-  guard: true,
-}
-
-// 默认导出所有配置
-export default {
-  project: projectConfig,
-  api: apiConfig,
-  app: appConfig,
-  router: routerConfig,
-}
+/**
+ * 全局配置文件
+ * 用于定义项目的全局配置信息
+ */
+
+// 项目基本信息
+export const projectConfig = {
+  // 项目名称
+  name: 'ZAntAdmin',
+  // 项目版本
+  version: '1.0.0',
+  // 项目描述
+  description: '基于 Vue 3.5 + Ant Design Vue 的管理系统',
+  // 项目作者
+  author: 'ZC',
+  // 项目主页
+  homepage: '',
+  // 项目仓库
+  repository: '',
+}
+
+// API 配置
+export const apiConfig = {
+  // API 基础路径
+  baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
+  // 请求超时时间
+  timeout: 10000,
+  // 请求头
+  headers: {
+    'Content-Type': 'application/json',
+  },
+}
+
+// 应用配置
+export const appConfig = {
+  // 应用标题
+  title: projectConfig.name,
+  // 应用图标
+  icon: '/logo.png',
+  // 默认语言
+  defaultLanguage: 'zh-cn',
+  // 默认主题
+  defaultTheme: 'dark',
+  // 默认导航模式
+  defaultNavigationMode: 'side',
+  // 默认表格大小
+  defaultTableSize: 'middle',
+  // 默认表格边框
+  defaultTableBordered: true,
+  // 是否显示页脚
+  showFooter: true,
+  // 页脚文本
+  footerText: `© ${new Date().getFullYear()} ${projectConfig.name}`,
+}
+
+// 路由配置
+export const routerConfig = {
+  // 首页路径
+  homePath: '/console',
+  // 登录页路径
+  loginPath: '/login',
+  // 404 页面路径
+  notFoundPath: '/404',
+  // 是否开启路由守卫
+  guard: true,
+}
+
+// 默认导出所有配置
+export default {
+  project: projectConfig,
+  api: apiConfig,
+  app: appConfig,
+  router: routerConfig,
+}