|
|
@@ -0,0 +1,340 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <en-table-layout
|
|
|
+ :tableData="tableData.data"
|
|
|
+ :loading="loading"
|
|
|
+ >
|
|
|
+ <div slot="toolbar" class="inner-toolbar">
|
|
|
+ <div class="toolbar-search">
|
|
|
+ <en-table-search
|
|
|
+ @search="searchEvent"
|
|
|
+ @advancedSearch="advancedSearchEvent"
|
|
|
+ advanced
|
|
|
+ :advancedWidth="500"
|
|
|
+ >
|
|
|
+ <template slot="advanced-content">
|
|
|
+ <el-form ref="advancedForm" :model="advancedForm" label-width="80px">
|
|
|
+ <!-- <el-form-item label="销售">-->
|
|
|
+ <!-- <el-input size="medium" v-model="advancedForm.sales" clearable></el-input>-->
|
|
|
+ <!-- </el-form-item>-->
|
|
|
+ <el-form-item label="访问时间">
|
|
|
+ <el-date-picker v-model="advancedForm.access_time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp"
|
|
|
+ :picker-options="{ disabledDate(time) { return time.getTime() > Date.now() }, shortcuts: MixinPickerShortcuts }"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="访问方式">
|
|
|
+ <el-select v-model="advancedForm.way" placeholder="请选择用户询问方式" filterable allow-create default-first-option clearable>
|
|
|
+ <el-option v-for="(item, index) in wayOptions" :key="index" :label="item" :value="item"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否有效">
|
|
|
+ <el-select v-model="advancedForm.bool_enabled" placeholder="请选择是否有效" clearable>
|
|
|
+ <el-option label="无效" value="0"></el-option>
|
|
|
+ <el-option label="有效" value="1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="来源">
|
|
|
+ <el-select v-model="advancedForm.source" placeholder="请选择用户来源" filterable allow-create default-first-option clearable>
|
|
|
+ <el-option v-for="(item, index) in sourceOptions" :key="index" :label="item" :value="item"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </template>
|
|
|
+ </en-table-search>
|
|
|
+ </div>
|
|
|
+ <div class="toolbar-btns">
|
|
|
+ <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd">添加</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template slot="table-columns">
|
|
|
+ <el-table-column label="销售" prop="sales" width="130"></el-table-column>
|
|
|
+ <el-table-column label="访问时间" prop="access_time" :formatter="MixinUnixToDate" width="170"></el-table-column>
|
|
|
+ <el-table-column label="方式" prop="way" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <template>
|
|
|
+ <el-tag type="primary" >{{ scope.row.way }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="地域" prop="region"></el-table-column>
|
|
|
+ <el-table-column label="电话" prop="phone" width="120"></el-table-column>
|
|
|
+ <el-table-column label="搜索词" prop="search_term"></el-table-column>
|
|
|
+ <el-table-column label="是否有效" prop="bool_enabled" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.bool_enabled"><el-tag type="success">有效</el-tag></span>
|
|
|
+ <span v-else><el-tag type="danger">无效</el-tag></span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="来源" prop="source"></el-table-column>
|
|
|
+ <el-table-column label="备注" prop="remark" min-width="140"></el-table-column>
|
|
|
+ <el-table-column label="操作" width="150" fixed="right">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" type="primary" @click="handlerEdit(scope.row)">编辑</el-button>
|
|
|
+ <el-button size="mini" type="danger" @click="handlerDelete(scope.row.id)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-pagination
|
|
|
+ v-if="tableData"
|
|
|
+ slot="pagination"
|
|
|
+ @size-change="handlePageSizeChange"
|
|
|
+ @current-change="handlePageCurrentChange"
|
|
|
+ :current-page="tableData.page_no"
|
|
|
+ :page-sizes="[20, 50, 100, 500]"
|
|
|
+ :page-size="tableData.page_size"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="tableData.data_total">
|
|
|
+ </el-pagination>
|
|
|
+ </en-table-layout>
|
|
|
+
|
|
|
+ <el-dialog :title="myTitle" :visible.sync="fromDialog" width="700px" :close-on-click-modal="false" :close-on-press-escape="false">
|
|
|
+ <el-form :model="myForm" ref="myForm" :rules="formRules" label-width="110px">
|
|
|
+ <el-form-item label="访问时间" prop="access_time">
|
|
|
+ <el-date-picker v-model="myForm.access_time" type="datetime" placeholder="选择客户访问时间"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="地域">
|
|
|
+ <el-input v-model="myForm.region" placeholder="输入客户地域" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="方式" prop="way">
|
|
|
+ <el-select v-model="myForm.way" filterable allow-create default-first-option placeholder="请选择用户询问方式">
|
|
|
+ <el-option v-for="(item, index) in wayOptions" :key="index" :label="item" :value="item"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="电话">
|
|
|
+ <el-input v-model="myForm.phone" placeholder="请输入电话" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="搜索词">
|
|
|
+ <el-input v-model="myForm.search_term" placeholder="请输入搜索关键词" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否有效">
|
|
|
+ <el-switch style="display: block" v-model="myForm.bool_enabled" active-text="有效" inactive-text="无效"></el-switch>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="来源" prop="source">
|
|
|
+ <el-select v-model="myForm.source" filterable allow-create default-first-option placeholder="请选择用户来源">
|
|
|
+ <el-option v-for="(item, index) in sourceOptions" :key="index" :label="item" :value="item"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注">
|
|
|
+ <el-input type="textarea" v-model="myForm.remark" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入备注"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="fromDialog = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="handleConfirm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as API_PjPromotion from '@/api/pjPromotion'
|
|
|
+import Storage from '@/utils/storage'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'pjGoodsList',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ /** 列表loading状态 */
|
|
|
+ loading: false,
|
|
|
+ /** 列表参数 */
|
|
|
+ params: {
|
|
|
+ page_no: 1,
|
|
|
+ page_size: 20
|
|
|
+ },
|
|
|
+ /** 商品列表数据 */
|
|
|
+ tableData: '',
|
|
|
+ /** 高级搜索数据 */
|
|
|
+ advancedForm: {},
|
|
|
+ myTitle: '新增推广',
|
|
|
+ myForm: {
|
|
|
+ access_time: '',
|
|
|
+ bool_enabled: false,
|
|
|
+ phone: '',
|
|
|
+ remark: '',
|
|
|
+ region: '',
|
|
|
+ search_term: '',
|
|
|
+ source: '',
|
|
|
+ way: ''
|
|
|
+ },
|
|
|
+ formRules: {
|
|
|
+ access_time: [this.MixinRequired('访问时间不能为空！')],
|
|
|
+ way: [this.MixinRequired('方式不能为空！')],
|
|
|
+ source: [this.MixinRequired('来源不能为空！')]
|
|
|
+ },
|
|
|
+ wayOptions: ['微信', '电话', '在线咨询'],
|
|
|
+ sourceOptions: ['百度', '400', '360', '巨量(抖音、头条)', '微信', '必应', '其它'],
|
|
|
+ fromDialog: false,
|
|
|
+ boolFounder: JSON.parse(Storage.getItem('admin_user')).founder === 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (!this.boolFounder) {
|
|
|
+ this.params.salesId = Storage.getItem('admin_uid')
|
|
|
+ }
|
|
|
+ this.GET_List()
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ this.GET_List()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 分页大小发生改变 */
|
|
|
+ handlePageSizeChange(size) {
|
|
|
+ this.params.page_size = size
|
|
|
+ this.GET_List()
|
|
|
+ },
|
|
|
+ /** 分页页数发生改变 */
|
|
|
+ handlePageCurrentChange(page) {
|
|
|
+ this.params.page_no = page
|
|
|
+ this.GET_List()
|
|
|
+ },
|
|
|
+ /** 搜索事件触发 */
|
|
|
+ searchEvent(data) {
|
|
|
+ this.params = {
|
|
|
+ ...this.params,
|
|
|
+ keyword: data
|
|
|
+ }
|
|
|
+ this.params.page_no = 1
|
|
|
+ Object.keys(this.advancedForm).forEach(key => delete this.params[key])
|
|
|
+ this.GET_List()
|
|
|
+ },
|
|
|
+ /** 高级搜索事件触发 */
|
|
|
+ advancedSearchEvent() {
|
|
|
+ this.params = {
|
|
|
+ ...this.params,
|
|
|
+ ...this.advancedForm
|
|
|
+ }
|
|
|
+ delete this.params.start_time
|
|
|
+ delete this.params.end_time
|
|
|
+ const { access_time } = this.advancedForm
|
|
|
+ if (access_time) {
|
|
|
+ this.params.start_time = parseInt(access_time[0] /= 1000)
|
|
|
+ this.params.end_time = parseInt(access_time[1] /= 1000)
|
|
|
+ }
|
|
|
+ delete this.params.keyword
|
|
|
+ delete this.params.access_time
|
|
|
+ this.params.page_no = 1
|
|
|
+ this.GET_List()
|
|
|
+ },
|
|
|
+ GET_List() {
|
|
|
+ this.loading = true
|
|
|
+ API_PjPromotion.getList(this.params).then(response => {
|
|
|
+ this.loading = false
|
|
|
+ this.tableData = response
|
|
|
+ }).catch(() => (this.loading = false))
|
|
|
+ },
|
|
|
+ handleAdd() {
|
|
|
+ this.myForm = {
|
|
|
+ access_time: '',
|
|
|
+ bool_enabled: false,
|
|
|
+ phone: '',
|
|
|
+ remark: '',
|
|
|
+ region: '',
|
|
|
+ search_term: '',
|
|
|
+ source: '',
|
|
|
+ way: ''
|
|
|
+ }
|
|
|
+ this.myTitle = '新增推广'
|
|
|
+ this.fromDialog = true
|
|
|
+ },
|
|
|
+ handlerEdit(row) {
|
|
|
+ this.myTitle = '修改推广'
|
|
|
+ this.myForm = this.MixinClone(row)
|
|
|
+ this.myForm.access_time = new Date(row.access_time * 1000)
|
|
|
+ this.fromDialog = true
|
|
|
+ },
|
|
|
+ handleConfirm() {
|
|
|
+ const _this = this
|
|
|
+ this.$refs['myForm'].validate((valid, error) => {
|
|
|
+ if (valid) {
|
|
|
+ const params = _this.MixinClone(_this.myForm)
|
|
|
+ params.access_time = new Date(params.access_time).getTime() / 1000
|
|
|
+ if (params.id) {
|
|
|
+ // 修改
|
|
|
+ API_PjPromotion.editModel(params, params.id).then(res => {
|
|
|
+ _this.fromDialog = false
|
|
|
+ _this.GET_List()
|
|
|
+ _this.$message.success('修改成功！')
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ // 新增
|
|
|
+ API_PjPromotion.addModel(params).then(res => {
|
|
|
+ _this.fromDialog = false
|
|
|
+ _this.GET_List()
|
|
|
+ _this.$message.success('添加成功！')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.error('表单填写有误，请检查！')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 单条数据删除处理 */
|
|
|
+ handlerDelete(ids) {
|
|
|
+ this.$confirm('删除操作后数据不可复原，您确定要删除此数据?', '警告', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ API_PjPromotion.deletes(ids).then(
|
|
|
+ response => {
|
|
|
+ this.GET_List()
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ ).catch(response => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: response.message
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ console.log('取消删除')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style type="text/scss" lang="scss" scoped>
|
|
|
+/deep/ .el-table td:not(.is-left) {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.inner-toolbar {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.toolbar-search {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.goods-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .goods-image {
|
|
|
+ .el-image {
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-name-box {
|
|
|
+ text-align: left;
|
|
|
+ .goods-name {
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ a:hover {
|
|
|
+ color: #f42424 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wenningning