From df1f1db7a62a717d528ef5aa78bebc9486105ceb Mon Sep 17 00:00:00 2001
From: BoBoooooo <17746714@qq.com>
Date: Sat, 9 Jan 2021 12:00:00 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=96=B0=E5=A2=9EreadOnly=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E6=8E=A7=E5=88=B6=E8=A1=A8=E6=A0=BC=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E5=85=A8=E5=B1=80=E5=8F=AA=E8=AF=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   2 +-
 src/component/crud-table/src/CrudTable.vue    |  15 ++-
 .../crud-table/src/GenerateFormDialog.vue     |  13 +-
 .../form-designer/src/GenerateForm.vue        |  35 +-----
 .../form-designer/src/GenerateFormItem.vue    | 117 ++++++------------
 src/demo/App.vue                              |   2 +-
 6 files changed, 61 insertions(+), 123 deletions(-)

diff --git a/README.md b/README.md
index 4e10e36..714c456 100644
--- 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
index 75574d3..6051847 100644
--- 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
index 7b7d0e1..182d714 100644
--- 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
index 4093497..805ea46 100644
--- 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],
diff --git a/src/component/form-designer/src/GenerateFormItem.vue b/src/component/form-designer/src/GenerateFormItem.vue
index 73d8ed4..c414b41 100644
--- a/src/component/form-designer/src/GenerateFormItem.vue
+++ b/src/component/form-designer/src/GenerateFormItem.vue
@@ -39,15 +39,15 @@
                 :type="widget.options.dataType"
                 v-model.number="dataModel"
                 :placeholder="widget.options.placeholder"
-                :readonly="widget.options.readonly"
-                :disabled="widget.options.disabled"
+                :readonly="readOnly || widget.options.readonly"
+                :disabled="readOnly || widget.options.disabled"
                 :style="{width: widget.options.width}"></el-input>
       <el-input v-else
                 :type="widget.options.dataType"
                 v-model="dataModel"
                 :placeholder="widget.options.placeholder"
-                :readonly="widget.options.readonly"
-                :disabled="widget.options.disabled"
+                :readonly="readOnly || widget.options.readonly"
+                :disabled="readOnly || widget.options.disabled"
                 :style="{width: widget.options.width}"></el-input>
     </template>
     <template v-if="widget.type == 'button'">
@@ -74,18 +74,14 @@
     <template v-if="widget.type == 'select'">
       <el-select v-model="dataModel"
                  default-first-option
-                 :disabled="widget.options.disabled"
+                 :disabled="readOnly || widget.options.disabled"
+                 :readonly="readOnly || widget.options.readonly"
                  :multiple="widget.options.multiple"
                  allow-create
                  clearable
                  :placeholder="widget.options.placeholder"
                  :style="{width: widget.options.width || '100%'}"
-                 :remote="widget.options.remote === 'search'&& widget.options.remoteSearchFunc&&widget.options.remoteSearchFunc!=''"
-                 :remote-method="search"
-                 filterable
-                 :data-searchable="widget.options.remoteSearchFunc
-                 &&widget.options.remoteSearchFunc!=''
-                 &&widget.options.remote === 'search'">
+                 filterable>
         <el-option v-for="(item,index) in optionsList"
                    :key="index"
                    :value="item.value"
@@ -102,8 +98,8 @@
       <el-input type="textarea"
                 :autosize="{ minRows: 5}"
                 v-model="dataModel"
-                :disabled="widget.options.disabled"
-                :readonly="widget.options.readonly"
+                :disabled="readOnly || widget.options.disabled"
+                :readonly="readOnly || widget.options.readonly"
                 :placeholder="widget.options.placeholder"
                 :style="{width: widget.options.width}"></el-input>
     </template>
@@ -112,14 +108,15 @@
       <el-input-number v-model="dataModel"
                        :style="{width: widget.options.width}"
                        :step="widget.options.step"
-                       :disabled="widget.options.disabled"
+                       :disabled="readOnly || widget.options.disabled"
+                       :readonly="readOnly || widget.options.readonly"
                        controls-position="right"></el-input-number>
     </template>
 
     <template v-if="widget.type == 'radio'">
       <el-radio-group v-model="dataModel"
                       :style="{width: widget.options.width}"
-                      :disabled="widget.options.disabled">
+                      :disabled="readOnly || widget.options.disabled">
         <el-radio :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
                   :label="item.value"
                    v-for="(item, index) in optionsList"
