[update] 资料中心的弹框拆分出来
This commit is contained in:
lideqin
@@ -80,18 +80,17 @@
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</template>
|
||||
<span style="float: right;overflow: hidden;margin-right: 11px"
|
||||
class="table-page-search-submitButtons">
|
||||
<a-col :md="6" :sm="24">
|
||||
<a @click="handleToggleSearch">
|
||||
<span class="icon-open">{{ !toggleSearchStatus ? $t('open') : $t('putAway') }}</span>
|
||||
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
|
||||
<a-button class="box-button" style="margin-left: 8px"
|
||||
@click="searchReset">{{ $t('reset') }}</a-button>
|
||||
<a-button class="box-button" style="margin-left: 8px" type="primary" @click="searchQuery">{{ $t('query') }}</a-button>
|
||||
</a>
|
||||
</a-col>
|
||||
</span>
|
||||
<span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
|
||||
<a-col :md="6" :sm="24">
|
||||
<a @click="handleToggleSearch">
|
||||
<span class="icon-open">{{ !toggleSearchStatus ? $t('open') : $t('putAway') }}</span>
|
||||
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
|
||||
</a>
|
||||
<a-button class="box-button" style="margin-left: 8px"
|
||||
@click="searchReset">{{ $t('reset') }}</a-button>
|
||||
<a-button class="box-button" style="margin-left: 8px" type="primary" @click="searchQuery">{{ $t('query') }}</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
@@ -147,117 +146,7 @@
|
||||
<!-- 上传文件-->
|
||||
<addModel ref="addModelRef" @addModelList="addModelList"/>
|
||||
<!-- 添加节点-->
|
||||
<a-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>
|
||||
|
||||
<add-node-modal ref="addNodeModal" @ok="addNodeOk"></add-node-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.isEdit = false
|
||||
this.form = {}
|
||||
this.supFolder = this.nodeItem.key
|
||||
this.addSub = false
|
||||
this.$refs.addNodeModal.menuTitle = this.$t('treeRight.addFolder')
|
||||
const form = {}
|
||||
form.supFolder = this.nodeItem.key
|
||||
form.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.isEdit = false
|
||||
this.form = {}
|
||||
this.supFolder = this.nodeItem.key
|
||||
this.addSub = true
|
||||
this.menuRightVisible = true
|
||||
this.$refs.addNodeModal.menuTitle = this.$t('treeRight.addSubFolders')
|
||||
const form = {}
|
||||
form.supFolder = this.nodeItem.key
|
||||
form.addSub = true
|
||||
this.$refs.addNodeModal.open(false, form)
|
||||
},
|
||||
// 树形修改
|
||||
orgEdit () {
|
||||
this.menuTitle = this.$t('treeRight.editFolder')
|
||||
this.isEdit = true
|
||||
this.form.id = this.nodeItem.key
|
||||
this.form.authManageIds = this.nodeItem.authManageIds
|
||||
this.form.authViewIds = this.nodeItem.authViewIds
|
||||
this.form.authManageIdsName = this.nodeItem.authManageIdsName
|
||||
this.form.authViewIdsName = this.nodeItem.authViewIdsName
|
||||
this.form.folderName = this.nodeItem.folderName
|
||||
this.form.orderId = this.nodeItem.orderId
|
||||
this.form = { ...this.form }
|
||||
this.menuRightVisible = true
|
||||
const form = {}
|
||||
form.id = this.nodeItem.key
|
||||
form.authManageIds = this.nodeItem.authManageIds
|
||||
form.authViewIds = this.nodeItem.authViewIds
|
||||
form.authManageIdsName = this.nodeItem.authManageIdsName
|
||||
form.authViewIdsName = this.nodeItem.authViewIdsName
|
||||
form.folderName = this.nodeItem.folderName
|
||||
form.orderId = this.nodeItem.orderId
|
||||
this.$refs.addNodeModal.open(true, form)
|
||||
},
|
||||
// 树形删除
|
||||
orgDelete () {
|
||||
@@ -550,58 +412,11 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
// 取消文件夹的新增或编辑
|
||||
handleCancelMenuRight () {
|
||||
this.menuRightVisible = false
|
||||
this.$refs.ruleForm.clearValidate()
|
||||
},
|
||||
// 增加文件夹确定
|
||||
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
|
||||
})
|
||||
}
|
||||
// 添加或编辑节点成功
|
||||
addNodeOk () {
|
||||
this.expandedKeys.push(this.nodeItem.id)
|
||||
this.loadMenuData()
|
||||
this.searchQuery()
|
||||
},
|
||||
// 上传文件弹框成功后的回调
|
||||
addModelList () {
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user