Skip to content

H
haoban-4
Commit 5c0c0dad by 无尘
Options

fix: 修改 vue 文件

parent ec116ce8
Showing with 1060 additions and 1 deletions
src/components/set/secret-set.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-04-14 09:50:16
* @LastEditors: 无尘
* @LastEditTime: 2020-07-20 14:48:46
-->
<!--
<secret-set :categoryId="categoryId" @closeText="closeText" @submitText="submitText"></secret-set>
import secretSet from '@/components/set/secret-set.vue';
-->
<template>
<el-dialog :title="!!editRow.materialId ? '编辑' : '新建'" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
<div class="">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
<el-form-item label="小程序名称" prop="secretName">
<limitInput :inputWidth="402" :inputValue.sync="ruleForm.secretName" :holder="'请输入小程序名称'" :getByType="'word'" :maxLength="20"> </limitInput>
</el-form-item>
<!-- <el-form-item label="agentid" prop="agentid">
<limitInput :inputWidth="402" :inputValue.sync="ruleForm.agentid" :holder="'请输入agentid'" :getByType="'word'" :maxLength="80"> </limitInput>
</el-form-item> -->
<el-form-item label="secret" prop="secretVal">
<limitInput :inputWidth="402" :inputValue.sync="ruleForm.secretVal" :holder="'请输入secret'" :getByType="'word'" :maxLength="80"> </limitInput>
</el-form-item>
<el-form-item label="关联商户" prop="enterpriseId">
<el-select class="w-402" v-model="ruleForm.enterpriseId" placeholder="全部品牌" @change="getTableList">
<!-- <el-option label="全部品牌" value=""></el-option> -->
<el-option v-for="item in brandOptions" :key="item.enterpriseId" :label="item.enterpriseName" :value="item.enterpriseId"> </el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="toCancel">取消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import { _debounce } from '@/common/js/public';
import { postRequest } from '@/api/api';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
export default {
props: {
editRow: {
type: Object,
default() {
return {};
}
},
categoryId: {
type: Object,
default() {
return '';
}
}
},
components: {
limitInput,
},
data() {
return {
editPersion: localStorage.getItem('userName'),
dialogVisible: true,
ruleForm: {
secretName: '',
secretVal: '',
enterpriseId: '',
secretId: ''
},
rules: {
secretName: [{ required: true, message: '请输入小程序名称', trigger: 'blur' }],
secretVal: [{ required: true, message: '请输入secret', trigger: 'blur' }],
enterpriseId: [{ required: true, message: '请选择关联商户', trigger: 'change' }]
},
brandOptions: [] //品牌
};
},
methods: {
/**
* 获取品牌
*/
getBrandData() {
const that = this;
postRequest('/haoban-manage3-web/wx-enterprise-list', {})
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result && !!resData.result.length) {
that.brandOptions = resData.result;
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
toCancel() {
const that = this;
that.$emit('closeText');
that.$refs['ruleForm'].resetFields();
},
handleClose(done) {
const that = this;
that.$emit('closeText');
that.$refs['ruleForm'].resetFields();
},
submitForm: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
that.postSave();
}
});
}, 300),
postSave() {
const that = this;
const data = {
secretId: that.ruleForm.secretId,
secretName: that.ruleForm.secretName,
enterpriseId: that.ruleForm.enterpriseId,
memberSecret: that.ruleForm.secretVal
};
postRequest('/haoban-manage3-web/wx-enterprise-member-secret-set', data)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('操作成功', 'success');
that.$refs['ruleForm'].resetFields();
that.$emit('submitText');
} else {
errMsg.errorMsg(resData);
}
})
.catch(error => {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
editRow(newData) {
const that = this;
if (Object.keys(newData).length) {
that.ruleForm = JSON.parse(JSON.stringify(newData));
}
}
},
mounted() {
const that = this;
that.getBrandData();
if (Object.keys(that.editRow).length) {
that.ruleForm = JSON.parse(JSON.stringify(that.editRow));
}
}
};
</script>
<style lang="less" scoped>
.w-402 {
width: 402px;
}
.m-b-20 {
margin-bottom: 20px;
}
.p-l-18 {
padding-left: 18px;
}
.material-content {
position: relative;
.material-body {
/* resize: none;
width: 440px;
height: 273px;
border-radius: 2px;
border: 1px solid rgba(196, 198, 207, 1); */
.el-textarea {
/deep/ .el-textarea__inner {
height: 273px;
}
}
}
.emoji-img {
position: absolute;
left: 10px;
bottom: 10px;
}
}
.el-textarea {
/deep/ .el-textarea__inner {
height: 273px;
}
}
</style>
src/router/routes.js
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2020-07-16 16:37:05
* @LastEditors: 无尘
* @LastEditTime: 2020-07-17 11:07:15
* @LastEditTime: 2020-07-20 14:49:34
*/
import _import from './_import.js';
......@@ -78,6 +78,20 @@ export const routes = [
]
},
{
// 企业设置
path: '/enterprise',
name: '企业设置',
redirect: 'enterpriseSet',
component: _import('enterprise', 'index'),
children: [
{
path: '/enterpriseSet',
name: '企业信息',
component: _import('enterprise', 'enterpriseSet')
}
]
},
{
path: '/gic-error',
name: 'gic跳转失败页',
component: _import('errorPage', 'gic-error')
......
src/views/enterprise/enterpriseSet.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2020-06-10 11:19:29
-->
<template>
<div class="daily-set-wrap ">
<div class="company-set-content border-box">
<div class="company-title m-b-20 flex flex-space-between">
<div class="line-h-32"><span class="color-303133 font-14 font-w-600">企业微信基本信息</span><el-button class="m-l-20" type="text" @click="refeshData">同步刷新 </el-button></div>
<div>
<set-tip v-if="!checkShow" :tipText="tipText"></set-tip>
</div>
</div>
<div class="company-info-body">
<el-form ref="form" :model="form" label-width="105px">
<!-- <el-form-item label="小程序版本">
<span class="font-14 color-303133">{{ companyObj.smallVersion || '免费版' }}</span>
</el-form-item> -->
<el-form-item label="企业名称">
<span class="font-14 color-303133 p-r-10">{{ companyObj.corpName }}</span> <el-tag> {{ companyObj.contactFlag == 1 ? '已认证' : '未认证' }}</el-tag
><span v-if="companyObj.contactFlag == 1" class="p-l-10 font-12 color-909399">认证到期 {{ companyObj.verifiedEndTime | timeStampToYmd }}</span>
</el-form-item>
<el-form-item label="企业ID">
<span class="font-14 color-303133">{{ companyObj.corpid }}</span>
</el-form-item>
<el-form-item label="行业类型">
<span class="font-14 color-303133">{{ companyObj.corpIndustry }} / {{ companyObj.corpSubIndustry }}</span>
</el-form-item>
<el-form-item label="人员规模">
<span class="font-14 color-303133">{{ companyObj.corpScale }}</span>
</el-form-item>
<el-form-item label="地址">
<span class="font-14 color-303133">{{ companyObj.location }}</span>
</el-form-item>
</el-form>
</div>
<div class="company-title m-b-20 m-t-30"><span class="color-303133 font-14 font-w-600">客户密钥维护</span></div>
<div class="company-info-body secret-body">
<div class="m-b-20 secret-cell">
<span class="inline-block w-127"
><el-tooltip class="item" effect="dark" content="企业微信中【客户联系】API中若更新secret，请复制后更新至此处。首次使用好办请输入。" placement="top-start"> <span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;" class="font-14 color-606266">客户联系secret：</span></el-tooltip> </span
><el-input class="m-l-10 w-399" maxlength="200" v-model="wxObj.secretVal" placeholder="必填"></el-input><el-button class="m-l-20" type="text" @click="saveSecret('1')">保存</el-button><span v-if="wxObj.updateTime" class="m-l-20 font-12 color-909399">最后一次保存：{{ wxObj.updateTime | formatTimeStamp }}</span
><span class="m-l-37 font-14 color-303133"
><span :class="['iconfont', wxObj.checkFlag ? 'color-49c958 iconchenggong' : 'color-f83431 iconshibai']"></span><span class="p-l-10">{{ wxObj.checkFlag ? '校验成功' : '校验失败' }}</span></span
>
<div v-if="showWxError" class="el-form-item__error m-l-137">请填写客户联系 secret</div>
</div>
<div class="m-b-20 secret-cell">
<span class="inline-block w-127"
><el-tooltip class="item" effect="dark" placement="top-start">
<div slot="content">企业微信中通讯录同步若更新secret，请复制后更新至此处。<br />因获取Secret而获取通讯录的相关信息。首次使用好办请输入。<br />若发生相关变更，与企业微信无关，特此告知！</div>
<span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;" class="font-14 color-606266">通讯录secret：</span></el-tooltip
></span
><el-input class="m-l-10 w-399" maxlength="200" v-model="contactObj.secretVal" placeholder="非必填"></el-input><el-button class="m-l-20" type="text" @click="saveSecret('2')">保存</el-button><span v-if="contactObj.updateTime" class="m-l-20 font-12 color-909399">最后一次保存：{{ contactObj.updateTime | formatTimeStamp }}</span
><span class="m-l-37 font-14 color-303133"
><span :class="['iconfont', contactObj.checkFlag ? 'color-49c958 iconchenggong' : 'color-f83431 iconshibai']"></span><span class="p-l-10">{{ contactObj.checkFlag ? '校验成功' : '校验失败' }}</span></span
>
</div>
<div class="m-b-20 secret-cell">
<span class="inline-block w-127"
><el-tooltip class="item" effect="dark" content="用于获取登录小程序用户的手机号/姓名/部门信息" placement="top-start"> <span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;" class="font-14 color-606266">好办助手secret：</span></el-tooltip> </span
><el-input class="m-l-10 w-399" v-model="haobanObj.secretVal" placeholder="必填"></el-input><el-button class="m-l-20" type="text" @click="saveSecret('3')">保存</el-button><span v-if="haobanObj.updateTime" class="m-l-20 font-12 color-909399">最后一次保存：{{ haobanObj.updateTime | formatTimeStamp }}</span
><span class="m-l-37 font-14 color-303133"
><span :class="['iconfont', haobanObj.checkFlag ? 'color-49c958 iconchenggong' : 'color-f83431 iconshibai']"></span><span class="p-l-10">{{ haobanObj.checkFlag ? '校验成功' : '校验失败' }}</span></span
>
<div v-if="showHaobanError" class="el-form-item__error m-l-137">请填写好办助手 secret</div>
</div>
<!-- <div class="secret-cell m-b-20">
<span class="inline-block w-127"
><el-tooltip class="item" effect="dark" content="企业微信中【应用管理】关联的会员小程序secret，请复制后更新至此处。首次使用好办请输入。" placement="top-start"> <span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;" class="font-14 color-606266">会员小程序secret：</span></el-tooltip> </span
><el-input class="m-l-10 w-399" maxlength="200" v-model="companyObj.memberSecret" placeholder="非必填"></el-input><el-button class="m-l-20" type="text" @click="saveSecret('3')">保存</el-button><span v-if="companyObj.memberSecretLastTime" class="m-l-20 font-12 color-909399">最后一次保存：{{ companyObj.memberSecretLastTime | formatTimeStamp }}</span
><span class="m-l-37 font-14 color-303133"
><span :class="['iconfont', companyObj.memberSecretFlag ? 'color-49c958 iconchenggong' : 'color-f83431 iconshibai']"></span><span class="p-l-10">{{ companyObj.memberSecretFlag ? '校验成功' : '校验失败' }}</span></span
>
</div> -->
<div class="secret-cell ">
<el-tooltip class="item" effect="dark" content="企业微信中【应用管理】关联的会员小程序secret，请复制后更新至此处。首次使用好办请输入。" placement="top-start"> <span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;" class="font-14 color-606266">会员小程序secret：</span></el-tooltip>
<span class="p-l-5 font-14 color-303133 font-w-500">会员小程序信息</span>
<div class="table-cell m-t-10 p-l-137">
<el-table class="no-empty-icon-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }">
<el-table-column label="小程序名称" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.secretName || '--' }}</template>
</el-table-column>
<el-table-column prop="" label="secret" width="506">
<template slot-scope="scope">
<span>{{ scope.row.secretVal || '-- ' }} </span><span :class="['iconfont', scope.row.checkFlag ? 'color-49c958 iconchenggong' : 'color-f83431 iconshibai']"></span><span class="p-l-10">{{ scope.row.checkFlag ? '校验成功' : '校验失败' }}</span>
</template>
</el-table-column>
<el-table-column prop="" label="关联商户" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.enterpriseName || '--' }}</template>
</el-table-column>
<el-table-column prop="" label="最近编辑时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="line-18">{{ scope.row.updateTime | timeStampToYmd }}</div>
<div class="line-18">{{ scope.row.updateTime | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column prop="" label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button type="text" @click="toEdit(scope.$index, scope.row)">编辑</el-button><el-button type="text" @click="toDel(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div v-if="tableData.length < 10" class="text-center add-cell cursor-pointer" @click="addSecret"><span class="el-icon-plus font-14 color-2f54eb add-cell-txt"></span><span class="font-14 color-2f54eb p-l-5 add-cell-txt">新建</span><span class="font-12 color-c0c4cc p-l-20">最多添加10个</span></div>
</div>
</div>
</div>
</div>
<secret-set v-if="addShow" :editRow="editRow" @closeText="closeText" @submitText="submitText"></secret-set>
</div>
</template>
<script>
import setTip from '@/components/app/set-tip.vue';
import secretSet from '@/components/set/secret-set.vue';
import { getRequest, postRequest } from '@/api/api';
import { _debounce } from '@/common/js/public';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
export default {
props: {},
data() {
return {
checkShow: true,
tipText: '请在企业密钥维护中输入对应的secret',
tableH: window.screen.availHeight - 464 - 126,
wxEnterpriseId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
companyObj: {
smallVersion: '',
corpName: '',
corpid: '',
contactFlag: false,
verifiedEndTime: '',
corpIndustry: '',
corpSubIndustry: '',
corpUserMax: '',
location: ''
},
// 客户联系
wxObj: {
secretType: 1,
secretVal: '',
checkFlag: 0,
updateTime: null
},
// 通讯录
contactObj: {
secretType: 2,
secretVal: '',
checkFlag: 0,
updateTime: null
},
// 好办助手
haobanObj: {
secretType: 3,
secretVal: '',
checkFlag: 0,
updateTime: null
},
showWxError: false,
showContactError: false,
showHaobanError: false,
tableData: [],
addShow: false,
editRow: {}
};
},
computed: {},
methods: {
addSecret() {
const that = this;
that.addShow = true;
that.editRow = {};
},
/**
* 编辑
*/
toEdit(index, row) {
const that = this;
that.addShow = true;
that.editRow = row;
},
closeText() {
const that = this;
that.addShow = false;
that.editRow = {};
},
submitText() {
const that = this;
that.addShow = false;
that.editRow = {};
that.getSecretData();
},
/**
* 删除
*/
toDel(index, row) {
const that = this;
that
.$confirm('确定删除当前小程序信息?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.postDel(index, row);
})
.catch(() => {});
},
postDel(index, row) {
const that = this;
let para = {
secretId: row.secretId
};
postRequest('/haoban-manage3-web/member-secret-del', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('删除成功', 'success');
that.getSecretData();
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 保存secret
*/
saveSecret: _debounce(function(flag) {
const that = this;
let para = {};
if (flag == 1) {
para.wxSecretKey = String(that.wxObj.secretVal).trim();
that.showWxError = !!that.wxObj.secretVal ? false : true;
}
if (flag == 2) {
para.contactSecret = String(that.contactObj.secretVal).trim();
}
if (flag == 2 && para.contactSecret == '') {
return false;
}
if (flag == 3) {
para.contactSecret = String(that.haobanObj.secretVal).trim();
that.showHaobanError = !!that.haobanObj.secretVal ? false : true;
}
if (flag == 1 && that.showWxError) {
return false;
}
if (flag == 3 && that.showHaobanError) {
return false;
}
that.postSaveSecret(flag, para);
}, 300),
postSaveSecret(flag, para) {
const that = this;
const url = flag == 1 ? '/wx-enterprise-wx-secret-set' : flag == 2 ? 'wx-enterprise-contact-secret-set' : 'wx-enterprise-haoban-secret-set';
postRequest(`/haoban-manage3-web/${url}`, para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('操作成功', 'success');
that.getSecretData();
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
refeshData() {
const that = this;
that.refreshData();
},
/**
* 刷新数据
*/
refreshData(val) {
const that = this;
let para = {
wxEnterpriseId: that.wxEnterpriseId
};
getRequest('/haoban-manage3-web/wxEnterprise-refresh', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('刷新成功', 'success');
that.companyObj = resData.result;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取secret数据
*/
getSecretData() {
const that = this;
let para = {
wxEnterpriseId: that.wxEnterpriseId
};
getRequest('/haoban-manage3-web/secret-list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = [];
if (resData.result && resData.result.length) {
resData.result.forEach(ele => {
if (ele.secretType == 1) {
that.wxObj = ele;
}
if (ele.secretType == 2) {
that.contactObj = ele;
}
if (ele.secretType == 3) {
that.haobanObj = ele;
}
if (ele.secretType == 4) {
that.tableData.push(ele);
}
});
}
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取数据
*/
getData(val) {
const that = this;
let para = {
wxEnterpriseId: that.wxEnterpriseId
};
getRequest('/haoban-manage3-web/wxEnterprise-detail', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.companyObj = resData.result;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取显示的提示
*/
getTipData() {
const that = this;
let para = {};
getRequest('/haoban-manage3-web/is-wx-enterprise-secret-set', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.checkShow = resData.result;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {},
mounted() {
const that = this;
that.$emit('showTab', 1);
document.documentElement.style.backgroundColor = '#f0f2f5';
that.getData();
that.getSecretData();
that.getTipData();
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
components: {
setTip,
secretSet
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.color-c0c4cc {
display: inline-block;
line-height: 34px;
padding-left: 10px;
color: #c0c4cc;
}
.color-49c958 {
color: #49c958;
}
.color-f83431 {
color: #f83431;
}
.line-h-32 {
line-height: 32px;
}
.condition-tips {
display: inline-block;
vertical-align: middle;
line-height: 32px;
}
.w-127 {
width: 127px;
}
.w-399 {
width: 399px;
}
.p-l-5 {
padding-left: 5px;
}
.p-l-130 {
padding-left: 130px;
}
.p-l-137 {
padding-left: 137px;
}
.m-l-20 {
margin-left: 20px;
}
.m-l-37 {
margin-left: 37px;
}
.m-l-137 {
margin-left: 137px;
}
.m-b-20 {
margin-bottom: 20px;
}
.m-t-30 {
margin-top: 30px;
}
.secret-cell {
position: relative;
}
.add-cell {
height: 43px;
line-height: 43px;
border-bottom: 1px solid #dcdfe6;
&:hover {
.add-cell-txt {
color: #597ef7;
}
}
}
.table-condition {
// min-width: 1200px;
}
.secret-body {
.el-input {
/deep/ .el-input__inner {
color: #c0c4cc;
}
}
}
.daily-set-wrap {
height: 100%;
.company-set-content {
padding: 20px;
.table-condition-left {
font-size: 0;
}
}
.el-form {
.el-form-item {
margin-bottom: 4px;
}
/deep/ .el-form-item__label {
color: #606266;
}
}
.depart-item-content {
width: 213px;
height: 32px;
overflow: hidden;
white-space: nowrap;
border-radius: 4px;
border: 1px solid #dcdfe6;
cursor: pointer;
}
.item-cell-select {
/deep/ .el-select__tags {
white-space: nowrap;
overflow: hidden;
}
}
.depart-cell {
position: relative;
margin: 0 24px 24px 0;
.el-icon-circle-close {
position: absolute;
top: -10px;
right: -10px;
font-size: 16px;
color: #808995;
cursor: pointer;
}
}
}
</style>
src/views/enterprise/index.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2020-07-20 14:49:18
-->
<template>
<div class="my-customer-wrap common-set-wrap">
<vue-office-header :projectName="projectName" @collapseTag="collapseTag" @toRouterView="toRouterView"> </vue-office-header>
<div class="enterprise-wrap__body">
<div id="content" class="content">
<div class="content-body">
<div class="right-content border-box">
<div class="right-box" style="min-height: calc(100vh - 86px);">
<div class="apps-content flex" style="min-height: calc(100vh - 86px);">
<div class="apps-content-left w-157" style="min-height: calc(100vh - 86px);">
<common-detail-left :tabListData="tabListData" :activeSelTab="activeSelTab" @setSelectTab="setSelectTab"></common-detail-left>
</div>
<div class="apps-content-right border-box">
<transition name="fade" mode="out-in">
<router-view :brandId="activeBrand" :activeGroupId="activeGroup" :tabType="activeTab" @showTab="showTab"></router-view>
</transition>
</div>
</div>
</div>
</div>
<!-- <vue-gic-footer></vue-gic-footer> -->
<!-- 公共组件 -->
</div>
</div>
</div>
</div>
</template>
<script>
import commonDetailLeft from '@/components/app/app-detail-left.vue';
import vueOfficeHeader from '@/components/vue-office-header.vue';
export default {
name: 'reviewed',
data() {
return {
bgHeight: window.screen.availHeight - 288 + 'px',
activeSelTab: '1',
activeTab: '1',
tabListData: [
{
tabId: '1',
tabName: '企业信息',
icon: 'iconqiyexinxi'
}
],
activeBrand: '', // 商户(品牌) id
activeGroup: '' // 商户(品牌) groupId
};
},
computed: {},
methods: {
// 处理路由跳转
toRouterView(val) {
let that = this;
// 模拟检查数据
// //有两个参数
//{
// name:,
// path:
//}
that.$router.push({
path: val.path
});
},
/**
* 路由跳转
*/
changeRoute(path) {
this.$router.push(path);
},
/**
* 返回 的 brandId
*/
selectBrandId(id, groupId) {
let that = this;
that.activeBrand = id;
that.activeGroup = groupId;
},
/**
* 选择后返回tabId，做各路由判断
*/
setSelectTab(item) {
let that = this;
that.activeTab = item.tabId;
switch (item.tabId) {
case '1':
that.changeRoute('enterpriseSet');
break;
case '2':
that.changeRoute('adminList');
break;
case '3':
that.changeRoute('material');
break;
}
},
/**
* 各路由返回 tabId
*/
showTab(id) {
let that = this;
that.activeTab = id;
that.activeSelTab = id;
that.tabListData.forEach(ele => {
if (ele.tabId == id) {
ele.onlyIconActive = false;
}
if (!!ele.children) {
ele.children.forEach(el => {
if (el.tabId == id) {
ele.onlyIconActive = true;
}
if (!!el.children) {
el.children.forEach(item => {
if (item.tabId == id) {
ele.onlyIconActive = true;
}
});
}
});
}
});
}
},
watch: {
$route: {
handler: function(val, oldVal) {},
// 深度观察监听
deep: true
},
activeBrand: function(newData, oldData) {
const that = this;
that.activeBrand = newData;
},
activeGroup: function(newData, oldData) {
const that = this;
that.activeGroup = newData;
}
},
mounted() {
// const that = this;
document.documentElement.style.backgroundColor = '#f0f2f5';
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
components: {
commonDetailLeft,
vueOfficeHeader
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.bg-82C5FF {
background: #82c5ff;
}
.color-508CEE {
color: #508cee;
}
.color-FF585C {
color: #ff585c;
}
.line-h-18 {
line-height: 18px;
}
.tooltip-text {
width: 100%;
white-space: pre-wrap;
word-break: break-all;
}
.my-customer-wrap {
height: 100%;
}
.content {
padding-top: 46px;
min-width: 1400px;
box-sizing: border-box;
}
.right-content {
/*width: 100%;*/
padding: 20px;
min-height: calc(100% - 157px);
.right-box {
background: #fff;
min-height: 500px;
padding: 0px;
.apps-content {
.apps-content-left {
min-width: 157px;
height: 100%;
background: #fff;
overflow-x: hidden;
overflow-y: auto;
.apps-content-left__title {
height: 55px;
line-height: 55px;
padding: 0 0 0 18px;
}
.tab-left-list-cell {
position: relative;
text-align: left;
margin-top: 15px;
height: 30px;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
&:hover {
background: rgba(24, 144, 255, 0.06);
i {
color: #2f54eb;
}
}
&.active-tab {
background: rgba(24, 144, 255, 0.06);
&::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #2f54eb;
z-index: 1;
}
i {
color: #2f54eb;
}
}
.child-tab-left-list {
li {
position: relative;
text-align: left;
height: 30px;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
&:hover {
background: rgba(24, 144, 255, 0.06);
i {
color: #2f54eb;
}
}
&.active-tab {
background: rgba(24, 144, 255, 0.06);
&::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #2f54eb;
z-index: 1;
}
i {
color: #2f54eb;
}
}
}
}
}
}
.apps-content-right {
width: calc(100% - 157px);
padding-left: 10px;
background: #f0f2f5;
.daily-set-wrap {
height: 100%;
background: #fff;
}
.app-detail-wrap {
height: 100%;
background: #fff;
}
.common-set-wrap {
height: 100%;
background: #fff;
}
}
}
}
}
</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