From 7cc2041cfa2cc8c29ff634d0803b74c62feb8e7d Mon Sep 17 00:00:00 2001
From: muyao <3202302816@qq.com>
Date: Tue, 31 Dec 2024 20:10:09 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=85=95=E7=91=B6]=20=E5=A4=A7=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E7=9A=84=E5=89=8D=E7=AB=AF=E6=80=A7=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=EF=BC=88=E8=AF=B7=E6=B1=82=E5=8F=82=E6=95=B0=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E5=92=8C=E5=9F=BA=E6=9C=AC=E4=BF=A1=E6=81=AF=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/styles/index.scss                   |  13 +-
 front/src/utils/global.js                     |   2 +-
 front/src/views/doc/EditDocStandard/index.vue | 328 +++++++++---------
 front/src/views/doc/EditTable/index.vue       | 213 ++++++++----
 front/src/views/doc/EditTable/input.vue       |  52 +++
 front/src/views/doc/EditTable/select.vue      |  66 ++++
 front/src/views/doc/EditTable/switch.vue      |  51 +++
 front/src/views/doc/RootArrayTable/index.vue  | 185 +++++++---
 8 files changed, 634 insertions(+), 276 deletions(-)
 create mode 100644 front/src/views/doc/EditTable/input.vue
 create mode 100644 front/src/views/doc/EditTable/select.vue
 create mode 100644 front/src/views/doc/EditTable/switch.vue

diff --git a/front/src/styles/index.scss b/front/src/styles/index.scss
index b5041328..3aebfe2b 100644
--- a/front/src/styles/index.scss
+++ b/front/src/styles/index.scss
@@ -194,7 +194,18 @@ fieldset {border: 1px solid #DCDFE6;padding: 20px;}
     margin-bottom: 2px;
   }
 }
