[update] 资料中心的弹框拆分出来

src/views/businessSupport/DataCenter.vue

@@ -80,18 +80,17 @@
                     </a-form-item>
                   </a-col>
                 </template>
-                <span style="float: right;overflow: hidden;margin-right: 11px"
+                <span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
-                      class="table-page-search-submitButtons">
+                  <a-col :md="6" :sm="24">
-                      <a-col :md="6" :sm="24">
+                    <a @click="handleToggleSearch">
-                       <a @click="handleToggleSearch">
+                     <span class="icon-open">{{ !toggleSearchStatus ? $t('open') : $t('putAway') }}</span>
-                         <span class="icon-open">{{ !toggleSearchStatus ? $t('open') : $t('putAway') }}</span>
+                     <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
-                         <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+                    </a>
-                         <a-button class="box-button" style="margin-left: 8px"
+                    <a-button class="box-button" style="margin-left: 8px"
-                                   @click="searchReset">{{ $t('reset') }}</a-button>
+                             @click="searchReset">{{ $t('reset') }}</a-button>
-                         <a-button class="box-button" style="margin-left: 8px" type="primary" @click="searchQuery">{{ $t('query') }}</a-button>
+                    <a-button class="box-button" style="margin-left: 8px" type="primary" @click="searchQuery">{{ $t('query') }}</a-button>
-                       </a>
+                  </a-col>
-                      </a-col>
+                </span>
-                    </span>
               </a-row>
             </a-form>
           </div>
@@ -147,117 +146,7 @@
           <!--  上传文件-->
           <addModel ref="addModelRef" @addModelList="addModelList"/>
           <!--          添加节点-->
-          <a-modal
+          <add-node-modal ref="addNodeModal" @ok="addNodeOk"></add-node-modal>
-            class="add-menus"
-            :title="menuTitle"
-            :width="600"
-            :visible="menuRightVisible"
-            :confirm-loading="confirmLoading"
-            @cancel="handleCancelMenuRight"
-            @ok="hideModalMenuRight"
-          >
-            <a-form-model
-              class="split-click-right-form"
-              ref="ruleForm"
-              :model="form"
-              :rules="rules"
-              :label-col="labelCol"
-              :wrapper-col="wrapperCol"
-            >
-              <a-row :gutter="24">
-                <a-col :span="24">
-                  <div class="box-title-text">
-                    <div class="title-text">
-                      <span class="required">*</span>
-                      <span class="title-text-text"
-                            :title="$t('treeRight.folderName')">{{$t('treeRight.folderName')}}</span>
-                    </div>
-                    <a-form-model-item prop="folderName" style='width: 72%'>
-                      <a-input
-                        v-model.trim="form.folderName"
-                        style='width: 130%'
-                        class="box-input add-input"
-                        maxLength="100"
-                        :placeholder="$t('pleaseEnter')+$t('treeRight.folderName')"/>
-                    </a-form-model-item>
-                  </div>
-                </a-col>
-              </a-row>
-              <a-row :gutter="24">
-                <a-col :span="24">
-                  <div class="box-title-text">
-                    <div class="title-text">
-                          <span class="title-text-text"
-                                :title="$t('treeRight.administrativePrivileges')">{{$t('treeRight.administrativePrivileges')}}</span>
-                    </div>
-                    <a-form-model-item class="itemModel-multi" prop="authManageIdsName">
-                      <a-select
-                        mode="multiple"
-                        v-model="form.authManageIdsName"
-                        :placeholder="$t('pleaseSelect')+$t('treeRight.administrativePrivileges')"
-                        :filter-option="false"
-                        :not-found-content="null"
-                        allowClear
-                        @search="personSearch"
-                      >
-                        <a-select-option v-for="item in personList" :key="item.id" :value="item.id">
-                          {{ item.realname }}
-                        </a-select-option>
-                        <template slot="notFoundContent">
-                          <a-empty></a-empty>
-                        </template>
-                      </a-select>
-                    </a-form-model-item>
-                  </div>
-                </a-col>
-              </a-row>
-              <a-row :gutter="24">
-                <a-col :span="24">
-                  <div class="box-title-text">
-                    <div class="title-text">
-                          <span class="title-text-text"
-                                :title="$t('treeRight.checkPermissions')">{{$t('treeRight.checkPermissions')}}</span>
-                    </div>
-                    <a-form-model-item class="itemModel-multi" prop="authViewIdsName">
-                      <a-select
-                        mode="multiple"
-                        v-model="form.authViewIds"
-                        :placeholder="$t('pleaseSelect')+$t('treeRight.administrativePrivileges')"
-                        :filter-option="false"
-                        :not-found-content="null"
-                        allowClear
-                        @search="personSearch"
-                      >
-                        <a-select-option v-for="item in personList" :key="item.id" :value="item.id">
-                          {{ item.realname }}
-                        </a-select-option>
-                        <template slot="notFoundContent">
-                          <a-empty></a-empty>
-                        </template>
-                      </a-select>
-                    </a-form-model-item>
-                  </div>
-                </a-col>
-              </a-row>
-              <a-row :gutter="24">
-                <a-col :span="24">
-                  <div class="box-title-text">
-                    <div class="title-text">
-                      <span class="Required">*</span>
-                      <span class="title-text-text"
-                            :title="$t('treeRight.folderOrder')">{{$t('treeRight.folderOrder')}}</span>
-                    </div>
-                    <a-form-model-item class="itemModel" prop="orderId">
-                      <a-input-number v-model.trim="form.orderId" :min="1" :max="9999" class="box-input add-input"
-                                      :placeholder="$t('pleaseEnter')+$t('treeRight.folderOrder')" :formatter="limitNumber"
-                                      :parser="limitNumber"/>
-                    </a-form-model-item>
-                  </div>
-                </a-col>
-              </a-row>
-            </a-form-model>
-          </a-modal>
-
         </div>
       </div>
     </div>
