zant-admin 2.0.0 → 2.0.1

package/src/views/organizationalStructure/department.vue

@@ -0,0 +1,194 @@
+<template>
+     <a-row :gutter="16">
+        <a-col :span="4">
+        <div class="left-container">
+          <a-tree
+            v-if="treeData.length > 0"
+            :tree-data="treeData"
+            :defaultExpandAll="true"
+            v-model:selectedKeys="selectedKeys"
+            @select="onSelect"
+          >
+          </a-tree>
+        </div>
+      </a-col>
+      <a-col :span="20">
+
+  <form-table
+    :formState="formState"
+    :columns="columns"
+    modulePath="department"
+    :permissionModulePath="permissionModulePath"
+    :where="recordwhere"
+    method="get"
+    :page="false"
+    @update="edit"
+    @edit="edit"
+    @delete="getdepartmentTree"
+    ref="childRef"
+  >
+      <!-- 可以通过插槽自定义单元格 -->
+    <template #custom-orgType="{ record }">
+      <span
+        v-html="dictTemplate.tabletempInt('organization_orgtype', record.orgType)"
+      ></span>
+    </template>
+    <template #custom-isEnable="{ record }">
+      <a-switch
+        v-model:checked="record.isEnable"
+        checked-children="是"
+        un-checked-children="否"
+        @change="handleSwitchIsEnableChange(record)"
+      />
+    </template>
+
+
+    <template #custom-operation="{ record }">
+      <a-divider type="vertical" />
+      <a  @click="addSubOrg(record)">新增下级</a>
+    </template>
+  </form-table>
+      </a-col>
+   </a-row>
+
+  <!-- 新增修改 -->
+  <DepartmentEdit
+    :open="editopen"
+    @close="editopen = false"
+    @updateData="refreshData"
+    ref="editRef"
+  >
+  </DepartmentEdit>
+</template>
+
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import FormTable from '@/components/FormTable.vue'
+import DepartmentEdit from '@/components/edit/organizationalStructure/DepartmentEdit.vue'
+import dictTemplate from '@/utils/dictTemplate'
+import department from '@/api/methods/department'
+
+// 权限模块路径
+const permissionModulePath = ref('organizationalStructure:department')
+const treeData = ref([])
+const selectedKeys = ref([])
+const formState = ref({
+  name: { label: '名称', value: '', type: 'text' },
+})
+const recordwhere = ref(
+  { id: 0 },
+)
+
+const columns = ref([
+  {
+    title: '组织名称',
+    dataIndex: 'name',
+    resizable: true,
+    width: 200,
+  },
+  {
+    title: '分类',
+    key: 'orgType',
+    resizable: true,
+    width: 120,
+  },
+  {
+    title: '排序',
+    dataIndex: 'sort',
+    resizable: true,
+    width: 100,
+  },
+  {
+    title: '是否启用',
+    key: 'isEnable',
+    resizable: true,
+    width: 100,
+  },
+
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    resizable: true,
+    width: 120,
+  },
+  {
+    title: '操作',
+    key: 'operation',
+    fixed: 'right',
+    width: 120,
+  },
+])
+const childRef = ref(null)
+const getdepartmentTree = () => {
+  department.getdepartmentTree().then(res => {
+    treeData.value = res.data
+  })
+}
+onMounted(() => {
+  getdepartmentTree()
+})
+
+const onSelect = (keys, info) => {
+  if (keys.length > 0) {
+    recordwhere.value.id = keys[0]
+    childRef.value.tableLoad()
+  } else {
+    recordwhere.value.id = 0
+    childRef.value.tableLoad()
+  }
+}
+
+//编辑
+const editopen = ref(false)
+const editRef = ref(null)
+const edit = record => {
+  editRef.value.getOrgTree()
+  editRef.value.init(record.id)
+  editopen.value = true
+}
+//新增子菜单
+const addSubOrg = record => {
+  editRef.value.getOrgTree()
+  editRef.value.addSubOrg(record)
+  editopen.value = true
+}
+
+
+const refreshData = () => {
+  getdepartmentTree()
+  childRef.value.tableLoad()
+}
+
+//修改是否启用
+const handleSwitchIsEnableChange = record => {
+  var data = {
+    id: record.id,
+    isEnable: record.isEnable,
+  }
+  department.updateIsEnable(data).then(() => {
+    childRef.value.tableLoad()
+  })
+}
+</script>
+
+<style scoped>
+.left-container {
+  margin-bottom: 8px;
+  padding: 24px 24px 0px;
+  background-color: white;
+  border-radius: 3px;
+  height: calc(100vh - 136px);
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform 0.5s;
+}
+.slide-enter {
+  transform: translateX(-100%);
+}
+.slide-leave-to {
+  transform: translateX(-100%);
+}
+</style>

