代码上传

epmet-oper-web/src/App.vue

@@ -5,8 +5,10 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
 import Cookies from 'js-cookie'
 import { messages } from '@/i18n'
+import Vue from 'vue'
 export default {
   watch: {
     '$i18n.locale': 'i18nHandle'
@@ -15,6 +17,7 @@ export default {
     this.i18nHandle(this.$i18n.locale)
   },
   methods: {
+
     i18nHandle (val, oldVal) {
       Cookies.set('language', val)
       document.querySelector('html').setAttribute('lang', val)
@@ -23,6 +26,57 @@ export default {
       if (this.$route.name !== 'login' && oldVal) {
         window.location.reload()
       }
+    },
+    refreshView () {
+      // In order to make the cached page re-rendered
+      this.$store.dispatch('delAllCachedViews', this.$route)
+
+      const { fullPath } = this.$route
+
+      this.$nextTick(() => {
+        this.$router.replace({
+          path: '/redirect' + fullPath
+        })
+      })
+    },
+    ...mapActions(['setClientHeight', 'setSize', 'setResolution'])
+  },
+  mounted () {
+    const that = this
+    // 根据屏幕分辨率调整size
+    if (document.documentElement.clientHeight < 800) {
+      // medium大小
+      that.setSize('medium')
+      // 屏幕分辨率
+      that.setResolution('small')
+      Vue.prototype.$ELEMENT = { size: 'medium', zIndex: 3000 }
+    } else {
+      // 默认大小
+      that.setSize('medium')
+      // 屏幕分辨率
+      that.setResolution('medium')
+      Vue.prototype.$ELEMENT = { size: 'medium', zIndex: 3000 }
+    }
+
+    window.onresize = () => {
+      return (() => {
+        if (!that.timer) {
+          that.timer = true
+          // 这里的定时器是为了避免window.onresize时过于频繁的刷新vuex
+          setTimeout(function () {
+            that.setClientHeight(document.documentElement.clientHeight)
+            // debugger
+            if (document.documentElement.clientHeight < 800) {
+              // medium大小
+              that.setSize('medium')
+            } else {
+              // 默认大小
+              that.setSize('medium')
+            }
+            that.timer = false
+          }, 150)
+        }
+      })()
     }
   }
 }

epmet-oper-web/src/js/columns/code/temp.js

@@ -0,0 +1,56 @@
+export default [
+  {
+    key: 'client',
+    title: '客户',
+    type: 'select',
+    rule: [{
+      required: true,
+      message: '请选择客户',
+      trigger: 'blur'
+    }],
+    display: ['formA', 'formU', 'table', 'model'],
+    fixed: true,
+    block: true,
+    width: 120
+  },
+  {
+    key: 'type',
+    title: '类型',
+    type: 'radio',
+    rule: [{
+      required: true,
+      message: '请选择类型',
+      trigger: 'blur'
+    }],
+    display: ['formA', 'formU', 'table', 'model'],
+    fixed: true,
+    block: true,
+    width: 120
+  },
+  {
+    key: 'userVersion',
+    title: '版本号',
+    type: 'input',
+    rule: [{
+      required: true,
+      message: '请输入版本号',
+      trigger: 'blur'
+    }],
+    display: ['formA', 'formU', 'table', 'model'],
+    fixed: true,
+    block: true,
+    width: 120
+  },
+  {
+    key: 'userDesc',
+    title: '代码描述',
+    type: 'textarea',
+    rule: [{
+      required: true,
+      message: '请输入代码描述',
+      trigger: 'blur'
+    }],
+    display: ['formA', 'formU', 'model'],
+    block: true
+  }
+]

epmet-oper-web/src/js/columns/columns.js

@@ -0,0 +1,6 @@
+import Temp from './code/temp'
+
+export default {
+  Temp: Temp // 代码上传——上传代码
+
+}

epmet-oper-web/src/js/columns/readme.js

@@ -0,0 +1,26 @@
+/**
+ * js属性说明
+ */
+export default {
+  mokuaiguanli: [
+    {
+      key: 'resourcename', //属性key，对应数据库字段名称
+      title: '模块名称', //属性中文名
+      type: 'input', //组件类型
+      rule: [
+        //组件规则
+        {
+          required: true, //是否必填
+          message: '请输入模块名称', //没有填写时的提示信息
+          pattern: app.util.validateForm('phone'), //根据一定规则进行判断
+          trigger: 'blur'
+        }
+      ],
+      display: ['formA', 'formU', 'table', 'model'], //需要显示该组件的模块
+      fixed: true, //
+      width: 80,
+      showFlag: '1', //需要判断显隐的标识
+      show: true //需要显隐控制，默认为显示
+    }
+  ]
+}

epmet-oper-web/src/js/service.js

@@ -0,0 +1,227 @@
+/* eslint-disable */
+import column from '@js/columns/columns'
+
+export default {
+	/**
+	 * 获取列
+	 *
+	 * @param keyword
+	 * @param type
+	 * @returns {Array}
+	 */
+  getColumns (keyword, type) {
+    if (!keyword) {
+      return []
+    }
+    let columns = column[keyword]
+    let colFrozen = [] // 左固定列
+    let colNormal = [] // 非固定列
+    columns.forEach(column => {
+      let _col = this.formatCol(column, type)
+      if (_col) {
+        if (_col.isFrozen) {
+          colFrozen.push(_col)
+        } else {
+          colNormal.push(_col)
+        }
+      }
+    })
+    if (type === 'table' || type === 'formA' || type === 'formU') {
+      return colFrozen.concat(colNormal)
+    }
+    return [colFrozen, colNormal]
+  },
+
+	/**
+	 * 格式化列
+	 *
+	 * @param col
+	 * @param type
+	 * @returns {*}
+	 */
+  formatCol (column, type) {
+    // 防止污染column.js基础配置
+    let col = {}
+    Object.assign(col, column)
+    if (column.display && column.display.length > 0) {
+      switch (type) {
+        case 'table':
+          col.align = 'center'
+          col.headerAlign = 'center'
+          col.isResize = true // 是否拖动单元格
+          if (!column.display.includes(type)) {
+            return null
+          }
+          if (column.fixed) {
+            col.isFrozen = true
+          }
+          if (!column.width) {
+            col.width = 120
+          }
+          col.formatter = rowData => {
+            // 没有数值
+            // debugger
+            if (!rowData[column.key] && rowData[column.key] != '0') return '--'
+            if (column.format) {
+              switch (column.format) {
+                case 'date':
+                  return app.util.formatDate(rowData[column.key], column.fmt)
+                  break
+                case 'decimal': // 数字格式化
+                  return Number(rowData[column.key].toFixed(column.num))
+                  break
+                default:
+                  return rowData[column.key]
+              }
+            } else {
+              return rowData[column.key]
+            }
+          }
+          if (column.renderType) {
+            col.render = function (data, row) {
+              switch (column.renderType) {
+                case 'image':
+                  return '<img style="width:30pxheight: 30px" src="' + data + '"/>'
+                  break
+                case 'icon':
+                  return '<i class="el-icon-" + col.icon></i>'
+                  break
+                case 'color':
+                  return (
+                    '<span style="width:20% height: 100% color: #fffdisplay: inline-block line-height:23px border-radius:4px background-color: ' +
+                    getTagColor(data) +
+                    '">' +
+                    data +
+                    '</span>'
+                  )
+                  break
+                default:
+                  return '<span></span>'
+              }
+            }
+          }
+          break
+        case 'search':
+          if (!column.display.includes(type)) {
+            return null
+          }
+          if (column.type) {
+            col.formType = column.type
+          }
+          break
+        case 'formA':
+        case 'formU':
+          if (!column.display.includes(type)) {
+            return null
+          }
+          if (column.disabled && column.disabled.includes(type)) {
+            col.disabled = true
+          } else {
+            col.disabled = false
+          }
+          break
+        default:
+          return col
+      }
+      return col
+    } else {
+      return col
+    }
+  },
+
+	/**
+	 * 获取验证规则
+	 *
+	 * @param keyword
+	 */
+  getRules (keyword) {
+    let rules = {}
+    let _columns = column[keyword]
+    if (_columns) {
+      _columns.forEach(_column => {
+        if (_column.rule) {
+          _column.rule.forEach(_col => {
+            if (!_col.message) {
+              Object.assign(_col, { message: _col.title + '不合法' })
+            }
+          })
+          rules[_column.key] = _column.rule
+        }
+      })
+    }
+    return rules
+  },
+
+	/**
+	 * 获取model
+	 *
+	 * @param keyword
+	 */
+  getModel (keyword) {
+    let _model = {}
+    let _columns = column[keyword]
+    if (_columns) {
+      _columns.forEach(_column => {
+        if (_column.display && _column.display.includes('model')) {
+          _model[_column.key] = this.initValue(_column)
+        }
+      })
+    }
+    return _model
+  },
+
+  /**
+   * 初始化 变量值
+   * @param col
+   * @returns {string|number|Array}
+   */
+  initValue (col) {
+    let value
+    switch (col.type) {
+      case 'input':
+      case 'textarea':
+        value = ''
+        break
+      case 'inputNum':
+      case 'switch':
+        value = ''
+        break
+      case 'counter':
+        value = 0
+        break
+      case 'select':
+        value = ''
+        break
+      case 'radio':
+        value = 1
+        break
+      case 'selectMul':
+      case 'checkbox':
+        value = []
+        break
+      case 'date':
+        value = ''
+        break
+      case 'cascader':
+        value = []
+        break
+      default:
+        value = ''
+        break
+    }
+
+    return value
+  }
+}
+function getTagColor (title) {
+  let color
+  switch (title) {
+    case '启用':
+      color = '#2fcc2f'
+      break
+    case '停用':
+      color = 'red'
+      break
+  }
+  return color
+}

epmet-oper-web/src/js/store/index.js

@@ -0,0 +1,47 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import cloneDeep from 'lodash/cloneDeep'
+import user from './modules/user'
+import app from './modules/app'
+import tagsView from './modules/tagsView'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  namespaced: true,
+  state: {
+    // 导航条, 布局风格, defalut(白色) / colorful(鲜艳)
+    navbarLayoutType: 'colorful',
+    // 侧边栏, 布局皮肤, default(白色) / dark(黑色)
+    sidebarLayoutSkin: 'dark',
+    // 侧边栏, 折叠状态
+    sidebarFold: false,
+    // 侧边栏, 菜单
+    sidebarMenuList: [],
+    sidebarMenuActiveName: '',
+    // 内容, 是否需要刷新
+    contentIsNeedRefresh: false,
+    // 内容, 标签页(默认添加首页)
+    contentTabs: [
+      {
+        ...window.SITE_CONFIG['contentTabDefault'],
+        'name': 'home',
+        'title': 'home'
+      }
+    ],
+    contentTabsActiveName: 'home'
+  },
+  modules: {
+    user,
+    app,
+    tagsView
+  },
+  mutations: {
+    // 重置vuex本地储存状态
+    resetStore (state) {
+      Object.keys(state).forEach((key) => {
+        state[key] = cloneDeep(window.SITE_CONFIG['storeState'][key])
+      })
+    }
+  }
+})

epmet-oper-web/src/js/store/modules/app.js

@@ -0,0 +1,36 @@
+import type from '../type'
+
+export default {
+  state: {
+    clientHeight: document.documentElement.clientHeight,
+    size: 'medium',
+    resolution: 'medium'
+  },
+  getters: {
+    clientHeight: state => state.clientHeight,
+    size: state => state.size,
+    resolution: state => state.resolution
+  },
+  mutations: {
+    [type.client_height] (state, payload) {
+      state.clientHeight = payload
+    },
+    [type.size] (state, payload) {
+      state.size = payload
+    },
+    [type.resolution] (state, payload) {
+      state.resolution = payload
+    }
+  },
+  actions: {
+    setClientHeight ({ commit }, payload) {
+      commit(type.client_height, payload)
+    },
+    setSize ({ commit }, payload) {
+      commit(type.size, payload)
+    },
+    setResolution ({ commit }, payload) {
+      commit(type.resolution, payload)
+    }
+  }
+}

epmet-oper-web/src/js/store/modules/tagsView.js

@@ -0,0 +1,161 @@
+const tagsView = {
+  state: {
+    visitedViews: [],
+    cachedViews: []
+  },
+  mutations: {
+    ADD_VISITED_VIEW: (state, view) => {
+      if (state.visitedViews.some(v => v.path === view.path)) return
+      state.visitedViews.push(
+        Object.assign({}, view, {
+          title: view.meta.title || 'no-name'
+        })
+      )
+    },
+    ADD_CACHED_VIEW: (state, view) => {
+      if (state.cachedViews.includes(view.name)) return
+      if (!view.meta.noCache) {
+        state.cachedViews.push(view.name)
+      }
+    },
+
+    DEL_VISITED_VIEW: (state, view) => {
+      for (const [i, v] of state.visitedViews.entries()) {
+        if (v.path === view.path) {
+          state.visitedViews.splice(i, 1)
+          break
+        }
+      }
+    },
+    DEL_CACHED_VIEW: (state, view) => {
+      for (const i of state.cachedViews) {
+        if (i === view.name) {
+          const index = state.cachedViews.indexOf(i)
+          state.cachedViews.splice(index, 1)
+          break
+        }
+      }
+    },
+
+    DEL_OTHERS_VISITED_VIEWS: (state, view) => {
+      for (const [i, v] of state.visitedViews.entries()) {
+        if (v.path === view.path) {
+          state.visitedViews = state.visitedViews.slice(i, i + 1)
+          break
+        }
+      }
+    },
+    DEL_OTHERS_CACHED_VIEWS: (state, view) => {
+      for (const i of state.cachedViews) {
+        if (i === view.name) {
+          const index = state.cachedViews.indexOf(i)
+          state.cachedViews = state.cachedViews.slice(index, index + 1)
+          break
+        }
+      }
+    },
+
+    DEL_ALL_VISITED_VIEWS: state => {
+      state.visitedViews = []
+    },
+    DEL_ALL_CACHED_VIEWS: state => {
+      state.cachedViews = []
+    },
+
+    UPDATE_VISITED_VIEW: (state, view) => {
+      for (let v of state.visitedViews) {
+        if (v.path === view.path) {
+          v = Object.assign(v, view)
+          break
+        }
+      }
+    }
+  },
+  actions: {
+    addView ({ dispatch }, view) {
+      dispatch('addVisitedView', view)
+      dispatch('addCachedView', view)
+    },
+    addVisitedView ({ commit }, view) {
+      commit('ADD_VISITED_VIEW', view)
+    },
+    addCachedView ({ commit }, view) {
+      commit('ADD_CACHED_VIEW', view)
+    },
+
+    delView ({ dispatch, state }, view) {
+      return new Promise(resolve => {
+        dispatch('delVisitedView', view)
+        dispatch('delCachedView', view)
+        resolve({
+          visitedViews: [...state.visitedViews],
+          cachedViews: [...state.cachedViews]
+        })
+      })
+    },
+    delVisitedView ({ commit, state }, view) {
+      return new Promise(resolve => {
+        commit('DEL_VISITED_VIEW', view)
+        resolve([...state.visitedViews])
+      })
+    },
+    delCachedView ({ commit, state }, view) {
+      return new Promise(resolve => {
+        commit('DEL_CACHED_VIEW', view)
+        resolve([...state.cachedViews])
+      })
+    },
+
+    delOthersViews ({ dispatch, state }, view) {
+      return new Promise(resolve => {
+        dispatch('delOthersVisitedViews', view)
+        dispatch('delOthersCachedViews', view)
+        resolve({
+          visitedViews: [...state.visitedViews],
+          cachedViews: [...state.cachedViews]
+        })
+      })
+    },
+    delOthersVisitedViews ({ commit, state }, view) {
+      return new Promise(resolve => {
+        commit('DEL_OTHERS_VISITED_VIEWS', view)
+        resolve([...state.visitedViews])
+      })
+    },
+    delOthersCachedViews ({ commit, state }, view) {
+      return new Promise(resolve => {
+        commit('DEL_OTHERS_CACHED_VIEWS', view)
+        resolve([...state.cachedViews])
+      })
+    },
+
+    delAllViews ({ dispatch, state }, view) {
+      return new Promise(resolve => {
+        dispatch('delAllVisitedViews', view)
+        dispatch('delAllCachedViews', view)
+        resolve({
+          visitedViews: [...state.visitedViews],
+          cachedViews: [...state.cachedViews]
+        })
+      })
+    },
+    delAllVisitedViews ({ commit, state }) {
+      return new Promise(resolve => {
+        commit('DEL_ALL_VISITED_VIEWS')
+        resolve([...state.visitedViews])
+      })
+    },
+    delAllCachedViews ({ commit, state }) {
+      return new Promise(resolve => {
+        commit('DEL_ALL_CACHED_VIEWS')
+        resolve([...state.cachedViews])
+      })
+    },
+
+    updateVisitedView ({ commit }, view) {
+      commit('UPDATE_VISITED_VIEW', view)
+    }
+  }
+}
+
+export default tagsView

