8.16

public/iconfont/demo.css

+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    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;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

public/iconfont/demo_index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4655522" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61e;</span>
+                <div class="name">收起</div>
+                <div class="code-name">&amp;#xe61e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe659;</span>
+                <div class="name">通用-表格展开图标</div>
+                <div class="code-name">&amp;#xe659;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1723777503795') format('woff2'),
+       url('iconfont.woff?t=1723777503795') format('woff'),
+       url('iconfont.ttf?t=1723777503795') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shouqi"></span>
+            <div class="name">
+              收起
+            </div>
+            <div class="code-name">.icon-shouqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tongyong-biaogezhankaitubiao"></span>
+            <div class="name">
+              通用-表格展开图标
+            </div>
+            <div class="code-name">.icon-tongyong-biaogezhankaitubiao
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <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-shouqi"></use>
+                </svg>
+                <div class="name">收起</div>
+                <div class="code-name">#icon-shouqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tongyong-biaogezhankaitubiao"></use>
+                </svg>
+                <div class="name">通用-表格展开图标</div>
+                <div class="code-name">#icon-tongyong-biaogezhankaitubiao</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

public/iconfont/iconfont.css

+@font-face {
+  font-family: "iconfont"; /* Project id 4655522 */
+  src: url('iconfont.woff2?t=1723777503795') format('woff2'),
+       url('iconfont.woff?t=1723777503795') format('woff'),
+       url('iconfont.ttf?t=1723777503795') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-shouqi:before {
+  content: "\e61e";
+}
+
+.icon-tongyong-biaogezhankaitubiao:before {
+  content: "\e659";
+}
+

public/iconfont/iconfont.js

+window._iconfont_svg_string_4655522='<svg><symbol id="icon-shouqi" viewBox="0 0 1024 1024"><path d="M70.4 153.6c0-45.9264 37.2736-83.2 83.2-83.2h716.8c45.9264 0 83.2 37.2736 83.2 83.2v716.8c0 45.9264-37.2736 83.2-83.2 83.2H153.6A83.2 83.2 0 0 1 70.4 870.4V153.6z m64 0v716.8c0 10.5984 8.6016 19.2 19.2 19.2h716.8a19.2 19.2 0 0 0 19.2-19.2V153.6A19.2 19.2 0 0 0 870.4 134.4H153.6A19.2 19.2 0 0 0 134.4 153.6z" fill="#5A5A68" ></path><path d="M307.2 544a32 32 0 1 1 0-64h409.6a32 32 0 1 1 0 64H307.2z" fill="#5A5A68" ></path></symbol><symbol id="icon-tongyong-biaogezhankaitubiao" viewBox="0 0 1024 1024"><path d="M173.111351 185.869838v656.467027h656.467027V185.869838H173.111351z m0-55.351352h656.467027a55.351351 55.351351 0 0 1 55.351352 55.351352v656.467027a55.351351 55.351351 0 0 1-55.351352 55.351351H173.111351a55.351351 55.351351 0 0 1-55.351351-55.351351V185.869838a55.351351 55.351351 0 0 1 55.351351-55.351352zM465.228108 488.005189v-128.63654a27.675676 27.675676 0 1 1 55.351351 0v128.63654h140.952217c11.347027 0 20.563027 12.509405 20.563027 27.924757 0 15.415351-9.188324 27.897081-20.563027 27.897081H520.579459v130.214054a27.675676 27.675676 0 1 1-55.351351 0V543.827027h-132.511135c-11.347027 0-20.535351-12.48173-20.535351-27.897081 0-15.415351 9.188324-27.924757 20.535351-27.924757h132.511135z" fill="#333333" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,i,a,c,d,s=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4655522,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?s(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(a=o,c=n.document,d=!1,r(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,l())})}function l(){d||(d=!0,a())}function r(){try{c.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window);
\ No newline at end of file

public/iconfont/iconfont.json

+{
+  "id": "4655522",
+  "name": "sass",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "4942664",
+      "name": "收起",
+      "font_class": "shouqi",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "6651985",
+      "name": "通用-表格展开图标",
+      "font_class": "tongyong-biaogezhankaitubiao",
+      "unicode": "e659",
+      "unicode_decimal": 58969
+    }
+  ]
+}

public/index.html

@@ -7,6 +7,9 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.png">
     <link rel="icon" href="<%= BASE_URL %>favicon.png">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <title><%= htmlWebpackPlugin.options.title %></title>
     <script src="<%= BASE_URL %>config.js"></script>
     <script src="<%= BASE_URL %>config.js"></script>
+    <!-- <link rel="stylesheet" href="./iconfont/iconfont.css"> -->
+    <link rel="stylesheet" href="/iconfont/iconfont.css">
+  <!-- <script src="./iconfont/iconfont.js"></script> -->
   </head>
   </head>
   <body>
   <body>
     <noscript>
     <noscript>

src/assets/css/root.css

+:root {
+  --title-color: #444444;
+  --background-image: "url('/images/background/bg-1.png')";
+  --border-color: #fff;
+  --background-color: rgba(255, 255, 255, 1);
+  --subtitle: #fff;
+  --content: #333;
+  --label-color: #999;
+  --value-color: #333;
+  --header-background-color: #202125;
+  --header-font-color: #fff;
+  --tag-background-color: rgba(0, 0, 0, 0);
+}

src/common/components/base/tableView.vue

