liweiliang
/
bitcopay-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加广告

master
yyc 2 years ago
parent
e8b675d7c4
commit
7319c2eac0
5 changed files with 1258 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      package.json
  2. 78
      src/api/user/ad.js
  3. 63
      src/api/user/position.js
  4. 802
      src/views/user/ad/index.vue
  5. 312
      src/views/user/position/index.vue

4
package.json
View File

@ -58,7 +58,9 @@
"vue-meta": "2.4.0",
"vue-router": "3.4.9",
"vuedraggable": "2.24.3",
"vuex": "3.6.0"
"vuex": "3.6.0",
"js-md5": "^0.7.3",
"jquery": "^3.6.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.6",

78
src/api/user/ad.js
View File

@ -0,0 +1,78 @@
import request from '@/utils/request'
// 查询广告文本内容列表
export function listAd(query) {
return request({
url: '/user/ad/list',
method: 'get',
params: query
})
}
// 查询广告文本内容列表
export function listHelp(query) {
return request({
url: '/user/adHelp/list',
method: 'get',
params: query
})
}
// 查询广告文本内容详细
export function getAd(id) {
return request({
url: '/user/ad/' + id,
method: 'get'
})
}
// 新增广告文本内容
export function addAd(data) {
return request({
url: '/user/ad/add',
method: 'post',
data: data
})
}
// 修改广告文本内容
export function updateAd(data) {
return request({
url: '/user/ad/edit',
method: 'put',
data: data
})
}
// 修改广告文本内容
export function changeStatus(id,dataStatus) {
const data={
id,
dataStatus
}
return request({
url: '/user/ad/edit',
method: 'put',
data: data
})
}
// 删除广告文本内容
export function delAd(id) {
return request({
url: '/user/ad/' + id,
method: 'delete'
})
}
// 导出广告文本内容
export function exportAd(query) {
return request({
url: '/user/ad/export',
method: 'get',
params: query
})
}

63
src/api/user/position.js
View File

@ -0,0 +1,63 @@
import request from '@/utils/request'
// 查询广告位列表
export function listAdPosition(query) {
return request({
url: '/user/position/list',
method: 'get',
params: query
})
}
// 查询广告位列表
export function listAdPositionAll(query) {
return request({
url: '/user/position/listAll',
method: 'get',
params: query
})
}
// 查询广告位详细
export function getAdPosition(id) {
return request({
url: '/user/position/' + id,
method: 'get'
})
}
// 新增广告位
export function addAdPosition(data) {
return request({
url: '/user/position',
method: 'post',
data: data
})
}
// 修改广告位
export function updateAdPosition(data) {
return request({
url: '/user/position',
method: 'put',
data: data
})
}
// 删除广告位
export function delAdPosition(id) {
return request({
url: '/user/position/' + id,
method: 'delete'
})
}
// 导出广告位
export function exportAdPosition(query) {
return request({
url: '/user/positionposition/export',
method: 'get',
params: query
})
}

802
src/views/user/ad/index.vue
View File