package/src/views/organizationalStructure/employee.vue

@@ -0,0 +1,234 @@
+<template>
+  <a-row :gutter="16">
+    <a-col :span="4">
+      <div class="left-container">
+        <a-tree
+          v-if="treeData.length > 0"
+          :tree-data="treeData"
+          :defaultExpandAll="true"
+          v-model:selectedKeys="selectedKeys"
+          @select="onSelect"
+        >
+        </a-tree>
+      </div>
+    </a-col>
+    <a-col :span="20">
+      <form-table
+        :formState="formState"
+        :columns="columns"
+        modulePath="employee"
+        :permissionModulePath="permissionModulePath"
+        :where="recordwhere"
+        @update="edit"
+        @edit="edit"
+        @delete="getdepartmentTree"
+        ref="childRef"
+      >
+        <!-- 可以通过插槽自定义单元格 -->
+        <template #custom-gender="{ record }">
+          <span>{{ { 0: '未知', 1: '男', 2: '女' }[record.gender] || record.gender }}</span>
+        </template>
+        <template #custom-status="{ record }">
+          <a-tag :color="statusColorMap[record.status]">
+            {{ { 0: '试用期', 1: '正式', 2: '离职', 3: '待入职' }[record.status] || record.status }}
+          </a-tag>
+        </template>
+        <template #custom-employeeType="{ record }">
+          <span>{{ { 0: '正式员工', 1: '实习生', 2: '外包', 3: '兼职' }[record.employeeType] || record.employeeType }}</span>
+        </template>
+        <template #custom-isEnable="{ record }">
+          <a-switch
+            v-model:checked="record.isEnable"
+            checked-children="是"
+            un-checked-children="否"
+            @change="handleSwitchIsEnableChange(record)"
+          />
+        </template>
+      </form-table>
+    </a-col>
+  </a-row>
+
+  <!-- 新增修改 -->
+  <EmployeeEdit
+    :open="editopen"
+    @close="editopen = false"
+    @updateData="refreshData"
+    ref="editRef"
+  >
+  </EmployeeEdit>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import FormTable from '@/components/FormTable.vue'
+import EmployeeEdit from '@/components/edit/organizationalStructure/EmployeeEdit.vue'
+import department from '@/api/methods/department'
+import employee from '@/api/methods/employee'
+
+// 权限模块路径
+const permissionModulePath = ref('organizationalStructure:employee')
+const treeData = ref([])
+const selectedKeys = ref([])
+
+// 状态颜色映射
+const statusColorMap = {
+  0: 'orange',   // 试用期
+  1: 'green',    // 正式
+  2: 'red',      // 离职
+  3: 'blue',     // 待入职
+}
+
+const formState = ref({
+  name: { label: '姓名', value: '', type: 'text' },
+  employeeNo: { label: '工号', value: '', type: 'text' },
+  mobile: { label: '手机号', value: '', type: 'text' },
+  status: {
+    label: '状态',
+    value: null,
+    type: 'select',
+    data: [
+      { label: '试用期', value: 0 },
+      { label: '正式', value: 1 },
+      { label: '离职', value: 2 },
+      { label: '待入职', value: 3 },
+    ],
+  },
+})
+
+const recordwhere = ref({ departmentId: '' })
+
+const columns = ref([
+  {
+    title: '工号',
+    dataIndex: 'employeeNo',
+    resizable: true,
+    width: 90,
+  },
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    resizable: true,
+    width: 100,
+  },
+  {
+    title: '性别',
+    key: 'gender',
+    resizable: true,
+    width: 80,
+  },
+  {
+    title: '手机号',
+    dataIndex: 'mobile',
+    resizable: true,
+    width: 100,
+  },
+  {
+    title: '状态',
+    key: 'status',
+    resizable: true,
+    width: 100,
+  },
+  {
+    title: '员工类型',
+    key: 'employeeType',
+    resizable: true,
+    width: 100,
+  },
+    {
+    title: '组织',
+    dataIndex: 'departmentName',
+    resizable: true,
+    width: 100,
+  },
+   {
+    title: '职位',
+    dataIndex: 'positionName',
+    resizable: true,
+    width: 100,
+  },
+  {
+    title: '是否启用',
+    key: 'isEnable',
+    resizable: true,
+    width: 100,
+  },
+  {
+    title: '操作',
+    key: 'operation',
+    fixed: 'right',
+    width: 120,
+  },
+])
+
+const childRef = ref(null)
+
+const getdepartmentTree = () => {
+  department.getdepartmentTree().then(res => {
+    treeData.value = res.data
+  })
+}
+
+onMounted(() => {
+  getdepartmentTree()
+})
+
+const onSelect = (keys, info) => {
+  if (keys.length > 0) {
+    recordwhere.value.departmentId = keys[0]
+    childRef.value.tableLoad()
+  } else {
+    recordwhere.value.departmentId = ''
+    childRef.value.tableLoad()
+  }
+}
+
+// 编辑
+const editopen = ref(false)
+const editRef = ref(null)
+const edit = record => {
+  editRef.value.getOrgTree()
+  editRef.value.init(record.id)
+  // 如果当前选中了组织，传递给编辑组件
+  if (recordwhere.value.departmentId && !record.id) {
+    editRef.value.setDepartmentId(recordwhere.value.departmentId)
+  }
+  editopen.value = true
+}
+
+const refreshData = () => {
+  getdepartmentTree()
+  childRef.value.tableLoad()
+}
+
+// 修改是否启用
+const handleSwitchIsEnableChange = record => {
+  const data = {
+    id: record.id,
+    isEnable: record.isEnable,
+  }
+  employee.updateIsEnable(data).then(() => {
+    childRef.value.tableLoad()
+  })
+}
+</script>
+
+<style scoped>
+.left-container {
+  margin-bottom: 8px;
+  padding: 24px 24px 0px;
+  background-color: white;
+  border-radius: 3px;
+  height: calc(100vh - 136px);
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform 0.5s;
+}
+.slide-enter {
+  transform: translateX(-100%);
+}
+.slide-leave-to {
+  transform: translateX(-100%);
+}
+</style>

