Skip to content

肖康 / cloudSystem

Go to a project
Commit 2cb1ac83 by liangjianmin
Options

style(menu): 格式化menu.vue文件代码风格 

- 统一调整template内部标签及属性的缩进和空格风格
- 规范多处vue模板标签对齐和空格使用
- 对script部分的import语句进行格式调整，规范逗号和空格
- 修复函数体和对象字面量的格式统一
- 保持代码风格一致提高可读性和维护性
parent 6ee04525
Inline Side-by-side
Showing with 1384 additions and 1389 deletions
src/components/menu.vue
<template> <template>
<div class="nav-box"> <div class="nav-box">
<div class="nav-top"> <div class="nav-top">
<div class="con-box clr"> <div class="con-box clr">
<div class="logo fl">芯链系统</div> <div class="logo fl">芯链系统</div>
<div class="tab-box fl" ref="scrollbox"> <div class="tab-box fl" ref="scrollbox">
<!--tab 栏目--> <!--tab 栏目-->
<div class="item-boxs row verCenter" ref="scrollboxinner"> <div class="item-boxs row verCenter" ref="scrollboxinner">
<a class="item first row rowCenter verCenter" href="/#/" :class="{'act':$route.path=='/'}"> <a class="item first row rowCenter verCenter" href="/#/" :class="{ 'act': $route.path == '/' }">
<font class="fl">概况</font> <font class="fl">概况</font>
</a> </a>
<a class="item row rowCenter verCenter" :class="{'act':(JSON.stringify(item)==JSON.stringify({path: $route.path,title: $route.meta.title,query:$route.query}))}" @click="tabUrl(item)" v-for="item in tabs"> <a class="item row rowCenter verCenter" :class="{ 'act': (JSON.stringify(item) == JSON.stringify({ path: $route.path, title: $route.meta.title, query: $route.query })) }" @click="tabUrl(item)" v-for="item in tabs">
<font class="fl">{{ item.title }}</font> <font class="fl">{{ item.title }}</font>
<span class="icon iconfont fl" @click.stop="closetab(item.path)"></span> <span class="icon iconfont fl" @click.stop="closetab(item.path)"></span>
</a> </a>
</div> </div>
</div> </div>
<!--right-bar--> <!--right-bar-->
<div class="user-box fr row verCenter"> <div class="user-box fr row verCenter">
<a class="el-icon-s-cooperation" style="font-size: 27px;" href="/#/notice" title="系统公告"></a> <a class="el-icon-s-cooperation" style="font-size: 27px;" href="/#/notice" title="系统公告"></a>
<div class="line"></div> <div class="line"></div>
<i class="el-icon-message-solid message-num" @click="showMsg" title="消息通知"> <i class="el-icon-message-solid message-num" @click="showMsg" title="消息通知">
<el-badge class="mark" :value="not_read_count"/> <el-badge class="mark" :value="not_read_count" />
</i> </i>
<div class="line"></div> <div class="line"></div>
<a class="msgh row verCenter" href="javascript:history.go(0)" title="点击刷新"> <a class="msgh row verCenter" href="javascript:history.go(0)" title="点击刷新">
<span class="el-icon-refresh icon"></span> <span class="el-icon-refresh icon"></span>
</a> </a>
<div class="line"></div> <div class="line"></div>
<a class="fl" href="/芯链系统-操作手册.pdf" target="_blank" title="点击查看芯链系统-操作手册"><span class="icon iconfont iconwendangguanli fl"></span></a> <a class="fl" href="/芯链系统-操作手册.pdf" target="_blank" title="点击查看芯链系统-操作手册"><span class="icon iconfont iconwendangguanli fl"></span></a>
<div class="line"></div> <div class="line"></div>
<div class="login-v row verCenter"> <div class="login-v row verCenter">
<img :src="userinfo.avatar||'https://www.ichunt.com/v3/dist/res/home/images/headimg/boy1.png'" alt=""> <img :src="userinfo.avatar || 'https://www.ichunt.com/v3/dist/res/home/images/headimg/boy1.png'" alt="">
<div class="namex">{{ userinfo.contacts_name || '猎芯网用户' }}</div> <div class="namex">{{ userinfo.contacts_name || '猎芯网用户' }}</div>
<div class="lo-box-drop row verCenter"> <div class="lo-box-drop row verCenter">
<span class="icon iconfont"></span> <span class="icon iconfont"></span>
<div class="drop-box"> <div class="drop-box">
<a href="javascript:;" @click="changePwd()">修改密码</a> <a href="javascript:;" @click="changePwd()">修改密码</a>
<a href="javascript:;" @click="logout">退出登录</a> <a href="javascript:;" @click="logout">退出登录</a>
</div> </div>
</div>
</div>
</div>
</div> </div>
</div>
</div>
</div>
</div>
<div class="nav-left" v-show="!collapse">
<div class="meau-con">
<div class="zankai">
<span class="icon iconfont fr" @click="zk"></span>
</div>
<!--菜单栏-->
<el-menu class="el-menu-vertical-demo" active-text-color="#1969F9" router :default-active="$route.path" :router="true" :unique-opened="true" @open="handleOpen" @close="handleClose" @select="handleSelect">
<template v-if="Object.keys(index_home).length !== 0">
<el-menu-item :index="'/'" :class="{'indextab':isIndexTab}">
<template slot="title">
<span class="icon iconfont iconsy"></span>
<span>概况</span>
</template>
</el-menu-item>
</template>
<template v-if="menuData.length > 0">
<el-submenu :index="(index+2).toString()" v-for="(item,index) in menuData" :key="index">
<template slot="title">
<span :class="['icon', 'iconfont', item.iconfont]"></span>
<span slot="title">{{ item.name }}</span>
</template>
<el-menu-item-group>
<el-menu-item :index="v.path" v-for="(v,i) in item.children" :key="i">{{ v.name }}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</template>
</el-menu>
</div>
</div>
<!--收缩图标-->
<div class="nav-icon" v-show="collapse">
<div class="zankai">
<span class="icon iconfont fr" @click="zk"></span>
</div>
<template v-if="Object.keys(index_home).length !== 0">
<div class="item" :class="{'act':tabSure==1}">
<span class="icon iconfont iconsy"></span>
</div> </div>
</template> <div class="nav-left" v-show="!collapse">
<template v-if="menuData.length > 0"> <div class="meau-con">
<div class="item" :class="{'act':tabSure==(index+1)}" v-for="(item,index) in menuData" :key="index"> <div class="zankai">
<span :class="['icon', 'iconfont', item.iconfont]"></span> <span class="icon iconfont fr" @click="zk"></span>
</div> </div>
</template> <!--菜单栏-->
</div> <el-menu class="el-menu-vertical-demo" active-text-color="#1969F9" router :default-active="$route.path" :router="true" :unique-opened="true" @open="handleOpen" @close="handleClose" @select="handleSelect">
<!--修改密码弹窗--> <template v-if="Object.keys(index_home).length !== 0">
<el-dialog title="修改密码" :visible.sync="dialogVisible" width="500px" class="demo-ruleForm"> <el-menu-item :index="'/'" :class="{ 'indextab': isIndexTab }">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"> <template slot="title">
<el-form-item label="原始密码" prop="old_password"> <span class="icon iconfont iconsy"></span>
<el-input v-model="ruleForm.old_password" type='password' placeholder='请输入原始密码'></el-input> <span>概况</span>
</el-form-item> </template>
<el-form-item label="新密码" prop="password"> </el-menu-item>
<el-input v-model="ruleForm.password" type='password' placeholder='请输入新密码'></el-input> </template>
</el-form-item> <template v-if="menuData.length > 0">
<el-form-item label="确认新密码" prop="repassword"> <el-submenu :index="(index + 2).toString()" v-for="(item, index) in menuData" :key="index">
<el-input v-model="ruleForm.repassword" type='password' placeholder='请输入新密码'></el-input> <template slot="title">
</el-form-item> <span :class="['icon', 'iconfont', item.iconfont]"></span>
<el-form-item> <span slot="title">{{ item.name }}</span>
<el-button @click="dialogVisible = false">取 消</el-button> </template>
<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button> <el-menu-item-group>
</el-form-item> <el-menu-item :index="v.path" v-for="(v, i) in item.children" :key="i">{{ v.name }}</el-menu-item>
</el-form> </el-menu-item-group>
</el-dialog> </el-submenu>
<!--消息通知--> </template>
<el-dialog title="消息通知" :visible.sync="dialogNewsVisible" width="900px" class="demo-ruleForm"> </el-menu>
<div class="tab-news row verCenter bothSide"> </div>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="全部" name="all">
<div slot="label">全部
<el-badge :value="notReadCount[0]" :max="99" v-if="notReadCount[0] > 0"></el-badge>
</div>
</el-tab-pane>
<el-tab-pane label="询价" name="inquiry">
<div slot="label">询价
<el-badge :value="notReadCount[6]" :max="99" v-if="notReadCount[6] > 0"></el-badge>
</div>
</el-tab-pane>
<el-tab-pane label="成单" name="orderForm">
<div slot="label">成单
<el-badge :value="notReadCount[7]" :max="99" v-if="notReadCount[7] > 0"></el-badge>
</div>
</el-tab-pane>
<el-tab-pane label="退货" name="returnGoods">
<div slot="label">退货
<el-badge :value="notReadCount[8]" :max="99" v-if="notReadCount[8] > 0"></el-badge>
</div>
</el-tab-pane>
<el-tab-pane label="上架有效期" name="shelfLife">
<div slot="label">上架有效期
<el-badge :value="notReadCount[9]" :max="99" v-if="notReadCount[9] > 0"></el-badge>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div>
<el-button type="primary" @click="updateMsg">标记已读</el-button>
<el-button type="danger" @click="deleteMsg">删除</el-button>
</div> </div>
</div> <!--收缩图标-->
<section> <div class="nav-icon" v-show="collapse">
<el-table ref="table" :data="tableData" max-height="500" @selection-change="handleSelectionChange" :show-header="false"> <div class="zankai">
<el-table-column type="selection" width="50" align="left"></el-table-column> <span class="icon iconfont fr" @click="zk"></span>
<el-table-column prop="inquiry_sn" label="" :show-overflow-tooltip="true" align="left"> </div>
<template slot-scope="scope"> <template v-if="Object.keys(index_home).length !== 0">
<span class="el-badge-num" v-if="scope.row.msg_status == 0"></span> <div class="item" :class="{ 'act': tabSure == 1 }">
<span style="margin-right: 4px;">{{ JSON.parse(scope.row.msg_data).date }}</span> <span class="icon iconfont iconsy"></span>
<span style="margin-right: 4px;">{{ JSON.parse(scope.row.msg_data).title }}</span> </div>
<template v-if="JSON.parse(scope.row.msg_data).cate_id == 6"> </template>
<a target="_blank" style="color: #409EFF" :href="JSON.parse(scope.row.msg_data).link">{{ JSON.parse(scope.row.msg_data).title_suffix }}</a> <template v-if="menuData.length > 0">
</template> <div class="item" :class="{ 'act': tabSure == (index + 1) }" v-for="(item, index) in menuData" :key="index">
<template v-else-if="JSON.parse(scope.row.msg_data).cate_id == 7"> <span :class="['icon', 'iconfont', item.iconfont]"></span>
<a target="_blank" style="color: #1969F9" :href="JSON.parse(scope.row.msg_data).link">{{ JSON.parse(scope.row.msg_data).title_suffix }}</a> </div>
</template>
<template v-else-if="JSON.parse(scope.row.msg_data).cate_id == 8">
<a target="_blank" style="color: #FF870E" :href="JSON.parse(scope.row.msg_data).link">{{ JSON.parse(scope.row.msg_data).title_suffix }}</a>
</template>
<template v-else-if="JSON.parse(scope.row.msg_data).cate_id == 9">
<a target="_blank" style="color: #FF0000" :href="JSON.parse(scope.row.msg_data).link">{{ JSON.parse(scope.row.msg_data).title_suffix }}</a>
</template>
<template v-else>
<a target="_blank" style="color: #409EFF" :href="JSON.parse(scope.row.msg_data).link">{{ JSON.parse(scope.row.msg_data).title_suffix }}</a>
</template>
</template> </template>
</el-table-column>
</el-table>
<div class="row verCenter bothSide" style="margin-top: 15px;">
<div style="margin-left: 13px;white-space: nowrap">
<el-checkbox @change="selectAll" v-model="checkAll" :indeterminate="isIndeterminate"></el-checkbox>
<el-button type="primary" @click="getNewsStatus(0)" style="margin-left: 10px;">未读</el-button>
<el-button type="primary" @click="getNewsStatus(1)">已读</el-button>
</div>
<el-pagination style="margin-top: 0" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 200]" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
</div> </div>
</section> <!--修改密码弹窗-->
</el-dialog> <el-dialog title="修改密码" :visible.sync="dialogVisible" width="500px" class="demo-ruleForm">
<!--系统公告--> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<el-dialog :title="noticeMsg.title" :close-on-click-modal="false" :visible.sync="dialogNoticeVisible" width="580px" custom-class="dialog-layer-notice"> <el-form-item label="原始密码" prop="old_password">
<div class="notice-content" v-html="noticeMsg.content"></div> <el-input v-model="ruleForm.old_password" type='password' placeholder='请输入原始密码'></el-input>
<div class="enclosure row verCenter"> </el-form-item>
<span>附件：</span> <el-form-item label="新密码" prop="password">
<a class="down" :href="noticeMsg.attachment_url ">{{ noticeMsg.attachment_name || '暂无附件' }}</a> <el-input v-model="ruleForm.password" type='password' placeholder='请输入新密码'></el-input>
</div> </el-form-item>
<div class="notice-bottom row bothSide verCenter"> <el-form-item label="确认新密码" prop="repassword">
<span>发件人：深圳市猎芯科技有限公司</span> <el-input v-model="ruleForm.repassword" type='password' placeholder='请输入新密码'></el-input>
<span>{{ noticeMsg.create_time }}</span> </el-form-item>
</div> <el-form-item>
</el-dialog> <el-button @click="dialogVisible = false">取 消</el-button>
<!--操作手册--> <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
<el-dialog title="系统Q&A" :visible.sync="dialogHandbookVisible" width="800px" class="demo-ruleForm handbook-layer"> </el-form-item>
<p class="handbook-t1"> </el-form>
芯链系统是猎芯科技最新推出的一套连接商家与终端客户的智能操作系统，集询报价管理、订单管理、库存管理、商品管理、数据统计等于一体，可帮助商家获得更多询价商机及快捷方便管理各自的型号库存信息； </el-dialog>
芯链商家可在芯链系统上自主管理商品上传下架及商品报价； <!--消息通知-->
终端客户订单需求，猎芯销售部和采购部通过询报价系统与芯链商家对接，实现芯链商家针对客户商机信息可进行自主报价、实现订单快速高效转化的过程。 <el-dialog title="消息通知" :visible.sync="dialogNewsVisible" width="900px" class="demo-ruleForm">
</p> <div class="tab-news row verCenter bothSide">
<p class="handbook-t2">以下为系统板块介绍</p> <div>
<div class="text"> <el-tabs v-model="activeName" @tab-click="handleClick">
<p class="tit row verCenter">概况板块-说明：</p> <el-tab-pane label="全部" name="all">
<p class="tt">概况页面主要统计贵司上传的库存型号数量以及订单转化率，并且会展示【猎芯网】热搜型号排名（前50名）;</p> <div slot="label">全部
</div> <el-badge :value="notReadCount[0]" :max="99" v-if="notReadCount[0] > 0"></el-badge>
<div class="text"> </div>
<p class="tit row verCenter">询报价管理板块-说明：</p> </el-tab-pane>
<p class="tt">询报价管理页面主要是汇总来自【猎芯询报价】系统推送而来的询价单（订单商机），贵司可对这些询价单进行报价操作，参与到猎芯的询价单报价中；</p> <el-tab-pane label="询价" name="inquiry">
</div> <div slot="label">询价
<div class="text"> <el-badge :value="notReadCount[6]" :max="99" v-if="notReadCount[6] > 0"></el-badge>
<p class="tit row verCenter">订单追踪板块-说明：</p> </div>
<p class="tt">订单追踪页面主要是展示贵司与猎芯合作的所有订单数据，包括猎芯与贵司签订的采购订单，贵司发出给猎芯的货品信息，猎芯与贵司产生的退货信息等；</p> </el-tab-pane>
</div> <el-tab-pane label="成单" name="orderForm">
<div class="text"> <div slot="label">成单
<p class="tit row verCenter">库存管理板块-说明：</p> <el-badge :value="notReadCount[7]" :max="99" v-if="notReadCount[7] > 0"></el-badge>
<p class="tt">库存管理页面主要的功能是供贵司上传型号库存，上传后的型号库存将会自动展示在【猎芯网】进行售卖，并且将会自动参与【猎芯询报价】系统的询价单推送（商机推送）；贵司上传的型号，与猎芯客户询价的型号匹配上后，该询价信息则会同步至【询报价管理】板块，贵司可对该条询价单（商机）进行报价； 贵司也可将具有优势货源的型号信息上传至【优势物料】页面，上传后的型号也将会自动参与【猎芯询报价】系统的询价单推送（商机推送）；</p> </div>
</div> </el-tab-pane>
<div class="text"> <el-tab-pane label="退货" name="returnGoods">
<p class="tit row verCenter">数据统计板块-说明：</p> <div slot="label">退货
<p class="tt">数据统计页面主要统计贵司上传的型号跟优势物料，所获得的【猎芯询报价】系统的询价单推送（商机推送）情况，及最终和猎芯成交订单的情况；</p> <el-badge :value="notReadCount[8]" :max="99" v-if="notReadCount[8] > 0"></el-badge>
</div> </div>
<div class="text"> </el-tab-pane>
<p class="tit row verCenter">消息管理板块-说明：</p> <el-tab-pane label="上架有效期" name="shelfLife">
<p class="tt">消息管理页面主要展示猎芯推送给供应商的消息通知，包括芯链系统的更新通知，猎芯与供应商之间的消息公告等；</p> <div slot="label">上架有效期
</div> <el-badge :value="notReadCount[9]" :max="99" v-if="notReadCount[9] > 0"></el-badge>
</el-dialog> </div>
<div class="welcome row rowCenter verCenter" v-if="dialogWelcome"> </el-tab-pane>
<img src="/welcome.png?v=20230607" alt=""> </el-tabs>
</div>
<div>
<el-button type="primary" @click="updateMsg">标记已读</el-button>
<el-button type="danger" @click="deleteMsg">删除</el-button>
</div>
</div>
<section>
<el-table ref="table" :data="tableData" max-height="500" @selection-change="handleSelectionChange" :show-header="false">
<el-table-column type="selection" width="50" align="left"></el-table-column>
<el-table-column prop="inquiry_sn" label="" :show-overflow-tooltip="true" align="left">
<template slot-scope="scope">
<span class="el-badge-num" v-if="scope.row.msg_status == 0"></span>
<span style="margin-right: 4px;">{{ JSON.parse(scope.row.msg_data).date }}</span>
<span style="margin-right: 4px;">{{ JSON.parse(scope.row.msg_data).title }}</span>
<template v-if="JSON.parse(scope.row.msg_data).cate_id == 6">
<a target="_blank" style="color: #409EFF" :href="JSON.parse(scope.row.msg_data).link">{{ JSON.parse(scope.row.msg_data).title_suffix }}</a>
</template>
<template v-else-if="JSON.parse(scope.row.msg_data).cate_id == 7">
<a target="_blank" style="color: #1969F9" :href="JSON.parse(scope.row.msg_data).link">{{ JSON.parse(scope.row.msg_data).title_suffix }}</a>
</template>
<template v-else-if="JSON.parse(scope.row.msg_data).cate_id == 8">
<a target="_blank" style="color: #FF870E" :href="JSON.parse(scope.row.msg_data).link">{{ JSON.parse(scope.row.msg_data).title_suffix }}</a>
</template>
<template v-else-if="JSON.parse(scope.row.msg_data).cate_id == 9">
<a target="_blank" style="color: #FF0000" :href="JSON.parse(scope.row.msg_data).link">{{ JSON.parse(scope.row.msg_data).title_suffix }}</a>
</template>
<template v-else>
<a target="_blank" style="color: #409EFF" :href="JSON.parse(scope.row.msg_data).link">{{ JSON.parse(scope.row.msg_data).title_suffix }}</a>
</template>
</template>
</el-table-column>
</el-table>
<div class="row verCenter bothSide" style="margin-top: 15px;">
<div style="margin-left: 13px;white-space: nowrap">
<el-checkbox @change="selectAll" v-model="checkAll" :indeterminate="isIndeterminate"></el-checkbox>
<el-button type="primary" @click="getNewsStatus(0)" style="margin-left: 10px;">未读</el-button>
<el-button type="primary" @click="getNewsStatus(1)">已读</el-button>
</div>
<el-pagination style="margin-top: 0" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 200]" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
</div>
</section>
</el-dialog>
<!--系统公告-->
<el-dialog :title="noticeMsg.title" :close-on-click-modal="false" :visible.sync="dialogNoticeVisible" width="580px" custom-class="dialog-layer-notice">
<div class="notice-content" v-html="noticeMsg.content"></div>
<div class="enclosure row verCenter">
<span>附件：</span>
<a class="down" :href="noticeMsg.attachment_url">{{ noticeMsg.attachment_name || '暂无附件' }}</a>
</div>
<div class="notice-bottom row bothSide verCenter">
<span>发件人：深圳市猎芯科技有限公司</span>
<span>{{ noticeMsg.create_time }}</span>
</div>
</el-dialog>
<!--操作手册-->
<el-dialog title="系统Q&A" :visible.sync="dialogHandbookVisible" width="800px" class="demo-ruleForm handbook-layer">
<p class="handbook-t1">
芯链系统是猎芯科技最新推出的一套连接商家与终端客户的智能操作系统，集询报价管理、订单管理、库存管理、商品管理、数据统计等于一体，可帮助商家获得更多询价商机及快捷方便管理各自的型号库存信息；
芯链商家可在芯链系统上自主管理商品上传下架及商品报价；
终端客户订单需求，猎芯销售部和采购部通过询报价系统与芯链商家对接，实现芯链商家针对客户商机信息可进行自主报价、实现订单快速高效转化的过程。
</p>
<p class="handbook-t2">以下为系统板块介绍</p>
<div class="text">
<p class="tit row verCenter">概况板块-说明：</p>
<p class="tt">概况页面主要统计贵司上传的库存型号数量以及订单转化率，并且会展示【猎芯网】热搜型号排名（前50名）;</p>
</div>
<div class="text">
<p class="tit row verCenter">询报价管理板块-说明：</p>
<p class="tt">询报价管理页面主要是汇总来自【猎芯询报价】系统推送而来的询价单（订单商机），贵司可对这些询价单进行报价操作，参与到猎芯的询价单报价中；</p>
</div>
<div class="text">
<p class="tit row verCenter">订单追踪板块-说明：</p>
<p class="tt">订单追踪页面主要是展示贵司与猎芯合作的所有订单数据，包括猎芯与贵司签订的采购订单，贵司发出给猎芯的货品信息，猎芯与贵司产生的退货信息等；</p>
</div>
<div class="text">
<p class="tit row verCenter">库存管理板块-说明：</p>
<p class="tt">库存管理页面主要的功能是供贵司上传型号库存，上传后的型号库存将会自动展示在【猎芯网】进行售卖，并且将会自动参与【猎芯询报价】系统的询价单推送（商机推送）；贵司上传的型号，与猎芯客户询价的型号匹配上后，该询价信息则会同步至【询报价管理】板块，贵司可对该条询价单（商机）进行报价； 贵司也可将具有优势货源的型号信息上传至【优势物料】页面，上传后的型号也将会自动参与【猎芯询报价】系统的询价单推送（商机推送）；</p>
</div>
<div class="text">
<p class="tit row verCenter">数据统计板块-说明：</p>
<p class="tt">数据统计页面主要统计贵司上传的型号跟优势物料，所获得的【猎芯询报价】系统的询价单推送（商机推送）情况，及最终和猎芯成交订单的情况；</p>
</div>
<div class="text">
<p class="tit row verCenter">消息管理板块-说明：</p>
<p class="tt">消息管理页面主要展示猎芯推送给供应商的消息通知，包括芯链系统的更新通知，猎芯与供应商之间的消息公告等；</p>
</div>
</el-dialog>
<div class="welcome row rowCenter verCenter" v-if="dialogWelcome">
<img src="/welcome.png?v=20230607" alt="">
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import Vue from 'vue'; import Vue from 'vue';
import Util from "../tool"; import Util from "../tool";
import axios from 'axios'; import axios from 'axios';
import {NODE_ENVS_MSG} from "../ajax"; import { NODE_ENVS_MSG } from "../ajax";
import {Badge, Button, Checkbox, Dialog, Form, FormItem, Input, Menu, MenuItem, MenuItemGroup, Message, MessageBox, Notification, Pagination, Submenu, TabPane, Tabs, Tooltip} from 'element-ui' import { Badge, Button, Checkbox, Dialog, Form, FormItem, Input, Menu, MenuItem, MenuItemGroup, Message, MessageBox, Notification, Pagination, Submenu, TabPane, Tabs, Tooltip } from 'element-ui'
Vue.prototype.$message = Message; Vue.prototype.$message = Message;
Vue.prototype.$notify = Notification; Vue.prototype.$notify = Notification;
Vue.use(Menu).use(MenuItem).use(MenuItemGroup).use(Submenu).use(Form).use(FormItem).use(Dialog).use(Button).use(Tooltip).use(Input).use(Tabs).use(TabPane).use(Badge).use(Pagination).use(Checkbox); Vue.use(Menu).use(MenuItem).use(MenuItemGroup).use(Submenu).use(Form).use(FormItem).use(Dialog).use(Button).use(Tooltip).use(Input).use(Tabs).use(TabPane).use(Badge).use(Pagination).use(Checkbox);
export default { export default {
name: 'menus', name: 'menus',
props: {}, props: {},
data() { data() {
var validatePass2 = (rule, value, callback) => { var validatePass2 = (rule, value, callback) => {
if (value === '') { if (value === '') {
callback(new Error('请再次输入密码')) callback(new Error('请再次输入密码'))
} else if (value !== this.ruleForm.password) { } else if (value !== this.ruleForm.password) {
callback(new Error('两次输入密码不一致!')) callback(new Error('两次输入密码不一致!'))
} else { } else {
callback() callback()
} }
}
return {
supplier_id: Number(localStorage.getItem('supplier_id')) || 0,
seconds: 60,
activeName: "all",
userinfo: {},
collapse: false,
isIndexTab: true,
tabSure: "",
tabs: "",
width: "",
dialogWelcome: false,
dialogHandbookVisible: false,
not_read_count: '',//未读消息
isIndeterminate: false,//对el-checkbox控制不完整的全选状态
checkAll: false,//标记是否全选
dialogVisible: false,//改密码
dialogNewsVisible: false,//消息通知
dialogNoticeVisible: false,//系统公告
tableData: [],
multipleSelection: [],
notReadCount: {},
msg_status: '',//消息状态，0-未读，1-已读，-4-已删除
msg_category_id: '',//消息目的地系统下的分类id， 1-关注，2-报价，3-订单，4-系统通知，5-采购提醒不传代表全部
noticeMsg: [],//系统公告消息
total: 0,
limit: 10,
page: 1,
menuData: [],//菜单数据集合
index_home: {},//概况
color_arr: [{
name: '询价',
value: '#409EFF'
}, {
name: '成单',
value: '#1969F9'
}, {
name: '退货',
value: '#FF870E'
}, {
name: '上架有效期',
value: '#FF0000'
}],
ruleForm: {
old_password: '',
password: '',
repassword: ''
},
rules: {
old_password: [{
required: true,
message: '请输入原始密码',
trigger: 'blur'
}],
password: [{
required: true,
message: '请输入新密码',
trigger: 'blur'
}],
repassword: [{
required: true,
trigger: 'blur',
validator: validatePass2
}]
}
}
},
watch: {
$route(to, from) {
let tab_arr = sessionStorage.getItem('tabs')
if (tab_arr) {
this.tabs = JSON.parse(tab_arr);
}
let app_ = document.getElementById('app');
this.collapse = false;
if (to.path == '/login') {
app_.setAttribute('style', 'padding:0');
} else {
if (this.collapse) {
app_.setAttribute('style', 'padding-left:62px');
} else {
app_.setAttribute('style', 'padding-left:226px');
}
}
}
},
created() {
var self = this
this.getData();//获取个人信息
this.tabUi();
this.getMenu();
this.getWelcome();
window.onresize = function () {
self.tabUi()
};
},
mounted() {
this.tabss(this.$route.path)
},
methods: {
/**
* 获取当前用户的权限菜单
*/
getMenu() {
this.$http('GET', "/api/subAccount/getMenu", {}).then(res => {
if (res.code === 0) {
const overviewItem = res.data.data.find(item => item.name === "概况");
const menuData = res.data.data.filter(item => item.name !== "概况");
this.index_home = overviewItem;
const filteredData = menuData.filter(item => item.checked || (item.children && item.children.some(child => child.checked))).map(item => {
if (item.children && item.children.length > 0) {
item.children = item.children.filter(child => child.checked);
} }
return item; return {
}); supplier_id: Number(localStorage.getItem('supplier_id')) || 0,
this.menuData = filteredData; seconds: 60,
} else { activeName: "all",
this.$message({ userinfo: {},
message: res.msg, collapse: false,
type: 'warning' isIndexTab: true,
}); tabSure: "",
} tabs: "",
}) width: "",
}, dialogWelcome: false,
/** dialogHandbookVisible: false,
* 欢迎 not_read_count: '',//未读消息
*/ isIndeterminate: false,//对el-checkbox控制不完整的全选状态
getWelcome() { checkAll: false,//标记是否全选
var welcome = Util.getCookie('welcome') || ''; dialogVisible: false,//改密码
if (!welcome) { dialogNewsVisible: false,//消息通知
Util.setCookie('welcome', true, 1); dialogNoticeVisible: false,//系统公告
this.dialogWelcome = true; tableData: [],
setTimeout(() => { multipleSelection: [],
this.dialogWelcome = false; notReadCount: {},
this.getLatestMsg();//获取最新消息 msg_status: '',//消息状态，0-未读，1-已读，-4-已删除
this.getCategoryMsgList();//获取系统公告 msg_category_id: '',//消息目的地系统下的分类id， 1-关注，2-报价，3-订单，4-系统通知，5-采购提醒不传代表全部
}, 3000) noticeMsg: [],//系统公告消息
} else { total: 0,
this.dialogWelcome = false; limit: 10,
this.getLatestMsg();//获取最新消息 page: 1,
this.getCategoryMsgList();//获取系统公告 menuData: [],//菜单数据集合
} index_home: {},//概况
}, color_arr: [{
/** name: '询价',
* 获取系统公告 value: '#409EFF'
*/ }, {
getCategoryMsgList() { name: '成单',
var msg_notice = Util.getCookie('ad') || ''; value: '#1969F9'
//判断是不是最新的消息 }, {
if (msg_notice) { name: '退货',
return; value: '#FF870E'
} }, {
this.$http('get', "/api/system/getNoticeList", { name: '上架有效期',
page: 1, value: '#FF0000'
limit: 1, }],
}).then(res => { ruleForm: {
if (res.code === 0) { old_password: '',
if (res.data.list.length > 0) { password: '',
this.dialogNoticeVisible = true; repassword: ''
this.noticeMsg = res.data.list[0] || []; },
Util.setCookie('ad', true, 1); rules: {
} old_password: [{
} else { required: true,
this.$message({ message: '请输入原始密码',
message: res.msg, trigger: 'blur'
type: 'warning' }],
}); password: [{
} required: true,
}) message: '请输入新密码',
}, trigger: 'blur'
/** }],
* 获取最新消息 repassword: [{
*/ required: true,
getLatestMsg() { trigger: 'blur',
var msg_id_val = sessionStorage.getItem('msg_id') || ''; validator: validatePass2
var that = this; }]
axios.post(NODE_ENVS_MSG + '/get_latest_msg', { }
page: 1,
limit: 1,
user_id: this.supplier_id,//供应商id
sys_id: 17//芯链系统
}).then((res) => {
if (res.code === 0) {
let htmlArr = [];
if (res.data.list.length > 0) {
let data = JSON.parse(res.data.list[0].msg_data);
this.not_read_count = res.data.not_read_count;
sessionStorage.removeItem('msg_id');
sessionStorage.setItem('msg_id', res.data.list[0].id);//存储最新id
//判断是不是最新的消息
if (msg_id_val) {
if (res.data.list[0].id == msg_id_val) {
that.countDown();//开启定时轮询
return;
}
}
this.msg_id = res.data.list[0].id;//存储最新id
let has_more = data.has_more;//判断是否出现更多，样式有区别
let html = '';
let cate_id = data.cate_id;//记录tab切换id
let colorStyle = '';
//定义颜色提醒
if (cate_id) {
if (cate_id == 6) {
colorStyle = 'color:' + this.color_arr[0].value;
} else if (cate_id == 7) {
colorStyle = 'color:' + this.color_arr[1].value;
} else if (cate_id == 8) {
colorStyle = 'color:' + this.color_arr[2].value;
} else if (cate_id == 9) {
colorStyle = 'color:' + this.color_arr[3].value;
} else {
colorStyle = 'color:' + this.color_arr[0].value;
}
}
if (has_more) {
html = '<P class="notify-text"><b>' + data.date + '</b><b>' + data.title + '</b><a style="' + colorStyle + '" href="' + data.link + '">' + data.title_suffix + '</a><a style="margin-left: 8px;" class="alink" href="' + data.has_more + '">更多>>></a></P>';
} else {
html = '<P class="notify-text"><b>' + data.date + '</b><b>' + data.title + '</b><a style="' + colorStyle + '" href="' + data.link + '">' + data.title_suffix + '</a></P>';
} }
if (data.content.length > 0) { },
htmlArr.push(html + watch: {
'<p>' + data.content[0].name + '：' + data.content[0].value + '</p>' + $route(to, from) {
'<p>' + data.content[1].name + '：' + data.content[1].value + '</p>' + let tab_arr = sessionStorage.getItem('tabs')
'<p>' + data.content[2].name + '：' + data.content[2].value + '</p>' + if (tab_arr) {
'<p>' + data.content[3].name + '：' + data.content[3].value + '</p>' + this.tabs = JSON.parse(tab_arr);
'<p>' + data.content[4].name + '：' + data.content[4].value + '</p>'); }
} else { let app_ = document.getElementById('app');
htmlArr.push(html + '上架有效期到期后，该型号将会从【猎芯网】下架，不再进行展示；并且不参与【猎芯询报价】系统的自动推送询价'); this.collapse = false;
if (to.path == '/login') {
app_.setAttribute('style', 'padding:0');
} else {
if (this.collapse) {
app_.setAttribute('style', 'padding-left:62px');
} else {
app_.setAttribute('style', 'padding-left:226px');
}
}
} }
this.$notify({ },
title: '提示', created() {
duration: 20000, var self = this
dangerouslyUseHTMLString: true, this.getData();//获取个人信息
message: htmlArr.join(''), this.tabUi();
position: 'bottom-right', this.getMenu();
onClose() { this.getWelcome();
that.countDown();//开启定时轮询 window.onresize = function () {
} self.tabUi()
}); };
} },
} else { mounted() {
this.$message({ this.tabss(this.$route.path)
message: res.msg, },
type: 'warning' methods: {
}); /**
} * 获取当前用户的权限菜单
}); */
}, getMenu() {
countDown() { this.$http('GET', "/api/subAccount/getMenu", {}).then(res => {
this.timer = setInterval(() => { if (res.code === 0) {
this.seconds--; const overviewItem = res.data.data.find(item => item.name === "概况");
if (this.seconds <= 0) { const menuData = res.data.data.filter(item => item.name !== "概况");
clearInterval(this.timer); this.index_home = overviewItem;
this.seconds = 60; const filteredData = menuData.filter(item => item.checked || (item.children && item.children.some(child => child.checked))).map(item => {
this.getLatestMsg(); if (item.children && item.children.length > 0) {
} item.children = item.children.filter(child => child.checked);
}, 1000) }
}, return item;
/** });
* 获取新闻信息 this.menuData = filteredData;
*/ } else {
getNews() { this.$message({
axios.post(NODE_ENVS_MSG + '/get_category_msg_list', { message: res.msg,
page: this.page, type: 'warning'
limit: this.limit, });
msg_status: this.msg_status, }
msg_category_id: this.msg_category_id, })
user_id: this.supplier_id,//供应商id },
sys_id: 17//芯链系统 /**
}).then((res) => { * 欢迎
if (res.code === 0) { */
this.tableData = res.data.list || []; getWelcome() {
this.total = res.data.total; var welcome = Util.getCookie('welcome') || '';
} else { if (!welcome) {
this.$message({ Util.setCookie('welcome', true, 1);
message: res.msg, this.dialogWelcome = true;
type: 'warning' setTimeout(() => {
}); this.dialogWelcome = false;
} this.getLatestMsg();//获取最新消息
}); this.getCategoryMsgList();//获取系统公告
}, }, 3000)
/** } else {
* 全选 this.dialogWelcome = false;
*/ this.getLatestMsg();//获取最新消息
selectAll() { this.getCategoryMsgList();//获取系统公告
if (this.$refs.table.selection.length < this.tableData.length) { }
this.checkAll = true; },
} else { /**
this.checkAll = false; * 获取系统公告
} */
this.$refs.table.toggleAllSelection(); getCategoryMsgList() {
}, var msg_notice = Util.getCookie('ad') || '';
/** //判断是不是最新的消息
* 获取tab的数量 if (msg_notice) {
*/ return;
getNotReadCount() { }
axios.post(NODE_ENVS_MSG + '/get_not_read_count', { this.$http('get', "/api/system/getNoticeList", {
user_id: this.supplier_id,//供应商id page: 1,
sys_id: 17//芯链系统 limit: 1,
}).then((res) => { }).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.notReadCount = res.data; if (res.data.list.length > 0) {
} else { this.dialogNoticeVisible = true;
this.$message({ this.noticeMsg = res.data.list[0] || [];
message: res.msg, Util.setCookie('ad', true, 1);
type: 'warning' }
}); } else {
} this.$message({
}); message: res.msg,
}, type: 'warning'
/** });
* 更改消息状态为已读 }
*/ })
updateMsg() { },
if (this.multipleSelection.length == 0) { /**
this.$message({ * 获取最新消息
showClose: true, */
message: '请至少选择一条数据', getLatestMsg() {
type: 'warning' var msg_id_val = sessionStorage.getItem('msg_id') || '';
}); var that = this;
return; axios.post(NODE_ENVS_MSG + '/get_latest_msg', {
} page: 1,
var msg_ids = this.multipleSelection.map(obj => { limit: 1,
return obj.id user_id: this.supplier_id,//供应商id
}) sys_id: 17//芯链系统
axios.post(NODE_ENVS_MSG + '/update_msg', { }).then((res) => {
user_id: this.supplier_id,//供应商id if (res.code === 0) {
sys_id: 17,//芯链系统 let htmlArr = [];
msg_ids: msg_ids.join(',') if (res.data.list.length > 0) {
}).then((res) => { let data = JSON.parse(res.data.list[0].msg_data);
if (res.code === 0) { this.not_read_count = res.data.not_read_count;
this.getNotReadCount(); sessionStorage.removeItem('msg_id');
this.getNews(); sessionStorage.setItem('msg_id', res.data.list[0].id);//存储最新id
this.$message({ //判断是不是最新的消息
message: '标记成功', if (msg_id_val) {
type: 'success' if (res.data.list[0].id == msg_id_val) {
}); that.countDown();//开启定时轮询
} else { return;
this.$message({ }
message: res.msg, }
type: 'warning' this.msg_id = res.data.list[0].id;//存储最新id
}); let has_more = data.has_more;//判断是否出现更多，样式有区别
} let html = '';
}); let cate_id = data.cate_id;//记录tab切换id
}, let colorStyle = '';
/** //定义颜色提醒
* 删除信息 if (cate_id) {
*/ if (cate_id == 6) {
deleteMsg() { colorStyle = 'color:' + this.color_arr[0].value;
if (this.multipleSelection.length == 0) { } else if (cate_id == 7) {
this.$message({ colorStyle = 'color:' + this.color_arr[1].value;
showClose: true, } else if (cate_id == 8) {
message: '请至少选择一条数据', colorStyle = 'color:' + this.color_arr[2].value;
type: 'warning' } else if (cate_id == 9) {
}); colorStyle = 'color:' + this.color_arr[3].value;
return; } else {
} colorStyle = 'color:' + this.color_arr[0].value;
var msg_ids = this.multipleSelection.map(obj => { }
return obj.id }
}) if (has_more) {
axios.post(NODE_ENVS_MSG + '/delete_msg', { html = '<P class="notify-text"><b>' + data.date + '</b><b>' + data.title + '</b><a style="' + colorStyle + '" href="' + data.link + '">' + data.title_suffix + '</a><a style="margin-left: 8px;" class="alink" href="' + data.has_more + '">更多>>></a></P>';
user_id: this.supplier_id,//供应商id } else {
sys_id: 17,//芯链系统 html = '<P class="notify-text"><b>' + data.date + '</b><b>' + data.title + '</b><a style="' + colorStyle + '" href="' + data.link + '">' + data.title_suffix + '</a></P>';
msg_ids: msg_ids.join(',') }
}).then((res) => { if (data.content.length > 0) {
if (res.code === 0) { htmlArr.push(html +
this.getNotReadCount(); '<p>' + data.content[0].name + '：' + data.content[0].value + '</p>' +
this.getNews(); '<p>' + data.content[1].name + '：' + data.content[1].value + '</p>' +
this.$message({ '<p>' + data.content[2].name + '：' + data.content[2].value + '</p>' +
message: '删除成功', '<p>' + data.content[3].name + '：' + data.content[3].value + '</p>' +
type: 'success' '<p>' + data.content[4].name + '：' + data.content[4].value + '</p>');
}); } else {
} else { htmlArr.push(html + '上架有效期到期后，该型号将会从【猎芯网】下架，不再进行展示；并且不参与【猎芯询报价】系统的自动推送询价');
this.$message({ }
message: res.msg, this.$notify({
type: 'warning' title: '提示',
}); duration: 20000,
} dangerouslyUseHTMLString: true,
}); message: htmlArr.join(''),
}, position: 'bottom-right',
/** onClose() {
* 操作按钮未读已读 that.countDown();//开启定时轮询
*/ }
getNewsStatus(type) { });
this.msg_status = type; }
this.getNews(); } else {
this.getNotReadCount(); this.$message({
}, message: res.msg,
/** type: 'warning'
* 获取个人信息 });
*/ }
getData() { });
if (window.userInfo) { },
this.userinfo = window.userInfo; countDown() {
} else { this.timer = setInterval(() => {
this.$http('get', "/api/user/getuserinfo").then(res => { this.seconds--;
if (res.code == 0) { if (this.seconds <= 0) {
this.userinfo = res.data; clearInterval(this.timer);
window.userInfo = res.data this.seconds = 60;
} this.getLatestMsg();
}) }
} }, 1000)
}, },
/** /**
* 消息通知展示 * 获取新闻信息
*/ */
showMsg() { getNews() {
this.dialogNewsVisible = true; axios.post(NODE_ENVS_MSG + '/get_category_msg_list', {
this.getNotReadCount(); page: this.page,
this.getNews(); limit: this.limit,
}, msg_status: this.msg_status,
/** msg_category_id: this.msg_category_id,
* tab切换 user_id: this.supplier_id,//供应商id
* @param index sys_id: 17//芯链系统
*/ }).then((res) => {
handleClick(tab, event) { if (res.code === 0) {
if (this.activeName == 'all') { this.tableData = res.data.list || [];
this.msg_category_id = 0; this.total = res.data.total;
} else if (this.activeName == 'inquiry') { } else {
this.msg_category_id = 6; this.$message({
} else if (this.activeName == 'orderForm') { message: res.msg,
this.msg_category_id = 7; type: 'warning'
} else if (this.activeName == 'returnGoods') { });
this.msg_category_id = 8; }
} else if (this.activeName == 'shelfLife') { });
this.msg_category_id = 9; },
} /**
this.page = 1; * 全选
this.msg_status = ''; */
this.getNotReadCount(); selectAll() {
this.getNews(); if (this.$refs.table.selection.length < this.tableData.length) {
}, this.checkAll = true;
/** } else {
* chebox选择的数据 this.checkAll = false;
* @param val }
*/ this.$refs.table.toggleAllSelection();
handleSelectionChange(val) { },
this.multipleSelection = val; /**
if (val.length < this.tableData.length && val.length > 0) { * 获取tab的数量
this.isIndeterminate = true; */
} else if (val.length == this.tableData.length) { getNotReadCount() {
this.isIndeterminate = false; axios.post(NODE_ENVS_MSG + '/get_not_read_count', {
this.checkAll = true; user_id: this.supplier_id,//供应商id
} else if (val.length == 0) { sys_id: 17//芯链系统
this.isIndeterminate = false; }).then((res) => {
this.checkAll = false; if (res.code === 0) {
} this.notReadCount = res.data;
}, } else {
/** this.$message({
* 分页条数切换 message: res.msg,
* @param val type: 'warning'
*/ });
handleSizeChange(val) { }
this.limit = val; });
this.getNews(); },
}, /**
/** * 更改消息状态为已读
* 分页点击切换 */
* @param val updateMsg() {
*/ if (this.multipleSelection.length == 0) {
handleCurrentChange(val) { this.$message({
this.page = val; showClose: true,
this.getNews(); message: '请至少选择一条数据',
}, type: 'warning'
/** });
* 操作手册 return;
*/ }
handbook() { var msg_ids = this.multipleSelection.map(obj => {
this.dialogHandbookVisible = true; return obj.id
}, })
tabUi() { axios.post(NODE_ENVS_MSG + '/update_msg', {
let tab_arr = JSON.parse(sessionStorage.getItem('tabs')); user_id: this.supplier_id,//供应商id
if (tab_arr) { sys_id: 17,//芯链系统
if (tab_arr.length >= 9) { msg_ids: msg_ids.join(',')
this.$nextTick(() => { }).then((res) => {
if (this.$refs.scrollboxinner.clientWidth > this.$refs.scrollbox.clientWidth) { if (res.code === 0) {
document.querySelector('.tab-box').scrollLeft = 12000000; this.getNotReadCount();
} this.getNews();
}) this.$message({
} message: '标记成功',
} type: 'success'
}, });
tabUrl(item) { } else {
this.$router.push({ this.$message({
path: item.path, message: res.msg,
query: item.query type: 'warning'
}) });
}, }
changePwd() { });
this.dialogVisible = true; },
}, /**
tabss(lk) { * 删除信息
if (lk == "/") { */
this.tabSure = 1; deleteMsg() {
} if (this.multipleSelection.length == 0) {
if (lk == "/inquire" || lk == "/quote" || lk == '/inquire/detail') { this.$message({
this.tabSure = 2; showClose: true,
} message: '请至少选择一条数据',
if (lk == "/list" || lk == "/enter" || lk == '/listDetail') { type: 'warning'
this.tabSure = 3; });
} return;
if (lk == "/goods" || lk == "/brand") { }
this.tabSure = 4; var msg_ids = this.multipleSelection.map(obj => {
} return obj.id
if (lk == "/message") {
this.tabSure = 5;
}
let tab_arr = sessionStorage.getItem('tabs')
if (tab_arr) {
this.tabs = JSON.parse(tab_arr);
}
},
closetab(path) {
let tab_arr = JSON.parse(sessionStorage.getItem('tabs'))
for (var i = 0; i < tab_arr.length; i++) {
if (tab_arr[i].path == path) {
tab_arr.splice(i, 1);
sessionStorage.setItem('tabs', JSON.stringify(tab_arr));
this.tabs = tab_arr;
if (path == this.$route.path) {
if (i == 0) {
this.$router.push({
path: "/"
})
} else {
if (tab_arr[i - 1].query) {
this.$router.push({
path: tab_arr[i - 1].path,
query: tab_arr[i - 1].query
}) })
} else { axios.post(NODE_ENVS_MSG + '/delete_msg', {
user_id: this.supplier_id,//供应商id
sys_id: 17,//芯链系统
msg_ids: msg_ids.join(',')
}).then((res) => {
if (res.code === 0) {
this.getNotReadCount();
this.getNews();
this.$message({
message: '删除成功',
type: 'success'
});
} else {
this.$message({
message: res.msg,
type: 'warning'
});
}
});
},
/**
* 操作按钮未读已读
*/
getNewsStatus(type) {
this.msg_status = type;
this.getNews();
this.getNotReadCount();
},
/**
* 获取个人信息
*/
getData() {
if (window.userInfo) {
this.userinfo = window.userInfo;
} else {
this.$http('get', "/api/user/getuserinfo").then(res => {
if (res.code == 0) {
this.userinfo = res.data;
window.userInfo = res.data
}
})
}
},
/**
* 消息通知展示
*/
showMsg() {
this.dialogNewsVisible = true;
this.getNotReadCount();
this.getNews();
},
/**
* tab切换
* @param index
*/
handleClick(tab, event) {
if (this.activeName == 'all') {
this.msg_category_id = 0;
} else if (this.activeName == 'inquiry') {
this.msg_category_id = 6;
} else if (this.activeName == 'orderForm') {
this.msg_category_id = 7;
} else if (this.activeName == 'returnGoods') {
this.msg_category_id = 8;
} else if (this.activeName == 'shelfLife') {
this.msg_category_id = 9;
}
this.page = 1;
this.msg_status = '';
this.getNotReadCount();
this.getNews();
},
/**
* chebox选择的数据
* @param val
*/
handleSelectionChange(val) {
this.multipleSelection = val;
if (val.length < this.tableData.length && val.length > 0) {
this.isIndeterminate = true;
} else if (val.length == this.tableData.length) {
this.isIndeterminate = false;
this.checkAll = true;
} else if (val.length == 0) {
this.isIndeterminate = false;
this.checkAll = false;
}
},
/**
* 分页条数切换
* @param val
*/
handleSizeChange(val) {
this.limit = val;
this.getNews();
},
/**
* 分页点击切换
* @param val
*/
handleCurrentChange(val) {
this.page = val;
this.getNews();
},
/**
* 操作手册
*/
handbook() {
this.dialogHandbookVisible = true;
},
tabUi() {
let tab_arr = JSON.parse(sessionStorage.getItem('tabs'));
if (tab_arr) {
if (tab_arr.length >= 9) {
this.$nextTick(() => {
if (this.$refs.scrollboxinner.clientWidth > this.$refs.scrollbox.clientWidth) {
document.querySelector('.tab-box').scrollLeft = 12000000;
}
})
}
}
},
tabUrl(item) {
this.$router.push({ this.$router.push({
path: tab_arr[i - 1].path, path: item.path,
query: item.query
})
},
changePwd() {
this.dialogVisible = true;
},
tabss(lk) {
if (lk == "/") {
this.tabSure = 1;
}
if (lk == "/inquire" || lk == "/quote" || lk == '/inquire/detail') {
this.tabSure = 2;
}
if (lk == "/list" || lk == "/enter" || lk == '/listDetail') {
this.tabSure = 3;
}
if (lk == "/goods" || lk == "/brand") {
this.tabSure = 4;
}
if (lk == "/message") {
this.tabSure = 5;
}
let tab_arr = sessionStorage.getItem('tabs')
if (tab_arr) {
this.tabs = JSON.parse(tab_arr);
}
},
closetab(path) {
let tab_arr = JSON.parse(sessionStorage.getItem('tabs'))
for (var i = 0; i < tab_arr.length; i++) {
if (tab_arr[i].path == path) {
tab_arr.splice(i, 1);
sessionStorage.setItem('tabs', JSON.stringify(tab_arr));
this.tabs = tab_arr;
if (path == this.$route.path) {
if (i == 0) {
this.$router.push({
path: "/"
})
} else {
if (tab_arr[i - 1].query) {
this.$router.push({
path: tab_arr[i - 1].path,
query: tab_arr[i - 1].query
})
} else {
this.$router.push({
path: tab_arr[i - 1].path,
})
}
}
}
break;
}
}
},
zk() {
this.collapse = !this.collapse;
let app_ = document.getElementById('app');
if (this.collapse) {
app_.setAttribute('style', 'padding-left:62px');
} else {
app_.setAttribute('style', 'padding-left:226px');
}
},
handleOpen(key, keyPath) {
if (this.$route.path == "/") {
this.isIndexTab = false
}
},
handleClose(key, keyPath) {
if (this.$route.path == "/") {
this.isIndexTab = true
}
},
handleSelect(key, keyPath) {
this.tabss(key)
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$http('post', "/api/user/setpasswd", this.ruleForm).then(res => {
if (res.code === 0) {
this.$message('修改成功');
setTimeout(() => {
Util.delCookie('token');
window.location.href = '/#/login';
window.userInfo = ""
history.go(0);
}, 2000)
} else {
this.$message(res.msg);
}
}).catch(err => {
console.log(err.message);
})
} else {
console.log('error submit!!');
return false;
}
});
},
logout() {
MessageBox.confirm('确定退出系统吗？', {
type: 'error'
}).then(() => {
this.$http('post', "/auth/logout").then(res => {
Util.delCookie('token');
sessionStorage.removeItem('tabs');
window.location.href = '/#/login';
window.userInfo = ""
history.go(0);
}).catch(err => {
console.log(err.message);
})
}).catch(() => {
}) })
}
}
}
break;
}
}
},
zk() {
this.collapse = !this.collapse;
let app_ = document.getElementById('app');
if (this.collapse) {
app_.setAttribute('style', 'padding-left:62px');
} else {
app_.setAttribute('style', 'padding-left:226px');
}
},
handleOpen(key, keyPath) {
if (this.$route.path == "/") {
this.isIndexTab = false
}
},
handleClose(key, keyPath) {
if (this.$route.path == "/") {
this.isIndexTab = true
}
},
handleSelect(key, keyPath) {
this.tabss(key)
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$http('post', "/api/user/setpasswd", this.ruleForm).then(res => {
if (res.code === 0) {
this.$message('修改成功');
setTimeout(() => {
Util.delCookie('token');
window.location.href = '/#/login';
window.userInfo = ""
history.go(0);
}, 2000)
} else {
this.$message(res.msg);
} }
}).catch(err => {
console.log(err.message);
})
} else {
console.log('error submit!!');
return false;
} }
});
},
logout() {
MessageBox.confirm('确定退出系统吗？', {
type: 'error'
}).then(() => {
this.$http('post', "/auth/logout").then(res => {
Util.delCookie('token');
sessionStorage.removeItem('tabs');
window.location.href = '/#/login';
window.userInfo = ""
history.go(0);
}).catch(err => {
console.log(err.message);
})
}).catch(() => {
})
} }
}
}
</script> </script>
<style lang="less"> <style lang="less">
.kf-boxs { .kf-boxs {
width: 200px; width: 200px;
padding: 0 10px; padding: 0 10px;
padding-bottom: 20px; padding-bottom: 20px;
.itemg { .itemg {
color: #646B78; color: #646B78;
font-size: 14px; font-size: 14px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
font { font {
color: #333; color: #333;
}
}
img {
display: block;
width: 70px;
height: 70px;
margin: 0 auto;
margin-top: 20px;
}
} }
}
#app {
img { padding-left: 226px;
display: block; padding-top: 56px;
width: 70px;
height: 70px;
margin: 0 auto;
margin-top: 20px;
}
}
#app {
padding-left: 226px;
padding-top: 56px;
}
.kf-box {
position: fixed;
right: 0px;
width: 61px;
height: 61px;
top: 250px;
z-index: 11;
text-align: center;
.btnkf {
height: 61px;
width: 61px;
cursor: pointer;
}
}
.nav-top {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
height: 56px;
z-index: 99;
.con-box {
height: 56px;
background: #fff;
box-shadow: 0px 2px 42px -8px rgba(206, 214, 219, 0.5);
.logo {
height: 56px;
width: 226px;
line-height: 56px;
font-weight: bold;
color: #fff;
text-align: center;
background: #1969F9;
box-shadow: 0px 2px 42px -8px rgba(206, 214, 219, 0.5);
font-size: 20px;
} }
.tab-box { .kf-box {
padding: 8px 0px; position: fixed;
overflow-x: auto; right: 0px;
height: 40px; width: 61px;
overflow-y: hidden; height: 61px;
position: relative; top: 250px;
width: calc(100vw - 610px); z-index: 11;
text-align: center;
.btnkf {
height: 61px;
width: 61px;
cursor: pointer;
}
}
.item-boxs { .nav-top {
position: absolute; position: fixed;
left: 0px; left: 0px;
} top: 0px;
right: 0px;
.item { height: 56px;
color: #646B78; z-index: 99;
font-size: 13px;
height: 40px; .con-box {
line-height: 40px; height: 56px;
cursor: pointer; background: #fff;
transition: all 0.4s ease; box-shadow: 0px 2px 42px -8px rgba(206, 214, 219, 0.5);
padding: 0 17px;
white-space: nowrap; .logo {
height: 56px;
&.act { width: 226px;
background-color: #F1F4FA; line-height: 56px;
position: relative; font-weight: bold;
color: #fff;
font { text-align: center;
color: #1969f9; background: #1969F9;
} box-shadow: 0px 2px 42px -8px rgba(206, 214, 219, 0.5);
font-size: 20px;
&::after {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 2px;
background: #1969F9;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}
&.first {
background-color: transparent;
&::after {
display: none;
} }
}
&:hover { .tab-box {
.iconfont { padding: 8px 0px;
color: #1969f9; overflow-x: auto;
height: 40px;
overflow-y: hidden;
position: relative;
width: calc(100vw - 610px);
.item-boxs {
position: absolute;
left: 0px;
}
.item {
color: #646B78;
font-size: 13px;
height: 40px;
line-height: 40px;
cursor: pointer;
transition: all 0.4s ease;
padding: 0 17px;
white-space: nowrap;
&.act {
background-color: #F1F4FA;
position: relative;
font {
color: #1969f9;
}
&::after {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 2px;
background: #1969F9;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}
&.first {
background-color: transparent;
&::after {
display: none;
}
}
&:hover {
.iconfont {
color: #1969f9;
}
}
}
&:hover {
font {
color: #1969F9;
}
}
.icon {
font-size: 13px;
margin-left: 5px;
}
}
} }
}
}
&:hover { .user-box {
font { height: 40px;
color: #1969F9; padding: 8px 0;
} line-height: 40px;
color: #A1ACC1;
margin-right: 5px;
.message-num {
position: relative;
font-size: 23px;
cursor: pointer;
.el-badge {
position: absolute;
right: -11px;
top: -8px;
}
}
a {
color: #A1ACC1;
&:hover {
.icon {
color: #1969F9;
}
}
}
.icon {
font-size: 24px;
transition: all 0.5s;
&.el-icon-refresh {
animation-name: layui-rotate;
animation-duration: 1s;
animation-timing-function: linear;
}
}
.line {
width: 1px;
height: 30px;
background: #E5EBF6;
margin-left: 15px;
margin-right: 15px;
}
.msgh {
position: relative;
font {
position: absolute;
width: 19px;
height: 14px;
background: #1969F9;
border-radius: 7px;
text-align: center;
line-height: 14px;
font-size: 10px;
color: #fff;
left: 15px;
}
}
.login-v {
img {
width: 35px;
height: 35px;
object-fit: cover;
border-radius: 35px;
}
.namex {
margin-left: 10px;
margin-right: 10px;
font-size: 12px;
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lo-box-drop {
position: relative;
cursor: pointer;
.drop-box {
display: none;
position: absolute;
width: 94px;
height: 55px;
padding: 12px 0;
left: -66px;
top: 100%;
background: #FFFFFF;
box-shadow: 1px 2px 10px 0px rgba(119, 135, 145, 0.5);
&::after {
content: "";
border-style: solid;
border-color: transparent transparent #fff transparent;
border-width: 7px;
position: absolute;
top: -13px;
left: 72px;
}
a {
display: block;
width: 94px;
height: 28px;
line-height: 28px;
text-align: center;
font-size: 14px;
color: #646B78;
&:hover {
background: #E7F3FF;
}
}
}
&:hover {
.icon {
color: #1969F9;
}
.drop-box {
display: block;
}
}
}
}
}
} }
.icon {
font-size: 13px;
margin-left: 5px;
}
}
} }
.user-box { .nav-icon {
height: 40px; width: 62px;
padding: 8px 0; background: #fff;
line-height: 40px; position: fixed;
color: #A1ACC1; left: 0px;
margin-right: 5px; top: 56px;
bottom: 0px;
.message-num {
position: relative; .zankai {
font-size: 23px; height: 26px;
cursor: pointer; font-size: 18px;
color: #646B78;
.el-badge { line-height: 26px;
position: absolute; padding-right: 5px;
right: -11px;
top: -8px; span {
cursor: pointer;
&:hover {
color: #1969F9;
}
}
} }
}
a { .item {
color: #A1ACC1; height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
&.act {
background: #F1F4FA;
position: relative;
&::after {
content: "";
position: absolute;
left: 0px;
top: 7px;
width: 5px;
height: 30px;
background: #1969F9;
}
span {
color: #1969F9;
}
}
&:hover { &:hover {
.icon { background: #F1F4FA;
color: #1969F9; }
}
.icon {
font-size: 20px;
color: #646B78;
}
} }
} }
.icon { .nav-left {
font-size: 24px; width: 226px;
transition: all 0.5s; background: #fff;
position: fixed;
left: 0px;
top: 56px;
bottom: 0px;
&.el-icon-refresh {
animation-name: layui-rotate;
animation-duration: 1s;
animation-timing-function: linear;
}
}
.line {
width: 1px;
height: 30px;
background: #E5EBF6;
margin-left: 15px;
margin-right: 15px;
}
.msgh {
position: relative;
font {
position: absolute;
width: 19px;
height: 14px;
background: #1969F9;
border-radius: 7px;
text-align: center;
line-height: 14px;
font-size: 10px;
color: #fff;
left: 15px;
}
}
.login-v { .meau-con {
img { width: 100%;
width: 35px; overflow: auto;
height: 35px; height: 100%;
object-fit: cover; background: #fff;
border-radius: 35px;
}
.namex { .el-icon-arrow-down:before {
margin-left: 10px; content: "\e790";
margin-right: 10px; }
font-size: 12px;
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lo-box-drop { .zankai {
position: relative; height: 26px;
cursor: pointer; font-size: 18px;
color: #646B78;
.drop-box { line-height: 26px;
display: none; padding-right: 17px;
position: absolute;
width: 94px; span {
height: 55px; cursor: pointer;
padding: 12px 0; transition: all 0.5s;
left: -66px;
top: 100%; &:hover {
background: #FFFFFF; color: #1969F9;
box-shadow: 1px 2px 10px 0px rgba(119, 135, 145, 0.5); }
}
&::after {
content: "";
border-style: solid;
border-color: transparent transparent #fff transparent;
border-width: 7px;
position: absolute;
top: -13px;
left: 72px;
} }
a { .el-submenu {
display: block; transition: all 0.4s ease;
width: 94px; position: relative;
height: 28px;
line-height: 28px; &:hover {
text-align: center; &::after {
font-size: 14px; content: "";
color: #646B78; position: absolute;
left: 0px;
top: 7px;
width: 5px;
height: 30px;
background: #1969F9;
}
}
}
&:hover {
background: #E7F3FF;
}
.el-menu-item:focus,
.el-menu-item:hover,
.el-submenu__title:hover {
background: #F1F4FA;
} }
}
&:hover {
.icon { .el-submenu__title:hover span {
color: #1969F9; color: #1969F9;
} }
.drop-box { .el-submenu.is-opened,
display: block; .indextab.is-active {
position: relative;
background: #F1F4FA;
span,
.iconfont {
color: #1969F9;
}
&::after {
content: "";
position: absolute;
left: 0px;
top: 7px;
width: 5px;
height: 30px;
background: #1969F9;
}
} }
}
}
}
}
}
}
.nav-icon {
width: 62px;
background: #fff;
position: fixed;
left: 0px;
top: 56px;
bottom: 0px;
.zankai {
height: 26px;
font-size: 18px;
color: #646B78;
line-height: 26px;
padding-right: 5px;
span {
cursor: pointer;
&:hover {
color: #1969F9;
}
}
} .el-menu-item {
height: 46px;
line-height: 42px;
.item { .iconfont {
height: 46px; font-size: 20px;
line-height: 46px; color: #646B78;
text-align: center; margin-right: 14px;
cursor: pointer; }
&.act { a {
background: #F1F4FA; color: #646B78;
position: relative; }
&::after { }
content: "";
position: absolute;
left: 0px;
top: 7px;
width: 5px;
height: 30px;
background: #1969F9;
}
span {
color: #1969F9;
}
}
&:hover { .el-submenu__title {
background: #F1F4FA; height: 46px;
} line-height: 42px;
padding-left: 37px;
transition: all 0.4s ease;
.iconfont {
font-size: 20px;
color: #646B78;
margin-right: 14px;
}
a {
color: #646B78;
}
}
.icon { .el-menu-item-group {
font-size: 20px; .el-menu-item-group__title {
color: #646B78; display: none;
} }
}
} .el-menu-item {
font-size: 14px !important;
.nav-left { padding-left: 80px !important;
width: 226px; line-height: 46px !important;
background: #fff; height: 46px !important;
position: fixed; }
left: 0px; }
top: 56px;
bottom: 0px;
.meau-con {
width: 100%;
overflow: auto;
height: 100%;
background: #fff;
.el-icon-arrow-down:before {
content: "\e790";
}
.zankai { .el-menu {
height: 26px; border: 0px;
font-size: 18px;
color: #646B78;
line-height: 26px;
padding-right: 17px;
span { .el-menu-item,
cursor: pointer; .el-submenu__title {
transition: all 0.5s; font-size: 14px;
color: #646B78;
}
&:hover {
color: #1969F9;
}
}
}
.el-submenu {
transition: all 0.4s ease;
position: relative;
&:hover {
&::after {
content: "";
position: absolute;
left: 0px;
top: 7px;
width: 5px;
height: 30px;
background: #1969F9;
}
}
}
}
.el-menu-item:focus, &::-webkit-scrollbar {
.el-menu-item:hover, width: 10px;
.el-submenu__title:hover { }
background: #F1F4FA;
}
&::-webkit-scrollbar-thumb {
border-radius: 8px;
background: #fff;
width: 10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
}
.el-submenu__title:hover span { &::-webkit-scrollbar-track {
color: #1969F9; border-radius: 0;
background: #D2D9E7;
}
}
} }
.el-submenu.is-opened, .el-badge-num {
.indextab.is-active { position: absolute;
position: relative; left: -1px;
background: #F1F4FA; top: 14px;
width: 7px;
height: 7px;
background: #fe0000;
border-radius: 50%;
display: block;
box-sizing: border-box;
}
span, .tab-news {
.iconfont { margin-bottom: 6px;
color: #1969F9; border-bottom: 1px solid #E4E7ED;
} }
&::after { .tab-news .el-tabs__header {
content: ""; margin-bottom: 0 !important;
position: absolute;
left: 0px;
top: 7px;
width: 5px;
height: 30px;
background: #1969F9;
}
} }
.el-menu-item { .el-tabs__nav-wrap::after {
height: 46px; background-color: transparent;
line-height: 42px; }
.iconfont { .notify-text b {
font-size: 20px; margin-right: 5px;
color: #646B78; }
margin-right: 14px;
}
a { @keyframes layui-rotate {
color: #646B78; from {
} -webkit-transform: rotate(0)
}
to {
-webkit-transform: rotate(360deg)
}
} }
.el-submenu__title { .dialog-layer-notice .el-dialog__body {
height: 46px; padding: 0 !important;
line-height: 42px;
padding-left: 37px;
transition: all 0.4s ease;
.iconfont {
font-size: 20px;
color: #646B78;
margin-right: 14px;
}
a {
color: #646B78;
}
} }
.el-menu-item-group { .dialog-layer-notice .el-dialog__header {
.el-menu-item-group__title { border-bottom: 1px solid #E5EBF6;
display: none;
}
.el-menu-item {
font-size: 14px !important;
padding-left: 80px !important;
line-height: 46px !important;
height: 46px !important;
}
} }
.el-menu { .handbook-layer {
border: 0px;
.el-menu-item, .el-dialog__body {
.el-submenu__title { max-height: 600px;
font-size: 14px; overflow-y: auto;
color: #646B78; }
}
.handbook-t1 {
border-bottom: 1px solid #E5EBF6;
padding-bottom: 10px;
}
} .handbook-t2 {
font-size: 14px;
color: #409eff;
font-weight: bold;
padding: 15px 0;
}
&::-webkit-scrollbar { .text {
width: 10px; margin-bottom: 20px;
} box-shadow: 0px 2px 42px -8px rgba(206, 214, 219, 0.5);
&::-webkit-scrollbar-thumb { .tit {
border-radius: 8px; padding-left: 24px;
background: #fff; height: 40px;
width: 10px; background-color: #f1f5fa;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2); color: #409eff;
} font-size: 14px;
}
&::-webkit-scrollbar-track { .tt {
border-radius: 0; padding: 12px 12px 12px 24px;
background: #D2D9E7; font-size: 14px;
} }
} }
}
.el-badge-num {
position: absolute;
left: -1px;
top: 14px;
width: 7px;
height: 7px;
background: #fe0000;
border-radius: 50%;
display: block;
box-sizing: border-box;
}
.tab-news {
margin-bottom: 6px;
border-bottom: 1px solid #E4E7ED;
}
.tab-news .el-tabs__header {
margin-bottom: 0 !important;
}
.el-tabs__nav-wrap::after {
background-color: transparent;
}
.notify-text b {
margin-right: 5px;
}
.notify-text a {
}
@keyframes layui-rotate {
from {
-webkit-transform: rotate(0)
}
to {
-webkit-transform: rotate(360deg)
}
}
.dialog-layer-notice .el-dialog__body {
padding: 0 !important;
}
.dialog-layer-notice .el-dialog__header {
border-bottom: 1px solid #E5EBF6;
}
.handbook-layer {
.el-dialog__body {
max-height: 600px;
overflow-y: auto;
}
.handbook-t1 {
border-bottom: 1px solid #E5EBF6;
padding-bottom: 10px;
}
.handbook-t2 {
font-size: 14px;
color: #409eff;
font-weight: bold;
padding: 15px 0;
}
.text {
margin-bottom: 20px;
box-shadow: 0px 2px 42px -8px rgba(206, 214, 219, 0.5);
.tit {
padding-left: 24px;
height: 40px;
background-color: #f1f5fa;
color: #409eff;
font-size: 14px;
} }
.tt { .welcome {
padding: 12px 12px 12px 24px; position: fixed;
font-size: 14px; left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99999999999999;
background: rgba(0, 0, 0, 0.3);
img {
position: relative;
width: 614px;
height: 394px;
object-fit: cover;
z-index: 99999999999998;
}
} }
}
}
.welcome {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99999999999999;
background: rgba(0, 0, 0, 0.3);
img {
position: relative;
width: 614px;
height: 394px;
object-fit: cover;
z-index: 99999999999998;
}
}
</style> </style>
\ No newline at end of file
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 sign in to comment