Merge branch 'master' of http://10.1.235.20:3000/asiainfo/ebc

ebc-middle-platform/src/modules/authorization/menu-authorization.scss

@@ -0,0 +1,26 @@
.authorization-container{
  display:flex;
  justify-content: center;
  margin:20px;
  .left-container{
    width:400px;
    height: 700px;
    border: 1px solid rgba(0, 0, 0, 0.09);
    margin-right:20px;
    .title{
      padding:0 20px;
      line-height: 48px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    }
    .table-content{
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      padding:0 20px
    }
  }
  .transfer-list{
    width: 400px;
    height: 700px;
  }
}

ebc-middle-platform/src/modules/authorization/menu-authorization.vue

@@ -1,45 +1,44 @@
<template>
  <div class="authorization-container" style="display:flex;margin:20px">
    <div style="width:400px;border: 1px solid rgba(0, 0, 0, 0.09);margin-right:20px">
      <div>
  <div class="authorization-container">
    <div class="left-container">
      <div class="title">
        <div>角色列表</div>
      </div>
      <div style="flex-direction: column;
    justify-content: space-between;
    height: 100%;padding:0 20px">
      <div class="table-content">
        <t-table :data="table.data" highlight-current-row @current-change="handleCurrentChange">
          <t-table-column prop="name" label="角色名称"></t-table-column>
          <t-table-column prop="number" label="角色编码"></t-table-column>
        </t-table>
        <div>
          <t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
                   :page-size.sync="table.pager.size"
                   class="px-24 pt-16 float-right"
                   show-elevator show-sizer
                   @on-size-change="onSizeChange"
                   @on-change="onPagerChange">
          </t-pager>
        </div>
        <t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
                 :page-size.sync="table.pager.size"
                 class="px-24 pt-16 float-right"
                 show-elevator
                 @on-size-change="onSizeChange"
                 @on-change="onPagerChange">
        </t-pager>
      </div>
    </div>
    <div>
    <div class="transfer-container">
      <t-transfer
        ref="transfer"
        :data="dataTable"
        :selected-keys="targetKeysTable"
        :operations="['向左移动','向右移动']"
        filterable
        :operations="['← 绑定','解绑 →']"
        :titles="['已关联菜单','可关联菜单']"
        @change="changeTransfer"
      >
        <div slot="listBodyLeft" slot-scope="tableLeft">
          <t-tree :multiple="true"
          <t-tree ref="leftTree" :multiple="true"
                  :with-ancestors="true"
                  :node-data="tableLeft"
                  :with-descendants="true"
                  :node-data="tableLeft.data" @select="changeLeftTree"
          ></t-tree>
        </div>
        <div slot="listBodyRight" slot-scope="tableRight">
          <t-tree :multiple="true"
                  :with-ancestors="true"
                  :node-data="tableRight.data"
                  :with-descendants="true"
                  :node-data="tableRight.data" @select="changeRightTree"
          ></t-tree>
        </div>
      </t-transfer>
@@ -47,6 +46,7 @@
  </div>