@@ -265,23 +154,25 @@
 </template>
 
 <script>
+// 上传文件弹框
 import AddModel from './modules/AddModel'
-import { getAction, postAction, downloadFile, deleteAction, putAction } from '@/api/manage'
+// 添加节点弹框
+import AddNodeModal from './modules/AddNodeModal'
+import { getAction, postAction, downloadFile, deleteAction } from '@/api/manage'
 import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
 import { JeroListMixin } from '@/mixins/JeroListMixin'
-import { getUserList } from '@/api/api'
 
 export default {
   name: 'DataCenter',
   components: {
-    AddModel
+    AddModel,
+    AddNodeModal
   },
   mixins: [ResizeHeader, ResizeColumnProvide, JeroListMixin],
   data () {
     return {
       labelCol: { span: 6 },
       wrapperCol: { span: 16 },
-      personList: [],
       disabled: false,
       manager: false, // 是否有树右键菜单
       addSub: true,
@@ -294,31 +185,12 @@ export default {
       loading: false,
       attId: '',
       data: [],
-      confirmLoading: false,
       nodeTreeItem: null, // 右键菜单
       tmpStyle: '', // 右键菜单位置
-      menuTitle: this.$t('add'),
-      menuRightVisible: false,
-      form: {},
-      rules: {
-        folderName: [
-          { required: true, message: this.$t('pleaseEnter') + this.$t('treeRight.folderName'), trigger: 'blur' }
-        ],
-        // authManageIdsName: [
-        //   { required: true, message: this.$t('pleaseSelect') + this.$t('treeRight.administrativePrivileges'), trigger: 'change' },
-        // ],
-        // authViewIdsName: [
-        //   { required: true, message: this.$t('pleaseSelect') + this.$t('treeRight.checkPermissions'), trigger: 'change' },
-        // ],
-        orderId: [
-          { required: true, message: this.$t('pleaseEnter') + this.$t('treeRight.folderOrder'), trigger: 'blur' }
-        ]
-      },
       infoId: '',
       menuId: '',
       itemId: '',
       itemVal: {},
-      isEdit: false,
       columns: [
         {
           title: this.$t('fileName'),
@@ -375,13 +247,6 @@ export default {
     this.generateList(this.gData)
   },
   methods: {
-    personSearch (value) {
-      getUserList({ pageNo: 1, pageSize: 20, realname: '*' + value + '*' }).then(res => {
-        if (res.success) {
-          this.personList = res.result.records || []
-        }
-      })
-    },
     // 获取左侧菜单的下级
     generateList (data) {
       for (let i = 0; i < data.length; i++) {
@@ -494,16 +359,15 @@ export default {
     },
     // 树形新增文件夹
     orgAdd () {
-      this.menuTitle = this.$t('treeRight.addFolder')
+      this.$refs.addNodeModal.menuTitle = this.$t('treeRight.addFolder')
-      this.isEdit = false
+      const form = {}
-      this.form = {}
+      form.supFolder = this.nodeItem.key
-      this.supFolder = this.nodeItem.key
+      form.addSub = false
-      this.addSub = false
       const params = {}
-      params.id = this.supFolder
+      params.id = this.nodeItem.key
       postAction(`extRepo/extRepoFolder/isAllowSiblingFolder`, params).then(res => {
         if (res.success) {
-          this.menuRightVisible = true
+          this.$refs.addNodeModal.open(false, form)
         } else {
           this.$message.warning(res.message)
         }
@@ -511,26 +375,24 @@ export default {
     },
     // 树形新增子文件夹
     orgAdds () {
-      this.menuTitle = this.$t('treeRight.addSubFolders')
+      this.$refs.addNodeModal.menuTitle = this.$t('treeRight.addSubFolders')
-      this.isEdit = false
+      const form = {}
-      this.form = {}
+      form.supFolder = this.nodeItem.key
-      this.supFolder = this.nodeItem.key
+      form.addSub = true
-      this.addSub = true
+      this.$refs.addNodeModal.open(false, form)
-      this.menuRightVisible = true
     },
     // 树形修改
     orgEdit () {
       this.menuTitle = this.$t('treeRight.editFolder')
-      this.isEdit = true
+      const form = {}
-      this.form.id = this.nodeItem.key
+      form.id = this.nodeItem.key
-      this.form.authManageIds = this.nodeItem.authManageIds
+      form.authManageIds = this.nodeItem.authManageIds
-      this.form.authViewIds = this.nodeItem.authViewIds
+      form.authViewIds = this.nodeItem.authViewIds
-      this.form.authManageIdsName = this.nodeItem.authManageIdsName
+      form.authManageIdsName = this.nodeItem.authManageIdsName
-      this.form.authViewIdsName = this.nodeItem.authViewIdsName
+      form.authViewIdsName = this.nodeItem.authViewIdsName
-      this.form.folderName = this.nodeItem.folderName
+      form.folderName = this.nodeItem.folderName
-      this.form.orderId = this.nodeItem.orderId
+      form.orderId = this.nodeItem.orderId
-      this.form = { ...this.form }
+      this.$refs.addNodeModal.open(true, form)
-      this.menuRightVisible = true
     },
     // 树形删除
     orgDelete () {
@@ -550,58 +412,11 @@ export default {
           }
       })
     },
-    // 取消文件夹的新增或编辑
+    // 添加或编辑节点成功
-    handleCancelMenuRight () {
+    addNodeOk () {
-      this.menuRightVisible = false
+      this.expandedKeys.push(this.nodeItem.id)
-      this.$refs.ruleForm.clearValidate()
+      this.loadMenuData()
-    },
+      this.searchQuery()
-    // 增加文件夹确定
-    hideModalMenuRight () {
-      if (this.confirmLoading) {
-        return
-      }
-      if (!this.isEdit) {
-        const params = {
-          supFolder: this.supFolder,
-          addSub: this.addSub,
-          ...this.form
-        }
-        this.$refs.ruleForm.validate(valid => {
-          if (valid) {
-            this.confirmLoading = true
-            postAction(`extRepo/extRepoFolder/add`, params).then(res => {
-              if (res.success) {
-                this.$message.success(res.message)
-                this.form = {}
-                this.expandedKeys.push(this.nodeItem.id)
-                this.loadMenuData()
-                this.searchQuery()
-              } else {
-                this.$message.warning(res.message)
-              }
-            }).finally(() => {
-              this.confirmLoading = false
-              this.menuRightVisible = false
-            })
-          }
-        })
-      } else {
-        const params = {
-          ...this.form
-        }
-        putAction(`extRepo/extRepoFolder/edit`, params).then(res => {
-          if (res.success) {
-            this.$message.success(res.message)
-            this.form = {}
-            this.loadMenuData()
-          } else {
-            this.$message.warning(res.message)
-          }
-        }).finally(() => {
-          this.confirmLoading = false
-          this.menuRightVisible = false
-        })
-      }
     },
     // 上传文件弹框成功后的回调
     addModelList () {

src/views/businessSupport/modules/AddNodeModal.vue

@@ -0,0 +1,209 @@
+<template>
+  <a-modal
+    class="add-menus"
+    :title="title"
+    :width="600"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    @cancel="handleCancelMenuRight"
+    @ok="hideModalMenuRight"
+  >
+    <a-form-model
+      class="split-click-right-form"
+      ref="ruleForm"
+      :model="form"
+      :rules="rules"
+    >
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <div class="box-title-text">
+            <div class="title-text">
+              <span class="required">*</span>
+              <span class="title-text-text"
+                    :title="$t('treeRight.folderName')">{{$t('treeRight.folderName')}}</span>
+            </div>
+            <a-form-model-item prop="folderName" style='width: 72%'>
+              <a-input
+                v-model.trim="form.folderName"
+                style='width: 130%'
+                class="box-input add-input"
+                maxLength="100"
+                :placeholder="$t('pleaseEnter')+$t('treeRight.folderName')"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <div class="box-title-text">
+            <div class="title-text">
+                          <span class="title-text-text"
+                                :title="$t('treeRight.administrativePrivileges')">{{$t('treeRight.administrativePrivileges')}}</span>
+            </div>
+            <a-form-model-item class="itemModel-multi" prop="authManageIdsName">
+              <a-select
+                mode="multiple"
+                v-model="form.authManageIdsName"
+                :placeholder="$t('pleaseSelect')+$t('treeRight.administrativePrivileges')"
+                :filter-option="false"
+                :not-found-content="null"
+                allowClear
+                @search="personSearch"
+              >
+                <a-select-option v-for="item in personList" :key="item.id" :value="item.id">
+                  {{ item.realname }}
+                </a-select-option>
+                <template slot="notFoundContent">
+                  <a-empty></a-empty>
+                </template>
+              </a-select>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <div class="box-title-text">
+            <div class="title-text">
+                          <span class="title-text-text"
+                                :title="$t('treeRight.checkPermissions')">{{$t('treeRight.checkPermissions')}}</span>
+            </div>
+            <a-form-model-item class="itemModel-multi" prop="authViewIdsName">
+              <a-select
+                mode="multiple"
+                v-model="form.authViewIds"
+                :placeholder="$t('pleaseSelect')+$t('treeRight.administrativePrivileges')"
+                :filter-option="false"
+                :not-found-content="null"
+                allowClear
+                @search="personSearch"
+              >
+                <a-select-option v-for="item in personList" :key="item.id" :value="item.id">
+                  {{ item.realname }}
+                </a-select-option>
+                <template slot="notFoundContent">
+                  <a-empty></a-empty>
+                </template>
+              </a-select>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <div class="box-title-text">
+            <div class="title-text">
+              <span class="Required">*</span>
+              <span class="title-text-text"
+                    :title="$t('treeRight.folderOrder')">{{$t('treeRight.folderOrder')}}</span>
+            </div>
+            <a-form-model-item class="itemModel" prop="orderId">
+              <a-input-number v-model.trim="form.orderId" :min="1" :max="9999" class="box-input add-input"
+                              :placeholder="$t('pleaseEnter')+$t('treeRight.folderOrder')" :formatter="limitNumber"
+                              :parser="limitNumber"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+    </a-form-model>
+  </a-modal>
+</template>
+
+<script>
+import { getUserList } from '@/api/api'
+import { postAction, putAction } from '@/api/manage'
+
+export default {
+  name: 'AddNodeModal',
+  data () {
+    return {
+      title: this.$t('add'),
+      visible: false,
+      confirmLoading: false,
+      form: {},
+      rules: {
+        folderName: [
+          { required: true, message: this.$t('pleaseEnter') + this.$t('treeRight.folderName'), trigger: 'blur' }
+        ],
+        // authManageIdsName: [
+        //   { required: true, message: this.$t('pleaseSelect') + this.$t('treeRight.administrativePrivileges'), trigger: 'change' },
+        // ],
+        // authViewIdsName: [
+        //   { required: true, message: this.$t('pleaseSelect') + this.$t('treeRight.checkPermissions'), trigger: 'change' },
+        // ],
+        orderId: [
+          { required: true, message: this.$t('pleaseEnter') + this.$t('treeRight.folderOrder'), trigger: 'blur' }
+        ]
+      },
+      personList: [],
+      isEdit: false
+    }
+  },
+  methods: {
+    open (isEdit, form) {
+      this.visible = true
+      this.isEdit = true
+      this.form = Object.assign({}, form)
+    },
+    personSearch (value) {
+      getUserList({ pageNo: 1, pageSize: 20, realname: '*' + value + '*' }).then(res => {
+        if (res.success) {
+          this.personList = res.result.records || []
+        }
+      })
+    },
+    // 取消文件夹的新增或编辑
+    handleCancelMenuRight () {
+      this.visible = false
+      this.$refs.ruleForm.clearValidate()
+    },
+    // 增加文件夹确定
+    hideModalMenuRight () {
+      if (this.confirmLoading) {
+        return
+      }
+      if (!this.isEdit) {
+        const params = {
+          ...this.form
+        }
+        this.$refs.ruleForm.validate(valid => {
+          if (valid) {
+            this.confirmLoading = true
+            postAction(`extRepo/extRepoFolder/add`, params).then(res => {
+              if (res.success) {
+                this.$message.success(res.message)
+                this.form = {}
+              } else {
+                this.$message.warning(res.message)
+              }
+            }).finally(() => {
+              this.confirmLoading = false
+              this.visible = false
+            })
+          }
+        })
+      } else {
+        const params = {
+          ...this.form
+        }
+        putAction(`extRepo/extRepoFolder/edit`, params).then(res => {
+          if (res.success) {
+            this.$message.success(res.message)
+            this.form = {}
+            this.loadMenuData()
+          } else {
+            this.$message.warning(res.message)
+          }
+        }).finally(() => {
+          this.confirmLoading = false
+          this.visible = false
+        })
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>