perf: 新增readOnly属性控制表格表单全局只读

BoBoooooo · Jan 9, 2021 · df1f1db · df1f1db
1 parent 72b096c
commit df1f1db
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 123 deletions.
diff --git a/README.md b/README.md
@@ -149,7 +149,7 @@ npm i element-pro-crud -S
 | :--------------------: | :---------------------------------------------------------------: | :-------------: | :-------------------------------------: | :-------: |
 | `el-table props` |          el-table原生属性见文档          |          https://element.eleme.cn/#/zh-CN/component/table            |
 |       listField        |                        response 中数据位置                        |     String      |             data/data.list              | data.list |
-|      setReadOnly       | GenerateFormDialog 中的表单禁用.null 表示均可编辑;{}表示全部只读; |     Object      |   null/{}/{whiteList:{},blackList:{}}   |   null    |  |
+|      readOnly       | GenerateFormDialog 中的表单禁用.null 表示均可编辑;{}表示全部只读; |     Boolean      |   true/false   |   false    |  |
 |       isMultiple       |                           是否开启多选                            |     Boolean     |               true,false                |   false   |
 |       emptyText        |                      列表数据为空时显示文字                       |     String      |                    -                    | 暂无数据  |
 |        prefill         |                      表单预填项(赋值初始值)                       |     Object      |                    -                    |   null    |

diff --git a/src/component/crud-table/src/CrudTable.vue b/src/component/crud-table/src/CrudTable.vue
@@ -196,7 +196,7 @@
                         :formTableConfig="formTableConfig"
                         :remoteFuncs="remoteFuncs"
                         :visibleList="view"
-                        :setReadOnly="setReadOnly"
+                        :readOnly="readOnly"
                         :append-to-body="dialogAppendToBody"
                         :close_on_click_modal="dialogCloseOnClickModal"
                         :fullscreen="dialogFullscreen"
@@ -288,7 +288,7 @@ export default class CrudTable extends Vue {
   listField!: string;
 
   // 设置只读
-  @Prop({ default: null, type: Object }) setReadOnly!: any;
+  @Prop({ default: false, type: Boolean }) readOnly!: any;
 
   // 添加对话框预填项
   @Prop({ default: null, type: Object }) prefill!: any;
@@ -501,7 +501,7 @@ export default class CrudTable extends Vue {
 
   // 内部元素显示控制
   get view() {
-    return {
+    const viewObj = {
       searchForm: true,
       tableTitle: false,
       btnAdd: true,
@@ -515,6 +515,15 @@ export default class CrudTable extends Vue {
       btnAddOnColumnHeader: false,
       ...this.visibleList,
     };
+    // 只读模式隐藏添加编辑删除按钮
+    if (this.readOnly) {
+      viewObj.btnAdd = false;
+      viewObj.btnAddOnColumnHeader = false;
+      viewObj.actionColumnBtnDel = false;
+      viewObj.actionColumnBtnEdit = false;
+      viewObj.actionColumnBtnDetail = true;
+    }
+    return viewObj;
   }
 
 

diff --git a/src/component/crud-table/src/GenerateFormDialog.vue b/src/component/crud-table/src/GenerateFormDialog.vue
@@ -18,7 +18,7 @@
     <GenerateForm ref="generateDialogForm"
                   :value="formValues"
                   :data="formDesign"
-                  :setReadOnly="readOnly"
+                  :readOnly="isReadOnly"
                   :remote="remoteFuncs"
                   :entity.sync="entity"
                   @btnOnClick="btnOnClick"
@@ -27,7 +27,7 @@
             justify="end"
             slot="footer">
       <slot name="dialogFooter"></slot>
-      <template v-if="readOnly">
+      <template v-if="isReadOnly">
         <el-button @click="visible=false">关 闭</el-button>
       </template>
       <template v-else>
@@ -70,7 +70,7 @@ export default class GenerateFormDialog extends Vue {
   @Prop({ default: () => ({}), type: Object }) formTableConfig!: any;
 
   // 设置只读
-  @Prop({ default: null, type: Object }) setReadOnly!: any;
+  @Prop({ default: false, type: Boolean }) readOnly!: boolean;
 
   // 对话框内加载FormDesigner的表名
   @Prop({
@@ -161,11 +161,8 @@ export default class GenerateFormDialog extends Vue {
     return title;
   }
 
-  get readOnly() {
-    if (this.dialogStatus === STATUS.DETAIL) {
-      return {};
-    }
-    return this.setReadOnly;
+  get isReadOnly() {
+    return this.dialogStatus === STATUS.DETAIL || this.readOnly;
   }
 
   // 内部元素显示控制

diff --git a/src/component/form-designer/src/GenerateForm.vue b/src/component/form-designer/src/GenerateForm.vue
@@ -65,7 +65,7 @@
                                   :remote="remote"
                                   :rules="rules[citem.model]"
                                   :widget="citem"
-                                  :readOnly="setReadOnly"
+                                  :readOnly="readOnly"
                                   @btnOnClick="btnOnClick"
                                   v-show="!citem.hidden"
                                   :formTableConfig="formTableConfig">
@@ -118,7 +118,7 @@
                             @selection="getTableSelection($event,item)"
                             :widget="item"
                             :rules="rules[item.model]"
-                            :readOnly="setReadOnly"
+                            :readOnly="readOnly"
                             @btnOnClick="btnOnClick"
                             v-show="!item.hidden"
                             :formTableConfig="formTableConfig">
@@ -189,31 +189,21 @@ export default class GenerateForm extends Vue {
     default: () => ({}),
   })
   entity: any;
-  /**
-   * 设置只读,默认Null为全部不只读,传{}为全部只读
-   * 以下是分别设置黑白名单
-   * {
-   *  whiteList:[],  //设置需要只读的
-   *  blackList:[]   //设置不需要只读的
-   * }
-   */
-  // 表单当前实时对象
 
   @Prop({
-    type: Object,
-    default: null,
+    type: Boolean,
+    default: false,
   })
-  setReadOnly: any;
+  readOnly!: boolean;
 
   // 设置隐藏区域
-
   @Prop({
     type: Array,
     default: () => [],
   })
   setHidden: any;
-  // 远端数据
 
+  // 远端数据
   @Prop({
     type: Object,
     default: () => ({}),
@@ -283,19 +273,6 @@ export default class GenerateForm extends Vue {
         if (this.setHidden.includes(row.model)) {
           row.hidden = true;
         }
-
-        if (this.setReadOnly) {
-          // 表单只读控制
-          const { whiteList, blackList } = this.setReadOnly;
-          // 默认空对象 代表全部只读
-          if (whiteList == null && blackList == null) {
-            row.options.disabled = true;
-          } else if (blackList && !blackList.includes(row.model)) {
-            row.options.disabled = true;
-          } else if (whiteList && whiteList.includes(row.model)) {
-            row.options.disabled = true;
-          }
-        }
         if (this.rules[genList[i].model]) {
           this.rules[genList[i].model] = [
             ...this.rules[genList[i].model],