Merge branch 'master' of http://git.zthymaoyi.com/gongdecai/wangluohuoyun-htqd

src/api/menu.js

@@ -0,0 +1,6 @@
+import request from '@/utils/request'
+export function getMenus() {
+  return request({
+    url: '/api-user/func/my_menus',
+    method: 'get',
+  })

src/api/parkReportManagement.js

@@ -39,3 +39,12 @@ export function carReport(data) {
      data: data,
   })
 }
+  //查看单条数据
+  export function carGetInfo(data) {
+    return request({
+      url: '/driverCarInfo/getDriverCarInfo',
+      method: 'get',
+      params: data,
+    })
+  }
+

src/api/permissionSettingManagement.js

@@ -0,0 +1,102 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/baseRole/query/company',
+    method: 'get',
+    params: data,
+  })
+}
+
+export function create(data) {
+  return request({
+    url: '/baseRole/api/create',
+    method: 'post',
+    data: data,
+  })
+}
+
+export function changeInfo(data) {
+  return request({
+    url: '/baseRole/api/changeInfo',
+    method: 'post',
+    data: data,
+  })
+}
+
+export function compAndChildrenInfo(params) {
+  return request({
+    url: "/baseCompany/query/compAndChildrenInfo",
+    method: "get",
+    params
+  });
+}
+// 通过公司ID获取部门列表
+export function getDeptPageByCompId(params) {
+  return request.get("/department/query/getDeptPageByCompId", {
+    params: params
+  });
+}
+
+// 获取角色详情
+export function getRoleInfo(params) {
+  return request.get("/baseRole/query/getRoleInfo", {
+    params: params
+  });
+}
+
+// 获取插件列表
+export function getTenantlist(params) {
+  return request.get("/tenantPlugin/query/pluginDetails", {
+    params: params
+  });
+}
+
+// 绑定资源
+export function bindResources(data) {
+  return request.post("/baseRole/api/bindResources", data);
+}
+
+// 绑定资源
+export function getVessels(params) {
+  return request.get("/baseStaff/query/staffPageByCondition", {
+    params: params
+  });
+}
+
+export function queryRoleSelectData(data) {
+  return request({
+    url: "/baseRole/query/queryRoleSelectData",
+    method: "get",
+    params: data
+  });
+}
+
+export function addadmin(data) {
+  return request({
+    url: "/baseStaff/api/create", // 创建用户
+    method: "post",
+    data
+  });
+}
+
+export function checkApp(data) {
+  return request({
+    url: "/commonUser/api/checkApp", // 创建用户
+    method: "post",
+    data
+  });
+}
+export function staffInfo(params) {
+  return request.get("/baseStaff/query/staffInfo", {
+    params: params
+  });
+}
+
+export function editInfo(data) {
+  return request({
+    url: "/commonUser/api/changeInfo",
+    method: "post",
+    data
+  });
+}

src/api/user.js

@@ -8,13 +8,13 @@ export function login(data) {
   })
 }
 
