修改服务上架页面

ghy-admin/src/main/resources/static/js/plugins/miniCascader/cascader.js

@@ -0,0 +1,596 @@
+/**
+ * Name: 级联选择器控件
+ * Version: 2020-06-16
+ * Author: 王海峰 <wanghaifeng@iyiou.com>
+ * Function List:
+ * 1. 级联面板 - 支持多选 - 单选
+ * 2. 支持回显已选中数据的完整路径 父级-父级-子级(可通过配置项 separator 自定义分隔符)
+ * 3. 支持删除单个选中的数据项
+ * 4. 支持一键删除所有选中数据项(可通过配置项 clearable 是否启用改功能)
+ * 5. 接口: 一键获取所选中的所有文本数组
+ * 6. 接口: 一键获取所选中的所有ID数组
+ */
+
+(function() {
+  /**
+   * cascader_node 适配器模式
+   * 将用户传入的数据通过该适配器进行处理
+   * 数据驱动的思路，一个 CascaderNode 实例对应一个数据项（不管是子级还是父级）
+   */
+  var cascader_node = function () {
+    /**
+     * @param {Object} data 数据
+     * @param {Object} config 配置项
+     * @param {Object} parentNode 父级 递归时传入
+     */
+    function CascaderNode(data, config, parentNode) {
+      this.data = data // 原始数据
+      this.config = config // 配置项
+      this.indeterminate = false // 该父级下的子级是否全选，用于控制父级显示状态(只有子级全选，父级才全选)
+      this.parent = parentNode || null // 该项的父级
+      this.level = !this.parent ? 1 : this.parent.level + 1 // 等级序列号
+      this.uid = data[config.value] // 数据ID
+      // 因是数据驱动的方式，一个数据项对应一个DOM，DOM选中与否
+      this.checked = false // 该项数据是否选中
+      this.initState()
+      this.initChildren()
+    }
+
+    /**
+     * 初始化数据
+     */
+    CascaderNode.prototype.initState = function initState() {
+      var _config = this.config,
+        valueKey = _config.value,
+        labelKey = _config.label
+
+      this.value = this.data[valueKey]
+      this.label = this.data[labelKey]
+      this.pathNodes = this.calculatePathNodes()
+      this.path = this.pathNodes.map(function (node) {
+        return node.value
+      })
+      this.pathLabels = this.pathNodes.map(function (node) {
+        return node.label
+      })
+    }
+
+    /**
+     * 初始化该数据下的子级
+     * 内部通过递归生成 CascaderNode 实例，即子级
+     */
+    CascaderNode.prototype.initChildren = function initChildren() {
+      var _this = this
+      var config = this.config
+      var childrenKey = config.children
+      var childrenData = this.data[childrenKey]
+      this.hasChildren = Array.isArray(childrenData)
+      this.children = (childrenData || []).map(function (child) {
+        return new CascaderNode(child, config, _this)
+      })
+    }
+
+    /**
+     * 计算路径
+     */
+    CascaderNode.prototype.calculatePathNodes = function calculatePathNodes() {
+      var nodes = [this]
+      var parent = this.parent
+
+      while (parent) {
+        nodes.unshift(parent)
+        parent = parent.parent
+      }
+      return nodes
+    }
+
+    /**
+     * 获取该项的路径（包含父级+）
+     */
+    CascaderNode.prototype.getPath = function getPath() {
+      return this.path
+    }
+
+    /**
+     * 获取该项的路径（不包含父级）
+     */
+    CascaderNode.prototype.getValue = function getPath() {
+      return this.value
+    }
+
+    /**
+     * 多选 - 父级选中操作，让所有子级选中
+     * @param {Boolean} checked
+     */
+    CascaderNode.prototype.onParentCheck = function onParentCheck(checked) {
+      var child = this.children.length ? this.children : this
+      this.checked = checked
+      this.indeterminate = false
+      this.doAllCheck(child, checked)
+    }
+
+    /**
+     * 多选 - 父级选中时，子级全选
+     * @param {Array} child
+     * @param {Boolean} checked
+     */
+    CascaderNode.prototype.doAllCheck = function doAllCheck(child, checked) {
+      var _this = this
+      if (Array.isArray(child) && child.length) {
+        child.forEach(function (c) {
+          c.checked = checked
+          c.indeterminate = false
+          _this.doAllCheck(c.children, checked)
+        })
+      }
+    }
+
+    /**
+     * 多选 - 子级选中，操作父级
+     * @param {*} checked
+     */
+    CascaderNode.prototype.onChildCheck = function onChildCheck(checked) {
+      this.checked = checked
+      var parent = this.parent
+      var isChecked = parent.children.every(function (child) {
+        return child.checked
+      })
+      this.setCheckState(this.parent, isChecked);
+    }
+
+    /**
+     * 设置父级相应的状态
+     * 当该项有同级，且都没有选中，父级为 无选中 状态： 口
+     * 当该项有同级，且同级的所有数据都为选中时，父级为 选中 状态：√
+     * 当该项有同级，但同级中有且只有一项没有被选中，父级为 半选中 状态： -
+     * @param {Object} parent
+     * @param {Boolean} isChecked
+     */
+    CascaderNode.prototype.setCheckState = function setCheckState(parent, isChecked) {
+      parent.checked = isChecked
+      var totalNum = parent.children.length;
+      var checkedNum = parent.children.reduce(function (c, p) {
+        var num = p.checked ? 1 : p.indeterminate ? 0.5 : 0;
+        return c + num;
+      }, 0);
+      parent.indeterminate = checkedNum !== totalNum && checkedNum > 0;
+      parent.parent && this.setCheckState(parent.parent, isChecked)
+    }
+
+    return CascaderNode
+  }()
+
+  /**
+   * eo_cascader 生成级联选择器
+   * 绑定相关事件、操作数据、渲染选择器、 回显选中列表
+   */
+  var eo_cascader = function () {
+    // 默认配置
+    var defaultConfig = {
+      disabled: 'disabled',
+      emitPath: true,
+      value: 'id',
+      label: 'label',
+      children: 'children'
+    }
+    /**
+     * 级联选择器构造函数
+     * @param {Array} data
+     * @param {Object} config
+     */
+    function EoCascader(data, config) {
+      this.config = Object.assign(defaultConfig, config) || null
+      this.multiple = config.multiple // 是否多选
+      this.separator = config.separator // 自定义数据之间分隔符
+      this.data = data // 原始数据
+      this.clearable = config.clearable // 是否可一键清空
+      this.panelShowState = false // 控制级联选择器显示
+      this.storageChecked = {} // 存储已选中的数据项
+      this.checkedText = [] // 选中的文本
+      this.checkedID = [] // 选中的ID
+      this.ele = document.getElementById(config.elementID) // DOM容器
+      this.panelWrap = this.initPanel() // 级联选择器DOM容器
+      this.checkedWrap = this.initCheckedWrap() // 回显选中列表DOM容器
+      this.checkedCallback = config.checkedCallback || (() => {});
+      this.initNodes(data)
+      this.initEvents()
+    }
+
+    /**
+     * 事件绑定
+     */
+    EoCascader.prototype.initEvents = function initEvents(e) {
+      this.ele.addEventListener('click', this.bindCascaderClick.bind(this))
+      document.body.addEventListener('click', this.bindBodyClick.bind(this), true)
+      if(this.clearable) {
+        this.ele.addEventListener('mouseover', this.bindCascaderHover.bind(this))
+        this.ele.addEventListener('mouseout', this.bindCascaderOut.bind(this))
+      }
+    }
+
+    /**
+     * body点击隐藏级联面板
+     */
+    EoCascader.prototype.bindBodyClick = function bindCascaderClick(e) {
+      if(e.target.tagName !== 'BODY') return
+      this.panelShowState = false
+      this.ele.className = 'cascader-wrap'
+    }
+
+    /**
+     * 点击容器控制切换级联面板显示
+     */
+    EoCascader.prototype.bindCascaderClick = function bindCascaderClick(e) {
+      e.stopPropagation();
+      if(e.target.id !== this.ele.id ) return
+      this.panelShowState = !this.panelShowState
+      this.ele.className = this.panelShowState? 'cascader-wrap is-show': 'cascader-wrap'
+    }
+
+    /**
+     * 当且仅当 clearable 为 true 时绑定
+     * 鼠标移入容器，显示一键清空按钮
+     */
+    EoCascader.prototype.bindCascaderHover = function bindCascaderHover(e) {
+      e.stopPropagation();
+      if(e.target.id !== this.ele.id && e.target.className !== 'eo-clear-btn' ) return
+      if(JSON.stringify(this.storageChecked) !== '{}') {
+        this.ele.className = this.panelShowState? 'cascader-wrap is-show is-clear': 'cascader-wrap is-clear'
+      }
+    }
+
+    /**
+     * 当且仅当 clearable 为 true 时绑定
+     * 鼠标移出容器，隐藏一键清空按钮
+     */
+    EoCascader.prototype.bindCascaderOut = function bindCascaderOut(e) {
+      e.stopPropagation();
+      if(e.target.id !== this.ele.id) return
+      this.ele.className = this.panelShowState? 'cascader-wrap is-show': 'cascader-wrap'
+    }
+
+    /**
+     * 动态生成级联面板DOM容器
+     */
+    EoCascader.prototype.initPanel = function initPanel() {
+      var panel = document.createElement('div')
+      panel.className = 'eo-cascader-panel'
+      return panel
+    }
+
+    /**
+     * 动态生成回显选中列表DOM容器
+     */
+    EoCascader.prototype.initCheckedWrap = function initCheckedWrap() {
+      var checkedWrap = document.createElement('div')
+      checkedWrap.className = 'eo-checked-wrap'
+      return checkedWrap
+    }
+
+    /**
+     * 动态生成一键清空按钮
+     */
+    EoCascader.prototype.initClearDom = function initClearDom() {
+      var clearBtn = document.createElement('i')
+      clearBtn.className = 'eo-clear-btn'
+      clearBtn.innerHTML = 'x'
+      var _this = this
+      // 绑定事件，初始化所有数据，重新渲染级联面板
+      clearBtn.addEventListener('click', function(e) {
+        e.stopPropagation();
+        _this.storageChecked = {}
+        _this.checkedCallback();
+        _this.config.checkedValue = null
+        _this.checkedText = []
+        _this.checkedID = []
+        _this.initNodes(_this.data)
+        _this.initCheckedLi()
+        _this.panelWrap.style.top = _this.ele.offsetHeight + 2 + 'px'
+      })
+      return clearBtn
+    }
+
+    /**
+     * 通过 CascaderNode 适配器对原始数据进行改造，并赋值给当前构造函数的 nodes 对象
+     * @param {Array} data 用户传入的原始数据
+     */
+    EoCascader.prototype.initNodes = function initNodes(data) {
+      var _this = this
+      this.nodes = data.map(function (nodeData) {
+        // 访问适配器
+        return new cascader_node(nodeData, _this.config)
+      })
+      // 级联面板
+      this.menus = [this.nodes]
+      // 当为编辑页面时，往往需要回显上次提交的数据，即，
+      // 如果存在 checkedValue
+      //  那么调用 findChecked 方法，通过传入的已选 ID，渲染级联面板、回显列表
+      // 反之，根据初始数据正常渲染即可
+      this.config.checkedValue ? this.findChecked(this.config.checkedValue) : this.createNodes(this.menus)
+      // 如果可一键清空，动态添加清空按钮
+      this.clearable && this.ele.appendChild(this.initClearDom())
+    }
+
+    /**
+     * @param {Object} currentMenu 级联面板中，当前的点击项
+     * 点击同级项时，通过操作 menus，使对应的子级进行渲染
+     */
+    EoCascader.prototype.renderNodes = function (currentMenu) {
+      // 操作 menus
+      var menus = this.menus.slice(0, currentMenu.level)
+      currentMenu.children.length && menus.push(currentMenu.children)
+      this.menus = menus
+      var wrap = this.panelWrap
+      var wrapChild = wrap.children
+      // 操作DOM
+      for (let j = currentMenu.level; j < wrap.children.length; j++) {
+        wrap.removeChild(wrapChild[j])
+        j = j - 1
+      }
+      return menus
+    }
+
+    /**
+     * 数据驱动的方式，通过 menus 渲染DOM
+     * 每次操作 menus，增删都需要修改 menus，进而再次调用改方法进行渲染
+     * @param {Array} menus 级联面板数据
+     */
+    EoCascader.prototype.createNodes = function (menus) {
+      var wrap = this.panelWrap
+      wrap.innerHTML = ''
+      var _this = this
+
+      for (let i = 0; i < menus.length; i++) {
+        var menu = document.createElement('div')
+        menu.className = 'eo-cascader-menu'
+        var ul = document.createElement('ul')
+        var menusList = menus[i];
+        for (let k = 0; k < menusList.length; k++) {
+          var li = document.createElement('li')
+          if(menusList[k].children.length) li.className = 'has-child'
+          // 当且仅当多选时 创建 label checkbox
+          if(_this.multiple) {
+            var label = document.createElement('label')
+            var checkbox = document.createElement('input')
+            checkbox.type = 'checkbox'
+            checkbox.checked = menusList[k].checked
+            checkbox.setAttribute('uid', menusList[k].uid)
+
+            checkbox.className = menusList[k].indeterminate ? 'is-indeterminate' : ''
+
+
+            checkbox.addEventListener('click', _this.bindClickEvent.bind(checkbox,
+              _this, _this.handleCheckCb)
+            )
+
+            label.appendChild(checkbox)
+            li.appendChild(label)
+          }
+          // 创建文本
+          var span = document.createElement('span')
+          span.innerHTML = menusList[k]['label']
+          span.setAttribute('uid', menusList[k].uid)
+          li.addEventListener('click', _this.bindClickEvent.bind(span, _this, _this.handleDanxuanCb))
+          // 将 label 及 文本追加到 li
+          li.appendChild(span)
+          ul.appendChild(li)
+        }
+        menu.appendChild(ul)
+        wrap.appendChild(menu)
+        wrap.style.top = _this.ele.offsetHeight + 2 + 'px'
+      }
+      this.ele.appendChild(wrap)
+    }
+
+    /**
+     * 点击 checkbox 和 文本回调函数
+     * @param {this} _this 当前实例
+     * @param {Function} cb 回调函数
+     * 当且仅当点击 checkbox 时，传入 cb
+     */
+    EoCascader.prototype.bindClickEvent = function bindClickEvent(_this, cb) {
+      var uid = this.getAttribute('uid')
+      var _thisMenu = _this.menus.flat(Infinity).filter(function (menu) {
+        return menu.uid == uid
+      })
+      typeof cb === 'function' && cb.call(this, _thisMenu, _this, this.checked)
+      _this.createNodes(_this.renderNodes(_thisMenu[0]))
+    }
+
+    EoCascader.prototype.handleDanxuanCb = function handleDanxuanCb(currentMenu, _this) {
+      if(_this.multiple) return
+      var child = currentMenu[0].children
+      if(!child.length) {
+        _this.storageChecked = {};
+        _this.storageChecked[currentMenu[0].uid] = {};
+        _this.storageChecked[currentMenu[0].uid].pathLabels = currentMenu[0].pathLabels
+        _this.storageChecked[currentMenu[0].uid].path = currentMenu[0].path
+        _this.checkedWrap.innerHTML = ''
+        // 渲染回显列表
+        _this.initCheckedLi()
+        _this.checkedCallback();
+      }
+    }
+
+    /**
+     * 点击 checkbox 触发回调
+     * 内部对父级、子级选中状态进行修改
+     * 同时对选中的数据进行存储，调用渲染回显列表函数
+     * @param {Array} currentMenu 当前点击的面板项
+     * @param {this} _this
+     * @param {Boolean} isChecked
+     */
+    EoCascader.prototype.handleCheckCb = function handleCheckCb(currentMenu, _this, isChecked) {
+      // 如果当前点击项为第一级，那么让所有子级都选中
+      // 如果当前项有父级，设置父级选中状态
+      if (currentMenu[0].level !== 1) {
+        currentMenu[0].onChildCheck(isChecked)
+      }
+      currentMenu[0].onParentCheck(isChecked)
+
+      // 存储当前选中状态
+      currentMenu[0].children.length ?
+        _this.showReviewCheckedOb(currentMenu[0]) :
+        _this.handleReviewCheckedOb(currentMenu[0])
+
+      _this.checkedWrap.innerHTML = ''
+      // 渲染回显列表
+      _this.initCheckedLi()
+    }
+
+    EoCascader.prototype.initCheckedLi = function () {
+      var ul = document.createElement('ul')
+      var _this = this
+      if(JSON.stringify(this.storageChecked) === '{}') {
+        return this.checkedWrap.innerHTML = ''
+      }
+      for (const key in this.storageChecked) {
+        if (this.storageChecked.hasOwnProperty(key)) {
+          var li = document.createElement('li')
+          var p = document.createElement('p')
+          var i = document.createElement('i')
+          li.setAttribute('uid', key)
+          p.innerHTML = this.storageChecked[key].pathLabels.join(_this.separator)
+          i.innerHTML = 'x'
+
+          i.addEventListener('click', function () {
+            var uidd = this.parentElement.getAttribute('uid')
+            delete _this.storageChecked[uidd]
+            var fn = function (parent) {
+              for (let i = 0; i < parent.length; i++) {
+                if (parent[i].children.length) {
+                  fn(parent[i].children)
+                } else {
+                  if (parent[i].uid == uidd) {
+                    _this.handleCheckCb([parent[i]], _this, false)
+                    _this.createNodes(_this.menus)
+                  }
+                }
+              }
+            }
+            fn(_this.nodes)
+          })
+          li.appendChild(p)
+          li.appendChild(i)
+          ul.appendChild(li)
+          _this.checkedWrap.appendChild(ul)
+        }
+      }
+      this.ele.appendChild(this.checkedWrap)
+    }
+
+    /**
+     * 根据编辑页面传入的已选ID数组，修改面板数据 menus
+     * @param {Array} uidArr
+     */
+    EoCascader.prototype.findChecked = function (uidArr) {
+      var _this = this
+      // 获取上次已经提交过的三级标签
+      var checkedNodesMatch = []
+      var nodes = this.nodes
+      var recursionFn = function (parent) {
+        for (let i = 0; i < parent.length; i++) {
+          if (parent[i].children.length) {
+            recursionFn(parent[i].children)
+          } else {
+            if (uidArr.includes(parent[i].uid)) {
+              parent[i].checked = true
+              _this.handleCheckCb([parent[i]], _this, true)
+              checkedNodesMatch.push(parent[i])
+            }
+          }
+        }
+      }
+
+      recursionFn(nodes)
+
+      var menus = []
+      var getMenusMatch = function (menu) {
+        if (menu.parent) {
+          menus.push(menu.parent.children)
+          return getMenusMatch(menu.parent)
+        }
+      }
+
+      getMenusMatch(checkedNodesMatch[0])
+
+      menus.reverse().forEach(function (m) {
+        _this.menus.push(m)
+      })
+      _this.createNodes(this.menus)
+    }
+
+    /**
+     * 递归的找到当前 node 下最后一个子级，并将其存入 storageChecked 中
+     * @param {Object} node
+     */
+    EoCascader.prototype.showReviewCheckedOb = function (node) {
+      if (!node.children.length) {
+        this.handleReviewCheckedOb(node)
+      } else {
+        for (let k = 0; k < node.children.length; k++) {
+          this.showReviewCheckedOb(node.children[k])
+        }
+      }
+    }
+
+    /**
+     * 如果当前 node 已选中，存入 storageChecked 中，反之删除 storageChecked 中的当前 node
+     * @param {Object} node
+     */
+    EoCascader.prototype.handleReviewCheckedOb = function (node) {
+      if (node.checked) {
+        this.storageChecked[node.uid] = {};
+        this.storageChecked[node.uid].pathLabels = node.pathLabels;
+        this.storageChecked[node.uid].path = node.path;
+      } else {
+        delete this.storageChecked[node.uid]
+      }
+      this.checkedCallback();
+    }
+
+    /**
+     * 接口：获取所有选中的文本
+     */
+    EoCascader.prototype.getCheckedByText = function () {
+      this.checkedText = []
+      for (const key in this.storageChecked) {
+        if (this.storageChecked.hasOwnProperty(key)) {
+          this.checkedText.push(this.storageChecked[key].pathLabels.join(this.separator))
+        }
+      }
+      return this.checkedText
+    }
+
+    /**
+     * 接口：获取所有选中的ID
+     */
+    EoCascader.prototype.getCheckedByID = function () {
+      this.checkedID = []
+      for (const key in this.storageChecked) {
+        if (this.storageChecked.hasOwnProperty(key)) {
+          this.checkedID.push(key - 0)
+        }
+      }
+      return this.checkedID
+    }
+
+    /**
+     * 接口：获取所有层级id
+     */
+    EoCascader.prototype.getCheckedPaths = function () {
+      this.checkedPaths = []
+      for (const key in this.storageChecked) {
+        if (this.storageChecked.hasOwnProperty(key)) {
+          this.checkedPaths.push(this.storageChecked[key].path)
+        }
+      }
+      return this.checkedPaths
+    }
+
+    return EoCascader
+  }()
+
+  window.eo_cascader = eo_cascader
+
+}(window))

