@sunny-base/effects 0.0.1

package/README.md

@@ -0,0 +1,11 @@
+# @effects 业务功能模块
+
+此目录包含与业务逻辑紧密相关但具有通用性的公共业务模块。
+
+## 目录说明
+
+这里的模块虽然涉及具体的业务场景，但设计上支持抽离和复用。旨在为不同应用提供标准化的业务功能组件。
+
+## 规划
+
+后续计划将这些模块打包并发布到 NPM 仓库，以便进行统一的版本管理和分发。

package/index.js

@@ -0,0 +1,4 @@
+export * from './user/api/user.js';
+import UserQuery from './user/UserQuery.vue';
+export { UserQuery };
+

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@sunny-base/effects",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "scripts": {
+    "lint": "eslint ."
+  },
+  "peerDependencies": {
+    "vue": "2.7.14",
+    "element-ui": "2.15.13",
+    "sunnygroup-components": "^1.0.261"
+  },
+  "dependencies": {
+    "@config/tailwind-config": "workspace:^",
+    "@core/ui": "workspace:*",
+    "@core/utils": "workspace:*"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38"
+  }
+}

package/user/UserQuery.vue

@@ -0,0 +1,359 @@
+<template>
+  <div class="userManagement commonQueryDiv">
+    <kunkka-ux-grid
+      ref="kunkka-ux-grid"
+      :scrollY="scrollY"
+      :scrollX="scrollX"
+      v-bind="userManagement.tableAttrs"
+      @toggleToolbarClick="toggleToolbarClick"
+      @selection-change="toggleSelectRow"
+      @row-dblclick="toggleDblclickRow"
+    />
+    <!-- 新增修改弹窗 -->
+    <KunkkaModal
+      ref="userModal"
+      width="415px"
+      :visible.sync="userManagement.dialog.visible"
+      :can-fullscreen="true"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :title="userManagement.dialog.title"
+      @ok="handleOk"
+    >
+      <kunkka-form
+        ref="kunkka-form"
+        :form="userManagement.dialog.form"
+        :model="userManagement.dialog.model"
+        :events="userManagement.dialog.events"
+        label-width="100px"
+        :lg="24"
+        :gutter="20"
+        :show-message="false"
+        @inputSearchClick="inputSearchClick"
+      />
+    </KunkkaModal>
+
+    <!-- 用户授权弹窗 -->
+    <KunkkaModal
+      ref="userAuthorizationModal"
+      :visible.sync="userManagement.userAuthorization.visible"
+      :can-fullscreen="true"
+      :show-close="false"
+      :title="userManagement.userAuthorization.title"
+      @ok="handleUserAuthorizationOk"
+    >
+      <user-authorization
+        v-if="userManagement.userAuthorization.visible"
+        ref="userAuthorization"
+      />
+    </KunkkaModal>
+
+    <!-- mac地址绑定弹窗 -->
+    <KunkkaModal
+      ref="macAddressModal"
+      :visible.sync="userManagement.macAddress.visible"
+      :can-fullscreen="true"
+      :show-close="false"
+      :title="userManagement.macAddress.title"
+      @ok="handleMacAddressOk"
+    >
+      <mac-address
+        v-if="userManagement.macAddress.visible"
+        :table-data="userManagement.macAddress.tableData"
+      />
+    </KunkkaModal>
+
+    <!-- 数据权限配置弹窗 -->
+    <KunkkaModal
+      ref="otherAuthModal"
+      width="950px"
+      :height="500"
+      :visible.sync="userManagement.otherAuth.visible"
+      :can-fullscreen="true"
+      :show-close="false"
+      :title="userManagement.otherAuth.title"
+      @ok="handleOtherAuthOk"
+    >
+      <other-auth
+        v-if="userManagement.otherAuth.visible"
+        :table-data="userManagement.otherAuth.tableData"
+      />
+    </KunkkaModal>
+
+    <!-- 用户详情弹窗 -->
+    <KunkkaModal
+      ref="userDetailModal"
+      :visible.sync="userManagement.userDetail.visible"
+      :can-fullscreen="true"
+      :show-close="false"
+      :title="userManagement.userDetail.title"
+      @ok="handleUserDetailOk"
+    >
+      <user-detail
+        v-if="userManagement.userDetail.visible"
+        :table-data="userManagement.userDetail.tableData"
+        :form-data="userManagement.userDetail.formData"
+      />
+    </KunkkaModal>
+    <!-- 资源国际化配置 -->
+    <!-- <i18nDataDialog /> -->
+
+    <kunkka-search-dialog
+      ref="kunkka-search-dialog"
+      @submitAction="submitAction"
+    />
+
+    <!-- 导出组件 -->
+    <exportDialog />
+
+    <!-- 导入弹窗 -->
+    <importDialog />
+  </div>
+</template>
+<script>
+/* eslint-disable no-async-promise-executor */
+import { mapGetters } from 'vuex'
+import list from '@/mixins/list'
+import UserAuthorization from './compontents/UserAuthorization'
+import UserDetail from './compontents/UserDetail'
+import MacAddress from './compontents/MacAddress'
+import otherAuth from './compontents/otherAuth'
+// import i18nDataDialog from '@/components/i18nDataDialog'
+export default {
+  name: 'UserManagement',
+  components: {
+    UserAuthorization,
+    // i18nDataDialog,
+    UserDetail,
+    MacAddress,
+    otherAuth
+  },
+  mixins: [list],
+  data() {
+    return {
+      name: 'userManagement',
+      dialogTyep: '',
+      scrollY: {
+        gt: -1
+      },
+      scrollX: {
+        gt: -1
+      }
+
+    }
+  },
+  computed: {
+    ...mapGetters(['userManagement', 'theme'])
+  },
+  mounted: function() {
+    this.$store.dispatch('userManagement/aaa', 'FEC-00001')
+  },
+  methods: {
+    // 表格按钮回调
+    toggleToolbarClick: function(data) {
+      const { handle, label } = data.item
+      this.dialogType = handle
+      switch (handle) {
+        case 'userManagement/add':
+          this.currentUserResourcesGroupBycArea({ modnumb: '3f95df09-9f9b-4b28-807d-d6d056ae295f' }).then((res) => {
+            this.userManagement.dialog.title = `用户管理-${label}`
+            this.userManagement.dialog.form = res.resFieldList.createForm
+            this.userManagement.dialog.model = { nMainAccount: '1', nOuterUser: '0' }
+            this.$nextTick(() => {
+              this.$refs['kunkka-form'].$refs['kunkkaForm'].clearValidate()
+            })
+          })
+          break
+        case 'userManagement/update':
+          this.currentUserResourcesGroupBycArea({ modnumb: '3f95df09-9f9b-4b28-807d-d6d056ae295f' }).then((res) => {
+            this.userManagement.dialog.title = `用户管理-${label}`
+            this.userManagement.dialog.form = res.resFieldList.createForm
+          })
+          break
+        case 'userManagement/auth':
+          this.userManagement.userAuthorization.title = `用户管理-${label}`
+          this.userManagement.userAuthorization.visible = true
+          break
+        case 'userManagement/macBind':
+          this.userManagement.macAddress.title = `用户管理-${label}`
+          this.userManagement.macAddress.visible = true
+          break
+        case 'userManagement/otherAuth':
+          this.userManagement.otherAuth.title = `用户管理-${label}`
+          this.userManagement.otherAuth.visible = true
+          break
+        default:
+          break
+      }
+    },
+    // 下面是inputSearchClick方法,用于弹出查询界面
+    inputSearchClick(data) {
+      if (data.prop === 'cWork') {
+        this.$refs['kunkka-search-dialog'].openInit({
+          cNum: this.userManagement.dialog.model.nMainAccount === '0' ? 'INNER_PART_WORK_OPT' : 'INNER_WORK_OPT', // 查询框编号
+          selection: false // false为单选，true为多选
+        })
+      }
+    },
+    // 下面是回调事件,row为选取的行
+    submitAction(row) {
+      this.$set(this.userManagement.dialog.model, 'cUsername', row.LASTNAME)
+      this.$set(this.userManagement.dialog.model, 'cWork', row.WORKCODE)
+      this.$set(this.userManagement.dialog.model, 'cDeptnum', row.DEPTCODE)
+      this.$set(this.userManagement.dialog.model, 'cDeptname', row.DEPTNAME)
+    },
+    // 选择行事件
+    toggleSelectRow: function(row) {
+      const self = this
+      self[self.name].selectRow = row
+    },
+    // 双击行事件
+    toggleDblclickRow: function(row) {
+      this.$store.dispatch('userManagement/detail', row).then(() => {
+        this.userManagement.userDetail.title = `用户管理-详情`
+        this.userManagement.userDetail.visible = true
+      })
+    },
+    // 弹窗确定回调
+    handleOk() {
+      this.$refs.userModal.changeOkLoading(true)
+      if (this.dialogType === 'userManagement/add') {
+        this.$store.dispatch('userManagement/addSave').then(() => {
+          this.userManagement.dialog.visible = false
+        }).finally(() => {
+          this.$refs.userModal.changeOkLoading(false)
+        })
+      } else if (this.dialogType === 'userManagement/update') {
+        this.$store.dispatch('userManagement/updateSave').then(() => {
+          this.userManagement.dialog.visible = false
+        }).finally(() => {
+          this.$refs.userModal.changeOkLoading(false)
+        })
+      }
+    },
+    async handleUserAuthorizationOk() {
+      this.$refs.userAuthorizationModal.changeOkLoading(true)
+      const jsonStr = {
+        authorizedNumb: this.userManagement.selectRow[0].cUsernumb,
+        authUserRoleList: this.$refs.userAuthorization.getData()
+      }
+      const nSensitiveLength = _.filter(this.$refs.userAuthorization.getData(), ['nSensitive', 1]).length
+      if (nSensitiveLength > 0) {
+        await this.$confirm('存在敏感角色授权, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+        }).catch(() => {
+          return
+        })
+      }
+      this.$store.dispatch('userManagement/saveAuth', jsonStr).then(() => {
+        this.userManagement.userAuthorization.visible = false
+      }).finally(() => {
+        this.$refs.userAuthorizationModal.changeOkLoading(false)
+      })
+    },
+    handleMacAddressOk() {
+      this.$refs.macAddressModal.changeOkLoading(true)
+      if (this.userManagement.macAddress.tableData.every(ele => { return ele.cMac && ele.cMacdesc }) === false) {
+        this.$message.info('请将mac地址/描述填写完整')
+        this.$refs.macAddressModal.changeOkLoading(false)
+        return false
+      }
+      const jsonStr = {
+        authUserMacList: this.userManagement.macAddress.tableData,
+        authUserMac: { cUsernumb: this.userManagement.selectRow[0].cUsernumb }
+      }
+      this.$store.dispatch('userManagement/saveMac', jsonStr).then(() => {
+        this.userManagement.macAddress.visible = false
+      }).finally(() => {
+        this.$refs.macAddressModal.changeOkLoading(false)
+      })
+    },
+    handleOtherAuthOk() {
+      this.$refs.otherAuthModal.changeOkLoading(true)
+      // check ALL先初期全部舍弃，都为false
+      this.userManagement.otherAuth.tableData.forEach(element => {
+        element.allCheck = false
+      })
+      const jsonStr = {
+        authUser: { id: this.userManagement.selectRow[0].id },
+        userExresAuthBOList: this.userManagement.otherAuth.tableData
+      }
+      this.$store.dispatch('userManagement/saveOtherAuth', jsonStr).then(() => {
+        this.userManagement.otherAuth.visible = false
+      }).finally(() => {
+        this.$refs.otherAuthModal.changeOkLoading(false)
+      })
+    },
+    handleUserDetailOk() {
+      this.userManagement.userDetail.visible = false
+    },
+    state_init() {
+      const cAdminColumns = this.userManagement.tableAttrs.columns.find(el => { return el.field === 'cAdmin' })
+      cAdminColumns.slots = {
+        default: ({ row, column, rowIndex }, h) => {
+          var opts = column.params.optionlist.find(op => {
+            return row[column.property] == op.cKeynumb // eslint-disable-line
+          })
+          return [
+            <el-tag key={rowIndex} type={ row[column.property] === '0' ? 'success' : '' } title={opts ? opts.cKeyname : row[column.property]}>{ opts ? opts.cKeyname : row[column.property] }</el-tag>
+          ]
+        }
+      }
+      const nMainAccount = this.userManagement.tableAttrs.columns.find(el => { return el.field === 'nMainAccount' })
+      nMainAccount.slots = {
+        default: ({ row, column, rowIndex }, h) => {
+          var opts = column.params.optionlist.find(op => {
+            return row[column.property] == op.cKeynumb // eslint-disable-line
+          })
+          return [
+            <el-tag key={rowIndex} type={ row[column.property] === 1 ? 'primary' : 'info' } title={opts ? opts.cKeyname : row[column.property]}>{ opts ? opts.cKeyname : row[column.property] }</el-tag>
+          ]
+        }
+      }
+      const nOuterUser = this.userManagement.tableAttrs.columns.find(el => { return el.field === 'nOuterUser' })
+      nOuterUser.slots = {
+        default: ({ row, column, rowIndex }, h) => {
+          var opts = column.params.optionlist.find(op => {
+            return row[column.property] == op.cKeynumb // eslint-disable-line
+          })
+          return [
+            <el-tag key={rowIndex} type={ row[column.property] === 1 ? 'primary' : 'info' } title={opts ? opts.cKeyname : row[column.property]}>{ opts ? opts.cKeyname : row[column.property] }</el-tag>
+          ]
+        }
+      }
+      const cSign = this.userManagement.tableAttrs.columns.find(el => { return el.field === 'cSign' })
+      cSign.slots = {
+        default: ({ row, column, rowIndex }, h) => {
+          return [
+            <vxe-switch key={rowIndex} v-model={row[column.property]} open-label='是' open-value='0' close-label='否' close-value='1' disabled></vxe-switch>
+          ]
+        }
+      }
+      this.$refs['kunkka-ux-grid'].$refs['kunkka-ux-grid'].loadColumn(this.userManagement.tableAttrs.columns)
+    },
+    aaa(data) {
+      this.$message.success(data)
+    },
+    // 数据国际化重写这个方法
+    renderI18nDataDialog(model, prop, { schema }) {
+      if (!schema.cEntityTable) {
+        this.$message.error('请配置后端实体表表名')
+        return false
+      }
+      if (!schema.cEntityTable) {
+        this.$message.error('请配置后端实体表列名')
+        return false
+      }
+      this.$store.dispatch('i18nDataDialog/showBusinessData', {
+        'nDataId': this.userManagement.dialog.model.id,
+        'cTable': schema.cEntityTable,
+        'cColumnName': schema.cEntityCol
+        // cDataKey: prop
+      })
+    }
+  }
+}
+</script>

