peko-admin-web/src/views/medal/MedalInfo.vue

<template>
  <div class="box">
    <!-- 查询 -->
    <div class="inquire">
      <span>勋章ID</span>
      <el-input v-model="inquire.id" placeholder="" class="input"></el-input>
    </div>
    <div class="inquire">
      <span>勋章昵称</span>
      <el-input v-model="inquire.nick" placeholder="" class="input"></el-input>
    </div>
    <div class="inquire">
      <span class="demonstration">地区</span>
      <el-select filterable v-model="inquire.partitionId" placeholder="请选择">
        <el-option
          v-for="item in inquire.options"
          :key="item.id"
          :label="item.desc"
          :value="item.id"
        ></el-option>
      </el-select>
    </div>
    <!-- 查询按钮 -->
    <el-button class="primary" type="primary" @click="getData()">
      查询
    </el-button>
    <el-button class="primary" type="primary" @click="add()"> 新增 </el-button>

    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%; margin-top: 25px"
    >
      <el-table-column prop="id" align="center" label="勋章ID" />
      <el-table-column prop="partitionFlag" align="center" label="地区">
        <template v-slot="scope">{{
          partitionFlagFun(scope.row.partitionFlag, 1)
        }}</template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="勋章名称-华语区">
        <template v-slot="scope">{{ JSON.parse(scope.row.name).zh }}</template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="勋章名称-英语区">
        <template v-slot="scope">{{ JSON.parse(scope.row.name).en }}</template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="勋章名称-阿语区">
        <template v-slot="scope">{{ JSON.parse(scope.row.name).ar }}</template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="勋章名称-土耳其区">
        <template v-slot="scope">{{ JSON.parse(scope.row.name).tr }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="picUrl"
        label="勋章图片"
        width="120"
      >
        <template v-slot="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.picUrl"
            :zoom-rate="1.1"
            :preview-src-list="scope.row.picUrl"
            fit="scale-down"
            preview-teleported="true"
            hide-on-click-modal="true"
          />
        </template>
      </el-table-column>
      <el-table-column prop="enable" align="center" label="状态">
        <template v-slot="scope">{{
          scope.row.enable ? "生效" : "不生效"
        }}</template>
      </el-table-column>
      <el-table-column prop="createTime" align="center" label="添加时间" />
      <el-table-column align="center" label="操作" width="220">
        <template v-slot="scope">
          <el-button
            @click="eidFun(scope.row)"
            class="primary"
            type="primary"
            size="default"
          >
            编辑
          </el-button>
          <el-button
            @click="grantFun(scope.row)"
            class="primary"
            type="primary"
            size="default"
            :disabled="!scope.row.enable"
          >
            发放
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="margin-top: 10px"
      class="paginationClass"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
      layout="sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 新增&编辑弹窗 -->
    <el-dialog
      destroy-on-close
      class="pub"
      v-model="controlsDialog"
      :title="controlsTitle"
      width="32%"
      center
    >
      <!-- 地区 -->
      <div style="margin-bottom: 25px; margin-top: 10px; display: flex">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >地区</span
        >
        <el-select
          multiple
          filterable
          v-model="controlsObj.value"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in controlsObj.options"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>

      <!-- 勋章名称-华语 -->
      <div style="margin-bottom: 25px; margin-top: 10px; display: flex">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >勋章名称-华语</span
        >
        <el-input
          v-model="controlsObj.nickZh"
          placeholder=""
          class="input"
        ></el-input>
      </div>

      <!-- 勋章名称-英语 -->
      <div style="margin-bottom: 25px; margin-top: 10px; display: flex">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >勋章名称-英语</span
        >
        <el-input
          v-model="controlsObj.nickEn"
          placeholder=""
          class="input"
        ></el-input>
      </div>

      <!-- 勋章名称-阿语 -->
      <div style="margin-bottom: 25px; margin-top: 10px; display: flex">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >勋章名称-阿语</span
        >
        <el-input
          v-model="controlsObj.nickAr"
          placeholder=""
          class="input"
        ></el-input>
      </div>
      <!-- 勋章名称-土耳其 -->
      <div style="margin-bottom: 25px; margin-top: 10px; display: flex">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >勋章名称-土耳其</span
        >
        <el-input
          v-model="controlsObj.nickTr"
          placeholder=""
          class="input"
        ></el-input>
      </div>

      <!-- 勋章图片 -->
      <div style="margin-bottom: 25px; margin-top: 10px; display: flex">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >勋章图片</span
        >
        <el-upload
          class="avatar-uploader"
          action="/admin/tencent/cos/upload/file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :on-error="handleAvatarError"
        >
          <img :src="controlsObj.imageUrl1" class="avatar" />
        </el-upload>
      </div>

      <!-- 状态 -->
      <div style="margin-bottom: 25px; margin-top: 10px; display: flex">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >状态</span
        >
        <el-select filterable v-model="controlsObj.value2" placeholder="请选择">
          <el-option
            v-for="item in controlsObj.options2"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>

      <!-- 弹窗按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="controlsDialog = false">取消</el-button>
          <el-button type="primary" @click="controlsDialogOut()">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 发放勋章弹窗 -->
    <el-dialog
      destroy-on-close
      class="pub"
      v-model="grantDialog"
      title="发放勋章"
      width="32%"
      center
    >
      <!-- 勋章名称 -->
      <div style="margin-bottom: 25px; margin-top: 10px; display: flex">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >勋章名称</span
        >
        <el-input
          v-model="grantObj.nick"
          placeholder="默认展示的是中文勋章名称"
          class="input"
          disabled
        ></el-input>
      </div>

      <!-- 发放对象平台号 -->
      <div style="margin-bottom: 25px; margin-top: 10px; display: flex">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >发放对象平台号</span
        >
        <el-input
          type="textarea"
          :rows="2"
          v-model="grantObj.userId"
          placeholder="多个平台号用英文“,”号分开分隔"
          class="input"
        ></el-input>
      </div>

      <!-- 发放天数 -->
      <div style="margin-bottom: 25px; margin-top: 10px; display: flex">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >发放天数</span
        >
        <el-input
          v-model="grantObj.days"
          placeholder="输入天数，不输入则视为无限制"
          class="input"
        ></el-input>
      </div>

      <!-- 备注 -->
      <div style="margin-bottom: 25px; margin-top: 10px; display: flex">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >备注</span
        >
        <el-input
          v-model="grantObj.desc"
          placeholder=""
          class="input"
        ></el-input>
      </div>

      <!-- 弹窗按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="grantDialog = false">取消</el-button>
          <el-button type="primary" @click="grantOut()"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import {
  listPartitionInfo,
  medalPage,
  medalSave,
  medalSend,
} from "@/api/medal/medal";
// @ts-ignore
import { dateFormat } from "@/utils/system-helper";
// @ts-ignore
import { ElMessage } from "element-plus";
export default {
  name: "MedalInfo",
  data() {
    return {
      loading: false,
      //查询所需条件对象
      inquire: {
        id: "",
        nick: "",
        partitionId: "",
      },
      // 表格
      tableData: [],
      // 分页
      total: 10,
      currentPage: 1,
      pageSize: 10,
      // 操作弹窗
      controlsDialog: false,
      controlsTitle: "新增&编辑",
      controlsType: 1,
      controlsObj: {
        value: [],
        options: [],
        nickZh: "",
        nickEn: "",
        nickAr: "",
        nickTr: "",
        imageUrl1: "",
        value2: "",
        options2: [
          {
            desc: "生效",
            id: true,
          },
          {
            desc: "不生效",
            id: false,
          },
        ],
        id: "",
      },
      // 发放弹窗
      grantDialog: false,
      grantObj: {
        nick: "",
        userId: "",
        days: "",
        desc: "",
      },
      grantObjNew: {},
    };
  },
  created() {
    listPartitionInfo().then((res) => {
      this.inquire.options = res.data;
      this.inquire.options.push({
        desc: "全部",
        id: "",
      });
      listPartitionInfo().then((res) => {
        this.controlsObj.options = res.data;
        this.getData();
      });
    });
  },
  methods: {
    // 查询接口
    getData() {
      this.loading = true;
      medalPage({
        id: this.inquire.id,
        name: this.inquire.nick,
        partitionId: this.inquire.partitionId,
        page: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code == 200) {
          this.total = res.data.total;
          this.tableData = res.data.records;
          this.loading = false;
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    // 添加
    add() {
      this.controlsTitle = "新增";
      this.controlsType = 1;
      this.controlsObj.value = [];
      this.controlsObj.nickZh = "";
      this.controlsObj.nickEn = "";
      this.controlsObj.nickAr = "";
      this.controlsObj.nickTr = "";
      this.controlsObj.imageUrl1 = "";
      this.controlsObj.value2 = "";
      this.controlsDialog = true;
    },
    // 编辑
    eidFun(val) {
      this.controlsTitle = "编辑";
      this.controlsType = 2;
      this.controlsObj.value = this.partitionFlagFun(val.partitionFlag, 2);
      this.controlsObj.nickZh = JSON.parse(val.name).zh;
      this.controlsObj.nickEn = JSON.parse(val.name).en;
      this.controlsObj.nickAr = JSON.parse(val.name).ar;
      this.controlsObj.nickTr = JSON.parse(val.name).tr;
      this.controlsObj.imageUrl1 = val.picUrl;
      this.controlsObj.value2 = val.enable;
      this.controlsObj.id = val.id;
      this.controlsDialog = true;
    },
    // 确认保存按钮
    controlsDialogOut() {
      if (this.controlsType == 1) {
        // 新增
        var obj = {};
        var partitionFlagVal = 0;
        console.log(this.controlsObj.value);
        console.log(this.controlsObj.options);
        this.controlsObj.value.forEach((res, i) => {
          partitionFlagVal |= this.controlsObj.options[i].id;
        });
        obj.partitionFlag = partitionFlagVal;
        obj.name = JSON.stringify({
          zh: this.controlsObj.nickZh,
          en: this.controlsObj.nickEn,
          ar: this.controlsObj.nickAr,
          tr: this.controlsObj.nickTr,
        });
        obj.picUrl = this.controlsObj.imageUrl1;
        obj.enable = this.controlsObj.value2;
        console.log(obj);
        medalSave(obj).then((res) => {
          if (res.code == 200) {
            this.getData();
            this.controlsDialog = false;
          } else {
            ElMessage({
              showClose: true,
              message: res.message,
              type: "error",
            });
          }
        });
      } else {
        // 编辑
        var obj1 = {};
        var partitionFlagVal1 = 0;
        this.controlsObj.value.forEach((res, i) => {
          partitionFlagVal1 += res;
        });
        obj1.partitionFlag = partitionFlagVal1;
        obj1.name = JSON.stringify({
          zh: this.controlsObj.nickZh,
          en: this.controlsObj.nickEn,
          ar: this.controlsObj.nickAr,
          tr: this.controlsObj.nickTr,
        });
        obj1.picUrl = this.controlsObj.imageUrl1;
        obj1.enable = this.controlsObj.value2;
        obj1.id = this.controlsObj.id;
        console.log(1111111111, this.controlsObj.value);
        console.log(this.controlsObj.options);
        console.log(obj1);
        medalSave(obj1).then((res) => {
          if (res.code == 200) {
            this.getData();
            this.controlsDialog = false;
          } else {
            ElMessage({
              showClose: true,
              message: res.message,
              type: "error",
            });
          }
        });
      }
    },
    //发放按钮
    grantFun(val) {
      this.grantObjNew = val;
      this.grantObj.nick = JSON.parse(val.name).zh;
      this.grantDialog = true;
    },
    // 确认发放
    grantOut() {
      medalSend({
        days: this.grantObj.days,
        erbanNoStr: this.grantObj.userId,
        medalId: this.grantObjNew.id,
        remark: this.grantObj.desc,
      }).then((res) => {
        if (res.code == 200) {
          ElMessage({
            showClose: true,
            message: res.message || "发放成功",
            type: "success",
          });
          this.grantDialog = false;
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    partitionFlagFun(num, type) {
      //1 2 4
      var val = 0;
      if (type == 2) {
        if (num == 0 || num == 15) {
          val = [1, 2, 4, 8];
        }
        if (num == 0 || num == 15) {
          val = [1, 2, 4, 8];
        } else if (num == 1) {
          val = [1];
        } else if (num == 3) {
          val = [1, 2];
        } else if (num == 7) {
          val = [1, 2, 4];
        } else if (num == 2) {
          val = [2];
        } else if (num == 6) {
          val = [2, 4];
        } else if (num == 14) {
          val = [2, 4, 8];
        } else if (num == 4) {
          val = [4];
        } else if (num == 12) {
          val = [4, 8];
        } else if (num == 8) {
          val = [8];
        }
      } else {
        if (num == 0 || num == 15) {
          val = "英语区、阿语区、华语区、土耳其区";
        } else if (num == 1) {
          val = "英语区";
        } else if (num == 3) {
          val = "英语区、阿语区";
        } else if (num == 7) {
          val = "英语区、阿语区、华语区";
        } else if (num == 2) {
          val = "阿语区";
        } else if (num == 6) {
          val = "阿语区、华语区";
        } else if (num == 14) {
          val = "阿语区、华语区、土耳其区";
        } else if (num == 4) {
          val = "华语区";
        } else if (num == 12) {
          val = "华语区、土耳其区";
        } else if (num == 8) {
          val = "土耳其区";
        }
      }
      return val;
    },
    beforeAvatarUpload() {
      ElMessage({
        showClose: true,
        message: "上传中~",
        type: "warning",
      });
    },
    handleAvatarError() {
      ElMessage({
        showClose: true,
        message: "上传失败！",
        type: "error",
      });
    },
    handleAvatarSuccess(res, file) {
      console.log(file);
      this.controlsObj.imageUrl1 = file.response.data;
      ElMessage({
        showClose: true,
        message: "上传成功！",
        type: "success",
      });
    },
    // 分页导航
    handleSizeChange() {
      this.getData();
    },
    handleCurrentChange() {
      this.getData();
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  padding-top: 20px;
  background: #ecf0f5;
  .inquire {
    display: inline-block;
    margin-right: 20px;
    span {
      margin-right: 10px;
    }
    .input {
      width: 180px;
      margin-right: 10px;
    }
  }
  .dialogTableVisibleBut {
    display: block;
    margin: 30px 0 0 830px;
  }
  .paginationClass {
    margin: 15px 0 5px 0px;
  }
}
</style>