This commit is contained in:
ky_sunl
216
Web/src/pages/system/app/index.vue
Normal file
216
Web/src/pages/system/app/index.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysApp:page">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<a-form-model-item label="应用名称">
|
||||
<a-input placeholder="请输入应用名称" v-model="query.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码">
|
||||
<a-input placeholder="请输入唯一编码" v-model="query.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button-group>
|
||||
<a-button @click="onQuery" type="primary">查询</a-button>
|
||||
<a-button @click="() => { query = {}, onQuery() }">重置</a-button>
|
||||
</a-button-group>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</Auth>
|
||||
|
||||
<yo-table :columns="columns" :load-data="loadData" ref="table">
|
||||
<Auth auth="sysApp:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增应用</a-button>
|
||||
</Auth>
|
||||
<span slot="active" slot-scope="text, record">
|
||||
{{ bindCodeValue(text, 'yes_or_no') }}
|
||||
<Auth auth="sysApp:setAsDefault" v-if="record.active == 'N'">
|
||||
<yo-table-actions>
|
||||
<span></span>
|
||||
<a-popconfirm
|
||||
@confirm="onSetDefault(record)"
|
||||
placement="topRight"
|
||||
title="是否确认设置为默认应用"
|
||||
>
|
||||
<a>设为默认</a>
|
||||
</a-popconfirm>
|
||||
</yo-table-actions>
|
||||
</Auth>
|
||||
</span>
|
||||
<span slot="status" slot-scope="text">{{ bindCodeValue(text, 'common_status') }}</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<yo-table-actions>
|
||||
<Auth auth="sysApp:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysApp:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
<br />
|
||||
<add-form @ok="onReloadData" ref="add-form" />
|
||||
<edit-form @ok="onReloadData" ref="edit-form" />
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import AddForm from './addForm';
|
||||
import EditForm from './editForm';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddForm,
|
||||
EditForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '应用名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
dataIndex: 'code',
|
||||
},
|
||||
{
|
||||
title: '是否默认',
|
||||
dataIndex: 'active',
|
||||
scopedSlots: {
|
||||
customRender: 'active',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: {
|
||||
customRender: 'status',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
],
|
||||
codes: [
|
||||
{
|
||||
code: 'yes_or_no',
|
||||
values: [],
|
||||
},
|
||||
{
|
||||
code: 'common_status',
|
||||
values: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
|
||||
const flag = this.$auth({
|
||||
sysApp: [['edit'], ['delete']],
|
||||
});
|
||||
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api
|
||||
.getAppPage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载字典数据时的必要方法
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownWait({ code: 'yes_or_no' }),
|
||||
this.$api.sysDictTypeDropDownWait({ code: 'common_status' }),
|
||||
])
|
||||
.then(([yesOrNo, commonStatus]) => {
|
||||
this.codes.find((p) => p.code === 'yes_or_no').values = yesOrNo.data;
|
||||
this.codes.find((p) => p.code === 'common_status').values = commonStatus.data;
|
||||
});
|
||||
},
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes.find((p) => p.code == name).values.find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen(record);
|
||||
},
|
||||
|
||||
onResult(success, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
}
|
||||
this.$refs.table.onLoaded();
|
||||
},
|
||||
|
||||
onSetDefault(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysAppSetAsDefault({ id: record.id }).then(({ success }) => {
|
||||
this.onResult(success, '设置成功');
|
||||
});
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysAppDelete(record).then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user