You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

683 lines
25 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="弹窗状态" prop="operate">
<el-select
v-model="queryParams.operate"
placeholder="请选择弹窗状态"
:style="{ width: '100%' }"
clearable
>
<el-option label="全部" value="" />
<el-option label="开启" value="1" />
<el-option label="关闭" value="2" />
</el-select>
</el-form-item>
<el-form-item label="弹窗类型" prop="openType">
<el-select
v-model="queryParams.openType"
placeholder="请选择弹窗类型"
:style="{ width: '100%' }"
clearable
>
<el-option label="全部" value="" />
<el-option label="首页" value="1" />
<el-option label="发现模块" value="2" />
<el-option label="我的模块" value="3" />
</el-select>
</el-form-item>
<el-form-item label="开启时间" prop="siteStartTime">
<el-date-picker clearable
v-model="queryParams.siteStartTime"
type="date"
value-format="yyyy-MM-dd HH:mm"
placeholder="请选择开启开始时间">
</el-date-picker>
</el-form-item>
<el-form-item label="" prop="siteEndTime">
<el-date-picker clearable
v-model="queryParams.siteEndTime"
type="date"
value-format="yyyy-MM-dd HH:mm"
placeholder="请选择开启结束时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<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-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="['system:siteInfo:add']"
>新增</el-button>
</el-col>
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="success"-->
<!-- plain-->
<!-- icon="el-icon-edit"-->
<!-- size="mini"-->
<!-- :disabled="single"-->
<!-- @click="handleUpdate"-->
<!-- v-hasPermi="['system:siteInfo:edit']"-->
<!-- >修改</el-button>-->
<!-- </el-col>-->
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:siteInfo:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:siteInfo:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" prop="id" />
<el-table-column label="升序排序" align="center" prop="orderNumber" >
<template slot-scope="scope">
<el-input v-model="scope.row.orderNumber" @blur="updateOrderNumber($event,scope.row)"></el-input>
</template>
</el-table-column>
<el-table-column label="弹窗封面" align="center" prop="fileUrl" >
<template slot-scope="scope">
<el-image :src="scope.row.fileUrl" style="width: 60px;height: 80px">
<div slot="placeholder" class="image-slot"><span class="dot"></span>
</div>
</el-image>
</template>
</el-table-column>
<el-table-column label="标题" align="center" prop="siteName" />
<el-table-column label="开启时间" align="center" prop="siteStartTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.siteStartTime, '{y}-{m}-{d} {h}:{i}') }}</span>
~
<span>{{ parseTime(scope.row.siteEndTime, '{y}-{m}-{d} {h}:{i}') }}</span>
</template>
</el-table-column>
<el-table-column label="用户注册时间" align="center" prop="userRegisterStartTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.userRegisterStartTime, '{y}-{m}-{d} {h}:{i}') }}</span>
~
<span>{{ parseTime(scope.row.userRegisterEndTime, '{y}-{m}-{d} {h}:{i}') }}</span>
</template>
</el-table-column>
<el-table-column label="弹窗状态" align="center" prop="operate" >
<template slot-scope="scope">
<span v-show="scope.row.operate == 1">开启</span>
<span v-show="scope.row.operate == 2">关闭</span>
</template>
</el-table-column>
<el-table-column label="推送频次" align="center" prop="pushType" >
<template slot-scope="scope">
<span v-show="scope.row.pushType == 1">永久一次</span>
<span v-show="scope.row.pushType == 2">每次进入</span>
<span v-show="scope.row.pushType == 3">自定义频次</span>
</template>
</el-table-column>
<el-table-column label="每天" align="center" prop="pushNumber" />
<el-table-column label="星期" align="center" prop="pushTimer" />
<el-table-column label="打卡显示活动" align="center" prop="signNumber" />
<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="['system:siteInfo:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:siteInfo:remove']"
>删除</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-s-tools"
@click="closeWindow(scope.row, 1)"
v-if="scope.row.operate==2"
v-hasPermi="['system:siteInfo:edit']"
>开启弹窗</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-s-tools"
v-if="scope.row.operate==1"
@click="closeWindow(scope.row, 2)"
v-hasPermi="['system:siteInfo:edit']"
>关闭弹窗</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改站点管理对话框 -->
<el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-image :src="form.fileUrl" style="width: 300px;height: 400px;margin-left: 20%">
<div slot="placeholder" class="image-slot"><span class="dot"></span>
</div>
</el-image>
<el-form-item label="弹窗封面" prop="fileUrl">
<el-upload
ref="upload"
:limit="1"
accept=".jpg, .png, .jpeg"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">请上传启动页介绍图片建议尺寸为330px*460p</div>
</el-upload>
</el-form-item>
<el-form-item label="标题" prop="siteName">
<el-input v-model="form.siteName" placeholder="请输入标题" style="width: 80%" />
</el-form-item>
<el-form-item label="开启时间" prop="siteStartTime">
<el-date-picker
v-model="form.startTime"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm"
format="yyyy-MM-dd HH:mm"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="用户注册时间" prop="userRegisterStartTime" label-width="100px">
<el-date-picker
v-model="form.registerTime"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm"
format="yyyy-MM-dd HH:mm"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="弹窗类型" prop="openType">
<el-select v-model="form.openType">
<el-option label="首页" :value="1" :key="1"></el-option>
<el-option label="发现模块" :value="2" :key="2"></el-option>
<el-option label="活动模块" :value="3" :key="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="推送次数" prop="pushNumber">
<el-radio-group v-model="form.pushType">
<el-radio :label="1">永久一次</el-radio>
<el-radio :label="2">每次进入</el-radio>
<el-radio :label="3">自定义频次</el-radio>
</el-radio-group>
</el-form-item>
<el-row>
<el-col :span = "12">
<el-form-item label="每天" prop="pushNumber" v-if="form.pushType==3">
<el-input-number v-model="form.pushNumber" :min="1" :max="10" label="请选择多少次"></el-input-number>
</el-form-item>
</el-col>
<el-col :span = "12">
<el-form-item label="推送时间" prop="pushTimer" v-if="form.pushType==3">
<el-select v-model="form.pushTimerArray" multiple placeholder="请选择" size="small">
<el-option label="星期一" :value="1" :key="1"></el-option>
<el-option label="星期二" :value="2" :key="2"></el-option>
<el-option label="星期三" :value="3" :key="3"></el-option>
<el-option label="星期四" :value="4" :key="4"></el-option>
<el-option label="星期五" :value="5" :key="5"></el-option>
<el-option label="星期六" :value="6" :key="6"></el-option>
<el-option label="星期日" :value="7" :key="7"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="可见小程序标签" prop="showWechatTagId" label-width="120px">
<treeselect v-model="form.showWechatTagArray" :options="chatTagOptions" :multiple="true" :show-count="true" placeholder="请选择小程序标签" :disable-branch-nodes="true" />
</el-form-item>
<el-form-item label="可见企微标签" prop="showCompanyTagId" label-width="120px">
<treeselect v-model="form.showCompanyTagArray" :options="tagOptions" :multiple="true" :show-count="true" placeholder="请选择企微标签" :disable-branch-nodes="true" />
</el-form-item>
<el-form-item label="禁止小程序标签" prop="forbidWechatTagId" label-width="120px">
<treeselect v-model="form.forbidWechatTagArray" :options="chatTagOptions" :multiple="true" :show-count="true" placeholder="请选择小程序标签" :disable-branch-nodes="true" />
</el-form-item>
<el-form-item label="禁止企微标签" prop="forbidCompanyTagId" label-width="120px">
<treeselect v-model="form.forbidCompanyTagArray" :options="tagOptions" :multiple="true" :show-count="true" placeholder="请选择企微标签" :disable-branch-nodes="true" />
</el-form-item>
<el-row>
<el-col :span = "12">
<el-form-item label="所属渠道" prop="channelId">
<el-select v-model="form.channelArray" multiple placeholder="请选择">
<el-option
v-for="item in channelList"
:key="item.id"
:label="item.channelName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span = "12">
<el-form-item label="仪器" prop="channelId">
<el-select v-model="form.machineArray" multiple placeholder="请选择">
<el-option
v-for="item in channelList"
:key="item.id"
:label="item.channelName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span = "12">
<el-form-item label="用户类型" prop="userType">
<el-select v-model="form.userType">
<el-option label="全部" :value="0" :key="0"></el-option>
<el-option label="游客" :value="1" :key="1"></el-option>
<el-option label="会员" :value="2" :key="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span = "12">
<el-form-item label="是否开启弹窗" prop="userType" label-width="120px">
<el-switch
v-model="form.operate"
>
</el-switch>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="打卡显示活动 " prop="signNumber" label-width="120px">
<el-input v-model="form.signNumber" placeholder="请输入打卡多少次显示活动 " />
</el-form-item>
<el-form-item label="排序" prop="orderNumber">
<el-input v-model="form.orderNumber" placeholder="请输入排序" />
</el-form-item>
<el-row>
<el-col :span="24">
<el-form-item label="跳转类型" prop="type">
<el-select v-model="form.type">
<el-option label="无跳转" :value="0" :key="0"></el-option>
<el-option label="跳转内部链接" :value="1" :key="1"></el-option>
<el-option label="跳转小程序" :value="4" :key="4"></el-option>
<el-option label="跳转外部链接" :value="3" :key="3"></el-option>
<el-option label="导向视频号" :value="5" :key="5"></el-option>
<el-option label="导向视频号直播间" :value="6" :key="6"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24" v-if="form.type == 1">
<el-form-item label="内部链接" prop="link">
<el-input v-model="form.link" placeholder="请输入内部链接" />
</el-form-item>
</el-col>
<el-col :span="24" v-if="form.type == 1">
<el-form-item label="跳转参数" prop="linkParams">
<el-input v-model="form.linkParams" placeholder="请输入跳转参数" />
</el-form-item>
</el-col>
<el-col :span="24" v-if="form.type == 3">
<el-form-item label="外部链接" prop="link">
<el-input v-model="form.link" placeholder="请输入外部链接" />
</el-form-item>
</el-col>
<el-col :span="24" v-if="form.type == 4">
<el-form-item label="APPID" prop="redirectAppid">
<el-input v-model="form.redirectAppid" placeholder="请输入小程序APPID" />
</el-form-item>
</el-col>
<el-col :span="24" v-if="form.type == 4" label-width="90px">
<el-form-item label="页面链接" prop="redirectUrl">
<el-input v-model="form.redirectUrl" placeholder="请输入页面链接" />
</el-form-item>
</el-col>
<el-col :span="24" v-if="form.type == 5 || form.type == 6">
<el-form-item label="视频号ID" prop="videoNo">
<el-input v-model="form.videoNo" placeholder="请输入视频号ID" />
</el-form-item>
</el-col>
<el-col :span="24" v-if="form.type == 5" label-width="90px">
<el-form-item label="feedId" prop="feedId">
<el-input v-model="form.feedId" placeholder="请输入视频号feedId" />
</el-form-item>
</el-col>
</el-row>
</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 { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/system/siteInfo";
import { listChannelInfo} from "@/api/system/channelInfo";
import {getToken} from "@/utils/auth";
import { tagTreeSelect } from "@/api/system/wechatTab";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "Info",
components: { Treeselect },
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 站点管理表格数据
infoList: [],
channelList:[],
// 弹出层标题
title: "",
tagOptions: [],
chatTagOptions: [],
// 是否显示弹出层
open: false,
// 导入参数
upload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/file/upload"
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
siteName: null,
fileUrl: null,
siteStartTime: null,
siteEndTime: null,
userRegisterStartTime: null,
userRegisterEndTime: null,
openType: null,
pushType: null,
pushNumber: null,
pushTimer: null,
showWechatTag: null,
showWechatTagId: null,
showCompanyTag: null,
showCompanyTagId: null,
forbidWechatTag: null,
forbidWechatTagId: null,
forbidCompanyTag: null,
forbidCompanyTagId: null,
channelName: null,
channelId: null,
machineName: null,
machineId: null,
userType: null,
operate: null,
signNumber: null,
orderNumber: null,
type: null,
link: null,
linkParams: null,
redirectAppid: null,
redirectUrl: null,
videoNo: null,
feedId: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
this.getDeptTree();
},
methods: {
/** 查询站点管理列表 */
getList() {
this.form.fileUrl = 'http://127.0.0.1:9300/statics/2023/12/16/0c49191de1ed8f91b28d9c2b12556154_20231216154804A002.mp4'
this.loading = true;
listInfo(this.queryParams).then(response => {
this.infoList = response.rows;
this.total = response.total;
this.loading = false;
});
listChannelInfo(this.queryParams).then(response => {
this.channelList = response.rows;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
siteName: null,
fileUrl: null,
siteStartTime: null,
siteEndTime: null,
userRegisterStartTime: null,
userRegisterEndTime: null,
openType: null,
pushType: null,
pushNumber: null,
pushTimer: null,
showWechatTag: null,
showWechatTagId: null,
showCompanyTag: null,
showCompanyTagId: null,
forbidWechatTag: null,
forbidWechatTagId: null,
forbidCompanyTag: null,
forbidCompanyTagId: null,
channelName: null,
channelId: null,
machineName: null,
machineId: null,
userType: null,
operate: null,
signNumber: null,
orderNumber: null,
type: null,
link: null,
linkParams: null,
redirectAppid: null,
redirectUrl: null,
videoNo: null,
feedId: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加站点管理";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getInfo(id).then(response => {
this.form = response.data;
if(this.form.operate == 1) {
this.form.operate = true;
} else {
this.form.operate = false;
}
this.open = true;
this.title = "修改站点管理";
});
},
// 排序
updateOrderNumber(event,row){
updateInfo(row).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
},
// 关闭开启弹窗
closeWindow(row, operate){
row.operate = operate;
updateInfo(row).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
// 处理时间
if(this.form.startTime.length > 0) {
this.form.siteStartTime = this.form.startTime[0];
this.form.siteEndTime = this.form.startTime[1];
}
if(this.form.registerTime.length > 0) {
this.form.userRegisterStartTime = this.form.registerTime[0];
this.form.userRegisterEndTime = this.form.registerTime[1];
}
if(this.form.operate) {
this.form.operate = 1;
} else {
this.form.operate = 2;
}
this.form.startTime = [];
this.form.registerTime = [];
if (this.form.id != null) {
updateInfo(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addInfo(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
console.log('上传处理中==>file',JSON.stringify(file))
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList, item) {
console.log('上传后的结果==>',JSON.stringify(response))
if(response.code == '200') {
this.form.fileUrl = response.data.url;
}
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除站点管理编号为"' + ids + '"的数据项?').then(function() {
return delInfo(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 查询部门下拉树结构 */
getDeptTree() {
tagTreeSelect({type: 2}).then(response => {
this.tagOptions = response.data;
});
tagTreeSelect({type: 1}).then(response => {
this.chatTagOptions = response.data;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('system/siteInfo/export', {
...this.queryParams
}, `info_${new Date().getTime()}.xlsx`)
}
}
};
</script>