ghy-admin/src/main/resources/static/js/plugins/miniCascader/style.css

@@ -0,0 +1,153 @@
+* {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+html, body {
+  height: 100%;
+}
+body {
+  padding: 100px;
+  box-sizing: border-box;
+}
+.cascader-wrap {
+  min-height: 40px;
+  border: 1px solid #dcdfe6;
+  box-sizing: border-box;
+  border-radius: 4px;
+  position: relative;
+  z-index: 100;
+}
+.cascader-wrap:after {
+  opacity: 1;
+  content: "";
+  border-color: transparent transparent #888 transparent;
+  border-style: solid;
+  height: 0;
+  margin-top: -2px;
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  width: 0;
+  border-width: 0 4px 5px 4px;
+  transform: rotate(180deg);
+  transition: all 0.1s;
+}
+.cascader-wrap.is-show:after {
+  transform: rotate(0deg);
+}
+.cascader-wrap.is-show .eo-cascader-panel {
+  display: block;
+  display: flex;
+}
+.cascader-wrap .eo-clear-btn {
+  display: none;
+}
+.cascader-wrap.is-clear .eo-clear-btn {
+  font-style: normal;
+  position: absolute;
+  right: 7px;
+  top: 50%;
+  margin-top: -7px;
+  font-size: 12px;
+  width: 12px;
+  height: 12px;
+  border: 1px solid #c0c4cc;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 9px;
+  color: #c0c4cc;
+  display: block;
+  cursor: pointer;
+  z-index: 9;
+}
+.cascader-wrap.is-clear:after {
+  opacity: 0;
+}
+.eo-cascader-panel {
+  display: flex;
+  position: absolute;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  top: 40px;
+  left: 0;
+  overflow: hidden;
+  display: none;
+}
+.eo-cascader-menu {
+  min-width: 200px;
+  box-sizing: border-box;
+  color: #606266;
+  border-right: 1px solid #e4e7ed;
+  position: relative;
+  padding: 6px 0;
+  max-height: 350px;
+  overflow-y: auto;
+}
+.eo-cascader-menu:last-child {
+  border-right: none;
+}
+.eo-cascader-menu li {
+  line-height: 30px;
+  cursor: pointer;
+  padding: 0 15px;
+  position: relative;
+}
+.eo-cascader-menu li.has-child:after {
+  content: '>';
+  position: absolute;
+  right: 10px;
+  top: -2px;
+  transform: scaleY(1.8);
+  font-size: 12px;
+  color: #606266;
+}
+.eo-cascader-menu li:hover {
+  background: #f5f7fa;
+}
+.eo-cascader-menu li span {
+  margin-left: 6px;
+}
+.eo-checked-wrap {
+  padding: 5px;
+  position: relative;
+  width: 90%;
+}
+.eo-checked-wrap li {
+  display: flex;
+  font-size: 12px;
+  color: #909399;
+  line-height: 24px;
+  margin: 2px 0 2px 0px;
+  background: #f0f2f5;
+  padding: 0 10px;
+  height: 24px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  align-items: center;
+}
+.eo-checked-wrap li i {
+  font-style: normal;
+  margin-left: 10px;
+  cursor: pointer;
+  width: 12px;
+  height: 12px;
+  background: #c0c4cc;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 9px;
+  color: #fff;
+}
+.eo-checked-wrap li p {
+  margin: 0;
+}
+input[type="checkbox"].is-indeterminate {
+  width: 13px;
+  height: 13px;
+  background-color: #dfedff;
+  -webkit-appearance: none;
+  border: 1px solid #61aaff;
+  border-radius: 2px;
+  outline: none;
+}

ghy-admin/src/main/resources/templates/goods/standard/addTemplate.html

@@ -4,6 +4,10 @@
     <th:block th:include="include :: header('模板新增')"/>
 
     <style>
+        body {
+            padding: 0 !important;
+        }
+
         .pane1 {
             padding-bottom: 0;
         }
@@ -67,9 +71,36 @@
             color: red;
             font-size: large;
         }