@@ -159,8 +156,8 @@
                       :placeholder="widget.options.placeholder"
                       :start-placeholder="widget.options.startPlaceholder"
                       :end-placeholder="widget.options.endPlaceholder"
-                      :readonly="widget.options.readonly"
-                      :disabled="widget.options.disabled"
+                      :readonly="readOnly || widget.options.readonly"
+                      :disabled="readOnly || widget.options.disabled"
                       :editable="widget.options.editable"
                       :clearable="widget.options.clearable"
                       :arrowControl="widget.options.arrowControl"
@@ -175,8 +172,8 @@
                       :placeholder="widget.options.placeholder"
                       :start-placeholder="widget.options.startPlaceholder"
                       :end-placeholder="widget.options.endPlaceholder"
-                      :readonly="widget.options.readonly"
-                      :disabled="widget.options.disabled"
+                      :readonly="readOnly || widget.options.readonly"
+                      :disabled="readOnly || widget.options.disabled"
                       :editable="widget.options.editable"
                       :clearable="widget.options.clearable"
                       :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"
@@ -189,19 +186,19 @@
     <template v-if="widget.type =='rate'">
       <el-rate v-model="dataModel"
                :max="widget.options.max"
-               :disabled="widget.options.disabled"
+               :disabled="readOnly || widget.options.disabled"
                :allow-half="widget.options.allowHalf"></el-rate>
     </template>
 
     <template v-if="widget.type == 'color'">
       <el-color-picker v-model="dataModel"
-                       :disabled="widget.options.disabled"
+                       :disabled="readOnly || widget.options.disabled"
                        :show-alpha="widget.options.showAlpha"></el-color-picker>
     </template>
 
     <template v-if="widget.type=='switch'">
       <el-switch v-model="dataModel"
-                 :disabled="widget.options.disabled">
+                 :disabled="readOnly || widget.options.disabled">
       </el-switch>
     </template>
 
@@ -209,7 +206,7 @@
       <el-slider v-model="dataModel"
                  :min="widget.options.min"
                  :max="widget.options.max"
-                 :disabled="widget.options.disabled"
+                 :disabled="readOnly || widget.options.disabled"
                  :step="widget.options.step"
                  :show-input="widget.options.showInput"
                  :range="widget.options.range"
@@ -217,7 +214,7 @@
     </template>
     <template v-if="widget.type == 'cascader'">
       <el-cascader v-model="dataModel"
-                   :disabled="widget.options.disabled"
+                   :disabled="readOnly || widget.options.disabled"
                    :clearable="widget.options.clearable"
                    :placeholder="widget.options.placeholder"
                    :style="{width: widget.options.width}"
@@ -235,7 +232,8 @@
                  :tableDesignerName="widget.options.tableDesignerName"
                  :dialogFormDesignerName="widget.options.dialogFormDesignerName"
                  appendToBody
-                 :visibleList="visibleList"
+                 :readOnly="readOnly || widget.options.readonly"
+                 :visibleList="tableVisibleList"
                  :showPagination="widget.options.showPagination"
                  :isMultiple="widget.options.isMultiple"
                  :tableParams="getTableParams"
@@ -278,7 +276,7 @@
                   :noChildrenText="widget.options.noChildrenText"
                   :noOptionsText="widget.options.noOptionsText"
                   :noResultsText="widget.options.noResultsText"
-                  :disabled="widget.options.disabled"
+                  :disabled="readOnly || widget.options.disabled"
                   :showCount="widget.options.showCount"
                   :disable-branch-nodes="widget.options.disableBranchNodes"
                   :options="widget.options.remoteOptions"
@@ -291,7 +289,7 @@
     <template v-if="widget.type=='richtext'">
       <Tinymce :height="400"
                v-model="dataModel"
-               :readonly="widget.options.readonly"></Tinymce>
+               :readonly="readOnly || widget.options.readonly"></Tinymce>
 
     </template>
     <template v-if="widget.type=='upload'">
@@ -365,10 +363,10 @@ export default class GenerateFormItem extends Vue {
   formTableConfig: any;
 
   @Prop({
-    type: Object,
-    default: () => ({}),
+    type: Boolean,
+    default: false,
   })
-  readOnly: any;
+  readOnly!: boolean;
 
   // 子表单单个组件value
   @Prop()
@@ -417,9 +415,8 @@ export default class GenerateFormItem extends Vue {
         };
       };
     }
