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

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.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;

880
public/iconLibrary/demo_index.html
View File

@ -54,6 +54,234 @@
<div class="content unicode" style="display: block;">
<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">
<span class="icon iconfont">&#xe642;</span>
<div class="name">菜单/列表</div>
@ -192,9 +420,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1696663877393') format('woff2'),
url('iconfont.woff?t=1696663877393') format('woff'),
url('iconfont.ttf?t=1696663877393') format('truetype');
src: url('iconfont.woff2?t=1719799268815') format('woff2'),
url('iconfont.woff?t=1719799268815') format('woff'),
url('iconfont.ttf?t=1719799268815') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -220,6 +448,348 @@
<div class="content font-class">
<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">
<span class="icon iconfont icon-caidan"></span>
<div class="name">
@ -427,6 +997,310 @@
<div class="content symbol">
<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">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-caidan"></use>

152
public/iconLibrary/iconfont.css
View File

@ -13,6 +13,158 @@
-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 {
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-",
"description": "",
"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",
"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.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;

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

@ -54,6 +54,234 @@
<div class="content unicode" style="display: block;">
<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">
<span class="icon iconfont">&#xe642;</span>
<div class="name">菜单/列表</div>
@ -192,9 +420,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1696663877393') format('woff2'),
url('iconfont.woff?t=1696663877393') format('woff'),
url('iconfont.ttf?t=1696663877393') format('truetype');
src: url('iconfont.woff2?t=1719799268815') format('woff2'),
url('iconfont.woff?t=1719799268815') format('woff'),
url('iconfont.ttf?t=1719799268815') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -220,6 +448,348 @@
<div class="content font-class">
<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">
<span class="icon iconfont icon-caidan"></span>
<div class="name">
@ -427,6 +997,310 @@
<div class="content symbol">
<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">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-caidan"></use>

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

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

(image error) Size: 1.8 KiB

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

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

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 Sidebar } from './Sidebar/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"
: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 class="newVersionSystem">
<new-menu class="newMenuWidth" />
<div class="newMenuAppMain">
<tags-view v-if="showTagsView" />
<app-main />
</div>
<app-main />
<right-panel>
<settings />
</right-panel>
</div>
</div>
</template>
@ -38,7 +18,14 @@
import router from "@/router";
import RightPanel from "@/components/RightPanel";
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 { mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
@ -52,6 +39,7 @@ export default {
Settings,
Sidebar,
TagsView,
NewMenu,
notFound,
},
mixins: [ResizeMixin],
@ -64,6 +52,7 @@ export default {
notFound: (state) => state.app.notFound,
conciseMenu: (state) => state.settings.conciseMenu,
needTagsView: (state) => state.settings.tagsView,
showTagsView: (state) => state.settings.showTagsView,
fixedHeader: (state) => state.settings.fixedHeader,
}),
classObj() {
@ -84,50 +73,12 @@ export default {
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>
@ -141,14 +92,25 @@ export default {
position: relative;
height: 100%;
width: 100%;
padding: 0 8px;
background: #fafafa;
// padding: 0 8px;
background: #ffffff;
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
.newVersionSystem {
display: flex;
height: 100%;
width: 100%;
}
.newMenuWidth {
width: 114px;
}
.newMenuAppMain {
width: calc(100% - 114px);
overflow: hidden;
}
.drawer-bg {
background: #000;
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')
}]
},
{
path: '/apiLogs',
component: () => import('@/views/apiLogs/index.vue'),
hidden: true
},
{
path: '/login',
component: () => import('@/views/login'),
hidden: true
},
{
path: '/test',
component: () => import('@/views/test'),
hidden: true
},
{
path: '/register',
component: () => import('@/views/register/index'),
hidden: true
},
{
path: '/systemInit',
// name: "databaseIndex",
component: () => import('@/views/systemInit/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/error/404'),
hidden: true
},
{
path: '/401',
component: () => import('@/views/error/401'),
hidden: true
},
{
path: '/apiLogs',
component: () => import('@/views/apiLogs/index.vue'),
hidden: true
},
{
path: '/login',
component: () => import('@/views/login'),
hidden: true
},
{
path: '/test',
component: () => import('@/views/test'),
hidden: true
},
{
path: '/register',
component: () => import('@/views/register/index'),
hidden: true
},
{
path: '/systemInit',
// name: "databaseIndex",
component: () => import('@/views/systemInit/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/error/404'),
hidden: true
},
{
path: '/401',
component: () => import('@/views/error/401'),
hidden: true
},
// {
// path: "/contractAssistant",
// component: () => import("@/views/contractAssistant"),
// hidden: true,
// },
{
path: '',
component: Layout,
redirect: 'index',
children: [{
path: 'index',
component: () => import('@/views/index_v2'),
name: 'Index',
meta: {
title: '首页',
icon: 'dashboard',
affix: true
}
},
{
path: 'notFound',
component: () => import('@/views/notFound'),
name: 'notFound',
meta: {
title: '404',
icon: 'dashboard'
// affix: true,
}
}
]
{
path: '',
component: Layout,
redirect: 'index',
children: [{
path: 'index',
component: () => import('@/views/index_v2'),
name: 'Index',
meta: {
title: '首页',
icon: 'dashboard',
affix: true
}
},
{
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: 'notFound',
component: () => import('@/views/notFound'),
name: 'notFound',
meta: {
title: '404',
icon: 'dashboard'
// affix: true,
}
},{
path: "Workbench",
component: () => import("@/views/newVersionView/Workbench/index"),
name: "Workbench",
meta: {
title: "工作台",
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",
// component: Layout,
// name: "integrationOption",
// redirect: "dataOption",
// meta: {
// title: "主数据中心",
// icon: "documentation",
// },
// children: [
// {
// path: "dataOption",
// component: () => import("@/views/integrationOption/index.vue"),
// name: "dataOption",
// meta: {
// title: "主数据中心",
// },
// },
// ],
// },
// {
// path: "/applicationList",
// component: Layout,
// name: "applicationList",
// redirect: "applicationListAdmin",
// meta: {
// title: "应用列表",
// icon: "el-icon-s-home",
// },
// children: [
// {
// path: "applicationListAdmin",
// component: () => import("@/views/applicationList/index.vue"),
// name: "applicationListAdmin",
// meta: {
// title: "应用列表",
// },
// },
// {
// path: "settingMenu",
// component: () => import("@/views/applicationList/settingMenu.vue"),
// name: "settingMenu",
// redirect: 'settingMenu/applicationEdit',
// hidden: true,
// meta: {
// title: "应用设置",
// hidden: true,
// },
// children: [
// {
// path: "applicationEdit",
// component: () => import("@/views/applicationList/masterDataAdd.vue"),
// name: "applicationEdit",
// hidden: true,
// meta: {
// title: "应用编辑",
// hidden: true,
// },
// },
// {
// path: "exploit",
// component: () => import("@/views/applicationList/exploit"),
// name: "exploit",
// hidden: true,
// meta: {
// title: "开发管理",
// hidden: true,
// },
// },
// {
// path: "authority",
// component: () => import("@/views/applicationList/authority"),
// name: "authority",
// hidden: true,
// meta: {
// title: "权限管理",
// hidden: true,
//
// },
// },
// {
// path: "appApiAdmin",
// name: "appApiAdmin",
// component: () => import("@/views/applicationList/apiList/apiAdmin"),
// meta: {
// title: "API管理",
// hidden: true
// }
// },
// {
// path: "inserterAdmin",
// name: "inserterAdmin",
// component: () => import("@/views/applicationList/inserterAdmin"),
// meta: {
// title: "插件管理",
// hidden: true,
// }
// },
// {
// path: "appApiadd",
// name: "appApiAdd",
// redirect: "",
// hidden: "true",
// component: () => import("@/views/applicationList/apiList/apiAdd"),
// meta: {
// title: "API新增",
//
// },
// },
// {
// path: "appApiview",
// name: "appApiView",
// hidden: "true",
// component: () => import("@/views/applicationList/apiList/apiView"),
// meta: {
// title: "API查看"
// }
// },
// ]
// },
// {
// path: "applicationAdd",
// component: () => import("@/views/applicationList/masterDataAdd.vue"),
// name: "applicationAdd",
// hidden: true,
// meta: {
// title: "应用新增",
// hidden: true,
// },
// },
// ],
// },
}
}]
},
// {
// path: "/integrationOption",
// component: Layout,
// name: "integrationOption",
// redirect: "dataOption",
// meta: {
// title: "主数据中心",
// icon: "documentation",
// },
// children: [
// {
// path: "dataOption",
// component: () => import("@/views/integrationOption/index.vue"),
// name: "dataOption",
// meta: {
// title: "主数据中心",
// },
// },
// ],
// },
// {
// path: "/applicationList",
// component: Layout,
// name: "applicationList",
// redirect: "applicationListAdmin",
// meta: {
// title: "应用列表",
// icon: "el-icon-s-home",
// },
// children: [
// {
// path: "applicationListAdmin",
// component: () => import("@/views/applicationList/index.vue"),
// name: "applicationListAdmin",
// meta: {
// title: "应用列表",
// },
// },
// {
// path: "settingMenu",
// component: () => import("@/views/applicationList/settingMenu.vue"),
// name: "settingMenu",
// redirect: 'settingMenu/applicationEdit',
// hidden: true,
// meta: {
// title: "应用设置",
// hidden: true,
// },
// children: [
// {
// path: "applicationEdit",
// component: () => import("@/views/applicationList/masterDataAdd.vue"),
// name: "applicationEdit",
// hidden: true,
// meta: {
// title: "应用编辑",
// hidden: true,
// },
// },
// {
// path: "exploit",
// component: () => import("@/views/applicationList/exploit"),
// name: "exploit",
// hidden: true,
// meta: {
// title: "开发管理",
// hidden: true,
// },
// },
// {
// path: "authority",
// component: () => import("@/views/applicationList/authority"),
// name: "authority",
// hidden: true,
// meta: {
// title: "权限管理",
// hidden: true,
//
// },
// },
// {
// path: "appApiAdmin",
// name: "appApiAdmin",
// component: () => import("@/views/applicationList/apiList/apiAdmin"),
// meta: {
// title: "API管理",
// hidden: true
// }
// },
// {
// path: "inserterAdmin",
// name: "inserterAdmin",
// component: () => import("@/views/applicationList/inserterAdmin"),
// meta: {
// title: "插件管理",
// hidden: true,
// }
// },
// {
// path: "appApiadd",
// name: "appApiAdd",
// redirect: "",
// hidden: "true",
// component: () => import("@/views/applicationList/apiList/apiAdd"),
// meta: {
// title: "API新增",
//
// },
// },
// {
// path: "appApiview",
// name: "appApiView",
// hidden: "true",
// component: () => import("@/views/applicationList/apiList/apiView"),
// meta: {
// title: "API查看"
// }
// },
// ]
// },
// {
// path: "applicationAdd",
// component: () => import("@/views/applicationList/masterDataAdd.vue"),
// name: "applicationAdd",
// hidden: true,
// meta: {
// title: "应用新增",
// hidden: true,
// },
// },
// ],
// },
// {
// path: "/scene",
// component: Layout,

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

@ -1,6 +1,6 @@
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 state = {
title: '',
@ -12,6 +12,7 @@ const state = {
tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
showTagsView: storageSetting.showTagsView === undefined ? showTagsView : storageSetting.showTagsView,
dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle
}
const mutations = {

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

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

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

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

(image error) Size: 20 KiB

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

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

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

@ -3,52 +3,99 @@
* @date: 2022-09-09
-->
<template>
<div style="display: flex;height: 100%;">
<base-layout title="菜单管理" :operateButtonSwitch="false" style="width: 260px;">
<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"
<div style="display: flex; height: 100%">
<base-layout
title="菜单管理"
:operateButtonSwitch="false"
style="width: 260px"
>
<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>
</div>
</div>
</base-layout>
<base-layout title="菜单树编辑区" :defaultButtonSwitch="false" :buttonList="buttonList" @onFuncBtn="getFuncBtn"
style="flex:1;"
<base-layout
title="菜单树编辑区"
:defaultButtonSwitch="false"
:buttonList="buttonList"
@onFuncBtn="getFuncBtn"
style="flex: 1"
>
<div slot="main" style="padding:0 12px;height:300px">
<base-form ref="customForm" :formRow="formRow" :isFunBtn="isFunBtn" @elDialogClick="elDialogClick"
:formdata="ruleForm" @onSubmit="getSubmit"
<div slot="main" style="padding: 0 12px; height: 300px">
<base-form
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>
</div>
</base-layout>
<base-organization ref="baseOrganization" :menuData="menuData" @handleConfirmClick="handleConfirmClick">
<base-organization
ref="baseOrganization"
:menuData="menuData"
@handleConfirmClick="handleConfirmClick"
>
</base-organization>
</div>
</template>
<script>
import router from '@/router'
import baseLayout from '@/components/base/baseNewLayout'
import baseForm from '@/components/base/baseNewForm/index.vue'
import baseTree from '@/components/base/BaseMenuTree/index.vue'
import baseTreeclick from '@/components/base/baseTreeClick/index.vue'
import baseDialog from '@/components/base/BaseNewDialog'
import baseOrganization from './baseOrganization'
import configData from './configData'
import {
GetOrganTree
} from '@/api/apis/organization'
import router from "@/router";
import baseLayout from "@/components/base/baseNewLayout";
import baseForm from "@/components/base/baseNewForm/index.vue";
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import baseTreeclick from "@/components/base/baseTreeClick/index.vue";
import baseDialog from "@/components/base/BaseNewDialog";
import baseOrganization from "./baseOrganization";
import configData from "./configData";
import { GetOrganTree } from "@/api/apis/organization";
import {
GetMenuTree,
GetBillData,
MenuSaveData,
MenuDelData
} from '@/api/apis/menuManage'
import { authApi } from '@/api/apis/auth'
MenuDelData,
} from "@/api/apis/menuManage";
import { authApi } from "@/api/apis/auth";
import request from "@/utils/request";
export default {
components: {
@ -57,177 +104,307 @@ export default {
baseForm,
baseTreeclick,
baseDialog,
baseOrganization
baseOrganization,
},
data() {
return {
// treeHight: '350',
dialogVisible: false,
dialogTitle: '选择上级菜单',
leftTitle: '菜单树',
rightTitle: '菜单及上级菜单',
mainColor: '#f8f8f8 ',
buttonList: [{
menuName: '新增根节点',
icon: 'el-icon-plus'
},
dialogTitle: "选择上级菜单",
leftTitle: "菜单树",
rightTitle: "菜单及上级菜单",
mainColor: "#f8f8f8 ",
buttonList: [
{
menuName: '新增子节点',
icon: 'el-icon-plus'
menuName: "新增根节点",
icon: "el-icon-plus",
},
{
menuName: '删除节点',
icon: 'el-icon-delete',
type: 'danger'
}
menuName: "新增子节点",
icon: "el-icon-plus",
},
{
menuName: "删除节点",
icon: "el-icon-delete",
type: "danger",
},
],
delId: '',
delId: "",
menuData: [],
ruleForm: {},
rules: {},
formRow: configData.formRow,
isFunBtn: true,
clickTree: {}//当前点击树
}
clickTree: {}, //当前点击树
imageUrl: "",
};
},
mounted() {
// this.$refs.baseTree.getMenuList()
this.initPage()
this.initPage();
},
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() {
// this.delId = ""
this.getMenuData()
this.getMenuData();
},
// 获得树状图
async getMenuData() {
let res = await authApi('sysMenuConfigService', '', 'queryEntityTree', '', {})
let res = await authApi(
"sysMenuConfigService",
"",
"queryEntityTree",
"",
{}
);
if (res.status == 200) {
let arr = res.attribute[0]
this.menuData = res.attribute
let arr = res.attribute[0];
this.menuData = res.attribute;
}
},
// 操作按钮事件
getFuncBtn(btnEven) {
if (btnEven.menuName == '新增根节点') {
if (btnEven.menuName == "新增根节点") {
let newRuleForm = {
parentMenuName: '',
parentMenuId: 0
}
parentMenuName: "",
parentMenuId: 0,
};
this.$nextTick(() => {
this.$refs.customForm.resetForm('ruleForm')
this.$refs.customForm.choiceAssignment(newRuleForm)
})
this.$refs.customForm.resetForm("ruleForm");
this.imageUrl = "";
this.$refs.customForm.choiceAssignment(newRuleForm);
});
}
if (btnEven.menuName == '新增子节点') {
if (btnEven.menuName == "新增子节点") {
if (!this.delId) {
this.$vmNews('请选择处理的信息')
return
this.$vmNews("请选择处理的信息");
return;
}
let newRuleForm = {
parentMenuName: this.ruleForm.menuName,
parentMenuId: this.ruleForm.id
}
console.log(newRuleForm, 'newRuleForm')
parentMenuId: this.ruleForm.id,
};
this.$nextTick(() => {
this.$refs.customForm.resetForm('ruleForm')
this.$refs.customForm.choiceAssignment(newRuleForm)
})
this.$refs.customForm.resetForm("ruleForm");
this.imageUrl = "";
this.$refs.customForm.choiceAssignment(newRuleForm);
});
}
if (btnEven.menuName == '删除节点') {
if(this.clickTree.formId){
this.$vmNews("系统自动生成的菜单不允许删除")
return
if (btnEven.menuName == "删除节点") {
if (this.clickTree.formId) {
this.$vmNews("系统自动生成的菜单不允许删除");
return;
}
this.$confirm('确认删除该菜单吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.menuDel()
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
this.$confirm("确认删除该菜单吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.menuDel();
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
}
},
async menuDel() {
let params = {
id: this.delId
}
let res = await authApi('sysMenuConfigService', '', 'deleteEntity', '', params)
id: this.delId,
};
let res = await authApi(
"sysMenuConfigService",
"",
"deleteEntity",
"",
params
);
if (res.status == 200) {
this.$vmNews('删除成功', 'success')
this.ruleForm = {}
this.getMenuData()
this.$refs.customForm.choiceAssignment({})
this.$vmNews("删除成功", "success");
this.ruleForm = {};
this.imageUrl = "";
this.getMenuData();
this.$refs.customForm.choiceAssignment({});
}
},
// 获取详情
async getDetail(id) {
let params = {
id: id
}
let res = await authApi('sysMenuConfigService', '', 'getEntity', '', params)
id: id,
};
let res = await authApi(
"sysMenuConfigService",
"",
"getEntity",
"",
params
);
if (res.status == 200) {
console.log(res, 'res')
this.ruleForm = res.attribute
console.log(res, "res");
this.ruleForm = res.attribute;
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) {
let params = {
...data
}
let res
...data,
};
let res;
if (params.id) {
res = await authApi('sysMenuConfigService', '', 'updateEntity', '', params)
res = await authApi(
"sysMenuConfigService",
"",
"updateEntity",
"",
params
);
} else {
res = await authApi('sysMenuConfigService', '', 'saveEntity', '', params)
res = await authApi(
"sysMenuConfigService",
"",
"saveEntity",
"",
params
);
}
if (res.status == 200) {
this.$vmNews('保存成功', 'success')
this.ruleForm = {}
this.getMenuData()
this.$refs.customForm.choiceAssignment({})
this.$store.dispatch('GenerateRoutes').then(accessRoutes => {
this.$vmNews("保存成功", "success");
this.ruleForm = {};
this.imageUrl = "";
this.getMenuData();
this.$refs.customForm.choiceAssignment({});
this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
// 根据roles权限生成可访问的路由表
for (let i = 0, length = accessRoutes.length; i < length; i += 1) {
const element = accessRoutes[i]
router.addRoutes(accessRoutes) // 动态添加可访问路由表
const element = accessRoutes[i];
router.addRoutes(accessRoutes); // 动态添加可访问路由表
}
localStorage.setItem('routeList', JSON.stringify(accessRoutes))
})
localStorage.setItem("routeList", JSON.stringify(accessRoutes));
});
}
},
//父节点点击事件
elDialogClick(row, index, indexRow) {
this.$refs.baseOrganization.dialogVisible = true
this.$refs.baseOrganization.dialogVisible = true;
},
handleConfirmClick(val) {
console.log(val, 'val')
this.ruleForm.parentMenuName = val.label
this.ruleForm.parentMenuId = val.id
this.$refs.customForm.incomingParameters(this.ruleForm)
this.$refs.baseOrganization.dialogVisible = false
this.ruleForm.parentMenuName = val.label;
this.ruleForm.parentMenuId = val.id;
this.$refs.customForm.incomingParameters(this.ruleForm);
this.$refs.baseOrganization.dialogVisible = false;
},
formClick(data) {
this.delId = data.id
this.clickTree = data
this.getDetail(data.id)
}
}
}
this.delId = data.id;
this.clickTree = data;
this.getDetail(data.id);
},
handleReset() {
this.imageUrl = "";
},
},
};
</script>
<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 {
display: flex;
justify-content: space-evenly;