141 lines
3.2 KiB
Vue
141 lines
3.2 KiB
Vue
<template>
|
|
<a-modal
|
|
:confirmLoading="confirmLoading"
|
|
:visible="visible"
|
|
@cancel="onCancel"
|
|
@ok="onOk"
|
|
class="yo-modal-form"
|
|
title="授权额外数据"
|
|
>
|
|
<a-form-model class="yo-form" ref="form">
|
|
<a-spin :spinning="loading">
|
|
<a-icon slot="indicator" spin type="loading" />
|
|
<div class="yo-form-group">
|
|
<a-form-model-item label="选择机构">
|
|
<a-tree-select
|
|
:show-checked-strategy="SHOW_PARENT"
|
|
:tree-data="orgTreeData"
|
|
placeholder="请选择机构"
|
|
search-placeholder="请检索"
|
|
tree-checkable
|
|
v-model="orgs"
|
|
/>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="区域">
|
|
<a-tree-select
|
|
:replace-fields="{ title: 'name', value: 'code', children: 'children' }"
|
|
:show-checked-strategy="SHOW_PARENT"
|
|
:tree-data="arerTreeData"
|
|
placeholder="请区域"
|
|
search-placeholder="请检索"
|
|
tree-checkable
|
|
v-model="areas"
|
|
/>
|
|
</a-form-model-item>
|
|
</div>
|
|
</a-spin>
|
|
</a-form-model>
|
|
</a-modal>
|
|
</template>
|
|
<script>
|
|
import { TreeSelect } from 'ant-design-vue';
|
|
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
confirmLoading: false,
|
|
|
|
loading: false,
|
|
|
|
id: '',
|
|
orgs: [],
|
|
orgTreeData: [],
|
|
|
|
areas: [],
|
|
arerTreeData: [],
|
|
|
|
SHOW_PARENT,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* 必要的方法
|
|
* 从外部调用打开本窗口
|
|
*/
|
|
async onOpen(record) {
|
|
this.visible = true;
|
|
this.id = record.id;
|
|
this.$nextTick(() => {
|
|
this.onInit();
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 必要的方法
|
|
* 点击保存时的操作
|
|
*/
|
|
onOk() {
|
|
this.confirmLoading = true;
|
|
this.$api
|
|
/** !!此处必须修改调用的接口方法 */
|
|
.sysUserGrantData({
|
|
id: this.id,
|
|
grantOrgIdList: this.orgs,
|
|
grantAreaCodeList: this.areas,
|
|
})
|
|
.then(({ success }) => {
|
|
if (success) {
|
|
this.$message.success('授权成功');
|
|
this.onCancel();
|
|
this.$emit('ok');
|
|
}
|
|
})
|
|
.finally(() => {
|
|
this.confirmLoading = false;
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 必要的方法
|
|
* 关闭窗口时的操作
|
|
*/
|
|
onCancel() {
|
|
this.visible = false;
|
|
setTimeout(() => {
|
|
this.orgs = [];
|
|
this.areas = [];
|
|
}, 300);
|
|
},
|
|
|
|
async onInit() {
|
|
this.loading = true;
|
|
this.orgTreeData = await this.onLoadOrgTreeData();
|
|
this.orgs = await this.onLoadOrg();
|
|
|
|
this.arerTreeData = await this.onLoadAreaTreeData();
|
|
this.loading = false;
|
|
},
|
|
|
|
onLoadOrgTreeData() {
|
|
return this.$api.getOrgTree().then(({ data }) => {
|
|
return data;
|
|
});
|
|
},
|
|
|
|
onLoadAreaTreeData() {
|
|
return this.$api.getAreaTree().then(({ data }) => {
|
|
return data;
|
|
});
|
|
},
|
|
|
|
onLoadOrg() {
|
|
return this.$api.sysUserOwnData({ id: this.id }).then(({ data }) => {
|
|
return data;
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script> |