#

luxiaotao1123

2022-11-19 690b7b029a3ffb35df1ed5e725e5ac1dd7d89382

#

 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 {

 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({

 src/main/webapp/static/layui/lay/modules/steps/steps.css

New file
@@ -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;
}

 src/main/webapp/static/layui/lay/modules/steps/steps.js

New file
@@ -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'));
    };

    /* 检查lay-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);
});

 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">