TienChin 活动管理-活动列表展示

后端

ActivityVO

/**
 * @author BNTang
 * @version 1.0
 * @description 活动管理VO
 * @since 2023-23-05
 **/
public class ActivityVO extends BaseEntity {
    /**
     * 活动ID
     */
    private Integer activityId;

    /**
     * 活动名称
     */
    private String activityName;

    /**
     * 渠道ID
     */
    private Integer channelId;

    /**
     * 渠道名称
     */
    private String channelName;

    /**
     * 活动简介
     */
    private String activityInfo;

    /**
     * 活动类型，1.折扣券、2.代金券
     */
    private Integer activityType;

    /**
     * 活动状态，0.表示禁用、1.表示正常
     */
    private Integer activityStatus;

    /**
     * 折扣券
     */
    private Double discount;

    /**
     * 代金券
     */
    private Double voucher;

    /**
     * 活动开始时间
     */
    private LocalDateTime beginTime;

    /**
     * 活动结束时间
     */
    private LocalDateTime endTime;

    /**
     * 删除标志（0代表存在 2代表删除）
     */
    private String delFlag;

    // Get Set 方法略
}

更改 Activity 折扣券，代金券的数据类型：

/**
 * 折扣券
 */
private Double discount;

/**
 * 代金券
 */
private Double voucher;

ActivityController

/**
 * <p>
 * 活动管理表 前端控制器
 * </p>
 *
 * @author BNTang
 * @since 2023-09-05
 */
@RestController
@RequestMapping("/tienchin/activity")
public class ActivityController extends BaseController {
    @Resource
    private IActivityService iActivityService;

    @PreAuthorize("hasPermission('tienchin:activity:list')")
    @GetMapping("/list")
    TableDataInfo list() {
        startPage();
        List<ActivityVO> activityList = iActivityService.selectActivityList();
        return getDataTable(activityList);
    }
}

插入测试数据

INSERT INTO tienchin_activity (activity_id, activity_name, channel_id, activity_info, activity_type, activity_status, discount, voucher, begin_time, end_time, remark, create_by, update_by, create_time, update_time, del_flag) VALUES (1, 'aaa', 7, '小红书推广', 1, 1, 8, null, '2023-09-05 23:53:09', '2023-11-05 23:53:17', null, null, null, null, '2023-09-05 23:53:22', '0');

IActivityService

/**
 * <p>
 * 活动管理表 服务类
 * </p>
 *
 * @author BNTang
 * @since 2023-09-05
 */
public interface IActivityService extends IService<Activity> {

    /**
     * 查询活动列表
     *
     * @return 活动列表
     */
    List<ActivityVO> selectActivityList();
}

ActivityServiceImpl

/**
 * <p>
 * 活动管理表 服务实现类
 * </p>
 *
 * @author BNTang
 * @since 2023-09-05
 */
@Service
public class ActivityServiceImpl
        extends ServiceImpl<ActivityMapper, Activity>
        implements IActivityService {

    @Resource
    private ActivityMapper activityMapper;

    @Override
    public List<ActivityVO> selectActivityList() {
        return activityMapper.selectActivityList();
    }
}

ActivityMapper

/**
 * <p>
 * 活动管理表 Mapper 接口
 * </p>
 *
 * @author BNTang
 * @since 2023-09-05
 */
public interface ActivityMapper extends BaseMapper<Activity> {

    /**
     * 查询活动列表
     *
     * @return 活动列表
     */
    List<ActivityVO> selectActivityList();
}

ActivityMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="top.it6666.activity.mapper.ActivityMapper">
    <select id="selectActivityList" resultType="top.it6666.activity.entity.vo.ActivityVO">
        SELECT ta.*, tc.channel_name
        FROM tienchin_activity ta,
             tienchin_channel tc
        WHERE ta.channel_id = tc.channel_id
          AND ta.del_flag = 0
    </select>
</mapper>

前端

activity.js

import request from '@/utils/request'

/**
 * 查询活动列表
 * @param query 查询条件参数
 * @returns {*} 查询结果
 */
export function listActivity(query) {
    return request({
        url: '/tienchin/activity/list',
        method: 'get',
        params: query
    })
}

// 查询活动详细
export function getActivity(activityId) {
    return request({
        url: '/tienchin/activity/' + activityId,
        method: 'get'
    })
}

