系统设置、用户管理

src/api/bridgeInfo.js

import request from '@/utils/request'
export function getBridgeList(params) { // 用户所有桥梁
  return request({
    url: '/ajax/bridge/byUser',
    method: 'get',
    params
  })
}
export function getBridgeInfo(params) { // 桥梁信息
  return request({
    url: '/ajax/bridge/qo',
    method: 'get',
    params
  })
}
export function getBridgeServers(params) { // 桥梁服务器
  return request({
    url: '/ajax/server/byBridge',
    method: 'get',
    params
  })
}
// 报警信息
export function getDangerList(params) {
  return request({
    url: '/ajax/alarm/msg',
    method: 'get',
    params
  })
}
export function getDangerDetail(params) {
  return request({
    url: '/ajax/alarm/detail',
    method: 'get',
    params
  })
}
// 报警信息
// 未读报警
export function getBridgeUnread(params) {
  return request({
    url: '/ajax/alarm/msg/unread',
    method: 'get',
    params
  })
}
export function setUnreadToRead(params) {
  return request({
    url: '/ajax/alarm/msg/read',
    method: 'post',
    data: params
  })
}
// 未读报警
// 监测信息
export function getMonitorByDay(params) {
  return request({
    url: '/ajax/collect/wave/server/day',
    method: 'get',
    params
  })
}
export function getSysTime(params) {
  return request({
    url: '/ajax/sys/serviceTime',
    method: 'get',
    params
  })
}
export function getMonitorByTime(params) {
  return request({
    url: '/ajax/collect/wave/server/time',
    method: 'get',
    params
  })
}
export function getTimingMonitor(params) {
  return request({
    url: '/ajax/collect/wave/curr',
    method: 'get',
    params
  })
}
// 监测信息

src/api/platUpdate.js

/* 查看当前平台信息 */
export const queryPlat = '/ajax/platform/get'
/* 修改平台信息 */
export const updatePlat = '/ajax/platform/update'
/* 上传图片 */
export const uploadLogo = '/ajax/platform/logo'

src/api/sysSetting.js

/*  分页查询用户 */
/* 分页查询用户 */
export const pageQueryUser = '/ajax/sys/pq'
/*  查看用户信息 */
/* 查看用户信息 */
export const queryUserOne = '/ajax/sys/qo'
/*  检查账号是否注册 */
/* 检查账号是否注册 */
export const checkRegister = '/ajax/sys/check'
/*  新增用户 */
/* 检测用户是否存在*/
export const existUser = '/ajax/sys/exists'
/* 新增用户 */
export const addUser = '/ajax/sys/new'
/*  修改用户信息 */
/* 修改用户信息 */
export const updateUser = '/ajax/sys/renew'
/*  修改用户权限 */
/* 修改用户权限 */
export const updatePermission = '/ajax/sys/right/'
/*  重置密码 */
/* 重置密码 */
export const resetPw = '/ajax/sys/resetpw'
/*  停用用户 */
export const banUser = '/ajax/sys/ban'
export const banUser = '/ajax/sys/disable'
/* 恢复用户 */
export const renewUser = '/ajax/sys/enable'

src/api/userInfo.js

/* 分页查询平台正常用户列表 */
export const pageNormalUser = '/ajax/sys/user/pq'
/* 查看正常用户信息 */
export const queryNormalOne = '/ajax/sys/user/qo'
/* 分页查询平台拉黑用户列表 */
export const pageBlackUser = '/ajax/sys/user/invalid/pq'
/* 查看拉黑用户信息 */
export const queryBlackOne = '/ajax/sys/user/invalid/qo'
/* 拉黑用户 */
export const blackUser = '/ajax/sys/user/invalid'
/* 取消拉黑用户 */
export const cancelBlackUser = '/ajax/sys/user/valid'

src/store/modules/user.js

          reject(error)
        })
      })
    },
    // 前端退出
    FedLogOut({ commit }) {
      return new Promise(resolve => {
        commit('SET_USERID', '')
        commit('SET_NAME', '')
        Cookies.remove('userid')
        resolve()
      })
    }
  }
}

