vue2server2 1.0.21

package/frontEnd/src/pages/MedalSetting.vue

@@ -0,0 +1,571 @@
+<template>
+  <section class="medal-settings-page">
+    <h1>勋章设置</h1>
+    <p class="desc">展示勋章基础信息，可查看启用状态与基本配置。</p>
+
+    <div class="toolbar">
+      <el-button type="primary" size="mini" @click="onOpenCreate">
+        新增
+      </el-button>
+    </div>
+
+    <el-dialog
+      title="创建"
+      :visible.sync="dialogVisible"
+      width="720px"
+      :close-on-click-modal="false"
+    >
+      <el-form :model="formMedal" label-width="90px" size="small" class="create-form">
+        <el-form-item label="授予主体">
+          <el-select v-model="formMedal.confeSubKno" placeholder="请选择授予主体">
+            <el-option
+              v-for="opt in subjectOptions"
+              :key="opt.value"
+              :label="opt.label"
+              :value="opt.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="勋章名称">
+          <el-input v-model="formMedal.medalName" placeholder="请输入勋章名称" />
+        </el-form-item>
+        <el-form-item label="授予方式">
+          <el-input :value="formatConfeMode('4')" disabled />
+        </el-form-item>
+        <el-form-item label="是否限时">
+          <el-select v-model="formMedal.limitTmFlag" placeholder="请选择">
+            <el-option
+              v-for="opt in limitTimeOptions"
+              :key="opt.value"
+              :label="opt.label"
+              :value="opt.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="formMedal.limitTmFlag === 'Y'" label="限时时长">
+          <div class="inline-group">
+            <el-input-number v-model="formMedal.wearDurat" :min="1" />
+            <el-select v-model="formMedal.tmUnitType" style="margin-left: 8px; width: 120px">
+              <el-option
+                v-for="opt in tmUnitOptions"
+                :key="opt.value"
+                :label="opt.label"
+                :value="opt.value"
+              />
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item label="是否限量">
+          <el-select v-model="formMedal.limitQtyFlag" placeholder="请选择">
+            <el-option
+              v-for="opt in limitQtyOptions"
+              :key="opt.value"
+              :label="opt.label"
+              :value="opt.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="formMedal.limitQtyFlag === 'Y'" label="勋章数量">
+          <el-input-number v-model="formMedal.medalQty" :min="1" />
+        </el-form-item>
+        <el-form-item label="勋章描述">
+          <el-input
+            type="textarea"
+            v-model="formMedal.medalDesc"
+            :rows="3"
+            maxlength="150"
+            show-word-limit
+            placeholder="请输入勋章描述"
+          />
+        </el-form-item>
+        <div class="upload-block">
+          <div class="upload-label">
+            静态勋章
+          </div>
+          <div class="upload-content">
+            <el-upload
+              class="avatar-uploader"
+              action="#"
+              :auto-upload="false"
+              :show-file-list="false"
+              :before-upload="onBeforeUpload"
+            >
+              <el-button size="small" type="primary">选择图片</el-button>
+              <div slot="tip" class="upload-tip">
+                支持上传 PNG、JPG、JPEG 格式文件，文件大小小于 10M
+              </div>
+            </el-upload>
+          </div>
+        </div>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisible = false">取消</el-button>
+        <el-button size="small" type="primary" @click="onSave">
+          保存
+        </el-button>
+      </span>
+    </el-dialog>
+
+    <MedalIssueDialog
+      :visible.sync="issueDialogVisible"
+      :medal="issueCurrentMedal"
+      :limit-count="issueCurrentMedal && issueCurrentMedal.limitQtyFlag === 'Y' ? Number(issueCurrentMedal.medalQty || 0) : -1"
+      @confirm="onIssueConfirm"
+    />
+
+    <el-table
+      ref="medalTable"
+      :key="tableKey"
+      :data="rows"
+      border
+      stripe
+      size="small"
+      style="width: 100%"
+    >
+      <el-table-column
+        v-for="col in columns"
+        :key="col.key || col.prop"
+        :prop="col.prop"
+        :label="col.label"
+        :width="col.width"
+        :min-width="col.minWidth"
+        :align="col.align || 'left'"
+        :header-align="col.headerAlign || col.align || 'left'"
+        :fixed="col.fixed"
+      >
+        <template slot="header">
+          <div class="header-wrapper header-draggable">
+            <span class="header-label">{{ col.label }}</span>
+          </div>
+        </template>
+        <template slot-scope="scope">
+          <span v-if="col.type === 'index'">
+            {{ scope.$index + 1 }}
+          </span>
+          <div v-else-if="col.type === 'icon'" class="medal-icon">
+            <img
+              v-if="scope.row.filePicUrl"
+              :src="scope.row.filePicUrl"
+              alt=""
+            />
+          </div>
+          <span v-else-if="col.type === 'confeMode'">
+            {{ formatConfeMode(scope.row.confeMode) }}
+          </span>
+          <span v-else-if="col.type === 'limitTmFlag'">
+            {{ scope.row.limitTmFlag === "Y" ? "限时" : "不限时" }}
+          </span>
+          <span v-else-if="col.type === 'wearDurat'">
+            <span v-if="scope.row.limitTmFlag === 'Y'">
+              {{ scope.row.wearDurat }}{{ formatTmUnit(scope.row.tmUnitType) }}
+            </span>
+            <span v-else>
+              不限期
+            </span>
+          </span>
+          <span v-else-if="col.type === 'medalQty'">
+            <span v-if="scope.row.limitQtyFlag === 'Y'">
+              {{ scope.row.medalQty }}
+            </span>
+            <span v-else>
+              不限量
+            </span>
+          </span>
+          <span v-else-if="col.type === 'createDate'">
+            {{ formatDate(scope.row.createTm) }}
+          </span>
+          <span v-else-if="col.type === 'updateDate'">
+            {{ formatDate(scope.row.updateTm) }}
+          </span>
+          <span v-else-if="col.type === 'switch'">
+            <el-switch
+              v-model="scope.row.activaFlag"
+              active-value="Y"
+              inactive-value="N"
+              active-text="启用"
+              inactive-text="停用"
+              @change="onToggleActive(scope.row)"
+            />
+          </span>
+          <span v-else-if="col.type === 'actions'">
+            <el-button type="text" size="mini" @click="onPreview(scope.row)">
+              预览
+            </el-button>
+            <el-button
+              type="text"
+              size="mini"
+              :disabled="scope.row.activaFlag !== 'Y'"
+              @click="onOpenIssue(scope.row)"
+            >
+              发放
+            </el-button>
+            <el-button type="text" size="mini" @click="onMore(scope.row)">
+              更多
+            </el-button>
+          </span>
+          <span v-else>
+            {{ scope.row[col.prop] }}
+          </span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </section>
+</template>
+
+<script>
+import Sortable from "sortablejs";
+import { get } from "../utils/request";
+import MedalIssueDialog from "./MedalIssueDialog.vue";
+
+export default {
+  name: "MedalSettingsView",
+  components: {
+    MedalIssueDialog
+  },
+  data() {
+    return {
+      rows: [],
+      columns: [
+        { key: "index", label: "序号", width: 60, align: "center", type: "index" },
+        { key: "medalNo", prop: "medalNo", label: "勋章编号", minWidth: 180 },
+        { key: "icon", label: "勋章图标", width: 90, align: "center", type: "icon" },
+        { key: "medalName", prop: "medalName", label: "勋章名称", minWidth: 140 },
+        { key: "medalObjName", prop: "medalObjName", label: "勋章对象", minWidth: 140 },
+        { key: "confeMode", prop: "confeMode", label: "发放方式", width: 120, align: "center", type: "confeMode" },
+        { key: "limitTmFlag", prop: "limitTmFlag", label: "是否限时", width: 100, align: "center", type: "limitTmFlag" },
+        { key: "wearDurat", prop: "wearDurat", label: "限时时长", width: 120, align: "center", type: "wearDurat" },
+        { key: "medalQty", prop: "medalQty", label: "发放数量", width: 100, align: "center", type: "medalQty" },
+        { key: "issuedQty", prop: "issuedQty", label: "已发数量", width: 100, align: "center" },
+        { key: "createTm", prop: "createTm", label: "创建日期", width: 160, align: "center", type: "createDate" },
+        { key: "updateTm", prop: "updateTm", label: "更新日期", width: 160, align: "center", type: "updateDate" },
+        { key: "activaFlag", prop: "activaFlag", label: "启用/停用", width: 120, align: "center", type: "switch" },
+        { key: "actions", label: "操作", width: 180, align: "center", fixed: "right", type: "actions" }
+      ],
+      headerSortable: null,
+      tableKey: 0,
+      isDestroyed: false,
+      dialogVisible: false,
+      issueDialogVisible: false,
+      issueCurrentMedal: null,
+      issueUserPool: [],
+      issueMedalUserMap: {},
+      issueSelectedUsers: [],
+      issueLeftKeyword: "",
+      issueRightKeyword: "",
+      issueLeftPage: 1,
+      issueRightPage: 1,
+      issueLeftPageSize: 10,
+      issueRightPageSize: 10,
+      issueLeftSelected: [],
+      issueRightSelected: [],
+      formMedal: {
+        confeSubKno: "CU",
+        medalName: "",
+        limitTmFlag: "N",
+        limitQtyFlag: "N",
+        wearDurat: 12,
+        tmUnitType: "D",
+        medalQty: 0,
+        medalDesc: "",
+        filePicUrl: ""
+      },
+      subjectOptions: [
+        { label: "客户经理", value: "CU" }
+      ],
+      limitTimeOptions: [
+        { label: "不限时", value: "N" },
+        { label: "限时", value: "Y" }
+      ],
+      limitQtyOptions: [
+        { label: "不限量", value: "N" },
+        { label: "限量", value: "Y" }
+      ],
+      tmUnitOptions: [
+        { label: "日", value: "D" },
+        { label: "月", value: "M" },
+        { label: "年", value: "Y" }
+      ]
+    };
+  },
+  created() {
+    this.fetchData();
+  },
+  computed: {
+    issueLeftTotal() {
+      return this.issueLeftFiltered.length;
+    },
+    issueRightTotal() {
+      return this.issueRightFiltered.length;
+    },
+    issueLeftFiltered() {
+      const selectedSet = new Set((this.issueSelectedUsers || []).map(u => u.userNo));
+      const keyword = (this.issueLeftKeyword || "").trim();
+      const pool = Array.isArray(this.issueUserPool) ? this.issueUserPool : [];
+      const list = pool.filter(u => !selectedSet.has(u.userNo));
+      if (!keyword) return list;
+      return list.filter(u => this.formatUserLabel(u).includes(keyword));
+    },
+    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() {
+      const start = (this.issueLeftPage - 1) * this.issueLeftPageSize;
+      return this.issueLeftFiltered.slice(start, start + this.issueLeftPageSize);
+    },
+    issueRightPageRows() {
+      const start = (this.issueRightPage - 1) * this.issueRightPageSize;
+      return this.issueRightFiltered.slice(start, start + this.issueRightPageSize);
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initColumnDrag();
+    });
+  },
+  beforeDestroy() {
+    this.isDestroyed = true;
+    if (this.headerSortable && this.headerSortable.destroy) {
+      this.headerSortable.destroy();
+      this.headerSortable = null;
+    }
+  },
+  methods: {
+    fetchData() {
+      get('/medal/list').then(res => {
+        if (res && res.data) {
+          this.rows = res.data;
+        } else if (Array.isArray(res)) {
+           this.rows = res;
+        }
+      }).catch(err => {
+        console.error(err);
+        this.$message.error('获取勋章列表失败');
+      });
+    },
+    onOpenCreate() {
+      this.resetForm();
+      this.dialogVisible = true;
+    },
+    onOpenIssue(row) {
+      if (!row) return;
+      if (row.activaFlag !== "Y") {
+        this.$message({
+          type: "warning",
+          message: "该勋章已停用，无法发放"
+        });
+        return;
+      }
+      this.issueCurrentMedal = row;
+      this.issueDialogVisible = true;
+    },
+    onIssueConfirm(data) {
+      const { medal, users } = data;
+      if (!medal) return;
+      const total = users.length;
+      
+      const key = medal.medalNo || String(medal.id || "");
+      const nextRows = this.rows.map(r => {
+        if ((r.medalNo || String(r.id || "")) !== key) return r;
+        return Object.assign({}, r, { issuedQty: total, updateTm: new Date().toISOString() });
+      });
+      this.rows = nextRows;
+      this.issueDialogVisible = false;
+      this.$message({
+        type: "success",
+        message: `已发放勋章「${medal.medalName || medal.medalNo}」，共 ${total} 人`
+      });
+    },
+    resetForm() {
+      this.formMedal = {
+        confeSubKno: "CU",
+        medalName: "",
+        limitTmFlag: "N",
+        limitQtyFlag: "N",
+        wearDurat: 12,
+        tmUnitType: "D",
+        medalQty: 0,
+        medalDesc: "",
+        filePicUrl: ""
+      };
+    },
+    onBeforeUpload() {
+      this.formMedal.filePicUrl = "";
+      return false;
+    },
+    onSave() {
+      const now = new Date().toISOString();
+      const subject = this.subjectOptions.find(item => item.value === this.formMedal.confeSubKno);
+      const params = {
+        activaFlag: "Y",
+        confeMode: "4",
+        confeSubKno: this.formMedal.confeSubKno,
+        createTm: now,
+        creatorNo: "046083",
+        fileGifName: "",
+        fileGifSize: "",
+        fileGifUrl: "",
+        filePicName: "",
+        filePicSize: "",
+        filePicUrl: this.formMedal.filePicUrl || "",
+        limitQtyFlag: this.formMedal.limitQtyFlag,
+        limitTmFlag: this.formMedal.limitTmFlag,
+        medalDesc: this.formMedal.medalDesc,
+        medalName: this.formMedal.medalName,
+        tmUnitType: this.formMedal.tmUnitType,
+        updateStaffNo: "046083",
+        updateTm: now,
+        medalQty: this.formMedal.limitQtyFlag === "Y" ? this.formMedal.medalQty : 0
+      };
+      console.log("params:", params);
+      const row = {
+        id: Date.now(),
+        ...params,
+        medalObjName: subject ? `授予${subject.label}` : "",
+        issuedQty: 0,
+        wearDurat: this.formMedal.limitTmFlag === "Y" ? this.formMedal.wearDurat : 0
+      };
+      this.rows = this.rows.concat(row);
+      this.dialogVisible = false;
+      this.$message({
+        type: "success",
+        message: "保存成功"
+      });
+    },
+    initColumnDrag() {
+      if (this.isDestroyed) return;
+      if (this.headerSortable && this.headerSortable.destroy) {
+        this.headerSortable.destroy();
+        this.headerSortable = null;
+      }
+      const table = this.$refs.medalTable;
+      if (!table || !table.$el) return;
+      const headerRow = table.$el.querySelector(".el-table__header-wrapper thead tr");
+      if (!headerRow) return;
+      this.headerSortable = Sortable.create(headerRow, {
+        animation: 150,
+        handle: ".header-draggable",
+        draggable: "th",
+        onEnd: (evt) => {
+          const { oldIndex, newIndex } = evt;
+          if (oldIndex == null || newIndex == null) return;
+          if (oldIndex === newIndex) return;
+          const from = oldIndex;
+          const to = newIndex;
+          if (from < 0 || to < 0 || from >= this.columns.length || to >= this.columns.length) return;
+          const list = this.columns.slice();
+          [list[from], list[to]] = [list[to], list[from]];
+          this.columns = list;
+          this.tableKey += 1;
+          this.$nextTick(() => {
+            this.initColumnDrag();
+          });
+        }
+      });
+    },
+    formatConfeMode(value) {
+      if (value === "4") return "手动发放";
+      return value || "";
+    },
+    formatTmUnit(value) {
+      if (value === "D") return "日";
+      if (value === "M") return "月";
+      if (value === "Y") return "年";
+      return "";
+    },
+    formatDate(value) {
+      if (!value) return "";
+      const d = new Date(value);
+      if (Number.isNaN(d.getTime())) return "";
+      const yyyy = d.getFullYear();
+      const mm = String(d.getMonth() + 1).padStart(2, "0");
+      const dd = String(d.getDate()).padStart(2, "0");
+      return `${yyyy}-${mm}-${dd}`;
+    },
+    onToggleActive(row) {
+      const flag = row.activaFlag === "Y" ? "启用" : "停用";
+      this.$message({
+        type: "success",
+        message: `已${flag}勋章「${row.medalName || row.medalNo}」`
+      });
+    },
+    onPreview(row) {
+      this.$alert(
+        `勋章名称：${row.medalName}\n勋章编号：${row.medalNo}`,
+        "勋章预览",
+        {
+          confirmButtonText: "确定"
+        }
+      );
+    },
+    onMore(row) {
+      this.$message({
+        type: "info",
+        message: `更多操作：${row.medalName || row.medalNo}`
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.medal-settings-page {
+  padding: 24px;
+}
+.desc {
+  margin-bottom: 12px;
+  color: #666;
+}
+.toolbar {
+  margin-bottom: 12px;
+}
+.create-form {
+  max-height: 520px;
+  overflow-y: auto;
+}
+.inline-group {
+  display: flex;
+  align-items: center;
+}
+.upload-block {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 12px;
+}
+.upload-label {
+  width: 90px;
+  flex-shrink: 0;
+  padding-top: 4px;
+  color: #606266;
+}
+.upload-content {
+  flex: 1;
+}
+.upload-tip {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #909399;
+}
+.header-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+.header-draggable {
+  cursor: move;
+}
+.header-label {
+  white-space: nowrap;
+}
+.medal-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.medal-icon img {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+}
+</style>