@ -0,0 +1,802 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="广告终端" prop="terminalType">
<el-select v-model="queryParams.terminalType" placeholder="请选择广告终端" clearable size="small">
<el-option
v-for="dict in terminalTypeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item label="广告位" prop="adPositionType">
<el-select v-model="queryParams.adPositionType" placeholder="请选择广告位" clearable size="small">
<el-option
v-for="dict in adPositionTypeList"
:key="dict.positionType"
:label="dict.positionName"
:value="dict.positionType"
/>
</el-select>
</el-form-item>
<el-form-item label="广告类型" prop="adType">
<el-select v-model="queryParams.adType" placeholder="请选择广告类型" clearable size="small">
<el-option
v-for="dict in adContentTypeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item label="语言" prop="languageType">
<el-select v-model="queryParams.languageType" placeholder="请选择语言类型" clearable size="small">
<el-option
v-for="dict in projectLanguageOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="dataStatus">
<el-select v-model="queryParams.dataStatus" placeholder="请选择状态" clearable size="small">
<el-option
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</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="['ad:ad: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="['ad:ad: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="['ad:ad: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="['ad:ad:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="adList" @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="terminalType" :formatter="terminalTypeFormat" />
<el-table-column label="语言" align="center" prop="languageType" :formatter="projectLanguageFormat" />
<el-table-column label="广告位" align="center" prop="adPositionType" :formatter="positionTypeFormat" />
<el-table-column label="广告类型" align="center" prop="adType" :formatter="adContentTypeFormat"/>
<el-table-column label="广告标题" align="center" prop="adTitle" />
<!-- <el-table-column label="广告内容" align="center" prop="adContent" />-->
<!-- <el-table-column label="广告宣传图片相对路径" align="center" prop="adImg" />-->
<el-table-column label="广告图片" align="center" prop="adImgAbs" >
<template slot-scope="scope">
<el-image v-if="scope.row.adImgAbs!=null && scope.row.adImgAbs!=''"
style="width: 120px; height: 120px"
:src="scope.row.adImgAbs"
@click="previewImage(scope.row.adImgAbs)"
:preview-src-list="srcList"
></el-image>
<el-icon v-if="scope.row.adImgAbs==null || scope.row.adImgAbs==''"
style="width: 120px; height: 120px"
></el-icon>
</template>
<!-- <template width="90" slot-scope="scope">-->
<!-- <img style="width:80px;height:80px;border:none;" :src="scope.row.adImgAbs">-->
<!-- </template>-->
</el-table-column>
<!-- <el-table-column label="广告内容富文本" align="center" prop="adContentHtml" />-->
<el-table-column label="商品链接地址" align="center" prop="link" />
<el-table-column label="状态" align="center" prop="dataStatus" :formatter="statusFormat" >
<template slot-scope="scope">
<el-switch
v-model="scope.row.dataStatus"
active-value="Y"
inactive-value="N"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>
</el-table-column>
<el-table-column label="排序" align="center" prop="sort" />
<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="['ad:ad:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['ad:ad:remove']"
>删除</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="50%" append-to-body :close-on-click-modal="false"
:before-close="cancel">
<el-form ref="form" :model="form" :rules="rules" label-width="82px">
<el-form-item label="广告终端" prop="terminalType" style="width: 100%" >
<el-radio-group v-model="form.terminalType" @change="changeTerminalType($event)">
<el-radio
v-for="dict in terminalTypeOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>{{dict.dictLabel}}</el-radio>
</el-radio-group
>
</el-form-item>
<el-form-item label="语言" prop="languageType" style="width: 100%">
<el-radio-group v-model="form.languageType">
<el-radio
v-for="dict in projectLanguageOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>{{dict.dictLabel}}</el-radio>
</el-radio-group
>
</el-form-item>
<el-form-item label="广告位" prop="adPositionType">
<el-radio-group v-model="form.adPositionType">
<el-radio
v-for="dict in adPositionTypeListUpdate"
:key="dict.positionType"
:label="dict.positionType"
>{{dict.positionName}}</el-radio>
</el-radio-group
>
</el-form-item>
<el-form-item label="广告类型" prop="adType" v-if="form.adPositionType!='user_questions'">
<el-radio-group v-model="form.adType">
<el-radio
v-for="dict in adContentTypeOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>{{dict.dictLabel}}</el-radio>
</el-radio-group
>
</el-form-item>
<el-form-item label="广告标题" prop="adTitle" v-if="form.adPositionType!='user_questions'">
<el-input v-model="form.adTitle" placeholder="请输入广告标题" />
</el-form-item>
<el-form-item label="问题标题" prop="adTitle" v-if="form.adPositionType=='user_questions'">
<el-input v-model="form.adTitle" placeholder="请输入广告标题" />
</el-form-item>
<el-form-item label="广告内容" prop="adContent" v-if="form.adPositionType!='user_questions'">
<el-input
type="textarea"
v-model="form.adContent"
placeholder="请输入广告内容"
/>
</el-form-item>
<el-form-item label="广告链接" prop="link" v-if="form.adPositionType!='user_questions'">
<el-input v-model="form.link" placeholder="请输入广告链接" />
</el-form-item>
<el-form-item label="广告图片" v-if="form.adPositionType!='user_questions'">
<el-upload
class="avatar-uploader"
:show-file-list="false"
:action="uploadUrl()"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:data="{path:'ad'}"
>
<img v-if="form.adImgAbs" :src="form.adImgAbs" class="avatar" style="width: 150px" height="150px">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<!-- <el-form-item label="广告图片">-->
<!-- <el-upload-->
<!-- class="avatar-uploader"-->
<!-- :http-request="checkedFile"-->
<!-- action="/"-->
<!-- :show-file-list="false"-->
<!-- >-->
<!-- <img-->
<!-- v-if="form.adImgAbs != undefined"-->
<!-- :src="form.adImgAbs"-->
<!-- class="avatar"-->
<!-- />-->
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
<el-form-item label="广告富文本" prop="adContentHtml" v-if="form.adPositionType!='user_questions'">
<Editor :min-height="190" v-model="form.adContentHtml" />
</el-form-item>
<el-form-item label="问题富文本" prop="adContentHtml" v-if="form.adPositionType=='user_questions'">
<Editor :min-height="190" v-model="form.adContentHtml" />
</el-form-item>
<el-form-item label="点赞数" prop="likes" v-if="form.terminalType=='website_client'">
<el-input v-model="form.likes" placeholder="请输入广告标题" />
</el-form-item>
<el-form-item label="状态" prop="dataStatus">
<el-radio-group v-model="form.dataStatus">
<el-radio
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>{{dict.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="form.sort"
:step="1"
value=" "
></el-input-number>
</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 {changeStatus, listAd, getAd, delAd, addAd, updateAd, exportAd } from "@/api/user/ad";
import Editor from '@/components/Editor';
import { listAdPositionAll} from "@/api/user/position";
import md5 from "js-md5";
import $ from "jquery";
export default {
name: "Ad",
components: {
Editor,
},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 广告文本内容表格数据
adList: [],
//广告位列表
terminalTypeOptions:[],
//广告终端类型列表
adPositionTypeList:[],
//广告终端类型列表
adPositionTypeListUpdate:[],
//广告类型（图文、图片、视频、文本、音频）字典
adContentTypeOptions:[],
// 语言状态字典
projectLanguageOptions: [],
// 状态字典
statusOptions: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
terminalType: null,
adPositionType: null,
languageType: null,
adType: null,
adTitle: null,
adContent: null,
adImg: null,
adImgAbs: null,
adContentHtml: null,
link: null,
dataStatus: null,
sort: null
},
// 查询参数
queryParamsPosition: {
terminalType: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
terminalType: [
{ required: true, message: "请选择广告终端", trigger: "blur" }
],
adPositionType: [
{ required: true, message: "请选择广告位", trigger: "blur" }
],
adType: [
{ required: true, message: "请选择广告类型", trigger: "blur" }
],
adContent: [
{ required: true, message: "广告内容不能为空", trigger: "blur" }
],
adTitle: [
{ required: true, message: "广告标题不能为空", trigger: "blur" }
],
adImg: [
{ required: true, message: "广告宣传图片相对路径不能为空", trigger: "blur" }
],
// link: [
// { required: true, message: "广告的商品页面或者活动页面链接地址不能为空", trigger: "blur" }
// ],
},
// 预览
srcList: ["http://118.25.187.239:9099/img/adImg/557097620301025280.jpg"],
// 断点续传
// 地址
updateAddress: `${process.env.VUE_APP_BASE_API}/system/ftpfile/`,
maxSize: 50 * 1024 * 1024 * 1024, // 上传最大文件限制
eachSize: 20 * 1024 * 1024, // 每块文件大小
// 上传进度条
isShowPercentage: false, // 是否显示
percentage: 0,
};
},
created() {
console.log(this.updateAddress)
this.getList();
this.getDicts("terminal_type").then(response => {
this.terminalTypeOptions = response.data;
});
this.getDicts("ad_content_type").then(response => {
this.adContentTypeOptions = response.data;
});
this.getDicts("sys_yes_no").then(response => {
this.statusOptions = response.data;
});
this.getDicts("project_language").then(response => {
this.projectLanguageOptions = response.data;
});
},
methods: {
uploadUrl:function(){
return this.updateAddress + "uploadFile"
},
// 预览图片
previewImage(abUrl) {
this.srcList[0] = abUrl;
},
changeTerminalType(value){
this.queryParamsPosition.terminalType=value;
listAdPositionAll(this.queryParamsPosition).then(response => {
this.adPositionTypeListUpdate = response.rows;
});
},
// 图片上传组件自带的成功回调函数
handleAvatarSuccess(res) {
console.log(res);
this.form.adImgAbs = res.data.url;
this.form.adImg = res.data.path;
},
beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpeg" || "image/png";
const isLt2M = file.size / 1024 / 1024 < 10;
// if (!isJPG) {
// this.$message.error('上传头像图片只能是 JPG 格式!');
// }
if (!isLt2M) {
this.$message.error("上传图片大小不能超过 10MB!");
}
return isJPG && isLt2M;
},
/** 查询广告文本内容列表 */
getList() {
this.loading = true;
listAd(this.queryParams).then(response => {
this.adList = response.rows;
this.total = response.total;
this.loading = false;
});
this.findListAdPositionAll();
},
findListAdPositionAll(){
listAdPositionAll().then(response => {
this.adPositionTypeList = response.rows;
});
},
// 中英文状态字典
projectLanguageFormat(row, column) {
return this.selectDictLabel(this.projectLanguageOptions, row.languageType);
},
// 状态字典翻译
statusFormat(row, column) {
return this.selectDictLabel(this.statusOptions, row.dataStatus);
},
//广告类型
adContentTypeFormat(row, column){
return this.selectDictLabel(this.adContentTypeOptions,row.adType);
},
// 状态字典翻译
terminalTypeFormat(row, column) {
return this.selectDictLabel(this.terminalTypeOptions, row.terminalType);
},
// 状态字典翻译
positionTypeFormat(row, column) {
return this.selectTerminalTypeList(this.adPositionTypeList, row.adPositionType);
},
selectTerminalTypeList(datas, value) {
var actions = [];
Object.keys(datas).some((key) => {
if (datas[key].positionType == ('' + value)) {
actions.push(datas[key].positionName);
return true;
}
})
return actions.join('');
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
terminalType: 'user_client',
languageType: "zh",
adPositionType: null,
adType: null,
adTitle: null,
adContent: null,
adImg: null,
adImgAbs: null,
adContentHtml: null,
link: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
dataStatus: "Y",
sort: null,
likes:0,
};
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 = "添加广告文本内容";
this.queryParamsPosition.terminalType="user_client";
listAdPositionAll(this.queryParamsPosition).then(response => {
this.adPositionTypeListUpdate = response.rows;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getAd(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改广告文本内容";
this.queryParamsPosition.terminalType=this.form.terminalType;
listAdPositionAll(this.queryParamsPosition).then(response => {
this.adPositionTypeListUpdate = response.rows;
});
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateAd(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addAd(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$confirm('是否确认删除广告文本内容编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delAd(ids);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有广告文本内容数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return exportAd(queryParams);
}).then(response => {
this.download(response.msg);
})
},
// 断点续传
async checkedFile(options) {
const { maxSize, getSize, splitUpload, singleUpload } = this;
const { file, onProgress, onSuccess, onError } = options;
if (file.size > maxSize) {
return this.$message({
message: `您选择的文件大于${getSize(maxSize)}`,
type: "error",
});
}
// const uploadFunc = file.size > multiUploadSize ? splitUpload : singleUpload
try {
singleUpload(file, onProgress);
} catch (e) {
console.error(e);
this.$message({
message: e.message,
type: "error",
});
onError();
}
const prom = new Promise((resolve, reject) => {});
prom.abort = () => {};
return prom;
},
// 格式化文件大小显示文字
getSize(size) {
return size > 1024
? size / 1024 > 1024
? size / (1024 * 1024) > 1024
? (size / (1024 * 1024 * 1024)).toFixed(2) + "GB"
: (size / (1024 * 1024)).toFixed(2) + "MB"
: (size / 1024).toFixed(2) + "KB"
: size.toFixed(2) + "B";
},
// 单文件直接上传
async singleUpload(file, onProgress, onSuccess) {
// console.log(onSuccess)
// console.log(onSuccess())
//把视频的信息存储为一个字符串
var filedetails =
file.name + file.size + file.type + file.lastModifiedDate;
//使用当前文件的信息用md5加密生成一个key 这个加密是根据文件的信息来加密的 如果相同的文件 加的密还是一样的
var key = md5(filedetails);
var key10 = parseInt(key, 16);
//把加密的信息 转为一个64位的
var key62 = this._10to62(key10);
//检查这个key存在不存在
$.ajax({
url: this.updateAddress + "check",
type: "post",
data: { key: key62 },
success: (data) => {
console.log(data);
if (data.code == 500) {
//这个方法必须抽离出来
this.splitUpload(file, 1);
} else {
if (data.data.shardIndex == data.data.shardTotal) {
// console.log('最周一块嘛')
this.isShowPercentage = false;
this.form.adImgAbs = data.url;
this.form.adImg = data.file_url;
this.$message({
message: "上传成功",
type: "success",
});
} else {
//找到这个是第几片 去重新上传
this.splitUpload(file, parseInt(data.data.shardIndex));
}
}
},
});
},
// 大文件分块上传
splitUpload(file, shardIndex) {
console.log("file", file);
//永安里from表单提交
var fd = new FormData();
//文件分片 以20MB去分片
var shardSize = this.eachSize;
//定义分片索引
var shardIndex = shardIndex;
//定义分片的起始位置
var start = (shardIndex - 1) * shardSize;
//定义分片结束的位置 file哪里来的?
var end = Math.min(file.size, start + shardSize);
//从文件中截取当前的分片数据
var fileShard = file.slice(start, end);
//分片的大小
var size = file.size;
//总片数
var shardTotal = Math.ceil(size / shardSize);
console.log((shardSize * (shardIndex - 1)) / size);
this.isShowPercentage = true;
this.percentage = Number(
Number(((shardSize * (shardIndex - 1)) / size) * 100).toFixed(2)
);
//文件的后缀名
var fileName = file.name;
var suffix = fileName
.substring(fileName.lastIndexOf(".") + 1, fileName.length)
.toLowerCase();
//把视频的信息存储为一个字符串
var filedetails =
file.name + file.size + file.type + file.lastModifiedDate;
//使用当前文件的信息用md5加密生成一个key 这个加密是根据文件的信息来加密的 如果相同的文件 加的密还是一样的
// console.log(md5)
var key = md5(filedetails);
console.log(key);
var key10 = parseInt(key, 16);
//把加密的信息 转为一个64位的
var key62 = this._10to62(key10);
fd.append("file", fileShard);
//前面的参数必须和controller层定义的一样
fd.append("suffix", suffix);
fd.append("shardIndex", shardIndex);
fd.append("shardSize", shardSize);
fd.append("shardTotal", shardTotal);
fd.append("size", size);
fd.append("key", key62);
$.ajax({
url: this.updateAddress + "uploadDiskBatch/sampleDisk",
type: "post",
cache: false,
data: fd,
processData: false,
contentType: false,
success: (data) => {
//这里应该是一个递归调用
if (shardIndex < shardTotal) {
var index = shardIndex + 1;
this.splitUpload(file, index);
} else {
console.log(data);
this.percentage = 100;
if (data.code == 200) {
setTimeout(() => {
this.isShowPercentage = false;
this.form.adImgAbs = data.url;
this.form.adImg = data.file_url;
this.$message({
message: "上传成功",
type: "success",
});
}, 800);
} else {
this.isShowPercentage = false;
this.$message({
message: data.msg,
type: "error",
});
}
}
},
error: function () {
this.isShowPercentage = false;
//请求出错处理
},
});
// if (shardIndex < shardTotal) {
// var index = shardIndex + 1;
// this.splitUpload(file, index);
// }
},
_10to62(number) {
let chars =
"0123456789abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ";
let radix = chars.length;
let arr = [];
do {
let mod = number % radix;
number = (number - mod) / radix;
arr.unshift(chars[mod]);
} while (number);
return arr.join("");
},
// 状态修改
handleStatusChange(row) {
let text = row.dataStatus === "N" ? "禁用" : "启用";
this.$confirm('确认要' + text + '该广告吗?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return changeStatus(row.id, row.dataStatus);
}).then(() => {
this.msgSuccess(text + "成功");
}).catch(function() {
row.dataStatus = row.dataStatus === "N" ? "Y" : "N";
});
},
},
};
</script>

312
src/views/user/position/index.vue
View File

@ -0,0 +1,312 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="85px">
<el-form-item label="广告位名称" prop="positionName">
<el-input
v-model="queryParams.positionName"
placeholder="请输入广告位名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="广告位类型" prop="positionType">-->
<!-- <el-select v-model="queryParams.positionType" placeholder="请选择广告位类型" clearable size="small">-->
<!-- <el-option label="请选择字典生成" value="" />-->
<!-- </el-select>-->
<!-- </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="['ad:position: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="['ad:position: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="['ad:position: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="['ad:position:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="AdPositionList" @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="positionName" />
<el-table-column label="广告位类型" align="center" prop="positionType" />
<el-table-column label="广告位终端" align="center" prop="terminalType" :formatter="terminalTypeFormat" />
<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="['ad:position:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['ad:position:remove']"
>删除</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="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="广告位名称" prop="positionName">
<el-input v-model="form.positionName" placeholder="请输入广告位名称" />
</el-form-item>
<el-form-item label="广告位类型" prop="positio v-ifnType">
<el-input v-if="form.id!=null" v-model="form.positionType" placeholder="请填写广告位类型" disabled="disabled"/>
<el-input v-if="form.id==null" v-model="form.positionType" placeholder="请填写广告位类型" />
<!-- <el-select v-model="form.positionType" placeholder="请选择广告位类型">-->
<!-- <el-option label="请选择字典生成" value="" />-->
<!-- </el-select>-->
</el-form-item>
<el-form-item label="广告终端" prop="terminalType" style="width: 100%" >
<el-radio-group v-model="form.terminalType">
<el-radio
v-for="dict in terminalTypeOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>{{dict.dictLabel}}</el-radio>
</el-radio-group
>
</el-form-item>
<!-- <el-form-item label="创建时间" prop="createTime">-->
<!-- <el-date-picker clearable size="small"-->
<!-- v-model="form.createTime"-->
<!-- type="date"-->
<!-- value-format="yyyy-MM-dd"-->
<!-- placeholder="选择创建时间">-->
<!-- </el-date-picker>-->
<!-- </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 { listAdPosition, getAdPosition, delAdPosition, addAdPosition, updateAdPosition, exportAdPosition } from "@/api/user/position";
export default {
name: "AdPosition",
components: {
},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 广告位表格数据
AdPositionList: [],
//广告位列表
terminalTypeOptions:[],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
positionName: null,
positionType: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
positionName: [
{ required: true, message: "广告位名称不能为空", trigger: "blur" }
],
positionType: [
{ required: true, message: "广告位类型不能为空", trigger: "change" }
],
}
};
},
created() {
this.getDicts("terminal_type").then(response => {
this.terminalTypeOptions = response.data;
});
this.getList();
},
methods: {
/** 查询广告位列表 */
getList() {
this.loading = true;
listAdPosition(this.queryParams).then(response => {
this.AdPositionList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 状态字典翻译
terminalTypeFormat(row, column) {
return this.selectDictLabel(this.terminalTypeOptions, row.terminalType);
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
positionName: null,
positionType: null,
terminalType:"user_client",
createTime: 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
getAdPosition(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改广告位";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateAdPosition(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addAdPosition(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$confirm('是否确认删除广告位编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delAdPosition(ids);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有广告位数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return exportAdPosition(queryParams);
}).then(response => {
this.download(response.msg);
})
}
}
};
</script>
Write Preview
Loading…
Cancel
Save