-
+.param-table1 {
+  .el-form {
+    width: 100%;
+    display: inline-block;
+    .el-form-item {
+      margin-bottom: 0;
+    }
+  }
+  .el-switch {
+    margin-bottom: 2px;
+  }
+}
 .navbar .right-menu {
   float: right;
   height: 100%;
diff --git a/front/src/utils/global.js b/front/src/utils/global.js
index 467ac95e..2fc7a2ba 100644
--- a/front/src/utils/global.js
+++ b/front/src/utils/global.js
@@ -637,7 +637,7 @@ Object.assign(Vue.prototype, {
       }
       const id = row.id
       refPrefixArr.forEach(refPrefix => {
-        promiseArr.push(this.$refs[refPrefix + id].validate())
+        this.$refs[refPrefix + id] && promiseArr.push(this.$refs[refPrefix + id].validate())
       })
       const children = arr[i].children
       if (children && children.length > 0) {
diff --git a/front/src/views/doc/EditDocStandard/index.vue b/front/src/views/doc/EditDocStandard/index.vue
index 04a18530..1c62af4b 100644
--- a/front/src/views/doc/EditDocStandard/index.vue
+++ b/front/src/views/doc/EditDocStandard/index.vue
@@ -5,187 +5,197 @@
     </h3>
     <el-tabs v-model="activeName" tab-position="left">
       <el-tab-pane :label="$t('baseInfo')" name="info">
-        <el-form
-          ref="docForm"
-          :model="docInfo"
-          :rules="rules"
-          label-width="110px"
-          size="mini"
-          style="width: 800px"
-        >
-          <el-form-item prop="name" :label="$t('docTitle')">
-            <el-input v-model="docInfo.name" maxlength="100" show-word-limit />
-          </el-form-item>
-          <el-form-item prop="description" :label="$t('docDesc')">
-            <rich-text-editor :value="docInfo.description" :placeholder="$t('inputContent')" :editable="true" @input="editorInput" />
-          </el-form-item>
-          <el-form-item prop="url" :label="$t('requestUrl')">
-            <el-input v-model="docInfo.url" class="input-with-select" maxlength="200" show-word-limit @input="onUrlInput">
-              <el-select slot="prepend" v-model="docInfo.httpMethod" :placeholder="$t('pleaseSelect')" style="width: 100px;">
-                <el-option v-for="method in allMethods" :key="method" :label="method" :value="method">
-                  {{ method }}
+        <div v-show="activeName === 'info'">
+          <el-form
+            ref="docForm"
+            :model="docInfo"
+            :rules="rules"
+            label-width="110px"
+            size="mini"
+            style="width: 800px"
+          >
+            <el-form-item prop="name" :label="$t('docTitle')">
+              <el-input v-model="docInfo.name" maxlength="100" show-word-limit />
+            </el-form-item>
+            <el-form-item prop="description" :label="$t('docDesc')">
+              <rich-text-editor :value="docInfo.description" :placeholder="$t('inputContent')" :editable="true" @input="editorInput" />
+            </el-form-item>
+            <el-form-item prop="url" :label="$t('requestUrl')">
+              <el-input v-model="docInfo.url" class="input-with-select" maxlength="200" show-word-limit @input="onUrlInput">
+                <el-select slot="prepend" v-model="docInfo.httpMethod" :placeholder="$t('pleaseSelect')" style="width: 100px;">
+                  <el-option v-for="method in allMethods" :key="method" :label="method" :value="method">
+                    {{ method }}
+                  </el-option>
+                </el-select>
+              </el-input>
+              <edit-table
+                v-show="docInfo.url && docInfo.pathParams.length > 0"
+                ref="pathParamTable"
+                :data="docInfo.pathParams"
+                :getter="(rows) => { return rows.filter(row => row.isDeleted === 0) }"
+                :module-id="moduleId"
+                :name-label="$t('pathVariable')"
+                :name-width="200"
+                :text-columns="['name']"
+                :hidden-columns="['required', 'maxLength', 'enum', 'opt']"
+              />
+            </el-form-item>
+            <el-form-item prop="contentType" label="ContentType">
+              <el-select v-model="docInfo.contentType" :clearable="true" :placeholder="$t('pleaseSelect')" style="width: 300px;">
+                <el-option v-for="contentType in getEnums().CONTENT_TYPE" :key="contentType" :label="contentType" :value="contentType">
+                  {{ contentType }}
                 </el-option>
               </el-select>
-            </el-input>
-            <edit-table
-              v-show="docInfo.url && docInfo.pathParams.length > 0"
-              ref="pathParamTable"
-              :data="docInfo.pathParams"
-              :getter="(rows) => { return rows.filter(row => row.isDeleted === 0) }"
-              :module-id="moduleId"
-              :name-label="$t('pathVariable')"
-              :name-width="200"
-              :text-columns="['name']"
-              :hidden-columns="['required', 'maxLength', 'enum', 'opt']"
-            />
-          </el-form-item>
-          <el-form-item prop="contentType" label="ContentType">
-            <el-select v-model="docInfo.contentType" :clearable="true" :placeholder="$t('pleaseSelect')" style="width: 300px;">
-              <el-option v-for="contentType in getEnums().CONTENT_TYPE" :key="contentType" :label="contentType" :value="contentType">
-                {{ contentType }}
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item prop="parentId" :label="$t('sourceFolder')">
-            <el-select v-model="docInfo.parentId" :placeholder="$t('pleaseSelect')" style="width: 300px;">
-              <el-option label="无" :value="0">{{ $t('empty') }}</el-option>
-              <el-option v-for="item in folders" :key="item.id" :label="item.name" :value="item.id">
-                {{ item.name }}
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item :label="$t('maintainer')">
-            <el-input v-model="docInfo.author" maxlength="64" show-word-limit />
-          </el-form-item>
-          <el-form-item :label="$t('isShow')">
-            <el-switch
-              v-model="docInfo.isShow"
-              active-color="#13ce66"
-              inactive-color="#ff4949"
-              :active-value="1"
-              :inactive-value="0"
-            />
-          </el-form-item>
-          <el-form-item :label="$t('lockDoc')">
-            <el-switch
-              v-model="docInfo.isLocked"
-              active-color="#13ce66"
-              inactive-color="#ff4949"
-              :active-value="1"
-              :inactive-value="0"
-            />
-            <span class="info-tip">{{ $t('lockDocDesc') }}</span>
-          </el-form-item>
-          <el-form-item :label="$t('orderIndex')">
-            <el-input-number v-model="docInfo.orderIndex" controls-position="right" />
-          </el-form-item>
-          <el-form-item :label="$t('status')">
-            <el-radio-group v-model="docInfo.status">
-              <el-radio v-for="item in statusArr" :key="item.value" :label="item.value">{{ $t(item.label) }}</el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </el-form>
+            </el-form-item>
+            <el-form-item prop="parentId" :label="$t('sourceFolder')">
+              <el-select v-model="docInfo.parentId" :placeholder="$t('pleaseSelect')" style="width: 300px;">
+                <el-option label="无" :value="0">{{ $t('empty') }}</el-option>
+                <el-option v-for="item in folders" :key="item.id" :label="item.name" :value="item.id">
+                  {{ item.name }}
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('maintainer')">
+              <el-input v-model="docInfo.author" maxlength="64" show-word-limit />
+            </el-form-item>
+            <el-form-item :label="$t('isShow')">
+              <el-switch
+                v-model="docInfo.isShow"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                :active-value="1"
+                :inactive-value="0"
+              />
+            </el-form-item>
+            <el-form-item :label="$t('lockDoc')">
+              <el-switch
+                v-model="docInfo.isLocked"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                :active-value="1"
+                :inactive-value="0"
+              />
+              <span class="info-tip">{{ $t('lockDocDesc') }}</span>
+            </el-form-item>
+            <el-form-item :label="$t('orderIndex')">
+              <el-input-number v-model="docInfo.orderIndex" controls-position="right" />
+            </el-form-item>
+            <el-form-item :label="$t('status')">
+              <el-radio-group v-model="docInfo.status">
+                <el-radio v-for="item in statusArr" :key="item.value" :label="item.value">{{ $t(item.label) }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-form>
+        </div>
       </el-tab-pane>
       <el-tab-pane :label="$t('requestHeader')" name="headerParam">
-        <el-button type="text" icon="el-icon-plus" @click="onParamAdd(docInfo.headerParams)">{{ $t('newHeader') }}</el-button>
-        <el-button type="text" icon="el-icon-bottom-right" @click="onImportHeaderParamAdd">{{ $t('importHeader') }}</el-button>
-        <span class="split">|</span>
-        <el-switch
-          v-model="docInfo.isUseGlobalHeaders"
-          :active-text="$t('useCommonHeader')"
-          inactive-text=""
-          :active-value="1"
-          :inactive-value="0"
-        />
-        <edit-table
-          ref="headerParamTable"
-          :data="docInfo.headerParams"
-          :can-add-node="false"
-          :hidden-columns="['type', 'maxLength', 'enum']"
-        />
+        <div v-show="activeName === 'headerParam'">
+          <el-button type="text" icon="el-icon-plus" @click="onParamAdd(docInfo.headerParams)">{{ $t('newHeader') }}</el-button>
+          <el-button type="text" icon="el-icon-bottom-right" @click="onImportHeaderParamAdd">{{ $t('importHeader') }}</el-button>
+          <span class="split">|</span>
+          <el-switch
+            v-model="docInfo.isUseGlobalHeaders"
+            :active-text="$t('useCommonHeader')"
+            inactive-text=""
+            :active-value="1"
+            :inactive-value="0"
+          />
+          <edit-table
+            ref="headerParamTable"
+            :data="docInfo.headerParams"
+            :can-add-node="false"
+            :hidden-columns="['type', 'maxLength', 'enum']"
+          />
+        </div>
       </el-tab-pane>
       <!-- 请求参数 -->
       <el-tab-pane :label="$t('requestParams')" name="requestParam">
-        <el-tabs v-model="paramsActive" type="card">
-          <el-tab-pane label="Query Parameter" name="tabQueryParams">
-            <div class="table-opt-btn">
-              <el-button type="text" icon="el-icon-plus" @click="onParamAdd(docInfo.queryParams)">{{ $t('newQueryParam') }}</el-button>
-              <el-button type="text" icon="el-icon-bottom-right" @click="onImportQueryParamAdd">{{ $t('importQueryParam') }}</el-button>
-            </div>
-            <edit-table ref="queryParamTable" :data="docInfo.queryParams" :module-id="moduleId" />
-          </el-tab-pane>
-          <el-tab-pane name="tabBodyParams">
-            <span slot="label" class="tab-pane-label">
-              <el-badge :is-dot="docInfo.requestParams.length > 0" type="danger">
-                <span>Body Parameter</span>
-              </el-badge>
-            </span>
-            <div class="table-opt-btn">
-              <el-switch
-                v-model="docInfo.isRequestArray"
-                :active-text="$t('isRootArray')"
-                inactive-text=""
-                :active-value="1"
-                :inactive-value="0"
-                @change="(val) => onRootArraySwitch(val, 'requestParams')"
-              />
-              <div v-show="!isEnableRequestRootArray" style="display: inline-block">
-                <span class="split">|</span>
-                <el-button type="text" icon="el-icon-plus" @click="onParamAdd(docInfo.requestParams)">{{ $t('newBodyParam') }}</el-button>
-                <el-button type="text" icon="el-icon-bottom-right" @click="onImportRequestParamAdd">{{ $t('importBodyParam') }}</el-button>
-                <span class="split">|</span>
+        <div v-show="activeName === 'requestParam'">
+          <el-tabs v-model="paramsActive" type="card">
+            <el-tab-pane label="Query Parameter" name="tabQueryParams">
+              <div class="table-opt-btn">
+                <el-button type="text" icon="el-icon-plus" @click="onParamAdd(docInfo.queryParams)">{{ $t('newQueryParam') }}</el-button>
+                <el-button type="text" icon="el-icon-bottom-right" @click="onImportQueryParamAdd">{{ $t('importQueryParam') }}</el-button>
+              </div>
+              <edit-table ref="queryParamTable" :data="docInfo.queryParams" :module-id="moduleId" />
+            </el-tab-pane>
+            <el-tab-pane name="tabBodyParams">
+              <span slot="label" class="tab-pane-label">
+                <el-badge :is-dot="docInfo.requestParams.length > 0" type="danger">
+                  <span>Body Parameter</span>
+                </el-badge>
+              </span>
+              <div class="table-opt-btn">
                 <el-switch
-                  v-model="docInfo.isUseGlobalParams"
-                  :active-text="$t('useCommonParam')"
+                  v-model="docInfo.isRequestArray"
+                  :active-text="$t('isRootArray')"
                   inactive-text=""
                   :active-value="1"
                   :inactive-value="0"
+                  @change="(val) => onRootArraySwitch(val, 'requestParams')"
                 />
+                <div v-show="!isEnableRequestRootArray" style="display: inline-block">
+                  <span class="split">|</span>
+                  <el-button type="text" icon="el-icon-plus" @click="onParamAdd(docInfo.requestParams)">{{ $t('newBodyParam') }}</el-button>
+                  <el-button type="text" icon="el-icon-bottom-right" @click="onImportRequestParamAdd">{{ $t('importBodyParam') }}</el-button>
+                  <span class="split">|</span>
+                  <el-switch
+                    v-model="docInfo.isUseGlobalParams"
+                    :active-text="$t('useCommonParam')"
+                    inactive-text=""
+                    :active-value="1"
+                    :inactive-value="0"
+                  />
+                </div>
               </div>
-            </div>
-            <root-array-table v-show="isEnableRequestRootArray" ref="requestArrayTable" :data="docInfo.requestParams" :el-type="docInfo.requestArrayType" :module-id="moduleId" />
-            <edit-table v-show="!isEnableRequestRootArray" ref="requestParamTable" :data="docInfo.requestParams" :module-id="moduleId" />
-          </el-tab-pane>
-        </el-tabs>
+              <root-array-table v-if="isEnableRequestRootArray" ref="requestArrayTable" :data="docInfo.requestParams" :el-type="docInfo.requestArrayType" :module-id="moduleId" />
+              <edit-table v-if="!isEnableRequestRootArray" ref="requestParamTable" :data="docInfo.requestParams" :module-id="moduleId" />
+            </el-tab-pane>
+          </el-tabs>
+        </div>
       </el-tab-pane>
       <el-tab-pane :label="$t('responseParam')" name="responseParam">
-        <div class="table-opt-btn">
-          <el-switch
-            v-model="docInfo.isResponseArray"
-            :active-text="$t('isRootArray')"
-            inactive-text=""
-            :active-value="1"
-            :inactive-value="0"
-            @change="(val) => onRootArraySwitch(val, 'responseParams')"
-          />
-          <div v-show="!isEnableResponseRootArray" style="display: inline-block">
-            <span class="split">|</span>
-            <el-button type="text" icon="el-icon-plus" @click="onResponseParamAdd">{{ $t('newResponseParam') }}</el-button>
-            <el-button type="text" icon="el-icon-bottom-right" @click="onImportResponseParamAdd">{{ $t('importResponseParam') }}</el-button>
-            <span class="split">|</span>
+        <div v-show="activeName === 'responseParam'">
+          <div class="table-opt-btn">
             <el-switch
-              v-model="docInfo.isUseGlobalReturns"
-              :active-text="$t('useCommonResponse')"
+              v-model="docInfo.isResponseArray"
+              :active-text="$t('isRootArray')"
               inactive-text=""
               :active-value="1"
               :inactive-value="0"
+              @change="(val) => onRootArraySwitch(val, 'responseParams')"
             />
+            <div v-show="!isEnableResponseRootArray" style="display: inline-block">
+              <span class="split">|</span>
+              <el-button type="text" icon="el-icon-plus" @click="onResponseParamAdd">{{ $t('newResponseParam') }}</el-button>
+              <el-button type="text" icon="el-icon-bottom-right" @click="onImportResponseParamAdd">{{ $t('importResponseParam') }}</el-button>
+              <span class="split">|</span>
+              <el-switch
+                v-model="docInfo.isUseGlobalReturns"
+                :active-text="$t('useCommonResponse')"
+                inactive-text=""
+                :active-value="1"
+                :inactive-value="0"
+              />
+            </div>
           </div>
+          <root-array-table v-if="isEnableResponseRootArray" ref="responseArrayTable" :data="docInfo.responseParams" :el-type="docInfo.responseArrayType" :module-id="moduleId" />
+          <edit-table v-if="!isEnableResponseRootArray" ref="responseParamTable" :data="docInfo.responseParams" :module-id="moduleId" :hidden-columns="responseHiddenColumns" />
         </div>
-        <root-array-table v-show="isEnableResponseRootArray" ref="responseArrayTable" :data="docInfo.responseParams" :el-type="docInfo.responseArrayType" :module-id="moduleId" />
-        <edit-table v-show="!isEnableResponseRootArray" ref="responseParamTable" :data="docInfo.responseParams" :module-id="moduleId" :hidden-columns="responseHiddenColumns" />
       </el-tab-pane>
       <el-tab-pane :label="$t('errorCode')" name="errorCode">
-        <el-button type="text" icon="el-icon-plus" @click="onErrorCodeAdd">{{ $t('newErrorCode') }}</el-button>
-        <edit-table
-          ref="errorCodeParamTable"
-          :data="docInfo.errorCodeParams"
-          :hidden-columns="['required', 'maxLength', 'type', 'enum']"
-          :can-add-node="false"
-          :name-label="$t('errorCode')"
-          :description-label="$t('errorDesc')"
-          :example-label="$t('solution')"
-        />
+        <div v-show="activeName === 'errorCode'">
+          <el-button type="text" icon="el-icon-plus" @click="onErrorCodeAdd">{{ $t('newErrorCode') }}</el-button>
+          <edit-table
+            ref="errorCodeParamTable"
+            :data="docInfo.errorCodeParams"
+            :hidden-columns="['required', 'maxLength', 'type', 'enum']"
+            :can-add-node="false"
+            :name-label="$t('errorCode')"
+            :description-label="$t('errorDesc')"
+            :example-label="$t('solution')"
+          />
+        </div>
       </el-tab-pane>
     </el-tabs>
     <div style="margin: 20px;">
@@ -290,7 +300,7 @@ export default {
         responseParams: [],
         errorCodeParams: [],
         orderIndex: this.getEnums().INIT_ORDER_INDEX,
-        remark: ''
+        remark: '',
       },
       paramsActive: 'tabQueryParams',
       remark: '',
@@ -451,7 +461,7 @@ export default {
     },
     // 修改文档内容
     submitForm() {
-      this.$refs.docForm.validate((valid) => {
+      this.$refs.docForm && this.$refs.docForm.validate((valid) => {
         let rootArrayValid = true
         if (this.isEnableRequestRootArray) {
           rootArrayValid = this.$refs.requestArrayTable.validate()
diff --git a/front/src/views/doc/EditTable/index.vue b/front/src/views/doc/EditTable/index.vue
index e5c49a46..5212d21d 100644
--- a/front/src/views/doc/EditTable/index.vue
+++ b/front/src/views/doc/EditTable/index.vue
@@ -1,14 +1,23 @@
 <template>
-  <el-table
-    :data="getter(rows)"
-    row-key="id"
-    border
-    default-expand-all
-    :highlight-current-row="false"
-    :empty-text="emptyText"
-    class="param-table"
-  >
-    <el-table-column
+    <u-table
+      :data="getter(rows)"
+      row-id="id"
+      row-key="id"
+      use-virtual
+      :treeConfig="{
+        children: 'children',
+        iconClose: 'el-icon-arrow-right',
+        iconOpen: 'el-icon-arrow-down',
+        expandAll: true
+      }"
+      :height="600"
+      :row-height="20"
+      border
+      class="param-table1"
+      ref="virtualTable"  
+    >
+    <u-table-column
+      :tree-node="true"
       v-if="isColumnShow('name')"
       prop="name"
       :label="nameLabel"
@@ -32,68 +41,52 @@
             prop="name"
             label-width="0"
           >
-            <el-input v-model="scope.row.name" :placeholder="$t('paramName')" maxlength="64" show-word-limit />
+          <WeInput :value="scope.row.name" :size="'mini'" @change="(val) =>onWeChange(val,scope.row,'name')" :placeholder="$t('paramName')" :maxlength="64" :showWordLimit="true"/>
           </el-form-item>
         </el-form>
       </template>
-    </el-table-column>
-    <el-table-column
+    </u-table-column>
+    <u-table-column
       v-if="isColumnShow('type')"
       prop="type"
       :label="$t('type')"
       width="130"
     >
       <template slot-scope="scope">
-        <el-select
-          v-model="scope.row.type"
-          filterable
-          allow-create
-          size="mini"
-        >
-          <el-option v-for="type in configTypes" :key="type" :label="type" :value="type"></el-option>
-        </el-select>
+        <WeSelect :type="'arr'" :value="scope.row.type" @change="(val) =>onWeChange(val,scope.row,'type')" :filterable="true" :allowCreate="true" :list="configTypes" :clearable="false" :size="'mini'"/>
       </template>
-    </el-table-column>
-    <el-table-column
+    </u-table-column>
+    <u-table-column
       v-if="isColumnShow('enum')"
       prop="enum"
       :label="$t('linkDict')"
       width="120"
     >
       <template slot-scope="scope">
-        <el-select v-model="scope.row.enumId" :clearable="true" size="mini">
-          <el-option v-for="enumInfo in enumData" :key="enumInfo.id" :label="enumInfo.name" :value="enumInfo.id">
-            {{ enumInfo.name }}
-          </el-option>
-        </el-select>
+        <WeSelect :type="'obj'" :value="scope.row.enumId" @change="(val) =>onWeChange(val,scope.row,'enumId')" :filterable="false" :allowCreate="false" :list="enumData" :clearable="true" :size="'mini'"/>
       </template>
-    </el-table-column>
-    <el-table-column
+    </u-table-column>
+    <u-table-column
       v-if="isColumnShow('required')"
       prop="required"
       :label="$t('require')"
       width="80"
     >
       <template slot-scope="scope">
-        <el-switch
-          v-model="scope.row.required"
-          active-color="#13ce66"
-          :active-value="1"
-          :inactive-value="0"
-        />
+        <WeSwitch :value="scope.row.required" @change="(val) =>onWeChange(val,scope.row,'required')" :activeColor="'#13ce66'" :activeValue="1" :inactivealVue="0"/>
       </template>
-    </el-table-column>
-    <el-table-column
+    </u-table-column>
+    <u-table-column
       v-if="isColumnShow('maxLength')"
       prop="maxLength"
       :label="$t('maxLength')"
       width="130"
     >
       <template slot-scope="scope">
-        <el-input v-model="scope.row.maxLength" :placeholder="$t('maxLength')" size="mini" maxlength="10" show-word-limit />
+        <WeInput :value="scope.row.maxLength" @change="(val) =>onWeChange(val,scope.row,'maxLength')" :placeholder="$t('maxLength')" :size="'mini'" :maxlength="10" :showWordLimit="true"/>
       </template>
-    </el-table-column>
-    <el-table-column
+    </u-table-column>
+    <u-table-column
       v-if="isColumnShow('description')"
       prop="description"
       :label="descriptionLabel"
@@ -104,39 +97,36 @@
             prop="description"
             label-width="0"
           >
-            <el-input v-model="scope.row.description" :placeholder="descriptionLabel" />
+          <WeInput :value="scope.row.description" :size="'mini'" @change="(val) =>onWeChange(val,scope.row,'description')" :placeholder="descriptionLabel" :showWordLimit="false"/>
           </el-form-item>
         </el-form>
       </template>
-    </el-table-column>
-    <el-table-column
+    </u-table-column>
+    <u-table-column
       v-if="isColumnShow('example')"
       prop="example"
       :label="exampleLabel"
     >
       <template slot-scope="scope">
-        <el-input
-          v-model="scope.row.example"
-          :placeholder="exampleLabel"
-          size="mini"
-        />
+        <WeInput :value="scope.row.example" :size="'mini'" @change="(val) =>onWeChange(val,scope.row,'example')" :placeholder="exampleLabel" :showWordLimit="false"/>
       </template>
-    </el-table-column>
-    <el-table-column
+    </u-table-column>
+    <u-table-column
       prop="orderIndex"
       :label="$t('orderIndex')"
       width="125"
     >
       <template slot-scope="scope">
         <el-input-number
-          v-model="scope.row.orderIndex"
+          v-model.lazy="scope.row.orderIndex"
           controls-position="right"
           size="mini"
           style="width: 100px"
+          @change="(val) =>onWeChange(val,scope.row,'orderIndex')"
         />
       </template>
-    </el-table-column>
-    <el-table-column
+    </u-table-column>
+    <u-table-column
       v-if="isColumnShow('opt')"
       :label="$t('operation')"
       width="90"
@@ -156,12 +146,16 @@
           </div>
         </div>
       </template>
-    </el-table-column>
-  </el-table>
+    </u-table-column>
+  </u-table>
 </template>
 <script>
+import WeInput from "./input.vue"
+import WeSwitch from "./switch.vue"
+import WeSelect from "./select.vue"
 export default {
   name: 'EditTable',
+  components:{WeInput,WeSwitch,WeSelect},
   props: {
     data: {
       type: Array,
@@ -206,7 +200,7 @@ export default {
     getter: {
       type: Function,
       default: (rows) => { return rows.filter(row => !row.hidden) }
-    }
+    },
   },
   data() {
     return {
@@ -217,15 +211,24 @@ export default {
         name: [
           { required: true, message: $t('notEmpty'), trigger: ['blur', 'change'] }
         ]
+      },
+      newData:[],
+      scrollTOP:0,
+      scrollTOP1:0,
+      pagingScrollTopLeft:{
+        height:500,top:500,left:100,width:100
       }
     }
   },
   watch: {
     data(val) {
       this.rows = val
-    }
+      this.newData = JSON.parse(JSON.stringify(this.rows))
+    },
   },
   mounted() {
+    this.rows = this.data
+    this.newData = JSON.parse(JSON.stringify(this.rows))
     if (this.moduleId) {
       this.loadEnumData(this.moduleId, data => {
         this.enumData = data
@@ -246,21 +249,107 @@ export default {
       const children = row.children || []
       const child = this.getParamNewRow()
       child.parentId = row.id
+      child.maxLength = String(child.maxLength)//转为字符类型，解决警告
       this.pmsNextOrderIndex(children).then(order => {
         child.orderIndex = order
       })
       children.push(child)
       row.children = children
+      this.rows.forEach(e => {
+        let flag = false
+        if(e.id === row.id){
+          e.children = row.children
+          flag = true
+        }
+        if(!flag && e.children.length > 0){
+          this.getaddChildren(e.children,row.id,row.children)
+        }
+      })
+      
+      // 重新设置scrollTop
+      const tableBodyWrapperTop = this.$refs.virtualTable.$el.querySelector('.el-table__body-wrapper').scrollTop
+      this.$forceUpdate(); // 强制刷新组件
+      this.$nextTick(() => {
+        setTimeout(() => {
+          const tableBodyWrapper = this.$refs.virtualTable.$el.querySelector('.el-table__body-wrapper');
+          if(tableBodyWrapper){
+            tableBodyWrapper.scrollTop = Number(tableBodyWrapperTop)
+          }
+        },10)
+      });
+    },
+    getaddChildren(row,id,children){
+      let flag = false
+      row.forEach(e => {
+        if(e.id === id){
+          e.children = children
+          flag = true
+        }
+        if(!flag && e.children.length > 0){
+          this.getaddChildren(e.children,id,children)
+        }
+      })
     },
     onParamRemove(row) {
-      if (row.isNew) {
-        this.removeRow(this.rows, row.id)
-      } else {
+      // if (row.isNew) {
+      //   this.removeRow(this.rows, row.id)
+      // } else {
         row.isDeleted = 1
-      }
+        this.rows.forEach(e => {
+          if(e.id === row.id){
+            e.isDeleted = 1
+          }
+          if(e.children.length > 0){
+            this.getChildren(e.children,row.id)
+          }
+        })
+        // 重新设置scrollTop
+        const tableBodyWrapperTop = this.$refs.virtualTable.$el.querySelector('.el-table__body-wrapper').scrollTop
+        this.$forceUpdate(); // 强制刷新组件
+        this.$nextTick(() => {
+          setTimeout(() => {
+            const tableBodyWrapper = this.$refs.virtualTable.$el.querySelector('.el-table__body-wrapper');
+            if(tableBodyWrapper){
+              tableBodyWrapper.scrollTop = Number(tableBodyWrapperTop)
+            }
+          },10)
+        });
+      // }
+    },
+    getChildren(row,id){
+      row.forEach(e => {
+        if(e.id === id){
+            e.isDeleted = 1
+          }
+        if(e.children.length > 0){
+          this.getChildren(e.children,id)
+        }
+      })
     },
     getData() {
       return this.rows
+      return this.newData
+    },
+    onWeChange(val,row,code){
+      this.rows.forEach(e => {
+        if(e.id === row.id){
+          e[code] = val
+        }
+        if(e.children.length > 0){
+          this.setChildren(val,row,code,e.children)
+        }
+      })
+      this.$forceUpdate();
+    },
+    setChildren(val,row,code,rows){
+      rows.forEach(e => {
+        if(e.id === row.id){
+          e[code] = val
+        }
+        if(e.children.length > 0){
+          this.setChildren(val,row,code,e.children)
+        }
+      })
     },
     validate() {
       return this.validateTable(this.rows, ['form_name_'])
diff --git a/front/src/views/doc/EditTable/input.vue b/front/src/views/doc/EditTable/input.vue
new file mode 100644
index 00000000..e4816806
--- /dev/null
+++ b/front/src/views/doc/EditTable/input.vue
@@ -0,0 +1,52 @@
+<template>
+    <el-input v-model="value1" size="small"  @change="onChange" :placeholder="placeholder1" :size="size" :maxlength="maxlength || ''" :show-word-limit="showWordLimit"></el-input>
+</template>
+<script>
+export default {
+  name: 'Input',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    placeholder:{
+      type: String,
+      default: ''
+    },
+    size:{
+      type: String,
+      default: ''
+    },
+    maxlength:{
+      type: Number,
+      default: 0
+    },
+    showWordLimit:{
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+      value1: this.value,
+      placeholder1:this.placeholder,
+    }
+  },
+  watch: {
+    data(val) {
+        console.log(val)
+      this.value = val
+    }
+  },
+  methods: {
+    onChange() {
+        console.log(this.value1)
+        this.$emit('change',this.value1)
+    },
+  }
+}
+</script>
+ 
+<style scoped lang="scss">
+ 
+</style>
\ No newline at end of file
diff --git a/front/src/views/doc/EditTable/select.vue b/front/src/views/doc/EditTable/select.vue
new file mode 100644
index 00000000..0b7b9e5f
--- /dev/null
+++ b/front/src/views/doc/EditTable/select.vue
@@ -0,0 +1,66 @@
+<template>
+    <span>
+      <el-select v-if="type === 'arr'" v-model="value1" @change="onChange" :clearable="clearable" :size="'mini'" :filterable="filterable" :allowCreate="allowCreate">
+        <el-option v-for="type in list" :key="type" :label="type" :value="type"></el-option>
+      </el-select>
+      <el-select v-if="type === 'obj'" v-model="value1" @change="onChange" :clearable="clearable" :size="'mini'" :filterable="filterable" :allowCreate="allowCreate">
+        <el-option v-for="enumInfo in list" :key="enumInfo.id" :label="enumInfo.name" :value="enumInfo.id">
+          {{ enumInfo.name }}
+        </el-option>
+      </el-select>
+    </span>
+</template>
+<script>
+export default {
+  name: 'Select',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    size:{
+      type: String,
+      default: ''
+    },
+    type:{
+      type: String,
+      default: ''
+    },
+    clearable:{
+      type: Boolean,
+      default: false
+    },
+    list:{
+      type: Array,
+      default: []
+    },
+    filterable:{
+      type: Boolean,
+      default: false
+    },
+    allowCreate:{
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      value1: this.value,
+    }
+  },
+  watch: {
+    data(val) {
+      this.value = val
+    }
+  },
+  methods: {
+    onChange() {
+      this.$emit('change',this.value1)
+    },
+  }
+}
+</script>
+ 
+<style scoped lang="scss">
+ 
+</style>
\ No newline at end of file
diff --git a/front/src/views/doc/EditTable/switch.vue b/front/src/views/doc/EditTable/switch.vue
new file mode 100644
index 00000000..be311f52
--- /dev/null
+++ b/front/src/views/doc/EditTable/switch.vue
@@ -0,0 +1,51 @@
+<template>
+    <el-switch
+      v-model="value1"
+      :active-color="activeColor"
+      :active-value="activeVlaue"
+      :inactive-value="inactiveValue"
+      @change="onChange" 
+    />
+</template>
+<script>
+export default {
+  name: 'Switch1',
+  props: {
+    value: {
+      type: Number,
+      default: null
+    },
+    activeColor:{
+      type: String,
+      default: ''
+    },
+    activeVlaue:{
+      type: Number,
+      default: 1
+    },
+    inactiveValue:{
+      type: Number,
+      default: 0
+    },
+  },
+  data() {
+    return {
+      value1: this.value,
+    }
+  },
+  watch: {
+    data(val) {
+      this.value = val
+    }
+  },
+  methods: {
+    onChange() {
+      this.$emit('change',this.value1)
+    },
+  }
+}
+</script>
+ 
+<style scoped lang="scss">
+ 
+</style>
\ No newline at end of file
diff --git a/front/src/views/doc/RootArrayTable/index.vue b/front/src/views/doc/RootArrayTable/index.vue
index f0291947..5db16ccf 100644
--- a/front/src/views/doc/RootArrayTable/index.vue
+++ b/front/src/views/doc/RootArrayTable/index.vue
@@ -11,16 +11,25 @@
       <el-button type="text" icon="el-icon-plus" @click="onParamAdd">{{ $t('newParam') }}</el-button>
       <el-button type="text" icon="el-icon-bottom-right" @click="onImportRequestParamAdd">{{ $t('importParam') }}</el-button>
     </div>
-    <el-table
-      :data="tableData"
+    <u-table
+      :data="getter(rows)"
+      row-id="id"
       row-key="id"
+      use-virtual
+      :treeConfig="{
+        children: 'children',
+        iconClose: 'el-icon-arrow-right',
+        iconOpen: 'el-icon-arrow-down',
+        expandAll: true
+      }"
+      :height="500"
+      :row-height="20"
       border
-      default-expand-all
-      highlight-current-row
-      :empty-text="emptyText"
-      class="param-table"
+      class="param-table1"
+      ref="virtualTable"
     >
-      <el-table-column
+      <u-table-column
+        :tree-node="true"
         v-if="isTypeObject && isColumnShow('name')"
         prop="name"
         :label="nameLabel"
@@ -43,63 +52,52 @@
               prop="name"
               label-width="0"
             >
-              <el-input v-model="scope.row.name" :placeholder="$t('paramName')" maxlength="64" show-word-limit />
+              <WeInput :value="scope.row.name" :size="'mini'" @change="(val) =>onWeChange(val,scope.row,'name')" :placeholder="$t('paramName')" :maxlength="64" :showWordLimit="true"/>
             </el-form-item>
           </el-form>
         </template>
-      </el-table-column>
-      <el-table-column
+      </u-table-column>
+      <u-table-column
         v-if="isTypeObject && isColumnShow('type')"
         prop="type"
         :label="$t('type')"
         width="130"
       >
         <template slot-scope="scope">
-          <el-select v-model="scope.row.type" size="mini">
-            <el-option v-for="type in getTypeConfig()" :key="type" :label="type" :value="type"></el-option>
-          </el-select>
+          <WeSelect :type="'arr'" :value="scope.row.type" @change="(val) =>onWeChange(val,scope.row,'enumId')" :filterable="false" :allowCreate="false" :list="getTypeConfig()" :clearable="false" :size="'mini'"/>
         </template>
-      </el-table-column>
-      <el-table-column
+      </u-table-column>
+      <u-table-column
         v-if="isTypeObject && isColumnShow('enum')"
         prop="enum"
         :label="$t('linkDict')"
         width="120"
       >
         <template slot-scope="scope">
-          <el-select v-model="scope.row.enumId" :clearable="true" size="mini">
-            <el-option v-for="enumInfo in enumData" :key="enumInfo.id" :label="enumInfo.name" :value="enumInfo.id">
-              {{ enumInfo.name }}
-            </el-option>
-          </el-select>
+          <WeSelect :type="'obj'" :value="scope.row.enumId" @change="(val) =>onWeChange(val,scope.row,'enumId')" :filterable="false" :allowCreate="false" :list="enumData" :clearable="true" :size="'mini'"/>
         </template>
-      </el-table-column>
-      <el-table-column
+      </u-table-column>
+      <u-table-column
         v-if="isTypeObject && isColumnShow('required')"
         prop="required"
         :label="$t('require')"
         width="80"
       >
         <template slot-scope="scope">
-          <el-switch
-            v-model="scope.row.required"
-            active-color="#13ce66"
-            :active-value="1"
-            :inactive-value="0"
-          />
+          <WeSwitch :value="scope.row.required" @change="(val) =>onWeChange(val,scope.row,'required')" :activeColor="'#13ce66'" :activeValue="1" :inactivealVue="0"/>
         </template>
-      </el-table-column>
-      <el-table-column
+      </u-table-column>
+      <u-table-column
         v-if="isTypeObject && isColumnShow('maxLength')"
         prop="maxLength"
         :label="$t('maxLength')"
         width="130"
       >
         <template slot-scope="scope">
-          <el-input v-model="scope.row.maxLength" :placeholder="$t('maxLength')" size="mini" maxlength="10" show-word-limit />
+          <WeInput :value="scope.row.maxLength" :size="'mini'" @change="(val) =>onWeChange(val,scope.row,'example')" :placeholder="$t('maxLength')" :maxlength="10" :showWordLimit="true"/>
         </template>
-      </el-table-column>
-      <el-table-column
+      </u-table-column>
+      <u-table-column
         v-if="isColumnShow('description')"
         prop="description"
         :label="descriptionLabel"
@@ -110,27 +108,21 @@
               prop="description"
               label-width="0"
             >
-              <el-input v-model="scope.row.description" :placeholder="descriptionLabel" maxlength="512" show-word-limit />
+              <WeInput :value="scope.row.description" @change="(val) =>onWeChange(val,scope.row,'description')" :placeholder="descriptionLabel" :maxlength="512" :showWordLimit="true"/>
             </el-form-item>
           </el-form>
         </template>
-      </el-table-column>
-      <el-table-column
+      </u-table-column>
+      <u-table-column
         v-if="isColumnShow('example')"
         prop="example"
         :label="exampleLabel"
       >
         <template slot-scope="scope">
-          <el-input
-            v-model="scope.row.example"
-            :placeholder="exampleLabel"
-            maxlength="128"
-            size="mini"
-            show-word-limit
-          />
+          <WeInput :value="scope.row.example" :size="'mini'" @change="(val) =>onWeChange(val,scope.row,'example')" :placeholder="exampleLabel" :maxlength="128" :showWordLimit="true"/>
         </template>
-      </el-table-column>
-      <el-table-column
+      </u-table-column>
+      <u-table-column
         v-if="isColumnShow('opt')"
         :label="$t('operation')"
         width="90"
@@ -150,8 +142,8 @@
             </div>
           </div>
         </template>
-      </el-table-column>
-    </el-table>
+      </u-table-column>
+    </u-table>
     <el-dialog
       :title="importParamTemplateTitle"
       :visible.sync="importParamTemplateDlgShow"
@@ -166,7 +158,11 @@
 </template>
 <script>
 import { is_array_string } from '@/utils/common'
+import WeInput from "../EditTable/input.vue"
+import WeSwitch from "../EditTable/switch.vue"
+import WeSelect from "../EditTable/select.vue"
 export default {
+  components:{WeInput,WeSwitch,WeSelect},
   props: {
     data: {
       type: Array,
@@ -277,15 +273,78 @@ export default {
       const children = row.children || []
       const child = this.getParamNewRow()
       child.parentId = row.id
+      child.maxLength = String(child.maxLength)//转为字符类型，解决警告
       children.push(child)
       row.children = children
+      this.rows.forEach(e => {
+        let flag = false
+        if(e.id === row.id){
+          e.children = row.children
+          flag = true
+        }
+        if(!flag && e.children.length > 0){
+          this.getaddChildren(e.children,row.id,row.children)
+        }
+      })
+      const tableBodyWrapperTop = this.$refs.virtualTable.$el.querySelector('.el-table__body-wrapper').scrollTop
+      this.$forceUpdate(); // 强制刷新组件
+      
+      this.$nextTick(() => {
+        setTimeout(() => {
+          const tableBodyWrapper = this.$refs.virtualTable.$el.querySelector('.el-table__body-wrapper');
+          if(tableBodyWrapper){
+            tableBodyWrapper.scrollTop = Number(tableBodyWrapperTop)
+          }
+        },100)
+      });
+    },
+    getaddChildren(row,id,children){
+      let flag = false
+      row.forEach(e => {
+        if(e.id === id){
+          e.children = children
+          flag = true
+        }
+        if(!flag && e.children.length > 0){
+          this.getaddChildren(e.children,id,children)
+        }
+      })
     },
     onParamRemove(row) {
-      if (row.isNew) {
-        this.removeRow(this.data, row.id)
-      } else {
+      // if (row.isNew) {
+      //   this.removeRow(this.data, row.id)
+      // } else {
         row.isDeleted = 1
-      }
+        this.data.forEach(e => {
+          if(e.id === row.id){
+            e.isDeleted = 1
+          }
+          if(e.children.length > 0){
+            this.getChildren(e.children,row.id)
+          }
+        })
+        // 重新设置scrollTop
+        const tableBodyWrapperTop = this.$refs.virtualTable.$el.querySelector('.el-table__body-wrapper').scrollTop
+        this.$forceUpdate(); // 强制刷新组件
+        this.$nextTick(() => {
+          setTimeout(() => {
+            const tableBodyWrapper = this.$refs.virtualTable.$el.querySelector('.el-table__body-wrapper');
+            if(tableBodyWrapper){
+              tableBodyWrapper.scrollTop = Number(tableBodyWrapperTop)
+            }
+          },10)
+        });
+      // }
+    },
+    getChildren(row,id){
+      row.forEach(e => {
+        if(e.id === id){
+            e.isDeleted = 1
+          }
+        if(e.children.length > 0){
+          this.getChildren(e.children,id)
+        }
+      })
     },
     onImportParamSave() {
       const val = this.importParamTemplateValue
@@ -316,6 +375,26 @@ export default {
         data: this.data
       }
     },
+    onWeChange(val,row,code){
+      this.data.forEach(e => {
+        if(e.id === row.id){
+          e[code] = val
+        }
+        if(e.children.length > 0){
+          this.setChildren(val,row,code,e.children)
+        }
+      })
+    },
+    setChildren(val,row,code,rows){
+      rows.forEach(e => {
+        if(e.id === row.id){
+          e[code] = val
+        }
+        if(e.children.length > 0){
+          this.setChildren(val,row,code,e.children)
+        }
+      })
+    },
     validate() {
       const fn = rows => {
         let valid = true
@@ -330,9 +409,9 @@ export default {
         return valid
       }
       if (this.isTypeObject) {
-        return fn(this.tableData)
+        return fn(this.data)
       } else {
-        const row = this.tableData[0]
+        const row = this.data[0]
         if (!row.description) {
           return false
         }
-- 
Gitee