/** * Created by wang on 18/10/31. */ <template> <div class="index"> <el-form ref="searchFrom" :model="searchFrom" label-width="80px" inline> <el-form-item label="领取时间"> <el-date-picker v-model="searchFrom.time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="{shortcuts:[today,yesterday,last7Day,last30Day]}" :default-time="['00:00:00','23:59:59']"> </el-date-picker> </el-form-item> <el-form-item label="激活时间"> <el-date-picker v-model="searchFrom.active_time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="{shortcuts:[today,yesterday,last7Day,last30Day]}" :default-time="['00:00:00','23:59:59']"> </el-date-picker> </el-form-item> <el-form-item label="是否激活"> <el-select clearable @change="initPage" v-model="searchFrom.user_buy" size="medium" > <el-option label="已激活" :value="1"></el-option> <el-option label="未激活" :value="0"></el-option> </el-select> </el-form-item> <el-form-item label="沟通状态"> <el-select clearable @change="initPage" v-model="searchFrom.status" size="medium" > <el-option label="已激活" :value="1"></el-option> <el-option label="假号" :value="2"></el-option> <el-option label="没兴趣" :value="3"></el-option> <el-option label="待激活" :value="0"></el-option> </el-select> </el-form-item> <el-form-item label="来源"> <el-input v-model="searchFrom.source" placeholder="名称"></el-input> </el-form-item> <el-form-item label="昵称"> <el-input v-model="searchFrom.nickname" style="width: 110px"></el-input> </el-form-item> <el-form-item label="手机号"> <el-input v-model="searchFrom.mobile" style="width: 120px"></el-input> </el-form-item> <el-form-item label="商品名称"> <el-select v-model="searchFrom.goods_id" filterable placeholder="请选择" style="width: 150px" @change="initPage" clearable> <el-option v-for="(data,index) in goodList" :key="index" :label="data | filterGoods" :value="data.id"> </el-option> </el-select> </el-form-item> <el-form-item label="老师"> <el-select v-model="searchFrom.teacher_id" filterable placeholder="请选择" @change="initPage" clearable filterable style="width: 180px"> <el-option label="未指定" value="0"> </el-option> <el-option v-for="(data,index) in teacherList" :key="index" :label="data.name" :value="data.id"> </el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" plain @click="initPage"> 搜索 </el-button> </el-form-item> <el-form-item> <el-button type="primary" plain v-if="$store.state.export" @click="doExport"> 导出 </el-button> </el-form-item> <!-- <el-button @click="editComment" type="primary" plain > 批量编辑备注 </el-button> --> </el-form> <div></div> <div style="position: relative"> <el-tabs v-model="searchFrom.course_type" type="card" style="background: white;padding-top: 10px" @tab-click="initPage"> <el-tab-pane label="全部" name="-1"/> <el-tab-pane label="月课" name="0"/> <el-tab-pane label="日课" name="1"/> </el-tabs> <div style="position: absolute;top: 10px;right: 10px;font-size: 14px" v-if="$store.state.distribution"> 老师: <el-select size="small" v-model="teacherId" placeholder="请选择" clearable style="width: 150px" filterable> <el-option label="暂不分配" value="0"> </el-option> <el-option v-for="(data,index) in teacherList" :key="index" :label="data.name" :value="data.id"> </el-option> </el-select> <el-button size="small" type="success" @click="pullAll">批量分配</el-button> </div> </div> <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="nickname" label="领取人"> <template slot-scope="scope"> <div v-if='scope.row.user_id !== 0'> <img class="avatar" :src="scope.row.avatar"/> <div>{{scope.row.nickname}}<br>(ID:{{scope.row.user_id}})</div> </div> <div v-if='scope.row.user_id === 0'> 暂未绑定用户 </div> </template> </el-table-column> <el-table-column prop="name" label="宝宝昵称"> </el-table-column> <el-table-column prop="telephone" label="领取电话"> </el-table-column> <!-- <el-table-column prop="source" label="来源"> </el-table-column> --> <el-table-column prop="periods_title" label="期数"> </el-table-column> <el-table-column prop="goods_name" label="商品名称"> </el-table-column> <el-table-column prop="source" label="来源"> <template slot-scope="scope"> {{scope.row.source}}({{scope.row.invite_name}}) </template> </el-table-column> <el-table-column prop="teacher_name" label="班级老师"> </el-table-column> <el-table-column prop="status" :formatter="externalLaunchStatus" label="沟通状态" width="120"> </el-table-column> <el-table-column prop="active_at" label="激活时间" width="90"> <template slot-scope="scope"> {{scope.row.active_at === '0000-00-00 00:00:00'?'未激活':scope.row.active_at}} </template> </el-table-column> <el-table-column prop="create_at" label="领取时间" width="90"> </el-table-column> <el-table-column prop="desc" label="备注"> </el-table-column> <el-table-column label="操作" fixed="right" v-if="!$store.state.readonly" width="180"> <template slot-scope="scope"> <el-button @click="editNote(scope.row.id, scope.row.desc)" size="mini" plain type="primary">编辑备注</el-button> </template> </el-table-column> </el-table> <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/> <el-dialog title="编辑备注" center append-to-body :visible.sync="showCommentDialog" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="600px"> <div> <el-form ref="commentFrom" :model="commentForm"> <el-form-item prop="desc"> <el-input type="textarea" v-model="commentForm.desc"></el-input> </el-form-item> </el-form> </div> <span slot="footer" class="dialog-footer"> <el-button @click="showCommentDialog = false;commentForm={}">取 消</el-button> <el-button type="primary" @click="saveComment">确 定</el-button> </span> </el-dialog> </div> </template> <script> import page from '../framework/page' import CommonJs from '../../util/common'; import { getAdsInnerListApi, updateAdsInnerApi, updateAdsInnerPlApi, getTeacherListApi, getGoodsListApi, adsTeacherApi } from "../../service/api"; import { GOODSTYPE, externalLaunchStatusParams } from "../../util/wordbook"; export default { name: "index", components: { page }, data() { return { today: { text: '今天', onClick: (vm) => { vm.$emit('pick', [this.formatTime(new Date()) + ' 00:00:00', this.formatTime(new Date()) + ' 23:59:59']) } }, yesterday: { text: '昨天', onClick: (vm) => { let preDate = this.formatTime(new Date(new Date().getTime() - 24 * 60 * 60 * 1000)); vm.$emit('pick', [preDate + ' 00:00:00', preDate + ' 23:59:59']) } }, last30Day: { text: '过去30天', onClick: (vm) => { let preDate = this.formatTime(new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000)); vm.$emit('pick', [preDate + ' 00:00:00', this.formatTime(new Date()) + ' 23:59:59']); } }, last7Day: { text: '过去7天', onClick: (vm) => { let preDate = this.formatTime(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)); vm.$emit('pick', [preDate + ' 00:00:00', this.formatTime(new Date()) + ' 23:59:59']); } }, teacherId: null, secId: [], total: 0, nowPage: 1, limit: 10, searchFrom: { source: '', course_type: '-1', }, tableData: [], commentForm: {}, showCommentDialog: false, teacherList: [], goodList: [], } }, filters: { filterStatus: function (value) { let msg = ""; if (value === 0) { msg = "未绑定"; } else { msg = "已绑定"; } return msg; }, filterGoods(val) { return ( "[" + val.id + "]" + "[" + GOODSTYPE[val.goods_type] + "]" + "[" + val.current_price / 100 + "元]" + val.name ); } }, created() { this.initPage() this.getGoodsOption(); this.getTeacherList() }, methods: { externalLaunchStatus(row) { return externalLaunchStatusParams[row.status] }, formatTime(date) { console.log(date) let year = date.getFullYear(); let Month = date.getMonth() + 1; if (Month < 10) { Month = `0${Month}` } let Day = date.getDate(); if (Day < 10) Day = `0${Day}`; return `${year}-${Month}-${Day}`; }, getGoodsOption() { let json = { page: 1, limit: 100, goods_type: '1,2' }; getGoodsListApi(json).then(res => { this.goodList = res.list; }); }, pullAll() { if (this.secId.length < 1) { this.$message('请选择订单'); return false; } if (!this.teacherId) { this.$message('请选择老师'); return false; } let json = { order_ids: [] }; this.secId.forEach(i => { json.order_ids.push(i) }); this.$confirm(`是否确定将这${json.order_ids.length}笔订单分配给该老师?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { adsTeacherApi(this.teacherId, {ids: json.order_ids.join(',')}).then(res => { // this.secId = []; this.$message({ message: '提交成功', type: 'success' }); this.initPage(); }) }).catch(() => { }); }, getTeacherList() { let json = { page: 1, limit: 500 }; getTeacherListApi(json).then(res => { this.teacherList = res.list; }); }, handleSelectionChange(val) { this.secId = [] val.forEach(element => { this.secId.push(element.id) }); // console.log(this.secId) }, initPage() { let json = { limit: this.limit, page: this.nowPage } // if (this.searchFrom.time) { // json.time = this.searchFrom.time // } if (this.searchFrom.source) { json.source = this.searchFrom.source } if (this.searchFrom.mobile) { json.mobile = this.searchFrom.mobile; } if (this.searchFrom.status) { json.status = this.searchFrom.status; } if (this.searchFrom.course_type !== '-1') { json.course_type = this.searchFrom.course_type; } if (this.searchFrom.nickname) { debugger json.nickname = this.searchFrom.nickname; } if (this.searchFrom.user_id) { json.user_id = this.searchFrom.user_id; } if (this.searchFrom.teacher_id) { json.teacher_id = this.searchFrom.teacher_id; } if (this.searchFrom.goods_name) { json.goods_name = this.searchFrom.goods_name; } if (this.searchFrom.user_buy != -1) { json.user_buy = this.searchFrom.user_buy; } if (this.searchFrom.order_id) { json.order_id = this.searchFrom.order_id; } if (this.searchFrom.goods_id) { json.goods_id = this.searchFrom.goods_id; } if (this.searchFrom.time && this.searchFrom.time.length == 2) { json.start_at = this.searchFrom.time[0]; json.end_at = this.searchFrom.time[1] } if (this.searchFrom.active_time && this.searchFrom.active_time.length == 2) { json.active_start_at = this.searchFrom.active_time[0]; json.active_end_at = this.searchFrom.active_time[1] } getAdsInnerListApi(json).then((res) => { this.tableData = res.list; this.total = res.total }) }, onPageChange(val) { this.nowPage = val this.initPage() }, onSizeChange(val) { this.nowPage = 1 this.limit = val this.initPage() }, doExport() { let query = `?type=export`; if (this.searchFrom.source) { query = query + '&source=' + this.searchFrom.source } if (this.searchFrom.mobile) { query = query + '&mobile=' + this.searchFrom.mobile } if (this.searchFrom.status) { query = query + '&status=' + this.searchFrom.status } if (this.searchFrom.course_type !== '-1') { query = query + '&course_type=' + this.searchFrom.course_type } if (this.searchFrom.user_buy !== '-1') { query = query + '&user_buy=' + this.searchFrom.user_buy } if (this.searchFrom.nickname) { query = query + '&nickname=' + this.searchFrom.nickname } if (this.searchFrom.user_id) { query = query + '&user_id=' + this.searchFrom.user_id } if (this.searchFrom.teacher_id) { query = query + '&teacher_id=' + this.searchFrom.teacher_id } if (this.searchFrom.goods_name) { query = query + '&goods_name=' + this.searchFrom.goods_name } if (this.searchFrom.order_id) { query = query + '&order_id=' + this.searchFrom.order_id } if (this.searchFrom.goods_id) { query = query + '&goods_id=' + this.searchFrom.goods_id } if (this.searchFrom.time && this.searchFrom.time.length == 2) { query = query + '&start_at=' + this.searchFrom.time[0]; query = query + '&end_at=' + this.searchFrom.time[1] } if (this.searchFrom.active_time && this.searchFrom.active_time.length == 2) { query = query + '&active_start_at=' + this.searchFrom.active_time[0]; query = query + '&active_end_at=' + this.searchFrom.active_time[1] } window.open(`/api/admin/ads/export/all${query}`) }, saveComment() { // let id = this.commentForm.id; let id if (this.commentForm.id) { id = this.commentForm.id } else { id = this.secId.join(',') } let desc = this.commentForm.desc ? this.commentForm.desc : ''; if (!desc) return; this.$confirm('确认编辑备注', '提示', { confirmButtonText: '继续', cancelButtonText: '取消', type: 'warning' }).then(() => { updateAdsInnerPlApi({ids: id, desc: desc}).then(res => { this.$message({ type: 'success', message: '编辑备注成功' }); this.showCommentDialog = false this.initPage(); }); }) }, editNote(id, desc) { this.showCommentDialog = true; this.commentForm = { id: id, desc: desc }; }, editComment(id, desc) { if (this.secId.length > 0) { this.showCommentDialog = true; // this.commentForm = { // id: id, // desc: desc // }; } else { this.$message({ type: 'warning', message: '请选择' }); } }, } } </script> <style scoped lang="less"> .index { padding: 20px 0; } .sms { padding: 20px 0; } .avatar { width: 50px; min-width: 50px; margin-right: 10px; height: 50px; border-radius: 50%; } </style>