update .gitignore
This commit is contained in:
@@ -1,107 +1,107 @@
|
||||
<template>
|
||||
<a-card :bordered="false" title="年度项目总完成情况">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<a-form-model-item label="区域">
|
||||
<a-dropdown>
|
||||
<span>
|
||||
宁波市
|
||||
<a-icon type="down" />
|
||||
</span>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>宁波市</a-menu-item>
|
||||
<a-menu-item>鄞州区</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="年份">
|
||||
<a-dropdown>
|
||||
<span>
|
||||
2021
|
||||
<a-icon type="down" />
|
||||
</span>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>2021</a-menu-item>
|
||||
<a-menu-item>2020</a-menu-item>
|
||||
<a-menu-item>2019</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
<div :style="{ height: '300px' }" ref="chart"></div>
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
query: {
|
||||
area: '宁波市',
|
||||
year: '2021',
|
||||
},
|
||||
options: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [320, 332, 301, 334, 390, 330, 320],
|
||||
},
|
||||
{
|
||||
name: '搜索引擎',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
var chartDom = this.$refs.chart;
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(this.options);
|
||||
window.addEventListener("resize",function(){
|
||||
myChart.resize();
|
||||
})
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<a-card :bordered="false" title="年度项目总完成情况">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<a-form-model-item label="区域">
|
||||
<a-dropdown>
|
||||
<span>
|
||||
宁波市
|
||||
<a-icon type="down" />
|
||||
</span>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>宁波市</a-menu-item>
|
||||
<a-menu-item>鄞州区</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="年份">
|
||||
<a-dropdown>
|
||||
<span>
|
||||
2021
|
||||
<a-icon type="down" />
|
||||
</span>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>2021</a-menu-item>
|
||||
<a-menu-item>2020</a-menu-item>
|
||||
<a-menu-item>2019</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
<div :style="{ height: '300px' }" ref="chart"></div>
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
query: {
|
||||
area: '宁波市',
|
||||
year: '2021',
|
||||
},
|
||||
options: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [320, 332, 301, 334, 390, 330, 320],
|
||||
},
|
||||
{
|
||||
name: '搜索引擎',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
var chartDom = this.$refs.chart;
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(this.options);
|
||||
window.addEventListener("resize",function(){
|
||||
myChart.resize();
|
||||
})
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,40 +1,40 @@
|
||||
@import (reference) '~@/assets/style/app.less';
|
||||
.home-header {
|
||||
margin-bottom: @padding-md;
|
||||
padding: @padding-lg 0;
|
||||
|
||||
background-color: @white;
|
||||
}
|
||||
.home-header-row {
|
||||
display: flex;
|
||||
}
|
||||
.home-header-content {
|
||||
margin-left: @padding-lg;
|
||||
h4 {
|
||||
span {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.home-container {
|
||||
.ant-card-meta-title {
|
||||
font-size: @font-size-base + 1px;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
height: 42px;
|
||||
|
||||
white-space: normal;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ant-card-meta-description {
|
||||
.ant-row-flex {
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import (reference) '~@/assets/style/app.less';
|
||||
.home-header {
|
||||
margin-bottom: @padding-md;
|
||||
padding: @padding-lg 0;
|
||||
|
||||
background-color: @white;
|
||||
}
|
||||
.home-header-row {
|
||||
display: flex;
|
||||
}
|
||||
.home-header-content {
|
||||
margin-left: @padding-lg;
|
||||
h4 {
|
||||
span {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.home-container {
|
||||
.ant-card-meta-title {
|
||||
font-size: @font-size-base + 1px;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
height: 42px;
|
||||
|
||||
white-space: normal;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ant-card-meta-description {
|
||||
.ant-row-flex {
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,66 +1,66 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="home-header">
|
||||
<container>
|
||||
<a-row align="middle" justify="space-between" type="flex">
|
||||
<a-col>
|
||||
<div class="home-header-row" v-if="$root.global.info">
|
||||
<div class="home-header-avatar">
|
||||
<yo-image :id="$root.global.info.avatar" :size="64" icon="user" type="avatar" />
|
||||
</div>
|
||||
<div class="home-header-content">
|
||||
<h4>
|
||||
{{ $moment().format('A') }}好，
|
||||
<span>{{ $root.global.info.nickName || $root.global.info.name }}</span>，欢迎您登录系统！
|
||||
</h4>
|
||||
<p>
|
||||
<span>上次IP：{{ $root.global.info.lastLoginIp }}</span>
|
||||
<a-divider type="vertical" />
|
||||
<span>上次登录时间：{{ $root.global.info.lastLoginTime }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<a-icon :style="{ fontSize: '20px', color: '#f80000' }" class="mr-xs" type="mail" />您有
|
||||
<a href="#">0</a>封未读邮件，请尽快查收！
|
||||
</a-col>
|
||||
</a-row>
|
||||
</container>
|
||||
</div>
|
||||
<container class="home-container">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24">
|
||||
<Statistics />
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="24" :xl="16">
|
||||
<Task />
|
||||
<List />
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="24" :xl="8">
|
||||
<Notice />
|
||||
<Charts />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import './index.less';
|
||||
|
||||
import Statistics from './statistics';
|
||||
import Task from './task';
|
||||
import Notice from './notice';
|
||||
import List from './list';
|
||||
import Charts from './charts';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Statistics,
|
||||
Task,
|
||||
Notice,
|
||||
List,
|
||||
Charts,
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<div>
|
||||
<div class="home-header">
|
||||
<container>
|
||||
<a-row align="middle" justify="space-between" type="flex">
|
||||
<a-col>
|
||||
<div class="home-header-row" v-if="$root.global.info">
|
||||
<div class="home-header-avatar">
|
||||
<yo-image :id="$root.global.info.avatar" :size="64" icon="user" type="avatar" />
|
||||
</div>
|
||||
<div class="home-header-content">
|
||||
<h4>
|
||||
{{ $moment().format('A') }}好，
|
||||
<span>{{ $root.global.info.nickName || $root.global.info.name }}</span>，欢迎您登录系统！
|
||||
</h4>
|
||||
<p>
|
||||
<span>上次IP：{{ $root.global.info.lastLoginIp }}</span>
|
||||
<a-divider type="vertical" />
|
||||
<span>上次登录时间：{{ $root.global.info.lastLoginTime }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<a-icon :style="{ fontSize: '20px', color: '#f80000' }" class="mr-xs" type="mail" />您有
|
||||
<a href="#">0</a>封未读邮件，请尽快查收！
|
||||
</a-col>
|
||||
</a-row>
|
||||
</container>
|
||||
</div>
|
||||
<container class="home-container">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24">
|
||||
<Statistics />
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="24" :xl="16">
|
||||
<Task />
|
||||
<List />
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="24" :xl="8">
|
||||
<Notice />
|
||||
<Charts />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import './index.less';
|
||||
|
||||
import Statistics from './statistics';
|
||||
import Task from './task';
|
||||
import Notice from './notice';
|
||||
import List from './list';
|
||||
import Charts from './charts';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Statistics,
|
||||
Task,
|
||||
Notice,
|
||||
List,
|
||||
Charts,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,99 +1,99 @@
|
||||
<template>
|
||||
<a-card
|
||||
:active-tab-key="key"
|
||||
:bodyStyle="{ padding: 0 }"
|
||||
:bordered="false"
|
||||
:tab-list="tabList"
|
||||
@tabChange="key => onTabChange(key, 'key')"
|
||||
>
|
||||
<a-table :columns="columns" :data-source="data" :pagination="false" />
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
key: '1',
|
||||
tabList: [
|
||||
{
|
||||
key: '1',
|
||||
tab: '新建项目',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
tab: '正在签约项目',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
tab: '完成签约项目',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
tab: '项目进度',
|
||||
},
|
||||
],
|
||||
|
||||
columns: [
|
||||
{
|
||||
title: '区域',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'title',
|
||||
},
|
||||
{
|
||||
title: '户数',
|
||||
dataIndex: 'count',
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'date',
|
||||
},
|
||||
],
|
||||
data: [
|
||||
{
|
||||
key: '1',
|
||||
area: '海曙区',
|
||||
title: '曙光电影院地块',
|
||||
count: 13,
|
||||
date: '2021-01-01',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
area: '江北区',
|
||||
title: '大庆新村地块旧城区改建项目',
|
||||
count: 322,
|
||||
date: '2021-01-01',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
area: '宁海县',
|
||||
title: '桥头胡街道旧城区改造华驰文教地块',
|
||||
count: 1,
|
||||
date: '2021-01-01',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
area: '慈溪市',
|
||||
title: '七二三南延道路工程',
|
||||
count: 1,
|
||||
date: '2021-01-01',
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
area: '北仑区',
|
||||
title: '原粮食局宿舍楼1号、2号楼（太河路北延工程）',
|
||||
count: 32,
|
||||
date: '2021-01-01',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onTabChange(key, type) {
|
||||
this[type] = key;
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<a-card
|
||||
:active-tab-key="key"
|
||||
:bodyStyle="{ padding: 0 }"
|
||||
:bordered="false"
|
||||
:tab-list="tabList"
|
||||
@tabChange="key => onTabChange(key, 'key')"
|
||||
>
|
||||
<a-table :columns="columns" :data-source="data" :pagination="false" />
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
key: '1',
|
||||
tabList: [
|
||||
{
|
||||
key: '1',
|
||||
tab: '新建项目',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
tab: '正在签约项目',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
tab: '完成签约项目',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
tab: '项目进度',
|
||||
},
|
||||
],
|
||||
|
||||
columns: [
|
||||
{
|
||||
title: '区域',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'title',
|
||||
},
|
||||
{
|
||||
title: '户数',
|
||||
dataIndex: 'count',
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'date',
|
||||
},
|
||||
],
|
||||
data: [
|
||||
{
|
||||
key: '1',
|
||||
area: '海曙区',
|
||||
title: '曙光电影院地块',
|
||||
count: 13,
|
||||
date: '2021-01-01',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
area: '江北区',
|
||||
title: '大庆新村地块旧城区改建项目',
|
||||
count: 322,
|
||||
date: '2021-01-01',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
area: '宁海县',
|
||||
title: '桥头胡街道旧城区改造华驰文教地块',
|
||||
count: 1,
|
||||
date: '2021-01-01',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
area: '慈溪市',
|
||||
title: '七二三南延道路工程',
|
||||
count: 1,
|
||||
date: '2021-01-01',
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
area: '北仑区',
|
||||
title: '原粮食局宿舍楼1号、2号楼（太河路北延工程）',
|
||||
count: 32,
|
||||
date: '2021-01-01',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onTabChange(key, type) {
|
||||
this[type] = key;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,28 +1,28 @@
|
||||
<template>
|
||||
<a-card :bordered="false" title="通知">
|
||||
<a href="#" slot="extra">更多</a>
|
||||
<a-list :data-source="data" item-layout="horizontal">
|
||||
<a-list-item slot="renderItem" slot-scope="item">
|
||||
<a-list-item-meta
|
||||
:description="$moment().format('YYYY-MM-DD HH:mm:ss')"
|
||||
:title="item.title"
|
||||
>
|
||||
<a-icon :style="{ fontSize: '18px' }" slot="avatar" theme="twoTone" type="message" />
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{ title: '关于2020年度房屋征收评估机构信用考核情况的通报' },
|
||||
{ title: '关于2020年度房屋征收评估机构信用考核情况的通报' },
|
||||
{ title: '关于2020年度房屋征收评估机构信用考核情况的通报' },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<a-card :bordered="false" title="通知">
|
||||
<a href="#" slot="extra">更多</a>
|
||||
<a-list :data-source="data" item-layout="horizontal">
|
||||
<a-list-item slot="renderItem" slot-scope="item">
|
||||
<a-list-item-meta
|
||||
:description="$moment().format('YYYY-MM-DD HH:mm:ss')"
|
||||
:title="item.title"
|
||||
>
|
||||
<a-icon :style="{ fontSize: '18px' }" slot="avatar" theme="twoTone" type="message" />
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{ title: '关于2020年度房屋征收评估机构信用考核情况的通报' },
|
||||
{ title: '关于2020年度房屋征收评估机构信用考核情况的通报' },
|
||||
{ title: '关于2020年度房屋征收评估机构信用考核情况的通报' },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,56 +1,56 @@
|
||||
<template>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="5" :md="8" :sm="24">
|
||||
<a-card :bordered="false" :hoverable="true">
|
||||
<a-statistic :value="0" class="text-center" title="已完成的项目" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="5" :md="8" :sm="24">
|
||||
<a-card :bordered="false" :hoverable="true">
|
||||
<a-statistic :value="c" class="text-center" title="正在进行的项目" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="5" :md="8" :sm="24">
|
||||
<a-card :bordered="false" :hoverable="true">
|
||||
<a-statistic :value="0" class="text-center" title="还未开始的项目" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="9" :md="24">
|
||||
<a-card :bordered="false" :hoverable="true">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-statistic :value="8893" class="text-center" title="用户总量" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-statistic :value="1255" :value-style="{ color: '#3f8600' }" class="text-center">
|
||||
<template #title>
|
||||
<a-dropdown>
|
||||
<span>
|
||||
当月活跃用户
|
||||
<a-icon type="down" />
|
||||
</span>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>当月活跃用户</a-menu-item>
|
||||
<a-menu-item>当年活跃用户</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template #prefix>
|
||||
<a-icon :style="{ fontSize: '13px' }" type="arrow-up" />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
c: 6,
|
||||
};
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="5" :md="8" :sm="24">
|
||||
<a-card :bordered="false" :hoverable="true">
|
||||
<a-statistic :value="0" class="text-center" title="已完成的项目" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="5" :md="8" :sm="24">
|
||||
<a-card :bordered="false" :hoverable="true">
|
||||
<a-statistic :value="c" class="text-center" title="正在进行的项目" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="5" :md="8" :sm="24">
|
||||
<a-card :bordered="false" :hoverable="true">
|
||||
<a-statistic :value="0" class="text-center" title="还未开始的项目" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="9" :md="24">
|
||||
<a-card :bordered="false" :hoverable="true">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-statistic :value="8893" class="text-center" title="用户总量" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-statistic :value="1255" :value-style="{ color: '#3f8600' }" class="text-center">
|
||||
<template #title>
|
||||
<a-dropdown>
|
||||
<span>
|
||||
当月活跃用户
|
||||
<a-icon type="down" />
|
||||
</span>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>当月活跃用户</a-menu-item>
|
||||
<a-menu-item>当年活跃用户</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template #prefix>
|
||||
<a-icon :style="{ fontSize: '13px' }" type="arrow-up" />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
c: 6,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,56 +1,56 @@
|
||||
<template>
|
||||
<a-card :bordered="false" title="待办">
|
||||
<a href="#" slot="extra">更多</a>
|
||||
<a-card-grid :key="n" v-for="(item, n) in data">
|
||||
<a-card-meta>
|
||||
<div slot="title">
|
||||
<a-tooltip placement="top">
|
||||
<template slot="title">{{ item.title }}</template>
|
||||
{{ item.title }}
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-row align="middle" slot="description" type="flex">
|
||||
<a-col flex="32px" v-if="item.avatar">
|
||||
<a-avatar :size="24" :src="item.avatar" shape="square" />
|
||||
</a-col>
|
||||
<a-col flex="auto">
|
||||
<a-row justify="space-between" type="flex">
|
||||
<a-col>软件开发人员</a-col>
|
||||
<a-col>2020-01-01</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card-meta>
|
||||
</a-card-grid>
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
title: '市区雷公巷地块项目选择评估机构及上传相关材料(软件开发人员)',
|
||||
avatar: 'https://tb1.bdstatic.com/tb/steam.jpeg',
|
||||
},
|
||||
{
|
||||
title: '宁海县山河岭6号地块备案(胡靖)',
|
||||
avatar:
|
||||
'https://gss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/tb.1.ac342cde.2vNGrtpPcIUN6lJpSnty3g?t=1615176031',
|
||||
},
|
||||
{ title: '宁海县盛宁线力洋至胡陈段公路工程田交朱村 地块备案(胡靖)' },
|
||||
{
|
||||
title: '慈溪市慈溪市危旧房改造一期（西门小区A1区块）项目备案(陆承)',
|
||||
avatar:
|
||||
'https://gss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/tb.1.54e2faca.uBtqRshdnVUXL9XFfQMTwg?t=1604074726',
|
||||
},
|
||||
{ title: '江北区孔浦成片危旧住宅区改造项目（六号区块）备案(成薇)' },
|
||||
{ title: '镇海区宁镇路改扩建工程（庄市段）备案(董力)' },
|
||||
{ title: '鄞州区茶桃公路（同谷路—金峨路延伸段）项目备案(软件开发人员)' },
|
||||
{ title: '鄞州区咸祥大嵩湖工程备案(软件开发人员)' },
|
||||
{ title: '江北区三官堂大桥及接线工程项目备案(成薇)' },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<a-card :bordered="false" title="待办">
|
||||
<a href="#" slot="extra">更多</a>
|
||||
<a-card-grid :key="n" v-for="(item, n) in data">
|
||||
<a-card-meta>
|
||||
<div slot="title">
|
||||
<a-tooltip placement="top">
|
||||
<template slot="title">{{ item.title }}</template>
|
||||
{{ item.title }}
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-row align="middle" slot="description" type="flex">
|
||||
<a-col flex="32px" v-if="item.avatar">
|
||||
<a-avatar :size="24" :src="item.avatar" shape="square" />
|
||||
</a-col>
|
||||
<a-col flex="auto">
|
||||
<a-row justify="space-between" type="flex">
|
||||
<a-col>软件开发人员</a-col>
|
||||
<a-col>2020-01-01</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card-meta>
|
||||
</a-card-grid>
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
title: '市区雷公巷地块项目选择评估机构及上传相关材料(软件开发人员)',
|
||||
avatar: 'https://tb1.bdstatic.com/tb/steam.jpeg',
|
||||
},
|
||||
{
|
||||
title: '宁海县山河岭6号地块备案(胡靖)',
|
||||
avatar:
|
||||
'https://gss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/tb.1.ac342cde.2vNGrtpPcIUN6lJpSnty3g?t=1615176031',
|
||||
},
|
||||
{ title: '宁海县盛宁线力洋至胡陈段公路工程田交朱村 地块备案(胡靖)' },
|
||||
{
|
||||
title: '慈溪市慈溪市危旧房改造一期（西门小区A1区块）项目备案(陆承)',
|
||||
avatar:
|
||||
'https://gss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/tb.1.54e2faca.uBtqRshdnVUXL9XFfQMTwg?t=1604074726',
|
||||
},
|
||||
{ title: '江北区孔浦成片危旧住宅区改造项目（六号区块）备案(成薇)' },
|
||||
{ title: '镇海区宁镇路改扩建工程（庄市段）备案(董力)' },
|
||||
{ title: '鄞州区茶桃公路（同谷路—金峨路延伸段）项目备案(软件开发人员)' },
|
||||
{ title: '鄞州区咸祥大嵩湖工程备案(软件开发人员)' },
|
||||
{ title: '江北区三官堂大桥及接线工程项目备案(成薇)' },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
基本上所有列表页都可以通过拷贝此处的种子文件实现增删改查的功能
|
||||
所有带 ... 的注释是可以依据当前业务添加内容的地方
|
||||
其他所有尽量不要修改
|
||||
/**
|
||||
基本上所有列表页都可以通过拷贝此处的种子文件实现增删改查的功能
|
||||
所有带 ... 的注释是可以依据当前业务添加内容的地方
|
||||
其他所有尽量不要修改
|
||||
**/
|
||||
@@ -1,114 +1,114 @@
|
||||
<template>
|
||||
<!--
|
||||
普通编辑窗体
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<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">
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...params.record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<!--
|
||||
普通编辑窗体
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<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">
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...params.record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,216 +1,216 @@
|
||||
<template>
|
||||
<!--
|
||||
普通查询表格
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<yo-table
|
||||
:columns="columns"
|
||||
:load-data="loadData"
|
||||
@query="onQuery"
|
||||
@resetQuery="onResetQuery"
|
||||
ref="table"
|
||||
>
|
||||
<Auth auth="authCode:page" slot="query">
|
||||
<!-- 此处添加查询表单控件 -->
|
||||
<!-- ... -->
|
||||
</Auth>
|
||||
<Auth auth="authCode: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="authCode:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="authCode:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
<!-- 可在此处添加其他操作控件 -->
|
||||
<!-- ... -->
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增表单 -->
|
||||
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<!-- 编辑表单 -->
|
||||
<yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
/* 在此管理整个页面需要的接口名称 */
|
||||
const api = {
|
||||
page: 'testPageApi...',
|
||||
add: 'testAddApi',
|
||||
edit: 'testEditApi',
|
||||
delete: 'testDeleteApi...',
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
api,
|
||||
|
||||
name: '...',
|
||||
|
||||
/* 查询条件 */
|
||||
query: {},
|
||||
|
||||
/* 表格字段 */
|
||||
columns: [],
|
||||
|
||||
/* 字典编码储存格式 */
|
||||
codes: {
|
||||
code1: [],
|
||||
code2: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
/** 按需加载字典编码 */
|
||||
this.onLoadCodes();
|
||||
|
||||
/** 根据权限添加操作列 */
|
||||
const flag = this.$auth(/* ... */);
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api[api.page]({
|
||||
...params,
|
||||
...this.query,
|
||||
}).then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 重置查询条件
|
||||
*/
|
||||
onResetQuery() {
|
||||
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
|
||||
this.query = {};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
|
||||
/* ... */
|
||||
])
|
||||
.then(([code1, code2]) => {
|
||||
this.codes.code1 = code1.data;
|
||||
this.codes.code2 = code2.data;
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].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();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api[api.delete](record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<!--
|
||||
普通查询表格
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<yo-table
|
||||
:columns="columns"
|
||||
:load-data="loadData"
|
||||
@query="onQuery"
|
||||
@resetQuery="onResetQuery"
|
||||
ref="table"
|
||||
>
|
||||
<Auth auth="authCode:page" slot="query">
|
||||
<!-- 此处添加查询表单控件 -->
|
||||
<!-- ... -->
|
||||
</Auth>
|
||||
<Auth auth="authCode: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="authCode:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="authCode:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
<!-- 可在此处添加其他操作控件 -->
|
||||
<!-- ... -->
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增表单 -->
|
||||
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<!-- 编辑表单 -->
|
||||
<yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
/* 在此管理整个页面需要的接口名称 */
|
||||
const api = {
|
||||
page: 'testPageApi...',
|
||||
add: 'testAddApi',
|
||||
edit: 'testEditApi',
|
||||
delete: 'testDeleteApi...',
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
api,
|
||||
|
||||
name: '...',
|
||||
|
||||
/* 查询条件 */
|
||||
query: {},
|
||||
|
||||
/* 表格字段 */
|
||||
columns: [],
|
||||
|
||||
/* 字典编码储存格式 */
|
||||
codes: {
|
||||
code1: [],
|
||||
code2: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
/** 按需加载字典编码 */
|
||||
this.onLoadCodes();
|
||||
|
||||
/** 根据权限添加操作列 */
|
||||
const flag = this.$auth(/* ... */);
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api[api.page]({
|
||||
...params,
|
||||
...this.query,
|
||||
}).then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 重置查询条件
|
||||
*/
|
||||
onResetQuery() {
|
||||
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
|
||||
this.query = {};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
|
||||
/* ... */
|
||||
])
|
||||
.then(([code1, code2]) => {
|
||||
this.codes.code1 = code1.data;
|
||||
this.codes.code2 = code2.data;
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].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();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api[api.delete](record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,158 +1,158 @@
|
||||
<template>
|
||||
<!--
|
||||
普通编辑窗体
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<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 label="应用名称" prop="name">
|
||||
<a-input placeholder="请输入应用名称" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="图标" prop="icon">
|
||||
<a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
|
||||
<a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
|
||||
<a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="图标颜色" prop="color">
|
||||
<chrome-picker v-model="form.color" />
|
||||
</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>
|
||||
</div>
|
||||
</a-spin>
|
||||
|
||||
<yo-icon-selector ref="icon-selector" v-model="form.icon" />
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
import YoIconSelector from '@/components/yoIconSelector';
|
||||
import { Chrome } from 'vue-color';
|
||||
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
color: '#ffffff',
|
||||
active: false,
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
YoIconSelector,
|
||||
ChromePicker: Chrome,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {
|
||||
...defaultForm,
|
||||
},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
name: [{ required: true, message: '请输入应用名称' }],
|
||||
code: [{ required: true, message: '请输入唯一编码' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...params.record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
record.color = record.color.constructor === Object ? record.color.hex : record.color;
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
onOpenSelectIcon() {
|
||||
this.$refs['icon-selector'].onOpen(this.form.icon);
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<!--
|
||||
普通编辑窗体
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<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 label="应用名称" prop="name">
|
||||
<a-input placeholder="请输入应用名称" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="图标" prop="icon">
|
||||
<a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
|
||||
<a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
|
||||
<a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="图标颜色" prop="color">
|
||||
<chrome-picker v-model="form.color" />
|
||||
</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>
|
||||
</div>
|
||||
</a-spin>
|
||||
|
||||
<yo-icon-selector ref="icon-selector" v-model="form.icon" />
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
import YoIconSelector from '@/components/yoIconSelector';
|
||||
import { Chrome } from 'vue-color';
|
||||
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
color: '#ffffff',
|
||||
active: false,
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
YoIconSelector,
|
||||
ChromePicker: Chrome,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {
|
||||
...defaultForm,
|
||||
},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
name: [{ required: true, message: '请输入应用名称' }],
|
||||
code: [{ required: true, message: '请输入唯一编码' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...params.record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
record.color = record.color.constructor === Object ? record.color.hex : record.color;
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
onOpenSelectIcon() {
|
||||
this.$refs['icon-selector'].onOpen(this.form.icon);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,280 +1,280 @@
|
||||
<template>
|
||||
<!--
|
||||
普通查询表格
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<yo-table
|
||||
:columns="columns"
|
||||
:load-data="loadData"
|
||||
@query="onQuery"
|
||||
@resetQuery="onResetQuery"
|
||||
ref="table"
|
||||
>
|
||||
<Auth auth="sysApp:page" slot="query">
|
||||
<!-- 此处添加查询表单控件 -->
|
||||
<!-- ... -->
|
||||
<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>
|
||||
</Auth>
|
||||
<Auth auth="sysApp:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增应用</a-button>
|
||||
</Auth>
|
||||
<!-- 格式化字段内容 -->
|
||||
<!-- ... -->
|
||||
<span slot="active" slot-scope="text, record">
|
||||
{{ text ? '是' : '否' }}
|
||||
<Auth auth="sysApp:setAsDefault" v-if="!record.active">
|
||||
<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, 'commonStatus') }}</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>
|
||||
|
||||
<!-- 新增表单 -->
|
||||
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<!-- 编辑表单 -->
|
||||
<yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
/* 在此管理整个页面需要的接口名称 */
|
||||
const api = {
|
||||
page: 'getAppPage',
|
||||
add: 'sysAppAdd',
|
||||
edit: 'sysAppEdit',
|
||||
delete: 'sysAppDelete',
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
api,
|
||||
|
||||
name: '应用',
|
||||
|
||||
/* 查询条件 */
|
||||
query: {},
|
||||
|
||||
/* 表格字段 */
|
||||
columns: [
|
||||
{
|
||||
title: '应用名称',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
dataIndex: 'code',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '是否默认',
|
||||
dataIndex: 'active',
|
||||
scopedSlots: {
|
||||
customRender: 'active',
|
||||
},
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: {
|
||||
customRender: 'status',
|
||||
},
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
sorter: true,
|
||||
},
|
||||
],
|
||||
|
||||
/* 字典编码储存格式 */
|
||||
codes: {
|
||||
yesOrNo: [],
|
||||
commonStatus: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
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[api.page]({
|
||||
...params,
|
||||
...this.query,
|
||||
}).then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 重置查询条件
|
||||
*/
|
||||
onResetQuery() {
|
||||
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
|
||||
this.query = {};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'yes_or_no' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'common_status' }),
|
||||
/* ... */
|
||||
])
|
||||
.then(([code1, code2]) => {
|
||||
this.codes.yesOrNo = code1.data;
|
||||
this.codes.commonStatus = code2.data;
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].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();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api[api.delete](record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
|
||||
onSetDefault(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysAppSetAsDefault({ id: record.id }).then(({ success }) => {
|
||||
this.onResult(success, '设置成功');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<!--
|
||||
普通查询表格
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<yo-table
|
||||
:columns="columns"
|
||||
:load-data="loadData"
|
||||
@query="onQuery"
|
||||
@resetQuery="onResetQuery"
|
||||
ref="table"
|
||||
>
|
||||
<Auth auth="sysApp:page" slot="query">
|
||||
<!-- 此处添加查询表单控件 -->
|
||||
<!-- ... -->
|
||||
<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>
|
||||
</Auth>
|
||||
<Auth auth="sysApp:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增应用</a-button>
|
||||
</Auth>
|
||||
<!-- 格式化字段内容 -->
|
||||
<!-- ... -->
|
||||
<span slot="active" slot-scope="text, record">
|
||||
{{ text ? '是' : '否' }}
|
||||
<Auth auth="sysApp:setAsDefault" v-if="!record.active">
|
||||
<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, 'commonStatus') }}</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>
|
||||
|
||||
<!-- 新增表单 -->
|
||||
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<!-- 编辑表单 -->
|
||||
<yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
/* 在此管理整个页面需要的接口名称 */
|
||||
const api = {
|
||||
page: 'getAppPage',
|
||||
add: 'sysAppAdd',
|
||||
edit: 'sysAppEdit',
|
||||
delete: 'sysAppDelete',
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
api,
|
||||
|
||||
name: '应用',
|
||||
|
||||
/* 查询条件 */
|
||||
query: {},
|
||||
|
||||
/* 表格字段 */
|
||||
columns: [
|
||||
{
|
||||
title: '应用名称',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
dataIndex: 'code',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '是否默认',
|
||||
dataIndex: 'active',
|
||||
scopedSlots: {
|
||||
customRender: 'active',
|
||||
},
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: {
|
||||
customRender: 'status',
|
||||
},
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
sorter: true,
|
||||
},
|
||||
],
|
||||
|
||||
/* 字典编码储存格式 */
|
||||
codes: {
|
||||
yesOrNo: [],
|
||||
commonStatus: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
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[api.page]({
|
||||
...params,
|
||||
...this.query,
|
||||
}).then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 重置查询条件
|
||||
*/
|
||||
onResetQuery() {
|
||||
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
|
||||
this.query = {};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'yes_or_no' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'common_status' }),
|
||||
/* ... */
|
||||
])
|
||||
.then(([code1, code2]) => {
|
||||
this.codes.yesOrNo = code1.data;
|
||||
this.codes.commonStatus = code2.data;
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].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();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api[api.delete](record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
|
||||
onSetDefault(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysAppSetAsDefault({ id: record.id }).then(({ success }) => {
|
||||
this.onResult(success, '设置成功');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,159 +1,159 @@
|
||||
<template>
|
||||
<!--
|
||||
普通编辑窗体
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<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 label="角色名" prop="name">
|
||||
<a-input placeholder="请输入角色名" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item :disabled="editDisabled" label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="系统参数" prop="sysFlag">
|
||||
<a-radio-group :disabled="editDisabled" v-model="form.sysFlag">
|
||||
<a-radio-button value="Y">是</a-radio-button>
|
||||
<a-radio-button value="N">否</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="所属分类" prop="groupCode">
|
||||
<a-select :disabled="editDisabled" placeholder="请选择所属分类" v-model="form.groupCode">
|
||||
<a-select-option
|
||||
:key="i"
|
||||
:value="item.code"
|
||||
v-for="(item, i) in groupCode"
|
||||
>{{ item.value }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="参数值" prop="name">
|
||||
<a-input placeholder="请输入参数值 " v-model="form.value" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="备注" prop="remark">
|
||||
<a-input placeholder="请输入备注" v-model="form.remark" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入应用名称' }],
|
||||
code: [{ required: true, message: '请输入唯一编码' }],
|
||||
sysFlag: [{ required: true, message: '请选择参数类型' }],
|
||||
groupCode: [{ required: true, message: '请选择所属分类' }],
|
||||
value: [{ required: true, message: '请输入参数值' }],
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
editDisabled: false,
|
||||
groupCode: [],
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...params.record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
|
||||
this.editDisabled = this.form.sysFlag == 'Y';
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
this.groupCode = await this.onLoadgroupCodeData();
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
/**
|
||||
*
|
||||
* 获取所属分类字典表的内容
|
||||
*/
|
||||
onLoadgroupCodeData() {
|
||||
return this.$api.sysDictTypeDropDown({ code: 'consts_type' }).then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<!--
|
||||
普通编辑窗体
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<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 label="角色名" prop="name">
|
||||
<a-input placeholder="请输入角色名" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item :disabled="editDisabled" label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="系统参数" prop="sysFlag">
|
||||
<a-radio-group :disabled="editDisabled" v-model="form.sysFlag">
|
||||
<a-radio-button value="Y">是</a-radio-button>
|
||||
<a-radio-button value="N">否</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="所属分类" prop="groupCode">
|
||||
<a-select :disabled="editDisabled" placeholder="请选择所属分类" v-model="form.groupCode">
|
||||
<a-select-option
|
||||
:key="i"
|
||||
:value="item.code"
|
||||
v-for="(item, i) in groupCode"
|
||||
>{{ item.value }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="参数值" prop="name">
|
||||
<a-input placeholder="请输入参数值 " v-model="form.value" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="备注" prop="remark">
|
||||
<a-input placeholder="请输入备注" v-model="form.remark" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入应用名称' }],
|
||||
code: [{ required: true, message: '请输入唯一编码' }],
|
||||
sysFlag: [{ required: true, message: '请选择参数类型' }],
|
||||
groupCode: [{ required: true, message: '请选择所属分类' }],
|
||||
value: [{ required: true, message: '请输入参数值' }],
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
editDisabled: false,
|
||||
groupCode: [],
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...params.record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
|
||||
this.editDisabled = this.form.sysFlag == 'Y';
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
this.groupCode = await this.onLoadgroupCodeData();
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
/**
|
||||
*
|
||||
* 获取所属分类字典表的内容
|
||||
*/
|
||||
onLoadgroupCodeData() {
|
||||
return this.$api.sysDictTypeDropDown({ code: 'consts_type' }).then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,238 +1,238 @@
|
||||
<template>
|
||||
<!--
|
||||
普通查询表格
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<yo-table
|
||||
:columns="columns"
|
||||
:load-data="loadData"
|
||||
@query="onQuery"
|
||||
@resetQuery="onResetQuery"
|
||||
ref="table"
|
||||
>
|
||||
<Auth auth="sysConfig:page" slot="query">
|
||||
<!-- 此处添加查询表单控件 -->
|
||||
<!-- ... -->
|
||||
<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>
|
||||
</Auth>
|
||||
<Auth auth="sysConfig: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="sysConfig:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysConfig:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
<!-- 可在此处添加其他操作控件 -->
|
||||
<!-- ... -->
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增表单 -->
|
||||
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<!-- 编辑表单 -->
|
||||
<yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
/* 在此管理整个页面需要的接口名称 */
|
||||
const api = {
|
||||
page: 'sysConfigPage',
|
||||
add: 'sysConfigAdd',
|
||||
edit: 'sysConfigEdit',
|
||||
delete: 'sysConfigDelete',
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
api,
|
||||
|
||||
name: '配置',
|
||||
|
||||
/* 查询条件 */
|
||||
query: {},
|
||||
|
||||
/* 表格字段 */
|
||||
columns: [
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
dataIndex: 'code',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '参数值',
|
||||
dataIndex: 'value',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '所属分类',
|
||||
dataIndex: 'groupCode',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
sorter: true,
|
||||
},
|
||||
],
|
||||
|
||||
/* 字典编码储存格式 */
|
||||
codes: {
|
||||
code1: [],
|
||||
code2: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
/** 按需加载字典编码 */
|
||||
this.onLoadCodes();
|
||||
|
||||
/** 根据权限添加操作列 */
|
||||
const flag = this.$auth({
|
||||
sysConfig: [['edit'], ['delete']],
|
||||
});
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api[api.page]({
|
||||
...params,
|
||||
...this.query,
|
||||
}).then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 重置查询条件
|
||||
*/
|
||||
onResetQuery() {
|
||||
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
|
||||
this.query = {};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
onLoadCodes() {},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].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();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api[api.delete](record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<!--
|
||||
普通查询表格
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<yo-table
|
||||
:columns="columns"
|
||||
:load-data="loadData"
|
||||
@query="onQuery"
|
||||
@resetQuery="onResetQuery"
|
||||
ref="table"
|
||||
>
|
||||
<Auth auth="sysConfig:page" slot="query">
|
||||
<!-- 此处添加查询表单控件 -->
|
||||
<!-- ... -->
|
||||
<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>
|
||||
</Auth>
|
||||
<Auth auth="sysConfig: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="sysConfig:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysConfig:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
<!-- 可在此处添加其他操作控件 -->
|
||||
<!-- ... -->
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增表单 -->
|
||||
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<!-- 编辑表单 -->
|
||||
<yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
/* 在此管理整个页面需要的接口名称 */
|
||||
const api = {
|
||||
page: 'sysConfigPage',
|
||||
add: 'sysConfigAdd',
|
||||
edit: 'sysConfigEdit',
|
||||
delete: 'sysConfigDelete',
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
api,
|
||||
|
||||
name: '配置',
|
||||
|
||||
/* 查询条件 */
|
||||
query: {},
|
||||
|
||||
/* 表格字段 */
|
||||
columns: [
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
dataIndex: 'code',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '参数值',
|
||||
dataIndex: 'value',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '所属分类',
|
||||
dataIndex: 'groupCode',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
sorter: true,
|
||||
},
|
||||
],
|
||||
|
||||
/* 字典编码储存格式 */
|
||||
codes: {
|
||||
code1: [],
|
||||
code2: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
/** 按需加载字典编码 */
|
||||
this.onLoadCodes();
|
||||
|
||||
/** 根据权限添加操作列 */
|
||||
const flag = this.$auth({
|
||||
sysConfig: [['edit'], ['delete']],
|
||||
});
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api[api.page]({
|
||||
...params,
|
||||
...this.query,
|
||||
}).then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 重置查询条件
|
||||
*/
|
||||
onResetQuery() {
|
||||
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
|
||||
this.query = {};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
onLoadCodes() {},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].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();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api[api.delete](record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,221 +1,221 @@
|
||||
<template>
|
||||
<a-card>
|
||||
<yo-table
|
||||
:columns="columns"
|
||||
:load-data="loadData"
|
||||
@query="onQuery"
|
||||
@resetQuery="onResetQuery"
|
||||
ref="table"
|
||||
>
|
||||
<Auth auth="sysDictData:page" slot="query">
|
||||
<!-- 此处添加查询表单控件 -->
|
||||
<a-form-model-item label="文本">
|
||||
<a-input placeholder="请输入文本" v-model="query.value" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="字典值">
|
||||
<a-input placeholder="请输入字典值" v-model="query.code" />
|
||||
</a-form-model-item>
|
||||
</Auth>
|
||||
<Auth auth="sysDictData:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增字典数据</a-button>
|
||||
</Auth>
|
||||
<!-- 格式化字段内容 -->
|
||||
<span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
|
||||
<!-- 添加操作控件 -->
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<yo-table-actions>
|
||||
<Auth auth="sysDictData:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysDictData:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
<!-- 可在此处添加其他操作控件 -->
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
|
||||
<yo-modal-form :action="$api.sysDictDataAdd" @ok="onReloadData" ref="add-form" title="新增字典数据">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<yo-modal-form :action="$api.sysDictDataEdit" @ok="onReloadData" ref="edit-form" title="编辑字典数据">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
codes: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {
|
||||
typeId: this.type.id,
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '文本',
|
||||
dataIndex: 'value',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '字典值',
|
||||
dataIndex: 'code',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
width: 200,
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: { customRender: 'status' },
|
||||
sorter: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
|
||||
/** 根据权限添加操作列 */
|
||||
const flag = this.$auth({ sysDictData: [['edit'], ['delete']] });
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return (
|
||||
this.$api
|
||||
/** !!此处必须修改调用的接口方法 */
|
||||
.sysDictDataPage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 重置查询条件
|
||||
*/
|
||||
onResetQuery() {
|
||||
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
|
||||
Object.keys(this.query).forEach((p) => {
|
||||
if (p !== 'typeId') {
|
||||
this.query[p] = undefined;
|
||||
}
|
||||
});
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
onLoadCodes() {},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen({
|
||||
typeId: this.type.id,
|
||||
record,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
|
||||
*/
|
||||
onResult(success, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
}
|
||||
this.$refs.table.onLoaded();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api
|
||||
/** !!此处必须修改调用的接口方法 */
|
||||
.sysDictDataDelete(record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<a-card>
|
||||
<yo-table
|
||||
:columns="columns"
|
||||
:load-data="loadData"
|
||||
@query="onQuery"
|
||||
@resetQuery="onResetQuery"
|
||||
ref="table"
|
||||
>
|
||||
<Auth auth="sysDictData:page" slot="query">
|
||||
<!-- 此处添加查询表单控件 -->
|
||||
<a-form-model-item label="文本">
|
||||
<a-input placeholder="请输入文本" v-model="query.value" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="字典值">
|
||||
<a-input placeholder="请输入字典值" v-model="query.code" />
|
||||
</a-form-model-item>
|
||||
</Auth>
|
||||
<Auth auth="sysDictData:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增字典数据</a-button>
|
||||
</Auth>
|
||||
<!-- 格式化字段内容 -->
|
||||
<span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
|
||||
<!-- 添加操作控件 -->
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<yo-table-actions>
|
||||
<Auth auth="sysDictData:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysDictData:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
<!-- 可在此处添加其他操作控件 -->
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
|
||||
<yo-modal-form :action="$api.sysDictDataAdd" @ok="onReloadData" ref="add-form" title="新增字典数据">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<yo-modal-form :action="$api.sysDictDataEdit" @ok="onReloadData" ref="edit-form" title="编辑字典数据">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
codes: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {
|
||||
typeId: this.type.id,
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '文本',
|
||||
dataIndex: 'value',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '字典值',
|
||||
dataIndex: 'code',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
width: 200,
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: { customRender: 'status' },
|
||||
sorter: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
|
||||
/** 根据权限添加操作列 */
|
||||
const flag = this.$auth({ sysDictData: [['edit'], ['delete']] });
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return (
|
||||
this.$api
|
||||
/** !!此处必须修改调用的接口方法 */
|
||||
.sysDictDataPage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 重置查询条件
|
||||
*/
|
||||
onResetQuery() {
|
||||
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
|
||||
Object.keys(this.query).forEach((p) => {
|
||||
if (p !== 'typeId') {
|
||||
this.query[p] = undefined;
|
||||
}
|
||||
});
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
onLoadCodes() {},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen({
|
||||
typeId: this.type.id,
|
||||
record,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
|
||||
*/
|
||||
onResult(success, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
}
|
||||
this.$refs.table.onLoaded();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api
|
||||
/** !!此处必须修改调用的接口方法 */
|
||||
.sysDictDataDelete(record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,232 +1,232 @@
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<yo-table
|
||||
:columns="columns"
|
||||
:load-data="loadData"
|
||||
@query="onQuery"
|
||||
@resetQuery="onResetQuery"
|
||||
ref="table"
|
||||
>
|
||||
<Auth auth="sysDictType:page" slot="query">
|
||||
<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>
|
||||
</Auth>
|
||||
<Auth auth="sysDictType:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增字典类型</a-button>
|
||||
</Auth>
|
||||
<!-- 格式化字段内容 -->
|
||||
<span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
|
||||
<!-- 添加操作控件 -->
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<yo-table-actions>
|
||||
<Auth auth="sysDictType:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysDictType:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
<!-- 可在此处添加其他操作控件 -->
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
<div slot="expandedRowRender" slot-scope="record">
|
||||
<dict-data :codes="codes" :type="record" />
|
||||
</div>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
<br />
|
||||
|
||||
<yo-modal-form :action="$api.sysDictTypeAdd" @ok="onReloadData" ref="add-form" title="新增字典类型">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<yo-modal-form :action="$api.sysDictTypeEdit" @ok="onReloadData" ref="edit-form" title="编辑字典类型">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import DictData from './dictdata';
|
||||
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DictData,
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '类型名称',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
dataIndex: 'code',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
width: 200,
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: { customRender: 'status' },
|
||||
sorter: true,
|
||||
},
|
||||
],
|
||||
codes: {
|
||||
commonStatus: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
|
||||
/** 根据权限添加操作列 */
|
||||
const flag = this.$auth({ sysDictType: [['edit'], ['delete']] });
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return (
|
||||
this.$api
|
||||
/** !!此处必须修改调用的接口方法 */
|
||||
.sysDictTypePage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
const data = res.data;
|
||||
data.rows = data.rows.map(
|
||||
(p) =>
|
||||
(p = {
|
||||
...p,
|
||||
data: [],
|
||||
query: {},
|
||||
})
|
||||
);
|
||||
return data;
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 重置查询条件
|
||||
*/
|
||||
onResetQuery() {
|
||||
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
|
||||
this.query = {};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'common_status' })]).then(([commonStatus]) => {
|
||||
this.codes.commonStatus = commonStatus.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].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();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api
|
||||
/** !!此处必须修改调用的接口方法 */
|
||||
.sysDictTypeDelete(record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<yo-table
|
||||
:columns="columns"
|
||||
:load-data="loadData"
|
||||
@query="onQuery"
|
||||
@resetQuery="onResetQuery"
|
||||
ref="table"
|
||||
>
|
||||
<Auth auth="sysDictType:page" slot="query">
|
||||
<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>
|
||||
</Auth>
|
||||
<Auth auth="sysDictType:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增字典类型</a-button>
|
||||
</Auth>
|
||||
<!-- 格式化字段内容 -->
|
||||
<span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
|
||||
<!-- 添加操作控件 -->
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<yo-table-actions>
|
||||
<Auth auth="sysDictType:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysDictType:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
<!-- 可在此处添加其他操作控件 -->
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
<div slot="expandedRowRender" slot-scope="record">
|
||||
<dict-data :codes="codes" :type="record" />
|
||||
</div>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
<br />
|
||||
|
||||
<yo-modal-form :action="$api.sysDictTypeAdd" @ok="onReloadData" ref="add-form" title="新增字典类型">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<yo-modal-form :action="$api.sysDictTypeEdit" @ok="onReloadData" ref="edit-form" title="编辑字典类型">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import DictData from './dictdata';
|
||||
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DictData,
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '类型名称',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
dataIndex: 'code',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
width: 200,
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: { customRender: 'status' },
|
||||
sorter: true,
|
||||
},
|
||||
],
|
||||
codes: {
|
||||
commonStatus: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
|
||||
/** 根据权限添加操作列 */
|
||||
const flag = this.$auth({ sysDictType: [['edit'], ['delete']] });
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return (
|
||||
this.$api
|
||||
/** !!此处必须修改调用的接口方法 */
|
||||
.sysDictTypePage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
const data = res.data;
|
||||
data.rows = data.rows.map(
|
||||
(p) =>
|
||||
(p = {
|
||||
...p,
|
||||
data: [],
|
||||
query: {},
|
||||
})
|
||||
);
|
||||
return data;
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 重置查询条件
|
||||
*/
|
||||
onResetQuery() {
|
||||
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
|
||||
this.query = {};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'common_status' })]).then(([commonStatus]) => {
|
||||
this.codes.commonStatus = commonStatus.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].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();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api
|
||||
/** !!此处必须修改调用的接口方法 */
|
||||
.sysDictTypeDelete(record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,213 +1,213 @@
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-alert closable type="error">
|
||||
<template slot="message">
|
||||
<div>后端bug:任何操作的操作类型都是增加</div>
|
||||
<div>没有记录请求参数.返回结果等信息</div>
|
||||
</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysOpLog: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-select
|
||||
:style="{ width: '170px' }"
|
||||
allow-clear
|
||||
placeholder="请选择操作类型"
|
||||
v-model="query.opType"
|
||||
>
|
||||
<a-select-option
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.opTypeDict"
|
||||
>{{ item.value }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="是否成功">
|
||||
<a-select
|
||||
:style="{ width: '170px' }"
|
||||
allow-clear
|
||||
placeholder="请选择是否成功"
|
||||
v-model="query.success"
|
||||
>
|
||||
<a-select-option value="true">是</a-select-option>
|
||||
<a-select-option value="false">否</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="操作时间">
|
||||
<a-range-picker
|
||||
:show-time="{
|
||||
hideDisabledOptions: true,
|
||||
defaultValue: [$moment('00:00:00', 'HH:mm:ss'), $moment('23:59:59', 'HH:mm:ss')],
|
||||
}"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
v-model="query.dates"
|
||||
/>
|
||||
</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="sysOpLog:delete" slot="operator">
|
||||
<a-popconfirm @confirm="onOpLogClear" placement="bottomLeft" title="是否确认清空日志">
|
||||
<a-button>清空日志</a-button>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
<span slot="opType" slot-scope="text">{{ bindCodeValue(text, 'opTypeDict') }}</span>
|
||||
<span slot="success" slot-scope="text">{{ text ? '是' : '否' }}</span>
|
||||
<a-descriptions bordered size="small" slot="expandedRowRender" slot-scope="record">
|
||||
<a-descriptions-item :span="1" label="方法名称">{{ record.methodName }}</a-descriptions-item>
|
||||
<a-descriptions-item :span="2" label="地址">{{ record.location }}</a-descriptions-item>
|
||||
<a-descriptions-item label="浏览器">{{ record.browser }}</a-descriptions-item>
|
||||
<a-descriptions-item :span="2" label="操作系统">{{ record.os }}</a-descriptions-item>
|
||||
<a-descriptions-item :span="3" label="类名称">{{ record.className }}</a-descriptions-item>
|
||||
<a-descriptions-item :span="3" label="返回结果">{{ record.result }}</a-descriptions-item>
|
||||
<a-descriptions-item :span="3" label="请求参数">{{ record.param }}</a-descriptions-item>
|
||||
<a-descriptions-item :span="3" label="具体消息">{{ record.message }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
<br />
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '日志名称',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'opType',
|
||||
scopedSlots: { customRender: 'opType' },
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '是否成功',
|
||||
dataIndex: 'success',
|
||||
scopedSlots: { customRender: 'success' },
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: 'ip',
|
||||
dataIndex: 'ip',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '请求地址',
|
||||
dataIndex: 'url',
|
||||
scopedSlots: { customRender: 'url' },
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '操作时间',
|
||||
dataIndex: 'opTime',
|
||||
scopedSlots: { customRender: 'opTime' },
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'account',
|
||||
sorter: true,
|
||||
},
|
||||
],
|
||||
codes: {
|
||||
opTypeDict: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
const query = this.$_.cloneDeep(this.query);
|
||||
if (query.dates && query.dates.length) {
|
||||
query.searchBeginTime = this.$moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
|
||||
query.searchEndTime = this.$moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
|
||||
delete query.dates;
|
||||
}
|
||||
|
||||
return this.$api
|
||||
.sysOpLogPage({
|
||||
...params,
|
||||
...query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载字典数据时的必要方法
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'op_type' })]).then(([commonStatus]) => {
|
||||
this.codes.opTypeDict = commonStatus.data;
|
||||
});
|
||||
},
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
onOpLogClear() {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api
|
||||
.sysOpLogDelete()
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success('清空成功');
|
||||
this.onReloadData();
|
||||
} else {
|
||||
this.$message.error('清空失败：' + res.message);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-alert closable type="error">
|
||||
<template slot="message">
|
||||
<div>后端bug:任何操作的操作类型都是增加</div>
|
||||
<div>没有记录请求参数.返回结果等信息</div>
|
||||
</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysOpLog: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-select
|
||||
:style="{ width: '170px' }"
|
||||
allow-clear
|
||||
placeholder="请选择操作类型"
|
||||
v-model="query.opType"
|
||||
>
|
||||
<a-select-option
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.opTypeDict"
|
||||
>{{ item.value }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="是否成功">
|
||||
<a-select
|
||||
:style="{ width: '170px' }"
|
||||
allow-clear
|
||||
placeholder="请选择是否成功"
|
||||
v-model="query.success"
|
||||
>
|
||||
<a-select-option value="true">是</a-select-option>
|
||||
<a-select-option value="false">否</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="操作时间">
|
||||
<a-range-picker
|
||||
:show-time="{
|
||||
hideDisabledOptions: true,
|
||||
defaultValue: [$moment('00:00:00', 'HH:mm:ss'), $moment('23:59:59', 'HH:mm:ss')],
|
||||
}"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
v-model="query.dates"
|
||||
/>
|
||||
</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="sysOpLog:delete" slot="operator">
|
||||
<a-popconfirm @confirm="onOpLogClear" placement="bottomLeft" title="是否确认清空日志">
|
||||
<a-button>清空日志</a-button>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
<span slot="opType" slot-scope="text">{{ bindCodeValue(text, 'opTypeDict') }}</span>
|
||||
<span slot="success" slot-scope="text">{{ text ? '是' : '否' }}</span>
|
||||
<a-descriptions bordered size="small" slot="expandedRowRender" slot-scope="record">
|
||||
<a-descriptions-item :span="1" label="方法名称">{{ record.methodName }}</a-descriptions-item>
|
||||
<a-descriptions-item :span="2" label="地址">{{ record.location }}</a-descriptions-item>
|
||||
<a-descriptions-item label="浏览器">{{ record.browser }}</a-descriptions-item>
|
||||
<a-descriptions-item :span="2" label="操作系统">{{ record.os }}</a-descriptions-item>
|
||||
<a-descriptions-item :span="3" label="类名称">{{ record.className }}</a-descriptions-item>
|
||||
<a-descriptions-item :span="3" label="返回结果">{{ record.result }}</a-descriptions-item>
|
||||
<a-descriptions-item :span="3" label="请求参数">{{ record.param }}</a-descriptions-item>
|
||||
<a-descriptions-item :span="3" label="具体消息">{{ record.message }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
<br />
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '日志名称',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'opType',
|
||||
scopedSlots: { customRender: 'opType' },
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '是否成功',
|
||||
dataIndex: 'success',
|
||||
scopedSlots: { customRender: 'success' },
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: 'ip',
|
||||
dataIndex: 'ip',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '请求地址',
|
||||
dataIndex: 'url',
|
||||
scopedSlots: { customRender: 'url' },
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '操作时间',
|
||||
dataIndex: 'opTime',
|
||||
scopedSlots: { customRender: 'opTime' },
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'account',
|
||||
sorter: true,
|
||||
},
|
||||
],
|
||||
codes: {
|
||||
opTypeDict: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
const query = this.$_.cloneDeep(this.query);
|
||||
if (query.dates && query.dates.length) {
|
||||
query.searchBeginTime = this.$moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
|
||||
query.searchEndTime = this.$moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
|
||||
delete query.dates;
|
||||
}
|
||||
|
||||
return this.$api
|
||||
.sysOpLogPage({
|
||||
...params,
|
||||
...query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载字典数据时的必要方法
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'op_type' })]).then(([commonStatus]) => {
|
||||
this.codes.opTypeDict = commonStatus.data;
|
||||
});
|
||||
},
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
onOpLogClear() {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api
|
||||
.sysOpLogDelete()
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success('清空成功');
|
||||
this.onReloadData();
|
||||
} else {
|
||||
this.$message.error('清空失败：' + res.message);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,205 +1,205 @@
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-alert closable type="error">
|
||||
<template slot="message">页面刷新的时候也会有保存登录日志，但是没有ip显示</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysVisLog: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-select
|
||||
:style="{ width: '170px' }"
|
||||
allow-clear
|
||||
placeholder="请选择访问类型"
|
||||
v-model="query.visType"
|
||||
>
|
||||
<a-select-option
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.visTypeDict"
|
||||
>{{ item.value }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="是否成功">
|
||||
<a-select
|
||||
:style="{ width: '170px' }"
|
||||
allow-clear
|
||||
placeholder="请选择是否成功"
|
||||
v-model="query.success"
|
||||
>
|
||||
<a-select-option value="true">是</a-select-option>
|
||||
<a-select-option value="false">否</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="操作时间">
|
||||
<a-range-picker
|
||||
:show-time="{
|
||||
hideDisabledOptions: true,
|
||||
defaultValue: [$moment('00:00:00', 'HH:mm:ss'), $moment('23:59:59', 'HH:mm:ss')],
|
||||
}"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
v-model="query.dates"
|
||||
/>
|
||||
</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="sysVisLog:delete" slot="operator">
|
||||
<div class="yo-action-bar--actions">
|
||||
<a-popconfirm @confirm="onVisLogClear" placement="bottomLeft" title="是否确认清空日志">
|
||||
<a-button>清空日志</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</Auth>
|
||||
<span slot="visType" slot-scope="text">{{ bindCodeValue(text, 'visTypeDict') }}</span>
|
||||
<span slot="success" slot-scope="text">{{ text ? '是' : '否' }}</span>
|
||||
<a-descriptions bordered size="small" slot="expandedRowRender" slot-scope="record">
|
||||
<a-descriptions-item :span="3" label="具体消息">{{ record.message }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
<br />
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '日志名称',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '访问类型',
|
||||
dataIndex: 'visType',
|
||||
scopedSlots: { customRender: 'visType' },
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '是否成功',
|
||||
dataIndex: 'success',
|
||||
scopedSlots: { customRender: 'success' },
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: 'ip',
|
||||
dataIndex: 'ip',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '浏览器',
|
||||
dataIndex: 'browser',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '访问时间',
|
||||
dataIndex: 'visTime',
|
||||
scopedSlots: { customRender: 'visTime' },
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '访问人',
|
||||
dataIndex: 'account',
|
||||
sorter: true,
|
||||
},
|
||||
],
|
||||
|
||||
codes: {
|
||||
visTypeDict: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
const query = this.$_.cloneDeep(this.query);
|
||||
if (query.dates && query.dates.length) {
|
||||
query.searchBeginTime = this.$moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
|
||||
query.searchEndTime = this.$moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
|
||||
delete query.dates;
|
||||
}
|
||||
|
||||
return this.$api
|
||||
.sysVisLogPage({
|
||||
...params,
|
||||
...query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载字典数据时的必要方法
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'vis_type' })]).then(([commonStatus]) => {
|
||||
this.codes.visTypeDict = commonStatus.data;
|
||||
});
|
||||
},
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
onVisLogClear() {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api
|
||||
.sysVisLogDelete()
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success('清空成功');
|
||||
this.onReloadData();
|
||||
} else {
|
||||
this.$message.error('清空失败：' + res.message);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-alert closable type="error">
|
||||
<template slot="message">页面刷新的时候也会有保存登录日志，但是没有ip显示</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysVisLog: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-select
|
||||
:style="{ width: '170px' }"
|
||||
allow-clear
|
||||
placeholder="请选择访问类型"
|
||||
v-model="query.visType"
|
||||
>
|
||||
<a-select-option
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.visTypeDict"
|
||||
>{{ item.value }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="是否成功">
|
||||
<a-select
|
||||
:style="{ width: '170px' }"
|
||||
allow-clear
|
||||
placeholder="请选择是否成功"
|
||||
v-model="query.success"
|
||||
>
|
||||
<a-select-option value="true">是</a-select-option>
|
||||
<a-select-option value="false">否</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="操作时间">
|
||||
<a-range-picker
|
||||
:show-time="{
|
||||
hideDisabledOptions: true,
|
||||
defaultValue: [$moment('00:00:00', 'HH:mm:ss'), $moment('23:59:59', 'HH:mm:ss')],
|
||||
}"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
v-model="query.dates"
|
||||
/>
|
||||
</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="sysVisLog:delete" slot="operator">
|
||||
<div class="yo-action-bar--actions">
|
||||
<a-popconfirm @confirm="onVisLogClear" placement="bottomLeft" title="是否确认清空日志">
|
||||
<a-button>清空日志</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</Auth>
|
||||
<span slot="visType" slot-scope="text">{{ bindCodeValue(text, 'visTypeDict') }}</span>
|
||||
<span slot="success" slot-scope="text">{{ text ? '是' : '否' }}</span>
|
||||
<a-descriptions bordered size="small" slot="expandedRowRender" slot-scope="record">
|
||||
<a-descriptions-item :span="3" label="具体消息">{{ record.message }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
<br />
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '日志名称',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '访问类型',
|
||||
dataIndex: 'visType',
|
||||
scopedSlots: { customRender: 'visType' },
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '是否成功',
|
||||
dataIndex: 'success',
|
||||
scopedSlots: { customRender: 'success' },
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: 'ip',
|
||||
dataIndex: 'ip',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '浏览器',
|
||||
dataIndex: 'browser',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '访问时间',
|
||||
dataIndex: 'visTime',
|
||||
scopedSlots: { customRender: 'visTime' },
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '访问人',
|
||||
dataIndex: 'account',
|
||||
sorter: true,
|
||||
},
|
||||
],
|
||||
|
||||
codes: {
|
||||
visTypeDict: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
const query = this.$_.cloneDeep(this.query);
|
||||
if (query.dates && query.dates.length) {
|
||||
query.searchBeginTime = this.$moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
|
||||
query.searchEndTime = this.$moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
|
||||
delete query.dates;
|
||||
}
|
||||
|
||||
return this.$api
|
||||
.sysVisLogPage({
|
||||
...params,
|
||||
...query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载字典数据时的必要方法
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'vis_type' })]).then(([commonStatus]) => {
|
||||
this.codes.visTypeDict = commonStatus.data;
|
||||
});
|
||||
},
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
onVisLogClear() {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api
|
||||
.sysVisLogDelete()
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success('清空成功');
|
||||
this.onReloadData();
|
||||
} else {
|
||||
this.$message.error('清空失败：' + res.message);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,340 +1,340 @@
|
||||
<template>
|
||||
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<a-alert type="warning">
|
||||
<template slot="message">当前没有写入字段[重定向]</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<div class="yo-form-group">
|
||||
<!-- 表单控件 -->
|
||||
<h3>基本信息</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="菜单类型" prop="type">
|
||||
<template slot="help">
|
||||
目录：默认添加在顶级
|
||||
<br />菜单：
|
||||
<br />按钮：
|
||||
</template>
|
||||
<a-radio-group @change="onTypeChange" v-model="form.type">
|
||||
<a-radio-button
|
||||
:key="type.code"
|
||||
:value="type.code"
|
||||
v-for="type in codes.menuType"
|
||||
>{{ type.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="名称" prop="name">
|
||||
<a-input placeholder="请输入名称" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="所属应用" prop="application">
|
||||
<a-select @change="onLoadMenuTree" placeholder="请选择所属应用" v-model="form.application">
|
||||
<a-select-option
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in appList"
|
||||
>{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<!-- 父级菜单只有[目录]不可用 -->
|
||||
<a-form-model-item label="父级菜单" prop="pid" v-if="form.type != 0">
|
||||
<a-tree-select
|
||||
:dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
|
||||
:tree-data="parentTreeData"
|
||||
placeholder="请选择父级菜单"
|
||||
v-model="form.pid"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
|
||||
<h3>扩展信息</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="打开方式" prop="openType" v-if="form.type == 1">
|
||||
<a-radio-group @change="onOpenTypeChange" v-model="form.openType">
|
||||
<a-radio-button
|
||||
:key="type.code"
|
||||
:value="type.code"
|
||||
v-for="type in codes.openType"
|
||||
>{{ type.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<!-- 前端组件只有[菜单]及[组件]可用 -->
|
||||
<a-form-model-item
|
||||
label="前端组件"
|
||||
prop="component"
|
||||
v-if="form.type == 1 && form.openType == 1"
|
||||
v-show="form.type == 1 && form.openType == 1"
|
||||
>
|
||||
<a-input placeholder="请输入前端组件" v-model="form.component" />
|
||||
</a-form-model-item>
|
||||
<!-- 内链地址只有[菜单]及[内链]可用 -->
|
||||
<a-form-model-item label="内链地址" prop="router" v-if="form.type == 1 && form.openType == 2">
|
||||
<a-input placeholder="请输入内链地址" v-model="form.router" />
|
||||
</a-form-model-item>
|
||||
<!-- 外链地址只有[菜单]及[外链]可用 -->
|
||||
<a-form-model-item label="内外链地址" prop="link" v-if="form.type == 1 && form.openType == 3">
|
||||
<a-input placeholder="请输入内外链地址" v-model="form.link" />
|
||||
</a-form-model-item>
|
||||
<!-- <a-form-model-item label="权重" prop="weight">
|
||||
<template slot="help">
|
||||
系统权重：菜单可分配给任何角色
|
||||
<br />业务权重：菜单对超级管理员不可见
|
||||
</template>
|
||||
<a-radio-group v-model="form.weight">
|
||||
<a-radio-button
|
||||
:key="type.code"
|
||||
:value="type.code"
|
||||
v-for="type in codes.menuWerght"
|
||||
>{{type.value}}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>-->
|
||||
<a-form-model-item label="权限标识" prop="permission" v-if="form.type == 2">
|
||||
<a-input placeholder="请输入权限标识" v-model="form.permission" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="关联上级菜单显示" prop="visibleParent" v-if="form.type == 2">
|
||||
<a-switch v-model="form.visibleParent" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="可见性">
|
||||
<a-switch v-model="form.visible" />
|
||||
</a-form-model-item>
|
||||
<!-- 图标只有[按钮]不可用 -->
|
||||
<a-form-model-item label="图标" v-if="form.type != 2">
|
||||
<a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
|
||||
<a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
|
||||
<a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="排序">
|
||||
<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>
|
||||
</div>
|
||||
</a-spin>
|
||||
|
||||
<yo-icon-selector ref="icon-selector" v-model="form.icon" />
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
import { EMPTY_ID } from '@/util/global';
|
||||
|
||||
import YoIconSelector from '@/components/yoIconSelector';
|
||||
|
||||
const defaultValue = {
|
||||
type: '1',
|
||||
openType: '1',
|
||||
weight: '1',
|
||||
visibleParent: false,
|
||||
visible: true,
|
||||
sort: 100,
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
YoIconSelector,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
type: [{ required: true, message: '请选择菜单类型' }],
|
||||
name: [{ required: true, message: '请输入名称' }],
|
||||
code: [{ required: true, message: '请输入唯一编码' }],
|
||||
application: [{ required: true, message: '请选择所属应用' }],
|
||||
pid: [{ required: true, message: '请选择父级' }],
|
||||
component: [{ required: true, message: '请输入前端组件' }],
|
||||
router: [{ required: true, message: '请输入内链地址' }],
|
||||
link: [{ required: true, message: '请输入外链地址' }],
|
||||
permission: [{ required: true, message: '请输入权限标识' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/** ... */
|
||||
appList: [],
|
||||
codes: {
|
||||
menuType: [],
|
||||
menuWerght: [],
|
||||
openType: [],
|
||||
},
|
||||
|
||||
parentTreeData: [],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
/** 将默认数据覆盖到form */
|
||||
let form = {
|
||||
...defaultValue,
|
||||
...params.record,
|
||||
/** 在此处添加默认数据转换 */
|
||||
/** ... */
|
||||
};
|
||||
|
||||
if (params.isParent) {
|
||||
form.pid = params.parent.id;
|
||||
form.application = params.parent.application;
|
||||
}
|
||||
|
||||
this.form = this.$_.cloneDeep(form);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/** ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
this.form = {
|
||||
...defaultValue,
|
||||
};
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/** ... */
|
||||
this.parentTreeData = [];
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/** ...BEGIN */
|
||||
this.codes = await this.onLoadCodes();
|
||||
this.appList = await this.onLoadSysApplist();
|
||||
if (params.isParent) {
|
||||
await this.onLoadMenuTree(params.parent.application);
|
||||
} else if (params.record) {
|
||||
await this.onLoadMenuTree(params.record.application);
|
||||
}
|
||||
/** ...END */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/** ... */
|
||||
onLoadCodes() {
|
||||
return this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'menu_type' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'menu_weight' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'open_type' }),
|
||||
])
|
||||
.then(([menuType, menuWerght, openType]) => {
|
||||
return {
|
||||
menuType: menuType.data,
|
||||
menuWerght: menuWerght.data,
|
||||
openType: openType.data,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
onLoadSysApplist() {
|
||||
return this.$api.getAppList().then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
|
||||
onLoadMenuTree(app) {
|
||||
return this.$api.getMenuTree({ application: app }).then(({ data }) => {
|
||||
this.parentTreeData = [
|
||||
{
|
||||
id: EMPTY_ID,
|
||||
parentId: undefined,
|
||||
title: '顶级',
|
||||
value: EMPTY_ID,
|
||||
pid: undefined,
|
||||
children: data,
|
||||
},
|
||||
];
|
||||
});
|
||||
},
|
||||
|
||||
onTypeChangeGroup() {
|
||||
const { type, openType } = this.form;
|
||||
if (type == 1 && openType == 2) {
|
||||
this.$set(this.form, 'component', 'iframe');
|
||||
} else {
|
||||
this.$set(this.form, 'component', '');
|
||||
}
|
||||
},
|
||||
|
||||
onTypeChange() {
|
||||
this.onTypeChangeGroup();
|
||||
|
||||
if (this.form.type == 0 || this.form.type == 2) {
|
||||
this.form.openType = '0';
|
||||
} else {
|
||||
this.form.openType = '1';
|
||||
}
|
||||
},
|
||||
|
||||
onOpenTypeChange() {
|
||||
this.onTypeChangeGroup();
|
||||
},
|
||||
|
||||
onOpenSelectIcon() {
|
||||
this.$refs['icon-selector'].onOpen(this.form.icon);
|
||||
},
|
||||
|
||||
onSelectIcon(icon) {
|
||||
this.$set(this.form, 'icon', icon);
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<a-alert type="warning">
|
||||
<template slot="message">当前没有写入字段[重定向]</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<div class="yo-form-group">
|
||||
<!-- 表单控件 -->
|
||||
<h3>基本信息</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="菜单类型" prop="type">
|
||||
<template slot="help">
|
||||
目录：默认添加在顶级
|
||||
<br />菜单：
|
||||
<br />按钮：
|
||||
</template>
|
||||
<a-radio-group @change="onTypeChange" v-model="form.type">
|
||||
<a-radio-button
|
||||
:key="type.code"
|
||||
:value="type.code"
|
||||
v-for="type in codes.menuType"
|
||||
>{{ type.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="名称" prop="name">
|
||||
<a-input placeholder="请输入名称" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="所属应用" prop="application">
|
||||
<a-select @change="onLoadMenuTree" placeholder="请选择所属应用" v-model="form.application">
|
||||
<a-select-option
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in appList"
|
||||
>{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<!-- 父级菜单只有[目录]不可用 -->
|
||||
<a-form-model-item label="父级菜单" prop="pid" v-if="form.type != 0">
|
||||
<a-tree-select
|
||||
:dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
|
||||
:tree-data="parentTreeData"
|
||||
placeholder="请选择父级菜单"
|
||||
v-model="form.pid"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
|
||||
<h3>扩展信息</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="打开方式" prop="openType" v-if="form.type == 1">
|
||||
<a-radio-group @change="onOpenTypeChange" v-model="form.openType">
|
||||
<a-radio-button
|
||||
:key="type.code"
|
||||
:value="type.code"
|
||||
v-for="type in codes.openType"
|
||||
>{{ type.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<!-- 前端组件只有[菜单]及[组件]可用 -->
|
||||
<a-form-model-item
|
||||
label="前端组件"
|
||||
prop="component"
|
||||
v-if="form.type == 1 && form.openType == 1"
|
||||
v-show="form.type == 1 && form.openType == 1"
|
||||
>
|
||||
<a-input placeholder="请输入前端组件" v-model="form.component" />
|
||||
</a-form-model-item>
|
||||
<!-- 内链地址只有[菜单]及[内链]可用 -->
|
||||
<a-form-model-item label="内链地址" prop="router" v-if="form.type == 1 && form.openType == 2">
|
||||
<a-input placeholder="请输入内链地址" v-model="form.router" />
|
||||
</a-form-model-item>
|
||||
<!-- 外链地址只有[菜单]及[外链]可用 -->
|
||||
<a-form-model-item label="内外链地址" prop="link" v-if="form.type == 1 && form.openType == 3">
|
||||
<a-input placeholder="请输入内外链地址" v-model="form.link" />
|
||||
</a-form-model-item>
|
||||
<!-- <a-form-model-item label="权重" prop="weight">
|
||||
<template slot="help">
|
||||
系统权重：菜单可分配给任何角色
|
||||
<br />业务权重：菜单对超级管理员不可见
|
||||
</template>
|
||||
<a-radio-group v-model="form.weight">
|
||||
<a-radio-button
|
||||
:key="type.code"
|
||||
:value="type.code"
|
||||
v-for="type in codes.menuWerght"
|
||||
>{{type.value}}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>-->
|
||||
<a-form-model-item label="权限标识" prop="permission" v-if="form.type == 2">
|
||||
<a-input placeholder="请输入权限标识" v-model="form.permission" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="关联上级菜单显示" prop="visibleParent" v-if="form.type == 2">
|
||||
<a-switch v-model="form.visibleParent" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="可见性">
|
||||
<a-switch v-model="form.visible" />
|
||||
</a-form-model-item>
|
||||
<!-- 图标只有[按钮]不可用 -->
|
||||
<a-form-model-item label="图标" v-if="form.type != 2">
|
||||
<a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
|
||||
<a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
|
||||
<a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="排序">
|
||||
<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>
|
||||
</div>
|
||||
</a-spin>
|
||||
|
||||
<yo-icon-selector ref="icon-selector" v-model="form.icon" />
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
import { EMPTY_ID } from '@/util/global';
|
||||
|
||||
import YoIconSelector from '@/components/yoIconSelector';
|
||||
|
||||
const defaultValue = {
|
||||
type: '1',
|
||||
openType: '1',
|
||||
weight: '1',
|
||||
visibleParent: false,
|
||||
visible: true,
|
||||
sort: 100,
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
YoIconSelector,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
type: [{ required: true, message: '请选择菜单类型' }],
|
||||
name: [{ required: true, message: '请输入名称' }],
|
||||
code: [{ required: true, message: '请输入唯一编码' }],
|
||||
application: [{ required: true, message: '请选择所属应用' }],
|
||||
pid: [{ required: true, message: '请选择父级' }],
|
||||
component: [{ required: true, message: '请输入前端组件' }],
|
||||
router: [{ required: true, message: '请输入内链地址' }],
|
||||
link: [{ required: true, message: '请输入外链地址' }],
|
||||
permission: [{ required: true, message: '请输入权限标识' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/** ... */
|
||||
appList: [],
|
||||
codes: {
|
||||
menuType: [],
|
||||
menuWerght: [],
|
||||
openType: [],
|
||||
},
|
||||
|
||||
parentTreeData: [],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
/** 将默认数据覆盖到form */
|
||||
let form = {
|
||||
...defaultValue,
|
||||
...params.record,
|
||||
/** 在此处添加默认数据转换 */
|
||||
/** ... */
|
||||
};
|
||||
|
||||
if (params.isParent) {
|
||||
form.pid = params.parent.id;
|
||||
form.application = params.parent.application;
|
||||
}
|
||||
|
||||
this.form = this.$_.cloneDeep(form);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/** ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
this.form = {
|
||||
...defaultValue,
|
||||
};
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/** ... */
|
||||
this.parentTreeData = [];
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/** ...BEGIN */
|
||||
this.codes = await this.onLoadCodes();
|
||||
this.appList = await this.onLoadSysApplist();
|
||||
if (params.isParent) {
|
||||
await this.onLoadMenuTree(params.parent.application);
|
||||
} else if (params.record) {
|
||||
await this.onLoadMenuTree(params.record.application);
|
||||
}
|
||||
/** ...END */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/** ... */
|
||||
onLoadCodes() {
|
||||
return this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'menu_type' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'menu_weight' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'open_type' }),
|
||||
])
|
||||
.then(([menuType, menuWerght, openType]) => {
|
||||
return {
|
||||
menuType: menuType.data,
|
||||
menuWerght: menuWerght.data,
|
||||
openType: openType.data,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
onLoadSysApplist() {
|
||||
return this.$api.getAppList().then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
|
||||
onLoadMenuTree(app) {
|
||||
return this.$api.getMenuTree({ application: app }).then(({ data }) => {
|
||||
this.parentTreeData = [
|
||||
{
|
||||
id: EMPTY_ID,
|
||||
parentId: undefined,
|
||||
title: '顶级',
|
||||
value: EMPTY_ID,
|
||||
pid: undefined,
|
||||
children: data,
|
||||
},
|
||||
];
|
||||
});
|
||||
},
|
||||
|
||||
onTypeChangeGroup() {
|
||||
const { type, openType } = this.form;
|
||||
if (type == 1 && openType == 2) {
|
||||
this.$set(this.form, 'component', 'iframe');
|
||||
} else {
|
||||
this.$set(this.form, 'component', '');
|
||||
}
|
||||
},
|
||||
|
||||
onTypeChange() {
|
||||
this.onTypeChangeGroup();
|
||||
|
||||
if (this.form.type == 0 || this.form.type == 2) {
|
||||
this.form.openType = '0';
|
||||
} else {
|
||||
this.form.openType = '1';
|
||||
}
|
||||
},
|
||||
|
||||
onOpenTypeChange() {
|
||||
this.onTypeChangeGroup();
|
||||
},
|
||||
|
||||
onOpenSelectIcon() {
|
||||
this.$refs['icon-selector'].onOpen(this.form.icon);
|
||||
},
|
||||
|
||||
onSelectIcon(icon) {
|
||||
this.$set(this.form, 'icon', icon);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,227 +1,227 @@
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-alert type="error">
|
||||
<template slot="message">按钮编辑关闭时调用resetFields报错,原因为visible=undefined</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<yo-table :columns="columns" :load-data="loadData" ref="table">
|
||||
<Auth auth="sysMenu:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增菜单</a-button>
|
||||
</Auth>
|
||||
<span slot="type" slot-scope="text">{{ bindCodeValue(text, 'menu_type') }}</span>
|
||||
<span slot="icon" slot-scope="text">
|
||||
<div v-if="text">
|
||||
<a-icon :type="text" />
|
||||
</div>
|
||||
</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<yo-table-actions>
|
||||
<Auth auth="sysMenu:add" v-if="record.type < 2">
|
||||
<a @click="onOpen('add-form', record, true)">新增子菜单</a>
|
||||
</Auth>
|
||||
<Auth auth="sysMenu:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysMenu:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
|
||||
<yo-modal-form
|
||||
:action="$api.sysMenuAdd"
|
||||
:width="800"
|
||||
@ok="onReloadData"
|
||||
ref="add-form"
|
||||
title="新增菜单"
|
||||
type="drawer"
|
||||
>
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<yo-modal-form
|
||||
:action="$api.sysMenuEdit"
|
||||
:width="800"
|
||||
@ok="onReloadData"
|
||||
ref="edit-form"
|
||||
title="编辑菜单"
|
||||
type="drawer"
|
||||
>
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '菜单名称',
|
||||
width: '220px',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '菜单类型',
|
||||
width: '100px',
|
||||
dataIndex: 'type',
|
||||
scopedSlots: { customRender: 'type' },
|
||||
},
|
||||
{
|
||||
title: '图标',
|
||||
width: '100px',
|
||||
dataIndex: 'icon',
|
||||
scopedSlots: { customRender: 'icon' },
|
||||
},
|
||||
{
|
||||
title: '前端组件',
|
||||
width: '220px',
|
||||
dataIndex: 'component',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '权限标识',
|
||||
width: '220px',
|
||||
dataIndex: 'permission',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
width: '100px',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
],
|
||||
codes: [
|
||||
{
|
||||
code: 'menu_type',
|
||||
values: [],
|
||||
},
|
||||
{
|
||||
code: 'menu_weight',
|
||||
values: [],
|
||||
},
|
||||
{
|
||||
code: 'open_type',
|
||||
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
|
||||
.getMenuList({
|
||||
...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.sysDictTypeDropDownAwait({ code: 'menu_type' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'menu_weight' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'open_type' }),
|
||||
])
|
||||
.then(([menuType, menuWerght, openType]) => {
|
||||
this.codes.find((p) => p.code === 'menu_type').values = menuType.data;
|
||||
this.codes.find((p) => p.code === 'menu_weight').values = menuWerght.data;
|
||||
this.codes.find((p) => p.code === 'open_type').values = openType.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, isParent = false) {
|
||||
const params = isParent
|
||||
? {
|
||||
parent: record,
|
||||
isParent,
|
||||
}
|
||||
: {
|
||||
record,
|
||||
isParent,
|
||||
};
|
||||
this.$refs[formName].onOpen(params);
|
||||
},
|
||||
|
||||
onResult(success, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
}
|
||||
this.$refs.table.onLoaded();
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysMenuDelete(record).then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-alert type="error">
|
||||
<template slot="message">按钮编辑关闭时调用resetFields报错,原因为visible=undefined</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<yo-table :columns="columns" :load-data="loadData" ref="table">
|
||||
<Auth auth="sysMenu:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增菜单</a-button>
|
||||
</Auth>
|
||||
<span slot="type" slot-scope="text">{{ bindCodeValue(text, 'menu_type') }}</span>
|
||||
<span slot="icon" slot-scope="text">
|
||||
<div v-if="text">
|
||||
<a-icon :type="text" />
|
||||
</div>
|
||||
</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<yo-table-actions>
|
||||
<Auth auth="sysMenu:add" v-if="record.type < 2">
|
||||
<a @click="onOpen('add-form', record, true)">新增子菜单</a>
|
||||
</Auth>
|
||||
<Auth auth="sysMenu:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysMenu:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
|
||||
<yo-modal-form
|
||||
:action="$api.sysMenuAdd"
|
||||
:width="800"
|
||||
@ok="onReloadData"
|
||||
ref="add-form"
|
||||
title="新增菜单"
|
||||
type="drawer"
|
||||
>
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<yo-modal-form
|
||||
:action="$api.sysMenuEdit"
|
||||
:width="800"
|
||||
@ok="onReloadData"
|
||||
ref="edit-form"
|
||||
title="编辑菜单"
|
||||
type="drawer"
|
||||
>
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '菜单名称',
|
||||
width: '220px',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '菜单类型',
|
||||
width: '100px',
|
||||
dataIndex: 'type',
|
||||
scopedSlots: { customRender: 'type' },
|
||||
},
|
||||
{
|
||||
title: '图标',
|
||||
width: '100px',
|
||||
dataIndex: 'icon',
|
||||
scopedSlots: { customRender: 'icon' },
|
||||
},
|
||||
{
|
||||
title: '前端组件',
|
||||
width: '220px',
|
||||
dataIndex: 'component',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '权限标识',
|
||||
width: '220px',
|
||||
dataIndex: 'permission',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
width: '100px',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
],
|
||||
codes: [
|
||||
{
|
||||
code: 'menu_type',
|
||||
values: [],
|
||||
},
|
||||
{
|
||||
code: 'menu_weight',
|
||||
values: [],
|
||||
},
|
||||
{
|
||||
code: 'open_type',
|
||||
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
|
||||
.getMenuList({
|
||||
...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.sysDictTypeDropDownAwait({ code: 'menu_type' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'menu_weight' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'open_type' }),
|
||||
])
|
||||
.then(([menuType, menuWerght, openType]) => {
|
||||
this.codes.find((p) => p.code === 'menu_type').values = menuType.data;
|
||||
this.codes.find((p) => p.code === 'menu_weight').values = menuWerght.data;
|
||||
this.codes.find((p) => p.code === 'open_type').values = openType.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, isParent = false) {
|
||||
const params = isParent
|
||||
? {
|
||||
parent: record,
|
||||
isParent,
|
||||
}
|
||||
: {
|
||||
record,
|
||||
isParent,
|
||||
};
|
||||
this.$refs[formName].onOpen(params);
|
||||
},
|
||||
|
||||
onResult(success, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
}
|
||||
this.$refs.table.onLoaded();
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysMenuDelete(record).then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,219 +1,219 @@
|
||||
<template>
|
||||
<!--
|
||||
普通编辑窗体
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<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 label="机构名称" prop="name">
|
||||
<a-input placeholder="请输入机构名称" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="上级机构" prop="pid">
|
||||
<a-tree-select
|
||||
:dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
|
||||
:tree-data="orgData"
|
||||
placeholder="请选择上级机构"
|
||||
tree-default-expand-all
|
||||
v-model="form.pid"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="所属区域" prop="areaCode">
|
||||
<a-cascader
|
||||
:field-names="{ label: 'name', value: 'code', children: 'children' }"
|
||||
:options="areaData"
|
||||
change-on-select
|
||||
placeholder="请选择所属区域"
|
||||
v-model="form.areaCode"
|
||||
/>
|
||||
</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="备注" prop="remark">
|
||||
<a-textarea placeholder="请输入备注" v-model="form.remark" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
import { EMPTY_ID } from '@/util/global';
|
||||
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
pid: undefined,
|
||||
sort: 100,
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入机构名称' }],
|
||||
code: [{ required: true, message: '请输入唯一编码' }],
|
||||
pid: [{ required: true, message: '请选择上级机构' }],
|
||||
areaCode: [{ required: true, message: '请选择所属区域' }],
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
orgData: [],
|
||||
areaData: [],
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
// 从字符串areaCode查找到整个层级
|
||||
const areaCode = [];
|
||||
const findCode = (data, level) => {
|
||||
level = level || 0;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const item = data[i];
|
||||
areaCode[level] = item.code;
|
||||
|
||||
if (item.code === params.record.areaCode) {
|
||||
areaCode.length = level + 1;
|
||||
return true;
|
||||
}
|
||||
|
||||
if (item.children && item.children.length) {
|
||||
const found = findCode(item.children, level + 1);
|
||||
if (found) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (params.record && params.record.areaCode) {
|
||||
findCode(this.areaData);
|
||||
}
|
||||
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
pid: params.orgId,
|
||||
...params.record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
areaCode,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
record.areaCode = record.areaCode[record.areaCode.length - 1];
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
await this.onLoadOrgData();
|
||||
await this.onLoadAreaData();
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
onLoadOrgData() {
|
||||
return this.$api.getOrgTree().then(({ data }) => {
|
||||
this.orgData = [
|
||||
{
|
||||
id: EMPTY_ID,
|
||||
parentId: undefined,
|
||||
title: '顶级',
|
||||
value: EMPTY_ID,
|
||||
pid: undefined,
|
||||
children: data,
|
||||
},
|
||||
];
|
||||
});
|
||||
},
|
||||
onLoadAreaData() {
|
||||
return this.$api.getAreaTree().then(({ data }) => {
|
||||
// 为了防止出现空的层级选择,删除所有空children节点
|
||||
const clearChiildren = (data) => {
|
||||
data.forEach((item) => {
|
||||
if (item.children && item.children.length) {
|
||||
clearChiildren(item.children);
|
||||
} else {
|
||||
delete item.children;
|
||||
}
|
||||
});
|
||||
};
|
||||
clearChiildren(data);
|
||||
this.areaData = data;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<!--
|
||||
普通编辑窗体
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<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 label="机构名称" prop="name">
|
||||
<a-input placeholder="请输入机构名称" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="上级机构" prop="pid">
|
||||
<a-tree-select
|
||||
:dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
|
||||
:tree-data="orgData"
|
||||
placeholder="请选择上级机构"
|
||||
tree-default-expand-all
|
||||
v-model="form.pid"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="所属区域" prop="areaCode">
|
||||
<a-cascader
|
||||
:field-names="{ label: 'name', value: 'code', children: 'children' }"
|
||||
:options="areaData"
|
||||
change-on-select
|
||||
placeholder="请选择所属区域"
|
||||
v-model="form.areaCode"
|
||||
/>
|
||||
</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="备注" prop="remark">
|
||||
<a-textarea placeholder="请输入备注" v-model="form.remark" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
import { EMPTY_ID } from '@/util/global';
|
||||
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
pid: undefined,
|
||||
sort: 100,
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入机构名称' }],
|
||||
code: [{ required: true, message: '请输入唯一编码' }],
|
||||
pid: [{ required: true, message: '请选择上级机构' }],
|
||||
areaCode: [{ required: true, message: '请选择所属区域' }],
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
orgData: [],
|
||||
areaData: [],
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
// 从字符串areaCode查找到整个层级
|
||||
const areaCode = [];
|
||||
const findCode = (data, level) => {
|
||||
level = level || 0;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const item = data[i];
|
||||
areaCode[level] = item.code;
|
||||
|
||||
if (item.code === params.record.areaCode) {
|
||||
areaCode.length = level + 1;
|
||||
return true;
|
||||
}
|
||||
|
||||
if (item.children && item.children.length) {
|
||||
const found = findCode(item.children, level + 1);
|
||||
if (found) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (params.record && params.record.areaCode) {
|
||||
findCode(this.areaData);
|
||||
}
|
||||
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
pid: params.orgId,
|
||||
...params.record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
areaCode,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
record.areaCode = record.areaCode[record.areaCode.length - 1];
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
await this.onLoadOrgData();
|
||||
await this.onLoadAreaData();
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
onLoadOrgData() {
|
||||
return this.$api.getOrgTree().then(({ data }) => {
|
||||
this.orgData = [
|
||||
{
|
||||
id: EMPTY_ID,
|
||||
parentId: undefined,
|
||||
title: '顶级',
|
||||
value: EMPTY_ID,
|
||||
pid: undefined,
|
||||
children: data,
|
||||
},
|
||||
];
|
||||
});
|
||||
},
|
||||
onLoadAreaData() {
|
||||
return this.$api.getAreaTree().then(({ data }) => {
|
||||
// 为了防止出现空的层级选择,删除所有空children节点
|
||||
const clearChiildren = (data) => {
|
||||
data.forEach((item) => {
|
||||
if (item.children && item.children.length) {
|
||||
clearChiildren(item.children);
|
||||
} else {
|
||||
delete item.children;
|
||||
}
|
||||
});
|
||||
};
|
||||
clearChiildren(data);
|
||||
this.areaData = data;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,278 +1,278 @@
|
||||
<template>
|
||||
<!--
|
||||
普通查询表格
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<yo-tree-layout
|
||||
:load-data="loadTreeData"
|
||||
@select="onSelect"
|
||||
default-expanded-keys
|
||||
ref="tree-layout"
|
||||
>
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<yo-table
|
||||
:columns="columns"
|
||||
:load-data="loadData"
|
||||
@query="onQuery"
|
||||
@resetQuery="onResetQuery"
|
||||
ref="table"
|
||||
>
|
||||
<Auth auth="sysOrg:page" slot="query">
|
||||
<!-- 此处添加查询表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-form-model-item label="机构名称">
|
||||
<a-input allow-clear placeholder="请输入机构名称" v-model="query.name" />
|
||||
</a-form-model-item>
|
||||
</Auth>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增表单 -->
|
||||
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<!-- 编辑表单 -->
|
||||
<yo-modal-form
|
||||
:action="$api[api.edit]"
|
||||
:title="'编辑' + name"
|
||||
@ok="onReloadData"
|
||||
ref="edit-form"
|
||||
>
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</container>
|
||||
</yo-tree-layout>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
import YoTreeLayout from '@/components/yoTreeLayout';
|
||||
|
||||
/* 在此管理整个页面需要的接口名称 */
|
||||
const api = {
|
||||
page: 'getOrgPage',
|
||||
add: 'sysOrgAdd',
|
||||
edit: 'sysOrgEdit',
|
||||
delete: 'sysOrgDelete',
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
YoTreeLayout,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
api,
|
||||
|
||||
name: '机构',
|
||||
|
||||
/* 查询条件 */
|
||||
query: {},
|
||||
|
||||
/* 表格字段 */
|
||||
columns: [
|
||||
{
|
||||
title: '机构名称',
|
||||
width: '400px',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
width: '200px',
|
||||
dataIndex: 'code',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
width: '80px',
|
||||
dataIndex: 'sort',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
sorter: true,
|
||||
},
|
||||
],
|
||||
|
||||
/* 字典编码储存格式 */
|
||||
// codes: {
|
||||
// code1: [],
|
||||
// code2: [],
|
||||
// },
|
||||
};
|
||||
},
|
||||
created() {
|
||||
/** 按需加载字典编码 */
|
||||
//this.onLoadCodes();
|
||||
|
||||
/** 根据权限添加操作列 */
|
||||
const flag = this.$auth(/* ... */);
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api[api.page]({
|
||||
...params,
|
||||
...this.query,
|
||||
}).then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 重置查询条件
|
||||
*/
|
||||
onResetQuery() {
|
||||
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
|
||||
Object.keys(this.query).forEach((p) => {
|
||||
if (p !== 'pid') {
|
||||
this.query[p] = undefined;
|
||||
}
|
||||
});
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
//onLoadCodes() {
|
||||
// this.$api
|
||||
// .$queue([
|
||||
// this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
|
||||
// this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
|
||||
// /* ... */
|
||||
// ])
|
||||
// .then(([code1, code2]) => {
|
||||
// this.codes.code1 = code1.data;
|
||||
// this.codes.code2 = code2.data;
|
||||
// /* ... */
|
||||
// });
|
||||
// },
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen({
|
||||
record,
|
||||
/* 按需添加其他参数 */
|
||||
/* ... */
|
||||
orgId: this.query['pid'],
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 必要方法
|
||||
* 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
|
||||
*/
|
||||
onResult(success, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api[api.delete](record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 树形选择界面必要的方法
|
||||
* 传给yo-table-layout以示意数据接口
|
||||
*/
|
||||
loadTreeData() {
|
||||
return this.$api.getOrgTree().then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
onSelect([id]) {
|
||||
this.query = {
|
||||
pid: id,
|
||||
};
|
||||
this.onQuery();
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<!--
|
||||
普通查询表格
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<yo-tree-layout
|
||||
:load-data="loadTreeData"
|
||||
@select="onSelect"
|
||||
default-expanded-keys
|
||||
ref="tree-layout"
|
||||
>
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<yo-table
|
||||
:columns="columns"
|
||||
:load-data="loadData"
|
||||
@query="onQuery"
|
||||
@resetQuery="onResetQuery"
|
||||
ref="table"
|
||||
>
|
||||
<Auth auth="sysOrg:page" slot="query">
|
||||
<!-- 此处添加查询表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-form-model-item label="机构名称">
|
||||
<a-input allow-clear placeholder="请输入机构名称" v-model="query.name" />
|
||||
</a-form-model-item>
|
||||
</Auth>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增表单 -->
|
||||
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<!-- 编辑表单 -->
|
||||
<yo-modal-form
|
||||
:action="$api[api.edit]"
|
||||
:title="'编辑' + name"
|
||||
@ok="onReloadData"
|
||||
ref="edit-form"
|
||||
>
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</container>
|
||||
</yo-tree-layout>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
import YoTreeLayout from '@/components/yoTreeLayout';
|
||||
|
||||
/* 在此管理整个页面需要的接口名称 */
|
||||
const api = {
|
||||
page: 'getOrgPage',
|
||||
add: 'sysOrgAdd',
|
||||
edit: 'sysOrgEdit',
|
||||
delete: 'sysOrgDelete',
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
YoTreeLayout,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
api,
|
||||
|
||||
name: '机构',
|
||||
|
||||
/* 查询条件 */
|
||||
query: {},
|
||||
|
||||
/* 表格字段 */
|
||||
columns: [
|
||||
{
|
||||
title: '机构名称',
|
||||
width: '400px',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
width: '200px',
|
||||
dataIndex: 'code',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
width: '80px',
|
||||
dataIndex: 'sort',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
sorter: true,
|
||||
},
|
||||
],
|
||||
|
||||
/* 字典编码储存格式 */
|
||||
// codes: {
|
||||
// code1: [],
|
||||
// code2: [],
|
||||
// },
|
||||
};
|
||||
},
|
||||
created() {
|
||||
/** 按需加载字典编码 */
|
||||
//this.onLoadCodes();
|
||||
|
||||
/** 根据权限添加操作列 */
|
||||
const flag = this.$auth(/* ... */);
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api[api.page]({
|
||||
...params,
|
||||
...this.query,
|
||||
}).then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 重置查询条件
|
||||
*/
|
||||
onResetQuery() {
|
||||
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
|
||||
Object.keys(this.query).forEach((p) => {
|
||||
if (p !== 'pid') {
|
||||
this.query[p] = undefined;
|
||||
}
|
||||
});
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
//onLoadCodes() {
|
||||
// this.$api
|
||||
// .$queue([
|
||||
// this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
|
||||
// this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
|
||||
// /* ... */
|
||||
// ])
|
||||
// .then(([code1, code2]) => {
|
||||
// this.codes.code1 = code1.data;
|
||||
// this.codes.code2 = code2.data;
|
||||
// /* ... */
|
||||
// });
|
||||
// },
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen({
|
||||
record,
|
||||
/* 按需添加其他参数 */
|
||||
/* ... */
|
||||
orgId: this.query['pid'],
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 必要方法
|
||||
* 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
|
||||
*/
|
||||
onResult(success, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api[api.delete](record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 树形选择界面必要的方法
|
||||
* 传给yo-table-layout以示意数据接口
|
||||
*/
|
||||
loadTreeData() {
|
||||
return this.$api.getOrgTree().then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
onSelect([id]) {
|
||||
this.query = {
|
||||
pid: id,
|
||||
};
|
||||
this.onQuery();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,135 +1,135 @@
|
||||
<template>
|
||||
<!--
|
||||
普通编辑窗体
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<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 label="职位名称" prop="name">
|
||||
<a-input placeholder="请输入职位名称" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</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="备注" prop="remark">
|
||||
<a-textarea :rows="4" placeholder="请输入备注" v-model="form.remark"></a-textarea>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
sort: 100,
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
name: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入唯一编码', trigger: 'blur' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...params.record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<!--
|
||||
普通编辑窗体
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<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 label="职位名称" prop="name">
|
||||
<a-input placeholder="请输入职位名称" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</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="备注" prop="remark">
|
||||
<a-textarea :rows="4" placeholder="请输入备注" v-model="form.remark"></a-textarea>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
sort: 100,
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
name: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入唯一编码', trigger: 'blur' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...params.record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,233 +1,233 @@
|
||||
<template>
|
||||
<!--
|
||||
普通查询表格
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<yo-table
|
||||
:columns="columns"
|
||||
:load-data="loadData"
|
||||
@query="onQuery"
|
||||
@resetQuery="onResetQuery"
|
||||
ref="table"
|
||||
>
|
||||
<Auth auth="sysPos:page" slot="query">
|
||||
<!-- 此处添加查询表单控件 -->
|
||||
<!-- ... -->
|
||||
<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>
|
||||
</Auth>
|
||||
<Auth auth="sysPos: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="sysPos:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysPos:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
<!-- 可在此处添加其他操作控件 -->
|
||||
<!-- ... -->
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增表单 -->
|
||||
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<!-- 编辑表单 -->
|
||||
<yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
/* 在此管理整个页面需要的接口名称 */
|
||||
const api = {
|
||||
page: 'sysPosPage',
|
||||
add: 'sysPosAdd',
|
||||
edit: 'sysPosEdit',
|
||||
delete: 'sysPosDelete',
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
api,
|
||||
|
||||
name: '职位',
|
||||
|
||||
/* 查询条件 */
|
||||
query: {},
|
||||
|
||||
/* 表格字段 */
|
||||
columns: [
|
||||
{
|
||||
title: '职位名称',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
dataIndex: 'code',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
sorter: true,
|
||||
},
|
||||
],
|
||||
|
||||
/* 字典编码储存格式 */
|
||||
codes: {
|
||||
code1: [],
|
||||
code2: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
/** 按需加载字典编码 */
|
||||
this.onLoadCodes();
|
||||
|
||||
/** 根据权限添加操作列 */
|
||||
const flag = this.$auth({
|
||||
sysPos: [['edit'], ['delete']],
|
||||
});
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api[api.page]({
|
||||
...params,
|
||||
...this.query,
|
||||
}).then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 重置查询条件
|
||||
*/
|
||||
onResetQuery() {
|
||||
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
|
||||
this.query = {};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
onLoadCodes() {},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].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();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api[api.delete](record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<!--
|
||||
普通查询表格
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<yo-table
|
||||
:columns="columns"
|
||||
:load-data="loadData"
|
||||
@query="onQuery"
|
||||
@resetQuery="onResetQuery"
|
||||
ref="table"
|
||||
>
|
||||
<Auth auth="sysPos:page" slot="query">
|
||||
<!-- 此处添加查询表单控件 -->
|
||||
<!-- ... -->
|
||||
<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>
|
||||
</Auth>
|
||||
<Auth auth="sysPos: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="sysPos:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysPos:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
<!-- 可在此处添加其他操作控件 -->
|
||||
<!-- ... -->
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增表单 -->
|
||||
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<!-- 编辑表单 -->
|
||||
<yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
/* 在此管理整个页面需要的接口名称 */
|
||||
const api = {
|
||||
page: 'sysPosPage',
|
||||
add: 'sysPosAdd',
|
||||
edit: 'sysPosEdit',
|
||||
delete: 'sysPosDelete',
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
api,
|
||||
|
||||
name: '职位',
|
||||
|
||||
/* 查询条件 */
|
||||
query: {},
|
||||
|
||||
/* 表格字段 */
|
||||
columns: [
|
||||
{
|
||||
title: '职位名称',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
dataIndex: 'code',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
sorter: true,
|
||||
},
|
||||
],
|
||||
|
||||
/* 字典编码储存格式 */
|
||||
codes: {
|
||||
code1: [],
|
||||
code2: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
/** 按需加载字典编码 */
|
||||
this.onLoadCodes();
|
||||
|
||||
/** 根据权限添加操作列 */
|
||||
const flag = this.$auth({
|
||||
sysPos: [['edit'], ['delete']],
|
||||
});
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api[api.page]({
|
||||
...params,
|
||||
...this.query,
|
||||
}).then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 重置查询条件
|
||||
*/
|
||||
onResetQuery() {
|
||||
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
|
||||
this.query = {};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
onLoadCodes() {},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].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();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api[api.delete](record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,134 +1,134 @@
|
||||
<template>
|
||||
<!--
|
||||
普通编辑窗体
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<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 label="角色名" prop="name">
|
||||
<a-input placeholder="请输入角色名" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</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="备注" prop="remark">
|
||||
<a-textarea :rows="4" placeholder="请输入备注" v-model="form.remark"></a-textarea>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
name: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入唯一编码', trigger: 'blur' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...params.record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<!--
|
||||
普通编辑窗体
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<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 label="角色名" prop="name">
|
||||
<a-input placeholder="请输入角色名" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</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="备注" prop="remark">
|
||||
<a-textarea :rows="4" placeholder="请输入备注" v-model="form.remark"></a-textarea>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
name: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入唯一编码', trigger: 'blur' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...params.record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,101 +1,101 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
:width="1200"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
title="授权菜单"
|
||||
>
|
||||
<yo-authority-view
|
||||
:auto-load="false"
|
||||
:default-selected-keys="selectedKeys"
|
||||
:load-data="loadData"
|
||||
@select="onSelect"
|
||||
ref="authority-view"
|
||||
/>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import YoAuthorityView from '@/components/yoAuthorityView';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
YoAuthorityView,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
record: {},
|
||||
selectedKeys: [],
|
||||
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口
|
||||
*/
|
||||
onOpen(params) {
|
||||
this.visible = true;
|
||||
this.record = params.record;
|
||||
|
||||
this.$nextTick(async () => {
|
||||
const view = this.$refs['authority-view'];
|
||||
view.loading = true;
|
||||
view.data = [];
|
||||
this.selectedKeys = await this.onLoadRoleOwnMenu();
|
||||
view.onReloadData();
|
||||
});
|
||||
},
|
||||
|
||||
loadData() {
|
||||
return this.$api.SysMenuTreeForGrant().then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 此角色已有菜单权限
|
||||
*/
|
||||
onLoadRoleOwnMenu() {
|
||||
return this.$api.sysRoleOwnMenu({ id: this.record.id }).then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
|
||||
onSelect(a1, a2, a3) {
|
||||
this.selectedKeys = a3;
|
||||
},
|
||||
|
||||
onOk() {
|
||||
this.confirmLoading = true;
|
||||
|
||||
this.$api
|
||||
.sysRoleGrantMenu({
|
||||
id: this.record.id,
|
||||
grantMenuIdList: this.selectedKeys,
|
||||
})
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('授权成功');
|
||||
this.$emit('ok');
|
||||
this.onCancel();
|
||||
}
|
||||
})
|
||||
.finally((res) => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
:width="1200"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
title="授权菜单"
|
||||
>
|
||||
<yo-authority-view
|
||||
:auto-load="false"
|
||||
:default-selected-keys="selectedKeys"
|
||||
:load-data="loadData"
|
||||
@select="onSelect"
|
||||
ref="authority-view"
|
||||
/>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import YoAuthorityView from '@/components/yoAuthorityView';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
YoAuthorityView,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
record: {},
|
||||
selectedKeys: [],
|
||||
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口
|
||||
*/
|
||||
onOpen(params) {
|
||||
this.visible = true;
|
||||
this.record = params.record;
|
||||
|
||||
this.$nextTick(async () => {
|
||||
const view = this.$refs['authority-view'];
|
||||
view.loading = true;
|
||||
view.data = [];
|
||||
this.selectedKeys = await this.onLoadRoleOwnMenu();
|
||||
view.onReloadData();
|
||||
});
|
||||
},
|
||||
|
||||
loadData() {
|
||||
return this.$api.SysMenuTreeForGrant().then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 此角色已有菜单权限
|
||||
*/
|
||||
onLoadRoleOwnMenu() {
|
||||
return this.$api.sysRoleOwnMenu({ id: this.record.id }).then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
|
||||
onSelect(a1, a2, a3) {
|
||||
this.selectedKeys = a3;
|
||||
},
|
||||
|
||||
onOk() {
|
||||
this.confirmLoading = true;
|
||||
|
||||
this.$api
|
||||
.sysRoleGrantMenu({
|
||||
id: this.record.id,
|
||||
grantMenuIdList: this.selectedKeys,
|
||||
})
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('授权成功');
|
||||
this.$emit('ok');
|
||||
this.onCancel();
|
||||
}
|
||||
})
|
||||
.finally((res) => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,363 +1,363 @@
|
||||
<template>
|
||||
<!--
|
||||
普通编辑窗体
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="10">
|
||||
<h3 class="h3">基本信息</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="账号" prop="account">
|
||||
<a-input placeholder="请输入账号" v-model="form.account" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="姓名" prop="name">
|
||||
<a-input placeholder="请输入姓名" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<template v-if="mode == 'add'">
|
||||
<a-form-model-item label="密码" prop="password">
|
||||
<a-input-password placeholder="请输入密码" v-model="form.password" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="确认密码" prop="confirm">
|
||||
<a-input-password placeholder="请确认密码" v-model="form.confirm" />
|
||||
</a-form-model-item>
|
||||
</template>
|
||||
<a-form-model-item label="昵称">
|
||||
<a-input placeholder="请输入昵称" v-model="form.nickName" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="生日">
|
||||
<a-date-picker
|
||||
@change="(date) => form.birthday = date ? $moment(date).format('YYYY-MM-DD') : null"
|
||||
class="w-100-p"
|
||||
placeholder="请选择生日"
|
||||
v-model="form.birthday"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="性别" prop="sex">
|
||||
<a-radio-group v-model="form.sex">
|
||||
<a-radio-button :value="0">
|
||||
<a-icon class="mr-xxs" type="stop" />
|
||||
<span>保密</span>
|
||||
</a-radio-button>
|
||||
<a-radio-button :value="1">
|
||||
<a-icon :style="{ color: '#1890ff' }" class="mr-xxs" type="man" />
|
||||
<span>男</span>
|
||||
</a-radio-button>
|
||||
<a-radio-button :value="2">
|
||||
<a-icon :style="{ color: '#eb2f96' }" class="mr-xxs" type="woman" />
|
||||
<span>女</span>
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="邮箱" prop="email">
|
||||
<a-input placeholder="请输入邮箱" v-model="form.email" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="手机号" prop="phone">
|
||||
<a-input placeholder="请输入手机号" v-model="form.phone" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="电话" prop="tel">
|
||||
<a-input placeholder="请输入电话" v-model="form.tel" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="14" v-if="form.sysEmpParam">
|
||||
<h3 class="h3">员工信息</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="所属组织机构" prop="sysEmpParam.orgId">
|
||||
<a-tree-select
|
||||
:dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
|
||||
:tree-data="orgData"
|
||||
placeholder="请选择所属组织机构"
|
||||
tree-default-expand-all
|
||||
v-model="form.sysEmpParam.orgId"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="工号">
|
||||
<a-input placeholder="请输入工号" v-model="form.sysEmpParam.jobNum" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="职位信息" prop="sysEmpParam.posIdList">
|
||||
<a-select mode="multiple" placeholder="请选择职位信息" v-model="form.sysEmpParam.posIdList">
|
||||
<a-select-option
|
||||
:key="i"
|
||||
:value="item.id"
|
||||
v-for="(item, i) in posData"
|
||||
>{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
<h4 class="h4">附加信息</h4>
|
||||
<div class="pl-md pr-md">
|
||||
<a-table
|
||||
:columns="extColumns"
|
||||
:data-source="form.sysEmpParam.extIds"
|
||||
:pagination="false"
|
||||
size="small"
|
||||
>
|
||||
<template slot="footer">
|
||||
<a-button @click="onAddExtData" block icon="plus" type="dashed">新增一项</a-button>
|
||||
</template>
|
||||
<template slot="orgId" slot-scope="text, record">
|
||||
<a-tree-select
|
||||
:default-value="text"
|
||||
:dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
|
||||
:tree-data="orgData"
|
||||
@change="value => onChangeExtData(value, record, 'orgId')"
|
||||
placeholder="请选择附加组织机构"
|
||||
tree-default-expand-all
|
||||
/>
|
||||
</template>
|
||||
<template slot="posId" slot-scope="text, record">
|
||||
<a-select
|
||||
:default-value="text"
|
||||
@change="value => onChangeExtData(value, record, 'posId')"
|
||||
placeholder="请选择附加职位信息"
|
||||
>
|
||||
<a-select-option
|
||||
:key="i"
|
||||
:value="item.id"
|
||||
v-for="(item, i) in posData"
|
||||
>{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<template slot="action" slot-scope="text, record">
|
||||
<a-button @click="onRemoveExtData(record)" size="small" type="danger">删除</a-button>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
const validateToNextPassword = (rule, value, callback) => {
|
||||
callback();
|
||||
};
|
||||
const compareToFirstPassword = (rule, value, callback) => {
|
||||
callback();
|
||||
};
|
||||
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
sex: 0,
|
||||
sysEmpParam: {},
|
||||
};
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'edit',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
account: [{ required: true, min: 5, message: '请输入至少五个字符的账号', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||||
password: [
|
||||
{ required: true, min: 5, message: '请输入至少五个字符的密码', trigger: 'blur' },
|
||||
{ validator: validateToNextPassword, trigger: 'blur' },
|
||||
],
|
||||
confirm: [
|
||||
{ required: true, message: '请确认密码', trigger: 'blur' },
|
||||
{ validator: compareToFirstPassword, trigger: 'blur' },
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
pattern: /^((13[0-9])|(14[5,7])|(15[^4,\\D])|(17[0,1,3,6-8])|(18[0-9])|(19[8,9])|(166))[0-9]{8}$/,
|
||||
message: '手机号格式不正确',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
email: [
|
||||
{ pattern: /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/, message: '邮箱格式不正确', trigger: 'blur' },
|
||||
],
|
||||
'sysEmpParam.orgId': [{ required: true, message: '请选择所属组织机构' }],
|
||||
'sysEmpParam.posIdList': [{ required: true, message: '请选择职位信息' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
orgData: [],
|
||||
posData: [],
|
||||
|
||||
extColumns: [
|
||||
{
|
||||
title: '附属机构',
|
||||
dataIndex: 'orgId',
|
||||
width: '45%',
|
||||
scopedSlots: { customRender: 'orgId' },
|
||||
},
|
||||
{
|
||||
title: '附属岗位',
|
||||
dataIndex: 'posId',
|
||||
width: '45%',
|
||||
scopedSlots: { customRender: 'posId' },
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: '70px',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
const form = this.$_.cloneDeep(params.record || {});
|
||||
// 日期特殊处理
|
||||
if (form.birthday) {
|
||||
form.birthday = this.$moment(form.birthday).format('YYYY-MM-DD');
|
||||
}
|
||||
// 提交的时候是"param",而获取下来却是"info",在这里转换一下
|
||||
if (form.sysEmpInfo) {
|
||||
form.sysEmpParam = form.sysEmpInfo;
|
||||
delete form.sysEmpInfo;
|
||||
} else if (!form.sysEmpParam) {
|
||||
form.sysEmpParam = {
|
||||
extIds: [],
|
||||
};
|
||||
}
|
||||
// 转换职位信息列表
|
||||
if (form.sysEmpParam.positions) {
|
||||
form.sysEmpParam.posIdList = form.sysEmpParam.positions.map((p) => p.posId);
|
||||
}
|
||||
// 附加信息
|
||||
if (form.sysEmpParam.extOrgPos) {
|
||||
form.sysEmpParam.extIds = form.sysEmpParam.extOrgPos.map((p, i) => {
|
||||
return {
|
||||
key: i,
|
||||
orgId: p.orgId,
|
||||
posId: p.posId,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
if (params.orgId) {
|
||||
form.sysEmpParam.orgId = orgId;
|
||||
}
|
||||
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...form,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
this.form = {
|
||||
...defaultForm,
|
||||
};
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.orgData = await this.onLoadOrgData();
|
||||
this.posData = await this.onLoadPosData();
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
|
||||
onLoadOrgData() {
|
||||
return this.$api.getOrgTree().then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
|
||||
onLoadPosData() {
|
||||
return this.$api.sysPosList().then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
|
||||
onAddExtData() {
|
||||
this.form.sysEmpParam.extIds.push({
|
||||
key: this.form.sysEmpParam.extIds.length,
|
||||
orgId: undefined,
|
||||
posId: undefined,
|
||||
});
|
||||
},
|
||||
|
||||
onRemoveExtData(record) {
|
||||
const ext = this.form.sysEmpParam.extIds,
|
||||
remove = ext.find((p) => p.key === record.key),
|
||||
index = ext.indexOf(remove);
|
||||
|
||||
ext.splice(index, 1);
|
||||
},
|
||||
|
||||
onChangeExtData(value, record, type) {
|
||||
record[type] = value;
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<!--
|
||||
普通编辑窗体
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="10">
|
||||
<h3 class="h3">基本信息</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="账号" prop="account">
|
||||
<a-input placeholder="请输入账号" v-model="form.account" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="姓名" prop="name">
|
||||
<a-input placeholder="请输入姓名" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<template v-if="mode == 'add'">
|
||||
<a-form-model-item label="密码" prop="password">
|
||||
<a-input-password placeholder="请输入密码" v-model="form.password" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="确认密码" prop="confirm">
|
||||
<a-input-password placeholder="请确认密码" v-model="form.confirm" />
|
||||
</a-form-model-item>
|
||||
</template>
|
||||
<a-form-model-item label="昵称">
|
||||
<a-input placeholder="请输入昵称" v-model="form.nickName" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="生日">
|
||||
<a-date-picker
|
||||
@change="(date) => form.birthday = date ? $moment(date).format('YYYY-MM-DD') : null"
|
||||
class="w-100-p"
|
||||
placeholder="请选择生日"
|
||||
v-model="form.birthday"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="性别" prop="sex">
|
||||
<a-radio-group v-model="form.sex">
|
||||
<a-radio-button :value="0">
|
||||
<a-icon class="mr-xxs" type="stop" />
|
||||
<span>保密</span>
|
||||
</a-radio-button>
|
||||
<a-radio-button :value="1">
|
||||
<a-icon :style="{ color: '#1890ff' }" class="mr-xxs" type="man" />
|
||||
<span>男</span>
|
||||
</a-radio-button>
|
||||
<a-radio-button :value="2">
|
||||
<a-icon :style="{ color: '#eb2f96' }" class="mr-xxs" type="woman" />
|
||||
<span>女</span>
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="邮箱" prop="email">
|
||||
<a-input placeholder="请输入邮箱" v-model="form.email" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="手机号" prop="phone">
|
||||
<a-input placeholder="请输入手机号" v-model="form.phone" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="电话" prop="tel">
|
||||
<a-input placeholder="请输入电话" v-model="form.tel" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="14" v-if="form.sysEmpParam">
|
||||
<h3 class="h3">员工信息</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="所属组织机构" prop="sysEmpParam.orgId">
|
||||
<a-tree-select
|
||||
:dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
|
||||
:tree-data="orgData"
|
||||
placeholder="请选择所属组织机构"
|
||||
tree-default-expand-all
|
||||
v-model="form.sysEmpParam.orgId"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="工号">
|
||||
<a-input placeholder="请输入工号" v-model="form.sysEmpParam.jobNum" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="职位信息" prop="sysEmpParam.posIdList">
|
||||
<a-select mode="multiple" placeholder="请选择职位信息" v-model="form.sysEmpParam.posIdList">
|
||||
<a-select-option
|
||||
:key="i"
|
||||
:value="item.id"
|
||||
v-for="(item, i) in posData"
|
||||
>{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
<h4 class="h4">附加信息</h4>
|
||||
<div class="pl-md pr-md">
|
||||
<a-table
|
||||
:columns="extColumns"
|
||||
:data-source="form.sysEmpParam.extIds"
|
||||
:pagination="false"
|
||||
size="small"
|
||||
>
|
||||
<template slot="footer">
|
||||
<a-button @click="onAddExtData" block icon="plus" type="dashed">新增一项</a-button>
|
||||
</template>
|
||||
<template slot="orgId" slot-scope="text, record">
|
||||
<a-tree-select
|
||||
:default-value="text"
|
||||
:dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
|
||||
:tree-data="orgData"
|
||||
@change="value => onChangeExtData(value, record, 'orgId')"
|
||||
placeholder="请选择附加组织机构"
|
||||
tree-default-expand-all
|
||||
/>
|
||||
</template>
|
||||
<template slot="posId" slot-scope="text, record">
|
||||
<a-select
|
||||
:default-value="text"
|
||||
@change="value => onChangeExtData(value, record, 'posId')"
|
||||
placeholder="请选择附加职位信息"
|
||||
>
|
||||
<a-select-option
|
||||
:key="i"
|
||||
:value="item.id"
|
||||
v-for="(item, i) in posData"
|
||||
>{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<template slot="action" slot-scope="text, record">
|
||||
<a-button @click="onRemoveExtData(record)" size="small" type="danger">删除</a-button>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
const validateToNextPassword = (rule, value, callback) => {
|
||||
callback();
|
||||
};
|
||||
const compareToFirstPassword = (rule, value, callback) => {
|
||||
callback();
|
||||
};
|
||||
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
sex: 0,
|
||||
sysEmpParam: {},
|
||||
};
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'edit',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
account: [{ required: true, min: 5, message: '请输入至少五个字符的账号', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||||
password: [
|
||||
{ required: true, min: 5, message: '请输入至少五个字符的密码', trigger: 'blur' },
|
||||
{ validator: validateToNextPassword, trigger: 'blur' },
|
||||
],
|
||||
confirm: [
|
||||
{ required: true, message: '请确认密码', trigger: 'blur' },
|
||||
{ validator: compareToFirstPassword, trigger: 'blur' },
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
pattern: /^((13[0-9])|(14[5,7])|(15[^4,\\D])|(17[0,1,3,6-8])|(18[0-9])|(19[8,9])|(166))[0-9]{8}$/,
|
||||
message: '手机号格式不正确',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
email: [
|
||||
{ pattern: /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/, message: '邮箱格式不正确', trigger: 'blur' },
|
||||
],
|
||||
'sysEmpParam.orgId': [{ required: true, message: '请选择所属组织机构' }],
|
||||
'sysEmpParam.posIdList': [{ required: true, message: '请选择职位信息' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
orgData: [],
|
||||
posData: [],
|
||||
|
||||
extColumns: [
|
||||
{
|
||||
title: '附属机构',
|
||||
dataIndex: 'orgId',
|
||||
width: '45%',
|
||||
scopedSlots: { customRender: 'orgId' },
|
||||
},
|
||||
{
|
||||
title: '附属岗位',
|
||||
dataIndex: 'posId',
|
||||
width: '45%',
|
||||
scopedSlots: { customRender: 'posId' },
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: '70px',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
const form = this.$_.cloneDeep(params.record || {});
|
||||
// 日期特殊处理
|
||||
if (form.birthday) {
|
||||
form.birthday = this.$moment(form.birthday).format('YYYY-MM-DD');
|
||||
}
|
||||
// 提交的时候是"param",而获取下来却是"info",在这里转换一下
|
||||
if (form.sysEmpInfo) {
|
||||
form.sysEmpParam = form.sysEmpInfo;
|
||||
delete form.sysEmpInfo;
|
||||
} else if (!form.sysEmpParam) {
|
||||
form.sysEmpParam = {
|
||||
extIds: [],
|
||||
};
|
||||
}
|
||||
// 转换职位信息列表
|
||||
if (form.sysEmpParam.positions) {
|
||||
form.sysEmpParam.posIdList = form.sysEmpParam.positions.map((p) => p.posId);
|
||||
}
|
||||
// 附加信息
|
||||
if (form.sysEmpParam.extOrgPos) {
|
||||
form.sysEmpParam.extIds = form.sysEmpParam.extOrgPos.map((p, i) => {
|
||||
return {
|
||||
key: i,
|
||||
orgId: p.orgId,
|
||||
posId: p.posId,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
if (params.orgId) {
|
||||
form.sysEmpParam.orgId = orgId;
|
||||
}
|
||||
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...form,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
this.form = {
|
||||
...defaultForm,
|
||||
};
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.orgData = await this.onLoadOrgData();
|
||||
this.posData = await this.onLoadPosData();
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
|
||||
onLoadOrgData() {
|
||||
return this.$api.getOrgTree().then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
|
||||
onLoadPosData() {
|
||||
return this.$api.sysPosList().then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
|
||||
onAddExtData() {
|
||||
this.form.sysEmpParam.extIds.push({
|
||||
key: this.form.sysEmpParam.extIds.length,
|
||||
orgId: undefined,
|
||||
posId: undefined,
|
||||
});
|
||||
},
|
||||
|
||||
onRemoveExtData(record) {
|
||||
const ext = this.form.sysEmpParam.extIds,
|
||||
remove = ext.find((p) => p.key === record.key),
|
||||
index = ext.indexOf(remove);
|
||||
|
||||
ext.splice(index, 1);
|
||||
},
|
||||
|
||||
onChangeExtData(value, record, type) {
|
||||
record[type] = value;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,384 +1,384 @@
|
||||
<template>
|
||||
<!--
|
||||
普通树查询表格
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<yo-tree-layout
|
||||
:load-data="loadTreeData"
|
||||
@select="onSelect"
|
||||
default-expanded-keys
|
||||
ref="tree-layout"
|
||||
>
|
||||
<container>
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysUser:page">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" @submit.native.prevent layout="inline">
|
||||
<a-form-model-item label="关键词">
|
||||
<a-input allow-clear placeholder="请输入姓名、账号、手机号" v-model="query.searchValue" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="状态">
|
||||
<a-select
|
||||
:style="{ width: '170px' }"
|
||||
allow-clear
|
||||
placeholder="请选择状态"
|
||||
v-model="query.searchStatus"
|
||||
>
|
||||
<a-select-option
|
||||
:key="i"
|
||||
:value="item.code"
|
||||
v-for="(item, i) in codes.common_status"
|
||||
>{{ item.value }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button-group>
|
||||
<a-button @click="onQuery" html-type="submit" type="primary">查询</a-button>
|
||||
<a-button @click="onReset">重置</a-button>
|
||||
</a-button-group>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</Auth>
|
||||
|
||||
<yo-list :load-data="loadData" item-layout="horizontal" ref="list" size="large">
|
||||
<Auth auth="sysUser:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增用户</a-button>
|
||||
</Auth>
|
||||
<a-list-item key="record.id" slot="renderItem" slot-scope="record">
|
||||
<Auth auth="sysUser:edit" slot="actions">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysUser:delete" slot="actions">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
<Auth :auth="{ sysUser: [['grantRole'], ['grantData']] }" slot="actions">
|
||||
<a-dropdown placement="bottomRight">
|
||||
<a class="ant-dropdown-link">
|
||||
授权
|
||||
<a-icon type="down" />
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<Auth auth="sysUser:grantRole">
|
||||
<a-menu-item>
|
||||
<a @click="onOpen('role-form', record)">授权角色</a>
|
||||
</a-menu-item>
|
||||
</Auth>
|
||||
<Auth auth="sysUser:grantData">
|
||||
<a-menu-item>
|
||||
<a @click="onOpen('data-form', record)">授权额外数据</a>
|
||||
</a-menu-item>
|
||||
</Auth>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</Auth>
|
||||
<a-list-item-meta>
|
||||
<div slot="title">{{ record.nickName || record.name }}</div>
|
||||
<div slot="description">{{ record.account }}</div>
|
||||
<yo-image
|
||||
:id="record.avatar"
|
||||
:size="48"
|
||||
icon="user"
|
||||
shape="square"
|
||||
slot="avatar"
|
||||
type="avatar"
|
||||
/>
|
||||
</a-list-item-meta>
|
||||
<div class="yo-list-content--h">
|
||||
<div class="yo-list-content--h--item">
|
||||
<span>性别</span>
|
||||
<p>{{ bindCodeValue(record.sex, 'sex') }}</p>
|
||||
</div>
|
||||
<div class="yo-list-content--h--item">
|
||||
<span>手机</span>
|
||||
<p>{{ record.phone || '未设置' }}</p>
|
||||
</div>
|
||||
<div class="yo-list-content--h--item">
|
||||
<span>邮箱</span>
|
||||
<p>{{ record.email || '未设置' }}</p>
|
||||
</div>
|
||||
<Auth auth="sysUser:changeStatus">
|
||||
<div class="yo-list-content--h--item text-center">
|
||||
<a-switch
|
||||
:checked="!record.status"
|
||||
:checked-children="bindCodeValue(0, 'common_status')"
|
||||
:loading="record.statusChanging"
|
||||
:un-checked-children="bindCodeValue(1, 'common_status')"
|
||||
@change="(checked) => onSetUserStatus(record, checked)"
|
||||
/>
|
||||
</div>
|
||||
</Auth>
|
||||
</div>
|
||||
</a-list-item>
|
||||
</yo-list>
|
||||
</a-card>
|
||||
</container>
|
||||
|
||||
<!-- 新增表单 -->
|
||||
<yo-modal-form
|
||||
:action="$api[api.add]"
|
||||
:title="'新增' + name"
|
||||
:width="1024"
|
||||
@ok="onReloadData"
|
||||
ref="add-form"
|
||||
>
|
||||
<form-body mode="add" />
|
||||
</yo-modal-form>
|
||||
|
||||
<!-- 编辑表单 -->
|
||||
<yo-modal-form
|
||||
:action="$api[api.edit]"
|
||||
:title="'编辑' + name"
|
||||
:width="1024"
|
||||
@ok="onReloadData"
|
||||
ref="edit-form"
|
||||
>
|
||||
<form-body mode="edit" />
|
||||
</yo-modal-form>
|
||||
|
||||
<role-form @ok="onReloadData" ref="role-form" />
|
||||
<data-form @ok="onReloadData" ref="data-form" />
|
||||
</yo-tree-layout>
|
||||
</template>
|
||||
<script>
|
||||
/* 需要引用YoTreeLayout组件 */
|
||||
import YoTreeLayout from '@/components/yoTreeLayout';
|
||||
import YoList from '@/components/yoList';
|
||||
import FormBody from './form';
|
||||
|
||||
import RoleForm from './roleForm';
|
||||
import DataForm from './dataForm';
|
||||
|
||||
/* 在此管理整个页面需要的接口名称 */
|
||||
const api = {
|
||||
tree: 'getOrgTree',
|
||||
page: 'getUserPage',
|
||||
add: 'sysUserAdd',
|
||||
edit: 'sysUserEdit',
|
||||
delete: 'sysUserDelete',
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
YoTreeLayout,
|
||||
YoList,
|
||||
FormBody,
|
||||
RoleForm,
|
||||
DataForm,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
api,
|
||||
|
||||
name: '用户',
|
||||
|
||||
/* 查询条件 */
|
||||
query: {},
|
||||
|
||||
/* 表格字段 */
|
||||
columns: [],
|
||||
|
||||
/* 字典编码储存格式 */
|
||||
codes: {
|
||||
sex: [],
|
||||
common_status: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
|
||||
/** 根据权限添加操作列 */
|
||||
const flag = this.$auth({
|
||||
sysUser: [['edit'], ['delete'], ['grantRole'], ['grantData']],
|
||||
});
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 树形选择界面必要的方法
|
||||
* 传给yo-table-layout以示意数据接口
|
||||
*/
|
||||
loadTreeData() {
|
||||
return this.$api[api.tree]().then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 树形选择界面必要的方法
|
||||
* 选择树节点事件
|
||||
*/
|
||||
onSelect([id]) {
|
||||
/** 在选择事件中可以对右侧表格添加父节点id的查询条件 */
|
||||
this.query = {
|
||||
'sysEmpParam.orgId': id,
|
||||
};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api[api.page]({
|
||||
...params,
|
||||
...this.query,
|
||||
}).then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.list.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReset() {
|
||||
/* 与普通查询页不同的是,这里的父节点参数不应该在重置后被清空 */
|
||||
Object.keys(this.query).forEach((p) => {
|
||||
if (p !== 'pid') {
|
||||
this.query[p] = undefined;
|
||||
}
|
||||
});
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.list.onReloadData();
|
||||
this.$refs['tree-layout'].onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'sex' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'common_status' }),
|
||||
/* ... */
|
||||
])
|
||||
.then(([code1, code2]) => {
|
||||
this.codes.sex = code1.data;
|
||||
this.codes.common_status = code2.data;
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen({
|
||||
record,
|
||||
orgId: this.query['sysEmpParam.orgId'],
|
||||
/* 按需添加其他参数 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
|
||||
*/
|
||||
onResult(success, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.list.onLoading();
|
||||
this.$api[api.delete](record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.list.onLoaded();
|
||||
});
|
||||
},
|
||||
|
||||
onSetUserStatus(record, checked) {
|
||||
this.$set(record, 'statusChanging', true);
|
||||
this.$api
|
||||
.sysUserChangeStatus({
|
||||
id: record.id,
|
||||
status: +!checked,
|
||||
})
|
||||
.then(({ success, message }) => {
|
||||
if (success) {
|
||||
this.$message.success('操作成功');
|
||||
this.onReloadData();
|
||||
} else {
|
||||
this.$message.error(message);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
record.statusChanging = false;
|
||||
});
|
||||
},
|
||||
|
||||
onResetPassword(record) {
|
||||
this.$api
|
||||
.sysUserResetPwd({
|
||||
id: record.id,
|
||||
})
|
||||
.then(({ success, message }) => {
|
||||
if (success) {
|
||||
this.$message.success('重置成功');
|
||||
} else {
|
||||
this.$message.error(message);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<!--
|
||||
普通树查询表格
|
||||
v 1.2
|
||||
2021-04-30
|
||||
Lufthafen
|
||||
-->
|
||||
<yo-tree-layout
|
||||
:load-data="loadTreeData"
|
||||
@select="onSelect"
|
||||
default-expanded-keys
|
||||
ref="tree-layout"
|
||||
>
|
||||
<container>
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysUser:page">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" @submit.native.prevent layout="inline">
|
||||
<a-form-model-item label="关键词">
|
||||
<a-input allow-clear placeholder="请输入姓名、账号、手机号" v-model="query.searchValue" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="状态">
|
||||
<a-select
|
||||
:style="{ width: '170px' }"
|
||||
allow-clear
|
||||
placeholder="请选择状态"
|
||||
v-model="query.searchStatus"
|
||||
>
|
||||
<a-select-option
|
||||
:key="i"
|
||||
:value="item.code"
|
||||
v-for="(item, i) in codes.common_status"
|
||||
>{{ item.value }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button-group>
|
||||
<a-button @click="onQuery" html-type="submit" type="primary">查询</a-button>
|
||||
<a-button @click="onReset">重置</a-button>
|
||||
</a-button-group>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</Auth>
|
||||
|
||||
<yo-list :load-data="loadData" item-layout="horizontal" ref="list" size="large">
|
||||
<Auth auth="sysUser:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增用户</a-button>
|
||||
</Auth>
|
||||
<a-list-item key="record.id" slot="renderItem" slot-scope="record">
|
||||
<Auth auth="sysUser:edit" slot="actions">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysUser:delete" slot="actions">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
<Auth :auth="{ sysUser: [['grantRole'], ['grantData']] }" slot="actions">
|
||||
<a-dropdown placement="bottomRight">
|
||||
<a class="ant-dropdown-link">
|
||||
授权
|
||||
<a-icon type="down" />
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<Auth auth="sysUser:grantRole">
|
||||
<a-menu-item>
|
||||
<a @click="onOpen('role-form', record)">授权角色</a>
|
||||
</a-menu-item>
|
||||
</Auth>
|
||||
<Auth auth="sysUser:grantData">
|
||||
<a-menu-item>
|
||||
<a @click="onOpen('data-form', record)">授权额外数据</a>
|
||||
</a-menu-item>
|
||||
</Auth>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</Auth>
|
||||
<a-list-item-meta>
|
||||
<div slot="title">{{ record.nickName || record.name }}</div>
|
||||
<div slot="description">{{ record.account }}</div>
|
||||
<yo-image
|
||||
:id="record.avatar"
|
||||
:size="48"
|
||||
icon="user"
|
||||
shape="square"
|
||||
slot="avatar"
|
||||
type="avatar"
|
||||
/>
|
||||
</a-list-item-meta>
|
||||
<div class="yo-list-content--h">
|
||||
<div class="yo-list-content--h--item">
|
||||
<span>性别</span>
|
||||
<p>{{ bindCodeValue(record.sex, 'sex') }}</p>
|
||||
</div>
|
||||
<div class="yo-list-content--h--item">
|
||||
<span>手机</span>
|
||||
<p>{{ record.phone || '未设置' }}</p>
|
||||
</div>
|
||||
<div class="yo-list-content--h--item">
|
||||
<span>邮箱</span>
|
||||
<p>{{ record.email || '未设置' }}</p>
|
||||
</div>
|
||||
<Auth auth="sysUser:changeStatus">
|
||||
<div class="yo-list-content--h--item text-center">
|
||||
<a-switch
|
||||
:checked="!record.status"
|
||||
:checked-children="bindCodeValue(0, 'common_status')"
|
||||
:loading="record.statusChanging"
|
||||
:un-checked-children="bindCodeValue(1, 'common_status')"
|
||||
@change="(checked) => onSetUserStatus(record, checked)"
|
||||
/>
|
||||
</div>
|
||||
</Auth>
|
||||
</div>
|
||||
</a-list-item>
|
||||
</yo-list>
|
||||
</a-card>
|
||||
</container>
|
||||
|
||||
<!-- 新增表单 -->
|
||||
<yo-modal-form
|
||||
:action="$api[api.add]"
|
||||
:title="'新增' + name"
|
||||
:width="1024"
|
||||
@ok="onReloadData"
|
||||
ref="add-form"
|
||||
>
|
||||
<form-body mode="add" />
|
||||
</yo-modal-form>
|
||||
|
||||
<!-- 编辑表单 -->
|
||||
<yo-modal-form
|
||||
:action="$api[api.edit]"
|
||||
:title="'编辑' + name"
|
||||
:width="1024"
|
||||
@ok="onReloadData"
|
||||
ref="edit-form"
|
||||
>
|
||||
<form-body mode="edit" />
|
||||
</yo-modal-form>
|
||||
|
||||
<role-form @ok="onReloadData" ref="role-form" />
|
||||
<data-form @ok="onReloadData" ref="data-form" />
|
||||
</yo-tree-layout>
|
||||
</template>
|
||||
<script>
|
||||
/* 需要引用YoTreeLayout组件 */
|
||||
import YoTreeLayout from '@/components/yoTreeLayout';
|
||||
import YoList from '@/components/yoList';
|
||||
import FormBody from './form';
|
||||
|
||||
import RoleForm from './roleForm';
|
||||
import DataForm from './dataForm';
|
||||
|
||||
/* 在此管理整个页面需要的接口名称 */
|
||||
const api = {
|
||||
tree: 'getOrgTree',
|
||||
page: 'getUserPage',
|
||||
add: 'sysUserAdd',
|
||||
edit: 'sysUserEdit',
|
||||
delete: 'sysUserDelete',
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
YoTreeLayout,
|
||||
YoList,
|
||||
FormBody,
|
||||
RoleForm,
|
||||
DataForm,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
api,
|
||||
|
||||
name: '用户',
|
||||
|
||||
/* 查询条件 */
|
||||
query: {},
|
||||
|
||||
/* 表格字段 */
|
||||
columns: [],
|
||||
|
||||
/* 字典编码储存格式 */
|
||||
codes: {
|
||||
sex: [],
|
||||
common_status: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
|
||||
/** 根据权限添加操作列 */
|
||||
const flag = this.$auth({
|
||||
sysUser: [['edit'], ['delete'], ['grantRole'], ['grantData']],
|
||||
});
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 树形选择界面必要的方法
|
||||
* 传给yo-table-layout以示意数据接口
|
||||
*/
|
||||
loadTreeData() {
|
||||
return this.$api[api.tree]().then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 树形选择界面必要的方法
|
||||
* 选择树节点事件
|
||||
*/
|
||||
onSelect([id]) {
|
||||
/** 在选择事件中可以对右侧表格添加父节点id的查询条件 */
|
||||
this.query = {
|
||||
'sysEmpParam.orgId': id,
|
||||
};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api[api.page]({
|
||||
...params,
|
||||
...this.query,
|
||||
}).then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.list.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReset() {
|
||||
/* 与普通查询页不同的是,这里的父节点参数不应该在重置后被清空 */
|
||||
Object.keys(this.query).forEach((p) => {
|
||||
if (p !== 'pid') {
|
||||
this.query[p] = undefined;
|
||||
}
|
||||
});
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.list.onReloadData();
|
||||
this.$refs['tree-layout'].onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'sex' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'common_status' }),
|
||||
/* ... */
|
||||
])
|
||||
.then(([code1, code2]) => {
|
||||
this.codes.sex = code1.data;
|
||||
this.codes.common_status = code2.data;
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen({
|
||||
record,
|
||||
orgId: this.query['sysEmpParam.orgId'],
|
||||
/* 按需添加其他参数 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
|
||||
*/
|
||||
onResult(success, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.list.onLoading();
|
||||
this.$api[api.delete](record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.list.onLoaded();
|
||||
});
|
||||
},
|
||||
|
||||
onSetUserStatus(record, checked) {
|
||||
this.$set(record, 'statusChanging', true);
|
||||
this.$api
|
||||
.sysUserChangeStatus({
|
||||
id: record.id,
|
||||
status: +!checked,
|
||||
})
|
||||
.then(({ success, message }) => {
|
||||
if (success) {
|
||||
this.$message.success('操作成功');
|
||||
this.onReloadData();
|
||||
} else {
|
||||
this.$message.error(message);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
record.statusChanging = false;
|
||||
});
|
||||
},
|
||||
|
||||
onResetPassword(record) {
|
||||
this.$api
|
||||
.sysUserResetPwd({
|
||||
id: record.id,
|
||||
})
|
||||
.then(({ success, message }) => {
|
||||
if (success) {
|
||||
this.$message.success('重置成功');
|
||||
} else {
|
||||
this.$message.error(message);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user