会员信息界面

src/main.js

@@ -19,7 +19,7 @@ import './assets/icons' // icon
 import './permission' // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
-import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+import { parseTime, resetForm, addDateRange, addDateRange2, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
@@ -54,6 +54,8 @@ Vue.prototype.selectDictLabel = selectDictLabel
 Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
+Vue.prototype.addDateRange2 = addDateRange2
+
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag)

src/utils/DateUtil.js

@@ -0,0 +1,221 @@
+/**
+ * Created by lcx47996 on 2017/12/25.
+ */
+
+export function dateFormat(date, format) {
+  if (!date || date === 0) {
+    return ''
+  }
+  if (!(date instanceof Date)) {
+    date = new Date(date)
+    if (date.toString() === 'Invalid Date') {
+      return '无效时间戳'
+    }
+  }
+  format = format || 'yyyy-MM-dd hh:mm:ss'
+  const o = {
+    'M+': date.getMonth() + 1, // 月份
+    'd+': date.getDate(), // 日
+    'h+': date.getHours(), // 小时
+    'm+': date.getMinutes(), // 分
+    's+': date.getSeconds(), // 秒
+    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
+    'S': date.getMilliseconds() // 毫秒
+  };
+  if (/(y+)/.test(format)) {
+    format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+  }
+  for (const k in o) {
+    if (new RegExp('(' + k + ')').test(format)) {
+      format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
+    }
+  }
+  return format;
+}
+
+function getAfterDate(after) {
+  var dd = new Date();
+  dd.setDate(dd.getDate() + after);// 获取AddDayCount天后的日期
+  var y = dd.getFullYear();
+  var m = dd.getMonth() + 1;// 获取当前月份的日期
+  var d = dd.getDate();
+  return y + '-' + m + '-' + d;
+}
+
+function getAfterDateReturnDate(datetime, after) {
+  if (!(datetime.type instanceof Date)) {
+    return datetime
+  }
+  var r = new Date(datetime.getTime())
+  r.setDate(datetime.getDate() + after);// 获取AddDayCount天后的日期
+  return r;
+}
+
+function getAfterHourReturnDate(datetime, after) {
+  if (!(datetime.type instanceof Date)) {
+    return datetime
+  }
+  var r = new Date(datetime.getTime() + after * 60 * 60 * 1000)
+  return r;
+}
+
+function getAfterMounth(date, after) {
+  var dd = new Date();
+  dd.setMonth(dd.getMonth() + after);// 获取AddDayCount天后的日期
+  var y = dd.getFullYear();
+  var m = dd.getMonth() + 1;// 获取当前月份的日期
+  var d = dd.getDate();
+  return y + '-' + m + '-' + d;
+}
+
+/**
+ * 计算2个日期相差的天数，不包含今天，如：2016-12-13到2016-12-15，相差2天
+ */
+function dateDiff(startDate, endDate) {
+  return parseInt((endDate - startDate) / 1000 / 60 / 60 / 24);// 把相差的毫秒数转换为天数
+}
+
+/**
+ * 计算2个日期相差的天数，包含今天，如：2016-12-13到2016-12-15，相差3天
+ */
+function dateDiffIncludeToday(startDate, endDate) {
+  return parseInt((endDate - startDate) / 1000 / 60 / 60 / 24) + 1;// 把相差的毫秒数转换为天数
+}
+
+/**
+ * 获取凌晨时间
+ * @param day
+ */
+export function getMorningTime(day = 0) {
+  if (day == null) {
+    return null;
+  }
+  const timeStamp = new Date(new Date().setHours(0, 0, 0, 0)).getTime();
+  return new Date(timeStamp + day * 86400000);
+}
+
+export function getStartEnd(length) {
+  const end = getMorningTime(0);
+  const start = getMorningTime(0);
+  start.setTime(start.getTime() - 3600 * 1000 * 24 * length);
+  return {end, start};
+}
+
+function getTimeShort() {
+  const timeShort = [
+    {
+      text: '今天',
+      onClick(picker) {
+        const {end, start} = getStartEnd(0);
+        picker.$emit('pick', [start, end]);
+      }
+    },
+    {
+      text: '昨天',
+      onClick(picker) {
+        const time = getMorningTime(0);
+        time.setTime(time.getTime() - 3600 * 1000 * 24);
+        picker.$emit('pick', [time, time]);
+      }
+    },
+    {
+      text: '最近一周',
+      onClick(picker) {
+        const {end, start} = getStartEnd(7);
+        picker.$emit('pick', [start, end]);
+      }
+    }, {
+      text: '最近一个月',
+      onClick(picker) {
+        const {end, start} = getStartEnd(30);
+        picker.$emit('pick', [start, end]);
+      }
+    }, {
+      text: '最近三个月',
+      onClick(picker) {
+        const {end, start} = getStartEnd(90);
+        picker.$emit('pick', [start, end]);
+      }
+    }
+  ];
+  return timeShort;
+}
+
+function getTimeShort2(){
+  const timeShort =  [
+    {
+      text: '今天',
+      onClick(picker) {
+        const temp = new Date();
+        picker.$emit('pick', [new Date(temp.setHours(0, 0, 0, 0)), new Date(temp.setHours(23, 59, 59, 0))]);
+      }
+    },
+    {
+      text: '昨天',
+      onClick(picker) {
+        const temp = new Date();
+        temp.setTime(temp.getTime() - 3600 * 1000 * 24);
+        picker.$emit('pick', [new Date(temp.setHours(0, 0, 0, 0)), new Date(temp.setHours(23, 59, 59, 0))]);
+      }
+    },
+    {
+      text: '前一周',
+      onClick(picker) {
+        const start = new Date();
+        const end = new Date();
+        start.setTime(end.getTime() - 3600 * 1000 * 24 * 6);
+        picker.$emit('pick', [new Date(start.setHours(0, 0, 0, 0)), new Date(end.setHours(23, 59, 59, 0))]);
+      }
+    },
+    {
+      text: '这个月',
+      onClick(picker) {
+        const end = getCurrentMonthLast();
+        const start = getCurrentMonthFirst();
+        picker.$emit('pick', [new Date(start.setHours(0, 0, 0, 0)), new Date(end.setHours(23, 59, 59, 0))]);
+
+        function getCurrentMonthFirst() {
+          let date = new Date();
+          date.setDate(1);
+          return date;
+        }
+
+        // 获取当前月的最后一天
+        function getCurrentMonthLast() {
+          let date = new Date();
+          let currentMonth = date.getMonth();
+          let nextMonth = ++currentMonth;
+          let nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
+          let oneDay = 1000 * 60 * 60 * 24;
+
+          return new Date(nextMonthFirstDay - oneDay);
+        }
+      }
+    },
+    {
+      text: '前一个月',
+      onClick(picker) {
+        const start = new Date();
+        const end = new Date();
+        start.setTime(end.getTime() - 3600 * 1000 * 24 * 29);
+        picker.$emit('pick', [new Date(start.setHours(0, 0, 0, 0)), new Date(end.setHours(23, 59, 59, 0))]);
+      }
+    }
+  ]
+  return timeShort
+}
+
+export default {
+  'getAfterDate': getAfterDate,
+  'getAfterMounth': getAfterMounth,
+  'dateDiff': dateDiff,
+  'dateDiffIncludeToday': dateDiffIncludeToday,
+  'getAfterDateReturnDate': getAfterDateReturnDate,
+  'getAfterHourReturnDate': getAfterHourReturnDate,
+  getTimeShort,
+  getTimeShort2,
+  dateFormat,
+  getStartEnd,
+  getMorningTime
+}
+

