39 changed files with 3325 additions and 113 deletions
@ -0,0 +1,33 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
export function add(data) { |
||||
return request({ |
||||
url: 'api/activity' + '?' + 'page=' + data.page + '&' + 'size=' + data.size + '&' + 'sort=' + data.sort + '&' + 'activity_id=' + data.activity_id, |
||||
method: 'get', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export function adds(data) { |
||||
return request({ |
||||
url: 'api/activityCate' + '?' + 'page=' + data.page + '&' + 'size=' + data.size + '&' + 'sort=' + data.sort, |
||||
method: 'get', |
||||
data |
||||
}) |
||||
} |
||||
export function activityFlag(data) { |
||||
return request({ |
||||
url: 'api/activityFlag' + '?' + 'page=' + data.page + '&' + 'size=' + data.size + '&' + 'sort=' + data.sort, |
||||
method: 'get', |
||||
data |
||||
}) |
||||
} |
||||
export function posts(data) { |
||||
return request({ |
||||
url: 'api/activityFlag', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export default { add, adds, activityFlag, posts } |
||||
@ -0,0 +1,27 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
export function add(data) { |
||||
return request({ |
||||
url: 'api/activity', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export function del(ids) { |
||||
return request({ |
||||
url: 'api/activity/', |
||||
method: 'delete', |
||||
data: ids |
||||
}) |
||||
} |
||||
|
||||
export function edit(data) { |
||||
return request({ |
||||
url: 'api/activity', |
||||
method: 'put', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export default { add, edit, del } |
||||
@ -0,0 +1,27 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
export function add(data) { |
||||
return request({ |
||||
url: 'api/activityCate', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export function del(ids) { |
||||
return request({ |
||||
url: 'api/activityCate/', |
||||
method: 'delete', |
||||
data: ids |
||||
}) |
||||
} |
||||
|
||||
export function edit(data) { |
||||
return request({ |
||||
url: 'api/activityCate', |
||||
method: 'put', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export default { add, edit, del } |
||||
@ -0,0 +1,27 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
export function add(data) { |
||||
return request({ |
||||
url: 'api/activityFlag', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export function del(ids) { |
||||
return request({ |
||||
url: 'api/activityFlag/', |
||||
method: 'delete', |
||||
data: ids |
||||
}) |
||||
} |
||||
|
||||
export function edit(data) { |
||||
return request({ |
||||
url: 'api/activityFlag', |
||||
method: 'put', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export default { add, edit, del } |
||||
@ -0,0 +1,27 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
export function add(data) { |
||||
return request({ |
||||
url: 'api/activityOrder', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export function del(ids) { |
||||
return request({ |
||||
url: 'api/activityOrder/', |
||||
method: 'delete', |
||||
data: ids |
||||
}) |
||||
} |
||||
|
||||
export function edit(data) { |
||||
return request({ |
||||
url: 'api/activityOrder', |
||||
method: 'put', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export default { add, edit, del } |
||||
@ -0,0 +1,27 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
export function add(data) { |
||||
return request({ |
||||
url: 'api/activityPublisher', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export function del(ids) { |
||||
return request({ |
||||
url: 'api/activityPublisher/', |
||||
method: 'delete', |
||||
data: ids |
||||
}) |
||||
} |
||||
|
||||
export function edit(data) { |
||||
return request({ |
||||
url: 'api/activityPublisher', |
||||
method: 'put', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export default { add, edit, del } |
||||
@ -0,0 +1,27 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
export function add(data) { |
||||
return request({ |
||||
url: 'api/articleCatetory', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export function del(ids) { |
||||
return request({ |
||||
url: 'api/articleCatetory/', |
||||
method: 'delete', |
||||
data: ids |
||||
}) |
||||
} |
||||
|
||||
export function edit(data) { |
||||
return request({ |
||||
url: 'api/articleCatetory', |
||||
method: 'put', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export default { add, edit, del } |
||||
@ -0,0 +1,19 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
export function gets(data) { |
||||
return request({ |
||||
url: 'api/yxUser' + '?' + 'page=' + data.page + '&' + 'size=' + data.size + '&' + 'sort=' + data.sort, |
||||
method: 'get', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export function getses(data) { |
||||
return request({ |
||||
url: 'api/activityPublisher', |
||||
method: 'get', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export default { gets, getses } |
||||
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 3.6 MiB |
|
After Width: | Height: | Size: 1.2 MiB |
@ -0,0 +1,505 @@
|
||||
<template> |
||||
<div v-if="type == 'video'"> |
||||
<div v-if="myValue != ''"> |
||||
<ul class="el-upload-list el-upload-list--picture-card"> |
||||
<li tabindex="0" class="el-upload-list__item is-ready" :style="'width: '+width+'px;height: '+height+'px'"> |
||||
<div> |
||||
<div class="del-btn" @click="deleteMaterial"><i class="el-icon-delete"></i></div> |
||||
<!-- <img :src="myValue" alt="" class="el-upload-list__item-thumbnail"> --> |
||||
<video :src="myValue" controls style="object-fit:cover;"></video> |
||||
<!-- <span class="el-upload-list__item-actions"> |
||||
<span class="el-upload-list__item-delete" @click="deleteMaterial"> |
||||
<i class="el-icon-delete" /> |
||||
</span> |
||||
</span> --> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div v-else tabindex="0" class="el-upload el-upload--picture-card" :style="'width: '+width+'px;height: '+height+'px;'+'line-height:'+height+'px;'" @click="toSeleteMaterial"> |
||||
<i class="el-icon-plus" /> |
||||
</div> |
||||
|
||||
<el-dialog |
||||
append-to-body |
||||
:visible.sync="dialogVisible" |
||||
width="35%" |
||||
> |
||||
<img :src="url" alt="" style="width: 100%"> |
||||
</el-dialog> |
||||
|
||||
<el-dialog |
||||
title="视频素材库" |
||||
append-to-body |
||||
:visible.sync="listDialogVisible" |
||||
width="70%" |
||||
> |
||||
<el-container> |
||||
<el-aside width="unset"> |
||||
<div style="margin-bottom: 10px"> |
||||
<el-button |
||||
class="el-icon-plus" |
||||
size="small" |
||||
@click="materialgroupAdd()" |
||||
> |
||||
添加分组 |
||||
</el-button> |
||||
</div> |
||||
<el-tabs v-model="materialgroupObjId" v-loading="materialgroupLoading" tab-position="left" @tab-click="tabClick"> |
||||
<el-tab-pane |
||||
v-for="(item,index) in materialgroupList" |
||||
:key="item.id" |
||||
:name="item.id" |
||||
> |
||||
<span slot="label"> {{ item.name }}</span> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</el-aside> |
||||
<el-main> |
||||
<el-card> |
||||
<div slot="header"> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<span>{{ materialgroupObj.name }}</span> |
||||
<span v-if="materialgroupObj.id != '-1'"> |
||||
<el-button size="small" type="text" class="el-icon-edit" style="margin-left: 10px;" @click="materialgroupEdit(materialgroupObj)">重命名</el-button> |
||||
<el-button size="small" type="text" class="el-icon-delete" style="margin-left: 10px;color: red" @click="materialgroupDelete(materialgroupObj)">删除</el-button> |
||||
</span> |
||||
</el-col> |
||||
<el-col :span="12" style="text-align: right;"> |
||||
<el-upload |
||||
:action="uploadApi" |
||||
:headers="headers" |
||||
:file-list="[]" |
||||
:on-progress="handleProgress" |
||||
:before-upload="beforeUpload" |
||||
:on-success="handleSuccess" |
||||
:data="{type: 1}" |
||||
multiple |
||||
> |
||||
<el-button size="small" type="primary">批量上传</el-button> |
||||
</el-upload> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
<div v-loading="tableLoading"> |
||||
<el-alert |
||||
v-if="tableData.length <= 0" |
||||
title="暂无数据" |
||||
type="info" |
||||
:closable="false" |
||||
center |
||||
show-icon |
||||
/> |
||||
<el-row :gutter="5"> |
||||
<el-checkbox-group v-model="urls" :max="num - myValue.length"> |
||||
<el-col v-for="(item,index) in tableData" :key="index" :span="4"> |
||||
<el-card :body-style="{ padding: '5px' }"> |
||||
<span class="line1" style="width:100%;font-size: 12px;display:inline-block;text-align:center;">{{item.name}}</span> |
||||
<!-- <el-image |
||||
style="width: 100%;height: 100px" |
||||
:src="item.url" |
||||
fit="contain" |
||||
:preview-src-list="[item.url]" |
||||
:z-index="999" |
||||
/> --> |
||||
<video :src="item.url" style="width: 100%;height: 100px"></video> |
||||
<div> |
||||
<el-checkbox class="material-name" :label="item.url"> |
||||
选择 |
||||
</el-checkbox> |
||||
<el-row> |
||||
<el-col :span="24" class="col-do"> |
||||
<el-button type="text" size="medium" @click="materialDel(item)">删除</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
</el-checkbox-group> |
||||
</el-row> |
||||
<el-pagination |
||||
:current-page.sync="page.currentPage" |
||||
:page-sizes="[12, 24]" |
||||
:page-size="page.pageSize" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="page.total" |
||||
class="pagination" |
||||
@size-change="sizeChange" |
||||
@current-change="pageChange" |
||||
/> |
||||
</div> |
||||
</el-card> |
||||
</el-main> |
||||
</el-container> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="listDialogVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="sureUrls">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
import { getPage as materialgroupPage, addObj as materialgroupAdd, delObj as materialgroupDel, putObj as materialgroupEdit } from '@/api/tools/materialgroup' |
||||
import { getPage, addObj, delObj, putObj } from '@/api/tools/material' |
||||
import { getToken } from '@/utils/auth' |
||||
import { mapGetters } from 'vuex' |
||||
|
||||
export default { |
||||
name: 'MaterialList', |
||||
props: { |
||||
// 素材数据 |
||||
value: { |
||||
type: String |
||||
}, |
||||
// 素材类型 |
||||
type: { |
||||
type: String |
||||
}, |
||||
// 素材限制数量，默认5个 |
||||
num: { |
||||
type: Number, |
||||
default() { |
||||
return 5 |
||||
} |
||||
}, |
||||
// 宽度 |
||||
width: { |
||||
type: Number, |
||||
default() { |
||||
return 150 |
||||
} |
||||
}, |
||||
// 宽度 |
||||
height: { |
||||
type: Number, |
||||
default() { |
||||
return 150 |
||||
} |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
headers: { |
||||
Authorization: getToken() |
||||
}, |
||||
dialogVisible: false, |
||||
myValue: this.value, |
||||
url: '', |
||||
listDialogVisible: false, |
||||
materialgroupList: [], |
||||
materialgroupObjId: '', |
||||
materialgroupObj: {}, |
||||
materialgroupLoading: false, |
||||
tableData: [], |
||||
resultNumber: 0, |
||||
page: { |
||||
total: 0, // 总页数 |
||||
currentPage: 1, // 当前页数 |
||||
pageSize: 12, // 每页显示多少条 |
||||
ascs: [], // 升序字段 |
||||
descs: 'create_time'// 降序字段 |
||||
}, |
||||
tableLoading: false, |
||||
groupId: null, |
||||
urls: [] |
||||
} |
||||
}, |
||||
computed: { |
||||
...mapGetters([ |
||||
'uploadApi' |
||||
]) |
||||
}, |
||||
watch: { |
||||
value: function(val) { |
||||
this.myValue = val |
||||
} |
||||
}, |
||||
methods: { |
||||
moveMaterial(index, type) { |
||||
if (type == 'up') { |
||||
const tempOption = this.value[index - 1] |
||||
this.$set(this.value, index - 1, this.value[index]) |
||||
this.$set(this.value, index, tempOption) |
||||
} |
||||
if (type == 'down') { |
||||
const tempOption = this.value[index + 1] |
||||
this.$set(this.value, index + 1, this.value[index]) |
||||
this.$set(this.value, index, tempOption) |
||||
} |
||||
}, |
||||
zoomMaterial(index) { |
||||
this.dialogVisible = true |
||||
this.url = this.value[index] |
||||
}, |
||||
deleteMaterial() { |
||||
const that = this |
||||
this.$confirm('是否确认删除？', '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning' |
||||
}).then(function() { |
||||
that.myValue = '' |
||||
that.urls = [] |
||||
}) |
||||
}, |
||||
toSeleteMaterial() { |
||||
this.listDialogVisible = true |
||||
if (this.tableData.length <= 0) { |
||||
this.materialgroupPage() |
||||
} |
||||
}, |
||||
materialgroupPage() { |
||||
this.materialgroupLoading = true |
||||
materialgroupPage({ |
||||
total: 0, // 总页数 |
||||
page: 0, // 当前页数 |
||||
size: 1000, // 每页显示多少条 |
||||
ascs: [], // 升序字段 |
||||
sort: 'create_time,desc'// 降序字段 |
||||
}).then(response => { |
||||
this.materialgroupLoading = false |
||||
const materialgroupList = response.content |
||||
materialgroupList.unshift({ |
||||
id: '-1', |
||||
name: '全部分组' |
||||
}) |
||||
this.materialgroupList = materialgroupList |
||||
this.tabClick({ |
||||
index: 0 |
||||
}) |
||||
}) |
||||
}, |
||||
materialgroupDelete(materialgroupObj) { |
||||
const that = this |
||||
this.$confirm('是否确认删除该分组？', '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning' |
||||
}).then(function() { |
||||
materialgroupDel(materialgroupObj.id) |
||||
.then(function() { |
||||
that.$delete(that.materialgroupList, materialgroupObj.index) |
||||
}) |
||||
}) |
||||
}, |
||||
materialgroupEdit(materialgroupObj) { |
||||
const that = this |
||||
this.$prompt('请输入分组名', '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
inputValue: materialgroupObj.name |
||||
}).then(({ value }) => { |
||||
materialgroupEdit({ |
||||
id: materialgroupObj.id, |
||||
name: value |
||||
}).then(function() { |
||||
materialgroupObj.name = value |
||||
that.$set(that.materialgroupList, materialgroupObj.index, materialgroupObj) |
||||
}) |
||||
}).catch(() => { |
||||
|
||||
}) |
||||
}, |
||||
materialgroupAdd() { |
||||
const that = this |
||||
this.$prompt('请输入分组名', '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消' |
||||
}).then(({ value }) => { |
||||
materialgroupAdd({ |
||||
name: value |
||||
}).then(function() { |
||||
that.materialgroupPage() |
||||
}) |
||||
}).catch(() => { |
||||
|
||||
}) |
||||
}, |
||||
tabClick(tab, event) { |
||||
this.urls = [] |
||||
const index = Number(tab.index) |
||||
const materialgroupObj = this.materialgroupList[index] |
||||
materialgroupObj.index = index |
||||
this.materialgroupObj = materialgroupObj |
||||
this.materialgroupObjId = materialgroupObj.id |
||||
this.page.currentPage = 1 |
||||
this.page.total = 0 |
||||
if (materialgroupObj.id != '-1') { |
||||
this.groupId = materialgroupObj.id |
||||
} else { |
||||
this.groupId = null |
||||
} |
||||
this.getPage(this.page) |
||||
}, |
||||
getPage(page, params) { |
||||
this.tableLoading = true |
||||
getPage(Object.assign({ |
||||
page: page.currentPage - 1, |
||||
size: page.pageSize, |
||||
descs: this.page.descs, |
||||
ascs: this.page.ascs, |
||||
sort: 'create_time,desc', |
||||
type: '2' |
||||
}, { |
||||
groupId: this.groupId |
||||
})).then(response => { |
||||
const tableData = response.content |
||||
this.page.total = response.totalElements |
||||
this.page.currentPage = page.currentPage |
||||
this.page.pageSize = page.pageSize |
||||
this.tableData = tableData |
||||
this.tableLoading = false |
||||
}).catch(() => { |
||||
this.tableLoading = false |
||||
}) |
||||
}, |
||||
sizeChange(val) { |
||||
console.log(val) |
||||
this.page.currentPage = 1 |
||||
this.page.pageSize = val |
||||
this.getPage(this.page) |
||||
}, |
||||
pageChange(val) { |
||||
console.log(val) |
||||
this.page.currentPage = val |
||||
// this.page.pageSize = val |
||||
this.getPage(this.page) |
||||
}, |
||||
materialRename(item) { |
||||
const that = this |
||||
this.$prompt('请输入素材名', '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
inputValue: item.name |
||||
}).then(({ value }) => { |
||||
putObj({ |
||||
id: item.id, |
||||
name: value |
||||
}).then(function() { |
||||
that.getPage(that.page) |
||||
}) |
||||
}).catch(() => { |
||||
|
||||
}) |
||||
}, |
||||
materialUrl(item) { |
||||
const that = this |
||||
this.$prompt('素材链接', '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
inputValue: item.url |
||||
}).then(({ value }) => { |
||||
|
||||
}).catch(() => { |
||||
|
||||
}) |
||||
}, |
||||
materialDel(item) { |
||||
const that = this |
||||
this.$confirm('是否确认删除该素材？', '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning' |
||||
}).then(function() { |
||||
delObj(item.id) |
||||
.then(function() { |
||||
that.getPage(that.page) |
||||
}) |
||||
}) |
||||
}, |
||||
handleCommand(command) { |
||||
const that = this |
||||
const s = command.split('-') |
||||
putObj({ |
||||
id: s[0], |
||||
groupId: s[1] |
||||
}).then(function() { |
||||
that.getPage(that.page) |
||||
}) |
||||
}, |
||||
handleProgress(event, file, fileList) { |
||||
console.log(event) |
||||
// let uploadProgress = file.percentage.toFixed(0) |
||||
// this.uploadProgress = uploadProgress |
||||
}, |
||||
handleSuccess(response, file, fileList) { |
||||
const that = this |
||||
this.uploadProgress = 0 |
||||
addObj({ |
||||
type: '2', |
||||
groupId: this.groupId != '-1' ? this.groupId : null, |
||||
name: file.name, |
||||
url: response.link |
||||
}).then(() => { |
||||
this.resultNumber++ |
||||
if (fileList.length === this.resultNumber) { |
||||
that.getPage(that.page) |
||||
this.resultNumber = 0 |
||||
} |
||||
}) |
||||
}, |
||||
beforeUpload(file) { |
||||
console.log(file) |
||||
const isPic = |
||||
file.type === 'video/mp4' |
||||
const isLt2M = file.size / 1024 / 1024 < 5 |
||||
if (!isPic) { |
||||
this.$message.error('请上传mp4格式视频！') |
||||
return false |
||||
} |
||||
if (!isLt2M) { |
||||
this.$message.error('上传头像图片大小不能超过 5MB!') |
||||
} |
||||
return isPic && isLt2M |
||||
}, |
||||
sureUrls() { |
||||
console.log('this.urls:' + this.urls) |
||||
this.myValue = this.urls[0] |
||||
this.$emit('input', this.urls[0]) |
||||
this.listDialogVisible = false |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/deep/ .el-tabs--left .el-tabs__nav.is-left, .el-tabs--left .el-tabs__nav.is-right, .el-tabs--right .el-tabs__nav.is-left, .el-tabs--right .el-tabs__nav.is-right { |
||||
height: 500px; |
||||
overflow-y: scroll; |
||||
} |
||||
/deep/ .el-icon-circle-close{ |
||||
color: red; |
||||
} |
||||
.material-name{ |
||||
padding: 8px 0px; |
||||
} |
||||
.col-do{ |
||||
text-align: center; |
||||
} |
||||
.button-do{ |
||||
padding: unset!important; |
||||
font-size: 12px; |
||||
} |
||||
.line1{ |
||||
overflow:hidden; |
||||
text-overflow:ellipsis; |
||||
white-space:nowrap; |
||||
width: 100%; |
||||
} |
||||
.del-btn{ |
||||
position: absolute; |
||||
right: 3px; |
||||
top: 3px; |
||||
z-index: 999; |
||||
background: #fff; |
||||
width: 24px; |
||||
height: 23px; |
||||
text-align: center; |
||||
border-radius: 50%; |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,114 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<!--工具栏--> |
||||
<div class="head-container"> |
||||
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'--> |
||||
<crudOperation :permission="permission" /> |
||||
<!--表单组件--> |
||||
<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px"> |
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px"> |
||||
<el-form-item label="分类名称"> |
||||
<el-input v-model="form.name" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<el-form-item label="状态"> |
||||
<!-- <el-input v-model="form.status" style="width: 370px;" /> --> |
||||
<el-radio-group v-model="form.status"> |
||||
<el-radio :label="0">关闭</el-radio> |
||||
<el-radio :label="1">开启</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
||||
<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
<!--表格渲染--> |
||||
<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler"> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column v-if="columns.visible('name')" prop="name" label="分类名称" /> |
||||
<el-table-column v-if="columns.visible('status')" prop="status" label="状态"> |
||||
<template slot-scope="scope"> |
||||
<span v-if="scope.row.status ==0">{{'关闭'}}</span> |
||||
<span v-if="scope.row.status ==1">{{'开启'}}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<!-- <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="createTime"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.createTime) }}</span> |
||||
</template> |
||||
</el-table-column> --> |
||||
<el-table-column v-permission="['admin','activityCate:edit','activityCate:del']" label="操作" width="150px" align="center"> |
||||
<template slot-scope="scope"> |
||||
<udOperation |
||||
:data="scope.row" |
||||
:permission="permission" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<!--分页组件--> |
||||
<pagination /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import crudActivityCate from '@/api/activityCate' |
||||
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
||||
import rrOperation from '@crud/RR.operation' |
||||
import crudOperation from '@crud/CRUD.operation' |
||||
import udOperation from '@crud/UD.operation' |
||||
import pagination from '@crud/Pagination' |
||||
import MaterialList from "@/components/material"; |
||||
|
||||
// crud交由presenter持有 |
||||
const defaultCrud = CRUD({ title: '活动分类', url: 'api/activityCate', sort: 'id,desc', crudMethod: { ...crudActivityCate }}) |
||||
const defaultForm = { id: null, name: null, status: 0, createTime: null, updateTime: null, isDel: null } |
||||
export default { |
||||
name: 'ActivityCate', |
||||
components: { pagination, crudOperation, rrOperation, udOperation ,MaterialList}, |
||||
mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], |
||||
dicts: ['is_enable'], |
||||
data() { |
||||
return { |
||||
|
||||
permission: { |
||||
add: ['admin', 'activityCate:add'], |
||||
edit: ['admin', 'activityCate:edit'], |
||||
del: ['admin', 'activityCate:del'] |
||||
}, |
||||
rules: { |
||||
} } |
||||
}, |
||||
watch: { |
||||
}, |
||||
methods: { |
||||
// 获取数据前设置好接口地址 |
||||
[CRUD.HOOK.beforeRefresh]() { |
||||
return true |
||||
}, // 新增与编辑前做的操作 |
||||
[CRUD.HOOK.afterToCU](crud, form) { |
||||
}, |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped> |
||||
.table-img { |
||||
display: inline-block; |
||||
text-align: center; |
||||
background: #ccc; |
||||
color: #fff; |
||||
white-space: nowrap; |
||||
position: relative; |
||||
overflow: hidden; |
||||
vertical-align: middle; |
||||
width: 32px; |
||||
height: 32px; |
||||
line-height: 32px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,101 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<!--工具栏--> |
||||
<div class="head-container"> |
||||
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'--> |
||||
<crudOperation :permission="permission" /> |
||||
<!--表单组件--> |
||||
<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px"> |
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px"> |
||||
<el-form-item label="名称"> |
||||
<el-input v-model="form.name" style="width: 370px;" /> |
||||
</el-form-item> |
||||
|
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
||||
<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
<!--表格渲染--> |
||||
<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler"> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column v-if="columns.visible('name')" prop="name" label="名称" /> |
||||
<el-table-column v-if="columns.visible('createTime')" prop="createTime" label="创建时间"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.createTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column v-permission="['admin','activityFlag:edit','activityFlag:del']" label="操作" width="150px" align="center"> |
||||
<template slot-scope="scope"> |
||||
<udOperation |
||||
:data="scope.row" |
||||
:permission="permission" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<!--分页组件--> |
||||
<pagination /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import crudActivityFlag from '@/api/activityFlag' |
||||
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
||||
import rrOperation from '@crud/RR.operation' |
||||
import crudOperation from '@crud/CRUD.operation' |
||||
import udOperation from '@crud/UD.operation' |
||||
import pagination from '@crud/Pagination' |
||||
import MaterialList from "@/components/material"; |
||||
|
||||
// crud交由presenter持有 |
||||
const defaultCrud = CRUD({ title: '活动标签', url: 'api/activityFlag', sort: 'id,desc', crudMethod: { ...crudActivityFlag }}) |
||||
const defaultForm = { id: null, name: null, createTime: null, updateTime: null, isDel: null, } |
||||
export default { |
||||
name: 'ActivityFlag', |
||||
components: { pagination, crudOperation, rrOperation, udOperation ,MaterialList}, |
||||
mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], |
||||
data() { |
||||
return { |
||||
|
||||
permission: { |
||||
add: ['admin', 'activityFlag:add'], |
||||
edit: ['admin', 'activityFlag:edit'], |
||||
del: ['admin', 'activityFlag:del'] |
||||
}, |
||||
rules: { |
||||
} } |
||||
}, |
||||
watch: { |
||||
}, |
||||
methods: { |
||||
// 获取数据前设置好接口地址 |
||||
[CRUD.HOOK.beforeRefresh]() { |
||||
return true |
||||
}, // 新增与编辑前做的操作 |
||||
[CRUD.HOOK.afterToCU](crud, form) { |
||||
}, |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped> |
||||
.table-img { |
||||
display: inline-block; |
||||
text-align: center; |
||||
background: #ccc; |
||||
color: #fff; |
||||
white-space: nowrap; |
||||
position: relative; |
||||
overflow: hidden; |
||||
vertical-align: middle; |
||||
width: 32px; |
||||
height: 32px; |
||||
line-height: 32px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,690 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<!--工具栏--> |
||||
<div class="head-container"> |
||||
<el-select |
||||
class="filter-item" |
||||
v-model="activityId" |
||||
placeholder="搜索活动" |
||||
> |
||||
<el-option |
||||
v-for="(item, index) in crud.data" |
||||
:key="index" |
||||
:label="item.name" |
||||
:value="item.id" |
||||
></el-option> |
||||
</el-select> |
||||
<el-button |
||||
class="filter-item" |
||||
size="mini" |
||||
type="success" |
||||
icon="el-icon-search" |
||||
@click="toquer" |
||||
>搜索</el-button |
||||
> |
||||
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'--> |
||||
<crudOperation :permission="permission" /> |
||||
<!--表单组件--> |
||||
<el-dialog |
||||
:append-to-body="true" |
||||
:close-on-click-modal="false" |
||||
:before-close="crud.cancelCU" |
||||
:visible.sync="crud.status.cu > 0" |
||||
:title="crud.status.title" |
||||
width="600px;" |
||||
> |
||||
<el-form |
||||
ref="form" |
||||
:model="form" |
||||
:rules="rules" |
||||
size="small" |
||||
label-width="80px" |
||||
> |
||||
<el-form-item label="活动名称" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.name" style="width: 370px" /> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="cateId" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.cateId" style="width: 370px;" /> |
||||
</el-form-item> --> |
||||
<el-form-item label="图片" :label-width="formLabelWidth"> |
||||
<single-pic |
||||
v-model="form.images" |
||||
type="image" |
||||
:num="1" |
||||
:width="150" |
||||
:height="150" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="价格" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.price" style="width: 370px" /> |
||||
</el-form-item> |
||||
<el-form-item label="活动分类" :label-width="formLabelWidth"> |
||||
<!-- <el-input v-model="form.cateId" style="width: 370px;" /> --> |
||||
<el-select |
||||
class="filter-item" |
||||
v-model="form.cateId" |
||||
style="width: 370px" |
||||
placeholder="请选择活动的分类" |
||||
> |
||||
<el-option |
||||
v-for="(item, index) in option" |
||||
:key="index" |
||||
:label="item.name" |
||||
:value="item.id" |
||||
></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="活动标签" :label-width="formLabelWidth"> |
||||
<!-- <el-input v-model="form.name" style="width: 370px;" /> --> |
||||
<el-tag |
||||
:key="tag" |
||||
v-for="tag in dynamicTags" |
||||
closable |
||||
:disable-transitions="false" |
||||
@close="handleClose(tag)" |
||||
> |
||||
{{ tag }} |
||||
</el-tag> |
||||
<el-input |
||||
class="input-new-tag" |
||||
v-if="inputVisible" |
||||
v-model="inputValue" |
||||
ref="saveTagInput" |
||||
size="small" |
||||
@keyup.enter.native="handleInputConfirm(1)" |
||||
@blur="handleInputConfirm(2)" |
||||
> |
||||
</el-input> |
||||
<el-button |
||||
v-else |
||||
class="button-new-tag" |
||||
size="small" |
||||
@click="showInput" |
||||
>+添加新的标签</el-button |
||||
> |
||||
</el-form-item> |
||||
<el-form-item label="热门" :label-width="formLabelWidth"> |
||||
<el-switch |
||||
v-model="form.hot" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
> |
||||
</el-switch> |
||||
</el-form-item> |
||||
<el-form-item label="推荐" :label-width="formLabelWidth"> |
||||
<el-switch |
||||
v-model="form.recommend" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
> |
||||
</el-switch> |
||||
</el-form-item> |
||||
<el-form-item label="状态" :label-width="formLabelWidth"> |
||||
<el-radio-group v-model="form.status"> |
||||
<el-radio :label="0">筹备中</el-radio> |
||||
<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-form-item label="报名开始时间" :label-width="formLabelWidth"> |
||||
<el-date-picker |
||||
:picker-options="pickerOptions" |
||||
style="width: 370px" |
||||
v-model="form.applyStartTime" |
||||
type="datetime" |
||||
placeholder="选择报名开始时间" |
||||
value-format="yyyy-MM-dd HH:mm:ss" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="报名结束时间" :label-width="formLabelWidth"> |
||||
<el-date-picker |
||||
:picker-options="pickerOptions" |
||||
style="width: 370px" |
||||
v-model="form.applyEndTime" |
||||
type="datetime" |
||||
placeholder="选择报名结束时间" |
||||
value-format="yyyy-MM-dd HH:mm:ss" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="活动开始时间" :label-width="formLabelWidth"> |
||||
<el-date-picker |
||||
:picker-options="pickerOptions" |
||||
style="width: 370px" |
||||
v-model="form.activityStartTime" |
||||
type="datetime" |
||||
placeholder="选择活动开始时间" |
||||
value-format="yyyy-MM-dd HH:mm:ss" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="活动结束时间" :label-width="formLabelWidth"> |
||||
<el-date-picker |
||||
:picker-options="pickerOptions" |
||||
style="width: 370px" |
||||
v-model="form.activityEndTime" |
||||
type="datetime" |
||||
placeholder="选择活动结束时间" |
||||
value-format="yyyy-MM-dd HH:mm:ss" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="地址" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.address" style="width: 370px" /> |
||||
</el-form-item> |
||||
<el-form-item label="经纬度" :label-width="formLabelWidth"> |
||||
<!-- <el-input v-model="form.longitude" style="width: 370px;" /> --> |
||||
<el-input v-model="lnglat" style="width: 370px"> |
||||
<el-button slot="append" type="primary" @click="toMap" |
||||
>打开地图</el-button |
||||
> |
||||
</el-input> |
||||
<el-drawer |
||||
:append-to-body="true" |
||||
title="" |
||||
:visible.sync="mapVisible" |
||||
:with-header="false" |
||||
size="60%" |
||||
> |
||||
<div id="map" style="width: 100%; height: 100%"></div> |
||||
</el-drawer> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="纬度" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.latitude" style="width: 370px;" /> |
||||
</el-form-item> --> |
||||
<el-form-item label="人数限制" :label-width="formLabelWidth"> |
||||
<el-input-number v-model="form.limit" :min="1"></el-input-number> |
||||
</el-form-item> |
||||
<el-form-item label="描述" :label-width="formLabelWidth"> |
||||
<el-input |
||||
type="textarea" |
||||
autosize |
||||
v-model="form.desc" |
||||
style="width: 370px" |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="内容" :label-width="formLabelWidth"> |
||||
<!-- <el-input type="textarea" autosize v-model="form.content" style="width: 370px;"></el-input> --> |
||||
<ueditor-wrap |
||||
v-model="form.content" |
||||
:config="myConfig" |
||||
@beforeInit="addCustomDialog" |
||||
style="width: 90%" |
||||
></ueditor-wrap> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="浏览次数" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.visitTimes" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<el-form-item label="喜欢次数" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.likeTimes" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<el-form-item label="分享次数" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.shareTimes" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<el-form-item label="收藏次数" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.collectTimes" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<el-form-item label="标签" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.flag" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<el-form-item label="phone" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.phone" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<el-form-item label="contact" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.contact" style="width: 370px;" /> |
||||
</el-form-item> --> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
||||
<el-button |
||||
:loading="crud.cu === 2" |
||||
type="primary" |
||||
@click="crud.submitCU" |
||||
>确认</el-button |
||||
> |
||||
</div> |
||||
</el-dialog> |
||||
<!--表格渲染--> |
||||
<el-table |
||||
ref="table" |
||||
v-loading="crud.loading" |
||||
:data="crud.data" |
||||
size="small" |
||||
style="width: 100%" |
||||
@selection-change="crud.selectionChangeHandler" |
||||
> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column |
||||
v-if="columns.visible('name')" |
||||
prop="name" |
||||
label="活动名称" |
||||
align="center" |
||||
/> |
||||
<el-table-column |
||||
v-if="columns.visible('images')" |
||||
prop="images" |
||||
label="活动图片" |
||||
align="center" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<a |
||||
v-if="scope.row.images !== null" |
||||
:href="scope.row.images" |
||||
style="color: #42b983" |
||||
target="_blank" |
||||
><img :src="scope.row.images" alt="点击打开" class="el-avatar" |
||||
/></a> |
||||
<a |
||||
v-if="scope.row.images == null" |
||||
href="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2694643916,1778468996&fm=11&gp=0.jpg" |
||||
style="color: #42b983" |
||||
target="_blank" |
||||
><img |
||||
src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2694643916,1778468996&fm=11&gp=0.jpg" |
||||
alt="点击打开" |
||||
class="el-avatar" |
||||
/></a> |
||||
</template> |
||||
</el-table-column> |
||||
<!-- <el-table-column v-if="columns.visible('cateId')" prop="cateId" label="cateId" align="center" /> --> |
||||
<el-table-column |
||||
v-if="columns.visible('price')" |
||||
prop="price" |
||||
label="价格(元)" |
||||
align="center" |
||||
/> |
||||
<el-table-column |
||||
v-if="columns.visible('status')" |
||||
prop="status" |
||||
label="状态" |
||||
align="center" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<span v-if="scope.row.status == 0">{{ "筹备中" }}</span> |
||||
<span v-if="scope.row.status == 1">{{ "报名中" }}</span> |
||||
<span v-if="scope.row.status == 2">{{ "报名结束" }}</span> |
||||
<span v-if="scope.row.status == 3">{{ "已完成" }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
v-if="columns.visible('activityStartTime')" |
||||
prop="activityStartTime" |
||||
label="活动开始时间" |
||||
align="center" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.activityStartTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
v-if="columns.visible('activityEndTime')" |
||||
prop="activityEndTime" |
||||
label="活动结束时间" |
||||
align="center" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.activityEndTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
v-if="columns.visible('applyStartTime')" |
||||
prop="applyStartTime" |
||||
label="报名开始时间" |
||||
align="center" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.applyStartTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
v-if="columns.visible('applyEndTime')" |
||||
prop="applyEndTime" |
||||
label="报名结束时间" |
||||
align="center" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.applyEndTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
v-if="columns.visible('address')" |
||||
prop="address" |
||||
label="地址" |
||||
align="center" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<span>{{ scope.row.address }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
v-if="columns.visible('limit')" |
||||
prop="limit" |
||||
label="人数限制" |
||||
align="center" |
||||
/> |
||||
<!-- <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="createTime"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.createTime) }}</span> |
||||
</template> |
||||
</el-table-column> --> |
||||
<el-table-column |
||||
v-permission="['admin', 'activity:edit', 'activity:del']" |
||||
label="操作" |
||||
width="150px" |
||||
align="center" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<udOperation :data="scope.row" :permission="permission" /> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<!--分页组件--> |
||||
<pagination /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import crudActivity from "@/api/activity"; |
||||
import { add, adds, activityFlag, posts } from "@/api/ActiveInterface"; |
||||
import CRUD, { presenter, header, form, crud } from "@crud/crud"; |
||||
import rrOperation from "@crud/RR.operation"; |
||||
import crudOperation from "@crud/CRUD.operation"; |
||||
import udOperation from "@crud/UD.operation"; |
||||
import pagination from "@crud/Pagination"; |
||||
import MaterialList from "@/components/material"; |
||||
import singlePic from "@/components/singlematerial"; |
||||
import UeditorWrap from "vue-ueditor-wrap"; |
||||
// crud交由presenter持有 |
||||
const defaultCrud = CRUD({ |
||||
title: "活动", |
||||
url: "api/activity", |
||||
sort: "id,desc", |
||||
crudMethod: { ...crudActivity }, |
||||
}); |
||||
const defaultForm = { |
||||
id: null, |
||||
name: null, |
||||
cateId: null, |
||||
images: "", |
||||
price: null, |
||||
status: 0, |
||||
activityStartTime: null, |
||||
activityEndTime: null, |
||||
applyStartTime: null, |
||||
applyEndTime: null, |
||||
address: "", |
||||
limit: 1, |
||||
desc: null, |
||||
content: null, |
||||
visitTimes: null, |
||||
likeTimes: null, |
||||
shareTimes: null, |
||||
collectTimes: null, |
||||
createTime: null, |
||||
updateTime: null, |
||||
flag: "", |
||||
phone: null, |
||||
contact: null, |
||||
hot: false, |
||||
recommend: false, |
||||
longitude: "", |
||||
latitude: "", |
||||
}; |
||||
let map = null; |
||||
export default { |
||||
name: "Activity", |
||||
components: { |
||||
pagination, |
||||
crudOperation, |
||||
rrOperation, |
||||
udOperation, |
||||
MaterialList, |
||||
singlePic, |
||||
UeditorWrap, |
||||
}, |
||||
mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], |
||||
dicts: ["is_enable"], |
||||
data() { |
||||
return { |
||||
pickerOptions: { |
||||
disabledDate(date) { |
||||
//disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean |
||||
return date.getTime() <= Date.now(); |
||||
}, |
||||
}, |
||||
// position:[116.473179,39.993169], |
||||
|
||||
lnglat: "", |
||||
mapVisible: false, |
||||
dynamicTags: [], |
||||
inputVisible: false, |
||||
inputValue: "", |
||||
formLabelWidth: "120px", |
||||
activityId: null, |
||||
option: [], |
||||
permission: { |
||||
add: ["activity:add"], |
||||
edit: ["activity:edit"], |
||||
del: ["activity:del"], |
||||
}, |
||||
myConfig: { |
||||
autoHeightEnabled: false, // 编辑器不自动被内容撑高 |
||||
initialFrameHeight: 400, // 初始容器高度 |
||||
initialFrameWidth: "100%", // 初始容器宽度 |
||||
UEDITOR_HOME_URL: "/UEditor/", |
||||
serverUrl: "", |
||||
}, |
||||
rules: {}, |
||||
}; |
||||
}, |
||||
watch: {}, |
||||
created() { |
||||
this.classification(); |
||||
this.activityFlags(); |
||||
}, |
||||
methods: { |
||||
// 获取数据前设置好接口地址 |
||||
[CRUD.HOOK.beforeRefresh]() { |
||||
return true; |
||||
}, // 新增与编辑前做的操作 |
||||
[CRUD.HOOK.afterToCU](crud, form) { |
||||
this.lnglat = form.longitude + "," + form.latitude; |
||||
this.form.flag = this.dynamicTags.toString(); |
||||
}, |
||||
// [CRUD.HOOK.beforeToAdd](crud, form) { |
||||
// console.log(form) |
||||
// this.$router.push({ |
||||
// path:'/activitys/activitys/form', |
||||
// }) |
||||
// }, |
||||
// [CRUD.HOOK. beforeToEdit](crud, form) { |
||||
// console.log(form) |
||||
// this.$router.push({ |
||||
// path:'/activitys/activitys/form', |
||||
// query:{rows:form} |
||||
// }) |
||||
// }, |
||||
|
||||
toquer() { |
||||
let plams = { |
||||
page: 0, |
||||
size: 10, |
||||
sort: "id,desc", |
||||
activity_id: this.activityId, |
||||
}; |
||||
add(plams).then((res) => { |
||||
console.log(res, "是否有数据"); |
||||
}); |
||||
// console.log(this.activityId) |
||||
}, |
||||
classification() { |
||||
let plams = { |
||||
page: 0, |
||||
size: 100, |
||||
sort: "id,desc", |
||||
}; |
||||
adds(plams).then((res) => { |
||||
console.log(res); |
||||
this.option = res.content; |
||||
}); |
||||
}, |
||||
activityFlags() { |
||||
this.dynamicTags = []; |
||||
let plams = { |
||||
page: 0, |
||||
size: 100, |
||||
sort: "id,desc", |
||||
}; |
||||
activityFlag(plams).then((res) => { |
||||
res.content.forEach((item) => { |
||||
this.dynamicTags.push(item.name); |
||||
}); |
||||
console.log(res); |
||||
}); |
||||
}, |
||||
addCustomDialog() { |
||||
console.log("上传图片"); |
||||
window.UE.registerUI( |
||||
"yshop", |
||||
function (editor, uiName) { |
||||
let dialog = new window.UE.ui.Dialog({ |
||||
iframeUrl: "#/yshop/materia/index", |
||||
editor: editor, |
||||
name: uiName, |
||||
title: "上传图片", |
||||
cssRules: "width:1200px;height:500px;padding:20px;", |
||||
}); |
||||
this.dialog = dialog; |
||||
|
||||
var btn = new window.UE.ui.Button({ |
||||
name: "dialog-button", |
||||
title: "上传图片", |
||||
cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;z-index:9999`, |
||||
onclick: function () { |
||||
dialog.render(); |
||||
dialog.open(); |
||||
}, |
||||
}); |
||||
|
||||
return btn; |
||||
}, |
||||
37 |
||||
); |
||||
}, |
||||
handleClose(tag) { |
||||
console.log("1"); |
||||
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1); |
||||
console.log(this.flag); |
||||
}, |
||||
|
||||
showInput() { |
||||
console.log("2"); |
||||
this.inputVisible = true; |
||||
this.$nextTick((_) => { |
||||
this.$refs.saveTagInput.$refs.input.focus(); |
||||
}); |
||||
console.log(this.dynamicTags, "多少"); |
||||
}, |
||||
|
||||
handleInputConfirm(val) { |
||||
this.form.flag = this.dynamicTags.toString(); |
||||
// let plam = { |
||||
// name:this.dynamicTags.pop |
||||
// } |
||||
console.log(val); |
||||
if (val == 1) { |
||||
console.log(this.dynamicTags, "数据"); |
||||
} else if (val == 2) { |
||||
console.log(this.dynamicTags, "测试数据"); |
||||
let plame = { |
||||
name: this.dynamicTags[this.dynamicTags.length - 1], |
||||
}; |
||||
|
||||
posts(plame).then((res) => { |
||||
console.log(res); |
||||
}); |
||||
} |
||||
let inputValue = this.inputValue; |
||||
if (inputValue) { |
||||
this.dynamicTags.push(inputValue); |
||||
} |
||||
this.inputVisible = false; |
||||
this.inputValue = ""; |
||||
}, |
||||
// fomrt(val){ |
||||
// console.log(val,'有没有触发') |
||||
// this.position = [114.31667,30.51667] |
||||
// console.log(this.position) |
||||
// } |
||||
getMap() { |
||||
let _this = this; |
||||
//创建地图 |
||||
map = new AMap.Map("map", { |
||||
//mapStyle: 'amap://styles/grey', |
||||
zoom: 13, |
||||
center: [114.31667, 30.51667], |
||||
}); |
||||
//地图点击事件 |
||||
map.on("click", showInfoClick); |
||||
function showInfoClick(e) { |
||||
map.clearMap(); //清理地图 |
||||
let lng = e.lnglat.getLng(); //获取经度 |
||||
let lat = e.lnglat.getLat(); //获取纬度 |
||||
//marker点 |
||||
let marker = new AMap.Marker({ |
||||
position: [lng, lat], |
||||
offset: new AMap.Pixel(-13, -30), |
||||
}); |
||||
_this.lnglat = lng + "," + lat; //将经纬度绑定至input输入框 |
||||
map.add(marker); //加载点 |
||||
map.setFitView(); //缩放至地图 |
||||
console.log(_this.lnglat.split(","), "经纬度"); |
||||
_this.form.longitude = _this.lnglat.split(",")[0]; |
||||
_this.form.latitude = _this.lnglat.split(",")[1]; |
||||
} |
||||
}, |
||||
//展示抽屉，执行获取坐标经纬度的方法 |
||||
toMap() { |
||||
this.mapVisible = true; |
||||
setTimeout(() => { |
||||
//调用方法创建地图 |
||||
this.getMap(); |
||||
}, 0); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.table-img { |
||||
display: inline-block; |
||||
text-align: center; |
||||
background: #ccc; |
||||
color: #fff; |
||||
white-space: nowrap; |
||||
position: relative; |
||||
overflow: hidden; |
||||
vertical-align: middle; |
||||
width: 32px; |
||||
height: 32px; |
||||
line-height: 32px; |
||||
} |
||||
.el-tag + .el-tag { |
||||
margin-left: 10px; |
||||
} |
||||
.button-new-tag { |
||||
margin-left: 10px; |
||||
height: 32px; |
||||
line-height: 30px; |
||||
padding-top: 0; |
||||
padding-bottom: 0; |
||||
} |
||||
.input-new-tag { |
||||
width: 90px; |
||||
margin-left: 10px; |
||||
vertical-align: bottom; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,330 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<!--工具栏--> |
||||
<div class="head-container"> |
||||
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'--> |
||||
<crudOperation :permission="permission" /> |
||||
<!--表单组件--> |
||||
<el-dialog |
||||
:close-on-click-modal="false" |
||||
:before-close="crud.cancelCU" |
||||
:visible.sync="crud.status.cu > 0" |
||||
:title="crud.status.title" |
||||
width="600px" |
||||
> |
||||
<el-form |
||||
ref="form" |
||||
:model="form" |
||||
:rules="rules" |
||||
size="small" |
||||
label-width="80px" |
||||
> |
||||
<el-form-item label="活动ID" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.activityId" style="width: 370px" /> |
||||
</el-form-item> |
||||
<el-form-item label="订单金额" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.amount" style="width: 370px" /> |
||||
</el-form-item> |
||||
<el-form-item label="优惠券id" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.couponId" style="width: 370px" /> |
||||
</el-form-item> |
||||
<el-form-item label="优惠券金额" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.couponAmount" style="width: 370px" /> |
||||
</el-form-item> |
||||
<el-form-item label="支付状态" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.paid" style="width: 370px" /> |
||||
</el-form-item> |
||||
<el-form-item label="退款金额" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.refundAmount" style="width: 370px" /> |
||||
</el-form-item> |
||||
<el-form-item label="状态" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.status" style="width: 370px" /> |
||||
</el-form-item> |
||||
<el-form-item label="支付人名字" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.name" style="width: 370px" /> |
||||
</el-form-item> |
||||
<el-form-item label="支付人电话" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.phone" style="width: 370px" /> |
||||
</el-form-item> |
||||
<el-form-item label="数量" :label-width="formLabelWidth"> |
||||
<el-input v-model="form.num" style="width: 370px" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
||||
<el-button |
||||
:loading="crud.cu === 2" |
||||
type="primary" |
||||
@click="crud.submitCU" |
||||
>确认</el-button |
||||
> |
||||
</div> |
||||
</el-dialog> |
||||
<!--表格渲染--> |
||||
<el-table |
||||
ref="table" |
||||
v-loading="crud.loading" |
||||
:data="crud.data" |
||||
size="small" |
||||
style="width: 100%" |
||||
@selection-change="crud.selectionChangeHandler" |
||||
> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column |
||||
v-if="columns.visible('activityId')" |
||||
prop="activityId" |
||||
label="活动ID" |
||||
align="center" |
||||
/> |
||||
<el-table-column |
||||
v-if="columns.visible('name')" |
||||
prop="name" |
||||
label="参与人名称" |
||||
align="center" |
||||
/> |
||||
<el-table-column |
||||
v-if="columns.visible('phone')" |
||||
prop="phone" |
||||
label="联系电话" |
||||
align="center" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<span v-if="scope.row.phone == ''">{{ "暂无" }}</span> |
||||
<span v-if="scope.row.phone !== ''">{{ scope.row.phone }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
v-if="columns.visible('amount')" |
||||
prop="amount" |
||||
label="订单金额" |
||||
align="center" |
||||
/> |
||||
<!-- <el-table-column v-if="columns.visible('couponId')" prop="couponId" label="优惠券id" align="center" /> |
||||
<el-table-column v-if="columns.visible('couponAmount')" prop="couponAmount" label="优惠券金额" align="center" /> --> |
||||
<el-table-column |
||||
v-if="columns.visible('paid')" |
||||
prop="paid" |
||||
label="支付状态" |
||||
align="center" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<span v-if="scope.row.paid == 0">{{ "未支付" }}</span> |
||||
<span v-if="scope.row.paid == 1">{{ "已支付" }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<!-- <el-table-column v-if="columns.visible('refundAmount')" prop="refundAmount" label="退款金额" align="center" /> --> |
||||
<el-table-column |
||||
v-if="columns.visible('status')" |
||||
prop="status" |
||||
label="订单状态" |
||||
align="center" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<span v-if="scope.row.status == 0">{{ "等待付款" }}</span> |
||||
<span v-if="scope.row.status == 1">{{ "付款成功" }}</span> |
||||
<span v-if="scope.row.status == 2">{{ "已经核销" }}</span> |
||||
<span v-if="scope.row.status == 3">{{ "已评价" }}</span> |
||||
<span v-if="scope.row.status == -1">{{ "订单取消" }}</span> |
||||
<span v-if="scope.row.status == -2">{{ "订单退款申请中" }}</span> |
||||
<span v-if="scope.row.status == -3">{{ "订单已退款完成" }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
v-if="columns.visible('num')" |
||||
prop="num" |
||||
label="数量" |
||||
align="center" |
||||
/> |
||||
<el-table-column |
||||
v-permission="['admin', 'activityOrder:edit', 'activityOrder:del']" |
||||
label="操作" |
||||
width="100px" |
||||
align="center" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<el-button |
||||
size="mini" |
||||
type="primary" |
||||
:disabled="scope.row.status !== -2" |
||||
@click="refunds(scope.row)" |
||||
style="float: right" |
||||
> |
||||
退款审核</el-button |
||||
> |
||||
<udOperation :data="scope.row" :permission="permission" /> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<el-dialog |
||||
title="退款审核信息" |
||||
:visible.sync="dialogFormVisible" |
||||
width="700px" |
||||
|
||||
> |
||||
<el-form :model="formEs"> |
||||
<el-form-item label="订单ID" :label-width="formLabelWidth"> |
||||
<el-input |
||||
v-model="formEs.id" |
||||
:disabled="true" |
||||
style="width: 370px" |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="审核信息" :label-width="formLabelWidth"> |
||||
<el-input |
||||
type="textarea" |
||||
v-model="formEs.failmsg" |
||||
style="width: 370px" |
||||
></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="approvedNo">审核不通过</el-button> |
||||
<el-button type="primary" @click="approved">审核通过</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
<!--分页组件--> |
||||
<pagination /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import crudActivityOrder from "@/api/activityOrder"; |
||||
import CRUD, { presenter, header, form, crud } from "@crud/crud"; |
||||
import rrOperation from "@crud/RR.operation"; |
||||
import crudOperation from "@crud/CRUD.operation"; |
||||
import udOperation from "@crud/UD.operation"; |
||||
import pagination from "@crud/Pagination"; |
||||
import MaterialList from "@/components/material"; |
||||
import { orderRefund } from "@/api/yxStoreOrder"; |
||||
// crud交由presenter持有 |
||||
const defaultCrud = CRUD({ |
||||
title: "活动订单", |
||||
url: "api/activityOrder", |
||||
sort: "id,desc", |
||||
crudMethod: { ...crudActivityOrder }, |
||||
}); |
||||
const defaultForm = { |
||||
id: null, |
||||
orderCode: null, |
||||
uid: null, |
||||
activityId: null, |
||||
amount: null, |
||||
couponId: null, |
||||
couponAmount: null, |
||||
paid: null, |
||||
refundAmount: null, |
||||
status: null, |
||||
name: null, |
||||
phone: null, |
||||
num: null, |
||||
}; |
||||
export default { |
||||
inject: ["reload"], |
||||
name: "ActivityOrder", |
||||
components: { |
||||
pagination, |
||||
crudOperation, |
||||
rrOperation, |
||||
udOperation, |
||||
MaterialList, |
||||
}, |
||||
mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], |
||||
data() { |
||||
return { |
||||
formEs: { |
||||
failmsg: "", |
||||
id: null, |
||||
status: true, |
||||
}, |
||||
dialogFormVisible: false, |
||||
formLabelWidth: "120px", |
||||
permission: { |
||||
add: ["activityOrder:add"], |
||||
edit: ["activityOrder:edit"], |
||||
del: ["activityOrder:del"], |
||||
}, |
||||
rules: {}, |
||||
}; |
||||
}, |
||||
watch: {}, |
||||
methods: { |
||||
// 获取数据前设置好接口地址 |
||||
[CRUD.HOOK.beforeRefresh]() { |
||||
return true; |
||||
}, // 新增与编辑前做的操作 |
||||
[CRUD.HOOK.afterToCU](crud, form) {}, |
||||
refunds(row) { |
||||
console.log(row); |
||||
this.formEs.id = row.id; |
||||
this.dialogFormVisible = true; |
||||
}, |
||||
approvedNo() { |
||||
if(this.formEs.failmsg == ''){ |
||||
this.$notify.error({ |
||||
message: '请填写审核信息！' |
||||
}); |
||||
return |
||||
} |
||||
this.formEs.status = false; |
||||
orderRefund(this.formEs).then((res) => { |
||||
this.reload(); |
||||
this.dialogFormVisible = true; |
||||
this.$notify({ |
||||
message: res.data, |
||||
type: "success", |
||||
}); |
||||
// if(res.status ==200){ |
||||
// this.$notify({ |
||||
// message:res.msg, |
||||
// type: 'success' |
||||
// }); |
||||
// }else if(res.status ==500){ |
||||
// this.$notify.error({ |
||||
|
||||
// message: res.msg |
||||
// }); |
||||
// } |
||||
}); |
||||
}, |
||||
approved() { |
||||
this.formEs.status = true; |
||||
orderRefund(this.formEs).then((res) => { |
||||
console.log(res, "审核状态"); |
||||
this.reload(); |
||||
this.dialogFormVisible = true; |
||||
this.$notify({ |
||||
message: res.msg, |
||||
type: "success", |
||||
}); |
||||
// if(res.status ==200){ |
||||
// this.$notify({ |
||||
// message:res.msg, |
||||
// type: 'success' |
||||
// }); |
||||
// }else if(res.status ==500){ |
||||
// this.$notify.error({ |
||||
// }); |
||||
// } |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.table-img { |
||||
display: inline-block; |
||||
text-align: center; |
||||
background: #ccc; |
||||
color: #fff; |
||||
white-space: nowrap; |
||||
position: relative; |
||||
overflow: hidden; |
||||
vertical-align: middle; |
||||
width: 32px; |
||||
height: 32px; |
||||
line-height: 32px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,171 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<!--工具栏--> |
||||
<div class="head-container"> |
||||
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'--> |
||||
<crudOperation :permission="permission" /> |
||||
<!--表单组件--> |
||||
<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="600px"> |
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px"> |
||||
<el-form-item label="发布者名字" :label-width="widhts"> |
||||
<el-input v-model="form.name" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="content"> |
||||
<el-input v-model="form.content" style="width: 370px;" /> |
||||
</el-form-item> --> |
||||
<!-- <el-form-item label="webSite"> |
||||
<el-input v-model="form.webSite" style="width: 370px;" /> |
||||
</el-form-item> --> |
||||
<el-form-item label="发布者手机号" :label-width="widhts"> |
||||
<el-input v-model="form.phone" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<el-form-item label="核销管理员" :label-width="widhts"> |
||||
<el-select v-model="form.uid" placeholder="请选择发布者管理员" style="width: 370px;"> |
||||
<el-option |
||||
v-for="(item,index) in options" |
||||
:key="index" |
||||
:label="item.nickname" |
||||
:value="item.uid"> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="发布者头像" :label-width="widhts"> |
||||
<!-- <el-input v-model="form.image" style="width: 370px;" /> --> |
||||
<single-pic |
||||
v-model="form.image" |
||||
type="image" |
||||
:num="1" |
||||
:width="150" |
||||
:height="150" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="发布状态" :label-width="widhts"> |
||||
<!-- <el-input v-model="form.status" style="width: 370px;" /> --> |
||||
<el-radio-group v-model="form.status"> |
||||
<el-radio :label="0">不发布</el-radio> |
||||
<el-radio :label="1">发布</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="contact"> |
||||
<el-input v-model="form.contact" style="width: 370px;" /> |
||||
</el-form-item> --> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
||||
<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
<!--表格渲染--> |
||||
<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler"> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column v-if="columns.visible('id')" prop="id" label="id" align="center" /> |
||||
<el-table-column v-if="columns.visible('uid')" prop="uid" label="uid" /> |
||||
<el-table-column v-if="columns.visible('name')" prop="name" label="发布者名字" align="center" /> |
||||
<!-- <el-table-column v-if="columns.visible('webSite')" prop="webSite" label="webSite" /> --> |
||||
<el-table-column v-if="columns.visible('phone')" prop="phone" label="发布者手机号" align="center" /> |
||||
<el-table-column v-if="columns.visible('image')" prop="image" label="发布者头像" align="center" > |
||||
<template slot-scope="scope"> |
||||
<a :href="scope.row.image" style="color: #42b983" target="_blank" |
||||
><img :src="scope.row.image" alt="点击打开" class="el-avatar" |
||||
/></a> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column v-if="columns.visible('status')" prop="status" label="发布状态" align="center" > |
||||
<template slot-scope="scope"> |
||||
<span v-if="scope.row.status ==0">{{'未发布'}}</span> |
||||
<span v-if="scope.row.status ==1">{{'已发布'}}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<!-- <el-table-column v-if="columns.visible('contact')" prop="contact" label="contact" /> --> |
||||
<el-table-column v-permission="['admin','activityPublisher:edit','activityPublisher:del']" label="操作" width="150px" align="center"> |
||||
<template slot-scope="scope"> |
||||
<udOperation |
||||
:data="scope.row" |
||||
:permission="permission" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<!--分页组件--> |
||||
<pagination /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import crudActivityPublisher from '@/api/activityPublisher' |
||||
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
||||
import rrOperation from '@crud/RR.operation' |
||||
import crudOperation from '@crud/CRUD.operation' |
||||
import udOperation from '@crud/UD.operation' |
||||
import pagination from '@crud/Pagination' |
||||
import MaterialList from "@/components/material"; |
||||
import singlePic from "@/components/singlematerial"; |
||||
import {gets} from '@/api/publisher' |
||||
|
||||
// crud交由presenter持有 |
||||
const defaultCrud = CRUD({ title: '活动发布', url: 'api/activityPublisher', sort: 'id,desc', crudMethod: { ...crudActivityPublisher }}) |
||||
const defaultForm = { id: null, uid: null, name: null, desc: null, content: null, webSite: null, phone: null, image: '', status: 0, contact: null, createTime: null, updateTime: null, isDel: null } |
||||
export default { |
||||
name: 'ActivityPublisher', |
||||
components: { pagination, crudOperation, rrOperation, udOperation ,MaterialList,singlePic}, |
||||
mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], |
||||
dicts: ['is_enable'], |
||||
data() { |
||||
return { |
||||
options: [], |
||||
widhts:'120px', |
||||
permission: { |
||||
add: [ 'activityPublisher:add'], |
||||
edit: ['activityPublisher:edit'], |
||||
del: [ 'activityPublisher:del'] |
||||
}, |
||||
rules: { |
||||
name: [ |
||||
{ required: true, message: '不能为空', trigger: 'blur' } |
||||
] |
||||
} } |
||||
}, |
||||
watch: { |
||||
}, |
||||
methods: { |
||||
// 获取数据前设置好接口地址 |
||||
[CRUD.HOOK.beforeRefresh]() { |
||||
return true |
||||
}, // 新增与编辑前做的操作 |
||||
[CRUD.HOOK.afterToCU](crud, form) { |
||||
this.publishers() |
||||
}, |
||||
publishers(){ |
||||
let plams = { |
||||
page: 0, |
||||
size: 500, |
||||
sort: 'uid,desc' |
||||
} |
||||
gets(plams).then(res=>{ |
||||
console.log(res.content) |
||||
this.options = res.content |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped> |
||||
.table-img { |
||||
display: inline-block; |
||||
text-align: center; |
||||
background: #ccc; |
||||
color: #fff; |
||||
white-space: nowrap; |
||||
position: relative; |
||||
overflow: hidden; |
||||
vertical-align: middle; |
||||
width: 32px; |
||||
height: 32px; |
||||
line-height: 32px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,122 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<!--工具栏--> |
||||
<div class="head-container"> |
||||
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'--> |
||||
<crudOperation :permission="permission" /> |
||||
<!--表单组件--> |
||||
<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px"> |
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px"> |
||||
<el-form-item label="id" prop="id"> |
||||
<el-input v-model="form.id" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<el-form-item label="分类名称"> |
||||
<el-input v-model="form.name" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<el-form-item label="createTime"> |
||||
<el-input v-model="form.createTime" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<el-form-item label="updateTime"> |
||||
<el-input v-model="form.updateTime" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<el-form-item label="isDel"> |
||||
<el-input v-model="form.isDel" style="width: 370px;" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
||||
<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
<!--表格渲染--> |
||||
<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler"> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column v-if="columns.visible('id')" prop="id" label="id" /> |
||||
<el-table-column v-if="columns.visible('name')" prop="name" label="分类名称" /> |
||||
<el-table-column v-if="columns.visible('createTime')" prop="createTime" label="createTime"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.createTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column v-if="columns.visible('updateTime')" prop="updateTime" label="updateTime"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.updateTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column v-if="columns.visible('isDel')" prop="isDel" label="isDel" /> |
||||
<el-table-column v-permission="['admin','articleCatetory:edit','articleCatetory:del']" label="操作" width="150px" align="center"> |
||||
<template slot-scope="scope"> |
||||
<udOperation |
||||
:data="scope.row" |
||||
:permission="permission" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<!--分页组件--> |
||||
<pagination /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import crudArticleCatetory from '@/api/articleCatetory' |
||||
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
||||
import rrOperation from '@crud/RR.operation' |
||||
import crudOperation from '@crud/CRUD.operation' |
||||
import udOperation from '@crud/UD.operation' |
||||
import pagination from '@crud/Pagination' |
||||
import MaterialList from "@/components/material"; |
||||
|
||||
// crud交由presenter持有 |
||||
const defaultCrud = CRUD({ title: '资讯分类', url: 'api/articleCatetory', sort: 'id,desc', crudMethod: { ...crudArticleCatetory }}) |
||||
const defaultForm = { id: null, name: null, createTime: null, updateTime: null, isDel: null } |
||||
export default { |
||||
name: 'ArticleCatetory', |
||||
components: { pagination, crudOperation, rrOperation, udOperation ,MaterialList}, |
||||
mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], |
||||
data() { |
||||
return { |
||||
|
||||
permission: { |
||||
add: ['admin', 'articleCatetory:add'], |
||||
edit: ['admin', 'articleCatetory:edit'], |
||||
del: ['admin', 'articleCatetory:del'] |
||||
}, |
||||
rules: { |
||||
id: [ |
||||
{ required: true, message: '不能为空', trigger: 'blur' } |
||||
] |
||||
} } |
||||
}, |
||||
watch: { |
||||
}, |
||||
methods: { |
||||
// 获取数据前设置好接口地址 |
||||
[CRUD.HOOK.beforeRefresh]() { |
||||
return true |
||||
}, // 新增与编辑前做的操作 |
||||
[CRUD.HOOK.afterToCU](crud, form) { |
||||
}, |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped> |
||||
.table-img { |
||||
display: inline-block; |
||||
text-align: center; |
||||
background: #ccc; |
||||
color: #fff; |
||||
white-space: nowrap; |
||||
position: relative; |
||||
overflow: hidden; |
||||
vertical-align: middle; |
||||
width: 32px; |
||||
height: 32px; |
||||
line-height: 32px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,315 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px"> |
||||
|
||||
<el-form-item label="标题"> |
||||
<el-input v-model="form.title" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="作者"> |
||||
<el-input v-model="form.author" style="width: 370px;" /> |
||||
</el-form-item> --> |
||||
<el-form-item label="发布者"> |
||||
<el-select v-model="form.authorId" placeholder="请选择发布者"> |
||||
<el-option |
||||
v-for="item in authorList" |
||||
:key="item.id" |
||||
:label="item.enterpriseName" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="封面"> |
||||
<MaterialList v-model="form.imageArr" type="image" :num="1" :width="350" :height="115" /> |
||||
</el-form-item> |
||||
<el-form-item label="资讯分类"> |
||||
<el-select v-model="form.cid" placeholder="请选择资讯分类"> |
||||
<el-option |
||||
v-for="item in articleCatetoryList" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="收费类型" prop="chargeType"> |
||||
<el-radio-group v-model="form.chargeType"> |
||||
<el-radio :label="0">免费</el-radio> |
||||
<el-radio :label="1">收费</el-radio> |
||||
<el-radio :label="2">积分兑换</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item :label="form.chargeType == 1 ? '文章费用' : '所需积分'" prop="courseCharge" v-if="form.chargeType == 1 || form.chargeType == 2"> |
||||
<el-input v-model="form.articleCharge" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" |
||||
maxlength="6" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<el-form-item label="文章等级"> |
||||
<el-input-number v-model="form.level" :min="1" label="文章等级"></el-input-number> |
||||
</el-form-item> |
||||
<el-form-item label="音频"> |
||||
<fileUpload v-model="form.audio" @input="audioInput" @change="audioChange"></fileUpload> |
||||
</el-form-item> |
||||
<el-form-item label="视频"> |
||||
<fileUpload v-model="form.video" @input="videoInput" @change="videoChange"></fileUpload> |
||||
</el-form-item> |
||||
<el-form-item label="简介"> |
||||
<el-input v-model="form.synopsis" style="width: 370px;" rows="5" type="textarea" /> |
||||
</el-form-item> --> |
||||
<el-form-item label="正文"> |
||||
<!--<editor v-model="form.content" />--> |
||||
<ueditor-wrap v-model="form.content" :config="myConfig" @beforeInit="addCustomDialog" style="width: 90%;"></ueditor-wrap> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<!--<el-button type="text" @click="cancel">取消</el-button>--> |
||||
<el-button :loading="loading" type="primary" @click="doSubmit">保存</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
<!--<div slot="footer" class="dialog-footer">--> |
||||
<!--<el-button type="text" @click="cancel">取消</el-button>--> |
||||
<!--<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>--> |
||||
<!--</div>--> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { add, edit, get, getAuthor, getArticleCatetory } from '@/api/yxArticle' |
||||
import picUpload from '@/components/pic-upload' |
||||
import editor from '../components/Editor' |
||||
import yamedit from '@/components/YamlEdit' |
||||
import MaterialList from '@/components/material' |
||||
import UeditorWrap from 'vue-ueditor-wrap'; |
||||
import fileUpload from '@/components/file-upload'; |
||||
import { initData } from '@/api/data' |
||||
export default { |
||||
components: { editor, picUpload, yamedit, MaterialList, UeditorWrap,fileUpload }, |
||||
// props: { |
||||
// isAdd: { |
||||
// type: Boolean, |
||||
// required: true |
||||
// } |
||||
// }, |
||||
data() { |
||||
return { |
||||
loading: false, dialog: false, |
||||
form: { |
||||
id: '', |
||||
cids: [], |
||||
cid: '', |
||||
categoryId:'', |
||||
chargeType:0, |
||||
articleCharge:'', |
||||
level:'', |
||||
title: '', |
||||
author: '', |
||||
imageInput: '', |
||||
imageArr: [], |
||||
synopsis: '', |
||||
content: '', |
||||
shareTitle: '', |
||||
shareSynopsis: '', |
||||
visit: '', |
||||
sort: '', |
||||
url: '', |
||||
status: '', |
||||
addTime: '', |
||||
hide: '', |
||||
merId: '', |
||||
productId: '', |
||||
isHot: '', |
||||
isBanner: '' |
||||
}, |
||||
rules: { |
||||
}, |
||||
myConfig: { |
||||
autoHeightEnabled: false, // 编辑器不自动被内容撑高 |
||||
initialFrameHeight: 500, // 初始容器高度 |
||||
initialFrameWidth: '100%', // 初始容器宽度 |
||||
UEDITOR_HOME_URL: '/UEditor/', |
||||
serverUrl: '' |
||||
}, |
||||
categoryList:[], |
||||
authorList: [], |
||||
articleCatetoryList: [] |
||||
} |
||||
}, |
||||
watch: { |
||||
}, |
||||
created() { |
||||
// this.getCategory(); |
||||
this.getArticleCatetory(); |
||||
this.getAuthor() |
||||
this.form.id = this.$route.params.id |
||||
this.$nextTick(() => { |
||||
//this.init() |
||||
if(this.form.id){ |
||||
get(this.form.id).then(data => { |
||||
this.form = data |
||||
this.form.imageArr = [data.imageInput] |
||||
}) |
||||
} |
||||
|
||||
}) |
||||
}, |
||||
methods: { |
||||
getArticleCatetory(){ |
||||
getArticleCatetory().then((res)=>{ |
||||
this.articleCatetoryList = res |
||||
}) |
||||
}, |
||||
getAuthor(){ |
||||
getAuthor().then((res)=>{ |
||||
this.authorList = res |
||||
}) |
||||
}, |
||||
audioInput(file){ |
||||
this.form.audio = file; |
||||
// console.log('file',file) |
||||
}, |
||||
audioChange(file){ |
||||
this.form.audio = ''; |
||||
// console.log('remove',file) |
||||
}, |
||||
videoInput(file){ |
||||
this.form.video = file; |
||||
// console.log('file',file) |
||||
}, |
||||
videoChange(file){ |
||||
this.form.video = ''; |
||||
// console.log('remove',file) |
||||
}, |
||||
// getCategory(){ |
||||
// initData('/api/CourseCategory',this.getQueryParams()).then((res)=>{ |
||||
// // console.log(res) |
||||
// res.content.forEach((item)=>{ |
||||
// item.label = item.categoryName |
||||
// item.value = item.id |
||||
// item.children = item.categoryList |
||||
// item.categoryList.forEach((child)=>{ |
||||
// child.label = child.categoryName |
||||
// child.value = child.id |
||||
// child.children = child.categoryList |
||||
// }) |
||||
// }) |
||||
// this.categoryList = res.content |
||||
// }) |
||||
// }, |
||||
getQueryParams: function() { |
||||
return { |
||||
page: 0, |
||||
size: 200, |
||||
sort: ['id,desc'], |
||||
} |
||||
}, |
||||
handleChange(value){ |
||||
this.form.cids = value; |
||||
}, |
||||
addCustomDialog () { |
||||
window.UE.registerUI('yshop', function (editor, uiName) { |
||||
let dialog = new window.UE.ui.Dialog({ |
||||
iframeUrl: '/yshop/materia/index', |
||||
editor: editor, |
||||
name: uiName, |
||||
title: '上传图片', |
||||
cssRules: 'width:1200px;height:500px;padding:20px;' |
||||
}); |
||||
this.dialog = dialog; |
||||
|
||||
var btn = new window.UE.ui.Button({ |
||||
name: 'dialog-button', |
||||
title: '上传图片', |
||||
cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`, |
||||
onclick: function () { |
||||
dialog.render(); |
||||
dialog.open(); |
||||
} |
||||
}); |
||||
|
||||
return btn; |
||||
}, 37); |
||||
}, |
||||
cancel() { |
||||
this.resetForm() |
||||
}, |
||||
doSubmit() { |
||||
this.loading = true |
||||
if(this.form.imageArr.length > 0){ |
||||
this.form.imageInput = this.form.imageArr.join(',') |
||||
}else{ |
||||
this.form.imageInput = '' |
||||
} |
||||
|
||||
if (!this.form.id) { |
||||
this.doAdd() |
||||
} else this.doEdit() |
||||
}, |
||||
doAdd() { |
||||
add(this.form).then(res => { |
||||
this.resetForm() |
||||
this.$notify({ |
||||
title: '添加成功', |
||||
type: 'success', |
||||
duration: 2500 |
||||
}) |
||||
this.loading = false |
||||
// this.$parent.init() |
||||
setTimeout(() => { |
||||
this.$router.push({ path: '/wechat/wearticle' }); |
||||
}, 500); |
||||
}).catch(err => { |
||||
this.loading = false |
||||
console.log(err.response.data.message) |
||||
}) |
||||
}, |
||||
doEdit() { |
||||
edit(this.form).then(res => { |
||||
this.resetForm() |
||||
this.$notify({ |
||||
title: '修改成功', |
||||
type: 'success', |
||||
duration: 2500 |
||||
}) |
||||
this.loading = false |
||||
// this.$parent.init() |
||||
setTimeout(() => { |
||||
this.$router.push({ path: '/article/index' }); |
||||
}, 500); |
||||
}).catch(err => { |
||||
this.loading = false |
||||
console.log(err.response.data.message) |
||||
}) |
||||
}, |
||||
resetForm() { |
||||
this.dialog = false |
||||
this.$refs['form'].resetFields() |
||||
this.form = { |
||||
id: '', |
||||
cids: [], |
||||
chargeType:0, |
||||
categoryId:'', |
||||
articleCharge:'', |
||||
level:'', |
||||
title: '', |
||||
author: '', |
||||
imageInput: '', |
||||
synopsis: '', |
||||
shareTitle: '', |
||||
shareSynopsis: '', |
||||
visit: '', |
||||
sort: '', |
||||
url: '', |
||||
status: '', |
||||
addTime: '', |
||||
hide: '', |
||||
adminId: '', |
||||
merId: '', |
||||
productId: '', |
||||
isHot: '', |
||||
isBanner: '' |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,183 @@
|
||||
<template> |
||||
<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '新增' : '编辑'" width="1000px"> |
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px"> |
||||
<el-form-item label="标题"> |
||||
<el-input v-model="form.title" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<el-form-item label="作者"> |
||||
<el-input v-model="form.author" style="width: 370px;" /> |
||||
</el-form-item> |
||||
<el-form-item label="封面"> |
||||
<MaterialList v-model="form.imageArr" style="width: 370px" type="image" :num="1" :width="150" :height="150" /> |
||||
</el-form-item> |
||||
<el-form-item label="简介"> |
||||
<el-input v-model="form.synopsis" style="width: 370px;" rows="5" type="textarea" /> |
||||
</el-form-item> |
||||
<el-form-item label="正文"> |
||||
<!--<editor v-model="form.content" />--> |
||||
<ueditor-wrap v-model="form.content" :config="myConfig" @beforeInit="addCustomDialog" style="width: 90%;"></ueditor-wrap> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button type="text" @click="cancel">取消</el-button> |
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script> |
||||
import { add, edit } from '@/api/yxArticle' |
||||
import picUpload from '@/components/pic-upload' |
||||
import editor from '../components/Editor' |
||||
import yamedit from '@/components/YamlEdit' |
||||
import MaterialList from '@/components/material' |
||||
import UeditorWrap from 'vue-ueditor-wrap'; |
||||
export default { |
||||
components: { editor, picUpload, yamedit, MaterialList, UeditorWrap }, |
||||
props: { |
||||
isAdd: { |
||||
type: Boolean, |
||||
required: true |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
loading: false, dialog: false, |
||||
form: { |
||||
id: '', |
||||
cid: '', |
||||
title: '', |
||||
author: '', |
||||
imageInput: '', |
||||
imageArr: [], |
||||
synopsis: '', |
||||
content: '', |
||||
shareTitle: '', |
||||
shareSynopsis: '', |
||||
visit: '', |
||||
sort: '', |
||||
url: '', |
||||
status: '', |
||||
addTime: '', |
||||
hide: '', |
||||
merId: '', |
||||
productId: '', |
||||
isHot: '', |
||||
isBanner: '' |
||||
}, |
||||
rules: { |
||||
}, |
||||
myConfig: { |
||||
autoHeightEnabled: false, // 编辑器不自动被内容撑高 |
||||
initialFrameHeight: 500, // 初始容器高度 |
||||
initialFrameWidth: '100%', // 初始容器宽度 |
||||
UEDITOR_HOME_URL: '/UEditor/', |
||||
serverUrl: 'http://35.201.165.105:8000/controller.php' |
||||
} |
||||
} |
||||
}, |
||||
watch: { |
||||
}, |
||||
methods: { |
||||
addCustomDialog (editorId) { |
||||
window.UE.registerUI('test-dialog', function (editor, uiName) { |
||||
let dialog = new window.UE.ui.Dialog({ |
||||
iframeUrl: '/admin/widget.images/index.html?fodder=dialog', |
||||
editor: editor, |
||||
name: uiName, |
||||
title: '上传图片', |
||||
cssRules: 'width:1200px;height:500px;padding:20px;' |
||||
}); |
||||
this.dialog = dialog; |
||||
// 参考上面的自定义按钮 |
||||
var btn = new window.UE.ui.Button({ |
||||
name: 'dialog-button', |
||||
title: '上传图片', |
||||
cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`, |
||||
onclick: function () { |
||||
// 渲染dialog |
||||
dialog.render(); |
||||
dialog.open(); |
||||
} |
||||
}); |
||||
|
||||
return btn; |
||||
}, 37); |
||||
}, |
||||
cancel() { |
||||
this.resetForm() |
||||
}, |
||||
doSubmit() { |
||||
this.loading = true |
||||
if(this.form.imageArr.length > 0){ |
||||
this.form.imageInput = this.form.imageArr.join(',') |
||||
}else{ |
||||
this.form.imageInput = '' |
||||
} |
||||
|
||||
if (this.isAdd) { |
||||
this.doAdd() |
||||
} else this.doEdit() |
||||
}, |
||||
doAdd() { |
||||
add(this.form).then(res => { |
||||
this.resetForm() |
||||
this.$notify({ |
||||
title: '添加成功', |
||||
type: 'success', |
||||
duration: 2500 |
||||
}) |
||||
this.loading = false |
||||
this.$parent.init() |
||||
}).catch(err => { |
||||
this.loading = false |
||||
console.log(err.response.data.message) |
||||
}) |
||||
}, |
||||
doEdit() { |
||||
edit(this.form).then(res => { |
||||
this.resetForm() |
||||
this.$notify({ |
||||
title: '修改成功', |
||||
type: 'success', |
||||
duration: 2500 |
||||
}) |
||||
this.loading = false |
||||
this.$parent.init() |
||||
}).catch(err => { |
||||
this.loading = false |
||||
console.log(err.response.data.message) |
||||
}) |
||||
}, |
||||
resetForm() { |
||||
this.dialog = false |
||||
this.$refs['form'].resetFields() |
||||
this.form = { |
||||
id: '', |
||||
cid: '', |
||||
title: '', |
||||
author: '', |
||||
imageInput: '', |
||||
synopsis: '', |
||||
shareTitle: '', |
||||
shareSynopsis: '', |
||||
visit: '', |
||||
sort: '', |
||||
url: '', |
||||
status: '', |
||||
addTime: '', |
||||
hide: '', |
||||
adminId: '', |
||||
merId: '', |
||||
productId: '', |
||||
isHot: '', |
||||
isBanner: '' |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,190 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<!--工具栏--> |
||||
<div class="head-container"> |
||||
<!-- 新增 --> |
||||
<div style="display: inline-block;margin: 0px 2px;"> |
||||
<el-button |
||||
v-permission="['admin','YXARTICLE_ALL','YXARTICLE_CREATE']" |
||||
class="filter-item" |
||||
size="mini" |
||||
type="primary" |
||||
icon="el-icon-plus" |
||||
> |
||||
<router-link :to="'/information/form'"> |
||||
新增 |
||||
</router-link> |
||||
</el-button> |
||||
</div> |
||||
</div> |
||||
<!--表单组件--> |
||||
<!--<eForm ref="form" :is-add="isAdd" />--> |
||||
<!--表格渲染--> |
||||
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;"> |
||||
<el-table-column prop="id" label="ID" /> |
||||
<el-table-column prop="title" label="标题" /> |
||||
<el-table-column prop="author" label="作者" /> |
||||
<el-table-column ref="table" prop="imageInput" label="封面"> |
||||
<template slot-scope="scope"> |
||||
<a :href="scope.row.imageInput" style="color: #42b983" target="_blank"><img :src="scope.row.imageInput" alt="点击打开" class="el-avatar"></a> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ scope.row.createTime }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column v-if="checkPermission(['admin','YXARTICLE_ALL','YXARTICLE_EDIT','YXARTICLE_DELETE'])" label="操作" width="220px" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-permission="['admin','YXARTICLE_ALL','YXARTICLE_EDIT']" size="mini" |
||||
type="primary" icon="el-icon-edit" |
||||
> |
||||
<router-link :to="'/information/form/'+scope.row.id"> |
||||
编辑 |
||||
</router-link> |
||||
</el-button> |
||||
<el-popover |
||||
:ref="scope.row.id" |
||||
v-permission="['admin','YXARTICLE_ALL','YXARTICLE_DELETE']" |
||||
placement="top" |
||||
width="180" |
||||
> |
||||
<p>确定删除本条数据吗？</p> |
||||
<div style="text-align: right; margin: 0"> |
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button> |
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button> |
||||
</div> |
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" /> |
||||
</el-popover> |
||||
<el-popover |
||||
:ref="'item'+scope.row.id" |
||||
v-permission="['admin','YXARTICLE_ALL','YXARTICLE_DELETE']" |
||||
placement="top" |
||||
width="180" |
||||
> |
||||
<p>确定发布本条数据吗？</p> |
||||
<div style="text-align: right; margin: 0"> |
||||
<el-button size="mini" type="text" @click="$refs['item'+scope.row.id].doClose()">取消</el-button> |
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subPublish(scope.row.id)">确定</el-button> |
||||
</div> |
||||
<el-button slot="reference" type="primary" size="mini">发布</el-button> |
||||
</el-popover> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<!--分页组件--> |
||||
<el-pagination |
||||
:total="total" |
||||
:current-page="page + 1" |
||||
style="margin-top: 8px;" |
||||
layout="total, prev, pager, next, sizes" |
||||
@size-change="sizeChange" |
||||
@current-change="pageChange" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import checkPermission from '@/utils/permission' |
||||
import initData from '@/mixins/crud' |
||||
import { del, publish } from '@/api/yxArticle' |
||||
import eForm from './form' |
||||
import { formatTime } from '@/utils/index' |
||||
export default { |
||||
components: { eForm }, |
||||
mixins: [initData], |
||||
data() { |
||||
return { |
||||
delLoading: false |
||||
} |
||||
}, |
||||
created() { |
||||
this.$nextTick(() => { |
||||
this.init() |
||||
}) |
||||
}, |
||||
methods: { |
||||
formatTime, |
||||
checkPermission, |
||||
beforeInit() { |
||||
this.url = 'api/yxArticle' |
||||
const sort = 'id,desc' |
||||
this.params = { page: this.page, size: this.size, sort: sort } |
||||
return true |
||||
}, |
||||
subDelete(id) { |
||||
this.delLoading = true |
||||
del(id).then(res => { |
||||
this.delLoading = false |
||||
this.$refs[id].doClose() |
||||
this.dleChangePage() |
||||
this.init() |
||||
this.$notify({ |
||||
title: '删除成功', |
||||
type: 'success', |
||||
duration: 2500 |
||||
}) |
||||
}).catch(err => { |
||||
this.delLoading = false |
||||
this.$refs[id].doClose() |
||||
console.log(err.response.data.message) |
||||
}) |
||||
}, |
||||
subPublish(id) { |
||||
this.delLoading = true |
||||
publish(id).then(res => { |
||||
this.delLoading = false |
||||
this.$refs[id].doClose() |
||||
this.dleChangePage() |
||||
this.init() |
||||
this.$notify({ |
||||
title: '发布成功', |
||||
type: 'success', |
||||
duration: 2500 |
||||
}) |
||||
}).catch(err => { |
||||
this.delLoading = false |
||||
this.$refs[id].doClose() |
||||
console.log(err.response.data.message) |
||||
}) |
||||
}, |
||||
add() { |
||||
this.isAdd = true |
||||
this.$refs.form.dialog = true |
||||
}, |
||||
edit(data) { |
||||
this.isAdd = false |
||||
const _this = this.$refs.form |
||||
_this.form = { |
||||
id: data.id, |
||||
cid: data.cid, |
||||
title: data.level, |
||||
title: data.title, |
||||
author: data.author, |
||||
imageInput: data.imageInput, |
||||
imageArr: data.imageInput.split(','), |
||||
synopsis: data.synopsis, |
||||
content: data.content, |
||||
shareTitle: data.shareTitle, |
||||
shareSynopsis: data.shareSynopsis, |
||||
visit: data.visit, |
||||
sort: data.sort, |
||||
url: data.url, |
||||
status: data.status, |
||||
addTime: data.addTime, |
||||
hide: data.hide, |
||||
adminId: data.adminId, |
||||
merId: data.merId, |
||||
productId: data.productId, |
||||
isHot: data.isHot, |
||||
isBanner: data.isBanner |
||||
} |
||||
_this.dialog = true |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue