feat: 菜单权限一览列表

.eslintrc.js

@@ -1,225 +1,225 @@
 module.exports = {
-    root: true,
-    parserOptions: {
-        parser: 'babel-eslint',
-        sourceType: 'module'
-    },
-    env: {
-        browser: true,
-        node: true,
-        es6: true
-    },
-    'extends': [
-        'plugin:vue/recommended',
-        'eslint:recommended'
-    ],
-    overrides: [
-        {
-            files: [
-                '**/__tests__/*.{j,t}s?(x)',
-                '**/tests/unit/**/*.spec.{j,t}s?(x)'
-            ],
-            env: {
-                jest: true
-            }
-        }
-    ],
-    // add your custom rules here
-    // it is base on https://github.com/vuejs/eslint-config-vue
-    rules: {
-        'vue/max-attributes-per-line': [2, {
-            'singleline': 10,
-            'multiline': {
-                'max': 1,
-                'allowFirstLine': false
-            }
-        }],
-        'vue/singleline-html-element-content-newline': 'off',
-        'vue/multiline-html-element-content-newline': 'off',
-        'vue/name-property-casing': ['error', 'kebab-case'], // |PascalCase
-        'vue/require-default-prop': 'off',
-        'vue/no-v-html': 'off',
-        'accessor-pairs': 2,
-        'arrow-spacing': [2, {
-            'before': true,
-            'after': true
-        }],
-        'block-spacing': [2, 'always'],
-        'brace-style': [2, '1tbs', {
-            'allowSingleLine': true
-        }],
-        'camelcase': [0, {
-            'properties': 'always'
-        }],
-        'comma-dangle': [2, 'never'],
-        'comma-spacing': [2, {
-            'before': false,
-            'after': true
-        }],
-        'comma-style': [2, 'last'],
-        'constructor-super': 2,
-        'curly': [2, 'multi-line'],
-        'dot-location': [2, 'property'],
-        'eol-last': 2,
-        'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
-        'generator-star-spacing': [2, {
-            'before': true,
-            'after': true
-        }],
-        'handle-callback-err': [2, '^(err|error)$'],
-        'indent': [2, 4, {
-            'SwitchCase': 1
-        }],
-        // "vue/script-indent": [2, 4, {
-        //     "baseIndent": 1,
-        //     "switchCase": 1
-        // }],
-        "vue/html-indent": [2, 4, {
-            "attribute": 1,
-            "closeBracket": 0,
-            "alignAttributesVertically": true
-        }],
-        'jsx-quotes': [2, 'prefer-single'],
-        'key-spacing': [2, {
-            'beforeColon': false,
-            'afterColon': true
-        }],
-        'keyword-spacing': [2, {
-            'before': true,
-            'after': true
-        }],
-        'new-cap': [2, {
-            'newIsCap': true,
-            'capIsNew': false
-        }],
-        'new-parens': 2,
-        'no-array-constructor': 2,
-        'no-caller': 2,
-        'no-console': 'off',
-        'no-class-assign': 2,
-        'no-cond-assign': 2,
-        'no-const-assign': 2,
-        'no-control-regex': 0,
-        'no-delete-var': 2,
-        'no-dupe-args': 2,
-        'no-dupe-class-members': 2,
-        'no-dupe-keys': 2,
-        'no-duplicate-case': 2,
-        'no-empty-character-class': 2,
-        'no-empty-pattern': 2,
-        'no-eval': 2,
-        'no-ex-assign': 2,
-        'no-extend-native': 2,
-        'no-extra-bind': 2,
-        'no-extra-boolean-cast': 2,
-        'no-extra-parens': [2, 'functions'],
-        'no-fallthrough': 2,
-        'no-floating-decimal': 2,
-        'no-func-assign': 2,
-        'no-implied-eval': 2,
-        'no-inner-declarations': [2, 'functions'],
-        'no-invalid-regexp': 2,
-        'no-irregular-whitespace': 2,
-        'no-iterator': 2,
-        'no-label-var': 2,
-        'no-labels': [2, {
-            'allowLoop': false,
-            'allowSwitch': false
-        }],
-        'no-lone-blocks': 2,
-        'no-mixed-spaces-and-tabs': 2,
-        'no-multi-spaces': 2,
-        'no-multi-str': 2,
-        'no-multiple-empty-lines': [2, {
-            'max': 1
-        }],
-        'no-native-reassign': 2,
-        'no-negated-in-lhs': 2,
-        'no-new-object': 2,
-        'no-new-require': 2,
-        'no-new-symbol': 2,
-        'no-new-wrappers': 2,
-        'no-obj-calls': 2,
-        'no-octal': 2,
-        'no-octal-escape': 2,
-        'no-path-concat': 2,
-        'no-proto': 2,
-        'no-redeclare': 2,
-        'no-regex-spaces': 2,
-        'no-return-assign': [2, 'except-parens'],
-        'no-self-assign': 2,
-        'no-self-compare': 2,
-        'no-sequences': 2,
-        'no-shadow-restricted-names': 2,
-        'no-spaced-func': 2,
-        'no-sparse-arrays': 2,
-        'no-this-before-super': 2,
-        'no-throw-literal': 2,
-        'no-trailing-spaces': 2,
-        'no-undef': 2,
-        'no-undef-init': 2,
-        'no-unexpected-multiline': 2,
-        'no-unmodified-loop-condition': 2,
-        'no-unneeded-ternary': [2, {
-            'defaultAssignment': false
-        }],
-        'no-unreachable': 2,
-        'no-unsafe-finally': 2,
-        // 校验存在定义而未使用的组件
-        'vue/no-unused-components': 'off',
-        // 校验存在定义而未使用的变量
-        'no-unused-vars': 'off',
-        'no-useless-call': 2,
-        'no-useless-computed-key': 2,
-        'no-useless-constructor': 2,
-        'no-useless-escape': 0,
-        'no-whitespace-before-property': 2,
-        'no-with': 2,
-        'one-var': [2, {
-            'initialized': 'never'
-        }],
-        'operator-linebreak': [2, 'after', {
-            'overrides': {
-                '?': 'before',
-                ':': 'before'
-            }
-        }],
-        'padded-blocks': [2, 'never'],
-        'quotes': [2, 'single', {
-            'avoidEscape': true,
-            'allowTemplateLiterals': true
-        }],
-        'semi': [2, 'never'],
-        'semi-spacing': [2, {
-            'before': false,
-            'after': true
-        }],
-        'space-before-blocks': [2, 'always'],
-        'space-before-function-paren': [2, 'always'],
-        'space-in-parens': [2, 'never'],
-        'space-infix-ops': 2,
-        'space-unary-ops': [2, {
-            'words': true,
-            'nonwords': false
-        }],
-        'spaced-comment': [2, 'always', {
-            'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
-        }],
-        'template-curly-spacing': [2, 'never'],
-        'use-isnan': 2,
-        'valid-typeof': 2,
-        'wrap-iife': [2, 'any'],
-        'yield-star-spacing': [2, 'both'],
-        'yoda': [2, 'never'],
-        'prefer-const': 2,
-        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-        'object-curly-spacing': [2, 'always', {
-            objectsInObjects: false
-        }],
-        'array-bracket-spacing': [2, 'never'],
-        'no-async-promise-executor': 'off',
-        'require-atomic-updates': 'off',
-        'no-prototype-builtins': 'off',
-        'no-irregular-whitespace': 'off'
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true
+  },
+  'extends': [
+    'plugin:vue/recommended',
+    'eslint:recommended'
+  ],
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        jest: true
+      }
     }