epmet-oper-web/src/js/store/modules/user.js

@@ -0,0 +1,8 @@
+export default {
+  state: {
+    id: 0,
+    name: '',
+    realName: '',
+    superAdmin: 0
+  }
+}

epmet-oper-web/src/js/store/type.js

@@ -0,0 +1,5 @@
+export default {
+  client_height: 'CLIENT_HEIGHT',
+  size: 'SIZE',
+  resolution: 'RESOLUTION'
+}

epmet-oper-web/src/main.js

@@ -3,7 +3,7 @@ import Element from 'element-ui'
 import App from '@/App'
 import i18n from '@/i18n'
 import router from '@/router'
-import store from '@/store'
+// import store1 from '@/store'
 import '@/icons'
 import '@/element-ui/theme/index.css'
 import '@/assets/scss/aui.scss'
@@ -21,10 +21,14 @@ import cloneDeep from 'lodash/cloneDeep'
 
 // axios封装
 import ajax from '@/js/ajax'
+// service
+import service from '@/js/service'
+// vuex处理多个组件共享状态
+import store from '@/js/store'
 
 window.app = Object.assign({}, {
-  ajax
-
+  ajax,
+  service
 })
 
 Vue.config.productionTip = false

epmet-oper-web/src/router/index.js

@@ -83,7 +83,7 @@ router.beforeEach((to, from, next) => {
       return
     }
     window.SITE_CONFIG['dictList'] = res.data
-  }).catch(() => {})
+  }).catch(() => { })
   // 获取菜单列表, 添加并全局变量保存
   http.get('/oper/access/menu/nav').then(({ data: res }) => {
     if (res.code !== 0) {
@@ -92,6 +92,7 @@ router.beforeEach((to, from, next) => {
     }
     window.SITE_CONFIG['menuList'] = res.data
     fnAddDynamicMenuRoutes(window.SITE_CONFIG['menuList'])
+    // next({ ...to, replace: true })
     next({ ...to, replace: true })
   }).catch(() => {
     next({ name: 'login' })

epmet-oper-web/src/store/index.js

@@ -31,6 +31,7 @@ export default new Vuex.Store({
   },
   modules: {
     user
+
   },
   mutations: {
     // 重置vuex本地储存状态

epmet-oper-web/src/views/components/CDialog.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="dialog">
+    <el-dialog :title="title"
+               lock-scroll
+               :visible.sync="visible"
+               :modal="modal"
+               :width="width+'%'"
+               :top="top"
+               :before-close="handleClose"
+               :append-to-body="isNest"
+               :close-on-click-modal="false">
+      <!-- <div :style="{height:formHeight+'px',overflowY:'auto',overflowX:'hidden'}"> -->
+      <div :style="{height:formHeight+'px',overflowY:'auto',overflowX:'hidden'}">
+        <slot></slot>
+      </div>
+      <span v-if="showFooter"
+            slot="footer"
+            class="dialog-footer">
+        <el-button v-if="showCancel"
+                   @click="handleCancel">{{cancel}}</el-button>
+        <el-button v-if="showConfirm"
+                   type="primary"
+                   :disabled="disabled"
+                   @click="handleConfirm">{{confirm}}</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapGetters } from 'vuex'
+export default {
+  computed: {
+    formHeight () {
+      // let clientHeight = document.documentElement.clientHeight
+      return this.clientHeight * 0.6 * this.dialogHeight
+    },
+    ...mapGetters(['clientHeight'])
+  },
+  props: {
+    title: {
+      type: String,
+      default: '提示'
+    },
+    cancel: {
+      type: String,
+      default: '取消'
+    },
+    confirm: {
+      type: String,
+      default: '确定'
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: Number,
+      default: 70
+    },
+    top: {
+      type: String,
+      default: '60px'
+    },
+    isNest: {
+      type: Boolean,
+      default: true
+    },
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    showConfirm: {
+      type: Boolean,
+      default: true
+    },
+    showCancel: {
+      type: Boolean,
+      default: true
+    },
+    dialogHeight: {
+      type: Number,
+      default: 1
+    },
+    showFooter: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    handleClose () {
+      // 点击右上角关闭按钮，双向数据绑定的问题
+      this.$emit('cancel')
+    },
+    handleCancel () {
+      this.$emit('cancel')
+    },
+    handleConfirm () {
+      this.$emit('ok')
+    }
+  }
+}
+</script>
+
+<style>
+</style>

epmet-oper-web/src/views/components/CForm.vue

@@ -0,0 +1,693 @@
+<template>
+  <div class="form">
+    <el-row>
+      <el-form :model="model"
+               :rules="rules"
+               ref="form"
+               enctype="multipart/form-data"
+               :inline="inline"
+               :style="{margin:'0 auto',width:formWidth,textAlign:formTextAlign}">
+        <template v-if="formType === 'auto'">
+          <el-form-item v-for="(column,i) in columns"
+                        v-show="column.showFlag==='1' ? column.show : true"
+                        :label="column.title"
+                        :prop="column.key"
+                        :label-width="(column.LabelWidth?column.LabelWidth:labelWidth) + 'px'"
+                        :style="{display:column.block?'block':'inline-block'}"
+                        :key="i">
+
+            <el-input v-if="column.type === 'input'"
+                      v-show="column.showFlag==='1' ? column.show : true"
+                      v-model="model[column.key]"
+                      :readonly="column.readonly?column.readonly:false"
+                      :disabled="column.disabled?column.disabled:false"
+                      :placeholder="column.placeholder?column.placeholder:column.title"
+                      :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
+                      clearable>
+
+            </el-input>
+
+            <!--密码输入框-->
+            <el-input v-if="column.type === 'password'"
+                      type="password"
+                      v-show="column.showFlag==='1' ? column.show : true"
+                      v-model="model[column.key]"
+                      :readonly="column.readonly?column.readonly:false"
+                      :disabled="column.disabled?column.disabled:false"
+                      :placeholder="column.placeholder?column.placeholder:column.title"
+                      :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
+                      clearable>
+              <!-- <icon name="bell"
+                    scale="20"></icon> -->
+            </el-input>
+
+            <!--带选择按钮输入框-->
+            <template v-if="column.type === 'inputSelect'"
+                      v-show="column.showFlag==='1' ? column.show : true">
+
+              <c-tree-dialog-single :ref="'tree_'+column.key"
+                                    :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
+                                    :inputModel="model[column.key]"
+                                    :placeholder="column.placeholder?column.placeholder:column.title"
+                                    :type="'primary'"
+                                    :title="column.title"
+                                    :url="column.url"
+                                    :params="column.params?column.params:((!column.params&&column.diyParams)?setDiyParams(column.key,i):{})"
+                                    :judgeParams="column.judgeParams?column.judgeParams:'1'"
+                                    :freshen='column.freshen'
+                                    :defaultExpandKeys="defaultExpandKeys"
+                                    :defaultExpandAll="column.defaultExpandAll?column.defaultExpandAll:false"
+                                    :defaultOnlyLeaf="column.defaultOnlyLeaf?column.defaultOnlyLeaf:false"
+                                    :formKey="column.key"
+                                    :defaultNodeKey="defaultNodeKey(column.key,i)"
+                                    :defaultExpandOnClickNode="column.defaultExpandOnClickNode?column.defaultExpandOnClickNode:false"
+                                    :formIndex="i"
+                                    @handleOk="handleOk"
+                                    @handleClear="handleClear">
+              </c-tree-dialog-single>
+
+            </template>
+            <!-- 带选择按钮的多选输入框 -->
+            <template v-if="column.type === 'inputSelectMulti'"
+                      v-show="column.showFlag==='1' ? column.show : true">
+              <c-tree-dialog-check-box :ref="'multitree_'+column.key"
+                                       :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
+                                       :inputModel="model[column.key]"
+                                       :handleId="model[column.keyid]"
+                                       :placeholder="column.placeholder?column.placeholder:column.title"
+                                       :type="'primary'"
+                                       :title="column.title"
+                                       :url="column.url"
+                                       :params="inputSelectMultiParams?inputSelectMultiParams:(column.params?column.params:((!column.params&&column.diyParams)?setDiyParams(column.key,i):{}))"
+                                       :freshen='column.freshen'
+                                       :defaultExpandKeys="defaultExpandKeys"
+                                       :defaultExpandAll="column.defaultExpandAll?column.defaultExpandAll:false"
+                                       :defaultOnlyLeaf="column.defaultOnlyLeaf?column.defaultOnlyLeaf:false"
+                                       :formKey="column.key"
+                                       :defaultNodeKey="defaultNodeKey(column.key,i)"
+                                       :defaultExpandOnClickNode="column.defaultExpandOnClickNode?column.defaultExpandOnClickNode:false"
+                                       :formIndex="i"
+                                       @handleSure="handleSure"
+                                       @handleDel="handleDel"
+                                       @handleClear="multihandleClear">
+              </c-tree-dialog-check-box>
+            </template>
+            <!--数字输入框-->
+            <el-input v-else-if="column.type === 'inputNum'"
+                      v-show="column.showFlag==='1' ? column.show : true"
+                      :label="column.title"
+                      :disabled="column.disabled?column.disabled:false"
+                      :readonly="column.readonly?column.readonly:false"
+                      :placeholder="column.placeholder?column.placeholder:column.title"
+                      v-model.number="model[column.key]"
+                      :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
+            </el-input>
+            <!--计数器-->
+            <el-input-number v-else-if="column.type === 'counter'"
+                             v-show="column.showFlag==='1' ? column.show : true"
+                             v-model="model[column.key]"
+                             :step="column.option.step?column.option.step:0"
+                             :min="column.option.min?column.option.min:0"
+                             :max="column.option.max?column.option.max:100"
+                             :precision="column.option.precision?column.option.precision:0"
+                             :disabled="column.disabled?column.disabled:false"
+                             :readonly="column.readonly?column.readonly:false"
+                             :style="{width:column.itemWidth?column.itemWidth:itemWidth}" />
+            <!--单选按钮组-->
+            <el-radio-group v-else-if="column.type === 'radio'"
+                            v-show="column.showFlag==='1' ? column.show : true"
+                            v-model="model[column.key]"
+                            :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
+              <el-radio v-for="item in optionData[column.key]"
+                        :label="item.label"
+                        :key="item.value">
+                {{item.label}}
+              </el-radio>
+            </el-radio-group>
+            <!--多选按钮组-->
+            <el-checkbox-group v-else-if="column.type === 'checkbox'"
+                               v-show="column.showFlag==='1' ? column.show : true"
+                               v-model="model[column.key]"
+                               :min="0"
+                               :max="8"
+                               :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
+              <el-checkbox v-for="item in optionData[column.key]"
+                           :label="item.value"
+                           :key="item.value"
+                           :disabled="item.disabled">{{item.label}}
+              </el-checkbox>
+            </el-checkbox-group>
+            <!--下拉列表-->
+            <el-select v-else-if="column.type === 'select'"
+                       v-show="column.showFlag==='1' ? column.show : true"
+                       v-model="model[column.key]"
+                       clearable
+                       :filterable="column.filterable?column.filterable:false"
+                       :placeholder="column.placeholder?column.placeholder:column.title"
+                       :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
+                       @change="handleSelectChange(model[column.key],column.key,i)">
+              <el-option v-for="item in optionData[column.key]"
+                         :key="item.value"
+                         :label="item.label"
+                         :value="item.value">
+              </el-option>
+            </el-select>
+            <!-- 终端管理特殊下拉列表 -->
+            <el-select v-else-if="column.type === 'select1'"
+                       v-show="column.showFlag==='1' ? column.show : true"
+                       v-model="model[column.key]"
+                       clearable
+                       :filterable="column.filterable?column.filterable:false"
+                       :placeholder="column.placeholder?column.placeholder:column.title"
+                       :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
+                       @change="handleSelectChange1(model[column.key],column.key,i)">
+              <el-option v-for="item in optionData[column.key]"
+                         :key="item.id"
+                         :label="item.dicDisp"
+                         :value="item.id">
+              </el-option>
+            </el-select>
+            <!--布控级别下拉列表-->
+            <!-- <el-select v-else-if="column.type === 'select1'"
+                       v-show="column.showFlag==='1' ? column.show : true"
+                       v-model="model[column.key]"
+                       clearable
+                       :filterable="column.filterable?column.filterable:false"
+                       :placeholder="column.placeholder?column.placeholder:column.title"
+                       :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
+                       @change="handleSelectChange(model[column.key],column.key,i)">
+              <el-option v-for="item in optionData[column.key]"
+                         :key="item.value"
+                         :label="item.label"
+                         :value="item.value">
+                         <span>{{item.label}}</span>
+              </el-option>
+            </el-select> -->
+
+            <!--多选下拉列表-->
+            <el-select v-else-if="column.type === 'multselect'"
+                       v-show="column.showFlag==='1' ? column.show : true"
+                       v-model="model[column.key]"
+                       multiple
+                       :placeholder="column.placeholder?column.placeholder:column.title"
+                       :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
+              <el-option v-for="item in optionData[column.key]"
+                         :key="item.value"
+                         :label="item.label"
+                         :value="item.value">
+              </el-option>
+            </el-select>
+
+            <!--下拉选择图片-->
+            <el-popover v-else-if="column.type === 'selectImg'"
+                        v-show="column.showFlag==='1' ? column.show : true"
+                        ref="popover"
+                        placement="bottom"
+                        style="padding:0px"
+                        :width="column.itemWidth?column.itemWidth:itemWidth"
+                        v-model="imgPopVisible"
+                        trigger="click">
+
+              <div v-for="item in optionData[column.key]"
+                   :key="item.value"
+                   style="margin:10pxvertical-align: middle"
+                   @click="handleSelectImg(column.key,item.value,item.label)">
+                <svg-icon style="width:25pxheight:25px"
+                          :icon-class="item.label"
+                          class-name="disabled" />
+
+              </div>
+              <div class="selImgDiv"
+                   slot="reference">
+
+                <svg-icon style="width:25pxheight:25pxvertical-align: middle "
+                          :icon-class="selImg"
+                          class-name="disabled" />
+                <el-button class="selBtn"
+                           type="text"
+                           :icon="imgPopVisible?'el-icon-arrow-up':'el-icon-arrow-down'"></el-button>
+              </div>
+            </el-popover>
+
+            <!--switch开关-->
+            <el-switch v-else-if="column.type === 'switch'"
+                       v-show="column.showFlag==='1' ? column.show : true"
+                       v-model="model[column.key]"
+                       active-color="#13ce66"
+                       inactive-color="#ff4949"
+                       :disabled="column.disabled?column.disabled:false">
+            </el-switch>
+            <!--文本域输入框-->
+            <el-input v-else-if="column.type === 'textarea'"
+                      v-show="column.showFlag==='1' ? column.show : true"
+                      type="textarea"
+                      :autosize="{ minRows: 2, maxRows: 4}"
+                      :rows="3"
+                      :disabled="column.disabled?column.disabled:false"
+                      :readonly="column.readonly?column.readonly:false"
+                      resize="none"
+                      :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
+                      :placeholder="column.placeholder?column.placeholder:column.title"
+                      v-model="model[column.key]">
+            </el-input>
+            <!--日期选择器-->
+            <el-date-picker v-else-if="column.type === 'date'"
+                            v-show="column.showFlag==='1' ? column.show : true"
+                            v-model="model[column.key]"
+                            type="date"
+                            format="yyyy-MM-dd"
+                            value-format="yyyy-MM-dd"
+                            :placeholder="column.placeholder?column.placeholder:column.title"
+                            :disabledDate="disabledDate"
+                            :default-value="new Date()"
+                            :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
+            </el-date-picker>
+            <!--月份选择器-->
+            <el-date-picker v-else-if="column.type === 'month'"
+                            v-show="column.showFlag==='1' ? column.show : true"
+                            v-model="model[column.key]"
+                            type="month"
+                            format="yyyy-MM"
+                            value-format="yyyy-MM"
+                            :placeholder="column.placeholder?column.placeholder:column.title"
+                            :disabledDate="disabledDate"
+                            :default-value="new Date()"
+                            :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
+            </el-date-picker>
+            <!--日期时间选择器-->
+            <el-date-picker v-else-if="column.type === 'datetime'"
+                            v-show="column.showFlag==='1' ? column.show : true"
+                            v-model="model[column.key]"
+                            type="datetime"
+                            format="yyyy-MM-dd HH:mm:ss"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            :placeholder="column.placeholder?column.placeholder:column.title"
+                            :disabledDate="disabledDate"
+                            :default-value="new Date()"
+                            :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
+            </el-date-picker>
+            <!--时间选择器-->
+            <el-time-picker v-else-if="column.type === 'time'"
+                            v-show="column.showFlag==='1' ? column.show : true"
+                            v-model="model[column.key]"
+                            type="time"
+                            format="HH:mm:ss"
+                            value-format="HH:mm:ss"
+                            :placeholder="column.placeholder?column.placeholder:column.title"
+                            :default-value="new Date()"
+                            :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
+            </el-time-picker>
+            <!--日期区域选择器-->
+            <el-date-picker v-else-if="column.type === 'daterange'"
+                            v-show="column.showFlag==='1' ? column.show : true"
+                            v-model="model[column.key]"
+                            type="daterange"
+                            range-separator="至"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期"
+                            :disabledDate="disabledDate"
+                            :default-value="new Date()"
+                            :value-format="column.pattern?column.pattern:'yyyy-MM-dd'"
+                            :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
+            </el-date-picker>
+            <!--日期时间区域选择器-->
+            <el-date-picker v-else-if="column.type === 'datetimerange'"
+                            v-show="column.showFlag==='1' ? column.show : true"
+                            v-model="model[column.key]"
+                            type="datetimerange"
+                            range-separator="至"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期"
+                            :disabledDate="disabledDate"
+                            :default-value="new Date()"
+                            :value-format="column.pattern?column.pattern:'yyyy-MM-dd HH:mm:ss'"
+                            :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
+            </el-date-picker>
+
+            <!--文件上传-->
+            <template v-else-if="column.type === 'file'"
+                      v-show="column.showFlag==='1' ? column.show : true">
+              <c-upload :show-file-list="true"></c-upload>
+            </template>
+            <!--文件上传2-只选择不上传-->
+            <template v-else-if="column.type === 'file2'"
+                      :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
+                      :placeholder="column.placeholder?column.placeholder:column.title">
+              <input type="file"
+                     id="file"
+                     @change="getFile($event)" />
+              <!-- <el-input type=file
+                        :v-model="model[column.key]"></el-input> -->
+            </template>
+            <!-- 级联选择器-->
+            <el-cascader v-else-if="column.type === 'cascader'"
+                         clearable
+                         filterable
+                         size="medium"
+                         v-model="model[column.key]"
+                         :placeholder="column.placeholder?column.placeholder:column.title"
+                         :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
+                         :options="optionData[column.key]"
+                         :show-all-levels="false">
+
+            </el-cascader>
+
+            <template v-else-if="column.type === 'id'">
+
+            </template>
+          </el-form-item>
+        </template>
+        <!--自定义form-->
+        <template v-else-if="formType === 'custom'">
+          <slot></slot>
+        </template>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import CUpload from './CUpload'
+import CDialog from './CDialog'
+import CTree from './CTree'
+import CTreeDialogSingle from './CTreeDialogSingle'
+import CTreeDialogCheckBox from './CTreeDialogCheckBox'
+
+export default {
+  components: { CUpload, CDialog, CTree, CTreeDialogSingle, CTreeDialogCheckBox },
+  data () {
+    return {
+      formData: new FormData(),
+      model: window.app.service.getModel(this.keyword),
+      rules: window.app.service.getRules(this.keyword),
+      visible: this.visibleDialog,
+      dialog: {
+        title: ''
+      },
+      defaultCheckedKeys: [0],
+      defaultExpandKeys: [0],
+      imageUrl: '',
+
+      imgPopVisible: false, // 选择图片下拉框的pop是否可见（暂时预设为只可能有一个选择图片下拉框）
+      selImg: 'table'// 默认为“table”图标
+    }
+  },
+
+  props: {
+    formWidth: {
+      type: String,
+      default: '860px'
+    },
+    formTextAlign: {
+      type: String,
+      default: 'left'
+    },
+    keyword: {
+      type: String,
+      required: true
+    },
+    method: {
+      type: String,
+      required: true
+    },
+    labelWidth: {
+      type: Number,
+      default () {
+        return 100
+      }
+    },
+    formType: {
+      type: String,
+      default () {
+        return 'auto'
+      }
+    },
+    optionData: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    inline: {
+      type: Boolean,
+      default: true
+    },
+    itemWidth: {
+      type: String,
+      default: '300px'
+    },
+    inputSelectMultiParams: {
+      type: Object
+    },
+    visibleDialog: {
+      type: Object
+    }
+  },
+  computed: {
+    disabledDate: function (date) {
+      return new Date() < date
+    },
+    columns: function () {
+      return window.app.service.getColumns(this.keyword, 'form' + this.method)
+    },
+    defaultNodeKey () {
+      return function (key, index) {
+        var keyid = this.columns[index].keyid// 获取显示值对应的存储值key
+        // alert(this.model[keyid])
+        /*   if (!this.model[keyid]) {
+            return 0
+          } */
+        // return parseInt(this.model[keyid])
+        return this.model[keyid]
+      }
+    }
+    // 上传图片的图片部分
+    //  imageUrl () {
+    //    return function (key) {
+    //      var picPath = this.model[key]
+    //    }
+    //  },
+  },
+  mounted () {
+
+  },
+  methods: {
+    getFile (aaa) {
+      // var bbb = aaa.target.files[0]
+    },
+    assign (currentData) {
+      if (currentData) {
+        //  model赋值
+        Object.assign(this.model, currentData)
+        //  debugger
+        this.columns.forEach((column, index) => {
+          if (column.type === 'inputSelect') { // 单独处理选择树，给选择树的输入框赋值
+            this.$refs['tree_' + column.key][0].setInputValue(this.model[column.key])
+          } else if (column.type === 'selectImg') { // 单独处理图片选择下拉框
+            if (this.model[column.key] === '' || this.model[column.key] === null) {
+              this.model[column.key] = this.optionData[column.key][0].label
+            }
+            this.selImg = this.model[column.key]
+          } else if (column.type === 'inputSelectMulti') { // 单独处理选择树，给多选树赋值
+            this.$nextTick(() => {
+              this.$refs['multitree_' + column.key][0].inputValue = this.model[column.key]
+              this.$refs['multitree_' + column.key][0].substationId = this.model[column.keyid]
+            })
+          }
+        })
+      }
+    },
+    resetForm () {
+      //  重置表单
+      this.$refs['form'].resetFields()
+      this.columns.forEach((column, index) => {
+        if (column.type === 'selectImg') { // 单独处理图片选择下拉框
+          this.model[column.key] = this.optionData[column.key][0].label
+          this.selImg = this.model[column.key]
+        }
+        if (column.type === 'inputSelectMulti') {
+          this.$refs['multitree_' + column.key][0].handleClear()
+          this.model[column.keyid] = ''
+          this.model[column.key] = ''
+        }
+      })
+    },
+    initForm () { // 初始化表单
+      // this.$refs['form'].resetFields()
+      // this.model = app.service.getModel(this.keyWord)
+    },
+    initForm2 () { // 初始化表单
+      // this.$refs['form'].resetFields()
+      this.model = window.app.service.getModel(this.keyWord)
+    },
+    validate (callback) {
+      this.$refs['form'].validate((valid) => {
+        if (!valid) {
+          this.$message.error('表单验证失败!')
+        } else {
+          if (typeof callback === 'function') callback(valid)
+        }
+      })
+    },
+    // 点击选择树的【清空】
+    handleClear (data, key, formIndex) {
+      var keyid = this.columns[formIndex].keyid// 获取显示值对应的存储值key
+      this.model[keyid] = ''
+      this.model[key] = ''
+
+      this.$nextTick(() => {
+        var ref = 'tree_' + key
+        this.$refs[ref][0].loadData(null, 0, [0], false)
+      })
+    },
+    multihandleClear (data, key, formIndex) {
+      var keyid = this.columns[formIndex].keyid// 获/*  */取显示值对应的存储值key
+      this.model[keyid] = ''
+      this.model[key] = ''
+      //  var keyid = this.columns[formIndex].keyid// 获取显示值对应的存储值key
+      //  this.model[keyid] = ''
+      //  this.model[key] = ''
+    },
+    // 点击选择树的【节点】/【确定】
+    handleOk (data, key, formIndex) {
+      this.model[key] = data.label// 显示值
+      var keyid = this.columns[formIndex].keyid// 获取显示值对应的存储值key
+      var id = data.id
+      var p = /[a-z]/i
+      if (p.test(data.id.substring(0, 1))) { // 判断第一位是否是字母，是的话截掉
+        id = data.id.substring(1)
+      }
+      this.model[keyid] = id
+    },
+    handleSure (data, key, formIndex) {
+      let handleName = ''
+      let handleNameArr = []
+      let handleId = ''
+      let handleIdArr = []
+      for (let i = 0; i < data.length; i++) {
+        handleNameArr.push(data[i].name)
+        handleIdArr.push(data[i].id)
+      }
+      handleName = handleNameArr.join(',')
+      handleId = handleIdArr.join(',')
+      this.model[key] = handleName
+      var keyid = this.columns[formIndex].keyid
+      this.model[keyid] = handleId
+    },
+    handleDel (data, key, formIndex) {
+      let handleName = ''
+      let handleNameArr = []
+      let handleId = ''
+      let handleIdArr = []
+      for (let i = 0; i < data.length; i++) {
+        handleNameArr.push(data[i].name)
+        handleIdArr.push(data[i].id)
+      }
+      handleName = handleNameArr.join(',')
+      handleId = handleIdArr.join(',')
+      this.model[key] = handleName
+      var keyid = this.columns[formIndex].keyid
+      this.model[keyid] = handleId
+    },
+    changePass (value) { // 判断渲染，true:暗文显示，false:明文显示
+      this.visible = !(value === 'show')
+    },
+
+    // 选择图片下拉框
+    handleSelectImg (key, value, label) {
+      this.selImg = label
+      this.model[key] = label
+      this.imgPopVisible = false
+      // this.objForm.stateUrl = label
+    },
+
+    // 下拉框选择事件：当下拉框数据改变时触发
+    handleSelectChange (model, key, index) {
+      // debugger
+      // js中设置了选择改变
+      if (this.columns[index].selectChange) {
+        this.$emit('selectChange', model, key, index)
+      }
+    },
+    // 终端通讯类型下拉框选择事件
+    handleSelectChange1 (model, key, index) {
+      // debugger
+      // js中设置了选择改变
+      if (this.columns[index].selectChange) {
+        this.$emit('selectChange1', model, key, index)
+      }
+    },
+    // 设置某一个属性的值
+    setData (key, value) {
+      this.model[key] = value
+    },
+
+    // 控制界面组件显隐
+    changeShow (showKeyArray, showIndexArray, showDefault, hideKeyArray, hideIndexArray) {
+      // debugger
+      for (var i = 0; i < showIndexArray.length; i++) {
+        // this.columns[showIndexArray[i]].showFlag = '1'
+        this.columns[showIndexArray[i]].show = true
+        if (this.columns[showIndexArray[i]].required) { // 显示的时候为必填
+          this.columns[showIndexArray[i]].rule[0].required = true
+        }
+        this.model[showKeyArray[i]] = showDefault[i]
+      }
+      for (var j = 0; j < hideIndexArray.length; j++) {
+        // this.columns[showIndexArray[j]].showFlag = '1'
+        this.columns[hideIndexArray[j]].show = false
+        if (this.columns[hideIndexArray[j]].required) { // 隐藏的时候为非必填
+          this.columns[hideIndexArray[j]].rule[0].required = false
+        }
+        this.model[hideKeyArray[j]] = ''
+      }
+    },
+
+    // 控制界面必填项
+    changeRequired (requireKeyArray, requireIndexArray, norequireKeyArray, norequireIndexArray) {
+      for (let i = 0; i < requireIndexArray.length; i++) {
+        this.columns[requireIndexArray[i]].rule[0].required = true
+      }
+      for (let j = 0; j < norequireIndexArray.length; j++) {
+        this.columns[norequireIndexArray[j]].rule[0].required = false
+      }
+    },
+    // 单选树自定义参数赋值
+    setDiyParams (key, index) {
+      var diyName = this.columns[index].diyParams.name
+      var diyValue = this.model[this.columns[index].diyParams.value]
+      if (diyValue === '' || diyValue === null) {
+        return {}
+      }
+      var paramsStr = '{"' + diyName + '":"' + diyValue + '"}'
+      var params = JSON.parse(paramsStr)
+      // alert(JSON.stringify(params))
+      return params
+    }
+
+  }
+}
+</script>
+<style scoped>
+.submitForm {
+  text-align: right;
+  margin-right: 42px;
+}
+
+.selImgDiv {
+  width: 285px;
+  color: #bbb8b8;
+  border-radius: 4px;
+  border: 0.5px solid #dfdbdb;
+  padding-left: 16px;
+}
+
+.selBtn {
+  float: right;
+  margin-right: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 4px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 4px;
+}
+</style>

epmet-oper-web/src/views/components/CTable.vue

@@ -0,0 +1,355 @@
+<template>
+  <div class="table">
+    <el-table id="out-table"
+              ref="table"
+              :height="table.height"
+              :header-cell-style="{color:'#000'}"
+              :data="tableData"
+              :style="{width: '100%'}"
+              border
+              v-loading="loading"
+              element-loading-text="正在加载中"
+              element-loading-spinner="el-icon-loading"
+              element-loading-background="rgba(255, 255， 255, 0.8)"
+              @select="handleSelect"
+              @select-all="handleSelectAll"
+              @cell-click="handleCellClick"
+              @row-click="handleRowClick">
+      <!--设置index索引-->
+      <div v-if="columnType==='index'">
+        <el-table-column :type="columnType"></el-table-column>
+      </div>
+      <!--设置checkbox-->
+      <div v-if="columnType==='selection'">
+        <el-table-column :type="columnType"></el-table-column>
+      </div>
+      <div v-if="columnType==='radio'">
+        <el-table-column label=""
+                         width="35"
+                         center>
+          <template slot-scope="scope">
+            <el-radio :label="scope.row.id"
+                      v-model="templateRadio"
+                      @change.native="getRadioRow(scope.$index,scope.row)">&nbsp;</el-radio>
+          </template>
+        </el-table-column>
+
+      </div>
+      <template v-for="col in tableColumn">
+        <!--渲染列-->
+        <el-table-column v-if="col.render"
+                         :key="col.key"
+                         :label="col.title"
+                         :min-width="col.width"
+                         :fixed="col.isFrozen"
+                         show-overflow-tooltip
+                         :align="columnAlign"
+                         :header-align="headerAlign">
+          <template slot-scope="scope">
+            <span v-html="col.render(scope.row[col.key])"></span>
+          </template>
+        </el-table-column>
+        <!--普通列-->
+        <el-table-column v-else
+                         :key="col.key"
+                         :label="col.title"
+                         :min-width="col.width"
+                         :fixed="col.isFrozen"
+                         show-overflow-tooltip
+                         :align="columnAlign"
+                         :header-align="headerAlign"
+                         :formatter="col.formatter"></el-table-column>
+      </template>
+      <!--操作列-->
+      <el-table-column v-if="operations.length && operations.length > 0"
+                       label="操作"
+                       :width="operationWidth"
+                       fixed="right"
+                       header-align="center"
+                       class="operate">
+        <template slot-scope="scope">
+          <!--传入的操作按钮属性    lyx   20190411   -->
+          <el-button v-for="item in operations"
+                     :key="item.lable"
+                     :style=item.style
+                     :type=item.type
+                     :size=item.size
+                     :plain=item.plain
+                     @click.stop="handleMethod(scope.$index, scope.row,item.methodName)">{{item.lable}}</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页-->
+    <el-row class="page "
+            v-if="pageVisible">
+      <el-col :span="8"
+              style="text-align: leftline-height: 32px">
+        <slot style="text-align: left"></slot>
+        <span></span>
+      </el-col>
+      <el-col :span="16">
+        <el-pagination @size-change="handleSizeChange"
+                       @current-change="handleCurrentChange"
+                       @prev-click="handlePrevClick"
+                       @next-click="handleNextClick"
+                       :current-page="page  + 1"
+                       :page-sizes="tablePageSizes"
+                       :page-size="table.params.size"
+                       layout="jumper, prev, pager, next,sizes, total"
+                       :total="total"></el-pagination>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+
+import CDialog from './CDialog'
+import { mapGetters } from 'vuex'
+export default {
+  components: { CDialog },
+  data () {
+    return {
+      tableData: [],
+      tableColumn: app.service.getColumns(this.keyword, 'table'),
+      loading: false,
+      table: {
+        height: this.tableHeight,
+        params: {
+          size: this.size,//当前页数显示记录数
+          page: this.page //当前页数
+        }
+      },
+      total: 0,
+      selected: false,
+      visiblePopover: false,// 删除弹出层开关
+      templateRadio: ''
+    }
+  },
+  watch: {
+    tableHeight (height) {
+      this.table.height = height
+    }
+  },
+  props: {
+
+    keyword: {
+      type: String,
+      required: true
+    },
+    columnType: {
+      type: String
+    },
+    columnAlign: {
+      type: String,
+      default: 'left'
+    },
+    headerAlign: {
+      type: String,
+      default: 'center'
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    params: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    operations: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    page: {
+      type: Number,
+      default: 0
+    },
+    size: {
+      type: Number,
+      default: 10
+    },
+    tableHeight: {
+      type: Number
+    },
+    pageVisible: Boolean  //是否显示page分页     lyx   20190411
+  },
+  computed: {
+    //操作列宽度
+    operationWidth: function () {
+      // return this.operations.includes('add')
+      //   ? (this.operations.length - 1) * 80
+      //   : this.operations.length * 80
+      if (this.operations.includes('add')) {
+        return (this.operations.length - 1) * 80 //操作列包含add类型按钮时返回
+      }
+      else if (this.operations.includes('analyze')) {
+        return (this.operations.length + 0.5) * 80 //操作列包含analyze类型按钮时返回
+      }
+      else {
+        return this.operations.length * 80
+      }
+    },
+    tableSize () {
+
+      if (this.resolution === 'small') {
+        return 10
+      } else {
+        return 20
+      }
+    },
+    tablePageSizes () {
+      if (this.resolution === 'small') {
+        return [10, 20, 50]
+      } else {
+        return [20, 30, 50]
+      }
+    },
+    ...mapGetters(['resolution'])
+
+  },
+  methods: {
+    render () {
+      this.loadData()
+    },
+    loadData () {      debugger
+      this.loading = true
+      Object.keys(this.params).forEach(key => {
+        if (this.params[key] instanceof Array) {
+          this.params[key] = this.params[key].join(',')
+        }
+      })
+      Object.assign(this.table.params, this.params)
+
+      // 获取数据
+      app.ajax.get(
+        this.url,
+        this.table.params,
+        (data, rspMsg) => {
+          if (data) {
+
+            //debugger
+            this.tableData = data.content
+            this.total = data.totalElements
+          }
+          this.loading = false
+        },
+        (rspMsg, data) => {
+          this.$message.error(rspMsg)
+
+          this.loading = false
+        }
+      )
+    },
+    handleClearSelection () {
+      // 清空选择
+      this.$refs['table'].clearSelection()
+    },
+    //选中复选框
+    handleSelect (selection, row) {
+      this.$emit('select', selection)
+      //console.log(selection, row)
+    },
+    //全选复选框
+    handleSelectAll (selection) {
+      this.$emit('selectAll', selection)
+    },
+    handleCellClick (row, column, cell, event) { },
+    handleRowClick (row) {
+      // 切换该列的勾选状态
+      this.selected = !this.selected
+      this.$refs['table'].toggleRowSelection(row, this.selected)
+    },
+
+    handleEdit (index, row) {
+      // 因为操作列与数据列属于同一行，编辑某一列后会继续触发table的row-click事件，所以在按钮上添加stop修饰符阻止事件的继续传播
+      this.handleClearSelection()
+      this.$refs['table'].toggleRowSelection(row)
+      this.$emit('update', row)
+    },
+    handleAnalyze (index, row) {
+      this.handleClearSelection() // 清空选择
+      this.$refs['table'].toggleRowSelection(row, true)
+      this.$emit('analyze', row)
+    },
+    handleDelete (index, row) {
+      this.handleClearSelection() // 删除选择
+      this.$refs['table'].toggleRowSelection(row, true)
+      this.$emit('delete', row)
+    },
+    handleDeleteCancel (scope) {
+      // 关闭popover弹出层
+      scope._self.$refs[`popover-${scope.$index}`].doClose()
+    },
+    handleSizeChange (size) {
+      this.table.params.size = size
+      this.table.params.page = 0
+      this.$nextTick(() => {
+        this.loadData()
+      })
+    },
+    //改变当前页
+    handleCurrentChange (page) {
+      debugger
+      this.table.params.page = page - 1
+      this.$nextTick(() => {
+        this.loadData()
+      })
+    },
+    //点击上一页
+    handlePrevClick (page) {
+
+    },
+    //点击下一页
+    handleNextClick (page) {
+
+    },
+
+    //单选选中
+    getRadioRow (index, row) {  //获取选中数据
+
+      this.$emit('selectRadioRow', row)
+    },
+    //导出表格
+    handleOutTable (name) {
+      app.util.exportExcel(name, '#out-table')
+    },
+    exportExcel (tHeader, filterVal) {
+      require.ensure([], () => {
+        const { export_json_to_excel } = require('@js/excel/Export2Excel')
+
+        const list = this.tableData
+        const data = this.formatJson(filterVal, list)
+        export_json_to_excel(tHeader, data, '列表excel')
+      })
+    },
+    formatJson (filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    //操作列点击实现方法    lyx   20190411
+    handleMethod (index, row, methodName) {
+      this.handleClearSelection()
+      this.$refs['table'].toggleRowSelection(row, true)
+      this.$emit(methodName, row)
+    },
+  },
+
+}
+</script>
+<style>
+.el-table td {
+  padding: 6px 0 !important;
+}
+
+.page {
+  padding: 20px 6px 0;
+  text-align: right;
+}
+
+.operate {
+  text-align: center;
+}
+</style>

epmet-oper-web/src/views/components/CTableNoPage.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="table">
+    <el-table id="out-table"
+              ref="table"
+              :height="table.height"
+              :header-cell-style="{color:'#000'}"
+              :data="tableData"
+              :style="{width: '100%'}"
+              border
+              v-loading="loading"
+              element-loading-text="正在加载中"
+              element-loading-spinner="el-icon-loading"
+              element-loading-background="rgba(255, 255， 255, 0.8)"
+              @select="handleSelect"
+              @select-all="handleSelectAll"
+              @cell-click="handleCellClick"
+              @row-click="handleRowClick">
+      <!--设置index索引-->
+      <div v-if="columnType==='index'">
+        <el-table-column :type="columnType"></el-table-column>
+      </div>
+      <!--设置checkbox-->
+      <div v-if="columnType==='selection'">
+        <el-table-column :type="columnType"></el-table-column>
+      </div>
+      <div v-if="columnType==='radio'">
+        <el-table-column label=""
+                         width="35"
+                         center>
+          <template slot-scope="scope">
+            <el-radio :label="scope.row.id"
+                      v-model="templateRadio"
+                      @change.native="getRadioRow(scope.$index,scope.row)">&nbsp;</el-radio>
+          </template>
+        </el-table-column>
+
+      </div>
+      <template v-for="col in tableColumn">
+        <!--渲染列-->
+        <el-table-column v-if="col.render"
+                         :key="col.key"
+                         :label="col.title"
+                         :min-width="col.width"
+                         :fixed="col.isFrozen"
+                         show-overflow-tooltip
+                         :align="columnAlign"
+                         :header-align="headerAlign">
+          <template slot-scope="scope">
+            <span v-html="col.render(scope.row[col.key])"></span>
+          </template>
+        </el-table-column>
+        <!--普通列-->
+        <el-table-column v-else
+                         :key="col.key"
+                         :label="col.title"
+                         :min-width="col.width"
+                         :fixed="col.isFrozen"
+                         show-overflow-tooltip
+                         :align="columnAlign"
+                         :header-align="headerAlign"
+                         :formatter="col.formatter"></el-table-column>
+      </template>
+      <!--操作列-->
+      <el-table-column v-if="operations.length && operations.length > 0"
+                       label="操作"
+                       :width="operationWidth"
+                       fixed="right"
+                       header-align="center"
+                       class="operate">
+        <template slot-scope="scope">
+          <!--传入的操作按钮属性    lyx   20190411   -->
+          <el-button v-for="item in operations"
+                     :key="item.lable"
+                     :style=item.style
+                     :type=item.type
+                     :size=item.size
+                     :plain=item.plain
+                     @click.stop="handleMethod(scope.$index, scope.row,item.methodName)">{{item.lable}}</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+
+import CDialog from './CDialog'
+import { mapGetters } from 'vuex'
+export default {
+  components: { CDialog },
+  data () {
+    return {
+      tableData: [],
+      tableColumn: app.service.getColumns(this.keyword, 'table'),
+      loading: false,
+      table: {
+        height: this.tableHeight,
+        params: {
+          size: this.size,//当前页数显示记录数
+          page: this.page //当前页数
+        }
+      },
+
+      selected: false,
+      visiblePopover: false,// 删除弹出层开关
+      templateRadio: ''
+    }
+  },
+  watch: {
+    tableHeight (height) {
+      this.table.height = height
+    }
+  },
+  props: {
+
+    keyword: {
+      type: String,
+      required: true
+    },
+    columnType: {
+      type: String
+    },
+    columnAlign: {
+      type: String,
+      default: 'left'
+    },
+    headerAlign: {
+      type: String,
+      default: 'center'
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    params: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    operations: {
+      type: Array,
+      default () {
+        return [{}]
+      }
+    },
+    page: {
+      type: Number,
+      default: 0
+    },
+    size: {
+      type: Number,
+      default: 10
+    },
+    tableHeight: {
+      type: Number
+    },
+    pageVisible: Boolean  //是否显示page分页     lyx   20190411
+  },
+  computed: {
+    //操作列宽度
+    operationWidth: function () {
+      // return this.operations.includes('add')
+      //   ? (this.operations.length - 1) * 80
+      //   : this.operations.length * 80
+      if (this.operations.includes('add')) {
+        return (this.operations.length - 1) * 80 //操作列包含add类型按钮时返回
+      }
+      else if (this.operations.includes('analyze')) {
+        return (this.operations.length + 0.5) * 80 //操作列包含analyze类型按钮时返回
+      }
+      else {
+        return this.operations.length * 80
+      }
+    },
+    ...mapGetters(['resolution'])
+
+  },
+  methods: {
+    render () {
+      this.loadData()
+    },
+    loadData () {
+      this.loading = true
+      Object.keys(this.params).forEach(key => {
+        if (this.params[key] instanceof Array) {
+          this.params[key] = this.params[key].join(',')
+        }
+      })
+      Object.assign(this.table.params, this.params)
+
+      // 获取数据
+      app.ajax.get(
+        this.url,
+        this.table.params,
+        (data, rspMsg) => {
+          if (data) {
+            //debugger
+            this.tableData = data
+          }
+          this.loading = false
+        },
+        (rspMsg, data) => {
+          this.$message.error(rspMsg)
+
+          this.loading = false
+        }
+      )
+    },
+    handleClearSelection () {
+      // 清空选择
+      this.$refs['table'].clearSelection()
+    },
+    //选中复选框
+    handleSelect (selection, row) {
+      this.$emit('select', selection)
+      //console.log(selection, row)
+    },
+    //全选复选框
+    handleSelectAll (selection) {
+      this.$emit('selectAll', selection)
+    },
+    handleCellClick (row, column, cell, event) { },
+    handleRowClick (row) {
+      // 切换该列的勾选状态
+      this.selected = !this.selected
+      this.$refs['table'].toggleRowSelection(row, this.selected)
+    },
+
+    handleEdit (index, row) {
+      // 因为操作列与数据列属于同一行，编辑某一列后会继续触发table的row-click事件，所以在按钮上添加stop修饰符阻止事件的继续传播
+      this.handleClearSelection()
+      this.$refs['table'].toggleRowSelection(row)
+      this.$emit('update', row)
+    },
+    handleAnalyze (index, row) {
+      this.handleClearSelection() // 清空选择
+      this.$refs['table'].toggleRowSelection(row, true)
+      this.$emit('analyze', row)
+    },
+    handleDelete (index, row) {
+      this.handleClearSelection() // 删除选择
+      this.$refs['table'].toggleRowSelection(row, true)
+      this.$emit('delete', row)
+    },
+    handleDeleteCancel (scope) {
+      // 关闭popover弹出层
+      scope._self.$refs[`popover-${scope.$index}`].doClose()
+    },
+    handleSizeChange (size) {
+      this.table.params.size = size
+      this.table.params.page = 0
+      this.$nextTick(() => {
+        this.loadData()
+      })
+    },
+
+    //单选选中
+    getRadioRow (index, row) {  //获取选中数据
+
+      this.$emit('selectRadioRow', row)
+    },
+    //导出表格
+    handleOutTable (name) {
+      app.util.exportExcel(name, '#out-table')
+    },
+    exportExcel (tHeader, filterVal) {
+      require.ensure([], () => {
+        const { export_json_to_excel } = require('@js/excel/Export2Excel')
+
+        const list = this.tableData
+        const data = this.formatJson(filterVal, list)
+        export_json_to_excel(tHeader, data, '列表excel')
+      })
+    },
+    formatJson (filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    //操作列点击实现方法    lyx   20190411
+    handleMethod (index, row, methodName) {
+      this.handleClearSelection()
+      this.$refs['table'].toggleRowSelection(row, true)
+      this.$emit(methodName, row)
+    },
+  },
+
+}
+</script>
+<style>
+.el-table td {
+  padding: 6px 0 !important;
+}
+
+.page {
+  padding: 20px 6px 0;
+  text-align: right;
+}
+
+.operate {
+  text-align: center;
+}
+</style>

epmet-oper-web/src/views/components/CTree.vue

@@ -0,0 +1,523 @@
+
+<template>
+  <div class="el-tree-node">
+    <div class="filter-input">
+      <el-input placeholder="输入关键字进行过滤"
+                v-model="filterText"
+                clearable>
+      </el-input>
+    </div>
+    <el-tree v-if="lazy === true"
+             ref="tree"
+             lazy
+             node-key="id"
+             v-loading="loading"
+             :default-expanded-keys="defaultExpandKeys"
+             :expand-on-click-node="defaultExpandOnClickNode"
+             :render-content="renderContent"
+             :show-checkbox="showCheckbox"
+             :default-checked-keys="defaultCheckedKeys"
+             :default-expand-all="defaultExpandAll"
+             :current-node-key="currentNodeKey"
+             :filter-node-method="filterNode"
+             :check-on-click-node="checkOnClickNode"
+             highlight-current
+             :props="props"
+             :load="loadNode"
+             @node-click="handleNodeClick"
+             @node-expand="handleNodeExpand"></el-tree>
+    <el-tree v-else
+             node-key="id"
+             ref="tree"
+             :data="nodeData"
+             v-loading="loading"
+             :default-expand-all="defaultExpandAll"
+             :default-expanded-keys="defaultExpandKeys"
+             :filter-node-method="filterNode"
+             :expand-on-click-node="defaultExpandOnClickNode"
+             :render-content="renderContent"
+             :show-checkbox="showCheckbox"
+             :current-node-key="currentNodeKey"
+             :check-on-click-node="checkOnClickNode"
+             highlight-current
+             :props="props"
+             @node-click="handleNodeClick"
+             @check="handleCheckBox"
+             @current-change="handleCurrentChange"></el-tree>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      nodeData: [],
+      currentNodeKey: this.defaultNodeKey,
+      checkedKeys: this.defaultCheckedKeys,
+      firstData: null,
+      props: {
+        children: 'children',
+        label: 'label',
+        isLeaf: 'leaf'
+      },
+      filterText: '',
+      defaultExpandKeys: ['0'],
+
+      loading: false, //  加载中
+      selNode: '' //  后台数据选中的节点
+    }
+  },
+  watch: {
+    filterText (val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  props: {
+    url: {
+      type: String,
+      required: true
+    },
+    params: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    //  默认全展开
+    defaultExpandAll: {
+      type: Boolean,
+      default: true
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    },
+    defaultOnlyLeaf: {
+      //  点击所有节点都能选中，为true时表示：只能选择叶节点
+      type: Boolean,
+      default: false
+    },
+    defaultExpandOnClickNode: {
+      //  默认点击节点时展开节点
+      type: Boolean,
+      default: false
+    },
+    defaultCheckedKeys: {
+      //   默认勾选节点
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    expandKeys: {
+      //   默认展开的节点
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    defaultNodeKey: {
+      //   默认选中节点(节点id)
+      type: [Number, String]
+    },
+
+    isDialogTree: {
+      //  是否是从选择树弹出框打开的树
+      type: Boolean,
+      default: false
+    },
+    //  能够选择的节点类型，默认为空
+    nodeType: {
+      type: String,
+      default: ''
+    },
+    //  是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点
+    checkOnClickNode: {
+      type: Boolean,
+      default: true
+    },
+    tenantCode: {
+      type: String,
+      default: ''
+    }
+  },
+
+  methods: {
+    filterNode (value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    loadData (callback, currentKey, checkedKeys) {
+      var headers = {}
+      if (this.tenantCode !== '') {
+        headers = {
+          tenantCode: this.tenantCode
+        }
+      }
+      this.selNode = ''
+      this.currentNodeKey = currentKey
+      this.checkedKeys = checkedKeys
+
+      this.resetFilterText()
+      window.app.ajax.get(
+        this.url,
+        this.params,
+        (data, rspMsg) => {
+          //  alert(JSON.stringify(data))
+          this.nodeData = data
+          //  console.log(this.nodeData)
+          this.processData(this.nodeData, null)
+          this.initCheckNodes()
+          this.loading = false
+        },
+        (rspMsg, data) => {
+          this.$message.error(rspMsg)
+          this.loading = false
+        }, headers
+      )
+      if (typeof callback === 'function') callback()
+    },
+    loadDataByUrl (url, callback, currentKey) {
+      this.selNode = ''
+      this.currentNodeKey = currentKey
+
+      this.loading = true
+      this.resetFilterText()
+      window.app.ajax.get(
+        url,
+        this.params,
+        (data, rspMsg) => {
+          this.nodeData = data
+          console.log(this.nodeData)
+          this.firstData = null
+          this.processData(this.nodeData, null)
+          this.initCheckNodes()
+          this.loading = false
+        },
+        (rspMsg, data) => {
+          this.$message.error(rspMsg)
+          this.loading = false
+        }
+      )
+      if (typeof callback === 'function') callback()
+    },
+    processData (data, parentData) {
+      //  处理节点数据
+      data.forEach(_data => {
+        _data.parent = parentData
+
+        if (_data.selectNode === '1') {
+          this.selNode = _data.id
+        }
+        if (_data.children && _data.children.length > 0) {
+          this.processData(_data.children, _data)
+        } else {
+          _data.isLeaf = true //  叶子节点
+
+          if (!this.firstData) { //  保存第一层节点数据
+            this.firstData = _data
+          }
+        }
+      })
+    },
+    initCheckNodes () {
+      // 默认展开的节点
+      if (this.expandKeys.length > 0) {
+        this.expandKeys.forEach((oneKey, index) => { // 组织数据
+          this.defaultExpandKeys.push(oneKey + '')
+        })
+      }
+      //  设置节点状态
+      if (this.showCheckbox) { // 多选节点
+        //  if (this.defaultCheckedKeys.length > 0) {
+        //  设置勾选节点
+        if (this.checkedKeys === undefined) {
+          this.$nextTick(() => {
+            this.$refs['tree'].setCheckedKeys(this.defaultCheckedKeys)
+          })
+        } else {
+          this.$nextTick(() => {
+            this.$refs['tree'].setCheckedKeys(this.checkedKeys)
+          })
+        }
+
+        // }
+      } else { // 单选节点
+        //  如果没有设置默认勾选和展开节点，设置第一层级的第一个叶子节点为勾选状态
+        if (this.currentNodeKey === undefined || this.currentNodeKey === null) {
+          if (this.selNode !== '') {
+            this.currentNodeKey = this.selNode
+          } else {
+            this.currentNodeKey = this.firstData.id
+          }
+
+          //  if (this.showCheckbox) {
+          //    this.defaultCheckedKeys.push(this.currentNodeKey)
+          //  }
+
+          //  要在数据更新视图之后，设置高亮, 设置勾选
+          this.$nextTick(() => {
+            this.setCurrentKey(this.currentNodeKey)
+            //  if (this.showCheckbox)
+            //    this.$refs['tree'].setCheckedKeys(this.defaultCheckedKeys)
+          })
+        } else {
+          this.$nextTick(() => {
+            this.setCurrentKey(this.currentNodeKey)
+          })
+        }
+      }
+      //  if (this.defaultCheckedKeys.length > 0) { // 多选节点
+      //    //  设置勾选节点
+      //    this.$nextTick(() => {
+      //      this.$refs['tree'].setCheckedKeys(this.defaultCheckedKeys)
+      //    })
+      //  } else { // 单选节点
+
+      //  }
+      this.$emit('dataFinish')
+    },
+    setCurrentKey (key) {
+      this.$refs['tree'].setCurrentKey(key)
+      if (!this.isDialogTree) {
+        //  获取当前被选中节点的 data,主动触发点击事件
+        this.handleNodeClick(this.$refs['tree'].getCurrentNode(), '', '')
+      }
+    },
+    renderContent (h, { node, data, store }) {
+      //  渲染tree
+      return h(
+        'span',
+        {
+          class: 'custom-tree-node'
+        },
+        [
+          data.icon
+            ? h('svg-icon', {
+              class: 'blue', // 图标颜色
+              props: {
+                iconClass: data.icon
+              }
+            })
+            : '',
+          h('span', {
+            class: 'mLeft'// 节点名称span新增左边距属性
+          }, node.label)
+        ]
+      )
+    },
+    addDefaultExpandedKeys (data) {
+      if (data.parent && data.parent.length > 0) {
+        this.addDefaultExpandedKeys(data.parent)
+      } else {
+        this.defaultExpandKeys.push(data)
+      }
+    },
+    handleNodeClick (data, node, store) {
+      let checkedArr = this.$refs['tree'].getCheckedNodes()
+      if (this.defaultOnlyLeaf) { // 只能选择叶子节点
+        if (data.children && data.children.length > 0) { // 如果没有子节点
+        } else {
+          this.$emit('nodeClick', data, node)
+        }
+      } else {
+        this.$emit('nodeClick', data, node, checkedArr)
+      }
+    },
+    handleCheckBox (data, status) {
+      let checkedArr = this.$refs['tree'].getCheckedNodes()
+      this.$emit('chechBoxClick', data, checkedArr)
+    },
+    handleCurrentChange (data, node, store) {
+      // console.logconsole.log(data, node)
+    },
+    handleNodeExpand (data, node, store) {
+      // console.log(data, node, store)
+    },
+    loadNode (node, resolve) {
+      if (node.level === 0) {
+        this.loadData(() => {
+          resolve(this.nodeData[0])
+          this.$refs['tree'].setCurrentKey(this.nodeData[0].id)
+        })
+      } else {
+        resolve([])
+      }
+    },
+    // 获取多选节点的id数组（全部）
+    getCheckedKeysAll () {
+      return this.$refs['tree'].getCheckedKeys()
+    },
+    // 获取多选节点的id字符串（只有叶子节点）
+    getCheckedKeys () {
+      var checkedNodes = this.getCheckedNodes()
+      var p = /[a-z]/i
+      var selIds = ''
+      if (this.nodeType === '') { // 没有指定的节点类型
+        checkedNodes.forEach(element => {
+          var id = element.id
+          // if (p.test(element.id)) { // 判断第一位是否是字母，是的话截掉
+          if (p.test(element.id.substring(0, 1))) { // 判断第一位是否是字母，是的话截掉
+            id = element.id.substring(1)
+          }
+          selIds = selIds + id + ','
+        })
+      } else { // 指定了节点类型
+        checkedNodes.forEach(element => {
+          if (element.role === this.nodeType) {
+            var id = element.id
+            selIds = selIds + id + ','
+          }
+        })
+      }
+      if (selIds !== '') {
+        selIds = selIds.substring(0, selIds.length - 1)
+      }
+      return selIds
+    },
+    setCheckedKeys (key) {
+      this.$refs['tree'].setCheckedKeys(key)
+      //  获取当前被选中节点的 data,主动触发点击事件
+      // this.handleNodeClick(this.$refs['tree'].getCurrentNode())
+    },
+    // 获取多选节点的对象数组（全部）
+    getCheckedNodesAll () {
+      return this.$refs['tree'].getCheckedNodes()
+    },
+    // 获取多选节点的对象数组（只有叶子节点）
+    getCheckedNodes () {
+      var checkedNodesAll = this.$refs['tree'].getCheckedNodes()// 所有选中的节点，包括父节点
+      var checkedNodes = []
+      // 剔除父节点
+      checkedNodesAll.forEach(oneNodes => {
+        if (oneNodes.children && oneNodes.children.length > 0) {
+        } else {
+          checkedNodes.push(oneNodes)
+        }
+      })
+      // console.log(checkedNodes)
+      return checkedNodes
+    },
+    // 重置查询条件
+    resetFilterText () {
+      this.filterText = ''
+    }
+  },
+  mounted () {
+    if (!this.lazy) {
+      this.loading = true
+      this.loadData(null, this.currentNodeKey, this.checkedKeys)
+    }
+  }
+}
+</script>
+
+<style>
+.mLeft {
+  margin-left: 6px;
+}
+.blue {
+  color: #003585;
+}
+</style>
+<style scoped>
+.el-tree-node {
+  outline: 0;
+  font-size: 14px;
+  word-wrap: break-word !important;
+  line-height: 14px !important;
+}
+
+.el-tree-node:focus > .el-tree-node__content {
+  background-color: #f5f7fa;
+}
+
+.el-tree-node.is-drop-inner > .el-tree-node__content .el-tree-node__label {
+  background-color: #00d1b2;
+  color: #fff;
+}
+
+.el-tree-node__content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 26px;
+  cursor: pointer;
+}
+
+.el-tree-node__content > .el-tree-node__expand-icon {
+  padding: 6px;
+}
+
+.el-tree-node__content > .el-checkbox {
+  margin-right: 8px;
+}
+
+.el-tree-node__content:hover {
+  background-color: #f5f7fa;
+}
+
+.el-tree.is-dragging .el-tree-node__content {
+  cursor: move;
+}
+
+.el-tree.is-dragging.is-drop-not-allow .el-tree-node__content {
+  cursor: not-allowed;
+}
+
+.el-tree-node__expand-icon {
+  cursor: pointer;
+  color: #c0c4cc;
+  font-size: 12px;
+  -webkit-transform: rotate(0);
+  transform: rotate(0);
+  -webkit-transition: -webkit-transform 0.3s ease-in-out;
+  transition: -webkit-transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
+}
+
+.el-tree-node__expand-icon.expanded {
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.el-tree-node__expand-icon.is-leaf {
+  color: transparent;
+  cursor: default;
+}
+
+.el-tree-node__label {
+  font-size: 14px;
+}
+
+.el-tree-node__loading-icon {
+  margin-right: 8px;
+  font-size: 14px;
+  color: #c0c4cc;
+}
+
+.el-tree-node > .el-tree-node__children {
+  overflow: hidden;
+  background-color: transparent;
+}
+
+.el-tree-node.is-expanded > .el-tree-node__children {
+  display: block;
+}
+
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background-color: #f0f7ff;
+}
+
+.filter-input {
+  margin-bottom: 10px;
+}
+</style>

epmet-oper-web/src/views/components/CTreeDialogCheckBox.vue

@@ -0,0 +1,437 @@
+<!-- 输入框+选择 点击选择弹出多选树 -->
+<template>
+  <div>
+    <div class="multiInput">
+      <div class="showPart"
+           tabindex="0"
+           @click="checked = true"
+           v-on:blur="checked = false"
+           :class="{blueBorder:checked}">
+        <p class="clues"
+           v-show="!selDataArray.length">{{placeholder}}</p>
+        <ul v-show="selDataArray.length"
+            class="checkedList">
+          <li class="checkedItem"
+              v-for="(item,index) in selDataArray"
+              :key="item.id+''+index">
+            <span>{{item.name}}</span>
+            <i class="el-icon-close"
+               @click="deleteHandle(index)"></i>
+          </li>
+        </ul>
+      </div>
+      <button type="button"
+              class="choose"
+              @click="handleSelect">选择</button>
+    </div>
+    <el-dialog :title="title"
+               lock-scroll
+               :visible="dialogVisible"
+               :modal="modal"
+               :width="'28%'"
+               :before-close="handleCancel"
+               :append-to-body="isNest"
+               :close-on-click-modal="false">
+      <div :style="{height:formHeight+'px',overflowY:'auto',overflowX:'hidden'}">
+        <c-tree ref="dialog_tree"
+                :url="url"
+                :params="params"
+                :isDialogTree="true"
+                :showCheckbox="showCheckbox"
+                :defaultExpandAll="defaultExpandAll"
+                :defaultExpandKeys="[0]"
+                :defaultNodeKey="defaultNodeKey"
+                :defaultCheckedKeys="checkedKeys"
+                :defaultOnlyLeaf="defaultOnlyLeaf"
+                :defaultExpandOnClickNode="defaultExpandOnClickNode"
+                :nodeType="nodeType"
+                @chechBoxClick="handleCheckBox"
+                @nodeClick="handleNodeClick"></c-tree>
+      </div>
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button @click="handleOk">确定</el-button>
+        <el-button @click="handleClear">清空</el-button>
+        <!--   <el-button @click="handleCancel">取消</el-button> -->
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import CDialog from './CDialog'
+import CTree from './CTree'
+import { mapGetters } from 'vuex'
+export default {
+  components: { CDialog, CTree },
+  data () {
+    return {
+      dialogVisible: false, // 是否显示下拉框
+      selData: Object, // 选择的节点
+      selDataArray: [], // 多选树选择的节点数组
+      inputValue: this.inputModel,
+      substationId: this.handleId,
+      expandKeys: this.defaultExpandKeys, // 默认展开的节点克隆
+      checked: false, // 蓝色边框
+      checkedKeys: this.defaultCheckedKeys,
+      temArr: [], // 临时存放选中人员的数组
+      temKeys: [] // 临时存放key的数组
+    }
+  },
+  props: {
+    formKey: { // 用于接收form的key
+      type: String,
+      default: ''
+    },
+    formIndex: { // 用于接收form的index
+      type: Number,
+      default: 0
+    },
+    placeholder: { // input
+      type: String,
+      default: '请选择'
+    },
+    inputModel: { // input
+      type: String,
+      default: ''
+    },
+    handleId: {
+      type: String,
+      default: ''
+    },
+    type: { // button
+      type: String,
+      default: 'primary'
+    },
+
+    title: { // dialog
+      type: String,
+      default: '选择'
+    },
+    isNest: {
+      type: Boolean,
+      default: true
+    },
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    url: { // tree
+      type: String,
+      required: true
+    },
+    params: { // tree
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    showCheckbox: { // tree
+      type: Boolean,
+      default: true
+    },
+    defaultCheckedKeys: { // tree
+      // 默认勾选节点
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    defaultExpandKeys: {
+      // 默认展开的节点
+      type: Array,
+      default () {
+        return [0]
+      }
+    },
+    // 默认节点定为0 ，即选择树不回显
+    defaultNodeKey: { // tree
+      // 默认选中节点(节点id)
+      type: [Number, String]
+    },
+    defaultExpandAll: { // tree
+      // 默认展开全部节点
+      type: Boolean,
+      default: true
+    },
+    defaultOnlyLeaf: {
+      // 点击所有节点都能选中，为true时表示：只能选择叶节点
+      type: Boolean,
+      default: false
+    },
+    // 能够选择的节点类型，默认为空
+    nodeType: {
+      type: String,
+      default: ''
+    },
+    defaultExpandOnClickNode: {
+      // 默认点击节点时展开节点
+      type: Boolean,
+      default: false
+    },
+    // 判断是否自动刷新树
+    freshen: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  methods: {
+    // 选择按钮点击事件
+    handleSelect () {
+      this.dialogVisible = true
+      // 给临时存放数组赋值
+      let arr = this.selDataArray
+      this.temArr = this.temArr.concat(arr)
+      // 给临时存放key的数组赋值
+      let keys = this.checkedKeys
+      this.temKeys = this.temKeys.concat(keys)
+      // 渲染对话框中默认选择树的节点
+      this.$nextTick(() => {
+        this.loadData()
+        this.$refs['dialog_tree'].setCheckedKeys(this.checkedKeys)
+      })
+    },
+    // icon删除
+    deleteHandle (num) {
+      this.selDataArray.splice(num, 1)
+      this.checkedKeys.splice(num, 1)
+      this.$emit('handleDel', this.selDataArray, this.formKey, this.formIndex)
+    },
+    loadData (callback, currentKey, expandKeys) {
+      this.$nextTick(() => {
+        this.expandKeys = expandKeys
+        this.$refs['dialog_tree'].loadData(callback, currentKey)
+      })
+    },
+    handleClear () { // 清空
+      this.substationId = ''
+      this.inputValue = ''
+      this.selData = ''
+      this.selDataArray = []
+      this.checkedKeys = []
+      this.temArr = []
+      this.temKeys = []
+      this.$emit('handleClear', '', this.formKey, this.formIndex)
+      this.dialogVisible = false
+    },
+    // 关闭dialog
+    handleCancel () {
+      this.dialogVisible = false
+      this.temArr = []
+      this.temKeys = []
+    },
+    handleOk () {
+      this.dialogVisible = false
+      this.selDataArray = this.temArr
+      this.checkedKeys = this.temKeys
+      this.temArr = []
+      this.temKeys = []
+      this.$emit('handleSure', this.selDataArray, this.formKey, this.formIndex)
+    },
+
+    // 清空输入框
+    clearInput () {
+      this.selData = ''
+      this.inputValue = ''
+    },
+    // 复选框点击事件
+    handleCheckBox (data, checkedArr) {
+      // to do
+      // let filterText = this.$refs['dialog_tree'].filterText
+      // if (filterText) {
+      //   if (data.children.length !== 0) {
+      //     console.log('father', filterText)
+      //   } else {
+      //     console.log('children', filterText)
+      //   }
+      // } else {
+      //   console.log('blank')
+      // }
+      let checkedNoRepeat = [] // 无重复的选中数组
+      let keysNoRepeat = [] // 无重复的keys数组
+      for (let i = 0; i < checkedArr.length; i++) {
+        if (checkedArr[i].children.length === 0) {
+          let obj = { 'id': checkedArr[i].id, 'name': checkedArr[i].label }
+          checkedNoRepeat.push(obj)
+          keysNoRepeat.push(checkedArr[i].id)
+        }
+      }
+      this.temArr = checkedNoRepeat
+      this.temKeys = keysNoRepeat
+      // let checkedObj = { 'id': data.id, 'name': data.label }
+      // let id = data.id
+      // let index = ''
+      // let haven = false
+      // let length = this.temArr.length
+      // if (this.temArr.length === 0) {
+      //   this.temArr.push(checkedObj)
+      //   this.temKeys.push(Number(id))
+      // } else {
+      //   for (let i = 0 i < length i++) {
+      //     if (this.temArr[i].id === id) {
+      //       haven = true
+      //       index = i
+      //       break
+      //     }
+      //   }
+      //   if (haven) {
+      //     this.temArr.splice(index, 1)
+      //     this.temKeys.splice(index, 1)
+      //   } else {
+      //     this.temArr.push(checkedObj)
+      //     this.temKeys.push(Number(id))
+      //   }
+      // }
+    },
+    handleNodeClick (data, node) { // 点击树节点内容触发事件
+      // console.log(checkedArr)
+      // let checkedObj = { 'id': data.id, 'name': data.label }
+      // let id = data.id
+      // let index = ''
+      // let haven = false
+      // let length = this.temArr.length
+      // if (this.temArr.length === 0) {
+      //   this.temArr.push(checkedObj)
+      //   this.temKeys.push(Number(id))
+      // } else {
+      //   for (let i = 0 i < length i++) {
+      //     if (this.temArr[i].id === id) {
+      //       haven = true
+      //       index = i
+      //       break
+      //     }
+      //   }
+      //   if (haven) {
+      //     this.temArr.splice(index, 1)
+      //     this.temKeys.splice(index, 1)
+      //   } else {
+      //     this.temArr.push(checkedObj)
+      //     this.temKeys.push(Number(id))
+      //   }
+      // }
+    }
+  },
+  mounted () {
+  },
+  computed: {
+    formHeight () {
+      return this.clientHeight * 0.56
+    },
+    ...mapGetters(['clientHeight'])
+  },
+  watch: {
+    inputValue () {
+      let idArr = []
+      let nameArr = []
+      if (this.substationId !== '') {
+        idArr = this.substationId.split(',')
+      }
+      if (this.inputValue !== null) {
+        nameArr = this.inputValue.split(',')
+      }
+
+      for (let i = 0; i < idArr.length; i++) {
+        this.selDataArray.push({ 'id': idArr[i], 'name': nameArr[i] })
+      }
+      this.checkedKeys = idArr
+    }
+    // dialogVisible () {
+    //   if (!this.dialogVisible) {
+    //     this.temArr = []
+    //     this.temKeys = []
+    //   }
+    // }
+  }
+}
+</script>
+<style scoped>
+.mLeft {
+  margin-left: 6px;
+}
+.blue {
+  color: #003585;
+}
+.multiInput {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+}
+.multiInput .showPart {
+  width: 197px;
+  min-height: 34px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px 0 0 4px;
+  outline: none;
+}
+.clues {
+  line-height: 34px;
+  padding-left: 15px;
+  color: #bfc2ca;
+}
+.multiInput .showPart .checkedList {
+  display: flex;
+  width: 100%;
+  padding: 5px 5px 0 5px;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+}
+.multiInput .showPart .checkedList .checkedItem {
+  list-style: none;
+  height: 24px;
+  margin: 0 0 5px 5px;
+  padding: 0 8px;
+  background-color: #f0f1f4;
+  color: #8f9197;
+  font-size: 14px;
+  line-height: 24px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+}
+.multiInput .showPart .checkedList .checkedItem span {
+  font-size: 12px;
+}
+.el-icon-close {
+  border-radius: 50%;
+  background-color: #bfc2ca;
+  width: 13px;
+  height: 13px;
+  text-align: center;
+  margin-left: 5px;
+  cursor: pointer;
+}
+.el-icon-close:hover {
+  background-color: #8f9197;
+}
+.el-icon-close:before {
+  color: #fff;
+  font-size: 9px;
+  width: 13px;
+  height: 13px;
+  line-height: 13px;
+  display: block;
+}
+.multiInput .blueBorder {
+  border: 1px solid #5095fa;
+}
+.multiInput .choose {
+  border: none;
+  flex: 1;
+  border: 1px solid #dcdfe6;
+  border-left: none;
+  background: #f5f7fa;
+  color: #0085d0;
+  border-radius: 0 4px 4px 0;
+  outline: none;
+}
+
+.tree {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+</style>

epmet-oper-web/src/views/components/CTreeDialogSingle.vue

@@ -0,0 +1,264 @@
+<!-- 输入框+选择，点击选择弹出单选树 -->
+<template>
+  <div>
+    <el-tooltip :content="inputValue"
+                placement="top">
+
+      <el-input readonly
+                style="width:100%"
+                v-model="inputValue"
+                :placeholder="placeholder">
+
+        <el-button slot="append"
+                   :type="type"
+                   class="undisabled"
+                   @click="handleSelect">选择</el-button>
+      </el-input>
+    </el-tooltip>
+
+    <el-dialog :title="title"
+               lock-scroll
+               :visible="dialogVisible"
+               :modal="modal"
+               :width="'28%'"
+               :before-close="handleCancel"
+               :append-to-body="isNest"
+               :close-on-click-modal="false">
+      <div :style="{height:formHeight+'px',overflowY:'auto',overflowX:'hidden'}">
+        <c-tree ref="dialog_tree"
+                :url="url"
+                :params="params"
+                :isDialogTree="true"
+                :showCheckbox="showCheckbox"
+                :defaultExpandAll="defaultExpandAll"
+                :defaultExpandKeys="[0]"
+                :defaultNodeKey="defaultNodeKey"
+                :defaultOnlyLeaf="defaultOnlyLeaf"
+                :defaultExpandOnClickNode="defaultExpandOnClickNode"
+                :nodeType="nodeType"
+                @nodeClick="handleNodeClick"></c-tree>
+
+      </div>
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button @click="handleOk">确定</el-button>
+        <el-button @click="handleClear">清空</el-button>
+        <!--   <el-button @click="handleCancel">取消</el-button> -->
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import CDialog from './CDialog'
+import CTree from './CTree'
+import { mapGetters } from 'vuex'
+export default {
+  components: { CDialog, CTree },
+  data () {
+    return {
+      testContent: '测试数据', //  this.$refs.lineInfo_form.reaPpShow,
+      dialogVisible: false, // 是否显示下拉框
+      selData: Object, // 选择的节点
+      selDataArray: [], // 多选树选择的节点数组
+      inputValue: this.inputModel,
+      expandKeys: this.defaultExpandKeys// 默认展开的节点克隆
+    }
+  },
+  props: {
+    formKey: { // 用于接收form的key
+      type: String,
+      default: ''
+    },
+    formIndex: { // 用于接收form的index
+      type: Number,
+      default: 0
+    },
+    placeholder: { // input
+      type: String,
+      default: '请选择'
+    },
+    inputModel: { // input
+      type: String,
+      default: ''
+    },
+
+    type: { // button
+      type: String,
+      default: 'primary'
+    },
+
+    title: { // dialog
+      type: String,
+      default: '选择'
+    },
+    isNest: {
+      type: Boolean,
+      default: true
+    },
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    url: { // tree
+      type: String,
+      required: true
+    },
+    params: { // tree
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    showCheckbox: { // tree
+      type: Boolean,
+      default: false
+    },
+    defaultCheckedKeys: { // tree
+      // 默认勾选节点
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    defaultExpandKeys: { // tree
+      //  默认展开的节点
+      type: Array,
+      default () {
+        return [0]
+      }
+    },
+    // 默认节点定为0 ，即选择树不回显
+    defaultNodeKey: { // tree
+      //  默认选中节点(节点id)
+      type: Number
+    },
+    defaultExpandAll: { // tree
+      //  默认选中节点(节点id)
+      type: Boolean,
+      default: true
+    },
+    defaultOnlyLeaf: { // tree
+      // 点击所有节点都能选中，为true时表示：只能选择叶节点
+      type: Boolean,
+      default: false
+    },
+    // 能够选择的节点类型，默认为空
+    nodeType: {
+      type: String,
+      default: ''
+    },
+    defaultExpandOnClickNode: {
+      // 默认点击节点时展开节点
+      type: Boolean,
+      default: false
+    },
+    // 判断是否自动刷新树
+    freshen: {
+      type: Boolean,
+      default: false
+    },
+    // 是否对传过来的参数进行判断
+    judgeParams: {
+      type: String,
+      default: '1'
+    }
+  },
+
+  methods: {
+    handleSelect () {
+      if (this.judgeParams === '2') {
+        if (this.params.bdzId === null || this.params === {} || this.params.bdzId === '') {
+          this.$message.error('所属变电站不能为空')
+          this.dialogVisible = false
+          return false
+        } else {
+          this.dialogVisible = true
+        }
+      } else {
+        this.dialogVisible = true
+      }
+
+      if (this.freshen) {
+        this.$nextTick(() => {
+          this.loadData()
+        })
+      }
+    },
+    setInputValue (inputValue) {
+      this.inputValue = inputValue
+    },
+    loadData (callback, currentKey, expandKeys) {
+      this.$nextTick(() => {
+        this.expandKeys = expandKeys
+        this.$refs['dialog_tree'].loadData(callback, currentKey)
+      })
+    },
+    handleClear () { // 清空
+      this.selData = ''
+      this.inputValue = ''
+      this.$emit('handleClear', '', this.formKey, this.formIndex)
+      this.dialogVisible = false
+    },
+
+    handleCancel () {
+      this.dialogVisible = false
+    },
+    handleOk () {
+    },
+
+    // 清空输入框
+    clearInput () {
+      this.selData = ''
+      this.inputValue = ''
+    },
+
+    handleNodeClick (data, node) {
+      if (data.id !== 0) {
+        if (this.nodeType !== '') {
+          if (data.role === this.nodeType) { // 定义了选择的节点类型
+            this.selData = data
+            this.inputValue = this.selData.label
+            this.$emit('handleOk', this.selData, this.formKey, this.formIndex)
+            this.dialogVisible = false
+          }
+        } else {
+          this.selData = data
+          this.inputValue = this.selData.label
+          this.$emit('handleOk', this.selData, this.formKey, this.formIndex)
+          this.dialogVisible = false
+        }
+      }
+    }
+  },
+  mounted () {
+
+  },
+  computed: {
+    formHeight () {
+      return this.clientHeight * 0.56
+    },
+    ...mapGetters(['clientHeight'])
+  }
+}
+</script>
+
+<style>
+.mLeft {
+  margin-left: 6px;
+}
+.blue {
+  color: #003585;
+}
+</style>
+<style scoped>
+.tree {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+</style>

epmet-oper-web/src/views/components/CUpload.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="upload">
+    <el-upload class="upload-demo"
+               :action="action+actionSuffix"
+               :on-preview="handlePreview"
+               :on-remove="handleRemove"
+               :on-success="handleSuccess"
+               :on-error="handleError"
+               :on-progress="handleProgress"
+               :before-upload="beforeAvatarUpload"
+               list-type="text"
+               :file-list="fileList"
+               auto-upload:false
+               :show-file-list="showFileList"
+               multiple
+               :limit="3"
+               :on-exceed="handleExceed">
+      <template v-if="uploadType === 'default'">
+        <el-button size="small"
+                   type="primary">点击上传</el-button>
+
+      </template>
+      <template v-else>
+        <slot name="custom"></slot>
+      </template>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      fileList: []
+    }
+  },
+  props: {
+    actionSuffix: {
+      type: String,
+      default () {
+        return ''
+      }
+    },
+    showFileList: {
+      type: Boolean,
+      default () {
+        return false
+      }
+    },
+    uploadType: {
+      type: String,
+      default () {
+        return 'default'
+      }
+    }
+  },
+  methods: {
+    // 点击文件列表中已上传的文件时的钩子
+    handlePreview (file) {
+      console.log(file)
+    },
+    // 文件列表移除文件时的钩子
+    handleRemove (file, fileList) {
+      console.log(file, fileList)
+    },
+    handleSuccess (response, file, fileList) {
+      console.log(response, file, fileList)
+    },
+    handleError (err, file, fileList) {
+      console.log(err, file, fileList)
+    },
+    handleProgress (event, file, fileList) {
+      console.log(event, file, fileList)
+    },
+    handleExceed (files, fileList) {
+      console.log(files, fileList)
+    },
+    beforeAvatarUpload (file) {
+      // const isJPG = file.type === 'file'
+      // const isLt2M = file.size / 1024 / 1024 < 2
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

epmet-oper-web/src/views/main-sidebar-sub-menu.vue

@@ -1,13 +1,25 @@
 <template>
-  <el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.id" :popper-append-to-body="false">
+  <el-submenu v-if="menu.children && menu.children.length >= 1"
+              :index="menu.id"
+              :popper-append-to-body="false">
     <template slot="title">
-      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
+      <svg class="icon-svg aui-sidebar__menu-icon"
+           aria-hidden="true">
+        <use :xlink:href="`#${menu.icon}`"></use>
+      </svg>
       <span>{{ menu.name }}</span>
     </template>
-    <sub-menu v-for="item in menu.children" :key="item.id" :menu="item"></sub-menu>
+    <sub-menu v-for="item in menu.children"
+              :key="item.id"
+              :menu="item"></sub-menu>
   </el-submenu>
-  <el-menu-item v-else :index="menu.id" @click="gotoRouteHandle(menu.id)">
-    <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
+  <el-menu-item v-else
+                :index="menu.id"
+                @click="gotoRouteHandle(menu.id)">
+    <svg class="icon-svg aui-sidebar__menu-icon"
+         aria-hidden="true">
+      <use :xlink:href="`#${menu.icon}`"></use>
+    </svg>
     <span>{{ menu.name }}</span>
   </el-menu-item>
 </template>

epmet-oper-web/src/views/modules/code/CommitForm.vue

@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <el-card shadow="never"
+             class="aui-card--fill">
+      <c-form ref="ref_form_temp"
+              keyword="Temp"
+              :formWidth="'100%'"
+              :itemWidth="'400px'"
+              :method="tempForm.method"
+              :option-data="tempForm.data"></c-form>
+      <div class="mod-demo__demo}">
+
+        <el-table id="out-table"
+                  ref="table"
+                  :header-cell-style="{color:'#000'}"
+                  :data="tableData"
+                  :style="{width: '100%'}"
+                  border
+                  v-loading="loading"
+                  element-loading-text="正在加载中"
+                  element-loading-spinner="el-icon-loading"
+                  element-loading-background="rgba(255, 255， 255, 0.8)">
+          <!-- <el-table-column type="selection"
+                         header-align="center"
+                         align="center"
+                         width="50"></el-table-column> -->
+          <el-table-column prop="tempId"
+                           label="模板id"
+                           min-width="100"
+                           header-align="center"
+                           align="center"></el-table-column>
+
+          <el-table-column prop="version"
+                           label="版本"
+                           min-width="70"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="desc"
+                           label="描述"
+                           min-width="100"
+                           header-align="center"
+                           align="center"></el-table-column>
+
+          <el-table-column prop="createTime"
+                           label="添加时间"
+                           header-align="center"
+                           min-width="100"
+                           align="center"></el-table-column>
+
+          <el-table-column label="操作"
+                           fixed="right"
+                           header-align="center"
+                           align="center"
+                           width="150">
+            <template slot-scope="scope">
+              <el-button type="text"
+                         size="small"
+                         @click="showSubmitDia(scope.row.tempId)">上传</el-button>
+
+            </template>
+          </el-table-column>
+        </el-table>
+
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import CDialog from '../../components/CDialog'
+import CForm from '../../components/CForm'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/demo/demo/page',
+        getDataListIsPage: true,
+        deleteURL: '/demo/demo',
+        deleteIsBatch: true,
+        exportURL: '/demo/demo/export'
+      },
+      loading: false,
+      tempForm: {
+        method: 'A',
+        data: {
+          client: [
+            {
+              value: '01',
+              label: '市北区'
+            },
+            {
+              value: '02',
+              label: '市北区'
+            }
+          ],
+          type: [
+            {
+              value: '01',
+              label: '工作端'
+            },
+            {
+              value: '02',
+              label: '居民端'
+            }
+          ]
+
+        }
+      },
+      dataForm: {
+        client: '', // 客户
+        type: '', // 类型
+        ext: '', // 配置文件
+        version: '', // 版本
+        desc: '' // 描述
+
+      },
+      // 弹出框相关
+      dialog: {
+        title: '',
+        visible: false
+      },
+      // 查询栏下拉框数据
+      optionData:
+      {
+        client: [
+          {
+            value: '01',
+            label: '市北区'
+          },
+          {
+            value: '02',
+            label: '市南区'
+          }
+        ]
+
+      },
+
+      // 列表数据
+      tableData: [
+        {
+          tempId: '001',
+          version: '1.0.0',
+          desc: '居民端小程序',
+          createTime: '2020-07-06 10:00:00'
+        },
+        {
+          tempId: '002',
+          version: '1.0.0',
+          desc: '工作端小程序',
+          createTime: '2020-07-06 10:00:00'
+        }
+      ]
+
+    }
+  },
+  components: {
+    CDialog, CForm
+  },
+  mounted () {
+    let dataForm = {
+      type: '工作端'
+    }
+
+    this.$nextTick(() => {
+      this.$refs['ref_form_temp'].assign(dataForm)
+    })
+  },
+  methods: {
+    // 打开上传dialog
+    showSubmitDia () {
+      this.dialog.title = '上传代码'
+      this.dialog.visible = true
+    },
+    // 提交审核
+    submit () {
+    },
+    handleCancel () {
+      this.dialog.title = ''
+      this.dialog.visible = false
+    }
+
+  }
+}
+</script>

epmet-oper-web/src/views/modules/code/CommitList.vue

@@ -0,0 +1,391 @@
+<template>
+  <div>
+    <el-card shadow="never"
+             class="aui-card--fill">
+      <div class="mod-demo__demo}">
+        <el-form :inline="true"
+                 :model="dataForm"
+                 @keyup.enter.native="getDataList()">
+          <el-form-item>
+            <el-select v-model="dataForm.client"
+                       placeholder="客户">
+              <el-option v-for="item in optionData['client']"
+                         :key="item.value"
+                         :label="item.label"
+                         :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="dataForm.type"
+                       placeholder="类型">
+              <el-option v-for="item in optionData['type']"
+                         :key="item.value"
+                         :label="item.label"
+                         :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item>
+            <el-select v-model="dataForm.state"
+                       placeholder="状态">
+              <el-option v-for="item in optionData['state']"
+                         :key="item.value"
+                         :label="item.label"
+                         :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!-- <el-form-item>
+            <el-date-picker v-model="dataForm.commitDate"
+                            type="daterange"
+                            range-separator="至"
+                            start-placeholder="发布开始日期"
+                            end-placeholder="发布结束日期"
+                            :default-value="new Date()"
+                            value-format="yyyy-MM-dd HH:mm:ss">
+            </el-date-picker>
+          </el-form-item> -->
+          <el-form-item>
+            <el-date-picker v-model="dataForm.submitDate"
+                            type="daterange"
+                            range-separator="至"
+                            start-placeholder="审核开始日期"
+                            end-placeholder="审核结束日期"
+                            :default-value="new Date()"
+                            value-format="yyyy-MM-dd HH:mm:ss">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="getDataList()">查询</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary"
+                       @click="commitCode()">上传代码</el-button>
+          </el-form-item>
+        </el-form>
+        <el-table id="out-table"
+                  ref="table"
+                  :header-cell-style="{color:'#000'}"
+                  :data="tableData"
+                  :style="{width: '100%'}"
+                  border
+                  v-loading="loading"
+                  element-loading-text="正在加载中"
+                  element-loading-spinner="el-icon-loading"
+                  element-loading-background="rgba(255, 255， 255, 0.8)">
+          <!-- <el-table-column type="selection"
+                         header-align="center"
+                         align="center"
+                         width="50"></el-table-column> -->
+          <el-table-column prop="client"
+                           label="客户"
+                           min-width="100"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="type"
+                           label="类型"
+                           min-width="50"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="appId"
+                           label="appId"
+                           min-width="100"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="version"
+                           label="当前版本"
+                           min-width="70"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="desc"
+                           label="描述"
+                           min-width="130"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="stateShow"
+                           label="状态"
+                           min-width="70"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="commitDate"
+                           label="上传时间"
+                           header-align="center"
+                           min-width="100"
+                           align="center"></el-table-column>
+          <el-table-column prop="submitDate"
+                           label="提交审核时间"
+                           min-width="100"
+                           header-align="center"
+                           align="center"></el-table-column>
+
+          <el-table-column label="操作"
+                           fixed="right"
+                           header-align="center"
+                           align="center"
+                           width="300">
+            <template slot-scope="scope">
+              <el-button v-if="scope.row.state=='01'"
+                         type="text"
+                         size="small"
+                         @click="submitCode(scope.row.id)">提交审核</el-button>
+              <el-button v-if="scope.row.state=='01'"
+                         type="text"
+                         size="small"
+                         @click="showQRCode(scope.row.id)">二维码</el-button>
+              <el-button v-if="scope.row.state=='02'"
+                         type="text"
+                         size="small"
+                         @click="submitRecall(scope.row.id)">审核撤回</el-button>
+              <el-button v-if="scope.row.state=='03'"
+                         type="text"
+                         size="small"
+                         @click="issueCode(scope.row.id)">发布</el-button>
+              <el-button v-if="scope.row.state=='04'"
+                         type="text"
+                         size="small"
+                         @click="submitFailReason(scope.row.id)">审核失败原因</el-button>
+              <el-button type="text"
+                         size="small"
+                         @click="operHistory(scope.row.id)">操作历史</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination :current-page="page"
+                       :page-sizes="[10, 20, 50, 100]"
+                       :page-size="limit"
+                       :total="total"
+                       layout="total, sizes, prev, pager, next, jumper"
+                       @size-change="pageSizeChangeHandle"
+                       @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+
+      </div>
+    </el-card>
+    <c-dialog :title="commitDia.title"
+              :visible="commitDia.visible"
+              :showConfirm="false"
+              @cancel="commitDiaCancel">
+      <commit-form ref="ref_temp_list"></commit-form>
+    </c-dialog>
+
+    <c-dialog :title="submitDia.title"
+              :visible="submitDia.visible"
+              :dialogHeight="1.1"
+              @cancel="submitDiaCancel">
+      <submit-form ref="ref_submit_form"></submit-form>
+    </c-dialog>
+
+    <c-dialog :showFooter="false"
+              :title="operDia.title"
+              :visible="operDia.visible"
+              @cancel="operDiaCancel">
+      <oper-history ref="ref_oper_history"></oper-history>
+    </c-dialog>
+  </div>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import CDialog from '../../components/CDialog'
+import SubmitForm from './SubmitForm'
+import CommitForm from './CommitForm'
+import OperHistory from './OperHistory'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/demo/demo/page',
+        getDataListIsPage: true,
+        deleteURL: '/demo/demo',
+        deleteIsBatch: true,
+        exportURL: '/demo/demo/export'
+      },
+      loading: false,
+      dataForm: {
+        client: '', // 客户
+        type: '', // 类型
+        state: '', // 代码状态
+        commitDate: '', // 发布日期
+        submitDate: '' // 审核日期
+
+      },
+      // 上传弹出框相关
+      commitDia: {
+        title: '',
+        visible: false
+      },
+      // 审核弹出框相关
+      submitDia: {
+        title: '',
+        visible: false
+      },
+      // 操作历史弹出框相关
+      operDia: {
+        title: '',
+        visible: false
+      },
+      // 查询栏下拉框数据
+      optionData:
+      {
+        client: [
+          {
+            value: '01',
+            label: '市北区政府'
+          },
+          {
+            value: '02',
+            label: '市南区政府'
+          }
+        ],
+        type: [
+          {
+            value: '01',
+            label: '居民端'
+          },
+          {
+            value: '02',
+            label: '工作端'
+          }
+        ],
+        state: [
+          {
+            value: '01',
+            label: '提交未审核'
+          },
+          {
+            value: '02',
+            label: '审核中'
+          },
+          {
+            value: '03',
+            label: '审核成功'
+          },
+          {
+            value: '04',
+            label: '审核失败'
+          },
+          {
+            value: '05',
+            label: '已发布'
+          }
+        ]
+      },
+
+      // 列表数据
+      tableData: [
+        {
+          client: '市北区政府',
+          type: '居民端',
+          appId: '100',
+          version: '1.0.0',
+          desc: '市北区政府居民端小程序',
+          state: '01',
+          stateShow: '提交未审核',
+          commitDate: '2020-07-06',
+          submitDate: ''
+        },
+        {
+          client: '市北区政府',
+          type: '工作端',
+          appId: '200',
+          version: '1.0.0',
+          desc: '市北区政府工作端小程序',
+          state: '02',
+          stateShow: '审核中',
+          commitDate: '2020-07-06',
+          submitDate: '2020-07-07'
+        },
+        {
+          client: '市南区政府',
+          type: '居民端',
+          appId: '300',
+          version: '1.0.0',
+          desc: '市南区政府居民端小程序',
+          state: '03',
+          stateShow: '审核成功',
+          commitDate: '2020-07-06',
+          submitDate: '2020-07-07'
+        },
+        {
+          client: '市南区政府',
+          type: '工作端',
+          appId: '400',
+          version: '1.0.0',
+          desc: '市南区政府工作端小程序',
+          state: '04',
+          stateShow: '审核失败',
+          commitDate: '2020-07-06',
+          submitDate: '2020-07-07'
+        },
+        {
+          client: '李沧区政府',
+          type: '工作端',
+          appId: '500',
+          version: '1.0.0',
+          desc: '李沧区政府居民端小程序',
+          state: '05',
+          stateShow: '已发布',
+          commitDate: '2020-07-06',
+          submitDate: '2020-07-07'
+        }
+      ]
+
+    }
+  },
+  components: {
+    CDialog, SubmitForm, CommitForm, OperHistory
+  },
+  mounted () {
+
+  },
+  methods: {
+    // 上传代码
+    commitCode (id) {
+      this.commitDia.title = '上传代码'
+      this.commitDia.visible = true
+    },
+    // 提交审核
+    submitCode (id) {
+      this.submitDia.title = '提交审核'
+      this.submitDia.visible = true
+    },
+    submitDiaCancel () {
+      this.submitDia.title = ''
+      this.submitDia.visible = false
+    },
+    // 审核撤回
+    submitRecall (id) {
+
+    },
+    // 体验版二维码
+    showQRCode (id) {
+
+    },
+    // 发布
+    issueCode (id) {
+
+    },
+    // 审核失败原因
+    submitFailReason (id) {
+
+    },
+    // 操作历史
+    operHistory (id) {
+      this.operDia.title = '操作历史'
+      this.operDia.visible = true
+    },
+    commitDiaCancel () {
+      this.commitDia.title = ''
+      this.commitDia.visible = false
+    },
+    operDiaCancel () {
+      this.operDia.title = ''
+      this.operDia.visible = false
+    }
+
+  }
+}
+</script>

epmet-oper-web/src/views/modules/code/OperHistory.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <el-card shadow="never"
+             class="aui-card--fill">
+      <div class="mod-demo__demo}">
+
+        <el-table id="out-table"
+                  ref="table"
+                  :header-cell-style="{color:'#000'}"
+                  :data="tableData"
+                  :style="{width: '100%'}"
+                  border
+                  v-loading="loading"
+                  element-loading-text="正在加载中"
+                  element-loading-spinner="el-icon-loading"
+                  element-loading-background="rgba(255, 255， 255, 0.8)">
+          <!-- <el-table-column type="selection"
+                         header-align="center"
+                         align="center"
+                         width="50"></el-table-column> -->
+          <el-table-column prop="time"
+                           label="时间"
+                           min-width="100"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="version"
+                           label="版本"
+                           min-width="50"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="oper"
+                           label="操作类型"
+                           min-width="100"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="desc"
+                           label="描述"
+                           min-width="100"
+                           header-align="center"
+                           align="center"></el-table-column>
+
+          <!-- <el-table-column label="操作"
+                           fixed="right"
+                           header-align="center"
+                           align="center"
+                           width="150">
+            <template slot-scope="scope">
+              <el-button v-if="scope.row.state=='01'"
+                         type="text"
+                         size="small"
+                         @click="submitCode(scope.row.id)">提交审核</el-button>
+            </template>
+          </el-table-column> -->
+        </el-table>
+
+      </div>
+    </el-card>
+
+  </div>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import CDialog from '../../components/CDialog'
+import SubmitForm from './SubmitForm'
+import CommitForm from './CommitForm'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/demo/demo/page',
+        getDataListIsPage: true,
+        deleteURL: '/demo/demo',
+        deleteIsBatch: true,
+        exportURL: '/demo/demo/export'
+      },
+      loading: false,
+      dataForm: {
+        client: '', // 客户
+        type: '', // 类型
+        state: '', // 代码状态
+        commitDate: '', // 发布日期
+        submitDate: '' // 审核日期
+      },
+      // 列表数据
+      tableData: [
+        {
+          time: '2019-10-10 10:00:00',
+          version: '1.0.0',
+          oper: '上传',
+          desc: ''
+        },
+        {
+          time: '2019-10-10 11:00:00',
+          version: '1.0.0',
+          oper: '提交审核',
+          desc: ''
+        },
+        {
+          time: '2019-10-10 12:00:00',
+          version: '1.0.0',
+          oper: '审核失败',
+          desc: '类目不满足'
+        },
+        {
+          time: '2019-10-11 8:00:00',
+          version: '1.0.1',
+          oper: '上传',
+          desc: ''
+        },
+        {
+          time: '2019-10-11 9:00:00',
+          version: '1.0.1',
+          oper: '审核',
+          desc: ''
+        },
+        {
+          time: '2019-10-11 10:00:00',
+          version: '1.0.1',
+          oper: '审核撤回',
+          desc: ''
+        },
+        {
+          time: '2019-10-11 11:00:00',
+          version: '1.0.1',
+          oper: '审核',
+          desc: ''
+        },
+        {
+          time: '2019-10-11 12:00:00',
+          version: '1.0.1',
+          oper: '发布',
+          desc: ''
+        }
+      ]
+    }
+  },
+  components: {
+    CDialog, SubmitForm, CommitForm
+  },
+  mounted () {
+
+  },
+  methods: {
+
+    // 提交审核
+    submitCode (id) {
+      this.submitDia.title = '提交审核'
+      this.submitDia.visible = true
+    }
+  }
+}
+</script>

epmet-oper-web/src/views/modules/code/SubmitForm.vue

@@ -0,0 +1,273 @@
+<template>
+  <div>
+    <el-card shadow="never"
+             class="aui-card--fill">
+      <div class="mod-demo__demo}">
+        <el-form :inline="true"
+                 :model="dataForm"
+                 @keyup.enter.native="getDataList()">
+          <el-form-item label="版本功能说明"
+                        prop="版本功能说明"
+                        label-width="150px"
+                        style="display:block">
+            <el-input type="textarea"
+                      :autosize="{ minRows: 2, maxRows: 4}"
+                      :rows="3"
+                      resize="none"
+                      style="width:300px"
+                      placeholder='请输入版本功能说明'
+                      v-model="dataForm.versionDesc">
+            </el-input>
+          </el-form-item>
+          <!-- <el-form-item>
+            <el-input v-model="model[column.key]"
+                      :readonly="column.readonly?column.readonly:false"
+                      :disabled="column.disabled?column.disabled:false"
+                      :placeholder="column.placeholder?column.placeholder:column.title"
+                      :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
+                      clearable>
+
+            </el-input>
+          </el-form-item> -->
+
+        </el-form>
+        <div>
+          <el-button type="primary"
+                     style="margin-bottom:10px"
+                     @click="commitCode()">增加审核项</el-button>
+        </div>
+        <el-table id="out-table"
+                  ref="table"
+                  :header-cell-style="{color:'#000'}"
+                  :data="tableData"
+                  :height="tableHeight"
+                  :style="{width: '100%'}"
+                  border
+                  v-loading="loading"
+                  element-loading-text="正在加载中"
+                  element-loading-spinner="el-icon-loading"
+                  element-loading-background="rgba(255, 255， 255, 0.8)">
+
+          <el-table-column prop="address"
+                           label="页面"
+                           min-width="100"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="tag"
+                           label="标签"
+                           min-width="100"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="title"
+                           label="标题"
+                           min-width="100"
+                           header-align="center"
+                           align="center"></el-table-column>
+
+          <el-table-column prop="firstClass"
+                           label="一级类目名称"
+                           min-width="100"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="first_id"
+                           label="一级类目ID"
+                           min-width="100"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="second_class"
+                           label="二级类目名称"
+                           min-width="70"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="second_id"
+                           label="二级类目ID"
+                           min-width="100"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="third_class"
+                           label="三级类目名称"
+                           min-width="70"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="third_id"
+                           label="三级类目ID"
+                           header-align="center"
+                           min-width="100"
+                           align="center"></el-table-column>
+
+          <el-table-column label="操作"
+                           fixed="right"
+                           header-align="center"
+                           align="center"
+                           width="80">
+            <template slot-scope="scope">
+              <el-button type="text"
+                         size="small"
+                         @click="submitCode(scope.row.id)">移除</el-button>
+
+            </template>
+          </el-table-column>
+        </el-table>
+
+      </div>
+    </el-card>
+    <c-dialog :title="dialog.title"
+              :visible="dialog.visible"
+              :showConfirm="false"
+              @cancel="handleCancel">
+      <commit-form ref="ref_commit_form"></commit-form>
+    </c-dialog>
+  </div>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import CDialog from '../../components/CDialog'
+import CommitForm from './CommitForm'
+import { mapGetters } from 'vuex'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/demo/demo/page',
+        getDataListIsPage: true,
+        deleteURL: '/demo/demo',
+        deleteIsBatch: true,
+        exportURL: '/demo/demo/export'
+      },
+      loading: false,
+      dataForm: {
+        versionDesc: '', // 小程序版本说明和功能解释
+        state: '', // 代码状态
+        commitDate: '', // 发布日期
+        submitDate: '' // 审核日期
+
+      },
+      // 弹出框相关
+      dialog: {
+        title: '',
+        visible: false
+      },
+      // 查询栏下拉框数据
+      optionData:
+      {
+        client: [
+          {
+            value: '01',
+            label: '市北区'
+          },
+          {
+            value: '02',
+            label: '市南区'
+          }
+        ],
+        state: [
+          {
+            value: '01',
+            label: '提交未审核'
+          },
+          {
+            value: '02',
+            label: '审核中'
+          },
+          {
+            value: '03',
+            label: '审核成功'
+          },
+          {
+            value: '04',
+            label: '审核失败'
+          },
+          {
+            value: '05',
+            label: '已发布'
+          }
+        ]
+      },
+
+      // 列表数据
+      tableData: [
+        {
+          address: 'index',
+          tag: '学习 生活',
+          title: '首页',
+          firstClass: '文娱',
+          firstId: 1,
+          secondClass: '资讯',
+          secondId: 2,
+          thirdClass: '',
+          thirdId: null
+        },
+        {
+          address: 'page/logs/logs',
+          tag: '学习 工作',
+          title: '日志',
+          firstClass: '教育',
+          firstId: 3,
+          secondClass: '学历教育',
+          secondId: 4,
+          thirdClass: '高等',
+          thirdId: 5
+        }
+      ]
+
+    }
+  },
+  components: {
+    CDialog, CommitForm
+  },
+  mounted () {
+
+  },
+  computed: {
+    tableHeight () {
+      return this.clientHeight * 0.56 - 100
+    },
+    ...mapGetters(['clientHeight'])
+  },
+  methods: {
+    // 上传代码
+    commitCode (id) {
+      this.dialog.title = '上传代码'
+      this.dialog.visible = true
+    },
+    // 提交审核
+    submitCode (id) {
+
+    },
+    // 审核撤回
+    submitRecall (id) {
+
+    },
+    // 体验版二维码
+    showQRCode (id) {
+
+    },
+    // 发布
+    issueCode (id) {
+
+    },
+    // 审核失败原因
+    submitFailReason (id) {
+
+    },
+    handleCancel () {
+      this.dialog.title = ''
+      this.dialog.visible = false
+    }
+
+  }
+}
+</script>
+<style scoped>
+.row_submit {
+  float: left;
+  flex: 1;
+  width: 100%;
+  height: 35px;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+</style>

epmet-oper-web/vue.config.js

@@ -4,6 +4,9 @@
 module.exports = {
   baseUrl: process.env.NODE_ENV === 'production' ? '' : '/epmet-oper',
   chainWebpack: (config) => {
+    // config.resolve.alias
+    //   .set('@c', resolve('@/components'))
+    //   .set('style', resolve('src/assets/style'))
     const svgRule = config.module.rule('svg')
     svgRule.uses.clear()
     svgRule