vue2server7 1.0.1 → 2.1.0

package/frontEnd/src/pages/MedalSetting.vue

@@ -1,571 +0,0 @@
-<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>