-}
+  ],
+  // add your custom rules here
+  // it is base on https://github.com/vuejs/eslint-config-vue
+  rules: {
+    'vue/max-attributes-per-line': [2, {
+      'singleline': 30,
+      'multiline': {
+        'max': 1,
+        'allowFirstLine': false
+      }
+    }],
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/name-property-casing': ['error', 'kebab-case'], // |PascalCase
+    'vue/require-default-prop': 'off',
+    'vue/no-v-html': 'off',
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [0, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [2, 2, {
+      'SwitchCase': 1
+    }],
+    // "vue/script-indent": [2, 2, {
+    //     "baseIndent": 1,
+    //     "switchCase": 1
+    // }],
+    "vue/html-indent": [2, 2, {
+      "attribute": 1,
+      "closeBracket": 0,
+      "alignAttributesVertically": true
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    // 校验存在定义而未使用的组件
+    'vue/no-unused-components': 'off',
+    // 校验存在定义而未使用的变量
+    'no-unused-vars': 'off',
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [2, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'always'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [2, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never'],
+    'no-async-promise-executor': 'off',
+    'require-atomic-updates': 'off',
+    'no-prototype-builtins': 'off',
+    'no-irregular-whitespace': 'off'
+  }
+}

.vscode/settings.json

@@ -1,7 +1,13 @@
 {
-    "workbench.colorCustomizations": {
-        "activityBar.background": "#3C2154",
-        "titleBar.activeBackground": "#542E76",
-        "titleBar.activeForeground": "#FDFCFE"
-    }
-}
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit" // 保存时自动修复 ESLint 错误
+  },
+  "editor.formatOnSave": true, // 保存时格式化
+  "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认使用 Prettier
+  "files.autoSave": "onFocusChange",
+  "eslint.validate": ["javascript", "vue"], // 检查 .vue 文件
+  "vetur.validation.template": false, // 关闭 Vetur 的模板检查（由 ESLint 处理）
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode" // Vue 文件用 Prettier 格式化
+  }
+}

src/api/permission/page.js

@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 import {
-    DATA_URL
+  DATA_URL
 } from '@/api/baseUrl'
 
 /**
@@ -9,22 +9,22 @@ import {
  * string userId
  */
 export function getAllIncludeUserStaticPage(params) {
-    return request({
-        url: DATA_URL() + '/static/getAllIncludeUserStaticPage?userId=' + params,
-        method: 'post',
-    })
+  return request({
+    url: DATA_URL() + '/static/getAllIncludeUserStaticPage?userId=' + params,
+    method: 'post'
+  })
 }
 /**
  * 查询-获取所有用户信息
  * @param {*} params
- * 
+ *
  */
 export function getAllUserInfor(params) {
-    return request({
-        url: DATA_URL() + '/static/getAllUserInfor',
-        method: 'post',
-        data: params
-    })
+  return request({
+    url: DATA_URL() + '/static/getAllUserInfor',
+    method: 'post',
+    data: params
+  })
 }
 /**
  * 保存-用户权限的所有静态页面
@@ -32,9 +32,33 @@ export function getAllUserInfor(params) {
  * saveUserData = []
  */
 export function saveStaticPage(params) {
-    return request({
-        url: DATA_URL() + '/static/saveStaticPage',
-        method: 'post',
-        data: params
-    })
-}
+  return request({
+    url: DATA_URL() + '/static/saveStaticPage',
+    method: 'post',
+    data: params
+  })
+}
+/**
+ * 查询-菜单权限一览列表
+ * @param {*} params
+ * saveUserData = []
+ */
+export function searchPagePermission(params) {
+  return request({
+    url: '/platform/v3' + '/role/getPagePermission',
+    method: 'post',
+    data: params
+  })
+}
+/**
+ * 保存-菜单权限一览列表
+ * @param {*} params
+ * saveUserData = []
+ */
+export function savePagePermission(params) {
+  return request({
+    url: '/platform/v3' + '/role/savePagePermission',
+    method: 'post',
+    data: params
+  })
+}

src/components/ibps-card-list/components/search-form/index.vue

@@ -1,101 +1,119 @@
 <template>
-    <el-form
-        v-if="forms"
-        ref="form"
-        :model="params"
-        width="30%"
-        :inline="inline"
-        :label-width="labelWidth ? (labelWidth + 'px') : ''"
-        class="ibps-crud-search-form"
-        @submit.native.prevent
-        @keyup.enter.native.stop="handleEnter"
+  <el-form
+    v-if="forms"
+    ref="form"
+    :model="params"
+    width="30%"
+    :inline="inline"
+    :label-width="labelWidth ? labelWidth + 'px' : ''"
+    class="ibps-crud-search-form"
+    @submit.native.prevent
+    @keyup.enter.native.stop="handleEnter"
+  >
+    <el-form-item
+      v-for="(item, index) in forms"
+      :key="index"
+      :prop="item.fieldType != 'daterange' ? item.prop : datePrefix + index"
+      :rules="item.rules || []"
+      :label-width="item.labelWidth ? item.labelWidth + 'px' : ''"
+      class="search-form-item"
+      @submit.native.prevent
     >
-        <el-form-item
-            v-for="(item, index) in forms"
-            :key="index"
-            :prop="item.fieldType != 'daterange' ? item.prop : (datePrefix + index)"
-            :rules="item.rules || []"
-            :label-width="item.labelWidth ? (item.labelWidth + 'px') : ''"
-            class="search-form-item"
-            @submit.native.prevent
-        >
-            <template slot="label">
-                {{ item.label }}
-            </template>
-            <!-- 文本框-->
-            <el-input
-                v-if="item.fieldType === 'input' || item.fieldType === undefined"
-                v-model="params[item.modelValue]"
-                :size="item.size ? item.size : size"
-                :readonly="item.readonly"
-                :disabled="item.disabled"
-                :placeholder="item.placeholder?item.placeholder:'请输入'"
-                :style="itemStyle + (item.itemWidth ? `width: ${item.itemWidth}px;` : '')"
-                clearable
-                @keyup.enter.native.stop="handleEnter"
-            />
-            <!-- 下拉框-->
-            <el-select
-                v-else-if="item.fieldType === 'select'"
-                v-model="params[item.modelValue]"
-                :size="item.size ? item.size : size"
-                :disabled="item.disabled"
-                :placeholder="item.placeholder?item.placeholder:'请选择'"
-                :style="itemStyle + (item.itemWidth ? `width: ${item.itemWidth}px;` : '')"
-                clearable
-                @keyup.enter.native.stop="handleEnter"
-            >
-                <el-option
-                    v-for="(option, optionIndex) in item.options"
-                    :key="optionIndex + '_local'"
-                    :value="(typeof option === 'object') ? option[item.valueKey || 'value'] : option"
-                    :label="(typeof option === 'object') ? option[item.labelKey || 'label'] : option"
-                />
-                <el-option
-                    v-for="(op, opIndex) in selectOptions[selectOptionPrefix + index]"
-                    :key="opIndex + '_remote'"
-                    :value="(typeof op === 'object') ? op[item.valueKey || 'value'] : op"
-                    :label="(typeof op === 'object') ? op[item.labelKey || 'label'] : op"
-                />
-            </el-select>
-            <!-- 日期-->
-            <el-date-picker
-                v-else-if="item.fieldType === 'date'"
-                v-model="params[item.modelValue]"
-                :placeholder="item.placeholder"
-                :size="item.size ? item.size : size"
-                :disabled="item.disabled"
-                :readonly="item.readonly"
-                :editable="item.editable"
-                :style="itemStyle + (item.itemWidth ? `width: ${item.itemWidth}px;` : '')"
-                :picker-options="item.pickerOptions || {}"
-                :type="item.dateType||'date'"
-                @keyup.enter.native.stop="handleEnter"
-            />
-            <!-- 日期范围-->
-            <el-date-picker
-                v-else-if="item.fieldType === 'daterange'"
-                v-model="params[item.modelValue]"
-                :size="item.size ? item.size : size"
-                :disabled="item.disabled"
-                :readonly="item.readonly"
-                :editable="item.editable"
-                :placeholder="item.placeholder?item.placeholder:'请选择'"
-                :start-placeholder="item.startPlaceholder?item.startPlaceholder:'请选择'"
-                :end-placeholder="item.endPlaceholder?item.endPlaceholder:'请选择'"
-                :style="itemStyle + (item.itemWidth ? `width: ${item.itemWidth}px;` : '')"
-                :picker-options="item.pickerOptions || {}"
-                type="daterange"
-                unlink-panels
-                @change="date => changeDate(date, item.prop[0], item.prop[1])"
-                @keyup.enter.native.stop="handleEnter"
-            />
-            <!-- 自定义slot-->
-            <template v-else-if="item.fieldType === 'slot'">
-                <slot :name="item.slotName" :item="item" />
-            </template>
-        </el-form-item>
-    </el-form>
+      <template slot="label">
+        {{ item.label }}
+      </template>
+      <!-- 文本框-->
+      <el-input
+        v-if="item.fieldType === 'input' || item.fieldType === undefined"
+        v-model="params[item.modelValue]"
+        :size="item.size ? item.size : size"
+        :readonly="item.readonly"
+        :disabled="item.disabled"
+        :placeholder="item.placeholder ? item.placeholder : '请输入'"
+        :style="
+          itemStyle + (item.itemWidth ? `width: ${item.itemWidth}px;` : '')
+        "
+        clearable
+        @keyup.enter.native.stop="handleEnter"
+      />
+      <!-- 下拉框-->
+      <el-select
+        v-else-if="item.fieldType === 'select'"
+        v-model="params[item.modelValue]"
+        :size="item.size ? item.size : size"
+        :disabled="item.disabled"
+        :placeholder="item.placeholder ? item.placeholder : '请选择'"
+        :style="
+          itemStyle + (item.itemWidth ? `width: ${item.itemWidth}px;` : '')
+        "
+        clearable
+        @keyup.enter.native.stop="handleEnter"
+      >
+        <el-option
+          v-for="(option, optionIndex) in item.options"
+          :key="optionIndex + '_local'"
+          :value="
+            typeof option === 'object'
+              ? option[item.valueKey || 'value']
+              : option
+          "
+          :label="
+            typeof option === 'object'
+              ? option[item.labelKey || 'label']
+              : option
+          "
+        />
+        <el-option
+          v-for="(op, opIndex) in selectOptions[selectOptionPrefix + index]"
+          :key="opIndex + '_remote'"
+          :value="typeof op === 'object' ? op[item.valueKey || 'value'] : op"
+          :label="typeof op === 'object' ? op[item.labelKey || 'label'] : op"
+        />
+      </el-select>
+      <!-- 日期-->
+      <el-date-picker
+        v-else-if="item.fieldType === 'date'"
+        v-model="params[item.modelValue]"
+        :placeholder="item.placeholder"
+        :size="item.size ? item.size : size"
+        :disabled="item.disabled"
+        :readonly="item.readonly"
+        :editable="item.editable"
+        :style="
+          itemStyle + (item.itemWidth ? `width: ${item.itemWidth}px;` : '')
+        "
+        :picker-options="item.pickerOptions || {}"
+        :type="item.dateType || 'date'"
+        @keyup.enter.native.stop="handleEnter"
+      />
+      <!-- 日期范围-->
+      <el-date-picker
+        v-else-if="item.fieldType === 'daterange'"
+        v-model="params[item.modelValue]"
+        :size="item.size ? item.size : size"
+        :disabled="item.disabled"
+        :readonly="item.readonly"
+        :editable="item.editable"
+        :placeholder="item.placeholder ? item.placeholder : '请选择'"
+        :start-placeholder="
+          item.startPlaceholder ? item.startPlaceholder : '请选择'
+        "
+        :end-placeholder="item.endPlaceholder ? item.endPlaceholder : '请选择'"
+        :style="
+          itemStyle + (item.itemWidth ? `width: ${item.itemWidth}px;` : '')
+        "
+        :picker-options="item.pickerOptions || {}"
+        type="daterange"
+        unlink-panels
+        @change="(date) => changeDate(date, item.prop[0], item.prop[1])"
+        @keyup.enter.native.stop="handleEnter"
+      />
+      <!-- 自定义slot-->
+      <template v-else-if="item.fieldType === 'slot'">
+        <slot :name="item.slotName" :item="item" />
+      </template>
+    </el-form-item>
+  </el-form>
 </template>
 
 <script>
