增加私域专题模块
This commit is contained in:
lcc
@@ -0,0 +1,106 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
/**
|
||||
* 分页查询模块
|
||||
* @param params 查询条件
|
||||
*/
|
||||
export async function pageSyTopicModule(params) {
|
||||
const res = await request.get('/sytopic/module/page', {
|
||||
params
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
return res.data.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加专题
|
||||
* @param data
|
||||
*/
|
||||
export async function addTopicModule(data) {
|
||||
const res = await request.post('/sytopic/module', data);
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改专题
|
||||
* @param data
|
||||
*/
|
||||
export async function updateTopicModule(data) {
|
||||
const res = await request.put('/sytopic/module', data);
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除
|
||||
* @param ids id集合
|
||||
*/
|
||||
export async function removeTopicModule(ids) {
|
||||
const res = await request.delete('/sytopic/module/delete', {
|
||||
data: { ids }
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取类型列表
|
||||
*/
|
||||
export async function pageTopicModuleTypes(params) {
|
||||
const res = await request.get('/sytopic/module/types', {
|
||||
params
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
return res.data.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页查询模块配置项
|
||||
* @param params 查询条件
|
||||
*/
|
||||
export async function pageSyTopicModuleOptions(params) {
|
||||
const res = await request.get('/sytopic/module/options', {
|
||||
params
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
return res.data.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加专题配置项
|
||||
* @param data
|
||||
*/
|
||||
export async function addTopicModuleOptions(data) {
|
||||
const res = await request.post('/sytopic/module/options', data);
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除模块配置
|
||||
* @param id id
|
||||
*/
|
||||
export async function removeTopicModuleOption(id) {
|
||||
const res = await request.delete('/sytopic/module/options', {
|
||||
data: { id }
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
/**
|
||||
* 分页查询专题
|
||||
* @param params 查询条件
|
||||
*/
|
||||
export async function pageSyTopic(params) {
|
||||
const res = await request.get('/sytopic/topic/page', {
|
||||
params
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
return res.data.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加专题
|
||||
* @param data
|
||||
*/
|
||||
export async function addTopic(data) {
|
||||
const res = await request.post('/sytopic/topic', data);
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改专题
|
||||
* @param data
|
||||
*/
|
||||
export async function updateTopic(data) {
|
||||
const res = await request.put('/sytopic/topic', data);
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改活动状态
|
||||
* @param id 专题id
|
||||
* @param status 状态
|
||||
*/
|
||||
export async function updateTopicStatus(id, status) {
|
||||
const res = await request.put('/sytopic/topic/status', {
|
||||
id,
|
||||
status
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除
|
||||
* @param ids id集合
|
||||
*/
|
||||
export async function removeTopic(ids) {
|
||||
const res = await request.delete('/sytopic/topic/delete', {
|
||||
data: { ids }
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
<!-- 上传图片组件 -->
|
||||
<template>
|
||||
<ele-image-upload
|
||||
v-model="imgs"
|
||||
:limit="limit"
|
||||
:drag="true"
|
||||
:multiple="multiple"
|
||||
:upload-handler="onHandler"
|
||||
@upload="onUpload"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleImageUpload from 'ele-admin/es/ele-image-upload';
|
||||
import request from '@/utils/request';
|
||||
export default {
|
||||
components: {
|
||||
EleImageUpload
|
||||
},
|
||||
name: 'UploadImg',
|
||||
props: {
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
images: {
|
||||
default: null,
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgs: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (this.images && this.images.length > 0) {
|
||||
this.imgs = this.images;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emitInput() {
|
||||
this.$emit('input', this.imgs);
|
||||
},
|
||||
onHandler(file) {
|
||||
const item = {
|
||||
file,
|
||||
uid: file.uid,
|
||||
name: file.name,
|
||||
progress: 0,
|
||||
status: null
|
||||
};
|
||||
if (!file.type.startsWith('image')) {
|
||||
this.$message.error('只能选择图片');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
this.$message.error('大小不能超过 2MB');
|
||||
return;
|
||||
}
|
||||
item.url = window.URL.createObjectURL(file);
|
||||
// 关键就是这里要自己 push 添加数据而不是靠 v-modal 自动更新
|
||||
this.imgs.push(item);
|
||||
this.onUpload(item);
|
||||
},
|
||||
/* 上传 item */
|
||||
onUpload(item) {
|
||||
let that = this;
|
||||
item.status = 'uploading';
|
||||
const formData = new FormData();
|
||||
formData.append('file', item.file);
|
||||
request({
|
||||
url: '/upload',
|
||||
method: 'post',
|
||||
data: formData,
|
||||
onUploadProgress: (e) => {
|
||||
if (e.lengthComputable) {
|
||||
item.progress = (e.loaded / e.total) * 100;
|
||||
}
|
||||
}
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data.code === 0) {
|
||||
item.status = 'done';
|
||||
item.url = res.data.data.full_url;
|
||||
item.fileUrl = res.data.data.url;
|
||||
that.emitInput();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
item.status = 'exception';
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
imgs: function () {
|
||||
this.emitInput();
|
||||
},
|
||||
images: function () {
|
||||
this.imgs = this.images;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<ele-modal
|
||||
width="800px"
|
||||
:visible="visible"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="true"
|
||||
custom-class="ele-dialog-form"
|
||||
:title="isUpdate ? '修改模块' : '添加模块'"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="82px">
|
||||
<el-form-item label="模块名称:" prop="title">
|
||||
<el-input
|
||||
clearable
|
||||
:maxlength="60"
|
||||
v-model="form.title"
|
||||
placeholder="请输入模块名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型:" prop="type">
|
||||
<el-radio-group v-model="form.type" :disabled="isUpdate">
|
||||
<el-radio
|
||||
:label="parseInt(key)"
|
||||
v-for="(item, key) in types"
|
||||
:key="key"
|
||||
>
|
||||
{{ item }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序值:" prop="sort">
|
||||
<el-input
|
||||
clearable
|
||||
:maxlength="60"
|
||||
v-model="form.sort"
|
||||
type="number"
|
||||
placeholder="请输入排序值"
|
||||
/>
|
||||
<div class="ele-text-secondary"> 数值越大越靠前面 </div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
<el-button @click="updateVisible(false)">取消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="save">
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addTopicModule, updateTopicModule } from '@/api/sytopic/module';
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
// 全部机构
|
||||
types: Object,
|
||||
// 修改回显的数据
|
||||
data: Object,
|
||||
topicId: String
|
||||
},
|
||||
data() {
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
title: '',
|
||||
type: 1,
|
||||
sort: 0,
|
||||
topicId: this.topicId
|
||||
};
|
||||
return {
|
||||
editVersion: false,
|
||||
defaultForm,
|
||||
// 表单数据
|
||||
form: { ...defaultForm },
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
title: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入活动标题',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
// 提交状态
|
||||
loading: false,
|
||||
// 是否是修改
|
||||
isUpdate: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 是否开启响应式布局
|
||||
styleResponsive() {
|
||||
return this.$store.state.theme.styleResponsive;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
this.loading = true;
|
||||
const data = {
|
||||
...this.form
|
||||
};
|
||||
const saveOrUpdate = this.isUpdate
|
||||
? updateTopicModule
|
||||
: addTopicModule;
|
||||
saveOrUpdate(data)
|
||||
.then((msg) => {
|
||||
this.loading = false;
|
||||
this.$message.success(msg);
|
||||
this.updateVisible(false);
|
||||
this.$emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
});
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(visible) {
|
||||
this.editVersion = false;
|
||||
if (visible) {
|
||||
this.editVersion = true;
|
||||
if (this.data.id) {
|
||||
this.$util.assignObject(this.form, {
|
||||
...this.data
|
||||
});
|
||||
this.isUpdate = true;
|
||||
} else {
|
||||
this.isUpdate = false;
|
||||
}
|
||||
} else {
|
||||
this.$refs.form.clearValidate();
|
||||
this.form = { ...this.defaultForm };
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
@@ -0,0 +1,315 @@
|
||||
<template>
|
||||
<ele-modal
|
||||
width="800px"
|
||||
:visible="visible"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="true"
|
||||
custom-class="ele-dialog-form"
|
||||
title="添加模块配置"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<el-container>
|
||||
<el-aside width="150px">
|
||||
<div
|
||||
style="margin-top: 5px; width: 150px"
|
||||
v-for="(item, key) in modelList"
|
||||
:key="key"
|
||||
>
|
||||
<el-tag
|
||||
:effect="selected === item.id ? 'dark' : 'plain'"
|
||||
closable
|
||||
class="tag-custom"
|
||||
@close="handleClose(item)"
|
||||
@click="showOption(item)"
|
||||
>{{ item.title }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-button
|
||||
:type="selected === 0 ? 'primary' : ''"
|
||||
icon="el-icon-plus"
|
||||
class="ele-btn-icon"
|
||||
style="margin-top: 5px"
|
||||
size="mini"
|
||||
@click="addItem"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="82px">
|
||||
<el-form-item label="标题:" prop="title">
|
||||
<el-input
|
||||
clearable
|
||||
:maxlength="60"
|
||||
v-model="form.title"
|
||||
placeholder="请输入标题"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="副标题:"
|
||||
prop="subTitle"
|
||||
v-if="moduleType !== 1 && moduleType !== 3 && moduleType !== 6"
|
||||
>
|
||||
<el-input
|
||||
clearable
|
||||
:maxlength="60"
|
||||
v-model="form.subTitle"
|
||||
placeholder="请输入副标题"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="跳转地址:"
|
||||
prop="targetUrl"
|
||||
v-if="moduleType === 1 || moduleType === 3"
|
||||
>
|
||||
<el-input
|
||||
clearable
|
||||
v-model="form.targetUrl"
|
||||
placeholder="请输入跳转地址"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="主图:" prop="banner">
|
||||
<upload-img v-model="form.banner" :images="form.banner" />
|
||||
</el-form-item>
|
||||
<template v-if="moduleType !== 1 && moduleType !== 3">
|
||||
<el-form-item label="副图:" v-if="moduleType !== 6">
|
||||
<upload-img
|
||||
v-model="form.otherImg"
|
||||
:images="form.otherImg"
|
||||
:limit="5"
|
||||
:multiple="true"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="报名:" prop="showBtn">
|
||||
<el-radio-group v-model="form.showBtn">
|
||||
<el-radio label="0" key="0">否</el-radio>
|
||||
<el-radio label="1" key="1">是</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<template v-if="form.showBtn === '1'">
|
||||
<el-form-item label="报名文案:" prop="btnText">
|
||||
<el-input
|
||||
clearable
|
||||
:maxlength="60"
|
||||
v-model="form.btnText"
|
||||
placeholder="请输入报名文案"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="弹窗类型:" prop="popUpType">
|
||||
<el-radio-group v-model="form.popUpType">
|
||||
<el-radio label="0" key="0">居中</el-radio>
|
||||
<el-radio label="1" key="1">底部</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!--特惠报名-->
|
||||
<template v-if="moduleType === 2">
|
||||
<el-form-item label="人数限制:" prop="btnText">
|
||||
<el-input
|
||||
clearable
|
||||
:maxlength="50"
|
||||
v-model="form.enrollLimit"
|
||||
placeholder=""
|
||||
type="number"
|
||||
/>
|
||||
<div class="ele-text-secondary"> 0不限制 </div>
|
||||
</el-form-item>
|
||||
<el-form-item label="报名截止:" prop="btnText">
|
||||
<el-date-picker
|
||||
v-model="form.enrollEndTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
<div class="ele-text-secondary"> </div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="moduleType === 6">
|
||||
<el-form-item label="文章内容:">
|
||||
<tinymce-editor
|
||||
:init="editoption"
|
||||
v-model="form.introduction"
|
||||
placeholder="请输入文章内容"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-form-item label="优惠信息:">
|
||||
<el-input
|
||||
clearable
|
||||
:maxlength="50"
|
||||
v-model="form.introduction"
|
||||
placeholder=""
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
</el-form>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<template v-slot:footer>
|
||||
<el-button @click="updateVisible(false)">取消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="save">
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
addTopicModuleOptions,
|
||||
updateTopicModule,
|
||||
pageSyTopicModuleOptions,
|
||||
removeTopicModuleOption
|
||||
} from '@/api/sytopic/module';
|
||||
import UploadImg from '@/components/UploadImg/index.vue';
|
||||
import TinymceEditor from '@/components/TinymceEditor/index.vue';
|
||||
export default {
|
||||
components: { TinymceEditor, UploadImg },
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
moduleId: String,
|
||||
moduleType: Number
|
||||
},
|
||||
data() {
|
||||
const defaultForm = {
|
||||
id: 0,
|
||||
title: '',
|
||||
subTitle: '',
|
||||
banner: [],
|
||||
otherImg: [],
|
||||
introduction: '',
|
||||
showBtn: '1',
|
||||
btnText: '',
|
||||
popUpType: '0',
|
||||
targetUrl: '',
|
||||
enrollLimit: 0,
|
||||
enrollEndTime: ''
|
||||
};
|
||||
return {
|
||||
editVersion: false,
|
||||
editoption: {
|
||||
height: 300,
|
||||
toolbar: [
|
||||
'code | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | fontsizeselect | bullist numlist | \
|
||||
table emoticons hr preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs| image emoticons hr '
|
||||
]
|
||||
},
|
||||
defaultForm,
|
||||
// 表单数据
|
||||
form: { ...defaultForm },
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
title: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入标题',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
// 提交状态
|
||||
loading: false,
|
||||
// 是否是修改
|
||||
isUpdate: false,
|
||||
modelList: [],
|
||||
selected: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 是否开启响应式布局
|
||||
styleResponsive() {
|
||||
return this.$store.state.theme.styleResponsive;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
modelOptions() {
|
||||
pageSyTopicModuleOptions({ moduleId: this.moduleId })
|
||||
.then((data) => {
|
||||
this.modelList = data.lists;
|
||||
})
|
||||
.catch((e) => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
this.loading = true;
|
||||
const data = {
|
||||
...this.form,
|
||||
moduleId: this.moduleId
|
||||
};
|
||||
const saveOrUpdate = this.isUpdate
|
||||
? updateTopicModule
|
||||
: addTopicModuleOptions;
|
||||
saveOrUpdate(data)
|
||||
.then((msg) => {
|
||||
this.loading = false;
|
||||
this.$message.success(msg);
|
||||
this.modelList = [];
|
||||
// this.selected = 0;
|
||||
this.modelOptions();
|
||||
// this.addItem();
|
||||
// this.updateVisible(false);
|
||||
// this.$emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
});
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
},
|
||||
handleClose(item) {
|
||||
this.$confirm('确定要删除【' + item.title + '】吗?', '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
const loading = this.$loading({ lock: true });
|
||||
removeTopicModuleOption(item.id)
|
||||
.then((msg) => {
|
||||
loading.close();
|
||||
this.$message.success(msg);
|
||||
this.modelOptions();
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.close();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
showOption(item) {
|
||||
this.selected = item.id;
|
||||
this.$util.assignObject(this.form, {
|
||||
...item
|
||||
});
|
||||
console.log(this.form);
|
||||
},
|
||||
addItem() {
|
||||
this.selected = 0;
|
||||
this.$refs.form.clearValidate();
|
||||
this.form = { ...this.defaultForm };
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible() {
|
||||
this.editVersion = false;
|
||||
this.selected = 0;
|
||||
this.form = { ...this.defaultForm };
|
||||
this.modelOptions();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<el-card shadow="never">
|
||||
<!-- 搜索表单 -->
|
||||
<el-card shadow="never"> {{ title }}-模块配置 </el-card>
|
||||
<!-- 数据表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:selection.sync="selection"
|
||||
cache-key="systemMembersTable"
|
||||
>
|
||||
<!-- 表头工具栏 -->
|
||||
<template v-slot:toolbar>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
class="ele-btn-icon"
|
||||
@click="openEdit({})"
|
||||
>
|
||||
新建
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
class="ele-btn-icon"
|
||||
@click="removeBatch"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 状态列 -->
|
||||
<template v-slot:options="{ row }">
|
||||
{{ row.options }}
|
||||
</template>
|
||||
<!-- 操作列 -->
|
||||
<template v-slot:action="{ row }">
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
icon="el-icon-edit"
|
||||
@click="openEditOption(row)"
|
||||
>
|
||||
内容配置
|
||||
</el-link>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
icon="el-icon-edit"
|
||||
@click="openEdit(row)"
|
||||
>
|
||||
修改
|
||||
</el-link>
|
||||
<el-popconfirm
|
||||
class="ele-action"
|
||||
title="确定要删除此模块吗？"
|
||||
@confirm="remove(row)"
|
||||
>
|
||||
<template v-slot:reference>
|
||||
<el-link type="danger" :underline="false" icon="el-icon-delete">
|
||||
删除
|
||||
</el-link>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</el-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<module-edit
|
||||
:data="current"
|
||||
:visible.sync="showEdit"
|
||||
:types="types"
|
||||
:topic-id="topicId"
|
||||
@done="reload"
|
||||
/>
|
||||
<module-option-edit
|
||||
:visible.sync="showEditOption"
|
||||
:module-id="current.id"
|
||||
:module-type="current.type"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
pageSyTopicModule,
|
||||
pageTopicModuleTypes,
|
||||
removeTopicModule
|
||||
} from '@/api/sytopic/module';
|
||||
import ModuleEdit from './components/module-edit.vue';
|
||||
import ModuleOptionEdit from './components/module-option-edit.vue';
|
||||
|
||||
export default {
|
||||
name: 'SyModule',
|
||||
components: { ModuleEdit, ModuleOptionEdit },
|
||||
data() {
|
||||
return {
|
||||
where: {},
|
||||
organizationList: [],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
columnKey: 'selection',
|
||||
type: 'selection',
|
||||
width: 45,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'id',
|
||||
label: 'ID',
|
||||
minWidth: 45,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'title',
|
||||
label: '模块名称',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 80
|
||||
},
|
||||
{
|
||||
prop: 'type_cn',
|
||||
label: '模块类型',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 80
|
||||
},
|
||||
{
|
||||
prop: 'sort',
|
||||
label: '排序',
|
||||
sortable: 'custom',
|
||||
showOverflowTooltip: true,
|
||||
width: 130
|
||||
},
|
||||
{
|
||||
prop: 'options',
|
||||
label: '内容数',
|
||||
align: 'center',
|
||||
width: 130,
|
||||
resizable: false,
|
||||
slot: 'options'
|
||||
},
|
||||
{
|
||||
columnKey: 'action',
|
||||
label: '操作',
|
||||
width: 300,
|
||||
align: 'center',
|
||||
resizable: false,
|
||||
slot: 'action',
|
||||
showOverflowTooltip: true
|
||||
}
|
||||
],
|
||||
// 表格选中数据
|
||||
selection: [],
|
||||
// 当前编辑数据
|
||||
current: {},
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
topicId: '0',
|
||||
title: '',
|
||||
types: {},
|
||||
showEditOption: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.topicId = this.$route.query.id;
|
||||
this.title = this.$route.query.title;
|
||||
this.getTypes();
|
||||
},
|
||||
methods: {
|
||||
getTypes() {
|
||||
pageTopicModuleTypes({})
|
||||
.then((res) => {
|
||||
this.types = res.list;
|
||||
})
|
||||
.catch((e) => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 表格数据源 */
|
||||
datasource({ page, limit, where, order }) {
|
||||
return pageSyTopicModule({
|
||||
...where,
|
||||
...order,
|
||||
page,
|
||||
limit,
|
||||
topicId: this.topicId
|
||||
});
|
||||
},
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.$refs.table.reload({ page: 1, where: this.where });
|
||||
},
|
||||
/* 打开编辑弹窗 */
|
||||
openEdit(row) {
|
||||
this.current = row;
|
||||
this.showEdit = true;
|
||||
},
|
||||
openEditOption(row) {
|
||||
this.current = row;
|
||||
this.showEditOption = true;
|
||||
},
|
||||
/* 删除 */
|
||||
remove(row) {
|
||||
const loading = this.$loading({ lock: true });
|
||||
removeTopicModule(row.id)
|
||||
.then((msg) => {
|
||||
loading.close();
|
||||
this.$message.success(msg);
|
||||
this.reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.close();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 批量删除 */
|
||||
removeBatch() {
|
||||
if (!this.selection.length) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定要删除选中的模块吗?', '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
const loading = this.$loading({ lock: true });
|
||||
removeTopicModule(this.selection.map((d) => d.userId))
|
||||
.then((msg) => {
|
||||
loading.close();
|
||||
this.$message.success(msg);
|
||||
this.reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.close();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function (route) {
|
||||
this.topicId = route.query.id;
|
||||
this.title = route.query.title;
|
||||
this.reload();
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,454 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="800px"
|
||||
:visible="visible"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="true"
|
||||
custom-class="ele-dialog-form"
|
||||
:title="isUpdate ? '修改活动' : '添加活动'"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="82px">
|
||||
<el-form-item label="活动标题:" prop="title">
|
||||
<el-input
|
||||
clearable
|
||||
:maxlength="60"
|
||||
v-model="form.title"
|
||||
placeholder="请输入活动标题"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属机构:" prop="organizationId">
|
||||
<el-select
|
||||
v-model="form.organizationId"
|
||||
placeholder="请选择所属机构"
|
||||
class="ele-fluid"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in organizationList"
|
||||
:key="item.organizationId"
|
||||
:label="item.organizationName"
|
||||
:value="item.organizationId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间:" prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="form.dateRange"
|
||||
type="datetimerange"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="banner:" prop="banner">
|
||||
<upload-img v-model="form.banner" :images="form.banner" />
|
||||
<div class="ele-text-secondary">建议尺寸750*340</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="分享图片:" prop="sharePhoto">
|
||||
<upload-img v-model="form.sharePhoto" :images="form.sharePhoto" />
|
||||
<div class="ele-text-secondary">建议尺寸200X200</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="分享海报:" prop="shareImg">
|
||||
<upload-img
|
||||
v-model="form.shareImg"
|
||||
:images="form.shareImg"
|
||||
:limit="10"
|
||||
:multiple="true"
|
||||
/>
|
||||
<div class="ele-text-secondary">
|
||||
尺寸宽度750，二维码尺寸160X160，二维码位置（距离底部80,距离右边40）
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="分享文案:" prop="shareTitle">
|
||||
<div
|
||||
style="margin: 8px 0"
|
||||
v-for="(item, index) in form.shareTitle"
|
||||
:key="index"
|
||||
>
|
||||
<el-input
|
||||
clearable
|
||||
:maxlength="60"
|
||||
v-model="form.shareTitle[index]"
|
||||
placeholder="请输入分享文案"
|
||||
/>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
size="small"
|
||||
icon="el-icon-plus"
|
||||
@click="addShareTitle"
|
||||
>
|
||||
新增分享文案
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动简介:">
|
||||
<tinymce-editor
|
||||
:init="editoption"
|
||||
v-model="form.introduction"
|
||||
placeholder="请输入活动简介"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
<el-button @click="updateVisible(false)">取消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="save">
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request';
|
||||
import { addTopic, updateTopic } from '@/api/sytopic/sytopic';
|
||||
import TinymceEditor from '@/components/TinymceEditor/index.vue';
|
||||
import UploadImg from '@/components/UploadImg/index.vue';
|
||||
export default {
|
||||
components: {
|
||||
TinymceEditor,
|
||||
UploadImg
|
||||
},
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
// 全部机构
|
||||
organizationList: Array,
|
||||
// 修改回显的数据
|
||||
data: Object
|
||||
},
|
||||
data() {
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
title: '',
|
||||
dateRange: '',
|
||||
shareTitle: [''],
|
||||
shareImg: [],
|
||||
introduction: '',
|
||||
banner: [],
|
||||
sharePhoto: [],
|
||||
organizationId: null
|
||||
};
|
||||
return {
|
||||
editVersion: false,
|
||||
editoption: {
|
||||
height: 300,
|
||||
toolbar: [
|
||||
'code | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | fontsizeselect | bullist numlist | \
|
||||
table emoticons hr preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs| image emoticons hr '
|
||||
]
|
||||
},
|
||||
defaultForm,
|
||||
// 表单数据
|
||||
form: { ...defaultForm },
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
title: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入活动标题',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
organizationId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择所属机构',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
banner: [
|
||||
{
|
||||
required: true,
|
||||
message: '请上banner图',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
dateRange: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择活动时间',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
// 提交状态
|
||||
loading: false,
|
||||
// 是否是修改
|
||||
isUpdate: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 是否开启响应式布局
|
||||
styleResponsive() {
|
||||
return this.$store.state.theme.styleResponsive;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 添加海报描述 */
|
||||
addShareTitle() {
|
||||
this.form.shareTitle.push('');
|
||||
},
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
this.form.shareTitle.forEach((item, i) => {
|
||||
if (item == '') {
|
||||
this.form.shareTitle.splice(i, 1);
|
||||
}
|
||||
});
|
||||
this.loading = true;
|
||||
const data = {
|
||||
...this.form
|
||||
};
|
||||
const saveOrUpdate = this.isUpdate ? updateTopic : addTopic;
|
||||
saveOrUpdate(data)
|
||||
.then((msg) => {
|
||||
this.loading = false;
|
||||
this.$message.success(msg);
|
||||
this.updateVisible(false);
|
||||
this.$emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
});
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
},
|
||||
/* 上传事件 */
|
||||
bgImgHandler(file) {
|
||||
const item = {
|
||||
file,
|
||||
uid: file.uid,
|
||||
name: file.name,
|
||||
progress: 0,
|
||||
status: null
|
||||
};
|
||||
if (!file.type.startsWith('image')) {
|
||||
this.$message.error('只能选择图片');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
this.$message.error('大小不能超过 2MB');
|
||||
return;
|
||||
}
|
||||
item.url = window.URL.createObjectURL(file);
|
||||
// 关键就是这里要自己 push 添加数据而不是靠 v-modal 自动更新
|
||||
this.form.bgImg.push(item);
|
||||
this.onUpload(item);
|
||||
},
|
||||
payImgHandler(file) {
|
||||
const item = {
|
||||
file,
|
||||
uid: file.uid,
|
||||
name: file.name,
|
||||
progress: 0,
|
||||
status: null
|
||||
};
|
||||
if (!file.type.startsWith('image')) {
|
||||
this.$message.error('只能选择图片');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
this.$message.error('大小不能超过 2MB');
|
||||
return;
|
||||
}
|
||||
item.url = window.URL.createObjectURL(file);
|
||||
// 关键就是这里要自己 push 添加数据而不是靠 v-modal 自动更新
|
||||
this.form.pay.img.push(item);
|
||||
this.onUpload(item);
|
||||
},
|
||||
bannerHandler(file) {
|
||||
const item = {
|
||||
file,
|
||||
uid: file.uid,
|
||||
name: file.name,
|
||||
progress: 0,
|
||||
status: null
|
||||
};
|
||||
if (!file.type.startsWith('image')) {
|
||||
this.$message.error('只能选择图片');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
this.$message.error('大小不能超过 2MB');
|
||||
return;
|
||||
}
|
||||
item.url = window.URL.createObjectURL(file);
|
||||
// 关键就是这里要自己 push 添加数据而不是靠 v-modal 自动更新
|
||||
this.form.banner.push(item);
|
||||
this.onUpload(item);
|
||||
},
|
||||
sharePhotoHandler(file) {
|
||||
const item = {
|
||||
file,
|
||||
uid: file.uid,
|
||||
name: file.name,
|
||||
progress: 0,
|
||||
status: null
|
||||
};
|
||||
if (!file.type.startsWith('image')) {
|
||||
this.$message.error('只能选择图片');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
this.$message.error('大小不能超过 2MB');
|
||||
return;
|
||||
}
|
||||
item.url = window.URL.createObjectURL(file);
|
||||
// 关键就是这里要自己 push 添加数据而不是靠 v-modal 自动更新
|
||||
this.form.sharePhoto.push(item);
|
||||
this.onUpload(item);
|
||||
},
|
||||
shareImgHandler(file) {
|
||||
const item = {
|
||||
file,
|
||||
uid: file.uid,
|
||||
name: file.name,
|
||||
progress: 0,
|
||||
status: null
|
||||
};
|
||||
if (!file.type.startsWith('image')) {
|
||||
this.$message.error('只能选择图片');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
this.$message.error('大小不能超过 2MB');
|
||||
return;
|
||||
}
|
||||
item.url = window.URL.createObjectURL(file);
|
||||
// 关键就是这里要自己 push 添加数据而不是靠 v-modal 自动更新
|
||||
this.form.shareImg.push(item);
|
||||
this.onUpload(item);
|
||||
},
|
||||
/* 添加 */
|
||||
addBottoms() {
|
||||
if (this.form.bottoms.length >= 2) {
|
||||
this.$message.error('最多添加2个活动底部菜单');
|
||||
return;
|
||||
}
|
||||
this.form.bottoms.push({
|
||||
urlType: 'link',
|
||||
title: '',
|
||||
url: '',
|
||||
miniProgramId: '',
|
||||
icon: []
|
||||
});
|
||||
},
|
||||
/* 删除 */
|
||||
removeBottoms(_row, index) {
|
||||
this.form.bottoms.splice(index, 1);
|
||||
},
|
||||
uploadHandler0(file) {
|
||||
const item = {
|
||||
file,
|
||||
uid: file.uid,
|
||||
name: file.name,
|
||||
progress: 0,
|
||||
status: null
|
||||
};
|
||||
if (!file.type.startsWith('image')) {
|
||||
this.$message.error('只能选择图片');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
this.$message.error('大小不能超过 2MB');
|
||||
return;
|
||||
}
|
||||
item.url = window.URL.createObjectURL(file);
|
||||
// 关键就是这里要自己 push 添加数据而不是靠 v-modal 自动更新
|
||||
this.form.bottoms[0]['icon'].push(item);
|
||||
this.onUpload(item);
|
||||
},
|
||||
uploadHandler1(file) {
|
||||
const item = {
|
||||
file,
|
||||
uid: file.uid,
|
||||
name: file.name,
|
||||
progress: 0,
|
||||
status: null
|
||||
};
|
||||
if (!file.type.startsWith('image')) {
|
||||
this.$message.error('只能选择图片');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
this.$message.error('大小不能超过 2MB');
|
||||
return;
|
||||
}
|
||||
item.url = window.URL.createObjectURL(file);
|
||||
// 关键就是这里要自己 push 添加数据而不是靠 v-modal 自动更新
|
||||
this.form.bottoms[1]['icon'].push(item);
|
||||
this.onUpload(item);
|
||||
},
|
||||
/* 上传 item */
|
||||
onUpload(item) {
|
||||
item.status = 'uploading';
|
||||
const formData = new FormData();
|
||||
formData.append('file', item.file);
|
||||
request({
|
||||
url: '/upload',
|
||||
method: 'post',
|
||||
data: formData,
|
||||
onUploadProgress: (e) => {
|
||||
if (e.lengthComputable) {
|
||||
item.progress = (e.loaded / e.total) * 100;
|
||||
}
|
||||
}
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data.code === 0) {
|
||||
item.status = 'done';
|
||||
item.url = res.data.data.full_url;
|
||||
item.fileUrl = res.data.data.url;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
item.status = 'exception';
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(visible) {
|
||||
this.editVersion = false;
|
||||
if (visible) {
|
||||
this.editVersion = true;
|
||||
if (this.data) {
|
||||
this.$util.assignObject(this.form, {
|
||||
...this.data
|
||||
});
|
||||
this.isUpdate = true;
|
||||
if (this.form.shareTitle.length == 0) {
|
||||
this.form.shareTitle.push('');
|
||||
}
|
||||
} else {
|
||||
this.form.bottoms = [];
|
||||
this.form.bgImg = [];
|
||||
this.form.shareImg = [];
|
||||
this.isUpdate = false;
|
||||
}
|
||||
} else {
|
||||
this.$refs.form.clearValidate();
|
||||
this.form = { ...this.defaultForm };
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.ele-image-upload-list .ele-image-upload-item {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<el-card shadow="never">
|
||||
<!-- 搜索表单 -->
|
||||
<el-form label-width="77px" class="ele-form-search">
|
||||
<el-row :gutter="15">
|
||||
<el-col :md="6" :sm="12">
|
||||
<el-form-item label="专题标题:">
|
||||
<el-input
|
||||
placeholder="请输入专题标题"
|
||||
clearable
|
||||
v-model="where.title"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="12">
|
||||
<div class="ele-form-actions">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
class="ele-btn-icon"
|
||||
@click="reload"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!-- 数据表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:selection.sync="selection"
|
||||
cache-key="syliveActivityTable"
|
||||
>
|
||||
<!-- 表头工具栏 -->
|
||||
<template v-slot:toolbar>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
class="ele-btn-icon"
|
||||
@click="dropClick('activity')"
|
||||
>
|
||||
新建
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
class="ele-btn-icon"
|
||||
@click="removeBatch"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 状态列 -->
|
||||
<template v-slot:status="{ row }">
|
||||
<el-switch
|
||||
:active-value="0"
|
||||
:inactive-value="1"
|
||||
v-model="row.status"
|
||||
@change="editStatus(row)"
|
||||
/>
|
||||
</template>
|
||||
<!-- 操作列 -->
|
||||
<template v-slot:action="{ row }">
|
||||
<!--
|
||||
<el-dropdown @command="(command) => dropMore(command, row)">
|
||||
<el-link type="primary" :underline="false" icon="el-icon-_share">
|
||||
更多
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
</el-link>
|
||||
<template v-slot:dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="enroll">报名列表</el-dropdown-item>
|
||||
<el-dropdown-item command="code">活动链接</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
-->
|
||||
<el-dropdown @command="(command) => dropClick(command, row)">
|
||||
<el-link type="primary" :underline="false" icon="el-icon-edit">
|
||||
修改
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
</el-link>
|
||||
<template v-slot:dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="activity">修改专题</el-dropdown-item>
|
||||
<el-dropdown-item command="module">模块配置</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-popconfirm
|
||||
class="ele-action"
|
||||
title="确定要删除此活动吗？"
|
||||
@confirm="remove(row)"
|
||||
>
|
||||
<template v-slot:reference>
|
||||
<el-link type="danger" :underline="false" icon="el-icon-delete">
|
||||
删除
|
||||
</el-link>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</el-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<sytopic-edit
|
||||
:data="current"
|
||||
:visible.sync="showEdit"
|
||||
:organization-list="organizationList"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
pageSyTopic,
|
||||
removeTopic,
|
||||
updateTopicStatus
|
||||
} from '@/api/sytopic/sytopic';
|
||||
import { listOrganizationParent } from '@/api/institution/organization';
|
||||
import SytopicEdit from './components/sytopic-edit.vue';
|
||||
|
||||
export default {
|
||||
name: 'syTopic',
|
||||
components: { SytopicEdit },
|
||||
data() {
|
||||
return {
|
||||
where: {
|
||||
title: ''
|
||||
},
|
||||
// 门店数据
|
||||
organizationList: [],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
columnKey: 'selection',
|
||||
type: 'selection',
|
||||
width: 45,
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'id',
|
||||
label: 'ID',
|
||||
minWidth: 40,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'title',
|
||||
label: '标题',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 200
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '创建时间',
|
||||
sortable: 'custom',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 90,
|
||||
formatter: (_row, _column, cellValue) => {
|
||||
return this.$util.toDateString(cellValue);
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '状态',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
resizable: false,
|
||||
slot: 'status',
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
columnKey: 'action',
|
||||
label: '操作',
|
||||
width: 380,
|
||||
align: 'center',
|
||||
resizable: false,
|
||||
slot: 'action'
|
||||
}
|
||||
],
|
||||
// 表格选中数据
|
||||
selection: [],
|
||||
// 当前编辑数据
|
||||
current: null,
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 是否显示编辑商品弹窗
|
||||
showEditItem: false,
|
||||
// 是否显示编辑券弹窗
|
||||
showEditCoupon: false,
|
||||
// 是否显示编辑券弹窗
|
||||
showEditDraw: false,
|
||||
showEditVisitTag: false,
|
||||
// 是否显示二维码弹窗
|
||||
showCode: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
//this.organizationQuery();
|
||||
},
|
||||
methods: {
|
||||
/* 下拉按钮点击 */
|
||||
dropClick(command, row) {
|
||||
if (command === 'activity') {
|
||||
this.current = row;
|
||||
this.showEdit = true;
|
||||
} else if (command === 'module') {
|
||||
this.$router.replace(
|
||||
'/sytopic/module?id=' + row.id + '&title=' + row.title
|
||||
);
|
||||
}
|
||||
},
|
||||
/* 打开更多页 */
|
||||
dropMore(command, row) {
|
||||
if (command === 'enroll') {
|
||||
this.$message.info('开发中');
|
||||
} else if (command === 'code') {
|
||||
this.$message.info('开发中');
|
||||
this.current = row;
|
||||
this.showCode = true;
|
||||
}
|
||||
},
|
||||
/* 查询机构 */
|
||||
organizationQuery() {
|
||||
listOrganizationParent({ parentId: 0 })
|
||||
.then((list) => {
|
||||
this.organizationList = list;
|
||||
})
|
||||
.catch((e) => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 表格数据源 */
|
||||
datasource({ page, limit, where, order }) {
|
||||
if (page == 1) {
|
||||
this.organizationQuery();
|
||||
}
|
||||
return pageSyTopic({ ...where, ...order, page, limit });
|
||||
},
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.$refs.table.reload({ page: 1, where: this.where });
|
||||
},
|
||||
/* 删除 */
|
||||
remove(row) {
|
||||
const loading = this.$loading({ lock: true });
|
||||
removeTopic(row.id)
|
||||
.then((msg) => {
|
||||
loading.close();
|
||||
this.$message.success(msg);
|
||||
this.reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.close();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 批量删除 */
|
||||
removeBatch() {
|
||||
if (!this.selection.length) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定要删除选中的活动吗?', '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
const loading = this.$loading({ lock: true });
|
||||
removeTopic(this.selection.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
loading.close();
|
||||
this.$message.success(msg);
|
||||
this.reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.close();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/* 更改状态 */
|
||||
editStatus(row) {
|
||||
const loading = this.$loading({ lock: true });
|
||||
updateTopicStatus(row.id, row.status)
|
||||
.then((msg) => {
|
||||
loading.close();
|
||||
this.$message.success(msg);
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.close();
|
||||
row.status = !row.status ? 1 : 0;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 充值搜索 */
|
||||
reset() {
|
||||
this.where = {};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user