vue2server2 1.0.21

package/frontEnd/src/pages/MedalIssueDialog.vue

@@ -0,0 +1,558 @@
+<template>
+  <el-dialog
+    title="发放"
+    :visible.sync="dialogVisible"
+    width="980px"
+    :close-on-click-modal="false"
+    @close="onClose"
+  >
+    <div class="issue-body">
+      <div class="issue-col">
+        <div class="issue-col-head">
+          <div class="issue-col-title">待选列表</div>
+          <div class="issue-col-count">
+            {{ issueLeftSelected.length }}/{{ issueLeftTotal }}
+          </div>
+        </div>
+        <el-input
+          v-model="issueLeftKeyword"
+          size="small"
+          placeholder="请输入"
+          clearable
+          prefix-icon="el-icon-search"
+          class="issue-search"
+        />
+        <el-table
+          ref="issueLeftTable"
+          class="issue-left-table"
+          :data="issueLeftPageRows"
+          border
+          stripe
+          size="small"
+          height="380"
+          :show-header="false"
+          @selection-change="onIssueLeftSelectionChange"
+        >
+          <el-table-column
+            type="selection"
+            width="46"
+            :selectable="isIssueLeftRowSelectable"
+          />
+          <el-table-column label="人员">
+            <template slot-scope="scope">
+              <span
+                class="issue-name"
+                @click="onIssueLeftNameClick(scope.row)"
+              >
+                {{ formatUserLabel(scope.row) }}
+              </span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="issue-pagination">
+          <el-pagination
+            small
+            :current-page="issueLeftPage"
+            :page-size="issueLeftPageSize"
+            layout="total, prev, pager, next"
+            :total="issueLeftTotal"
+            @current-change="onIssueLeftPageChange"
+          />
+        </div>
+      </div>
+
+      <div class="issue-transfer">
+        <el-button
+          size="mini"
+          type="primary"
+          :disabled="issueLeftSelected.length === 0"
+          @click="onIssueMoveToRight"
+        >
+          <i class="el-icon-arrow-right" />
+        </el-button>
+        <el-button
+          size="mini"
+          type="primary"
+          :disabled="issueRightSelected.length === 0"
+          @click="onIssueMoveToLeft"
+        >
+          <i class="el-icon-arrow-left" />
+        </el-button>
+      </div>
+
+      <div class="issue-col">
+        <div class="issue-col-head">
+          <div class="issue-col-title">
+            <el-checkbox
+              class="issue-right-select-all"
+              :value="issueRightAllSelected"
+              :indeterminate="issueRightIndeterminate"
+              @change="onToggleRightSelectAll"
+            >
+              全选
+            </el-checkbox>
+            <span>当前佩戴</span>
+          </div>
+          <div class="issue-col-count">
+            {{ issueSelectedUsers.length }}/{{ limitCount === -1 ? '不限' : limitCount }}
+          </div>
+        </div>
+        <el-input
+          v-model="issueRightKeyword"
+          size="small"
+          placeholder="请输入"
+          clearable
+          prefix-icon="el-icon-search"
+          class="issue-search"
+        />
+        <el-table
+          ref="issueRightTable"
+          :data="issueRightPageRows"
+          border
+          stripe
+          size="small"
+          height="380"
+          :show-header="false"
+          @selection-change="onIssueRightSelectionChange"
+        >
+          <el-table-column type="selection" width="46" />
+          <el-table-column label="人员">
+            <template slot-scope="scope">
+              <span
+                class="issue-name"
+                @click="onIssueRightNameClick(scope.row)"
+              >
+                {{ formatUserLabel(scope.row) }}
+              </span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="issue-pagination">
+          <el-pagination
+            small
+            :current-page="issueRightPage"
+            :page-size="issueRightPageSize"
+            layout="total, prev, pager, next"
+            :total="issueRightTotal"
+            @current-change="onIssueRightPageChange"
+          />
+        </div>
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="small" @click="onCancel">取消</el-button>
+      <el-button size="small" type="primary" @click="onConfirm">
+        发放
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { get } from "../utils/request";
+
+/**
+ * 勋章发放弹窗组件
+ * 用于管理勋章的发放对象，支持左右穿梭框选择用户
+ */
+export default {
+  name: "MedalIssueDialog",
+  props: {
+    // 控制弹窗显示
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    limitCount: {
+      type: Number,
+      default: -1
+    },
+    // 当前操作的勋章对象
+    medal: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      issueSelectedUsers: [], // 当前勋章已选中的用户列表
+      issueLeftKeyword: "", // 左侧（待选）搜索关键字
+      issueRightKeyword: "", // 右侧（已选）搜索关键字
+      issueLeftPage: 1, // 左侧当前页码
+      issueRightPage: 1, // 右侧当前页码
+      issueLeftPageSize: 10, // 左侧每页显示数量
+      issueRightPageSize: 10, // 右侧每页显示数量
+      issueLeftRows: [], // 左侧当前页数据（服务端分页）
+      issueLeftTotalCount: 0, // 左侧总数（服务端返回）
+      issueLeftSelected: [], // 左侧表格当前勾选的行（准备移入右侧）
+      issueRightSelected: [], // 右侧表格当前勾选的行（准备移出右侧）
+      issueLeftSelectedMap: {},
+      issueLeftRestoringSelection: false,
+      issueLeftKeywordTimer: null,
+      issueRightAllSelected: false,
+      issueRightIndeterminate: false
+    };
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("update:visible", val);
+      }
+    },
+    // 左侧待选列表总数
+    issueLeftTotal() {
+      return this.issueLeftTotalCount;
+    },
+    // 右侧已选列表总数
+    issueRightTotal() {
+      return this.issueRightFiltered.length;
+    },
+    issueLeftFiltered() {
+      return Array.isArray(this.issueLeftRows) ? this.issueLeftRows : [];
+    },
+    // 右侧过滤后的列表（根据关键字过滤）
+    issueRightFiltered() {
+      const keyword = (this.issueRightKeyword || "").trim();
+      const list = Array.isArray(this.issueSelectedUsers) ? this.issueSelectedUsers : [];
+      if (!keyword) return list;
+      return list.filter(u => this.formatUserLabel(u).includes(keyword));
+    },
+    // 左侧当前页显示的数据
+    issueLeftPageRows() {
+      return this.issueLeftFiltered;
+    },
+    // 右侧当前页显示的数据
+    issueRightPageRows() {
+      const start = (this.issueRightPage - 1) * this.issueRightPageSize;
+      return this.issueRightFiltered.slice(start, start + this.issueRightPageSize);
+    }
+  },
+  watch: {
+    // 监听 visible 变化，为 true 时初始化数据
+    visible: {
+      handler(val) {
+        if (val) this.init();
+      },
+      immediate: true
+    },
+    issueLeftKeyword() {
+      if (this.issueLeftKeywordTimer) clearTimeout(this.issueLeftKeywordTimer);
+      this.issueLeftKeywordTimer = setTimeout(() => {
+        this.issueLeftPage = 1;
+        this.fetchIssueLeftPage();
+      }, 250);
+    },
+    issueLeftPageRows() {
+      this.$nextTick(() => {
+        this.restoreIssueLeftPageSelection();
+      });
+    }
+  },
+  methods: {
+    /**
+     * 初始化数据
+     * 1. 确保用户池数据已加载
+     * 2. 根据服务端返回的已发放用户初始化选中状态
+     */
+    async init() {
+      const serverIssuedUsers = await this.fetchIssuedUsers();
+      const row = this.medal;
+      if (!row) return;
+
+      this.issueSelectedUsers = (serverIssuedUsers || []).map(u => ({ ...u }));
+
+      // 重置搜索和分页状态
+      this.issueLeftKeyword = "";
+      this.issueRightKeyword = "";
+      this.issueLeftPage = 1;
+      this.issueRightPage = 1;
+      this.issueLeftRows = [];
+      this.issueLeftTotalCount = 0;
+      this.issueLeftSelected = [];
+      this.issueRightSelected = [];
+      this.issueLeftSelectedMap = {};
+      // 清空表格选中状态
+      this.$nextTick(() => {
+        this.$refs.issueLeftTable && this.$refs.issueLeftTable.clearSelection && this.$refs.issueLeftTable.clearSelection();
+        this.$refs.issueRightTable && this.$refs.issueRightTable.clearSelection && this.$refs.issueRightTable.clearSelection();
+      });
+      this.fetchIssueLeftPage();
+    },
+    // 格式化用户显示名称 (姓名/工号)
+    formatUserLabel(user) {
+      if (!user) return "";
+      const name = user.displayName || "";
+      const no = user.userNo || "";
+      if (name && no) return `${name}/${no}`;
+      return name || no || "";
+    },
+    async fetchIssuedUsers() {
+      try {
+        const medalNo = this.medal ? (this.medal.medalNo || this.medal.id || "") : "";
+        const res = await get('/medal/users', { medalNo: String(medalNo) });
+        if (res) {
+          // 兼容新旧接口结构
+          if (res.allUsers) {
+            return res.issuedUsers || [];
+          } else if (Array.isArray(res)) {
+            return [];
+          }
+        }
+      } catch (err) {
+        console.error(err);
+        this.$message.error('获取用户列表失败');
+      }
+      return [];
+    },
+    async fetchIssueLeftPage(allowRetry = true) {
+      try {
+        const res = await get('/medal/candidates', {
+          page: this.issueLeftPage,
+          pageSize: this.issueLeftPageSize,
+          keyword: this.issueLeftKeyword
+        });
+        if (res && res.list) {
+          this.issueLeftRows = Array.isArray(res.list) ? res.list : [];
+          this.issueLeftTotalCount = Number.isFinite(res.total) ? res.total : 0;
+        } else if (Array.isArray(res)) {
+          this.issueLeftRows = res;
+          this.issueLeftTotalCount = res.length;
+        }
+        const maxPage = Math.max(1, Math.ceil(this.issueLeftTotalCount / this.issueLeftPageSize));
+        if (allowRetry && this.issueLeftPage > maxPage) {
+          this.issueLeftPage = maxPage;
+          await this.fetchIssueLeftPage(false);
+          return;
+        }
+      } catch (err) {
+        console.error(err);
+        this.$message.error('获取待选用户失败');
+      } finally {
+        this.$nextTick(() => {
+          this.restoreIssueLeftPageSelection();
+        });
+      }
+    },
+    // 关闭弹窗时的处理
+    onClose() {
+      this.issueLeftSelected = [];
+      this.issueRightSelected = [];
+      this.issueLeftSelectedMap = {};
+      this.$nextTick(() => {
+        this.$refs.issueLeftTable && this.$refs.issueLeftTable.clearSelection && this.$refs.issueLeftTable.clearSelection();
+        this.$refs.issueRightTable && this.$refs.issueRightTable.clearSelection && this.$refs.issueRightTable.clearSelection();
+      });
+      this.$emit('update:visible', false);
+    },
+    // 点击取消
+    onCancel() {
+      this.$emit('update:visible', false);
+    },
+    // 点击确定，校验并发射 confirm 事件
+    onConfirm() {
+      const medal = this.medal;
+      if (!medal) return;
+      const total = this.issueSelectedUsers.length;
+      // 校验限量勋章的数量限制
+      if (this.limitCount !== -1 && total > this.limitCount) {
+        this.$message({
+          type: "warning",
+          message: `超出发放数量上限（上限：${this.limitCount}）`
+        });
+        return;
+      }
+      
+      this.$emit('confirm', {
+        medal,
+        users: this.issueSelectedUsers
+      });
+    },
+    // 左侧表格选中变化
+    onIssueLeftSelectionChange(list) {
+      if (this.issueLeftRestoringSelection) return;
+      const pageRows = Array.isArray(this.issueLeftPageRows) ? this.issueLeftPageRows : [];
+      const selected = Array.isArray(list) ? list : [];
+      const selectedSet = new Set(selected.map(r => r && r.userNo).filter(Boolean));
+
+      pageRows.forEach(r => {
+        if (!r || !r.userNo) return;
+        if (selectedSet.has(r.userNo)) this.$set(this.issueLeftSelectedMap, r.userNo, r);
+        else this.$delete(this.issueLeftSelectedMap, r.userNo);
+      });
+
+      this.issueLeftSelected = Object.values(this.issueLeftSelectedMap);
+    },
+    isIssueLeftRowSelectable(row) {
+      if (!row || !row.userNo) return false;
+      const selected = Array.isArray(this.issueSelectedUsers) ? this.issueSelectedUsers : [];
+      return !selected.some(u => u && u.userNo === row.userNo);
+    },
+    onIssueLeftNameClick(row) {
+      if (!this.isIssueLeftRowSelectable(row)) return;
+      const table = this.$refs.issueLeftTable;
+      if (!table || !table.toggleRowSelection) return;
+      table.toggleRowSelection(row);
+    },
+    // 右侧表格选中变化
+    onIssueRightSelectionChange(list) {
+      this.issueRightSelected = Array.isArray(list) ? list.slice() : [];
+      const pageRows = Array.isArray(this.issueRightPageRows) ? this.issueRightPageRows : [];
+      const total = pageRows.length;
+      const selectedCount = Array.isArray(list) ? list.length : 0;
+      this.issueRightAllSelected = total > 0 && selectedCount === total;
+      this.issueRightIndeterminate = selectedCount > 0 && selectedCount < total;
+    },
+    // 将左侧选中用户移动到右侧（添加）
+    onIssueMoveToRight() {
+      const selected = Array.isArray(this.issueLeftSelected) ? this.issueLeftSelected : [];
+      if (selected.length === 0) return;
+      
+      // 预先计算添加后的总数
+      const currentCount = this.issueSelectedUsers.length;
+      // 过滤掉已经在右侧的用户，计算实际新增数量
+      const existingIds = new Set(this.issueSelectedUsers.map(u => u.userNo));
+      const newUsers = selected.filter(u => !existingIds.has(u.userNo));
+      
+      if (this.limitCount !== -1 && (currentCount + newUsers.length) > this.limitCount) {
+        this.$message({
+          type: "warning",
+          message: `选择的用户数量超出限制（上限：${this.limitCount}，当前已选：${currentCount}，尝试添加：${newUsers.length}）`
+        });
+        return;
+      }
+
+      const map = new Map((this.issueSelectedUsers || []).map(u => [u.userNo, u]));
+      selected.forEach(u => {
+        if (!u || !u.userNo) return;
+        if (!map.has(u.userNo)) map.set(u.userNo, { ...u });
+      });
+      this.issueSelectedUsers = Array.from(map.values());
+      this.issueLeftSelected = [];
+      this.issueLeftSelectedMap = {};
+      this.$nextTick(() => {
+        this.$refs.issueLeftTable && this.$refs.issueLeftTable.clearSelection && this.$refs.issueLeftTable.clearSelection();
+      });
+      this.fetchIssueLeftPage();
+    },
+    // 将右侧选中用户移动到左侧（移除）
+    onIssueMoveToLeft() {
+      const selected = Array.isArray(this.issueRightSelected) ? this.issueRightSelected : [];
+      if (selected.length === 0) return;
+      const removeSet = new Set(selected.map(u => u.userNo));
+      this.issueSelectedUsers = (this.issueSelectedUsers || []).filter(u => !removeSet.has(u.userNo));
+      this.issueRightSelected = [];
+      this.$nextTick(() => {
+        this.$refs.issueRightTable && this.$refs.issueRightTable.clearSelection && this.$refs.issueRightTable.clearSelection();
+      });
+      this.fetchIssueLeftPage();
+      // 调整分页
+      const maxPage = Math.max(1, Math.ceil(this.issueRightTotal / this.issueRightPageSize));
+      if (this.issueRightPage > maxPage) this.issueRightPage = maxPage;
+    },
+    // 左侧分页变化
+    onIssueLeftPageChange(page) {
+      this.issueLeftPage = page;
+      this.fetchIssueLeftPage();
+      this.$nextTick(() => {
+        this.scrollTableBodyToTop("issueLeftTable");
+      });
+    },
+    restoreIssueLeftPageSelection() {
+      const table = this.$refs.issueLeftTable;
+      if (!table || !table.clearSelection || !table.toggleRowSelection) return;
+      const rows = Array.isArray(this.issueLeftPageRows) ? this.issueLeftPageRows : [];
+
+      this.issueLeftRestoringSelection = true;
+      table.clearSelection();
+      rows.forEach(r => {
+        if (!r || !r.userNo) return;
+        if (this.issueLeftSelectedMap[r.userNo]) table.toggleRowSelection(r, true);
+      });
+      this.issueLeftRestoringSelection = false;
+    },
+    // 右侧分页变化
+    onIssueRightPageChange(page) {
+      this.issueRightPage = page;
+      this.issueRightSelected = [];
+      this.issueRightAllSelected = false;
+      this.issueRightIndeterminate = false;
+      this.$nextTick(() => {
+        this.$refs.issueRightTable && this.$refs.issueRightTable.clearSelection && this.$refs.issueRightTable.clearSelection();
+        this.scrollTableBodyToTop("issueRightTable");
+      });
+    },
+    onIssueRightNameClick(row) {
+      const table = this.$refs.issueRightTable;
+      if (!table || !table.toggleRowSelection) return;
+      table.toggleRowSelection(row);
+    },
+    onToggleRightSelectAll(checked) {
+      const table = this.$refs.issueRightTable;
+      if (!table || !table.clearSelection || !table.toggleRowSelection) return;
+      const rows = Array.isArray(this.issueRightPageRows) ? this.issueRightPageRows : [];
+      table.clearSelection();
+      if (checked) {
+        rows.forEach(r => {
+          if (!r) return;
+          table.toggleRowSelection(r, true);
+        });
+      }
+    },
+    scrollTableBodyToTop(refName) {
+      const table = this.$refs[refName];
+      if (!table) return;
+      const body = table.bodyWrapper || (table.$el && table.$el.querySelector(".el-table__body-wrapper"));
+      if (body && body.scrollTop !== 0) body.scrollTop = 0;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.issue-body {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+.issue-col {
+  flex: 1;
+  min-width: 0;
+}
+.issue-col-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.issue-col-title {
+  font-size: 14px;
+  color: #303133;
+}
+.issue-col-count {
+  font-size: 13px;
+  color: #909399;
+}
+.issue-search {
+  margin-bottom: 10px;
+}
+.issue-transfer {
+  width: 72px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+.issue-pagination {
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+}
+::v-deep .issue-left-table .el-table__header-wrapper .el-checkbox {
+  display: none;
+}
+</style>