From 690b7b029a3ffb35df1ed5e725e5ac1dd7d89382 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@63.com>
Date: 星期六, 19 十一月 2022 08:36:59 +0800
Subject: [PATCH] #

---
 src/main/webapp/static/layui/lay/modules/steps/steps.css        |  301 +++++++++++++++++++++++++++++++++++++++++++
 src/main/java/com/zy/crm/manager/controller/PlanController.java |   12 +
 src/main/webapp/static/js/plan/plan.js                          |    5 
 src/main/webapp/views/plan/plan.html                            |   30 ++++
 src/main/webapp/static/layui/lay/modules/steps/steps.js         |   70 ++++++++++
 5 files changed, 412 insertions(+), 6 deletions(-)

diff --git a/src/main/java/com/zy/crm/manager/controller/PlanController.java b/src/main/java/com/zy/crm/manager/controller/PlanController.java
index 39ff7bb..29631d1 100644
--- a/src/main/java/com/zy/crm/manager/controller/PlanController.java
+++ b/src/main/java/com/zy/crm/manager/controller/PlanController.java
@@ -1,23 +1,25 @@
 package com.zy.crm.manager.controller;
 
-import com.alibaba.fastjson.JSONArray;
 import com.alibaba.fastjson.JSONObject;
 import com.baomidou.mybatisplus.mapper.EntityWrapper;
 import com.baomidou.mybatisplus.mapper.Wrapper;
 import com.baomidou.mybatisplus.plugins.Page;
-import com.core.common.DateUtils;
-import com.zy.crm.manager.entity.Plan;
-import com.zy.crm.manager.service.PlanService;
 import com.core.annotations.ManagerAuth;
 import com.core.common.BaseRes;
 import com.core.common.Cools;
+import com.core.common.DateUtils;
 import com.core.common.R;
 import com.core.domain.KeyValueVo;
 import com.zy.crm.common.web.BaseController;
+import com.zy.crm.manager.entity.Plan;
+import com.zy.crm.manager.service.PlanService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.*;
 
