first commit

src/views/system/dept/index.vue

@@ -0,0 +1,192 @@
+<template>
+  <FilterComponent :filter-items="items" :filter-model="model" theme="light" @handle="handle" />
+  <TableComponent style="height: calc(100% - 60px);" v-loading="loading" :data="listData" :columns="columns" :config="config" :operate="operate" theme="light"
+    size="large" @handle="handle" />
+  <DialogComponent v-if="detail.visible" :title="detail.title[detail.type]" :modal="true" width="500"
+    @close="closeDetail">
+    <DetailComponent :data="detail.data" :type="detail.type" :tree="treeOptions" @close="closeDetail" />
+  </DialogComponent>
+</template>
+<script setup>
+import { ref, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDept, delDept, listDeptExcludeChild } from '@/api/system'
+import { handleTree } from '@/utils/common'
+import FilterComponent from '@/components/Filter/index.vue'
+import TableComponent from '@/components/Table/index.vue'
+import DialogComponent from '@/components/Dialog/index.vue'
+import DetailComponent from './detail.vue'
+
+const items = [
+  {
+    label: '部门名称',
+    prop: 'deptName',
+    type: 'input'
+  },
+  {
+    name: '查询',
+    prop: 'query',
+    theme: 'primary',
+    type: 'button',
+    permission: [ 'system:dept:query' ]
+  },
+  {
+    name: '新增',
+    prop: 'add',
+    theme: 'success',
+    type: 'button',
+    permission: [ 'system:dept:add' ]
+  }
+]
+
+let model = {
+  deptName: ''
+}
+
+const loading = ref(false)
+const listData = ref([])
+const treeOptions = ref([])
+
+const columns = [
+  {
+    label: '部门名称',
+    prop: 'deptName'
+  },
+  {
+    label: '负责人',
+    prop: 'leader'
+  },
+  {
+    label: '联系电话',
+    prop: 'phone'
+  },
+  {
+    label: '邮箱',
+    prop: 'email'
+  },
+  {
+    label: '排序',
+    prop: 'orderNum'
+  }
+]
+
+const config = {
+  width: 120,
+  rowKey: 'deptId'
+}
+
+const operate = [
+  {
+    label: '编辑',
+    prop: 'edit',
+    theme: 'primary',
+    permission: [ 'system:dept:edit' ]
+  },
+  {
+    label: '删除',
+    prop: 'delete',
+    theme: 'danger',
+    permission: [ 'system:dept:remove' ]
+  }
+]
+
+const detail = reactive({
+  visible: false,
+  title: {
+    add: '部门新增',
+    check: '部门查看',
+    edit: '部门编辑'
+  },
+  type: 'add',
+  data: {}
+})
+
+/**
+ * 获取数据
+ */
+ const initData = () => {
+  loading.value = true
+  getDept(model).then(res => {
+    if(res.code === 200) {
+      listData.value = handleTree(res.data, 'deptId')
+    }else{
+      ElMessage.error(res.msg || '查询失败！')
+    }
+  }).finally(() => {
+    loading.value = false
+  })
+}
+
+/**
+ * 删除部门
+ * @param id 部门ID
+ */
+const deleteData = (id) => {
+  delDept(id).then(() => {
+    ElMessage.success('删除成功！')
+    initData()
+  })
+}
+
+/**
+* 按钮操作
+* @param type 操作类型
+* @param data 数据
+*/
+const handle = (type, data) => {
+
+  switch (type) {
+    case 'query':
+      model = { ...data }
+      initData()
+      break
+    case 'add':
+      treeOptions.value = listData.value
+      detail.visible = true
+      detail.type = 'add'
+      detail.data = {}
+      break
+    case 'check':
+    case 'edit':
+      listDeptExcludeChild(data.deptId).then(res => {
+        treeOptions.value = handleTree(res.data, 'deptId')
+      })
+      detail.type = type
+      detail.data = { ...data }
+      detail.visible = true
+      break
+    case 'delete': {
+      ElMessageBox.confirm(
+        '是否删除该条数据?',
+        '提示',
+        {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        deleteData(data.deptId)
+      })
+      break
+    }
+
+    default:
+      break
+  }
+}
+
+/**
+ * 关闭详情弹窗
+ * @param refresh 是否刷新数据
+ */
+const closeDetail = (refresh) => {
+  detail.visible = false
+  if (refresh) {
+    initData()
+  }
+}
+
+initData()
+</script>
+
+<style lang="scss" scoped></style>