Merge branch 'feature/3-2迭代'

src/api/operation.js

@@ -43,6 +43,18 @@ let marketingApi = {
   activityCategoryUpdate: {
     method: 'post',
     url: '/operation/activity/category/addOrUpdate'
+  },
+
+  // 节日管理
+  getHolidayCategoryList: '/holidays/category/getList',
+  getPageHolidays: '/holidays/page-holidays',
+  getHolidayDetail: '/holidays/get-holidays',
+  addHoliday: '/holidays/add-holidays',
+  editHoliday: '/holidays/edit-holidays',
+  delHoliday: '/holidays/delete-holidays',
+  saveHolidayCategory: {
+    method: 'post',
+    url: '/holidays/category/addOrUpdate'
   }
 };
 

src/router/routes.js

@@ -39,6 +39,11 @@ export const routes = [
         path: 'activity-config',
         name: '营销活动配置',
         component: _import('activity', 'index')
+      },
+      {
+        path: 'holiday-manage',
+        name: '营销节日管理',
+        component: _import('activity', 'holiday-manage')
       }
     ]
   }

src/views/activity/component/holiday-category-dialog.vue

+<template>
+  <el-dialog custom-class="category-dialog" :visible.sync="dialogVisible" :rules="rules" class="category-dialog-wrap" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
+    <div v-loading="loading">
+      <el-row type="flex" justify="space-between">
+        <h1 class="el-dialog__title">分类管理</h1>
+        <i class="iconfont-components3 icon-cp-close" @click="handleClose"></i>
+      </el-row>
+      <el-form ref="form" :model="list">
+        <draggable tag="ul" :list="list" class="list-group" handle=".handle">
+          <li class="list-group-item" v-for="(item, idx) in list" :key="idx">
+            <el-form-item :prop="idx + '.categoryName'" :rules="rules.categoryName">
+              <!-- <p class="show-name" v-show="!item.isEdit">{{list[idx].categoryName}}</p> -->
+              <el-input v-model="list[idx].categoryName" style="width: 466px" maxlength="8" placeholder="请输入分类名称，不超过8个字"> </el-input>
+            </el-form-item>
+            <div class="btn-wrap" v-if="list.length > 1">
+              <span class="icon-span" @click="onDeleteItem(idx)"><i class="iconfont-components3 icon-cp-DeleteOutlined" /></span>
+              <el-tooltip popper-class="category-dialog-tooltip" effect="dark" content="拖拽排序" placement="top">
+                <i class="iconfont-components3 icon-cp-tuozhuaipaixu handle"></i>
+              </el-tooltip>
+            </div>
+            <div class="btn-wrap" v-else></div>
+          </li>
+        </draggable>
+      </el-form>
+      <el-button type="text" @click="addItem" style="margin-top: 12px"><i class="iconfont-components3 icon-cp-PlusOutlined" /> 添加分类</el-button>
+      <el-row type="flex" justify="end" style="margin-top: 24px">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button type="primary" @click="submit">确 定</el-button>
+      </el-row>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import requestApi from '@/api/operation';
+const { saveHolidayCategory, getHolidayCategoryList } = requestApi;
+import draggable from 'vuedraggable';
+export default {
+  name: 'CategoryDialog',
+  components: {
+    draggable
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const nameValidate = (r, v, c) => {
+      if (!v) c(new Error('请填写分类名称'));
+      if (this.nameMap[v] === this.list.indexOf((el) => el.categoryName === v)) c(new Error(`${v}分类名称重复`));
+      c();
+    };
+    return {
+      dialogVisible: false,
+      loading: false,
+      list: [],
+      nameMap: {},
+      defaultItem: {
+        activityCategoryId: '',
+        categoryName: '',
+        isEdit: true
+      },
+      rules: {
+        categoryName: [
+          {
+            required: true,
+            validator: nameValidate
+          }
+        ]
+      },
+      copyItem: {}
+    };
+  },
+  methods: {
+    handleClose() {
+      this.$nextTick((_) => {
+        this.list = [];
+        this.$emit('update:visible', false);
+      });
+    },
+    async getCategoryList() {
+      this.loading = true;
+      let { result = [] } = await getHolidayCategoryList().finally((_) => (this.loading = false));
+      let nameMap = {};
+      result = result.map((el, idx) => {
+        el.isEdit = false;
+        nameMap[el.categoryName] = idx;
+        return el;
+      });
+      this.nameMap = nameMap;
+      this.list = JSON.parse(JSON.stringify(result));
+    },
+    submit() {
+      this.loading = true;
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          let list = [];
+          list = this.list.map((el, idx) => {
+            el = {
+              categorySort: idx,
+              categoryName: el.categoryName,
+              activityCategoryId: el.activityCategoryId || ''
+            };
+            return el;
+          });
+          saveHolidayCategory(list)
+            .then((res) => {
+              this.$message.success('提交成功');
+              this.handleClose();
+              this.$emit('refresh');
+              this.loading = false;
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        } else {
+          this.loading = false;
+        }
+      });
+    },
+    async onDeleteItem(idx) {
+      // activityGetList
+      if (this.list.length == 1) {
+        return;
+      }
+      if (this.list[idx].hasUse) {
+        return this.$message.error('该分类有活动在引用，不可删除！');
+      }
+      this.list.splice(idx, 1);
+      delete this.nameMap[this.list[idx].categoryName];
+    },
+    addItem() {
+      this.copyItem = {};
+      this.list.push({
+        ...this.defaultItem
+      });
+    }
+  },
+  watch: {
+    visible: {
+      handler(n, o) {
+        this.dialogVisible = n;
+        if (n) {
+          this.getCategoryList();
+        }
+      },
+      immediate: true
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.list-group {
+  max-height: 516px;
+  padding-bottom: 20px;
+  overflow-y: auto;
+}
+
+.list-group-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 10px;
+
+  & + .list-group-item {
+    margin-top: 20px;
+  }
+
+  .el-form-item {
+    margin-bottom: 0;
+
+    .show-name {
+      width: 430px;
+      height: 32px;
+      padding-left: 11px;
+      color: #303133;
+      font-size: 14px;
+      line-height: 32px;
+      background: #f2f3f7;
+      border-radius: 2px;
+      cursor: default;
+    }
+  }
+
+  .icon-span {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      background: #f2f3f7;
+      border-radius: 2px;
+    }
+
+    & + .icon-span {
+      margin-left: 4px;
+    }
+
+    i.iconfont-components3 {
+      color: #303133;
+    }
+  }
+
+  .handle.icon-cp-tuozhuaipaixu {
+    margin-left: 4px;
+
+    &:hover {
+      cursor: move;
+      color: #2f54eb;
+    }
+  }
+}
+</style>
+<style lang="less">
+.category-dialog-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.category-dialog {
+  margin: 0 !important;
+  padding: 0 4px 4px;
+  max-height: 700px;
+
+  .el-dialog__header {
+    display: none;
+  }
+
+  .el-dialog__body {
+    padding-bottom: 0 !important;
+
+    .el-row {
+      margin-bottom: 24px;
+
+      .icon-cp-close {
+        cursor: pointer;
+
+        &:hover {
+          color: #2f54eb;
+        }
+      }
+    }
+  }
+
+  .el-dialog__footer {
+    padding: 20px 0;
+  }
+}
+
+.el-tooltip__popper.category-dialog-tooltip {
+  line-height: 22px;
+  padding: 0 5px;
+  font-size: 12px;
+  transform: translateY(4px);
+
+  .popper__arrow {
+    display: none;
+  }
+}
+</style>