package/user/api/user.js

@@ -0,0 +1,57 @@
+import { request } from '@core/utils'
+
+export function login(data) {
+  return request({
+    url: '/base-auth/login',
+    method: 'post',
+    data,
+    params: data
+  })
+}
+
+export function logout() {
+  return request({
+    url: '/base-auth/logout',
+    method: 'post'
+  })
+}
+
+export function getInfo(data) {
+  return request({
+    url: '/core/contact/getCurrentUserAndResources',
+    method: 'post',
+    data
+  })
+}
+
+export function getGyUuid(data) {
+  return request({
+    url: '/core/assSysSetting/getGyUuid',
+    method: 'post',
+    data
+  })
+}
+
+export function updatePwd(data) {
+  return request({
+    url: '/core/authUser/updatePwd',
+    method: 'post',
+    data
+  })
+}
+
+export function findAllUser(data) {
+  return request({
+    url: '/core/authUser/findAllUser',
+    method: 'post',
+    data
+  })
+}
+
+export function changeAccount(data) {
+  return request({
+    url: '/changeAccount',
+    method: 'post',
+    data
+  })
+}

package/user/compontents/MacAddress.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="macAddressDialog">
+    <div>
+      <el-card class="table-card">
+        <div class="table-handle">
+          <div style="margin-bottom: 5px;">
+            <el-button icon="iconfont icon-add" class="icon-base-btn" @click="add">新增</el-button>
+          </div>
+        </div>
+        <el-table
+          :data="tableData"
+          height="200px"
+          style="width: 100%"
+          stripe
+          :show-overflow-tooltip="true"
+          class="addTable autoHeightTable"
+          border
+        >
+          <el-table-column label="mac地址">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.cMac" />
+            </template>
+          </el-table-column>
+          <el-table-column label="mac地址描述">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.cMacdesc" />
+            </template>
+          </el-table-column>
+          <el-table-column label="登记人">
+            <template slot-scope="scope">
+              {{ scope.row.cCreateusername }}
+            </template>
+          </el-table-column>
+          <el-table-column label="登记时间">
+            <template slot-scope="scope">
+              {{ scope.row.dDate }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="90" align="center">
+            <template slot-scope="scope">
+              <el-button icon="iconfont icon-del" class="icon-btn" type="danger" @click="del(scope)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'MacAddress',
+  components: {
+
+  },
+  props: {
+    tableData: {
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data() {
+    return {
+      name: 'macAddress'
+    }
+  },
+  mounted() {},
+  methods: {
+    add() {
+      this.$store.dispatch('userManagement/addMac')
+    },
+    del(scope) {
+      this.$store.dispatch('userManagement/delMac', scope.$index)
+    }
+  }
+}
+</script>
+

package/user/compontents/UserAuthorization.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="userAuthDialog">
+    <div>
+      <el-row :gutter="10" class="padding0px5px">
+        <kunkka-form
+          ref="sunnyopticalForm"
+          :sm="12"
+          :lg="12"
+          :gutter="25"
+          :name="name"
+          :form="userAuthorization.conditions"
+          :model="userAuthorization.model"
+        />
+      </el-row>
+      <el-card class="table-card">
+        <div style="margin-bottom: 5px;">
+          <el-button icon="iconfont icon-add" class="icon-base-btn" @click="add">新增</el-button>
+        </div>
+        <el-table
+          :data="userAuthorization.value"
+          height="200px"
+          style="width: 100%"
+          stripe
+          :show-overflow-tooltip="true"
+          class="addTable autoHeightTable"
+          border
+        >
+          <el-table-column label="角色编号">
+            <template slot-scope="scope">
+              {{ scope.row.cRolenumb }}
+            </template>
+          </el-table-column>
+          <el-table-column label="角色名称" width="200">
+            <template slot-scope="scope">
+              {{ scope.row.cRolename }}
+            </template>
+          </el-table-column>
+          <el-table-column label="敏感角色" width="100">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.nSensitive===1?'danger':'info'">{{ scope.row.nSensitive | filterSelect(selectOpts.nYesNo) }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="所属系统" width="100">
+            <template slot-scope="scope">
+              {{ filterSelect(scope.row.cSystem, selectOpts.systemOpts) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="删除" width="90" align="center">
+            <template slot-scope="scope">
+              <el-button icon="iconfont icon-del" class="icon-btn" type="danger" @click="del(scope)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
+    <!-- 角色查询弹窗 -->
+    <kunkka-search-dialog
+      ref="kunkka-search-dialog"
+      @submitAction="submitAction"
+    />
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { queryAllPageList } from '@/api/userManagement'
+import { filterSelect } from '@/mixins/configurationFile/utils'
+import selectOpts from '@/utils/select-options'
+export default {
+  name: 'UserAuthorization',
+  components: {
+
+  },
+  mixins: [
+
+  ],
+  props: {},
+  data() {
+    return {
+      name: 'userAuthorization',
+      selectOpts
+    }
+  },
+  computed: {
+    ...mapGetters(['userAuthorization'])
+  },
+  created() {
+    this.userAuthorization.conditions = [
+      { label: '用户编号', components: 'Input', prop: 'cUsernumb', disabled: true, show: true },
+      { label: '用户姓名', components: 'Input', prop: 'cUsername', disabled: true, show: true }
+    ]
+  },
+  mounted: function() {},
+  methods: {
+    // 按钮点击事件回调
+    add() {
+      this.$refs['kunkka-search-dialog'].openInit({
+        selection: true, // 多选
+        cTitle: '系统角色权限查询', // 标题名称
+        api: this.apiFunction, // 接口
+        fetchPath: { listField: 'result.records', totalField: 'result.total' }, // api返回格式取值路径变更
+        conditions: [
+          {
+            components: 'Input',
+            label: '角色编号',
+            prop: 'cRolenumb',
+            placeholder: '请输入内容',
+            clearable: true,
+            required: false,
+            lg: 12
+          },
+          {
+            components: 'Input',
+            label: '角色名称',
+            prop: 'cRolename',
+            placeholder: '请输入内容',
+            clearable: true,
+            required: false,
+            lg: 12
+          }
+        ], // 查询表单配置项
+        tableCols: [
+          { field: 'cRolenumb', title: '角色编号' },
+          { field: 'cRolename', title: '角色名称' },
+          {
+            field: 'nSensitive',
+            title: '敏感角色',
+            params: {
+              optionlist: selectOpts.nYesNo
+            },
+            slots: {
+              default: ({ row, column, rowIndex }, h) => {
+                var opts = column.params.optionlist.find(op => {
+                return row[column.property] == op.cKeynumb // eslint-disable-line
+                })
+                return (row[column.property] !== null)
+                  ? [
+                    <el-tag key={rowIndex} type={ row[column.property] === 1 ? 'danger' : 'info' } title={opts ? opts.cKeyname : row[column.property]}>{ opts ? opts.cKeyname : row[column.property] }</el-tag>
+                  ]
+                  : []
+              }
+            }
+          }
+        ], // 查询表格配置项
+        nRows: 200 // 分页返回数目
+      })
+    },
+    apiFunction(data) {
+      return new Promise((resolve, reject) => {
+        const jsonStr = {
+          pageNo: data.pageNo,
+          pageSize: data.pageSize,
+          authRole: {
+            cRolenumb: data.cRolenumb ? data.cRolenumb : '',
+            cRolename: data.cRolename ? data.cRolename : ''
+          }
+        }
+        queryAllPageList(jsonStr)
+          .then(response => {
+            resolve(response)
+          })
+          .catch(error => {
+            reject(error)
+          })
+      })
+    },
+    del(scope) {
+      this.userAuthorization.value.splice(scope.$index, 1)
+    },
+    // 角色查询确认
+    submitAction(selections) {
+      selections.forEach((item) => {
+        // eslint-disable-next-line no-undef
+        if (_.findIndex(this.userAuthorization.value, (ele) => { return ele.nRoleid === item.id }) > -1) {
+          this.$message.info(`${item.cRolename}已存在`)
+        } else {
+          this.userAuthorization.value.push({
+            nRoleid: item.id,
+            cSystem: item.cSystem,
+            cRolename: item.cRolename,
+            cRolenumb: item.cRolenumb,
+            nSensitive: item.nSensitive
+          })
+        }
+      })
+    },
+    // 获取角色
+    getData() {
+      return this.userAuthorization.value
+    },
+    filterSelect
+  }
+}
+</script>
+<style lang="scss">
+.userAuthDialog {
+  .el-dialog__body {
+    padding: 10px !important;
+  }
+  .el-dialog__footer {
+    padding: 0 10px 10px 10px !important;
+  }
+}
+</style>

package/user/compontents/UserDetail.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <div class="userDtMain">
+      <el-form ref="form" :model="formModel" :inline="true" label-width="100px">
+        <el-form-item label="用户编号">
+          <el-input v-model="formModel.cUsernumb" disabled />
+        </el-form-item>
+        <el-form-item label="用户姓名">
+          <el-input v-model="formModel.cUsername" disabled />
+        </el-form-item>
+        <el-form-item label="邮箱">
+          <el-input v-model="formModel.cEmail" disabled />
+        </el-form-item>
+        <el-form-item label="手机号">
+          <el-input v-model="formModel.cPhone" disabled />
+        </el-form-item>
+        <el-form-item label="所属部门">
+          <el-input v-model="formModel.cDeptname" disabled />
+        </el-form-item>
+        <el-form-item label="所属岗位">
+          <el-input v-model="formModel.cJobname" disabled />
+        </el-form-item>
+      </el-form>
+      <el-tabs v-model="activeName" type="border-card">
+        <el-tab-pane label="角色权限" name="role">
+          <el-table
+            class="addTable autoHeightTable"
+            :data="userRoleList"
+            :height="defaultHeight"
+            stripe
+            :show-overflow-tooltip="true"
+            border
+          >
+            <el-table-column label="角色编号">
+              <template slot-scope="scope">
+                {{ scope.row.cRolenumb }}
+              </template>
+            </el-table-column>
+            <el-table-column label="角色名称" width="200">
+              <template slot-scope="scope">
+                {{ scope.row.cRolename }}
+              </template>
+            </el-table-column>
+            <el-table-column label="所属系统" width="100">
+              <template slot-scope="scope">
+                {{ scope.row.cSystem |filterSelect(selectOpts.systemOpts) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="敏感角色" width="100">
+              <template slot-scope="scope">
+                <el-tag :type="scope.row.nSensitive===1?'danger':'info'">{{ scope.row.nSensitive | filterSelect(selectOpts.nYesNo) }}</el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import selectOpts from '@/utils/select-options'
+export default {
+  components: {
+
+  },
+  props: {
+    tableData: {
+      type: Array,
+      default: () => { return [] }
+    },
+    formData: {
+      type: Object,
+      default: () => { return {} }
+    }
+  },
+  data() {
+    return {
+      activeName: 'role',
+      defaultHeight: 200,
+      // 角色
+      userRoleList: this.tableData,
+      // 基本信息
+      formModel: this.formData,
+      selectOpts
+    }
+  },
+  mounted: function() {
+    this.$nextTick(() => {
+      this.nodeExpand()
+    })
+  },
+  methods: {
+    // 树
+    renderContent(h, { node, data }) {
+      let className = ''
+      if (node.childNodes.length === 0) {
+        className = 'especially'
+      }
+      return (
+        <div class={className}>
+          {data.label}
+        </div>
+      )
+    },
+    nodeExpand() {
+      var classDomList = document.getElementsByClassName('especially')
+      this.$nextTick(() => {
+        for (var i = 0; i < classDomList.length; i++) {
+          classDomList[i].parentNode.style.cssText = 'float: left'
+          classDomList[i].parentNode.className = 'el-tree-node__content option-wrapper'
+          classDomList[i].parentNode.parentNode.parentNode.style.marginLeft = '50px'
+        }
+      })
+    },
+    dis() {
+      return true
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.userDtMain {
+  padding: 0 5px;
+
+  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
+    background-color: #409EFF !important;
+    border-color: #409EFF !important;
+  }
+  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
+    border-color: #FFF !important;
+  }
+}
+.option-wrapper { padding: 0 !important; }
+</style>

package/user/compontents/otherAuth.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="macAddressDialog">
+    <div>
+      <table
+        class="otherAuthTable"
+      >
+        <caption />
+        <th class="th1">页签</th>
+        <th class="th2">默认全选</th>
+        <th class="th3">选项</th>
+        <tr v-for="(item, index) in tableData" :key="index">
+          <td class="tr1">{{ item.parname }}</td>
+          <td class="tr2"><el-checkbox v-model="item.allCheck" @change="allCheck(item.allCheck,item.authExresList)">是</el-checkbox></td>
+          <td class="tr3">
+            <el-checkbox v-for="(item2, index2) in item.authExresList" :key="index2" v-model="item2.check" @change="otherAuthChange">{{ item2.cExresnum + '-'+ item2.cExresname }}<span v-if="item2.cOrg" style="color:#24b77b">[{{ item2.cOrg }}]</span></el-checkbox>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'OtherAuth',
+  components: {
+
+  },
+  props: {
+    tableData: {
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data() {
+    return {
+      name: 'otherAuth'
+    }
+  },
+  mounted() {},
+  methods: {
+    otherAuthChange: function() {
+      this.$forceUpdate()
+    },
+    allCheck: function(allCheck, authExresList) {
+      authExresList.forEach(element => {
+        element.check = allCheck
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  tr.elx-body--row {  cursor: pointer;}
+  .otherAuthTable {
+    width: 100%;
+    text-align: center;
+    border-spacing: 0;
+    border-top: 1px solid #000;
+    border-right: 1px solid #000;
+    border-left: 1px solid #000;
+  }
+  .otherAuthTable td {
+    padding: 10px;
+    border-bottom: 1px solid #000;
+    border-right: 1px solid #000;
+  }
+  .otherAuthTable .el-checkbox {
+    margin-bottom: 5px
+  }
+  .th1 {
+    height: 40px;
+    line-height: 40px;
+    width: 9%;
+    text-align: center;
+    border-bottom: 1px solid #000;
+    border-right: 1px solid #000;
+  }
+  .th2 {
+    height: 40px;
+    line-height: 40px;
+    width: 9%;
+    text-align: center;
+    border-bottom: 1px solid #000;
+    border-right: 1px solid #000;
+  }
+  .th3 {
+    height: 40px;
+    line-height: 40px;
+    width: 82%;
+    text-align: center;
+    border-bottom: 1px solid #000;
+    border-right: 1px solid #000;
+  }
+  .tr1{
+    height: 40px;
+    width: 9%;
+    text-align: center;
+  }
+  .tr2 {
+    height: 40px;
+    width: 9%;
+    text-align: center;
+  }
+  .tr3 {
+    height: 40px;
+    width: 82%;
+    text-align: center;
+  }
+</style>