This commit is contained in:
ky_sunl
0
Web/src/pages/css/app.css
Normal file
0
Web/src/pages/css/app.css
Normal file
3
Web/src/pages/doc/use.vue
Normal file
3
Web/src/pages/doc/use.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
7
Web/src/pages/form/normal.vue
Normal file
7
Web/src/pages/form/normal.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<container>
|
||||
<a-row :gutter="16">
|
||||
<a-col></a-col>
|
||||
</a-row>
|
||||
</container>
|
||||
</template>
|
||||
79
Web/src/pages/form/yo.vue
Normal file
79
Web/src/pages/form/yo.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
|
||||
<a-form-model class="yo-form yo-form--fixed">
|
||||
<h3>输入框</h3>
|
||||
<Input />
|
||||
<h3>数字输入框</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="数字输入框">
|
||||
<span slot="help">
|
||||
<a-tag color="pink">a-input-number</a-tag>可以输入和选择数字
|
||||
</span>
|
||||
<a-input-number autocomplete="off" placeholder="请输入数字" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
<h3>文本域</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="文本域">
|
||||
<a-textarea autocomplete="off" placeholder="请输入文字" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
<h3>提及</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="提及">
|
||||
<a-mentions placeholder="请输入'@'进行提及">
|
||||
<a-mentions-option value="史莱姆">史莱姆</a-mentions-option>
|
||||
<a-mentions-option value="哥布林">哥布林</a-mentions-option>
|
||||
<a-mentions-option value="牛头人">牛头人</a-mentions-option>
|
||||
</a-mentions>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
<h3>单选框</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="单选框">
|
||||
<span slot="help">
|
||||
<a-tag color="pink">a-radio-group > a-radio</a-tag>横排的单选框。请注意，因为控件区域宽度的限制，在这里无法使用单选框按钮
|
||||
</span>
|
||||
<a-radio-group>
|
||||
<a-radio value="1">攻击</a-radio>
|
||||
<a-radio value="2">防御</a-radio>
|
||||
<a-radio value="3">剑技</a-radio>
|
||||
<a-radio value="4">魔法</a-radio>
|
||||
<a-radio value="5">回复</a-radio>
|
||||
<a-radio value="6">虐杀</a-radio>
|
||||
<a-radio value="7">踩在脚下</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item class="yo-form--vertical yo-form--vertical-radio" label="垂直单选框">
|
||||
<span slot="help">
|
||||
垂直单选框，需要在垂直布局控件的基础上，添加类
|
||||
<a-tag color="pink">.yo-form--vertical-radio</a-tag>
|
||||
</span>
|
||||
<a-radio-group>
|
||||
<a-radio value="1">攻击</a-radio>
|
||||
<a-radio value="2">防御</a-radio>
|
||||
<a-radio value="3">剑技</a-radio>
|
||||
<a-radio value="4">魔法</a-radio>
|
||||
<a-radio value="5">回复</a-radio>
|
||||
<a-radio value="6">虐杀</a-radio>
|
||||
<a-radio value="7">踩在脚下</a-radio>
|
||||
<a-radio value="8">
|
||||
<a-input />
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-form-model>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import Input from './yo/Input';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Input,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
63
Web/src/pages/form/yo/Input.vue
Normal file
63
Web/src/pages/form/yo/Input.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="输入框">
|
||||
<a-input autocomplete="off" placeholder="请输入文字" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="只读输入框">
|
||||
<a-input autocomplete="off" placeholder="请输入文字" readonly />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="前缀和后缀">
|
||||
<a-input addon-after="后缀" addon-before="前缀" autocomplete="off" placeholder="请输入文字" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="输入框组">
|
||||
<a-input-group compact>
|
||||
<a-input style="width: 40%" />
|
||||
<a-input style="width: 60%" />
|
||||
</a-input-group>
|
||||
<a-input-group>
|
||||
<a-row :gutter="8">
|
||||
<a-col :span="10">
|
||||
<a-input />
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<a-input />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-input-group>
|
||||
<a-input-group>
|
||||
<a-row type="flex">
|
||||
<a-col flex="120px">
|
||||
<a-select default-value="Zhejiang">
|
||||
<a-select-option value="Zhejiang">Zhejiang</a-select-option>
|
||||
<a-select-option value="Jiangsu">Jiangsu</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col flex="auto">
|
||||
<a-input default-value="Xihu District, Hangzhou" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-input-group>
|
||||
<a-input-group compact>
|
||||
<a-select default-value="1">
|
||||
<a-select-option value="1">Between</a-select-option>
|
||||
<a-select-option value="2">Except</a-select-option>
|
||||
</a-select>
|
||||
<a-input placeholder="Minimum" style=" width: 100px; text-align: center" />
|
||||
<a-input
|
||||
disabled
|
||||
placeholder="~"
|
||||
style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: transparent"
|
||||
/>
|
||||
<a-input placeholder="Maximum" style=" width: 100px; text-align: center; border-left: 0" />
|
||||
</a-input-group>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item class="yo-form--vertical" label="上下布局">
|
||||
<span slot="help">
|
||||
上下布局，请在
|
||||
<a-tag color="pink">a-form-model-item</a-tag>上添加类
|
||||
<a-tag color="pink">.yo-form--vertical</a-tag>
|
||||
</span>
|
||||
<a-input autocomplete="off" placeholder="请输入文字" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</template>
|
||||
104
Web/src/pages/home/charts.vue
Normal file
104
Web/src/pages/home/charts.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<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);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
38
Web/src/pages/home/index.less
Normal file
38
Web/src/pages/home/index.less
Normal file
@@ -0,0 +1,38 @@
|
||||
@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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
65
Web/src/pages/home/index.vue
Normal file
65
Web/src/pages/home/index.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="home-header">
|
||||
<container>
|
||||
<a-row align="middle" justify="space-between" type="flex">
|
||||
<a-col>
|
||||
<div class="home-header-row">
|
||||
<div class="home-header-avatar">
|
||||
<a-avatar
|
||||
:size="64"
|
||||
src="https://gss0.baidu.com/7Ls0a8Sm2Q5IlBGlnYG/sys/portraith/item/tb.1.9f0e4392.Q2njD2SGV-9wBUKqKFoQqA?t=1507123743"
|
||||
/>
|
||||
</div>
|
||||
<div class="home-header-content">
|
||||
<h2>
|
||||
上午好，
|
||||
<span>软件开发人员</span>，欢迎您登录系统！
|
||||
</h2>
|
||||
<p>上次IP：115.217.160.156 上次登录时间：2021-04-06 13:10:13</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>
|
||||
99
Web/src/pages/home/list.vue
Normal file
99
Web/src/pages/home/list.vue
Normal file
@@ -0,0 +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;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
30
Web/src/pages/home/notice.vue
Normal file
30
Web/src/pages/home/notice.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<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>
|
||||
import moment from 'moment';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{ title: '关于2020年度房屋征收评估机构信用考核情况的通报' },
|
||||
{ title: '关于2020年度房屋征收评估机构信用考核情况的通报' },
|
||||
{ title: '关于2020年度房屋征收评估机构信用考核情况的通报' },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
moment,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
56
Web/src/pages/home/statistics.vue
Normal file
56
Web/src/pages/home/statistics.vue
Normal file
@@ -0,0 +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,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
56
Web/src/pages/home/task.vue
Normal file
56
Web/src/pages/home/task.vue
Normal file
@@ -0,0 +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: '江北区三官堂大桥及接线工程项目备案(成薇)' },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
146
Web/src/pages/list/query.vue
Normal file
146
Web/src/pages/list/query.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<a-form-model-item label="区域">
|
||||
<a-select :style="{ width: '100px' }" v-model="query.area">
|
||||
<a-select-option value="宁波市">宁波市</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="年份">
|
||||
<a-select :style="{ width: '100px' }" v-model="query.year">
|
||||
<a-select-option value="2020">2020</a-select-option>
|
||||
<a-select-option value="2021">2021</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button html-type="submit" type="primary">查询</a-button>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
:bordered="true"
|
||||
:columns="columns"
|
||||
:data-source="data"
|
||||
:pagination="{ pageSize: 20}"
|
||||
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
||||
>
|
||||
<div class="yo-action-bar" slot="title">
|
||||
<div class="yo-action-bar--actions">
|
||||
<a-button>Button</a-button>
|
||||
<a-button>Button</a-button>
|
||||
<a-button :disabled="true">Button</a-button>
|
||||
<a-button>Button</a-button>
|
||||
<a-button-group>
|
||||
<a-button>Button</a-button>
|
||||
<a-button>Button</a-button>
|
||||
<a-button>Button</a-button>
|
||||
</a-button-group>
|
||||
<a-dropdown>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1">1st item</a-menu-item>
|
||||
<a-menu-item key="2">2nd item</a-menu-item>
|
||||
<a-menu-item key="3">3rd item</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button>
|
||||
Actions
|
||||
<a-icon type="down" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
<a-dropdown-button>
|
||||
Dropdown
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1">
|
||||
<a-icon type="user" />1st menu item
|
||||
</a-menu-item>
|
||||
<a-menu-item key="2">
|
||||
<a-icon type="user" />2nd menu item
|
||||
</a-menu-item>
|
||||
<a-menu-item key="3">
|
||||
<a-icon type="user" />3rd item
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-table>
|
||||
</a-card>
|
||||
<br />
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
const _data = [
|
||||
{
|
||||
area: '海曙区',
|
||||
title: '曙光电影院地块',
|
||||
count: 13,
|
||||
date: '2021-01-01',
|
||||
},
|
||||
{
|
||||
area: '江北区',
|
||||
title: '大庆新村地块旧城区改建项目',
|
||||
count: 322,
|
||||
date: '2021-01-01',
|
||||
},
|
||||
{
|
||||
area: '宁海县',
|
||||
title: '桥头胡街道旧城区改造华驰文教地块',
|
||||
count: 1,
|
||||
date: '2021-01-01',
|
||||
},
|
||||
{
|
||||
area: '慈溪市',
|
||||
title: '七二三南延道路工程',
|
||||
count: 1,
|
||||
date: '2021-01-01',
|
||||
},
|
||||
{
|
||||
area: '北仑区',
|
||||
title: '原粮食局宿舍楼1号、2号楼（太河路北延工程）',
|
||||
count: 32,
|
||||
date: '2021-01-01',
|
||||
},
|
||||
];
|
||||
|
||||
const data = Object.assign([], _data, _data, _data);
|
||||
data.map((p, i) => (p.key = 'abcdefghijklmnopqrstuvwxyz'[i]));
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
query: {
|
||||
area: '宁波市',
|
||||
year: '2021',
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '区域',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'title',
|
||||
},
|
||||
{
|
||||
title: '户数',
|
||||
dataIndex: 'count',
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'date',
|
||||
},
|
||||
],
|
||||
data,
|
||||
selectedRowKeys: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSelectChange(selectedRowKeys) {
|
||||
this.selectedRowKeys = selectedRowKeys;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
5
Web/src/pages/system/_seed/README.md
Normal file
5
Web/src/pages/system/_seed/README.md
Normal file
@@ -0,0 +1,5 @@
|
||||
/**
|
||||
基本上所有列表页都可以通过拷贝此处的种子文件实现增删改查的功能
|
||||
所有带 ... 的注释是可以依据当前业务添加内容的地方
|
||||
其他所有尽量不要修改
|
||||
**/
|
||||
78
Web/src/pages/system/_seed/addForm.vue
Normal file
78
Web/src/pages/system/_seed/addForm.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
class="yo-modal-form"
|
||||
title="新增XX"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
formBody() {
|
||||
return this.$refs['form-body'];
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口
|
||||
*/
|
||||
async onOpen() {
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.formBody.onInit();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.formBody.onGetData().then((data) => {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
/** !!此处必须修改调用的接口方法 */
|
||||
.testAddApi(data)
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('新增成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.formBody.onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
78
Web/src/pages/system/_seed/editForm.vue
Normal file
78
Web/src/pages/system/_seed/editForm.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@close="onCancel"
|
||||
class="yo-modal-form"
|
||||
title="编辑XX"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
formBody() {
|
||||
return this.$refs['form-body'];
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口,并填充外部传入的数据
|
||||
*/
|
||||
onOpen(record) {
|
||||
this.visible = true;
|
||||
this.$nextTick(async () => {
|
||||
await this.formBody.onInit();
|
||||
this.formBody.onFillData(record);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.formBody.onGetData().then((data) => {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
/** !!此处必须修改调用的接口方法 */
|
||||
.testEditApi(data)
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.formBody.onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
100
Web/src/pages/system/_seed/form.vue
Normal file
100
Web/src/pages/system/_seed/form.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<div class="yo-form-group">
|
||||
<!-- 表单控件 -->
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/** ... */
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(record) {
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...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() {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/** ...BEGIN */
|
||||
/** ...END */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/** ... */
|
||||
},
|
||||
};
|
||||
</script>
|
||||
187
Web/src/pages/system/_seed/index.vue
Normal file
187
Web/src/pages/system/_seed/index.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="authCode:page">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<!-- 此处添加查询表单控件 -->
|
||||
<a-form-model-item>
|
||||
<a-button-group>
|
||||
<a-button @click="onQuery" type="primary">查询</a-button>
|
||||
<a-button @click="onResetQuery">重置</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="authCode:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增XX</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>
|
||||
<br />
|
||||
<add-form @ok="onReloadData" ref="add-form" />
|
||||
<edit-form @ok="onReloadData" ref="edit-form" />
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import AddForm from './addForm';
|
||||
import EditForm from './editForm';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddForm,
|
||||
EditForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [],
|
||||
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
|
||||
/** !!此处必须修改调用的接口方法 */
|
||||
.testGetApi({
|
||||
...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.sysDictTypeDropDownWait({ code: 'code1' }),
|
||||
this.$api.sysDictTypeDropDownWait({ 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();
|
||||
}
|
||||
this.$refs.table.onLoaded();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api
|
||||
/** !!此处必须修改调用的接口方法 */
|
||||
.testDeleteApi(record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
71
Web/src/pages/system/app/addForm.vue
Normal file
71
Web/src/pages/system/app/addForm.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
class="yo-modal-form"
|
||||
title="新增应用"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口
|
||||
*/
|
||||
onOpen() {
|
||||
this.visible = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.$refs['form-body'].onValidate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysAppAdd(this.$refs['form-body'].form)
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('新增成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
74
Web/src/pages/system/app/editForm.vue
Normal file
74
Web/src/pages/system/app/editForm.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
class="yo-modal-form"
|
||||
title="编辑应用"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口,并填充外部传入的数据
|
||||
*/
|
||||
onOpen(record) {
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs['form-body'].onFillData(record);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.$refs['form-body'].onValidate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysAppEdit(this.$refs['form-body'].form)
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
63
Web/src/pages/system/app/form.vue
Normal file
63
Web/src/pages/system/app/form.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
|
||||
<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>
|
||||
</div>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
active: 'N',
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入应用名称' }],
|
||||
code: [{ required: true, message: '请输入唯一编码' }],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(record) {
|
||||
this.form = this.$_.cloneDeep(record);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
}, 300);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
216
Web/src/pages/system/app/index.vue
Normal file
216
Web/src/pages/system/app/index.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysApp:page">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<a-form-model-item label="应用名称">
|
||||
<a-input placeholder="请输入应用名称" v-model="query.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码">
|
||||
<a-input placeholder="请输入唯一编码" v-model="query.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button-group>
|
||||
<a-button @click="onQuery" type="primary">查询</a-button>
|
||||
<a-button @click="() => { query = {}, onQuery() }">重置</a-button>
|
||||
</a-button-group>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</Auth>
|
||||
|
||||
<yo-table :columns="columns" :load-data="loadData" ref="table">
|
||||
<Auth auth="sysApp:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增应用</a-button>
|
||||
</Auth>
|
||||
<span slot="active" slot-scope="text, record">
|
||||
{{ bindCodeValue(text, 'yes_or_no') }}
|
||||
<Auth auth="sysApp:setAsDefault" v-if="record.active == 'N'">
|
||||
<yo-table-actions>
|
||||
<span></span>
|
||||
<a-popconfirm
|
||||
@confirm="onSetDefault(record)"
|
||||
placement="topRight"
|
||||
title="是否确认设置为默认应用"
|
||||
>
|
||||
<a>设为默认</a>
|
||||
</a-popconfirm>
|
||||
</yo-table-actions>
|
||||
</Auth>
|
||||
</span>
|
||||
<span slot="status" slot-scope="text">{{ bindCodeValue(text, 'common_status') }}</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<yo-table-actions>
|
||||
<Auth auth="sysApp:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysApp:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
<br />
|
||||
<add-form @ok="onReloadData" ref="add-form" />
|
||||
<edit-form @ok="onReloadData" ref="edit-form" />
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import AddForm from './addForm';
|
||||
import EditForm from './editForm';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddForm,
|
||||
EditForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '应用名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
dataIndex: 'code',
|
||||
},
|
||||
{
|
||||
title: '是否默认',
|
||||
dataIndex: 'active',
|
||||
scopedSlots: {
|
||||
customRender: 'active',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: {
|
||||
customRender: 'status',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
],
|
||||
codes: [
|
||||
{
|
||||
code: 'yes_or_no',
|
||||
values: [],
|
||||
},
|
||||
{
|
||||
code: 'common_status',
|
||||
values: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
|
||||
const flag = this.$auth({
|
||||
sysApp: [['edit'], ['delete']],
|
||||
});
|
||||
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api
|
||||
.getAppPage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载字典数据时的必要方法
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownWait({ code: 'yes_or_no' }),
|
||||
this.$api.sysDictTypeDropDownWait({ code: 'common_status' }),
|
||||
])
|
||||
.then(([yesOrNo, commonStatus]) => {
|
||||
this.codes.find((p) => p.code === 'yes_or_no').values = yesOrNo.data;
|
||||
this.codes.find((p) => p.code === 'common_status').values = commonStatus.data;
|
||||
});
|
||||
},
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes.find((p) => p.code == name).values.find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen(record);
|
||||
},
|
||||
|
||||
onResult(success, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
}
|
||||
this.$refs.table.onLoaded();
|
||||
},
|
||||
|
||||
onSetDefault(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysAppSetAsDefault({ id: record.id }).then(({ success }) => {
|
||||
this.onResult(success, '设置成功');
|
||||
});
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysAppDelete(record).then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
78
Web/src/pages/system/config/addForm.vue
Normal file
78
Web/src/pages/system/config/addForm.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
class="yo-modal-form"
|
||||
title="新增参数"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
formBody() {
|
||||
return this.$refs['form-body'];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口
|
||||
*/
|
||||
onOpen() {
|
||||
this.visible = true;
|
||||
this.$nextTick(async () => {
|
||||
await this.formBody.onInit();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.$refs['form-body'].onValidate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysConfigAdd(this.$refs['form-body'].form)
|
||||
.then(({ success }) => {
|
||||
this.confirmLoading = false;
|
||||
if (success) {
|
||||
this.$message.success('添加成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
74
Web/src/pages/system/config/editForm.vue
Normal file
74
Web/src/pages/system/config/editForm.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
title="编辑用户"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口,并填充外部传入的数据
|
||||
*/
|
||||
onOpen(record) {
|
||||
this.visible = true;
|
||||
this.$nextTick(async () => {
|
||||
this.$refs['form-body'].onFillData(record);
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.$refs['form-body'].onValidate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysConfigEdit(this.$refs['form-body'].form)
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
114
Web/src/pages/system/config/form.vue
Normal file
114
Web/src/pages/system/config/form.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
|
||||
<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" :disabled="editDisabled">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="系统参数" prop="sysFlag">
|
||||
<a-radio-group v-model="form.sysFlag" :disabled="editDisabled">
|
||||
<a-radio-button value="Y">
|
||||
<a-icon :style="{ color: '#1890ff' }" />是
|
||||
</a-radio-button>
|
||||
<a-radio-button value="N">
|
||||
<a-icon :style="{ color: '#eb2f96' }" />否
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="所属分类" prop="groupCode">
|
||||
<a-select placeholder="请选择所属分类" v-model="form.groupCode" :disabled="editDisabled">
|
||||
<a-select-option
|
||||
:key="i"
|
||||
:value="item.code"
|
||||
v-for="(item, i) in groupCode"
|
||||
>{{ item.value }}</a-select-option>
|
||||
</a-select>
|
||||
</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-form-model>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
editDisabled:false,
|
||||
groupCode:[],
|
||||
form: {
|
||||
active: "N",
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: "请输入应用名称" }],
|
||||
code: [{ required: true, message: "请输入唯一编码" }],
|
||||
sysFlag: [{ required: true, message: "请选择参数类型" }],
|
||||
groupCode: [{ required: true, message: "请选择所属分类" }],
|
||||
value: [{ required: true, message: "请输入参数值" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
moment,
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(record) {
|
||||
this.form = this.$_.cloneDeep(record);
|
||||
if(record.sysFlag == 'Y')
|
||||
{
|
||||
this.editDisabled = true
|
||||
}else
|
||||
{
|
||||
this.editDisabled = false
|
||||
}
|
||||
},
|
||||
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
this.groupCode = await this.onLoadgroupCodeData();
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* 获取所属分类字典表的内容
|
||||
*/
|
||||
|
||||
onLoadgroupCodeData() {
|
||||
return this.$api.sysDictTypeDropDown({ code: 'consts_type' }).then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.form = {};
|
||||
this.$refs.form.resetFields();
|
||||
}, 300);
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
146
Web/src/pages/system/config/index.vue
Normal file
146
Web/src/pages/system/config/index.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysConfig:page">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<a-form-model-item label="参数名称">
|
||||
<a-input placeholder="请输入参数名称" v-model="query.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码">
|
||||
<a-input placeholder="请输入唯一编码" v-model="query.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button-group>
|
||||
<a-button @click="onQuery" type="primary">查询</a-button>
|
||||
<a-button @click="() => {(query = {}), onQuery();}">重置</a-button>
|
||||
</a-button-group>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</Auth>
|
||||
<yo-table :columns="columns" :load-data="loadData" ref="table">
|
||||
<Auth auth="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>
|
||||
<br />
|
||||
<edit-form @ok="onReloadData" ref="edit-form" />
|
||||
<add-form @ok="onReloadData" ref="add-form" />
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import AddForm from './addForm';
|
||||
import editForm from './editForm';
|
||||
export default {
|
||||
components: {
|
||||
AddForm,
|
||||
editForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
dataIndex: 'code',
|
||||
},
|
||||
{
|
||||
title: '参数值',
|
||||
dataIndex: 'value',
|
||||
},
|
||||
{
|
||||
title: '所属分类',
|
||||
dataIndex: 'groupCode',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '200px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: {
|
||||
customRender: 'action',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api
|
||||
.sysConfigPage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen(record);
|
||||
},
|
||||
|
||||
onResult(success, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
}
|
||||
this.$refs.table.onLoaded();
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysConfigDelete(record).then(({ success, message }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
240
Web/src/pages/system/dict/dictdata/index.vue
Normal file
240
Web/src/pages/system/dict/dictdata/index.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
width="800px"
|
||||
class="yo-modal-form"
|
||||
title="字典值管理"
|
||||
>
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysDictType:page">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<a-form-model-item label="类型名称">
|
||||
<a-input placeholder="请输入类型名称" v-model="query.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码">
|
||||
<a-input placeholder="请输入唯一编码" v-model="query.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button-group>
|
||||
<a-button @click="onQuery" type="primary">查询</a-button>
|
||||
<a-button
|
||||
@click="
|
||||
() => {
|
||||
(query = {}), onQuery();
|
||||
}
|
||||
"
|
||||
>重置</a-button
|
||||
>
|
||||
</a-button-group>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</Auth>
|
||||
<yo-table :columns="columns" :load-data="loadData" ref="table">
|
||||
<div class="yo-action-bar" slot="title">
|
||||
<div class="yo-action-bar--actions">
|
||||
<a-button @click="onOpen('add-form')">新增类型</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="status" slot-scope="text, record">
|
||||
{{statusFilter(text)}}
|
||||
</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<yo-table-actions>
|
||||
<a @click="onLoad('data-Index', record)">字典</a>
|
||||
<Auth auth="[sysDictType:edit],[sysDictType:delete]">
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
|
||||
<a-menu slot="overlay">
|
||||
<Auth auth="sysDictType:edit">
|
||||
<a-menu-item>
|
||||
<a @click="$refs.roleMenuForm.roleMenu(record)"
|
||||
>编辑</a
|
||||
>
|
||||
</a-menu-item>
|
||||
</Auth>
|
||||
<Auth auth="sysDictType:delete">
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-popconfirm
|
||||
@confirm="onDelete(record)"
|
||||
placement="topRight"
|
||||
title="是否确认删除"
|
||||
>
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</Auth>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</Auth>
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
<br />
|
||||
<!-- <data-Index ref="data-Index" @ok="onReloadData"/> -->
|
||||
<!-- <add-form @ok="onReloadData" ref="add-form" />
|
||||
<edit-form @ok="onReloadData" ref="edit-form" />
|
||||
<role-menu-form ref="roleMenuForm" @ok="onReloadData"/>
|
||||
<role-org-form ref="roleOrgForm" @ok="onReloadData"/> -->
|
||||
</container>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
// import AddForm from './addForm';
|
||||
// import editForm from "./editForm";
|
||||
// import roleMenuForm from "./roleMenuForm";
|
||||
// import dataIndex from "./dictdata/index";
|
||||
export default {
|
||||
components: {
|
||||
// dataIndex
|
||||
// AddForm,
|
||||
// editForm,
|
||||
// roleMenuForm,
|
||||
// roleOrgForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: "类型名称",
|
||||
dataIndex: "name",
|
||||
},
|
||||
{
|
||||
title: "唯一编码",
|
||||
dataIndex: "code",
|
||||
},
|
||||
{
|
||||
title: "排序",
|
||||
dataIndex: "sort",
|
||||
},
|
||||
{
|
||||
title: "备注",
|
||||
dataIndex: "remark",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
dataIndex: "status",
|
||||
scopedSlots: { customRender: "status" },
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
width: "150px",
|
||||
dataIndex: "action",
|
||||
scopedSlots: { customRender: "action" },
|
||||
},
|
||||
],
|
||||
visible:false,
|
||||
|
||||
statusDict: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
},
|
||||
methods: {
|
||||
statusFilter(status) {
|
||||
// eslint-disable-next-line eqeqeq
|
||||
const values = this.statusDict.filter((item) => item.code == status);
|
||||
if (values.length > 0) {
|
||||
return values[0].value;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api
|
||||
.sysDictDataPage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
this.visible = true;
|
||||
console.log(params)
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载字典数据时的必要方法
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api
|
||||
.$queue([this.$api.sysDictTypeDropDownWait({ code: "common_status" })])
|
||||
.then((res) => {
|
||||
this.statusDict = res[0].data;
|
||||
});
|
||||
},
|
||||
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes
|
||||
.find((p) => p.code == name)
|
||||
.values.find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen(record);
|
||||
},
|
||||
|
||||
onLoad(formName,record){
|
||||
this.$refs[formName].loadData(record);
|
||||
},
|
||||
onResult(success, message, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
} else {
|
||||
this.$refs.table.onLoaded();
|
||||
this.$message.error(message);
|
||||
}
|
||||
},
|
||||
|
||||
onSetDefault(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api
|
||||
.sysAppSetAsDefault({ id: record.id })
|
||||
.then(({ success, message }) => {
|
||||
this.onResult(success, message, "设置成功");
|
||||
});
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysDictTypeDelete(record).then(({ success, message }) => {
|
||||
this.onResult(success, message, "删除成功");
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
231
Web/src/pages/system/dict/index.vue
Normal file
231
Web/src/pages/system/dict/index.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysDictType:page">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<a-form-model-item label="类型名称">
|
||||
<a-input placeholder="请输入类型名称" v-model="query.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码">
|
||||
<a-input placeholder="请输入唯一编码" v-model="query.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button-group>
|
||||
<a-button @click="onQuery" type="primary">查询</a-button>
|
||||
<a-button
|
||||
@click="
|
||||
() => {
|
||||
(query = {}), onQuery();
|
||||
}
|
||||
"
|
||||
>重置</a-button
|
||||
>
|
||||
</a-button-group>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</Auth>
|
||||
<yo-table :columns="columns" :load-data="loadData" ref="table">
|
||||
<div class="yo-action-bar" slot="title">
|
||||
<div class="yo-action-bar--actions">
|
||||
<a-button @click="onOpen('add-form')">新增类型</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="status" slot-scope="text, record">
|
||||
{{statusFilter(text)}}
|
||||
</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<yo-table-actions>
|
||||
<a @click="onLoad('data-Index', record)">字典</a>
|
||||
<Auth auth="[sysDictType:edit],[sysDictType:delete]">
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
|
||||
<a-menu slot="overlay">
|
||||
<Auth auth="sysDictType:edit">
|
||||
<a-menu-item>
|
||||
<a @click="$refs.roleMenuForm.roleMenu(record)"
|
||||
>编辑</a
|
||||
>
|
||||
</a-menu-item>
|
||||
</Auth>
|
||||
<Auth auth="sysDictType:delete">
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-popconfirm
|
||||
@confirm="onDelete(record)"
|
||||
placement="topRight"
|
||||
title="是否确认删除"
|
||||
>
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</Auth>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</Auth>
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
<br />
|
||||
<data-Index ref="data-Index" @ok="onReloadData"/>
|
||||
<!-- <add-form @ok="onReloadData" ref="add-form" />
|
||||
<edit-form @ok="onReloadData" ref="edit-form" />
|
||||
<role-menu-form ref="roleMenuForm" @ok="onReloadData"/>
|
||||
<role-org-form ref="roleOrgForm" @ok="onReloadData"/> -->
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
// import AddForm from './addForm';
|
||||
// import editForm from "./editForm";
|
||||
// import roleMenuForm from "./roleMenuForm";
|
||||
import dataIndex from "./dictdata/index";
|
||||
export default {
|
||||
components: {
|
||||
dataIndex
|
||||
// AddForm,
|
||||
// editForm,
|
||||
// roleMenuForm,
|
||||
// roleOrgForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: "类型名称",
|
||||
dataIndex: "name",
|
||||
},
|
||||
{
|
||||
title: "唯一编码",
|
||||
dataIndex: "code",
|
||||
},
|
||||
{
|
||||
title: "排序",
|
||||
dataIndex: "sort",
|
||||
},
|
||||
{
|
||||
title: "备注",
|
||||
dataIndex: "remark",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
dataIndex: "status",
|
||||
scopedSlots: { customRender: "status" },
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
width: "150px",
|
||||
dataIndex: "action",
|
||||
scopedSlots: { customRender: "action" },
|
||||
},
|
||||
],
|
||||
statusDict: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
},
|
||||
methods: {
|
||||
statusFilter(status) {
|
||||
// eslint-disable-next-line eqeqeq
|
||||
const values = this.statusDict.filter((item) => item.code == status);
|
||||
if (values.length > 0) {
|
||||
return values[0].value;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api
|
||||
.sysDictTypePage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(params)
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载字典数据时的必要方法
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api
|
||||
.$queue([this.$api.sysDictTypeDropDownWait({ code: "common_status" })])
|
||||
.then((res) => {
|
||||
this.statusDict = res[0].data;
|
||||
});
|
||||
},
|
||||
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes
|
||||
.find((p) => p.code == name)
|
||||
.values.find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen(record);
|
||||
},
|
||||
|
||||
onLoad(formName,record){
|
||||
this.$refs[formName].loadData(record);
|
||||
},
|
||||
onResult(success, message, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
} else {
|
||||
this.$refs.table.onLoaded();
|
||||
this.$message.error(message);
|
||||
}
|
||||
},
|
||||
|
||||
onSetDefault(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api
|
||||
.sysAppSetAsDefault({ id: record.id })
|
||||
.then(({ success, message }) => {
|
||||
this.onResult(success, message, "设置成功");
|
||||
});
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysDictTypeDelete(record).then(({ success, message }) => {
|
||||
this.onResult(success, message, "删除成功");
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
72
Web/src/pages/system/log/oplog/detailsForm.vue
Normal file
72
Web/src/pages/system/log/oplog/detailsForm.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
:width="1024"
|
||||
@ok="onOk"
|
||||
:footer="false"
|
||||
title="日志详情"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口
|
||||
*/
|
||||
onOpen(record) {
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs['form-body'].onFillData(record);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
// this.$refs['form-body'].onValidate((valid) => {
|
||||
// if (valid) {
|
||||
// this.confirmLoading = true;
|
||||
// this.$api.sysRoleAdd(this.$refs['form-body'].form).then(({ success, message }) => {
|
||||
// this.confirmLoading = false;
|
||||
// if (success) {
|
||||
// this.$message.success('编辑成功');
|
||||
// this.onCancel();
|
||||
// this.$emit('ok');
|
||||
// } else {
|
||||
// this.$message.error(message);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
105
Web/src/pages/system/log/oplog/form.vue
Normal file
105
Web/src/pages/system/log/oplog/form.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<a-form-model :model="form" class="yo-form" ref="form">
|
||||
<a-descriptions bordered>
|
||||
<a-descriptions-item label="方法名称" :span="1">
|
||||
{{form.methodName}}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="地址" :span="2">
|
||||
{{form.location}}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="浏览器">
|
||||
{{form.browser}}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="操作系统" :span="2">
|
||||
{{form.os}}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="类名称" :span="3">
|
||||
{{form.className}}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="返回结果" :span="3">
|
||||
{{form.result}}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="请求参数" :span="3">
|
||||
{{form.param}}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="具体消息" :span="3">
|
||||
{{form.message}}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-form-model>
|
||||
<!-- <a-form-model :model="form" class="yo-form" ref="form">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="10">
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="方法名称" prop="methodName">
|
||||
<a-input v-model="form.methodName" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="地址" prop="location">
|
||||
<a-input v-model="form.location" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="类名称" prop="className">
|
||||
<a-textarea :rows="4" v-model="form.className" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="返回结果" prop="result">
|
||||
<a-textarea :rows="4" v-model="form.result" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="浏览器" prop="browser">
|
||||
<a-input v-model="form.browser" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="操作系统" prop="os">
|
||||
<a-input v-model="form.os" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="请求参数" prop="param">
|
||||
<a-textarea :rows="4" v-model="form.param" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="具体消息" prop="message">
|
||||
<a-textarea :rows="4" v-model="form.message" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model> -->
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
active: "N",
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(record) {
|
||||
this.form = this.$_.cloneDeep(record);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.form = {};
|
||||
this.$refs.form.resetFields();
|
||||
}, 300);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
241
Web/src/pages/system/log/oplog/index.vue
Normal file
241
Web/src/pages/system/log/oplog/index.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-alert banner closable type="error">
|
||||
<template slot="message">后端bug:任何操作的操作类型都是增加</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<a-alert banner closable type="warning">
|
||||
<template slot="message">详情的确认按钮没功能</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysApp:page">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<a-form-model-item label="角色名称">
|
||||
<a-input placeholder="请输入角色名称" v-model="query.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编号">
|
||||
<a-input placeholder="请输入唯一编码" v-model="query.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button-group>
|
||||
<a-button @click="onQuery" type="primary">查询</a-button>
|
||||
<a-button
|
||||
@click="
|
||||
() => {
|
||||
(query = {}), onQuery();
|
||||
}
|
||||
"
|
||||
>重置</a-button
|
||||
>
|
||||
</a-button-group>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</Auth>
|
||||
|
||||
<yo-table :columns="columns" :load-data="loadData" ref="table">
|
||||
<div class="yo-action-bar" slot="title">
|
||||
<Auth auth="sysApp:delete">
|
||||
<div class="yo-action-bar--actions">
|
||||
<a-popconfirm
|
||||
@confirm="sysVisLogDelete()"
|
||||
placement="topRight"
|
||||
title="确认清空日志？"
|
||||
>
|
||||
<a-button>清空日志</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</Auth>
|
||||
</div>
|
||||
<span slot="opType" slot-scope="text">
|
||||
{{ opTypeFilter(text) }}
|
||||
</span>
|
||||
<span slot="success" slot-scope="text">
|
||||
{{ successFilter(text) }}
|
||||
</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<yo-table-actions>
|
||||
<a @click="onOpen('details-Form', record)">详情</a>
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
<details-Form ref="details-Form" />
|
||||
</a-card>
|
||||
<br />
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import detailsForm from "./detailsForm";
|
||||
export default {
|
||||
components: {
|
||||
detailsForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: "日志名称",
|
||||
dataIndex: "name",
|
||||
},
|
||||
{
|
||||
title: "操作类型",
|
||||
dataIndex: "opType",
|
||||
scopedSlots: { customRender: "opType" },
|
||||
},
|
||||
{
|
||||
title: "是否成功",
|
||||
dataIndex: "success",
|
||||
scopedSlots: { customRender: "success" },
|
||||
},
|
||||
{
|
||||
title: "ip",
|
||||
dataIndex: "ip",
|
||||
},
|
||||
{
|
||||
title: "请求地址",
|
||||
dataIndex: "url",
|
||||
scopedSlots: { customRender: "url" },
|
||||
},
|
||||
{
|
||||
title: "操作时间",
|
||||
dataIndex: "opTime",
|
||||
scopedSlots: { customRender: "opTime" },
|
||||
},
|
||||
{
|
||||
title: "操作人",
|
||||
dataIndex: "account",
|
||||
},
|
||||
{
|
||||
title: "详情",
|
||||
dataIndex: "action",
|
||||
width: "150px",
|
||||
scopedSlots: { customRender: "action" },
|
||||
},
|
||||
],
|
||||
opTypeDict: [],
|
||||
successDict: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
},
|
||||
methods: {
|
||||
opTypeFilter(result) {
|
||||
// eslint-disable-next-line eqeqeq
|
||||
const values = this.opTypeDict.filter((item) => item.code == result);
|
||||
if (values.length > 0) {
|
||||
return values[0].value;
|
||||
}
|
||||
},
|
||||
sysVisLogDelete() {
|
||||
this.$api.sysOpLogDelete().then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success("清空成功");
|
||||
this.onReloadData();
|
||||
} else {
|
||||
this.$message.error("清空失败：" + res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
successFilter(result) {
|
||||
// eslint-disable-next-line eqeqeq
|
||||
const values = this.successDict.filter((item) => item.code == result);
|
||||
if (values.length > 0) {
|
||||
return values[0].value;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api
|
||||
.sysOpLogPage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载字典数据时的必要方法
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownWait({ code: "yes_or_no" }),
|
||||
this.$api.sysDictTypeDropDownWait({ code: "op_type" }),
|
||||
])
|
||||
.then(([yesOrNo, commonStatus]) => {
|
||||
this.opTypeDict = commonStatus.data;
|
||||
this.successDict = yesOrNo.data;
|
||||
});
|
||||
},
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes
|
||||
.find((p) => p.code == name)
|
||||
.values.find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen(record);
|
||||
},
|
||||
|
||||
onResult(success, message, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
} else {
|
||||
this.$refs.table.onLoaded();
|
||||
this.$message.error(message);
|
||||
}
|
||||
},
|
||||
|
||||
onSetDefault(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api
|
||||
.sysAppSetAsDefault({ id: record.id })
|
||||
.then(({ success, message }) => {
|
||||
this.onResult(success, message, "设置成功");
|
||||
});
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysRoleDel(record).then(({ success, message }) => {
|
||||
this.onResult(success, message, "删除成功");
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
72
Web/src/pages/system/log/vislog/detailsForm.vue
Normal file
72
Web/src/pages/system/log/vislog/detailsForm.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
class="yo-modal-form"
|
||||
title="日志详情"
|
||||
:footer="false"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口
|
||||
*/
|
||||
onOpen(record) {
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs['form-body'].onFillData(record);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
// this.$refs['form-body'].onValidate((valid) => {
|
||||
// if (valid) {
|
||||
// this.confirmLoading = true;
|
||||
// this.$api.sysRoleAdd(this.$refs['form-body'].form).then(({ success, message }) => {
|
||||
// this.confirmLoading = false;
|
||||
// if (success) {
|
||||
// this.$message.success('编辑成功');
|
||||
// this.onCancel();
|
||||
// this.$emit('ok');
|
||||
// } else {
|
||||
// this.$message.error(message);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
46
Web/src/pages/system/log/vislog/form.vue
Normal file
46
Web/src/pages/system/log/vislog/form.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<a-form-model :model="form" class="yo-form" ref="form">
|
||||
<a-form-model-item label="具体消息" prop="message">
|
||||
<a-textarea :rows="4" v-model="form.message" />
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
active: 'N',
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(record) {
|
||||
this.form = this.$_.cloneDeep(record);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.form = {};
|
||||
this.$refs.form.resetFields();
|
||||
}, 300);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
244
Web/src/pages/system/log/vislog/index.vue
Normal file
244
Web/src/pages/system/log/vislog/index.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-alert banner closable type="warning">
|
||||
<template slot="message">详情的确认按钮没功能</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<a-alert banner closable type="warning">
|
||||
<template slot="message"
|
||||
>页面刷新的时候也会有保存登录日志，但是没有ip显示</template
|
||||
>
|
||||
</a-alert>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysApp:page">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<a-form-model-item label="角色名称">
|
||||
<a-input placeholder="请输入角色名称" v-model="query.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编号">
|
||||
<a-input placeholder="请输入唯一编码" v-model="query.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button-group>
|
||||
<a-button @click="onQuery" type="primary">查询</a-button>
|
||||
<a-button
|
||||
@click="
|
||||
() => {
|
||||
(query = {}), onQuery();
|
||||
}
|
||||
"
|
||||
>重置</a-button
|
||||
>
|
||||
</a-button-group>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</Auth>
|
||||
|
||||
<yo-table :columns="columns" :load-data="loadData" ref="table">
|
||||
<div class="yo-action-bar" slot="title">
|
||||
<Auth auth="sysApp:delete">
|
||||
<div class="yo-action-bar--actions">
|
||||
<a-popconfirm
|
||||
@confirm="sysVisLogDelete()"
|
||||
placement="topRight"
|
||||
title="确认清空日志？"
|
||||
>
|
||||
<a-button>清空日志</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</Auth>
|
||||
</div>
|
||||
<span slot="visType" slot-scope="text">
|
||||
{{ visTypeFilter(text) }}
|
||||
</span>
|
||||
<span slot="success" slot-scope="text">
|
||||
{{ successFilter(text) }}
|
||||
</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<span slot="action" >
|
||||
<a @click="onOpen('details-Form', record)">详情</a>
|
||||
</span>
|
||||
</span>
|
||||
</yo-table>
|
||||
<details-Form ref="details-Form" />
|
||||
</a-card>
|
||||
<br />
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import detailsForm from "./detailsForm";
|
||||
export default {
|
||||
components: {
|
||||
detailsForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: "日志名称",
|
||||
dataIndex: "name",
|
||||
},
|
||||
{
|
||||
title: "访问类型",
|
||||
dataIndex: "visType",
|
||||
scopedSlots: { customRender: "visType" },
|
||||
},
|
||||
{
|
||||
title: "是否成功",
|
||||
dataIndex: "success",
|
||||
scopedSlots: { customRender: "success" },
|
||||
},
|
||||
{
|
||||
title: "ip",
|
||||
dataIndex: "ip",
|
||||
},
|
||||
{
|
||||
title: "浏览器",
|
||||
dataIndex: "browser",
|
||||
},
|
||||
{
|
||||
title: "访问时间",
|
||||
dataIndex: "visTime",
|
||||
scopedSlots: { customRender: "visTime" },
|
||||
},
|
||||
{
|
||||
title: "访问人",
|
||||
dataIndex: "account",
|
||||
},
|
||||
{
|
||||
title: "详情",
|
||||
width: "200px",
|
||||
dataIndex: "action",
|
||||
scopedSlots: {
|
||||
customRender: "action",
|
||||
},
|
||||
},
|
||||
],
|
||||
visTypeDict: [],
|
||||
successDict: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
},
|
||||
methods: {
|
||||
visTypeFilter(result) {
|
||||
// eslint-disable-next-line eqeqeq
|
||||
const values = this.visTypeDict.filter((item) => item.code == result);
|
||||
if (values.length > 0) {
|
||||
return values[0].value;
|
||||
}
|
||||
},
|
||||
sysVisLogDelete() {
|
||||
this.$api.sysVisLogDelete().then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success("清空成功");
|
||||
this.onReloadData();
|
||||
} else {
|
||||
this.$message.error("清空失败：" + res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
successFilter(result) {
|
||||
// eslint-disable-next-line eqeqeq
|
||||
const values = this.successDict.filter((item) => item.code == result);
|
||||
if (values.length > 0) {
|
||||
return values[0].value;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api
|
||||
.sysVisLogPage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载字典数据时的必要方法
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownWait({ code: "yes_or_no" }),
|
||||
this.$api.sysDictTypeDropDownWait({ code: "vis_type" }),
|
||||
])
|
||||
.then(([yesOrNo, commonStatus]) => {
|
||||
this.visTypeDict = commonStatus.data;
|
||||
this.successDict = yesOrNo.data;
|
||||
});
|
||||
},
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes
|
||||
.find((p) => p.code == name)
|
||||
.values.find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen(record);
|
||||
},
|
||||
|
||||
onResult(success, message, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
} else {
|
||||
this.$refs.table.onLoaded();
|
||||
this.$message.error(message);
|
||||
}
|
||||
},
|
||||
|
||||
onSetDefault(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api
|
||||
.sysAppSetAsDefault({ id: record.id })
|
||||
.then(({ success, message }) => {
|
||||
this.onResult(success, message, "设置成功");
|
||||
});
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysRoleDel(record).then(({ success, message }) => {
|
||||
this.onResult(success, message, "删除成功");
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
84
Web/src/pages/system/menu/addForm.vue
Normal file
84
Web/src/pages/system/menu/addForm.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
:width="800"
|
||||
@close="onClose"
|
||||
@ok="onOk"
|
||||
class="yo-drawer-form"
|
||||
title="新增菜单"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
<div class="ant-drawer-footer">
|
||||
<a-button @click="onClose">取消</a-button>
|
||||
<a-button :loading="confirmLoading" @click="onOk" type="primary">确定</a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
formBody() {
|
||||
return this.$refs['form-body'];
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口
|
||||
*/
|
||||
async onOpen() {
|
||||
this.visible = true;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.formBody.onInit();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.formBody.onGetData().then((data) => {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysMenuAdd(data)
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('新增成功');
|
||||
this.onClose();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onClose() {
|
||||
this.formBody.onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
83
Web/src/pages/system/menu/editForm.vue
Normal file
83
Web/src/pages/system/menu/editForm.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
:width="800"
|
||||
@close="onClose"
|
||||
class="yo-drawer-form"
|
||||
title="编辑应用"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
<div class="ant-drawer-footer">
|
||||
<a-button @click="onClose">取消</a-button>
|
||||
<a-button :loading="confirmLoading" @click="onOk" type="primary">确定</a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
formBody() {
|
||||
return this.$refs['form-body'];
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口,并填充外部传入的数据
|
||||
*/
|
||||
onOpen(record) {
|
||||
this.visible = true;
|
||||
this.$nextTick(async () => {
|
||||
await this.formBody.onInit();
|
||||
this.formBody.onFillData(record);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.formBody.onGetData().then((data) => {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysMenuEdit(data)
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('编辑成功');
|
||||
this.onClose();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onClose() {
|
||||
this.formBody.onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
297
Web/src/pages/system/menu/form.vue
Normal file
297
Web/src/pages/system/menu/form.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<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="onChangeApplication"
|
||||
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="可见性">
|
||||
<a-switch checked-children="可见" un-checked-children="隐藏" v-model="form.visible" />
|
||||
</a-form-model-item>
|
||||
<!-- 图标只有[按钮]不可用 -->
|
||||
<a-form-model-item label="图标" v-if="form.type != 2"></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>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {
|
||||
type: '1',
|
||||
openType: '1',
|
||||
weight: '2',
|
||||
visible: true,
|
||||
sort: 100,
|
||||
},
|
||||
/** 验证格式 */
|
||||
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: '请输入外链地址' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/** ... */
|
||||
appList: [],
|
||||
codes: {
|
||||
menuType: [],
|
||||
menuWerght: [],
|
||||
openType: [],
|
||||
},
|
||||
|
||||
parentTreeData: [],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(record) {
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...record,
|
||||
/** 在此处添加默认数据转换 */
|
||||
/** ... */
|
||||
visible: record.visible == 'Y',
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/** ... */
|
||||
record.visible = record.visible ? 'Y' : 'N';
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/** ... */
|
||||
this.parentTreeData = [];
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/** ...BEGIN */
|
||||
this.codes = await this.onLoadCodes();
|
||||
this.appList = await this.onLoadSysApplist();
|
||||
/** ...END */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/** ... */
|
||||
onLoadCodes() {
|
||||
return this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownWait({ code: 'menu_type' }),
|
||||
this.$api.sysDictTypeDropDownWait({ code: 'menu_weight' }),
|
||||
this.$api.sysDictTypeDropDownWait({ 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;
|
||||
});
|
||||
},
|
||||
|
||||
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();
|
||||
},
|
||||
|
||||
onChangeApplication(value) {
|
||||
this.$api.getMenuTree({ application: value }).then(({ data }) => {
|
||||
this.parentTreeData = [
|
||||
{
|
||||
id: -1,
|
||||
parentId: 0,
|
||||
title: '顶级',
|
||||
value: 0,
|
||||
pid: 0,
|
||||
children: data,
|
||||
},
|
||||
];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
194
Web/src/pages/system/menu/index.vue
Normal file
194
Web/src/pages/system/menu/index.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<container>
|
||||
<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: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>
|
||||
<br />
|
||||
<add-form @ok="onReloadData" ref="add-form" />
|
||||
<edit-form @ok="onReloadData" ref="edit-form" />
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import AddForm from './addForm';
|
||||
import EditForm from './editForm';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddForm,
|
||||
EditForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '菜单名称',
|
||||
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.sysDictTypeDropDownWait({ code: 'menu_type' }),
|
||||
this.$api.sysDictTypeDropDownWait({ code: 'menu_weight' }),
|
||||
this.$api.sysDictTypeDropDownWait({ 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) {
|
||||
this.$refs[formName].onOpen(record);
|
||||
},
|
||||
|
||||
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>
|
||||
85
Web/src/pages/system/org/addForm.vue
Normal file
85
Web/src/pages/system/org/addForm.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
class="yo-modal-form"
|
||||
title="新增机构"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
formBody() {
|
||||
return this.$refs['form-body'];
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口
|
||||
*/
|
||||
onOpen(record, orgId) {
|
||||
this.visible = true;
|
||||
this.$nextTick(async () => {
|
||||
await this.formBody.onInit();
|
||||
|
||||
// 获取外部选中的部门id
|
||||
this.formBody.onFillData({
|
||||
pid: orgId,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.$refs['form-body'].onValidate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysOrgAdd(this.$refs['form-body'].form)
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('新增成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
75
Web/src/pages/system/org/editForm.vue
Normal file
75
Web/src/pages/system/org/editForm.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
class="yo-modal-form"
|
||||
title="编辑机构"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口,并填充外部传入的数据
|
||||
*/
|
||||
onOpen(record) {
|
||||
this.visible = true;
|
||||
this.$nextTick(async () => {
|
||||
await this.$refs['form-body'].onInit();
|
||||
this.$refs['form-body'].onFillData(record);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.$refs['form-body'].onValidate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysOrgEdit(this.$refs['form-body'].form)
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
96
Web/src/pages/system/org/form.vue
Normal file
96
Web/src/pages/system/org/form.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item has-feedback label="机构名称" prop="name">
|
||||
<a-input placeholder="请输入机构名称" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item has-feedback label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item has-feedback label="上级机构" prop="pid">
|
||||
<a-tree-select
|
||||
:tree-data="orgData"
|
||||
placeholder="请选择上级机构"
|
||||
tree-default-expand-all
|
||||
v-model="form.pid"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="排序" prop="sort">
|
||||
<a-input-number
|
||||
:max="1000"
|
||||
:min="0"
|
||||
class="w-100-p"
|
||||
placeholder="请输入排序"
|
||||
v-model="form.sort"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="备注">
|
||||
<a-textarea placeholder="请输入备注" v-model="form.remark" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入机构名称' }],
|
||||
code: [{ required: true, message: '请输入唯一编码' }],
|
||||
pid: [{ required: true, message: '请选择上级机构' }],
|
||||
},
|
||||
|
||||
loading: false,
|
||||
|
||||
orgData: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(record) {
|
||||
this.form = this.$_.cloneDeep(record);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
}, 300);
|
||||
},
|
||||
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
this.orgData = await this.onLoadOrgData();
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
onLoadOrgData() {
|
||||
return this.$api.getOrgTree().then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
|
||||
onChangeExtData(value, record, type) {
|
||||
record[type] = value;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
185
Web/src/pages/system/org/index.vue
Normal file
185
Web/src/pages/system/org/index.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<yo-tree-layout
|
||||
:load-data="loadTreeData"
|
||||
@select="onSelect"
|
||||
default-expanded-keys
|
||||
ref="tree-layout"
|
||||
>
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysOrg:page">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<a-form-model-item label="机构名称">
|
||||
<a-input allow-clear placeholder="请输入机构名称" v-model="query.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button-group>
|
||||
<a-button @click="onQuery" type="primary">查询</a-button>
|
||||
<a-button @click="onReset">重置</a-button>
|
||||
</a-button-group>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
|
||||
<yo-table :columns="columns" :load-data="loadData" ref="table">
|
||||
<Auth auth="sysOrg:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增机构</a-button>
|
||||
</Auth>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<yo-table-actions>
|
||||
<Auth auth="sysOrg:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysOrg:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</Auth>
|
||||
</a-card>
|
||||
</container>
|
||||
<add-form @ok="onReloadData" ref="add-form" />
|
||||
<edit-form @ok="onReloadData" ref="edit-form" />
|
||||
</yo-tree-layout>
|
||||
</template>
|
||||
<script>
|
||||
import YoTreeLayout from '@/components/yoTreeLayout';
|
||||
|
||||
import AddForm from './addForm';
|
||||
import EditForm from './editForm';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
YoTreeLayout,
|
||||
AddForm,
|
||||
EditForm,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '机构名称',
|
||||
width: '400px',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
width: '200px',
|
||||
dataIndex: 'code',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
width: '80px',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
const flag = this.$auth({
|
||||
sysOrg: [['edit'], ['delete']],
|
||||
});
|
||||
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 树形选择界面必要的方法
|
||||
* 传给yo-table-layout以示意数据接口
|
||||
*/
|
||||
loadTreeData() {
|
||||
return this.$api.getOrgTree().then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
onSelect([id]) {
|
||||
this.query = {
|
||||
pid: id,
|
||||
};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api
|
||||
.getOrgPage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
onReset() {
|
||||
Object.keys(this.query).forEach((p) => {
|
||||
if (p !== 'pid') {
|
||||
this.query[p] = undefined;
|
||||
}
|
||||
});
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
this.$refs['tree-layout'].onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen(record, this.query['pid']);
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$api.sysOrgDelete(record).then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('删除成功');
|
||||
this.onReloadData();
|
||||
if (this.query['pid'] == record.id) {
|
||||
delete this.query.pid;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
74
Web/src/pages/system/pos/addForm.vue
Normal file
74
Web/src/pages/system/pos/addForm.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
class="yo-modal-form"
|
||||
title="新增职位"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口,并填充外部传入的数据
|
||||
*/
|
||||
onOpen() {
|
||||
this.visible = true;
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs['form-body'].onFillData(record);
|
||||
// });
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.$refs['form-body'].onValidate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysPosAdd(this.$refs['form-body'].form)
|
||||
.then(({ success }) => {
|
||||
this.confirmLoading = false;
|
||||
if (success) {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
74
Web/src/pages/system/pos/editForm.vue
Normal file
74
Web/src/pages/system/pos/editForm.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
class="yo-modal-form"
|
||||
title="职位编辑"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口,并填充外部传入的数据
|
||||
*/
|
||||
onOpen(record) {
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs['form-body'].onFillData(record);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.$refs['form-body'].onValidate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysPosEdit(this.$refs['form-body'].form)
|
||||
.then(({ success }) => {
|
||||
this.confirmLoading = false;
|
||||
if (success) {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
70
Web/src/pages/system/pos/form.vue
Normal file
70
Web/src/pages/system/pos/form.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
|
||||
<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 v-model="form.remark" :rows="4" placeholder="请输入备注"></a-textarea>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
active: 'N',
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入应用名称' }],
|
||||
code: [{ required: true, message: '请输入唯一编码' }],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(record) {
|
||||
this.form = this.$_.cloneDeep(record);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.form = {};
|
||||
this.$refs.form.resetFields();
|
||||
}, 300);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
143
Web/src/pages/system/pos/index.vue
Normal file
143
Web/src/pages/system/pos/index.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysPos:page">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<a-form-model-item label="职位名称">
|
||||
<a-input placeholder="请输入职位名称" v-model="query.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码">
|
||||
<a-input placeholder="请输入唯一编码" v-model="query.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button-group>
|
||||
<a-button @click="onQuery" type="primary">查询</a-button>
|
||||
<a-button @click="() => {(query = {}), onQuery();}">重置</a-button>
|
||||
</a-button-group>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</Auth>
|
||||
<yo-table :columns="columns" :load-data="loadData" ref="table">
|
||||
<Auth auth="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>
|
||||
<br />
|
||||
<edit-form @ok="onReloadData" ref="edit-form" />
|
||||
<add-form @ok="onReloadData" ref="add-form" />
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import AddForm from './addForm';
|
||||
import editForm from './editForm';
|
||||
export default {
|
||||
components: {
|
||||
AddForm,
|
||||
editForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '职位名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
dataIndex: 'code',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '200px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: {
|
||||
customRender: 'action',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api
|
||||
.sysPosPage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen(record);
|
||||
},
|
||||
|
||||
onResult(success, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
}
|
||||
this.$refs.table.onLoaded();
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysPosDelete(record).then(({ success, message }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
71
Web/src/pages/system/role/addForm.vue
Normal file
71
Web/src/pages/system/role/addForm.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
class="yo-modal-form"
|
||||
title="新增角色"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口
|
||||
*/
|
||||
onOpen() {
|
||||
this.visible = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.$refs['form-body'].onValidate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysRoleAdd(this.$refs['form-body'].form)
|
||||
.then(({ success }) => {
|
||||
this.confirmLoading = false;
|
||||
if (success) {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
75
Web/src/pages/system/role/editForm.vue
Normal file
75
Web/src/pages/system/role/editForm.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
class="yo-modal-form"
|
||||
title="编辑角色"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口,并填充外部传入的数据
|
||||
*/
|
||||
onOpen(record) {
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs['form-body'].onFillData(record);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.$refs['form-body'].onValidate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysRoleEdit(this.$refs['form-body'].form)
|
||||
.then(({ success }) => {
|
||||
this.confirmLoading = false;
|
||||
if (success) {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
70
Web/src/pages/system/role/form.vue
Normal file
70
Web/src/pages/system/role/form.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
|
||||
<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 v-model="form.remark" :rows="4" placeholder="请输入备注"></a-textarea>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
active: 'N',
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入应用名称' }],
|
||||
code: [{ required: true, message: '请输入唯一编码' }],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(record) {
|
||||
this.form = this.$_.cloneDeep(record);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.form = {};
|
||||
this.$refs.form.resetFields();
|
||||
}, 300);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
171
Web/src/pages/system/role/index.vue
Normal file
171
Web/src/pages/system/role/index.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysRole:page">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<a-form-model-item label="角色名称">
|
||||
<a-input placeholder="请输入角色名称" v-model="query.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编号">
|
||||
<a-input placeholder="请输入唯一编码" v-model="query.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button-group>
|
||||
<a-button @click="onQuery" type="primary">查询</a-button>
|
||||
<a-button @click="() => {(query = {}), onQuery();}">重置</a-button>
|
||||
</a-button-group>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</Auth>
|
||||
|
||||
<yo-table :columns="columns" :load-data="loadData" ref="table">
|
||||
<Auth auth="sysRole: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="sysRole:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysRole:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
<Auth :auth="{ sysRole: [['grantMenu'], ['grantData']] }">
|
||||
<a-dropdown placement="bottomRight">
|
||||
<a class="ant-dropdown-link">
|
||||
授权
|
||||
<a-icon type="down" />
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<Auth auth="sysRole:grantMenu">
|
||||
<a-menu-item>
|
||||
<a @click="onOpen('menu-form', record)">授权菜单</a>
|
||||
</a-menu-item>
|
||||
</Auth>
|
||||
<Auth auth="sysRole:grantData">
|
||||
<a-menu-item>
|
||||
<a @click="onOpen('org-form', record)">授权数据</a>
|
||||
</a-menu-item>
|
||||
</Auth>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</Auth>
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
<br />
|
||||
<add-form @ok="onReloadData" ref="add-form" />
|
||||
<edit-form @ok="onReloadData" ref="edit-form" />
|
||||
<menu-form @ok="onReloadData" ref="menu-form" />
|
||||
<org-form @ok="onReloadData" ref="org-form" />
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import AddForm from './addForm';
|
||||
import editForm from './editForm';
|
||||
import menuForm from './menuForm';
|
||||
import orgForm from './orgForm';
|
||||
export default {
|
||||
components: {
|
||||
AddForm,
|
||||
editForm,
|
||||
menuForm,
|
||||
orgForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '角色名',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
dataIndex: 'code',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const flag = this.$auth({
|
||||
sysRole: [['edit'], ['delete'], ['grantMenu'], ['grantData']],
|
||||
});
|
||||
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '200px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api
|
||||
.getRolePage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen(record);
|
||||
},
|
||||
|
||||
onResult(success, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
}
|
||||
this.$refs.table.onLoaded();
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysRoleDel(record).then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
101
Web/src/pages/system/role/menuForm.vue
Normal file
101
Web/src/pages/system/role/menuForm.vue
Normal file
@@ -0,0 +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(record) {
|
||||
this.visible = true;
|
||||
this.record = 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) {
|
||||
this.selectedKeys = a2;
|
||||
},
|
||||
|
||||
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>
|
||||
170
Web/src/pages/system/role/orgForm.vue
Normal file
170
Web/src/pages/system/role/orgForm.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
:width="600"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
title="授权数据"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item has-feedback label="授权范围" prop="dataScopeType">
|
||||
<a-select placeholder="请选择授权范围" v-model="form.dataScopeType">
|
||||
<a-select-option
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
@click="onChange(item.code)"
|
||||
v-for="item in dataScopeTypeData"
|
||||
>{{ item.value }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="选择机构" v-show="orgTreeShow">
|
||||
<a-tree-select
|
||||
:show-checked-strategy="SHOW_PARENT"
|
||||
:tree-data="orgTreeData"
|
||||
placeholder="请选择机构"
|
||||
tree-checkable
|
||||
v-model="checkedKeys"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-form-model>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TreeSelect } from 'ant-design-vue';
|
||||
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
loading: true,
|
||||
|
||||
record: {},
|
||||
|
||||
form: {
|
||||
dataScopeType: '',
|
||||
},
|
||||
rules: {
|
||||
dataScopeType: [{ required: true, message: '请选择授权范围' }],
|
||||
},
|
||||
|
||||
SHOW_PARENT,
|
||||
orgTreeData: [],
|
||||
|
||||
checkedKeys: [],
|
||||
dataScopeTypeData: [],
|
||||
orgTreeShow: false,
|
||||
replaceFields: {
|
||||
key: 'id',
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
async onOpen(record) {
|
||||
this.visible = true;
|
||||
this.record = record;
|
||||
|
||||
this.loading = true;
|
||||
|
||||
await this.onLoadCodes();
|
||||
this.form.dataScopeType = record.dataScopeType.toString();
|
||||
|
||||
await this.onChange(record.dataScopeType);
|
||||
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载字典数据时的必要方法
|
||||
*/
|
||||
onLoadCodes() {
|
||||
return this.$api
|
||||
.$queue([this.$api.sysDictTypeDropDownWait({ code: 'data_scope_type' })])
|
||||
.then(([dataScopeType]) => {
|
||||
this.dataScopeTypeData = dataScopeType.data;
|
||||
});
|
||||
},
|
||||
|
||||
async onChange(value) {
|
||||
if (value == '5') {
|
||||
this.loading = true;
|
||||
this.orgTreeShow = true;
|
||||
// 获取机构树
|
||||
this.orgTreeData = await this.onLoadTreeData();
|
||||
// 已关联数据
|
||||
this.checkedKeys = await this.onLoadRoleOwn();
|
||||
|
||||
this.loading = false;
|
||||
} else {
|
||||
this.orgTreeShow = false;
|
||||
// 清理已选中机构
|
||||
this.checkedKeys = [];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取机构树
|
||||
*/
|
||||
onLoadTreeData() {
|
||||
return this.$api.getOrgTree().then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 此角色已有数据列表
|
||||
*/
|
||||
onLoadRoleOwn() {
|
||||
return this.$api.sysRoleOwnData({ id: this.record.id }).then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
|
||||
onOk() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysRoleGrantData({
|
||||
id: this.record.id,
|
||||
grantOrgIdList: this.checkedKeys,
|
||||
dataScopeType: this.form.dataScopeType,
|
||||
})
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('授权成功');
|
||||
this.$emit('ok');
|
||||
this.onCancel();
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
onCancel() {
|
||||
this.visible = false;
|
||||
|
||||
setTimeout(() => {
|
||||
this.record = {};
|
||||
this.checkedKeys = [];
|
||||
this.dataScopeTypeData = [];
|
||||
this.orgTreeShow = false;
|
||||
this.form = {};
|
||||
|
||||
this.$refs.form.resetFields();
|
||||
}, 300);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
88
Web/src/pages/system/user/addForm.vue
Normal file
88
Web/src/pages/system/user/addForm.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
:width="1024"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
title="新增应用"
|
||||
>
|
||||
<FormBody mode="add" ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
formBody() {
|
||||
return this.$refs['form-body'];
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口
|
||||
*/
|
||||
onOpen(record, id) {
|
||||
this.visible = true;
|
||||
this.$nextTick(async () => {
|
||||
await this.formBody.onInit();
|
||||
|
||||
// 获取外部选中的部门id
|
||||
this.formBody.onFillData({
|
||||
sysEmpParam: {
|
||||
orgId: id,
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.formBody.onValidate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysUserAdd(this.formBody.form)
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('新增成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.formBody.onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
75
Web/src/pages/system/user/editForm.vue
Normal file
75
Web/src/pages/system/user/editForm.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
:width="1024"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
title="编辑用户"
|
||||
>
|
||||
<FormBody mode="eidt" ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口,并填充外部传入的数据
|
||||
*/
|
||||
onOpen(record) {
|
||||
this.visible = true;
|
||||
this.$nextTick(async () => {
|
||||
await this.$refs['form-body'].onInit();
|
||||
this.$refs['form-body'].onFillData(record);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.$refs['form-body'].onValidate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api
|
||||
.sysUserEdit(this.$refs['form-body'].form)
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
279
Web/src/pages/system/user/form.vue
Normal file
279
Web/src/pages/system/user/form.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<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-row :gutter="16">
|
||||
<a-col :span="10">
|
||||
<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') : undefined"
|
||||
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="1">
|
||||
<a-icon :style="{ color: '#1890ff' }" type="man" />男
|
||||
</a-radio-button>
|
||||
<a-radio-button :value="2">
|
||||
<a-icon :style="{ color: '#eb2f96' }" type="woman" />女
|
||||
</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">
|
||||
<h3>员工信息</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="所属组织机构" prop="sysEmpParam.orgId">
|
||||
<a-tree-select
|
||||
:tree-data="orgData"
|
||||
placeholder="请选择所属组织机构"
|
||||
treeDefaultExpandAll
|
||||
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>附加信息</h4>
|
||||
<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"
|
||||
: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>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
|
||||
const validateToNextPassword = (rule, value, callback) => {
|
||||
callback();
|
||||
};
|
||||
const compareToFirstPassword = (rule, value, callback) => {
|
||||
callback();
|
||||
};
|
||||
|
||||
export default {
|
||||
props: ['mode'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
sysEmpParam: {},
|
||||
},
|
||||
rules: {
|
||||
account: [{ required: true, min: 5, message: '请输入至少五个字符的账号' }],
|
||||
name: [{ required: true, message: '请输入姓名' }],
|
||||
password: [
|
||||
{ required: true, min: 5, message: '请输入至少五个字符的密码' },
|
||||
{ validator: validateToNextPassword },
|
||||
],
|
||||
confirm: [{ required: true, message: '请确认密码' }, { validator: compareToFirstPassword }],
|
||||
sex: [{ required: true, message: '请选择性别' }],
|
||||
phone: [{ required: true, message: '请输入手机号' }],
|
||||
'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: {
|
||||
moment,
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(record) {
|
||||
const form = this.$_.cloneDeep(record);
|
||||
// 日期特殊处理
|
||||
if (form.birthday) {
|
||||
form.birthday = 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,
|
||||
};
|
||||
});
|
||||
}
|
||||
this.form = form;
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.form = {
|
||||
sysEmpParam: {},
|
||||
};
|
||||
this.$refs.form.resetFields();
|
||||
}, 300);
|
||||
},
|
||||
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
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>
|
||||
280
Web/src/pages/system/user/index.vue
Normal file
280
Web/src/pages/system/user/index.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<yo-tree-layout :load-data="loadTreeData" @select="onSelect" default-expanded-keys>
|
||||
<container>
|
||||
<br />
|
||||
<a-alert closable type="error">
|
||||
<template slot="message">
|
||||
后端bug:生日不填写,在保存时会默认写入0001-01-01
|
||||
<br />权限问题,在这里需要用到组织架构以及职位的数据接口,所以必须配置该两项的菜单
|
||||
</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<a-alert closable type="warning">
|
||||
<template slot="message">缺授权的两块功能</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysUser:page">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<a-form-model-item label="关键词">
|
||||
<a-input allow-clear placeholder="请输入姓名、账号、手机号" v-model="query.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.find(p => p.code === 'common_status').values"
|
||||
>{{ item.value }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button-group>
|
||||
<a-button @click="onQuery" type="primary">查询</a-button>
|
||||
<a-button @click="onReset">重置</a-button>
|
||||
</a-button-group>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</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('org-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>
|
||||
<a-avatar :size="48" :src="record.avatar" icon="user" shape="square" slot="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>
|
||||
<Auth auth="sysUser:changeStatus">
|
||||
<div class="yo-list-content--h--item">
|
||||
<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>
|
||||
<add-form @ok="onReloadData" ref="add-form" />
|
||||
<edit-form @ok="onReloadData" ref="edit-form" />
|
||||
</yo-tree-layout>
|
||||
</template>
|
||||
<script>
|
||||
import YoTreeLayout from '@/components/yoTreeLayout';
|
||||
import YoList from '@/components/yoList';
|
||||
|
||||
import AddForm from './addForm';
|
||||
import EditForm from './editForm';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
YoTreeLayout,
|
||||
YoList,
|
||||
AddForm,
|
||||
EditForm,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
codes: [
|
||||
{
|
||||
code: 'sex',
|
||||
values: [],
|
||||
},
|
||||
{
|
||||
code: 'common_status',
|
||||
values: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 树形选择界面必要的方法
|
||||
* 传给yo-table-layout以示意数据接口
|
||||
*/
|
||||
loadTreeData() {
|
||||
return this.$api.getOrgTree().then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
onSelect([id]) {
|
||||
this.query = {
|
||||
'sysEmpParam.orgId': id,
|
||||
};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api
|
||||
.getUserPage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.list.onReloadData(true);
|
||||
},
|
||||
|
||||
onReset() {
|
||||
Object.keys(this.query).forEach((p) => {
|
||||
if (p !== 'sysEmpParam.orgId') {
|
||||
this.query[p] = undefined;
|
||||
}
|
||||
});
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.list.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载字典数据时的必要方法
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownWait({ code: 'sex' }),
|
||||
this.$api.sysDictTypeDropDownWait({ code: 'common_status' }),
|
||||
])
|
||||
.then(([sex, commonStatus]) => {
|
||||
this.codes.find((p) => p.code === 'sex').values = sex.data;
|
||||
this.codes.find((p) => p.code === 'common_status').values = commonStatus.data;
|
||||
});
|
||||
},
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes.find((p) => p.code == name).values.find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen(record, this.query['sysEmpParam.orgId']);
|
||||
},
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onResetPassword(record) {
|
||||
this.$api
|
||||
.sysUserResetPwd({
|
||||
id: record.id,
|
||||
})
|
||||
.then(({ success, message }) => {
|
||||
if (success) {
|
||||
this.$message.success('重置成功');
|
||||
} else {
|
||||
this.$message.error(message);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$api.sysUserDelete(record).then(({ success, message }) => {
|
||||
if (success) {
|
||||
this.$message.success('删除成功');
|
||||
this.onReloadData();
|
||||
} else {
|
||||
this.$message.error(message);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user