+
+        .multiply-symbol {
+            font-size: large;
+            text-align: center;
+        }
+
+        .goodsNumList {
+            padding: 5px 8px 14px 5px;
+            min-height: 40px;
+            border: 1px solid #dcdfe6;
+            box-sizing: border-box;
+            border-radius: 4px;
+        }
+
+        .oneGoodsNumList {
+            padding: 5px 8px 5px 5px;
+            min-height: 40px;
+            border: 1px solid #dcdfe6;
+            box-sizing: border-box;
+            border-radius: 4px;
+        }
+
+        .goodsNum {
+            margin: 2px 0;
+            height: 24px;
+        }
     </style>
 
     <th:block th:include="include :: datetimepicker-css" />
+    <link rel="stylesheet" href="../../../static/js/plugins/miniCascader/style.css" th:href="@{/js/plugins/miniCascader/style.css}">
 </head>
 <body class="gray-bg">
     <form id="addTemplateForm">
@@ -89,22 +120,24 @@
                 <div class="form-horizontal m">
                     <div class="form-group">
                         <label class="col-sm-2 control-label is-required">服务类目：</label>
-                        <div id="categoryCxSelect" class="col-sm-6 row">
-                            <div class="col-sm-3">
-                                <select class="category1 form-control m-b" name="category1" required></select>
-                            </div>
-                            <div class="col-sm-3">
-                                <select class="category2 form-control m-b" name="category2" required></select>
-                            </div>
-                            <div class="col-sm-3">
-                                <select class="category3 form-control m-b" name="category3" required></select>
-                            </div>
-                            <div class="col-sm-3">
-                                <select class="category4 form-control m-b" name="category4" required></select>
+                        <div class="col-sm-6" style="padding-right: 0">
+                            <div id="categoryCxSelect" class="cascader-wrap">
+<!--                                <div class="col-sm-3">-->
+<!--                                    <select class="category1 form-control m-b" name="category1" required></select>-->
+<!--                                </div>-->
+<!--                                <div class="col-sm-3">-->
+<!--                                    <select class="category2 form-control m-b" name="category2" required></select>-->
+<!--                                </div>-->
+<!--                                <div class="col-sm-3">-->
+<!--                                    <select class="category3 form-control m-b" name="category3" required></select>-->
+<!--                                </div>-->
+<!--                                <div class="col-sm-3">-->
+<!--                                    <select class="category4 form-control m-b" name="category4" required></select>-->
+<!--                                </div>-->
                             </div>
                         </div>