src/utils/ruoyi.js

@@ -1,4 +1,4 @@
-
+import moment from "moment/moment";
 
 /**
  * 通用js方法封装处理
@@ -68,6 +68,19 @@ export function addDateRange(params, dateRange, propName) {
   return search;
 }
 
+export function addDateRange2(params, dateRange, addDay=true) {
+  let search = params;
+  dateRange = Array.isArray(dateRange) ? dateRange : [];
+  if (addDay) {
+    search['beginTime'] = dateRange[0];
+    search['endTime'] = moment(dateRange[1]).add(1,"days").format('yyyy-MM-DD');
+  } else {
+    search['beginTime'] = dateRange[0];
+    search['endTime'] = dateRange[1];
+  }
+  return search;
+}
+
 // 回显数据字典
 export function selectDictLabel(datas, value) {
   if (value === undefined) {

src/views/ums/member/index.vue

@@ -1,208 +1,79 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px" size="medium" class="ry_form">
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="dateRange"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          :clearable="true"
+          :picker-options='pickerOptions'
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
       <el-form-item label="昵称" prop="nickname">
         <el-input
-          v-model="queryParams.nickname"
+          v-model.trim="queryParams.nickname"
           placeholder="请输入昵称"
           clearable
           size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="密码" prop="password">
-        <el-input
-          v-model="queryParams.password"
-          placeholder="请输入密码"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
         />
       </el-form-item>
       <el-form-item label="手机号码" prop="phone">
         <el-input
-          v-model="queryParams.phone"
+          v-model.trim="queryParams.phone"
           placeholder="请输入手机号码"
           clearable
           size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="用户备注" prop="mark">
-        <el-input
-          v-model="queryParams.mark"
-          placeholder="请输入用户备注"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="帐号启用状态:0->禁用；1->启用" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择帐号启用状态:0->禁用；1->启用" clearable size="small">
-              <el-option label="请选择字典生成" value="" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="头像" prop="avatar">
-        <el-input
-          v-model="queryParams.avatar"
-          placeholder="请输入头像"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="性别：0->未知；1->男；2->女" prop="gender">
-        <el-input
-          v-model="queryParams.gender"
-          placeholder="请输入性别：0->未知；1->男；2->女"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <template v-if="showMoreCondition">
-      <el-form-item label="用户所在城市" prop="city">
-        <el-input
-          v-model="queryParams.city"
-          placeholder="请输入用户所在城市"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="用户所在省份" prop="province">
-        <el-input
-          v-model="queryParams.province"
-          placeholder="请输入用户所在省份"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="用户所在国家" prop="country">
-        <el-input
-          v-model="queryParams.country"
-          placeholder="请输入用户所在国家"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="生日" prop="birthday">
-        <el-date-picker
-            clearable
-            size="small"
-            v-model="queryParams.birthday"
-            type="datetime"
-            value-format="yyyy-MM-dd"
-            placeholder="选择生日">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="推广员id" prop="spreadUid">
-        <el-input
-          v-model="queryParams.spreadUid"
-          placeholder="请输入推广员id"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="推广员关联时间" prop="spreadTime">
-        <el-date-picker
-            clearable
-            size="small"
-            v-model="queryParams.spreadTime"
-            type="datetime"
-            value-format="yyyy-MM-ddTHH:mm:ss"
-            placeholder="选择推广员关联时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="等级" prop="level">
-        <el-input
-          v-model="queryParams.level"
-          placeholder="请输入等级"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="用户剩余积分" prop="integral">
-        <el-input
-          v-model="queryParams.integral"
-          placeholder="请输入用户剩余积分"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-    </template>
       <el-form-item class="flex_one tr">
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        <el-button :icon="showMoreCondition ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" size="mini" @click="showMoreCondition = !showMoreCondition">{{showMoreCondition ? '收起条件' : '展开条件'}}</el-button>
+<!--        <el-button :icon="showMoreCondition ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" size="mini" @click="showMoreCondition = !showMoreCondition">{{showMoreCondition ? '收起条件' : '展开条件'}}</el-button>-->
       </el-form-item>
     </el-form>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['ums:member:add']"
-        >新增</el-button>
-      </el-col>
-      </el-col>
-    </el-row>
-
-    <el-table v-loading="loading" :data="umsMemberList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
+    <el-table v-loading="loading" :data="umsMemberList">
       <el-table-column label="昵称" align="center" prop="nickname" />
-      <el-table-column label="密码" align="center" prop="password" />
       <el-table-column label="手机号码" align="center" prop="phone" />
-      <el-table-column label="用户备注" align="center" prop="mark" />
-      <el-table-column label="帐号启用状态:0->禁用；1->启用" align="center" prop="status" />
-      <el-table-column label="头像" align="center" prop="avatar" />
-      <el-table-column label="性别：0->未知；1->男；2->女" align="center" prop="gender" />
+      <el-table-column label="性别" align="center" prop="gender" >
+        <template v-slot="scope">
+          <div>{{ scope.row.gender === 0 ? '未知' : (scope.row.gender === 1 ? '男' : '女') }}</div>
+        </template>
+      </el-table-column>
       <el-table-column label="用户所在城市" align="center" prop="city" />
       <el-table-column label="用户所在省份" align="center" prop="province" />
       <el-table-column label="用户所在国家" align="center" prop="country" />
-      <el-table-column label="公众号运营者对粉丝的备注，公众号运营者可在微信公众平台用户管理界面对粉丝添加备注" align="center" prop="remark" />
-      <el-table-column label="生日" align="center" prop="birthday" width="180" >
-        <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.birthday, '{y}-{m}-{d}')}}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="推广员id" align="center" prop="spreadUid" />
-      <el-table-column label="推广员关联时间" align="center" prop="spreadTime" width="180" >
-        <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.spreadTime, '')}}</span>
-        </template>
-      </el-table-column>
       <el-table-column label="等级" align="center" prop="level" />
-      <el-table-column label="用户剩余积分" align="center" prop="integral" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['ums:member:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['ums:member:remove']"
-          >删除</el-button>
+      <el-table-column label="创建时间" align="center" prop="createTime">
+        <template v-slot="scope">
+          <div>{{ parseTime(scope.row.createTime) }}</div>
         </template>
       </el-table-column>
+<!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
+<!--        <template slot-scope="scope">-->
+<!--          <el-button-->
+<!--            size="mini"-->
+<!--            type="text"-->
+<!--            icon="el-icon-edit"-->
+<!--            @click="handleUpdate(scope.row)"-->
+<!--            v-hasPermi="['ums:member:edit']"-->
+<!--          >修改</el-button>-->
+<!--          <el-button-->
+<!--            size="mini"-->
+<!--            type="text"-->
+<!--            icon="el-icon-delete"-->
+<!--            @click="handleDelete(scope.row)"-->
+<!--            v-hasPermi="['ums:member:remove']"-->
+<!--          >删除</el-button>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -211,85 +82,21 @@
       @pagination="getList"
     />
 
-    <!-- 添加或修改会员信息对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="108px" inline class="dialog-form-two">
-        <el-form-item label="昵称" prop="nickname">
-          <el-input v-model="form.nickname" placeholder="请输入昵称" />
-        </el-form-item>
-        <el-form-item label="密码" prop="password">
-          <el-input v-model="form.password" placeholder="请输入密码" />
-        </el-form-item>
-        <el-form-item label="手机号码" prop="phone">
-          <el-input v-model="form.phone" placeholder="请输入手机号码" />
-        </el-form-item>
-        <el-form-item label="用户备注" prop="mark">
-          <el-input v-model="form.mark" placeholder="请输入用户备注" />
-        </el-form-item>
-        <el-form-item label="帐号启用状态:0->禁用；1->启用">
-          <el-radio-group v-model="form.status">
-            <el-radio label="1">请选择字典生成</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="头像" prop="avatar">
-          <el-input v-model="form.avatar" placeholder="请输入头像" />
-        </el-form-item>
-        <el-form-item label="性别：0->未知；1->男；2->女" prop="gender">
-          <el-input v-model="form.gender" placeholder="请输入性别：0->未知；1->男；2->女" />
-        </el-form-item>
-        <el-form-item label="用户所在城市" prop="city">
-          <el-input v-model="form.city" placeholder="请输入用户所在城市" />
-        </el-form-item>
-        <el-form-item label="用户所在省份" prop="province">
-          <el-input v-model="form.province" placeholder="请输入用户所在省份" />
-        </el-form-item>
-        <el-form-item label="用户所在国家" prop="country">
-          <el-input v-model="form.country" placeholder="请输入用户所在国家" />
-        </el-form-item>
-        <el-form-item label="公众号运营者对粉丝的备注，公众号运营者可在微信公众平台用户管理界面对粉丝添加备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入公众号运营者对粉丝的备注，公众号运营者可在微信公众平台用户管理界面对粉丝添加备注" />
-        </el-form-item>
-        <el-form-item label="生日" prop="birthday">
-          <el-date-picker clearable size="small"
-                        v-model="form.birthday"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="选择生日">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="推广员id" prop="spreadUid">
-          <el-input v-model="form.spreadUid" placeholder="请输入推广员id" />
-        </el-form-item>
-        <el-form-item label="推广员关联时间" prop="spreadTime">
-          <el-date-picker clearable size="small"
-                        v-model="form.spreadTime"
-                        type="datetime"
-                        value-format="yyyy-MM-ddTHH:mm:ss"
-                        placeholder="选择推广员关联时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="等级" prop="level">
-          <el-input v-model="form.level" placeholder="请输入等级" />
-        </el-form-item>
-        <el-form-item label="用户剩余积分" prop="integral">
-          <el-input v-model="form.integral" placeholder="请输入用户剩余积分" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
 import { listUmsMember, getUmsMember, delUmsMember, addUmsMember, updateUmsMember, exportUmsMember } from "@/api/ums/member";
+import dateUtil from '@/utils/DateUtil';
+import moment from "moment";
 
 export default {
   name: "UmsMember",
   data() {
     return {
+      pickerOptions: {
+        shortcuts: dateUtil.getTimeShort()
+      },
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -315,21 +122,9 @@ export default {
         pageNum: 1,
         pageSize: 10,
         nickname: null,
-        password: null,
-        phone: null,
-        mark: null,
-        status: null,
-        avatar: null,
-        gender: null,
-        city: null,
-        province: null,
-        country: null,
-        birthday: null,
-        spreadUid: null,
-        spreadTime: null,
-        level: null,
-        integral: null,
+        phone: null
       },
+      dateRange:[],
       // 表单参数
       form: {},
       // 表单校验
@@ -352,8 +147,11 @@ export default {
     getList() {
       this.loading = true;
       const {pageNum, pageSize} = this.queryParams;
-      const query = {...this.queryParams, pageNum: undefined, pageSize: undefined};
+      let query = {...this.queryParams, pageNum: undefined, pageSize: undefined};
       const pageReq = {page: pageNum - 1, size: pageSize};
+      if (!this.dateRange || this.dateRange.length > 0){
+        query = { ...this.addDateRange2(query, this.dateRange) }
+      }
       listUmsMember(query, pageReq).then(response => {
         const { content, totalElements } = response
         this.umsMemberList = content;