</template>
<script>
import './menu-authorization.scss'
export default {
  data() {
    return {
@@ -71,38 +71,191 @@ export default {
          total: 0
        }
      },
      dataTable: this.getMockData(),
      targetKeysTable: []
      dataTable: [
        {
          key: '1',
          label: '地图监控',
          title: '地图监控',
          id: '1'
        },
        {
          key: '2',
          label: '智能报警',
          title: '智能报警',
          value: 'node_2',
          id: '2'
        },
        {
          key: '3',
          label: '统计报表',
          title: '统计报表',
          value: 'node_5',
          id: '3'
        },
        {
          key: '4',
          label: '轨迹分析',
          title: '轨迹分析',
          value: 'node_3',
          id: '4',
          pid: '3'
        },
        {
          key: '5',
          label: '作业考勤',
          title: '作业考勤',
          value: 'node_4',
          id: '5',
          pid: '3'
        },
        {
          key: '6',
          label: '系统管理',
          title: '系统管理',
          id: '6'
        },
        {
          key: '7',
          label: '终端管理',
          title: '终端管理',
          id: '7',
          pid: '6'
        },
        {
          key: '8',
          label: '地图标记',
          title: '地图标记',
          pid: '3',
          id: '8'
        }
      ],
      targetKeysTable: [],
      copyData: [],
      removeData: []
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val
    },
    getMockData: function() {
      let mockData = []
      for (let i = 0; i <= 20; i++) {
        mockData.push({
          key: i.toString(),
          label: '内容' + i,
          description: '描述' + i,
          disabled: Math.random() * 3 < 1
    changeTransfer(targetKeys, direction, moveKeys) {
      console.log('change', targetKeys, direction, moveKeys)
      if (this.copyData.length > 0) {
        // this.dataTable = this.dataTable.concat(this.copyData)
        // this.targetKeysTable.push(this.copyData.id)
        this.copyData.forEach(element => {
          this.dataTable.splice(element.index, 0, element)
        })
        this.copyData = []
      }
      return mockData
      if (this.removeData.length > 0) {
        console.log(this.removeData)
        this.removeData.forEach(element => {
          this.dataTable.splice(element.index, 1)
        })
        this.removeData = []
      }
      console.log(this.dataTable)
    },
    $_onCheckboxChange(selection) {
      let keysArray = []
      selection.forEach(item => {
        keysArray.push(item.key)
    changeLeftTree(ids) {
      console.log(ids)
      var transferId = []
      ids.forEach(id => {
        console.log(this.isContained(ids, this.$refs.leftTree.getNodeStateById(id).children))
        if (this.$refs.leftTree.getNodeStateById(id).children && this.isContained(ids, this.$refs.leftTree.getNodeStateById(id).children)) {
          // 修改子节点的pid
          var includeFlag = true
          this.$refs.leftTree.getNodeStateById(id).children.forEach(elementChild => {
            // 不含在选中的ids
            if (ids.indexOf(elementChild) === -1) {
              includeFlag = false
              this.dataTable.forEach(elementChildTable => {
                if (elementChildTable.id === elementChild) {
                  if (elementChildTable.pid.indexOf('copy') === -1) {
                    elementChildTable.pid = 'copy' + elementChildTable.pid
                  }
                }
              })
            } else {
              this.dataTable.forEach(elementChildTable => {
                if (elementChildTable.id === elementChild) {
                  if (elementChildTable.pid.indexOf('copy') !== -1) {
                    elementChildTable.pid = elementChildTable.pid.slice(4)
                  }
                }
              })
            }
          })
          if (id.indexOf('copy') === -1) {
            var flag = false
            this.copyData.forEach(element => {
              if (element.id === 'copy' + id) {
                flag = true
              }
            })
            if (!flag) {
              var dataIndex = 0
              this.dataTable.forEach((e, index) => {
                if (e.id === id) {
                  dataIndex = index
                }
              })
              this.copyData.push({
                key: 'copy' + id,
                label: this.$refs.leftTree.getNodeStateById(id).label,
                title: this.$refs.leftTree.getNodeStateById(id).title,
                id: 'copy' + id,
                index: dataIndex
              })
            }
          } else {
            if (includeFlag) {
              var includeIndex = 0
              this.dataTable.forEach((e, index) => {
                if (e.id === id) {
                  includeIndex = index
                }
              })
              this.removeData.push({
                key: id,
                label: this.$refs.leftTree.getNodeStateById(id).label,
                title: this.$refs.leftTree.getNodeStateById(id).title,
                id: id,
                index: includeIndex
              })
            }
          }
        }
        if (id.indexOf('copy') === -1) {
          transferId.push(id)
        } else {
          console.log(this.$refs.leftTree.getNodeStateById(id).children)
          if (!this.$refs.leftTree.getNodeStateById(id).children) {
            console.log(123213, id)
          }
        }
      })
      this.targetKeysTable = keysArray
      console.log(transferId)
      this.targetKeysTable = transferId
    },
    changeRightTree(ids) {
      console.log(ids)
    },
    onPagerChange(page) {
    },
    onSizeChange(number) {
    },
    isContained (a, b) {
      if (!(a instanceof Array) || !(b instanceof Array)) return false
      // if (a.length < b.length) return false
      var aStr = a.toString()
      for (var i = 0, len = b.length; i < len; i++) {
        if (aStr.indexOf(b[i]) !== -1) return true
      }
      return false
    }
  }
}

ebc-middle-platform/src/modules/authorization/role-authorization.vue

@@ -0,0 +1,159 @@
<template>
  <div class="authorization-container">
    <div class="left-container">
      <div class="title">
        <div>用户列表</div>
      </div>
      <div class="table-content">
        <t-table :data="table.data" highlight-current-row @current-change="handleCurrentChange">
          <t-table-column prop="name" label="姓名"></t-table-column>
          <t-table-column prop="number" label="员工编号"></t-table-column>
        </t-table>
        <t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
                 :page-size.sync="table.pager.size"
                 class="px-24 pt-16 float-right"
                 show-elevator
                 @on-size-change="onSizeChange"
                 @on-change="onPagerChange">
        </t-pager>
      </div>
    </div>
    <div class="transfer-container">
      <t-transfer
        ref="transfer"
        :data="dataTable"
        :selected-keys="targetKeysTable"
        :operations="['← 绑定','解绑 →']"
        :titles="['已关联角色','可关联角色']"
        @change="changeTransfer"
      >
        <div slot="listBodyLeft" slot-scope="tableLeft">
          <t-table :data="tableLeft.data" size="sm" @selection-change="changeTable">
            <t-table-column type="selection" width="50"></t-table-column>
            <t-table-column prop="label" width="70" label="角色名称"></t-table-column>
            <t-table-column prop="description" width="70" label="角色编码"></t-table-column>
            <div slot="empty"></div>
          </t-table>
        </div>
        <div slot="listBodyRight" slot-scope="tableRight">
          <t-table :data="tableRight.data" size="sm" @selection-change="changeTable">
            <t-table-column type="selection" width="50"></t-table-column>
            <t-table-column prop="label" width="70" label="角色名称"></t-table-column>
            <t-table-column prop="description" width="70" label="角色编码"></t-table-column>
            <div slot="empty"></div>
          </t-table>
        </div>
      </t-transfer>
    </div>
  </div>
</template>
<script>
import './menu-authorization.scss'
export default {
  data() {
    return {
      table: {
        data: [
          {
            name: '张三',
            number: '108373'
          },
          {
            name: '张三',
            number: '108373'
          },
          {
            name: '张三',
            number: '108373'
          }
        ],
        pager: {
          currentPage: 1,
          size: 10,
          total: 0
        }
      },
      dataTable: [
        {
          key: '1',
          label: '超级管理员',
          description: 'superadmin'
        },
        {
          key: '2',
          label: '管理员1',
          description: 'admin1'
        },
        {
          key: '3',
          label: '管理员2',
          description: 'admin2'
        },
        {
          key: '4',
          label: '管理员3',
          description: 'admin3'
        },
        {
          key: '5',
          label: '运维人员1',
          description: 'operator1'
        },
        {
          key: '6',
          label: '运维人员2',
          description: 'operator2'
        },
        {
          key: '7',
          label: '检修人员',
          description: 'maintainer'
        },
        {
          key: '8',
          label: '救援人员1',
          description: 'rescuer1'
        },
        {
          key: '9',
          label: '救援人员2',
          description: 'rescuer2'
        }
      ],
      targetKeysTable: [],
      copyData: []
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val
    },
    changeTransfer(targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys)
    },
    changeTable(elements) {
      var ids = []
      elements.forEach(element => {
        ids.push(element.key)
      })
      console.log(ids)
      this.targetKeysTable = ids
    },
    onPagerChange(page) {
    },
    onSizeChange(number) {
    },
    isContained (a, b) {
      if (!(a instanceof Array) || !(b instanceof Array)) return false
      if (a.length < b.length) return false
      var aStr = a.toString()
      for (var i = 0, len = b.length; i < len; i++) {
        if (aStr.indexOf(b[i]) == -1) return false
      }
      return true
    }
  }
}
</script>

ebc-middle-platform/src/modules/system-management/equipment-management.scss

@@ -39,4 +39,8 @@
  .table-pager{
    margin: 20px auto;
  }
}
.submit-button{
  background-color: #147BD1;
  color: #ffffff;
}

ebc-middle-platform/src/modules/system-management/equipment-management.vue

@@ -40,7 +40,7 @@
        <div class="btns">
          <t-button color="success" icon="upload-outline" @click="onReset">导入</t-button>
          <t-button color="success" icon="download-outline" @click="onReset">下载模板</t-button>
          <t-button color="success" icon="plus-outline" @click="toExport">新增</t-button>
          <t-button color="success" icon="plus-outline" @click="addEquipment">新增</t-button>
        </div>
      </div>
    </div>
@@ -72,6 +72,33 @@
               @on-change="onPagerChange">
      </t-pager>
    </div>
    <t-modal :visibled.sync="modal" title="新增设备" >
      <t-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" label-position="left">
        <t-form-item label="设备类型" prop="type">
          <t-select v-model="formValidate.type" label-in-value placeholder="请选择设备类型">
            <t-option value="1">风机</t-option>
            <t-option value="2">升压站</t-option>
            <t-option value="3">测风塔</t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="设备名称" prop="name">
          <t-input v-model="formValidate.name" placeholder="请输入风机名称"></t-input>
        </t-form-item>
        <t-form-item label="设备编号" prop="number">
          <t-input v-model="formValidate.number" placeholder="请输入字母、数字、中划线、下划线、#"></t-input>
        </t-form-item>
        <t-form-item label="经度" prop="lng">
          <t-input v-model="formValidate.lng" placeholder="请输入数字"></t-input>
        </t-form-item>
        <t-form-item label="纬度" prop="lat">
          <t-input v-model="formValidate.lat" placeholder="请输入数字"></t-input>
        </t-form-item>
      </t-form>
      <div slot="footer">
        <t-button @click="cancel">取消</t-button>
        <t-button class="submit-button" @click="submit">保存</t-button>
      </div>
    </t-modal>
  </div>
</template>
<script>
@@ -113,7 +140,93 @@ export default {
        type: '',
        alarmPerson: ''
      },
      rangeDate: ''
      rangeDate: '',
      modal: false,
      formValidate: {
        type: '',
        name: '',
        number: '',
        lng: '',
        lat: ''
      },
      ruleValidate: {
        type: [{
          required: true,
          message: '设备类型不能为空',
          trigger: 'blur'
        }],
        name: [
          {
            required: true,
            message: '设备名称不能为空',
            trigger: 'blur'
          },
          {
            message: '设备名称重复',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              // TODO 判断编号重复
              if (false) {
                callback(rule.message)
              }
            }
          }
        ],
        number: [
          {
            required: true,
            message: '编号不能为空',
            trigger: 'blur'
          },
          {
            message: '请输入字母、数字、中划线、下划线、#',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              if (!/^[a-zA-Z0-9-_#]+$/.test(value)) {
                callback(rule.message)
              } else {
                // TODO 判断编号重复
                if (false) {
                  rule.message = '编号重复'
                  callback(rule.message)
                }
              }
            }
          }
        ],
        lng: [
          {
            required: true,
            message: '经度不能为空',
            trigger: 'blur'
          },
          {
            message: '请输入数字',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              if (isNaN(value)) {
                callback(rule.message)
              }
            }
          }
        ],
        lat: [
          {
            required: true,
            message: '经度不能为空',
            trigger: 'blur'
          },
          {
            message: '请输入数字',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              if (isNaN(value)) {
                callback(rule.message)
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
@@ -138,6 +251,21 @@ export default {
    },
    onSizeChange(number) {
    },
    cancel() {
      this.modal = false
    },
    submit() {
      this.$refs.formValidate.validate(valid => {
        if (valid) {
          this.$Message.success('提交成功!')
        } else {
          this.$Message.danger('表单验证失败!')
        }
      })
    },
    addEquipment() {
      this.modal = true
    }
  }
}

ebc-middle-platform/src/modules/system-management/map-mark.scss

@@ -39,4 +39,56 @@
  .table-pager{
    margin: 20px auto;
  }
}
.modal{
  .top{
    display: flex;
    >div{
      display: flex; 
      margin: 0 20px 16px 0;    
      line-height: 2;
      .label-content{
        display: flex; 
        margin: 0 20px 16px 0;    
        line-height: 2;
      }
      .input-rule{
        flex: 1;
        margin:0 0 0 20px;
        .dropdown{
          width: 100%
        }
      }
    }
  }
  .content{
    display: flex;
    .left{
      width: 430px;
      .header{
        display: flex;
        justify-content: space-between;
        padding-right: 10px;
        .import-down{
          display: flex;
        }
      }
      th{
        padding: 0;
      }
      .explain{
        margin-top: 20px;
        font-size: 10px;
        color: #000000;
        padding-right: 10px;
        .title{
          color: #4C8DDA;
        }
      }
    }
    .right{
      width: 1200px;
      height: 700px;
    }
  }
}

ebc-middle-platform/src/modules/system-management/map-mark.vue

@@ -16,10 +16,10 @@
          </div>
        </div>
        <div class="btns">
          <t-button color="success" icon="plus-outline" @click="onReset">考勤区域</t-button>
          <t-button color="success" icon="plus-outline" @click="onReset">作业区域</t-button>
          <t-button color="success" icon="plus-outline" @click="onSearch">电子围栏</t-button>
          <t-button color="success" icon="plus-outline" @click="toExport">定点</t-button>
          <t-button color="success" icon="plus-outline" @click="markModal(1)">考勤区域</t-button>
          <t-button color="success" icon="plus-outline" @click="markModal(2)">作业区域</t-button>
          <t-button color="success" icon="plus-outline" @click="markModal(3)">电子围栏</t-button>
          <t-button color="success" icon="plus-outline" @click="markModal(4)">定点</t-button>
        </div>
      </div>
    </div>
@@ -49,6 +49,57 @@
               @on-change="onPagerChange">
      </t-pager>
    </div>
    <t-modal :visibled.sync="addMark" :ok="submitMark" :cancel="cancel" class="modal" title="新增标记" ok-text="保存" width="1500px" >
      <div class="top">
        <div>
          <div class="label">标记类型:</div>
          <div class="input-rule">
            <t-select v-model="markType" width="200" placeholder="请输入...">
              <t-option v-for="item in markTypes" :key="item.id" :value="item.id">{{ item.type }}</t-option>
            </t-select>
          </div>
        </div>
        <div>
          <div class="label">标记名称:</div>
          <div class="input-rule">
            <t-input v-model="markName" placeholder="请输入..." style="width: 200px"></t-input>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="left">
          <div class="header">
            <div>坐标列表</div>
            <div class="import-down">
              <a href="javascript:void(0)" size="sm" @click="handleClick(scope.row)">导入kml</a>
              <span class="mod-line">|</span>
              <a href="javascript:void(0)" size="sm" @click="handleClick(scope.row)">下载模板</a>
            </div>
          </div>
          <div>
            <t-table :data="modalData" size="sm" height="500">
              <t-table-column align="center" type="index" label="坐标名称"></t-table-column>
              <t-table-column align="center" prop="lng" label="经度"></t-table-column>
              <t-table-column align="center" prop="lat" label="纬度"></t-table-column>
            </t-table>
          </div>
          <div class="explain">
            <div class="title">说明</div>
            <div>
              1、可在地图中点击绘制对应区域
            </div>
            <div>
              2、可编辑坐标列表中的经纬度值调整对应点坐标，对应点在地图中处于选中态
            </div>
            <div>
              3、kml导入将清空已绘制信息
            </div>
          </div>
        </div>
        <div id="modalMap" class="right">
        </div>
      </div>
    </t-modal>
  </div>
</template>
<script>
@@ -84,10 +135,57 @@ export default {
        type: '',
        alarmPerson: ''
      },
      rangeDate: ''
      rangeDate: '',
      addMark: false,
      markName: '',
      markType: 1,
      markTypes: [
        {
          id: 1,
          type: '考勤区域'
        },
        {
          id: 2,
          type: '作业区域'
        },
        {
          id: 3,
          type: '电子围栏'
        },
        {
          id: 4,
          type: '定点'
        }
      ],
      modalData: [],
      map: null,
      polygonDrawer: null
    }
  },
  mounted() {
    this.map = new Ai.Map('modalMap', {
      ak: 'MTYwMDkMTAwMU1UWXdNRGt4T0RnNU5UVXlNaU14TnpRdw__',
      center: [39.915599, 116.406568],
      zoom: 5
    })
    var maplayer = null
    maplayer = Ai.TileLayer('http://192.168.74.189:9999/tdtvector')
    this.map.addLayer(maplayer)
    var options = {
      guideLayers: []// 导向（吸附）图层对象，当距离相隔很近的时候会与导向对象重合
    }
    this.polygonDrawer = Ai.DrawPolygon(this.map, options)// 初始化多边形绘制工具
    this.polygonDrawer.enable()// 激活多边形绘制工具
    this.map.on(AiDrawEvent.CREATED, (e) => {
      console.log(1)
      this.layer = this.polygonDrawer.polygon(e)// 获取多边形信息
      // console.log(this.polygonDrawer.getPoints())
      this.modalData = this.layer._latlngs[0]
      this.polygonDrawer.editing(this.layer)
      this.polygonDrawer.disable()
      this.map.addLayer(this.layer)
    })
  },
  methods: {
    onChange(value) {
@@ -102,6 +200,23 @@ export default {
    toExport() {
    },
    markModal(typeId) {
      this.markType = typeId
      this.addMark = true
      this.polygonDrawer.enable()
    },
    submitMark() {
      console.log(this.layer._latlngs[0])
      this.map.removeLayer(this.layer)
      this.polygonDrawer.disable()
      this.modalData = []
    },
    cancel() {
      console.log(this.layer)
      this.map.removeLayer(this.layer)
      this.polygonDrawer.disable()
      this.modalData = []
    },
    onPagerChange(page) {
    },

ebc-middle-platform/src/modules/system-management/terminal-management.scss

@@ -83,4 +83,8 @@
    border-radius: 5px;
    background-color: #E8F8E8;
  }
}
.submit-button{
  background-color: #147BD1;
  color: #ffffff;
}

ebc-middle-platform/src/modules/system-management/terminal-management.vue

@@ -27,6 +27,11 @@
          <t-button color="secondary" icon="unlock-outline" @click="toExport">解绑用户</t-button>
          <t-button color="secondary" icon="delete-outline" @click="toExport">删除</t-button>
        </div>
        <div class="btns">
          <t-button color="success" icon="upload-outline" @click="onReset">导入</t-button>
          <t-button color="success" icon="download-outline" @click="onReset">下载模板</t-button>
          <t-button color="success" icon="plus-outline" @click="addTerminal">新增</t-button>
        </div>
      </div>
    </div>
    <div>
@@ -71,6 +76,25 @@
               @on-change="onPagerChange">
      </t-pager>
    </div>
    <t-modal :visibled.sync="modal" title="新增终端" >
      <t-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" label-position="left">
        <t-form-item label="终端编号" prop="number">
          <t-input v-model="formValidate.number" placeholder="请输入字母、数字、中划线、下划线、#"></t-input>
        </t-form-item>
        <t-form-item label="备注" prop="desc">
          <t-input
            v-model="formValidate.desc"
            :autosize="{minRows: 2,maxRows: 5}"
            type="textarea"
            placeholder="请输入..."
          ></t-input>
        </t-form-item>
      </t-form>
      <div slot="footer">
        <t-button @click="cancel">取消</t-button>
        <t-button class="submit-button" @click="submit">保存</t-button>
      </div>
    </t-modal>
  </div>
</template>
<script>
@@ -117,7 +141,36 @@ export default {
        type: '',
        alarmPerson: ''
      },
      rangeDate: ''
      rangeDate: '',
      modal: false,
      formValidate: {
        number: '',
        desc: ''
      },
      ruleValidate: {
        number: [
          {
            required: true,
            message: '编号不能为空',
            trigger: 'blur'
          },
          {
            message: '请输入字母、数字、中划线、下划线、#',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              if (!/^[a-zA-Z0-9-_#]+$/.test(value)) {
                callback(rule.message)
              } else {
                // TODO 判断编号重复
                if (true) {
                  rule.message = '编号重复'
                  callback(rule.message)
                }
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
@@ -147,6 +200,21 @@ export default {
    },
    onSizeChange(number) {
    },
    addTerminal() {
      this.modal = true
    },
    cancel() {
      this.modal = false
    },
    submit() {
      this.$refs.formValidate.validate(valid => {
        if (valid) {
          this.$Message.success('提交成功!')
        } else {
          this.$Message.danger('表单验证失败!')
        }
      })
    }
  }
}

ebc-middle-platform/src/modules/system-management/user-management.scss

@@ -39,4 +39,8 @@
  .table-pager{
    margin: 20px auto;
  }
}
.submit-button{
  background-color: #147BD1;
  color: #ffffff;
}

ebc-middle-platform/src/modules/system-management/user-management.vue

@@ -40,7 +40,7 @@
        <div class="btns">
          <t-button color="success" icon="upload-outline" @click="onReset">导入</t-button>
          <t-button color="success" icon="download-outline" @click="onReset">下载模板</t-button>
          <t-button color="success" icon="plus-outline" @click="toExport">新增</t-button>
          <t-button color="success" icon="plus-outline" @click="addUser">新增</t-button>
        </div>
      </div>
    </div>
@@ -78,6 +78,40 @@
               @on-change="onPagerChange">
      </t-pager>
    </div>
    <t-modal :visibled.sync="modal" title="新增设备" >
      <t-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" label-position="left">
        <t-form-item label="姓名" prop="name">
          <t-input v-model="formValidate.name" placeholder="请输入风机名称"></t-input>
        </t-form-item>
        <t-form-item label="员工编号" prop="number">
          <t-input v-model="formValidate.number" placeholder="请输入字母、数字、中划线、下划线、#"></t-input>
        </t-form-item>
        <t-form-item label="部门" prop="department">
          <t-select v-model="formValidate.department" label-in-value placeholder="请选择设备类型">
            <t-option value="1">部门1</t-option>
            <t-option value="2">部门2</t-option>
            <t-option value="3">部门3</t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="职务" prop="job">
          <t-select v-model="formValidate.job" label-in-value placeholder="请选择设备类型">
            <t-option value="1">职务1</t-option>
            <t-option value="2">职务2</t-option>
            <t-option value="3">职务3</t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="年龄" prop="age">
          <t-input v-model="formValidate.age" placeholder="请输入数字"></t-input>
        </t-form-item>
        <t-form-item label="手机" prop="phone">
          <t-input v-model="formValidate.phone" placeholder="请输入数字"></t-input>
        </t-form-item>
      </t-form>
      <div slot="footer">
        <t-button @click="cancel">取消</t-button>
        <t-button class="submit-button" @click="submit">保存</t-button>
      </div>
    </t-modal>
  </div>
</template>
<script>
@@ -125,7 +159,90 @@ export default {
        type: '',
        alarmPerson: ''
      },
      rangeDate: ''
      rangeDate: '',
      modal: false,
      formValidate: {
        name: '',
        number: '',
        department: '',
        job: '',
        age: '',
        phone: ''
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur'
          }
        ],
        number: [
          {
            required: true,
            message: '员工编号不能为空',
            trigger: 'blur'
          },
          {
            message: '员工编号重复',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              // TODO 判断编号重复
              if (false) {
                callback(rule.message)
              }
            }
          }
        ],
        department: [
          {
            required: true,
            message: '部门不能为空',
            trigger: 'blur'
          }
        ],
        job: [
          {
            required: true,
            message: '职务不能为空',
            trigger: 'blur'
          }
        ],
        age: [
          {
            required: true,
            message: '年龄不能为空',
            trigger: 'blur'
          },
          {
            message: '年龄不正确',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              let pattern = /^(([0-9]|[1-9][1-9]|1[0-7][0-9])(\\.[0-9]+)?|180)$/
              if (!pattern.test(value)) {
                callback(rule.message)
              }
            }
          }
        ],
        phone: [
          {
            required: true,
            message: '手机不能为空',
            trigger: 'blur'
          },
          {
            message: '手机不正确',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              let pattern = /^1[3456789]\d{9}$/
              if (!pattern.test(value)) {
                callback(rule.message)
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
@@ -150,6 +267,21 @@ export default {
    },
    onSizeChange(number) {
    },
    cancel() {
      this.modal = false
    },
    submit() {
      this.$refs.formValidate.validate(valid => {
        if (valid) {
          this.$Message.success('提交成功!')
        } else {
          this.$Message.danger('表单验证失败!')
        }
      })
    },
    addUser() {
      this.modal = true
    }
  }
}