peko-admin-web/src/views/medal/MedalRecord.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>用户平台ID</span>
      <el-input
        v-model="inquire.userId"
        placeholder=""
        class="input"
      ></el-input>
    </div>
    <!-- 查询按钮 -->
    <el-button class="primary" type="primary" @click="getData()">
      查询
    </el-button>
    <el-button class="primary" type="primary" @click="grantDialog = true">
      发放勋章
    </el-button>

    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%; margin-top: 25px"
    >
      <el-table-column prop="createTime" align="center" label="发放时间" />
      <el-table-column prop="source" align="center" label="发放渠道">
        <template v-slot="scope">{{
          scope.row.source == 1 ? "管理后台" : scope.row.source
        }}</template>
      </el-table-column>
      <el-table-column prop="id" align="center" label="发放勋章ID" />
      <el-table-column prop="medalName" align="center" label="勋章名称" />
      <el-table-column align="center" prop="x" 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="cover"
            preview-teleported="true"
            hide-on-click-modal="true"
          />
        </template>
      </el-table-column>
      <el-table-column prop="x" align="center" label="生效天数">
        <template v-slot="scope">{{ scope.row.days }}</template>
      </el-table-column>
      <el-table-column prop="x" align="center" label="备注">
        <template v-slot="scope">{{
          scope.row.remark == "" ? "-" : scope.row.remark
        }}</template>
      </el-table-column>
      <el-table-column prop="x" align="center" label="状态">
        <template v-slot="scope">{{
          scope.row.status == 1
            ? "生效中"
            : scope.row.status == 0
            ? "已失效"
            : "撤销"
        }}</template>
      </el-table-column>
      <el-table-column prop="erbanNo" align="center" label="发放对象平台号" />
      <el-table-column prop="nick" align="center" label="发放对象昵称" />
      <el-table-column
        prop="partitionName"
        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"
            :disabled="scope.row.status <= 0 ? true : false"
          >
            撤销
          </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="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-select filterable v-model="grantObj.value" placeholder="请选择">
          <el-option
            v-for="item in grantObj.options"
            :key="item.id"
            :label="item.name"
            :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
          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>

    <!-- 二次确认弹窗 -->
    <el-dialog
      destroy-on-close
      v-model="delDialog"
      title="提示"
      width="30%"
      center
    >
      <span> 确定要撤销吗?</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="delDialog = false">取消</el-button>
          <el-button type="primary" @click="delClick()"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import {
  medalRecordPage,
  listAll,
  medalSend,
  rollback,
} from "@/api/medal/medal";
// @ts-ignore
import { dateFormat } from "@/utils/system-helper";
// @ts-ignore
import { ElMessage } from "element-plus";
export default {
  name: "MedalRecord",
  data() {
    return {
      loading: false,
      //查询所需条件对象
      inquire: {
        id: "",
        userId: "",
      },
      // 表格
      tableData: [],
      // 分页
      total: 10,
      currentPage: 1,
      pageSize: 10,
      // 发放弹窗
      grantDialog: false,
      grantObj: {
        value: "",
        options: [],
        userId: "",
        days: "",
        desc: "",
      },
      // 撤销
      delDialog: false,
      delObj: {},
    };
  },
  created() {
    listAll().then((res) => {
      if (res.code == 200) {
        this.grantObj.options = res.data;
        this.getData();
      } else {
        ElMessage({
          showClose: true,
          message: res.message,
          type: "error",
        });
      }
    });
  },
  methods: {
    // 查询接口
    getData() {
      this.loading = true;
      medalRecordPage({
        medalId: this.inquire.id,
        erbanNo: this.inquire.userId,
        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",
          });
        }
      });
    },
    // 确认发放
    grantOut() {
      medalSend({
        days: this.grantObj.days,
        erbanNoStr: this.grantObj.userId,
        medalId: this.grantObj.value,
        remark: this.grantObj.desc,
      }).then((res) => {
        if (res.code == 200) {
          ElMessage({
            showClose: true,
            message: res.message || "发放成功",
            type: "success",
          });
          this.grantDialog = false;
          this.getData();
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    // 撤销按钮
    eidFun(val) {
      this.delObj = val;
      this.delDialog = true;
    },
    // 确认撤销按钮
    delClick() {
      console.log(this.delObj);
      rollback({ recordId: this.delObj.id }).then((res) => {
        if (res.code == 200) {
          ElMessage({
            showClose: true,
            message: res.message || "撤销成功",
            type: "success",
          });
          this.getData();
          this.delDialog = false;
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    // 分页导航
    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>