src/views/activity/holiday-manage.vue

+<template>
+  <div style="padding: 20px">
+    <el-row type="flex" justify="space-between">
+      <el-row type="flex" align="middle" style="margin-right: 10px">
+        <el-input @change="loadData" placeholder="请输入节日名称" prefix-icon="el-icon-search" v-model="searchParams.name" clearable style="width: 260px; margin-right: 10px"> </el-input>
+
+        <el-select v-model="searchParams.categoryCode" clearable placeholder="全部分类" @change="loadData">
+          <el-option v-for="item in categoryList" :key="item.activityCategoryId" :label="item.categoryName" :value="item.activityCategoryId"> </el-option>
+        </el-select>
+      </el-row>
+      <el-row type="flex" align="middle">
+        <el-button @click="categoryManage">分类管理</el-button>
+        <el-button type="primary" @click="addHoliday()">新增节日</el-button>
+      </el-row>
+    </el-row>
+
+    <el-table :data="list" style="margin-top: 20px" v-loading="loading">
+      <el-table-column label="节日分类" min-width="200px" prop="categoryName"> </el-table-column>
+      <el-table-column label="节日名称" min-width="200px" prop="name"> </el-table-column>
+      <el-table-column label="节日日期" min-width="200px" prop="holidaysDate"> </el-table-column>
+      <el-table-column label="排序号" min-width="200px" prop="sort"> </el-table-column>
+
+      <el-table-column label="添加时间" min-width="220px">
+        <template slot-scope="{ row }">
+          {{ row.updateTime | formatDate }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" min-width="110px">
+        <template slot-scope="{ row }">
+          <el-row type="flex">
+            <el-button type="text" @click="edit(row)">编辑</el-button>
+            <el-button type="text" @click="del(row)">删除</el-button>
+          </el-row>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-row type="flex" justify="end" v-if="totalCount > 0">
+      <el-pagination @size-change="doSizeChange" @current-change="doCurrentChange" background="#2F54EB" :current-page="searchParams.pageNum" :page-sizes="[20, 30, 40, 50]" :page-size="searchParams.pageSize" layout="total, sizes, prev, pager, next" :total="totalCount"> </el-pagination>
+    </el-row>
+
+    <holiday-category-dialog :visible.sync="holidayCategoryDialogVisible" @refresh="getCategoryList" v-if="holidayCategoryDialogVisible"></holiday-category-dialog>
+
+    <holiday-dialog :visible.sync="holidayDialogVisible" @change="loadData" :data.sync="editItem"></holiday-dialog>
+  </div>
+</template>
+
+<script>
+import fetch from '@/api/operation.js';
+import util from '@/filters/index.js';
+const { formatDate2 } = util;
+const { getPageHolidays, delHoliday, getHolidayCategoryList,getHolidayDetail } = fetch;
+import holidayCategoryDialog from './component/holiday-category-dialog.vue';
+
+import holidayDialog from './component/holiday-dialog.vue';
+export default {
+  name: 'FeeRuleManage',
+  components: {
+    holidayCategoryDialog,
+    holidayDialog
+  },
+  data() {
+    return {
+      searchParams: {
+        pageNum: 1,
+        pageSize: 20,
+        name: '',
+        categoryCode: ''
+      },
+      categoryList: [],
+
+      list: [],
+      totalCount: 0,
+      holidayCategoryDialogVisible: false,
+      holidayDialogVisible: false
+    };
+  },
+  created() {
+    this.loadData();
+    this.getCategoryList();
+  },
+  methods: {
+    getCategoryList() {
+      getHolidayCategoryList().then((res) => {
+        let result = res.result || [];
+        this.categoryList = result;
+      });
+    },
+    doSizeChange(event) {
+      this.searchParams.pageSize = event;
+      this.loadData();
+    },
+    doCurrentChange(event) {
+      this.searchParams.pageNum = event;
+      this.loadData();
+    },
+    loadData() {
+      getPageHolidays(this.searchParams).then((res) => {
+        let result = res.result;
+        let list = result.result || [];
+        let totalCount = result.totalCount;
+        this.list = list;
+        this.totalCount = totalCount;
+      });
+    },
+    del(item) {
+      this.$confirm('删除后不可恢复，是否继续删除？', '删除提示', {
+        distinguishCancelAndClose: true,
+        type: 'warning',
+        confirmButtonText: '删除',
+        cancelButtonText: '取消'
+      })
+        .then(() => {
+          return delHoliday({
+            holidaysId: item.holidaysId
+          });
+        })
+        .then(() => {
+          this.getCategoryList();
+          this.loadData();
+        });
+    },
+    async edit(item){
+      let detail = await getHolidayDetail({
+        holidaysId: item.holidaysId || ''
+      });
+      console.log("detail----->",detail.result);
+      this.holidayDialogVisible = true;
+      this.editItem = detail.result;
+    },
+    addHoliday(){
+      this.holidayDialogVisible = true;
+      this.editItem = {};
+    },
+    categoryManage() {
+      this.holidayCategoryDialogVisible = true;
+    }
+  },
+  filters: {
+    formatDate: formatDate2,
+    filterFee(value) {
+      if (value === null || value === undefined) {
+        return '--';
+      }
+      return value;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>