package/src/views/organizationalStructure/position.vue

@@ -0,0 +1,196 @@
+<template>
+     <a-row :gutter="16">
+        <a-col :span="4">
+        <div class="left-container">
+          <a-tree
+            v-if="treeData.length > 0"
+            :tree-data="treeData"
+            :defaultExpandAll="true"
+            v-model:selectedKeys="selectedKeys"
+            @select="onSelect"
+          >
+          </a-tree>
+        </div>
+      </a-col>
+      <a-col :span="20">
+
+  <form-table
+    :formState="formState"
+    :columns="columns"
+    modulePath="position"
+    :permissionModulePath="permissionModulePath"
+    :where="recordwhere"
+    @update="edit"
+    @edit="edit"
+    @delete="getdepartmentTree"
+    ref="childRef"
+  >
+      <!-- 可以通过插槽自定义单元格 -->
+    <template #custom-type="{ record }">
+      <span>{{ { 0: '高层', 1: '中层', 2: '基层' }[record.type] || record.type }}</span>
+    </template>
+    <template #custom-isEnable="{ record }">
+      <a-switch
+        v-model:checked="record.isEnable"
+        checked-children="是"
+        un-checked-children="否"
+        @change="handleSwitchIsEnableChange(record)"
+      />
+    </template>
+
+  </form-table>
+      </a-col>
+   </a-row>
+
+  <!-- 新增修改 -->
+  <PositionEdit
+    :open="editopen"
+    @close="editopen = false"
+    @updateData="refreshData"
+    ref="editRef"
+  >
+  </PositionEdit>
+</template>
+
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import FormTable from '@/components/FormTable.vue'
+import PositionEdit from '@/components/edit/organizationalStructure/PositionEdit.vue'
+import department from '@/api/methods/department'
+import position from '@/api/methods/position'
+
+// 权限模块路径
+const permissionModulePath = ref('organizationalStructure:position')
+const treeData = ref([])
+const selectedKeys = ref([])
+const formState = ref({
+  name: { label: '名称', value: '', type: 'text' },
+ createTime: {
+    label: '日期范围',
+    value: null,
+    defaultvalue: null,
+    type: 'time',
+  },
+})
+const recordwhere = ref(
+  { departmentId: '' },
+)
+
+const columns = ref([
+  {
+    title: '职位名称',
+    dataIndex: 'name',
+    resizable: true,
+    width: 200,
+  },
+  {
+    title: '分类',
+    key: 'type',
+    resizable: true,
+    width: 120,
+  },
+    {
+    title: '级别',
+    dataIndex: 'level',
+    resizable: true,
+    width: 120,
+  },
+  {
+    title: '排序',
+    dataIndex: 'sort',
+    resizable: true,
+    width: 100,
+  },
+  {
+    title: '是否启用',
+    key: 'isEnable',
+    resizable: true,
+    width: 100,
+  },
+
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    resizable: true,
+    width: 120,
+  },
+  {
+    title: '操作',
+    key: 'operation',
+    fixed: 'right',
+    width: 120,
+  },
+])
+const childRef = ref(null)
+const getdepartmentTree = () => {
+  department.getdepartmentTree().then(res => {
+    treeData.value = res.data
+  })
+}
+onMounted(() => {
+  getdepartmentTree()
+})
+
+const onSelect = (keys, info) => {
+  if (keys.length > 0) {
+    recordwhere.value.departmentId = keys[0]
+    childRef.value.tableLoad()
+  } else {
+    recordwhere.value.departmentId = ''
+    childRef.value.tableLoad()
+  }
+}
+
+//编辑
+const editopen = ref(false)
+const editRef = ref(null)
+const edit = record => {
+  editRef.value.getOrgTree()
+  editRef.value.init(record.id)
+  // 如果当前选中了组织，传递给编辑组件
+  if (recordwhere.value.departmentId && !record.id) {
+    editRef.value.setDepartmentId(recordwhere.value.departmentId)
+  }
+  editopen.value = true
+}
+
+
+
+const refreshData = () => {
+  getdepartmentTree()
+  childRef.value.tableLoad()
+}
+
+//修改是否启用
+const handleSwitchIsEnableChange = record => {
+  const data = {
+    id: record.id,
+    isEnable: record.isEnable,
+  }
+  position.updateIsEnable(data).then(() => {
+    childRef.value.tableLoad()
+  })
+}
+</script>
+
+<style scoped>
+.left-container {
+  margin-bottom: 8px;
+  padding: 24px 24px 0px;
+  background-color: white;
+  border-radius: 3px;
+  height: calc(100vh - 136px);
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform 0.5s;
+}
+.slide-enter {
+  transform: translateX(-100%);
+}
+.slide-leave-to {
+  transform: translateX(-100%);
+}
+</style>