Skip to content

P
pica.cloud.web-education-admin
提交 f1a49cb2 编写于 作者: vino's avatar vino
浏览文件
操作

Merge remote-tracking branch 'origin/dev-circle-nine-20201231' into dev-circle-nine-20201231

上级 c496b5cf ef970951
隐藏空白字符变更
内嵌 并排
正在显示 包含 823 行增加 和 5 行删除
src/components/activitymanagement/baseinfo.vue 0 → 100644
浏览文件 @ f1a49cb2
<template>
<el-form
ref="formData"
:model="formData"
:rules="rules"
label-width="150px"
label-suffix="："
class="basic-form"
>
<el-form-item label="后台标题" prop="titleManager">
<el-col :span="13">
<el-input
size="small"
v-model="formData.titleManager"
placeholder="请输入后台显示的活动标题"
style="width:70%;"
@change="returnTypeData('titleManager')"
></el-input>
<span class="word-num">{{(formData.titleManager).replace(/\s+/g,"").length}}/30</span>
</el-col>
</el-form-item>
<el-form-item label="前台主标题" prop="name">
<el-col :span="13">
<el-input
size="small"
v-model="formData.name"
placeholder="请输入前台显示的活动主标题"
style="width:70%;"
@change="returnTypeData('name')"
></el-input>
<span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/14</span>
</el-col>
</el-form-item>
<el-form-item label="前台副标题" prop="name">
<el-col :span="13">
<el-input
size="small"
v-model="formData.name"
placeholder="请输入前台显示的活动副标题"
style="width:70%;"
@change="returnTypeData('name')"
></el-input>
<span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/14</span>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="圈子头像" class="required-label">
<el-upload
v-model="formData.headUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadPic1"
>
<img
v-if="formData.headUrl"
:src="formData.headUrl"
@mouseover.stop="imgMouseOver1=true"
class="bg-img"
/>
<img v-if="!formData.headUrl" class="bg-img" src="../../assets/image/small.png" />
<div
class="img-delete"
v-show="imgMouseOver1"
@click.stop="deleteImg(1)"
@mouseout.stop="imgMouseOver1=false"
>
<i class="el-icon-delete"></i>
</div>
<div class="limit-text">
<p>限制大小: 500kb</p>
<p>最小尺寸：160*160</p>
<p>支持jpeg, png格式</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage1">请选择圈子头像</p>
</div>
<el-form-item label="圈子介绍" prop="introduce">
<el-col :span="13">
<el-input
type="textarea"
rows="2"
maxlength="40"
size="small"
v-model="formData.introduce"
placeholder="请输入圈子介绍"
@change="returnTypeData('introduce')"
style="width:70%;"
></el-input>
<span class="word-num">{{(formData.introduce).replace(/\s+/g,"").length}}/40</span>
</el-col>
</el-form-item>
<el-form-item label="话题发布权限" prop="dynamicFlag">
<el-select
v-model="formData.dynamicFlag"
@change="returnTypeData('dynamicFlag')"
placeholder="请选择发布权限"
size="small"
clearable>
<el-option
v-for="(item,index) in contentList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<el-tooltip class="item" effect="dark" content="若选择管理员可发布，则只有管理员才能在小圈内发布话题" placement="top">
<!--<span class="el-icon-info"></span>-->
<i class="el-icon-info" style="color: #449284;"></i>
</el-tooltip>
</el-form-item>
<el-form-item label="圈子类型" prop="type">
<!--<el-radio-group v-model="formData.type" size="small" @change="changeType">-->
<el-radio-group v-model="formData.type" size="small">
<el-radio :label="0" class="label-type">封闭 - 只对圈子成员可见，成员只能由管理员添加、删除</el-radio>
<el-radio :label="1" class="label-type">半开放 - 对任何人可见，用户请求加入后需管理员同意，成员可自行退出</el-radio>
<el-radio :label="2" class="label-type">开放 - 对任何人可见，用户请求加入后无需管理员同意，成员可自行退出</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="允许分享圈子" prop="allowShare" v-if="formData.type == 1 || formData.type == 2 " class="required-label">
<el-radio-group v-model="formData.allowShare" size="small">
<el-radio :label="0" class="label-type">不允许</el-radio>
<el-radio :label="1" class="label-type">允许</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="对接部门" prop="deptId" v-if="deptFlag" class="required-label">
<el-select
v-model="formData.deptId"
@change="returnTypeData('deptId')"
placeholder="请选择该小圈的对接部门"
size="small">
<el-option
v-for="(item,index) in deptList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<div style="margin-top: 60px;margin-left: 250px;">
<el-button type="primary" @click="save()" center>保存</el-button>
<el-button @click="cancle()">取 消</el-button>
</div>
<el-dialog
class="dialog-title-border-old"
title="图片裁剪"
:visible.sync="showCropper"
:width="currentOption.cropDialogWidth"
center>
<div slot="title" style="text-align: left;">
<span style="font-weight: 700;">图片裁剪</span>
</div>
<div v-if="showCropper" style="margin-bottom: 20px;">
<Cropper
:cropOption="currentOption"
@getCropImg="getCropImg(arguments)"
:originImg="slide2.oriUrl"
/>
</div>
</el-dialog>
</el-form>
</template>
<script>
let vm = null;
import { openLoading, closeLoading } from "../../utils/utils";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
import { getCircleDept } from "../../utils/yqrange/yqrangeApi";
import Cropper from '@/components/common/cropper.vue'
export default {
name: "baseinfo",
components: {
Cropper
},
props: {
formData: {
type: Object,
default: () => {
return {}
}
}
},
created() {
vm = this;
this.isDept();
// const mobilePhone = localStorage.getItem("mobilePhone");
//
// if(mobilePhone == "13341740525" || mobilePhone == "18251938586"){
// this.deptFlag = true;
// }
// else {
// this.deptFlag = false;
// }
},
data() {
let checkProjectStr = (rule, value, callback) => {
if (value.indexOf("\\") != -1) {
//存在
callback(new Error("请勿输入字符“ \\ ”"));
} else if (value.indexOf(".") != -1) {
callback(new Error("请勿输入字符“ . ”"));
} else {
callback();
}
};
return {
showCropper: false,
currentOption: {
offset_x: 120,
offset_y: 185,
width: 160,
height: 120,
cvWidth: 1000,
cvHeight: 800,
uploadType: 1,
cropDialogWidth: '900px',
cropBoxResizable: true,
minCropBoxWidth: 100,
minCropBoxHeight: 100,
aspectRatio: 16/9
},
slide2: {
oriUrl: '', // 原图
},
rules: {
name: [
{ required: true, message: "请输入圈子名称", trigger: "blur" },
{
min: 2,
max: 14,
message: "输入长度为2-14的内容，可包含中英文、数字及特殊符号",
trigger: "blur"
},
{ validator: checkProjectStr, trigger: "blur" }
],
introduce: [
{ required: true, message: "请输入圈子介绍", trigger: "blur" },
{
min: 2,
max: 40,
message: "输入长度为2-40的内容，可包含中英文、数字及特殊符号",
trigger: "blur"
},
{ validator: checkProjectStr, trigger: "blur" }
],
headUrl: [
{ required: true, message: "请选择圈子头像", trigger: "blur" }
],
dynamicFlag: [
{ required: true, message: "请选择内容发布权限", trigger: "blur" },
],
type: [
{ required: true, message: "请选择圈子类型", trigger: "blur" },
],
deptId: [
{ required: true, message: "请选择对接部门", trigger: "blur" }
]
},
imgMouseOver1: false,
uploadImgMessage1: false,//未上传图片，校验提示语
contentList: [
{
value: 1,
label: '所有人可发布'
}, {
value: 2,
label: '管理员可发布'
},
],
deptList: [
{
value: 1,
label: '铁军部'
}, {
value: 2,
label: '医疗事业部'
},{
value: 3,
label: '商业化部'
},
],
deptFlag: false,
shareFlag: false
}
},
methods: {
returnTypeData(name) {
this.$emit('returnTypeData', {
name: name,
val: this.formData[name]
})
},
//表单校验
submitForm() {
let formName = "formData";
let flag = null;
if (!this.formData.headUrl){
this.uploadImgMessage1 = true;
}
this.$refs[formName].validate(valid => {
if (valid && vm.formData.headUrl!="") {
flag = true;
} else {
console.log("error submit!!");
flag = false;
}
});
if(flag){
if(this.formData.deptId == ""){
this.formData.deptId = 0;
}
}
this.$emit('returnIsNext', flag);
},
//上传圈子头像
beforeUploadPic1(file) {
this.currentOption.aspectRatio = 1/1;
this.currentOption.cropBoxResizable = true;
this.currentOption.minCropBoxWidth = 160;
this.currentOption.minCropBoxHeight = 160;
let fileLimit = {
width: 160,
height: 160,
size: 0.5,
sizeText: "500K",
key: "headUrl",
more: "imgUrl1More",
show: "uploadImgMessage1"
};
this.beforeUpload(file, fileLimit);
},
//上传图片
beforeUpload(file, fileLimit) {
let vm = this;
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
if (!isJPG && !isPNG) {
vm.$message.error("图片必须是jpeg或png格式，同时长宽尺寸和图片大小需符合要求");
// return;
}
// if (!isLt2M) {
// vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function (theFile) {
let image = new Image()
image.src = theFile.target.result
vm.slide2.oriUrl = theFile.target.result;
image.onload = function () {
let _this = this;
// if (_this.width != fileLimit.width || _this.height != fileLimit.height) {
if (_this.width < fileLimit.width || _this.height < fileLimit.height) {
vm.$message.error("图片必须是jpeg或png格式，同时长宽尺寸和图片大小需符合要求");
return;
}
else if(_this.width > fileLimit.width || _this.height > fileLimit.height){
vm.showCropper = true;
vm.currentOption.cvWidth = _this.width;
vm.currentOption.cvHeight = _this.height;
return;
}
else {
openLoading(vm);
doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function (path) {
closeLoading(vm);
console.log('上传成功后路径', path);
if (fileLimit.show == "uploadImgMessage1") {
vm.uploadImgMessage1 = false;
} else if (fileLimit.show == "uploadImgMessage2") {
vm.uploadImgMessage2 = false;
}
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size
};
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M;
},
//删除图片
deleteImg(type) {
if (type == 1) {
vm.formData.headUrl = "";
vm.imgMouseOver1 = false;
}
},
// 获取裁剪的图片数据
getCropImg(argument) {
this.showCropper = false;
this.cropData = argument[1]
vm.doUploadQiNiu(argument[2])
argument[3] && argument[3].destroy();
// vm.slide2.oriUrl = "";
},
// 上传七牛
doUploadQiNiu(file){
doUpload(this,file, getFilePath(file,null), 'preview4', 'uploadProgress1', '').then(function (path) {
vm.formData.headUrl = path.fullPath;
vm.$message.success('上传成功');
});
},
save(){
this.submitForm();
},
cancle(){
const _this = this;
setTimeout(function () {
_this.$router.go(-1)
}, 100);
},
changeType(){
if(vm.formData.type == 1 || vm.formData.type == 2){
vm.shareFlag = true;
}
else {
vm.shareFlag = false;
}
},
isDept(){
let params = {
type: 2
};
openLoading(vm);
getCircleDept(params).then(res => {
closeLoading(vm);
if (res.code == "000000") {
vm.deptFlag = res.data;
// vm.deptFlag = true;
// this.$message.success('操作成功');
}
}).catch(err => {
this.$message.error('请求失败');
});
}
}
}
</script>
<style lang="less">
.first-step {
margin-top: 20px;
.p-title {
padding-left: 10px;
margin-bottom: 15px;
}
.basic-item-icon {
position: relative;
.require {
position: absolute;
left: 67px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.line {
margin-left: 10px;
width: 20px;
}
.bg-uploader {
.bg-img {
float: left;
width: 84px;
height: 100px;
}
.limit-text {
float: left;
margin-left: 10px;
margin-top: -10px;
p {
font-size: 12px;
color: #999;
text-align: left;
}
}
}
.el-upload__tip {
position: absolute;
top: -6px;
left: 130px;
}
}
.required-label .el-form-item__label::before {
content: "*";
color: #f56c6c;
margin-right: 4px;
}
.label-type {
width: 100%;
margin-top: 10px;
}
</style>
src/router/router.js
浏览文件 @ f1a49cb2
......@@ -57,8 +57,10 @@ const editSimpleAdvert = r => require.ensure([], () => r(require('../views/educa
const noticeEditor = r => require.ensure([], () => r(require('../views/education/notice-editor.vue')), 'notice-editor')
const yqRange = r => require.ensure([], () => r(require('../views/yqrange/yq-range.vue')), 'yq-range')
const activityManagement = r => require.ensure([], () => r(require('../views/activitymanagement/activity-management.vue')), 'activity-management')
const createActivity = r => require.ensure([], () => r(require('../views/activitymanagement/create-activity.vue')), 'create-activity')
const yqRange = r => require.ensure([], () => r(require('../views/yqrange/yq-range.vue')), 'yq-range')
const liveManage = r => require.ensure([], () => r(require('../views/yqrange/live-manage.vue')), 'live-manage')
const roleManage = r => require.ensure([], () => r(require('../views/yqrange/role-manage.vue')), 'role-manage')
const createRange = r => require.ensure([], () => r(require('../views/yqrange/create-range.vue')), 'create-range')
......@@ -246,6 +248,11 @@ export default [{
path: '/activity-management',
component: activityManagement
},
{
path:'/create-activity',
component: createActivity
},
{
path: '/live-manage',
component: liveManage
......
src/views/activitymanagement/activity-management.vue
浏览文件 @ f1a49cb2
......@@ -55,7 +55,7 @@
</el-row>
<el-row>
<el-col :span="24" style="text-align: right">
<el-button type="primary" size="small" @click="createRange" v-if="showNewFlag">新建活动</el-button>
<el-button type="primary" size="small" @click="createActivity" v-if="showNewFlag">新建活动</el-button>
</el-col>
</el-row>
</el-form>
......@@ -315,10 +315,10 @@ export default {
this.search();
},
//新建小圈
createRange() {
createActivity() {
let enterType = 1;//1:add 2 edit
this.$router.push({
path: `/create-range?enterType=${enterType}`
path: `/create-activity?enterType=${enterType}`
})
},
//上线
......@@ -421,7 +421,7 @@ export default {
editRange(row) {
let enterType = 2;//1:add 2 edit
this.$router.push({
path: `/create-range?enterType`,
path: `/create-activity?enterType`,
query:{
id:row.id,
enterType:enterType,
......
src/views/activitymanagement/create-activity.vue 0 → 100644
浏览文件 @ f1a49cb2
<template>
<div class="yqrange-index-wrapper">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="yqrange-index-content screenSet" id="screenSet">
<el-row class="step-content">
<el-col :span="14">
<p class="p-title">{{curmbSecond}}</p>
<!--<el-steps :active="active" simple class>-->
<!--<span class="step-num" v-bind:class="{ 'on-step': stepData[0] }">1</span>-->
<!--<el-step title="基础信息"></el-step>-->
<!--<span class="step-num" v-bind:class="{ 'on-step': stepData[1] }">2</span>-->
<!--<el-step title="选择成员">2</el-step>-->
<!--</el-steps>-->
</el-col>
<!--<el-col :span="5" :offset="5">-->
<!--<el-button v-if="active<1" size="small" type="primary" @click="nextStep">下一步</el-button>-->
<!--<el-button v-if="active>=1" size="small" type="primary" @click="complete">完成</el-button>-->
<!--</el-col>-->
</el-row>
<div class="first-step" v-if="active === 0">
<base-info :formData="formData" @returnTypeData="returnTypeData" @returnIsNext="returnIsNext" ref="child">
</base-info>
</div>
<!--<div class="second-step" v-else-if="active === 1">-->
<!--<organzation :formData="formData" ref="org"></organzation>-->
<!--</div>-->
</div>
</div>
</template>
<script>
let vm = null;
import BreadCrumb from "@/components/breadcrumb.vue";
import { openLoading, closeLoading } from "../../utils/utils";
import BaseInfo from '@/components/activitymanagement/baseinfo.vue';
import Organzation from '@/components/yqrange/organzation.vue';
import { getCircleInfoReq, getMemberSelectOrgSaveReq } from '@/utils/yqrange/rangeApi';
export default {
name: "create-range",
components: {
BreadCrumb,
BaseInfo,
Organzation
},
data() {
return {
id: null,
enterType: 1,//1.creat 2.edit
curmbFirst: '活动管理',
curmbSecond: '新建活动',
active: 0,
//页面展示位置
stepData: [true, false],
formData: {
id: null,
name: '',
headUrl: '',
imgUrl1More: {},
imgUrl2More: {},
introduce: '',
dynamicFlag: '',
idType: localStorage.getItem("storageIdType"),
roleType: null,
type: 0,
deptId: "",
allowShare: 1
}
}
},
created() {
vm = this;
// 根据ID是否有值判断编辑还是create
// debugger
const { enterType, id, roleType } = this.$route.query;
this.id = id;
this.enterType = enterType;
this.roleType = roleType;
if(this.enterType != null && this.roleType != null){
this.curmbSecond = "编辑活动"
}
if(roleType == null || roleType == undefined){
let highMainManager = localStorage.getItem('highMainManager');
let mainManager = localStorage.getItem('mainManager');
let manager = localStorage.getItem('manager');
let ordinary = localStorage.getItem('ordinary');
if(highMainManager == 1){
this.roleType = 4;
}
else if(mainManager == 1){
this.roleType = 2;
}
else if(manager == 1){
this.roleType = 1;
}
else if(ordinary == 1){
this.roleType = 0;
}
}
this.formData.roleType = this.roleType;
//edit
if (this.enterType == 2 && this.id != null) {
this.getCircleInfo();
}
},
methods: {
//下一步
nextStep() {
// debugger
this.$refs.child.submitForm();
},
//完成
complete() {
// if(this.$refs.org.selectionList == null || this.$refs.org.selectionList == ""){
// this.$message.warning('请选择机构');
// return;
// }
console.log(this.formData.id);
let req = {
circleId: this.formData.id,
};
openLoading(vm);
getMemberSelectOrgSaveReq(req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
this.$message.success('操作成功');
const _this = this;
setTimeout(function () {
_this.$router.go(-1)
}, 2000);
// vm.$router.push({ path: "yq-range" });
} else {
this.$message(res.message);
}
}).catch(err => {
this.$message.error('请求失败');
});
},
// 修改编辑基础信息
returnIsNext(flag) {
if (flag == true) {
vm.commitQuanziInfo();
}
},
returnTypeData(item) {
vm.formData[item.name] = item.val
},
//获取圈子详情
getCircleInfo() {
getCircleInfoReq(this.id).then(res => {
// closeLoading(this);
if (res.code == "000000") {
this.formData = { ...this.formData, ...res.data };
if(vm.formData.deptId == 0){
vm.formData.deptId = "";
}
} else {
vm.$message(res.message);
}
}).catch(err => {
vm.$message.error('请求失败');
});
},
commitQuanziInfo() {
let req = vm.formData;
console.log("commitQuanziInfo() : name = " + req.name + ", headUrl = " + req.headUrl
+ ", coverUrl = " + req.coverUrl + ", introduce = " + req.introduce + ", dynamicFlag = " + req.dynamicFlag)
vm.POST("circle/circle/save", req).then(res => {
if (res.code == "000000") {
// console.log(res);
// console.log(this.$refs);
// vm.formData.id = res.data;
// // this.active = 1;
// this.stepData = [false, true];
this.$message.success('保存成功');
const _this = this;
setTimeout(function () {
_this.$router.go(-1)
}, 100);
} else {
this.$message(res.message);
}
});
},
}
}
</script>
<style lang="scss">
.yqrange-index-wrapper {
.yqrange-index-content {
background: #fff;
padding: 10px;
.step-content {
overflow: hidden;
height: 60px;
padding: 15px 0 50px 0;
border-bottom: 1px solid #efefef;
.is-text {
display: none;
}
.el-steps--simple {
background: #fff;
padding: 10px 8%;
}
.step-num {
display: block;
margin-top: 1.5px;
font-size: 12px;
border: 1px solid #999 !important;
border-radius: 50%;
width: 25px;
height: 18px;
line-height: 15px;
text-align: center;
color: #999;
}
.el-step__title.is-wait {
color: #999;
}
.el-step__title.is-process {
color: #449284;
}
.is-finish {
color: #999 !important;
}
.on-step {
color: #449284;
border: 1px solid #449284 !important;
}
}
}
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或