@@ -34,11 +34,11 @@ export default {
     },
     },
     treeConfig: {
     treeConfig: {
       type: Object,
       type: Object,
-      default: () => {},
+      default: () => { },
     },
     },
     expandConfig: {
     expandConfig: {
       type: Object,
       type: Object,
-      default: () => {},
+      default: () => { },
     },
     },
     stripe: {
     stripe: {
       type: Boolean,
       type: Boolean,
@@ -74,23 +74,23 @@ export default {
     },
     },
     footerMethod: {
     footerMethod: {
       type: Function,
       type: Function,
-      default: () => {},
+      default: () => { },
     },
     },
     cellClick: {
     cellClick: {
       type: Function,
       type: Function,
-      default: () => {},
+      default: () => { },
     },
     },
     footerSpanMethod: {
     footerSpanMethod: {
       type: Function,
       type: Function,
-      default: () => {},
+      default: () => { },
     },
     },
     rowClassName: {
     rowClassName: {
       type: Function,
       type: Function,
-      default: () => {},
+      default: () => { },
     },
     },
     cellStyle: {
     cellStyle: {
       type: Function,
       type: Function,
-      default: () => {},
+      default: () => { },
     },
     },
     highIds: {
     highIds: {
       // 高亮显示行
       // 高亮显示行
@@ -103,11 +103,11 @@ export default {
     },
     },
     spanMethod: {
     spanMethod: {
       type: Function,
       type: Function,
-      default: () => {},
+      default: () => { },
     },
     },
     checkboxConfig: {
     checkboxConfig: {
       type: Object,
       type: Object,
-      default: () => {},
+      default: () => { },
     },
     },
     customRightMenu: {
     customRightMenu: {
       type: Object,
       type: Object,
@@ -281,6 +281,9 @@ export default {
     reloadData() {
     reloadData() {
       this.$refs.vxetable.reloadData(this.sourceData)
       this.$refs.vxetable.reloadData(this.sourceData)
     },
     },
+    clearSelectionBox() {
+      this.$refs.vxetable.clearCheckboxRow()//  清空表格左侧的选择框数据
+    },
     toggleRowExpand(obj) {
     toggleRowExpand(obj) {
       this.$emit('toggleRowExpand', obj)
       this.$emit('toggleRowExpand', obj)
     },
     },
@@ -674,6 +677,7 @@ export default {
 .scroller {
 .scroller {
   height: 100%;
   height: 100%;
 }
 }
+
 .my-table {
 .my-table {
   vertical-align: middle;
   vertical-align: middle;
 }
 }
@@ -684,20 +688,22 @@ export default {
 .my-table >>> .vxe-footer--column.col--ellipsis {
 .my-table >>> .vxe-footer--column.col--ellipsis {
   height: 30px;
   height: 30px;
 } */
 } */
-.my-table >>> .vxe-checkbox--label {
+.my-table>>>.vxe-checkbox--label {
   padding-left: 0;
   padding-left: 0;
 }
 }
-.my-table >>> .vxe-header--column.tablecolgroup,
-.my-table
-  >>> .vxe-header--column.col--ellipsis.tablecolgroup {
+
+.my-table>>>.vxe-header--column.tablecolgroup,
+.my-table>>>.vxe-header--column.col--ellipsis.tablecolgroup {
   height: 22px !important;
   height: 22px !important;
 }
 }
-.my-table >>> .vxe-cell {
+
+.my-table>>>.vxe-cell {
   /* max-height: 30px !important; */
   /* max-height: 30px !important; */
   padding-left: 5px;
   padding-left: 5px;
   padding-right: 5px;
   padding-right: 5px;
 }
 }
-.my-table >>> .green {
+
+.my-table>>>.green {
   background: green;
   background: green;
   color: #fff;
   color: #fff;
 }
 }

src/components/base/image-list.vue

+<!--
+ * @Description: 描述
+ * @Author: chd
+ * @Date: 2021-06-08 11:22:13
+ * @LastEditors: chd
+ * @LastEditTime: 2021-07-03 09:59:53
+-->
+<template>
+  <div class="img_main" :style="!isFloat ? 'display:block' : ''">
+    <draggable v-model="list" group="people" @start="drag = true" @end="drag = false"
+      :style="!isFloat ? 'display:block' : ''" :move="onMove" class="draggable">
+      <template v-if="isFloat">
+        <div class="img_img" v-for="(item, i) in fileList" :key="i">
+          <div class="img_item" :class="{ high: highLength > i }">
+            <div class="img">
+              <img width="58" height="58" :src="item.imagePath
+      ? setimgUrl(formatUrl(item.imagePath, 75), {
+        w: width,
+        f: 'png',
+        isCustom: isCustom,
+        hasWidth: hasWidth
+      })
+      : formatUrl(item.filePath, 75)
+    " alt="" />
+              <span style="font-size: 12px">{{ item.id }}</span>
+            </div>
+
+            <div class="btn_wrap">
+              <button type="button" @click="fullscreen(i)">
+                <i class="el-icon-zoom-in"></i>
+              </button>
+              <button class="remove" v-if="isdel" type="button" @click="remove(i)">
+                <i class="el-icon-close"></i>
+              </button>
+            </div>
+            <slot name="mark" :index="i" :item="item"></slot>
+            <template>
+              <span class="select-icon" v-if="item.type" :style="item.type === 'positively'
+      ? 'background-color:#67C23A'
+      : item.type === 'negative'
+        ? 'background-color:#409EFF'
+        : 'background-color:#B79860'
+    ">
+                {{
+    item.type === 'positively'
+      ? 'F'
+      : item.type === 'negative'
+        ? 'B'
+        : 'D'
+  }}
+              </span>
+            </template>
+          </div>
+        </div>
+        <div v-show="add && fileList.length < length" class="img_wrap" @click="upload">
+          <i class="el-icon-plus"></i>
+        </div>
+      </template>
+      <template v-else>
+        <div v-for="(item, i) in fileList" :key="i" class="include-other-info">
+          <div class="img_item" :class="{ high: highLength > i }">
+            <div class="img">
+              <img width="58" height="58" :src="item.imagePath
+      ? setimgUrl(item.imagePath, {
+        w: width,
+        f: 'png',
+        hasWidth: hasWidth,
+        isCustom: isCustom,
+        hasOss: hasOss
+      })
+      : setimgUrl(item.filePath, {
+        w: width,
+        f: 'png',
+        hasWidth: hasWidth,
+        hasOss: hasOss
+      })
+    " alt="" />
+              <span style="font-size: 12px">{{ item.id }}</span>
+            </div>
+
+            <div class="btn_wrap">
+              <button type="button" @click="fullscreen(i)">
+                <i class="el-icon-zoom-in"></i>
+              </button>
+              <button class="remove" v-if="isdel" type="button" @click="remove(i)">
+                <i class="el-icon-close"></i>
+              </button>
+            </div>
+          </div>
+          <slot name="other" :index="i" :item="item"></slot>
+        </div>
+        <div v-show="add && fileList.length < length" class="img_wrap" @click="upload">
+          <i class="el-icon-plus"></i>
+        </div>
+      </template>
+    </draggable>
+    <el-image-viewer class="image_viewer" :initialIndex="initialIndex" :zIndex="9999" :urlList="urlList"
+      v-if="imageVisible" :on-close="closeViewer"></el-image-viewer>
+  </div>
+</template>
+<script>
+import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+import { inputFile } from '../../utils/commonUtil'
+import { array } from 'js-md5'
+
+export default {
+  components: {
+    ElImageViewer
+  },
+  data() {
+    return {
+      imageVisible: false,
+      initialIndex: 0,
+      imageSelcted: []
+    }
+  },
+  model: {
+    prop: 'fileList',
+    event: 'change'
+  },
+  props: {
+    joinBefore: {
+      type: Boolean,
+      default: false
+    },
+    isFormat: {
+      type: Boolean,
+      default: false
+    },
+    showDeleteModel: {
+      type: Boolean,
+      default: true
+    },
+    showWarehouseSku: {
+      type: Boolean,
+      default: false
+    },
+    isFloat: {
+      type: Boolean,
+      default: true
+    },
+    highLength: {
+      type: Number,
+      default: 0
+    },
+
+    isdel: {
+      type: Boolean,
+      default: true
+    },
+    add: {
+      type: Boolean,
+      default: true
+    },
+    length: {
+      type: Number,
+      default: 50
+    },
+    fileList: {
+      type: Array,
+      default: () => []
+    },
+    sortField: {
+      type: String,
+      default: 'position'
+    },
+    uploadApiUrl: {
+      type: String
+    },
+    width: {
+      type: Number,
+      default: 60
+    },
+    sizeLimit: {
+      type: Number,
+      default: 10
+    },
+    businessType: {
+      type: String
+    },
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: array,
+      default: null
+    },
+    isMark: {
+      type: Boolean,
+      default: false
+    },
+    isSize: {
+      type: Boolean,
+      default: false
+    },
+    hasWidth: {
+      type: Boolean,
+      default: false
+    },
+    isCustom: {
+      type: Boolean,
+      default: false
+    },
+    hasOss: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    fileList(newval, oldval) {
+      if (newval && newval !== oldval) {
+        let arr = JSON.parse(JSON.stringify(newval))
+        arr = this.deduplication(arr)
+        if (arr.length !== newval.length) {
+          this.$emit('change', this.deduplication(arr))
+        }
+      }
+    }
+  },
+  computed: {
+    list: {
+      get() {
+        return this.fileList
+      },
+      set(list) {
+        this.$emit('change', this.deduplication(list))
+      }
+    },
+    urlList() {
+      return this.list.map((item) => {
+        return item.imagePath
+          ? this.setimgUrl(item.imagePath, {
+            f: 'png',
+            isCustom: this.isCustom
+          })
+          : item.filePath
+      })
+    }
+  },
+  methods: {
+    formatUrl(url, num) {
+      console.log(url, 111)
+      if (this.isFormat && url) {
+        if (!url.includes('custom.jomalls.com') && url.includes('http')) {
+          return url
+        }
+        const name = url.split('/')
+        const format = name[name.length - 1].split('.')
+        name[name.length - 1] = format[0] + '-' + num + '.' + format[1]
+        console.log(name.join('/'), 'name')
+        return name.join('/')
+      }
+      return url
+    },
+    // 图片禁止拖拽
+    onMove() {
+      if (!this.isFloat) {
+        return false
+      }
+      return true
+    },
+    imageToggleSelect(image) {
+      if (!this.imageSelcted.includes(image)) {
+        this.imageSelcted.push(image)
+      } else {
+        const index = this.imageSelcted.findIndex((e) => e === image)
+        this.imageSelcted.splice(index, 1)
+      }
+    },
+    deduplication(list) {
+      const arr = []
+      for (let i = 0; i < list.length; i++) {
+        const item = list[i]
+        if (
+          item.imagePath
+            ? !arr.includes(item.imagePath)
+            : !arr.includes(item.filePath)
+        ) {
+          list[i][this.sortField] = i + 1
+          item.imagePath ? arr.push(item.imagePath) : arr.push(item.filePath)
+        } else {
+          list.splice(i, 1)
+          i--
+        }
+      }
+      if (this.isMark) {
+        return list.map((ee) => ({ ...ee }))
+      } else {
+        return list
+      }
+    },
+    closeViewer() {
+      this.imageVisible = false
+    },
+    upload() {
+      inputFile({
+        type: this.type,
+        isSize: this.isSize,
+        sizeLimit: this.sizeLimit,
+        multiple: this.multiple,
+        url: this.uploadApiUrl,
+        businessType: this.businessType
+      }).then((res) => {
+        const list = this.fileList
+        if (!this.multiple) {
+          res = [res]
+        }
+        for (const data of res) {
+          if (this.joinBefore) {
+            data.imagePath
+              ? list.unshift({
+                imagePath: data.imagePath
+              })
+              : list.unshift({
+                imagePath: data.filePath
+              })
+          } else {
+            data.imagePath
+              ? list.push({
+                imagePath: data.imagePath,
+                type: this.isMark ? 'positively' : ''
+              })
+              : list.push({
+                imagePath: data.filePath,
+                type: this.isMark ? 'positively' : ''
+              })
+          }
+        }
+        this.$emit('selectImg', this.deduplication(list))
+        this.$emit('change', this.deduplication(list))
+      })
+    },
+    // 图片预览
+    fullscreen(index) {
+      this.imageVisible = true
+      this.initialIndex = index
+    },
+
+    // 图片移除
+    remove(i) {
+      if (this.showDeleteModel) {
+        this.$confirm('确定删除当前图片？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            const [imgobj] = this.fileList.splice(i, 1)
+            this.$emit('remove', imgobj)
+          })
+          .catch(() => { })
+      } else {
+        const [imgobj] = this.fileList.splice(i, 1)
+        this.$emit('remove', imgobj)
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.include-other-info {
+  display: flex;
+  justify-content: space-between;
+}
+
+.draggable {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.img_main {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.img_main::after {
+  clear: both;
+  content: '';
+  display: block;
+}
+
+/* .img_main >>> .draggable::after{
+  clear: both;
+  content: '';
+  display: inline-block;
+} */
+.img_wrap {
+  width: 58px;
+  height: 58px;
+  border: 1px solid #ddd;
+  background: #fff;
+  cursor: pointer;
+  position: relative;
+  margin-bottom: 5px;
+}
+
+.img_wrap i {
+  position: absolute;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.img_img {
+  width: 58px;
+}
+
+.img_item {
+  position: relative;
+  width: 100%;
+  height: auto;
+  text-align: center;
+  border: 1px solid #ddd;
+  margin-bottom: 5px;
+}
+
+.img_img:last-child {
+  margin-right: 6px;
+}
+
+.img_item img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+}
+
+.img_item:hover .btn_wrap {
+  display: flex;
+}
+
+.img_item::v-deep:hover .mark {
+  display: block;
+}
+
+.btn_wrap {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  justify-content: space-around;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.img_item:hover .warehouseSku {
+  display: flex;
+}
+
+.warehouseSku {
+  display: none;
+  position: absolute;
+  bottom: -23px;
+  left: -50%;
+  text-align: center;
+  min-width: 240%;
+  max-width: 285%;
+}
+
+.remove {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  width: 16px;
+  height: 16px;
+  transform: scale(0.8);
+  border-radius: 50%;
+  background: #666 !important;
+}
+
+.remove i {
+  display: block;
+  color: #fff;
+}
+
+.btn_wrap button {
+  background: transparent;
+  color: #fff;
+  cursor: pointer;
+}
+
+.image_viewer>>>.el-image-viewer__close {
+  color: #fff;
+}
+
+.high {
+  border-color: blue;
+}
+
+.select-icon {
+  position: absolute;
+  top: -5px;
+  left: -5px;
+  font-size: 12px;
+  background-color: #f56c6c;
+  color: #fff;
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  display: flex;
+  padding: 2px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+}
+
+.img_item::v-deep .mark {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  transform: translateY(-50%);
+}
+
+.img_item::v-deep .mark-item {
+  cursor: pointer;
+  width: 12px;
+  height: 12px;
+  box-sizing: border-box;
+  display: flex;
+  background-color: #fff;
+  align-items: center;
+  padding: 2px;
+  border-radius: 50%;
+  justify-content: center;
+}
+
+.img_item::v-deep .mark-item:not(:last-child) {
+  margin-bottom: 4px;
+}
+
+.img_item::v-deep .mark-item span {
+  font-size: 12px;
+}
+</style>

src/main.js

@@ -10,6 +10,7 @@ import 'xe-utils'
 import 'vxe-table/lib/index.css'
 import 'vxe-table/lib/index.css'
 import './common/style/index.scss'
 import './common/style/index.scss'
 import './assets/css/common.css'
 import './assets/css/common.css'
+import './assets/css/root.css'
 import Directives from './utils/directives'
 import Directives from './utils/directives'
 import { filePath, zImgPath } from './utils/commonUtil'
 import { filePath, zImgPath } from './utils/commonUtil'
 import md5 from 'js-md5'
 import md5 from 'js-md5'

src/utils/api.js

+/*
+ * @Description: 描述
+ * @Author: chd
+ * @Date: 2021-01-18 13:49:02
+ * @LastEditors: chd
+ * @LastEditTime: 2021-04-27 21:40:51
+ */
+
+import { post } from '@/common/api/axios.js'
+
+/**
+ * 上传图片
+ * @param {*} params
+ * @param {String} params.filePath - 文件存储文件夹
+ * @param {object} ...other
+ * @returns Promise
+ */
+export function uploadImg(file, params = {}) {
+  const from = new FormData()
+  from.append('file', file)
+  const { url, ...otherParams } = params
+  for (const key in otherParams) {
+    from.append(key, otherParams[key])
+  }
+  return post(url || 'upload/fileUpload/images', from, {
+    // headers: { 'content-type': 'multipart/form-data' }
+  })
+}
+export function uploadOtherFile(params) {
+  const { url, name, file, ...other } = params
+  const from = new FormData()
+  for (const key in other) {
+    from.append(key, other[key])
+  }
+  from.append(name, file)
+  return post(url, from, {
+    headers: { 'content-type': 'multipart/form-data' }
+  })
+}

src/utils/commonUtil.js

+import Vue from 'vue'
+import { uploadOtherFile, uploadImg } from './api'
 function getStaticPath() {
 function getStaticPath() {
-  if (!/(http|https):\/\/([^/]+)/i.test(window.apiHostSetting.VUE_APP_BASE_URL)) {
+  if (
+    !/(http|https):\/\/([^/]+)/i.test(window.apiHostSetting.VUE_APP_BASE_URL)
+  ) {
     return location.origin + window.apiHostSetting.VUE_APP_BASE_URL
     return location.origin + window.apiHostSetting.VUE_APP_BASE_URL
   }
   }
   return window.apiHostSetting.VUE_APP_BASE_URL
   return window.apiHostSetting.VUE_APP_BASE_URL
@@ -26,3 +30,145 @@ export function delChildren(list, callback, name) {
   recursive(list, callback, 0)
   recursive(list, callback, 0)
   return list
   return list
 }
 }
+const fileTypes = {
+  img: ['jpg', 'jpeg', 'png', 'gif', 'bmp'],
+  excel: ['.xls', '.xlsx'],
+  json: ['json'],
+  txt: ['txt']
+}
+function imgSizeCheck(file, params) {
+  return new Promise((resolve) => {
+    const img = new Image()
+    img.src = URL.createObjectURL(file)
+    img.onload = function () {
+      const width = img.width
+      const height = img.height
+      if (width < params.minWidth || height < params.minHeight) {
+        Vue.prototype.$message.warning(
+          `请上传宽大于${params.minWidth}高大于${params.minHeight}的图片`
+        )
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    }
+  })
+}
+export function inputFile(params = {}) {
+  return new Promise((resolve, reject) => {
+    const input = document.createElement('input')
+    input.style.display = 'none'
+    input.type = 'file'
+    input.multiple = params.multiple || false
+    input.click()
+    input.onchange = async () => {
+      console.log(input.files)
+      const files = input.files
+      const requset = []
+
+      for (const file of files) {
+        // 添加类型后缀校验
+        if (params.limit) {
+          let etc = file.name.split('.')[file.name.split('.').length - 1]
+          etc = etc.toLowerCase()
+          if (!params.limit.includes(etc)) {
+            return Vue.prototype.$message.error(
+              `请上传${params.limit.join(',')}文件`
+            )
+          }
+        }
+        // 大小校验
+        if (params.isSize) {
+          const size = file.size
+          if (!params.sizeLimit) params.sizeLimit = 10
+          if (size / (1024 * 1024) >= params.sizeLimit) {
+            return Vue.prototype.$message.error(
+              `文件大小不能大于等于${params.sizeLimit}M`
+            )
+          }
+        }
+        // 文件类型校验
+        if (!params.noType) {
+          const type = params.type || 'img'
+          let fileType = []
+          if (typeof type === 'string') {
+            fileType = fileTypes[type]
+          } else {
+            fileType = type
+          }
+
+          const typeExp = fileType.map((item) =>
+            typeof item === 'object' ? item : new RegExp(item)
+          )
+          const bool = typeExp.some(
+            (item) => item.test(file.name) || item.test(file.type)
+          )
+          if (!bool) {
+            Vue.prototype.$message({
+              type: 'warning',
+              message: params.message || `请上传${fileType.join('、')}格式文件`
+            })
+            return
+          }
+        }
+        // 宽高校验
+        if (params.minWidth && params.minHeight) {
+          const res = await imgSizeCheck(file, params)
+          if (!res) return
+        }
+        if (
+          params.type === 'excel' ||
+          params.type === 'json' ||
+          params.type === 'txt'
+        ) {
+          const other = params.other || {}
+          if (params.multiple) {
+            requset.push(
+              uploadOtherFile({
+                url: params.url,
+                name: params.name || 'importExcel',
+                file: file,
+                ...other
+              })
+            )
+          } else {
+            uploadOtherFile({
+              url: params.url,
+              name: params.name || 'importExcel',
+              file: file,
+              ...other
+            })
+              .then(resolve)
+              .catch(reject)
+          }
+        } else {
+          const other = params.other || {}
+          if (params.multiple) {
+            requset.push(
+              uploadImg(file, {
+                filePath: params.filePath,
+                isSize: params.isSize,
+                multiple: params.multiple,
+                url: params.url,
+                businessType: params.businessType
+              })
+            )
+          } else {
+            uploadImg(file, {
+              filePath: params.filePath,
+              url: params.url,
+              isSize: params.isSize,
+              businessType: params.businessType,
+              ...other
+            })
+              .then(resolve)
+              .catch(reject)
+          }
+        }
+      }
+      if (requset.length > 0) {
+        Promise.all(requset).then(resolve).catch(reject)
+      }
+    }
+  })
+}

src/views/system/app.vue

@@ -7,14 +7,14 @@
           <div @click.stop="toggleNodeExpanded(node)" class="custom-tree-node-arrow"
           <div @click.stop="toggleNodeExpanded(node)" class="custom-tree-node-arrow"
             :style="{ transform: node.expanded ? 'rotate(90deg)' : '' }"
             :style="{ transform: node.expanded ? 'rotate(90deg)' : '' }"
             v-if="data.children && data.children.length > 0">
             v-if="data.children && data.children.length > 0">
-            <icon :name="node.expanded ? 'xe61e' : 'xe659'"></icon>
+            <!-- <icon :name="node.expanded ? 'xe61e' : 'xe659'"></icon> -->
+            <i :class="node.expanded ? 'iconfont icon-shouqi' : 'iconfont icon-tongyong-biaogezhankaitubiao'"></i>
           </div>
           </div>
           <div class="customize-tree-node__label">
           <div class="customize-tree-node__label">
-            <icon name="wenjianjia"></icon>
             <span>{{ data.categoryName }}</span>
             <span>{{ data.categoryName }}</span>
           </div>
           </div>
           <div class="customize-tree-node__operate">
           <div class="customize-tree-node__operate">
-            <i title="添加分类" class="el-icon-circle-plus" style="color: rgb(140 195 75); margin-right: 5px"
+            <i title="新增分类" class="el-icon-circle-plus" style="color: rgb(140 195 75); margin-right: 5px"
               @click="addFolder(data)"></i>
               @click="addFolder(data)"></i>
             <i title="修改分类" class="el-icon-edit-outline" style="color: #ff9800; margin-right: 5px"
             <i title="修改分类" class="el-icon-edit-outline" style="color: #ff9800; margin-right: 5px"
               @click="editFolder(data)"></i>
               @click="editFolder(data)"></i>
@@ -25,6 +25,9 @@
     </template>
     </template>
     <template #page_right>
     <template #page_right>
       <el-form ref="form" :model="searchForm" size="mini" v-enter-submit="search" @submit.native.prevent :inline="true">
       <el-form ref="form" :model="searchForm" size="mini" v-enter-submit="search" @submit.native.prevent :inline="true">
+        <el-form-item label="创建时间">
+          <choose-time-period v-model="period"></choose-time-period>
+        </el-form-item>
         <el-form-item label="应用名称">
         <el-form-item label="应用名称">
           <el-input style="width: 120px" clearable v-model="searchForm.name" placeholder="应用名称"></el-input>
           <el-input style="width: 120px" clearable v-model="searchForm.name" placeholder="应用名称"></el-input>
         </el-form-item>
         </el-form-item>
@@ -35,149 +38,43 @@
           </el-select>
           </el-select>
         </el-form-item>
         </el-form-item>
         <el-form-item label>
         <el-form-item label>
-          <el-button type="primary" native-type="submit" @click="search()">
+          <el-button type="primary" native-type="submit" @click="search()" icon="el-icon-search">
             查询
             查询
           </el-button>
           </el-button>
         </el-form-item>
         </el-form-item>
         <el-form-item label>
         <el-form-item label>
-          <el-button type="success" @click="editDialog()">新增
-          </el-button>
-        </el-form-item>
-        <el-form-item label>
-          <el-button type="warning" @click="updateDialog()">修改
+          <el-button type="success" @click="addInfo()" icon="el-icon-plus">新增
           </el-button>
           </el-button>
         </el-form-item>
         </el-form-item>
         <el-form-item label>
         <el-form-item label>
-          <el-button type="danger" @click="editDialog()">删除
+          <el-button type="danger" @click="deleteSection()" icon="el-icon-delete">批量删除
           </el-button>
           </el-button>
         </el-form-item>
         </el-form-item>
       </el-form>
       </el-form>
-      <div class="table_wrap" style="padding: 0">
-        <table-view :sourceData="sourceData" :serialNumber="false" :tableColumns="tableColumns"></table-view>
-      </div>
-      <pagination :setValue="setpaginationOptions" :options="paginationOptions" />
-    </template>
-    <!-- <el-dialog :title="isEdit ? '编辑' : '新增'" :close-on-click-modal="false" :visible.sync="editShowing" width="80%">
-      <div class="app-form">
-        <div class="img">
-          <img
-            src="https://img0.baidu.com/it/u=2426072799,1960439289&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=11922fc3c027b8ac0f9bd5ef82d518c7"
-            alt="">
-        </div>
-        <div class="form">
-          <el-form :model="editForm" :inline="true" label-width="80px" :rules="addrules" size="mini" ref="editForm">
-            <el-row :gutter="10">
-              <el-col :span="12">
-                <el-form-item label="应用名称" size="small" prop="title">
-                  <el-input style="width: 100%" v-model="editForm.title"></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="应用分类" size="small" prop="title">
-                  <el-select style="width: 100%;" v-model="searchForm.creator" placeholder="请选择" clearable filterable>
-                    <el-option v-for="user in userList" :key="user.id" :label="user.realName"
-                      :value="user.id"></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="24">
-                <el-form-item label="应用简述" size="small" prop="title">
-                  <el-input style="width: 100%" type="textarea" :rows="4" v-model="editForm.title"></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :span="24">
-                <el-form-item label="应用详情" size="small" prop="title">
-                  <v-editor filename="files" style="width: 100%" v-model="editForm.content" ref="wangeditor"
-                    height="300px" />
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row :gutter="10" style="width: 100%;">
-              <el-col :span="11">
-                <el-form-item label="应用价格" size="small" prop="title">
-                  <el-input style="width: 100%" v-model="editForm.title"></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :span="11">
-                <el-form-item label="应用周期" size="small" prop="title">
-                  <el-select style="width: 100%" v-model="searchForm.creator" placeholder="请选择" clearable filterable>
-                    <el-option v-for="user in userList" :key="user.id" :label="user.realName"
-                      :value="user.id"></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col style="display: flex;margin-top: 3px;" :span="2">
-                <el-button size="mini" type="success" icon="el-icon-plus"></el-button>
-                <el-button style="margin-left: 15px" size="mini" type="danger" icon="el-icon-minus"></el-button>
-              </el-col>
-            </el-row>
-          </el-form>
-        </div>
+      <div class="table_wrap" style="min-height: 50%; max-height: 80%; padding: 0">
+        <table-view :sourceData="sourceData" :serialNumber="true" :tableColumns="tableColumns" ref='multipleTable'
+          @selectionChange='selectionChange' :selection='true'></table-view>
       </div>
       </div>
-
-      <div style="display: flex;justify-content: flex-end" slot="footer">
-        <el-button size="mini" style="width: 80px;" @click="editShowing = false">取 消
-        </el-button>
-        <el-button size="mini" style="margin-left: 20px;width: 80px;" type="primary" @click="submit">确 定
-        </el-button>
+      <div slot="footer" style="display:flex;justify-content: center;">
+        <!-- <pagination :setValue="setpaginationOptions" :options="paginationOptions" /> -->
+        <el-pagination layout="sizes, total, prev, pager, next, jumper" background :total="paginationOptions.total"
+          :page-size="paginationOptions.pageSize" :current-page="paginationOptions.currentPage"
+          @size-change="sizeChange" @current-change="onCurrentChange">
+        </el-pagination>
       </div>
       </div>
-    </el-dialog> -->
-    <!-- 添加、修改应用 -->
+    </template>
+    <!-- 新增、修改应用 -->
     <el-dialog :title="isEdit ? '编辑' : '新增'" :visible.sync="editShowing" width="1000px" :close-on-click-modal="false">
     <el-dialog :title="isEdit ? '编辑' : '新增'" :visible.sync="editShowing" width="1000px" :close-on-click-modal="false">
       <div class="edit-form">
       <div class="edit-form">
         <el-form ref="editForm" :model="editForm" label-width="auto">
         <el-form ref="editForm" :model="editForm" label-width="auto">
           <el-row :gutter="20">
           <el-row :gutter="20">
             <el-col :span="24">
             <el-col :span="24">
-              <el-form-item label="应用分类" prop="folderId" required>
-                <el-cascader style="width: 100%" v-model="editForm.folderId" size="mini" :options="folders" clearable :props="{
-    label: 'categoryName',
-    value: 'id',
-    emitPath: false,
-    checkStrictly: true
-  }" :show-all-levels="false"></el-cascader>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="应用类型" prop="designTeamId" :rules="[{ message: '请选择应用类型', required: true }]">
-                <el-select style="width: 100%" v-model="editForm.designTeamId" size="mini" placeholder="请选择" clearable>
-                  <el-option v-for="item in applicationTypeData" :key="item.id" :label="item.value"
-                    :value="item.id"></el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-
-            <el-col :span="12">
-              <el-form-item label="应用周期" prop="architectId" :rules="[{ required: true, message: '请选择应用周期' }]">
-                <el-select v-model="editForm.architectId" size="mini" filterable clearable style="width: 100%">
-                  <el-option v-for="item in applicationTypeData" :key="item.id" :label="item.value"
-                    :value="item.id"></el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="应用名称" prop="name">
-                <el-input v-model="editForm.name" placeholder="请输入应用名称" maxlength="120" size="mini" clearable show-word-limit />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="应用价格" prop="name">
-                <el-input v-model="editForm.name" placeholder="请输入应用价格" maxlength="120" size="mini" clearable show-word-limit />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="24">
               <el-form-item label="应用图标">
               <el-form-item label="应用图标">
                 <div class="my-flex-1">
                 <div class="my-flex-1">
-                  <upload-images sortField="sort" businessType="design" uploadApiUrl="upload/ossUpload"
-                    :type="limitFileType" :isFloat="false" :width="300" :hasWidth="true" :hasOss="true"
-                    :length="editFlag ? 1 : 50" v-model="editForm.mainImage" @selectImg="selectImg"
-                    >
-                    <template #other="{ index }">
+                  <upload-images sortField="sort" businessType="other" uploadApiUrl="upload/oss" :type="limitFileType"
+                    :isFloat="false" :width="300" :hasWidth="true" :hasOss="true" :length="editFlag ? 1 : 50"
+                    v-model="editForm.icon" @selectImg="selectImg">
+                    <!-- <template #other="{ index }">
                       <div class="other-msg" style="display: flex">
                       <div class="other-msg" style="display: flex">
                         <span class="other-label" style="margin-right: 4px">
                         <span class="other-label" style="margin-right: 4px">
                           图标文件
                           图标文件
@@ -185,7 +82,7 @@
                         <upload-file v-model="productionFile[index]" url="upload/podProductionFileUpload"
                         <upload-file v-model="productionFile[index]" url="upload/podProductionFileUpload"
                           getFilePath="filePath" :max="1" text="上传图标文件" />
                           getFilePath="filePath" :max="1" text="上传图标文件" />
                       </div>
                       </div>
-                    </template>
+                    </template> -->
                   </upload-images>
                   </upload-images>
                 </div>
                 </div>
               </el-form-item>
               </el-form-item>
@@ -193,13 +90,67 @@
           </el-row>
           </el-row>
           <el-row :gutter="20">
           <el-row :gutter="20">
             <el-col :span="24">
             <el-col :span="24">
-              <el-form-item label="应用简述" size="small" prop="title">
-                <el-input style="width: 100%" type="textarea" :rows="4" v-model="editForm.title"></el-input>
+              <el-form-item label="应用分类" prop="categoryId" :rules="[{ message: '请选择应用分类', required: true }]">
+                <el-cascader style="width: 100%" v-model="editForm.categoryId" size="mini" :options="folders" clearable
+                  :props="{
+    label: 'categoryName',
+    value: 'id',
+    emitPath: false,
+    checkStrictly: true
+  }" :show-all-levels="false"></el-cascader>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="11">
+              <el-form-item label="应用名称" prop="name" :rules="[{ message: '请输入应用名称', required: true }]">
+                <el-input v-model="editForm.name" placeholder="请输入应用名称" maxlength="120" size="mini" clearable
+                  show-word-limit />
+              </el-form-item>
+            </el-col>
+            <el-col :span="11">
+              <el-form-item label="应用类型">
+                <el-radio-group v-model="editForm.isCollectFee">
+                  <el-radio :label="false">免费</el-radio>
+                  <el-radio :label="true">收费</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <div v-if="editForm.isCollectFee">
+            <el-row :gutter="20" v-for="(item, index) in editForm.salePriceList" :key="index">
+              <el-col :span="11">
+                <el-form-item label="应用价格">
+                  <el-input v-model="item.price" placeholder="请输入应用价格" maxlength="120" size="mini" clearable
+                    show-word-limit />
+                </el-form-item>
+              </el-col>
+              <el-col :span="10">
+                <el-form-item label="应用周期">
+                  <el-select v-model="item.validDays" size="mini" filterable clearable style="width: 100%">
+                    <el-option v-for="item in applyCycleList" :key="item.value" :label="item.name"
+                      :value="item.value"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col style="display: flex;margin-top: 8px;" :span="3">
+                <el-button size="mini" type="success" icon="el-icon-plus" @click="addDomain"></el-button>
+                <el-button style="margin-left: 15px" size="mini" type="danger" icon="el-icon-minus"
+                  @click.prevent="removeDomain(index)"></el-button>
+              </el-col>
+            </el-row>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="24">
+              <el-form-item label="应用简述" size="small" prop="description"
+                :rules="[{ message: '请输入应用简述', required: true }]">
+                <el-input style="width: 100%" type="textarea" :rows="4" v-model="editForm.description"
+                  placeholder="请输入应用简述"></el-input>
               </el-form-item>
               </el-form-item>
             </el-col>
             </el-col>
             <el-col :span="24">
             <el-col :span="24">
-              <el-form-item label="应用详情" size="small" prop="title">
-                <v-editor filename="files" style="width: 100%" v-model="editForm.content" ref="wangeditor"
+              <el-form-item label="应用详情" size="small">
+                <v-editor filename="files" style="width: 100%" v-model="editForm.details" ref="wangeditor"
                   height="300px" />
                   height="300px" />
               </el-form-item>
               </el-form-item>
             </el-col>
             </el-col>
@@ -207,10 +158,11 @@
         </el-form>
         </el-form>
       </div>
       </div>
       <span slot="footer">
       <span slot="footer">
-        <el-button @click="editShowing = false">取消</el-button>
-        <el-button @click="save" type="primary">确认</el-button>
+        <el-button @click="editShowing = false" size="medium">取消</el-button>
+        <el-button @click="saveApplication" type="primary" size="medium">确认</el-button>
       </span>
       </span>
     </el-dialog>
     </el-dialog>
+    <!-- 暂定 -->
     <el-dialog :visible.sync="releaseVisible" :close-on-click-modal="false" title="发布" width="600px">
     <el-dialog :visible.sync="releaseVisible" :close-on-click-modal="false" title="发布" width="600px">
       <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
       <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
       </el-checkbox>
       </el-checkbox>
@@ -224,8 +176,8 @@
         <el-button size="mini" @click="confirmRelease" type="primary">确认</el-button>
         <el-button size="mini" @click="confirmRelease" type="primary">确认</el-button>
       </span>
       </span>
     </el-dialog>
     </el-dialog>
-    <!-- 添加、修改分类 -->
-    <el-dialog :title="editFolderId ? '编辑分类' : '添加分类'" :visible.sync="folderVisible" :close-on-click-modal="false"
+    <!-- 新增、修改分类 -->
+    <el-dialog :title="editFolderId ? '编辑分类' : '新增分类'" :visible.sync="folderVisible" :close-on-click-modal="false"
       width="600px">
       width="600px">
       <el-form ref="folderForm" :model="folderForm" label-position="top" label-width="80px">
       <el-form ref="folderForm" :model="folderForm" label-position="top" label-width="80px">
         <el-form-item label="名称" prop="folderName" :rules="[{ required: true, message: '请输入分类名称' }]">
         <el-form-item label="名称" prop="folderName" :rules="[{ required: true, message: '请输入分类名称' }]">
@@ -238,39 +190,50 @@
       </span>
       </span>
     </el-dialog>
     </el-dialog>
   </layout>
   </layout>
-
 </template>
 </template>
 <script>
 <script>
 import Editor from '@/components/wangeditor/index.vue'
 import Editor from '@/components/wangeditor/index.vue'
 import tableView from '@/common/components/base/tableView.vue'
 import tableView from '@/common/components/base/tableView.vue'
+import ChooseTimePeriod from '@/components/base/chooseTimePeriod.vue'
+// import ImageView from '@/components/base/ImageView.vue'
+import pagination from '../../mixins/pagination'
 import { get, post } from '@/common/api/axios'
 import { get, post } from '@/common/api/axios'
-import { getSystemUserList } from '@/common/api/system'
-import Icon from '@/components/base/icon.vue'
+import UploadImages from '@/components/base/image-list.vue'
 import layout from '@/components/global/layout.vue'
 import layout from '@/components/global/layout.vue'
 export default {
 export default {
   name: 'system_announce_manage',
   name: 'system_announce_manage',
   components: {
   components: {
+    UploadImages,
     'v-editor': Editor,
     'v-editor': Editor,
     tableView,
     tableView,
-    Icon,
-    layout
+    layout,
+    ChooseTimePeriod,
+    // ImageView
   },
   },
+  mixins: [pagination],
   data() {
   data() {
     return {
     return {
+      period: [],
+      rowNumber: '',
+      selection: [],
       editForm: {
       editForm: {
-        name: '',
-        labelNames: [],
-        architectId: '',
-        originFile: '', // 源文件
-        productionFile: '', // 生产文件
-        mainImage: undefined, // 设计图,
-        designTeamId: '',
-        demandCustomize: 0,
-        redraw: 0,
-        folderId: ''
+        name: '', // 名称
+        icon: undefined, // 图标
+        // productionFile: '', // 生产文件
+        description: '', // 简述
+        details: '', // 详情
+        categoryId: '', // 分类id
+        salePriceList: [
+          {
+            price: '',
+            validDays: '',
+          },
+        ],
+        isCollectFee: true, // 是否收费
       },
       },
+      deepCloneForm: {},
       limitFileType: ['jpg', 'png'],
       limitFileType: ['jpg', 'png'],
-      editFlag: false,
+      editFlag: true,
       productionFile: [],
       productionFile: [],
       defaultProps: {
       defaultProps: {
         children: 'children',
         children: 'children',
@@ -292,77 +255,74 @@ export default {
         id: 2,
         id: 2,
         value: '收费'
         value: '收费'
       }],
       }],
+      categoryId: '',
+      applyCycleList: [],
       checkAll: false,
       checkAll: false,
       isIndeterminate: false,
       isIndeterminate: false,
       checkedCompany: [],
       checkedCompany: [],
       userList: [],
       userList: [],
-      pageSize: 50,
-      currentPage: 1,
-      total: 1,
       paginationOptions: {
       paginationOptions: {
         pageSize: 10,
         pageSize: 10,
         currentPage: 1,
         currentPage: 1,
         total: 0
         total: 0
       },
       },
-      addrules: {
-        title: [
-          {
-            required: true,
-            message: '请输入标题',
-            trigger: 'blur'
-          }
-        ]
-      },
       sourceData: [],
       sourceData: [],
-      searchForm: {},
+      searchForm: {
+        type: ''
+      },
       isEdit: false,
       isEdit: false,
       editShowing: false,
       editShowing: false,
-      defaultEditFrom: {
-        title: '',
-        enableFlag: false,
-        content: '',
-        priority: false
-      },
       releaseVisible: false,
       releaseVisible: false,
       releaseList: []
       releaseList: []
     }
     }
   },
   },
   mounted() {
   mounted() {
+    this.deepCloneForm = JSON.parse(JSON.stringify(this.editForm))
     this.loadFoldersData()
     this.loadFoldersData()
-    // this.getList()
-    // this.getSystemUserList()
   },
   },
   computed: {
   computed: {
     tableColumns() {
     tableColumns() {
       return [
       return [
         {
         {
-          label: '序号',
-          key: 'index',
+          label: '应用图标',
+          type: '',
+          key: 'icon',
+          // render: (item) => <image-view imgUrl={item.icon}></image-view>,
+          render: (item) => (
+            item.icon ? (
+              <img src={item.icon} alt="应用图标" style={{ width: '40px', height: 'auto' }} />
+            ) : (
+              <span>无图标</span>
+            )
+          ),
+          width: 80
         },
         },
         {
         {
           label: '应用名称',
           label: '应用名称',
           key: 'name',
           key: 'name',
-          align: 'left'
         },
         },
         {
         {
           label: '应用分类',
           label: '应用分类',
           key: 'categoryName'
           key: 'categoryName'
         },
         },
         {
         {
+          label: '应用类型',
+          key: 'isCollectFee',
+          render: (item) => (
+            <span>{item.isCollectFee ? '收费' : '免费'}</span>
+          ),
+        },
+        {
           label: '应用简述',
           label: '应用简述',
           key: 'description'
           key: 'description'
         },
         },
-        // {
-        //   label: '应用价格',
-        //   key: 'creatorName2'
-        // },
         {
         {
-          label: '应用服务期',
-          key: 'creatorName2'
+          label: '创建时间',
+          key: 'createTime'
         },
         },
         {
         {
-          label: '创建日期',
-          key: 'createTime'
+          label: '修改时间',
+          key: 'updateTime'
         },
         },
         {
         {
           label: '操作',
           label: '操作',
@@ -372,25 +332,17 @@ export default {
               <span
               <span
                 class="icon-view icon-edit-view"
                 class="icon-view icon-edit-view"
                 title="编辑"
                 title="编辑"
-                onClick={() => this.editDialog(item)}
+                onClick={() => this.editInfo(item)}
               >
               >
                 <i class="el-icon-edit"></i>
                 <i class="el-icon-edit"></i>
               </span>
               </span>
               <span
               <span
                 class="icon-view icon-del-view"
                 class="icon-view icon-del-view"
                 title="删除"
                 title="删除"
-                onClick={() => this.deleteAnnounces(item)}
+                onClick={() => this.deleteSection(item)}
               >
               >
                 <i class="el-icon-delete"></i>
                 <i class="el-icon-delete"></i>
               </span>
               </span>
-              <span
-                class="icon-view"
-                style="background:yellowgreen"
-                title="字段配置"
-                onClick={() => this.fieldSet(item)}
-              >
-                <i class="el-icon-c-scale-to-original"></i>
-              </span>
             </div>
             </div>
           )
           )
         }
         }
@@ -398,35 +350,95 @@ export default {
     }
     }
   },
   },
   methods: {
   methods: {
-    async save() {
+    toggleNodeExpanded(node) {
+      node.expanded = !node.expanded
+    },
+    // 周期+价格的增删
+    removeDomain(index) {
+      if (this.editForm.salePriceList.length > 1) {
+        if (index !== -1) {
+          this.editForm.salePriceList.splice(index, 1)
+        }
+      } else {
+        this.$message.warning('至少设置一种销售价格!')
+      }
+    },
+    addDomain() {
+      this.editForm.salePriceList.push({
+        price: '',
+        validDays: '',
+      })
+    },
+    selectionChange(selection) {
+      this.selection = selection
+    },
+    deleteSection(v) {
+      const arr = v ? [v] : this.selection
+      if (arr.length === 0) return this.$message('请勾选至少一条记录')
+      const ids = arr.map(item => item.id).join()
+      this.$confirm('确定删除选中的信息？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          const url = `businessAppInfo/deleteAppInfoByIds?ids=${ids}`
+          get(url).then((res) => {
+            if (res.code === 200) {
+              this.$message({
+                type: 'success',
+                message: '删除成功!',
+              })
+              this.getList()
+              this.selection = []
+              this.$refs.multipleTable.clearSelectionBox()
+            } else {
+              this.$alert(res.message, '错误提示', {
+                dangerouslyUseHTMLString: true,
+              })
+            }
+          })
+        })
+        .catch(() => {
+          this.selection = []
+          this.$refs.multipleTable.clearSelectionBox()
+        })
+    },
+    // 分页
+    sizeChange(pageSize) {
+      this.paginationOptions.pageSize = pageSize
+      this.getList()
+    },
+    onCurrentChange(currentPage) {
+      this.paginationOptions.currentPage = currentPage
+      this.getList()
+    },
+    // 提交应用信息
+    async saveApplication() {
       try {
       try {
         await this.$refs.editForm.validate()
         await this.$refs.editForm.validate()
       } catch {
       } catch {
         return
         return
       }
       }
-      if (!this.editForm.mainImage || this.editForm.mainImage.length === 0) {
-        this.$message.warning('请选择设计图')
-        return
-      }
-      if (this.productionFile.some((item) => !item)) {
-        return this.$message.warning('请上传生产文件')
-      }
-      if (this.productionFile.length > 0) {
-        this.editForm.productionFile = this.productionFile.join(',')
-      }
+      // if (!this.editForm.icon || this.editForm.icon.length === 0) {
+      //   this.$message.warning('请选择应用图标')
+      //   return
+      // }
+      // if (this.productionFile.some((item) => !item)) {
+      //   return this.$message.warning('请上传应用图标')
+      // }
+      // if (this.productionFile.length > 0) {
+      //   this.editForm.productionFile = this.productionFile.join(',')
+      // }
       try {
       try {
         const data = JSON.parse(JSON.stringify(this.editForm))
         const data = JSON.parse(JSON.stringify(this.editForm))
-        data.labelNames = data.labelNames?.join()
-        // data.mainImage = data.mainImage[0].imagePath
-        data.mainImage = this.handleImage(data.mainImage)
-
-        if (!this.editId) {
-          data.folderId = this.folderId
-          await post('podDesignCenter/addPodDesigns', data)
-        } else {
-          data.folderId = this.editForm.folderId
-          await post('podDesignCenter/update', data)
-        }
+        data.icon = this.handleImage(data.icon)
+        // if (!this.editId) {
+        //   data.categoryId = this.categoryId
+        // } else {
+        //   data.categoryId = this.editForm.categoryId
+        // }
+        await post('businessAppInfo/addOrUpdateAppInfo', data)
         this.getList()
         this.getList()
       } catch (e) {
       } catch (e) {
         throw new Error(e)
         throw new Error(e)
@@ -434,18 +446,76 @@ export default {
         this.editShowing = false
         this.editShowing = false
       }
       }
     },
     },
+    handleImage(data) {
+      if (Array.isArray(data) && data.length > 0) {
+        return data.map(item => item.imagePath).join(',')
+      }
+      return null
+    },
     selectImg(file) {
     selectImg(file) {
       const imagePath = file.map((ee) => ee.imagePath)
       const imagePath = file.map((ee) => ee.imagePath)
       this.productionFile = imagePath
       this.productionFile = imagePath
     },
     },
+    // 获取应用周期
+    async getapplyCycle() {
+      try {
+        const res = await get('businessAppSalePrice/getSalePriceValidDays')
+        if (res.code !== 200) return
+        this.applyCycleList = Object.entries(res.data).map(([name, value]) => ({ name, value }))
+      } catch (e) {
+        console.error(e)
+      }
+    },
+    // 新增、编辑应用信息
+    addInfo() {
+      this.editShowing = true
+      this.editId = undefined
+      this.isEdit = false
+      this.editForm = JSON.parse(JSON.stringify(this.deepCloneForm))
+      this.productionFile = []
+      this.editForm.categoryId = this.categoryId || 1
+      this.$nextTick(() => {
+        this.$refs.editForm.clearValidate()
+      })
+      this.getapplyCycle()
+    },
+    async editInfo(item) {
+      if (item) {
+        this.isEdit = true
+        this.editId = item.id
+        this.getapplyCycle()
+        try {
+          const res = await get('businessAppInfo/getAppInfoById', { id: item.id })
+          if (res.code !== 200) return
+          // this.productionFile = [res.data.productionFile]
+          // res.data.labelNames = res.data.labelNames?.split(',')
+          // this._editData = JSON.parse(JSON.stringify(res.data))
+          res.data.icon = [{ imagePath: res.data.icon }]
+          // if (!res.data.productionFile) {
+          //   res.data.productionFile = res.data.mainImage
+          // }
+          // res.data.designTeamId = Number(res.data.designTeamId)
+          this.editForm = res.data
+          this.$nextTick(() => {
+            this.$refs.editForm.clearValidate()
+          })
+          this.editShowing = true
+        } catch (e) {
+          console.error(e)
+          this.$message.error(e)
+        }
+      }
+    },
     // 获取左侧树数据
     // 获取左侧树数据
     async loadFoldersData() {
     async loadFoldersData() {
       try {
       try {
         const res = await get('businessAppCategory/getCategoryList')
         const res = await get('businessAppCategory/getCategoryList')
         if (res.code !== 200) return
         if (res.code !== 200) return
         this.folders = this.recursiveFolder(res.data)
         this.folders = this.recursiveFolder(res.data)
+        this.categoryId = res.data[0].id
         this.$nextTick(() => {
         this.$nextTick(() => {
-          this.$refs.tree.setCurrentKey(this.folderId || res.data[0].id)
+          this.$refs.tree.setCurrentKey(this.categoryId || res.data[0].id)
+          this.getList()
         })
         })
       } catch (e) {
       } catch (e) {
         console.error(e)
         console.error(e)
@@ -464,7 +534,7 @@ export default {
       }
       }
       return folder
       return folder
     },
     },
-    // 添加、修改、删除分类
+    // 新增、修改、删除分类
     async addFolder(data) {
     async addFolder(data) {
       this.folderVisible = true
       this.folderVisible = true
       this.currentFolder = data
       this.currentFolder = data
@@ -514,11 +584,14 @@ export default {
         return
         return
       }
       }
       const params = {
       const params = {
-        pid: this.currentFolder.id === 1 ? 0 : this.folderId, // 顶级分类pid传0,其他传自己的id
+        // pid: this.currentFolder.id === 1 ? 1 : this.parentFolderId, // 顶级分类pid传0,其他传自己的id
+        // id: this.editFolderId ? this.categoryId : undefined // 编辑有id，新增没有id
+        // pid: this.parentFolderId, // 顶级分类pid传0,其他传自己的id
+        pid: this.editFolderId ? this.parentFolderId : this.currentFolder.id,
         categoryName: this.folderForm.folderName, // 分类名称
         categoryName: this.folderForm.folderName, // 分类名称
-        id: this.editFolderId ? this.folderId : undefined // 编辑有id，添加没有id
+        id: this.editFolderId
       }
       }
-      console.log(params, '4545')
+      console.log('111', params)
       try {
       try {
         const res = await post('businessAppCategory/addOrUpdateCategory', params)
         const res = await post('businessAppCategory/addOrUpdateCategory', params)
         if (res.code !== 200) return
         if (res.code !== 200) return
@@ -530,14 +603,12 @@ export default {
     },
     },
     // 左侧树每个节点点击
     // 左侧树每个节点点击
     handleNodeClick(data) {
     handleNodeClick(data) {
+      console.log(data, data.id, data.pid)
       this.currentFolder = data
       this.currentFolder = data
       this.parentFolderId = data.pid
       this.parentFolderId = data.pid
-      this.folderId = data.id
+      this.categoryId = data.id
       this.getList()
       this.getList()
     },
     },
-    fieldSet(item) {
-      this.$router.push('/dynamicForm')
-    },
     handleCheckAllChange(val) {
     handleCheckAllChange(val) {
       this.checkedCompany = val
       this.checkedCompany = val
         ? this.releaseList.map((e) => e.id)
         ? this.releaseList.map((e) => e.id)
@@ -555,14 +626,6 @@ export default {
     search() {
     search() {
       this.getList()
       this.getList()
     },
     },
-    async getSystemUserList() {
-      try {
-        const res = await getSystemUserList()
-        this.userList = res.data
-      } catch (e) {
-        console.error(e)
-      }
-    },
     setpaginationOptions(opt) {
     setpaginationOptions(opt) {
       for (const key in opt) {
       for (const key in opt) {
         this.paginationOptions[key] = opt[key]
         this.paginationOptions[key] = opt[key]
@@ -577,11 +640,13 @@ export default {
         } =
         } =
           this.paginationOptions
           this.paginationOptions
         const res = await post('businessAppInfo/getAppInfoList', {
         const res = await post('businessAppInfo/getAppInfoList', {
-          categoryId: this.folderId,
+          categoryId: this.categoryId === 1 ? undefined : this.categoryId,
           pageSize,
           pageSize,
           currentPage,
           currentPage,
-          isCollectFee: this.searchForm.type !== 1,
+          isCollectFee: this.searchForm.type === '' ? '' : this.searchForm.type === 2,
           name: this.searchForm.name,
           name: this.searchForm.name,
+          startTime: this.period && this.period[0],
+          endTime: this.period && this.period[1],
         })
         })
         if (res.code !== 200) return
         if (res.code !== 200) return
         this.sourceData = res.data.records || []
         this.sourceData = res.data.records || []
@@ -590,69 +655,6 @@ export default {
         console.error(e)
         console.error(e)
       }
       }
     },
     },
-    currentChange(i) {
-      this.currentPage = i
-      this.getList()
-    },
-    async editDialog(item) {
-      if (item) {
-        try {
-          const res = await get(
-            'sys/announcement/get/' + item.id
-          )
-          if (res.code !== 200) return
-          this.editForm = {
-            ...this.editForm,
-            ...res.data
-          }
-          this.isEdit = true
-        } catch (e) {
-          console.error(e)
-        }
-      } else {
-        this.editForm = JSON.parse(
-          JSON.stringify(this.defaultEditFrom)
-        )
-        this.$nextTick(() => {
-          this.$refs.editForm.clearValidate()
-        })
-        this.isEdit = false
-      }
-      this.editShowing = true
-    },
-    async submit() {
-      try {
-        await this.$refs.editForm.validate()
-      } catch {
-        return
-      }
-
-      try {
-        const url = this.isEdit
-          ? 'sys/announcement/edit'
-          : 'sys/announcement/add'
-        const res = await post(url, { ...this.editForm })
-        if (res.code !== 200) return
-        this.$message.success(res.message)
-        this.editShowing = false
-        this.getList()
-      } catch (e) {
-        console.error(e)
-      }
-    },
-    async enableChange(item, val) {
-      try {
-        const res = await post('sys/announcement/edit', {
-          id: item.id,
-          enableFlag: val
-        })
-        if (res.code !== 200) return
-        this.$message.success(res.message)
-        this.getList()
-      } catch (e) {
-        console.error(e)
-      }
-    },
     async release(item) {
     async release(item) {
       try {
       try {
         const res = await post('sys/domain/list')
         const res = await post('sys/domain/list')
@@ -665,18 +667,6 @@ export default {
         console.error(e)
         console.error(e)
       }
       }
     },
     },
-    async deleteAnnounces(item) {
-      try {
-        const res = await get(
-          'sys/announcement/delete/' + item.id
-        )
-        if (res.code !== 200) return
-        this.$message.success(res.message)
-        this.getList()
-      } catch (e) {
-        console.error(e)
-      }
-    },
     async confirmRelease() {
     async confirmRelease() {
       if (this.checkedCompany.length === 0) {
       if (this.checkedCompany.length === 0) {
         return this.$message.warning('请至少选择一条记录')
         return this.$message.warning('请至少选择一条记录')
@@ -717,38 +707,10 @@ export default {
   padding-right: 8px;
   padding-right: 8px;
 }
 }
 
 
-.pod-search {
-  padding: 0px 10px;
-}
-
-.pod-header {
-  display: flex;
-}
-
 .item:not(:last-child) {
 .item:not(:last-child) {
   margin-right: 10px;
   margin-right: 10px;
 }
 }
 
 
-.table_wrapper {
-  flex: 1;
-  padding: 0 10px;
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 10px;
-}
-
-@media screen and (max-width: 1920px) {
-  .table_wrapper {
-    grid-template-columns: repeat(6, 1fr);
-  }
-}
-
-@media screen and (max-width: 1400px) {
-  .table_wrapper {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
 .upload-demo::v-deep .el-upload--text {
 .upload-demo::v-deep .el-upload--text {
   width: 100%;
   width: 100%;
   white-space: nowrap;
   white-space: nowrap;
@@ -758,28 +720,6 @@ export default {
   text-align: left;
   text-align: left;
 }
 }
 
 
-.sales {
-  width: 40px;
-  height: 26px;
-  display: inline-block;
-  position: relative;
-  border: 1px solid #ddd;
-  overflow: hidden;
-  vertical-align: middle;
-  white-space: nowrap;
-  border-radius: 4px;
-  cursor: pointer;
-  padding: 3px 3px;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.isActive {
-  border: 1px solid #4168ff;
-}
-
 .edit-form::v-deep .img_item {
 .edit-form::v-deep .img_item {
   width: 27%;
   width: 27%;
   height: 200px;
   height: 200px;
@@ -863,17 +803,6 @@ export default {
   top: 11px;
   top: 11px;
 }
 }
 
 
-.variant_wrap {
-  height: 700px;
-  overflow: auto;
-}
-
-.variant_wrap::after {
-  display: block;
-  content: '';
-  clear: both;
-}
-
 .empty {
 .empty {
   height: 100%;
   height: 100%;
   display: flex;
   display: flex;

src/views/system/upload-file.vue

+<template>
+  <div class="upload-files" v-loading="uploading">
+    <input
+      ref="file"
+      type="file"
+      style="display: none"
+      @change="onFileChanged" />
+    <div v-if="imageMode" class="images">
+      <el-image
+        v-for="item in files"
+        :key="item.path"
+        class="upload-files-img"
+        :src="setimgUrl(item.path, { w: 80 })" />
+      <i
+        v-if="!(max > 0) || (files && files.length) < max"
+        class="upload-files-add-icon el-icon-plus"
+        @click="$refs.file.click()" />
+    </div>
+    <template v-else>
+      <ul class="files">
+        <li
+          v-for="(item, i) in files"
+          :key="item.path"
+          class="upload-files-file">
+          <span
+            class="filename"
+            @click="downloadFile(item)"
+            :title="`点击下载 ${item.path} 文件`">
+            {{ filename(item.path) }}
+          </span>
+          <i class="file-remove el-icon-close" @click="removeFile(i)"></i>
+        </li>
+      </ul>
+      <el-button
+        v-if="!(max > 0) || (files && files.length) < max"
+        type="primary"
+        @click="$refs.file.click()">
+        {{ text }}
+      </el-button>
+    </template>
+  </div>
+</template>
+<script>
+import { baseURL } from '@/common/api/axios.js'
+import Axios from 'axios'
+import _ from 'lodash'
+export default {
+  name: 'UploadFile',
+  props: {
+    value: {
+      type: [Array, String, Object],
+    },
+    max: {
+      type: Number,
+    },
+    imageMode: {
+      type: Boolean,
+    },
+    url: {
+      type: String,
+      default: 'upload/podFileUpload',
+    },
+    getFilePath: {
+      type: String,
+      default: 'imagePath',
+    },
+    text: {
+      type: String,
+      default: '选择文件',
+    },
+  },
+  data() {
+    return {
+      uploading: false,
+
+      files: [],
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        if (this._lastValue === this.value) {
+          this.emitValue()
+          return
+        }
+        const val = []
+        if (!Array.isArray(this.value)) {
+          if (this.value) {
+            val.push(
+              typeof this.value === 'string'
+                ? { path: this.value }
+                : { ...this.value }
+            )
+          }
+        } else {
+          this.value.forEach((e) => {
+            val.push(typeof e === 'string' ? { path: e } : { ...e })
+          })
+        }
+        this.files = val.filter((e) => !!e.path)
+      },
+    },
+  },
+  methods: {
+    onFileChanged() {
+      const files = this.$refs.file.files
+      const file = files[0]
+      this.$refs.file.value = ''
+      this.uploadFile(file)
+    },
+    async uploadFile(file) {
+      const formData = new FormData()
+      formData.append('file', file)
+      try {
+        const res = await Axios({
+          method: 'post',
+          url: baseURL + 'api/' + this.url,
+          data: formData,
+          headers: {
+            'content-type': 'multipart/form-data',
+            'jwt-token': localStorage.getItem('token'),
+          },
+        })
+
+        this.files.push({ path: _.get(res.data, this.getFilePath) })
+        this.emitValue()
+      } catch (e) {
+        console.error(e)
+        this.$message.error('文件上传失败')
+      } finally {
+        this.uploading = false
+      }
+    },
+    downloadFile(item) {
+      window.open(
+        // TODO 确认文件下载地址
+        this.setimgUrl(item.path)
+      )
+    },
+    async removeFile(i) {
+      try {
+        await this.$confirm('确认删除当前文件？', {
+          type: 'warning',
+          title: '提示',
+        })
+      } catch {
+        return
+      }
+      this.files.splice(i, 1)
+      this.emitValue()
+    },
+    filename(path) {
+      if (!path) return ''
+      const i = path.lastIndexOf('/')
+      if (i === -1) return path
+      return path.substring(i + 1)
+    },
+    emitValue() {
+      let v
+      if (this.max === 1) {
+        v = this.files[0] && this.files[0].path
+      } else {
+        v = this.files.map((e) => e.path)
+      }
+      this._lastValue = v
+      this.$emit('input', v)
+    },
+  },
+}
+</script>
+<style scoped>
+.upload-files {
+  cursor: pointer;
+}
+
+.upload-files-add-icon {
+  width: 58px;
+  height: 58px;
+  display: flex;
+  border: 1px solid #ddd;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #ddd;
+}
+
+.upload-files-img {
+  width: 58px;
+  height: 58px;
+  object-fit: contain;
+  border: 1px solid #ddd;
+  margin-right: 10px;
+}
+
+.images {
+  display: flex;
+}
+
+.upload-files-file {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.upload-files-file .filename {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+</style>

src/views/taskManage/index.vue

@@ -809,7 +809,7 @@
 
 
 <script>
 <script>
 import tableView from '@/common/components/base/tableView.vue'
 import tableView from '@/common/components/base/tableView.vue'
-import ChooseTimePeriod from '../../components/base/chooseTimePeriod.vue'
+import ChooseTimePeriod from '@/components/base/chooseTimePeriod.vue'
 import pagination from '../../mixins/pagination'
 import pagination from '../../mixins/pagination'
 import Edit from './edit.vue'
 import Edit from './edit.vue'
 import axios from '../../common/api/axios'
 import axios from '../../common/api/axios'