-    const model = this.models[this.widget.model];
     this.normalizer = normalizer;
-    this.dataModel = model;
+    this.dataModel = this.models[this.widget.model];
   }
 
   created() {
@@ -456,11 +453,9 @@ export default class GenerateFormItem extends Vue {
 
         this.copyOption = this.widget.options.remoteOptions;
       });
-    } else if (
+    } else if ( // 请求自定义方法
       this.widget.options.remote === 'custom'
-      && this.remote[this.widget.options.remoteFunc]
-      && (this.widget.options.remoteSearchFunc == null || this.widget.options.remoteSearchFunc === '')
-    ) {
+      && this.remote[this.widget.options.remoteFunc]) {
       // 请求自定义接口
       this.remote[this.widget.options.remoteFunc]((data) => {
         if (this.widget.type === 'cascader' || this.widget.type === 'treeselect') {
@@ -478,44 +473,23 @@ export default class GenerateFormItem extends Vue {
         }
         this.copyOption = this.widget.options.remoteOptions;
       });
-    } else if (this.widget.options.remoteSearchFunc != null && this.widget.options.remoteSearchFunc !== '') {
-      // 模糊查询
-      this.widget.options.remoteOptions = [];
-      // 根据默认值加载下拉菜单
-      if (this.dataModel != null && this.dataModel !== '') {
-        this.remote[`${this.widget.options.remoteSearchFunc}ForLoad`]((data) => {
-          this.widget.options.remoteOptions = data.map(item => ({
-            value: item[this.widget.options.props.value],
-            label: item[this.widget.options.props.label],
-            rightLabel: item[this.widget.options.props.rightLabel],
-          }));
-          this.copyOption = this.widget.options.remoteOptions;
-        }, this.dataModel);
-      }
     }
   }
 
   // 子表在只读模式下隐藏增删改按钮
-  get visibleList() {
+  get tableVisibleList() {
     const view = {
       ...this.widget.options.visibleList,
       btnAdd: false,
       btnAddOnColumnHeader: this.widget.options.visibleList.btnAdd,
     };
-    if ((this.readOnly && Object.keys(this.readOnly).length === 0) || this.widget.options.readonly) {
-      view.btnAddOnColumnHeader = false;
-      view.actionColumnBtnDel = false;
-      view.actionColumnBtnEdit = false;
-      view.actionColumnBtnDetail = true;
-      view.btnImport = false;
-    }
     return view;
   }
 
   // 附件列表在只读模式下隐藏增删改按钮
   get fileVisibleList() {
     const view: any = {};
-    if ((this.readOnly && Object.keys(this.readOnly).length === 0) || this.widget.options.readonly) {
+    if (this.readOnly || this.widget.options.readonly) {
       view.upload = false;
       view.btnEdit = false;
       view.btnDel = false;
@@ -656,28 +630,6 @@ export default class GenerateFormItem extends Vue {
     this.$emit('btnOnClick', widget);
   }
 
-  // 查询远端数据
-  search(txt) {
-    this.remote[this.widget.options.remoteSearchFunc]((data) => {
-      this.widget.options.remoteOptions = data.map(item => ({
-        value: item[this.widget.options.props.value],
-        label: item[this.widget.options.props.label],
-        rightLabel: item.rightLabel,
-      }));
-    }, txt);
-  }
-
-  selectFilter(val) {
-    if (val) {
-      const arr = this.copyOption.filter(item => this.$pinyinmatch.match(item.label || item.value, val));
-      this.widget.options.remoteOptions = arr;
-      this.widget.options.options = arr;
-    } else {
-      this.widget.options.options = this.copyOption;
-      this.widget.options.remoteOptions = this.copyOption;
-    }
-  }
-
   getTableSelection(selection) {
     this.$emit('selection', selection);
   }
@@ -724,4 +676,7 @@ export default class GenerateFormItem extends Vue {
 p {
   margin: 0;
 }
+.el-radio-group{
+  padding-left: 10px;
+}
 </style>
diff --git a/src/demo/App.vue b/src/demo/App.vue
index fd0fdfb..878706b 100644
--- a/src/demo/App.vue
+++ b/src/demo/App.vue
@@ -212,7 +212,7 @@ h3 {
 }
 
 .el-radio-group {
-  padding-left: 10px;
+  padding-left: 10px!important;
 }
 
 .dialog {