-                        <div class="col-sm-1">×</div>
-                        <div class="col-sm-1">
+                        <div class="col-sm-1 multiply-symbol">×</div>
+                        <div id="goodsNumList" class="col-sm-1 oneGoodsNumList">
                             <input type="number" name="goodsNum" class="form-control" required>
                         </div>
                     </div>
@@ -167,18 +200,20 @@
 
                     <div class="form-group">
                         <label class="col-sm-2 control-label is-required">服务地址：</label>
-                        <div id="areaCxSelect" class="col-sm-6 row">
-                            <div class="col-sm-3">
-                                <select class="province form-control m-b" name="province" id="province" required onchange="selectRegion('province', 'city')"></select>
-                            </div>
-                            <div class="col-sm-3">
-                                <select class="city form-control m-b" name="city" id="city" required onchange="selectRegion('city', 'district')"></select>
-                            </div>
-                            <div class="col-sm-3">
-                                <select class="district form-control m-b" name="district" id="district" required onchange="selectRegion('district', 'street')"></select>
-                            </div>
-                            <div class="col-sm-3">
-                                <select class="street form-control m-b" name="streetId" id="streetId" required></select>
+                        <div class="col-sm-6">
+                            <div id="areaCxSelect" class="cascader-wrap">
+<!--                                <div class="col-sm-3">-->
+<!--                                    <select class="province form-control m-b" name="province" id="province" required onchange="selectRegion('province', 'city')"></select>-->
+<!--                                </div>-->
+<!--                                <div class="col-sm-3">-->
+<!--                                    <select class="city form-control m-b" name="city" id="city" required onchange="selectRegion('city', 'district')"></select>-->
+<!--                                </div>-->
+<!--                                <div class="col-sm-3">-->
+<!--                                    <select class="district form-control m-b" name="district" id="district" required onchange="selectRegion('district', 'street')"></select>-->
+<!--                                </div>-->
+<!--                                <div class="col-sm-3">-->
+<!--                                    <select class="street form-control m-b" name="streetId" id="streetId" required></select>-->
+<!--                                </div>-->
                             </div>
                         </div>
                     </div>