-import java.util.*;
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
 
 @RestController
 public class PlanController extends BaseController {
diff --git a/src/main/webapp/static/js/plan/plan.js b/src/main/webapp/static/js/plan/plan.js
index 12a46b3..659d3ea 100644
--- a/src/main/webapp/static/js/plan/plan.js
+++ b/src/main/webapp/static/js/plan/plan.js
@@ -2,7 +2,9 @@
 var pageCount = 0;
 layui.config({
     base: baseUrl + "/static/layui/lay/modules/"
-}).use(['table','laydate', 'form', 'admin', 'xmSelect'], function(){
+}).extend({
+    steps: 'steps/steps',
+}).use(['table','laydate', 'form', 'admin', 'xmSelect', 'steps'], function(){
     var table = layui.table;
     var $ = layui.jquery;
     var layer = layui.layer;
@@ -10,6 +12,7 @@
     var form = layui.form;
     var admin = layui.admin;
     var xmSelect = layui.xmSelect;
+    var steps = layui.steps;
 
     // 鏁版嵁娓叉煋
     tableIns = table.render({
diff --git a/src/main/webapp/static/layui/lay/modules/steps/steps.css b/src/main/webapp/static/layui/lay/modules/steps/steps.css
new file mode 100644
index 0000000..8ed03ec
--- /dev/null
+++ b/src/main/webapp/static/layui/lay/modules/steps/steps.css
@@ -0,0 +1,301 @@
+/** 姝ラ鏉℃ā鍧� date:2020-02-16   License By http://easyweb.vip */
+.layui-tab.layui-steps {
+    margin: 0 auto;
+}
+
+.layui-tab.layui-steps > .layui-tab-title {
+    height: auto;
+    border: none;
+    margin: 0 auto;
+    text-align: center;
+    overflow: auto !important;
+    -webkit-transition: none;
+    transition: none;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flexbox;
+    display: flex;
+}
+
+.layui-tab.layui-steps > .layui-tab-title > .layui-tab-bar {
+    display: none;
+}
+
+.layui-tab.layui-steps > .layui-tab-title > li {
+    min-width: 130px;
+    text-align: left;
+    line-height: 24px;
+    padding: 0 0 0 44px;
+    white-space: initial;
+    box-sizing: border-box;
+    -webkit-transition: none;
+    transition: none;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+}
+
+.layui-tab.layui-steps > .layui-tab-title > li:last-child {
+    -webkit-box-flex: 0;
+    -webkit-flex: none;
+    -ms-flex: none;
+    flex: none;
+}
+
+/** 榛樿鏍峰紡 */
+.layui-tab.layui-steps > .layui-tab-title > li > .layui-icon {
+    color: #5FB878;
+    position: absolute;
+    top: 3px;
+    left: 10px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    display: inline-block;
+    box-sizing: border-box;
+    -moz-transition: color .3s, background-color .3s;
+    -webkit-transition: color .3s, background-color .3s;
+    transition: color .3s, background-color .3s;
+}
+
+.layui-tab.layui-steps > .layui-tab-title > li > .layui-steps-title {
+    color: #8c8c8c;
+    font-weight: 600;
+    padding-right: 6px;
+    position: relative;
+    display: inline-block;
+    background-color: #fff;
+    -moz-transition: color .3s;
+    -webkit-transition: color .3s;
+    transition: color .3s;
+}
+
+.layui-tab.layui-steps > .layui-tab-title > li > .layui-steps-content {
+    color: #999;
+    display: block;
+    font-size: 12px;
+    line-height: initial;
+    -moz-transition: color .3s;
+    -webkit-transition: color .3s;
+    transition: color .3s;
+}
+
+/* 鍒嗗壊绾� */
+.layui-tab.layui-steps > .layui-tab-title > li:after {
+    display: none;
+}
+
+.layui-tab.layui-steps > .layui-tab-title > li:before {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: 15px;
+    left: 44px;
+    height: 1px;
+    background-color: #5FB878;
+    -moz-transition: background-color .3s;
+    -webkit-transition: background-color .3s;
+    transition: background-color .3s;
+}
+
+.layui-tab.layui-steps > .layui-tab-title > li:last-child:before,
+.layui-tab.layui-steps[overflow] > .layui-tab-title > li:nth-last-child(2):before {
+    display: none;
+}
+
+/* ok鍥炬爣 */
+.layui-tab.layui-steps > .layui-tab-title > li > .layui-icon.layui-icon-ok {
+    border: 1px solid #5FB878;
+    border-radius: 50%;
+    font-size: 0;
+}
+
+.layui-tab.layui-steps > .layui-tab-title > li > .layui-icon.layui-icon-ok:before {
+    font-size: 14px;
+}
+
+/** 鏈�変腑鏍峰紡 */
+.layui-tab.layui-steps > .layui-tab-title > li.layui-this ~ li > .layui-icon {
+    color: #ccc;
+    border-color: #ccc !important;
+}
+
+/* 鍒嗗壊绾� */
+.layui-tab.layui-steps > .layui-tab-title > li.layui-this:before,
+.layui-tab.layui-steps > .layui-tab-title > li.layui-this ~ li:before {
+    background-color: #e8eaec;
+}
+
+/* ok鍥炬爣 */
+.layui-tab.layui-steps > .layui-tab-title > li.layui-this > .layui-icon.layui-icon-ok,
+.layui-tab.layui-steps > .layui-tab-title > li.layui-this ~ li > .layui-icon.layui-icon-ok {
+    font-size: 14px;
+}
+
+.layui-tab.layui-steps > .layui-tab-title > li.layui-this > .layui-icon.layui-icon-ok:before,
+.layui-tab.layui-steps > .layui-tab-title > li.layui-this ~ li > .layui-icon.layui-icon-ok:before {
+    display: none;
+}
+
+/** 閫変腑鏍峰紡 */
+.layui-tab.layui-steps > .layui-tab-title > li.layui-this > .layui-icon.layui-icon-ok {
+    color: #fff;
+    background-color: #5FB878;
+}
+
+.layui-tab.layui-steps > .layui-tab-title > li.layui-this > .layui-steps-title {
+    color: #595959;
+}
+
+.layui-tab.layui-steps > .layui-tab-title > li.layui-this > .layui-steps-content {
+    color: #595959;
+}
+
+/** 杩蜂綘鐗� */
+.layui-tab.layui-steps.layui-steps-small > .layui-tab-title > li > .layui-icon {
+    top: 3px;
+    left: 8px;
+    width: 18px;
+    height: 18px;
+    line-height: 16px;
+}
+
+.layui-tab.layui-steps.layui-steps-small > .layui-tab-title > li > .layui-steps-title {
+    font-size: 13px;
+}
+
+.layui-tab.layui-steps.layui-steps-small > .layui-tab-title > li:before {
+    top: 12px;
+    left: 34px;
+}
+
+.layui-tab.layui-steps.layui-steps-small > .layui-tab-title > li {
+    padding-left: 34px;
+    min-width: 100px;
+}
+
+.layui-tab.layui-steps.layui-steps-small > .layui-tab-title > li > .layui-icon.layui-icon-ok:before {
+    font-size: 12px;
+}
+
+.layui-tab.layui-steps.layui-steps-small > .layui-tab-title > li.layui-this > .layui-icon.layui-icon-ok,
+.layui-tab.layui-steps.layui-steps-small > .layui-tab-title > li.layui-this ~ li > .layui-icon.layui-icon-ok {
+    font-size: 12px;
+}
+
+/** 鍨傜洿椋庢牸 */
+.layui-tab.layui-steps.layui-steps-vertical > .layui-tab-title > li > .layui-icon {
+    background-color: #fff;
+    position: relative;
+    left: 0;
+}
+
+.layui-tab.layui-steps.layui-steps-vertical > .layui-tab-title > li > .layui-steps-title {
+    background-color: transparent;
+    padding-right: 0;
+    margin-top: 6px;
+    display: block;
+}
+
+.layui-tab.layui-steps.layui-steps-vertical > .layui-tab-title > li:before {
+    left: 50%;
+    right: -50%;
+}
+
+.layui-tab.layui-steps.layui-steps-vertical > .layui-tab-title > li {
+    padding-left: 0;
+    text-align: center;
+}
+
+.layui-tab.layui-steps.layui-steps-vertical > .layui-tab-title > li:last-child {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+}
+
+/** 绠�娲侀鏍� */
+.layui-tab.layui-steps.layui-steps-simple > .layui-tab-title > li {
+    color: #fff;
+    height: 26px;
+    line-height: 26px;
+    font-size: 12px;
+    min-width: 120px;
+    padding: 0 10px 0 24px;
+    background-color: #9FD4AE;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -webkit-transition: background-color .3s;
+    -moz-transition: background-color .3s;
+    -ms-transition: background-color .3s;
+    -o-transition: background-color .3s;
+    transition: background-color .3s;
+}
+
+.layui-tab.layui-steps.layui-steps-simple > .layui-tab-title > li:first-child {
+    padding-left: 10px;
+}
+
+.layui-tab.layui-steps.layui-steps-simple > .layui-tab-title > li.layui-this {
+    background-color: #5FB878;
+}
+
+.layui-tab.layui-steps.layui-steps-simple > .layui-tab-title > li.layui-this ~ li {
+    background-color: #C9C9C9;
+}
+
+.layui-tab.layui-steps.layui-steps-simple > .layui-tab-title > li:after,
+.layui-tab.layui-steps.layui-steps-simple > .layui-tab-title > li:before {
+    content: "";
+    position: absolute;
+    top: 0 !important;
+    left: 0 !important;
+    right: auto !important;
+    bottom: auto !important;
+    border: 13px solid !important;
+    border-color: transparent transparent transparent #9FD4AE !important;
+    background-color: transparent !important;
+    border-radius: 0 !important;
+    display: block !important;
+    height: auto !important;
+    width: auto !important;
+    -webkit-transition: border-left-color .3s;
+    -moz-transition: border-left-color .3s;
+    -ms-transition: border-left-color .3s;
+    -o-transition: border-left-color-color .3s;
+    transition: border-left-color .3s;
+}
+
+body .layui-tab.layui-steps.layui-steps-simple > .layui-tab-title > li:before {
+    left: 1px !important;
+    border-color: transparent transparent transparent #fff !important;
+}
+
+.layui-tab.layui-steps.layui-steps-simple > .layui-tab-title > li.layui-this ~ li:after {
+    border-color: transparent transparent transparent #C9C9C9 !important;
+}
+
+.layui-tab.layui-steps.layui-steps-simple > .layui-tab-title > li.layui-this + li:after {
+    border-color: transparent transparent transparent #5FB878 !important;
+}
+
+.layui-tab.layui-steps.layui-steps-simple > .layui-tab-title > li:first-child:after,
+.layui-tab.layui-steps.layui-steps-simple > .layui-tab-title > li:first-child:before {
+    display: none !important;
+}
+
+.layui-tab.layui-steps.layui-steps-simple > .layui-tab-title > li:last-child {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+}
+
+/** 鏍囬绂佹鐐瑰嚮 */
+.layui-tab.layui-steps.layui-steps-readonly > .layui-tab-title > li {
+    pointer-events: none !important;
+}
diff --git a/src/main/webapp/static/layui/lay/modules/steps/steps.js b/src/main/webapp/static/layui/lay/modules/steps/steps.js
new file mode 100644
index 0000000..3b46467
--- /dev/null
+++ b/src/main/webapp/static/layui/lay/modules/steps/steps.js
@@ -0,0 +1,70 @@
+/** 姝ラ鏉℃ā鍧� date:2020-02-16   License By http://easyweb.vip */
+layui.define(['element'], function (exports) {
+    var $ = layui.jquery;
+    var element = layui.element;
+    if ($('#ew-css-steps').length <= 0) {
+        layui.link(layui.cache.base + 'steps/steps.css');
+    }
+    var steps = {};
+
+    /* 涓嬩竴姝� */
+    steps.next = function (filter) {
+        steps.checkLayId(filter);
+        var $steps = $('[lay-filter="' + filter + '"]');
+        var $li = $steps.children('.layui-tab-title').children('li');
+        var $next = $li.filter('.layui-this').next();
+        if ($next.length <= 0) {
+            $next = $li.first();
+        }
+        element.tabChange(filter, $next.attr('lay-id'));
+    };
+
+    /* 涓婁竴姝� */
+    steps.prev = function (filter) {
+        steps.checkLayId(filter);
+        var $steps = $('[lay-filter="' + filter + '"]');
+        var $li = $steps.children('.layui-tab-title').children('li');
+        var $next = $li.filter('.layui-this').prev();
+        if ($next.length <= 0) {
+            $next = $li.last();
+        }
+        element.tabChange(filter, $next.attr('lay-id'));
+    };
+
+    /* 璺宠浆鍒扮鍑犳 */
+    steps.go = function (filter, index) {
+        steps.checkLayId(filter);
+        var $steps = $('[lay-filter="' + filter + '"]');
+        var $li = $steps.children('.layui-tab-title').children('li');
+        element.tabChange(filter, $li.eq(index).attr('lay-id'));
+    };
+
+    /* 妫�鏌ay-id灞炴�� */
+    steps.checkLayId = function (filter) {
+        var $steps = $('.layui-steps[lay-filter="' + filter + '"]');
+        var $li = $steps.children('.layui-tab-title').children('li');
+        if ($li.first().attr('lay-id') === undefined) {
+            $li.each(function (index) {
+                $(this).attr('lay-id', 'steps-' + index);
+            });
+        }
+        $steps.find('.layui-tab-bar').remove();
+        $steps.removeAttr('overflow');
+    };
+
+    /* 涓婁竴姝ャ�佷笅涓�姝ユ寜閽� */
+    $(document).off('click.steps').on('click.steps', '[data-steps]', function () {
+        var $this = $(this);
+        var filter = $this.parents('.layui-steps').first().attr('lay-filter');
+        var type = $this.data('steps');
+        if (type === 'next') {
+            steps.next(filter);
+        } else if (type === 'prev') {
+            steps.prev(filter);
+        } else if (type === 'go') {
+            steps.go(filter, $this.data('go'));
+        }
+    });
+
+    exports('steps', steps);
+});
diff --git a/src/main/webapp/views/plan/plan.html b/src/main/webapp/views/plan/plan.html
index 81556e8..9b283c5 100644
--- a/src/main/webapp/views/plan/plan.html
+++ b/src/main/webapp/views/plan/plan.html
@@ -15,6 +15,36 @@
 <div class="layui-fluid">
     <div class="layui-card">
         <div class="layui-card-body">
+            <div class="layui-tab layui-steps">
+                <ul class="layui-tab-title">
+                    <li>
+                        <i class="layui-icon layui-icon-ok">1</i>
+                        <span class="layui-steps-title">宸插畬鎴�</span>
+                        <span class="layui-steps-content">杩欓噷鏄姝ラ鐨勬弿杩颁俊鎭�</span>
+                    </li>
+                    <li class="layui-this">
+                        <i class="layui-icon layui-icon-ok">2</i>
+                        <span class="layui-steps-title">杩涜涓�</span>
+                        <span class="layui-steps-content">杩欓噷鏄姝ラ鐨勬弿杩颁俊鎭�</span>
+                    </li>
+                    <li>
+                        <i class="layui-icon layui-icon-ok">3</i>
+                        <span class="layui-steps-title">寰呰繘琛�</span>
+                        <span class="layui-steps-content">杩欓噷鏄姝ラ鐨勬弿杩颁俊鎭�</span>
+                    </li>
+                    <li>
+                        <i class="layui-icon layui-icon-ok">4</i>
+                        <span class="layui-steps-title">寰呰繘琛�</span>
+                        <span class="layui-steps-content">杩欓噷鏄姝ラ鐨勬弿杩颁俊鎭�</span>
+                    </li>
+                </ul>
+                <div class="layui-tab-content">
+                    <div class="layui-tab-item">鍐呭1</div>
+                    <div class="layui-tab-item layui-show">鍐呭2</div>
+                    <div class="layui-tab-item">鍐呭3</div>
+                    <div class="layui-tab-item">鍐呭4</div>
+                </div>
+            </div>
             <div class="layui-form toolbar" id="search-box">
                 <div class="layui-form-item">
                     <div class="layui-inline">

--
Gitblit v1.9.1