erqi-web/src/views/system/dept/index.vue

<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/index2.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>