hzya
/
middleground_code_v2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改菜单模式 增加工作台

This commit is contained in:
曹瑞 2024-07-02 09:03:23 +08:00
parent 07b75be748
commit aa58df8118
31 changed files with 4496 additions and 812 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/iconLibrary/demo.css
View File

@ -7,7 +7,6 @@
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
} }
.logo { .logo {
font-family: "iconfont logo"; font-family: "iconfont logo";
font-size: 160px; font-size: 160px;

880
public/iconLibrary/demo_index.html
View File

@ -54,6 +54,234 @@
<div class="content unicode" style="display: block;"> <div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe655;</span>
<div class="name">工作台</div>
<div class="code-name">&amp;#xe655;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe605;</span>
<div class="name">首页</div>
<div class="code-name">&amp;#xe605;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe643;</span>
<div class="name">客户脚本端</div>
<div class="code-name">&amp;#xe643;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe71f;</span>
<div class="name">仓库档案</div>
<div class="code-name">&amp;#xe71f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62e;</span>
<div class="name">银行类别档案</div>
<div class="code-name">&amp;#xe62e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe727;</span>
<div class="name">客户分类档案</div>
<div class="code-name">&amp;#xe727;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c3;</span>
<div class="name">存货分类档案</div>
<div class="code-name">&amp;#xe6c3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68f;</span>
<div class="name">银行账户档案</div>
<div class="code-name">&amp;#xe68f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe600;</span>
<div class="name">人员档案</div>
<div class="code-name">&amp;#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe601;</span>
<div class="name">资产类别档案</div>
<div class="code-name">&amp;#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60f;</span>
<div class="name">付款条件档案</div>
<div class="code-name">&amp;#xe60f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63e;</span>
<div class="name">用户档案</div>
<div class="code-name">&amp;#xe63e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62d;</span>
<div class="name">客户档案</div>
<div class="code-name">&amp;#xe62d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe71b;</span>
<div class="name">会计科目档案</div>
<div class="code-name">&amp;#xe71b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe602;</span>
<div class="name">税率档案</div>
<div class="code-name">&amp;#xe602;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61b;</span>
<div class="name">物料档案</div>
<div class="code-name">&amp;#xe61b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe614;</span>
<div class="name">供应商分类档案</div>
<div class="code-name">&amp;#xe614;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe69b;</span>
<div class="name">供应商档案</div>
<div class="code-name">&amp;#xe69b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe603;</span>
<div class="name">地区分类档案</div>
<div class="code-name">&amp;#xe603;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe759;</span>
<div class="name">结算方式档案</div>
<div class="code-name">&amp;#xe759;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ae;</span>
<div class="name">组织档案</div>
<div class="code-name">&amp;#xe6ae;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6af;</span>
<div class="name">项目档案</div>
<div class="code-name">&amp;#xe6af;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64e;</span>
<div class="name">证件类型档案</div>
<div class="code-name">&amp;#xe64e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7e8;</span>
<div class="name">人员类别档案</div>
<div class="code-name">&amp;#xe7e8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe621;</span>
<div class="name">部门档案</div>
<div class="code-name">&amp;#xe621;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe634;</span>
<div class="name">货位档案</div>
<div class="code-name">&amp;#xe634;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe812;</span>
<div class="name">数据来源</div>
<div class="code-name">&amp;#xe812;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d8;</span>
<div class="name">tsend</div>
<div class="code-name">&amp;#xe6d8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7e3;</span>
<div class="name">脚本语言</div>
<div class="code-name">&amp;#xe7e3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ec;</span>
<div class="name">webhook配置</div>
<div class="code-name">&amp;#xe6ec;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe81e;</span>
<div class="name">开工-filled</div>
<div class="code-name">&amp;#xe81e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e4;</span>
<div class="name">auto</div>
<div class="code-name">&amp;#xe6e4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68e;</span>
<div class="name">配置权限</div>
<div class="code-name">&amp;#xe68e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68a;</span>
<div class="name">分发设置</div>
<div class="code-name">&amp;#xe68a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68b;</span>
<div class="name">数据源</div>
<div class="code-name">&amp;#xe68b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68c;</span>
<div class="name">显示信息</div>
<div class="code-name">&amp;#xe68c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68d;</span>
<div class="name">基本信息</div>
<div class="code-name">&amp;#xe68d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe627;</span>
<div class="name">取消&关闭1</div>
<div class="code-name">&amp;#xe627;</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe642;</span> <span class="icon iconfont">&#xe642;</span>
<div class="name">菜单/列表</div> <div class="name">菜单/列表</div>
@ -192,9 +420,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1696663877393') format('woff2'), src: url('iconfont.woff2?t=1719799268815') format('woff2'),
url('iconfont.woff?t=1696663877393') format('woff'), url('iconfont.woff?t=1719799268815') format('woff'),
url('iconfont.ttf?t=1696663877393') format('truetype'); url('iconfont.ttf?t=1719799268815') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -220,6 +448,348 @@
<div class="content font-class"> <div class="content font-class">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-gongzuotai"></span>
<div class="name">
工作台
</div>
<div class="code-name">.icon-gongzuotai
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shouye"></span>
<div class="name">
首页
</div>
<div class="code-name">.icon-shouye
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kehujiaobenduan"></span>
<div class="name">
客户脚本端
</div>
<div class="code-name">.icon-kehujiaobenduan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-cangku"></span>
<div class="name">
仓库档案
</div>
<div class="code-name">.icon-cangku
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yinhang-F"></span>
<div class="name">
银行类别档案
</div>
<div class="code-name">.icon-yinhang-F
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jianliguanli"></span>
<div class="name">
客户分类档案
</div>
<div class="code-name">.icon-jianliguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-cunhuotong"></span>
<div class="name">
存货分类档案
</div>
<div class="code-name">.icon-cunhuotong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yinhangdangan"></span>
<div class="name">
银行账户档案
</div>
<div class="code-name">.icon-yinhangdangan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-renyuandangan"></span>
<div class="name">
人员档案
</div>
<div class="code-name">.icon-renyuandangan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zichandanganchaxun"></span>
<div class="name">
资产类别档案
</div>
<div class="code-name">.icon-zichandanganchaxun
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fukuantiaojianshezhi"></span>
<div class="name">
付款条件档案
</div>
<div class="code-name">.icon-fukuantiaojianshezhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yonghudangan"></span>
<div class="name">
用户档案
</div>
<div class="code-name">.icon-yonghudangan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chengyuanrenwu"></span>
<div class="name">
客户档案
</div>
<div class="code-name">.icon-chengyuanrenwu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhongdengwangdengjijiaoyi"></span>
<div class="name">
会计科目档案
</div>
<div class="code-name">.icon-zhongdengwangdengjijiaoyi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shuishuaiweihu"></span>
<div class="name">
税率档案
</div>
<div class="code-name">.icon-shuishuaiweihu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wuliaodangan"></span>
<div class="name">
物料档案
</div>
<div class="code-name">.icon-wuliaodangan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gongyingshangdangan"></span>
<div class="name">
供应商分类档案
</div>
<div class="code-name">.icon-gongyingshangdangan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gongyingshangdangan1"></span>
<div class="name">
供应商档案
</div>
<div class="code-name">.icon-gongyingshangdangan1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-a-91-2"></span>
<div class="name">
地区分类档案
</div>
<div class="code-name">.icon-a-91-2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiesuanfangshi"></span>
<div class="name">
结算方式档案
</div>
<div class="code-name">.icon-jiesuanfangshi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zuzhidangan"></span>
<div class="name">
组织档案
</div>
<div class="code-name">.icon-zuzhidangan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiangmudanganku"></span>
<div class="name">
项目档案
</div>
<div class="code-name">.icon-xiangmudanganku
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-path-2-3"></span>
<div class="name">
证件类型档案
</div>
<div class="code-name">.icon-path-2-3
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wenjian"></span>
<div class="name">
人员类别档案
</div>
<div class="code-name">.icon-wenjian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bumendangan"></span>
<div class="name">
部门档案
</div>
<div class="code-name">.icon-bumendangan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-erji-huowei-changgui"></span>
<div class="name">
货位档案
</div>
<div class="code-name">.icon-erji-huowei-changgui
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shujulaiyuan"></span>
<div class="name">
数据来源
</div>
<div class="code-name">.icon-shujulaiyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tsend"></span>
<div class="name">
tsend
</div>
<div class="code-name">.icon-tsend
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-script-language"></span>
<div class="name">
脚本语言
</div>
<div class="code-name">.icon-script-language
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-webhookpeizhi"></span>
<div class="name">
webhook配置
</div>
<div class="code-name">.icon-webhookpeizhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kaigong-filled"></span>
<div class="name">
开工-filled
</div>
<div class="code-name">.icon-kaigong-filled
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-auto-01"></span>
<div class="name">
auto
</div>
<div class="code-name">.icon-auto-01
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-peizhiquanxian"></span>
<div class="name">
配置权限
</div>
<div class="code-name">.icon-peizhiquanxian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenfashezhi"></span>
<div class="name">
分发设置
</div>
<div class="code-name">.icon-fenfashezhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shujuyuan"></span>
<div class="name">
数据源
</div>
<div class="code-name">.icon-shujuyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xianshixinxi"></span>
<div class="name">
显示信息
</div>
<div class="code-name">.icon-xianshixinxi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jibenxinxi"></span>
<div class="name">
基本信息
</div>
<div class="code-name">.icon-jibenxinxi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quxiaoguanbi1"></span>
<div class="name">
取消&关闭1
</div>
<div class="code-name">.icon-quxiaoguanbi1
</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-caidan"></span> <span class="icon iconfont icon-caidan"></span>
<div class="name"> <div class="name">
@ -427,6 +997,310 @@
<div class="content symbol"> <div class="content symbol">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gongzuotai"></use>
</svg>
<div class="name">工作台</div>
<div class="code-name">#icon-gongzuotai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shouye"></use>
</svg>
<div class="name">首页</div>
<div class="code-name">#icon-shouye</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-kehujiaobenduan"></use>
</svg>
<div class="name">客户脚本端</div>
<div class="code-name">#icon-kehujiaobenduan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-cangku"></use>
</svg>
<div class="name">仓库档案</div>
<div class="code-name">#icon-cangku</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yinhang-F"></use>
</svg>
<div class="name">银行类别档案</div>
<div class="code-name">#icon-yinhang-F</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jianliguanli"></use>
</svg>
<div class="name">客户分类档案</div>
<div class="code-name">#icon-jianliguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-cunhuotong"></use>
</svg>
<div class="name">存货分类档案</div>
<div class="code-name">#icon-cunhuotong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yinhangdangan"></use>
</svg>
<div class="name">银行账户档案</div>
<div class="code-name">#icon-yinhangdangan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-renyuandangan"></use>
</svg>
<div class="name">人员档案</div>
<div class="code-name">#icon-renyuandangan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zichandanganchaxun"></use>
</svg>
<div class="name">资产类别档案</div>
<div class="code-name">#icon-zichandanganchaxun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fukuantiaojianshezhi"></use>
</svg>
<div class="name">付款条件档案</div>
<div class="code-name">#icon-fukuantiaojianshezhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yonghudangan"></use>
</svg>
<div class="name">用户档案</div>
<div class="code-name">#icon-yonghudangan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chengyuanrenwu"></use>
</svg>
<div class="name">客户档案</div>
<div class="code-name">#icon-chengyuanrenwu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhongdengwangdengjijiaoyi"></use>
</svg>
<div class="name">会计科目档案</div>
<div class="code-name">#icon-zhongdengwangdengjijiaoyi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shuishuaiweihu"></use>
</svg>
<div class="name">税率档案</div>
<div class="code-name">#icon-shuishuaiweihu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wuliaodangan"></use>
</svg>
<div class="name">物料档案</div>
<div class="code-name">#icon-wuliaodangan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gongyingshangdangan"></use>
</svg>
<div class="name">供应商分类档案</div>
<div class="code-name">#icon-gongyingshangdangan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gongyingshangdangan1"></use>
</svg>
<div class="name">供应商档案</div>
<div class="code-name">#icon-gongyingshangdangan1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-91-2"></use>
</svg>
<div class="name">地区分类档案</div>
<div class="code-name">#icon-a-91-2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiesuanfangshi"></use>
</svg>
<div class="name">结算方式档案</div>
<div class="code-name">#icon-jiesuanfangshi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zuzhidangan"></use>
</svg>
<div class="name">组织档案</div>
<div class="code-name">#icon-zuzhidangan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiangmudanganku"></use>
</svg>
<div class="name">项目档案</div>
<div class="code-name">#icon-xiangmudanganku</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-path-2-3"></use>
</svg>
<div class="name">证件类型档案</div>
<div class="code-name">#icon-path-2-3</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wenjian"></use>
</svg>
<div class="name">人员类别档案</div>
<div class="code-name">#icon-wenjian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bumendangan"></use>
</svg>
<div class="name">部门档案</div>
<div class="code-name">#icon-bumendangan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-erji-huowei-changgui"></use>
</svg>
<div class="name">货位档案</div>
<div class="code-name">#icon-erji-huowei-changgui</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shujulaiyuan"></use>
</svg>
<div class="name">数据来源</div>
<div class="code-name">#icon-shujulaiyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tsend"></use>
</svg>
<div class="name">tsend</div>
<div class="code-name">#icon-tsend</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-script-language"></use>
</svg>
<div class="name">脚本语言</div>
<div class="code-name">#icon-script-language</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-webhookpeizhi"></use>
</svg>
<div class="name">webhook配置</div>
<div class="code-name">#icon-webhookpeizhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-kaigong-filled"></use>
</svg>
<div class="name">开工-filled</div>
<div class="code-name">#icon-kaigong-filled</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-auto-01"></use>
</svg>
<div class="name">auto</div>
<div class="code-name">#icon-auto-01</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-peizhiquanxian"></use>
</svg>
<div class="name">配置权限</div>
<div class="code-name">#icon-peizhiquanxian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenfashezhi"></use>
</svg>
<div class="name">分发设置</div>
<div class="code-name">#icon-fenfashezhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shujuyuan"></use>
</svg>
<div class="name">数据源</div>
<div class="code-name">#icon-shujuyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xianshixinxi"></use>
</svg>
<div class="name">显示信息</div>
<div class="code-name">#icon-xianshixinxi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jibenxinxi"></use>
</svg>
<div class="name">基本信息</div>
<div class="code-name">#icon-jibenxinxi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quxiaoguanbi1"></use>
</svg>
<div class="name">取消&关闭1</div>
<div class="code-name">#icon-quxiaoguanbi1</div>
</li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-caidan"></use> <use xlink:href="#icon-caidan"></use>

152
public/iconLibrary/iconfont.css
View File

@ -13,6 +13,158 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-gongzuotai:before {
content: "\e655";
}
.icon-shouye:before {
content: "\e605";
}
.icon-kehujiaobenduan:before {
content: "\e643";
}
.icon-cangku:before {
content: "\e71f";
}
.icon-yinhang-F:before {
content: "\e62e";
}
.icon-jianliguanli:before {
content: "\e727";
}
.icon-cunhuotong:before {
content: "\e6c3";
}
.icon-yinhangdangan:before {
content: "\e68f";
}
.icon-renyuandangan:before {
content: "\e600";
}
.icon-zichandanganchaxun:before {
content: "\e601";
}
.icon-fukuantiaojianshezhi:before {
content: "\e60f";
}
.icon-yonghudangan:before {
content: "\e63e";
}
.icon-chengyuanrenwu:before {
content: "\e62d";
}
.icon-zhongdengwangdengjijiaoyi:before {
content: "\e71b";
}
.icon-shuishuaiweihu:before {
content: "\e602";
}
.icon-wuliaodangan:before {
content: "\e61b";
}
.icon-gongyingshangdangan:before {
content: "\e614";
}
.icon-gongyingshangdangan1:before {
content: "\e69b";
}
.icon-a-91-2:before {
content: "\e603";
}
.icon-jiesuanfangshi:before {
content: "\e759";
}
.icon-zuzhidangan:before {
content: "\e6ae";
}
.icon-xiangmudanganku:before {
content: "\e6af";
}
.icon-path-2-3:before {
content: "\e64e";
}
.icon-wenjian:before {
content: "\e7e8";
}
.icon-bumendangan:before {
content: "\e621";
}
.icon-erji-huowei-changgui:before {
content: "\e634";
}
.icon-shujulaiyuan:before {
content: "\e812";
}
.icon-tsend:before {
content: "\e6d8";
}
.icon-script-language:before {
content: "\e7e3";
}
.icon-webhookpeizhi:before {
content: "\e6ec";
}
.icon-kaigong-filled:before {
content: "\e81e";
}
.icon-auto-01:before {
content: "\e6e4";
}
.icon-peizhiquanxian:before {
content: "\e68e";
}
.icon-fenfashezhi:before {
content: "\e68a";
}
.icon-shujuyuan:before {
content: "\e68b";
}
.icon-xianshixinxi:before {
content: "\e68c";
}
.icon-jibenxinxi:before {
content: "\e68d";
}
.icon-quxiaoguanbi1:before {
content: "\e627";
}
.icon-caidan:before { .icon-caidan:before {
content: "\e642"; content: "\e642";
} }

2
public/iconLibrary/iconfont.js
View File

File diff suppressed because one or more lines are too long

266
public/iconLibrary/iconfont.json
View File

@ -5,6 +5,272 @@
"css_prefix_text": "icon-", "css_prefix_text": "icon-",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "5035443",
"name": "工作台",
"font_class": "gongzuotai",
"unicode": "e655",
"unicode_decimal": 58965
},
{
"icon_id": "7083396",
"name": "首页",
"font_class": "shouye",
"unicode": "e605",
"unicode_decimal": 58885
},
{
"icon_id": "11121518",
"name": "客户脚本端",
"font_class": "kehujiaobenduan",
"unicode": "e643",
"unicode_decimal": 58947
},
{
"icon_id": "7712191",
"name": "仓库档案",
"font_class": "cangku",
"unicode": "e71f",
"unicode_decimal": 59167
},
{
"icon_id": "37539306",
"name": "银行类别档案",
"font_class": "yinhang-F",
"unicode": "e62e",
"unicode_decimal": 58926
},
{
"icon_id": "1665242",
"name": "客户分类档案",
"font_class": "jianliguanli",
"unicode": "e727",
"unicode_decimal": 59175
},
{
"icon_id": "2450725",
"name": "存货分类档案",
"font_class": "cunhuotong",
"unicode": "e6c3",
"unicode_decimal": 59075
},
{
"icon_id": "4393215",
"name": "银行账户档案",
"font_class": "yinhangdangan",
"unicode": "e68f",
"unicode_decimal": 59023
},
{
"icon_id": "4424768",
"name": "人员档案",
"font_class": "renyuandangan",
"unicode": "e600",
"unicode_decimal": 58880
},
{
"icon_id": "4659403",
"name": "资产类别档案",
"font_class": "zichandanganchaxun",
"unicode": "e601",
"unicode_decimal": 58881
},
{
"icon_id": "7674544",
"name": "付款条件档案",
"font_class": "fukuantiaojianshezhi",
"unicode": "e60f",
"unicode_decimal": 58895
},
{
"icon_id": "10900331",
"name": "用户档案",
"font_class": "yonghudangan",
"unicode": "e63e",
"unicode_decimal": 58942
},
{
"icon_id": "12535859",
"name": "客户档案",
"font_class": "chengyuanrenwu",
"unicode": "e62d",
"unicode_decimal": 58925
},
{
"icon_id": "14237522",
"name": "会计科目档案",
"font_class": "zhongdengwangdengjijiaoyi",
"unicode": "e71b",
"unicode_decimal": 59163
},
{
"icon_id": "15919260",
"name": "税率档案",
"font_class": "shuishuaiweihu",
"unicode": "e602",
"unicode_decimal": 58882
},
{
"icon_id": "20585487",
"name": "物料档案",
"font_class": "wuliaodangan",
"unicode": "e61b",
"unicode_decimal": 58907
},
{
"icon_id": "20713639",
"name": "供应商分类档案",
"font_class": "gongyingshangdangan",
"unicode": "e614",
"unicode_decimal": 58900
},
{
"icon_id": "21507384",
"name": "供应商档案",
"font_class": "gongyingshangdangan1",
"unicode": "e69b",
"unicode_decimal": 59035
},
{
"icon_id": "25997282",
"name": "地区分类档案",
"font_class": "a-91-2",
"unicode": "e603",
"unicode_decimal": 58883
},
{
"icon_id": "26045975",
"name": "结算方式档案",
"font_class": "jiesuanfangshi",
"unicode": "e759",
"unicode_decimal": 59225
},
{
"icon_id": "27089294",
"name": "组织档案",
"font_class": "zuzhidangan",
"unicode": "e6ae",
"unicode_decimal": 59054
},
{
"icon_id": "27928496",
"name": "项目档案",
"font_class": "xiangmudanganku",
"unicode": "e6af",
"unicode_decimal": 59055
},
{
"icon_id": "35882632",
"name": "证件类型档案",
"font_class": "path-2-3",
"unicode": "e64e",
"unicode_decimal": 58958
},
{
"icon_id": "3765344",
"name": "人员类别档案",
"font_class": "wenjian",
"unicode": "e7e8",
"unicode_decimal": 59368
},
{
"icon_id": "21013308",
"name": "部门档案",
"font_class": "bumendangan",
"unicode": "e621",
"unicode_decimal": 58913
},
{
"icon_id": "27201660",
"name": "货位档案",
"font_class": "erji-huowei-changgui",
"unicode": "e634",
"unicode_decimal": 58932
},
{
"icon_id": "38608609",
"name": "数据来源",
"font_class": "shujulaiyuan",
"unicode": "e812",
"unicode_decimal": 59410
},
{
"icon_id": "1786166",
"name": "tsend",
"font_class": "tsend",
"unicode": "e6d8",
"unicode_decimal": 59096
},
{
"icon_id": "5657738",
"name": "脚本语言",
"font_class": "script-language",
"unicode": "e7e3",
"unicode_decimal": 59363
},
{
"icon_id": "10420513",
"name": "webhook配置",
"font_class": "webhookpeizhi",
"unicode": "e6ec",
"unicode_decimal": 59116
},
{
"icon_id": "12428742",
"name": "开工-filled",
"font_class": "kaigong-filled",
"unicode": "e81e",
"unicode_decimal": 59422
},
{
"icon_id": "30653940",
"name": "auto",
"font_class": "auto-01",
"unicode": "e6e4",
"unicode_decimal": 59108
},
{
"icon_id": "37706795",
"name": "配置权限",
"font_class": "peizhiquanxian",
"unicode": "e68e",
"unicode_decimal": 59022
},
{
"icon_id": "37706794",
"name": "分发设置",
"font_class": "fenfashezhi",
"unicode": "e68a",
"unicode_decimal": 59018
},
{
"icon_id": "37706798",
"name": "数据源",
"font_class": "shujuyuan",
"unicode": "e68b",
"unicode_decimal": 59019
},
{
"icon_id": "37706797",
"name": "显示信息",
"font_class": "xianshixinxi",
"unicode": "e68c",
"unicode_decimal": 59020
},
{
"icon_id": "37706796",
"name": "基本信息",
"font_class": "jibenxinxi",
"unicode": "e68d",
"unicode_decimal": 59021
},
{
"icon_id": "16290376",
"name": "取消&关闭1",
"font_class": "quxiaoguanbi1",
"unicode": "e627",
"unicode_decimal": 58919
},
{ {
"icon_id": "8094171", "icon_id": "8094171",
"name": "菜单/列表", "name": "菜单/列表",

BIN
public/iconLibrary/iconfont.ttf
View File

Binary file not shown.

BIN
public/iconLibrary/iconfont.woff
View File

Binary file not shown.

BIN
public/iconLibrary/iconfont.woff2
View File

Binary file not shown.

1
src/assets/fonts/demo.css
View File

@ -7,7 +7,6 @@
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
} }
.logo { .logo {
font-family: "iconfont logo"; font-family: "iconfont logo";
font-size: 160px; font-size: 160px;

880
src/assets/fonts/demo_index.html
View File

@ -54,6 +54,234 @@
<div class="content unicode" style="display: block;"> <div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe655;</span>
<div class="name">工作台</div>
<div class="code-name">&amp;#xe655;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe605;</span>
<div class="name">首页</div>
<div class="code-name">&amp;#xe605;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe643;</span>
<div class="name">客户脚本端</div>
<div class="code-name">&amp;#xe643;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe71f;</span>
<div class="name">仓库档案</div>
<div class="code-name">&amp;#xe71f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62e;</span>
<div class="name">银行类别档案</div>
<div class="code-name">&amp;#xe62e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe727;</span>
<div class="name">客户分类档案</div>
<div class="code-name">&amp;#xe727;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c3;</span>
<div class="name">存货分类档案</div>
<div class="code-name">&amp;#xe6c3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68f;</span>
<div class="name">银行账户档案</div>
<div class="code-name">&amp;#xe68f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe600;</span>
<div class="name">人员档案</div>
<div class="code-name">&amp;#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe601;</span>
<div class="name">资产类别档案</div>
<div class="code-name">&amp;#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60f;</span>
<div class="name">付款条件档案</div>
<div class="code-name">&amp;#xe60f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63e;</span>
<div class="name">用户档案</div>
<div class="code-name">&amp;#xe63e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62d;</span>
<div class="name">客户档案</div>
<div class="code-name">&amp;#xe62d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe71b;</span>
<div class="name">会计科目档案</div>
<div class="code-name">&amp;#xe71b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe602;</span>
<div class="name">税率档案</div>
<div class="code-name">&amp;#xe602;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61b;</span>
<div class="name">物料档案</div>
<div class="code-name">&amp;#xe61b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe614;</span>
<div class="name">供应商分类档案</div>
<div class="code-name">&amp;#xe614;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe69b;</span>
<div class="name">供应商档案</div>
<div class="code-name">&amp;#xe69b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe603;</span>
<div class="name">地区分类档案</div>
<div class="code-name">&amp;#xe603;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe759;</span>
<div class="name">结算方式档案</div>
<div class="code-name">&amp;#xe759;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ae;</span>
<div class="name">组织档案</div>
<div class="code-name">&amp;#xe6ae;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6af;</span>
<div class="name">项目档案</div>
<div class="code-name">&amp;#xe6af;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64e;</span>
<div class="name">证件类型档案</div>
<div class="code-name">&amp;#xe64e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7e8;</span>
<div class="name">人员类别档案</div>
<div class="code-name">&amp;#xe7e8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe621;</span>
<div class="name">部门档案</div>
<div class="code-name">&amp;#xe621;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe634;</span>
<div class="name">货位档案</div>
<div class="code-name">&amp;#xe634;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe812;</span>
<div class="name">数据来源</div>
<div class="code-name">&amp;#xe812;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d8;</span>
<div class="name">tsend</div>
<div class="code-name">&amp;#xe6d8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7e3;</span>
<div class="name">脚本语言</div>
<div class="code-name">&amp;#xe7e3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ec;</span>
<div class="name">webhook配置</div>
<div class="code-name">&amp;#xe6ec;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe81e;</span>
<div class="name">开工-filled</div>
<div class="code-name">&amp;#xe81e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e4;</span>
<div class="name">auto</div>
<div class="code-name">&amp;#xe6e4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68e;</span>
<div class="name">配置权限</div>
<div class="code-name">&amp;#xe68e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68a;</span>
<div class="name">分发设置</div>
<div class="code-name">&amp;#xe68a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68b;</span>
<div class="name">数据源</div>
<div class="code-name">&amp;#xe68b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68c;</span>
<div class="name">显示信息</div>
<div class="code-name">&amp;#xe68c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68d;</span>
<div class="name">基本信息</div>
<div class="code-name">&amp;#xe68d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe627;</span>
<div class="name">取消&关闭1</div>
<div class="code-name">&amp;#xe627;</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe642;</span> <span class="icon iconfont">&#xe642;</span>
<div class="name">菜单/列表</div> <div class="name">菜单/列表</div>
@ -192,9 +420,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1696663877393') format('woff2'), src: url('iconfont.woff2?t=1719799268815') format('woff2'),
url('iconfont.woff?t=1696663877393') format('woff'), url('iconfont.woff?t=1719799268815') format('woff'),
url('iconfont.ttf?t=1696663877393') format('truetype'); url('iconfont.ttf?t=1719799268815') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -220,6 +448,348 @@
<div class="content font-class"> <div class="content font-class">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-gongzuotai"></span>
<div class="name">
工作台
</div>
<div class="code-name">.icon-gongzuotai
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shouye"></span>
<div class="name">
首页
</div>
<div class="code-name">.icon-shouye
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kehujiaobenduan"></span>
<div class="name">
客户脚本端
</div>
<div class="code-name">.icon-kehujiaobenduan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-cangku"></span>
<div class="name">
仓库档案
</div>
<div class="code-name">.icon-cangku
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yinhang-F"></span>
<div class="name">
银行类别档案
</div>
<div class="code-name">.icon-yinhang-F
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jianliguanli"></span>
<div class="name">
客户分类档案
</div>
<div class="code-name">.icon-jianliguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-cunhuotong"></span>
<div class="name">
存货分类档案
</div>
<div class="code-name">.icon-cunhuotong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yinhangdangan"></span>
<div class="name">
银行账户档案
</div>
<div class="code-name">.icon-yinhangdangan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-renyuandangan"></span>
<div class="name">
人员档案
</div>
<div class="code-name">.icon-renyuandangan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zichandanganchaxun"></span>
<div class="name">
资产类别档案
</div>
<div class="code-name">.icon-zichandanganchaxun
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fukuantiaojianshezhi"></span>
<div class="name">
付款条件档案
</div>
<div class="code-name">.icon-fukuantiaojianshezhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yonghudangan"></span>
<div class="name">
用户档案
</div>
<div class="code-name">.icon-yonghudangan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chengyuanrenwu"></span>
<div class="name">
客户档案
</div>
<div class="code-name">.icon-chengyuanrenwu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhongdengwangdengjijiaoyi"></span>
<div class="name">
会计科目档案
</div>
<div class="code-name">.icon-zhongdengwangdengjijiaoyi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shuishuaiweihu"></span>
<div class="name">
税率档案
</div>
<div class="code-name">.icon-shuishuaiweihu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wuliaodangan"></span>
<div class="name">
物料档案
</div>
<div class="code-name">.icon-wuliaodangan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gongyingshangdangan"></span>
<div class="name">
供应商分类档案
</div>
<div class="code-name">.icon-gongyingshangdangan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gongyingshangdangan1"></span>
<div class="name">
供应商档案
</div>
<div class="code-name">.icon-gongyingshangdangan1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-a-91-2"></span>
<div class="name">
地区分类档案
</div>
<div class="code-name">.icon-a-91-2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiesuanfangshi"></span>
<div class="name">
结算方式档案
</div>
<div class="code-name">.icon-jiesuanfangshi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zuzhidangan"></span>
<div class="name">
组织档案
</div>
<div class="code-name">.icon-zuzhidangan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiangmudanganku"></span>
<div class="name">
项目档案
</div>
<div class="code-name">.icon-xiangmudanganku
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-path-2-3"></span>
<div class="name">
证件类型档案
</div>
<div class="code-name">.icon-path-2-3
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wenjian"></span>
<div class="name">
人员类别档案
</div>
<div class="code-name">.icon-wenjian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bumendangan"></span>
<div class="name">
部门档案
</div>
<div class="code-name">.icon-bumendangan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-erji-huowei-changgui"></span>
<div class="name">
货位档案
</div>
<div class="code-name">.icon-erji-huowei-changgui
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shujulaiyuan"></span>
<div class="name">
数据来源
</div>
<div class="code-name">.icon-shujulaiyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tsend"></span>
<div class="name">
tsend
</div>
<div class="code-name">.icon-tsend
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-script-language"></span>
<div class="name">
脚本语言
</div>
<div class="code-name">.icon-script-language
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-webhookpeizhi"></span>
<div class="name">
webhook配置
</div>
<div class="code-name">.icon-webhookpeizhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kaigong-filled"></span>
<div class="name">
开工-filled
</div>
<div class="code-name">.icon-kaigong-filled
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-auto-01"></span>
<div class="name">
auto
</div>
<div class="code-name">.icon-auto-01
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-peizhiquanxian"></span>
<div class="name">
配置权限
</div>
<div class="code-name">.icon-peizhiquanxian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenfashezhi"></span>
<div class="name">
分发设置
</div>
<div class="code-name">.icon-fenfashezhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shujuyuan"></span>
<div class="name">
数据源
</div>
<div class="code-name">.icon-shujuyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xianshixinxi"></span>
<div class="name">
显示信息
</div>
<div class="code-name">.icon-xianshixinxi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jibenxinxi"></span>
<div class="name">
基本信息
</div>
<div class="code-name">.icon-jibenxinxi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quxiaoguanbi1"></span>
<div class="name">
取消&关闭1
</div>
<div class="code-name">.icon-quxiaoguanbi1
</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-caidan"></span> <span class="icon iconfont icon-caidan"></span>
<div class="name"> <div class="name">
@ -427,6 +997,310 @@
<div class="content symbol"> <div class="content symbol">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gongzuotai"></use>
</svg>
<div class="name">工作台</div>
<div class="code-name">#icon-gongzuotai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shouye"></use>
</svg>
<div class="name">首页</div>
<div class="code-name">#icon-shouye</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-kehujiaobenduan"></use>
</svg>
<div class="name">客户脚本端</div>
<div class="code-name">#icon-kehujiaobenduan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-cangku"></use>
</svg>
<div class="name">仓库档案</div>
<div class="code-name">#icon-cangku</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yinhang-F"></use>
</svg>
<div class="name">银行类别档案</div>
<div class="code-name">#icon-yinhang-F</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jianliguanli"></use>
</svg>
<div class="name">客户分类档案</div>
<div class="code-name">#icon-jianliguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-cunhuotong"></use>
</svg>
<div class="name">存货分类档案</div>
<div class="code-name">#icon-cunhuotong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yinhangdangan"></use>
</svg>
<div class="name">银行账户档案</div>
<div class="code-name">#icon-yinhangdangan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-renyuandangan"></use>
</svg>
<div class="name">人员档案</div>
<div class="code-name">#icon-renyuandangan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zichandanganchaxun"></use>
</svg>
<div class="name">资产类别档案</div>
<div class="code-name">#icon-zichandanganchaxun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fukuantiaojianshezhi"></use>
</svg>
<div class="name">付款条件档案</div>
<div class="code-name">#icon-fukuantiaojianshezhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yonghudangan"></use>
</svg>
<div class="name">用户档案</div>
<div class="code-name">#icon-yonghudangan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chengyuanrenwu"></use>
</svg>
<div class="name">客户档案</div>
<div class="code-name">#icon-chengyuanrenwu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhongdengwangdengjijiaoyi"></use>
</svg>
<div class="name">会计科目档案</div>
<div class="code-name">#icon-zhongdengwangdengjijiaoyi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shuishuaiweihu"></use>
</svg>
<div class="name">税率档案</div>
<div class="code-name">#icon-shuishuaiweihu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wuliaodangan"></use>
</svg>
<div class="name">物料档案</div>
<div class="code-name">#icon-wuliaodangan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gongyingshangdangan"></use>
</svg>
<div class="name">供应商分类档案</div>
<div class="code-name">#icon-gongyingshangdangan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gongyingshangdangan1"></use>
</svg>
<div class="name">供应商档案</div>
<div class="code-name">#icon-gongyingshangdangan1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-91-2"></use>
</svg>
<div class="name">地区分类档案</div>
<div class="code-name">#icon-a-91-2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiesuanfangshi"></use>
</svg>
<div class="name">结算方式档案</div>
<div class="code-name">#icon-jiesuanfangshi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zuzhidangan"></use>
</svg>
<div class="name">组织档案</div>
<div class="code-name">#icon-zuzhidangan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiangmudanganku"></use>
</svg>
<div class="name">项目档案</div>
<div class="code-name">#icon-xiangmudanganku</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-path-2-3"></use>
</svg>
<div class="name">证件类型档案</div>
<div class="code-name">#icon-path-2-3</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wenjian"></use>
</svg>
<div class="name">人员类别档案</div>
<div class="code-name">#icon-wenjian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bumendangan"></use>
</svg>
<div class="name">部门档案</div>
<div class="code-name">#icon-bumendangan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-erji-huowei-changgui"></use>
</svg>
<div class="name">货位档案</div>
<div class="code-name">#icon-erji-huowei-changgui</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shujulaiyuan"></use>
</svg>
<div class="name">数据来源</div>
<div class="code-name">#icon-shujulaiyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tsend"></use>
</svg>
<div class="name">tsend</div>
<div class="code-name">#icon-tsend</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-script-language"></use>
</svg>
<div class="name">脚本语言</div>
<div class="code-name">#icon-script-language</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-webhookpeizhi"></use>
</svg>
<div class="name">webhook配置</div>
<div class="code-name">#icon-webhookpeizhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-kaigong-filled"></use>
</svg>
<div class="name">开工-filled</div>
<div class="code-name">#icon-kaigong-filled</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-auto-01"></use>
</svg>
<div class="name">auto</div>
<div class="code-name">#icon-auto-01</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-peizhiquanxian"></use>
</svg>
<div class="name">配置权限</div>
<div class="code-name">#icon-peizhiquanxian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenfashezhi"></use>
</svg>
<div class="name">分发设置</div>
<div class="code-name">#icon-fenfashezhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shujuyuan"></use>
</svg>
<div class="name">数据源</div>
<div class="code-name">#icon-shujuyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xianshixinxi"></use>
</svg>
<div class="name">显示信息</div>
<div class="code-name">#icon-xianshixinxi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jibenxinxi"></use>
</svg>
<div class="name">基本信息</div>
<div class="code-name">#icon-jibenxinxi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quxiaoguanbi1"></use>
</svg>
<div class="name">取消&关闭1</div>
<div class="code-name">#icon-quxiaoguanbi1</div>
</li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-caidan"></use> <use xlink:href="#icon-caidan"></use>

152
src/assets/fonts/iconfont.css
View File

@ -13,6 +13,158 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-gongzuotai:before {
content: "\e655";
}
.icon-shouye:before {
content: "\e605";
}
.icon-kehujiaobenduan:before {
content: "\e643";
}
.icon-cangku:before {
content: "\e71f";
}
.icon-yinhang-F:before {
content: "\e62e";
}
.icon-jianliguanli:before {
content: "\e727";
}
.icon-cunhuotong:before {
content: "\e6c3";
}
.icon-yinhangdangan:before {
content: "\e68f";
}
.icon-renyuandangan:before {
content: "\e600";
}
.icon-zichandanganchaxun:before {
content: "\e601";
}
.icon-fukuantiaojianshezhi:before {
content: "\e60f";
}
.icon-yonghudangan:before {
content: "\e63e";
}
.icon-chengyuanrenwu:before {
content: "\e62d";
}
.icon-zhongdengwangdengjijiaoyi:before {
content: "\e71b";
}
.icon-shuishuaiweihu:before {
content: "\e602";
}
.icon-wuliaodangan:before {
content: "\e61b";
}
.icon-gongyingshangdangan:before {
content: "\e614";
}
.icon-gongyingshangdangan1:before {
content: "\e69b";
}
.icon-a-91-2:before {
content: "\e603";
}
.icon-jiesuanfangshi:before {
content: "\e759";
}
.icon-zuzhidangan:before {
content: "\e6ae";
}
.icon-xiangmudanganku:before {
content: "\e6af";
}
.icon-path-2-3:before {
content: "\e64e";
}
.icon-wenjian:before {
content: "\e7e8";
}
.icon-bumendangan:before {
content: "\e621";
}
.icon-erji-huowei-changgui:before {
content: "\e634";
}
.icon-shujulaiyuan:before {
content: "\e812";
}
.icon-tsend:before {
content: "\e6d8";
}
.icon-script-language:before {
content: "\e7e3";
}
.icon-webhookpeizhi:before {
content: "\e6ec";
}
.icon-kaigong-filled:before {
content: "\e81e";
}
.icon-auto-01:before {
content: "\e6e4";
}
.icon-peizhiquanxian:before {
content: "\e68e";
}
.icon-fenfashezhi:before {
content: "\e68a";
}
.icon-shujuyuan:before {
content: "\e68b";
}
.icon-xianshixinxi:before {
content: "\e68c";
}
.icon-jibenxinxi:before {
content: "\e68d";
}
.icon-quxiaoguanbi1:before {
content: "\e627";
}
.icon-caidan:before { .icon-caidan:before {
content: "\e642"; content: "\e642";
} }

2
src/assets/fonts/iconfont.js
View File

File diff suppressed because one or more lines are too long

266
src/assets/fonts/iconfont.json
View File

@ -5,6 +5,272 @@
"css_prefix_text": "icon-", "css_prefix_text": "icon-",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "5035443",
"name": "工作台",
"font_class": "gongzuotai",
"unicode": "e655",
"unicode_decimal": 58965
},
{
"icon_id": "7083396",
"name": "首页",
"font_class": "shouye",
"unicode": "e605",
"unicode_decimal": 58885
},
{
"icon_id": "11121518",
"name": "客户脚本端",
"font_class": "kehujiaobenduan",
"unicode": "e643",
"unicode_decimal": 58947
},
{
"icon_id": "7712191",
"name": "仓库档案",
"font_class": "cangku",
"unicode": "e71f",
"unicode_decimal": 59167
},
{
"icon_id": "37539306",
"name": "银行类别档案",
"font_class": "yinhang-F",
"unicode": "e62e",
"unicode_decimal": 58926
},
{
"icon_id": "1665242",
"name": "客户分类档案",
"font_class": "jianliguanli",
"unicode": "e727",
"unicode_decimal": 59175
},
{
"icon_id": "2450725",
"name": "存货分类档案",
"font_class": "cunhuotong",
"unicode": "e6c3",
"unicode_decimal": 59075
},
{
"icon_id": "4393215",
"name": "银行账户档案",
"font_class": "yinhangdangan",
"unicode": "e68f",
"unicode_decimal": 59023
},
{
"icon_id": "4424768",
"name": "人员档案",
"font_class": "renyuandangan",
"unicode": "e600",
"unicode_decimal": 58880
},
{
"icon_id": "4659403",
"name": "资产类别档案",
"font_class": "zichandanganchaxun",
"unicode": "e601",
"unicode_decimal": 58881
},
{
"icon_id": "7674544",
"name": "付款条件档案",
"font_class": "fukuantiaojianshezhi",
"unicode": "e60f",
"unicode_decimal": 58895
},
{
"icon_id": "10900331",
"name": "用户档案",
"font_class": "yonghudangan",
"unicode": "e63e",
"unicode_decimal": 58942
},
{
"icon_id": "12535859",
"name": "客户档案",
"font_class": "chengyuanrenwu",
"unicode": "e62d",
"unicode_decimal": 58925
},
{
"icon_id": "14237522",
"name": "会计科目档案",
"font_class": "zhongdengwangdengjijiaoyi",
"unicode": "e71b",
"unicode_decimal": 59163
},
{
"icon_id": "15919260",
"name": "税率档案",
"font_class": "shuishuaiweihu",
"unicode": "e602",
"unicode_decimal": 58882
},
{
"icon_id": "20585487",
"name": "物料档案",
"font_class": "wuliaodangan",
"unicode": "e61b",
"unicode_decimal": 58907
},
{
"icon_id": "20713639",
"name": "供应商分类档案",
"font_class": "gongyingshangdangan",
"unicode": "e614",
"unicode_decimal": 58900
},
{
"icon_id": "21507384",
"name": "供应商档案",
"font_class": "gongyingshangdangan1",
"unicode": "e69b",
"unicode_decimal": 59035
},
{
"icon_id": "25997282",
"name": "地区分类档案",
"font_class": "a-91-2",
"unicode": "e603",
"unicode_decimal": 58883
},
{
"icon_id": "26045975",
"name": "结算方式档案",
"font_class": "jiesuanfangshi",
"unicode": "e759",
"unicode_decimal": 59225
},
{
"icon_id": "27089294",
"name": "组织档案",
"font_class": "zuzhidangan",
"unicode": "e6ae",
"unicode_decimal": 59054
},
{
"icon_id": "27928496",
"name": "项目档案",
"font_class": "xiangmudanganku",
"unicode": "e6af",
"unicode_decimal": 59055
},
{
"icon_id": "35882632",
"name": "证件类型档案",
"font_class": "path-2-3",
"unicode": "e64e",
"unicode_decimal": 58958
},
{
"icon_id": "3765344",
"name": "人员类别档案",
"font_class": "wenjian",
"unicode": "e7e8",
"unicode_decimal": 59368
},
{
"icon_id": "21013308",
"name": "部门档案",
"font_class": "bumendangan",
"unicode": "e621",
"unicode_decimal": 58913
},
{
"icon_id": "27201660",
"name": "货位档案",
"font_class": "erji-huowei-changgui",
"unicode": "e634",
"unicode_decimal": 58932
},
{
"icon_id": "38608609",
"name": "数据来源",
"font_class": "shujulaiyuan",
"unicode": "e812",
"unicode_decimal": 59410
},
{
"icon_id": "1786166",
"name": "tsend",
"font_class": "tsend",
"unicode": "e6d8",
"unicode_decimal": 59096
},
{
"icon_id": "5657738",
"name": "脚本语言",
"font_class": "script-language",
"unicode": "e7e3",
"unicode_decimal": 59363
},
{
"icon_id": "10420513",
"name": "webhook配置",
"font_class": "webhookpeizhi",
"unicode": "e6ec",
"unicode_decimal": 59116
},
{
"icon_id": "12428742",
"name": "开工-filled",
"font_class": "kaigong-filled",
"unicode": "e81e",
"unicode_decimal": 59422
},
{
"icon_id": "30653940",
"name": "auto",
"font_class": "auto-01",
"unicode": "e6e4",
"unicode_decimal": 59108
},
{
"icon_id": "37706795",
"name": "配置权限",
"font_class": "peizhiquanxian",
"unicode": "e68e",
"unicode_decimal": 59022
},
{
"icon_id": "37706794",
"name": "分发设置",
"font_class": "fenfashezhi",
"unicode": "e68a",
"unicode_decimal": 59018
},
{
"icon_id": "37706798",
"name": "数据源",
"font_class": "shujuyuan",
"unicode": "e68b",
"unicode_decimal": 59019
},
{
"icon_id": "37706797",
"name": "显示信息",
"font_class": "xianshixinxi",
"unicode": "e68c",
"unicode_decimal": 59020
},
{
"icon_id": "37706796",
"name": "基本信息",
"font_class": "jibenxinxi",
"unicode": "e68d",
"unicode_decimal": 59021
},
{
"icon_id": "16290376",
"name": "取消&关闭1",
"font_class": "quxiaoguanbi1",
"unicode": "e627",
"unicode_decimal": 58919
},
{ {
"icon_id": "8094171", "icon_id": "8094171",
"name": "菜单/列表", "name": "菜单/列表",

BIN
src/assets/fonts/iconfont.ttf
View File

Binary file not shown.

BIN
src/assets/fonts/iconfont.woff
View File

Binary file not shown.

BIN
src/assets/fonts/iconfont.woff2
View File

Binary file not shown.

39
src/layout/components/AppMain.vue
View File

@ -1,5 +1,11 @@
<template> <template>
<section class="app-main" :class="!sidebar.opened ? 'openSider' : ''"> <section
class="app-main"
:style="{
top: matchTop,
}"
:class="matchHeight"
>
<transition name="fade-transform" mode="out-in"> <transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedData"> <keep-alive :include="cachedData">
<!-- <keep-alive :include="cachedViews"> --> <!-- <keep-alive :include="cachedViews"> -->
@ -18,7 +24,7 @@ export default {
components: { iframeToggle }, components: { iframeToggle },
data() { data() {
return { return {
cachedData: ["ApiAdmin", "scenneAdmin","listOfApps"], cachedData: ["ApiAdmin", "scenneAdmin", "listOfApps"],
}; };
}, },
computed: { computed: {
@ -26,9 +32,31 @@ export default {
cachedViews() { cachedViews() {
return this.$store.state.tagsView.cachedViews; return this.$store.state.tagsView.cachedViews;
}, },
// 是否为开启tag
showTagsView() {
return this.$store.state.settings.showTagsView;
},
key() { key() {
return this.$route.path; return this.$route.path;
}, },
matchTop() {
let top = "";
if (!this.showTagsView) {
top = "5px";
} else {
top = "50px";
}
return top;
},
matchHeight() {
let height = "";
if (!this.showTagsView) {
height = "h-10";
} else {
height = "h-65";
}
return height;
},
}, },
}; };
</script> </script>
@ -49,6 +77,13 @@ export default {
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
top: 80px; top: 80px;
padding: 0 10px;
}
.h-10{
height: calc(100vh - 10px);
}
.h-65{
height: calc(100vh - 60px);
} }
.fixed-header + .app-main { .fixed-header + .app-main {

413
src/layout/components/NewMenu/index.vue Normal file
View File

@ -0,0 +1,413 @@
<template>
<div class="MenuContainer">
<!-- Logo 和 公司 -->
<div class="logoBox">
<img v-if="logo" :src="logo" class="sidebar-logo" />
</div>
<!-- 菜单 -->
<div class="menuBox">
<div
v-for="(item, index) in menuData"
:key="index"
class="newsSider"
:class="{ active: activeType(item.path) }"
v-if="item.show"
@click="jumpRoute(item)"
>
<div
class="badge"
v-if="
item.icon == 'icon-xiaoxi' &&
!isNaN(messageCount) &&
messageCount > 0
"
>
{{ messageCount > 100 ? "99+" : messageCount }}
</div>
<i class="newsSider-icon iconfont" :class="item.icon"> </i>
<p class="newsSider-title">
{{ item.title }}
</p>
</div>
</div>
<!-- 头像 -->
<div class="avatar-container">
<div class="searchBox">
<i class="el-icon-search"></i>
</div>
<el-dropdown placement="right-start" style="width: 100%">
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar" v-if="avatar" />
<div class="text" v-else>{{ PersonName.slice(-2) }}</div>
<p class="personName">{{ PersonName }}</p>
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
<el-dropdown-item divided @click.native="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import Cookies from "js-cookie";
import { getInfo, setInfo, getCompanyId, setCompanyId } from "@/utils/auth";
import { PersonDetail } from "@/api/apis/personnelSettings";
import logoImg from "@/assets/logo/tranLogo.png";
import personImg from "@/assets/images/person.png";
import { OrganGetUserCompany } from "@/api/apis/organization.js";
import { GetMessageCount } from "@/api/apis/messageManagement.js";
export default {
computed: {
...mapGetters(["avatar"]),
setting: {
get() {
return this.$store.state.settings.showSettings;
},
set(val) {
this.$store.dispatch("settings/changeSetting", {
key: "showSettings",
value: val,
});
},
},
messageCount() {
let count = this.$store.getters.messageCount;
return count * 1;
},
},
watch: {
// 确保路由跳转完以后再赋值
$route(to, form) {
let route = { ...to };
if (this.currentPath == to.path) {
route.meta.affix = true;
this.$store.dispatch("tagsView/updateVisitedView", route);
}
},
},
data() {
return {
logo: logoImg,
PersonName: "",
companyName: "用安数智中台",
menuData: [],
// companyList: [], //公司
personInfo: {},
currentPath: "",
fixedMenu: [
{
title: "首页",
path: "/index",
icon: "icon-shouye",
show: true,
},
{
title: "工作台",
path: "/Workbench",
icon: "icon-gongzuotai",
show: true,
},
],
};
},
created() {
this.$router
.push({
path: "/index",
})
.then(() => {
this.currentPath = this.$route.path;
this.$store.dispatch("settings/changeSetting", {
key: "showTagsView",
value: false,
});
});
},
mounted() {
// this.GetMessageCount();
this.DetermineMenuPermission();
this.personInfo = JSON.parse(getInfo());
this.PersonName = JSON.parse(getInfo()).personName;
// this.getInfoDetail(JSON.parse(getInfo()).personID);
},
methods: {
async GetMessageCount() {
let res = await GetMessageCount({});
if (res.code == 1) {
let count = 0;
res.data[0].forEach((item) => {
count += item.count * 1;
});
this.$store.commit("SET_MESSAGE_COUNT", count);
}
},
activeType(path) {
let type = false;
if (path === this.currentPath) {
type = true;
} else {
type = false;
}
return type;
},
// 判断当前有没有菜单权限 知识库 在线文档 报表中心 系统管理 系统维护 代码生成器
DetermineMenuPermission() {
this.menuData = [];
this.menuData = [...this.fixedMenu];
},
// 路由跳转
jumpRoute(item) {
if (item.path == this.currentPath) {
return;
}
this.currentPath = item.path;
this.$tab.closeAllPage();
this.$store.dispatch("tagsView/clearVisted");
this.$router
.push({
path: item.path,
})
.then(() => {
// 隐藏标签栏
this.$store.dispatch("settings/changeSetting", {
key: "showTagsView",
value: false,
});
});
},
// 获得详情
async getInfoDetail(id) {
let params = {
id: id,
};
let res = await PersonDetail(params);
if (res.success == "true") {
let qrUrl =
res.data[0].headImageUrl == null
? ""
: res.data[0].headImageUrl.split("/wwwroot")[1];
this.$store.commit("SET_AVATAR", qrUrl);
}
},
async logout() {
this.$confirm("确定要退出系统吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$store.commit("REMOVE_ROUTER");
this.$store.dispatch("tagsView/delAllViews");
this.$store.dispatch("LogOut").then(() => {
Cookies.remove("automaticLogin");
this.$router.replace({ path: "/login" });
});
})
.catch(() => {});
},
},
};
</script>
<style lang="scss" scoped>
.searchBox {
text-align: center;
width: 28px;
height: 28px;
line-height: 28px;
font-size: 14px;
background: #e7e7e7;
border-radius: 50%;
margin: 0 auto 10px;
}
.MenuContainer {
width: 100px;
height: 100%;
background: #f4f5f7;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1999;
padding-top: 8px;
}
// ----------logo
.logoBox {
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 1px solid #eaeaea;
background: #c73b26;
border-radius: 10px;
}
.sidebar-logo {
margin: 10px 0;
width: 70px;
height: 50px;
vertical-align: middle;
}
// ------------公司
.companyTitle {
font-weight: bold;
color: #000;
margin: 10px 0 15px 0;
}
.companyBox {
margin: 8px 0;
cursor: pointer;
display: flex;
align-items: center;
font-size: 12px;
div {
width: 75px;
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 显示省略号 */
}
i {
transform: rotate(90deg); /* 将文字旋转90度 */
}
}
.companyItem {
display: flex;
justify-content: space-between;
align-items: center;
padding: 13px 10px;
margin: 5px 0;
border-radius: 8px;
}
.checkBox {
color: transparent;
font-size: 18px;
font-weight: bold;
}
.companyItem:hover {
background: #f6f6f6;
}
.selectedCompany {
background: #f6f6f6;
.checkBox {
color: #1478f6;
}
}
// ---------------菜单
.menuBox {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 5px 15px 10px;
width: 100%;
height: calc(100% - 180px);
overflow-y: auto;
}
/* 定制滚动条样式 */
.menuBox::-webkit-scrollbar {
background-color: transparent; /* 背景色为透明色 */
box-shadow: 0px 1px 3px transparent inset;
}
/* 定制滚动条轨道样式 */
.menuBox::-webkit-scrollbar-track {
background-color: transparent; /* 轨道背景色为透明色 */
box-shadow: 0px 1px 3px transparent inset;
}
/* 定制滚动条滑块样式 */
.menuBox::-webkit-scrollbar-thumb {
background-color: transparent; /* 滑块颜色为透明色 */
box-shadow: 0px 1px 3px transparent inset;
}
.newsSider {
display: flex;
flex-direction: column;
align-items: center;
margin: 5px 0;
cursor: pointer;
position: relative;
.badge {
position: absolute;
width: 38px;
height: 18px;
background: #ff3b30;
border-radius: 40px;
font-size: 12px;
line-height: 16px;
color: #ffffff;
text-align: center;
left: 28px;
top: -8px;
border: 1px solid #ffffff;
}
&-icon {
width: 44px;
height: 44px;
line-height: 44px;
font-size: 20px;
margin-bottom: 7px;
text-align: center;
background: #fff;
border-radius: 12px;
color: #000;
}
&-title {
font-size: 12px;
padding-bottom: 5px;
}
}
::v-deep .newsSider.active .newsSider-icon {
background: #1478f6;
color: #fff;
}
::v-deep .newsSider.active .newsSider-title {
// color: #000;
}
// -----------头像
.avatar-container {
position: absolute;
bottom: 20px;
width: 90%;
padding-top: 10px;
border-top: 1px solid #eaeaea;
background: #f4f5f7;
display: flex;
flex-direction: column;
align-items: center;
.avatar-wrapper {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
font-size: 12px;
.user-avatar {
cursor: pointer;
width: 28px;
height: 28px;
border-radius: 4px;
margin-bottom: 8px;
}
.text {
cursor: pointer;
width: 28px;
height: 28px;
line-height: 24px;
border-radius: 4px;
margin-bottom: 8px;
background: #1478f6;
color: #ffffff;
text-align: center;
}
}
}
</style>

BIN
src/layout/components/TagsView/images/矩形@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

434
src/layout/components/TagsView/index.vue
View File

@ -1,39 +1,70 @@
<template> <template>
<div id="tags-view-container" class="tags-view-container" style="display: flex"> <div
<scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll"> id="tags-view-container"
<router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''" class="tags-view-container"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item" style="top:5px;margin:0 10px;"
:style="activeStyle(tag)" @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''" >
@contextmenu.prevent.native="openMenu(tag, $event)" <scroll-pane
ref="scrollPane"
class="tags-view-wrapper"
@scroll="handleScroll"
>
<router-link
v-for="tag in visitedViews"
ref="tag"
:key="tag.path"
:class="isActive(tag) ? 'active' : ''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
tag="span"
class="tags-view-item"
@click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent.native="openMenu(tag, $event)"
> >
<div class="showBox"> <span
<div v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)"></div> v-if="!isAffix(tag)"
<div class="text">{{ tag.meta.title ? tag.meta.title : tag.title }}</div> class="el-icon-close"
</div> @click.prevent.stop="closeSelectedTag(tag)"
/>
<span v-else class="el-icon-close-else" />
<span>{{ tag.meta.title ? tag.meta.title : tag.title }}</span>
</router-link> </router-link>
</scroll-pane> </scroll-pane>
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu"> <ul
<li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 刷新页面</li> v-show="visible"
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> 关闭当前 :style="{ left: left + 'px', top: top + 'px' }"
class="contextmenu"
>
<li @click="refreshSelectedTag(selectedTag)">
<i class="el-icon-refresh-right"></i> 刷新页面
</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
<i class="el-icon-close"></i> 关闭当前
</li>
<li @click="closeOthersTags">
<i class="el-icon-circle-close"></i> 关闭其他
</li>
<li v-if="!isFirstView()" @click="closeLeftTags">
<i class="el-icon-back"></i> 关闭左侧
</li>
<li v-if="!isLastView()" @click="closeRightTags">
<i class="el-icon-right"></i> 关闭右侧
</li>
<li @click="closeAllTags(selectedTag)">
<i class="el-icon-circle-close"></i> 全部关闭
</li> </li>
<li @click="closeOthersTags"><i class="el-icon-circle-close"></i> 关闭其他</li>
<li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> 关闭左侧</li>
<li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> 关闭右侧</li>
<li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 全部关闭</li>
</ul> </ul>
</div> </div>
</template> </template>
<script> <script>
import ScrollPane from './ScrollPane' import ScrollPane from "./ScrollPane";
import path from 'path' import path from "path";
import { import { getCompanyId } from "@/utils/auth";
getCompanyId import { ChangeCompany } from "@/api/apis/auth";
} from '@/utils/auth'
export default { export default {
components: { components: {
ScrollPane ScrollPane,
}, },
data() { data() {
return { return {
@ -41,297 +72,332 @@ export default {
top: 0, top: 0,
left: 0, left: 0,
selectedTag: {}, selectedTag: {},
affixTags: [] affixTags: [],
} };
}, },
computed: { computed: {
visitedViews() { visitedViews() {
return this.$store.state.tagsView.visitedViews return this.$store.state.tagsView.visitedViews;
}, },
routes() { routes() {
return this.$store.state.permission.routes return this.$store.state.permission.routes;
}, },
theme() { theme() {
return this.$store.state.settings.theme return this.$store.state.settings.theme;
}, },
companyID() { companyID() {
return this.$store.state.user.companyID return this.$store.state.user.companyID;
} },
}, },
watch: { watch: {
$route() { $route() {
this.addTags() this.addTags();
this.moveToCurrentTag() this.moveToCurrentTag();
}, },
visible(value) { visible(value) {
if (value) { if (value) {
document.body.addEventListener('click', this.closeMenu) document.body.addEventListener("click", this.closeMenu);
} else { } else {
document.body.removeEventListener('click', this.closeMenu) document.body.removeEventListener("click", this.closeMenu);
} }
}, },
companyID: { companyID: {
deep: true, //深度监听设置为 true deep: true, //深度监听设置为 true
handler: function(newV, oldV) { handler: function (newV, oldV) {
if (oldV) { if (newV) {
this.$vmNews('切换公司成功', 'success') this.ChangeCompany(newV);
this.closeAllTags(this.closeAllTags) this.$vmNews("切换公司成功", "success");
this.closeAllTags(this.closeAllTags);
} }
} },
} },
}, },
mounted() { mounted() {
this.initTags() // if (!this.newVersionSystem) {
this.addTags() // this.initTags();
// }
this.addTags();
}, },
methods: { methods: {
async ChangeCompany(CompanyID) {
let params = {
CompanyID: CompanyID,
};
let res = await ChangeCompany(params);
},
isActive(route) { isActive(route) {
return route.path === this.$route.path return route.path === this.$route.path;
}, },
activeStyle(tag) { activeStyle(tag) {
if (!this.isActive(tag)) return {} if (!this.isActive(tag)) return {};
return { return {
// "background-color": this.theme, "background-color": this.theme,
'border-color': this.theme "border-color": this.theme,
} };
}, },
isAffix(tag) { isAffix(tag) {
return tag.meta && tag.meta.affix return tag.meta && tag.meta.affix;
}, },
isFirstView() { isFirstView() {
try { try {
return this.selectedTag.fullPath === this.visitedViews[1].fullPath || this.selectedTag.fullPath === return (
'/index' this.selectedTag.fullPath === this.visitedViews[1].fullPath ||
this.selectedTag.fullPath === "/index"
);
} catch (err) { } catch (err) {
return false return false;
} }
}, },
isLastView() { isLastView() {
try { try {
return this.selectedTag.fullPath === this.visitedViews[this.visitedViews.length - 1].fullPath return (
this.selectedTag.fullPath ===
this.visitedViews[this.visitedViews.length - 1].fullPath
);
} catch (err) { } catch (err) {
return false return false;
} }
}, },
filterAffixTags(routes, basePath = '/') { filterAffixTags(routes, basePath = "/") {
let tags = [] let tags = [];
routes.forEach(route => { routes.forEach((route) => {
if (route.meta && route.meta.affix) { if (route.meta && route.meta.affix) {
const tagPath = path.resolve(basePath, route.path) const tagPath = path.resolve(basePath, route.path);
tags.push({ tags.push({
fullPath: tagPath, fullPath: tagPath,
path: tagPath, path: tagPath,
name: route.name, name: route.name,
id: route.id ? route.id : 0, id: route.id ? route.id : 0,
meta: { meta: {
...route.meta ...route.meta,
} },
}) });
} }
if (route.children) { if (route.children) {
const tempTags = this.filterAffixTags(route.children, route.path) const tempTags = this.filterAffixTags(route.children, route.path);
if (tempTags.length >= 1) { if (tempTags.length >= 1) {
tags = [...tags, ...tempTags] tags = [...tags, ...tempTags];
} }
} }
}) });
return tags return tags;
}, },
initTags() { initTags() {
const affixTags = this.affixTags = this.filterAffixTags(this.routes) const affixTags = (this.affixTags = this.filterAffixTags(this.routes));
for (const tag of affixTags) { for (const tag of affixTags) {
// Must have tag name // Must have tag name
if (tag.name) { if (tag.name) {
this.$store.dispatch('tagsView/addVisitedView', tag) this.$store.dispatch("tagsView/addVisitedView", tag);
} }
} }
}, },
addTags() { addTags() {
const name = this.$route.meta.title const name = this.$route.meta.title;
// this.$route.meta.noCache = false // this.$route.meta.noCache = false
if (name) { if (name) {
this.$store.dispatch('tagsView/addView', this.$route) this.$store.dispatch("tagsView/addView", this.$route);
if (this.$route.meta.link) { if (this.$route.meta.link) {
this.$store.dispatch('tagsView/addIframeView', this.$route) this.$store.dispatch("tagsView/addIframeView", this.$route);
} }
} }
return false return false;
}, },
moveToCurrentTag() { moveToCurrentTag() {
const tags = this.$refs.tag const tags = this.$refs.tag;
this.$nextTick(() => { this.$nextTick(() => {
for (const tag of tags) { for (const tag of tags) {
if (tag.to.path === this.$route.path) { if (tag.to.path === this.$route.path) {
this.$refs.scrollPane.moveToTarget(tag) this.$refs.scrollPane.moveToTarget(tag);
// when query is different then update // when query is different then update
if (tag.to.fullPath !== this.$route.fullPath) { if (tag.to.fullPath !== this.$route.fullPath) {
this.$store.dispatch('tagsView/updateVisitedView', this.$route) this.$store.dispatch("tagsView/updateVisitedView", this.$route);
} }
break break;
} }
} }
}) });
}, },
refreshSelectedTag(view) { refreshSelectedTag(view) {
this.$tab.refreshPage(view) this.$tab.refreshPage(view);
if (this.$route.meta.link) { if (this.$route.meta.link) {
this.$store.dispatch('tagsView/delIframeView', this.$route) this.$store.dispatch("tagsView/delIframeView", this.$route);
} }
}, },
closeSelectedTag(view) { closeSelectedTag(view) {
this.$tab.closePage(view).then(({ this.$tab.closePage(view).then(({ visitedViews }) => {
visitedViews
}) => {
if (this.isActive(view)) { if (this.isActive(view)) {
this.toLastView(visitedViews, view) this.toLastView(visitedViews, view);
} }
}) });
}, },
closeRightTags() { closeRightTags() {
this.$tab.closeRightPage(this.selectedTag).then(visitedViews => { this.$tab.closeRightPage(this.selectedTag).then((visitedViews) => {
if (!visitedViews.find(i => i.fullPath === this.$route.fullPath)) { if (!visitedViews.find((i) => i.fullPath === this.$route.fullPath)) {
this.toLastView(visitedViews) this.toLastView(visitedViews);
} }
}) });
}, },
closeLeftTags() { closeLeftTags() {
this.$tab.closeLeftPage(this.selectedTag).then(visitedViews => { this.$tab.closeLeftPage(this.selectedTag).then((visitedViews) => {
if (!visitedViews.find(i => i.fullPath === this.$route.fullPath)) { if (!visitedViews.find((i) => i.fullPath === this.$route.fullPath)) {
this.toLastView(visitedViews) this.toLastView(visitedViews);
} }
}) });
}, },
closeOthersTags() { closeOthersTags() {
this.$router.push(this.selectedTag).catch(() => { this.$router.push(this.selectedTag).catch(() => {});
})
this.$tab.closeOtherPage(this.selectedTag).then(() => { this.$tab.closeOtherPage(this.selectedTag).then(() => {
this.moveToCurrentTag() this.moveToCurrentTag();
}) });
}, },
closeAllTags(view) { closeAllTags(view) {
this.$tab.closeAllPage().then(({ this.$tab.closeAllPage().then(({ visitedViews }) => {
visitedViews if (this.affixTags.some((tag) => tag.path === this.$route.path)) {
}) => { return;
if (this.affixTags.some(tag => tag.path === this.$route.path)) {
return
} }
this.toLastView(visitedViews, view) this.toLastView(visitedViews, view);
}) });
}, },
toLastView(visitedViews, view) { toLastView(visitedViews, view) {
const latestView = visitedViews.slice(-1)[0] const latestView = visitedViews.slice(-1)[0];
if (latestView) { if (latestView) {
this.$router.push(latestView.fullPath) this.$router.push(latestView.fullPath);
} else { } else {
// now the default is to redirect to the home page if there is no tags-view, // now the default is to redirect to the home page if there is no tags-view,
// you can adjust it according to your needs. // you can adjust it according to your needs.
if (view.name === 'Dashboard') { if (view.name === "Dashboard") {
// to reload home page // to reload home page
this.$router.replace({ this.$router.replace({
path: '/redirect' + view.fullPath path: "/redirect" + view.fullPath,
}) });
} else { } else {
this.$router.push('/') this.$router.push("/");
} }
} }
}, },
openMenu(tag, e) { openMenu(tag, e) {
console.log(e.target, 'e') const menuMinWidth = 105;
const menuMinWidth = 105 const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
const offsetLeft = e.target.getBoundingClientRect().left // container margin left const offsetWidth = this.$el.offsetWidth; // container width
const offsetWidth = e.target.offsetWidth // container width const maxLeft = offsetWidth - menuMinWidth; // left boundary
const maxLeft = offsetWidth - menuMinWidth // left boundary const left = e.clientX - offsetLeft + 15; // 15: margin right
const left = offsetLeft + 100 // 15: margin right
// if (left > maxLeft) { if (left > maxLeft) {
// this.left = 800 this.left = maxLeft;
// } else { } else {
// this.left = 800 this.left = left;
// } }
this.left = left this.top = e.clientY;
this.top = e.clientY - 40
this.visible = true
this.selectedTag = tag this.visible = true;
this.selectedTag = tag;
}, },
closeMenu() { closeMenu() {
this.visible = false this.visible = false;
}, },
handleScroll() { handleScroll() {
this.closeMenu() this.closeMenu();
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .scrollbar__view { ::v-deep .tags-view-wrapper .tags-view-item.active::before {
display: flex; content: "";
align-items: center; width: unset !important;
height: unset !important;
margin-right: unset !important;
} }
.tags-view-container { .tags-view-container {
// height: 34px; // height: 34px;
width: 80vw; width: 100%;
overflow: auto;
// width: calc(100% - 180px); // width: calc(100% - 180px);
//margin-left: 10px; margin-left: 10px;
background: #fff; background: #f7f7f7;
border-radius: 4px; border-radius: 4px;
padding: 0px 10px;
// border-bottom: 1px solid #d8dce5; // border-bottom: 1px solid #d8dce5;
// box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); // box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
//position: fixed; position: fixed;
//top: 22px; top: 55px;
// margin-top: 60px; // margin-top: 60px;
z-index: 1000; z-index: 1000;
.tags-view-wrapper { .tags-view-wrapper {
display: flex;
align-items: center;
.tags-view-item { .tags-view-item {
display: flex; display: inline-block;
align-items: center;
justify-content: center;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
//border: 1px solid #d8dce5; height: 35px;
line-height: 35px;
// border-right: 1px solid #d8dce5;
color: #495060; color: #495060;
background: #fff; // background: #fff;
padding: 0 15px; padding: 0 15px;
height: 39px; font-size: 12px;
margin: 4px 10px;
text-align: center !important;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 14px; font-size: 14px;
.showBox{ color: #333333;
position: relative; font-style: normal;
display: flex;
align-items: center;
justify-content: center;
}
&:first-of-type { &:first-of-type {
// margin-left: 15px; // margin-left: 15px;
} }
&:last-of-type { &:last-of-type {
margin-right: 15px;
}
&::after {
content: "";
background: #e4e3e3;
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -10px;
width: 1px;
height: 15px;
margin-left: 8px;
vertical-align: -3px;
} }
&.active { &.active {
//background-color: #42b983; //background-color: #42b983;
color: #fff; color: #fff;
border-color: #42b983; border-color: #42b983;
background: #3876ee; text-align: center !important;
background-size: 100% 100%;
border-radius: 20px; &::before {
//&::before { content: "";
// content: ''; background: #fff;
// background: #fff; display: inline-block;
// display: inline-block; width: 8px;
// width: 8px; height: 8px;
// height: 8px; border-radius: 50%;
// border-radius: 50%; position: relative;
// position: relative; margin-right: 2px;
// margin-right: 2px; }
//}
&::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100%;
height: calc(100% + 10px);
padding: 0 70%;
z-index: -1;
background: url("./images/矩形@2x.png") no-repeat;
background-size: 100% 100%;
}
} }
} }
} }
@ -339,7 +405,7 @@ export default {
.contextmenu { .contextmenu {
margin: 0; margin: 0;
background: #fff; background: #fff;
z-index: 999999; z-index: 3000;
position: absolute; position: absolute;
list-style-type: none; list-style-type: none;
padding: 5px 0; padding: 5px 0;
@ -347,7 +413,7 @@ export default {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: #333; color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
li { li {
margin: 0; margin: 0;
@ -366,23 +432,21 @@ export default {
//reset element css of el-icon-close //reset element css of el-icon-close
.tags-view-wrapper { .tags-view-wrapper {
.tags-view-item { .tags-view-item {
color: #333;
.el-icon-close { .el-icon-close {
//width: 16px; width: 16px;
//height: 16px; height: 16px;
left: -14px;
top: 0px;
position: absolute;
vertical-align: 2px; vertical-align: 2px;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
//transition: all .3s cubic-bezier(.645, .045, .355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transform-origin: 100% 50%; transform-origin: 100% 50%;
font-weight: 700; margin-right: 5px;
&:before { &:before {
transform: scale(.6); // transform: scale(0.6);
display: inline-block; display: inline-block;
vertical-align: -3px; vertical-align: -2px;
} }
&:hover { &:hover {
@ -390,6 +454,20 @@ export default {
color: #fff; color: #fff;
} }
} }
.el-icon-close-else {
width: 16px;
height: 16px;
vertical-align: 2px;
border-radius: 50%;
text-align: center;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transform-origin: 100% 50%;
&:before {
display: inline-block;
vertical-align: -2px;
}
}
} }
} }
</style> </style>

1
src/layout/components/index.js
View File

@ -3,3 +3,4 @@ export { default as Navbar } from './Navbar'
export { default as Settings } from './Settings' export { default as Settings } from './Settings'
export { default as Sidebar } from './Sidebar/index.vue' export { default as Sidebar } from './Sidebar/index.vue'
export { default as TagsView } from './TagsView/index.vue' export { default as TagsView } from './TagsView/index.vue'
export { default as NewMenu } from './NewMenu/index.vue'

96
src/layout/index.vue
View File

@ -4,32 +4,12 @@
class="app-wrapper" class="app-wrapper"
:style="{ '--current-color': theme }" :style="{ '--current-color': theme }"
> >
<div <div class="newVersionSystem">
:class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" <new-menu class="newMenuWidth" />
class="main-container" <div class="newMenuAppMain">
> <tags-view v-if="showTagsView" />
<div :class="{ 'fixed-header': fixedHeader }"> <app-main />
<navbar />
<sidebar
ref="sidebar"
class="sidebar-container"
v-if="true"
:style="{
width: sidebar.opened
? '0px'
: childrenType
? childrenWidth
: '128px',
}"
@openChildren="openChildren"
@changeWidth="changeWidth"
/>
<!-- <tags-view v-if="needTagsView" /> -->
</div> </div>
<app-main />
<right-panel>
<settings />
</right-panel>
</div> </div>
</div> </div>
</template> </template>
@ -38,7 +18,14 @@
import router from "@/router"; import router from "@/router";
import RightPanel from "@/components/RightPanel"; import RightPanel from "@/components/RightPanel";
import notFound from "@/views/error/404"; import notFound from "@/views/error/404";
import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components"; import {
AppMain,
Navbar,
Settings,
Sidebar,
TagsView,
NewMenu,
} from "./components";
import ResizeMixin from "./mixin/ResizeHandler"; import ResizeMixin from "./mixin/ResizeHandler";
import { mapState } from "vuex"; import { mapState } from "vuex";
import variables from "@/assets/styles/variables.scss"; import variables from "@/assets/styles/variables.scss";
@ -52,6 +39,7 @@ export default {
Settings, Settings,
Sidebar, Sidebar,
TagsView, TagsView,
NewMenu,
notFound, notFound,
}, },
mixins: [ResizeMixin], mixins: [ResizeMixin],
@ -64,6 +52,7 @@ export default {
notFound: (state) => state.app.notFound, notFound: (state) => state.app.notFound,
conciseMenu: (state) => state.settings.conciseMenu, conciseMenu: (state) => state.settings.conciseMenu,
needTagsView: (state) => state.settings.tagsView, needTagsView: (state) => state.settings.tagsView,
showTagsView: (state) => state.settings.showTagsView,
fixedHeader: (state) => state.settings.fixedHeader, fixedHeader: (state) => state.settings.fixedHeader,
}), }),
classObj() { classObj() {
@ -84,50 +73,12 @@ export default {
childrenWidth: "1200px", childrenWidth: "1200px",
}; };
}, },
watch: {
sidebar: {
handler: function (val, oldVal) {
if (!val.opened && this.childrenType) {
this.$nextTick(() => {
let newWidth = this.$refs.sidebar.childrenWidth + 128 + "px";
this.childrenWidth = newWidth;
});
}
},
deep: true,
},
},
mounted() {
this.getMenu();
this.childrenWidth = this.$refs.sidebar.childrenWidth;
// console.log(this.childrenWidth )
},
methods: { methods: {
openChildren(val) {
let newWidth = this.$refs.sidebar.childrenWidth + 128 + "px";
this.childrenWidth = newWidth;
this.childrenType = val;
},
changeWidth(width) {
this.childrenWidth = width + 128 + "px";
},
handleClickOutside() { handleClickOutside() {
this.$store.dispatch("app/closeSideBar", { this.$store.dispatch("app/closeSideBar", {
withoutAnimation: false, withoutAnimation: false,
}); });
}, },
getMenu() {
//动态路由注释
// this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
// // console.log(accessRoutes)
// // 根据roles权限生成可访问的路由表
// for (let i = 0, length = accessRoutes.length; i < length; i += 1) {
// const element = accessRoutes[i];
// router.addRoutes(accessRoutes); // 动态添加可访问路由表
// }
// localStorage.setItem("routeList", JSON.stringify(accessRoutes));
// });
},
}, },
}; };
</script> </script>
@ -141,14 +92,25 @@ export default {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 0 8px; // padding: 0 8px;
background: #fafafa; background: #ffffff;
&.mobile.openSidebar { &.mobile.openSidebar {
position: fixed; position: fixed;
top: 0; top: 0;
} }
} }
.newVersionSystem {
display: flex;
height: 100%;
width: 100%;
}
.newMenuWidth {
width: 114px;
}
.newMenuAppMain {
width: calc(100% - 114px);
overflow: hidden;
}
.drawer-bg { .drawer-bg {
background: #000; background: #000;
opacity: 0.3; opacity: 0.3;

199
src/layout/index_v3.vue Normal file
View File

@ -0,0 +1,199 @@
<template>
<div
:class="classObj"
class="app-wrapper"
:style="{ '--current-color': theme }"
>
<div
:class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
class="main-container"
>
<div :class="{ 'fixed-header': fixedHeader }">
<navbar />
<sidebar
ref="sidebar"
class="sidebar-container"
v-if="true"
:style="{
width: sidebar.opened
? '0px'
: childrenType
? childrenWidth
: '128px',
}"
@openChildren="openChildren"
@changeWidth="changeWidth"
/>
<!-- <tags-view v-if="needTagsView" /> -->
</div>
<app-main />
<right-panel>
<settings />
</right-panel>
</div>
</div>
</template>
<script>
import router from "@/router";
import RightPanel from "@/components/RightPanel";
import notFound from "@/views/error/404";
import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
import ResizeMixin from "./mixin/ResizeHandler";
import { mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
export default {
name: "Layout",
components: {
AppMain,
Navbar,
RightPanel,
Settings,
Sidebar,
TagsView,
notFound,
},
mixins: [ResizeMixin],
computed: {
...mapState({
theme: (state) => state.settings.theme,
sideTheme: (state) => state.settings.sideTheme,
sidebar: (state) => state.app.sidebar,
device: (state) => state.app.device,
notFound: (state) => state.app.notFound,
conciseMenu: (state) => state.settings.conciseMenu,
needTagsView: (state) => state.settings.tagsView,
fixedHeader: (state) => state.settings.fixedHeader,
}),
classObj() {
return {
// hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === "mobile",
};
},
variables() {
return variables;
},
},
data() {
return {
childrenType: false,
childrenWidth: "1200px",
};
},
watch: {
sidebar: {
handler: function (val, oldVal) {
if (!val.opened && this.childrenType) {
this.$nextTick(() => {
let newWidth = this.$refs.sidebar.childrenWidth + 128 + "px";
this.childrenWidth = newWidth;
});
}
},
deep: true,
},
},
mounted() {
this.getMenu();
this.childrenWidth = this.$refs.sidebar.childrenWidth;
// console.log(this.childrenWidth )
},
methods: {
openChildren(val) {
let newWidth = this.$refs.sidebar.childrenWidth + 128 + "px";
this.childrenWidth = newWidth;
this.childrenType = val;
},
changeWidth(width) {
this.childrenWidth = width + 128 + "px";
},
handleClickOutside() {
this.$store.dispatch("app/closeSideBar", {
withoutAnimation: false,
});
},
getMenu() {
//动态路由注释
// this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
// // console.log(accessRoutes)
// // 根据roles权限生成可访问的路由表
// for (let i = 0, length = accessRoutes.length; i < length; i += 1) {
// const element = accessRoutes[i];
// router.addRoutes(accessRoutes); // 动态添加可访问路由表
// }
// localStorage.setItem("routeList", JSON.stringify(accessRoutes));
// });
},
},
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
padding: 0 8px;
background: #fafafa;
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.defaultMuneStyle {
width: calc(100% - 160px);
margin-left: 160px;
height: 100%;
// padding:10px;
}
.conciseMenuStyle {
width: calc(100% - 70px);
margin-left: 70px;
padding: 10px;
height: 100%;
}
.fixed-header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s;
}
// .hideSidebar .fixed-header {
// width: calc(100% - 54px);
// }
.sidebarHide .fixed-header {
width: 100%;
}
.mobile .fixed-header {
width: 100%;
}
.webConcat {
position: fixed;
top: 50px;
height: calc(100vh - 50px);
width: 100%;
}
</style>

430
src/router/index.js
View File

@ -40,225 +40,233 @@ export const constantRoutes = [{
component: () => import('@/views/redirect') component: () => import('@/views/redirect')
}] }]
}, },
{ {
path: '/apiLogs', path: '/apiLogs',
component: () => import('@/views/apiLogs/index.vue'), component: () => import('@/views/apiLogs/index.vue'),
hidden: true hidden: true
}, },
{ {
path: '/login', path: '/login',
component: () => import('@/views/login'), component: () => import('@/views/login'),
hidden: true hidden: true
}, },
{ {
path: '/test', path: '/test',
component: () => import('@/views/test'), component: () => import('@/views/test'),
hidden: true hidden: true
}, },
{ {
path: '/register', path: '/register',
component: () => import('@/views/register/index'), component: () => import('@/views/register/index'),
hidden: true hidden: true
}, },
{ {
path: '/systemInit', path: '/systemInit',
// name: "databaseIndex", // name: "databaseIndex",
component: () => import('@/views/systemInit/index'), component: () => import('@/views/systemInit/index'),
hidden: true hidden: true
}, },
{ {
path: '/404', path: '/404',
component: () => import('@/views/error/404'), component: () => import('@/views/error/404'),
hidden: true hidden: true
}, },
{ {
path: '/401', path: '/401',
component: () => import('@/views/error/401'), component: () => import('@/views/error/401'),
hidden: true hidden: true
}, },
// { // {
// path: "/contractAssistant", // path: "/contractAssistant",
// component: () => import("@/views/contractAssistant"), // component: () => import("@/views/contractAssistant"),
// hidden: true, // hidden: true,
// }, // },
{ {
path: '', path: '',
component: Layout, component: Layout,
redirect: 'index', redirect: 'index',
children: [{ children: [{
path: 'index', path: 'index',
component: () => import('@/views/index_v2'), component: () => import('@/views/index_v2'),
name: 'Index', name: 'Index',
meta: { meta: {
title: '首页', title: '首页',
icon: 'dashboard', icon: 'dashboard',
affix: true affix: true
} }
},
{
path: 'notFound',
component: () => import('@/views/notFound'),
name: 'notFound',
meta: {
title: '404',
icon: 'dashboard'
// affix: true,
}
}
]
}, },
{ {
path: '/user', path: 'notFound',
component: Layout, component: () => import('@/views/notFound'),
hidden: true, name: 'notFound',
redirect: 'Profile', meta: {
children: [{ title: '404',
path: 'Profile', icon: 'dashboard'
// component: () => import('@/views/system/user/personalCenter/index'), // affix: true,
component: () => }
import( },{
'@/views/systemSettings/userSettings/PersonnelSettings/personalCenter/index' path: "Workbench",
), component: () => import("@/views/newVersionView/Workbench/index"),
name: 'Profile', name: "Workbench",
meta: { meta: {
title: '个人中心', title: "工作台",
icon: 'user' icon: "dashboard",
},
},
]
},
{
path: '/user',
component: Layout,
hidden: true,
redirect: 'Profile',
children: [{
path: 'Profile',
// component: () => import('@/views/system/user/personalCenter/index'),
component: () =>
import(
'@/views/systemSettings/userSettings/PersonnelSettings/personalCenter/index'
),
name: 'Profile',
meta: {
title: '个人中心',
icon: 'user'
} }
}] }]
} },
// { // {
// path: "/integrationOption", // path: "/integrationOption",
// component: Layout, // component: Layout,
// name: "integrationOption", // name: "integrationOption",
// redirect: "dataOption", // redirect: "dataOption",
// meta: { // meta: {
// title: "主数据中心", // title: "主数据中心",
// icon: "documentation", // icon: "documentation",
// }, // },
// children: [ // children: [
// { // {
// path: "dataOption", // path: "dataOption",
// component: () => import("@/views/integrationOption/index.vue"), // component: () => import("@/views/integrationOption/index.vue"),
// name: "dataOption", // name: "dataOption",
// meta: { // meta: {
// title: "主数据中心", // title: "主数据中心",
// }, // },
// }, // },
// ], // ],
// }, // },
// { // {
// path: "/applicationList", // path: "/applicationList",
// component: Layout, // component: Layout,
// name: "applicationList", // name: "applicationList",
// redirect: "applicationListAdmin", // redirect: "applicationListAdmin",
// meta: { // meta: {
// title: "应用列表", // title: "应用列表",
// icon: "el-icon-s-home", // icon: "el-icon-s-home",
// }, // },
// children: [ // children: [
// { // {
// path: "applicationListAdmin", // path: "applicationListAdmin",
// component: () => import("@/views/applicationList/index.vue"), // component: () => import("@/views/applicationList/index.vue"),
// name: "applicationListAdmin", // name: "applicationListAdmin",
// meta: { // meta: {
// title: "应用列表", // title: "应用列表",
// }, // },
// }, // },
// { // {
// path: "settingMenu", // path: "settingMenu",
// component: () => import("@/views/applicationList/settingMenu.vue"), // component: () => import("@/views/applicationList/settingMenu.vue"),
// name: "settingMenu", // name: "settingMenu",
// redirect: 'settingMenu/applicationEdit', // redirect: 'settingMenu/applicationEdit',
// hidden: true, // hidden: true,
// meta: { // meta: {
// title: "应用设置", // title: "应用设置",
// hidden: true, // hidden: true,
// }, // },
// children: [ // children: [
// { // {
// path: "applicationEdit", // path: "applicationEdit",
// component: () => import("@/views/applicationList/masterDataAdd.vue"), // component: () => import("@/views/applicationList/masterDataAdd.vue"),
// name: "applicationEdit", // name: "applicationEdit",
// hidden: true, // hidden: true,
// meta: { // meta: {
// title: "应用编辑", // title: "应用编辑",
// hidden: true, // hidden: true,
// }, // },
// }, // },
// { // {
// path: "exploit", // path: "exploit",
// component: () => import("@/views/applicationList/exploit"), // component: () => import("@/views/applicationList/exploit"),
// name: "exploit", // name: "exploit",
// hidden: true, // hidden: true,
// meta: { // meta: {
// title: "开发管理", // title: "开发管理",
// hidden: true, // hidden: true,
// }, // },
// }, // },
// { // {
// path: "authority", // path: "authority",
// component: () => import("@/views/applicationList/authority"), // component: () => import("@/views/applicationList/authority"),
// name: "authority", // name: "authority",
// hidden: true, // hidden: true,
// meta: { // meta: {
// title: "权限管理", // title: "权限管理",
// hidden: true, // hidden: true,
// //
// }, // },
// }, // },
// { // {
// path: "appApiAdmin", // path: "appApiAdmin",
// name: "appApiAdmin", // name: "appApiAdmin",
// component: () => import("@/views/applicationList/apiList/apiAdmin"), // component: () => import("@/views/applicationList/apiList/apiAdmin"),
// meta: { // meta: {
// title: "API管理", // title: "API管理",
// hidden: true // hidden: true
// } // }
// }, // },
// { // {
// path: "inserterAdmin", // path: "inserterAdmin",
// name: "inserterAdmin", // name: "inserterAdmin",
// component: () => import("@/views/applicationList/inserterAdmin"), // component: () => import("@/views/applicationList/inserterAdmin"),
// meta: { // meta: {
// title: "插件管理", // title: "插件管理",
// hidden: true, // hidden: true,
// } // }
// }, // },
// { // {
// path: "appApiadd", // path: "appApiadd",
// name: "appApiAdd", // name: "appApiAdd",
// redirect: "", // redirect: "",
// hidden: "true", // hidden: "true",
// component: () => import("@/views/applicationList/apiList/apiAdd"), // component: () => import("@/views/applicationList/apiList/apiAdd"),
// meta: { // meta: {
// title: "API新增", // title: "API新增",
// //
// }, // },
// }, // },
// { // {
// path: "appApiview", // path: "appApiview",
// name: "appApiView", // name: "appApiView",
// hidden: "true", // hidden: "true",
// component: () => import("@/views/applicationList/apiList/apiView"), // component: () => import("@/views/applicationList/apiList/apiView"),
// meta: { // meta: {
// title: "API查看" // title: "API查看"
// } // }
// }, // },
// ] // ]
// }, // },
// { // {
// path: "applicationAdd", // path: "applicationAdd",
// component: () => import("@/views/applicationList/masterDataAdd.vue"), // component: () => import("@/views/applicationList/masterDataAdd.vue"),
// name: "applicationAdd", // name: "applicationAdd",
// hidden: true, // hidden: true,
// meta: { // meta: {
// title: "应用新增", // title: "应用新增",
// hidden: true, // hidden: true,
// }, // },
// }, // },
// ], // ],
// }, // },
// { // {
// path: "/scene", // path: "/scene",
// component: Layout, // component: Layout,

3
src/store/modules/settings.js
View File

@ -1,6 +1,6 @@
import defaultSettings from '@/settings' import defaultSettings from '@/settings'
const { sideTheme, showSettings,conciseMenu, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings const { sideTheme, showSettings,conciseMenu, topNav, tagsView, showTagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings
const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || '' const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
const state = { const state = {
title: '', title: '',
@ -12,6 +12,7 @@ const state = {
tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView, tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader, fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo, sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
showTagsView: storageSetting.showTagsView === undefined ? showTagsView : storageSetting.showTagsView,
dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle
} }
const mutations = { const mutations = {

6
src/store/modules/tagsView.js
View File

@ -95,6 +95,9 @@ const mutations = {
return false return false
}) })
}, },
CLEAR_VISTEDVIEWS:state =>{
state.visitedViews = []
},
DEL_LEFT_VIEWS: (state, view) => { DEL_LEFT_VIEWS: (state, view) => {
const index = state.visitedViews.findIndex(v => v.path === view.path) const index = state.visitedViews.findIndex(v => v.path === view.path)
if (index === -1) { if (index === -1) {
@ -122,6 +125,9 @@ const actions = {
dispatch('addVisitedView', view) dispatch('addVisitedView', view)
dispatch('addCachedView', view) dispatch('addCachedView', view)
}, },
clearVisted({commit}){
commit('CLEAR_VISTEDVIEWS')
},
addIframeView({ commit }, view) { addIframeView({ commit }, view) {
commit('ADD_IFRAME_VIEW', view) commit('ADD_IFRAME_VIEW', view)
}, },

375
src/views/applicationList/applicationAdd.vue
View File

@ -3,14 +3,21 @@
<div class="wrap"> <div class="wrap">
<div class="btn"> <div class="btn">
<div class="chunk"> <div class="chunk">
<el-button icon="el-icon-back" @click=" <el-button
icon="el-icon-back"
@click="
$router.replace({ path: '/applicationList/applicationListAdmin' }) $router.replace({ path: '/applicationList/applicationListAdmin' })
" "
>返回 >返回
</el-button> </el-button>
</div> </div>
<div class="chunk"> <div class="chunk">
<el-button icon="el-icon-first-aid-kit" type="primary" @click="saveHandle">保存</el-button> <el-button
icon="el-icon-first-aid-kit"
type="primary"
@click="saveHandle"
>保存</el-button
>
</div> </div>
</div> </div>
<div class="main"> <div class="main">
@ -19,14 +26,27 @@
<div class="uploadMain"> <div class="uploadMain">
<div class="left"> <div class="left">
<div class="title">应用logo</div> <div class="title">应用logo</div>
<el-upload class="avatar-uploader" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" <el-upload
:on-preview="handlePreview" :on-progress="handleProgress" :before-upload="beforeUpload" class="avatar-uploader"
list-type="picture" :limit="1" :disabled="lookFlag" :on-success="handleAvatarSuccess" ref="upload"
:show-file-list="false" action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-progress="handleProgress"
:before-upload="beforeUpload"
list-type="picture"
:limit="1"
:disabled="lookFlag"
:on-success="handleAvatarSuccess"
:show-file-list="false"
> >
<div class="line"> <div class="line">
<div class="left"> <div class="left">
<img v-if="imgUrl" :src="imgUrl" class="avatar" @error="handleImageError"> <img
v-if="imgUrl"
:src="imgUrl"
class="avatar"
@error="handleImageError"
/>
<!-- <el-image style="width: 64px; height: 64px" :src="iconBase64" fit="cover" alt="点击上传"> <!-- <el-image style="width: 64px; height: 64px" :src="iconBase64" fit="cover" alt="点击上传">
<template v-slot:error> <template v-slot:error>
<div style="line-height: 64px; font-size: 12px"> <div style="line-height: 64px; font-size: 12px">
@ -36,8 +56,16 @@
</el-image> --> </el-image> -->
</div> </div>
<div class="right" v-if="!lookFlag"> <div class="right" v-if="!lookFlag">
<el-button size="small" type="primary" v-if="!loading">点击上传</el-button> <el-button size="small" type="primary" v-if="!loading"
<el-button size="small" type="primary" :loading="loading" v-else>上传中</el-button> >点击上传</el-button
>
<el-button
size="small"
type="primary"
:loading="loading"
v-else
>上传中</el-button
>
</div> </div>
</div> </div>
<div slot="tip" class="el-upload__tip" v-if="!lookFlag"> <div slot="tip" class="el-upload__tip" v-if="!lookFlag">
@ -46,16 +74,28 @@
</el-upload> </el-upload>
</div> </div>
<div class="right"> <div class="right">
<el-switch active-value="1" inactive-value="2" v-model="appStatus" active-text="启用" active-color="#60c958" <el-switch
:disabled="lookFlag" active-value="1"
inactive-value="2"
v-model="appStatus"
active-text="启用"
active-color="#60c958"
:disabled="lookFlag"
> >
</el-switch> </el-switch>
</div> </div>
</div> </div>
</div> </div>
<div class="form"> <div class="form">
<baseNewForm ref="mainForm" :spanNumber="24" :isFunBtn="false" :lookFlag="lookFlag" :formRule="!lookFlag" <baseNewForm
:formRow="formRow" :ruleForm="ruleForm" @onSubmit="onSubmit" ref="mainForm"
:spanNumber="24"
:isFunBtn="false"
:lookFlag="lookFlag"
:formRule="!lookFlag"
:formRow="formRow"
:ruleForm="ruleForm"
@onSubmit="onSubmit"
></baseNewForm> ></baseNewForm>
</div> </div>
</div> </div>
@ -63,59 +103,57 @@
</template> </template>
<script> <script>
import { getApiModuleApi } from '@/api/apiChunks/index.js' import { getApiModuleApi } from "@/api/apiChunks/index.js";
import { uploadLogo } from '@/api/apis/logo.js' import { uploadLogo } from "@/api/apis/logo.js";
import configData from './configData' import configData from "./configData";
import baseNewForm from '@/views/intergrationTask/compoments/baseNewForm' import baseNewForm from "@/views/intergrationTask/compoments/baseNewForm";
import request from '@/utils/request' import request from "@/utils/request";
export default { export default {
data() { data() {
return { return {
fileList: [], fileList: [],
iconBase64: '', iconBase64: "",
imgUrl: '', imgUrl: "",
loading: false, loading: false,
appLogo: '', appLogo: "",
appStatus: 1, appStatus: 1,
ruleForm: { ruleForm: {
accessMode: [] accessMode: [],
}, },
lookFlag: false, lookFlag: false,
formRow: configData.addForm formRow: configData.addForm,
} };
}, },
methods: { methods: {
handleImageError(row) { handleImageError(row) {
this.imgUrl = require('./images/1.png') this.imgUrl = require("./images/1.png");
}, },
// 文件上传相关时间 // 文件上传相关时间
handleProgress(file, fileList) { handleProgress(file, fileList) {
this.loading = true this.loading = true;
this.handleAvatarSuccess({}, fileList).then(res => { this.handleAvatarSuccess({}, fileList).then((res) => {
this.loading = false this.loading = false;
}) });
},
handlePreview(file) {
}, },
handlePreview(file) {},
async handleAvatarSuccess(res, file) { async handleAvatarSuccess(res, file) {
console.log(res, file, '123') file.raw.type;
file.raw.type
if ( if (
file.raw.type.split('/')[1] != 'jpeg' && file.raw.type.split("/")[1] != "jpeg" &&
file.raw.type.split('/')[1] != 'png' file.raw.type.split("/")[1] != "png"
) { ) {
return false return false;
} else if (file.size >= 2000000) { } else if (file.size >= 2000000) {
return false return false;
} }
this.$refs.upload.clearFiles()//清理文件上传状态 this.$refs.upload.clearFiles(); //清理文件上传状态
this.imgUrl = URL.createObjectURL(file.raw) this.imgUrl = URL.createObjectURL(file.raw);
let formData = new FormData() let formData = new FormData();
formData.append('file', file.raw) formData.append("file", file.raw);
formData.append('fileFlag', true) formData.append("fileFlag", true);
formData.append('businessType', 'application') formData.append("businessType", "application");
// console.log(formData); // console.log(formData);
// const el = await uploadLogo(formData) // const el = await uploadLogo(formData)
// if (el.status === '200') { // if (el.status === '200') {
@ -123,37 +161,36 @@ export default {
// this.appLogo = el.id // this.appLogo = el.id
// } // }
return request({ return request({
url: '/kangarooDataCenterV3/entranceController/fileUpload', url: "/kangarooDataCenterV3/entranceController/fileUpload",
method: 'post', method: "post",
data: formData data: formData,
}).then((res) => { }).then((res) => {
if (res.status === '200') { if (res.status === "200") {
this.$vmNews('上传成功', 'success') this.$vmNews("上传成功", "success");
this.appLogo = res.attribute.id this.appLogo = res.attribute.id;
} }
return true return true;
// this.loading = false // this.loading = false
}) });
} },
,
async beforeUpload(file) { async beforeUpload(file) {
if ( if (
file.type.split('/')[1] != 'jpeg' && file.type.split("/")[1] != "jpeg" &&
file.type.split('/')[1] != 'png' file.type.split("/")[1] != "png"
) { ) {
this.$message({ this.$message({
type: 'warning', type: "warning",
message: '只能上传jpg/png文件' message: "只能上传jpg/png文件",
}) });
return false return false;
} else { } else {
if (file.size >= 2000000) { if (file.size >= 2000000) {
this.$message({ this.$message({
type: 'warning', type: "warning",
message: '文件大小不超过2MB' message: "文件大小不超过2MB",
}) });
return false return false;
} }
// let reader = new FileReader(); // let reader = new FileReader();
// let that = this; // let that = this;
@ -165,129 +202,155 @@ export default {
// reader.readAsDataURL(file); // reader.readAsDataURL(file);
// return false; // return false;
} }
} },
,
// 保存按钮、列表验证 // 保存按钮、列表验证
saveHandle() { saveHandle() {
this.$refs.mainForm.submitForm() this.$refs.mainForm.submitForm();
},
}
,
//验证成功准备上传 //验证成功准备上传
async onSubmit() { async onSubmit() {
if (this.$route.query.flag === 'add') { if (this.$route.query.flag === "add") {
const res = await getApiModuleApi({ const res = await getApiModuleApi(
tl: 'sysApplicationService', {
as: 'application', tl: "sysApplicationService",
dj: 'saveApp' as: "application",
}, { ...this.ruleForm, appStatus: this.appStatus, appLogo: this.appLogo }) dj: "saveApp",
if (res.status === '200') { },
this.$vmNews('保存成功', 'success') { ...this.ruleForm, appStatus: this.appStatus, appLogo: this.appLogo }
this.$router.replace({ path: '/applicationList/applicationListAdmin' }) );
if (res.status === "200") {
this.$vmNews("保存成功", "success");
this.$router.replace({
path: "/applicationList/applicationListAdmin",
});
} }
} else if (this.$route.query.flag === 'copy') { } else if (this.$route.query.flag === "copy") {
const res = await getApiModuleApi({ const res = await getApiModuleApi(
tl: 'sysApplicationService', {
as: 'application', tl: "sysApplicationService",
dj: 'copyApp' as: "application",
}, { ...this.ruleForm, appStatus: this.appStatus, appLogo: this.appLogo }) dj: "copyApp",
if (res.status === '200') { },
this.$vmNews('复制成功', 'success') { ...this.ruleForm, appStatus: this.appStatus, appLogo: this.appLogo }
this.$router.replace({ path: '/applicationList/applicationListAdmin' }) );
if (res.status === "200") {
this.$vmNews("复制成功", "success");
this.$router.replace({
path: "/applicationList/applicationListAdmin",
});
} }
} else if (this.$route.query.flag === 'setting') { } else if (this.$route.query.flag === "setting") {
const res = await getApiModuleApi({ const res = await getApiModuleApi(
tl: 'sysApplicationService', {
as: 'application', tl: "sysApplicationService",
dj: 'updateApp' as: "application",
}, { updateType: 1, ...this.ruleForm, appStatus: this.appStatus, appLogo: this.appLogo }) dj: "updateApp",
if (res.status === '200') { },
this.$vmNews('保存成功', 'success') {
this.initEditFormData() updateType: 1,
this.getLogoUrl() ...this.ruleForm,
this.$emit('saveSuccess') appStatus: this.appStatus,
appLogo: this.appLogo,
}
);
if (res.status === "200") {
this.$vmNews("保存成功", "success");
this.initEditFormData();
this.getLogoUrl();
this.$emit("saveSuccess");
} }
} }
} },
,
// 获取下拉数据 // 获取下拉数据
async initSelectOptions() { async initSelectOptions() {
let params = { let params = {
tab_name: 'sys_product', tab_name: "sys_product",
column_name: 'classify' column_name: "classify",
} };
const res = await getApiModuleApi({ const res = await getApiModuleApi(
tl: 'generalServiceImpl', {
as: 'dictionaryshop', tl: "generalServiceImpl",
dj: 'selectDictionaryshop' as: "dictionaryshop",
}, params) dj: "selectDictionaryshop",
this.formRow[3].elCol[0].options = [] },
params
);
this.formRow[3].elCol[0].options = [];
res.attribute.forEach((item) => { res.attribute.forEach((item) => {
this.formRow[3].elCol[0].options.push({ this.formRow[3].elCol[0].options.push({
label: item.column_content, label: item.column_content,
id: item.column_value id: item.column_value,
}) });
}) });
} },
,
// 复制-获取表单数据 // 复制-获取表单数据
async initCopyFormData() { async initCopyFormData() {
const res = await getApiModuleApi({ const res = await getApiModuleApi(
tl: 'sysApplicationService', {
as: 'application', tl: "sysApplicationService",
dj: 'getCopyApp' as: "application",
}, { id: this.$route.query.id }) dj: "getCopyApp",
this.ruleForm = res.attribute },
this.ruleForm.accessMode = JSON.parse(res.attribute.accessMode) { id: this.$route.query.id }
this.appStatus = res.attribute.appStatus );
} this.ruleForm = res.attribute;
, this.ruleForm.accessMode = JSON.parse(res.attribute.accessMode);
this.appStatus = res.attribute.appStatus;
},
async initEditFormData() { async initEditFormData() {
const res = await getApiModuleApi({ const res = await getApiModuleApi(
tl: 'sysApplicationService', {
as: 'application', tl: "sysApplicationService",
dj: 'getApp' as: "application",
}, { id: this.$route.query.id }) dj: "getApp",
this.ruleForm = res.attribute },
this.ruleForm.accessMode = JSON.parse(res.attribute.accessMode) { id: this.$route.query.id }
this.appStatus = res.attribute.appStatus );
} this.ruleForm = res.attribute;
, this.ruleForm.accessMode = JSON.parse(res.attribute.accessMode);
this.appStatus = res.attribute.appStatus;
},
//下载logo //下载logo
getLogoUrl() { getLogoUrl() {
let id = this.appLogo ? this.appLogo : this.$route.query.appLogo let id = this.appLogo ? this.appLogo : this.$route.query.appLogo;
return request({ return request({
url: '/kangarooDataCenterV3/entranceController/fileDownloadNew?id=' + id, url:
method: 'get', "/kangarooDataCenterV3/entranceController/fileDownloadNew?id=" + id,
responseType: 'arraybuffer' method: "get",
responseType: "arraybuffer",
}).then((res) => { }).then((res) => {
this.imgUrl = this.imgUrl =
'data:image/png/jpg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), '')) "data:image/png/jpg;base64," +
}) btoa(
} new Uint8Array(res).reduce(
(data, byte) => data + String.fromCharCode(byte),
""
)
);
});
},
}, },
components: { components: {
baseNewForm baseNewForm,
}, },
created() { created() {
// 请求下拉options // 请求下拉options
this.initSelectOptions() this.initSelectOptions();
// 判断是什么类型进来的 // 判断是什么类型进来的
if (this.$route.query.flag === 'setting') { if (this.$route.query.flag === "setting") {
this.formRow[0].elCol[0].disabled = false this.formRow[0].elCol[0].disabled = false;
} else { } else {
this.formRow[0].elCol[0].disabled = false this.formRow[0].elCol[0].disabled = false;
} }
if (this.$route.query.flag === 'copy') { if (this.$route.query.flag === "copy") {
this.initCopyFormData() this.initCopyFormData();
this.getLogoUrl() this.getLogoUrl();
} else if (this.$route.query.flag === 'setting') { } else if (this.$route.query.flag === "setting") {
this.initEditFormData() this.initEditFormData();
this.getLogoUrl() this.getLogoUrl();
} }
} },
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

157
src/views/newVersionView/Workbench/index.vue Normal file
View File

@ -0,0 +1,157 @@
<template>
<div class="workbench">
<h3 class="workbench-title">全部应用</h3>
<el-tabs>
<el-tab-pane
v-for="(item, index) in routeData"
:key="index"
:label="item.meta ? item.meta.title : ''"
v-if="item.meta"
>
<div class="menuContainer">
<div
v-for="(list, listIndex) in item.children"
class="menuBox"
@click="goRoute(item, list)"
v-if="!item.meta.hidden"
>
<img
class="menuIcon"
:src="list.meta.icon"
v-if="list.meta.icon"
/>
<img class="menuIcon" src="../logo1.png" v-else />
<p class="menuContent">{{ list.meta.title }}</p>
</div>
</div></el-tab-pane
>
</el-tabs>
</div>
</template>
<script>
import { TagsView } from "@/layout/components";
import request from "@/utils/request";
export default {
name: "Workbench",
components: {
TagsView,
},
created() {
this.$store.dispatch("settings/changeSetting", {
key: "showTagsView",
value: true,
});
},
data() {
return {
routeData: [], //菜单数据
};
},
mounted() {
let routeList = localStorage.getItem("routeList")
? JSON.parse(localStorage.getItem("routeList"))
: [];
this.routeData = this.OrganizeMenus(routeList);
},
methods: {
goRoute(val, item) {
let routeData = this.$router.resolve({
path: item.path,
name: item.name,
});
window.open(routeData.href, "_self");
},
// 处理icon
handlerIcon(item) {
let str = "";
if (item.includes("?")) {
str = item.split("?")[1];
} else {
str = item;
}
return str;
},
handlerIconColor(item) {
let color = "";
if (item.includes("?")) {
color = item.split("?")[0];
} else {
color = "#1478F6";
}
return color;
},
// 整理菜单数据
OrganizeMenus(data) {
let arrData = [];
data.forEach((bItem) => {
if (bItem.children && bItem.children.length > 0) {
bItem.children.forEach((cItem) => {
if (cItem.meta.icon) {
this.getLogoUrl(cItem.meta.icon).then((res) => {
let imageUrl =
"data:image/png/jpg;base64," +
btoa(
new Uint8Array(res).reduce(
(data, byte) => data + String.fromCharCode(byte),
""
)
);
this.$set(cItem.meta, 'icon', imageUrl)
});
}
});
}
arrData.push(bItem);
});
return arrData;
},
getLogoUrl(id) {
return request({
url:
"/kangarooDataCenterV3/entranceController/fileDownloadNew?id=" + id,
method: "get",
responseType: "arraybuffer",
}).then((res) => {
return res;
});
},
},
};
</script>
<style lang="scss" scoped>
.workbench {
background: #fff;
// padding: 15px;
margin: 0 10px;
}
.workbench-title {
margin: 15px 0;
}
.menuContainer {
display: flex;
flex-wrap: wrap;
}
.menuBox {
display: flex;
align-items: center;
background: #fafafa;
padding: 10px 15px;
border-radius: 10px;
width: 200px;
margin: 10px;
cursor: pointer;
}
.menuIcon {
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 12px;
margin-right: 10px;
}
.menuContent {
font-size: 14px;
color: #333333;
}
</style>

BIN
src/views/newVersionView/logo1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

130
src/views/systemMaintenance/menuManagement/configData.js
View File

@ -1,32 +1,43 @@
// 详情页面结构JSON // 详情页面结构JSON
const formRow = [{ const formRow = [
elCol: [{ {
label: '父节点', elCol: [
prop: 'parentMenuName', {
tag: 'elDialog', label: '菜单图标',
span:24, prop: 'menuIcon',
tag: 'elSlot',
slotName:"menuIcon"
},
]
},
{
elCol: [{
label: '父节点',
prop: 'parentMenuName',
tag: 'elDialog',
span: 24,
},
// {
// label: '菜单顺序',
// prop: 'mc_Sort',
// tag: 'elInput',
// rules:true
// // type:'number'
// },
]
}, },
// {
// label: '菜单顺序',
// prop: 'mc_Sort',
// tag: 'elInput',
// rules:true
// // type:'number'
// },
]
},
{ {
elCol: [{ elCol: [{
label: '菜单名称', label: '菜单名称',
prop: 'menuName', prop: 'menuName',
tag: 'elInput', tag: 'elInput',
}, },
{ {
label: '菜单英文名称', label: '菜单英文名称',
prop: 'menuEnglishName', prop: 'menuEnglishName',
tag: 'elInput', tag: 'elInput',
}, },
] ]
}, },
{ {
@ -34,16 +45,7 @@ const formRow = [{
label: '菜单路径', label: '菜单路径',
prop: 'route', prop: 'route',
tag: 'elInput', tag: 'elInput',
}, },{
{
label: '菜单图标',
prop: 'menuIcon',
tag: 'elInput',
},
]
},
{
elCol: [{
label: '页面路径', label: '页面路径',
prop: 'menuPage', prop: 'menuPage',
tag: 'elInput', tag: 'elInput',
@ -59,7 +61,7 @@ const formRow = [{
options: [{ options: [{
label: '菜单', label: '菜单',
value: "1" value: "1"
},{ }, {
label: '弹窗', label: '弹窗',
value: "2" value: "2"
} }
@ -72,7 +74,7 @@ const formRow = [{
options: [{ options: [{
label: '是', label: '是',
value: "0" value: "0"
},{ }, {
label: '否', label: '否',
value: "1", value: "1",
} }
@ -114,38 +116,38 @@ const roleOptions = [{
label: '超级管理员', label: '超级管理员',
value: 1 value: 1
}, },
{ {
label: '业务员', label: '业务员',
value: 2 value: 2
}, },
{ {
label: '管理员', label: '管理员',
value: 3 value: 3
}, },
{ {
label: '开发成员', label: '开发成员',
value: 4 value: 4
}, },
{ {
label: '项目经理', label: '项目经理',
value: 5 value: 5
}, },
{ {
label: '实施人员', label: '实施人员',
value: 6 value: 6
}, },
{ {
label: '财务', label: '财务',
value: 7 value: 7
}, },
{ {
label: '总经理', label: '总经理',
value: 8 value: 8
}, },
{ {
label: '副总', label: '副总',
value: 9 value: 9
} }
] ]
const rules = { const rules = {
villageId: [{ villageId: [{

423
src/views/systemMaintenance/menuManagement/index.vue
View File

@ -3,52 +3,99 @@
* @date: 2022-09-09 * @date: 2022-09-09
--> -->
<template> <template>
<div style="display: flex;height: 100%;"> <div style="display: flex; height: 100%">
<base-layout title="菜单管理" :operateButtonSwitch="false" style="width: 260px;"> <base-layout
<div slot="main" flex style="height:100%"> title="菜单管理"
<div style="width: 100%;border-right:1px solid #dfe6ec;height:100%;overflow: auto;"> :operateButtonSwitch="false"
<base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false" :expandAll="true" style="width: 260px"
:showCheckbox="false" :menuData="menuData" @handleNodeClick="formClick" >
<div slot="main" flex style="height: 100%">
<div
style="
width: 100%;
border-right: 1px solid #dfe6ec;
height: 100%;
overflow: auto;
"
>
<base-tree
ref="baseTree"
:isCenter="false"
:isSaveBtn="false"
:Allshow="false"
:expandAll="true"
:showCheckbox="false"
:menuData="menuData"
@handleNodeClick="formClick"
> >
</base-tree> </base-tree>
</div> </div>
</div> </div>
</base-layout> </base-layout>
<base-layout title="菜单树编辑区" :defaultButtonSwitch="false" :buttonList="buttonList" @onFuncBtn="getFuncBtn" <base-layout
style="flex:1;" title="菜单树编辑区"
:defaultButtonSwitch="false"
:buttonList="buttonList"
@onFuncBtn="getFuncBtn"
style="flex: 1"
> >
<div slot="main" style="padding:0 12px;height:300px"> <div slot="main" style="padding: 0 12px; height: 300px">
<base-form ref="customForm" :formRow="formRow" :isFunBtn="isFunBtn" @elDialogClick="elDialogClick" <base-form
:formdata="ruleForm" @onSubmit="getSubmit" ref="customForm"
:formRow="formRow"
:isFunBtn="isFunBtn"
@elDialogClick="elDialogClick"
:formdata="ruleForm"
@onSubmit="getSubmit"
@resetForm="handleReset"
> >
<template v-slot:menuIcon="row">
<div>
<el-upload
class="avatar-uploader"
action="#"
ref="upload"
:show-file-list="false"
:on-progress="handleProgress"
:before-upload="beforeUpload"
:on-success="handleAvatarSuccess"
:limit="1"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</template>
</base-form> </base-form>
</div> </div>
</base-layout> </base-layout>
<base-organization ref="baseOrganization" :menuData="menuData" @handleConfirmClick="handleConfirmClick"> <base-organization
ref="baseOrganization"
:menuData="menuData"
@handleConfirmClick="handleConfirmClick"
>
</base-organization> </base-organization>
</div> </div>
</template> </template>
<script> <script>
import router from '@/router' import router from "@/router";
import baseLayout from '@/components/base/baseNewLayout' import baseLayout from "@/components/base/baseNewLayout";
import baseForm from '@/components/base/baseNewForm/index.vue' import baseForm from "@/components/base/baseNewForm/index.vue";
import baseTree from '@/components/base/BaseMenuTree/index.vue' import baseTree from "@/components/base/BaseMenuTree/index.vue";
import baseTreeclick from '@/components/base/baseTreeClick/index.vue' import baseTreeclick from "@/components/base/baseTreeClick/index.vue";
import baseDialog from '@/components/base/BaseNewDialog' import baseDialog from "@/components/base/BaseNewDialog";
import baseOrganization from './baseOrganization' import baseOrganization from "./baseOrganization";
import configData from './configData' import configData from "./configData";
import { import { GetOrganTree } from "@/api/apis/organization";
GetOrganTree
} from '@/api/apis/organization'
import { import {
GetMenuTree, GetMenuTree,
GetBillData, GetBillData,
MenuSaveData, MenuSaveData,
MenuDelData MenuDelData,
} from '@/api/apis/menuManage' } from "@/api/apis/menuManage";
import { authApi } from '@/api/apis/auth' import { authApi } from "@/api/apis/auth";
import request from "@/utils/request";
export default { export default {
components: { components: {
@ -57,177 +104,307 @@ export default {
baseForm, baseForm,
baseTreeclick, baseTreeclick,
baseDialog, baseDialog,
baseOrganization baseOrganization,
}, },
data() { data() {
return { return {
// treeHight: '350', // treeHight: '350',
dialogVisible: false, dialogVisible: false,
dialogTitle: '选择上级菜单', dialogTitle: "选择上级菜单",
leftTitle: '菜单树', leftTitle: "菜单树",
rightTitle: '菜单及上级菜单', rightTitle: "菜单及上级菜单",
mainColor: '#f8f8f8 ', mainColor: "#f8f8f8 ",
buttonList: [{ buttonList: [
menuName: '新增根节点',
icon: 'el-icon-plus'
},
{ {
menuName: '新增子节点', menuName: "新增根节点",
icon: 'el-icon-plus' icon: "el-icon-plus",
}, },
{ {
menuName: '删除节点', menuName: "新增子节点",
icon: 'el-icon-delete', icon: "el-icon-plus",
type: 'danger' },
} {
menuName: "删除节点",
icon: "el-icon-delete",
type: "danger",
},
], ],
delId: '', delId: "",
menuData: [], menuData: [],
ruleForm: {}, ruleForm: {},
rules: {}, rules: {},
formRow: configData.formRow, formRow: configData.formRow,
isFunBtn: true, isFunBtn: true,
clickTree: {}//当前点击树 clickTree: {}, //当前点击树
imageUrl: "",
} };
}, },
mounted() { mounted() {
// this.$refs.baseTree.getMenuList() // this.$refs.baseTree.getMenuList()
this.initPage() this.initPage();
}, },
methods: { methods: {
// 文件上传相关时间
handleProgress(file, fileList) {
this.handleAvatarSuccess({}, fileList);
},
handlePreview(file) {},
async handleAvatarSuccess(res, file) {
file.raw.type;
if (file.raw.type.indexOf("image/") == -1) {
return false;
} else if (file.raw.size >= 20000000) {
return false;
}
this.$refs.upload.clearFiles(); //清理文件上传状态
this.imageUrl = URL.createObjectURL(file.raw);
let formData = new FormData();
formData.append("file", file.raw);
formData.append("fileFlag", true);
formData.append("businessType", "application");
return request({
url: "/kangarooDataCenterV3/entranceController/fileUpload",
method: "post",
data: formData,
}).then((resData) => {
if (resData.status && resData.status === "200") {
this.$vmNews("上传成功", "success");
this.$refs.customForm.getField("menuIcon", resData.attribute.id);
}
return true;
});
},
async beforeUpload(file) {
if (file.type.indexOf("image/") == -1) {
this.$message({
type: "warning",
message: "只能上传jpg/png文件",
});
return false;
} else {
if (file.size >= 20000000) {
this.$message({
type: "warning",
message: "文件大小不超过20MB",
});
return false;
}
}
},
//页面初始化 //页面初始化
initPage() { initPage() {
// this.delId = "" // this.delId = ""
this.getMenuData() this.getMenuData();
}, },
// 获得树状图 // 获得树状图
async getMenuData() { async getMenuData() {
let res = await authApi('sysMenuConfigService', '', 'queryEntityTree', '', {}) let res = await authApi(
"sysMenuConfigService",
"",
"queryEntityTree",
"",
{}
);
if (res.status == 200) { if (res.status == 200) {
let arr = res.attribute[0] let arr = res.attribute[0];
this.menuData = res.attribute this.menuData = res.attribute;
} }
}, },
// 操作按钮事件 // 操作按钮事件
getFuncBtn(btnEven) { getFuncBtn(btnEven) {
if (btnEven.menuName == "新增根节点") {
if (btnEven.menuName == '新增根节点') {
let newRuleForm = { let newRuleForm = {
parentMenuName: '', parentMenuName: "",
parentMenuId: 0 parentMenuId: 0,
} };
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.customForm.resetForm('ruleForm') this.$refs.customForm.resetForm("ruleForm");
this.$refs.customForm.choiceAssignment(newRuleForm) this.imageUrl = "";
}) this.$refs.customForm.choiceAssignment(newRuleForm);
});
} }
if (btnEven.menuName == '新增子节点') { if (btnEven.menuName == "新增子节点") {
if (!this.delId) { if (!this.delId) {
this.$vmNews('请选择处理的信息') this.$vmNews("请选择处理的信息");
return return;
} }
let newRuleForm = { let newRuleForm = {
parentMenuName: this.ruleForm.menuName, parentMenuName: this.ruleForm.menuName,
parentMenuId: this.ruleForm.id parentMenuId: this.ruleForm.id,
} };
console.log(newRuleForm, 'newRuleForm')
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.customForm.resetForm('ruleForm') this.$refs.customForm.resetForm("ruleForm");
this.$refs.customForm.choiceAssignment(newRuleForm) this.imageUrl = "";
}) this.$refs.customForm.choiceAssignment(newRuleForm);
});
} }
if (btnEven.menuName == '删除节点') { if (btnEven.menuName == "删除节点") {
if(this.clickTree.formId){ if (this.clickTree.formId) {
this.$vmNews("系统自动生成的菜单不允许删除") this.$vmNews("系统自动生成的菜单不允许删除");
return return;
} }
this.$confirm('确认删除该菜单吗?', '提示', { this.$confirm("确认删除该菜单吗?", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => {
this.menuDel()
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
}) })
.then(() => {
this.menuDel();
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
} }
}, },
async menuDel() { async menuDel() {
let params = { let params = {
id: this.delId id: this.delId,
} };
let res = await authApi('sysMenuConfigService', '', 'deleteEntity', '', params) let res = await authApi(
"sysMenuConfigService",
"",
"deleteEntity",
"",
params
);
if (res.status == 200) { if (res.status == 200) {
this.$vmNews('删除成功', 'success') this.$vmNews("删除成功", "success");
this.ruleForm = {} this.ruleForm = {};
this.getMenuData() this.imageUrl = "";
this.$refs.customForm.choiceAssignment({}) this.getMenuData();
this.$refs.customForm.choiceAssignment({});
} }
}, },
// 获取详情 // 获取详情
async getDetail(id) { async getDetail(id) {
let params = { let params = {
id: id id: id,
} };
let res = await authApi('sysMenuConfigService', '', 'getEntity', '', params) let res = await authApi(
"sysMenuConfigService",
"",
"getEntity",
"",
params
);
if (res.status == 200) { if (res.status == 200) {
console.log(res, 'res') console.log(res, "res");
this.ruleForm = res.attribute this.ruleForm = res.attribute;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.customForm.choiceAssignment(res.attribute) this.$refs.customForm.choiceAssignment(res.attribute);
}) let menuIcon = res.attribute.menuIcon ? res.attribute.menuIcon : "";
if (menuIcon) {
this.getLogoUrl(menuIcon);
}
});
} }
}, },
//下载logo
getLogoUrl(id) {
return request({
url:
"/kangarooDataCenterV3/entranceController/fileDownloadNew?id=" + id,
method: "get",
responseType: "arraybuffer",
}).then((res) => {
this.imageUrl =
"data:image/png/jpg;base64," +
btoa(
new Uint8Array(res).reduce(
(data, byte) => data + String.fromCharCode(byte),
""
)
);
});
},
async getSubmit(data) { async getSubmit(data) {
let params = { let params = {
...data ...data,
} };
let res let res;
if (params.id) { if (params.id) {
res = await authApi('sysMenuConfigService', '', 'updateEntity', '', params) res = await authApi(
"sysMenuConfigService",
"",
"updateEntity",
"",
params
);
} else { } else {
res = await authApi('sysMenuConfigService', '', 'saveEntity', '', params) res = await authApi(
"sysMenuConfigService",
"",
"saveEntity",
"",
params
);
} }
if (res.status == 200) { if (res.status == 200) {
this.$vmNews('保存成功', 'success') this.$vmNews("保存成功", "success");
this.ruleForm = {} this.ruleForm = {};
this.getMenuData() this.imageUrl = "";
this.$refs.customForm.choiceAssignment({}) this.getMenuData();
this.$store.dispatch('GenerateRoutes').then(accessRoutes => { this.$refs.customForm.choiceAssignment({});
this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
// 根据roles权限生成可访问的路由表 // 根据roles权限生成可访问的路由表
for (let i = 0, length = accessRoutes.length; i < length; i += 1) { for (let i = 0, length = accessRoutes.length; i < length; i += 1) {
const element = accessRoutes[i] const element = accessRoutes[i];
router.addRoutes(accessRoutes) // 动态添加可访问路由表 router.addRoutes(accessRoutes); // 动态添加可访问路由表
} }
localStorage.setItem('routeList', JSON.stringify(accessRoutes)) localStorage.setItem("routeList", JSON.stringify(accessRoutes));
}) });
} }
}, },
//父节点点击事件 //父节点点击事件
elDialogClick(row, index, indexRow) { elDialogClick(row, index, indexRow) {
this.$refs.baseOrganization.dialogVisible = true this.$refs.baseOrganization.dialogVisible = true;
}, },
handleConfirmClick(val) { handleConfirmClick(val) {
console.log(val, 'val') this.ruleForm.parentMenuName = val.label;
this.ruleForm.parentMenuName = val.label this.ruleForm.parentMenuId = val.id;
this.ruleForm.parentMenuId = val.id this.$refs.customForm.incomingParameters(this.ruleForm);
this.$refs.customForm.incomingParameters(this.ruleForm) this.$refs.baseOrganization.dialogVisible = false;
this.$refs.baseOrganization.dialogVisible = false
}, },
formClick(data) { formClick(data) {
this.delId = data.id this.delId = data.id;
this.clickTree = data this.clickTree = data;
this.getDetail(data.id) this.getDetail(data.id);
} },
} handleReset() {
} this.imageUrl = "";
},
},
};
</script> </script>
<style scoped> <style scoped>
::v-deep .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
border-color: #409eff;
}
::v-deep .avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
::v-deep .avatar {
width: 50px;
height: 50px;
display: block;
}
.organizationBody { .organizationBody {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;