src/styles/element-ui.scss

  }
}
.textarea-div{
  line-height: 22px;
  margin-bottom: 10px;
  margin-top:10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.el-select {
  width:100%
}
.el-date-editor.el-input, .el-date-editor.el-input__inner{
  width:100%;
}
.el-table th{
  font-weight:bold;
  font-size: 16px;
  color: #333;
  background: #c6d5de;
}
.el-table .cell{
  min-height: 23px
  min-height: 23px;
  .el-button--text {
    white-space: normal;
    line-height: 23px;
  }
}

src/styles/index.scss

    background:#ffffff;
    padding:15px;
    overflow:hidden;
    .operate-row{
      .el-button{
        width:70px;
        padding:6px;
        margin:5px;
      }
    }
    .contain-select{
      margin-bottom:15px;
      float:right;

src/styles/variables.scss

//sidebar
$menuBg:#20436b;
$subMenuBg:#052d5a;
$menuHover:#1c3d6f;
$menuHover:#133c79;

src/utils/comTable.js

/* eslint-disable one-var */
var defaultPageSize = 20,
  gapFilling = function(tData, pageS) {
    const pageSize = pageS ? pageS : defaultPageSize
    let pageSize = defaultPageSize
    if (pageS) {
      pageSize = pageS
    }
    const needNum = pageSize - tData.length % pageSize
    for (let i = 0; i < needNum; ++i) {
      tData.push(i)

src/utils/index.js

 */
export const comUrl = process.env.BASE_API
/**
 * default img
 */
export const defaultSet = {
  img: {
    user: '/static/comimg/default-expert.jpg'
  }
}
/**
 * 解析url参数
 * @example ?id=12345&a=b

src/utils/queryBase.js

 */
/* eslint-disable one-var */
import request from '@/utils/request'
var $req = {
import { queryUserOne } from '@/api/sysSetting'
  get: function(url, data, sh, eh) {
import { queryNormalOne, queryBlackOne } from '@/api/userInfo'
    request({
      method: 'get',
      url: url,
      params: data
    }).then(res => {
      sh(res)
    }).catch(err => {
      console.log(err)
      eh(err)
    })
  }
}
var objCache = {
  bridge: {},
  adminUser: {},
  server: {},
  normalOne: {},
  device: {}
  blackOne: {}
}
var objHcache = {
  bridge: {},
  adminUser: {},
  server: {},
  normalOne: {},
  device: {}
  blackOne: {}
}
var objCacheHandler = {
  bridge: function(id) {
  adminUser: function(id) {
    var hc = objHcache.bridge[id]
    var hc = objHcache.adminUser[id]
    $req.get('/ajax/bridge/qo?id=' + id, null, function(data) {
    request.get(queryUserOne, {
      delete objHcache.bridge[id]
      id: id
    }, function(data) {
      delete objHcache.adminUser[id]
      if (data.success) {
        objCache.bridge[id] = data.data
        objCache.adminUser[id] = data.data
        for (let i = 0; i < hc.length; ++i) {
          hc[i](true, data.data)
        }
      }
    })
  },
  server: function(id) {
  normalOne: function(id) {
    var hc = objHcache.server[id]
    var hc = objHcache.normalOne[id]
    $req.get('/ajax/server/qo?id=' + id, null, function(data) {
    request.get(queryNormalOne, {
      delete objHcache.server[id]
      id: id
    }, function(data) {
      delete objHcache.normalOne[id]
      if (data.success) {
        objCache.server[id] = data.data
        objCache.normalOne[id] = data.data
        for (let i = 0; i < hc.length; ++i) {
          hc[i](true, data.data)
        }
      }
    })
  },
  device: function(id) {
  blackOne: function(id) {
    var hc = objHcache.device[id]
    var hc = objHcache.blackOne[id]
    $req.get('/ajax/device/qo?id=' + id, null, function(data) {
    request.get(queryBlackOne, {
      delete objHcache.device[id]
      id: id
    }, function(data) {
      delete objHcache.blackOne[id]
      if (data.success) {
        objCache.device[id] = data.data
        objCache.blackOne[id] = data.data
        for (let i = 0; i < hc.length; ++i) {
          hc[i](true, data.data)
        }
  }
}
var cacheModel = {
  getBridge: function(id, handler) {
  getAdminUser: function(id, handler) {
    var data = objCache.bridge[id]
    var data = objCache.adminUser[id]
    if (data) {
      handler(true, data)
    } else {
      if (objHcache.bridge[id]) {
      if (objHcache.adminUser[id]) {
        objHcache.bridge[id].push(handler)
        objHcache.adminUser[id].push(handler)
      } else {
        objHcache.bridge[id] = []
        objHcache.adminUser[id] = []
        objHcache.bridge[id].push(handler)
        objHcache.adminUser[id].push(handler)
        objCacheHandler.bridge(id)
        objCacheHandler.adminUser(id)
      }
    }
  },
  getServer: function(id, handler) {
  getNormalOne: function(id, handler) {
    var data = objCache.server[id]
    var data = objCache.normalOne[id]
    if (data) {
      handler(true, data)
    } else {
      if (objHcache.server[id]) {
      if (objHcache.normalOne[id]) {
        objHcache.server[id].push(handler)
        objHcache.normalOne[id].push(handler)
      } else {
        objHcache.server[id] = []
        objHcache.normalOne[id] = []
        objHcache.server[id].push(handler)
        objHcache.normalOne[id].push(handler)
        objCacheHandler.server(id)
        objCacheHandler.normalOne(id)
      }
    }
  },
  getDevice: function(id, handler) {
  getBlackOne: function(id, handler) {
    var data = objCache.device[id]
    var data = objCache.blackOne[id]
    if (data) {
      handler(true, data)
    } else {
      if (objHcache.device[id]) {
      if (objHcache.blackOne[id]) {
        objHcache.device[id].push(handler)
        objHcache.blackOne[id].push(handler)
      } else {
        objHcache.device[id] = []
        objHcache.blackOne[id] = []
        objHcache.device[id].push(handler)
        objHcache.blackOne[id].push(handler)
        objCacheHandler.device(id)
        objCacheHandler.blackOne(id)
      }
    }
  }

src/utils/queryDict.js

    }
  },
  loadDict = function(code) {
    request({
    request.get(uri, {
      url: uri,
      dict: code
      method: 'get',
    }, function(res) {
      params: {
        dict: code
      }
    }).then(res => {
      setDict(code, res.data)
    })
  },

src/utils/request.js

import axios from 'axios'
import qs from 'qs'
import { Message } from 'element-ui'
import { comUrl } from '@/utils/index'
import router from '@/router'
import store from '@/store'
// 创建axios实例
const service = axios.create({
  baseURL: comUrl, // api的base_url
  baseURL: process.env.BASE_API // api的base_url
  // timeout: 5000, // 请求超时时间
  paramsSerializer: function(params) {
    return qs.stringify(params, { arrayFormat: 'repeat' })
  }
})
// request拦截器
  // 配置config
  config.headers.Accept = 'application/json'
  if (config.method === 'post') {
    config.data = qs.stringify(config.data)
    config.data = qs.stringify(config.data, { arrayFormat: 'repeat' })
    // 处理后后台无需添加RequestBody
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
  }
// respone拦截器
service.interceptors.response.use(response => {
  let taR = response.data
  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
  if (response && response.status === 200) {
    if (response.data === undefined) { // 解决IE9数据问题
      taR = response.request.responseText
    } else {
    if (!(taR instanceof Object)) { // 判断taR不是Object时，解析成Object
      taR = JSON.parse(taR)
    }
    if (!taR.success && taR.code === 0) {
      Message.error(taR.msg)
    }
    if (!taR.success && taR.code === 1) {
      store.dispatch('FedLogOut').then(() => {
        Message.error('登录状态失效，请重新登录')
        router.push({ path: '/' })
      })
    }
    return taR
  } else {
    Message.error('2333')
    Message.error('请求错误1，请重试')
    return Promise.resolve(response)
  }
}, error => {
  Message.error('服务器连接失败，请重新')
  Message.error('请求错误2，请重试')
  return Promise.reject(error)
})

src/utils/validator.js

 * form validator rules
 */
export function focusFun(rule, value, callback) {
export function requiredTip(str) {
  if (value !== '') {
  return `请填写${str}`
    if (value) {
}
      callback(new Error(`请填写${this.maxlength}字以内机构名称`))
export function limitNumTip(str, num) {
    } else {
  return `${str}不得超过${num}个字`
      callback()
}
    }
export function formatTip(str) {
  } else {
  return `${str}格式有误，请检查后重新填写`
    callback()
  }
}
// 邮箱,@,50个字
export function checkEmailV(rule, value, callback) {
  const reg = /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/
  if (!reg.test(value)) {
  if (value && !reg.test(value) && value.length < 50) {
    return callback(new Error('请填写正确的邮箱格式'))
    return callback(new Error('邮箱格式有误，请检查后重新填写'))
  } else {
    return callback()
  }
  // if (value.length) {
  //   return callback(new Error('请填写50字以内的邮箱地址'))
  // }
}
// 电话,50个字
// 手机号码验证
export function checkPhoneV(rule, value, callback) {
  // const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
  const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
  if (value.length) {
  if (!value) {
    return callback(new Error('请填写50字以内的电话号码'))
    return callback(new Error('请填写手机号码'))
  } else if (!reg.test(value)) {
    return callback(new Error('手机号码格式有误，请检查后重新填写'))
  } else {
    return callback()
  }
}
// 类似金钱,首位不为0,最多2位小数
export function checkNumPot2(rule, value, callback) {
  const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2,3})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
  if (value === '') {
    callback()
  } else if (!reg.test(value)) {
    callback(new Error('请填写数字,最多2位小数'))
  }
}
// 邮编,限制只能输入数字,20个字
export function checkInterNum(rule, value, callback) {
  const reg = /^[0-9]*[1-9][0-9]*$/
  if (!value) {
    return callback()
    return false
  } else if (!reg.test(value)) {
    return callback(new Error('请输入正确邮编'))
  } else {

src/views/companyCen/noactive/compInfo.vue

                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="企业规模" prop="">
                  <el-form-item label="企业规模" prop="selectNumRanger">
                    <el-select v-model="selectLongTime" placeholder="请选择员工数量范围">
                    <el-select v-model="selectNumRanger" placeholder="请选择员工数量范围">
                      <el-option
                        v-for="item in longTime"
                        v-for="item in numRanger"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="企业类型" prop="createYear">
                  <el-form-item label="企业类型" prop="selectCompType">
                    <el-select v-model="selectLongTime" placeholder="请选择最符合的一项">
                    <el-select v-model="selectCompType" placeholder="请选择最符合的一项">
                      <el-option
                        v-for="item in longTime"
                        v-for="item in compType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    <dynamicTags :tagInfo="tagSubject" :dyStr="formObj.subject" v-on:turnTags="turnSubjectTags($event)"></dynamicTags>
                  </el-form-item>
                </el-col>
                
                <!-- :labelW="80"
                  :widthselect="200"
                  :prov="province"
                  :city="city"
                  v-on:selectProv="getSelectProv($event)"
                  v-on:selectCity="getSelectCity($event)" -->
                
                
                <el-col :span="24">
                  <el-form-item class="is-required" label="企业简介" prop="desc">
                    <el-input type="textarea" :rows="8" v-model="formObj.desc" placeholder="请填写一个简单的介绍，让大家更好地了解您的企业" maxlength="5000"></el-input>
          limitCount: 15,
          tagsNum: 5
        },
        numRanger: [],
        compType: [],
        selectNumRanger: '',
        selectCompType: '',
        plf_user: '',
        plf_name: '',
        imageUrl: '', // 临时地址
        // httpUrl.hQuery.baseInfo.upload
        // optionsCity: provinceAndCityData,
        // selectedOptions: [],
        dynamicTags: [],
        isShowAdd: true,
        inputVisible: false,
        inputValue: '',
        province: '',
        city: '',
        formObj: {
      this.getDictoryData()
      // this.plf_user = Cookies.get('plf_user')
      // this.getPlatInfo(this.plf_user)
      console.log(this.numRanger)
      console.log(this.compType)
    },
    methods: {
      getDictoryData() {
        const that = this
        queryDict.applyDict('QYGM', function(dictData) {
          dictData.map(item => {
            that.cableMain[item.code] = item.caption
            that.numRanger.push({ value: item.code, label: item.caption })
          })
        }) // 企业规模
        queryDict.applyDict('QYLX', function(dictData) {
          dictData.map(item => {
            that.addr[item.code] = item.caption
            that.compType.push({ value: item.code, label: item.caption })
          })
        }) // 企业类型
        queryDict.applyDict('XZQH', function(dictData) {

src/views/platInfo/platUpdate.vue

            <el-col :span="14">
              <el-row :gutter="20" class="update-main">
                <el-col :span="24">
                  <el-form-item label="平台名称">邢台条件科技平台</el-form-item>
                  <el-form-item label="平台名称">{{formObj.name}}</el-form-item>
                </el-col>
                <el-col :span="24">
                <el-col :span="item.span||''" v-for="item in formItem" :key="item.index">
                  <el-form-item class="is-required" label="平台网址" prop="website">
                  <el-form-item :label="item.tit" :prop="item.prop">
                    <el-input v-model="formObj.website" placeholder="请填写平台网址" @fousc="" maxlength="50"></el-input>
                    <el-input v-if="item.textarea" type="textarea" :rows="8" v-model="formObj[item.prop]" placeholder="请填写一个平台的简单介绍，让大家更好地了解平台" maxlength="5000"></el-input>
                  </el-form-item>
                    <!-- <cityPicker v-else-if="item.city" @paren="toshow" :addrCode='formObj[item.prop]'></cityPicker> -->
                </el-col>
                    <el-input v-else v-model="formObj[item.prop]" :placeholder="`请填写${item.place||''}${item.tit}`" :maxlength="item.num||''"></el-input>
                <el-col :span="24">
                  <el-form-item class="is-required" label="管理机构" prop="">
                    <el-input v-model="formObj.website" placeholder="请填写管理机构名称" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="is-required" label="所在城市" prop="">
                    <cityPicker></cityPicker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="平台邮编" prop="website">
                    <el-input v-model="formObj.website" type="number" placeholder="请填写管理机构名称" maxlength="20"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item class="is-required" label="详细地址" prop="address">
                    <el-input v-model="formObj.address" placeholder="请填写管理机构详细地址" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="is-required" label="客服电话" prop="tel">
                    <el-input v-model="formObj.tel" placeholder="请填写客服电话" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="is-required" label="客服邮箱" prop="mail">
                    <el-input v-model="formObj.mail" placeholder="请填写客服邮箱" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item class="is-required" label="工作时间" prop="linkman">
                    <el-input v-model="formObj.linkman" placeholder="请填写客服工作时间" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="is-required" label="联系人" prop="linkman">
                    <el-input v-model="formObj.linkman" placeholder="请填写平台联系人" maxlength="10"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="is-required" label="职位" prop="linkman">
                    <el-input v-model="formObj.linkman" placeholder="请填写联系人职位" maxlength="20"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item class="is-required" label="所在机构" prop="website">
                    <el-input v-model="formObj.website" placeholder="请填写联系人所在机构" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="is-required" label="联系电话" prop="tel">
                    <el-input v-model="formObj.tel" placeholder="请填写联系电话" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系邮箱" prop="mail">
                    <el-input v-model="formObj.mail" placeholder="请填写联系邮箱" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <!-- :labelW="80"
                  :widthselect="200"
                  :prov="province"
                  :city="city"
                  v-on:selectProv="getSelectProv($event)"
                  v-on:selectCity="getSelectCity($event)" -->
                <el-col :span="24">
                  <el-form-item class="is-required" label="平台简介" prop="desc">
                    <el-input type="textarea" :rows="8" v-model="formObj.desc" placeholder="请填写一个平台的简单介绍，让大家更好地了解平台" maxlength="5000"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
              </el-row>
            </el-col>
            <el-col :span="10">
              <div class="update-logo">
              <div class="fileBox" v-on:uploadfun="uploadfun">
                <uploadFile :uploadImg=uploadImg></uploadFile>
                <p class="teimg">上传封面图片</p>
                <p class="tetype">PNG/JPG/JPEG格式，2M以内</p>
              </div>
              <!-- <div class="update-logo">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div class="update-tip">PNG/JPG/JPEG格式<br>大小2M以内</div>
              </div>
              </div> -->
            </el-col>
            <el-col :span="24">
            <el-col :offset="16">
              <el-form-item align="right">
              <el-form-item>
                <div>最后修改人：XXXX</div>
                <div style="line-height: 10px;">
                <div>最后修改时间：2018/08/23 18：52：12</div>
                  <p>最后修改人: {{formObj.modifier}}</p>
                  <p>最后修改时间: {{formObj.modifyTime}}</p>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
</template>
<script>
  import {
    queryPlat,
    updatePlat,
    uploadLogo
  } from '@/api/platUpdate'
  import {
    requiredTip,
    limitNumTip,
    checkEmailV
  } from '@/utils/validator'
  import { parseTime } from '@/utils'
  import queryDict from '@/utils/queryDict'
  import queryBase from '@/utils/queryBase'
  import cityPicker from '@/components/CityPicker'
  import uploadFile from '@/components/uploadFile'
  export default {
    data() {
      return {
        plf_user: '',
        uploadImg: {
        plf_name: '',
          url: uploadLogo,
        imageUrl: '', // 临时地址
          width: '280px',
        imgName: '', // 图片的name
          height: '200px',
        uploadUrl: '',
          fun: 'uploadfun'
        dynamicTags: [],
        },
        isShowAdd: true,
        AllCitys: [],
        inputVisible: false,
        formItem: [
        inputValue: '',
          {
        province: '',
            span: 24,
        city: '',
            prop: 'url',
            tit: '平台网址',
            required: true
          },
          {
            span: 24,
            prop: 'manageOrg',
            tit: '管理机构',
            required: true
          },
          {
            span: 12,
            prop: 'addr',
            city: true,
            tit: '所在城市',
            required: true
          },
          {
            span: 12,
            prop: 'zipCode',
            tit: '平台邮编',
            num: 20
          },
          {
            span: 24,
            prop: 'location',
            tit: '详细地址',
            num: 50,
            place: '管理机构'
          },
          {
            span: 12,
            prop: 'servicePhone',
            tit: '客服电话',
            num: 50,
            required: true
          },
          {
            span: 12,
            prop: 'serviceEmail',
            tit: '客服邮箱',
            num: 50,
            required: true
          },
          {
            span: 24,
            prop: 'operateTime',
            tit: '工作时间',
            num: 50
          },
          {
            span: 12,
            prop: 'linkman',
            tit: '联系人',
            required: true,
            place: '平台',
            num: 10
          },
          {
            span: 12,
            prop: 'job',
            tit: '职位',
            required: true,
            place: '联系人',
            num: 20
          },
          {
            span: 24,
            prop: 'comp',
            tit: '所在机构',
            required: true,
            place: '联系人',
            num: 50
          },
          {
            span: 12,
            prop: 'linkphone',
            tit: '联系电话',
            num: 50,
            required: true
          },
          {
            span: 12,
            prop: 'linkemail',
            tit: '联系邮箱',
            num: 50
          },
          {
            span: 24,
            prop: 'descp',
            tit: '平台简介',
            textarea: true,
            required: true,
            num: 5000
          }
        ],
        formObj: {
          name: '',
          logo: '',
          url: '',
          manageOrg: '',
          addr: '',
          location: '',
          zipCode: '',
          servicePhone: '',
          serviceEmail: '',
          operateTime: '',
          linkman: '',
          tel: '',
          job: '',
          mail: '',
          department: '',
          address: '',
          comp: '',
          website: '',
          linkphone: '',
          industry: '',
          linkemail: '',
          desc: ''
          descp: ''
        },
        rulesObj: {
        rulesObj: {}
        }
      }
    },
    components: {
      cityPicker,
      uploadFile
    },
    computed: {
    },
    created() {
      this.getDictoryData()
      this.pushRulesFn()
      this.queryPlatInfo()
    },
    methods: {
      getDictoryData() {
        const that = this
        queryDict.applyDict('XZQH', function(dictData) {
          dictData.map(item => {
            that.AllCitys[item.code] = item.fullCaption
          })
        }) // 城市级联
      },
      pushRulesFn() {
        const formItem = this.formItem
        const rulesObj = this.rulesObj
        for (let i = 0; i < formItem.length; ++i) {
          const ru = []
          if (formItem[i].required) {
            ru.push({ required: true, message: requiredTip(formItem[i].tit), trigger: 'blur' })
          }
          if (formItem[i].num) {
            ru.push({ max: formItem[i].num, message: limitNumTip(formItem[i].tit, formItem[i].num), trigger: 'blur, change' })
          }
          switch (formItem[i].prop) {
            case 'linkemail':
              ru.push({ validator: checkEmailV, trigger: 'blur' })
              break
            case 'serviceEmail':
              ru.push({ validator: checkEmailV, trigger: 'blur' })
              break
          }
          rulesObj[formItem[i].prop] = ru
        }
      },
      queryPlatInfo() {
        var that = this
        this.$http.get(queryPlat, {}, function(res) {
          if (res.success) {
            const obj = res.data
            if (obj.modifyTime) {
              obj.modifyTime = parseTime(obj.modifyTime)
            }
            if (obj.modifier) {
              queryBase.getAdminUser(obj.modifier, function(sc, value) {
                if (sc) {
                  obj.modifier = value.name
                }
              })
            }
            that.formObj = obj
          }
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$refs.uploadLogo.submit() // 确认上传图片
            // this.$refs.uploadLogo.submit() // 确认上传图片
            // if (this.province) {
            //   if (!this.city) {
            //     this.$alert('请您选择所在城市', '提示', {
            //     return
            //   }
            // }
            // let paramsData = {
            const form = this.formObj
            //   'id': this.plf_user,
            this.$http.put(updatePlat, {
            //   'name': this.plf_name,
              name: form.name,
            //   'linkman': this.formObj.linkman,
              logo: form.logo,
            //   'logo': this.imgName,
              url: form.url,
            //   'linkphone': this.formObj.tel,
              manageOrg: form.manageOrg,
            //   'linkemail': this.formObj.mail,
              addr: form.addr,
            //   'province': this.province,
              location: form.location,
            //   'city': this.city,
              zipCode: form.zipCode,
            //   'addr': this.formObj.address,
              servicePhone: form.servicePhone,
            //   'url': this.formObj.website,
              serviceEmail: form.serviceEmail,
            //   'industry': this.formObj.industry,
              operateTime: form.operateTime,
            //   'descp': this.formObj.desc
              linkman: form.linkman,
            // }
              job: form.job,
            // this.$axios.post(httpUrl.hQuery.baseInfo.update, paramsData).then((res) => {
              department: form.department,
            //   this.$message({
              comp: form.comp,
            //     message: '平台信息修改成功！',
              linkphone: form.linkphone,
            //     type: 'success'
              linkemail: form.linkemail,
            //   });
              descp: form.descp
            //   Cookies.set('plf_logo', this.imgName);
            }, function(res) {
            //   this.$router.push({path: '/WorkHome'});
              this.$message({
            //   this.reload();
                message: '平台信息修改成功！',
            // }).catch(error => {
                type: 'success'
            //   console.log(error);
              })
            // });
            })
          } else {
            return false
          }
        })
      },
      // upload img
      uploadfun(value) {
      handleAvatarSuccess(res, file) {
        console.log(value)
        this.imageUrl = URL.createObjectURL(file.raw)
        this.imgName = res.data[0].uri
      },
      beforeAvatarUpload(file) {
      toshow(value) {
        const isJPG = file.type === 'image/jpeg'
        this.formObj.addr = value
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG && !isPNG) {
          this.$message.error('请上传PNG/JPG/JPEG格式的图片')
        }
        if (!isLt2M) {
          this.$message.error('上传logo大小不能超过 2MB!')
        }
        return (!isJPG || !isPNG) && isLt2M
      }
      // upload img
    },
    components: {
      cityPicker
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .main-info{
    /*min-width: 1100px;*/
    padding: 0 20px;
    .update-logo{
      width: 280px;
      .avatar-uploader{
      }
    }
    .update-main{
      padding-left:25px;
      .update-title{
        font-size:30px;
        line-height:54px;
        margin-bottom:16px;
        padding-left:10px;
      }
      .el-tag + .el-tag{
        margin-left: 10px;
      }
      .button-new-tag{
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
      }
      .input-new-tag{
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
      }
    }
    .shortW{
      width:300px;
    }
  }
</style>

src/views/sysSetting/DemandIssue.vue

<template>
  <div class="demandIssue content-wrapper">
    <el-form :model="ruleFormDem" :rules="rules" ref="ruleFormDem" class="form-main">
      <el-form-item label="需求主题" prop="demandTit">
        <el-input v-model="ruleFormDem.demandTit" placeholder="请用一句话概括您的需求"></el-input>
      </el-form-item>
      <el-form-item label="需求内容" prop="demandDesc">
        <el-input type="textarea" :rows="4" v-model="ruleFormDem.demandDesc" placeholder="请描述您的需求背景、具体问题、对专家的要求等等"></el-input>
      </el-form-item>
      <el-col :span="12">
        <CityPick ref="cityPick" :widthselect="148" :prov="ruleFormDem.province" :city="ruleFormDem.city" v-on:selectProv="getSelectProv($event)" v-on:selectCity="getSelectCity($event)"></CityPick>
        <!-- <el-form-item label="所在城市" prop="citys">
          <el-cascader
            :options="optionsCity"
            v-model="ruleFormDem.citys"
            class="shortW"
            placeholder="请选择所在的城市">
          </el-cascader>
        </el-form-item> -->
      </el-col>
      <el-col :span="12">
        <el-form-item label="需求有效期" prop="lastDate">
          <el-date-picker
            v-model="ruleFormDem.lastDate"
            type="date" class="shortW"
            format="yyyy-MM-dd"
            placeholder="请选择截止日期"
            :picker-options="pickerOptions0">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="预计合作周期" prop="longTime">
          <el-select v-model="selectLongTime" placeholder="请选择预计合作周期" class="shortW">
            <el-option
              v-for="item in longTime"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @current-change="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="费用预算" prop="costRange">
          <el-select v-model="selectCostRange" placeholder="请选择预算范围" class="shortW">
            <el-option
              v-for="item in costRange"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24"><div class="form-line"></div></el-col>
      <el-col :span="12">
        <el-form-item label="联系人" prop="linkman">
          <el-input v-model="ruleFormDem.linkman" placeholder="请填写您的姓名" class="shortW"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="您所在的企业名称" prop="orgName">
          <el-input v-model="ruleFormDem.orgName" placeholder="建议填写与营业执照一致的企业名称" class="shortW"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系电话" prop="linkTel">
          <el-input v-model="ruleFormDem.linkTel" placeholder="请输入您的手机号码，可用于登录科袖网" class="shortW"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="图形验证码" prop="imgVerifyCode">
          <el-input v-model="ruleFormDem.imgVerifyCode" placeholder="请输入图形验证码" class="shortW code-btn">
          <img slot="append" :src="imgVcUrl" @click="changeImgVc" /></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="短信验证码" prop="msgVerifyCode">
          <el-input v-model="ruleFormDem.msgVerifyCode" placeholder="请输入短信验证码" class="shortW">
            <el-button slot="append" :disabled="phoneCodeBol" @click="getPhoneCode">
              <span v-if="sendMsgDisabled">{{seconds + '秒后获取'}}</span>
              <span v-if="!sendMsgDisabled">获取验证码</span>
            </el-button>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24" ><el-form-item style="height:20px"></el-form-item></el-col>
      <el-col :span="24" >
        <el-form-item style="text-align:center">
          <el-button type="primary" @click="submitForm('ruleFormDem')" style="padding: 12px 50px">立即发布</el-button><br/>
          <el-checkbox checked disabled>我已阅读并同意<a :href="kexiuLink + '/privacy.html'" target="_blank">《科袖用户协议》</a></el-checkbox>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>
<script type="text/ecmascript-6">
  // import {
  //   provinceAndCityData,
  //   CodeToText
  // } from 'element-china-area-data'; // TextToCode
  import Cookies from 'js-cookie';
  import httpUrl from '@/libs/http';
  import util from '@/libs/util';
  var validPhone = (rule, value, callback) => {
    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
    if (!value) {
      callback(new Error('请输入你的手机号码'));
    } else if (!reg.test(value)) {
      callback(new Error('请输入正确的手机号码'));
    } else {
      callback();
    };
  };
  export default {
    data() {
      return {
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now();
          }
        },
        kexiuLink: util.ekexiuUrl,
        platSource: '',
        phoneCodeBol: false,
        sendMsgDisabled: false,
        seconds: 60,
        phoneResBack: '',
        imgVcUrl: httpUrl.kxQurey.sign.imgVC,
        // optionsCity: provinceAndCityData,
        selectCostRange: '',
        selectLongTime: '',
        longTime: util.Dictionary.durationTime,
        costRange: util.Dictionary.costRange,
        ruleFormDem: {
          demandTit: '',
          demandDesc: '',
          province: '',
          city: '',
          lastDate: '',
          linkman: '',
          orgName: '',
          linkTel: '',
          imgVerifyCode: '',
          msgVerifyCode: ''
        },
        rules: {
          demandTit: [
            { required: true, message: '请填写需求主题', trigger: 'blur' }
          ],
          demandDesc: [
            { required: true, message: '请填写需求内容', trigger: 'blur' },
            { max: 1000, message: '不得超过1000个字', trigger: 'blur' }
          ],
          province: [
            { required: true, message: '请填写所在省', trigger: 'blur' }
          ],
          city: [
            { required: true, message: '请填写所在城市', trigger: 'blur' }
          ],
          lastDate: [
            { required: true, message: '请选择截止日期', trigger: 'blur' }
          ],
          linkman: [
            { required: true, message: '请填写您的姓名', trigger: 'blur' },
            { max: 10, message: '不得超过10个字', trigger: 'blur' }
          ],
          orgName: [
            { required: true, message: '请填写您所在的企业名称', trigger: 'blur' },
            { max: 50, message: '不得超过50个字', trigger: 'blur' }
          ],
          linkTel: [
            { required: true, validator: validPhone, trigger: 'blur' }
          ],
          imgVerifyCode: [
            { required: true, message: '请输入图形验证码', trigger: 'blur' }
          ],
          msgVerifyCode: [
            { required: true, message: '请输入短信验证码', trigger: 'blur' }
          ]
        }
      };
    },
    created() {
      this.platSource = Cookies.get('platSource');
    },
    methods: {
      getSelectProv(prov) {
        this.ruleFormDem.province = prov;
      },
      getSelectCity(city) {
        this.ruleFormDem.city = city;
      },
      getPhoneCode() {
        if (this.ruleFormDem.linkTel && this.ruleFormDem.imgVerifyCode) {
          this.$axios.get(httpUrl.kxQurey.sign.msgVC, {
            params: {
              phone: this.ruleFormDem.linkTel,
              vcode: this.ruleFormDem.imgVerifyCode
            }
          }).then((res) => {
            if (res.success) {
              console.log(res);
              this.phoneResBack = res.data;
              this.clickMsgVc();
            } else {
              if (res.code === 20001) {
                this.$message.error('图形验证码错误');
                this.changeImgVc();
              };
            };
          });
        } else {
          this.$message({
            message: '请输入手机号和图形验证码',
            type: 'warning'
          });
        }
      },
      clickMsgVc() {
        let me = this;
        me.sendMsgDisabled = true;
        me.phoneCodeBol = true;
        let interval = window.setInterval(function() {
         if ((me.seconds--) <= 0) {
          me.seconds = 60;
          me.sendMsgDisabled = false;
          me.phoneCodeBol = false;
          window.clearInterval(interval);
         }
        }, 1000);
      },
      changeImgVc() {
        this.imgVcUrl = httpUrl.kxQurey.sign.imgVC + '?' + new Date().getTime();
      },
      resetForm(formName) {
        this.$refs.cityPick.resetProvCity();
        this.selectCostRange = '';
        this.selectLongTime = '';
        this.$refs[formName].resetFields();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let paramsData = {
              'title': this.ruleFormDem.demandTit,
              'descp': this.ruleFormDem.demandDesc,
              'province': this.ruleFormDem.province,
              'city': this.ruleFormDem.city,
              'invalidDay': util.dateFormatter(this.ruleFormDem.lastDate, false, true),
              'cost': this.selectCostRange,
              'duration': this.selectLongTime,
              'name': this.ruleFormDem.linkman,
              'orgName': this.ruleFormDem.orgName,
              'contactNum': this.ruleFormDem.linkTel,
              'vc': this.ruleFormDem.msgVerifyCode,
              'state': this.phoneResBack,
              'source': this.platSource
            };
            console.log(paramsData);
            this.$axios.post(httpUrl.hQuery.demand.add, paramsData).then((res) => {
              if (res.success) {
                this.$alert('我们已收到您的需求，马上为您对接合适的专家和专业机构，您可以登录科袖网与对方做进一步沟通。', '需求发布成功！', {
                  confirmButtonText: '进入科袖网，发现更多服务和资源',
                  type: 'success',
                  center: true,
                  cancelButtonText: '取消',
                  callback: action => {
                    if (action === 'confirm') {
                      window.open(util.ekexiuUrl, '科袖网首页');
                    };
                  }
                });
                this.resetForm(formName);
                this.$emit('dialogChanged', false);
              } else {
                this.$message({
                  message: '需求发布失败，请重新发布！',
                  type: 'warning'
                });
              };
              console.log(res);
            }).catch(error => {
              console.log(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
.demandIssue
  padding-top:10px
  .form-main
    width:100%
    .form-line
      border-top:1px dashed #ccc
      margin-bottom:20px
  .shortW
    width:300px
  .code-btn
    .el-input-group__append
      padding:0
      overflow:hidden
      img
        width:100px
        height:38px
        cursor: pointer
  .el-checkbox__label
    a
      color:#c0c4cc
</style>

src/views/sysSetting/adminUser.vue

    <div class="box-container">
      <div class="contain-title">平台后台用户管理列表</div>
      <div class="contian-operate">
        <el-button type="primary" @click="handleADD">添加</el-button>
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </div>
    </div>
    <div class="content-container">
          v-model="selectMode"
          @change="selectChange">
          <el-option label="正常账号" value="1" selected></el-option>
          <el-option label="停用账号" value="2"></el-option>
          <el-option label="停用账号" value="0"></el-option>
        </el-select>
      </div>
      <el-table
          align="center">
          <template slot-scope="scope">
            <div v-if="scope.row[item.prop]">
              {{scope.row[item.prop]}}
              <div v-if="scope.row[item.prop]">
                <el-button v-if="item.link" type="text"
                  @click="handleEdit(scope.row.id)">{{scope.row[item.prop]}}</el-button>
                <span v-else>{{scope.row[item.prop]}}</span>
              </div>
            </div>
            <div v-if="item.operate && typeof scope.row === 'object'">
            <div class="operate-row" v-if="item.operate && typeof scope.row === 'object'">
              <div class="normal" v-if="scope.row.active">
              <div class="normal" v-if="scope.row.actived">
                <el-button
                  size="mini"
                  size="medium"
                  type="primary"
                  @click="handleEdit(scope.row)">修改</el-button>
                  @click="handleEdit(scope.row.id)">修改</el-button>
                <el-button
                  size="mini"
                  size="medium"
                  type="primary"
                  @click="handleResetpw(scope.row)">重置密码</el-button>
                <el-button
                  size="mini"
                  size="medium"
                  type="primary"
                  @click="handleRight(scope.row)">分配权限</el-button>
                  @click="handleRight(scope.row.id)">分配权限</el-button>
                <el-button
                  size="mini"
                  size="medium"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">停用</el-button>
                  @click="handleBan(scope.row.id)">停用</el-button>
              </div>
              <div class="forbidden" v-else>
                <el-button
                  size="mini"
                  size="medium"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)">恢复</el-button>
                  @click="handleRenew(scope.row.id)">恢复</el-button>
              </div>
            </div>
          </template>
        </el-pagination>
      </div>
    </div>
    <editUser ref="userInfoDialog"></editUser>
    <editUser ref="userInfoDialog" :operateM="operateM" v-on:dialogChanged="dialogChanged"></editUser>
  </div>
</template>
  import comTable from '@/utils/comTable'
  import {
    pageQueryUser,
    // addUser,
    resetPw,
    resetPw
    banUser,
    // updateUser,
    renewUser
    // updatePermission,
    // banUser
  } from '@/api/sysSetting'
  import editUser from './editUser'
      return {
        searchText: '',
        selectMode: '1',
        operateM: {},
        pageSize: 10,
        pageNo: 1,
        total: 0,
        tableItem: [
          {
            prop: 'account',
            tit: '账号'
            tit: '账号',
            link: true
          },
          {
            prop: 'id',
            prop: 'name',
            tit: '用户名'
          },
          {
            prop: 'job',
            tit: '职位',
            tit: '职位'
            width: '160'
          },
          {
            prop: 'comp',
            tit: '所在部门',
            tit: '所在部门'
            width: '160'
          },
          {
            prop: 'dep',
      pageQueryUser() {
        var that = this
        this.$http.get(pageQueryUser, {
          active: that.selectMode,
          actived: parseInt(that.selectMode),
          pageSize: that.pageSize,
          pageNo: that.pageNo
        }, function(res) {
          if (res.data.success && res.data.data) {
          if (res.success && res.data) {
            const obj = res.data.data
            for (let i = 0; i < obj.length; ++i) {
            if (obj.length) {
              if (obj[i].createTime) {
              for (let i = 0; i < obj.length; ++i) {
                obj[i].createTime = parseTime(obj[i].createTime)
                if (obj[i].createTime) {
                  obj[i].createTime = parseTime(obj[i].createTime)
                }
                if (obj[i].invalidTime) {
                  obj[i].invalidTime = parseTime(obj[i].invalidTime)
                }
              }
            }
            that.total = res.data.total
            that.tableData = obj
            comTable.gapFilling(that.tableData)
          } else {
            that.total = 0
            that.tableData = []
          }
        })
        comTable.gapFilling(that.tableData)
      },
      handleADD() {
        // this.$refs.BInfoDialog02.queryServerList()
        this.$refs.userInfoDialog.userDialogVisible = true
      },
      handleCurrentChange(val) {
        this.pageNo = val
        this.pageQueryUser()
      },
      selectChange(val) {
        this.searchText = ''
        this.selectMode = val
        this.pageNo = 1
        this.total = 0
        this.tableData = []
        this.addBanTimeColumn(val)
        this.pageQueryUser()
      },
      handleEdit(row) {
      addBanTimeColumn(val) {
        var that = this
        var lastcol = this.tableItem.pop()
        this.$http.get(resetPw, {
        if (val === '0') {
          id: row.id
          var bancol = {
        }, function(res) {
            prop: 'invalidTime',
          that.$message({
            tit: '停用时间',
            type: 'success',
            width: '160'
            message: '删除成功!'
          }
          })
          this.tableItem.push(bancol)
        })
          this.tableItem.push(lastcol)
        } else {
          this.tableItem.pop()
          this.tableItem.push(lastcol)
        }
      },
      dialogChanged() {
        this.searchText = ''
        this.selectMode = '1'
        this.pageNo = 1
        this.total = 0
        this.tableData = []
        this.pageQueryUser()
      },
      handleAdd() {
        this.operateM = {
          type: 'add',
          tit: '添加用户信息'
        }
        this.$refs.userInfoDialog.getUserDetail()
      },
      handleEdit(id) {
        this.operateM = {
          type: 'edit',
          tit: '修改用户信息'
        }
        this.$refs.userInfoDialog.getUserDetail(id)
      },
      handleRight(id) {
        this.operateM = {
          type: 'right',
          tit: '用户分配权限'
        }
        this.$refs.userInfoDialog.getUserDetail(id)
      },
      handleResetpw(row) {
        var that = this
        that.$confirm(`确定重置用户${row.name}的密码`, '提示', {
        that.$confirm(`确定重置用户 ${row.name} 的密码`, '提示信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$http.get(resetPw, {
          that.$http.get(resetPw, {
            id: row.id
          }, function(res) {
            that.$message({
            if (res.success) {
              type: 'success',
              that.$message({
              message: '该用户密码重置成功!'
                type: 'success',
            })
                message: '该用户密码重置成功!'
              })
            }
          })
        }).catch(() => {})
      },
      handleBan(id) {
        var that = this
        this.$http.get(banUser, {
          id: id
        }, function(res) {
          if (res.success) {
            that.pageQueryUser()
          }
        })
      },
      handleRight(row) {
      handleRenew(id) {
        // var that = this
        var that = this
        // this.$http.get(updatePermission + row.id, {
        this.$http.get(renewUser, {
        // }, function(res) {
          id: id
        //   that.$message({
        }, function(res) {
        //     type: 'success',
          if (res.success) {
        //     message: '删除成功!'
            that.pageQueryUser()
        //   })
          }
        // })
        })
      }
    }
  }

src/views/sysSetting/editUser.vue

<template>
  <el-dialog title="添加用户信息" :visible.sync="userDialogVisible">
  <el-dialog :title="operateM.tit" :visible.sync="userDialogVisible">
    <el-form
      :model="userForm"
      :rules="userRules"
      class="form-main"
      label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
        <el-col :span="24">
          <!-- <el-form-item label="账号" v-if="">
          <el-form-item v-if="activeShow" label="账号状态">
            <span>{{userForm.account}}</span>
            <span>{{actived?'正常账号':'停用账号'}}</span>
          </el-form-item> -->
          <el-form-item class="is-required" label="账号" prop="account">
            <el-input v-model="userForm.account" placeholder="请填写用户账号" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="is-required" label="用户名" prop="name">
            <el-input v-model="userForm.name" placeholder="请填写用户名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="is-required" label="联系电话" prop="tel">
            <el-input v-model="userForm.tel" placeholder="请填写用户联系电话" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系邮箱" prop="mail">
            <el-input v-model="userForm.mail" placeholder="请填写用户联系邮箱" maxlength="50"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-col :span="item.span||''" v-for="item in formItem" :key="item.index">
          <el-form-item label="职位" prop="position">
          <el-form-item v-if="readonlyShow && !item.right" v-show="userForm[item.prop]" :label="item.tit">
            <el-input v-model="userForm.position" placeholder="请填写用户职位" maxlength="20"></el-input>
            <span>{{userForm[item.prop]}}</span>
          </el-form-item>
        </el-col>
          <el-form-item v-if="!readonlyShow && !item.right" :label="item.tit" :prop="item.prop">
        <el-col :span="12">
            <el-input v-model="userForm[item.prop]" :placeholder="`请填写用户${item.tit}`" :maxlength="item.num||''"></el-input> 
          <el-form-item label="所在部门" prop="department">
            <el-input v-model="userForm.department" placeholder="请填写用户所在部门" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
          <el-form-item v-if="item.right" :prop="item.prop" label-width="0">
        <el-col :span="24">
            <template>
          <el-form-item class="is-required" label="所在机构" prop="org">
              <el-card shadow="never">
            <el-input v-model="userForm.org" placeholder="请填写联系人所在机构" maxlength="50"></el-input>
                <div class="card-title" slot="header">
                  <span>{{item.tit}}</span>
                </div>
                <el-checkbox-group
                  v-model="userForm[item.prop]"
                  :min="1"
                  :max="moduleOption.length"
                  @change="handleCheckedChange">
                  <el-checkbox v-for="mod in moduleOption" :label="mod.id" :key="mod.index">{{mod.name}}</el-checkbox>
                </el-checkbox-group>
              </el-card>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="24"><div class="form-line"></div></el-col>
        <el-col :span="24">
          <el-card shadow="never">
            <div class="card-title" slot="header">
              <span>分配权限</span>
            </div>
            <el-checkbox-group v-model="userForm.module">
              <el-checkbox v-for="item in moduleOption" :label="item.name" :key="item.index">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-card>
        </el-col>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary" @click="submitForm('userForm')">保存</el-button>
          </div>
        </el-col>
        <el-col :span="24">
        <el-col :span="24" v-if="timeShow">
          <el-form-item align="right">
            <span>创建时间：2018/08/23 18：52：12</span>
            <span>创建时间: {{createTime}}</span>
          </el-form-item>
        </el-col>
      </el-row>
</template>
<script>
  import { checkEmailV } from '@/utils/validator'
  import { parseTime } from '@/utils'
  import queryBase from '@/utils/queryBase'
  import {
    requiredTip,
    limitNumTip,
    checkEmailV
  } from '@/utils/validator'
  import {
    existUser,
    addUser,
    updateUser,
    updatePermission
  } from '@/api/sysSetting'
  export default {
    props: ['operateM'],
    data() {
      return {
        userDialogVisible: false,
        platSource: '',
        moduleOption: [
          { id: '1', name: '内容发布' },
          { id: '2', name: '特约专家' },
          { id: '3', name: '合作机构' },
          { id: '4', name: '企业中心' },
          { id: '5', name: '平台信息' },
          { id: '6', name: '用户信息' }
        ],
        userId: '',
        actived: 0,
        oldAccount: '',
        createTime: '',
        formItem: [
          {
            span: 12,
            prop: 'account',
            tit: '账号',
            num: 20,
            required: true
          },
          {
            span: 12,
            prop: 'name',
            tit: '用户名',
            required: true
          },
          {
            id: 0,
            span: 12,
            name: '内容发布'
            prop: 'phone',
            tit: '联系电话',
            num: 20,
            required: true
          },
          {
            id: 0,
            span: 12,
            name: '内容发布'
            prop: 'email',
            tit: '联系邮箱',
            num: 50
          },
          {
            id: 0,
            span: 12,
            name: '内容发布'
            prop: 'job',
            tit: '职位',
            num: 20
          },
          {
            id: 0,
            span: 12,
            name: '内容发布'
            prop: 'dep',
            tit: '所在部门',
            num: 20
          },
          {
            span: 24,
            prop: 'comp',
            tit: '所在机构',
            num: 50
          },
          {
            span: 24,
            prop: 'rightCode',
            tit: '分配权限',
            right: true,
            required: true
          }
        ],
        userForm: {
          account: '',
          name: '',
          tel: '',
          phone: '',
          mail: '',
          email: '',
          position: '',
          job: '',
          department: '',
          dep: '',
          org: '',
          comp: '',
          module: ''
          rightCode: []
        },
        userRules: {
        userRules: {}
          mail: [{ validator: checkEmailV, trigger: 'blur' }]
      }
        }
    },
    computed: {
      readonlyShow() {
        return this.operateM.type === 'right' || false
      },
      activeShow() {
        return this.operateM.type === 'edit' || false
      },
      timeShow() {
        return this.operateM.type === 'add' || true
      }
    },
    watch: {
      userDialogVisible(val) {
        !val && setTimeout(() => {
          if (!this.operateM.type === 'right') {
            this.$refs['userForm'].resetFields()
          }
          this.$refs['userForm'].clearValidate()
        }, 0)
      }
    },
    created() {
      // this.platSource = Cookies.get('platSource');
      this.pushRulesFn()
    },
    methods: {
      resetForm(formName) {
      getUserDetail(id) {
        this.$refs[formName].resetFields()
        var that = this
        that.userId = id
        if (that.userId) {
          queryBase.getAdminUser(that.userId, function(sc, value) {
            if (sc) {
              const opeRow = value
              that.actived = opeRow.actived
              if (opeRow.createTime) {
                that.createTime = parseTime(opeRow.createTime)
              }
              that.oldAccount = opeRow.account
              that.userForm = {
                account: opeRow.account,
                name: opeRow.name,
                phone: opeRow.phone,
                email: opeRow.email,
                job: opeRow.job,
                dep: opeRow.dep,
                comp: opeRow.comp,
                rightCode: opeRow.rightCode ? opeRow.rightCode : []
              }
            }
          })
        } else {
          this.actived = 0
          this.createTime = ''
          this.userForm = {
            account: '',
            name: '',
            phone: '',
            email: '',
            job: '',
            dep: '',
            comp: '',
            rightCode: []
          }
        }
        setTimeout(function() {
          that.userDialogVisible = true
        }, 0)
      },
      pushRulesFn() {
        const formItem = this.formItem
        const userRules = this.userRules
        for (let i = 0; i < formItem.length; ++i) {
          const ru = []
          if (formItem[i].required) {
            ru.push({ required: true, message: requiredTip(formItem[i].tit), trigger: 'blur' })
          }
          if (formItem[i].num) {
            ru.push({ max: formItem[i].num, message: limitNumTip(formItem[i].tit, formItem[i].num), trigger: 'blur, change' })
          }
          switch (formItem[i].prop) {
            case 'email':
              ru.push({ validator: checkEmailV, trigger: 'blur' })
              break
          }
          userRules[formItem[i].prop] = ru
        }
      },
      isExistUserFn(fn) {
        var that = this
        var opeRow = that.userForm
        this.$http.get(existUser, {
          account: opeRow.account
        }, function(res) {
          if (res.success) {
            if (res.data) {
              that.$message({
                message: '账户已存在，请重新输入',
                type: 'warning'
              })
              return false
            } else {
              fn()
            }
          }
        })
      },
      submitForm(formName) {
        var that = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // let paramsData = {
            var opeRow = that.userForm
            //   'title': this.ruleFormDem.demandTit,
            var paramsData = {
            //   'descp': this.ruleFormDem.demandDesc,
              account: opeRow.account,
            //   'province': this.ruleFormDem.province,
              name: opeRow.name,
            //   'city': this.ruleFormDem.city,
              phone: opeRow.phone,
            //   'invalidDay': util.dateFormatter(this.ruleFormDem.lastDate, false, true),
              email: opeRow.email,
            //   'cost': this.selectCostRange,
              job: opeRow.job,
            //   'duration': this.selectLongTime,
              dep: opeRow.dep,
            //   'name': this.ruleFormDem.linkman,
              comp: opeRow.comp,
            //   'orgName': this.ruleFormDem.orgName,
              rightCode: opeRow.rightCode
            //   'contactNum': this.ruleFormDem.linkTel,
            }
            //   'vc': this.ruleFormDem.msgVerifyCode,
            if (that.operateM.type === 'add') {
            //   'state': this.phoneResBack,
              that.isExistUserFn(function() {
            //   'source': this.platSource
                that.$http.post(addUser, paramsData, function(res) {
            // };
                  if (res.success) {
            // console.log(paramsData);
                    that.successFun()
            // this.$axios.post(httpUrl.hQuery.demand.add, paramsData).then((res) => {
                  }
            //   if (res.success) {
                })
            //     this.$alert('我们已收到您的需求，马上为您对接合适的专家和专业机构，您可以登录科袖网与对方做进一步沟通。', '需求发布成功！', {
              })
            //       confirmButtonText: '进入科袖网，发现更多服务和资源',
            } else if (that.operateM.type === 'edit') {
            //       type: 'success',
              const paramsId = { id: that.userId }
            //       center: true,
              const obj = Object.assign(paramsId, paramsData)
            //       cancelButtonText: '取消',
              if (that.oldAccount === opeRow.account) {
            //       callback: action => {
                that.$http.put(updateUser, obj, function(res) {
            //         if (action === 'confirm') {
                  if (res.success) {
            //           window.open(util.ekexiuUrl, '科袖网首页');
                    that.successFun()
            //         };
                  }
            //       }
                })
            //     });
              } else {
            //     this.resetForm(formName);
                that.isExistUserFn(function() {
            //     this.$emit('dialogChanged', false);
                  that.$http.put(updateUser, obj, function(res) {
            //   } else {
                    if (res.success) {
            //     this.$message({
                      that.successFun()
            //       message: '需求发布失败，请重新发布！',
                    }
            //       type: 'warning'
                  })
            //     });
                })
            //   };
              }
            //   console.log(res);
            } else if (that.operateM.type === 'right') {
            // }).catch(error => {
              that.$http.put(updatePermission + that.userId, opeRow.rightCode, function(res) {
            //   console.log(error);
                if (res.success) {
            // });
                  that.successFun()
                }
              })
            }
          } else {
            return false
          }
        })
      },
      successFun() {
        this.userDialogVisible = false
        this.$refs['userForm'].resetFields()
        this.$parent.dialogChanged()
      },
      handleCheckedChange(value) {
        this.userForm.rightCode = value
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .form-main{
  .el-card__header{
    width:100%;
    padding: 8px 15px;
    .form-line{
    .card-title{
      border-top:1px dashed #ccc;
      font-size: 18px;
      margin-bottom:20px;
      font-weight: bold;
      span:before{
        content: '*';
        color: #f56c6c;
        margin-right: 4px;
      }
    }
  }
  .shortW{
    width:300px;
  }
  .card-title{
    font-size: 20px;
    font-weight: bold;
  }
  .el-checkbox-group{
    .el-checkbox{
      font-size: 16px;

src/views/userInfo/baseInfo.vue

<template>
  <el-dialog title="用户信息" :visible.sync="userDialogVisible">
  <el-dialog :title="dialogTit" :visible.sync="userDialogVisible">
    <el-form
      ref="userForm"
      ref="infoRow"
      class="form-main"
      label-width="80px">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-col :span="12">
            <el-form-item label="用户名">{{userForm.name}}</el-form-item>
            <el-form-item label="用户名">{{infoRow.account}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账号状态">正常用户</el-form-item>
            <el-form-item label="账号状态">{{type?'黑名单用户':'正常用户'}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机账号">{{userForm.account}}</el-form-item>
            <el-form-item label="手机账号">{{infoRow.loginPhone}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="真实姓名">{{userForm.name}}</el-form-item>
            <el-form-item label="真实姓名">{{infoRow.name}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">{{userForm.sex}}</el-form-item>
            <el-form-item label="性别">{{infoRow.sex===0?'男':'女'}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位">{{userForm.position}}</el-form-item>
            <el-form-item label="职位">{{infoRow.job}}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所在企业">{{userForm.company}}</el-form-item>
            <el-form-item label="所在机构">{{infoRow.comp}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">{{userForm.tel}}</el-form-item>
            <el-form-item label="联系电话">{{infoRow.linkPhone}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系邮箱">{{userForm.mail}}</el-form-item>
            <el-form-item label="联系邮箱">{{infoRow.email}}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所在城市">{{userForm.city}}</el-form-item>
            <el-form-item label="所在城市">{{AllCitys[infoRow.addr]}}</el-form-item>
          </el-col>
          <el-col :span="24" v-if="type">
            <el-form-item label="拉黑理由" class="el-to-block">
              <div class="textarea-div">{{infoRow.invalidReason}}</div>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="8">
          <div class="headImg" :style="{backgroundImage:'url('+ userForm.img +')'}"></div>
          <div class="headImg" :style="{backgroundImage:'url('+ headUrl +')'}"></div>
        </el-col>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary">确定</el-button>
            <el-button type="primary" @click="userDialogVisible=false">确定</el-button>
          </div>
        </el-col>
        <el-col :span="24">
          <el-form-item align="right">
            <span>创建时间：2018/08/23 18：52：12</span>
            <span v-if='!type'>创建时间: {{createTime}}</span>
            <span v-else>拉黑时间: {{invalidTime}}</span>
          </el-form-item>
        </el-col>
      </el-row>
</template>
<script>
  import { queryBlackOne } from '@/api/userInfo'
  import { defaultSet, parseTime } from '@/utils'
  import queryDict from '@/utils/queryDict'
  import queryBase from '@/utils/queryBase'
  export default {
    props: ['type'],
    data() {
      return {
        userDialogVisible: false,
        userForm: ''
        AllCitys: [],
        infoRow: ''
      }
    },
    computed: {
      dialogTit() {
        return this.type ? '黑名单用户信息' : '用户信息'
      },
      headUrl() {
        return this.infoRow.head ? '/data/head' + this.infoRow.head : defaultSet.img.user
      },
      createTime() {
        return this.infoRow.createTime ? parseTime(this.infoRow.createTime) : ''
      },
      invalidTime() {
        return this.infoRow.invalidTime ? parseTime(this.infoRow.invalidTime) : ''
      }
    },
    created() {
      this.getDictoryData()
    },
    methods: {
      getDictoryData() {
        const that = this
        queryDict.applyDict('XZQH', function(dictData) {
          dictData.map(item => {
            that.AllCitys[item.code] = item.fullCaption
          })
        })
      },
      queryNormalOne(id) {
        var that = this
        if (id) {
          queryBase.getNormalOne(id, function(sc, value) {
            if (sc) {
              that.infoRow = value
            }
          })
          setTimeout(function() {
            that.userDialogVisible = true
          }, 0)
        }
      },
      queryBlackOne(id) {
        var that = this
        if (id) {
          this.$http.get(queryBlackOne, {
            id: id
          }, function(res) {
            if (res.success) {
              that.infoRow = res.data
            }
          })
          setTimeout(function() {
            that.userDialogVisible = true
          }, 0)
        }
      }
    }
  }
</script>
  .form-main{
    width:100%;
  }
  .shortW{
    width:300px;
  }
  .headImg{
    width: 60px;
    width: 140px;
    height: 60px;
    height: 140px;
    background-size: cover;
  }

src/views/userInfo/blackList.vue

    <div class="box-container">
      <div class="contain-title">黑名单用户</div>
      <div class="contain-search">
        <el-input placeholder="搜索用户名/手机账号" v-model="searchText" class="input-with-select">
        <el-input placeholder="搜索用户名/手机账号" v-model="searchText" class="input-with-select"@keyup.enter.native="pageQueryUser">
          <el-button slot="append" icon="el-icon-search"></el-button>
          <el-button slot="append" icon="el-icon-search" @click="pageQueryUser"></el-button>
        </el-input>
      </div>
    </div>
    <div class="content-container">
      <complex-table :tableData="tableData" :tableItem="tableItem"></complex-table>
      <el-table
        :data="tableData"
        height="630"
        border>
        <el-table-column
          v-for="item in tableItem"
          :key="item.index"
          :prop="item.prop ? item.prop : ''"
          :label="item.tit ? item.tit : ''"
          :width="item.width ? item.width : ''"
          align="center">
          <template slot-scope="scope">
            <div v-if="scope.row[item.prop]">
              <el-button v-if="item.link" type="text"
                @click="queryInfo(scope.row.id)">{{scope.row[item.prop]}}</el-button>
              <el-button v-else-if="item.reason" type="text"
                @click="blackReason(scope.row.id)">{{scope.row[item.prop]}}</el-button>
              <span v-else>{{scope.row[item.prop]}}</span>
            </div>
            <div class="operate-row" v-if="item.operate && typeof scope.row === 'object'">
              <el-button
                size="mini"
                type="primary"
                @click="handleRenew(scope.row.id)">恢复</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <baseInfo ref="baseInfo" :type="blackType"></baseInfo>
    <pullBlack ref="pullBlack"></pullBlack>
  </div>
</template>
<script>
import complexTable from '@/components/complexTable'
import {
  pageBlackUser,
  cancelBlackUser
} from '@/api/userInfo'
import { parseTime } from '@/utils'
import comTable from '@/utils/comTable'
import queryBase from '@/utils/queryBase'
import baseInfo from './baseInfo'
import pullBlack from './pullBlack'
export default {
  data() {
    return {
      blackType: true,
      searchText: '',
      selectMode: '',
      pageSize: 10,
      tableData: [
      pageNo: 1,
        {
      total: 0,
          date: '2018/08/25 16:32',
      tableData: [],
          name: '关于征集企业技术创新需求的通知',
          class: '通知公告',
          owner: '张贝贝',
          num: '4552'
        }, {
          date: '2018/08/25 16:32',
          name: '关于征集企业技术创新需求的通知',
          class: '通知公告',
          owner: '张贝贝',
          num: '4552'
        }, {
          date: '2018/08/25 16:32',
          name: '关于征集企业技术创新需求的通知',
          class: '通知公告',
          owner: '张贝贝',
          num: '4552'
        }, {
          date: '2018/08/25 16:32',
          name: '关于征集企业技术创新需求的通知',
          class: '通知公告',
          owner: '张贝贝',
          num: '4552'
        }
      ],
      tableItem: [
        {
          prop: 'name',
          prop: 'loginPhone',
          tit: '标题'
          tit: '手机账号',
          width: '120',
          link: true
        },
        {
          prop: 'class',
          prop: 'account',
          tit: '栏目分类',
          tit: '用户名'
          width: '160'
        },
        {
          prop: 'inkPhowner',
          prop: 'linkPhone',
          tit: '发布人',
          tit: '联系电话',
          width: '160'
          width: '120'
        },
        {
          prop: 'date',
          prop: 'email',
          tit: '发布时间',
          tit: '联系邮箱',
          width: '160'
        },
        {
          prop: 'num',
          prop: 'invalidTime',
          tit: '浏览数量',
          tit: '最后拉黑时间',
          width: '160'
        },
        {
          operate: 'edit',
          prop: 'invalidReason',
          width: '200'
          tit: '最后拉黑理由',
          width: '240',
          reason: true
        },
        {
          prop: 'invalidOperator',
          tit: '操作人'
        },
        {
          operate: true,
          width: '100'
        }
      ]
    }
  },
  components: {
    complexTable
    baseInfo,
    pullBlack
  },
  created() {
    this.pageQueryUser()
  },
  methods: {
    pageQueryUser() {
      var that = this
      this.$http.get(pageBlackUser, {
        key: that.searchText,
        pageSize: that.pageSize,
        pageNo: that.pageNo
      }, function(res) {
        if (res.success && res.data) {
          const obj = res.data.data
          for (let i = 0; i < obj.length; ++i) {
            if (obj[i].invalidTime) {
              obj[i].invalidTime = parseTime(obj[i].invalidTime)
            }
            if (obj[i].invalidOperator) {
              queryBase.getAdminUser(obj[i].invalidOperator, function(sc, value) {
                if (sc) {
                  obj[i].invalidOperator = value.name
                }
              })
            }
          }
          that.total = res.data.total
          that.tableData = obj
          comTable.gapFilling(that.tableData)
        } else {
          that.total = 0
          that.tableData = []
        }
      })
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.pageQueryUser()
    },
    queryInfo(id) {
      this.$refs.baseInfo.queryBlackOne(id)
    },
    blackReason(id) {
      this.$refs.pullBlack.queryBlackOne(id)
    },
    handleRenew(id) {
      var that = this
      this.$http.get(cancelBlackUser, {
        id: id
      }, function(res) {
        if (res.success) {
          that.pageQueryUser()
        }
      })
    }
  }
}
</script>

src/views/userInfo/pullBlack.vue

<template>
  <el-dialog title="拉黑用户" :visible.sync="userDialogVisible">
  <el-dialog :title="dialogTit" :visible.sync="userDialogVisible">
    <el-form
      :model="userForm"
      ref="userForm"
      class="form-main"
      label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名">{{userForm.name}}</el-form-item>
          <el-form-item label="用户名">{{infoRow.account}}</el-form-item>
        </el-col>
        <el-col :span="12">
        <el-col :span="12" v-if="infoPullId">
          <el-form-item label="真实姓名">{{userForm.name}}</el-form-item>
          <el-form-item label="真实姓名">{{infoRow.name}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机账号">{{userForm.account}}</el-form-item>
          <el-form-item label="手机账号">{{infoRow.loginPhone}}</el-form-item>
        </el-col>
        <el-col :span="12">
        <el-col :span="12" v-if="infoPullId">
          <el-form-item label="性别">{{userForm.sex}}</el-form-item>
          <el-form-item label="性别">{{infoRow.sex===0?'男':'女'}}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所在机构">{{userForm.position}}</el-form-item>
          <el-form-item label="所在机构">{{infoRow.comp}}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item class="is-required" label="拉黑理由" prop="desc">
          <el-form-item v-if="infoPullId" class="is-required" label="拉黑理由">
            <el-input type="textarea" :rows="8" v-model="userForm.desc" placeholder="请用一句话概括该用户拉黑理由" maxlength="100"></el-input>
            <el-input type="textarea" :rows="5" v-model="reason" placeholder="请用一句话概括该用户拉黑理由" maxlength="100"></el-input>
          </el-form-item>
          <el-form-item v-else label="拉黑理由" class="el-to-block">
              <div class="textarea-div">{{infoRow.invalidReason}}</div>
            </el-form-item>
        </el-col>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary">确定</el-button>
            <el-button v-if="infoPullId" type="primary" @click="submitForm">确定</el-button>
            <el-button v-else type="primary" @click="userDialogVisible=false">确定</el-button>
          </div>
        </el-col>
        <el-col :span="24">
        <el-col :span="24" v-if="!infoPullId">
          <el-form-item align="right">
            <span>创建时间：2018/08/23 18：52：12</span>
            <span>拉黑时间: {{invalidTime}}</span>
          </el-form-item>
        </el-col>
      </el-row>
</template>
<script>
  import { blackUser, queryBlackOne } from '@/api/userInfo'
  import queryBase from '@/utils/queryBase'
  import { parseTime } from '@/utils'
  export default {
    data() {
      return {
        infoPullId: '',
        userDialogVisible: false,
        userForm: {
        infoRow: '',
          account: '',
        reason: ''
          name: '',
          tel: '',
          mail: '',
          position: '',
          department: '',
          org: '',
          module: ''
        }
      }
    },
    created() {
    computed: {
      dialogTit() {
        return this.infoPullId ? '拉黑用户' : '拉黑理由'
      },
      invalidTime() {
        return this.infoRow.invalidTime ? parseTime(this.infoRow.invalidTime) : ''
      }
    },
    methods: {
      submitForm(formName) {
      queryNormalOne(id) {
        // this.$refs[formName].validate((valid) => {
        var that = this
        //   if (valid) {
        that.infoPullId = id
        //   } else {
        if (id) {
        //     return false
          queryBase.getNormalOne(id, function(sc, value) {
        //   }
            if (sc) {
        // })
              that.infoRow = value
            }
          })
          setTimeout(function() {
            that.userDialogVisible = true
          }, 0)
        }
      },
      queryBlackOne(id) {
        var that = this
        if (id) {
          this.$http.get(queryBlackOne, {
            id: id
          }, function(res) {
            if (res.success) {
              that.infoRow = res.data
            }
          })
          setTimeout(function() {
            that.userDialogVisible = true
          }, 0)
        }
      },
      submitForm() {
        var that = this
        if (this.reason.length === 0) {
          this.$message('请填写该需求关闭理由')
          return
        }
        this.$http.post(blackUser, {
          id: that.infoPullId,
          reason: that.reason
        }, function(res) {
          if (res.success) {
            if (res.data === 0) {
              that.$message('该用户已经被拉黑，不允许操作')
            } else {
              that.$parent.pageQueryUser()
            }
            that.userDialogVisible = false
          }
        })
      }
    }
  }
      border-top:1px dashed #ccc;
      margin-bottom:20px;
    }
  }
  }    
  .shortW{
    width:300px;
  }
  .card-title{
    font-size: 20px;
    font-weight: bold;
  }
  .el-checkbox-group{
    .el-checkbox{
      font-size: 16px;
      margin: 10px 60px;
      .el-checkbox__inner{
        width: 16px;
        height: 16px;
      }
      .el-checkbox__inner::after{
        left:5px;
        top:2px;
      }
      .el-checkbox__label{
        line-height:24px;
        font-size:16px;
      }
    }
  }
    
</style>

src/views/userInfo/usingList.vue

    <div class="box-container">
      <div class="contain-title">正常用户</div>
      <div class="contain-search">
        <el-input placeholder="搜索用户名/手机账号" v-model="searchText" class="input-with-select">
        <el-input placeholder="搜索用户名/手机账号" v-model="searchText" class="input-with-select" @keyup.enter.native="pageQueryUser">
          <el-button slot="append" icon="el-icon-search"></el-button>
          <el-button slot="append" icon="el-icon-search" @click="pageQueryUser"></el-button>
        </el-input>
      </div>
    </div>
    <div class="content-container">
      <complex-table :tableData="tableData" :tableItem="tableItem"></complex-table>
      <el-table
      <span @click="queryInfo">用户信息</span>
        :data="tableData"
      <span @click="pullBlackFun">拉黑</span>
        height="630"
        border>
        <el-table-column
          v-for="item in tableItem"
          :key="item.index"
          :prop="item.prop ? item.prop : ''"
          :label="item.tit ? item.tit : ''"
          :width="item.width ? item.width : ''"
          align="center">
          <template slot-scope="scope">
            <div v-if="scope.row[item.prop]">
              <el-button v-if="item.link" type="text"
                @click="queryInfo(scope.row.id)">{{scope.row[item.prop]}}</el-button>
              <span v-else>{{scope.row[item.prop]}}</span>
            </div>
            <div class="operate-row" v-if="item.operate && typeof scope.row === 'object'">
              <el-button
                size="medium"
                type="danger"
                @click="pullBlackFun(scope.row.id)">拉黑</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <baseInfo ref="baseInfo"></baseInfo>
    <pullBlack ref="pullBlack"></pullBlack>
</template>
<script>
import complexTable from '@/components/complexTable'
import {
  pageNormalUser
} from '@/api/userInfo'
import { parseTime } from '@/utils'
import comTable from '@/utils/comTable'
import baseInfo from './baseInfo'
import pullBlack from './pullBlack'
export default {
  data() {
    return {
      searchText: '',
      selectMode: '',
      pageSize: 10,
      tableData: [
      pageNo: 1,
        {
      total: 0,
          date: '2018/08/25 16:32',
      tableData: [],
          name: '关于征集企业技术创新需求的通知',
          class: '通知公告',
          owner: '张贝贝',
          num: '4552'
        }, {
          date: '2018/08/25 16:32',
          name: '关于征集企业技术创新需求的通知',
          class: '通知公告',
          owner: '张贝贝',
          num: '4552'
        }, {
          date: '2018/08/25 16:32',
          name: '关于征集企业技术创新需求的通知',
          class: '通知公告',
          owner: '张贝贝',
          num: '4552'
        }, {
          date: '2018/08/25 16:32',
          name: '关于征集企业技术创新需求的通知',
          class: '通知公告',
          owner: '张贝贝',
          num: '4552'
        }
      ],
      tableItem: [
        {
          prop: 'name',
          prop: 'loginPhone',
          tit: '标题'
          tit: '手机账号',
          width: '120',
          link: true
        },
        {
          prop: 'class',
          prop: 'account',
          tit: '栏目分类',
          tit: '用户名'
          width: '160'
        },
        {
          prop: 'job',
          tit: '职位'
        },
        {
          prop: 'owner',
          prop: 'dep',
          tit: '发布人',
          tit: '所在机构'
        },
        {
          prop: 'linkPhone',
          tit: '联系电话',
          width: '120'
        },
        {
          prop: 'email',
          tit: '联系邮箱',
          width: '160'
        },
        {
          prop: 'date',
          prop: 'createTime',
          tit: '发布时间',
          tit: '创建时间',
          width: '160'
        },
        {
          prop: 'num',
          prop: 'createTime',
          tit: '浏览数量',
          tit: '最后登录时间',
          width: '160'
        },
        {
          operate: 'edit',
          operate: true,
          width: '200'
          width: '100'
        }
      ]
    }
  },
  components: {
    complexTable,
    baseInfo,
    pullBlack
  },
  created() {
    this.pageQueryUser()
  },
  methods: {
    queryInfo() {
    pageQueryUser() {
      this.$refs.baseInfo.userDialogVisible = true
      var that = this
      this.$http.get(pageNormalUser, {
        key: that.searchText,
        pageSize: that.pageSize,
        pageNo: that.pageNo
      }, function(res) {
        if (res.success && res.data) {
          const obj = res.data.data
          for (let i = 0; i < obj.length; ++i) {
            if (obj[i].createTime) {
              obj[i].createTime = parseTime(obj[i].createTime)
            }
          }
          that.total = res.data.total
          that.tableData = obj
          comTable.gapFilling(that.tableData)
        } else {
          that.total = 0
          that.tableData = []
        }
      })
    },
    queryInfo(id) {
      this.$refs.baseInfo.queryNormalOne(id)
    },
    pullBlackFun(id) {
      this.$refs.pullBlack.queryNormalOne(id)
    },
    pullBlackFun() {
    handleCurrentChange(val) {
      this.$refs.pullBlack.userDialogVisible = true
      this.pageNo = val
      this.pageQueryUser()
    }
  }
}