puzhibing
2026-08-28 e92cd56bb56b111c1afe9922191f9897215ff6b0
frontend-admin/src/views/StaffGroupsView.vue
@@ -12,38 +12,42 @@
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
      <el-form-item class="push-right">
        <el-button type="success" @click="openCreate">新建分组</el-button>
        <el-button type="primary" @click="openCreate">新建分组</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="rows" v-loading="loading" stripe>
      <el-table-column label="序号" width="64" type="index" :index="indexMethod" />
      <el-table-column prop="groupName" label="分组名称" min-width="140" show-overflow-tooltip />
      <el-table-column prop="leaderName" label="负责人" width="110" show-overflow-tooltip />
      <el-table-column prop="leaderMobileMasked" label="联系电话" width="140" />
      <el-table-column prop="memberCount" label="绑定人员数量" width="120" />
      <el-table-column label="创建时间" width="170">
        <template #default="{ row }">{{ formatTime(row.createTime) }}</template>
      </el-table-column>
      <el-table-column label="操作" width="240" fixed="right">
        <template #default="{ row }">
          <div class="table-ops">
            <el-button type="primary" link @click="goDetail(row)">详情</el-button>
            <el-button type="primary" link @click="openEdit(row)">编辑</el-button>
            <el-button type="primary" link @click="confirmDelete(row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-wrap">
      <el-table :data="rows" v-loading="loading" stripe height="100%">
        <el-table-column label="序号" width="64" type="index" :index="indexMethod" />
        <el-table-column prop="groupName" label="分组名称" min-width="140" show-overflow-tooltip />
        <el-table-column prop="leaderName" label="负责人" width="110" show-overflow-tooltip />
        <el-table-column prop="leaderMobileMasked" label="联系电话" width="140" />
        <el-table-column prop="memberCount" label="绑定人员数量" width="120" />
        <el-table-column label="创建时间" width="170">
          <template #default="{ row }">{{ formatTime(row.createTime) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="240" fixed="right">
          <template #default="{ row }">
            <div class="table-ops">
              <el-button type="primary" link @click="goDetail(row)">详情</el-button>
              <el-button type="primary" link @click="openEdit(row)">编辑</el-button>
              <el-button type="primary" link @click="confirmDelete(row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      class="pager"
      class="main-pager"
      background
      layout="prev, pager, next"
      layout="sizes, prev, pager, next"
      :total="total"
      :page-size="size"
      :page-sizes="[10, 20, 50, 100]"
      v-model:current-page="page"
      @current-change="load"
      @size-change="onMainSizeChange"
    />
    <el-dialog v-model="dlg" :title="dlgTitle" width="860px" destroy-on-close class="group-dialog">
@@ -60,7 +64,12 @@
            <template #label>
              <span class="req-label">负责人</span>
            </template>
            <el-select v-model="form.leaderMpUserId" placeholder="请选择负责人" class="fullw">
            <el-select
              v-model="form.leaderMpUserId"
              placeholder="请选择负责人"
              class="fullw"
              @visible-change="onLeaderVisibleChange"
            >
              <el-option
                v-for="m in memberList"
                :key="m.id"
@@ -172,11 +181,13 @@
      <el-pagination
        class="pager"
        background
        layout="prev, pager, next"
        layout="sizes, prev, pager, next"
        :total="pickerTotal"
        :page-size="pickerSize"
        :page-sizes="[10, 20, 50, 100]"
        v-model:current-page="pickerPage"
        @current-change="loadPicker"
        @size-change="onPickerSizeChange"
      />
      <template #footer>
@@ -195,6 +206,7 @@
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import http from "../api/http";
import { normalizeFormData } from "../utils/formHelper";
type GroupRow = {
  id: number;
@@ -273,6 +285,12 @@
function resetSearch() {
  filters.groupName = "";
  filters.leaderMobile = "";
  page.value = 1;
  load();
}
function onMainSizeChange(nextSize: number) {
  size.value = nextSize;
  page.value = 1;
  load();
}
@@ -411,6 +429,16 @@
  membersMap.value.delete(id);
}
function onLeaderVisibleChange(visible: boolean) {
  if (!visible) {
    return;
  }
  if (memberList.value.length > 0) {
    return;
  }
  ElMessage.warning("请先选择人员,再从已有人员列表中选择负责人");
}
async function submitForm() {
  if (!form.groupName.trim()) {
    ElMessage.warning("请填写分组名称");
@@ -432,19 +460,21 @@
  saving.value = true;
  try {
    if (!editing.value) {
      await http.post("/sys/staff-groups", {
      const payload = normalizeFormData({
        groupName: form.groupName.trim(),
        leaderMpUserId: form.leaderMpUserId,
        memberIds,
      });
      await http.post("/sys/staff-groups", payload);
      ElMessage.success("已创建");
    } else {
      await http.put(`/sys/staff-groups/${editing.value.id}`, {
      const payload = normalizeFormData({
        uuid: form.uuid,
        groupName: form.groupName.trim(),
        leaderMpUserId: form.leaderMpUserId,
        memberIds,
      });
      await http.put(`/sys/staff-groups/${editing.value.id}`, payload);
      ElMessage.success("已保存");
    }
    dlg.value = false;
@@ -520,6 +550,12 @@
  pickerFilters.realName = "";
  pickerFilters.mobile = "";
  pickerFilters.deptId = undefined;
  pickerPage.value = 1;
  loadPicker();
}
function onPickerSizeChange(nextSize: number) {
  pickerSize.value = nextSize;
  pickerPage.value = 1;
  loadPicker();
}
@@ -608,13 +644,25 @@
<style scoped>
.search-form {
  margin-bottom: 12px;
  flex: none;
}
.push-right {
  margin-left: auto;
}
.pager {
.page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 190px);
  min-height: 420px;
}
.table-wrap {
  flex: 1;
  min-height: 0;
}
.main-pager {
  margin-top: 12px;
  justify-content: flex-end;
  flex: none;
}
.member-actions {
  display: flex;