Skip to content

H
haoban-3
Commit 0186f589 by crushh
Options

Merge branch 'feature/2月迭代' into dev

parents 1f02393b d30be4c7
Showing with 1046 additions and 265 deletions
index.html
......@@ -14,8 +14,8 @@
<link rel="shortcut icon" href="./favicon.ico" />
<title>好办管理平台</title>
<link rel="stylesheet" type="text/css" href="//web-1251519181.file.myqcloud.com/custom-element/custom-element.1.0.69.css" />
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1628375_cl07xa4zqij.css" /> <!--好办后台3.0-->
<script src="//at.alicdn.com/t/font_1628375_cl07xa4zqij.js"></script>
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1628375_b9ejwjvcr7.css" /> <!--好办后台3.0-->
<script src="//at.alicdn.com/t/font_1628375_b9ejwjvcr7.js"></script>
</head>
<body style="min-width: 1400px;" class="damolish">
......
src/api/api.js
......@@ -66,17 +66,13 @@ Vue.axios.interceptors.response.use(
removePending(data.config); //在一个ajax响应后再执行一下取消操作，把已经完成的请求从pending中移除
// console.log(data);
if (data.status && data.status == 200 && data.data.errorCode != 1) {
// Message.error({message: data.data.message});
if (data.data.errorCode == 4) {
if (window.location.href.indexOf('gic-error') != -1) {
return false;
}
window.location.href = local + '/haoban-3/#/login';
}
/* if (data.data.errorCode == 3) {
Message.error({ message: data.data.message });
window.location.href = local + '/haoban-3/#/login';
} */
if (data.data.errorCode == 10 || data.data.errorCode == 7) {
window.location.href = local + '/haoban-3/#/index';
}
......@@ -85,22 +81,11 @@ Vue.axios.interceptors.response.use(
return data;
},
err => {
// console.log(err, typeof err, err.response);
if (Vue.axios.isCancel(err)) {
// console.log('请求取消');
}
if (err.response.status == 502) {
window.location.href = local + '/haoban-3/#/login';
Message.error({ message: '服务异常⊙﹏⊙∥' });
}
// Message.error({message: err.response.message});
if (err.response.status == 504 || err.response.status == 404) {
// window.location.href= local + "/haoban-3/#/login"
// Message.error({message: '服务异常⊙﹏⊙∥'});
} else if (err.response.status == 403) {
// window.location.href= local + "/haoban-3/#/login"
// Message.error({message: '权限不足,请联系管理员!'});
} else {
if (err.response.status != 403) {
window.location.href = local + '/haoban-3/#/login';
Message.error({ message: '登录失效!' });
}
......@@ -154,8 +139,7 @@ export const postJsonRequest = (url, params) => {
return Vue.axios({
method: 'post',
url: `${local}${url}`,
data: '{}',
params: params,
data: params,
headers: { 'Content-Type': 'application/json;charset=UTF-8' } //multipart/form-data{"token": token}
});
};
......
src/views/business/contacts.vue
......@@ -363,6 +363,7 @@ export default {
}
return father.parentDepartmentId == 0; //返回第一层
});
console.log(tree);
return tree;
},
/**
......
src/views/enterprise/salutatory.vue
<template>
<div class="daily-set-wrap ">
<div class="daily-set-content border-box">
<div class="admin-tip-body">
<div role="alert" class="el-alert el-alert--info">
<i class="el-alert__icon el-icon-info"></i>
<div class="el-alert__content">
<p class="el-alert__title">
1. 因企业微信接口限制，若在企微管理端为相关人员配置欢迎语，好办设置欢迎语不会生效；<br />
2. 若使用好办欢迎语，请关闭其他企业自建应用/第三方应用的欢迎语配置； <br />
3. 在此处所自定义配置的欢迎语基础上，系统将默认包含“带参会员小程序卡片”，以便门店员工添加客户好友后，引导客户进入带参会员小程序页面授权微信信息，进而使得系统将企业客户与GIC后台某客户对应起来；
</p>
<div>
<div class="warp">
<h2>加好友配置</h2>
<span class="echoData" v-show="friendSettingType">{{ friendSettingTypeOption[friendSettingType] }}</span>
<el-button type="text" style="margin-left: 20px;" @click="openDialog">去配置</el-button>
</div>
<div class="daily-set-wrap">
<div class="daily-set-content border-box">
<div class="admin-tip-body">
<div role="alert" class="el-alert el-alert--info">
<i class="el-alert__icon el-icon-info"></i>
<div class="el-alert__content">
<p class="el-alert__title">
1. 因企业微信接口限制，若在企微管理端为相关人员配置欢迎语，好办设置欢迎语不会生效；<br />
2. 若使用好办欢迎语，请关闭其他企业自建应用/第三方应用的欢迎语配置； <br />
3. 在此处所自定义配置的欢迎语基础上，系统将默认包含“带参会员小程序卡片”，以便门店员工添加客户好友后，引导客户进入带参会员小程序页面授权微信信息，进而使得系统将企业客户与GIC后台某客户对应起来；<br />
4. 如果导购没有绑定导购code，没有主门店信息，则无法发送好办欢迎语；
</p>
</div>
</div>
</div>
</div>
<div class="salutatory-wrap m-t-20">
<div class="top">
<p class="left">欢迎语标题 {{ form.title || '系统默认' }}</p>
<p class="right">
<span class="date">最近编辑时间：{{ form.updateTime | formatTimeStamp }}</span>
<el-button type="text" style="margin-right:43px;" @click="changeRoute">编辑</el-button>
<!-- <el-switch v-model="openFlag" :active-value="1" :inactive-value="0" @change="setWelcome"> </el-switch> -->
</p>
</div>
<p class="line"></p>
<div class="bottom">
<el-form label-width="70px" ref="form" :model="form">
<el-form-item label="文本内容">
<p class="welcome-text">{{ form.welcomeContent || '你好，&lt; 微信昵称 &gt;' }}</p>
</el-form-item>
<!-- <el-form-item label="附件"></el-form-item> -->
</el-form>
<div class="flex flex-space-between m-b-20 m-t-20">
<el-input placeholder="请输入标题" maxlength="50" v-model="title" class="w-264" style="width: 264px;" @keyup.native="value => toInput(value, searchInput)" clearable @clear="clearSearch"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
<el-button type="primary" @click="changeRoute">新建欢迎语</el-button>
</div>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :style="{ width: '100%' }">
<el-table-column prop="title" label="标题" width="220" show-overflow-tooltip>
<template slot-scope="{ row }">{{ row.title }}</template>
</el-table-column>
<el-table-column prop="welcomeContent" label="内容" show-overflow-tooltip>
<template slot-scope="{ row }">{{ row.welcomeContent }}</template>
</el-table-column>
<el-table-column label="附件">
<template slot-scope="{ row }">
<el-popover placement="top-start" trigger="hover">
<div class="flexBox" v-for="item in row.welcomeMediaList" :key="item.welcomeMediaId">
<svg-icon :iconname="iconType[item.mediaType]" size="16" style="margin-right: 13px;"> </svg-icon>
<span class="popverText">{{ item.mediaTitle }}</span>
</div>
<div slot="reference" class="flexBox" v-if="row.welcomeMediaList && row.welcomeMediaList.length">
<svg-icon :iconname="iconType[row.welcomeMediaList[0].mediaType]" size="40" style="margin-right: 10px;"> </svg-icon>
<span class="wrapText"> {{ row.welcomeMediaList[0].mediaTitle }}</span>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="updateTime" label="更新时间" width="120" show-overflow-tooltip>
<template slot-scope="{ row }">{{ row.updateTime }}</template>
</el-table-column>
<el-table-column prop="operatorName" label="操作人" width="120" show-overflow-tooltip> </el-table-column>
<el-table-column prop="suitDepartmentName" label="适用范围" width="120" show-overflow-tooltip>
<template slot-scope="{ row }">{{ row.suitDepartmentName.join(',') }}</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="{ row }">
<el-button type="text" @click="changeRoute(row)">编辑</el-button>
<el-button type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<el-dialog title="加好友配置" :visible.sync="dialogVisible" width="590px" :before-close="handleClose">
<span class="tips">好办欢迎语支持文字、图片、视频、文件、链接及小程序</span>
<el-form label-width="100px" style="margin-top:20px">
<el-form-item label="加好友配置">
<div v-for="(val, key) in friendSettingTypeOption" :key="key">
<el-radio :label="Number(key)" v-model="type">{{ val }}</el-radio>
<el-tag size="small" v-show="key == 1">推荐使用</el-tag>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" :loading="btnLoading" @click="saveSetting">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import { postJsonRequest, getRequest } from '@/api/api';
import { _debounce } from '@/common/js/public';
export default {
props: {},
data() {
return {
form: {},
openFlag: 0
friendSettingTypeOption: {
1: '发送【好办欢迎语】+【带导购参数的会员小程序卡片】',
2: '发送【好办欢迎语】+【带导购参数的公众号二维码】',
3: '发送【好办欢迎语】',
4: '不发送【好办欢迎语】，用企微欢迎语'
},
title: '',
wxEnterpriseId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
friendSettingType: '',
type: 1,
friendSettingId: '',
btnLoading: false,
dialogVisible: false,
iconType: {
1: 'iconwenjianleixingtupian',
2: 'iconwenjianleixingshipin',
3: 'iconwenjianleixing-wenjian',
4: 'iconwenjianleixing-lianjie'
},
tableData: []
};
},
filters: {},
mounted() {
const that = this;
that.$emit('showTab', 4);
document.documentElement.style.backgroundColor = '#f0f2f5';
that.getData();
this.getSetting();
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
methods: {
/**
* 输入
*/
toInput: _debounce(function(e, value) {
this.getData();
}, 500),
/**
* 搜索标签清空
*/
clearSearch() {
this.getData();
},
openDialog() {
this.dialogVisible = true;
},
getSetting() {
getRequest('/haoban-manage3-web/welcome/get/friend-setting', { wxEnterpriseId: this.wxEnterpriseId }).then(res => {
let resData = res.data;
if (resData.code == 0 && resData.result) {
const { friendSettingId, friendSettingType } = resData.result;
this.friendSettingId = friendSettingId;
this.type = friendSettingType;
this.friendSettingType = friendSettingType;
}
});
},
saveSetting() {
let data = {
friendSettingId: this.friendSettingId,
wxEnterpriseId: this.wxEnterpriseId,
friendSettingType: this.type
};
this.btnLoading = true;
postJsonRequest('/haoban-manage3-web/welcome/save/friend-setting', data)
.then(res => {
console.log(res);
let resData = res.data;
if (resData.code == 0 && resData.result) {
this.$message.success(resData.message);
this.dialogVisible = false;
this.getSetting();
}
})
.finally(() => {
this.btnLoading = false;
});
},
/**
* 跳转
*/
changeRoute() {
this.$router.push('/salutatorySet');
changeRoute(row) {
this.$router.push({ path: '/salutatorySet', query: { id: row.welcomeId, type: this.friendSettingType } });
},
/**
* 获取数据
*/
getData() {
const that = this;
getRequest('/haoban-manage3-web/get-welcome', {})
postJsonRequest('/haoban-manage3-web/welcome/list', { title: this.title, wxEnterpriseId: this.wxEnterpriseId })
.then(res => {
let resData = res.data;
if (resData.errorCode == 1 && resData.result) {
that.form = { ...resData.result };
that.openFlag = resData.result.openFlag;
if (resData.code == 0 && resData.result) {
this.tableData = resData.result;
this.tableData.forEach(item => {
item.suitDepartmentName = [];
if (item.suitDepartmentList && item.suitDepartmentList.length) {
item.suitDepartmentList.forEach(ele => {
item.suitDepartmentName.push(ele.departmentName);
});
}
});
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
.catch(error => {
this.$message.error({
duration: 1000,
message: error.message
});
});
},
setWelcome(val) {
const that = this;
that.$refs.form.validate(value => {
if (value) {
this.$confirm('是否确认修改欢迎语启用状态？', '提示')
.then(() => {
getRequest('/haoban-manage3-web/set-welcome', { openFlag: val })
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.$message.success({
duration: 1000,
message: '设置成功'
});
window.location.reload();
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
})
.catch(() => {
that.openFlag = that.openFlag === 1 ? 0 : 1;
});
}
});
}
},
watch: {},
mounted() {
const that = this;
that.$emit('showTab', 4);
document.documentElement.style.backgroundColor = '#f0f2f5';
that.getData();
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
components: {}
};
</script>
<style type="text/scss" lang="scss" scoped>
.bg-ebecf0 {
background: #ebecf0;
}
.color-c0c4cc {
display: inline-block;
line-height: 34px;
padding-left: 10px;
color: #c0c4cc;
}
.condition-tips {
display: inline-block;
vertical-align: middle;
line-height: 32px;
}
.p-l-30 {
padding-left: 30px;
}
.p-l-40 {
padding-left: 40px;
}
.p-l-55 {
padding-left: 55px;
}
.p-l-85 {
padding-left: 85px;
}
.m-l-20 {
margin-left: 20px;
}
.line-50 {
height: 50px;
line-height: 50px;
.warp {
background: #fff;
margin-bottom: 10px;
padding: 20px;
font-size: 14px;
h2 {
margin-bottom: 12px;
font-weight: 500;
}
.echoData {
background: #f5f7fa;
border-radius: 2px;
line-height: 22px;
color: #606266;
padding: 5px 13px;
}
}
.el-alert--info {
align-items: flex-start;
width: 700px;
......@@ -182,6 +250,7 @@ export default {
}
.daily-set-wrap {
height: 100%;
background-color: #fff;
.daily-set-content {
padding: 20px;
.table-condition-left {
......@@ -189,58 +258,34 @@ export default {
}
}
}
.salutatory-wrap {
// height: 160px;
background: #f5f7fa;
.top {
display: flex;
justify-content: space-between;
align-items: center;
height: 47px;
padding: 0 20px 0 29px;
.left {
font-size: 14px;
font-weight: 600;
color: #303133;
line-height: 20px;
}
.right {
.date {
font-size: 12px;
font-weight: 400;
color: #909399;
line-height: 17px;
margin-right: 30px;
}
}
}
.line {
box-sizing: border-box;
border: 1px solid #e4e7ed;
border-style: none none solid none;
.el-radio {
margin-right: 0;
}
.el-radio + .el-radio {
margin-left: 0;
}
.flexBox {
display: flex;
justify-content: flex-start;
align-items: center;
.wrapText {
width: 90%;
text-align: left;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bottom {
padding: 16px 20px 21px 29px;
.el-form-item {
>>> .el-form-item__label {
padding: 0;
}
>>> .el-form-item__label,
>>> .el-form-item__content {
line-height: 20px;
font-size: 14px;
font-weight: 400;
color: #303133;
}
}
.popverText {
font-size: 12px;
width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.welcome-text {
text-align: left;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
.flexBox + .flexBox {
margin-top: 10px;
}
</style>
src/views/enterprise/salutatorySet.vue
<template>
<div class="daily-set-wrap ">
<div class="daily-set-content border-box">
<div class="admin-tip-body">
<div role="alert" class="el-alert el-alert--info">
<i class="el-alert__icon el-icon-info"></i>
<div class="el-alert__content">
<p class="el-alert__title">由管理员或者业务负责人统一配置后，客户将在添加成员为联系人后收到该欢迎语<br /></p>
</div>
</div>
</div>
<div class="salutatory-set-wrap m-t-20">
<el-form label-width="117px" ref="form" :model="form" :rules="rules" refs="form">
<el-form label-width="117px" ref="form" :model="form" :rules="rules" refs="form" class="form">
<el-form-item label="欢迎语标题" prop="title">
<el-input show-word-limit placeholder="请输入欢迎语标题" type="text" v-model="form.title" maxlength="20" class="w-384"></el-input>
</el-form-item>
......@@ -25,33 +33,170 @@
</p>
</el-popover>
</div>
<div class="mediaEcho" v-if="form.welcomeMediaList && form.welcomeMediaList.length">
<div class="flexBox" v-for="(item, index) in form.welcomeMediaList" :key="index">
<svg-icon :iconname="iconType[item.mediaType]" size="16" style="margin-right: 13px;"> </svg-icon>
<span class="popverText">{{ item.mediaTitle }}</span>
<i class="el-icon-close" style="margin-left: 20px;cursor: pointer;" @click="handleDelMedia(item, index)"></i>
</div>
</div>
<div class="addInfo" :style="form.welcomeMediaList && form.welcomeMediaList.length ? 'border-top: 1px dashed #dcdfe6;' : ''">
<el-popover placement="top" trigger="click">
<ul class="flex flex-wrap">
<li v-for="(item, index) in uploadList" :key="index + 'emoji'" :class="['uploadListBox', (item.title == '小程序' && haveAddApplet) || form.welcomeMediaList.length >= 9 ? 'disabled' : '']" @click="handleUploadList(item, index)">
<i :class="['iconfont-hb3', item.icon]" style="font-size:20px"></i>
<p>{{ item.title }}</p>
<input type="file" :accept="item.fileType" @change="e => handkeFileChange(e, item)" class="upload-input" />
</li>
</ul>
<div slot="reference" style="cursor: pointer; display: inline-block;">
<i class="iconfont-hb3 icontianjiajiahaowubiankuang"></i>
<p>添加图片/视频/文件/链接/小程序</p>
</div>
</el-popover>
<p style="font-size:12px;color:#909399">(附件不超过9个，单个大小不超过2M，小程序仅支持添加1个)</p>
</div>
</el-form-item>
<el-form-item>
<mult-upload :limit="1" :imgList.sync="imglist" />
<el-form-item label="使用范围">
<div v-show="form.suitDepartmentAddList.length">
<el-tag size="small" v-for="(item, index) in form.suitDepartmentAddList" closable @close="handleTagClose(index)" :key="item.departmentId">
{{ item.departmentName }}
</el-tag>
</div>
<span @click="openScopeDialog" class="color-2f54eb cursor-pointer" style="margin-left:8px;"> 请选择使用范围</span>
</el-form-item>
<el-button type="primary" style="margin-left:117px;" @click="submit">保存</el-button>
<el-button type="primary" style="margin-left:117px;" :loading="btnLoading" @click="submit">保存</el-button>
</el-form>
<div class="iphone">
<div class="infoList">
<div class="infoListBox" v-if="form.welcomeContent || form.title">
<div class="infoAvatar">
<img src="@/assets/head_default.jpg" />
</div>
<div class="textInfo">
<div class="content" style="font-size:14px;font-weight: 500;">{{ form.title }}</div>
<div class="content" v-html="form.welcomeContent"></div>
</div>
</div>
<div class="infoListBox" v-for="(item, index) in form.welcomeMediaList" :key="index">
<div class="infoAvatar">
<img src="@/assets/head_default.jpg" />
</div>
<div v-if="item.mediaType == 1" class="imgInfo">
<img :src="item.mediaUrl" />
</div>
<div v-if="item.mediaType == 2" class="videoInfo" @click="blank(item.mediaUrl)">
<video :src="item.mediaUrl" />
</div>
<div v-if="item.mediaType == 3" class="docInfo">
<div class="docTitle">
<b>{{ item.mediaTitle }}</b>
<p>{{ item.mediaSize }} KB</p>
</div>
<svg-icon iconname="iconwenjianleixing-wenjian" size="40"> </svg-icon>
</div>
<div v-if="item.mediaType == 4" class="urlInfo">
<div class="urlTitle">{{ item.mediaTitle }}</div>
<div class="urlContent">
<b>{{ item.mediaTitle }}</b>
<svg-icon iconname="iconwenjianleixing-lianjie" size="40"> </svg-icon>
</div>
</div>
<div v-if="item.mediaType == 5" class="appletsInfo">
<div class="appletsTitle">{{ item.mediaTitle }}</div>
<div class="appletsTitle" style="font-size:12px">{{ item.mediaMiniTitle }}</div>
<img :src="item.mediaUrl" />
</div>
</div>
</div>
</div>
</div>
<el-dialog title="添加公众号" width="585px" class="replay-link-dialog" :visible.sync="addReplayDialog" @closed="onClosed">
<el-form label-position="right" ref="form" :model="{}" label-width="100px">
<el-form label-position="right" ref="form" :model="{}" label-width="100px" @submit.native.prevent>
<el-form-item label="公众号名称">
<el-input v-model="url" @keyup.enter.native="addReplyBtn"></el-input>
<el-input v-model="accountName" @keyup.enter.native="addAcountName"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addReplayDialog = false">取消</el-button>
<el-button type="primary" @click="addAcountName">确定</el-button>
</div>
</el-dialog>
<el-dialog title="添加链接" width="585px" class="replay-link-dialog" :visible.sync="urlDialogVisible" @closed="onClosed">
<el-form label-position="right" ref="form" :model="{}" label-width="100px" @submit.native.prevent>
<el-form-item label="链接地址">
<el-input v-model="url" @keyup.enter.native="addUrl"></el-input>
<span class="tips">以http或https开头</span>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addReplayDialog = false">取 消</el-button>
<el-button type="primary" @click="addReplyBtn">确 定</el-button>
<el-button @click="urlDialogVisible = false">取消</el-button>
<el-button type="primary" @click="addUrl">确认添加</el-button>
</div>
</el-dialog>
<el-dialog title="添加小程序" width="585px" class="replay-link-dialog" :visible.sync="appletsDialogVisible" @closed="onClosed">
<div role="alert" class="el-alert el-alert--info" style="width:430px;margin-bottom:20px">
<i class="el-alert__icon el-icon-info"></i>
<div class="el-alert__content">
<p class="el-alert__title">如需修改小程序信息，请前往【好办后台-企业设置】进行修改</p>
</div>
</div>
<el-form label-position="right" ref="form" :model="{}" label-width="100px">
<el-form-item label="小程序名称">
<span>{{ applet.miniprogramName }}</span>
</el-form-item>
<el-form-item label="标题">
<span>{{ applet.title }}</span>
</el-form-item>
<el-form-item label="封面">
<img :src="applet.imageUrl" style="width:128px;height:128px;border-radius: 4px;" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="appletsDialogVisible = false">取消</el-button>
<el-button type="primary" @click="addapplets">确认添加</el-button>
</div>
</el-dialog>
<el-dialog title="请选择使用范围" width="886px" class="replay-link-dialog" :visible.sync="scopeVisible" @closed="clearAllSelectedData">
<div class="scopeBox">
<div class="left">
<el-input placeholder="请输入部门名称" maxlength="50" v-model="filterText" style="width: 398px;" clearable @clear="handlefilterTextClear" @keyup.native="value => toInput(value, searchInput)"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
<el-tree v-loading="loading" ref="tree" :data="treeData" show-checkbox node-key="departmentId" :props="defaultProps" :expand-on-click-node="false" class="tree" :check-strictly="true" :render-after-expand="false" @check-change="handleCheckChange">
<span class="custom-tree-node" slot-scope="{ node }">
<span class="font-14 color-2f54eb opacity80 iconfont-hb3 iconqiye-tianchong"></span>
<span>{{ node.label }}</span>
</span>
</el-tree>
</div>
<div class="right">
<div class="right-top">
<span>已选：{{ selectedTreeData.length }}个部门</span><span @click="clearAllSelectedData" class="color-2f54eb cursor-pointer">清空</span>
</div>
<ul v-if="selectedTreeData.length">
<li class="contact-li" v-for="(item, index) in selectedTreeData" :key="index + 'gic'">
<div class="li-cell cursor-pointer">
<div>
<span class="font-14 color-2f54eb opacity80 iconfont-hb3 iconqiye-tianchong"></span>
<span class="font-14 color-303133 span-departName"> {{ item.departmentName }}</span>
</div>
<i class="el-icon-close" @click="handleSelectedDataCancel(item, index)"></i>
</div>
</li>
</ul>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="scopeVisible = false">取消</el-button>
<el-button type="primary" @click="addSuitDepartment">确认</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
// import { _debounce } from '@/common/js/public';
// import showMsg from '@/common/js/showmsg';
import { getRequest, postForm, postJsonRequest } from '@/api/api';
import { _debounce } from '@/common/js/public';
import limitTextarea from '@/components/limit-textarea.vue';
import errMsg from '@/common/js/error';
import { emojiArr } from '@/utils/emoji';
import multUpload from '@/components/mult-upload-img.vue';
import singleUpload from '@/components/single-upload.vue';
......@@ -59,46 +204,342 @@ export default {
props: {},
data() {
return {
filterText: '',
defaultProps: {
label: 'departmentName'
},
form: {
title: '系统默认',
welcomeContent: '你好，<微信昵称>',
welcomeImg: ''
welcomeMediaList: [],
suitDepartmentAddList: []
},
imglist: [],
url: '',
uploadList: [
{
title: '图片',
icon: 'icontupian',
fileType: '*'
},
{
title: '视频',
icon: 'iconshipin',
fileType: '.mp4'
},
{
title: '文件',
icon: 'iconwenjian',
fileType: '*'
},
{
title: '链接',
icon: 'iconlianjie'
},
{
title: '小程序',
icon: 'iconxiaochengxu'
}
],
iconType: {
1: 'iconwenjianleixingtupian',
2: 'iconwenjianleixingshipin',
3: 'iconwenjianleixing-wenjian',
4: 'iconwenjianleixing-lianjie',
5: 'iconwenjianleixing-xiaochengxu'
},
accountName: '',
rules: {
title: [{ required: true, message: '请输入欢迎语标题', trigger: 'blur' }],
welcomeContent: [{ required: true, message: '请输入欢迎语内容', trigger: 'blur' }]
},
wxEnterpriseId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
emojiList: emojiArr,
addReplayDialog: false
addReplayDialog: false,
url: '',
urlDialogVisible: false,
appletsDialogVisible: false,
scopeVisible: false,
treeData: [],
treeDataCopy: [],
loading: false,
btnLoading: false,
selectedTreeData: [],
applet: {},
friendSettingType: ''
};
},
watch: {},
computed: {
haveAddApplet() {
return this.form.welcomeMediaList.filter(item => item.mediaType == 5).length > 0;
}
},
mounted() {
const that = this;
that.$emit('showTab', 4);
document.documentElement.style.backgroundColor = '#f0f2f5';
const { id, type } = this.$route.query;
if (id) {
that.getData();
}
if (type) {
this.friendSettingType = type;
}
this.getAppData();
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
components: {
limitTextarea,
singleUpload,
multUpload
},
methods: {
getAppData() {
// 获取小程序
getRequest('/haoban-manage3-web/list-miniprogram-setting', {})
.then(res => {
let resData = res.data;
if (resData.errorCode == 1 && resData.result) {
this.applet = resData.result.length && resData.result[0];
}
})
.catch(function(error) {
this.$message.error({
duration: 1000,
message: error.message
});
});
},
addSuitDepartment() {
this.form.suitDepartmentAddList = Object.assign([], this.selectedTreeData);
this.clearAllSelectedData();
this.scopeVisible = false;
},
handleTagClose(index) {
this.form.suitDepartmentAddList.splice(index, 1);
},
clearAllSelectedData() {
// 清空 右侧 被选中部门树的数据 和 清空 部门树的 选中节点
this.$refs.tree.setCheckedKeys([]);
},
handleSelectedDataCancel(item, index) {
// 删除 右侧 被选中部门树的数据
this.selectedTreeData.splice(index, 1);
console.log(this.selectedTreeData);
this.$refs.tree.setChecked(item.departmentId, false, true);
},
handlefilterTextClear() {
// 清空搜索部门树条件
this.treeData = this.handleTreeData(JSON.parse(JSON.stringify(this.treeDataCopy)));
this.$nextTick(() => {
this.$refs.tree.store._getAllNodes()[0].expanded = true;
if (this.selectedTreeData.length) {
this.$refs.tree.setCheckedKeys(this.selectedTreeData.map(item => item.departmentId));
} else {
this.$refs.tree.setCheckedKeys([]);
}
});
},
toInput: _debounce(function(e, value) {
// 前端搜索部门树
const that = this;
if (!that.filterText) {
that.handlefilterTextClear();
} else {
that.getSearchData();
}
}, 500),
getSearchData() {
// 前端搜索部门树
this.treeData = this.treeDataCopy.filter(ele => ele.departmentName.indexOf(this.filterText) != -1);
if (this.selectedTreeData.length) {
this.$refs.tree.setCheckedKeys(this.selectedTreeData.map(item => item.departmentId));
} else {
this.$refs.tree.setCheckedKeys([]);
}
},
handleCheckChange(data, checked, indeterminate) {
// 部门树选中变化时
const obj = JSON.parse(JSON.stringify(data));
obj.children ? delete obj.children : '';
if (checked) {
if (!this.selectedTreeData.filter(item => item.departmentId == obj.departmentId).length) this.selectedTreeData.push(obj);
} else {
this.selectedTreeData = this.selectedTreeData.filter(item => item.departmentId !== obj.departmentId);
}
console.log(this.selectedTreeData);
},
/**
* 获取部门树数据
*/
getTableList(val) {
let para = {
isStore: 0, // 当前页
parentId: '' // 一页显示个数
};
this.loading = true;
getRequest('/haoban-manage3-web/department-list-cache', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result && resData.result.length) {
this.treeData = this.handleTreeData(JSON.parse(JSON.stringify(resData.result)));
this.$nextTick(() => {
this.$refs.tree.store._getAllNodes()[0].expanded = true;
});
this.treeDataCopy = resData.result;
}
}
})
.catch(function(error) {
this.$message.error({
duration: 1000,
message: error.message
});
})
.finally(() => {
this.loading = false;
});
},
handleTreeData(data) {
let tree = data.filter(father => {
//循环所有项
let branchArr = data.filter(child => {
return father.departmentId == child.parentDepartmentId; //返回每一项的子级数组
});
if (branchArr.length > 0) {
father.hasSonNode = true;
father.children = branchArr; //如果存在子级，则给父级添加一个children属性，并赋值
} else {
father.hasSonNode = false;
}
return father.parentDepartmentId == 0; //返回第一层
});
console.log(tree);
return tree;
},
openScopeDialog() {
// 选择范围打开部门树弹窗
this.getTableList();
this.scopeVisible = true;
this.$nextTick(() => {
this.selectedTreeData = this.form.suitDepartmentAddList;
this.$refs.tree.setCheckedKeys(this.form.suitDepartmentAddList.map(item => item.departmentId));
});
},
blank(url) {
window.open(url);
},
handleUploadList(item, index) {
console.log(item);
if (['图片', '视频', '文件'].includes(item.title)) {
document.getElementsByClassName('upload-input')[index].click();
} else if (item.title == '链接') {
this.urlDialogVisible = true;
} else if (item.title == '小程序') {
this.appletsDialogVisible = true;
}
},
handleDelMedia(row, index) {
this.form.welcomeMediaList.splice(index, 1);
},
handkeFileChange(e, item) {
console.log(item);
const file = e.target.files[0]; // only use files[0]
console.log(file);
let fileType = '';
if (file.size > 2000000) {
this.$message.error('单个大小不超过2M');
return false;
}
if (item.title == '图片') {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
if (!isJPG) {
this.$message.error('请上传图片');
return false;
}
fileType = 'jpg';
} else if (item.title == '视频') {
const isVideo = file.type == 'video/mp4';
if (!isVideo) {
this.$message.error('请上传mp4类型的视频文件');
return false;
}
fileType = 'mp4';
} else if (item.title == '文件') {
fileType = '.doc';
}
this.handleRequest(file, fileType);
},
handleRequest(file, fileType) {
let files = new FormData();
files.append('file', file);
postForm(`/haoban-manage3-web/upload-file?fileType=${fileType}`, files).then(res => {
const { data } = res;
let mediaType = 1;
if (fileType == 'jpg') {
mediaType = 1;
} else if (fileType == 'mp4') {
mediaType = 2;
} else if (fileType == '.doc') {
mediaType = 3;
}
if (data.errorCode == 1 && data.result) {
const obj = {
mediaTitle: file.name,
mediaType,
mediaUrl: data.result.url
};
if (mediaType == 3) {
obj.mediaSize = (data.result.size / 1024).toFixed(2);
}
this.form.welcomeMediaList.push(obj);
}
});
},
onClosed() {
this.accountName = '';
this.url = '';
},
addReplyBtn() {
addAcountName() {
// 文本链接
if (this.url == '') {
if (this.accountName == '') {
this.$message({
message: '请输入公众号名称',
type: 'error'
});
return;
} else {
if (this.url.indexOf('#公众号：') != -1) {
if (this.accountName.indexOf('#公众号：') != -1) {
console.log('');
} else {
this.url = '#公众号：' + this.url;
this.accountName = '#公众号：' + this.accountName;
}
this.addReplayDialog = false;
this.form.welcomeContent = this.form.welcomeContent + this.url;
this.form.welcomeContent = this.form.welcomeContent + this.accountName;
}
},
addUrl() {
this.form.welcomeMediaList.push({
mediaTitle: this.url,
mediaType: 4,
mediaUrl: this.url,
mediaSize: ''
});
this.urlDialogVisible = false;
},
addapplets() {
this.form.welcomeMediaList.push({
mediaTitle: this.applet.miniprogramName,
mediaMiniTitle: this.applet.title,
mediaType: 5,
mediaUrl: this.applet.imageUrl,
mediaSize: ''
});
this.appletsDialogVisible = false;
},
addLinkDialogShow() {
// 是否显示添加回复链接的dialog
// console.log(this.cancelLink);
this.addReplayDialog = true;
},
changeRoute() {
......@@ -118,80 +559,152 @@ export default {
that.form.welcomeContent = that.form.welcomeContent + '<微信昵称>';
},
getData() {
const that = this;
let para = {
wxEnterpriseId: that.wxEnterpriseId
welcomeId: this.$route.query.id
};
getRequest('/haoban-manage3-web/get-welcome', para)
getRequest('/haoban-manage3-web/welcome/get', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1 && resData.result) {
that.form = resData.result;
this.imglist = resData.result.welcomeImg ? [{ url: resData.result.welcomeImg }] : [];
if (resData.code == 0 && resData.result) {
const { suitDepartmentList, title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId } = resData.result;
this.form = { suitDepartmentList, suitDepartmentAddList: JSON.parse(JSON.stringify(suitDepartmentList)) || [], title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId };
console.log(this.form);
this.form = Object.assign({}, this.form);
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
.catch(error => {
this.$message.error({
duration: 1000,
message: error.message
});
});
},
submit() {
const that = this;
that.$refs.form.validate(value => {
console.log(value);
this.$refs.form.validate(value => {
if (value) {
this.$confirm('确认保存此欢迎语？', '提示')
.then(() => {
this.form.welcomeImg = this.imglist.length ? this.imglist[0].url : '';
const para = { ...that.form };
getRequest('/haoban-manage3-web/save-welcome', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
this.$message({
type: 'success',
message: '保存成功!'
});
window.location.reload();
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
const { suitDepartmentAddList, suitDepartmentList, title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId } = this.form;
const para = { title, welcomeId, welcomeContent, mediaList: welcomeMediaList, wxEnterpriseId: wxEnterpriseId || this.wxEnterpriseId };
if (!suitDepartmentAddList.length) {
para.suitDepartmentDeleteList = suitDepartmentList;
para.suitDepartmentAddList = [];
} else {
const addArr = [];
const delArr = [];
suitDepartmentAddList.forEach(ele => {
if (!suitDepartmentList.filter(item => item.departmentId == ele.departmentId).length) {
addArr.push(ele);
}
});
suitDepartmentList.forEach(ele => {
if (!suitDepartmentAddList.filter(item => item.departmentId == ele.departmentId).length) {
delArr.push(ele);
}
});
para.suitDepartmentAddList = addArr;
para.suitDepartmentDeleteList = delArr;
}
para.suitDepartmentAddList.forEach(item => {
item.selectType = 1;
});
para.suitDepartmentDeleteList.forEach(item => {
item.selectType = 1;
});
console.log(para);
this.btnLoading = true;
postJsonRequest('/haoban-manage3-web/welcome/save', para)
.then(res => {
let resData = res.data;
if (resData.code == 0) {
this.$message({
type: 'success',
message: '保存成功!'
});
this.$router.push('/salutatory');
}
})
.catch(function(error) {
this.$message.error({
duration: 1000,
message: error.message
});
})
.catch();
.finally(() => {
this.btnLoading = false;
});
}
});
}
},
watch: {},
mounted() {
const that = this;
that.$emit('showTab', 4);
document.documentElement.style.backgroundColor = '#f0f2f5';
that.getData();
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
components: {
limitTextarea,
singleUpload,
multUpload
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.upload-input {
display: none;
}
.w-384 {
width: 384px;
width: 555px;
box-sizing: border-box;
}
.mediaEcho {
background: #f7f8fa;
padding-left: 20px;
padding-top: 14px;
padding-bottom: 14px;
.flexBox {
display: flex;
justify-content: flex-start;
align-items: center;
.popverText {
font-size: 12px;
line-height: 16px;
max-width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.flexBox + .flexBox {
margin-top: 14px;
}
}
.addInfo {
padding: 10px 20px;
width: 555px;
background: #f7f8fa;
border-radius: 2px;
line-height: 20px;
box-sizing: border-box;
p {
display: inline-block;
margin-left: 5px;
}
&:hover {
color: #2f54eb;
}
}
.uploadListBox {
width: 72px;
height: 60px;
border-radius: 2px;
border: 1px solid #dcdfe6;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
&:hover {
box-shadow: 0px 2px 4px 0px rgba(47, 84, 235, 0.16);
border: 1px solid #2f54eb;
}
}
.disabled {
pointer-events: none;
opacity: 0.5;
}
.uploadListBox + .uploadListBox {
margin-left: 20px;
}
.welcomeContent {
height: 220px;
......@@ -223,20 +736,18 @@ export default {
}
.welcomeContentItem >>> .el-form-item__content {
position: relative;
width: 384px;
width: 555px;
box-sizing: border-box;
.text-bottom {
position: absolute;
bottom: 1px;
top: 180px;
left: 1px;
justify-content: space-between;
align-items: center;
height: 38px;
width: 382px;
width: 555px;
box-sizing: border-box;
padding: 0 9px;
// background: #f5f7fa;
.put {
font-size: 12px;
font-weight: 400;
......@@ -252,5 +763,245 @@ export default {
}
}
}
.form {
width: 672px;
float: left;
}
.iphone {
border-radius: 4px;
position: relative;
margin-left: 117px;
display: inline-block;
font-size: 0;
line-height: 0;
background-image: url('../../assets/iphone2.png');
background-repeat: no-repeat;
width: 240px;
min-height: 495px;
background-size: 240px auto;
color: #303133;
.infoList {
padding: 0 10px;
margin-top: 80px;
border-radius: 6px;
max-height: 360px;
overflow: auto;
.infoListBox {
.infoAvatar {
display: inline-block;
vertical-align: top;
margin-right: 10px;
img {
vertical-align: top;
width: 26px;
height: 26px;
}
}
.imgInfo,
.videoInfo {
display: inline-block;
overflow: hidden;
border-radius: 4px;
position: relative;
cursor: default;
img {
min-height: 27px;
max-width: 140px;
}
}
.videoInfo {
video {
min-height: 27px;
max-width: 140px;
max-height: 250px;
cursor: pointer;
}
}
.textInfo,
.docInfo,
.urlInfo,
.appletsInfo {
min-height: 28px;
background-color: #fff;
border: 1px solid #e4e6e9;
max-width: 166px;
display: inline-block;
text-align: left;
padding: 5px 6px;
border-radius: 4px;
min-width: 24px;
box-sizing: border-box;
position: relative;
&::before {
top: 10px;
display: block;
content: ' ';
width: 0;
line-height: 0;
font-size: 0;
border-style: solid;
border-color: transparent;
position: absolute;
left: -6px;
border-width: 4px 6px;
border-left: 0;
border-right-color: #fff;
}
.content {
font-size: 12px;
word-break: break-all;
letter-spacing: 0;
line-height: 18px;
height: auto;
}
}
.docInfo {
display: inline-flex;
align-items: center;
}
.docTitle {
padding-right: 10px;
max-width: 100px;
float: left;
overflow-wrap: break-word;
b {
font-size: 12px;
text-align: left;
line-height: 16px;
}
p {
margin-top: 5px;
font-size: 12px;
color: #787878;
text-align: left;
line-height: 14px;
}
}
.urlTitle,
.appletsTitle {
font-size: 14px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 3px;
}
.urlInfo {
.urlContent {
overflow-wrap: break-word;
b {
color: #606266;
padding-right: 10px;
font-size: 12px;
text-align: left;
line-height: 17px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 100px;
float: left;
}
}
}
.appletsInfo {
.appletsTitle {
color: #606266;
}
img {
width: 144px;
height: 144px;
}
}
}
.infoListBox + .infoListBox {
margin-top: 15px;
}
}
}
}
.el-alert--info {
align-items: flex-start;
width: 700px;
padding-top: 5px;
font-size: 14px;
color: #606266;
background: #f7f8fa;
border-radius: 2px;
}
.el-icon-info {
width: 12px;
font-size: 12px;
color: #2f54eb;
margin-top: 5px;
}
.el-alert__content {
padding-left: 9px;
.el-alert__title {
font-size: 13px;
font-weight: 400;
color: #303133;
line-height: 22px;
}
}
.opacity80 {
opacity: 0.8;
}
.scopeBox {
width: 846px;
height: 522px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #dcdfe6;
display: flex;
.left {
padding: 15px;
width: 50%;
.tree {
margin-top: 20px;
height: 454px;
overflow-y: auto;
}
}
.right {
width: 50%;
border-left: 1px solid #dcdfe6;
padding: 20px 15px;
height: 454px;
overflow-y: auto;
.right-top {
margin-bottom: 15px;
display: flex;
justify-content: space-between;
color: #303133;
}
.contact-li {
.li-cell {
border-radius: 2px;
line-height: 32px;
display: inline-flex;
width: 392px;
justify-content: space-between;
padding: 0 4px;
align-items: center;
box-sizing: border-box;
&:hover {
background: #f7f8fa;
}
i {
width: 20px;
height: 20px;
border-radius: 10px;
font-size: 12px;
display: inline-flex;
justify-content: center;
align-items: center;
&:hover {
background: #e5e6eb;
}
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment