| | |
| | | <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"> |
| | |
| | | <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" |
| | |
| | | <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> |
| | |
| | | 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; |
| | |
| | | function resetSearch() { |
| | | filters.groupName = ""; |
| | | filters.leaderMobile = ""; |
| | | page.value = 1; |
| | | load(); |
| | | } |
| | | |
| | | function onMainSizeChange(nextSize: number) { |
| | | size.value = nextSize; |
| | | page.value = 1; |
| | | load(); |
| | | } |
| | |
| | | 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("请填写分组名称"); |
| | |
| | | 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; |
| | |
| | | pickerFilters.realName = ""; |
| | | pickerFilters.mobile = ""; |
| | | pickerFilters.deptId = undefined; |
| | | pickerPage.value = 1; |
| | | loadPicker(); |
| | | } |
| | | |
| | | function onPickerSizeChange(nextSize: number) { |
| | | pickerSize.value = nextSize; |
| | | pickerPage.value = 1; |
| | | loadPicker(); |
| | | } |
| | |
| | | <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; |