// 新增活动
export function addActivity(data) {
    return request({
        url: '/tienchin/activity',
        method: 'post',
        data: data
    })
}

// 修改活动
export function updateActivity(data) {
    return request({
        url: '/tienchin/activity',
        method: 'put',
        data: data
    })
}

// 删除活动
export function delActivity(activityIds) {
    return request({
        url: '/tienchin/activity/' + activityIds,
        method: 'delete'
    })
}

index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="岗位编码" prop="postCode">
        <el-input
            v-model="queryParams.postCode"
            placeholder="请输入岗位编码"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="岗位名称" prop="postName">
        <el-input
            v-model="queryParams.postName"
            placeholder="请输入岗位名称"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="岗位状态" clearable>
          <el-option
              v-for="dict in sys_normal_disable"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['system:post:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="success"
            plain
            icon="Edit"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['system:post:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['system:post:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['system:post:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="activityList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="活动编号" align="center" prop="activityId"/>
      <el-table-column label="活动名称" align="center" prop="activityName"/>
      <el-table-column label="渠道名称" align="center" prop="channelName"/>
      <el-table-column label="活动简介" :show-overflow-tooltip="true" align="center" prop="activityInfo"/>
      <el-table-column label="活动类型" align="center">
        <template #default="scope">
          <dict-tag :options="activity_type" :value="scope.row.activityType"/>
        </template>
      </el-table-column>
      <el-table-column label="活动明细" align="center">
        <template #default="scope">
          <div v-if="scope.row.activityType === 1">
            折扣券/{{ scope.row.discount }}折
          </div>
          <div v-else>
            代金券/{{ scope.row.voucher }}元
          </div>
        </template>
      </el-table-column>
      <el-table-column label="活动状态" align="center">
        <template #default="scope">
          <dict-tag :options="activity_status" :value="scope.row.activityStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="活动起始时间" align="center" prop="beginTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.beginTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="活动结束时间" align="center" prop="endTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.endTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
        <template #default="scope">
          <el-button
              type="text"
              icon="Edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:post:edit']"
          >修改
          </el-button>
          <el-button
              type="text"
              icon="Delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:post:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="postRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="岗位名称" prop="postName">
          <el-input v-model="form.postName" placeholder="请输入岗位名称"/>
        </el-form-item>
        <el-form-item label="岗位编码" prop="postCode">
          <el-input v-model="form.postCode" placeholder="请输入编码名称"/>
        </el-form-item>
        <el-form-item label="岗位顺序" prop="postSort">
          <el-input-number v-model="form.postSort" controls-position="right" :min="0"/>
        </el-form-item>
        <el-form-item label="岗位状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
                v-for="dict in sys_normal_disable"
                :key="dict.value"
                :label="dict.value"
            >{{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Activity">
import {listPost, addPost, delPost, getPost, updatePost} from "@/api/system/post";
import {listActivity} from "@/api/tienchin/activity";

const {proxy} = getCurrentInstance();
const {
  sys_normal_disable,
  activity_type,
  activity_status
} = proxy.useDict("sys_normal_disable", 'activity_type', 'activity_status');

const activityList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    postCode: undefined,
    postName: undefined,
    status: undefined
  },
  rules: {
    postName: [{required: true, message: "岗位名称不能为空", trigger: "blur"}],
    postCode: [{required: true, message: "岗位编码不能为空", trigger: "blur"}],
    postSort: [{required: true, message: "岗位顺序不能为空", trigger: "blur"}],
  }
});

const {queryParams, form, rules} = toRefs(data);

/** 查询岗位列表 */
function getList() {
  loading.value = true;
  listActivity(queryParams.value).then(response => {
    activityList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}

/** 表单重置 */
function reset() {
  form.value = {
    postId: undefined,
    postCode: undefined,
    postName: undefined,
    postSort: 0,
    status: "0",
    remark: undefined
  };
  proxy.resetForm("postRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.postId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加岗位";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const postId = row.postId || ids.value;
  getPost(postId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改岗位";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["postRef"].validate(valid => {
    if (valid) {
      if (form.value.postId != undefined) {
        updatePost(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addPost(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const postIds = row.postId || ids.value;
  proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function () {
    return delPost(postIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {
  });
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download("system/post/export", {
    ...queryParams.value
  }, `post_${new Date().getTime()}.xlsx`);
}

getList();
</script>