create-simpleadmin-ui 2.0.0

package/template/src/views/system/dept/index.vue

@@ -0,0 +1,517 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Refresh, OfficeBuilding } from '@element-plus/icons-vue'
+import { get, post, put, del } from '@/utils/request'
+import AppPage from '@/components/AppPage.vue'
+
+interface DeptNode {
+  id: number
+  parentId: number
+  deptName: string
+  deptCode?: string
+  orderNum: number
+  status: number
+  leader?: string
+  phone?: string
+  email?: string
+  children?: DeptNode[]
+}
+
+interface DeptForm {
+  id?: number
+  parentId: number
+  deptName: string
+  deptCode: string
+  orderNum: number
+  leader: string
+  phone: string
+  email: string
+  status: number
+  remark: string
+}
+
+const loading = ref(false)
+const saving = ref(false)
+const tree = ref<DeptNode[]>([])
+const keyword = ref('')
+const dialogVisible = ref(false)
+const expandAll = ref(true)
+
+const form = reactive<DeptForm>({
+  id: undefined,
+  parentId: 0,
+  deptName: '',
+  deptCode: '',
+  orderNum: 0,
+  leader: '',
+  phone: '',
+  email: '',
+  status: 0,
+  remark: '',
+})
+
+const filteredTree = computed(() => {
+  const q = keyword.value.trim().toLowerCase()
+  if (!q) return tree.value
+  const filter = (nodes: DeptNode[]): DeptNode[] => {
+    const out: DeptNode[] = []
+    for (const n of nodes) {
+      const kids = n.children?.length ? filter(n.children) : []
+      const hit =
+        n.deptName?.toLowerCase().includes(q) ||
+        n.deptCode?.toLowerCase().includes(q) ||
+        n.leader?.toLowerCase().includes(q) ||
+        n.phone?.toLowerCase().includes(q)
+      if (hit || kids.length) out.push({ ...n, children: kids })
+    }
+    return out
+  }
+  return filter(tree.value)
+})
+
+const parentOptions = computed(() => {
+  const opts: { id: number; label: string }[] = [{ id: 0, label: '顶级部门' }]
+  const walk = (nodes: DeptNode[], prefix = '') => {
+    for (const n of nodes) {
+      if (form.id && n.id === form.id) continue
+      opts.push({ id: n.id, label: `${prefix}${n.deptName}` })
+      if (n.children?.length) walk(n.children, `${prefix}${n.deptName} / `)
+    }
+  }
+  walk(tree.value)
+  return opts
+})
+
+const stats = computed(() => {
+  let total = 0
+  let normal = 0
+  let disabled = 0
+  let roots = 0
+  const walk = (nodes: DeptNode[], depth: number) => {
+    for (const n of nodes) {
+      total++
+      if (n.status === 0) normal++
+      else disabled++
+      if (depth === 0) roots++
+      if (n.children?.length) walk(n.children, depth + 1)
+    }
+  }
+  walk(tree.value, 0)
+  return { total, normal, disabled, roots }
+})
+
+async function load() {
+  loading.value = true
+  try {
+    tree.value = (await get<DeptNode[]>('/depts/tree')) || []
+  } finally {
+    loading.value = false
+  }
+}
+
+function resetForm(parentId = 0) {
+  Object.assign(form, {
+    id: undefined,
+    parentId,
+    deptName: '',
+    deptCode: '',
+    orderNum: 0,
+    leader: '',
+    phone: '',
+    email: '',
+    status: 0,
+    remark: '',
+  })
+}
+
+function openCreate(parentId = 0) {
+  resetForm(parentId)
+  dialogVisible.value = true
+}
+
+async function openEdit(row: DeptNode) {
+  const detail = await get<DeptForm>(`/depts/${row.id}`)
+  Object.assign(form, {
+    id: detail.id,
+    parentId: detail.parentId ?? 0,
+    deptName: detail.deptName || '',
+    deptCode: detail.deptCode || '',
+    orderNum: detail.orderNum ?? 0,
+    leader: detail.leader || '',
+    phone: detail.phone || '',
+    email: detail.email || '',
+    status: detail.status ?? 0,
+    remark: detail.remark || '',
+  })
+  dialogVisible.value = true
+}
+
+async function save() {
+  if (!form.deptName.trim()) {
+    ElMessage.warning('请填写部门名称')
+    return
+  }
+  saving.value = true
+  try {
+    const payload = {
+      id: form.id,
+      parentId: form.parentId,
+      deptName: form.deptName.trim(),
+      deptCode: form.deptCode.trim() || null,
+      orderNum: form.orderNum,
+      leader: form.leader.trim() || null,
+      phone: form.phone.trim() || null,
+      email: form.email.trim() || null,
+      status: form.status,
+      remark: form.remark.trim() || null,
+    }
+    if (form.id) await put('/depts', payload)
+    else await post('/depts', payload)
+    ElMessage.success('保存成功')
+    dialogVisible.value = false
+    load()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function remove(row: DeptNode) {
+  if (row.children?.length) {
+    ElMessage.warning('请先删除下级部门')
+    return
+  }
+  await ElMessageBox.confirm(`确认删除部门「${row.deptName}」？`, '提示', { type: 'warning' })
+  await del('/depts', { ids: [row.id] })
+  ElMessage.success('已删除')
+  load()
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <AppPage title="部门管理" description="维护组织架构树，支持层级新增与负责人信息">
+    <div class="dept-stats">
+      <div class="dept-stats__item">
+        <span class="dept-stats__num">{{ stats.total }}</span>
+        <span class="dept-stats__label">全部部门</span>
+      </div>
+      <div class="dept-stats__item dept-stats__item--root">
+        <span class="dept-stats__num">{{ stats.roots }}</span>
+        <span class="dept-stats__label">顶级节点</span>
+      </div>
+      <div class="dept-stats__item dept-stats__item--ok">
+        <span class="dept-stats__num">{{ stats.normal }}</span>
+        <span class="dept-stats__label">正常</span>
+      </div>
+      <div class="dept-stats__item dept-stats__item--off">
+        <span class="dept-stats__num">{{ stats.disabled }}</span>
+        <span class="dept-stats__label">停用</span>
+      </div>
+    </div>
+
+    <div class="toolbar">
+      <el-input
+        v-model="keyword"
+        clearable
+        placeholder="搜索名称 / 编码 / 负责人 / 电话"
+        style="width: 280px"
+      />
+      <el-button type="primary" :icon="Refresh" @click="load">刷新</el-button>
+      <el-button @click="expandAll = !expandAll">{{ expandAll ? '全部折叠' : '全部展开' }}</el-button>
+      <div class="toolbar__spacer" />
+      <el-button type="success" :icon="Plus" v-permission="'system:dept:add'" @click="openCreate(0)">
+        新增部门
+      </el-button>
+    </div>
+
+    <div class="dept-table-wrap" v-loading="loading">
+      <el-table
+        :data="filteredTree"
+        row-key="id"
+        border
+        stripe
+        :default-expand-all="expandAll"
+        :key="expandAll ? 'expand' : 'collapse'"
+        :tree-props="{ children: 'children' }"
+        class="dept-table"
+      >
+        <el-table-column label="部门名称" min-width="220" show-overflow-tooltip>
+          <template #default="{ row }">
+            <div class="name-cell">
+              <span class="name-cell__icon">
+                <el-icon :size="14"><OfficeBuilding /></el-icon>
+              </span>
+              <strong>{{ row.deptName }}</strong>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="deptCode" label="部门编码" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            <code v-if="row.deptCode" class="mono">{{ row.deptCode }}</code>
+            <span v-else class="muted">—</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="orderNum" label="排序" width="72" align="center" />
+
+        <el-table-column prop="leader" label="负责人" min-width="100" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.leader || '—' }}
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="phone" label="联系电话" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.phone || '—' }}
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="email" label="邮箱" min-width="160" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.email || '—' }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="状态" width="88" align="center">
+          <template #default="{ row }">
+            <el-tag size="small" :type="row.status === 0 ? 'success' : 'danger'">
+              {{ row.status === 0 ? '正常' : '停用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" width="260" fixed="right" align="center">
+          <template #default="{ row }">
+            <div class="row-actions">
+              <el-button
+                size="small"
+                type="primary"
+                v-permission="'system:dept:add'"
+                @click="openCreate(row.id)"
+              >
+                新增
+              </el-button>
+              <el-button
+                size="small"
+                type="primary"
+                v-permission="'system:dept:edit'"
+                @click="openEdit(row)"
+              >
+                编辑
+              </el-button>
+              <el-button
+                size="small"
+                type="danger"
+                v-permission="'system:dept:remove'"
+                @click="remove(row)"
+              >
+                删除
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="form.id ? '编辑部门' : '新增部门'"
+      width="560px"
+      class="dept-dialog"
+      append-to-body
+      align-center
+      destroy-on-close
+    >
+      <el-form label-width="96px" class="dept-form">
+        <el-form-item label="上级部门">
+          <el-select v-model="form.parentId" filterable style="width: 100%">
+            <el-option v-for="o in parentOptions" :key="o.id" :label="o.label" :value="o.id" />
+          </el-select>
+        </el-form-item>
+
+        <el-row :gutter="0">
+          <el-col :span="12" class="dept-form__col-l">
+            <el-form-item label="部门名称" required>
+              <el-input v-model="form.deptName" maxlength="64" placeholder="显示名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="dept-form__col-r">
+            <el-form-item label="部门编码">
+              <el-input v-model="form.deptCode" maxlength="64" placeholder="可选编码" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0">
+          <el-col :span="12" class="dept-form__col-l">
+            <el-form-item label="显示排序">
+              <el-input-number v-model="form.orderNum" :min="0" controls-position="right" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="dept-form__col-r">
+            <el-form-item label="状态">
+              <el-radio-group v-model="form.status">
+                <el-radio :value="0">正常</el-radio>
+                <el-radio :value="1">停用</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item label="负责人">
+          <el-input v-model="form.leader" maxlength="64" placeholder="负责人姓名" />
+        </el-form-item>
+
+        <el-row :gutter="0">
+          <el-col :span="12" class="dept-form__col-l">
+            <el-form-item label="联系电话">
+              <el-input v-model="form.phone" maxlength="20" placeholder="手机或座机" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="dept-form__col-r">
+            <el-form-item label="邮箱">
+              <el-input v-model="form.email" maxlength="128" placeholder="可选" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" :rows="2" maxlength="200" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="save">保存</el-button>
+      </template>
+    </el-dialog>
+  </AppPage>
+</template>
+
+<style scoped lang="scss">
+.dept-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.dept-stats__item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 1px solid var(--sa-border);
+  background: var(--sa-panel);
+  box-shadow: var(--sa-shadow);
+}
+
+.dept-stats__num {
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: var(--sa-ink);
+  font-variant-numeric: tabular-nums;
+}
+
+.dept-stats__label {
+  font-size: 12px;
+  color: var(--sa-ink-muted);
+}
+
+.dept-stats__item--root .dept-stats__num { color: #0369a1; }
+.dept-stats__item--ok .dept-stats__num { color: var(--sa-accent); }
+.dept-stats__item--off .dept-stats__num { color: #be123c; }
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 14px;
+  padding: 12px 14px;
+  background: var(--sa-toolbar-bg);
+  border: 1px solid var(--sa-border);
+  border-radius: var(--sa-radius-sm);
+}
+
+.toolbar__spacer {
+  flex: 1;
+}
+
+.dept-table-wrap {
+  border: 1px solid var(--sa-border);
+  border-radius: 14px;
+  overflow: hidden;
+  background: var(--sa-panel);
+  box-shadow: var(--sa-shadow);
+}
+
+.name-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.name-cell__icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  background: var(--sa-accent-soft);
+  color: var(--sa-accent);
+}
+
+.name-cell strong {
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--sa-ink-secondary);
+  background: var(--sa-toolbar-bg);
+  padding: 1px 6px;
+  border-radius: 6px;
+}
+
+.muted {
+  color: var(--sa-ink-muted);
+}
+
+.dept-form__col-l {
+  padding-right: 8px;
+}
+.dept-form__col-r {
+  padding-left: 8px;
+}
+
+@media (max-width: 900px) {
+  .dept-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+</style>
+
+<style>
+.dept-dialog.el-dialog {
+  width: min(560px, calc(100vw - 32px)) !important;
+  max-height: 88vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.dept-dialog .el-dialog__body {
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: calc(88vh - 140px);
+}
+</style>