This commit is contained in:
ky_sunl
85
Web/src/pages/system/org/addForm.vue
Normal file
85
Web/src/pages/system/org/addForm.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
class="yo-modal-form"
|
||||
title="新增机构"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
formBody() {
|
||||
return this.$refs['form-body'];
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口
|
||||
*/
|
||||
onOpen(record, orgId) {
|
||||
this.visible = true;
|
||||
this.$nextTick(async () => {
|
||||
await this.formBody.onInit();
|
||||
|
||||
// 获取外部选中的部门id
|
||||
this.formBody.onFillData({
|
||||
pid: orgId,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.$refs['form-body'].onValidate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysOrgAdd(this.$refs['form-body'].form)
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('新增成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
75
Web/src/pages/system/org/editForm.vue
Normal file
75
Web/src/pages/system/org/editForm.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
class="yo-modal-form"
|
||||
title="编辑机构"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口,并填充外部传入的数据
|
||||
*/
|
||||
onOpen(record) {
|
||||
this.visible = true;
|
||||
this.$nextTick(async () => {
|
||||
await this.$refs['form-body'].onInit();
|
||||
this.$refs['form-body'].onFillData(record);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.$refs['form-body'].onValidate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysOrgEdit(this.$refs['form-body'].form)
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
96
Web/src/pages/system/org/form.vue
Normal file
96
Web/src/pages/system/org/form.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<a-form-model :model="form" :rules="rules" 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 has-feedback label="机构名称" prop="name">
|
||||
<a-input placeholder="请输入机构名称" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item has-feedback label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item has-feedback label="上级机构" prop="pid">
|
||||
<a-tree-select
|
||||
:tree-data="orgData"
|
||||
placeholder="请选择上级机构"
|
||||
tree-default-expand-all
|
||||
v-model="form.pid"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="排序" prop="sort">
|
||||
<a-input-number
|
||||
:max="1000"
|
||||
:min="0"
|
||||
class="w-100-p"
|
||||
placeholder="请输入排序"
|
||||
v-model="form.sort"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="备注">
|
||||
<a-textarea placeholder="请输入备注" v-model="form.remark" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入机构名称' }],
|
||||
code: [{ required: true, message: '请输入唯一编码' }],
|
||||
pid: [{ required: true, message: '请选择上级机构' }],
|
||||
},
|
||||
|
||||
loading: false,
|
||||
|
||||
orgData: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(record) {
|
||||
this.form = this.$_.cloneDeep(record);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
}, 300);
|
||||
},
|
||||
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
this.orgData = await this.onLoadOrgData();
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
onLoadOrgData() {
|
||||
return this.$api.getOrgTree().then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
|
||||
onChangeExtData(value, record, type) {
|
||||
record[type] = value;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
185
Web/src/pages/system/org/index.vue
Normal file
185
Web/src/pages/system/org/index.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<yo-tree-layout
|
||||
:load-data="loadTreeData"
|
||||
@select="onSelect"
|
||||
default-expanded-keys
|
||||
ref="tree-layout"
|
||||
>
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysOrg:page">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<a-form-model-item label="机构名称">
|
||||
<a-input allow-clear placeholder="请输入机构名称" v-model="query.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button-group>
|
||||
<a-button @click="onQuery" type="primary">查询</a-button>
|
||||
<a-button @click="onReset">重置</a-button>
|
||||
</a-button-group>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
|
||||
<yo-table :columns="columns" :load-data="loadData" ref="table">
|
||||
<Auth auth="sysOrg:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增机构</a-button>
|
||||
</Auth>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<yo-table-actions>
|
||||
<Auth auth="sysOrg:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysOrg:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</Auth>
|
||||
</a-card>
|
||||
</container>
|
||||
<add-form @ok="onReloadData" ref="add-form" />
|
||||
<edit-form @ok="onReloadData" ref="edit-form" />
|
||||
</yo-tree-layout>
|
||||
</template>
|
||||
<script>
|
||||
import YoTreeLayout from '@/components/yoTreeLayout';
|
||||
|
||||
import AddForm from './addForm';
|
||||
import EditForm from './editForm';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
YoTreeLayout,
|
||||
AddForm,
|
||||
EditForm,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '机构名称',
|
||||
width: '400px',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
width: '200px',
|
||||
dataIndex: 'code',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
width: '80px',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
const flag = this.$auth({
|
||||
sysOrg: [['edit'], ['delete']],
|
||||
});
|
||||
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 树形选择界面必要的方法
|
||||
* 传给yo-table-layout以示意数据接口
|
||||
*/
|
||||
loadTreeData() {
|
||||
return this.$api.getOrgTree().then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
onSelect([id]) {
|
||||
this.query = {
|
||||
pid: id,
|
||||
};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api
|
||||
.getOrgPage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
onReset() {
|
||||
Object.keys(this.query).forEach((p) => {
|
||||
if (p !== 'pid') {
|
||||
this.query[p] = undefined;
|
||||
}
|
||||
});
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
this.$refs['tree-layout'].onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen(record, this.query['pid']);
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$api.sysOrgDelete(record).then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('删除成功');
|
||||
this.onReloadData();
|
||||
if (this.query['pid'] == record.id) {
|
||||
delete this.query.pid;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user