-// export function getInfo(token) {
-//   return request({
-//     url: '/staff/query/getCurrentUserInfo',
-//     method: 'get'
-//     // params: { token }
-//   })
-// }
+export function getInfo() {
+  return request({
+    url: '/staff/query/getCurrentUserInfo',
+    method: 'get'
+    // params: { token }
+  })
+}
 
 export function logout() {
   return request({
@@ -22,3 +22,11 @@ export function logout() {
     method: 'post'
   })
 }
+
+export function getRoule() {
+  return request({
+    url: '/roleMenu/query/getListByUserId',
+    method: 'get'
+    // params: { token }
+  })
+}

src/global/directive.js

@@ -0,0 +1,179 @@
+const drag = {
+  install(Vue, options = {}) {
+    Vue.directive('drag', {
+      bind(el, binding, vnode) {
+        const dialogHeaderEl = el.querySelector('.el-dialog__header')
+        const dragDom = el.querySelector('.el-dialog')
+        dialogHeaderEl.style.cssText += ';cursor:move;'
+        dragDom.style.cssText += ';top:0px;'
+
+        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+        const getStyle = (function() {
+          if (window.document.currentStyle) {
+            return (dom, attr) => dom.currentStyle[attr]
+          } else {
+            return (dom, attr) => getComputedStyle(dom, false)[attr]
+          }
+        })()
+
+        dialogHeaderEl.onmousedown = e => {
+          // 鼠标按下，计算当前元素距离可视区的距离
+          const disX = e.clientX - dialogHeaderEl.offsetLeft
+          const disY = e.clientY - dialogHeaderEl.offsetTop
+
+          const dragDomWidth = dragDom.offsetWidth
+          const dragDomHeight = dragDom.offsetHeight
+
+          const screenWidth = document.body.clientWidth
+          const screenHeight = document.body.scrollHeight
+
+          const minDragDomLeft = dragDom.offsetLeft
+          const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
+
+          const minDragDomTop = dragDom.offsetTop
+          const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
+
+          // 获取到的值带px 正则匹配替换
+          let styL = getStyle(dragDom, 'left')
+          let styT = getStyle(dragDom, 'top')
+
+          if (styL.includes('%')) {
+            styL = +document.body.clientWidth * (+styL.replace(/\\%/g, '') / 100)
+            styT = +document.body.scrollHeight * (+styT.replace(/\\%/g, '') / 100)
+          } else {
+            styL = +styL.replace(/\px/g, '')
+            styT = +styT.replace(/\px/g, '')
+          }
+
+          document.onmousemove = function(e) {
+            // 通过事件委托，计算移动的距离
+            let left = e.clientX - disX
+            let top = e.clientY - disY
+            if ((left <= 5 && left >= -5) || (top <= 5 && top >= -5)) {
+              return
+            }
+
+            // 边界处理
+            if (-left > minDragDomLeft) {
+              left = -minDragDomLeft
+            } else if (left > maxDragDomLeft) {
+              left = maxDragDomLeft
+            }
+
+            if (-top > minDragDomTop) {
+              top = -minDragDomTop
+            } else if (top > maxDragDomTop) {
+              top = maxDragDomTop
+            }
+
+            // 移动当前元素
+            dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+            console.info(dragDom.style.cssText)
+
+            // emit onDrag event
+            vnode.child.$emit('dragDialog')
+          }
+
+          document.onmouseup = function(e) {
+            document.onmousemove = null
+            document.onmouseup = null
+          }
+        }
+      }
+    })
+  }
+}
+
+function onInput(el, ele, binding, vnode) {
+  function handle() {
+    let val = ele.value
+    // modifiers为修饰符对象， 传入了float， 则其float属性为true
+    if (binding.modifiers.float) {
+      // 清除"数字"和"."以外的字符
+      val = val.replace(/[^\d.]/g, '')
+      // 只保留第一个, 清除多余的
+      val = val.replace(/\.{2,}/g, '.')
+      // 第一个字符如果是.号，则补充前缀0
+      val = val.replace(/^\./g, '0.')
+      if (typeof binding.value !== 'undefined') {
+        // 期望保留的最大小数位数
+        let pointKeep = 0
+        if (typeof binding.value === 'string' ||
+          typeof binding.value === 'number') {
+          pointKeep = parseInt(binding.value)
+        }
+        const str = '^(\\d+)\\.(\\d\\{' + pointKeep + '}).*$'
+        const reg = new RegExp(str)
+        if (pointKeep === 0) {
+          // 不需要小数点
+          val = val.replace(reg, '$1')
+        } else {
+          // 通过正则保留小数点后指定的位数
+          val = val.replace(reg, '$1.$2')
+        }
+      }
+    }
+    ele.value = val
+    if (vnode.componentInstance) {
+      vnode.componentInstance.$emit('input', ele.value)
+    } else {
+      vnode.elm.dispatchEvent(new CustomEvent('input', ele.value))
+    }
+  }
+  return handle
+}
+
+const numberInput = {
+  install(Vue, options = {}) {
+    Vue.directive('number-input', {
+      bind(el, binding, vnode) {
+        const ele = (el && el.tagName === 'INPUT') ? el : el.querySelector('input')
+        ele.addEventListener('input', onInput(el, ele, binding, vnode), true)
+      },
+    })
+  }
+}
+
+const loadmore = {
+  install(Vue, options = {}) {
+    Vue.directive('loadmore', {
+      bind(el, binding, vnode) {
+        const selectWrap = el.querySelector('.el-table__body-wrapper')
+        selectWrap.addEventListener('scroll', function() {
+          let sign = 0;
+          const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+          if (scrollDistance <= sign) {
+            binding.value()
+          }
+        })
+      }
+    })
+  }
+}
+const permission = (el, binding, vnode) => {
+  const roles = vnode.context.$store.getters.roles;
+  if (!roles) {
+    return;
+  }
+
+  let userPermissionList = Array.isArray(binding.value) ? binding.value : [binding.value];
+  // 当前用户的权限列表
+  if (!userPermissionList.some(e => roles.includes(e))) {
+    el.parentNode && el.parentNode.removeChild(el);
+  }
+}
+
+const permissionCheck = {
+  install(Vue, options = {}) {
+    Vue.directive('hasPermission', {
+      inserted: permission,
+      componentUpdated: permission
+    })
+  }
+}
+export default {
+  numberInput,
+  loadmore,
+  drag,
+  permissionCheck
+}

src/global/index.js

@@ -0,0 +1,13 @@
+import './prototypes'
+import directive from './directive'
+import Vue from 'vue'
+// import filters from '@/global/filters';
+Object.values(directive).forEach(value => Vue.use(value))
+// const install = () => {
+
+//   Object.keys(directive).forEach((key) => Vue.use(directive[key]));
+//   // 装载 vue prototype
+//   Object.keys(prototypes).forEach((key) => Vue.use(prototypes[key]));
+//   // 装载 vue 全局 filters
+//   // Object.keys(filters);
+// };

src/global/prototypes.js

@@ -0,0 +1,111 @@
+import Vue from 'vue'
+import { formatDate, fmoney, placeholder, dayjs } from 'base-core-lib'
+import { get, isArray } from 'lodash' //isNumber, isNaN,
+import Qs from 'qs'
+import XEUtils from 'xe-utils'
+import './sys_prototypes_old'
+import appEnums from '@/enums';
+import pinyin from 'pinyin'
+
+/**
+ * 获取枚举
+ * @param {String} formName 表单名称
+ */
+export const getEnums = (key) => {
+  return Object.keys((appEnums)[key] || {}).map((item) => ({
+    value: item,
+    text: (appEnums)[key][item],
+    label: (appEnums)[key][item],
+  }));
+};
+
+export const enums = (str) => {
+  return get(appEnums, str, '');
+};
+/**
+ * 日期差
+ * @param time 时间
+ */
+const relativeTime = time => {
+  return dayjs(time).fromNow();
+}
+
+/**
+ * 转换图片URL
+ * @param url 待转换的图片URL
+ * @param type 转换后的大小
+ */
+export const transImageUrl = (url, size) => {
+  if (url) {
+    switch (size) {
+      case 'small':
+        return `${url}@!app-s`
+      case 'large':
+        return `${url}@!l`
+    }
+  } else {
+    return ''
+  }
+}
+
+/**
+ * 转换图片URL集合
+ * @param urls 待转换的图片URL集合
+ * @param size 转换后的大小
+ */
+export const transImageUrls = (urls, size) => {
+  if (isArray(urls)) {
+    return urls.map(url => transImageUrl(url, size))
+  } else {
+    return transImageUrl(urls, size)
+  }
+}
+/**
+    * 采购模块动态权限解析
+    * data:服务器返回数据
+    * p1:父权限
+    * p2:子权限
+    */
+export const resolvePermissions = (data, p1, p2) => {
+  return (
+    (data.resourceIds ? data.resourceIds.includes(p1) : false) &&
+    (p2 ? data[p2] : true)
+  )
+}
+
+
+/**
+ *  获取当前时间 年-月-日
+ *  @param type YYYY:年 MM：月 DD: 日 HH：时 mm：分 ss:秒
+ *  @return 返回对应格式的当前时间
+ */
+Vue.prototype.nowFormatDate = (type = 'YYYY-MM-DD') => {
+  return dayjs().format(type)
+}
+
+/**
+ *  汉字转拼音
+ *  @param value 汉字
+ *  @param segment 是否启用分词模式，中文分词有助于极大的降低多音字问题。 但性能会极大的下降，内存也会使用更多。 默认开启
+ *  @param segment 是否启用多音字模式，默认关闭。 关闭多音字模式时，返回每个汉字第一个匹配的拼音。启用多音字模式时，返回多音字的所有拼音列表。
+ *  @param style 指定拼音 风格。可以通过以下几种 STYLE_ 开头的静态属性进行指定。
+ *  @see https://www.npmjs.com/package/pinyin
+ *  @return 对应拼音
+ */
+Vue.prototype.$pingyin = ({ value = '', segment = true, heteronym = false, style = pinyin.STYLE_NORMAL }) => {
+  return pinyin(value, { segment: segment, heteronym: heteronym, style: style })
+}
+
+Vue.prototype.$permission = enums
+Vue.prototype.$tl = getEnums
+Vue.prototype.$rt = relativeTime
+Vue.prototype.$fd = formatDate
+Vue.prototype.$fmoney = fmoney
+Vue.prototype.$ph = placeholder
+Vue.prototype.$tiu = transImageUrl // 转换图片URL
+Vue.prototype.$tius = transImageUrls // 转换图片URL集合
+Vue.prototype.resolvePermissions = resolvePermissions
+
+// 系统中原有全局函数
+Vue.prototype.$qs = Qs
+Vue.prototype.$utils = XEUtils

src/global/sys_prototypes_old.js

@@ -0,0 +1,208 @@
+import Vue from 'vue'
+import store from '@/vendors/vuex'
+
+function isObj (object) {
+  return (
+    object &&
+    typeof object === 'object' &&
+    Object.prototype.toString.call(object).toLowerCase() === '[object object]'
+  )
+}
+
+
+// isEmpty
+Vue.prototype.isNull = function (value) {
+  if (!value || value === null || value.length === 0) {
+    return true
+  }
+  return false
+}
+
+// 是否有权限
+Vue.prototype.permissionIf = function (permission) {
+  const roles = store.getters.roles
+  if (!roles) {
+    return false
+  }
+  return roles.some(role => role.indexOf(permission) === 0)
+}
+
+// 导出
+Vue.prototype.downloadNormal = function (url, fileName) {
+  return new Promise(next => {
+    const tag = document.createElement('a')
+    tag.href = url
+    tag.download = fileName
+    document.body.appendChild(tag)
+    tag.click()
+    document.body.removeChild(tag)
+    next(true)
+  })
+}
+//基础数据内容显示中英文
+Vue.prototype.showConst = function (constStr) {
+  if (this.isNull(constStr)) {
+    return '--'
+  } else if (constStr.indexOf('#YH#') === -1) {
+    return constStr
+  }
+  let language = store.state.app.language
+  return language === 'zh'
+    ? constStr.split('#YH#')[0]
+    : constStr.split('#YH#')[1]
+}
+
+//基础数据下拉框列表显示中英文
+Vue.prototype.getConstLanguage = function () {
+  let language = store.state.app.language
+  return language === 'zh' ? 'constValue' : 'constValueEn'
+}
+//基础数据下拉框列表显示中英文
+Vue.prototype.getParameterLanguage = function () {
+  let language = store.state.app.language
+  return language === 'zh' ? 'parameterValue' : 'parameterValueEn'
+}
+//基础数据下拉框列表显示中英文
+Vue.prototype.getEnumValue = function () {
+  let language = store.state.app.language
+  return language === 'zh' ? 'enumValue' : 'enumEnValue'
+}
+// 全局限制input框输入字符长度
+Vue.prototype.set100 = function () {
+  return 90
+}
+// 全局限制input框输入字符长度
+Vue.prototype.set50 = function () {
+  return 40
+}
+// 全局限制input框输入字符长度
+Vue.prototype.set500 = function () {
+  return 450
+}
+// 清除单个验证
+Vue.prototype.resetForm = function (refName, prop) {
+  let _field = this.$refs[refName].fields
+  _field.map(i => {
+    if (i.prop === prop) {
+      i.resetField()
+      return false
+    }
+  })
+}
+
+// 金额校验
+Vue.prototype.numberVerifyFun = function (val) {
+  val = val
+    .replace(/[^\d.]/g, '') // 非数字、点、干掉
+    .replace(/\.{2,}/g, '.') // 连续两个以上点，变成一个点
+    .replace('.', '$#$')
+    .replace(/\./g, '')
+    .replace('$#$', '.') // 以上三步，干了一件事，就是只保留第一处点
+    .replace(/^(\d{1,8})[^\\.]*(?!\.)/, '$1') // 输入的是不带小数的整数，则取前8位
+    .replace(/^0(?=[^\\.])/, '') // 0XXXX，干掉(非0.XXX)
+    .replace(/^(\d{1,8}).*\.(\d\d).*$/, '$1.$2') // 输入的带小数，则整数部分8位，小数2位
+    .replace(/^\./g, '') // 开头的点去掉
+  return val
+}
+
+// 数字校验 可为负数  可0 可0.00
+Vue.prototype.numberVerifyCheck = function (value) {
+  let val = value
+  if (value) {
+    val = val
+      .replace(/[^\d.]/g, '') // 非数字、点、干掉
+      .replace(/\.{2,}/g, '.') // 连续两个以上点，变成一个点
+      .replace('.', '$#$')
+      .replace(/\./g, '')
+      .replace('$#$', '.') // 以上三步，干了一件事，就是只保留第一处点
+      .replace(/^(\d{1,8})[^\\.]*(?!\.)/, '$1') // 输入的是不带小数的整数，则取前8位
+      .replace(/^0(?=[^\\.])/, '') // 0XXXX，干掉(非0.XXX)
+      .replace(/^(\d{1,8}).*\.(\d\d).*$/, '$1.$2') // 输入的带小数，则整数部分8位，小数2位
+      .replace(/^\./g, '')
+    if (value.substring(0, 1) === '-') {
+      val = '-' + val
+    }
+  }
+  return val
+}
+
+// 保留4位校验
+Vue.prototype.numberVerifyFourFun = function (val) {
+  val = val
+    .replace(/[^\d.]/g, '')
+    .replace(/\.{4,}/g, '.')
+    .replace('.', '$#$')
+    .replace(/\./g, '')
+    .replace('$#$', '.')
+    .replace(/^(\d{1,8})[^\\.]*(?!\.)/, '$1')
+    .replace(/^0(?=[^\\.])/, '')
+    .replace(/^(\d{1,8}).*\.(\d\d\d\d).*$/, '$1.$2')
+    .replace(/^\./g, '')
+  return val
+}
+/* 取消共通方法*/
+Vue.prototype.compareJson = function (obj1, obj2) {
+  if (!isObj(obj1) || !isObj(obj2)) {
+    return false
+  }
+  const str1 = JSON.stringify(obj1)
+  const str2 = JSON.stringify(obj2)
+  if (str1.length !== str2.length) {
+    return false
+  }
+  return str1 === str2
+}
+
+//判断数组是否有重复元素
+Vue.prototype.isRepeat = function (arr) {
+  /*eslint prefer-const:0*/
+  let newArr = []
+  for (let i in arr) {
+    if (newArr.includes(arr[i])) {
+      return true
+    }
+    newArr.push(arr[i])
+  }
+  return false
+}
+
+//监听localStorage变化
+Vue.prototype.resetSetItem = function (key, newVal) {
+  // 创建一个StorageEvent事件
+  const newStorageEvent = document.createEvent('StorageEvent')
+  const storage = {
+    setItem: function (k, val) {
+      localStorage.setItem(k, val)
+      // 初始化创建的事件
+      newStorageEvent.initStorageEvent(
+        'setItem',
+        false,
+        false,
+        k,
+        null,
+        val,
+        null,
+        null
+      )
+      // 派发对象
+      window.dispatchEvent(newStorageEvent)
+    }
+  }
+  return storage.setItem(key, newVal)
+}
+
+/*数字索引转成字母索引*/
+Vue.prototype.numToColNo = function (number) {
+  let stringArray = []
+  let numToStringAction = function (number) {
+    let num = number - 1
+    let a = parseInt(num / 26)
+    let b = num % 26
+    stringArray.push(String.fromCharCode(64 + parseInt(b + 1)))
+    if (a > 0) {
+      numToStringAction(a)
+    }
+  }
+  numToStringAction(number)
+  return stringArray.reverse().join('')
+}

src/permission.js

@@ -1,16 +1,22 @@
 import router from './router'
 import store from './store'
-import { Message } from 'element-ui'
+import {
+  Message
+} from 'element-ui'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
-import { getToken } from '@/utils/auth' // get token from cookie
+import {
+  getToken
+} from '@/utils/auth' // get token from cookie
 import getPageTitle from '@/utils/get-page-title'
 
-NProgress.configure({ showSpinner: false }) // NProgress Configuration
+NProgress.configure({
+  showSpinner: false
+}) // NProgress Configuration
 
 const whiteList = ['/login'] // no redirect whitelist
 
-router.beforeEach(async(to, from, next) => {
+router.beforeEach(async (to, from, next) => {
   // start progress bar
   NProgress.start()
 
@@ -19,11 +25,12 @@ router.beforeEach(async(to, from, next) => {
 
   // determine whether the user has logged in
   const hasToken = getToken()
-
   if (hasToken) {
     if (to.path === '/login') {
       // if is logged in, redirect to the home page
-      next({ path: '/' })
+      next({
+        path: '/'
+      })
       NProgress.done()
     } else {
       const hasGetUserInfo = store.getters.name
@@ -32,7 +39,11 @@ router.beforeEach(async(to, from, next) => {
       } else {
         try {
           // get user info
-          // await store.dispatch('user/getInfo')
+          const accessRoutes = await store.dispatch('permission/generateRoutes');
+          router.addRoutes(accessRoutes);
+          const {
+            roles
+          } = await store.dispatch('user/getInfo')
 
           next()
         } catch (error) {

src/router/index.js

@@ -18,135 +18,105 @@ import operationLog from './operationLog/index'
 
 
 export const constantRoutes = [{
-        path: '/login',
-        component: () =>
-            import ('@/views/login/index'),
-        hidden: true
-    },
-
-    {
-        path: '/404',
-        component: () =>
-            import ('@/views/404'),
-        hidden: true
-    },
+    path: '/login',
+    component: () =>
+      import('@/views/login/index'),
+    hidden: true
+  },
 
-    {
-        path: '/',
-        component: Layout,
-        redirect: '/dashboard',
-        children: [{
-            path: 'dashboard',
-            name: 'Dashboard',
-            component: () =>
-                import ('@/views/dashboard/index'),
-            meta: {
-                title: '首页',
-                icon: 'shouye'
-            }
-        }]
+  {
+    path: '/404',
+    component: () =>
+      import('@/views/404'),
+    hidden: true
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/dashboard',
+    children: [{
+      path: 'dashboard',
+      name: 'Dashboard',
+      component: () =>
+        import('@/views/dashboard/index'),
+      meta: {
+        title: '首页',
+        icon: 'shouye'
+      }
+    }]
+  },
+  driverManagement,
+  cargoOwnerManagement,
+  enterpriseManagement,
+  orderManagement,
+  contractManagement,
+  platformManagement,
+  feedbackManagement,
+  officialWebsiteManagement,
+  parkReportManagement,
+  settlementManagement,
+  {
+    path: '/permissionSetting',
+    component: Layout,
+    redirect: '/permissionSettingManagement',
+    name: 'permissionSettingManagement',
+    meta: {
+      title: '权限设置',
+      icon: 'shouye'
     },
-    driverManagement,
-    cargoOwnerManagement,
-    enterpriseManagement,
-    orderManagement,
-    contractManagement,
-    platformManagement,
-    feedbackManagement,
-    officialWebsiteManagement,
-    parkReportManagement,
-    settlementManagement,
-    operationLog,
-
-    // {
-    // 	path: '/example',
-    // 	component: Layout,
-    // 	redirect: '/example/table',
-    // 	name: 'Example',
-    // 	meta: {
-    // 		title: 'Example',
-    // 		icon: 'el-icon-s-help'
-    // 	},
-    // 	children: [{
-    // 			path: 'table',
-    // 			name: 'Table',
-    // 			component: () => import('@/views/table/index'),
-    // 			meta: {
-    // 				title: 'Table',
-    // 				icon: 'table'
-    // 			}
-    // 		},
-    // 		{
-    // 			path: 'tree',
-    // 			name: 'Tree',
-    // 			component: () => import('@/views/tree/index'),
-    // 			meta: {
-    // 				title: 'Tree',
-    // 				icon: 'tree'
-    // 			}
-    // 		}
-    // 	]
-    // },
-
-    // {
-    // 	path: '/form',
-    // 	component: Layout,
-    // 	children: [{
-    // 		path: 'index',
-    // 		name: 'Form',
-    // 		component: () => import('@/views/form/index'),
-    // 		meta: {
-    // 			title: 'Form',
-    // 			icon: 'form'
-    // 		}
-    // 	}]
-    // },
-
-    // {
-    //   path: 'external-link',
-    //   component: Layout,
-    //   children: [{
-    //     path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
-    //     meta: {
-    //       title: 'External Link',
-    //       icon: 'link'
-    //     }
-    //   }]
-    // },
-
-    // 404 page must be placed at the end !!!
-    {
-        path: '*',
-        redirect: '/404',
-        hidden: true
-    }
+    children: [{
+        path: 'permissionSetting',
+        name: 'permissionSetting',
+        component: () =>
+          import('@/views/permissionSetting/permissionSetting'),
+        meta: {
+          title: '角色设置',
+          icon: 'shouye'
+        }
+      },
+      {
+        path: 'permissionSettingPerson',
+        name: 'permissionSettingPerson',
+        component: () =>
+          import('@/views/permissionSetting/permissionSettingPerson'),
+        meta: {
+          title: '人员设置',
+          icon: 'shouye'
+        }
+      }
+    ]
+  },
+  {
+    path: '*',
+    redirect: '/404',
+    hidden: true
+  }
 ]
-
 let cofigRouter = []
-const modulesFiles = require.context('../views', true, /.js$/)
-modulesFiles.keys().forEach((model_item, key) => {
-        if (model_item === 'index.js' || modulesFiles(model_item).default === undefined || modulesFiles(model_item)
-            .default.path === undefined) return
-        cofigRouter = cofigRouter.concat(modulesFiles(model_item).default)
-    })
-    // 需要根据用户角色动态加载的路由
-export const asyncRoutes = cofigRouter
+// const modulesFiles = require.context('../views', true, /.js$/)
+// modulesFiles.keys().forEach((model_item, key) => {
+//         if (model_item === 'index.js' || modulesFiles(model_item).default === undefined || modulesFiles(model_item)
+//             .default.path === undefined) return
+//         cofigRouter = cofigRouter.concat(modulesFiles(model_item).default)
+//     })
+// 需要根据用户角色动态加载的路由
+export const dynamicRoutes = cofigRouter
 const createRouter = () =>
-    new Router({
-        // mode: 'history',
-        scrollBehavior: () => ({
-            y: 0
-        }),
-        linkActiveClass: 'active', // router-link  .active样式
-        routes: constantRoutes
-    })
+  new Router({
+    // mode: 'history',
+    scrollBehavior: () => ({
+      y: 0
+    }),
+    linkActiveClass: 'active', // router-link  .active样式
+    routes: constantRoutes
+  })
 
 const router = createRouter()
 
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
 export function resetRouter() {
-    const newRouter = createRouter()
-    router.matcher = newRouter.matcher // reset router
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher // reset router
 }
 
-export default router
+export default router

src/store/getters.js

@@ -3,6 +3,8 @@ const getters = {
   device: state => state.app.device,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
-  name: state => state.user.name
+  name: state => state.user.name,
+  menuList: state => state.menu.menuList,
+  roles: state => state.user.roles,
 }
 export default getters

src/store/index.js

@@ -4,6 +4,7 @@ import getters from './getters'
 import app from './modules/app'
 import settings from './modules/settings'
 import user from './modules/user'
+import permission from './modules/permission'
 
 Vue.use(Vuex)
 let saveStateKeys = ['UserInfo'];
@@ -11,20 +12,21 @@ const store = new Vuex.Store({
   modules: {
     app,
     settings,
-    user
+    user,
+    permission
   },
   getters,
-  state:{
-    UserInfo:window.localStorage.getItem('UserInfo')
+  state: {
+    UserInfo: window.localStorage.getItem('UserInfo')
 
   },
-  mutations:{
-    login(state, provider) {  
-			state.hasLogin = true;
-			state.UserInfo = provider;
-			state.UserInfo = window.localStorage.getItem('UserInfo');
-      window.localStorage.setItem('UserInfo',provider)
-		},
+  mutations: {
+    login(state, provider) {
+      state.hasLogin = true;
+      state.UserInfo = provider;
+      state.UserInfo = window.localStorage.getItem('UserInfo');
+      window.localStorage.setItem('UserInfo', provider)
+    },
 
   }
 })

src/store/modules/menu.js

@@ -0,0 +1,83 @@
+import {
+  getMenus
+} from '@/api/menu'
+import {
+  getToken
+} from '@/utils/auth'
+import {
+  constantRoutes,
+  dynamicRoutes
+} from '@/router/index'
+
+const getDefaultState = () => {
+  return {
+    token: getToken(),
+    menuList: []
+  }
+}
+
+const state = getDefaultState()
+
+const mutations = {
+  SET_MENUS: (state, menu) => {
+    state.menuList = menu
+  }
+}
+// 动态菜单还是定义在前端，后台只会返回有权限的菜单列表，通过遍历我们预先在路由表里定义好的菜单数据，没有的将对于菜单进行隐藏
+export function generaMenu(routes, srvMenus) {
+  for (let i = 0; i < routes.length; i++) {
+    const routeItem = routes[i]
+    var showItem = false
+    for (let j = 0; j < srvMenus.length; j++) {
+      const srvItem = srvMenus[j]
+      // 前后端数据通过 url 属性来匹配
+      if (routeItem.url !== undefined && routeItem.url === srvItem.url) {
+        showItem = true
+        routes[i]['hidden'] = false
+        break
+      }
+    }
+    if (showItem === false) {
+      routes[i]['hidden'] = true
+    }
+
+    if (routeItem['children'] !== undefined && routeItem['children'].length > 0) {
+      generaMenu(routes[i]['children'], srvMenus)
+    }
+  }
+}
+
+const actions = {
+
+  getMenus({
+    commit
+  }) {
+    return new Promise((resolve, reject) => {
+      getMenus(state.token).then(response => {
+        const {
+          data
+        } = response
+
+        console.log(response)
+        if (!data) {
+          reject('Verification failed, please Login again.')
+        }
+
+        const srvMenus = data
+        let pushRouter = dynamicRoutes
+        generaMenu(pushRouter, srvMenus)
+        commit('SET_MENUS', constantRoutes.concat(pushRouter)) //将创建完成的路由表存在menuList中
+        resolve(pushRouter)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/permission.js

@@ -5,7 +5,7 @@ import {
 } from '@/router'
 import {
   getRoule
-} from '@/model/indexRx'
+} from '@/api/user'
 import {
   clearStorage
 } from '../../utils/auth'
@@ -127,22 +127,17 @@ const actions = {
     commit
   }) {
     return new Promise(async resolve => {
-      const data = await getRoule().toPromise()
-        .catch((err) => {
-          clearStorage()
-          resetRouter()
-          window.location.href = 'https://test1.eliangeyun.com'
+      getRoule().then(response => {
+        const roles = []
+        handleRoles(response.data, roles, '')
+        // console.log(roles)
+        const accessedRoutes = filterAsyncRoutes(constantRoutes, roles)
+        commit('user/SET_ROLES', roles, {
+          root: true
         })
-
-      const roles = []
-      handleRoles(data, roles, '')
-      // console.log(roles)
-      const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
-      commit('user/SET_ROLES', roles, {
-        root: true
+        commit('SET_ROUTES', accessedRoutes)
+        resolve(accessedRoutes)
       })
-      commit('SET_ROUTES', accessedRoutes)
-      resolve(accessedRoutes)
     })
   }
 }

src/store/modules/user.js

@@ -1,12 +1,24 @@
-import { login, logout } from '@/api/user'
-import { getToken, setToken, removeToken } from '@/utils/auth'
-import { resetRouter } from '@/router'
+import {
+  login,
+  logout,
+  getInfo,
+  getRoule
+} from '@/api/user'
+import {
+  getToken,
+  setToken,
+  removeToken
+} from '@/utils/auth'
+import {
+  resetRouter
+} from '@/router'
 
 const getDefaultState = () => {
   return {
     token: getToken(),
     name: '',
-    avatar: ''
+    avatar: '',
+    roles: [],
   }
 }
 
@@ -24,15 +36,28 @@ const mutations = {
   },
   SET_AVATAR: (state, avatar) => {
     state.avatar = avatar
-  }
+  },
+  SET_ROLES: (state, roles) => {
+    state.roles = roles
+  },
 }
 
 const actions = {
   // user login
-  login({ commit }, userInfo) {
-    const { companyName, username, password } = userInfo
+  login({
+    commit
+  }, userInfo) {
+    const {
+      companyName,
+      username,
+      password
+    } = userInfo
     return new Promise((resolve, reject) => {
-      login({ companyName: companyName, username: username.trim(), password: password }).then(response => {
+      login({
+        companyName: companyName,
+        username: username.trim(),
+        password: password
+      }).then(response => {
         // const { data } = response
         // commit('SET_TOKEN', data.token)
         // setToken(data.token)
@@ -46,28 +71,75 @@ const actions = {
   },
 
   // get user info
-  // getInfo({ commit, state }) {
-  //   return new Promise((resolve, reject) => {
-  //     getInfo(state.token).then(response => {
-  //       const { data } = response
+  getInfo({
+    commit,
+    state
+  }) {
+    return new Promise((resolve, reject) => {
 
-  //       if (!data) {
-  //         return reject('Verification failed, please Login again.')
-  //       }
+      getInfo().then(response => {
+        const {
+          data
+        } = response
+        if (!data) {
+          reject('Verification failed, please Login again.')
+        }
+        const {
+          staffName,
+          deptId,
+          deptName,
+          deptNameEn,
+          vessels = [],
+          majorRole: {
+            roleName = '',
+            roleId = '',
+            dutyId = ''
+          },
+          roles
+        } = data
 
-  //       const { name, avatar } = data
+        // roles must be a non-empty array
+        // if (!roles || roles.length <= 0) {
+        //   reject('getInfo: roles must be a non-null array!')
+        // }
 
-  //       commit('SET_NAME', name)
-  //       commit('SET_AVATAR', avatar)
-  //       resolve(data)
-  //     }).catch(error => {
-  //       reject(error)
-  //     })
-  //   })
-  // },
+        localStorage.setItem('ws-pf_dutyId', dutyId || data.roles[0].dutyId)
+        localStorage.setItem('ws-pf_roleName', roleName || roles[0].roleName)
 
+        localStorage.setItem('ws-pf_staffName', staffName)
+        localStorage.setItem('ws-pf_deptId', deptId)
+        localStorage.setItem('ws-pf_deptName', deptName)
+        localStorage.setItem('ws-pf_deptNameEn', deptNameEn)
+        localStorage.setItem('ws-pf_vessels', JSON.stringify(vessels))
+        localStorage.setItem('ws-pf_roleId', roleId || roles[0].roleId)
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  getRoule({
+    commit,
+    state
+  }) {
+    return new Promise(async (resolve, reject) => {
+      try {
+        const data = await getRoule(state.roles)
+        data.forEach(route => {
+          asyncRoutes.push(route)
+        })
+        commit('SET_ROUTES', asyncRoutes)
+        resolve(asyncRoutes)
+      } catch (error) {
+        reject(error)
+      }
+    })
+  },
   // user logout
-  logout({ commit, state }) {
+  logout({
+    commit,
+    state
+  }) {
     return new Promise((resolve, reject) => {
       logout(state.token).then(() => {
         removeToken() // must remove  token  first
@@ -81,7 +153,9 @@ const actions = {
   },
 
   // remove token
-  resetToken({ commit }) {
+  resetToken({
+    commit
+  }) {
     return new Promise(resolve => {
       removeToken() // must remove  token  first
       commit('RESET_STATE')
@@ -96,4 +170,3 @@ export default {
   mutations,
   actions
 }
-

src/styles/sidebar.scss

@@ -96,7 +96,7 @@
     }
   }
   .el-submenu .el-menu-item span{
-	  margin-left: 30px;
+	  // margin-left: 30px;
   }
 
   .hideSidebar {

src/utils/validate.js

@@ -19,3 +19,29 @@ export function validUsername(str) {
   // return valid_map.indexOf(str.trim()) >= 0
   return str.length == 11
 }
+
+export function isNumber(str) {
+  const reg = /^[0-9]+$/;
+  return reg.test(str);
+}
+
+export function isEnglish(str) {
+  const reg = /^[a-zA-Z, ]+$/;
+  return reg.test(str);
+}
+
+export function validPassword(str) {
+  const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
+  return reg.test(str)
+}
+
+export function validEmail(email) {
+  const reg =
+    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  return reg.test(email)
+}
+// 纯11位手机号码
+export function mobilePhone(str) {
+  const reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
+  return reg.test(str)
+}

src/views/login/index.vue

@@ -1,235 +1,234 @@
 <template>
-	<div class="login-container">
-		<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
-			label-position="left">
-			<div class="title-container">
-				<h3 class="title">畅运通管理平台</h3>
-			</div>
-
-			<el-form-item prop="username">
-				<span class="svg-container">
-					<svg-icon icon-class="user" />
-				</span>
-				<el-input ref="username" v-model="loginForm.username" placeholder="请输入您的账号" name="username" type="text" maxlength="11"
-					tabindex="1" auto-complete="on" />
-			</el-form-item>
-
-			<el-form-item prop="password">
-				<span class="svg-container">
-					<svg-icon icon-class="password" />
-				</span>
-				<el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
-					placeholder="请输入登录密码" name="password" tabindex="2" auto-complete="on"
-					@keyup.enter.native="handleLogin" />
-				<span class="show-pwd" @click="showPwd">
-					<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-				</span>
-			</el-form-item>
-
-			<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
-				@click.native.prevent="handleLogin">进入</el-button>
-
-			<!-- <div class="tips">
+  <div class="login-container">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
+      label-position="left">
+      <div class="title-container">
+        <h3 class="title">畅运通管理平台</h3>
+      </div>
+
+      <el-form-item prop="username">
+        <span class="svg-container">
+          <svg-icon icon-class="user" />
+        </span>
+        <el-input ref="username" v-model="loginForm.username" placeholder="请输入您的账号" name="username" type="text"
+          maxlength="11" tabindex="1" auto-complete="on" />
+      </el-form-item>
+
+      <el-form-item prop="password">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
+          placeholder="请输入登录密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
+        <span class="show-pwd" @click="showPwd">
+          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+        </span>
+      </el-form-item>
+
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
+        @click.native.prevent="handleLogin">进入</el-button>
+
+      <!-- <div class="tips">
         <span style="margin-right:20px;">username: admin</span>
         <span>password: any</span>
       </div> -->
-		</el-form>
-	</div>
+    </el-form>
+  </div>
 </template>
 
 <script>
-	import {
-		validUsername
-	} from '@/utils/validate'
-
-	export default {
-		name: 'Login',
-		data() {
-			const validateUsername = (rule, value, callback) => {
-				if (!validUsername(value)) {
-					callback(new Error('请输入正确的账号'))
-				} else {
-					callback()
-				}
-			}
-			const validatePassword = (rule, value, callback) => {
-				if (value.length < 6) {
-					callback(new Error('请输入正确的密码'))
-				} else {
-					callback()
-				}
-			}
-			return {
-				loginForm: {},
-				loginRules: {
-					username: [{
-						required: true,
-						trigger: 'blur',
-						validator: validateUsername
-					}],
-					password: [{
-						required: true,
-						trigger: 'blur',
-						validator: validatePassword
-					}]
-				},
-				loading: false,
-				passwordType: 'password',
-				redirect: undefined
-			}
-		},
-		watch: {
-			$route: {
-				handler: function(route) {
-					this.redirect = route.query && route.query.redirect
-				},
-				immediate: true
-			}
-		},
-		methods: {
-			showPwd() {
-				if (this.passwordType === 'password') {
-					this.passwordType = ''
-				} else {
-					this.passwordType = 'password'
-				}
-				this.$nextTick(() => {
-					this.$refs.password.focus()
-				})
-			},
-			handleLogin() {
-				this.$refs.loginForm.validate(valid => {
-					if (valid) {
-						this.loginForm.companyName = '黑龙江中天昊元贸易有限公司'
-						this.loading = true
-						this.$store.dispatch('user/login', this.loginForm)
-							.then(response => {
-								localStorage.setItem('UserInfo', JSON.stringify(response.data))
-								this.$router.push({
-									path: this.redirect || '/'
-								})
-								this.loading = false
-							})
-							.catch(() => {
-								this.loading = false
-							})
-					} else {
-						console.log('error submit!!')
-						return false
-					}
-				})
-			}
-		}
-	}
+  import {
+    validUsername
+  } from '@/utils/validate'
+
+  export default {
+    name: 'Login',
+    data() {
+      const validateUsername = (rule, value, callback) => {
+        if (!validUsername(value)) {
+          callback(new Error('请输入正确的账号'))
+        } else {
+          callback()
+        }
+      }
+      const validatePassword = (rule, value, callback) => {
+        if (value.length < 6) {
+          callback(new Error('请输入正确的密码'))
+        } else {
+          callback()
+        }
+      }
+      return {
+        loginForm: {},
+        loginRules: {
+          username: [{
+            required: true,
+            trigger: 'blur',
+            validator: validateUsername
+          }],
+          password: [{
+            required: true,
+            trigger: 'blur',
+            validator: validatePassword
+          }]
+        },
+        loading: false,
+        passwordType: 'password',
+        redirect: undefined
+      }
+    },
+    watch: {
+      $route: {
+        handler: function(route) {
+          this.redirect = route.query && route.query.redirect
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      showPwd() {
+        if (this.passwordType === 'password') {
+          this.passwordType = ''
+        } else {
+          this.passwordType = 'password'
+        }
+        this.$nextTick(() => {
+          this.$refs.password.focus()
+        })
+      },
+      handleLogin() {
+        this.$refs.loginForm.validate(valid => {
+          if (valid) {
+            this.loginForm.companyName = '黑龙江中天昊元贸易有限公司'
+            this.loading = true
+            this.$store.dispatch('user/login', this.loginForm)
+              .then(response => {
+                localStorage.setItem('UserInfo', JSON.stringify(response.data))
+                this.$router.push({
+                  path: this.redirect || '/'
+                })
+                this.loading = false
+              })
+              .catch(() => {
+                this.loading = false
+              })
+          } else {
+            console.log('error submit!!')
+            return false
+          }
+        })
+      }
+    }
+  }
 </script>
 
 <style lang="scss">
-	/* 修复input 背景不协调 和光标变色 */
-	/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
-
-	$bg: #283443;
-	$light_gray: #fff;
-	$cursor: #fff;
-
-	@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
-		.login-container .el-input input {
-			color: $cursor;
-		}
-	}
-
-	/* reset element-ui css */
-	.login-container {
-		.el-input {
-			display: inline-block;
-			height: 47px;
-			width: 85%;
-
-			input {
-				background: transparent;
-				border: 0px;
-				-webkit-appearance: none;
-				border-radius: 0px;
-				padding: 12px 5px 12px 15px;
-				color: $light_gray;
-				height: 47px;
-				caret-color: $cursor;
-
-				&:-webkit-autofill {
-					box-shadow: 0 0 0px 1000px $bg inset !important;
-					-webkit-text-fill-color: $cursor !important;
-				}
-			}
-		}
-
-		.el-form-item {
-			border: 1px solid rgba(255, 255, 255, 0.1);
-			background: rgba(0, 0, 0, 0.1);
-			border-radius: 5px;
-			color: #454545;
-		}
-	}
+  /* 修复input 背景不协调 和光标变色 */
+  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+  $bg: #283443;
+  $light_gray: #fff;
+  $cursor: #fff;
+
+  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+    .login-container .el-input input {
+      color: $cursor;
+    }
+  }
+
+  /* reset element-ui css */
+  .login-container {
+    .el-input {
+      display: inline-block;
+      height: 47px;
+      width: 85%;
+
+      input {
+        background: transparent;
+        border: 0px;
+        -webkit-appearance: none;
+        border-radius: 0px;
+        padding: 12px 5px 12px 15px;
+        color: $light_gray;
+        height: 47px;
+        caret-color: $cursor;
+
+        &:-webkit-autofill {
+          box-shadow: 0 0 0px 1000px $bg inset !important;
+          -webkit-text-fill-color: $cursor !important;
+        }
+      }
+    }
+
+    .el-form-item {
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 5px;
+      color: #454545;
+    }
+  }
 </style>
 
 <style lang="scss" scoped>
-	$bg: #2d3a4b;
-	$dark_gray: #889aa4;
-	$light_gray: #eee;
-
-	.login-container {
-		min-height: 100%;
-		width: 100%;
-		background-color: $bg;
-		overflow: hidden;
-
-		.login-form {
-			position: relative;
-			width: 520px;
-			max-width: 100%;
-			padding: 160px 35px 0;
-			margin: 0 auto;
-			overflow: hidden;
-		}
-
-		.tips {
-			font-size: 14px;
-			color: #fff;
-			margin-bottom: 10px;
-
-			span {
-				&:first-of-type {
-					margin-right: 16px;
-				}
-			}
-		}
-
-		.svg-container {
-			padding: 6px 5px 6px 15px;
-			color: $dark_gray;
-			vertical-align: middle;
-			width: 30px;
-			display: inline-block;
-		}
-
-		.title-container {
-			position: relative;
-
-			.title {
-				font-size: 26px;
-				color: $light_gray;
-				margin: 0px auto 40px auto;
-				text-align: center;
-				font-weight: bold;
-			}
-		}
-
-		.show-pwd {
-			position: absolute;
-			right: 10px;
-			top: 7px;
-			font-size: 16px;
-			color: $dark_gray;
-			cursor: pointer;
-			user-select: none;
-		}
-	}
+  $bg: #2d3a4b;
+  $dark_gray: #889aa4;
+  $light_gray: #eee;
+
+  .login-container {
+    min-height: 100%;
+    width: 100%;
+    background-color: $bg;
+    overflow: hidden;
+
+    .login-form {
+      position: relative;
+      width: 520px;
+      max-width: 100%;
+      padding: 160px 35px 0;
+      margin: 0 auto;
+      overflow: hidden;
+    }
+
+    .tips {
+      font-size: 14px;
+      color: #fff;
+      margin-bottom: 10px;
+
+      span {
+        &:first-of-type {
+          margin-right: 16px;
+        }
+      }
+    }
+
+    .svg-container {
+      padding: 6px 5px 6px 15px;
+      color: $dark_gray;
+      vertical-align: middle;
+      width: 30px;
+      display: inline-block;
+    }
+
+    .title-container {
+      position: relative;
+
+      .title {
+        font-size: 26px;
+        color: $light_gray;
+        margin: 0px auto 40px auto;
+        text-align: center;
+        font-weight: bold;
+      }
+    }
+
+    .show-pwd {
+      position: absolute;
+      right: 10px;
+      top: 7px;
+      font-size: 16px;
+      color: $dark_gray;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
 </style>

src/views/operationLog/logManagement.vue

@@ -189,7 +189,7 @@
           let fileName = headers["content-disposition"];
           fileName = fileName.split('=')[1]
           //download是a标签的一个属性，可以自定义文件名称
-          a.download = fileName;
+          a.download = "日志记录.xlsx";
           let binaryData = [];
           binaryData.push(blob);
           // a.href = URL.createObjectURL(blob);

src/views/parkReportManagement/dailyReport.vue

@@ -1,4 +1,4 @@
-// 规定记录审核
+// 流水单上报
 <template>
   <div class="center">
     <div class="center_css">
@@ -43,8 +43,8 @@
           </el-col>
         </el-row>
       </div>
-      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border
-        highlight-current-row>
+      <el-table @selection-change="handleSelectionChange" :data="tableData"
+        style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border highlight-current-row>
         <el-table-column type="selection" width="55" :selectable="selectInit">
         </el-table-column>
         <el-table-column type="index" label="序号" width="50">
@@ -59,16 +59,14 @@
         <el-table-column prop="updateDate" label="流水号" />
         <el-table-column prop="updateDate" label="金额(元)" />
         <el-table-column prop="updateDate" label="类型" />
-        <!-- <el-table-column label="上传" prop="submitter" /> -->
-        <!-- <el-table-column prop="versionDescription" label="版本说明" /> -->
         <el-table-column prop="status" label="状态" />
         <el-table-column prop="updateDate" label="付款时间" />
         <el-table-column label="操作" min-width="200">
           <template slot-scope="scope">
             <el-link target="_blank" @click="look(scope.row)" type="primary" :underline="false">查看</el-link>
             <el-divider direction="vertical" />
-            <el-link target="_blank" type="primary" :underline="false" @click="submission(scope.row)" 
-            v-if="scope.row.search == 1 || scope.row.search == 4 || scope.row.status == '暂缓中'" >上报</el-link>
+            <el-link target="_blank" type="primary" :underline="false" @click="submission(scope.row)"
+              v-if="scope.row.search == 1 || scope.row.search == 4 || scope.row.status == '暂缓中'">上报</el-link>
           </template>
         </el-table-column>
       </el-table>
@@ -76,7 +74,7 @@
     <el-pagination :current-page="currentPage" style="text-align: center; margin-top: 10px"
       :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal"
       @size-change="handleSizeChange" @current-change="handleCurrentChange" />
-      
+
     <el-drawer title="运单信息" :visible.sync="rightSee" style="overflow-y: auto !important">
       <div class="right_css">
         <div class="right_item">订单编号：{{ orderData.compilationUnit }}</div>
@@ -100,11 +98,15 @@
         <div class="right_item">{{ orderData.compilationUnit }}</div>
         <div class="right_title">发货地址</div>
         <div class="right_item">
-          {{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}
+          {{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{
+              orderData.compilationUnit
+          }}
         </div>
         <div class="right_title">收货地址</div>
         <div class="right_item">
-          {{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}
+          {{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{
+              orderData.compilationUnit
+          }}
         </div>
         <div class="right_title">司机姓名</div>
         <div class="right_item">{{ orderData.compilationUnit }}</div>
@@ -116,7 +118,7 @@
         <div class="right_item">{{ orderData.compilationUnit }}</div>
         <div class="right_title">重量(kg)</div>
         <div class="right_item">{{ orderData.compilationUnit }}</div>
-        
+
         <!-- <div class="right_title">发货联系人</div>
         <div class="right_item">{{ orderData.compilationUnit }}</div>
         <div class="right_title">发货联系人电话</div>
@@ -201,6 +203,7 @@ import {
 export default {
   data() {
     return {
+      show : false,
       tableData: [],
       // 分页
       searchkeyWord: '',
@@ -209,11 +212,12 @@ export default {
       deptBudgetTotal: 0,
       deptCircularPage: {},
       search: '',
+      modification: [],
       orderData: {
 
       },
       value1: '',
-      status:'',
+      status: '',
       addressUrl: [],
       disabled: false,
       rejectInfo: false,
@@ -240,21 +244,111 @@ export default {
       this.endDate = e[1]
       this.getList()
     },
+    selectInit(row) {
+        if (row.status == '审核中' || row.status == '已通过') {
+          return false
+        } 
+        else {
+          return true
+        }
+    },
+    handleSelectionChange(val) {
+      this.modification = val;
+    },
     //暂缓上报
     postponeSubmission() {
-
+      if (this.modification.length > 0) {
+        this.$confirm('确定暂缓上报选中的条目？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            this.listLoading = true
+              // var _del = {}
+              // _del.id = row.id
+              // delFormData(_del)
+              .then(response => {
+                this.$notify({
+                  title: '成功',
+                  message: '操作成功！',
+                  type: 'success'
+                })
+                this.getList()
+                this.listLoading = false
+              })
+              .catch(() => {
+                this.loading = false
+              })
+          })
+      } else {
+        this.$notify({
+          title: '操作失败',
+          message: '至少选中一条可上报的条目！',
+          type: 'error'
+        })
+      }
     },
     //批量上报
     batchSubmission() {
-
+      if (this.modification.length > 0) {
+        this.$confirm('确定批量上报流水单信息？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            this.listLoading = true
+              // var _del = {}
+              // _del.id = row.id
+              // delFormData(_del)
+              .then(response => {
+                this.$notify({
+                  title: '成功',
+                  message: '上报成功！',
+                  type: 'success'
+                })
+                this.getList()
+                this.listLoading = false
+              })
+              .catch(() => {
+                this.loading = false
+              })
+          })
+      } else {
+        this.$notify({
+          title: '上报失败',
+          message: '至少选中一条可上报的条目！',
+          type: 'error'
+        })
+      }
     },
     //上报
     submission() {
-
+      this.$confirm('确定上报运单信息？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.listLoading = true
+            // var _del = {}
+            // _del.id = row.id
+            // delFormData(_del)
+            .then(response => {
+              this.$notify({
+                title: '成功',
+                message: '上报成功！',
+                type: 'success'
+              })
+              this.getList()
+              this.listLoading = false
+            })
+            .catch(() => {
+              this.loading = false
+            })
+        })
     },
-      selectInit() {
-        return true;
-      },
     getList() {
       this.loading = true
       const _obj = {}
@@ -303,21 +397,6 @@ export default {
     //         })
     //     })
     // },
-    // submitInfo() {
-    //   this.listLoading = true
-    //   postNews(this.Info).then(response => {
-    //     this.$notify({
-    //       title: '成功',
-    //       message: '发送成功！',
-    //       type: 'success'
-    //     })
-    //     this.sendInfoClose()
-    //     this.listLoading = false
-    //   })
-    //     .catch(() => {
-    //       this.loading = false
-    //     })
-    // },
     find() {
       this.getList()
     },
@@ -631,48 +710,51 @@ export default {
     margin: 0 auto;
   }
 }
-  .right_css {
-    // overflow-y: auto !important;
-    min-height: 1266px;
-    padding: 0 20px;
 
-    .right_title {
-      color: #9D9D9D;
-      font-size: 14px;
-      margin-bottom: 4px;
-    }
+.right_css {
+  // overflow-y: auto !important;
+  min-height: 1266px;
+  padding: 0 20px;
 
-    .title_name {
-      margin-bottom: 10px;
-    }
+  .right_title {
+    color: #9D9D9D;
+    font-size: 14px;
+    margin-bottom: 4px;
+  }
 
-    .right_item {
-      color: #0D0D0D;
-      font-size: 14px;
-      margin-bottom: 10px;
-    }
+  .title_name {
+    margin-bottom: 10px;
+  }
 
-    .right_btn {
-      text-align: center;
-      margin: 10px 0;
-    }
+  .right_item {
+    color: #0D0D0D;
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
 
-    .img_css {
-      width: 100px;
-      height: 80px;
-      margin-right: 5px;
-    }
+  .right_btn {
+    text-align: center;
+    margin: 10px 0;
+  }
 
-    .right_img {
-      width: 200px;
-      height: 120px;
-      margin-top: 10px;
-    }
+  .img_css {
+    width: 100px;
+    height: 80px;
+    margin-right: 5px;
   }
+
+  .right_img {
+    width: 200px;
+    height: 120px;
+    margin-top: 10px;
+  }
+}
+
 .find::v-deep input.el-input__inner {
   border-radius: 0;
 }
-::v-deep .el-drawer.rtl{
+
+::v-deep .el-drawer.rtl {
   overflow: auto;
 }
 </style>

src/views/parkReportManagement/driverInformationReporting.vue

@@ -276,7 +276,7 @@
           this.$message.error("请勾选要上报的条目")
           return
         }
-          this.$confirm("确定上报信息？", "提示", {
+          this.$confirm("确定上报司机信息？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
@@ -286,7 +286,7 @@
              if (response.code == 200) {
               this.$notify({
                 title: "成功",
-                message: "上报成功！",
+                message: "司机信息上报成功！",
                 type: "success",
               });
               this.musterList = []
@@ -408,13 +408,11 @@
         this.getList();
       },
       selectInit(row) {
-        // if (row.escalationStatus != '未上报'|| row.escalationStatus != '未通过') {  
-        //   return false;
-        // }else{
-        //   return true;
-        // }
+        if (row.escalationStatus != '未上报'&& row.escalationStatus != '未通过') {  
+          return false;
+        }else{
           return true;
-        
+        }
       },
       handleSizeChange(val) {
         console.log(`每页 ${val} 条`);

src/views/parkReportManagement/vehicleInformationReporting.vue

@@ -55,25 +55,27 @@
           </template>
         </el-table-column>
         <el-table-column prop="driverName" label="司机姓名"></el-table-column>
-        <el-table-column prop="driverPhone" label="账号"></el-table-column>
-        <el-table-column prop="driverLicenseValidityStartDate" label="驾驶证有效期">
+        <el-table-column prop="accountNumber" label="账号"></el-table-column>
+        <el-table-column prop="carNumber" label="牵引车车牌号"></el-table-column>
+        <el-table-column prop="guaCarNumber" label="挂车车牌号"></el-table-column>
+        <el-table-column prop="drivingLicenseValidityDate" label="行驶证有效期">
           <template slot-scope="scope">
-            <span :class="scope.row.driverOverdueFlag == 1?'red_text':''">{{scope.row.driverLicenseValidityStartDate}}</span>
+            <span :class="scope.row.drivingOverdueFlag == 1?'red_text':''">{{scope.row.drivingLicenseValidityDate}}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="qualificationCertificateValidityDate" label="从业资格证有效期">
+        <el-table-column prop="trailerLicenseValidityDate" label="挂车行驶证有效期">
            <template slot-scope="scope">
-            <span :class="scope.row.qualificationOverdueFlag == 1?'red_text':''">{{scope.row.qualificationCertificateValidityDate}}</span>
+            <span :class="scope.row.trailerOverdueFlag == 1?'red_text':''">{{scope.row.trailerLicenseValidityDate}}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="cardValidityDate" label="身份证有效期">
-             <template slot-scope="scope">
-            <span :class="scope.row.overdueFlag == 1?'red_text':''">{{scope.row.cardValidityDate}}</span>
+        <el-table-column prop="operationCertificateValidityDate" label="道路运输证有效期">
+          <template slot-scope="scope">
+            <span :class="scope.row.operationOverdueFlag == 1?'red_text':''">{{scope.row.operationCertificateValidityDate}}</span>
           </template>
         </el-table-column>
         <el-table-column prop="updateDate" label="上报时间">
           <template slot-scope="scope">
-            <span v-if="scope.row.escalationStatus != '未认证' && scope.row.escalationStatus != '待上报'">{{scope.row.updateDate}}</span><!-- 未认证和待上报不显示时间 -->
+            <span v-if="scope.row.escalationStatus&&scope.row.escalationStatus != '未认证' && scope.row.escalationStatus != '待上报'">{{scope.row.updateDate}}</span><!-- 未认证和待上报不显示时间 -->
           </template>
         </el-table-column>
         <el-table-column prop="paymentDate" label="附件">
@@ -89,10 +91,14 @@
                 scope.row.trailerOperationOverdueFlag == 1
               ">
               <div slot="content">
-                <span v-if="scope.row.overdueFlag == 1">身份证已过有效期<br /></span>
-                <span v-if="scope.row.driverOverdueFlag == 1">驾驶证已过有效期<br /></span><span
-                  v-if="scope.row.qualificationOverdueFlag == 1">从业资格证已过有效期<br /></span>
-              </div>
+                  <!-- <span v-if="scope.row.overdueFlag == 1">身份证已过有效期<br /></span> -->
+                  <!-- <span v-if="scope.row.driverOverdueFlag == 1">驾驶证已过有效期<br /></span> -->
+                  <span v-if="scope.row.drivingOverdueFlag == 1">行驶证已过有效期<br /></span>
+                  <span v-if="scope.row.trailerOverdueFlag == 1">挂车行驶证已过有效期<br /></span>
+                  <span v-if="scope.row.operationOverdueFlag == 1">运营证已过有效期<br /></span>
+                  <span v-if="scope.row.operationOverdueFlag == 1">道路运输证已过有效期<br /></span>
+                  <span v-if="scope.row.trailerOperationOverdueFlag == 1">挂车道路运输证已过有效期<br /></span>
+                </div>
               <span style="margin-top: 10px"></span>
               <img src="../../../public/img/wenhao.png" alt="" class="ask_css" />
             </el-tooltip>
@@ -129,19 +135,19 @@
       :before-close="fujianClose">
       <div class="file">
         <div class="fujian_css">
-          <div class="fujian_item" :class="count == 1 ? 'file_btn' : ''" @click="btnChange(1)">
+          <!-- <div class="fujian_item" :class="count == 1 ? 'file_btn' : ''" @click="btnChange(1)">
             身份证
-          </div>
-          <div class="fujian_item" :class="count == 2 ? 'file_btn' : ''" @click="btnChange(2)">
+          </div> -->
+          <!-- <div class="fujian_item" :class="count == 2 ? 'file_btn' : ''" @click="btnChange(2)">
             驾驶证
-          </div>
-          <!-- <div class="fujian_item" :class="count == 3 ? 'file_btn' : ''" @click="btnChange(3)">
-            行驶证
           </div> -->
-          <div class="fujian_item" :class="count == 4 ? 'file_btn' : ''" @click="btnChange(4)">
-            从业资格证
+          <div class="fujian_item" :class="count == 3 ? 'file_btn' : ''" @click="btnChange(3)">
+            行驶证
           </div>
-          <!-- <div class="fujian_item" :class="count == 5 ? 'file_btn' : ''" @click="btnChange(5)">
+          <!-- <div class="fujian_item" :class="count == 4 ? 'file_btn' : ''" @click="btnChange(4)">
+            从业资格证
+          </div> -->
+          <div class="fujian_item" :class="count == 5 ? 'file_btn' : ''" @click="btnChange(5)">
             挂车行驶证
           </div>
           <div class="fujian_item" :class="count == 6 ? 'file_btn' : ''" @click="btnChange(6)">
@@ -149,7 +155,7 @@
           </div>
           <div class="fujian_item" :class="count == 7 ? 'file_btn' : ''" @click="btnChange(7)">
             挂车运营证
-          </div> -->
+          </div>
         </div>
         <div class="file_tips">
           <span v-if="count == 1">有效期：{{file.cardValidityDate}} </span><span v-if="count == 2">
@@ -170,35 +176,45 @@
     <el-drawer title="司机信息" :visible.sync="rightSee" style="overflow-y: auto !important">
       <div class="right_css">
         <div class="title_name">基本信息</div>
-        <div class="right_item">姓名：{{costData.driverName}}</div>
-        <div class="right_title">性别</div>
-        <div class="right_item">{{costData.driverSex}} </div>
-         <div class="right_title">手机号码</div>
-        <div class="right_item">{{costData.driverPhone}} </div>
-         <div class="right_title">身份证照片(人像面)</div>
-        <img :src="costData.cardAddressUrl" alt="" class="img_css" @click="enlarge(costData.cardAddressUrl)">
-        <div class="right_title">身份证照片(国徽面)</div>
-         <img :src="costData.cardBackAddressUrl" alt="" class="img_css"  @click="enlarge(costData.cardBackAddressUrl)">
-        <div class="right_title">身份证号：</div>
-        <div class="right_item">{{costData.numberCard}}</div>
-        <div class="right_title">身份证有效期</div>
-        <div class="right_item">{{costData.cardValidityDate}} </div>
-         <div class="right_title">驾驶证照片(正页)</div>
-        <img :src="costData.driverLicenseHomePage" alt="" class="img_css" @click="enlarge(costData.driverLicenseHomePage)">
-        <div class="right_title">驾驶证照片(副页)</div>
-        <img :src="costData.driverLicenseBackPage" alt="" class="img_css" @click="enlarge(costData.driverLicenseBackPage)">
-        <div class="right_title">准驾车型</div>
-        <div class="right_item">{{costData.quasiDrivingVehicle}}</div>
-        <div class="right_title">驾驶证发证机关</div>
-        <div class="right_item">{{costData.lssuingAuthority}}</div>
-        <div class="right_title">驾驶证有效期</div>
-        <div class="right_item">{{costData.driverLicenseValidityDate}}</div>
-        <div class="right_title">道路运输从业资格证照片</div>
-        <img :src="costData.qualificationCertificate" alt="" class="img_css" @click="enlarge(costData.qualificationCertificate)">
-        <div class="right_title">从业资格证有效期</div>
-        <div class="right_item">{{costData.qualificationCertificateValidityDate}} </div>
-        <div class="right_title">从业资格证号</div>
-        <div class="right_item">{{costData.qualificationCertificateNumber}} </div>
+        <div class="right_item">车辆号{{costData.carNumber}}</div>
+        <div class="right_title">所有人</div>
+        <div class="right_item">{{costData.owner}} </div>
+         <div class="right_title">使用性质</div>
+        <div class="right_item">{{costData.useNature}} </div>
+         <!-- <div class="right_title">车辆识别代号</div>
+        <div class="right_item">{{costData.useNature}} </div> -->
+        <div class="right_title">发证机关</div>
+          <div class="right_item">{{costData.lssuingAuthority}} </div>
+        <div class="right_title">车长(毫米)</div>
+        <div class="right_item">{{costData.carLong}}</div>
+        <div class="right_title">车宽(毫米)</div>
+        <div class="right_item">{{costData.carWidth}} </div>
+         <div class="right_title">车高(毫米)</div>
+        <div class="right_item">{{costData.carHeight}} </div>
+        <div class="right_title">注册日期</div>
+      <div class="right_item">{{costData.trailerLicenseRegistrationDate}} </div>
+        <div class="right_title">发证日期</div>
+        <div class="right_item">{{costData.drivingLicenseIssueDate}}</div>
+        <div class="right_title">车辆能源类型</div>
+        <div class="right_item">{{costData.energyType}}</div>
+        <div class="right_title">核定载质量</div>
+        <div class="right_item">{{costData.carApprovedWeight}}</div>
+        <div class="right_title">总质量</div>
+        <div class="right_item">{{costData.servicingWeight}}</div>
+        <div class="right_title">道路运输证号</div>
+        <div class="right_item">{{costData.operationCertificateNumber}} </div>
+        <div class="right_title">行驶证有效期</div>
+        <div class="right_item">{{costData.drivingLicenseValidityDate}} </div>
+        <div class="right_title">行驶证照片（正页）</div>
+         <img :src="costData.drivingLicenseHomePage" alt="" class="img_css" @click="enlarge(costData.drivingLicenseHomePage)">
+        <div class="right_title">行驶证照片（副页）</div>
+         <img :src="costData.drivingLicenseBackPage" alt="" class="img_css" @click="enlarge(costData.drivingLicenseBackPage)">
+        <div class="right_title">道路运输证照片</div>
+         <img :src="costData.operationCertificate" alt="" class="img_css" @click="enlarge(costData.operationCertificate)">
+        <div class="right_title">挂车道路运输证照片</div>
+         <img :src="costData.trailerOperationCertificate" alt="" class="img_css" @click="enlarge(costData.trailerOperationCertificate)">
+        <div class="right_title">人车合影照片</div>
+         <img :src="costData.addressUrl" alt="" class="img_css" @click="enlarge(costData.addressUrl)">
       </div>
     </el-drawer>
     <el-image-viewer v-if="imgsVisible" :on-close="closeImgViewer" :url-list="srcList" style="z-index:9999" />
@@ -208,7 +224,7 @@
   import {
     carGetList,
     carReport,
-    getInfo
+    carGetInfo
   } from "@/api/parkReportManagement";
   export default {
     components: {
@@ -281,12 +297,12 @@
           cancelButtonText: "取消",
           type: "warning",
         }).then(() => {
-          carReport({hyDriverInfoList:this.musterList})
+          carReport({hyDriverCarInfoList:this.musterList})
           .then((response) => {
              if (response.code == 200) {
               this.$notify({
                 title: "成功",
-                message: "上报成功！",
+                message: "车辆上报成功！",
                 type: "success",
               });
               this.musterList = []
@@ -305,8 +321,8 @@
       see(row) { 
         this.loading = true
         this.rightSee = true
-        getInfo({
-            commonId: row.commonId
+        carGetInfo({
+            id: row.id
           }).then(response => {
             this.costData = response.data
             this.listLoading = false
@@ -408,13 +424,11 @@
         this.getList();
       },
       selectInit(row) {
-        // if (row.escalationStatus != '未上报'|| row.escalationStatus != '未通过') {  
-        //   return false;
-        // }else{
-        //   return true;
-        // }
+        if (row.escalationStatus != '未上报' && row.escalationStatus != '未通过') {  
+          return false;
+        }else{
           return true;
-        
+        }
       },
       handleSizeChange(val) {
         console.log(`每页 ${val} 条`);
@@ -548,7 +562,7 @@
   //附件
   .file {
     .fujian_css {
-      width: 270px;
+      width: 330px;
       display: flex;
       margin: 0 auto;
       text-align: center;

src/views/parkReportManagement/waybillReporting.vue

@@ -1,4 +1,4 @@
-// 规定记录审核
+// 运单上报
 <template>
   <div class="center">
     <div class="center_css">
@@ -43,8 +43,8 @@
           </el-col>
         </el-row>
       </div>
-      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border
-        highlight-current-row>
+      <el-table @selection-change="handleSelectionChange" :data="tableData"
+        style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border highlight-current-row>
         <el-table-column type="selection" width="55" :selectable="selectInit">
         </el-table-column>
         <el-table-column type="index" label="序号" width="50">
@@ -66,8 +66,8 @@
           <template slot-scope="scope">
             <el-link target="_blank" @click="look(scope.row)" type="primary" :underline="false">查看</el-link>
             <el-divider direction="vertical" />
-            <el-link target="_blank" type="primary" :underline="false" @click="submission(scope.row)" 
-            v-if="scope.row.search == 1 || scope.row.search == 4 || scope.row.status == '暂缓中'" >上报</el-link>
+            <el-link target="_blank" type="primary" :underline="false" @click="submission(scope.row)"
+              v-if="scope.row.search == 1 || scope.row.search == 4 || scope.row.status == '暂缓中'">上报</el-link>
           </template>
         </el-table-column>
       </el-table>
@@ -75,7 +75,7 @@
     <el-pagination :current-page="currentPage" style="text-align: center; margin-top: 10px"
       :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal"
       @size-change="handleSizeChange" @current-change="handleCurrentChange" />
-      
+
     <el-drawer title="运单信息" :visible.sync="rightSee" style="overflow-y: auto !important">
       <div class="right_css">
         <div class="right_item">订单编号：{{ orderData.compilationUnit }}</div>
@@ -99,11 +99,15 @@
         <div class="right_item">{{ orderData.compilationUnit }}</div>
         <div class="right_title">发货地址</div>
         <div class="right_item">
-          {{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}
+          {{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{
+              orderData.compilationUnit
+          }}
         </div>
         <div class="right_title">收货地址</div>
         <div class="right_item">
-          {{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}
+          {{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{
+              orderData.compilationUnit
+          }}
         </div>
         <div class="right_title">司机姓名</div>
         <div class="right_item">{{ orderData.compilationUnit }}</div>
@@ -115,7 +119,7 @@
         <div class="right_item">{{ orderData.compilationUnit }}</div>
         <div class="right_title">重量(kg)</div>
         <div class="right_item">{{ orderData.compilationUnit }}</div>
-        
+
         <!-- <div class="right_title">发货联系人</div>
         <div class="right_item">{{ orderData.compilationUnit }}</div>
         <div class="right_title">发货联系人电话</div>
@@ -208,11 +212,12 @@ export default {
       deptBudgetTotal: 0,
       deptCircularPage: {},
       search: '',
+      modification: [],
       orderData: {
 
       },
       value1: '',
-      status:'',
+      status: '',
       addressUrl: [],
       disabled: false,
       rejectInfo: false,
@@ -233,7 +238,9 @@ export default {
     //     path: 'specifiedRecordsAdd'
     //   })
     // },
-
+    handleSelectionChange(val) {
+      this.modification = val;
+    },
     dateChange(e) {
       this.startDate = e[0]
       this.endDate = e[1]
@@ -241,19 +248,105 @@ export default {
     },
     //暂缓上报
     postponeSubmission() {
-
+      if (this.modification.length > 0) {
+        this.$confirm('确定暂缓上报选中的条目？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            this.listLoading = true
+              // var _del = {}
+              // _del.id = row.id
+              // delFormData(_del)
+              .then(response => {
+                this.$notify({
+                  title: '成功',
+                  message: '操作成功！',
+                  type: 'success'
+                })
+                this.getList()
+                this.listLoading = false
+              })
+              .catch(() => {
+                this.loading = false
+              })
+          })
+      } else {
+        this.$notify({
+          title: '失败',
+          message: '至少选中一条可上报的条目！',
+          type: 'error'
+        })
+      }
     },
     //批量上报
     batchSubmission() {
-
+      if (this.modification.length > 0) {
+        this.$confirm('确定批量上报运单信息？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            this.listLoading = true
+              // var _del = {}
+              // _del.id = row.id
+              // delFormData(_del)
+              .then(response => {
+                this.$notify({
+                  title: '成功',
+                  message: '上报成功！',
+                  type: 'success'
+                })
+                this.getList()
+                this.listLoading = false
+              })
+              .catch(() => {
+                this.loading = false
+              })
+          })
+      } else {
+        this.$notify({
+          title: '上报失败',
+          message: '至少选中一条可上报的条目！',
+          type: 'error'
+        })
+      }
     },
     //上报
     submission() {
-
+      this.$confirm('确定上报运单信息？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.listLoading = true
+            // var _del = {}
+            // _del.id = row.id
+            // delFormData(_del)
+            .then(response => {
+              this.$notify({
+                title: '成功',
+                message: '上报成功！',
+                type: 'success'
+              })
+              this.getList()
+              this.listLoading = false
+            })
+            .catch(() => {
+              this.loading = false
+            })
+        })
+    },
+    selectInit(row) {
+       if (row.status == '审核中' || row.status == '已通过') {
+          return false
+        } else {
+          return true
+        }
     },
-      selectInit() {
-        return true;
-      },
     getList() {
       this.loading = true
       const _obj = {}
@@ -264,10 +357,6 @@ export default {
       getList(_obj).then(response => {
         this.tableData = response.data.records
         this.deptBudgetTotal = response.data.total
-        // if (this.tableData[0].status == '待审核' || this.tableData[0].status == '已驳回') {
-        //   // 最上面一条处于待审核和已驳回时新增按钮置灰不可用
-        //   this.disabled = true
-        // }
         this.listLoading = false
       })
         .catch(() => {
@@ -278,45 +367,6 @@ export default {
       this.search = num;
       this.getList();
     },
-    // del(row) {
-    //   this.$confirm('确定要删除该记录吗？', '提示', {
-    //     confirmButtonText: '确定',
-    //     cancelButtonText: '取消',
-    //     type: 'warning'
-    //   })
-    //     .then(() => {
-    //       this.listLoading = true
-    //       var _del = {}
-    //       _del.id = row.id
-    //       delFormData(_del).then(response => {
-    //         this.$notify({
-    //           title: '成功',
-    //           message: '删除成功！',
-    //           type: 'success'
-    //         })
-    //         this.getList()
-    //         this.listLoading = false
-    //       })
-    //         .catch(() => {
-    //           this.loading = false
-    //         })
-    //     })
-    // },
-    // submitInfo() {
-    //   this.listLoading = true
-    //   postNews(this.Info).then(response => {
-    //     this.$notify({
-    //       title: '成功',
-    //       message: '发送成功！',
-    //       type: 'success'
-    //     })
-    //     this.sendInfoClose()
-    //     this.listLoading = false
-    //   })
-    //     .catch(() => {
-    //       this.loading = false
-    //     })
-    // },
     find() {
       this.getList()
     },
@@ -630,48 +680,51 @@ export default {
     margin: 0 auto;
   }
 }
-  .right_css {
-    // overflow-y: auto !important;
-    min-height: 1266px;
-    padding: 0 20px;
 
-    .right_title {
-      color: #9D9D9D;
-      font-size: 14px;
-      margin-bottom: 4px;
-    }
+.right_css {
+  // overflow-y: auto !important;
+  min-height: 1266px;
+  padding: 0 20px;
 
-    .title_name {
-      margin-bottom: 10px;
-    }
+  .right_title {
+    color: #9D9D9D;
+    font-size: 14px;
+    margin-bottom: 4px;
+  }
 
-    .right_item {
-      color: #0D0D0D;
-      font-size: 14px;
-      margin-bottom: 10px;
-    }
+  .title_name {
+    margin-bottom: 10px;
+  }
 
-    .right_btn {
-      text-align: center;
-      margin: 10px 0;
-    }
+  .right_item {
+    color: #0D0D0D;
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
 
-    .img_css {
-      width: 100px;
-      height: 80px;
-      margin-right: 5px;
-    }
+  .right_btn {
+    text-align: center;
+    margin: 10px 0;
+  }
 
-    .right_img {
-      width: 200px;
-      height: 120px;
-      margin-top: 10px;
-    }
+  .img_css {
+    width: 100px;
+    height: 80px;
+    margin-right: 5px;
   }
+
+  .right_img {
+    width: 200px;
+    height: 120px;
+    margin-top: 10px;
+  }
+}
+
 .find::v-deep input.el-input__inner {
   border-radius: 0;
 }
-::v-deep .el-drawer.rtl{
+
+::v-deep .el-drawer.rtl {
   overflow: auto;
 }
 </style>

src/views/permissionSetting/permissionSetting.vue

@@ -0,0 +1,652 @@
+<template>
+  <div class="center">
+    <div class="center_css">
+      <div class="top_css">
+        <el-row>
+          <el-button type="primary" @click="addJump">新增角色</el-button>
+        </el-row>
+      </div>
+      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border
+        highlight-current-row>
+        <el-table-column prop="roleName" label="角色" min-width="110"></el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-link target="_blank" type="primary" @click="editInfo(scope.row)" :underline="false">编辑</el-link>
+            <el-divider direction="vertical"></el-divider>
+            <el-link target="_blank" type="primary" @click="setInfo(scope.row)" :underline="false">设置职责范围</el-link>
+
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
+      style="text-align: center; margin-top: 10px" :page-size="deptCircularPage.pageSize"
+      layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
+    </el-pagination>
+    <el-dialog :close-on-click-modal="false" title="角色管理" :visible.sync="sendInfo" width="400px"
+      :before-close="sendInfoClose">
+      <div class="Info_css">
+        <div class="Info_item">
+          <el-input placeholder="输入角色" v-model="Info.newsTitle"></el-input>
+        </div>
+        <div class="Info_btn">
+          <el-button @click="sendInfoClose">取消</el-button>
+          <el-button @click="submit" type="primary">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <el-dialog title="设置职责范围" :visible.sync="addRoleRanFlag" width="800px" center :close-on-click-modal="false">
+      <div class="two-form" v-if="!loadingRoleRan">
+        <el-menu v-if="addRoleRanFlag" class="el-menu-vertical-demo" ref="jobScopeMenu"
+          :default-openeds='defaultOpeneds'>
+          <el-submenu v-for="(item,val) in queryList" :key="val" :index="item.pluginId" class="one-menu">
+            <template slot="title">
+              <i class="el-icon-caret-right"></i>
+              <span>{{ item.pluginName }}</span>
+            </template>
+            <el-submenu v-for="service in item.activatedServices" :key="service.serviceId" :index="service.serviceId"
+              class="two-menu">
+              <template slot="title">
+                <i class="el-icon-caret-right-two-menu" />
+                <span @click.stop="allSelect(service)">
+                  <el-checkbox disabled v-if="service.featureCheckeds.length!==service.features.length"
+                    :indeterminate="service.featureCheckeds.length>0" :value="false"></el-checkbox>
+                  <el-checkbox disabled v-else :indeterminate="false" :value="true"></el-checkbox>
+                  {{ service.serviceName }}
+                </span>
+              </template>
+              <el-checkbox-group v-model="service.featureCheckeds">
+                <el-menu-item v-for="feature in service.features" :key="feature.featureId" :index="feature.featureId">
+                  <el-checkbox :label='feature.featureId'>{{ feature.featureName }}</el-checkbox>
+                </el-menu-item>
+              </el-checkbox-group>
+            </el-submenu>
+          </el-submenu>
+        </el-menu>
+      </div>
+      <div v-else v-loading="true"></div>
+      <span slot="footer" class="dialog-footer">
+        <el-button :disabled="queryList.length===0" type="primary" @click="saveRoleRan">保 存</el-button>
+        <el-button :disabled="queryList.length===0" @click="addRoleRanFlag=false">取 消</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+  import {
+    getList,
+    create,
+    changeInfo,
+    compAndChildrenInfo,
+    getDeptPageByCompId,
+    getRoleInfo,
+    getTenantlist,
+    bindResources
+  } from "@/api/permissionSettingManagement";
+  export default {
+    components: {
+      "el-image-viewer": () =>
+        import("element-ui/packages/image/src/image-viewer"),
+    },
+    data() {
+      return {
+        defaultOpeneds: [],
+        queryList: [],
+        loadingRoleRan: false,
+        addRoleRanFlag: false,
+        deptTitle: '',
+        tableData: [],
+        //分页
+        currentPage: 1,
+        pageSize: 10,
+        deptBudgetTotal: 0,
+        deptCircularPage: {},
+        userInfo: false,
+        rejectInfo: false,
+        sendInfo: false,
+        Info: {
+          newsTitle: ''
+        },
+        selectRow: {}
+      };
+    },
+    mounted() {
+      // this.getList();
+    },
+    async created() {
+      await this.initDict();
+    },
+    methods: {
+      async initDict() {
+        // 获取部门
+        const resp2 = await getDeptPageByCompId({
+          compId: localStorage.getItem("enterprise-front-companyId"),
+          vesselBankFlag: "V"
+        });
+        this.deptList = resp2.records;
+        await this.getList();
+        //       debugger
+        //       try {
+        //         this.loadingList = true;
+        //         // 获取公司
+        //         const resp = await compAndChildrenInfo();
+        //         resp[0].children.unshift({
+        //           compId: resp[0].compId,
+        //           compName: resp[0].compName
+        //         });
+        //         this.companyList = resp[0].children;
+
+        //       } catch (error) {
+        //         if (error.code && error.code !== "200") this.$message(error.message);
+        //       } finally {
+        //         this.loadingList = false;
+        //       }
+      },
+      // 鼠标移入获取当前行信息
+      enterMouse(row, column, cell, event) {
+        this.msgRow = row;
+      },
+      async showRoleRan(row) {
+        this.addRoleRanFlag = true;
+        try {
+          await this.initPluginDetails();
+          let resp = await getRoleInfo({
+            roleId: row.roleId
+          });
+          this.currRow = resp.data;
+          let _defaultOpeneds = [];
+          this.queryList.forEach(value => {
+            console.log(value)
+            value.activatedServices.forEach(value2 => {
+              const _featureCheckeds = [];
+              if (this.currRow.resources.length != 0) {
+                this.currRow.resources.forEach(value3 => {
+                  value2.features.forEach(value4 => {
+                    if (value4.featureId === value3.resourceId)
+                      _featureCheckeds.push(value3.resourceId);
+                  });
+                });
+              }
+
+              if (_featureCheckeds.length > 0) {
+                _defaultOpeneds.push(value2.serviceId);
+                _defaultOpeneds.push(value.pluginId);
+              }
+              this.$set(value2, "featureCheckeds", _featureCheckeds);
+            });
+          });
+          this.$set(this, "defaultOpeneds", _defaultOpeneds);
+          this.loadingRoleRan = false;
+        } catch (error) {
+          if (error.code && error.code !== "200") this.$message(error.message);
+        }
+      },
+      // 初始化插件树
+      async initPluginDetails() {
+        try {
+          this.loadingRoleRan = true;
+          if (this.queryList.length === 0) {
+            // 获取插件列表;
+            const resp4 = await getTenantlist({
+              tenantId: '3101066fa2ae4f5d9936d0016714c0dc'
+            });
+            resp4.data.forEach((value, index) => {
+              value.activatedServices.forEach((value2, index2) => {
+                value2.featureCheckeds = [];
+              });
+            });
+            this.$set(this, "queryList", resp4.data);
+            console.log('lsit', this.queryList)
+          }
+        } catch (error) {
+          if (error.code && error.code !== "200") this.$message(error.message);
+        }
+      },
+      submit() {
+        // if (!this.Info.newsTitle) {
+        //   this.$message.error("请输入标题");
+        //   return;
+        // }
+
+        if (this.deptTitle == '添加') {
+          let _obj = {
+            compId: "2710b21efc1e4393930c5dc800010dc4",
+            deptId: "3d7dbdc962ca4a96a48522c9ee528bc3",
+            roleName: this.Info.newsTitle,
+            underCompId: "2710b21efc1e4393930c5dc800010dc4",
+            underCompName: "黑龙江中天昊元贸易有限公司",
+            vesselBankFlag: "B"
+          }
+          create(_obj).then((response) => {
+              this.$notify({
+                title: "成功",
+                message: "添加成功！",
+                type: "success",
+              });
+              this.sendInfoClose();
+              this.listLoading = false;
+              this.getList()
+            })
+            .catch((error) => {
+              this.$notify({
+                title: "失败",
+                message: error,
+                type: "error",
+              });
+              this.sendInfoClose();
+            });
+        } else {
+          this.selectRow.roleName = this.Info.newsTitle
+          changeInfo(this.selectRow).then((response) => {
+              this.$notify({
+                title: "成功",
+                message: "编辑成功！",
+                type: "success",
+              });
+              this.sendInfoClose();
+              this.listLoading = false;
+              this.getList()
+            })
+            .catch((error) => {
+              this.$notify({
+                title: "失败",
+                message: error,
+                type: "error",
+              });
+              this.sendInfoClose();
+            });
+
+        }
+
+      },
+      sendInfoClose() {
+        this.sendInfo = false;
+      },
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+        this.pageSize = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.currentPage = val;
+        console.log(`当前页: ${val}`);
+        this.getList();
+      },
+      getList() {
+        let _data = {
+          compId: "2710b21efc1e4393930c5dc800010dc4",
+          pageSize: 10,
+          currentPage: 1,
+          vesselBankFlag: "B"
+        }
+        getList(_data)
+          .then((res) => {
+            this.tableData = res.data.records
+          })
+          .catch(() => {
+            this.loading = false;
+          });
+      },
+      addJump() {
+        this.deptTitle = "添加";
+        this.sendInfo = true
+      },
+      editInfo(val) {
+        this.deptTitle = "编辑";
+        this.Info.newsTitle = val.roleName
+        this.sendInfo = true
+        this.selectRow = val
+
+      },
+      setInfo(val) {
+        this.showRoleRan(val)
+      },
+      // 保存权限范围
+      async saveRoleRan(val) {
+        try {
+          console.log(this.currRow)
+          const roleId = this.currRow.roleId;
+          console.log(this.currRow)
+          const resources = [];
+          this.queryList.forEach((value, index) => {
+            console.log(value)
+            value.activatedServices.forEach((value2, index2) => {
+              value2.featureCheckeds.forEach((value3, index3) => {
+                resources.push({
+                  resourceId: value3
+                });
+              });
+            });
+          });
+          const data = {
+            roleId,
+            resources
+          };
+          await bindResources(data);
+          this.$message({
+            message: "保存成功!",
+            type: "success"
+          });
+          this.addRoleRanFlag = false;
+          this.getList();
+        } catch (error) {
+          if (error.code && error.code !== "200") this.$message(error.message);
+        }
+      },
+      allSelect(data) {
+        const sour = data.features;
+        const selected = data.featureCheckeds;
+        if (sour.length !== selected.length) {
+          const _selected = [];
+          sour.forEach((value, index) => {
+            _selected.push(value.featureId);
+          });
+          this.$set(data, "featureCheckeds", _selected);
+        } else {
+          this.$set(data, "featureCheckeds", []);
+        }
+      }
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  .el-menu-vertical-demo {
+    width: 100%;
+    border-width: 0px;
+
+    &>li {
+      background-color: #f6f6f6;
+      margin: 2px;
+
+      &>ul>li {
+        border-bottom: 1px dashed #cccccc;
+
+        &>ul li {
+          display: inline-block;
+          width: 20%;
+        }
+      }
+    }
+  }
+
+  .two-form {
+    max-height: 600px;
+    overflow: auto;
+  }
+
+  // /deep/.el-checkbox__input.is-disabled .el-checkbox__inner {
+  //   cursor: auto !important;
+  //   background-color: #fff;
+  // }
+
+  // /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
+  // /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  //   background-color: #1d6ced !important;
+  //   border-color: #1d6ced !important;
+  // }
+
+  // /deep/.el-submenu__title {
+  //   height: 40px;
+  //   line-height: 40px;
+  // }
+
+  .el-checkbox {
+    margin-right: 10px;
+  }
+
+  .one-menu {
+    .el-submenu__title {
+      background-color: #f6f6f6;
+    }
+  }
+
+  .two-menu {
+    .el-menu {
+      border-bottom: 1px dashed #ccc;
+
+      .el-menu-item {
+        .el-checkbox {
+          width: 23%;
+        }
+      }
+    }
+
+    .el-submenu__title {
+      border-bottom: 1px dashed #ccc;
+      background-color: #fff;
+    }
+  }
+
+  .one-menu.is-opened .el-icon-caret-right {
+    -webkit-transform: rotateZ(90deg);
+    -moz-transform: rotateZ(90deg);
+    -o-transform: rotateZ(90deg);
+    -ms-transform: rotateZ(90deg);
+    transform: rotateZ(90deg);
+  }
+
+  .el-icon-caret-right-two-menu:before {
+    // content: "\E60E";
+    content: "\E791";
+  }
+
+  .two-menu.is-opened .el-icon-caret-right-two-menu {
+    -webkit-transform: rotateZ(90deg);
+    -moz-transform: rotateZ(90deg);
+    -o-transform: rotateZ(90deg);
+    -ms-transform: rotateZ(90deg);
+    transform: rotateZ(90deg);
+  }
+
+  .select-all {
+    color: blue;
+    display: inline-block;
+    font-size: 12px;
+    margin-left: 10px;
+  }
+
+  .center {
+    padding: 10px 20px;
+    background: #f5f6f7;
+    height: calc(100vh - 5vh);
+
+    .top_css {
+      padding: 10px;
+
+      .search_btn {
+        height: 80px;
+        background: linear-gradient(#fafbfb, #ffffff);
+        display: flex;
+        margin-top: 20px;
+
+        .search_block {
+          margin-left: 20px;
+        }
+
+        .search_item {
+          text-align: center;
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 40px;
+          width: 112px;
+          height: 40px;
+          background: #f7f8f9;
+          cursor: pointer;
+          margin-top: 30px;
+        }
+
+        .searchNo {
+          color: #323233;
+        }
+
+        .search {
+          color: #2f53eb;
+          background: #ffffff;
+        }
+      }
+    }
+
+    .center_css {
+      background: #ffffff;
+      border-radius: 1px;
+      margin-top: 10px;
+      padding-bottom: 10px;
+    }
+
+    .screen {
+      display: flex;
+
+      .search {
+        width: 40px;
+        height: 40px;
+        background: #2f53eb;
+        border-radius: 0px 2px 2px 0px;
+        border: 1px solid #DCDFE6;
+        margin-left: -1px;
+      }
+
+      .count_css {
+        width: 80px;
+        text-align: center;
+        line-height: 40px;
+        color: #666666;
+      }
+    }
+
+    .el-button {
+      padding: 10px 20px !important;
+    }
+
+    .center_css {
+
+      ::v-deep .el-table th,
+      ::v-deep .el-table td {
+        text-align: center;
+      }
+
+      .fujian {
+        font-size: 24px;
+        color: #409eff;
+      }
+
+      .warning {
+        font-size: 14px;
+        color: #ed1d1d;
+      }
+    }
+  }
+
+  .car_css {
+    width: 50%;
+    display: inline-block;
+    text-align: center;
+    margin-top: 20px;
+  }
+
+  .car_item {
+    width: 100px;
+    height: 100px;
+  }
+
+  .user {
+    margin-bottom: 20px;
+
+    .title_css {
+      color: #9d9d9d;
+      margin-bottom: 6px;
+    }
+
+    .name_css {
+      color: #0d0d0d;
+      margin-bottom: 20px;
+    }
+
+    .form_btn {
+      text-align: right;
+    }
+
+    .user_item {
+      width: 380px;
+      height: 250px;
+      margin-bottom: 20px;
+    }
+  }
+
+  ::v-deep .el-table--border .el-table__header th {
+    background: #f7f8f9;
+  }
+
+  .btn_css {
+    color: #409eff;
+    cursor: pointer;
+  }
+
+  .sign {
+    font-size: 14px;
+    color: red;
+  }
+
+  .form_css {
+    width: 100%;
+    margin: 0 auto 20px;
+
+    ::v-deep .el-checkbox {
+      width: 40%;
+      height: 30px;
+    }
+
+    ::v-deep .el-dialog__body {
+      padding: 10px 20px;
+    }
+
+    ::v-deep .el-dialog__title {
+      font-size: 16px;
+    }
+
+    // ::v-deep .el-textarea__inner {
+    //   background: #F0F1F2;
+    // }
+
+    .form_btn {
+      text-align: right;
+      margin-top: 10px;
+    }
+  }
+
+  //发送信息
+  .Info_css {
+    .Info_title {
+      color: #323233;
+      font-size: 16px;
+    }
+
+    .Info_item {
+      margin: 20px 0;
+    }
+
+    .Info_btn {
+      text-align: right;
+      margin-top: 10px;
+    }
+  }
+
+  .advancePayment-style {
+    display: flex;
+  }
+
+  ::v-deep .advancePayment-style .el-input__inner {
+    height: 30px;
+  }
+
+  .pay {
+    .pay_css {
+      display: flex;
+      margin-bottom: 20px;
+    }
+  }
+
+  .find::v-deep input.el-input__inner {
+    border-radius: 0;
+  }
+</style>

src/views/permissionSetting/permissionSettingPerson.vue

@@ -0,0 +1,1024 @@
+<template>
+  <div class="center">
+    <div class="center_css">
+      <div class="top_css">
+        <el-row>
+          <el-button type="primary" @click="addman">添加成员</el-button>
+        </el-row>
+      </div>
+      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border
+        highlight-current-row>
+        <el-table-column prop="staffName" label="中文名">
+          <template slot-scope="scope">
+            {{scope.row.staffName | empty }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="majorRole.roleName" label="角色" min-width="110"></el-table-column>
+        <el-table-column prop="staffMobilePhone" label="手机号" />
+        <el-table-column prop="staffAccount" label="账号ID" />
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-link target="_blank" type="primary" @click="edit(scope.row)" :underline="false">编辑</el-link>
+            <el-divider direction="vertical"></el-divider>
+            <el-link target="_blank" type="primary" @click="setInfo(scope.row)" :underline="false">删除</el-link>
+
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
+      style="text-align: center; margin-top: 10px" :page-size="deptCircularPage.pageSize"
+      layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
+    </el-pagination>
+    <el-dialog :title="dialogTitle" :visible.sync="addRoleRanFlag" center :close-on-click-modal="false">
+      <div class="main-list">
+        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm" label-position="left"
+          label-width="80px">
+          <el-form-item label=" 中文名" prop="staffName">
+            <el-input v-model="ruleForm.staffName" placeholder="请输入" maxlength="20" />
+          </el-form-item>
+          <el-form-item label="账号" v-if="id" class="serviceType">
+            <span class="tips">
+              <svg-icon icon-class="tips" />
+              <p>成员唯一标识，可以使用工号、邮箱等<br />公司系统内统一的ID</p>
+            </span>
+            <el-input v-model="ruleForm.staffAccount" maxlength="20" placeholder="登录账号唯一标识" />
+          </el-form-item>
+          <el-form-item label="账号" prop="staffAccount" class="serviceType" v-else>
+            <span class="tips">
+              <svg-icon icon-class="tips" />
+              <p>成员唯一标识，可以使用工号、邮箱等<br />公司系统内统一的ID</p>
+            </span>
+            <el-input v-model="ruleForm.staffAccount" maxlength="20" placeholder="登录账号唯一标识" />
+          </el-form-item>
+          <el-form-item label="修改密码" prop="loginPasswordNew" v-if="id">
+            <el-input clearable :type="inputType" autocomplete="new-password" name="password" @focus="changeInputType"
+              v-model="ruleForm.loginPasswordNew" placeholder="密码任意6位数字，大小写字母，符号组合" minlength="6" maxlength="20" />
+          </el-form-item>
+          <el-form-item label="密码" prop="loginPassword" v-if="!id">
+            <el-input clearable :type="inputType" autocomplete="new-password" name="password" @focus="changeInputType"
+              v-model="ruleForm.loginPassword" minlength="6" maxlength="20" placeholder="密码任意6位数字，大小写字母，符号组合" />
+          </el-form-item>
+          <el-form-item label="确认密码" prop="loginPasswordAgain" v-if="
+                 (id &&
+                   ruleForm.loginPasswordNew &&
+                   ruleForm.loginPasswordNew.length > 0) ||
+                   !id
+               ">
+            <el-input clearable :type="inputType" autocomplete="new-password" name="password" @focus="changeInputType"
+              v-model="ruleForm.loginPasswordAgain" minlength="6" maxlength="20" placeholder="请再次确认密码" />
+          </el-form-item>
+          <el-form-item label="确认密码" v-show="
+                 !(
+                   (id &&
+                     ruleForm.loginPasswordNew &&
+                     ruleForm.loginPasswordNew.length > 0) ||
+                   !id
+                 )
+               ">
+            <el-input clearable :type="inputType" autocomplete="new-password" name="password" @focus="changeInputType"
+              v-model="ruleForm.loginPasswordAgain" minlength="6" maxlength="20" placeholder="请再次确认密码" />
+          </el-form-item>
+          <el-form-item label="手机号" prop="staffMobilePhone">
+            <el-input v-model="ruleForm.staffMobilePhone" placeholder="请输入常用手机号" />
+          </el-form-item>
+          <el-form-item label="角色" prop="roles.roleName" class="dept-comp">
+            <el-select v-model="ruleForm.majorRoleId" placeholder="请选择" @change="changeRole">
+              <el-option v-for="item in roleNameList" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="save('ruleForm', true)">保 存</el-button>
+        <el-button @click="addRoleRanFlag=false">取 消</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+  import {
+    validPassword
+  } from "../../utils/validate";
+  import {
+    getVessels,
+    queryRoleSelectData,
+    addadmin,
+    checkApp,
+    staffInfo,
+    editInfo,
+  } from "@/api/permissionSettingManagement";
+  const validPasswordRule = function(rule, value, callback) {
+    if (value)
+      if (!validPassword(value)) {
+        callback(
+          // this.$message({
+          //   message: '密码为6到20位数字密码任意组合！',
+          //   type: 'error'
+          // })
+          new Error("密码为6到20位数字密码任意组合")
+        );
+        return;
+      } else {
+        callback();
+        return;
+      }
+    callback();
+
+    // if (!validPassword(value)) {
+    //   callback(new Error('密码为6到20位数字密码任意组合'));
+    // } else {
+    //   callback();
+    // }
+  };
+  export default {
+    components: {
+      "el-image-viewer": () =>
+        import("element-ui/packages/image/src/image-viewer"),
+    },
+    data() {
+      const validcodeId = (rule, value, callback) => {
+        const reg = /[0-9a-zA-Z]$/;
+        if (!reg.test(value)) {
+          callback(
+            new Error("账号必须是由数字和字母组合")
+            // this.$message({
+            //   type: 'error',
+            //   message: '账号必须是由数字和字母组合',
+            //   showClose: true,
+            // })
+          );
+        } else {
+          callback();
+        }
+      };
+
+      const validcodeName = (rule, value, callback) => {
+        const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
+        if (!reg.test(value)) {
+          callback(
+            new Error("密码必须是由6位数字和字母组合")
+            // this.$message({
+            //   type: 'error',
+            //   message: '密码必须是由6位数字和字母组合',
+            //   showClose: true,
+            // })
+          );
+        } else {
+          callback();
+        }
+      };
+      const validPasswordAgain = (rule, value, callback) => {
+        if (value === "") {
+          callback(
+            this.$message({
+              type: "error",
+              message: "带*号的为必填项",
+              showClose: true
+            })
+          );
+        } else if (
+          (value !== this.ruleForm.loginPassword && !this.id) ||
+          (value !== this.ruleForm.loginPasswordNew && this.id)
+        ) {
+          callback(
+            this.$message({
+              type: "error",
+              message: "两次密码不一致",
+              showClose: true
+            })
+          );
+        } else {
+          callback();
+        }
+      };
+      const validcodePhonee = (rule, value, callback) => {
+        const reg = /^1[345789]\d{9}$/;
+
+        if (!reg.test(value)) {
+          callback(
+            new Error("手机号格式填写错误")
+
+            // this.$message({
+            //     type: 'error',
+            //     message: '手机号格式填写错误',
+            //     showClose: true,
+            //   })
+          );
+        } else {
+          callback();
+        }
+      };
+      return {
+        dialogTitle: '',
+        roleNameList: [],
+        inputType: "text",
+        id: '',
+        addRoleRanFlag: false,
+        deptTitle: '',
+        tableData: [],
+        //分页
+        currentPage: 1,
+        pageSize: 10,
+        deptBudgetTotal: 0,
+        deptCircularPage: {},
+        userInfo: false,
+        ruleForm: {
+          deptId: "3d7dbdc962ca4a96a48522c9ee528bc3",
+          deptName: '畅运通',
+          staffName: "",
+          staffAccount: "",
+          loginPassword: "",
+          loginPasswordAgain: "",
+          loginPasswordAgainNew: "",
+          loginPasswordNew: "",
+          staffMobilePhone: "",
+          electronicSignature: "",
+          majorRoleId: "",
+          roles: [{
+            roleId: "",
+            major: "1",
+            roleName: ''
+          }],
+          vessels: [{
+            vesselId: 'e88a798337c14cd7b8e0dfe7f9efdf5a',
+            vesselName: '试用船舶'
+          }],
+          roleVesselIds: []
+        },
+        rules: {
+          staffAccount: [{
+            required: true,
+            // validator: validcodeId,
+            trigger: "blur",
+            message: "请输入账号"
+          }],
+          loginPassword: [{
+            required: true,
+            validator: validcodeName,
+            trigger: "blur"
+          }],
+          loginPasswordAgain: [{
+            required: true,
+            validator: validPasswordAgain,
+            trigger: "blur"
+          }],
+          loginPasswordNew: [{
+            validator: validPasswordRule,
+            trigger: "blur"
+          }],
+          staffName: [{
+            required: true,
+            trigger: "blur",
+            message: "请输入中文名"
+          }],
+          staffMobilePhone: [{
+            required: true,
+            validator: validcodePhonee,
+            trigger: "blur"
+          }],
+          // "roles.roleName": [{
+          //   required: true,
+          //   trigger: "change"
+          // }]
+        },
+      };
+    },
+    mounted() {
+      this.getList();
+    },
+    async created() {},
+    methods: {
+      changeRole(e) {
+        console.log(e)
+        for (let i = 0; i < this.roleNameList.length; i++) {
+          if (e == this.roleNameList[i].roleId) {
+            this.ruleForm.roles[0].roleId = this.roleNameList[i].roleId
+            this.ruleForm.roles[0].roleName = this.roleNameList[i].roleName
+          }
+        }
+      },
+      changeInputType() {
+        this.inputType = "password";
+      },
+      getList() {
+        let _data = {
+          compId: "2710b21efc1e4393930c5dc800010dc4",
+          enabled: 1,
+          vesselBankFlag: "B",
+          currentPage: 1,
+          pageSize: 10
+        }
+        getVessels(_data)
+          .then(response => {
+            this.tableData = response.data.records
+          });
+
+        let _data1 = {
+          vesselBankFlag: "B",
+          underCompId: "2710b21efc1e4393930c5dc800010dc4",
+          deptId: "3d7dbdc962ca4a96a48522c9ee528bc3"
+        }
+        queryRoleSelectData(_data1)
+          .then(response => {
+            this.roleNameList = response.data
+          });
+
+      },
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+        this.pageSize = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.currentPage = val;
+        console.log(`当前页: ${val}`);
+        this.getList();
+      },
+      addman() {
+        this.dialogTitle = '添加成员'
+        this.addRoleRanFlag = true
+      },
+      // 保存
+      addSave(flag) {
+        addadmin(this.ruleForm)
+          .then(() => {
+            // this.cancel();
+            var commonUser = {};
+            commonUser.phone = this.ruleForm.staffMobilePhone
+            checkApp(commonUser).then(() => {})
+            this.$message({
+              message: "保存成功",
+              type: "success",
+              showClose: true
+            });
+            if (flag) {
+              this.$router.go(-1);
+            } else {
+              // this.clearZhiwu();
+              // this.checklist = [{
+              //   value: ""
+              // }];
+              // this.checklist1 = [{
+              //   value: ""
+              // }];
+              // this.seleteShipList = [];
+              // this.ruleForm.staffName = "";
+              // this.ruleForm.deptId = "";
+              // this.url =
+              //   "http://winsea-saas-test.oss-cn-shanghai.aliyuncs.com/default-logo.png";
+
+              // this.$nextTick(() => {
+              //   this.$refs.ruleForm.clearValidate();
+              //   this.$refs.ruleForm.resetFields();
+              // });
+            }
+            this.loading = false;
+          })
+          .catch(code => {
+            this.loading = false;
+            if (code === "MANAGEMENT_002") {
+              this.$message({
+                type: "error",
+                message: "手机号冲突！",
+                showClose: true
+              });
+              return false;
+            }
+            if (code === "MANAGEMENT_001") {
+              this.$message({
+                type: "error",
+                message: "用户名冲突！",
+                showClose: true
+              });
+              return false;
+            }
+            if (code === "MANAGEMENT_003") {
+              this.$message({
+                type: "error",
+                message: "邮箱冲突！",
+                showClose: true
+              });
+              return false;
+            }
+          });
+      },
+      editSave() {
+        this.ruleForm.staffId = this.id;
+        editInfo(this.ruleForm)
+          .then(() => {
+            // this.cancel();
+            this.$message({
+              message: "保存成功",
+              type: "success",
+              showClose: true
+            });
+            // for(var i =0;i<this.zhiwu2.length;i++){
+            //   var param = {
+            //     staffId:this.id,
+            //     roleId:this.zhiwu2[i].roleId,
+            //     roleMajor:'0'
+            //   }
+            //   saveRole(param).then(() => {
+            //   })
+            // }
+            // this.getMemberInfo();
+            this.getList()
+            this.loading = false;
+            this.addRoleRanFlag = false
+          })
+          .catch(code => {
+            this.loading = false;
+            if (code === "MANAGEMENT_002") {
+              this.$message({
+                type: "error",
+                message: "手机号冲突！",
+                showClose: true
+              });
+              return false;
+            }
+            if (code === "MANAGEMENT_001") {
+              this.$message({
+                type: "error",
+                message: "用户名冲突！",
+                showClose: true
+              });
+              return false;
+            }
+            if (code === "MANAGEMENT_003") {
+              this.$message({
+                type: "error",
+                message: "邮箱冲突！",
+                showClose: true
+              });
+              return false;
+            }
+            if (code === "MANAGEMENT_010") {
+              this.$message({
+                type: "error",
+                message: "成员名称重复!",
+                showClose: true
+              });
+              return false;
+            }
+          });
+      },
+      save(formName, flag) {
+        this.$refs[formName].validate(valid => {
+          if (valid) {
+            if (this.id) {
+              this.editSave();
+            } else {
+
+              this.addSave(flag);
+            }
+            this.isIndeterminate = false;
+          } else {
+            this.$message({
+              message: "带*号的为必填项",
+              type: "error",
+              showClose: true
+            });
+            return false;
+          }
+        });
+      },
+      edit(val) {
+        console.log(val)
+        this.dialogTitle = '编辑成员'
+        this.id = val.staffId
+        let _data1 = {
+          staffId: val.staffId
+        }
+        staffInfo(_data1)
+          .then(response => {
+            this.ruleForm = response.data;
+            this.addRoleRanFlag = true
+          });
+
+      },
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  // .dept-comp {
+  //   /deep/.el-select:nth-child(1) {
+  //     margin-right: 10px;
+  //   }
+  //   /deep/.el-input__inner,.el-select {
+  //     width: 203px !important;
+  //   }
+  // }
+
+  .serviceType {
+    // /deep/ .el-form-item__label {
+    //   padding-right: 25px;
+    // }
+
+    .el-form-item__content {
+      position: relative;
+    }
+
+    .tips {
+      font-size: 20px;
+      color: #999;
+      position: absolute;
+      left: -25px;
+      cursor: pointer;
+      z-index: 99;
+
+      &:hover {
+        p {
+          display: block;
+        }
+      }
+
+      p {
+        display: none;
+        box-shadow: 0 1px 8px rgba(137, 142, 146, 0.34);
+        font-size: 12px;
+        line-height: 16px;
+        background: #fff;
+        color: #333;
+        padding: 3px;
+        margin: 0;
+        margin-top: -4px;
+        border-radius: 5px;
+        height: 40px;
+      }
+    }
+  }
+
+  .border {
+    width: 960px;
+    height: 100%;
+    border-left: 1px solid #cccccc;
+  }
+
+  .organization-box {
+    height: calc(86vh - 10px);
+    overflow-y: auto;
+    border: none;
+  }
+
+  .uphead {
+    margin: 20px 0;
+    height: 60px;
+    line-height: 60px;
+  }
+
+  .img {
+    display: inline-block;
+    height: 60px;
+    width: 60px;
+    border-radius: 10px;
+    vertical-align: sub;
+  }
+
+  .kyc-passin {
+    margin-left: 20px;
+    width: 170px;
+  }
+
+  .talk {
+    font-size: 12px;
+    color: #999999;
+  }
+
+  // /deep/.el-dialog__body {
+  //   padding: 0;
+  // }
+
+  // /deep/ .el-dialog--center .el-dialog__body {
+  //   padding: 0;
+  // }
+
+  .adddepartment {
+    height: 400px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .adddepartment1 {
+    padding: 20px;
+    width: 50%;
+    overflow-y: auto;
+
+    .el-checkbox-group {
+      padding-left: 15px;
+    }
+
+    .search-box {
+      margin-bottom: 10px;
+
+      .search-keyword {
+        margin-right: 30px;
+      }
+    }
+  }
+
+  .adddepartment2 {
+    padding: 20px;
+    width: 50%;
+    background-color: #eeeeee;
+  }
+
+  // /deep/.el-tree-node__content {
+  //   height: 40px;
+  // }
+
+  .adddepartment3 {
+    height: 36px;
+    line-height: 36px;
+    background-color: #ffffff;
+    position: relative;
+    margin-bottom: 5px;
+  }
+
+  .adddepartment4 {
+    display: inline-block;
+    margin-bottom: 20px;
+  }
+
+  .adddepartmentLeft {
+    width: 195px;
+    display: inline-block;
+    position: absolute;
+    left: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .shipName {
+    padding: 4px 8px;
+    background-color: #dde9fc;
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+
+  .ddv1 {
+    //width: 730px;
+    vertical-align: top;
+    margin-top: 2px;
+  }
+
+  .ddv1>span {
+    float: left;
+  }
+
+  .adddepartmentDel {
+    display: inline-block;
+    position: absolute;
+    right: 20px;
+    color: #1d6ced;
+    cursor: pointer;
+  }
+
+  // /deep/.el-form-item .el-input__inner {
+  //   width: 420px;
+  // }
+
+  .main-list {
+    // height: calc(42vh);
+  }
+
+  .primaryzw {
+    width: 100%;
+    margin-bottom: 30px;
+  }
+
+  .zhiwuCheck {
+    display: block;
+    margin-top: 10px;
+  }
+
+  .zhiwuChecks {
+    display: block;
+    margin-left: -30px;
+  }
+
+  .zhuyaozhiwu {
+    margin-top: 10px;
+    background-color: #ffffff;
+    padding: 3px 8px;
+    // display: inline-block;
+  }
+
+  .ciyaozhiwu {
+    background-color: #ffffff;
+    padding: 5px 10px;
+    // display: inline-block;
+    margin-top: 10px;
+  }
+
+  .zhiwuradio {
+    margin-top: 5px;
+    margin-right: 10px;
+  }
+
+  .zhiwuDel {
+    margin-inline-start: 10px;
+    color: #1d6ced;
+    cursor: pointer;
+    float: right;
+  }
+
+  .lastspan {
+    display: flex;
+  }
+
+  .ddv1 {
+    flex: 1;
+  }
+
+  .inputPsd {
+    -webkit-text-security: disc;
+  }
+
+  // /deep/ .el-form-item__error {
+  //   display: block;
+  // }
+
+  // .dept-comp {
+  //   /deep/ .el-form-item__error {
+  //     display: none;
+  //   }
+
+  //   /deep/ .el-form-item__content {
+  //     /deep/ .el-input {
+  //       width: 202px;
+  //     }
+  //   }
+  // }
+
+  // /deep/ .el-form-item__content {
+  //   /deep/ .el-input {
+  //     width: 420px;
+  //   }
+  // }
+
+  .member {
+    display: inline-block;
+    margin: 10px 0 0 10px;
+  }
+
+  .checkBoxClass {
+    // float: left;
+    width: 650px;
+    height: 100%;
+  }
+
+  .checkBoxCla {
+    width: 25%;
+    margin: 10px 0 10px 20px;
+  }
+
+  .boxClass {
+    margin-left: 10px;
+  }
+
+  .aaa {
+    display: inline-block;
+    padding-right: 12px;
+    font-size: 14px;
+    color: #666666;
+    margin-bottom: 15px;
+  }
+
+  .bbb {
+    display: inline-block;
+    padding-right: 12px;
+    font-size: 14px;
+    color: #666666;
+  }
+
+  .postBox {
+    width: 100%;
+  }
+
+  // .ship-tree {
+  //   /deep/.el-tree-node__content {
+  //     height: auto;
+  //   }
+
+  //   /deep/.el-radio-group {
+  //     display: flex;
+  //     flex-direction: column;
+  //     text-align: left;
+
+  //     &>.el-radio {
+  //       margin: 2px;
+  //     }
+  //   }
+  // }
+
+  .center {
+    padding: 10px 20px;
+    background: #f5f6f7;
+    height: calc(100vh - 5vh);
+
+    .top_css {
+      padding: 10px;
+
+      .search_btn {
+        height: 80px;
+        background: linear-gradient(#fafbfb, #ffffff);
+        display: flex;
+        margin-top: 20px;
+
+        .search_block {
+          margin-left: 20px;
+        }
+
+        .search_item {
+          text-align: center;
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 40px;
+          width: 112px;
+          height: 40px;
+          background: #f7f8f9;
+          cursor: pointer;
+          margin-top: 30px;
+        }
+
+        .searchNo {
+          color: #323233;
+        }
+
+        .search {
+          color: #2f53eb;
+          background: #ffffff;
+        }
+      }
+    }
+
+    .center_css {
+      background: #ffffff;
+      border-radius: 1px;
+      margin-top: 10px;
+      padding-bottom: 10px;
+    }
+
+    .screen {
+      display: flex;
+
+      .search {
+        width: 40px;
+        height: 40px;
+        background: #2f53eb;
+        border-radius: 0px 2px 2px 0px;
+        border: 1px solid #DCDFE6;
+        margin-left: -1px;
+      }
+
+      .count_css {
+        width: 80px;
+        text-align: center;
+        line-height: 40px;
+        color: #666666;
+      }
+    }
+
+    .el-button {
+      padding: 10px 20px !important;
+    }
+
+    .center_css {
+
+      ::v-deep .el-table th,
+      ::v-deep .el-table td {
+        text-align: center;
+      }
+
+      .fujian {
+        font-size: 24px;
+        color: #409eff;
+      }
+
+      .warning {
+        font-size: 14px;
+        color: #ed1d1d;
+      }
+    }
+  }
+
+  .car_css {
+    width: 50%;
+    display: inline-block;
+    text-align: center;
+    margin-top: 20px;
+  }
+
+  .car_item {
+    width: 100px;
+    height: 100px;
+  }
+
+  .user {
+    margin-bottom: 20px;
+
+    .title_css {
+      color: #9d9d9d;
+      margin-bottom: 6px;
+    }
+
+    .name_css {
+      color: #0d0d0d;
+      margin-bottom: 20px;
+    }
+
+    .form_btn {
+      text-align: right;
+    }
+
+    .user_item {
+      width: 380px;
+      height: 250px;
+      margin-bottom: 20px;
+    }
+  }
+
+  ::v-deep .el-table--border .el-table__header th {
+    background: #f7f8f9;
+  }
+
+  .btn_css {
+    color: #409eff;
+    cursor: pointer;
+  }
+
+  .sign {
+    font-size: 14px;
+    color: red;
+  }
+
+  .form_css {
+    width: 100%;
+    margin: 0 auto 20px;
+
+    ::v-deep .el-checkbox {
+      width: 40%;
+      height: 30px;
+    }
+
+    ::v-deep .el-dialog__body {
+      padding: 10px 20px;
+    }
+
+    ::v-deep .el-dialog__title {
+      font-size: 16px;
+    }
+
+    // ::v-deep .el-textarea__inner {
+    //   background: #F0F1F2;
+    // }
+
+    .form_btn {
+      text-align: right;
+      margin-top: 10px;
+    }
+  }
+
+  //发送信息
+  .Info_css {
+    .Info_title {
+      color: #323233;
+      font-size: 16px;
+    }
+
+    .Info_item {
+      margin: 20px 0;
+    }
+
+    .Info_btn {
+      text-align: right;
+      margin-top: 10px;
+    }
+  }
+
+  .advancePayment-style {
+    display: flex;
+  }
+
+  ::v-deep .advancePayment-style .el-input__inner {
+    height: 30px;
+  }
+
+  .pay {
+    .pay_css {
+      display: flex;
+      margin-bottom: 20px;
+    }
+  }
+
+  .find::v-deep input.el-input__inner {
+    border-radius: 0;
+  }
+
+  .el-form-item {
+    // display: flex;
+  }
+</style>