@@ -103,179 +121,195 @@ import { formProps } from './props.js'
 import request from '@/utils/request'
 
 export default {
-    name: 'ibps-search-form',
-    props: formProps,
-    data () {
-        const { forms, fuzzy } = this.$props
-        const datePrefix = 'daterange-prefix'
-        const selectOptionPrefix = 'select-option-prefix'
-        const dataObj = {
-            selectOptions: {}
-        }
-        const params = {}
-        const nameParams = {}
-        const format = {}
-        const fuzzyOps = {}
+  name: 'ibps-search-form',
+  props: formProps,
+  data() {
+    const { forms, fuzzy } = this.$props
+    const datePrefix = 'daterange-prefix'
+    const selectOptionPrefix = 'select-option-prefix'
+    const dataObj = {
+      selectOptions: {}
+    }
+    const params = {}
+    const nameParams = {}
+    const format = {}
+    const fuzzyOps = {}
 
-        forms.forEach((v, i) => {
-            const propType = typeof v.prop
-            if (propType === 'string') {
-                v.modelValue = v.prop
-                params[v.prop] = v.value || ''
-                if (v.name) {
-                    nameParams[v.prop] = v.name
-                }
+    forms.forEach((v, i) => {
+      const propType = typeof v.prop
+      if (propType === 'string') {
+        v.modelValue = v.prop
+        params[v.prop] = v.value || ''
+        if (v.name) {
+          nameParams[v.prop] = v.name
+        }
 
-                fuzzyOps[v.prop] = v.fuzzy ? v.fuzzy : fuzzy
-                if (v.format) {
-                    format[v.prop] = v.format
-                }
-            } else if (propType === 'object' && Object.prototype.toString.call(v.prop) === '[object Array]') {
-                v.prop.forEach((vv, j) => {
-                    params[vv] = vv.value || ''
-                    if (v.name) {
-                        nameParams[vv] = v.name[j]
-                    }
-                    if (v.format) {
-                        format[vv] = v.format
-                    }
-                    fuzzyOps[vv] = v.fuzzy ? v.fuzzy : fuzzy
-                })
-            }
-            if (v.fieldType === 'daterange') {
-                params[datePrefix + i] = ''
-                v.modelValue = datePrefix + i
-            } else if (v.fieldType === 'select' && (v.selectFetch || v.selectUrl)) {
-                const dataKey = selectOptionPrefix + i
-                dataObj.selectOptions[dataKey] = []
-                if (!v.selectMethod) {
-                    v.selectMethod = 'get'
-                }
-                this.getRemoteData({
-                    fetch: v.selectFetch ? v.selectFetch : () => {
-                        const p = v.selectMethod.toLowerCase() === 'get'
-                            ? { params: v.selectParams } : v.selectParams
-                        return request({
-                            url: v.selectUrl,
-                            method: v.selectMethod,
-                            p
-                        })
-                    },
-                    dataKey,
-                    resultField: v.resultField || 'data',
-                    resultHandler: v.resultHandler
-                })
-            }
+        fuzzyOps[v.prop] = v.fuzzy ? v.fuzzy : fuzzy
+        if (v.format) {
+          format[v.prop] = v.format
+        }
+      } else if (
+        propType === 'object' &&
+        Object.prototype.toString.call(v.prop) === '[object Array]'
+      ) {
+        v.prop.forEach((vv, j) => {
+          params[vv] = vv.value || ''
+          if (v.name) {
+            nameParams[vv] = v.name[j]
+          }
+          if (v.format) {
+            format[vv] = v.format
+          }
+          fuzzyOps[vv] = v.fuzzy ? v.fuzzy : fuzzy
         })
-        return {
-            params,
-            nameParams,
-            datePrefix,
-            selectOptionPrefix,
-            ...dataObj,
-            format,
-            fuzzyOps
+      }
+      if (v.fieldType === 'daterange') {
+        params[datePrefix + i] = ''
+        v.modelValue = datePrefix + i
+      } else if (v.fieldType === 'select' && (v.selectFetch || v.selectUrl)) {
+        const dataKey = selectOptionPrefix + i
+        dataObj.selectOptions[dataKey] = []
+        if (!v.selectMethod) {
+          v.selectMethod = 'get'
         }
+        this.getRemoteData({
+          fetch: v.selectFetch
+            ? v.selectFetch
+            : () => {
+                const p =
+                  v.selectMethod.toLowerCase() === 'get'
+                    ? { params: v.selectParams }
+                    : v.selectParams
+                return request({
+                  url: v.selectUrl,
+                  method: v.selectMethod,
+                  p
+                })
+              },
+          dataKey,
+          resultField: v.resultField || 'data',
+          resultHandler: v.resultHandler
+        })
+      }
+    })
+    return {
+      params,
+      nameParams,
+      datePrefix,
+      selectOptionPrefix,
+      ...dataObj,
+      format,
+      fuzzyOps
+    }
+  },
+  computed: {
+    itemStyle() {
+      const { itemWidth } = this
+      if (itemWidth) {
+        return `width: ${itemWidth}px;`
+      }
+      return ''
+    }
+  },
+  methods: {
+    /**
+     * 处理回车
+     */
+    handleEnter() {
+      this.$emit('search')
     },
-    computed: {
-        itemStyle () {
-            const { itemWidth } = this
-            if (itemWidth) {
-                return `width: ${itemWidth}px;`
-            }
-            return ''
-        }
+    isArray(value) {
+      return (
+        typeof value === 'object' &&
+        Object.prototype.toString.call(value) === '[object Array]'
+      )
     },
-    methods: {
-        /**
-         * 处理回车
-         */
-        handleEnter () {
-            this.$emit('search')
-        },
-        isArray (value) {
-            return typeof value === 'object' && Object.prototype.toString.call(value) === '[object Array]'
-        },
-        getParamFuzzy () {
-            return this.fuzzyOps
-        },
-        /**
-         * 获取参数
-         */
-        getParams (callback) {
-            this.$refs['form'].validate(valid => {
-                if (valid) {
-                    const { params, nameParams, datePrefix, format } = this
-                    const formattedForm = {}
-                    Object.keys(params).forEach(v => {
-                        if (v.indexOf(datePrefix) === -1) {
-                            const val = format[v] ? format[v](params[v], v) : params[v]
-                            if (this.$utils.isNotEmpty(val)) {
-                                let key = v
-                                if (nameParams[v]) {
-                                    key = nameParams[v]
-                                }
-                                formattedForm[key] = val
-                            }
-                        }
-                    })
-                    if (callback) callback(null, formattedForm)
-                } else {
-                    if (callback) callback(new Error())
+    getParamFuzzy() {
+      return this.fuzzyOps
+    },
+    /**
+     * 获取参数
+     */
+    getParams(callback) {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          const { params, nameParams, datePrefix, format } = this
+          const formattedForm = {}
+          Object.keys(params).forEach((v) => {
+            if (v.indexOf(datePrefix) === -1) {
+              const val = format[v] ? format[v](params[v], v) : params[v]
+              if (this.$utils.isNotEmpty(val)) {
+                let key = v
+                if (nameParams[v]) {
+                  key = nameParams[v]
                 }
-            })
-        },
-        /**
-         *重置表单
-        */
-        resetSearchForm () {
-            this.$refs['form'].resetFields()
-        },
-        changeDate (date, startDate, endDate) {
-            let dates
-            if (date === null) {
-                this.params[startDate] = ''
-                this.params[endDate] = ''
-                return
+                formattedForm[key] = val
+              }
             }
-            if (typeof date === 'string') {
-                dates = date.split(' - ')
-            } else if (date && date.hasOwnProperty('length')) {
-                const firstDate = date[0]
-                const secondDate = date[1]
-                dates = [
-                    `${firstDate.getFullYear()}-${('0' + (firstDate.getMonth() + 1)).substr(-2)}-${('0' + firstDate.getDate()).substr(-2)}`,
-                    `${secondDate.getFullYear()}-${('0' + (secondDate.getMonth() + 1)).substr(-2)}-${('0' + secondDate.getDate()).substr(-2)}`
-                ]
-            }
-            this.params[startDate] = dates[0]
-            this.params[endDate] = dates[1]
-        },
-        /**
-         * 获取的远程数据【下拉框】
-         */
-        getRemoteData ({ fetch, dataKey, resultField, resultHandler }) {
-            fetch().then(response => {
-                let result = response
-                if (typeof response === 'object' && !this.isArray(response)) {
-                    if (resultField.indexOf('.') !== -1) {
-                        resultField.split('.').forEach(vv => {
-                            result = result[vv]
-                        })
-                    } else {
-                        result = response[resultField]
-                    }
-                }
-                if (!result || !(result instanceof Array)) {
-                    throw new Error(`The result of key:${resultField} is not Array.`)// 接口返回的字段:${resultField} 不是一个数组
-                }
-                if (this.resultHandler) {
-                    this.selectOptions[dataKey] = result.map(this.resultHandler)
-                } else {
-                    this.selectOptions[dataKey] = result
-                }
+          })
+          if (callback) callback(null, formattedForm)
+        } else {
+          if (callback) callback(new Error())
+        }
+      })
+    },
+    /**
+     *重置表单
+     */
+    resetSearchForm() {
+      this.$refs['form'].resetFields()
+    },
+    changeDate(date, startDate, endDate) {
+      let dates
+      if (date === null) {
+        this.params[startDate] = ''
+        this.params[endDate] = ''
+        return
+      }
+      if (typeof date === 'string') {
+        dates = date.split(' - ')
+      } else if (date && date.hasOwnProperty('length')) {
+        const firstDate = date[0]
+        const secondDate = date[1]
+        dates = [
+          `${firstDate.getFullYear()}-${(
+            '0' +
+            (firstDate.getMonth() + 1)
+          ).substr(-2)}-${('0' + firstDate.getDate()).substr(-2)}`,
+          `${secondDate.getFullYear()}-${(
+            '0' +
+            (secondDate.getMonth() + 1)
+          ).substr(-2)}-${('0' + secondDate.getDate()).substr(-2)}`
+        ]
+      }
+      this.params[startDate] = dates[0]
+      this.params[endDate] = dates[1]
+    },
+    /**
+     * 获取的远程数据【下拉框】
+     */
+    getRemoteData({ fetch, dataKey, resultField, resultHandler }) {
+      fetch().then((response) => {
+        let result = response
+        if (typeof response === 'object' && !this.isArray(response)) {
+          if (resultField.indexOf('.') !== -1) {
+            resultField.split('.').forEach((vv) => {
+              result = result[vv]
             })
+          } else {
+            result = response[resultField]
+          }
+        }
+        if (!result || !(result instanceof Array)) {
+          throw new Error(`The result of key:${resultField} is not Array.`) // 接口返回的字段:${resultField} 不是一个数组
+        }
+        if (this.resultHandler) {
+          this.selectOptions[dataKey] = result.map(this.resultHandler)
+        } else {
+          this.selectOptions[dataKey] = result
         }
+      })
     }
+  }
 }
 </script>

src/components/ibps-crud/mixin/data.js

@@ -3,202 +3,202 @@ import { on, off } from 'element-ui/lib/utils/dom'
 import Sortable from 'sortablejs'
 
 export default {
-    props: {
-        /**
+  props: {
+    /**
          * @description 表格数据
          */
-        data: {
-            type: Array,
-            required: true
-        },
-        height: {
-            type: [Number, String]
-        },
-        defaultSortType: {
-            type: [String, Function],
-            default: 'underline'
-        }
+    data: {
+      type: Array,
+      required: true
+    },
+    height: {
+      type: [Number, String]
     },
-    data () {
-        return {
-            /**
+    defaultSortType: {
+      type: [String, Function],
+      default: 'underline'
+    }
+  },
+  data() {
+    return {
+      /**
              * @description 表格内部数据
              */
-            ibpsData: [],
-            /**
+      ibpsData: [],
+      /**
              *  @description 搜索框是否显示
              */
-            showToolbar: true,
-            /**
+      showToolbar: true,
+      /**
              * @description 表格的高度
              */
-            tableHeight: null,
-            /**
+      tableHeight: null,
+      /**
              * @description 工具栏的高度
              */
-            toolbarBoxHeight: 0,
-            /**
+      toolbarBoxHeight: 0,
+      /**
              * @description 选中的列
              */
-            $selections: null,
-            /**
+      $selections: null,
+      /**
              * @description 选中的选项
              */
-            selectionRadio: '',
-            sortable: null
-        }
+      selectionRadio: '',
+      sortable: null
+    }
+  },
+  computed: {
+    ibpsDataLength() {
+      return this.ibpsData.length
     },
-    computed: {
-        ibpsDataLength () {
-            return this.ibpsData.length
-        },
-        thatSocpe () {
-            return this
-        }
+    thatSocpe() {
+      return this
+    }
+  },
+  watch: {
+    data() {
+      this.handleDataChange()
     },
-    watch: {
-        data () {
-            this.handleDataChange()
-        },
-        ibpsData: {
-            handler (val) {
-                this.$emit('ibps-data-change', val)
-            },
-            deep: true
-        },
-        height: {
-            handler (val, oldVal) {
-                this.handleTableHeight()
-            }
-        }
+    ibpsData: {
+      handler(val) {
+        this.$emit('ibps-data-change', val)
+      },
+      deep: true
     },
-    mounted () {
-        this.toolbarBoxHeight = this.$refs.toolbarBox ? this.$refs.toolbarBox.offsetHeight : 0
-        this.handleDataChange()
+    height: {
+      handler(val, oldVal) {
         this.handleTableHeight()
-        on(document.body, 'resize', this.handleResize)
-    },
-    beforeDestroy () {
-        off(document.body, 'resize', this.handleResize)
-        this.ibpsData = null
-    },
-    methods: {
-        /**
+      }
+    }
+  },
+  mounted() {
+    this.toolbarBoxHeight = this.$refs.toolbarBox ? this.$refs.toolbarBox.offsetHeight : 0
+    this.handleDataChange()
+    this.handleTableHeight()
+    on(document.body, 'resize', this.handleResize)
+  },
+  beforeDestroy() {
+    off(document.body, 'resize', this.handleResize)
+    this.ibpsData = null
+  },
+  methods: {
+    /**
          * @description lodash.get
          */
-        _get: get,
-        /**
+    _get: get,
+    /**
          * @description lodash.set
          */
-        _set: set,
-        /**
+    _set: set,
+    /**
          * @description 同步外部表格数据到ibpsData内部
          */
-        handleDataChange () {
-            if (this.ibpsData !== this.data) {
-                this.ibpsData = cloneDeep(this.data)
-            }
-        },
-        // 初始化拖拽排序
-        initSortable () {
-            // 获取表格的tbody元素
-            const el = this.$refs.elTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
-            this.sortable = new Sortable(el, {
-                // 拖拽时的类名
-                ghostClass: 'sortable-ghost',
-                // 拖拽动画时间
-                animation: 150,
-                // 结束拖拽时的回调
-                onEnd: (evt) => {
-                    const { oldIndex, newIndex } = evt
-                    // 处理数据交换
-                    const currRow = this.ibpsData.splice(oldIndex, 1)[0]
-                    this.ibpsData.splice(newIndex, 0, currRow)
-                    console.log('排序已变更', this.ibpsData)
-                }
-            })
-        },
-        /**
+    handleDataChange() {
+      if (this.ibpsData !== this.data) {
+        this.ibpsData = cloneDeep(this.data)
+      }
+    },
+    // 初始化拖拽排序
+    initSortable() {
+      // 获取表格的tbody元素
+      const el = this.$refs.elTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
+      this.sortable = new Sortable(el, {
+        // 拖拽时的类名
+        ghostClass: 'sortable-ghost',
+        // 拖拽动画时间
+        animation: 150,
+        // 结束拖拽时的回调
+        onEnd: (evt) => {
+          const { oldIndex, newIndex } = evt
+          // 处理数据交换
+          const currRow = this.ibpsData.splice(oldIndex, 1)[0]
+          this.ibpsData.splice(newIndex, 0, currRow)
+          console.log('排序已变更', this.ibpsData)
+        }
+      })
+    },
+    /**
          * @description 排序状态
          */
-        handleSortChange (params) {
-            const { column, prop, order } = params
-            let sortBy = column ? column.sortBy : null
-            if (!sortBy && prop) { // 格式化默认排序字段
-                if (typeof this.defaultSortType === 'function') {
-                    sortBy = this.sortType(params)
-                } else {
-                    if (this.defaultSortType === 'underline') {
-                        const reg = /^[A-Z0-9_]*$/ // 处理离线表字段是否已经是符合数据库查询属性格式
-                        if (!reg.test(prop)) {
-                            const r = /^[a-z0-9_]*$/
-                            const rs = /_/
-                            sortBy = r.test(prop) ? (rs.test(prop) ? prop.toUpperCase() : prop.toUpperCase() + '_') : snakeCase(prop).toUpperCase() + '_'
-                        } else {
-                            sortBy = prop
-                        }
-                    } else {
-                        sortBy = prop
-                    }
-                }
+    handleSortChange(params) {
+      const { column, prop, order } = params
+      let sortBy = column ? column.sortBy : null
+      if (!sortBy && prop) { // 格式化默认排序字段
+        if (typeof this.defaultSortType === 'function') {
+          sortBy = this.sortType(params)
+        } else {
+          if (this.defaultSortType === 'underline') {
+            const reg = /^[A-Z0-9_]*$/ // 处理离线表字段是否已经是符合数据库查询属性格式
+            if (!reg.test(prop)) {
+              const r = /^[a-z0-9_]*$/
+              const rs = /_/
+              sortBy = r.test(prop) ? (rs.test(prop) ? prop.toUpperCase() : prop.toUpperCase() + '_') : snakeCase(prop).toUpperCase() + '_'
+            } else {
+              sortBy = prop
             }
-            this.$emit('sort-change', { column, sortBy, order })
-        },
-        /**
+          } else {
+            sortBy = prop
+          }
+        }
+      }
+      this.$emit('sort-change', { column, sortBy, order })
+    },
+    /**
          * @description 更新行数据
          * @param {Number} index 表格数据索引
          * @param {Object} row 更新的表格行数据
          */
-        updateRow (index, row) {
-            this.$set(this.ibpsData, index, row)
-        },
-        /**
+    updateRow(index, row) {
+      this.$set(this.ibpsData, index, row)
+    },
+    /**
          * @description 添加行数据
          * @param {Object} row 添加的表格行数据
          */
-        addRow (row) {
-            this.$set(this.ibpsData, this.ibpsData.length, row)
-        },
-        /**
+    addRow(row) {
+      this.$set(this.ibpsData, this.ibpsData.length, row)
+    },
+    /**
          * @description 删除行
          * @param {Object} index 被删除行索引
          */
-        removeRow (index) {
-            this.$delete(this.ibpsData, index)
-        },
-        handleResize () {
-            this.handleTableHeight()
-        },
-        doLayout () {
-            if (this.$refs.elTable) {
-                this.$refs.elTable.doLayout()
-            }
-        },
-        handleTableHeight (showToolbar) {
-            if (this.height) {
-                this.tableHeight = this.height
-            } else if (this.$refs.ibpsCrud) {
-                this.tableHeight = this.$refs.ibpsCrud.clientHeight
-            }
-            if (this.$refs.ibpsCrudHeader) {
-                this.tableHeight -= this.$refs.ibpsCrudHeader.clientHeight
-            }
-            if (this.$refs.ibpsCrudFooter) {
-                this.tableHeight -= this.$refs.ibpsCrudFooter.clientHeight
-            }
+    removeRow(index) {
+      this.$delete(this.ibpsData, index)
+    },
+    handleResize() {
+      this.handleTableHeight()
+    },
+    doLayout() {
+      if (this.$refs.elTable) {
+        this.$refs.elTable.doLayout()
+      }
+    },
+    handleTableHeight(showToolbar) {
+      if (this.height) {
+        this.tableHeight = this.height
+      } else if (this.$refs.ibpsCrud) {
+        this.tableHeight = this.$refs.ibpsCrud.clientHeight
+      }
+      if (this.$refs.ibpsCrudHeader) {
+        this.tableHeight -= this.$refs.ibpsCrudHeader.clientHeight
+      }
+      if (this.$refs.ibpsCrudFooter) {
+        this.tableHeight -= this.$refs.ibpsCrudFooter.clientHeight
+      }
 
-            if (!this.tableHeight || this.tableHeight <= 0) { // 页面加载完成后设置高度
-                debounce(this.handleTableHeight, 100)()
-            } else {
-                if (showToolbar) {
-                    if (this.showToolbar) {
-                        this.tableHeight -= this.toolbarBoxHeight
-                    } else {
-                        this.tableHeight += this.toolbarBoxHeight
-                    }
-                }
-            }
-            if (this.$refs.elTable) { this.$refs.elTable.doLayout() }
+      if (!this.tableHeight || this.tableHeight <= 0) { // 页面加载完成后设置高度
+        debounce(this.handleTableHeight, 100)()
+      } else {
+        if (showToolbar) {
+          if (this.showToolbar) {
+            this.tableHeight -= this.toolbarBoxHeight
+          } else {
+            this.tableHeight += this.toolbarBoxHeight
+          }
         }
+      }
+      if (this.$refs.elTable) { this.$refs.elTable.doLayout() }
     }
+  }
 }

src/views/platform/auth/board/index.vue

@@ -1,9 +1,692 @@
 <template>
-    <div> 111111111</div>
+  <div class="container-component">
+    <div ref="ibpsCrud" class="ibps-container-crud">
+      <!-- 工具栏 -->
+      <!-- 标题栏-->
+      <div class="jbd-title-cont"> 菜单权限一览列表 </div>
+      <div ref="ibpsCrudHeader" class="ibps-container-crud__header">
+        <div
+          class="header"
+          style="
+            overflow: scroll;
+            height: 100%;
+            background-color: #f9ffff;
+            border-bottom: 0px;
+            border-top: 0px;
+            overflow: hidden;
+          "
+        >
+          <!-- 换了位置 -->
+          <div
+            ref="toolbarBox"
+            class="toolbar-box clear"
+            style="padding: 0px; border: 0px"
+          >
+            <el-form
+              :inline="true"
+              :model="formInline"
+              size="mini"
+              class="demo-form-inline"
+            >
+              <el-form-item label="角色名称：">
+                <el-input
+                  v-model="formInline.roleName"
+                  placeholder="输入角色名称"
+                />
+              </el-form-item>
+              <el-form-item label="页面名称：">
+                <el-input
+                  v-model="formInline.pageName"
+                  clearable
+                  placeholder="输入页面资源名称"
+                />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" @click="onSubmit">查询</el-button>
+                <el-button v-show="editFalg" type="primary" @click="tableSave"
+                  >保存</el-button
+                >
+                <el-button v-show="!editFalg" type="primary" @click="tableEdit"
+                  >编辑</el-button
+                >
+                <el-button v-show="editFalg" @click="tableCacel"
+                  >取消</el-button
+                >
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </div>
+      <!--列表--><!--   @header-dragend="handleHeaderDragend" 拖拽事件取消 -->
+      <el-table
+        ref="elTable"
+        v-loading="loading"
+        border
+        :data="ibpsData"
+        :height="tableHeight"
+        :header-cell-style="{
+          color: '#000',
+          'font-size': '14px',
+          padding: '6px 6px'
+        }"
+        :stripe="false"
+        :row-class-name="tableRowClassName"
+        @current-change="handleCurrentChange"
+        @select="handleSelect"
+        @select-all="handleSelectAll"
+        @selection-change="handleSelectionChange"
+        @sort-change="handleSortChange"
+        @cell-mouse-enter="handleCellMouseEnter"
+        @cell-mouse-leave="handleCellMouseLeave"
+        @cell-click="handleCellClick"
+        @cell-dblclick="handleCellDblclick"
+        @row-click="handleRowClick"
+        @row-contextmenu="handleRowContextmenu"
+        @row-dblclick="handleRowDblclick"
+        @header-click="handleHeaderClick"
+        @header-dragend="handleHeaderDragend"
+        @header-contextmenu="handleHeaderContextmenu"
+      >
+        <template slot="empty">
+          <slot v-if="$slots.empty" name="empty" />
+          <ibps-empty v-else />
+        </template>
+        <el-table-column
+          show-overflow-tooltip
+          min-width="280"
+          prop="pageName"
+          label="功能页面名称/角色名称"
+        />
+        <el-table-column
+          v-for="item in columns"
+          :key="item"
+          :prop="item"
+          :label="item"
+          align="center"
+          :width="calcColumnWidth(item)"
+        >
+          <template slot-scope="{ row, column, $index }">
+            <span v-if="!editFalg">{{
+              row.rolePermissions[item] ? '✔' : ''
+            }}</span>
+            <el-checkbox
+              v-else
+              v-model="row.rolePermissions[item]"
+              @change="rowChange(row)"
+            />
+          </template>
+          <!-- <span>{{ row }} -{{ column }}-{{ $index }}</span> -->
+        </el-table-column>
+        <!--操作列end-->
+      </el-table>
+      <!--分页 或底部 自定义底部-->
+      <div
+        v-if="isShowPagination"
+        ref="ibpsCrudFooter"
+        class="ibps-container-crud__footer"
+      >
+        <template v-if="$slots.footer">
+          <slot name="footer" />
+        </template>
+        <el-pagination
+          v-else
+          :current-page="currentPage"
+          :page-size="pageSize"
+          :total="pagination.totalCount"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="prev, pager, next,sizes, jumper, ->, total"
+          @size-change="handlePaginationSizeChange"
+          @current-change="handlePaginationCurrentChange"
+          @prev-click="handlePaginationPrevClick"
+          @next-click="handlePaginationNextClick"
+        >
+          <template>
+            <span class="el-pagination__total">{{ pageInfo }}</span>
+          </template>
+        </el-pagination>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {}
+import { debounce } from 'lodash'
+import { searchPagePermission, savePagePermission } from '@/api/permission/page'
+export default {
+  name: 'board-list',
+  data() {
+    return {
+      formInline: {
+        roleName: '',
+        pageName: ''
+      },
+      pagination: {
+        pageNo: 1,
+        limit: 20,
+        totalCount: 0,
+        totalPages: 1
+      },
+      columns: [],
+      isShowPagination: true,
+      /**
+       *  @description 搜索框是否显示
+       */
+      showToolbar: true,
+      /**
+       * @description 表格的高度
+       */
+      tableHeight: null,
+      /**
+       * @description 工具栏的高度
+       */
+      toolbarBoxHeight: 0,
+      /**
+       * @description 选中的列
+       */
+      $selections: null,
+      /**
+       * @description 选中的选项
+       */
+      selectionRadio: '',
+      sortable: null,
+      // 编辑开关
+      editFalg: false,
+      ibpsData: [],
+      loading: false,
+      changeRows: []
+    }
+  },
+  computed: {
+    currentPage() {
+      return this.pagination.pageNo || 1
+    },
+    pageSize() {
+      return this.pagination.limit || 20
+    },
+    /**
+     * 分页信息
+     */
+    pageInfo() {
+      if (!this.showPagination) return ''
+      const total = this.pagination[this.totalKey]
+      if (total && total > 0) {
+        const start = (this.currentPage - 1) * this.pageSize + 1
+        let end = this.currentPage * this.pageSize
+        if (total <= end) {
+          end = total
+        }
+        // `第${start}到第${end}条 共${total}条`
+        return this.$t('components.crud.pagination.pageInfo', {
+          start: start,
+          end: end,
+          total: total
+        })
+      } else {
+        return !total ? this.$t('components.crud.pagination.noData') : '' // '暂无数据'
+      }
+    }
+  },
+  mounted() {
+    const id = setTimeout(() => {
+      this.handleTableHeight()
+      clearTimeout(id)
+    }, 300)
+    this.search()
+  },
+  methods: {
+    search() {
+      this.loading = true
+      try {
+        searchPagePermission({
+          requestPage: {
+            limit: this.pagination.limit,
+            pageNo: this.pagination.pageNo
+          },
+          customs: this.formInline
+        }).then((res) => {
+          this.loading = false
+          if (res.state === 200 && res.data) {
+            const { data, pageResult } = res.data || {
+              data: {},
+              pageResult: {}
+            }
+            this.pagination = pageResult
+            this.columns = data.roles
+            console.log('permissions===>', data.permissions)
+            this.ibpsData = data.permissions
+          } else {
+            this.pagination = {
+              pageNo: 1,
+              limit: 20,
+              totalCount: 0,
+              totalPages: 1
+            }
+            this.ibpsData = []
+          }
+        })
+      } catch (error) {
+        this.loading = false
+      }
+    },
+    rowChange(row) {
+      const flag = this.changeRows.some((t) => t.pageId === row.pageId)
+      if (!flag) {
+        this.changeRows.push(row)
+      }
+    },
+    // 计算列宽：根据文字长度，加一些边距
+    calcColumnWidth(label) {
+      let width = 0
+      for (let i = 0; i < label.length; i++) {
+        // 汉字占 16px，英文/数字占 8px（可调整）
+        const char = label.charAt(i)
+        width += /[^\x00-\xff]/.test(char) ? 16 : 12
+      }
+      if (width + 24 < 60) {
+        return 60
+      }
+      return width + 24 // 加 20px 边距，避免文字贴边
+    },
+    onSubmit() {
+      console.log('submit!')
+      this.search()
+    },
+    tableEdit() {
+      this.editFalg = true
+    },
+    tableSave() {
+      this.loading = true
+      savePagePermission({
+        permissions: this.changeRows
+      }).then((res) => {
+        this.editFalg = false
+        this.search()
+      })
+    },
+    tableCacel() {
+      this.editFalg = false
+    },
+    /**
+     * @description 每页条数改变
+     */
+    handlePaginationSizeChange(pageSize) {
+      this.handlePaginationChange({
+        currentPage: 1,
+        pageSize: pageSize
+      })
+    },
+    /**
+     * @description 当前页码改变
+     */
+    handlePaginationCurrentChange(currentPage) {
+      this.handlePaginationChange({ currentPage: currentPage })
+    },
+    /**
+     * @description 上一页
+     */
+    handlePaginationPrevClick(currentPage) {
+      this.handlePaginationChange({ currentPage: currentPage })
+    },
+    /**
+     * @description 下一页
+     */
+    handlePaginationNextClick(currentPage) {
+      this.handlePaginationChange({ currentPage: currentPage })
+    },
+    handlePaginationChange({ pageSize, currentPage }) {
+      this.pagination.limit = pageSize || this.pageSize
+      this.pagination.pageNo = currentPage || this.currentPage
+      this.search()
+    },
+    /**
+     * @description 排序状态
+     */
+    handleSortChange(params) {
+      const { column, prop, order } = params
+      const sortBy = column ? column.sortBy : null
+    },
+    indexMethod(index) {
+      if (this.pagination) {
+        return (this.currentPage - 1) * this.pageSize + index + 1
+      } else {
+        return index + 1
+      }
+    },
+    handleResize() {
+      this.handleTableHeight()
+    },
+    doLayout() {
+      if (this.$refs.elTable) {
+        this.$refs.elTable.doLayout()
+      }
+    },
+    handleTableHeight(showToolbar) {
+      if (this.height) {
+        this.tableHeight = this.height
+      } else if (this.$refs.ibpsCrud) {
+        this.tableHeight = this.$refs.ibpsCrud.clientHeight
+      }
+      if (this.$refs.ibpsCrudHeader) {
+        this.tableHeight -= this.$refs.ibpsCrudHeader.clientHeight
+      }
+      if (this.$refs.ibpsCrudFooter) {
+        this.tableHeight -= this.$refs.ibpsCrudFooter.clientHeight
+      }
+
+      if (!this.tableHeight || this.tableHeight <= 0) {
+        // 页面加载完成后设置高度
+        debounce(this.handleTableHeight, 100)()
+      } else {
+        if (showToolbar) {
+          if (this.showToolbar) {
+            this.tableHeight -= this.toolbarBoxHeight
+          } else {
+            this.tableHeight += this.toolbarBoxHeight
+          }
+        }
+      }
+      if (this.$refs.elTable) {
+        this.$refs.elTable.doLayout()
+      }
+    },
+    /* 表格換颜色*/
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 1) return 'warning-row'
+      return 'success-row'
+    },
+    setSelectionRadio(row) {
+      const radio = row ? this.getPkValue(row) : ''
+      if (radio !== this.selectionRadio) {
+        this.$set(this, 'selectionRadio', radio)
+      }
+    },
+    clearSelection() {
+      if (this.selectionType === 'radio') {
+        this.setSelectionRadio()
+      } else {
+        this.$refs.elTable.clearSelection()
+      }
+    },
+    toggleRowSelection(row, selected) {
+      if (this.selectionType !== 'radio') {
+        this.$refs.elTable.toggleRowSelection(row, selected)
+      }
+    },
+    toggleAllSelection() {
+      this.$refs.elTable.toggleAllSelection()
+    },
+    toggleSelectionRow(row, selected) {
+      const pkValue = this.getPkValue(row)
+      for (var i = 0; i < this.ibpsData.length; i++) {
+        const data = this.ibpsData[i]
+
+        if (this.getPkValue(data) === pkValue) {
+          this.$refs.elTable.toggleRowSelection(data, selected)
+        }
+      }
+    },
+    /**
+     * @description 处理工具栏收缩/展开
+     */
+    handleCollapseExpandToolbar() {
+      this.showToolbar = !this.showToolbar
+      this.handleTableHeight(true)
+      this.$emit('collapse-expand-toolbar', this.showToolbar)
+    },
+    /**
+     * @description 行选中状态
+     */
+    handleCurrentChange(currentRow, oldCurrentRow) {
+      this.$emit('current-change', currentRow, oldCurrentRow)
+    },
+    /**
+     * @description 勾选数据时触发的事件
+     */
+    handleSelect(selection, row) {
+      this.$emit('select', selection, row)
+    },
+    /**
+     * @description 勾选全选时触发的事件
+     */
+    handleSelectAll(selection) {
+      this.$emit('select-all', selection)
+    },
+    /**
+     * @description 复选框选择项发生变化时触发的事件
+     */
+    handleSelectionChange(selection) {
+      this.$selections = selection
+      this.$emit('selection-change', selection)
+    },
+    /**
+     * @description 单元格 hover 进入时触发的事件
+     */
+    handleCellMouseEnter(row, column, cell, event) {
+      this.$emit('cell-mouse-enter', row, column, cell, event)
+    },
+    /**
+     * @description 单元格 hover 退出时触发的事件
+     */
+    handleCellMouseLeave(row, column, cell, event) {
+      this.$emit('cell-mouse-leave', row, column, cell, event)
+    },
+    /**
+     * @description 单元格点击时触发的事件
+     */
+    handleCellClick(row, column, cell, event) {
+      this.$emit('cell-click', row, column, cell, event)
+    },
+    /**
+     * @description 单元格双击时触发的事件
+     */
+    handleCellDblclick(row, column, cell, event) {
+      this.$emit('cell-dblclick', row, column, cell, event)
+    },
+    /**
+     * @description 行点击时触发的事件
+     */
+    handleRowClick(row, event, column) {
+      if (this.selectionType === 'radio') {
+        this.setSelectionRadio(row)
+        this.$emit('selection-change', row)
+      } else {
+        this.$refs.elTable.toggleRowSelection(row)
+      }
+      this.$emit('row-click', row, event, column)
+    },
+    /**
+     * @description 行右键点击时触发的事件
+     */
+    handleRowContextmenu(row, event) {
+      this.$emit('row-contextmenu', row, event)
+    },
+    /**
+     * @description 行双击时触发的事件
+     */
+    handleRowDblclick(row, event) {
+      this.$emit('row-dblclick', row, event)
+    },
+    /**
+     * @description 表头点击时触发的事件
+     */
+    handleHeaderClick(column, event) {
+      this.$emit('header-click', column, event)
+    },
+    /**
+     * @description 当拖动表头改变了列的宽度的时候会触发该事件
+     */
+    handleHeaderDragend(newWidth, oldWidth, column, event) {
+      debounce(this.handleTableHeight, 100)()
+      this.$emit('header-dragend', newWidth, oldWidth, column, event)
+    },
+
+    /**
+     * @description 表头右键点击时触发的事件
+     */
+    handleHeaderContextmenu(column, event) {
+      this.$emit('header-contextmenu', column, event)
+    },
+    /**
+     * @description 处理按钮的事件 【包含增删改查】
+     * @param {*} button
+     * @param {*} position
+     * @param {*} data
+     */
+    handleActionEvent(action, position, data, index) {
+      if (position === 'toolbar') {
+        data = this.$selections
+      }
+      if (action.emit) {
+        this.$emit(action.emit, {
+          key: action.key,
+          index: index,
+          row: data,
+          position: position,
+          action: action
+        })
+      }
+      const buttonKey = action.key
+      let selection = null // 选中数据
+      if (position === 'toolbar') {
+        // 工具栏
+        if (
+          this.$utils.isArray(this.selectionAll) &&
+          this.selectionAll.length
+        ) {
+          selection = this.selectionAll.map((i) => i.id_) // 默认给所有已选择的数据id
+        } else {
+          selection = this.getSelectedIds()
+        }
+      } else {
+        // 管理列
+        selection = data ? this.getPkValue(data) : null
+      }
+      // this.$emit('action-event', buttonKey, position, selection, data, index, action)
+      if (this.$utils.isArray(data) && this.selectionAll !== null) {
+        this.$emit(
+          'action-event',
+          buttonKey,
+          position,
+          selection,
+          this.selectionAll,
+          index,
+          action
+        )
+      } else {
+        this.$emit(
+          'action-event',
+          buttonKey,
+          position,
+          selection,
+          data,
+          index,
+          action
+        )
+      }
+    },
+
+    /**
+     * 根据key获取对象的值
+     * 用于解决key值大小写不同的问题
+     * @param {Object} data 需要从中获取值的对象
+     */
+    getPkValue(data, defaultValue = '') {
+      const pkKey = this.pkKey || 'id'
+      // 创建一个忽略大小写的正则对象
+      const regx = new RegExp(`^${pkKey}$`, 'gi')
+      // 循环正则匹配
+      for (const key in data) {
+        // 匹配成功返回值
+        if (regx.test(key)) {
+          return data[key]
+        }
+      }
+      return defaultValue
+    },
+    /**
+     * @description 获取选中的值
+     */
+    getSelectedIds() {
+      if (this.selectionType === 'radio') {
+        if (this.selectionRadio === null || this.selectionRadio === undefined) {
+          return
+        }
+        return this.selectionRadio
+      } else {
+        if (this.$selections === null || this.$selections === undefined) {
+          return
+        }
+        const ids = []
+        this.$selections.map((item) => {
+          ids.push(this.getPkValue(item))
+        })
+        return ids
+      }
+    }
+  }
+}
 </script>
+<style>
+.demo-form-inline {
+  padding: 0 14px;
+}
+.el-table th {
+  background-color: #84d5cf !important;
+  font-size: 12px !important;
+  color: #000000;
+  border: 0px;
+}
+.jbd-title-cont {
+  text-align: center;
+  font-weight: bold;
+  background-color: rgb(249, 255, 255);
+  width: 100%;
+  font-size: 18px;
+  padding-top: 6px;
+}
+.el-table .caret-wrapper {
+  top: -5px;
+  position: absolute;
+}
+.el-table .sort-caret.ascending {
+  border-bottom-color: #909399;
+}
+.el-table .sort-caret.descending {
+  border-top-color: #909399;
+}
+.el-table td {
+  padding: 4px 0 !important;
+  color: #000000;
+  font-size: 12px !important;
+}
+.el-table .warning-row {
+  background: #e0f0ee;
+  color: #000000;
+}
 
-<style lang="scss" scoped></style>
+.el-table .success-row {
+  background: #f9ffff;
+  color: #000000;
+}
+.el-table .el-table-column--selection {
+  text-align: center;
+}
+.el-table .vertical-top {
+  vertical-align: top;
+}
+.el-table .vertical-middle {
+  vertical-align: middle;
+}
+.el-table .vertical-bottom {
+  vertical-align: bottom;
+}
+.ibps-crud-search-form {
+  display: flex;
+  flex-wrap: wrap;
+}
+/* 表单组件渲染时计算表单高度受转换元素影响（附件、人员、部门等） */
+.elTable .el-table__body-wrapper {
+  height: v-bind(tableHeight);
+  overflow-y: auto;
+}
+</style>

src/views/platform/bpmn/bpmAgent/agentByRole/agent.js

@@ -1,200 +1,200 @@
 import { create, update, load, upEmployee } from '@/api/platform/org/employee'
 export default {
-    data () {
-        const { first = '', second = '' } = this.$store.getters.level
-        const level = second || first
-        return {
-            level,
-            checkList1: [],
-            weiTuoroleList: [],
-            checkList2: [],
-            weiTuoroleListYuan: [],
-            daiLiroleListYuan: [],
-            daiLiroleList: [],
-            dailiRenXinxin: null,
-            bpmAgent: {
-                biao_ti_: '',
-                wei_tuo_ren_: this.$store.getters.userId,
-                dai_li_ren_: '',
-                wei_tuo_ren_xing_: this.$store.getters.name,
-                dai_li_ren_xing_m: '',
-                shi_fou_qi_yong_: 'enabled',
-                sheng_xiao_shi_ji: '',
-                jie_shu_shi_jian_: '',
-                wei_tuo_jiao_se_i: '',
-                wei_tuo_jiao_se_m: '',
-                wei_tuo_yuan_shi_: '',
-                dai_li_yuan_shi_s: '',
-                bei_zhu_: '',
-                di_dian_: level
-            }
+  data() {
+    const { first = '', second = '' } = this.$store.getters.level
+    const level = second || first
+    return {
+      level,
+      checkList1: [],
+      weiTuoroleList: [],
+      checkList2: [],
+      weiTuoroleListYuan: [],
+      daiLiroleListYuan: [],
+      daiLiroleList: [],
+      dailiRenXinxin: null,
+      bpmAgent: {
+        biao_ti_: '',
+        wei_tuo_ren_: this.$store.getters.userId,
+        dai_li_ren_: '',
+        wei_tuo_ren_xing_: this.$store.getters.name,
+        dai_li_ren_xing_m: '',
+        shi_fou_qi_yong_: 'enabled',
+        sheng_xiao_shi_ji: '',
+        jie_shu_shi_jian_: '',
+        wei_tuo_jiao_se_i: '',
+        wei_tuo_jiao_se_m: '',
+        wei_tuo_yuan_shi_: '',
+        dai_li_yuan_shi_s: '',
+        bei_zhu_: '',
+        di_dian_: level
+      }
+    }
+  },
+  methods: {
+    // 提交保存数据
+    saveData(formId) {
+      const list1 = []
+      const listId = []
+      const list3 = []
+      const listName = []
+      this.checkList1.forEach(item => {
+        const itemData = this.weiTuoroleList.find(it => it.id === item)
+        if (itemData) {
+          list1.push(itemData)
+          listId.push(itemData.id)
+          listName.push(itemData.name)
         }
-    },
-    methods: {
-        // 提交保存数据
-        saveData (formId) {
-            const list1 = []
-            const listId = []
-            const list3 = []
-            const listName = []
-            this.checkList1.forEach(item => {
-                const itemData = this.weiTuoroleList.find(it => it.id === item)
-                if (itemData) {
-                    list1.push(itemData)
-                    listId.push(itemData.id)
-                    listName.push(itemData.name)
-                }
-            })
-            list1.forEach(item => {
-                const itemData = this.daiLiroleList.find(it => it.id === item.id)
-                if (!itemData) {
-                    // listId.push(item.id)
-                    list3.push(item)
-                    // listName.push(item.name)
-                }
-            })
-            this.weiTuoroleListYuan = list3
+      })
+      list1.forEach(item => {
+        const itemData = this.daiLiroleList.find(it => it.id === item.id)
+        if (!itemData) {
+          // listId.push(item.id)
+          list3.push(item)
+          // listName.push(item.name)
+        }
+      })
+      this.weiTuoroleListYuan = list3
 
-            this.bpmAgent.wei_tuo_jiao_se_i = listId.join(',')
-            this.bpmAgent.wei_tuo_jiao_se_m = listName.join(',')
-            this.bpmAgent.dai_li_yuan_shi_s = JSON.stringify(this.daiLiroleListYuan)
-            this.bpmAgent.wei_tuo_yuan_shi_ = JSON.stringify(this.weiTuoroleListYuan)
-            if (!formId) {
-                this.addShiWuDaiLi()
-            } else {
-                this.updateShiWuDaiLi(formId)
-            }
+      this.bpmAgent.wei_tuo_jiao_se_i = listId.join(',')
+      this.bpmAgent.wei_tuo_jiao_se_m = listName.join(',')
+      this.bpmAgent.dai_li_yuan_shi_s = JSON.stringify(this.daiLiroleListYuan)
+      this.bpmAgent.wei_tuo_yuan_shi_ = JSON.stringify(this.weiTuoroleListYuan)
+      if (!formId) {
+        this.addShiWuDaiLi()
+      } else {
+        this.updateShiWuDaiLi(formId)
+      }
+    },
+    updateShiWuDaiLi(id) {
+      const list = []
+      const obj = {
+        where: {
+          id_: id
         },
-        updateShiWuDaiLi (id) {
-            const list = []
-            const obj = {
-                where: {
-                    id_: id
-                },
-                param: this.bpmAgent
-            }
-            delete this.bpmAgent.create_by_
-            delete this.bpmAgent.create_time_
-            list.push(obj)
+        param: this.bpmAgent
+      }
+      delete this.bpmAgent.create_by_
+      delete this.bpmAgent.create_time_
+      list.push(obj)
 
-            const params1 = {
-                tableName: 't_swdl',
-                updList: list
-            }
-            this.$common.request('update', params1
-            ).then(response => {
-                this.getUpdate()
-                this.closeDialog()
-            })
-        },
-        getUpdate () {
-            const attrValueVoList = []
-            const partyAttrs = this.dailiRenXinxin.variables.partyAttrs
-            partyAttrs.forEach(item => {
-                if (item.values.length > 0) {
-                    const obj = {
-                        attrId: item.values[0].attrID
-                    }
-                    attrValueVoList.push(obj)
-                }
-            })
+      const params1 = {
+        tableName: 't_swdl',
+        updList: list
+      }
+      this.$common.request('update', params1
+      ).then(response => {
+        this.getUpdate()
+        this.closeDialog()
+      })
+    },
+    getUpdate() {
+      const attrValueVoList = []
+      const partyAttrs = this.dailiRenXinxin.variables.partyAttrs
+      partyAttrs.forEach(item => {
+        if (item.values.length > 0) {
+          const obj = {
+            attrId: item.values[0].attrID
+          }
+          attrValueVoList.push(obj)
+        }
+      })
 
-            // 部门数据组装
-            const partyPositionsList = []
-            const partyPositions = this.dailiRenXinxin.variables.partyPositions
-            partyPositions.forEach(item => {
-                const obj = {
-                    id: item.id,
-                    name: item.name,
-                    isPrincipal: item.isPrincipal === 'Y',
-                    isMainPost: item.isMainPost === 'Y'
-                }
-                partyPositionsList.push(obj)
-            })
+      // 部门数据组装
+      const partyPositionsList = []
+      const partyPositions = this.dailiRenXinxin.variables.partyPositions
+      partyPositions.forEach(item => {
+        const obj = {
+          id: item.id,
+          name: item.name,
+          isPrincipal: item.isPrincipal === 'Y',
+          isMainPost: item.isMainPost === 'Y'
+        }
+        partyPositionsList.push(obj)
+      })
 
-            const roleVoList = []
-            this.daiLiroleListYuan.forEach(item => {
-                const obj = {
-                    id: item.id,
-                    name: item.name,
-                    subSystemName: item.subSystemName,
-                    source: item.source,
-                    canDelete: item.source === '自有'
-                }
-                roleVoList.push(obj)
-            })
-            if (this.bpmAgent.shi_fou_qi_yong_ === 'enabled') {
-                this.weiTuoroleListYuan.forEach(item => {
-                    const obj = {
-                        id: item.id,
-                        name: item.name,
-                        subSystemName: item.subSystemName,
-                        source: item.source,
-                        canDelete: item.source === '自有'
-                    }
-                    roleVoList.push(obj)
-                })
-            }
+      const roleVoList = []
+      this.daiLiroleListYuan.forEach(item => {
+        const obj = {
+          id: item.id,
+          name: item.name,
+          subSystemName: item.subSystemName,
+          source: item.source,
+          canDelete: item.source === '自有'
+        }
+        roleVoList.push(obj)
+      })
+      if (this.bpmAgent.shi_fou_qi_yong_ === 'enabled') {
+        this.weiTuoroleListYuan.forEach(item => {
+          const obj = {
+            id: item.id,
+            name: item.name,
+            subSystemName: item.subSystemName,
+            source: item.source,
+            canDelete: item.source === '自有'
+          }
+          roleVoList.push(obj)
+        })
+      }
 
-            if (roleVoList.length > 0) {
-                const list = []
-                roleVoList.forEach(item => {
-                    list.push(item.id)
-                })
-                this.dailiRenXinxin.data.job = list.join(',')
+      if (roleVoList.length > 0) {
+        const list = []
+        roleVoList.forEach(item => {
+          list.push(item.id)
+        })
+        this.dailiRenXinxin.data.job = list.join(',')
+      }
+      const params = {
+        attrValueVoList: attrValueVoList,
+        partyEmployeePo: this.dailiRenXinxin.data,
+        positionVoList: partyPositionsList,
+        roleVoList: roleVoList,
+        user: this.dailiRenXinxin.data,
+        userGroupPoList: []
+      }
+
+      update(params).then(response => {
+      }).catch(() => {
+        this.dialogLoading = false
+      })
+    },
+    getWeiTuo(id, type = 1, formId = '') {
+      if (!id) return
+      return new Promise((resolve, reject) => {
+        load({ employeeId: id })
+          .then((response) => {
+            const data = response
+            const partyRole = response.variables.partyRoles
+            if (type === 1) {
+              this.weiTuoroleListYuan = JSON.parse(JSON.stringify(partyRole))
+              this.weiTuoroleList = partyRole || []
             }
-            const params = {
-                attrValueVoList: attrValueVoList,
-                partyEmployeePo: this.dailiRenXinxin.data,
-                positionVoList: partyPositionsList,
-                roleVoList: roleVoList,
-                user: this.dailiRenXinxin.data,
-                userGroupPoList: []
+            if (type === 2) {
+              this.dailiRenXinxin = data
+              // 新增选择代理人数据
+              if (!formId) {
+                this.daiLiroleListYuan = JSON.parse(JSON.stringify(partyRole))
+              } else {
+                // 修改选择代理人选择
+                const parRoleList = []
+                // 复原代理人 原来的角色
+                partyRole.forEach(item => {
+                  const dataIndex = this.checkList1.findIndex(it => it === item.id)
+                  if (dataIndex < 0) {
+                    parRoleList.push(item)
+                  }
+                })
+                this.daiLiroleListYuan = JSON.parse(JSON.stringify(parRoleList))
+              }
+              partyRole.forEach(item => {
+                item.disabled = true
+              })
+              this.daiLiroleList = partyRole || []
             }
-
-            update(params).then(response => {
-            }).catch(() => {
-                this.dialogLoading = false
-            })
-        },
-        getWeiTuo (id, type = 1, formId = '') {
-            if (!id) return
-            return new Promise((resolve, reject) => {
-                load({ employeeId: id })
-                    .then((response) => {
-                        const data = response
-                        const partyRole = response.variables.partyRoles
-                        if (type === 1) {
-                            this.weiTuoroleListYuan = JSON.parse(JSON.stringify(partyRole))
-                            this.weiTuoroleList = partyRole || []
-                        }
-                        if (type === 2) {
-                            this.dailiRenXinxin = data
-                            // 新增选择代理人数据
-                            if (!formId) {
-                                this.daiLiroleListYuan = JSON.parse(JSON.stringify(partyRole))
-                            } else {
-                            // 修改选择代理人选择
-                                const parRoleList = []
-                                // 复原代理人 原来的角色
-                                partyRole.forEach(item => {
-                                    const dataIndex = this.checkList1.findIndex(it => it === item.id)
-                                    if (dataIndex < 0) {
-                                        parRoleList.push(item)
-                                    }
-                                })
-                                this.daiLiroleListYuan = JSON.parse(JSON.stringify(parRoleList))
-                            }
-                            partyRole.forEach(item => {
-                                item.disabled = true
-                            })
-                            this.daiLiroleList = partyRole || []
-                        }
-                        resolve(data)
-                    })
-                    .catch(() => {
-                    })
-            })
-        }
+            resolve(data)
+          })
+          .catch(() => {
+          })
+      })
     }
+  }
 }