@@ -322,8 +357,29 @@
     <th:block th:include="include :: footer"/>
     <th:block th:include="include :: jquery-cxselect-js" />
     <th:block th:include="include :: datetimepicker-js" />
-
+    <script th:src="@{/js/plugins/miniCascader/cascader.js}"></script>
+    <script th:src="@{/data/four-level-area.js}"></script>
     <script type="text/javascript">
+    // 级联下拉
+    let categoryCascader = new eo_cascader([], {
+        elementID: 'categoryCxSelect',
+        multiple: true, // 是否多选
+        separator: '-', // 分割符 山西-太原-小店区 || 山西/太原/小店区
+        clearable: true, // 是否可一键删除已选
+        value: 'goodsCategoryId',
+        label: 'goodsCategoryName',
+        children: 'child',
+        checkedCallback: checkedCategoryCallback
+    });
+    let areaCascader = new eo_cascader(fourLevelAreaList, {
+        elementID: 'areaCxSelect',
+        multiple: false, // 是否多选
+        separator: '-', // 分割符 山西-太原-小店区 || 山西/太原/小店区
+        clearable: false, // 是否可一键删除已选
+        value: 'areaId',
+        label: 'areaName',
+        children: 'child'
+    });
     $(function(){
         var icon = "<i class='fa fa-times-circle'></i> ";
         // $("#addTemplateForm").validate({
@@ -333,7 +389,6 @@
         //     }
         // });
 
-        // 级联下拉
         $.ajax({
             type: "POST",
             dataType:"json",
@@ -342,36 +397,47 @@
             contentType: 'application/json',
             success: function (result) {
                 if (result.code == web_status.SUCCESS) {
-                    $('#categoryCxSelect').cxSelect({
-                        selects: ['category1', 'category2', 'category3', 'category4'],
-                        jsonValue: 'deptGoodsCategoryId',
-                        jsonName: 'goodsCategoryName',
-                        jsonSub: 'child',
-                        data: result.data
-                    });
+<!--                    $('#categoryCxSelect').cxSelect({-->
+<!--                        selects: ['category1', 'category2', 'category3', 'category4'],-->
+<!--                        jsonValue: 'deptGoodsCategoryId',-->
+<!--                        jsonName: 'goodsCategoryName',-->
+<!--                        jsonSub: 'child',-->
+<!--                        data: result.data-->
+<!--                    });-->
+                    categoryCascader = new eo_cascader(result.data, {
+                        elementID: 'categoryCxSelect',
+                        multiple: true, // 是否多选
+                        checkedValue: null,
+                        separator: '-', // 分割符 山西-太原-小店区 || 山西/太原/小店区
+                        clearable: true, // 是否可一键删除已选
+                        value: 'deptGoodsCategoryId',
+                        label: 'goodsCategoryName',
+                        children: 'child',
+                        checkedCallback: checkedCategoryCallback
+                    })
                 } else {
                     $.modal.msgError("数据加载错误，请重试！")
                 }
             }
         })
 
-        $.ajax({
-            type: "POST",
-            dataType:"json",
-            url: ctx + "system/area/list",
-            success: function (result) {
-                if (result.code == web_status.SUCCESS) {
-                    $('#areaCxSelect').cxSelect({
-                        selects: ['province', 'city', 'district', 'street'],
-                        jsonValue: 'areaId',
-                        jsonName: 'areaName',
-                        data: result.data
-                    });
-                } else {
-                    $.modal.msgError("数据加载错误，请重试！")
-                }
-            }
-        })
+<!--        $.ajax({-->
+<!--            type: "POST",-->
+<!--            dataType:"json",-->
+<!--            url: ctx + "system/area/list",-->
+<!--            success: function (result) {-->
+<!--                if (result.code == web_status.SUCCESS) {-->
+<!--                    $('#areaCxSelect').cxSelect({-->
+<!--                        selects: ['province', 'city', 'district', 'street'],-->
+<!--                        jsonValue: 'areaId',-->
+<!--                        jsonName: 'areaName',-->
+<!--                        data: result.data-->
+<!--                    });-->
+<!--                } else {-->
+<!--                    $.modal.msgError("数据加载错误，请重试！")-->
+<!--                }-->
+<!--            }-->
+<!--        })-->
 
         $("#servDate").datetimepicker({
             format: "yyyy-mm-dd",
@@ -409,45 +475,98 @@
         // })
     });
 
+    function checkedCategoryCallback() {
+        let checkedIdArr = categoryCascader.getCheckedByID();
+        if (checkedIdArr && checkedIdArr.length > 0) {
+            $('#goodsNumList').html(null);
+            $('#goodsNumList').removeClass('oneGoodsNumList');
+            $('#goodsNumList').addClass('goodsNumList');
+            checkedIdArr.forEach(function(id, index) {
+                $('#goodsNumList').append('<input type="number" name="goodsNum' + id + '" class="form-control goodsNum" required>');
+            });
+        } else {
+            $('#goodsNumList').removeClass('goodsNumList');
+            $('#goodsNumList').addClass('oneGoodsNumList');
+            $('#goodsNumList').html('<input type="number" name="goodsNum" class="form-control" required>');
+        }
+    }
+
     function changeInformationFeeUnit(unit) {
         this.$('#informationFeeUnit').html(unit + '<span class="caret"></span>');
     }
 
-    function selectRegion(regionLevelName, nextRegionLevelName) {
-        var regionId = $("#" + regionLevelName).val();
-        if ($.common.isEmpty(regionId)) {
-            return;
+<!--    function selectRegion(regionLevelName, nextRegionLevelName) {-->
+<!--        var regionId = $("#" + regionLevelName).val();-->
+<!--        if ($.common.isEmpty(regionId)) {-->
+<!--            return;-->
+<!--        }-->
+
+<!--        //Ajax调用处理-->
+<!--        $.ajax({-->
+<!--            type: "POST",-->
+<!--            dataType:"json",-->
+<!--            url: ctx + "system/area/list",-->
+<!--            data: {parentCode: regionId},-->
+<!--            success: function (result) {-->
+<!--                if (result.code == web_status.SUCCESS) {-->
+<!--                    $('#areaCxSelect').cxSelect({-->
+<!--                        selects: [nextRegionLevelName],-->
+<!--                        jsonValue: 'areaId',-->
+<!--                        jsonName: 'areaName',-->
+<!--                        data: result.data-->
+<!--                    });-->
+<!--                } else {-->
+<!--                    $.modal.msgError("数据加载错误，请重试！")-->
+<!--                }-->
+<!--            }-->
+<!--        })-->
+<!--    }-->
+
+    function validSpecialComponent() {
+        // 类目
+        let categoryIds = categoryCascader.getCheckedByID();
+        if (!categoryIds || categoryIds.length === 0) {
+            $.modal.msgError("服务类目不能为空")
+            return false;
         }
 
-        //Ajax调用处理
-        $.ajax({
-            type: "POST",
-            dataType:"json",
-            url: ctx + "system/area/list",
-            data: {parentCode: regionId},
-            success: function (result) {
-                if (result.code == web_status.SUCCESS) {
-                    $('#areaCxSelect').cxSelect({
-                        selects: [nextRegionLevelName],
-                        jsonValue: 'areaId',
-                        jsonName: 'areaName',
-                        data: result.data
-                    });
-                } else {
-                    $.modal.msgError("数据加载错误，请重试！")
-                }
-            }
-        })
+        // 地区
+        let checkedAreaPathList = areaCascader.getCheckedPaths();
+        if (!checkedAreaPathList || checkedAreaPathList.length === 0) {
+            $.modal.msgError("服务地址不能为空")
+            return false;
+        }
+
+        return true;
     }
 
     function submitOrder() {
-        if ($.validate.form()) {
+        if (!validSpecialComponent()) return;
+<!--        if ($.validate.form()) {-->
+        if (true) {
             var data = $("#addTemplateForm").serializeArray();
             var params= {};
             data.forEach(function (item){
                 params[item.name] = item.value;
             });
 
+            let categoryIds = categoryCascader.getCheckedByID();
+            let orderGoodsStandards = [];
+            categoryIds.forEach(function (item){
+                orderGoodsStandards.push({
+                    deptCategoryId: item,
+                    goodsStandardNum: $(".goodsNum[name=goodsNum" + item + "]").val()
+                });
+            });
+            params.orderGoodsStandards = orderGoodsStandards;
+            params.categoryId1 = categoryCascader.getCheckedPaths()[0][0];
+            params.categoryId2 = categoryCascader.getCheckedPaths()[0][1];
+            params.categoryId3 = categoryCascader.getCheckedPaths()[0][2];
+            params.provinceId = areaCascader.getCheckedPaths()[0][0];
+            params.cityId = areaCascader.getCheckedPaths()[0][1];
+            params.districtId = areaCascader.getCheckedPaths()[0][2];
+            params.streetId = areaCascader.getCheckedPaths()[0][3];
+
             $.ajax({
                 type: "POST",
                 dataType:"json",
@@ -466,6 +585,7 @@
     }
 
     function addTemplate() {
+        if (!validSpecialComponent()) return;
         if ($.validate.form()) {
             var data = $("#addTemplateForm").serializeArray();
             var params= {};
@@ -473,6 +593,23 @@
                 params[item.name] = item.value;
             });
 
+            let categoryIds = categoryCascader.getCheckedByID();
+            let orderGoodsStandards = [];
+            categoryIds.forEach(function (item){
+                orderGoodsStandards.push({
+                    deptCategoryId: item,
+                    goodsStandardNum: $(".goodsNum[name=goodsNum" + item + "]").val()
+                });
+            });
+            params.orderGoodsStandards = orderGoodsStandards;
+            params.categoryId1 = categoryCascader.getCheckedPaths()[0][0];
+            params.categoryId2 = categoryCascader.getCheckedPaths()[0][1];
+            params.categoryId3 = categoryCascader.getCheckedPaths()[0][2];
+            params.provinceId = areaCascader.getCheckedPaths()[0][0];
+            params.cityId = areaCascader.getCheckedPaths()[0][1];
+            params.districtId = areaCascader.getCheckedPaths()[0][2];
+            params.streetId = areaCascader.getCheckedPaths()[0][3];
+
             $.ajax({
                 type: "POST",
                 dataType:"json",