Initial commit
This commit is contained in:
fengachen
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png" />
|
||||
<HelloWorld msg="Welcome to Your Vue.js App" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from "@/components/HelloWorld.vue";
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
components: {
|
||||
HelloWorld,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: "Analysis",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
indexStyle: 1
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<exception-page type="404" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExceptionPage from './ExceptionPage'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ExceptionPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="exception">
|
||||
<div class="img">
|
||||
<img :src="config[type].img"/>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>{{ config[type].title }}</h1>
|
||||
<div class="desc">{{ config[type].desc }}</div>
|
||||
<div class="action">
|
||||
<a-button type="primary" @click="handleToHome">返回首页</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import types from './type'
|
||||
|
||||
export default {
|
||||
name: "Exception",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: '404'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: types
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleToHome () {
|
||||
this.$router.push({ name: 'dashboard' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.exception {
|
||||
min-height: 500px;
|
||||
height: 80%;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-top: 150px;
|
||||
.img {
|
||||
display: inline-block;
|
||||
padding-right: 52px;
|
||||
zoom: 1;
|
||||
img {
|
||||
height: 360px;
|
||||
max-width: 430px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
display: inline-block;
|
||||
flex: auto;
|
||||
h1 {
|
||||
color: #434e59;
|
||||
font-size: 72px;
|
||||
font-weight: 600;
|
||||
line-height: 72px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.desc {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
.exception {
|
||||
margin-top: 30px;
|
||||
.img {
|
||||
padding-right: unset;
|
||||
|
||||
img {
|
||||
height: 40%;
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
const types = {
|
||||
403: {
|
||||
img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
|
||||
title: '403',
|
||||
desc: '抱歉，你无权访问该页面'
|
||||
},
|
||||
404: {
|
||||
img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
|
||||
title: '404',
|
||||
desc: '抱歉，你访问的页面不存在或无权访问'
|
||||
},
|
||||
500: {
|
||||
img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
|
||||
title: '500',
|
||||
desc: '抱歉，服务器出错了'
|
||||
}
|
||||
}
|
||||
|
||||
export default types
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<result :is-success="false" :title="title" :description="description">
|
||||
<template slot="action">
|
||||
<a-button type="primary" >返回修改</a-button>
|
||||
</template>
|
||||
<div>
|
||||
<div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 16px">
|
||||
您提交的内容有如下错误：
|
||||
</div>
|
||||
<div style="margin-bottom: 16px">
|
||||
<a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/>
|
||||
您的账户已被冻结
|
||||
<a style="margin-left: 16px">立即解冻 <a-icon type="right" /></a>
|
||||
</div>
|
||||
<div>
|
||||
<a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/>
|
||||
您的账户还不具备申请资格
|
||||
<a style="margin-left: 16px">立即升级 <a-icon type="right" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</result>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Result from './Result'
|
||||
|
||||
export default {
|
||||
name: "Error",
|
||||
components: {
|
||||
Result
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title: '提交失败',
|
||||
description: '请核对并修改以下信息后，再重新提交。'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="result">
|
||||
<div>
|
||||
<a-icon :class="[isSuccess ? 'success' : 'error' ,'icon']" :type="isSuccess ? 'check-circle' : 'close-circle'"/>
|
||||
</div>
|
||||
<div class="title" v-if="title">{{ title }}</div>
|
||||
<div class="description" v-if="description">{{ description }}</div>
|
||||
<div class="content" v-if="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="action">
|
||||
<slot name="action"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Result",
|
||||
// 'isSuccess', 'title', 'description'
|
||||
props: {
|
||||
isSuccess: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
content: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.result {
|
||||
text-align: center;
|
||||
width: 72%;
|
||||
margin: 0 auto;
|
||||
padding: 24px 0 8px;
|
||||
|
||||
.icon {
|
||||
font-size: 72px;
|
||||
line-height: 72px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.success {
|
||||
color: #52c41a;
|
||||
}
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
.title {
|
||||
font-size: 24px;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.description {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.content {
|
||||
background: #fafafa;
|
||||
padding: 24px 40px;
|
||||
border-radius: 2px;
|
||||
text-align: left;
|
||||
}
|
||||
.action {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
.result {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<result :is-success="true" :description="description" :title="title">
|
||||
<template slot="action">
|
||||
<a-button type="primary">返回列表</a-button>
|
||||
<a-button style="margin-left: 8px">查看项目</a-button>
|
||||
<a-button style="margin-left: 8px">打印</a-button>
|
||||
</template>
|
||||
<div>
|
||||
<div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 20px;">项目名称</div>
|
||||
<a-row style="margin-bottom: 16px">
|
||||
<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
|
||||
<span style="color: rgba(0, 0, 0, 0.85)">项目 ID：</span>
|
||||
20180724089
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
|
||||
<span style="color: rgba(0, 0, 0, 0.85)">负责人：</span>
|
||||
曲丽丽是谁？
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
|
||||
<span style="color: rgba(0, 0, 0, 0.85)">生效时间：</span>
|
||||
2016-12-12 ~ 2017-12-12
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-steps :current="1" :direction="isMobile() && directionType.vertical || directionType.horizontal" progressDot>
|
||||
<a-step >
|
||||
<span style="font-size: 14px" slot="title">创建项目</span>
|
||||
<template slot="description">
|
||||
<div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left: 42px;" slot="description" >
|
||||
<div style="margin: 8px 0 4px">
|
||||
曲丽丽
|
||||
<a-icon style="margin-left: 8px" type="dingding-o" />
|
||||
</div>
|
||||
<div>2016-12-12 12:32</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-step>
|
||||
<a-step title="部门初审">
|
||||
<span style="font-size: 14px" slot="title">部门初审</span>
|
||||
<template slot="description">
|
||||
<div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left: 42px;" slot="description" >
|
||||
<div style="margin: 8px 0 4px">
|
||||
周毛毛
|
||||
<a-icon style="margin-left: 8px; color: #00A0E9" type="dingding-o" />
|
||||
</div>
|
||||
<div><a href="">催一下</a></div>
|
||||
</div>
|
||||
</template>
|
||||
</a-step>
|
||||
<a-step title="财务复核">
|
||||
<span style="font-size: 14px" slot="title">财务复核</span>
|
||||
</a-step>
|
||||
<a-step title="完成" >
|
||||
<span style="font-size: 14px" slot="title">完成</span>
|
||||
</a-step>
|
||||
</a-steps>
|
||||
</div>
|
||||
</result>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Result from './Result'
|
||||
import { mixinDevice } from '@/utils/mixin.js'
|
||||
|
||||
const directionType = {
|
||||
horizontal: 'horizontal',
|
||||
vertical: 'vertical'
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "Success",
|
||||
components: {
|
||||
Result
|
||||
},
|
||||
mixins: [mixinDevice],
|
||||
data () {
|
||||
return {
|
||||
title: '提交成功',
|
||||
description: '提交结果页用于反馈一系列操作任务的处理结果，\n' +
|
||||
' 如果仅是简单操作，使用 Message 全局提示反馈即可。\n' +
|
||||
' 本文字区域可以展示简单的补充说明，如果有类似展示\n' +
|
||||
' “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。',
|
||||
directionType
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="表名">
|
||||
<a-input placeholder="请输入表名" v-model="queryParam.tableName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="字段名">
|
||||
<a-input placeholder="请输入字段名" v-model="queryParam.fieldName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="混淆码">
|
||||
<a-input placeholder="请输入混淆码" v-model="queryParam.confusionCode"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- 查询区域-END -->
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
<a-button type="primary" icon="download" @click="handleExportXls('混淆表')">导出</a-button>
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
|
||||
<a-button type="primary" icon="import">导入</a-button>
|
||||
</a-upload>
|
||||
<!-- 高级查询区域 -->
|
||||
<!-- <a-dropdown v-if="selectedRowKeys.length > 0">-->
|
||||
<!-- <a-menu slot="overlay">-->
|
||||
<!-- <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>-->
|
||||
<!-- </a-menu>-->
|
||||
<!-- <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>-->
|
||||
<!-- </a-dropdown>-->
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
|
||||
<!-- <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
|
||||
<!-- <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
class="j-table-force-nowrap"
|
||||
@change="handleTableChange">
|
||||
|
||||
<template slot="htmlSlot" slot-scope="text">
|
||||
<div v-html="text"></div>
|
||||
</template>
|
||||
<template slot="imgSlot" slot-scope="text">
|
||||
<span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
|
||||
<img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
|
||||
</template>
|
||||
<template slot="fileSlot" slot-scope="text">
|
||||
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
|
||||
<a-button
|
||||
v-else
|
||||
:ghost="true"
|
||||
type="primary"
|
||||
icon="download"
|
||||
size="small"
|
||||
@click="downloadFile(text)">
|
||||
下载
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<span slot="action" slot-scope="text, record" class="action-span-cell">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a @click="handleDelete(record.id)">删除</a>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<sys-confusion-modal ref="modalForm" @ok="modalFormOk"></sys-confusion-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import '@/assets/less/TableExpand.less'
|
||||
import { mixinDevice } from '@/utils/mixin'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import SysConfusionModal from './modules/SysConfusionModal'
|
||||
|
||||
export default {
|
||||
name: 'SysConfusionList',
|
||||
mixins:[JeroListMixin, mixinDevice],
|
||||
components: {
|
||||
SysConfusionModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '混淆表管理页面',
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key:'rowIndex',
|
||||
width:60,
|
||||
align:"center",
|
||||
customRender:function (t,r,index) {
|
||||
return parseInt(index)+1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title:'表名',
|
||||
align:"center",
|
||||
dataIndex: 'tableName'
|
||||
},
|
||||
{
|
||||
title:'字段名',
|
||||
align:"center",
|
||||
dataIndex: 'fieldName'
|
||||
},
|
||||
{
|
||||
title:'混淆码',
|
||||
align:"center",
|
||||
dataIndex: 'confusionCode'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align:"center",
|
||||
fixed:"right",
|
||||
width:147,
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: "/sys/confusion/page",
|
||||
delete: "/sys/confusion/delete",
|
||||
deleteBatch: "/sys/confusion/deleteBatch",
|
||||
exportXlsUrl: "/sys/confusion/exportXls",
|
||||
importExcelUrl: "/sys/confusion/importExcel",
|
||||
|
||||
},
|
||||
dictOptions:{},
|
||||
superFieldList:[],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getSuperFieldList();
|
||||
},
|
||||
computed: {
|
||||
importExcelUrl: function(){
|
||||
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initDictConfig(){
|
||||
},
|
||||
getSuperFieldList(){
|
||||
let fieldList=[];
|
||||
fieldList.push({type:'string',value:'confusionType',text:'混淆类型',dictCode:''})
|
||||
fieldList.push({type:'string',value:'confusionName',text:'表名或字段名',dictCode:''})
|
||||
this.superFieldList = fieldList
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
@@ -0,0 +1,261 @@
|
||||
<template xmlns:background-color="http://www.w3.org/1999/xhtml">
|
||||
<a-card :bordered="false" style="padding: 12px 0;">
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<!-- 搜索区域 -->
|
||||
<a-form layout="inline" @keyup.enter.native="onSearch">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="6" :sm="12">
|
||||
<a-form-item label="部门名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
|
||||
<a-input placeholder="请输入部门名称" v-model="queryParam.departName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-button type="primary" @click="onSearch" icon="search" style="margin-left: 21px">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator" style="margin: 5px 0 10px 2px">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus" v-has="'sys:depart:add'">添加部门</a-button>
|
||||
<a-button title="删除多条数据" @click="batchDel" type="danger" icon="delete">批量删除</a-button>
|
||||
</div>
|
||||
<div style="margin-top: 15px">
|
||||
<a-table
|
||||
style="height:500px"
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
<span slot="action" class="action-span-cell" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)" v-has="'sys:depart:edit'">编辑</a>
|
||||
<a @click="userInfo(record)">用户信息</a>
|
||||
<a @click="handleDelete(record.id)" v-has="'sys:depart:del'">删除</a>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
<dept-user-info ref="DeptUserInfo" @ok="modalFormOk"></dept-user-info>
|
||||
<depart-modal ref="modalForm" @ok="loadTree"></depart-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
import DepartModal from "./modules/DepartModal";
|
||||
import DeptUserInfo from "./modules/DeptUserInfo";
|
||||
import pick from "lodash.pick";
|
||||
import { queryDepartTreeList, searchByKeywords, deleteByDepartId } from "@/api/api";
|
||||
import { httpAction, deleteAction } from "@/api/manage";
|
||||
import { JeroListMixin } from "@/mixins/JeroListMixin";
|
||||
|
||||
export default {
|
||||
name: "DepartList",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
DepartModal,
|
||||
DeptUserInfo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* table选中keys*/
|
||||
selectedRowKeys: [],
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
rightClickSelectedKey: "",
|
||||
rightClickSelectedOrgCode: "",
|
||||
model: {},
|
||||
columns: [{
|
||||
title: "部门名称",
|
||||
dataIndex: "departName",
|
||||
align: "center"
|
||||
}, {
|
||||
title: "操作",
|
||||
dataIndex: "action",
|
||||
align: "center",
|
||||
scopedSlots: { customRender: "action" }
|
||||
}],
|
||||
form: this.$form.createForm(this),
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
url: {
|
||||
delete: "/sys/sysDepart/delete",
|
||||
edit: "/sys/sysDepart/edit",
|
||||
deleteBatch: "/sys/sysDepart/deleteBatch"
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
this.refresh();
|
||||
},
|
||||
loadTree() {
|
||||
let params = this.getQueryParams();//查询条件
|
||||
queryDepartTreeList(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result;
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
refresh() {
|
||||
this.loading = true;
|
||||
this.loadTree();
|
||||
},
|
||||
|
||||
batchDel: function() {
|
||||
if (this.selectedRowKeys.length <= 0) {
|
||||
this.$message.warning("请选择一条记录！");
|
||||
} else {
|
||||
let ids = "";
|
||||
for (let a = 0; a < this.selectedRowKeys.length; a++) {
|
||||
ids += this.selectedRowKeys[a] + ",";
|
||||
}
|
||||
let that = this;
|
||||
this.$confirm({
|
||||
title: "确认删除",
|
||||
content: "确定要删除所选中的 " + this.selectedRowKeys.length + " 条数据，以及子节点数据吗?",
|
||||
onOk: function() {
|
||||
deleteAction(that.url.deleteBatch, { ids: ids }).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.loadTree();
|
||||
that.onClearSelected();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
onSearch() {
|
||||
let that = this;
|
||||
if (this.queryParam) {
|
||||
searchByKeywords({ keyWord: this.queryParam.departName}).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result;
|
||||
this.loading = false;
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.loadTree()
|
||||
}
|
||||
},
|
||||
|
||||
onClearSelected() {
|
||||
this.selectedRowKeys = [];
|
||||
this.form.resetFields();
|
||||
this.selectedKeys = [];
|
||||
},
|
||||
// handleAdd() {
|
||||
// this.$refs.departModal.add();
|
||||
// this.$refs.departModal.title = "新增";
|
||||
// },
|
||||
userInfo(record) {
|
||||
console.log("===", record);
|
||||
this.$refs.DeptUserInfo.initUserInfo(record.id);
|
||||
},
|
||||
handleDelete() {
|
||||
let that = this;
|
||||
this.$confirm({
|
||||
title: "确认删除",
|
||||
content: "确定要删除此部门以及子节点数据吗?",
|
||||
onOk: function() {
|
||||
deleteByDepartId({ id: that.rightClickSelectedKey }).then((resp) => {
|
||||
if (resp.success) {
|
||||
//删除成功后，去除已选中中的数据
|
||||
that.selectedRowKeys.splice(that.selectedRowKeys.findIndex(key => key === that.rightClickSelectedKey), 1);
|
||||
that.$message.success("删除成功!");
|
||||
that.loadTree();
|
||||
//删除后同步清空右侧基本信息内容
|
||||
let orgCode = that.form.getFieldValue("orgCode");
|
||||
if (orgCode && orgCode === that.rightClickSelectedOrgCode) {
|
||||
that.onClearSelected();
|
||||
}
|
||||
} else {
|
||||
that.$message.warning("删除失败!");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card-body .table-operator {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.anty-form-btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.anty-form-btn button {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.anty-node-layout .ant-layout-header {
|
||||
padding-right: 0
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.header button {
|
||||
margin: 0 3px
|
||||
}
|
||||
|
||||
.ant-modal-cust-warp {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.ant-modal-cust-warp .ant-modal-body {
|
||||
height: calc(100% - 110px) !important;
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.ant-modal-cust-warp .ant-modal-content {
|
||||
height: 90% !important;
|
||||
overflow-y: hidden
|
||||
}
|
||||
|
||||
#app .desktop {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/** Button按钮间距 */
|
||||
.ant-btn {
|
||||
margin-left: 3px
|
||||
}
|
||||
|
||||
.drawer-bootom-button {
|
||||
/*position: absolute;*/
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 16px;
|
||||
text-align: left;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<a-row :gutter="10">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-card :bordered="false">
|
||||
<div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
|
||||
<a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
|
||||
<!-- 树-->
|
||||
|
||||
<template v-if="userIdentity === '2' && departTree.length>0">
|
||||
|
||||
<!--组织机构-->
|
||||
<a-tree
|
||||
showLine
|
||||
:selectedKeys="selectedKeys"
|
||||
:checkStrictly="true"
|
||||
@select="onSelect"
|
||||
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
||||
:treeData="departTree"
|
||||
:autoExpandParent="autoExpandParent"
|
||||
:expandedKeys="iExpandedKeys"
|
||||
@expand="onExpand"
|
||||
/>
|
||||
|
||||
</template>
|
||||
<div style="margin-top: 24px;" v-else-if="userIdentity === '2' && departTree.length==0">
|
||||
<h3><span>您的部门下暂无有效部门信息</span></h3>
|
||||
</div>
|
||||
<div style="margin-top: 24px;" v-else><h3>普通员工暂此权限</h3></div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="16" :sm="24">
|
||||
<a-card :bordered="false">
|
||||
<a-tabs defaultActiveKey="2" @change="callback">
|
||||
<a-tab-pane tab="基本信息" key="1" forceRender>
|
||||
<Dept-Base-Info ref="DeptBaseInfo"></Dept-Base-Info>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="用户信息" key="2">
|
||||
<Dept-User-Info ref="DeptUserInfo" @clearSelectedDepartKeys="clearSelectedDepartKeys"></Dept-User-Info>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="部门角色" key="3" forceRender>
|
||||
<dept-role-info ref="DeptRoleInfo" @clearSelectedDepartKeys="clearSelectedDepartKeys"/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<script>
|
||||
import DeptBaseInfo from './modules/DeptBaseInfo'
|
||||
import DeptUserInfo from './modules/DeptUserInfo'
|
||||
import {queryMyDepartTreeList, searchByKeywords} from '@/api/api'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
import DeptRoleInfo from './modules/DeptRoleInfo'
|
||||
|
||||
export default {
|
||||
name: 'DepartUserList',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
DeptRoleInfo,
|
||||
DeptBaseInfo,
|
||||
DeptUserInfo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentDeptId: '',
|
||||
iExpandedKeys: [],
|
||||
loading: false,
|
||||
autoExpandParent: true,
|
||||
currFlowId: '',
|
||||
currFlowName: '',
|
||||
disable: true,
|
||||
treeData: [],
|
||||
visible: false,
|
||||
departTree: [],
|
||||
rightClickSelectedKey: '',
|
||||
hiding: true,
|
||||
model: {},
|
||||
dropTrigger: '',
|
||||
depart: {},
|
||||
disableSubmit: false,
|
||||
checkedKeys: [],
|
||||
selectedKeys: [],
|
||||
autoIncr: 1,
|
||||
currSelected: {},
|
||||
form: this.$form.createForm(this),
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5}
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16}
|
||||
},
|
||||
graphDatasource: {
|
||||
nodes: [],
|
||||
edges: []
|
||||
},
|
||||
userIdentity:"",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
callback(key) {
|
||||
//console.log(key)
|
||||
},
|
||||
loadData() {
|
||||
this.refresh();
|
||||
},
|
||||
clearSelectedDepartKeys() {
|
||||
this.checkedKeys = [];
|
||||
this.selectedKeys = [];
|
||||
this.currentDeptId = '';
|
||||
this.$refs.DeptUserInfo.currentDeptId='';
|
||||
this.$refs.DeptRoleInfo.currentDeptId='';
|
||||
},
|
||||
loadTree() {
|
||||
var that = this
|
||||
that.treeData = []
|
||||
that.departTree = []
|
||||
queryMyDepartTreeList().then((res) => {
|
||||
if (res.success && res.result ) {
|
||||
for (let i = 0; i < res.result.length; i++) {
|
||||
let temp = res.result[i]
|
||||
that.treeData.push(temp)
|
||||
that.departTree.push(temp)
|
||||
that.setThisExpandedKeys(temp)
|
||||
// console.log(temp.id)
|
||||
}
|
||||
this.loading = false
|
||||
}
|
||||
that.userIdentity = res.message
|
||||
})
|
||||
},
|
||||
setThisExpandedKeys(node) {
|
||||
//只展开一级目录
|
||||
if (node.children && node.children.length > 0) {
|
||||
this.iExpandedKeys.push(node.key)
|
||||
//下方代码放开注释则默认展开所有节点
|
||||
/**
|
||||
for (let a = 0; a < node.children.length; a++) {
|
||||
this.setThisExpandedKeys(node.children[a])
|
||||
}
|
||||
*/
|
||||
}
|
||||
},
|
||||
refresh() {
|
||||
this.loading = true
|
||||
this.loadTree()
|
||||
},
|
||||
|
||||
onExpand(expandedKeys) {
|
||||
// console.log('onExpand', expandedKeys)
|
||||
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
||||
// or, you can remove all expanded children keys.
|
||||
this.iExpandedKeys = expandedKeys
|
||||
this.autoExpandParent = false
|
||||
},
|
||||
|
||||
onSearch(value) {
|
||||
let that = this
|
||||
if (value) {
|
||||
searchByKeywords({keyWord: value,myDeptSearch:'1'}).then((res) => {
|
||||
if (res.success) {
|
||||
that.departTree = []
|
||||
for (let i = 0; i < res.result.length; i++) {
|
||||
let temp = res.result[i]
|
||||
that.departTree.push(temp)
|
||||
}
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.loadTree()
|
||||
}
|
||||
|
||||
},
|
||||
onCheck(checkedKeys, e) {
|
||||
let record = e.node.dataRef;
|
||||
// console.log('onCheck', checkedKeys, e);
|
||||
this.checkedKeys = [];
|
||||
// if (e.checked === true) {
|
||||
this.currentDeptId = record.id;
|
||||
this.checkedKeys.push(record.id);
|
||||
|
||||
this.$refs.DeptBaseInfo.open(record);
|
||||
this.$refs.DeptUserInfo.open(record);
|
||||
this.$refs.DeptRoleInfo.open(record);
|
||||
// }
|
||||
// else {
|
||||
// this.checkedKeys = [];
|
||||
// this.$refs.DeptBaseInfo.clearForm();
|
||||
// this.$refs.DeptUserInfo.clearList();
|
||||
// }
|
||||
|
||||
this.hiding = false;
|
||||
// this.checkedKeys = checkedKeys.checked
|
||||
},
|
||||
onSelect(selectedKeys, e) {
|
||||
if (this.selectedKeys[0] !== selectedKeys[0]) {
|
||||
this.selectedKeys = [selectedKeys[0]];
|
||||
}
|
||||
let record = e.node.dataRef;
|
||||
this.checkedKeys.push(record.id);
|
||||
this.$refs.DeptBaseInfo.open(record);
|
||||
this.$refs.DeptUserInfo.onClearSelected();
|
||||
this.$refs.DeptUserInfo.open(record);
|
||||
this.$refs.DeptRoleInfo.onClearSelected();
|
||||
this.$refs.DeptRoleInfo.open(record);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.currFlowId = this.$route.params.id
|
||||
this.currFlowName = this.$route.params.name
|
||||
// this.loadTree()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less'
|
||||
</style>
|
||||
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:width="modalWidth"
|
||||
:style="modalStyle"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
@cancel="handleCancel">
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">关闭</a-button>
|
||||
</template>
|
||||
<a-table
|
||||
ref="table"
|
||||
rowKey="id"
|
||||
size="middle"
|
||||
bordered
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:dataSource="dataSource"
|
||||
:pagination="false">
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleBack(record.id)"><a-icon type="redo"/>字典取回</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="handleDelete(record.id)"><a-icon type="scissor"/>彻底删除</a>
|
||||
</span>
|
||||
<template slot="text" slot-scope="text">
|
||||
<span v-if="!text"></span>
|
||||
<j-ellipsis :value="text" :length="10"></j-ellipsis>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
</a-modal>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction,deleteAction,putAction } from '@api/manage'
|
||||
import JEllipsis from "@comp/jero/JEllipsis";
|
||||
export default {
|
||||
name: "DictDeleteList",
|
||||
components:{
|
||||
JEllipsis
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
modalWidth: '90%',
|
||||
modalStyle: { 'top': '20px'},
|
||||
title: '操作',
|
||||
visible: false,
|
||||
loading: false,
|
||||
dataSource:[],
|
||||
columns:[
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 120,
|
||||
align: "center",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '字典名称',
|
||||
align: "left",
|
||||
dataIndex: 'dictName',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '字典编号',
|
||||
align: "left",
|
||||
dataIndex: 'dictCode',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
align: "left",
|
||||
dataIndex: 'description',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
scopedSlots: {customRender: 'action'}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleCancel(){
|
||||
this.visible = false
|
||||
//回收站字典列表刷新
|
||||
this.$emit("refresh")
|
||||
},
|
||||
show(){
|
||||
this.visible = true
|
||||
this.loadData();
|
||||
},
|
||||
loadData(){
|
||||
this.loading = true
|
||||
getAction("/sys/dict/deleteList").then(res=>{
|
||||
this.loading = false
|
||||
if(res.success){
|
||||
this.dataSource = res.result
|
||||
}else{
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleBack(id){
|
||||
putAction("/sys/dict/back/"+id).then(res=>{
|
||||
if(res.success){
|
||||
this.$message.success(res.message)
|
||||
this.loadData();
|
||||
}else{
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDelete(id){
|
||||
this.$confirm({
|
||||
title: '彻底删除字典',
|
||||
content: (<div>
|
||||
<p>您确定要彻底删除这个字典项吗？</p>
|
||||
<p style="color:red;">注意：彻底删除后将无法恢复，请谨慎操作！</p>
|
||||
</div>),
|
||||
centered: false,
|
||||
onOk: () => {
|
||||
var that = this;
|
||||
deleteAction("/sys/dict/deletePhysic/"+id).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.loadData();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 抽屉 -->
|
||||
<a-drawer
|
||||
title="字典列表"
|
||||
:width="screenWidth"
|
||||
@close="onClose"
|
||||
:visible="visible"
|
||||
>
|
||||
<!-- 抽屉内容的border -->
|
||||
<div
|
||||
:style="{
|
||||
padding:'10px',
|
||||
border: '1px solid #e9e9e9',
|
||||
background: '#fff',
|
||||
}">
|
||||
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" :form="form" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="10">
|
||||
<a-col :md="8" :sm="12">
|
||||
<a-form-item label="名称">
|
||||
<a-input style="width: 120px;" :maxLength="50" placeholder="请输入名称" v-model="queryParam.itemText"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="9" :sm="24">
|
||||
<a-form-item label="状态" style="width: 170px" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-select
|
||||
placeholder="请选择"
|
||||
v-model="queryParam.status"
|
||||
>
|
||||
<a-select-option value="1">正常</a-select-option>
|
||||
<a-select-option value="0">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="7" :sm="24">
|
||||
<span style="float: left;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery">搜索</a-button>
|
||||
<a-button type="primary" @click="searchReset" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :md="2" :sm="24">
|
||||
<a-button style="margin-bottom: 10px" type="primary" @click="handleAdd">新增</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<div>
|
||||
<a-table
|
||||
ref="table"
|
||||
rowKey="id"
|
||||
size="middle"
|
||||
bordered
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
:rowClassName="getRowClassname"
|
||||
>
|
||||
|
||||
<span slot="action" slot-scope="text, record" class="action-span-cell">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<!-- <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
|
||||
<!-- -->
|
||||
<!-- </a-popconfirm>-->
|
||||
<a @click="handleDelete(record.id)">删除</a>
|
||||
</span>
|
||||
<template slot="text" slot-scope="text">
|
||||
<span v-if="!text"></span>
|
||||
<j-ellipsis :value="text" :length="10"></j-ellipsis>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
</a-drawer>
|
||||
<dict-item-modal ref="modalForm" @ok="modalFormOk"></dict-item-modal> <!-- 字典数据 -->
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import {filterObj} from '@/utils/util';
|
||||
import DictItemModal from './modules/DictItemModal'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
import JEllipsis from "@comp/jero/JEllipsis";
|
||||
|
||||
export default {
|
||||
name: "DictItemList",
|
||||
mixins: [JeroListMixin],
|
||||
components: {DictItemModal,JEllipsis},
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '名称',
|
||||
align: "center",
|
||||
dataIndex: 'itemText',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '数据值',
|
||||
align: "center",
|
||||
dataIndex: 'itemValue',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
scopedSlots: {customRender: 'action'},
|
||||
}
|
||||
],
|
||||
queryParam: {
|
||||
dictId: "",
|
||||
dictName: "",
|
||||
itemText: "",
|
||||
delFlag: "1",
|
||||
status: [],
|
||||
},
|
||||
title: "操作",
|
||||
visible: false,
|
||||
screenWidth: 800,
|
||||
model: {},
|
||||
dictId: "",
|
||||
status: 1,
|
||||
labelCol: {
|
||||
xs: {span: 5},
|
||||
sm: {span: 5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 12},
|
||||
sm: {span: 12},
|
||||
},
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
itemText: {rules: [{required: true, message: '请输入名称!'}]},
|
||||
itemValue: {rules: [{required: true, message: '请输入数据值!'}]},
|
||||
},
|
||||
url: {
|
||||
list: "/sys/dictItem/page",
|
||||
delete: "/sys/dictItem/delete",
|
||||
deleteBatch: "/sys/dictItem/deleteBatch",
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 当页面初始化时,根据屏幕大小来给抽屉设置宽度
|
||||
this.resetScreenSize();
|
||||
},
|
||||
methods: {
|
||||
add(dictId) {
|
||||
this.dictId = dictId;
|
||||
this.edit({});
|
||||
},
|
||||
edit(record) {
|
||||
if (record.id) {
|
||||
this.dictId = record.id;
|
||||
}
|
||||
this.queryParam = {}
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.model.dictId = this.dictId;
|
||||
this.model.status = this.status;
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'itemText', 'itemValue'))
|
||||
});
|
||||
// 当其它模块调用该模块时,调用此方法加载字典数据
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
getQueryParams() {
|
||||
//update--begin--autor:wangshuai-----date:20191204------for：清空总条数 teambition JT-113------
|
||||
this.ipagination.total=0;
|
||||
//update--end--autor:wangshuai-----date:20191204------for：清空总条数 teambition JT-113------
|
||||
var param = Object.assign({}, this.lastQueryParam);
|
||||
param.dictId = this.dictId;
|
||||
param.field = this.getQueryField();
|
||||
param.pageNo = this.ipagination.current;
|
||||
param.pageSize = this.ipagination.pageSize;
|
||||
if (this.superQueryParams) {
|
||||
param['superQueryParams'] = encodeURI(this.superQueryParams)
|
||||
param['superQueryMatchType'] = this.superQueryMatchType
|
||||
}
|
||||
return filterObj(param);
|
||||
},
|
||||
|
||||
// 添加字典数据
|
||||
handleAdd() {
|
||||
this.$refs.modalForm.add(this.dictId);
|
||||
this.$refs.modalForm.title = "新增";
|
||||
},
|
||||
showDrawer() {
|
||||
this.visible = true
|
||||
},
|
||||
onClose() {
|
||||
this.visible = false
|
||||
this.form.resetFields();
|
||||
this.dataSource = [];
|
||||
},
|
||||
// 抽屉的宽度随着屏幕大小来改变
|
||||
resetScreenSize() {
|
||||
let screenWidth = document.body.clientWidth;
|
||||
if (screenWidth < 600) {
|
||||
this.screenWidth = screenWidth;
|
||||
} else {
|
||||
this.screenWidth = 600;
|
||||
}
|
||||
},
|
||||
//update--begin--autor:wangshuai-----date:20191204------for：系统管理 数据字典禁用和正常区别开，添加背景颜色 teambition JT-22------
|
||||
//增加样式方法返回值
|
||||
getRowClassname(record){
|
||||
if(record.status==0){
|
||||
return "data-rule-invalid"
|
||||
}
|
||||
}
|
||||
//update--end--autor:wangshuai-----date:20191204------for：系统管理 数据字典禁用和正常区别开，添加背景颜色 teambition JT-22------
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
//update--begin--autor:wangshuai-----date:20191204------for：系统管理 数据字典禁用和正常区别开，添加背景颜色 teambition JT-22------
|
||||
/deep/ .data-rule-invalid{
|
||||
background: #f4f4f4;
|
||||
color: #bababa;
|
||||
}
|
||||
//update--begin--autor:wangshuai-----date:20191204------for：系统管理 数据字典禁用和正常区别开，添加背景颜色 teambition JT-22------
|
||||
</style>
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 左侧面板 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="7" :sm="8">
|
||||
<a-form-item label="字典名称" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
|
||||
<a-input placeholder="请输入字典名称" v-model="queryParam.dictName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="7" :sm="8">
|
||||
<a-form-item label="字典编号" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
|
||||
<a-input placeholder="请输入字典编号" v-model="queryParam.dictCode"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="7" :sm="8">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
|
||||
<div class="table-operator" style="border-top: 5px">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus" v-has="'sys:dict:add'">添加</a-button>
|
||||
<a-button type="primary" icon="download" @click="handleExportXls('字典信息')" v-has="'sys:dict:export'">导出</a-button>
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" v-has="'sys:dict:import'" @change="handleImportExcel">
|
||||
<a-button type="primary" icon="import">导入</a-button>
|
||||
</a-upload>
|
||||
<a-button type="primary" icon="sync" @click="refleshCache()">刷新缓存</a-button>
|
||||
|
||||
<a-button type="primary" icon="hdd" @click="openDeleteList">回收站</a-button>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
rowKey="id"
|
||||
bordered
|
||||
size="middle"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange">
|
||||
<span slot="action" slot-scope="text, record" class="action-span-cell">
|
||||
<a @click="handleEdit(record)" v-has="'sys:dict:edit'">
|
||||
<a-icon type="edit"/>
|
||||
编辑
|
||||
</a>
|
||||
<a @click="editDictItem(record)"><a-icon type="setting"/> 字典配置</a>
|
||||
<!-- <a-popconfirm title="确定删除吗?" @confirm="() =>handleDelete(record.id)">-->
|
||||
|
||||
<!-- </a-popconfirm>\-->
|
||||
<a @click="handleDelete(record.id)" v-has="'sys:dict:del'">删除</a>
|
||||
</span>
|
||||
<template slot="text" slot-scope="text">
|
||||
<span v-if="!text"></span>
|
||||
<j-ellipsis :value="text" :length="10"></j-ellipsis>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
</div>
|
||||
<dict-modal ref="modalForm" @ok="modalFormOk"></dict-modal> <!-- 字典类型 -->
|
||||
<dict-item-list ref="dictItemList"></dict-item-list>
|
||||
<dict-delete-list ref="dictDeleteList" @refresh="() =>loadData()"></dict-delete-list>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { filterObj } from '@/utils/util';
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import DictModal from './modules/DictModal'
|
||||
import DictItemList from './DictItemList'
|
||||
import DictDeleteList from './DictDeleteList'
|
||||
import { getAction } from '@api/manage'
|
||||
import { UI_CACHE_DB_DICT_DATA } from "@/store/mutation-types"
|
||||
import Vue from 'vue'
|
||||
import JEllipsis from "@comp/jero/JEllipsis";
|
||||
|
||||
export default {
|
||||
name: "DictList",
|
||||
mixins:[JeroListMixin],
|
||||
components: {DictModal, DictItemList,DictDeleteList,JEllipsis},
|
||||
data() {
|
||||
return {
|
||||
description: '这是数据字典页面',
|
||||
visible: false,
|
||||
// 查询条件
|
||||
queryParam: {
|
||||
dictCode: "",
|
||||
dictName: "",
|
||||
},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 120,
|
||||
align: "center",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '字典名称',
|
||||
align: "left",
|
||||
dataIndex: 'dictName',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '字典编号',
|
||||
align: "left",
|
||||
dataIndex: 'dictCode',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
align: "left",
|
||||
dataIndex: 'description',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
scopedSlots: {customRender: 'action'},
|
||||
}
|
||||
],
|
||||
dict: "",
|
||||
labelCol: {
|
||||
xs: {span: 8},
|
||||
sm: {span: 5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 16},
|
||||
sm: {span: 19},
|
||||
},
|
||||
url: {
|
||||
list: "/sys/dict/page",
|
||||
delete: "/sys/dict/delete",
|
||||
exportXlsUrl: "sys/dict/exportXls",
|
||||
importExcelUrl: "sys/dict/importExcel",
|
||||
refleshCache: "sys/dict/refleshCache",
|
||||
queryAllDictItems: "sys/dict/queryAllDictItems",
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
importExcelUrl: function () {
|
||||
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// getQueryParams() {
|
||||
// var param = Object.assign({}, this.queryParam, this.isorter);
|
||||
// param.field = this.getQueryField();
|
||||
// param.pageNo = this.ipagination.current;
|
||||
// param.pageSize = this.ipagination.pageSize;
|
||||
// if (this.superQueryParams) {
|
||||
// param['superQueryParams'] = encodeURI(this.superQueryParams)
|
||||
// param['superQueryMatchType'] = this.superQueryMatchType
|
||||
// }
|
||||
// return filterObj(param);
|
||||
// },
|
||||
//取消选择
|
||||
cancelDict() {
|
||||
this.dict = "";
|
||||
this.visible = false;
|
||||
this.loadData();
|
||||
},
|
||||
//编辑字典数据
|
||||
editDictItem(record) {
|
||||
this.$refs.dictItemList.edit(record);
|
||||
},
|
||||
// 重置字典类型搜索框的内容
|
||||
// searchReset() {
|
||||
// var that = this;
|
||||
// that.queryParam.dictName = "";
|
||||
// that.queryParam.dictCode = "";
|
||||
// that.loadData(this.ipagination.current);
|
||||
// },
|
||||
openDeleteList(){
|
||||
this.$refs.dictDeleteList.show()
|
||||
},
|
||||
refleshCache(){
|
||||
getAction(this.url.refleshCache).then((res) => {
|
||||
if (res.success) {
|
||||
//重新加载缓存
|
||||
getAction(this.url.queryAllDictItems).then((res) => {
|
||||
if (res.success) {
|
||||
Vue.ls.remove(UI_CACHE_DB_DICT_DATA)
|
||||
Vue.ls.set(UI_CACHE_DB_DICT_DATA, res.result, 7 * 24 * 60 * 60 * 1000)
|
||||
}
|
||||
})
|
||||
this.$message.success("刷新缓存完成！");
|
||||
}
|
||||
}).catch(e=>{
|
||||
this.$message.warn("刷新缓存失败！");
|
||||
console.log("刷新失败",e)
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
openKeys(val) {
|
||||
console.log('openKeys', val)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!--导航区域-->
|
||||
<div>
|
||||
<a-tabs defaultActiveKey="1" @change="callback">
|
||||
<a-tab-pane tab="登录日志" key="1"></a-tab-pane>
|
||||
<a-tab-pane tab="操作日志" key="2"></a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="搜索日志">
|
||||
<a-input placeholder="请输入搜索关键词" v-model="queryParam.keyWord"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="6" :sm="10">
|
||||
<a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-range-picker
|
||||
v-model="queryParam.createTimeRange"
|
||||
format="YYYY-MM-DD"
|
||||
:placeholder="['开始时间', '结束时间']"
|
||||
@change="onDateChange"
|
||||
@ok="onDateOk"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="5" :sm="8" v-if="tabKey === '2'">
|
||||
<a-form-item label="操作类型" style="left: 10px">
|
||||
<j-dict-select-tag v-model="queryParam.operateType" placeholder="请选择操作类型" dictCode="operate_type"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :md="6" :sm="24" >
|
||||
<a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px;left: 10px">重置</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange">
|
||||
|
||||
<!-- <div v-show="queryParam.logType==2" slot="expandedRowRender" slot-scope="record" style="margin: 0">-->
|
||||
<!-- <div style="margin-bottom: 5px"><a-badge status="success" style="vertical-align: middle;"/><span style="vertical-align: middle;">请求方法:{{ record.method }}</span></div>-->
|
||||
<!-- <div><a-badge status="processing" style="vertical-align: middle;"/><span style="vertical-align: middle;">请求参数:{{ record.requestParam }}</span></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
<span slot="logContent" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="40"/>
|
||||
</span>
|
||||
</a-table>
|
||||
<!-- table区域-end -->
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { filterObj } from '@/utils/util';
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import JEllipsis from '@/components/jero/JEllipsis'
|
||||
|
||||
export default {
|
||||
name: "LogList",
|
||||
mixins:[JeroListMixin],
|
||||
components: {
|
||||
JEllipsis
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '这是日志管理页面',
|
||||
// 查询条件
|
||||
queryParam: {
|
||||
ipInfo:'',
|
||||
createTimeRange:[],
|
||||
logType:'1',
|
||||
keyWord:'',
|
||||
},
|
||||
tabKey: "1",
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key:'rowIndex',
|
||||
align:"center",
|
||||
customRender:function (t,r,index) {
|
||||
return parseInt(index)+1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '日志内容',
|
||||
align:"left",
|
||||
dataIndex: 'logContent',
|
||||
scopedSlots: { customRender: 'logContent' },
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作人ID',
|
||||
dataIndex: 'userid',
|
||||
align:"center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作人名称',
|
||||
dataIndex: 'username',
|
||||
align:"center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'IP',
|
||||
dataIndex: 'ip',
|
||||
align:"center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '耗时(毫秒)',
|
||||
dataIndex: 'costTime',
|
||||
align:"center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '日志类型',
|
||||
dataIndex: 'logType_dictText',
|
||||
/*customRender:function (text) {
|
||||
if(text==1){
|
||||
return "登录日志";
|
||||
}else if(text==2){
|
||||
return "操作日志";
|
||||
}else{
|
||||
return text;
|
||||
}
|
||||
},*/
|
||||
align:"center",
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
align:"center",
|
||||
sorter: true
|
||||
}
|
||||
],
|
||||
operateColumn:
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'operateType_dictText',
|
||||
align:"center",
|
||||
},
|
||||
labelCol: {
|
||||
xs: { span: 1 },
|
||||
sm: { span: 2 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 10 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
url: {
|
||||
list: "/sys/log/page",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getQueryParams(){
|
||||
var param = Object.assign({}, this.lastQueryParam,this.isorter,{logType:this.tabKey});
|
||||
param.field = this.getQueryField();
|
||||
param.pageNo = this.ipagination.current;
|
||||
param.pageSize = this.ipagination.pageSize;
|
||||
delete param.createTimeRange; // 时间参数不传递后台
|
||||
if (this.superQueryParams) {
|
||||
param['superQueryParams'] = encodeURI(this.superQueryParams)
|
||||
param['superQueryMatchType'] = this.superQueryMatchType
|
||||
}
|
||||
return filterObj(param);
|
||||
},
|
||||
|
||||
// 重置
|
||||
searchReset(){
|
||||
var that = this;
|
||||
var logType = that.queryParam.logType;
|
||||
that.queryParam = {}; //清空查询区域参数
|
||||
that.queryParam.logType = logType;
|
||||
that.lastQueryParam = Object.assign({},this.queryParam)
|
||||
that.loadData(1);
|
||||
},
|
||||
// 日志类型
|
||||
callback(key){
|
||||
|
||||
// 动态添加操作类型列
|
||||
if (key == 2) {
|
||||
this.tabKey = '2';
|
||||
this.columns.splice(7, 0, this.operateColumn);
|
||||
}else if(this.columns.length == 9)
|
||||
{
|
||||
this.tabKey = '1';
|
||||
this.columns.splice(7,1);
|
||||
}
|
||||
|
||||
let that=this;
|
||||
that.queryParam = {}
|
||||
that.queryParam.logType=key;
|
||||
that.lastQueryParam =Object.assign({},this.queryParam)
|
||||
that.loadData();
|
||||
},
|
||||
onDateChange: function (value, dateString) {
|
||||
console.log(dateString[0],dateString[1]);
|
||||
this.queryParam.createTime_begin=dateString[0];
|
||||
this.queryParam.createTime_end=dateString[1];
|
||||
},
|
||||
onDateOk(value) {
|
||||
console.log(value);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
title="数据权限规则"
|
||||
:width="drawerWidth"
|
||||
@close="onClose"
|
||||
:visible="visible">
|
||||
|
||||
<!-- 抽屉内容的border -->
|
||||
<div
|
||||
:style="{
|
||||
padding:'10px',
|
||||
border: '1px solid #e9e9e9',
|
||||
background: '#fff',
|
||||
}">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="8" :sm="8">
|
||||
<a-form-item label="规则名称" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
|
||||
<a-input placeholder="请输入规则名称" v-model="queryParam.ruleName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="8">
|
||||
<a-form-item label="规则值" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
|
||||
<a-input placeholder="请输入规则值" v-model="queryParam.ruleValue"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="7" :sm="8">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :md="24" :sm="24">
|
||||
<a-button style="margin-bottom: 10px" @click="addPermissionRule" type="primary" icon="plus">添加</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
rowKey="id"
|
||||
size="middle"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:loading="loading"
|
||||
:rowClassName="getRowClassname">
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">
|
||||
<a-icon type="edit"/>编辑
|
||||
</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
</a-table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<permission-data-rule-modal @ok="modalFormOk" ref="modalForm"></permission-data-rule-modal>
|
||||
</a-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import {getPermissionRuleList, queryPermissionRule} from '@/api/api'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
import PermissionDataRuleModal from './modules/PermissionDataRuleModal'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '规则名称',
|
||||
dataIndex: 'ruleName',
|
||||
key: 'ruleName'
|
||||
},
|
||||
{
|
||||
title: '规则字段',
|
||||
dataIndex: 'ruleColumn',
|
||||
key: 'ruleColumn'
|
||||
},
|
||||
{
|
||||
title: '规则值',
|
||||
dataIndex: 'ruleValue',
|
||||
key: 'ruleValue'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: {customRender: 'action'},
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'PermissionDataRuleList',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
PermissionDataRuleModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
queryParam: {},
|
||||
drawerWidth: 650,
|
||||
columns: columns,
|
||||
permId: '',
|
||||
visible: false,
|
||||
form: this.$form.createForm(this),
|
||||
loading: false,
|
||||
url: {
|
||||
list: "/sys/permission/getPermRuleListByPermId",
|
||||
delete: "/sys/permission/deletePermissionRule",
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resetScreenSize()
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
//20190908 scott for: 首次进入菜单列表的时候，不加载权限列表
|
||||
if(!this.permId){
|
||||
return
|
||||
}
|
||||
let that = this
|
||||
this.dataSource = []
|
||||
var params = this.getQueryParams()//查询条件
|
||||
getPermissionRuleList(params).then((res) => {
|
||||
if (res.success) {
|
||||
that.dataSource = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
edit(record) {
|
||||
if (record.id) {
|
||||
this.visible = true
|
||||
this.permId = record.id
|
||||
}
|
||||
this.queryParam = {}
|
||||
this.queryParam.permissionId = record.id
|
||||
this.visible = true
|
||||
this.loadData()
|
||||
this.resetScreenSize()
|
||||
},
|
||||
addPermissionRule() {
|
||||
this.$refs.modalForm.add(this.permId)
|
||||
this.$refs.modalForm.title = '新增'
|
||||
},
|
||||
searchQuery() {
|
||||
var params = this.getQueryParams();
|
||||
params.permissionId = this.permId;
|
||||
queryPermissionRule(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
searchReset() {
|
||||
this.queryParam = {}
|
||||
this.queryParam.permissionId = this.permId
|
||||
this.loadData(1);
|
||||
},
|
||||
onClose() {
|
||||
this.visible = false
|
||||
},
|
||||
// 根据屏幕变化,设置抽屉尺寸
|
||||
resetScreenSize() {
|
||||
let screenWidth = document.body.clientWidth
|
||||
if (screenWidth < 500) {
|
||||
this.drawerWidth = screenWidth
|
||||
} else {
|
||||
this.drawerWidth = 650
|
||||
}
|
||||
},
|
||||
getRowClassname(record){
|
||||
if(record.status!=1){
|
||||
return "data-rule-invalid"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.data-rule-invalid{
|
||||
background: #f4f4f4;
|
||||
color: #bababa;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<!-- <div class="table-operator">-->
|
||||
<!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>-->
|
||||
<!-- <a-button-->
|
||||
<!-- @click="batchDel"-->
|
||||
<!-- v-if="selectedRowKeys.length > 0"-->
|
||||
<!-- ghost-->
|
||||
<!-- type="primary"-->
|
||||
<!-- icon="delete">批量删除-->
|
||||
<!-- </a-button>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
|
||||
<!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
|
||||
<!-- <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择 <a style="font-weight: 600">{{-->
|
||||
<!-- selectedRowKeys.length }}</a>项 -->
|
||||
<!-- <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
|
||||
<!-- </div>-->
|
||||
<!-- :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"-->
|
||||
<a-table
|
||||
:columns="columns"
|
||||
bordered
|
||||
:scroll="{x: 1500}"
|
||||
size="middle"
|
||||
:pagination="false"
|
||||
:dataSource="dataSource"
|
||||
:loading="loading"
|
||||
:expandedRowKeys="expandedRowKeys"
|
||||
@expandedRowsChange="handleExpandedRowsChange">
|
||||
|
||||
<span slot="action" slot-scope="text, record" class="action-span-cell">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">
|
||||
更多 <a-icon type="down"/>
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" @click="handleDetail(record)">详情</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" @click="handleAddSub(record)">添加下级</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" @click="handleDataRule(record)">数据规则</a>
|
||||
</a-menu-item>
|
||||
|
||||
<a-menu-item>
|
||||
<!-- <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
|
||||
<!-- </a-popconfirm>-->
|
||||
<a @click="handleDelete(record.id)">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
<!-- 字符串超长截取省略号显示 -->
|
||||
<span slot="url" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="25"/>
|
||||
</span>
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
<span slot="component" slot-scope="text">
|
||||
<j-ellipsis :value="text"/>
|
||||
</span>
|
||||
</a-table>
|
||||
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<permission-modal ref="modalForm" @ok="modalFormOk"></permission-modal>
|
||||
<permission-data-rule-list ref="PermissionDataRuleList" @ok="modalFormOk"></permission-data-rule-list>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PermissionModal from './modules/PermissionModal'
|
||||
import { getPermissionList } from '@/api/api'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import PermissionDataRuleList from './PermissionDataRuleList'
|
||||
import JEllipsis from '@/components/jero/JEllipsis'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '菜单名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
}, {
|
||||
title: '菜单类型',
|
||||
dataIndex: 'menuType',
|
||||
key: 'menuType',
|
||||
customRender: function(text) {
|
||||
if (text == 0) {
|
||||
return '菜单'
|
||||
} else if (text == 1) {
|
||||
return '菜单'
|
||||
} else if (text == 2) {
|
||||
return '按钮/权限'
|
||||
} else {
|
||||
return text
|
||||
}
|
||||
}
|
||||
},/*{
|
||||
title: '权限编码',
|
||||
dataIndex: 'perms',
|
||||
key: 'permissionCode',
|
||||
},*/{
|
||||
title: 'icon',
|
||||
dataIndex: 'icon',
|
||||
key: 'icon'
|
||||
},
|
||||
{
|
||||
title: '组件',
|
||||
dataIndex: 'component',
|
||||
key: 'component',
|
||||
scopedSlots: { customRender: 'component' }
|
||||
},
|
||||
{
|
||||
title: '路径',
|
||||
dataIndex: 'url',
|
||||
key: 'url',
|
||||
scopedSlots: { customRender: 'url' }
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNo',
|
||||
key: 'sortNo'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
fixed: 'right',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
align: 'center',
|
||||
width: 150
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'PermissionList',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
PermissionDataRuleList,
|
||||
PermissionModal,
|
||||
JEllipsis
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '这是菜单管理页面',
|
||||
// 表头
|
||||
columns: columns,
|
||||
loading: false,
|
||||
// 展开的行，受控属性
|
||||
expandedRowKeys: [],
|
||||
url: {
|
||||
list: '/sys/permission/page',
|
||||
delete: '/sys/permission/delete',
|
||||
deleteBatch: '/sys/permission/deleteBatch'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
this.dataSource = []
|
||||
getPermissionList().then((res) => {
|
||||
if (res.success) {
|
||||
console.log(res.result)
|
||||
this.dataSource = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
// 打开数据规则编辑
|
||||
handleDataRule(record) {
|
||||
this.$refs.PermissionDataRuleList.edit(record)
|
||||
},
|
||||
handleAddSub(record) {
|
||||
this.$refs.modalForm.title = "添加子菜单";
|
||||
this.$refs.modalForm.localMenuType = 1;
|
||||
this.$refs.modalForm.disableSubmit = false;
|
||||
this.$refs.modalForm.edit({status:'1',permsType:'1',route:true,'parentId':record.id});
|
||||
},
|
||||
handleExpandedRowsChange(expandedRows) {
|
||||
this.expandedRowKeys = expandedRows
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
@@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="10">
|
||||
<a-form-item label="任务类名">
|
||||
<a-input placeholder="请输入任务类名" v-model="queryParam.jobClassName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="10">
|
||||
<a-form-item label="任务状态">
|
||||
<a-select v-model="queryParam.status" placeholder="请选择状态">
|
||||
<a-select-option value="">全部</a-select-option>
|
||||
<a-select-option value="0">正常</a-select-option>
|
||||
<a-select-option value="-1">停止</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="6" :sm="10">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
<a-button type="primary" icon="download" @click="handleExportXls('定时任务信息')">导出</a-button>
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
|
||||
@change="handleImportExcel">
|
||||
<a-button type="primary" icon="import">导入</a-button>
|
||||
</a-upload>
|
||||
<a-button @click="batchDel" type="danger" icon="delete">批量删除</a-button>
|
||||
<!-- <a-dropdown v-if="selectedRowKeys.length > 0">-->
|
||||
<!-- <a-menu slot="overlay">-->
|
||||
<!-- <a-menu-item key="1" @click="batchDel">-->
|
||||
<!-- <a-icon type="delete"/>-->
|
||||
<!-- 删除-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- </a-menu>-->
|
||||
<!-- <a-button style="margin-left: 8px"> 批量操作-->
|
||||
<!-- <a-icon type="down"/>-->
|
||||
<!-- </a-button>-->
|
||||
<!-- </a-dropdown>-->
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<!-- <div>-->
|
||||
<!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
|
||||
<!-- <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a-->
|
||||
<!-- style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
|
||||
<!-- <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
<span slot="description" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="20"/>
|
||||
</span>
|
||||
<span slot="parameterRender" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="20"/>
|
||||
</span>
|
||||
|
||||
|
||||
<span slot="action" slot-scope="text, record" class="action-span-cell">
|
||||
<a @click="resumeJob(record)" v-if="record.status==-1">启动</a>
|
||||
<a @click="pauseJob(record)" v-if="record.status==0">停止</a>
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a @click="handleDelete(record.id)">删除</a>
|
||||
<!-- <a-dropdown>-->
|
||||
<!-- <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>-->
|
||||
<!-- <a-menu slot="overlay">-->
|
||||
<!-- <a-menu-item><a @click="executeImmediately(record)">立即执行</a></a-menu-item>-->
|
||||
<!-- <a-menu-item><a @click="handleEdit(record)">编辑</a></a-menu-item>-->
|
||||
<!-- <a-menu-item>-->
|
||||
<!-- <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
|
||||
|
||||
<!-- </a-popconfirm>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- </a-menu>-->
|
||||
<!-- </a-dropdown>-->
|
||||
</span>
|
||||
|
||||
<!-- 状态渲染模板 -->
|
||||
<template slot="customRenderStatus" slot-scope="status">
|
||||
<a-tag v-if="status==0" color="green">已启动</a-tag>
|
||||
<a-tag v-if="status==-1" color="orange">已暂停</a-tag>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<quartzJob-modal ref="modalForm" @ok="modalFormOk"></quartzJob-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QuartzJobModal from './modules/QuartzJobModal'
|
||||
import {getAction} from '@/api/manage'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
import JEllipsis from "@/components/jero/JEllipsis";
|
||||
|
||||
export default {
|
||||
name: "QuartzJobList",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
QuartzJobModal,
|
||||
JEllipsis
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '定时任务在线管理',
|
||||
// 查询条件
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: "center",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '任务类名',
|
||||
align: "center",
|
||||
dataIndex: 'jobClassName',
|
||||
sorter: true,
|
||||
/* customRender:function (text) {
|
||||
return "*"+text.substring(9,text.length);
|
||||
}*/
|
||||
},
|
||||
{
|
||||
title: 'cron表达式',
|
||||
align: "center",
|
||||
dataIndex: 'cronExpression'
|
||||
},
|
||||
{
|
||||
title: '参数',
|
||||
align: "center",
|
||||
width: 150,
|
||||
dataIndex: 'parameter',
|
||||
scopedSlots: {customRender: 'parameterRender'},
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
align: "center",
|
||||
width: 250,
|
||||
dataIndex: 'description',
|
||||
scopedSlots: {customRender: 'description'},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
align: "center",
|
||||
dataIndex: 'status',
|
||||
scopedSlots: {customRender: 'customRenderStatus'},
|
||||
filterMultiple: false,
|
||||
filters: [
|
||||
{text: '已启动', value: '0'},
|
||||
{text: '已暂停', value: '-1'},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
width: 180,
|
||||
scopedSlots: {customRender: 'action'},
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: "/sys/quartzJob/page",
|
||||
delete: "/sys/quartzJob/delete",
|
||||
deleteBatch: "/sys/quartzJob/deleteBatch",
|
||||
pause: "/sys/quartzJob/pause",
|
||||
resume: "/sys/quartzJob/resume",
|
||||
exportXlsUrl: "sys/quartzJob/exportXls",
|
||||
importExcelUrl: "sys/quartzJob/importExcel",
|
||||
execute: "sys/quartzJob/execute"
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
importExcelUrl: function () {
|
||||
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
//筛选需要重写handleTableChange
|
||||
handleTableChange(pagination, filters, sorter) {
|
||||
//分页、排序、筛选变化时触发
|
||||
//TODO 筛选
|
||||
if (Object.keys(sorter).length > 0) {
|
||||
this.isorter.column = sorter.field;
|
||||
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
|
||||
}
|
||||
//这种筛选方式只支持单选
|
||||
this.filters.status = filters.status[0];
|
||||
this.ipagination = pagination;
|
||||
this.loadData();
|
||||
},
|
||||
pauseJob: function (record) {
|
||||
var that = this;
|
||||
//暂停定时任务
|
||||
this.$confirm({
|
||||
title: "确认暂停",
|
||||
content: "是否暂停选中任务?",
|
||||
onOk: function () {
|
||||
getAction(that.url.pause, {jobClassName: record.jobClassName}).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.loadData();
|
||||
that.onClearSelected();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
resumeJob: function (record) {
|
||||
var that = this;
|
||||
//恢复定时任务
|
||||
this.$confirm({
|
||||
title: "确认启动",
|
||||
content: "是否启动选中任务?",
|
||||
onOk: function () {
|
||||
getAction(that.url.resume, {jobClassName: record.jobClassName}).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.loadData();
|
||||
that.onClearSelected();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
executeImmediately(record) {
|
||||
var that = this;
|
||||
//立即执行定时任务
|
||||
this.$confirm({
|
||||
title: "确认提示",
|
||||
content: "是否立即执行任务?",
|
||||
onOk: function () {
|
||||
getAction(that.url.execute, {id: record.id}).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.loadData();
|
||||
that.onClearSelected();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
@@ -0,0 +1,405 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<!-- 搜索区域 -->
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="6" :sm="12">
|
||||
<a-form-item label="角色名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
|
||||
<a-input placeholder="请输入角色名称" v-model="queryParam.roleName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 21px">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator" style="margin: 5px 0 10px 2px">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus" v-has="'sys:role:add'">新建角色</a-button>
|
||||
<a-button @click="batchDel" type="danger" icon="delete">批量删除</a-button>
|
||||
</div>
|
||||
<div style="margin-top: 15px">
|
||||
<a-table
|
||||
style="height:500px"
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
<span slot="action" class="action-span-cell" slot-scope="text, record">
|
||||
<a @click="handlePerssion(record.id)">授权</a>
|
||||
<a @click="handleEdit(record)" v-has="'sys:role:edit'">编辑</a>
|
||||
<a @click="handleDelete1(record.id)" v-has="'sys:role:del'">删除</a>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<user-role-modal ref="modalUserRole"></user-role-modal>
|
||||
<role-modal ref="modalForm" @ok="modalFormOk"></role-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
import { JeroListMixin } from "@/mixins/JeroListMixin";
|
||||
import { deleteAction, postAction, getAction } from "@/api/manage";
|
||||
import RoleModal from "./modules/RoleModal";
|
||||
import { filterObj } from "@/utils/util";
|
||||
import UserRoleModal from "./modules/UserRoleModal";
|
||||
import moment from "moment";
|
||||
|
||||
export default {
|
||||
name: "RoleUserList",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
UserRoleModal,
|
||||
RoleModal,
|
||||
moment
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model1: {},
|
||||
model2: {},
|
||||
currentRoleId: "",
|
||||
queryParam1: {},
|
||||
queryParam2: {},
|
||||
dataSource1: [],
|
||||
dataSource2: [],
|
||||
selectedRowKeys: [],
|
||||
ipagination1: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ["10", "20", "30"],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + "-" + range[1] + " 共" + total + "条";
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
ipagination2: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ["10", "20", "30"],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + "-" + range[1] + " 共" + total + "条";
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
isorter1: {
|
||||
column: "createTime",
|
||||
order: "desc"
|
||||
},
|
||||
isorter2: {
|
||||
column: "createTime",
|
||||
order: "desc"
|
||||
},
|
||||
filters1: {},
|
||||
filters2: {},
|
||||
loading1: false,
|
||||
loading2: false,
|
||||
selectedRowKeys1: [],
|
||||
selectedRowKeys2: [],
|
||||
selectionRows1: [],
|
||||
selectionRows2: [],
|
||||
test: {},
|
||||
rightcolval: 0,
|
||||
columns:
|
||||
[
|
||||
{
|
||||
title: "角色编码",
|
||||
align: "center",
|
||||
dataIndex: "roleCode"
|
||||
},
|
||||
{
|
||||
title: "角色名称",
|
||||
align: "center",
|
||||
dataIndex: "roleName"
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
dataIndex: "createTime",
|
||||
align: "center",
|
||||
sorter: true,
|
||||
customRender: (text) => {
|
||||
return moment(text).format("YYYY-MM-DD");
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "action",
|
||||
align: "center",
|
||||
scopedSlots: { customRender: "action" }
|
||||
}
|
||||
],
|
||||
columns2: [{
|
||||
title: "用户账号",
|
||||
align: "center",
|
||||
dataIndex: "username",
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: "用户名称",
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: "realname"
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
align: "center",
|
||||
width: 80,
|
||||
dataIndex: "status_dictText"
|
||||
},
|
||||
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "action",
|
||||
scopedSlots: { customRender: "action" },
|
||||
align: "center",
|
||||
width: 120
|
||||
}],
|
||||
|
||||
// 高级查询参数
|
||||
superQueryParams2: "",
|
||||
// 高级查询拼接条件
|
||||
superQueryMatchType2: "and",
|
||||
url: {
|
||||
list: "/sys/role/page",
|
||||
delete: "/sys/role/delete",
|
||||
deleteBatch: "/sys/role/deleteBatch",
|
||||
list2: "/sys/user/userRoleList",
|
||||
addUserRole: "/sys/user/addSysUserRole",
|
||||
delete2: "/sys/user/deleteUserRole",
|
||||
deleteBatch2: "/sys/user/deleteUserRoleBatch",
|
||||
exportXlsUrl: "sys/role/exportXls",
|
||||
importExcelUrl: "sys/role/importExcel"
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
importExcelUrl: function() {
|
||||
return `${window._CONFIG["domianURL"]}/${this.url.importExcelUrl}`;
|
||||
},
|
||||
leftColMd() {
|
||||
return this.selectedRowKeys1.length === 0 ? 24 : 12;
|
||||
},
|
||||
rightColMd() {
|
||||
return this.selectedRowKeys1.length === 0 ? 0 : 12;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSelectChange2(selectedRowKeys, selectionRows) {
|
||||
this.selectedRowKeys2 = selectedRowKeys;
|
||||
this.selectionRows2 = selectionRows;
|
||||
},
|
||||
onClearSelected2() {
|
||||
this.selectedRowKeys2 = [];
|
||||
this.selectionRows2 = [];
|
||||
},
|
||||
onClearSelected1() {
|
||||
this.selectedRowKeys1 = [];
|
||||
this.selectionRows1 = [];
|
||||
},
|
||||
onSelectChange1(selectedRowKeys, selectionRows) {
|
||||
this.rightcolval = 1;
|
||||
this.selectedRowKeys1 = selectedRowKeys;
|
||||
this.selectionRows1 = selectionRows;
|
||||
this.model1 = Object.assign({}, selectionRows[0]);
|
||||
console.log(this.model1);
|
||||
this.currentRoleId = selectedRowKeys[0];
|
||||
this.loadData2();
|
||||
},
|
||||
onClearSelected() {
|
||||
},
|
||||
|
||||
getQueryParams2() {
|
||||
//获取查询条件
|
||||
let sqp = {};
|
||||
if (this.superQueryParams2) {
|
||||
sqp["superQueryParams"] = encodeURI(this.superQueryParams2);
|
||||
sqp["superQueryMatchType"] = this.superQueryMatchType2;
|
||||
}
|
||||
var param = Object.assign(sqp, this.queryParam2, this.isorter2, this.filters2);
|
||||
param.field = this.getQueryField2();
|
||||
param.pageNo = this.ipagination2.current;
|
||||
param.pageSize = this.ipagination2.pageSize;
|
||||
return filterObj(param);
|
||||
},
|
||||
getQueryField2() {
|
||||
//TODO 字段权限控制
|
||||
var str = "id,";
|
||||
this.columns2.forEach(function(value) {
|
||||
str += "," + value.dataIndex;
|
||||
});
|
||||
return str;
|
||||
},
|
||||
handleEdit2: function(record) {
|
||||
this.$refs.modalForm2.title = "编辑";
|
||||
this.$refs.modalForm2.roleDisabled = true;
|
||||
this.$refs.modalForm2.edit(record);
|
||||
},
|
||||
handleAdd2: function() {
|
||||
if (this.currentRoleId == "") {
|
||||
this.$message.error("请选择一个角色!");
|
||||
} else {
|
||||
this.$refs.modalForm2.roleDisabled = true;
|
||||
this.$refs.modalForm2.selectedRole = [this.currentRoleId];
|
||||
|
||||
this.$refs.modalForm2.add();
|
||||
|
||||
this.$refs.modalForm2.title = "新增";
|
||||
}
|
||||
},
|
||||
modalFormOk2() {
|
||||
// 新增/修改 成功时，重载列表
|
||||
this.loadData2();
|
||||
},
|
||||
loadData2(arg) {
|
||||
if (!this.url.list2) {
|
||||
this.$message.error("请设置url.list2属性!");
|
||||
return;
|
||||
}
|
||||
//加载数据 若传入参数1则加载第一页的内容
|
||||
if (arg === 1) {
|
||||
this.ipagination2.current = 1;
|
||||
}
|
||||
if (this.currentRoleId === "") return;
|
||||
let params = this.getQueryParams2();//查询条件
|
||||
params.roleId = this.currentRoleId;
|
||||
this.loading2 = true;
|
||||
getAction(this.url.list2, params).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource2 = res.result.records;
|
||||
this.ipagination2.total = res.result.total;
|
||||
|
||||
}
|
||||
this.loading2 = false;
|
||||
});
|
||||
|
||||
},
|
||||
handleDelete1: function(id) {
|
||||
this.handleDelete(id);
|
||||
this.dataSource2 = [];
|
||||
this.currentRoleId = "";
|
||||
},
|
||||
handleDelete2: function(id) {
|
||||
if (!this.url.delete2) {
|
||||
this.$message.error("请设置url.delete2属性!");
|
||||
return;
|
||||
}
|
||||
var that = this;
|
||||
deleteAction(that.url.delete2, { roleId: this.currentRoleId, userId: id }).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.loadData2();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
batchDel2: function() {
|
||||
|
||||
if (!this.url.deleteBatch2) {
|
||||
this.$message.error("请设置url.deleteBatch2属性!");
|
||||
return;
|
||||
}
|
||||
if (this.selectedRowKeys2.length <= 0) {
|
||||
this.$message.warning("请选择一条记录！");
|
||||
return;
|
||||
} else {
|
||||
var ids = "";
|
||||
for (var a = 0; a < this.selectedRowKeys2.length; a++) {
|
||||
ids += this.selectedRowKeys2[a] + ",";
|
||||
}
|
||||
var that = this;
|
||||
console.log(this.currentDeptId);
|
||||
this.$confirm({
|
||||
title: "确认删除",
|
||||
content: "是否删除选中数据?",
|
||||
onOk: function() {
|
||||
deleteAction(that.url.deleteBatch2, { roleId: that.currentRoleId, userIds: ids }).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.loadData2();
|
||||
that.onClearSelected();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
selectOK(data) {
|
||||
let params = {};
|
||||
params.roleId = this.currentRoleId;
|
||||
params.userIdList = [];
|
||||
for (var a = 0; a < data.length; a++) {
|
||||
params.userIdList.push(data[a]);
|
||||
}
|
||||
console.log(params);
|
||||
postAction(this.url.addUserRole, params).then((res) => {
|
||||
if (res.success) {
|
||||
this.loadData2();
|
||||
this.$message.success(res.message);
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleAddUserRole() {
|
||||
if (this.currentRoleId == "") {
|
||||
this.$message.error("请选择一个角色!");
|
||||
} else {
|
||||
this.$refs.selectUserModal.visible = true;
|
||||
}
|
||||
},
|
||||
handleOpen(record) {
|
||||
this.rightcolval = 1;
|
||||
this.selectedRowKeys1 = [record.id];
|
||||
this.model1 = Object.assign({}, record);
|
||||
this.currentRoleId = record.id;
|
||||
this.onClearSelected2();
|
||||
this.loadData2();
|
||||
},
|
||||
searchQuery2() {
|
||||
this.loadData2(1);
|
||||
},
|
||||
searchReset2() {
|
||||
this.queryParam2 = {};
|
||||
this.loadData2(1);
|
||||
},
|
||||
handleTableChange2(pagination, filters, sorter) {
|
||||
//分页、排序、筛选变化时触发
|
||||
//TODO 筛选
|
||||
if (Object.keys(sorter).length > 0) {
|
||||
this.isorter2.column = sorter.field;
|
||||
this.isorter2.order = "ascend" == sorter.order ? "asc" : "desc";
|
||||
}
|
||||
this.ipagination2 = pagination;
|
||||
this.loadData2();
|
||||
},
|
||||
hideUserList() {
|
||||
//this.rightcolval = 0
|
||||
this.selectedRowKeys1 = [];
|
||||
},
|
||||
handlePerssion(roleId) {
|
||||
this.$refs.modalUserRole.show(roleId);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
<a-button type="primary" icon="download" @click="handleExportXls('分类字典')">导出</a-button>
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
|
||||
<a-button type="primary" icon="import">导入</a-button>
|
||||
</a-upload>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:expandedRowKeys="expandedRowKeys"
|
||||
@change="handleTableChange"
|
||||
@expand="handleExpand"
|
||||
v-bind="tableProps">
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="handleAddSub(record)">添加下级</a>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<sysCategory-modal ref="modalForm" @ok="modalFormOk"></sysCategory-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { getAction } from '@/api/manage'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import SysCategoryModal from './modules/SysCategoryModal'
|
||||
import { deleteAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "SysCategoryList",
|
||||
mixins:[JeroListMixin],
|
||||
components: {
|
||||
SysCategoryModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '分类字典管理页面',
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title:'分类名称',
|
||||
align:"left",
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title:'分类编码',
|
||||
align:"left",
|
||||
dataIndex: 'code'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align:"center",
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: "/sys/category/rootList",
|
||||
childList: "/sys/category/childList",
|
||||
getChildListBatch: "/sys/category/getChildListBatch",
|
||||
delete: "/sys/category/delete",
|
||||
deleteBatch: "/sys/category/deleteBatch",
|
||||
exportXlsUrl: "/sys/category/exportXls",
|
||||
importExcelUrl: "sys/category/importExcel",
|
||||
},
|
||||
expandedRowKeys:[],
|
||||
hasChildrenField:"hasChild",
|
||||
pidField:"pid",
|
||||
dictOptions:{
|
||||
},
|
||||
subExpandedKeys:[],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
importExcelUrl(){
|
||||
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
||||
},
|
||||
tableProps() {
|
||||
let _this = this
|
||||
return {
|
||||
// 列表项是否可选择
|
||||
rowSelection: {
|
||||
selectedRowKeys: _this.selectedRowKeys,
|
||||
onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData(arg){
|
||||
if(arg==1){
|
||||
this.ipagination.current=1
|
||||
}
|
||||
this.loading = true
|
||||
let params = this.getQueryParams()
|
||||
return new Promise((resolve) => {
|
||||
getAction(this.url.list,params).then(res=>{
|
||||
if(res.success){
|
||||
let result = res.result
|
||||
if(Number(result.total)>0){
|
||||
this.ipagination.total = Number(result.total)
|
||||
this.dataSource = this.getDataByResult(res.result.records)
|
||||
//update--begin--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
|
||||
return this.loadDataByExpandedRows(this.dataSource)
|
||||
//update--end--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
|
||||
}else{
|
||||
this.ipagination.total=0
|
||||
this.dataSource=[]
|
||||
}
|
||||
}else{
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(()=>{
|
||||
this.loading = false
|
||||
})
|
||||
})
|
||||
},
|
||||
getDataByResult(result){
|
||||
return result.map(item=>{
|
||||
//判断是否标记了带有子节点
|
||||
if(item[this.hasChildrenField]=='1'){
|
||||
let loadChild = { id: item.id+'_loadChild', name: 'loading...', isLoading: true }
|
||||
item.children = [loadChild]
|
||||
}
|
||||
return item
|
||||
})
|
||||
},
|
||||
handleExpand(expanded, record){
|
||||
// 判断是否是展开状态
|
||||
if (expanded) {
|
||||
this.expandedRowKeys.push(record.id)
|
||||
if (record.children.length>0 && record.children[0].isLoading === true) {
|
||||
let params = this.getQueryParams();//查询条件
|
||||
params[this.pidField] = record.id
|
||||
getAction(this.url.childList,params).then((res)=>{
|
||||
if(res.success){
|
||||
if(res.result && res.result.length>0){
|
||||
record.children = this.getDataByResult(res.result)
|
||||
this.dataSource = [...this.dataSource]
|
||||
}else{
|
||||
record.children=''
|
||||
record.hasChildrenField='0'
|
||||
}
|
||||
}else{
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
}
|
||||
}else{
|
||||
let keyIndex = this.expandedRowKeys.indexOf(record.id)
|
||||
if(keyIndex>=0){
|
||||
this.expandedRowKeys.splice(keyIndex, 1);
|
||||
}
|
||||
}
|
||||
},
|
||||
initDictConfig(){
|
||||
},
|
||||
modalFormOk(formData,arr){
|
||||
if(!formData.id){
|
||||
this.addOk(formData,arr)
|
||||
}else{
|
||||
this.editOk(formData,this.dataSource)
|
||||
this.dataSource=[...this.dataSource]
|
||||
}
|
||||
},
|
||||
editOk(formData,arr){
|
||||
if(arr && arr.length>0){
|
||||
for(let i=0;i<arr.length;i++){
|
||||
if(arr[i].id==formData.id){
|
||||
arr[i]=formData
|
||||
break
|
||||
}else{
|
||||
this.editOk(formData,arr[i].children)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async addOk(formData,arr){
|
||||
if(!formData[this.pidField]){
|
||||
this.loadData()
|
||||
}else{
|
||||
this.expandedRowKeys=[]
|
||||
console.log("22222",arr)
|
||||
for(let i of arr){
|
||||
await this.expandTreeNode(i)
|
||||
}
|
||||
}
|
||||
},
|
||||
expandTreeNode(nodeId){
|
||||
return new Promise((resolve,reject)=>{
|
||||
this.getFormDataById(nodeId,this.dataSource)
|
||||
let row = this.parentFormData
|
||||
this.expandedRowKeys.push(nodeId)
|
||||
let params = this.getQueryParams();//查询条件
|
||||
params[this.pidField] = nodeId
|
||||
getAction(this.url.childList,params).then((res)=>{
|
||||
console.log("11111",res)
|
||||
if(res.success){
|
||||
if(res.result && res.result.length>0){
|
||||
row.children = this.getDataByResult(res.result)
|
||||
this.dataSource = [...this.dataSource]
|
||||
resolve()
|
||||
}else{
|
||||
row.children=''
|
||||
row.hasChildrenField='0'
|
||||
reject()
|
||||
}
|
||||
}else{
|
||||
reject()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
getFormDataById(id,arr){
|
||||
if(arr && arr.length>0){
|
||||
for(let i=0;i<arr.length;i++){
|
||||
if(arr[i].id==id){
|
||||
this.parentFormData = arr[i]
|
||||
}else{
|
||||
this.getFormDataById(id,arr[i].children)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
handleAddSub(record){
|
||||
this.subExpandedKeys = [];
|
||||
this.getExpandKeysByPid(record.id,this.dataSource,this.dataSource)
|
||||
this.$refs.modalForm.subExpandedKeys = this.subExpandedKeys;
|
||||
this.$refs.modalForm.title = "添加子分类";
|
||||
this.$refs.modalForm.edit({'pid':record.id});
|
||||
this.$refs.modalForm.disableSubmit = false;
|
||||
},
|
||||
handleDelete: function (record) {
|
||||
let that = this;
|
||||
deleteAction(that.url.delete, {id: record.id}).then((res) => {
|
||||
if (res.success) {
|
||||
//update--begin--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
|
||||
that.loadData();
|
||||
//update--end--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加子分类时获取所有父级id
|
||||
getExpandKeysByPid(pid,arr,all){
|
||||
if(pid && arr && arr.length>0){
|
||||
for(let i=0;i<arr.length;i++){
|
||||
if(arr[i].id==pid){
|
||||
this.subExpandedKeys.push(arr[i].id)
|
||||
this.getExpandKeysByPid(arr[i]['pid'],all,all)
|
||||
}else{
|
||||
this.getExpandKeysByPid(pid,arr[i].children,all)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 根据已展开的行查询数据（用于保存后刷新时异步加载子级的数据）
|
||||
loadDataByExpandedRows(dataList) {
|
||||
if (this.expandedRowKeys.length > 0) {
|
||||
return getAction(this.url.getChildListBatch,{ parentIds: this.expandedRowKeys.join(',') }).then(res=>{
|
||||
if (res.success && res.result.records.length>0) {
|
||||
//已展开的数据批量子节点
|
||||
let records = res.result.records
|
||||
const listMap = new Map();
|
||||
for (let item of records) {
|
||||
let pid = item[this.pidField];
|
||||
if (this.expandedRowKeys.join(',').includes(pid)) {
|
||||
let mapList = listMap.get(pid);
|
||||
if (mapList == null) {
|
||||
mapList = [];
|
||||
}
|
||||
mapList.push(item);
|
||||
listMap.set(pid, mapList);
|
||||
}
|
||||
}
|
||||
let childrenMap = listMap;
|
||||
let fn = (list) => {
|
||||
if(list) {
|
||||
list.forEach(data => {
|
||||
if (this.expandedRowKeys.includes(data.id)) {
|
||||
data.children = this.getDataByResult(childrenMap.get(data.id))
|
||||
fn(data.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
fn(dataList)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return Promise.resolve()
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less'
|
||||
</style>
|
||||
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="规则名称">
|
||||
<a-input placeholder="请输入规则名称" v-model="queryParam.ruleName"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="规则Code">
|
||||
<a-input placeholder="请输入规则Code" v-model="queryParam.ruleCode"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<template v-if="toggleSearchStatus">
|
||||
</template>
|
||||
<a-col :md="6" :sm="8">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
<a @click="handleToggleSearch" style="margin-left: 8px">
|
||||
{{ toggleSearchStatus ? '收起' : '展开' }}
|
||||
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
|
||||
</a>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
<a-button type="primary" icon="download" @click="handleExportXls('编码校验规则')">导出</a-button>
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
|
||||
<a-button type="primary" icon="import">导入</a-button>
|
||||
</a-upload>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel">
|
||||
<a-icon type="delete"/>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作
|
||||
<a-icon type="down"/>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<a-alert type="info" showIcon style="margin-bottom: 16px;">
|
||||
<template slot="message">
|
||||
<span>已选择</span>
|
||||
<a style="font-weight: 600;padding: 0 4px;">{{ selectedRowKeys.length }}</a>
|
||||
<span>项</span>
|
||||
<template v-if="selectedRowKeys.length>0">
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="onClearSelected">清空</a>
|
||||
</template>
|
||||
</template>
|
||||
</a-alert>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<template slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="handleTest(record)">功能测试</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">
|
||||
<span>更多</span>
|
||||
<a-icon type="down"/>
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗？" @confirm="handleDelete(record.id)">删除</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
</a-table>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<sys-check-rule-modal ref="modalForm" @ok="modalFormOk"/>
|
||||
|
||||
<sys-check-rule-test-modal ref="testModal"/>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JEllipsis from '@/components/jero/JEllipsis'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import SysCheckRuleModal from './modules/SysCheckRuleModal'
|
||||
import SysCheckRuleTestModal from './modules/SysCheckRuleTestModal'
|
||||
|
||||
export default {
|
||||
name: 'SysCheckRuleList',
|
||||
mixins: [JeroListMixin],
|
||||
components: { SysCheckRuleModal, SysCheckRuleTestModal, JEllipsis },
|
||||
data() {
|
||||
return {
|
||||
description: '编码校验规则管理页面',
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: (t, r, i) => i + 1
|
||||
},
|
||||
{
|
||||
title: '规则名称',
|
||||
align: 'center',
|
||||
dataIndex: 'ruleName'
|
||||
},
|
||||
{
|
||||
title: '规则Code',
|
||||
align: 'center',
|
||||
dataIndex: 'ruleCode'
|
||||
},
|
||||
{
|
||||
title: '规则描述',
|
||||
align: 'center',
|
||||
dataIndex: 'ruleDescription',
|
||||
customRender: (t) => (<j-ellipsis value={t} length={48}/>)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: '/sys/checkRule/page',
|
||||
delete: '/sys/checkRule/delete',
|
||||
deleteBatch: '/sys/checkRule/deleteBatch',
|
||||
exportXlsUrl: 'sys/checkRule/exportXls',
|
||||
importExcelUrl: 'sys/checkRule/importExcel',
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
importExcelUrl: function () {
|
||||
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTest(record) {
|
||||
this.$refs.testModal.open(record.ruleCode)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- 查询区域-END -->
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
:scroll="{x:true}"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
class="j-table-force-nowrap"
|
||||
@change="handleTableChange">
|
||||
|
||||
<template slot="htmlSlot" slot-scope="text">
|
||||
<div v-html="text"></div>
|
||||
</template>
|
||||
<template slot="imgSlot" slot-scope="text">
|
||||
<span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
|
||||
<img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
|
||||
</template>
|
||||
<template slot="fileSlot" slot-scope="text">
|
||||
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
|
||||
<a-button
|
||||
v-else
|
||||
:ghost="true"
|
||||
type="primary"
|
||||
icon="download"
|
||||
size="small"
|
||||
@click="uploadFile(text)">
|
||||
下载
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a @click="handleDetail(record)">详情</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<tenant-modal ref="modalForm" @ok="modalFormOk"></tenant-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import '@/assets/less/TableExpand.less'
|
||||
import { mixinDevice } from '@/utils/mixin'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import TenantModal from './modules/TenantModal'
|
||||
|
||||
|
||||
export default {
|
||||
name: "TenantList",
|
||||
mixins:[JeroListMixin, mixinDevice],
|
||||
components: {
|
||||
TenantModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: 'adad管理页面',
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title:'租户名称',
|
||||
align:"center",
|
||||
dataIndex: 'name'
|
||||
},{
|
||||
title:'租户编号',
|
||||
align:"center",
|
||||
dataIndex: 'id'
|
||||
},
|
||||
{
|
||||
title:'开始时间',
|
||||
align:"center",
|
||||
dataIndex: 'beginDate'
|
||||
},
|
||||
{
|
||||
title:'结束时间',
|
||||
align:"center",
|
||||
dataIndex: 'endDate'
|
||||
},
|
||||
{
|
||||
title:'状态',
|
||||
align:"center",
|
||||
dataIndex: 'status_dictText'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align:"center",
|
||||
fixed:"right",
|
||||
width:147,
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: "/sys/tenant/page",
|
||||
delete: "/sys/tenant/delete",
|
||||
deleteBatch: "/sys/tenant/deleteBatch"
|
||||
},
|
||||
dictOptions:{},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
computed: {
|
||||
importExcelUrl: function(){
|
||||
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initDictConfig(){
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :span="6">
|
||||
<a-form-item label="标题">
|
||||
<a-input placeholder="请输入标题" v-model="queryParam.titile"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="发布人">
|
||||
<a-input placeholder="请输入发布人" v-model="queryParam.sender"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="8" >
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" @click="readAll" icon="book">全部标注已读</a-button>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="default"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange">
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="showAnnouncement(record)">查看</a>
|
||||
</span>
|
||||
</a-table>
|
||||
<show-announcement ref="ShowAnnouncement"></show-announcement>
|
||||
<dynamic-notice ref="showDynamNotice" :path="openPath" :formData="formData"/>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { filterObj } from '@/utils/util'
|
||||
import { getAction,putAction } from '@/api/manage'
|
||||
import ShowAnnouncement from '@/components/tools/ShowAnnouncement'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
import DynamicNotice from '../../components/tools/DynamicNotice'
|
||||
|
||||
export default {
|
||||
name: "UserAnnouncementList",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
DynamicNotice,
|
||||
ShowAnnouncement
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '系统通告表管理页面',
|
||||
queryParam: {},
|
||||
columns: [{
|
||||
title: '标题',
|
||||
align:"center",
|
||||
dataIndex: 'titile'
|
||||
},{
|
||||
title: '消息类型',
|
||||
align: "center",
|
||||
dataIndex: 'msgCategory',
|
||||
customRender: function (text) {
|
||||
if (text == '1') {
|
||||
return "通知公告";
|
||||
} else if (text == "2") {
|
||||
return "系统消息";
|
||||
} else {
|
||||
return text;
|
||||
}
|
||||
}
|
||||
},{
|
||||
title: '发布人',
|
||||
align:"center",
|
||||
dataIndex: 'sender'
|
||||
},{
|
||||
title: '发布时间',
|
||||
align:"center",
|
||||
dataIndex: 'sendTime'
|
||||
},{
|
||||
title: '优先级',
|
||||
align:"center",
|
||||
dataIndex: 'priority',
|
||||
customRender:function (text) {
|
||||
if(text=='L'){
|
||||
return "低";
|
||||
}else if(text=="M"){
|
||||
return "中";
|
||||
}else if(text=="H"){
|
||||
return "高";
|
||||
} else {
|
||||
return text;
|
||||
}
|
||||
}
|
||||
},{
|
||||
title: '阅读状态',
|
||||
align:"center",
|
||||
dataIndex: 'readFlag',
|
||||
customRender:function (text) {
|
||||
if(text=='0'){
|
||||
return "未读";
|
||||
}else if(text=="1"){
|
||||
return "已读";
|
||||
} else {
|
||||
return text;
|
||||
}
|
||||
}
|
||||
},{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align:"center",
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}],
|
||||
url: {
|
||||
list: "/sys/sysAnnouncementSend/getMyAnnouncementSend",
|
||||
editCementSend:"sys/sysAnnouncementSend/editByAnntIdAndUserId",
|
||||
readAllMsg:"sys/sysAnnouncementSend/readAll",
|
||||
},
|
||||
loading:false,
|
||||
openPath:'',
|
||||
formData:''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDetail: function(record){
|
||||
this.$refs.sysAnnouncementModal.detail(record);
|
||||
this.$refs.sysAnnouncementModal.title="查看";
|
||||
},
|
||||
showAnnouncement(record){
|
||||
putAction(this.url.editCementSend,{anntId:record.anntId}).then((res)=>{
|
||||
if(res.success){
|
||||
this.loadData();
|
||||
this.syncHeadNotic(record.anntId)
|
||||
}
|
||||
});
|
||||
if(record.openType==='component'){
|
||||
this.openPath = record.openPage;
|
||||
this.formData = {id:record.busId};
|
||||
this.$refs.showDynamNotice.detail();
|
||||
}else{
|
||||
this.$refs.ShowAnnouncement.detail(record);
|
||||
}
|
||||
},
|
||||
syncHeadNotic(anntId){
|
||||
getAction("sys/annountCement/syncNotic",{anntId:anntId})
|
||||
},
|
||||
readAll(){
|
||||
var that = this;
|
||||
that.$confirm({
|
||||
title:"确认操作",
|
||||
content:"是否全部标注已读?",
|
||||
onOk: function(){
|
||||
putAction(that.url.readAllMsg).then((res)=>{
|
||||
if(res.success){
|
||||
that.$message.success(res.message);
|
||||
that.loadData();
|
||||
that.syncHeadNotic();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card-body .table-operator{
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.anty-row-operator button{margin: 0 5px}
|
||||
.ant-btn-danger{background-color: #ffffff}z
|
||||
|
||||
.ant-modal-cust-warp{height: 100%}
|
||||
.ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
|
||||
.ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
|
||||
</style>
|
||||
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="12">
|
||||
<a-form-item label="用户账号">
|
||||
<j-input placeholder="请输入用户账号" v-model="queryParam.username"></j-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="6" :sm="8">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator" style="border-top: 5px">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus" v-has="'user:add'">添加用户</a-button>
|
||||
<a-button @click="batchDel" type="danger" icon="delete">批量删除</a-button>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
bordered
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<span slot="action" class="action-span-cell" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)" v-has="'user:edit'">编辑</a>
|
||||
<a @click="handleDelete(record.id)" v-has="'sys:user:del'">删除</a>
|
||||
</span>
|
||||
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<user-modal ref="modalForm" @ok="modalFormOk"></user-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserModal from "./modules/UserModal";
|
||||
import { putAction, getFileAccessHttpUrl } from "@/api/manage";
|
||||
import { frozenBatch } from "@/api/api";
|
||||
import { JeroListMixin } from "@/mixins/JeroListMixin";
|
||||
import JInput from "@/components/jero/JInput";
|
||||
|
||||
export default {
|
||||
name: "UserList",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
UserModal,
|
||||
JInput
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: "这是用户管理页面",
|
||||
columns: [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "",
|
||||
key: "rowIndex",
|
||||
width: 60,
|
||||
align: "center",
|
||||
customRender: function(t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "用户账号",
|
||||
align: "center",
|
||||
dataIndex: "username",
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: "用户姓名",
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: "realname"
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
align: "center",
|
||||
width: 80,
|
||||
dataIndex: "sex_dictText",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: "手机号码",
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: "phone"
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
align: "center",
|
||||
width: 180,
|
||||
dataIndex: "orgCodeTxt"
|
||||
},
|
||||
// {
|
||||
// title: '生日',
|
||||
// align: "center",
|
||||
// width: 100,
|
||||
// dataIndex: 'birthday'
|
||||
// },
|
||||
// {
|
||||
// title: '负责部门',
|
||||
// align: "center",
|
||||
// width: 180,
|
||||
// dataIndex: 'departIds_dictText'
|
||||
// },
|
||||
{
|
||||
title: "状态",
|
||||
align: "center",
|
||||
width: 80,
|
||||
dataIndex: "status_dictText"
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "action",
|
||||
scopedSlots: { customRender: "action" },
|
||||
align: "center",
|
||||
width: 170
|
||||
}
|
||||
],
|
||||
superQueryFieldList: [
|
||||
{ type: "input", value: "username", text: "用户账号" }
|
||||
],
|
||||
url: {
|
||||
list: "/sys/user/page",
|
||||
delete: "/sys/user/delete",
|
||||
deleteBatch: "/sys/user/deleteBatch",
|
||||
exportXlsUrl: "/sys/user/exportXls",
|
||||
importExcelUrl: "sys/user/importExcel"
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getAvatarView: function(avatar) {
|
||||
return getFileAccessHttpUrl(avatar);
|
||||
},
|
||||
passwordModalOk() {
|
||||
//TODO 密码修改完成 不需要刷新页面，可以把datasource中的数据更新一下
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
title="数据规则/按钮权限配置"
|
||||
width="365"
|
||||
:closable="false"
|
||||
@close="onClose"
|
||||
:visible="visible"
|
||||
>
|
||||
<a-tabs defaultActiveKey="1">
|
||||
<a-tab-pane tab="数据规则" key="1">
|
||||
|
||||
<a-checkbox-group v-model="dataruleChecked" v-if="dataruleList.length>0">
|
||||
<a-row>
|
||||
<a-col :span="24" v-for="(item,index) in dataruleList" :key=" 'dr'+index ">
|
||||
<a-checkbox :value="item.id">{{ item.ruleName }}</a-checkbox>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="24">
|
||||
<div style="width: 100%;margin-top: 15px">
|
||||
<a-button @click="saveDataruleForRole" type="primary" size="small" icon="save">点击保存</a-button>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
<div v-else><h3>无配置信息!</h3></div>
|
||||
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ARow from 'ant-design-vue/es/grid/Row'
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
import { getAction,postAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'DepartDataruleModal',
|
||||
components: { ACol, ARow },
|
||||
data(){
|
||||
return {
|
||||
functionId:'',
|
||||
departId:'',
|
||||
visible:false,
|
||||
tabList: [{
|
||||
key: '1',
|
||||
tab: '数据规则',
|
||||
}, {
|
||||
key: '2',
|
||||
tab: '按钮权限',
|
||||
}],
|
||||
activeTabKey: '1',
|
||||
url:{
|
||||
datarule:"/sys/sysDepartPermission/datarule",
|
||||
},
|
||||
dataruleList:[],
|
||||
dataruleChecked:[]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
loadData(){
|
||||
getAction(`${this.url.datarule}/${this.functionId}/${this.departId}`).then(res=>{
|
||||
if(res.success){
|
||||
this.dataruleList = res.result.datarule
|
||||
let drChecked = res.result.drChecked
|
||||
if(drChecked){
|
||||
this.dataruleChecked = drChecked.split(",")
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
saveDataruleForRole(){
|
||||
if(!this.dataruleChecked || this.dataruleChecked.length==0){
|
||||
this.$message.warning("请注意，现未勾选任何数据权限!")
|
||||
}
|
||||
let params = {
|
||||
permissionId:this.functionId,
|
||||
departId:this.departId,
|
||||
dataRuleIds:this.dataruleChecked.join(",")
|
||||
}
|
||||
postAction(this.url.datarule,params).then(res=>{
|
||||
if(res.success){
|
||||
this.$message.success(res.message)
|
||||
}else{
|
||||
this.$message.error(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
show(functionId,departId){
|
||||
this.onReset()
|
||||
this.functionId = functionId
|
||||
this.departId = departId
|
||||
this.visible=true
|
||||
this.loadData()
|
||||
},
|
||||
onClose(){
|
||||
this.visible=false
|
||||
this.onReset()
|
||||
},
|
||||
onTabChange (key) {
|
||||
this.activeTabKey = key
|
||||
},
|
||||
onReset(){
|
||||
this.functionId=''
|
||||
this.departId=''
|
||||
this.dataruleList=[]
|
||||
this.dataruleChecked=[]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="800"
|
||||
:ok=false
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:okButtonProps="{ props: {disabled: disableSubmit} }"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="机构名称"
|
||||
:hidden="false"
|
||||
hasFeedback>
|
||||
<a-input id="departName" placeholder="请输入机构/部门名称" v-decorator="['departName', validatorRules.departName ]" />
|
||||
</a-form-item>
|
||||
<!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :hidden="seen" label="上级部门" hasFeedback>-->
|
||||
<!-- <a-tree-select-->
|
||||
<!-- style="width:100%"-->
|
||||
<!-- :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"-->
|
||||
<!-- :treeData="departTree"-->
|
||||
<!-- v-model="model.parentId"-->
|
||||
<!-- placeholder="请选择上级部门"-->
|
||||
<!-- :disabled="condition">-->
|
||||
<!-- </a-tree-select>-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="机构类型">
|
||||
<template v-if="seen">
|
||||
<a-radio-group v-decorator="['orgCategory',validatorRules.orgCategory]" placeholder="请选择机构类型">
|
||||
<a-radio value="1">
|
||||
公司
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-radio-group v-decorator="['orgCategory',validatorRules.orgCategory]" placeholder="请选择机构类型">
|
||||
<a-radio value="2">
|
||||
部门
|
||||
</a-radio>
|
||||
<a-radio value="3">
|
||||
岗位
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="电话">
|
||||
<a-input placeholder="请输入电话" v-decorator="['mobile',validatorRules.mobile]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="传真">
|
||||
<a-input placeholder="请输入传真" v-decorator="['fax', {}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="地址">
|
||||
<a-input placeholder="请输入地址" v-decorator="['address', {}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="排序">
|
||||
<a-input-number v-decorator="[ 'departOrder',{'initialValue':0}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="备注">
|
||||
<a-textarea placeholder="请输入备注" v-decorator="['memo', {}]" />
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpAction } from "@/api/manage";
|
||||
import { queryIdTree } from "@/api/api";
|
||||
import pick from "lodash.pick";
|
||||
import ATextarea from "ant-design-vue/es/input/TextArea";
|
||||
|
||||
export default {
|
||||
name: "SysDepartModal",
|
||||
components: { ATextarea },
|
||||
data() {
|
||||
return {
|
||||
departTree: [],
|
||||
orgTypeData: [],
|
||||
phoneWarning: "",
|
||||
departName: "",
|
||||
title: "操作",
|
||||
seen: false,
|
||||
visible: false,
|
||||
condition: true,
|
||||
disableSubmit: false,
|
||||
model: {},
|
||||
menuhidden: false,
|
||||
menuusing: true,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
departName: { rules: [{ required: true, message: "请输入机构/部门名称!" }] },
|
||||
orgCode: { rules: [{ required: true, message: "请输入机构编码!" }] },
|
||||
mobile: { rules: [{ validator: this.validateMobile }] }
|
||||
},
|
||||
url: {
|
||||
add: "/sys/sysDepart/add"
|
||||
},
|
||||
dictDisabled: true
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
loadTreeData() {
|
||||
var that = this;
|
||||
queryIdTree().then((res) => {
|
||||
if (res.success) {
|
||||
that.departTree = [];
|
||||
for (let i = 0; i < res.result.length; i++) {
|
||||
let temp = res.result[i];
|
||||
that.departTree.push(temp);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
add(depart) {
|
||||
if (depart) {
|
||||
this.seen = false;
|
||||
this.dictDisabled = false;
|
||||
} else {
|
||||
this.seen = true;
|
||||
this.dictDisabled = true;
|
||||
}
|
||||
this.edit(depart);
|
||||
},
|
||||
edit(record) {
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.visible = true;
|
||||
this.loadTreeData();
|
||||
this.model.parentId = record != null ? record.toString() : null;
|
||||
if (this.seen) {
|
||||
this.model.orgCategory = "1";
|
||||
} else {
|
||||
this.model.orgCategory = "2";
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, "orgCategory", "departName", "departNameEn", "departNameAbbr", "departOrder", "description", "orgType", "orgCode", "mobile", "fax", "address", "memo", "status", "delFlag"));
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.$emit("close");
|
||||
this.disableSubmit = false;
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk() {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true;
|
||||
let formData = Object.assign(this.model, values);
|
||||
//时间格式化
|
||||
console.log(formData);
|
||||
httpAction(this.url.add, formData, "post").then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.loadTreeData();
|
||||
that.$emit("ok");
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
handleCancel() {
|
||||
this.close();
|
||||
},
|
||||
validateMobile(rule, value, callback) {
|
||||
if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
|
||||
callback();
|
||||
} else {
|
||||
callback("您的手机号码格式不正确!");
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<a-card :visible="visible">
|
||||
<a-form :form="form">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="机构名称">
|
||||
<a-input style="border:0px;" placeholder="" v-decorator="['departName', {}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级部门">
|
||||
<a-tree-select
|
||||
disabled
|
||||
style="width:100%;border: 0px;border: none;outline:none;"
|
||||
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
||||
:treeData="treeData"
|
||||
v-model="model.parentId"
|
||||
placeholder="无">
|
||||
</a-tree-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="机构编码">
|
||||
<a-input style="border:0px;" placeholder="" v-decorator="['orgCode', {}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="机构类型">
|
||||
<a-radio-group :disabled="true" v-decorator="['orgCategory',{}]" placeholder="请选择机构类型">
|
||||
<a-radio value="1">
|
||||
公司
|
||||
</a-radio>
|
||||
<a-radio value="2">
|
||||
部门
|
||||
</a-radio>
|
||||
<a-radio value="3">
|
||||
岗位
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="排序">
|
||||
<a-input-number style="border:0px;" v-decorator="[ 'departOrder',{}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="手机号">
|
||||
<a-input style="border:0px;" placeholder="" v-decorator="['mobile', {}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="地址">
|
||||
<a-input style="border:0px;" placeholder="" v-decorator="['address', {}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="备注">
|
||||
<a-textarea style="border:0px;" placeholder="" v-decorator="['memo', {}]"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import {queryIdTree} from '@/api/api'
|
||||
|
||||
export default {
|
||||
name: 'DeptBaseInfo',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
departTree: [],
|
||||
id: '',
|
||||
model: {},
|
||||
visible: false,
|
||||
disable: true,
|
||||
treeData: [],
|
||||
form: this.$form.createForm(this),
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 3}
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16}
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadTreeData();
|
||||
},
|
||||
methods: {
|
||||
loadTreeData() {
|
||||
queryIdTree().then((res) => {
|
||||
if (res.success) {
|
||||
for (let i = 0; i < res.result.length; i++) {
|
||||
let temp = res.result[i];
|
||||
this.treeData.push(temp);
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
open(record) {
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.visible = true;
|
||||
console.log("record:");
|
||||
console.log(record);
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(record, 'orgCategory','departName', 'parentId', 'orgCode', 'departOrder', 'mobile', 'fax', 'address', 'memo'));
|
||||
});
|
||||
},
|
||||
clearForm() {
|
||||
this.form.resetFields();
|
||||
this.treeData = [];
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less'
|
||||
</style>
|
||||
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
:title="title"
|
||||
:maskClosable="true"
|
||||
width=650
|
||||
placement="right"
|
||||
:closable="true"
|
||||
@close="close"
|
||||
:visible="visible"
|
||||
style="overflow: auto;padding-bottom: 53px;">
|
||||
|
||||
<a-form>
|
||||
<a-form-item label='所拥有的部门权限'>
|
||||
|
||||
<a-tree
|
||||
v-if="treeData.length>0"
|
||||
checkable
|
||||
@check="onCheck"
|
||||
:checkedKeys="checkedKeys"
|
||||
:treeData="treeData"
|
||||
@expand="onExpand"
|
||||
@select="onTreeNodeSelect"
|
||||
:selectedKeys="selectedKeys"
|
||||
:expandedKeys="expandedKeysss"
|
||||
:checkStrictly="checkStrictly">
|
||||
<span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
|
||||
{{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
|
||||
</span>
|
||||
</a-tree>
|
||||
<div v-else><h3>无可配置部门权限!</h3></div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<div class="drawer-bootom-button">
|
||||
<a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
|
||||
<a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
|
||||
<a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
|
||||
<a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
|
||||
<a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
|
||||
<a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button>
|
||||
树操作 <a-icon type="up" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
<a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" cancelText="取消">
|
||||
<a-button style="margin-right: .8rem">取消</a-button>
|
||||
</a-popconfirm>
|
||||
<a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>
|
||||
<a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
|
||||
</div>
|
||||
<dept-role-datarule-modal ref="datarule"></dept-role-datarule-modal>
|
||||
</a-drawer>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import {queryTreeListForDeptRole,queryDeptRolePermission,saveDeptRolePermission} from '@/api/api'
|
||||
import RoleDataruleModal from './RoleDataruleModal.vue'
|
||||
import DeptRoleDataruleModal from './DeptRoleDataruleModal'
|
||||
|
||||
export default {
|
||||
name: "DeptRoleAuthModal",
|
||||
components:{
|
||||
DeptRoleDataruleModal,
|
||||
RoleDataruleModal
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
departId:"",
|
||||
roleId:"",
|
||||
treeData: [],
|
||||
defaultCheckedKeys:[],
|
||||
checkedKeys:[],
|
||||
halfCheckedKeys:[],
|
||||
expandedKeysss:[],
|
||||
allTreeKeys:[],
|
||||
autoExpandParent: true,
|
||||
checkStrictly: true,
|
||||
title:"部门角色权限配置",
|
||||
visible: false,
|
||||
loading: false,
|
||||
selectedKeys:[]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchCheckStrictly (v) {
|
||||
if(v==1){
|
||||
this.checkStrictly = false
|
||||
}else if(v==2){
|
||||
this.checkStrictly = true
|
||||
}
|
||||
},
|
||||
onTreeNodeSelect(id){
|
||||
if(id && id.length>0){
|
||||
this.selectedKeys = id
|
||||
}
|
||||
this.$refs.datarule.show(this.selectedKeys[0],this.departId,this.roleId)
|
||||
},
|
||||
onCheck (o) {
|
||||
if(this.checkStrictly){
|
||||
this.checkedKeys = o.checked;
|
||||
}else{
|
||||
this.checkedKeys = o
|
||||
}
|
||||
},
|
||||
show(roleId,departId){
|
||||
this.departId = departId
|
||||
this.roleId=roleId
|
||||
this.visible = true;
|
||||
},
|
||||
close () {
|
||||
this.reset()
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
onExpand(expandedKeys){
|
||||
this.expandedKeysss = expandedKeys;
|
||||
this.autoExpandParent = false
|
||||
},
|
||||
reset () {
|
||||
this.expandedKeysss = []
|
||||
this.checkedKeys = []
|
||||
this.defaultCheckedKeys = []
|
||||
this.loading = false
|
||||
},
|
||||
expandAll () {
|
||||
this.expandedKeysss = this.allTreeKeys
|
||||
},
|
||||
closeAll () {
|
||||
this.expandedKeysss = []
|
||||
},
|
||||
checkALL () {
|
||||
this.checkedKeys = this.allTreeKeys
|
||||
},
|
||||
cancelCheckALL () {
|
||||
this.checkedKeys = []
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
handleSubmit(exit) {
|
||||
let that = this;
|
||||
let params = {
|
||||
roleId:that.roleId,
|
||||
permissionIds:that.checkedKeys.join(","),
|
||||
lastpermissionIds:that.defaultCheckedKeys.join(","),
|
||||
};
|
||||
that.loading = true;
|
||||
console.log("请求参数：",params);
|
||||
saveDeptRolePermission(params).then((res)=>{
|
||||
if(res.success){
|
||||
that.$message.success(res.message);
|
||||
that.loading = false;
|
||||
if (exit) {
|
||||
that.close()
|
||||
}
|
||||
}else {
|
||||
that.$message.error(res.message);
|
||||
that.loading = false;
|
||||
if (exit) {
|
||||
that.close()
|
||||
}
|
||||
}
|
||||
this.loadData();
|
||||
})
|
||||
},
|
||||
convertTreeListToKeyLeafPairs(treeList, keyLeafPair = []) {
|
||||
for(const {key, isLeaf, children} of treeList) {
|
||||
keyLeafPair.push({key, isLeaf})
|
||||
if(children && children.length > 0) {
|
||||
this.convertTreeListToKeyLeafPairs(children, keyLeafPair)
|
||||
}
|
||||
}
|
||||
return keyLeafPair;
|
||||
},
|
||||
loadData(){
|
||||
queryTreeListForDeptRole({departId:this.departId}).then((res) => {
|
||||
this.treeData = res.result.treeList
|
||||
this.allTreeKeys = res.result.ids
|
||||
queryDeptRolePermission({roleId:this.roleId}).then((res)=>{
|
||||
this.checkedKeys = [...res.result];
|
||||
this.defaultCheckedKeys = [...res.result];
|
||||
this.expandedKeysss = this.allTreeKeys;
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible () {
|
||||
if (this.visible ) {
|
||||
this.loadData();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.drawer-bootom-button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 16px;
|
||||
text-align: right;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
title="数据规则/按钮权限配置"
|
||||
width="365"
|
||||
:closable="false"
|
||||
@close="onClose"
|
||||
:visible="visible"
|
||||
>
|
||||
|
||||
<a-tabs defaultActiveKey="1">
|
||||
<a-tab-pane tab="数据规则" key="1">
|
||||
|
||||
<a-checkbox-group v-model="dataruleChecked" v-if="dataruleList.length>0">
|
||||
<a-row>
|
||||
<a-col :span="24" v-for="(item,index) in dataruleList" :key=" 'dr'+index ">
|
||||
<a-checkbox :value="item.id">{{ item.ruleName }}</a-checkbox>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="24">
|
||||
<div style="width: 100%;margin-top: 15px">
|
||||
<a-button @click="saveDataruleForRole" type="primary" size="small" icon="save">点击保存</a-button>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
<div v-else><h3>无配置信息!</h3></div>
|
||||
|
||||
</a-tab-pane>
|
||||
<!--<a-tab-pane tab="按钮权限" key="2">敬请期待!!!</a-tab-pane>-->
|
||||
</a-tabs>
|
||||
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ARow from 'ant-design-vue/es/grid/Row'
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
import { getAction,postAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'DeptRoleDataruleModal',
|
||||
components: { ACol, ARow },
|
||||
data(){
|
||||
return {
|
||||
departId:'',
|
||||
functionId:'',
|
||||
roleId:'',
|
||||
visible:false,
|
||||
tabList: [{
|
||||
key: '1',
|
||||
tab: '数据规则',
|
||||
}, {
|
||||
key: '2',
|
||||
tab: '按钮权限',
|
||||
}],
|
||||
activeTabKey: '1',
|
||||
url:{
|
||||
datarule:"/sys/sysDepartRole/datarule",
|
||||
},
|
||||
dataruleList:[],
|
||||
dataruleChecked:[]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
loadData(){
|
||||
getAction(`${this.url.datarule}/${this.functionId}/${this.departId}/${this.roleId}`).then(res=>{
|
||||
console.log(res)
|
||||
if(res.success){
|
||||
this.dataruleList = res.result.datarule
|
||||
let drChecked = res.result.drChecked
|
||||
if(drChecked){
|
||||
this.dataruleChecked = drChecked.split(",")
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
saveDataruleForRole(){
|
||||
if(!this.dataruleChecked || this.dataruleChecked.length==0){
|
||||
this.$message.warning("请注意，现未勾选任何数据权限!")
|
||||
}
|
||||
let params = {
|
||||
permissionId:this.functionId,
|
||||
roleId:this.roleId,
|
||||
dataRuleIds:this.dataruleChecked.join(",")
|
||||
}
|
||||
console.log("保存数据权限",params)
|
||||
postAction(this.url.datarule,params).then(res=>{
|
||||
if(res.success){
|
||||
this.$message.success(res.message)
|
||||
}else{
|
||||
this.$message.error(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
show(functionId,departId,roleId){
|
||||
this.onReset()
|
||||
this.departId = departId
|
||||
this.functionId = functionId
|
||||
this.roleId = roleId
|
||||
this.visible=true
|
||||
this.loadData()
|
||||
},
|
||||
onClose(){
|
||||
this.visible=false
|
||||
this.onReset()
|
||||
},
|
||||
onTabChange (key) {
|
||||
this.activeTabKey = key
|
||||
},
|
||||
onReset(){
|
||||
this.functionId=''
|
||||
this.roleId=''
|
||||
this.dataruleList=[]
|
||||
this.dataruleChecked=[]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<!-- 搜索区域 -->
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="10">
|
||||
<a-col :md="10" :sm="12">
|
||||
<a-form-item label="部门角色名称" style="margin-left:8px">
|
||||
<a-input placeholder="请输入部门角色" v-model="queryParam.roleName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 18px">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator" :md="24" :sm="24">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新建部门角色</a-button>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">
|
||||
{{selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">
|
||||
更多 <a-icon type="down"/>
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a @click="handlePerssion(record)">授权</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
<!-- 表单区域 -->
|
||||
<sys-depart-role-modal ref="modalForm" @ok="modalFormOk"/>
|
||||
<dept-role-auth-modal ref="modalDeptRole" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
import {getAction} from '@/api/manage'
|
||||
import SysDepartRoleModal from './SysDepartRoleModal'
|
||||
import DeptRoleAuthModal from './DeptRoleAuthModal'
|
||||
|
||||
export default {
|
||||
name: 'DeptRoleInfo',
|
||||
components: { DeptRoleAuthModal, SysDepartRoleModal },
|
||||
mixins: [JeroListMixin],
|
||||
data() {
|
||||
return {
|
||||
description: '部门角色信息',
|
||||
currentDeptId: '',
|
||||
// 表头
|
||||
columns: [{
|
||||
title: '部门角色名称',
|
||||
align: "center",
|
||||
dataIndex: 'roleName'
|
||||
},
|
||||
{
|
||||
title: '部门角色编码',
|
||||
align: "center",
|
||||
dataIndex: 'roleCode'
|
||||
},
|
||||
{
|
||||
title: '部门',
|
||||
align: "center",
|
||||
dataIndex: 'departId_dictText'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
align: "center",
|
||||
dataIndex: 'description'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: {customRender: 'action'},
|
||||
align: "center",
|
||||
width: 170
|
||||
}],
|
||||
url: {
|
||||
list: "/sys/sysDepartRole/page",
|
||||
delete: "/sys/sysDepartRole/delete",
|
||||
deleteBatch: "/sys/sysDepartRole/deleteBatch",
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
searchReset() {
|
||||
this.queryParam = {}
|
||||
this.loadData(1);
|
||||
},
|
||||
loadData(arg) {
|
||||
if (!this.url.list) {
|
||||
this.$message.error("请设置url.list属性!")
|
||||
return
|
||||
}
|
||||
//加载数据 若传入参数1则加载第一页的内容
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1;
|
||||
}
|
||||
let params = this.getQueryParams();//查询条件
|
||||
params.deptId = this.currentDeptId;
|
||||
getAction(this.url.list, params).then((res) => {
|
||||
if (res.success && res.result) {
|
||||
this.dataSource = res.result.records;
|
||||
this.ipagination.total = res.result.total;
|
||||
}
|
||||
})
|
||||
},
|
||||
open(record) {
|
||||
this.currentDeptId = record.id;
|
||||
this.loadData(1);
|
||||
},
|
||||
clearList() {
|
||||
this.currentDeptId = '';
|
||||
this.dataSource = [];
|
||||
},
|
||||
hasSelectDept() {
|
||||
if (this.currentDeptId == '') {
|
||||
this.$message.error("请选择一个部门!")
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
handleEdit: function (record) {
|
||||
this.$refs.modalForm.title = "编辑";
|
||||
this.$refs.modalForm.departDisabled = true;
|
||||
this.$refs.modalForm.disableSubmit = false;
|
||||
this.$refs.modalForm.edit(record,record.departId);
|
||||
},
|
||||
handleAdd: function () {
|
||||
if (this.currentDeptId == '') {
|
||||
this.$message.error("请选择一个部门!")
|
||||
} else {
|
||||
this.$refs.modalForm.departDisabled = true;
|
||||
this.$refs.modalForm.add(this.currentDeptId);
|
||||
this.$refs.modalForm.title = "新增";
|
||||
}
|
||||
},
|
||||
handlePerssion: function(record){
|
||||
this.$refs.modalDeptRole.show(record.id,record.departId);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
:title="title"
|
||||
:maskClosable="true"
|
||||
width=600
|
||||
placement="right"
|
||||
:closable="true"
|
||||
@close="close"
|
||||
:visible="visible"
|
||||
style="overflow: auto;padding-bottom: 53px;">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
|
||||
<a-form :form="form" v-if="designNameOption.length>0">
|
||||
<a-form-item label=''>
|
||||
<a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
|
||||
<a-card :style="{ marginTop: '12px',height:'auto' }">
|
||||
<a-checkbox-group @change="designNameChange" v-model="designNameValue" style="width: 100%">
|
||||
<a-row>
|
||||
<template v-for="(des) in designNameOption">
|
||||
<a-col :span="6">
|
||||
<a-checkbox :value="des.value">{{ des.text }}</a-checkbox>
|
||||
</a-col>
|
||||
</template>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div v-else><h3>无可配置角色!</h3></div>
|
||||
</a-spin>
|
||||
<div class="drawer-bootom-button">
|
||||
<a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="checkALL">全部勾选</a-menu-item>
|
||||
<a-menu-item key="2" @click="cancelCheckALL">取消全选</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button>
|
||||
操作 <a-icon type="up" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
<a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" cancelText="取消">
|
||||
<a-button style="margin-right: .8rem">取消</a-button>
|
||||
</a-popconfirm>
|
||||
<a-button @click="handleSubmit(true)" type="primary">保存</a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpAction, getAction} from '@/api/manage'
|
||||
// import JEllipsis from '@/components/jero/JEllipsis'
|
||||
// import {initDictOptions} from '@/components/dict/JDictSelectUtil'
|
||||
|
||||
export default {
|
||||
name: 'DeptRoleUserModal',
|
||||
components: {
|
||||
// JEllipsis
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentDeptId:"",
|
||||
title: "部门角色分配",
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16},
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {},
|
||||
url: {
|
||||
add: "/sys/sysDepartRole/deptRoleUserAdd",
|
||||
getDeptRoleList:"/sys/sysDepartRole/getDeptRoleList",
|
||||
getDeptRoleByUserId:"/sys/sysDepartRole/getDeptRoleByUserId"
|
||||
},
|
||||
designNameOption: [],
|
||||
userId: "",
|
||||
newRoleId:"",
|
||||
oldRoleId:"",
|
||||
designNameValue:[],
|
||||
desformList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
add(record,departId) {
|
||||
this.userId = record.id;
|
||||
this.currentDeptId = departId;
|
||||
this.loadDesformList();
|
||||
this.edit({});
|
||||
},
|
||||
edit(record) {
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.visible = true;
|
||||
getAction(this.url.getDeptRoleByUserId,{userId:this.userId,departId:this.currentDeptId}).then((res) => {
|
||||
if (res.success) {
|
||||
var designName = [];
|
||||
for (let value of res.result) {
|
||||
designName.push(value.droleId)
|
||||
}
|
||||
this.oldRoleId=designName.join(",");
|
||||
this.designNameValue = designName;
|
||||
this.newRoleId = designName.join(",");
|
||||
}
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleSubmit() {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
that.confirmLoading = true;
|
||||
let httpurl = this.url.add;
|
||||
let method = 'post';
|
||||
let formData = Object.assign(this.model, {});
|
||||
//时间格式化
|
||||
formData.userId = this.userId;
|
||||
formData.newRoleId=this.newRoleId;
|
||||
formData.oldRoleId=this.oldRoleId;
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.$emit('reload');
|
||||
that.$emit('ok');
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.designNameOption=[];
|
||||
this.designNameValue=[];
|
||||
this.close()
|
||||
},
|
||||
designNameChange(selectedValue) {
|
||||
this.newRoleId=selectedValue.join(",");
|
||||
},
|
||||
checkALL(){
|
||||
var designName = [];
|
||||
for (let value of this.desformList) {
|
||||
designName.push(
|
||||
value.id
|
||||
)
|
||||
}
|
||||
this.designNameValue = designName;
|
||||
this.newRoleId=designName.join(",");
|
||||
},
|
||||
cancelCheckALL(){
|
||||
this.designNameValue=[];
|
||||
this.newRoleId="";
|
||||
},
|
||||
/** 加载desform */
|
||||
loadDesformList() {
|
||||
getAction(this.url.getDeptRoleList, { departId: this.currentDeptId, userId:this.userId }).then((res) => {
|
||||
if (res.success) {
|
||||
this.desformList = res.result
|
||||
var designName = [];
|
||||
for (let value of this.desformList) {
|
||||
designName.push({
|
||||
value: value.id,
|
||||
text: value.roleName,
|
||||
})
|
||||
}
|
||||
this.designNameOption = designName;
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-bootom-button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 16px;
|
||||
text-align: right;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,346 @@
|
||||
<template>
|
||||
<a-modal :title="title"
|
||||
:width="1000"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭"
|
||||
wrapClassName="ant-modal-cust-warp"
|
||||
style="top:5%;height: 85%;overflow-y: hidden">
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<!-- 搜索区域 -->
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="10">
|
||||
<a-col :md="10" :sm="12">
|
||||
<a-form-item label="用户账号" style="margin-left:8px">
|
||||
<a-input placeholder="请输入账号" v-model="queryParam.username"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!--<a-col :md="8" :sm="8">-->
|
||||
<!--<a-form-item label="用户名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">-->
|
||||
<!--<a-input placeholder="请输入名称查询" v-model="queryParam.realname"></a-input>-->
|
||||
<!--</a-form-item>-->
|
||||
<!--</a-col>-->
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 18px">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator" :md="24" :sm="24" style="margin-top: -15px">
|
||||
<!--<a-button @click="handleEdit" type="primary" icon="edit" style="margin-top: 16px">用户编辑</a-button>-->
|
||||
<a-button @click="handleAddUserDepart" type="primary" icon="plus">添加已有用户</a-button>
|
||||
<a-button @click="handleAdd" type="primary" icon="plus" style="margin-top: 16px">新建用户</a-button>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div class="table-box">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="handleDeptRole(record)">分配部门角色</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="handleDetail(record)">用户详情</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="handleDelete(record.id)">取消关联</a>
|
||||
|
||||
<!-- <a-dropdown>-->
|
||||
<!-- <a class="ant-dropdown-link">-->
|
||||
<!-- 更多 <a-icon type="down" />-->
|
||||
<!-- </a>-->
|
||||
<!-- <a-menu slot="overlay">-->
|
||||
<!-- <a-menu-item>-->
|
||||
<!-- <a href="javascript:;" @click="handleDeptRole(record)">分配部门角色</a>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- <a-menu-item>-->
|
||||
<!-- <a href="javascript:;" @click="handleDetail(record)">用户详情</a>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- <a-menu-item>-->
|
||||
<!-- <a-popconfirm title="确定取消与选中部门关联吗?" @confirm="() => handleDelete(record.id)">-->
|
||||
<!-- <a>取消关联</a>-->
|
||||
<!-- </a-popconfirm>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- </a-menu>-->
|
||||
<!-- </a-dropdown>-->
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<user-modal ref="modalForm" @ok="modalFormOk"></user-modal>
|
||||
<Select-User-Modal ref="selectUserModal" @selectFinished="selectOK"></Select-User-Modal>
|
||||
<dept-role-user-modal ref="deptRoleUser"></dept-role-user-modal>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { JeroListMixin } from "@/mixins/JeroListMixin";
|
||||
import { getAction, postAction, deleteAction } from "@/api/manage";
|
||||
import SelectUserModal from "./SelectUserModal";
|
||||
import UserModal from "./UserModal";
|
||||
import DeptRoleUserModal from "./DeptRoleUserModal";
|
||||
|
||||
export default {
|
||||
name: "DeptUserInfo",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
DeptRoleUserModal,
|
||||
SelectUserModal,
|
||||
UserModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "操作",
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
description: "用户信息",
|
||||
currentDeptId: "",
|
||||
currentDept: {},
|
||||
// 表头
|
||||
columns: [{
|
||||
title: "用户账号",
|
||||
align: "center",
|
||||
dataIndex: "username"
|
||||
}, {
|
||||
title: "用户名称",
|
||||
align: "center",
|
||||
dataIndex: "realname"
|
||||
}, {
|
||||
title: "部门",
|
||||
align: "center",
|
||||
dataIndex: "orgCode"
|
||||
}, {
|
||||
title: "性别",
|
||||
align: "center",
|
||||
dataIndex: "sex_dictText"
|
||||
}, {
|
||||
title: "电话",
|
||||
align: "center",
|
||||
dataIndex: "phone"
|
||||
}, {
|
||||
title: "操作",
|
||||
dataIndex: "action",
|
||||
scopedSlots: { customRender: "action" },
|
||||
align: "center",
|
||||
width: 300
|
||||
}],
|
||||
url: {
|
||||
list: "/sys/user/departUserList",
|
||||
edit: "/sys/user/editSysDepartWithUser",
|
||||
delete: "/sys/user/deleteUserInDepart",
|
||||
deleteBatch: "/sys/user/deleteUserInDepartBatch"
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initUserInfo(id) {
|
||||
this.currentDeptId = id
|
||||
this.visible = true
|
||||
this.initData(1);
|
||||
},
|
||||
searchReset() {
|
||||
this.queryParam = {};
|
||||
this.initData(1);
|
||||
},
|
||||
initData(arg) {
|
||||
if (!this.url.list) {
|
||||
this.$message.error("请设置url.list属性!");
|
||||
return;
|
||||
}
|
||||
//加载数据 若传入参数1则加载第一页的内容
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1;
|
||||
}
|
||||
//if (this.currentDeptId === '') return;
|
||||
let params = this.getQueryParams();//查询条件
|
||||
params.depId = this.currentDeptId;
|
||||
getAction(this.url.list, params).then((res) => {
|
||||
if (res.success && res.result) {
|
||||
this.dataSource = res.result.records;
|
||||
this.ipagination.total = res.result.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
batchDel: function() {
|
||||
if (!this.url.deleteBatch) {
|
||||
this.$message.error("请设置url.deleteBatch属性!");
|
||||
return;
|
||||
}
|
||||
if (!this.currentDeptId) {
|
||||
this.$message.error("未选中任何部门，无法取消部门与用户的关联!");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.selectedRowKeys.length <= 0) {
|
||||
this.$message.warning("请选择一条记录！");
|
||||
return;
|
||||
} else {
|
||||
let ids = "";
|
||||
for (let a = 0; a < this.selectedRowKeys.length; a++) {
|
||||
ids += this.selectedRowKeys[a] + ",";
|
||||
}
|
||||
let that = this;
|
||||
console.log(this.currentDeptId);
|
||||
this.$confirm({
|
||||
title: "确认取消",
|
||||
content: "是否取消用户与选中部门的关联?",
|
||||
onOk: function() {
|
||||
deleteAction(that.url.deleteBatch, { depId: that.currentDeptId, userIds: ids }).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success("删除用户与选中部门关系成功！");
|
||||
that.initData();
|
||||
that.onClearSelected();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
handleDelete: function(id) {
|
||||
if (!this.url.delete) {
|
||||
this.$message.error("请设置url.delete属性!");
|
||||
return;
|
||||
}
|
||||
if (!this.currentDeptId) {
|
||||
this.$message.error("未选中任何部门，无法取消部门与用户的关联!");
|
||||
return;
|
||||
}
|
||||
|
||||
let that = this;
|
||||
this.$confirm({
|
||||
title: "确认删除",
|
||||
content: "是否删除选中数据?",
|
||||
onOk: function () {
|
||||
deleteAction(that.url.delete, { depId: that.currentDeptId, userId: id }).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success("删除用户与选中部门关系成功！");
|
||||
if (that.selectedRowKeys.length > 0) {
|
||||
for (let i = 0; i < that.selectedRowKeys.length; i++) {
|
||||
if (that.selectedRowKeys[i] == id) {
|
||||
this.selectedRowKeys.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
that.initData();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
open(record) {
|
||||
//console.log(record);
|
||||
this.currentDeptId = record.id;
|
||||
this.currentDept = record;
|
||||
this.initData(1);
|
||||
},
|
||||
handleOk() {
|
||||
this.visible = false
|
||||
this.$emit('ok');
|
||||
},
|
||||
handleCancel() {
|
||||
this.close();
|
||||
},
|
||||
close() {
|
||||
this.$emit("close");
|
||||
this.visible = false;
|
||||
},
|
||||
handleAddUserDepart() {
|
||||
if (this.currentDeptId == "") {
|
||||
this.$message.error("请选择一个部门!");
|
||||
} else {
|
||||
this.$refs.selectUserModal.visible = true;
|
||||
}
|
||||
},
|
||||
handleEdit: function(record) {
|
||||
this.$refs.modalForm.title = "编辑";
|
||||
this.$refs.modalForm.departDisabled = true;
|
||||
this.$refs.modalForm.disableSubmit = false;
|
||||
this.$refs.modalForm.edit(record);
|
||||
},
|
||||
handleAdd: function() {
|
||||
if (this.currentDeptId == "") {
|
||||
this.$message.error("请选择一个部门!");
|
||||
} else {
|
||||
this.$refs.modalForm.departDisabled = true;
|
||||
//初始化负责部门
|
||||
this.$refs.modalForm.userDepartModel.departIdList = [this.currentDeptId]; //传入一个部门id
|
||||
this.$refs.modalForm.add();
|
||||
//update-begin---author:liusq Date:20210223 for：https://gitee.com/jeecg/jeecg-boot/issues/I2SDU1------------
|
||||
this.$refs.modalForm.resultDepartOptions = [{ key: this.currentDept.key, title: this.currentDept.title }];
|
||||
//update-end---author:liusq Date:20210223 for：https://gitee.com/jeecg/jeecg-boot/issues/I2SDU1------------
|
||||
this.$refs.modalForm.title = "新增";
|
||||
}
|
||||
},
|
||||
selectOK(data) {
|
||||
let params = {};
|
||||
params.depId = this.currentDeptId;
|
||||
params.userIdList = [];
|
||||
for (let a = 0; a < data.length; a++) {
|
||||
params.userIdList.push(data[a]);
|
||||
}
|
||||
console.log(params);
|
||||
postAction(this.url.edit, params).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message);
|
||||
this.initData();
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
handleDeptRole(record) {
|
||||
if (this.currentDeptId != "") {
|
||||
this.$refs.deptRoleUser.add(record, this.currentDeptId);
|
||||
this.$refs.deptRoleUser.title = "部门角色分配";
|
||||
} else {
|
||||
this.$message.warning("请先选择一个部门!");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
/** Button按钮间距 */
|
||||
.ant-btn {
|
||||
margin-left: 3px
|
||||
}
|
||||
|
||||
.ant-card {
|
||||
margin-left: -30px;
|
||||
padding: 12px;
|
||||
margin-right: -30px;
|
||||
}
|
||||
|
||||
.table-box {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.table-page-search-wrapper {
|
||||
/*margin-top: -16px;*/
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="名称">
|
||||
<a-input placeholder="请输入名称" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" v-decorator.trim="['itemText', validatorRules.itemText]"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="数据值">
|
||||
<a-input placeholder="请输入数据值" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" v-decorator.trim="['itemValue', validatorRules.itemValue]"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述">
|
||||
<a-input v-decorator="['description']" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" placeholder="请输入描述"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="排序值">
|
||||
<a-input-number :min="1" :max="99999" v-decorator="['sortOrder',{'initialValue':1}]"/>
|
||||
值越小越靠前，支持小数
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="是否启用"
|
||||
hasFeedback>
|
||||
<a-switch checkedChildren="启用" unCheckedChildren="禁用" @change="onChose" v-model="visibleCheck"/>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import {addDictItem, editDictItem} from '@api/api'
|
||||
import { getAction } from '@api/manage'
|
||||
|
||||
export default {
|
||||
name: "DictItemModal",
|
||||
data() {
|
||||
return {
|
||||
title: "操作",
|
||||
visible: false,
|
||||
visibleCheck: true,
|
||||
model: {},
|
||||
dictId: "",
|
||||
status: 1,
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16},
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
itemText: {rules: [{required: true, message: '请输入名称!'}]},
|
||||
itemValue: {rules: [{required: true, message: '请输入数据值!'},{validator: this.validateItemValue}]},
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
add(dictId) {
|
||||
this.dictId = dictId;
|
||||
this.edit({});
|
||||
},
|
||||
edit(record) {
|
||||
if (record.id) {
|
||||
this.dictId = record.dictId;
|
||||
this.status = record.status;
|
||||
this.visibleCheck = (record.status == 1) ? true : false;
|
||||
}
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.model.dictId = this.dictId;
|
||||
this.model.status = this.status;
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'itemText', 'itemValue', 'description', 'sortOrder'))
|
||||
});
|
||||
},
|
||||
onChose(checked) {
|
||||
if (checked) {
|
||||
this.status = 1;
|
||||
this.visibleCheck = true;
|
||||
} else {
|
||||
this.status = 0;
|
||||
this.visibleCheck = false;
|
||||
}
|
||||
},
|
||||
// 确定
|
||||
handleOk() {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true;
|
||||
values.itemText = (values.itemText || '').trim()
|
||||
values.itemValue = (values.itemValue || '').trim()
|
||||
values.description = (values.description || '').trim()
|
||||
let formData = Object.assign(this.model, values);
|
||||
formData.status = this.status;
|
||||
let obj;
|
||||
if (!this.model.id) {
|
||||
obj = addDictItem(formData);
|
||||
} else {
|
||||
obj = editDictItem(formData);
|
||||
}
|
||||
obj.then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok');
|
||||
that.close();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 关闭
|
||||
handleCancel() {
|
||||
this.close();
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
validateItemValue(rule, value, callback){
|
||||
let param = {
|
||||
itemValue:value,
|
||||
dictId:this.dictId,
|
||||
}
|
||||
if(this.model.id){
|
||||
param.id = this.model.id
|
||||
}
|
||||
if(value){
|
||||
let reg=new RegExp("[`_~!@#$^&*()=|{}'.<>《》/?！￥（）—【】‘；：”“。，、？]")
|
||||
if(reg.test(value)){
|
||||
callback("数据值不能包含特殊字符！")
|
||||
}else{
|
||||
//update--begin--autor:lvdandan-----date:20201203------for：JT-27【数据字典】字典 - 数据值可重复
|
||||
getAction("/sys/dictItem/dictItemCheck",param).then((res)=>{
|
||||
if(res.success){
|
||||
callback()
|
||||
}else{
|
||||
callback(res.message);
|
||||
}
|
||||
});
|
||||
//update--end--autor:lvdandan-----date:20201203------for：JT-27【数据字典】字典 - 数据值可重复
|
||||
}
|
||||
}else{
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="600"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="字典名称">
|
||||
<a-input placeholder="请输入字典名称" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" v-decorator.trim="[ 'dictName', validatorRules.dictName]"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="字典编码">
|
||||
<a-input placeholder="请输入字典编码" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" v-decorator.trim="[ 'dictCode', validatorRules.dictCode]"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述">
|
||||
<a-input placeholder="请输入描述" :maxLength="50" @change="event => event.target.value = event.target.value.trim()" v-decorator="[ 'description']"/>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import { addDict, editDict, duplicateCheck } from '@api/api'
|
||||
import {checkDictCode} from "@/utils/validateOnly";
|
||||
import JDate from "@comp/jero/JDate";
|
||||
|
||||
export default {
|
||||
name: 'DictModal',
|
||||
data() {
|
||||
return {
|
||||
value: 1,
|
||||
title: '操作',
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
dictName: { rules: [{ required: true, message: '请输入字典名称!' }], validateTrigger: 'blur' },
|
||||
dictCode: {
|
||||
rules: [{ required: true,validator: this.validateDictCode },
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
validateDictCode(rule, value, callback) {
|
||||
checkDictCode(value,this.model.id).then(res => {
|
||||
if(res.success){
|
||||
callback()
|
||||
}else {
|
||||
callback(res.code === 500 ? '字典编码已存在': res)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleChange(value) {
|
||||
this.model.status = value
|
||||
},
|
||||
add() {
|
||||
this.edit({})
|
||||
},
|
||||
edit(record) {
|
||||
if (record.id) {
|
||||
this.visiblekey = true
|
||||
} else {
|
||||
this.visiblekey = false
|
||||
}
|
||||
this.form.resetFields()
|
||||
this.model = Object.assign({}, record)
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'dictName', 'dictCode', 'description'))
|
||||
})
|
||||
},
|
||||
// 确定
|
||||
handleOk() {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
values.dictName = (values.dictName || '').trim()
|
||||
values.dictCode = (values.dictCode || '').trim()
|
||||
values.description = (values.description || '').trim()
|
||||
let formData = Object.assign(this.model, values)
|
||||
let obj
|
||||
console.log(formData)
|
||||
if (!this.model.id) {
|
||||
obj = addDict(formData)
|
||||
} else {
|
||||
obj = editDict(formData)
|
||||
}
|
||||
obj.then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
that.close()
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 关闭
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
close() {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="1000"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="规则名称">
|
||||
<a-input placeholder="请输入规则名称" v-decorator="['ruleName', validatorRules.ruleName]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-show="showRuleColumn"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="规则字段">
|
||||
<a-input placeholder="请输入规则字段" v-decorator="['ruleColumn', validatorRules.ruleColumn]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="条件规则">
|
||||
<j-dict-select-tag @change="handleChangeRuleCondition" v-decorator="['ruleConditions', validatorRules.ruleConditions]" placeholder="请输入条件规则" :triggerChange="true" dictCode="rule_conditions"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="规则值">
|
||||
<a-input placeholder="请输入规则值" v-decorator="['ruleValue', validatorRules.ruleValue]"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态">
|
||||
<a-radio-group buttonStyle="solid" v-decorator="['status',{initialValue:'1'}]">
|
||||
<a-radio-button value="1">有效</a-radio-button>
|
||||
<a-radio-button value="0">无效</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import { httpAction } from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
|
||||
export default {
|
||||
name: 'PermissionDataRuleModal',
|
||||
data() {
|
||||
return {
|
||||
queryParam: {},
|
||||
title: '操作',
|
||||
visible: false,
|
||||
model: {},
|
||||
ruleConditionList: [],
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5}
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16}
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
permissionId: '',
|
||||
validatorRules: {
|
||||
ruleConditions: {rules: [{required: true, message: '请选择条件!'}]},
|
||||
ruleName: {rules: [{required: true, message: '请输入规则名称!'}]},
|
||||
ruleValue: {rules: [{required: true, message: '请输入规则值!'}]},
|
||||
ruleColumn: {rules: []}
|
||||
},
|
||||
url: {
|
||||
list: '/sys/dictItem/page',
|
||||
add: '/sys/permission/addPermissionRule',
|
||||
edit: '/sys/permission/editPermissionRule'
|
||||
},
|
||||
showRuleColumn:true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
add(permId) {
|
||||
this.permissionId = permId
|
||||
this.edit({})
|
||||
},
|
||||
edit(record) {
|
||||
this.form.resetFields()
|
||||
this.model = Object.assign({}, record)
|
||||
if (record.permissionId) {
|
||||
this.model.permissionId = record.permissionId
|
||||
} else {
|
||||
this.model.permissionId = this.permissionId
|
||||
}
|
||||
this.visible = true
|
||||
this.initRuleCondition()
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'status','ruleName', 'ruleColumn', 'ruleConditions', 'ruleValue'))
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
},
|
||||
handleOk() {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
let httpurl = ''
|
||||
let method = ''
|
||||
if (!this.model.id) {
|
||||
httpurl += this.url.add
|
||||
method = 'post'
|
||||
} else {
|
||||
httpurl += this.url.edit
|
||||
method = 'put'
|
||||
}
|
||||
let formData = Object.assign(this.model, values)
|
||||
if(formData.ruleColumn && formData.ruleColumn.length>0){
|
||||
formData.ruleColumn = formData.ruleColumn.trim()
|
||||
}
|
||||
if(formData.ruleValue && formData.ruleValue.length>0){
|
||||
formData.ruleValue = formData.ruleValue.trim()
|
||||
}
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
that.close()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
initRuleCondition(){
|
||||
if(this.model.ruleConditions && this.model.ruleConditions=='USE_SQL_RULES'){
|
||||
this.showRuleColumn = false
|
||||
}else{
|
||||
this.showRuleColumn = true
|
||||
}
|
||||
},
|
||||
handleChangeRuleCondition(val){
|
||||
if(val=='USE_SQL_RULES'){
|
||||
this.form.setFieldsValue({
|
||||
ruleColumn:''
|
||||
})
|
||||
this.showRuleColumn = false
|
||||
}else{
|
||||
this.showRuleColumn = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,423 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
:title="title"
|
||||
:width="drawerWidth"
|
||||
@close="handleCancel"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading">
|
||||
|
||||
<div :style="{width: '100%',border: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',}">
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item label="菜单类型" :labelCol="labelCol" :wrapperCol="wrapperCol" >
|
||||
<a-radio-group @change="onChangeMenuType" v-decorator="['menuType',{'initialValue':localMenuType}]">
|
||||
<a-radio :value="0">一级菜单</a-radio>
|
||||
<a-radio :value="1">子菜单</a-radio>
|
||||
<a-radio :value="2">按钮/权限</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
:label="menuLabel"
|
||||
hasFeedback >
|
||||
<a-input placeholder="请输入菜单名称" v-decorator="[ 'name', validatorRules.name]" :readOnly="disableSubmit"/>
|
||||
</a-form-item>
|
||||
|
||||
|
||||
<a-form-item
|
||||
v-show="localMenuType!=0"
|
||||
label="上级菜单"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
:validate-status="validateStatus"
|
||||
:hasFeedback="true"
|
||||
:required="true">
|
||||
<span slot="help">{{ validateStatus=='error'?'请选择上级菜单':' ' }}</span>
|
||||
<a-tree-select
|
||||
style="width:100%"
|
||||
:dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
|
||||
:treeData="treeData"
|
||||
v-model="model.parentId"
|
||||
placeholder="请选择父级菜单"
|
||||
:disabled="disableSubmit"
|
||||
@change="handleParentIdChange">
|
||||
</a-tree-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="菜单路径">
|
||||
<a-input placeholder="请输入菜单路径" v-decorator="[ 'url',validatorRules.url]" :readOnly="disableSubmit"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-show="show"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="前端组件">
|
||||
<a-input placeholder="请输入前端组件" v-decorator="[ 'component',validatorRules.component]" :readOnly="disableSubmit"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-show="localMenuType==0"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="默认跳转地址">
|
||||
<a-input placeholder="请输入路由参数 redirect" v-decorator="[ 'redirect',{}]" :readOnly="disableSubmit"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-show="!show"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="授权标识">
|
||||
<a-input placeholder="请输入授权标识, 如: user:list" v-decorator="[ 'perms', {rules:[{ required: false, message: '请输入授权标识!' },{validator: this.validatePerms }]}]" :readOnly="disableSubmit"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-show="!show"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="授权策略">
|
||||
<j-dict-select-tag v-decorator="['permsType', {}]" placeholder="请选择授权策略" :type="'radio'" :triggerChange="true" dictCode="global_perms_type"/>
|
||||
|
||||
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-show="!show"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态">
|
||||
<j-dict-select-tag v-decorator="['status', {}]" placeholder="请选择状态" :type="'radio'" :triggerChange="true" dictCode="valid_status"/>
|
||||
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-show="show"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="菜单图标">
|
||||
<a-input placeholder="点击选择图标" v-model="model.icon" :readOnly="disableSubmit">
|
||||
<a-icon slot="addonAfter" type="setting" @click="selectIcons" />
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-show="show"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="排序">
|
||||
<a-input-number placeholder="请输入菜单排序" style="width: 200px" v-decorator="[ 'sortNo',validatorRules.sortNo]" :readOnly="disableSubmit"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-show="show"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="是否路由菜单">
|
||||
<a-switch checkedChildren="是" unCheckedChildren="否" v-model="routeSwitch"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-show="show"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="隐藏路由">
|
||||
<a-switch checkedChildren="是" unCheckedChildren="否" v-model="menuHidden"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-show="show"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="是否缓存路由">
|
||||
<a-switch checkedChildren="是" unCheckedChildren="否" v-model="isKeepalive"/>
|
||||
</a-form-item>
|
||||
|
||||
|
||||
<a-form-item
|
||||
v-show="show"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="聚合路由">
|
||||
<a-switch checkedChildren="是" unCheckedChildren="否" v-model="alwaysShow"/>
|
||||
</a-form-item>
|
||||
|
||||
<!--update_begin author:wuxianquan date:20190908 for:增加组件，外链打开方式可选 -->
|
||||
<a-form-item
|
||||
v-show="show"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="打开方式">
|
||||
<a-switch checkedChildren="外部" unCheckedChildren="内部" v-model="internalOrExternal"/>
|
||||
</a-form-item>
|
||||
<!--update_end author:wuxianquan date:20190908 for:增加组件，外链打开方式可选 -->
|
||||
|
||||
|
||||
</a-form>
|
||||
|
||||
<!-- 选择图标 -->
|
||||
<icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
|
||||
</a-spin>
|
||||
<a-row :style="{textAlign:'right'}">
|
||||
<a-button :style="{marginRight: '8px'}" @click="handleCancel">
|
||||
关闭
|
||||
</a-button>
|
||||
<a-button :disabled="disableSubmit" @click="handleOk" type="primary">确定</a-button>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {addPermission,editPermission,queryTreeList, duplicateCheck} from '@/api/api'
|
||||
import Icons from './icon/Icons'
|
||||
import pick from 'lodash.pick'
|
||||
|
||||
export default {
|
||||
name: "PermissionModal",
|
||||
components: {Icons},
|
||||
data () {
|
||||
return {
|
||||
drawerWidth:700,
|
||||
treeData:[],
|
||||
treeValue: '0-0-4',
|
||||
title:"操作",
|
||||
visible: false,
|
||||
disableSubmit:false,
|
||||
model: {},
|
||||
localMenuType:0,
|
||||
alwaysShow:false,//表单元素-聚合路由
|
||||
menuHidden:false,//表单元素-隐藏路由
|
||||
routeSwitch:true, //是否路由菜单
|
||||
/*update_begin author:wuxianquan date:20190908 for:定义变量，初始值代表内部打开*/
|
||||
internalOrExternal:false,//菜单打开方式
|
||||
/*update_end author:wuxianquan date:20190908 for:定义变量，初始值代表内部打开*/
|
||||
isKeepalive:true, //是否缓存路由
|
||||
show:true,//根据菜单类型，动态显示隐藏表单元素
|
||||
menuLabel:'菜单名称',
|
||||
isRequrie:true, // 是否需要验证
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
|
||||
iconChooseVisible: false,
|
||||
validateStatus:""
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
validatorRules:function() {
|
||||
return {
|
||||
name:{rules: [{ required: true, message: '请输入菜单标题!' }]},
|
||||
component:{rules: [{ required: this.show, message: '请输入前端组件!' }]},
|
||||
url:{rules: [{ required: this.show, message: '请输入菜单路径!' }]},
|
||||
permsType:{rules: [{ required: true, message: '请输入授权策略!' }]},
|
||||
sortNo:{initialValue:1.0},
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.initDictConfig();
|
||||
},
|
||||
methods: {
|
||||
loadTree(){
|
||||
var that = this;
|
||||
queryTreeList().then((res)=>{
|
||||
if(res.success){
|
||||
that.treeData = [];
|
||||
let treeList = res.result.treeList
|
||||
for(let a=0;a<treeList.length;a++){
|
||||
let temp = treeList[a];
|
||||
temp.isLeaf = temp.leaf;
|
||||
that.treeData.push(temp);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
add () {
|
||||
// 默认值
|
||||
this.edit({status:'1',permsType:'1',route:true});
|
||||
},
|
||||
edit (record) {
|
||||
this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
//--------------------------------------------------------------------------------------------------
|
||||
//根据菜单类型，动态展示页面字段
|
||||
this.alwaysShow = !record.alwaysShow?false:true;
|
||||
this.menuHidden = !record.hidden?false:true;
|
||||
|
||||
if(record.route!=null){
|
||||
this.routeSwitch = record.route?true:false;
|
||||
}
|
||||
|
||||
if(record.keepAlive!=null){
|
||||
this.isKeepalive = record.keepAlive?true:false;
|
||||
}else{
|
||||
this.isKeepalive = false; // 升级兼容 如果没有（后台没有传过来、或者是新建）默认为false
|
||||
}
|
||||
|
||||
/*update_begin author:wuxianquan date:20190908 for:编辑初始化数据*/
|
||||
if(record.internalOrExternal!=null){
|
||||
this.internalOrExternal = record.internalOrExternal?true:false;
|
||||
}else{
|
||||
this.internalOrExternal = false;
|
||||
}
|
||||
/*update_end author:wuxianquan date:20190908 for:编辑初始化数据*/
|
||||
|
||||
|
||||
this.show = record.menuType==2?false:true;
|
||||
this.menuLabel = record.menuType==2?'按钮/权限':'菜单名称';
|
||||
|
||||
if(this.model.parentId){
|
||||
this.localMenuType = 1;
|
||||
}else{
|
||||
this.localMenuType = 0;
|
||||
}
|
||||
//----------------------------------------------------------------------------------------------
|
||||
|
||||
this.visible = true;
|
||||
this.loadTree();
|
||||
let fieldsVal = pick(this.model,'name','perms','permsType','component','redirect','url','sortNo','menuType','status');
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(fieldsVal)
|
||||
});
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.disableSubmit = false;
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk () {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.model.alwaysShow = this.alwaysShow;
|
||||
this.model.hidden = this.menuHidden;
|
||||
this.model.route = this.routeSwitch;
|
||||
this.model.keepAlive = this.isKeepalive;
|
||||
/*update_begin author:wuxianquan date:20190908 for:获取值*/
|
||||
this.model.internalOrExternal = this.internalOrExternal;
|
||||
/*update_end author:wuxianquan date:20190908 for:获取值*/
|
||||
|
||||
let formData = Object.assign(this.model, values);
|
||||
if ((formData.menuType == 1 || formData.menuType == 2) && !formData.parentId) {
|
||||
that.validateStatus = 'error';
|
||||
that.$message.error("请检查你填的类型以及信息是否正确！");
|
||||
return;
|
||||
} else {
|
||||
that.validateStatus = 'success';
|
||||
}
|
||||
that.confirmLoading = true;
|
||||
let obj;
|
||||
if (!this.model.id) {
|
||||
obj = addPermission(formData);
|
||||
} else {
|
||||
obj = editPermission(formData);
|
||||
}
|
||||
obj.then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok');
|
||||
that.close();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
validateNumber(rule, value, callback){
|
||||
if(!value || new RegExp(/^[0-9]*[1-9][0-9]*$/).test(value)){
|
||||
callback();
|
||||
}else{
|
||||
callback("请输入正整数!");
|
||||
}
|
||||
},
|
||||
validatePerms(rule, value, callback){
|
||||
if(value && value.length>0){
|
||||
//校验授权标识是否存在
|
||||
var params = {
|
||||
tableName: 'sys_permission',
|
||||
fieldName: 'perms',
|
||||
fieldVal: value,
|
||||
dataId: this.model.id
|
||||
};
|
||||
duplicateCheck(params).then((res) => {
|
||||
if (res.success) {
|
||||
callback()
|
||||
} else {
|
||||
callback("授权标识已存在!")
|
||||
}
|
||||
})
|
||||
}else{
|
||||
callback()
|
||||
}
|
||||
},
|
||||
onChangeMenuType(e) {
|
||||
this.localMenuType=e.target.value
|
||||
if(e.target.value == 2){
|
||||
this.show = false;
|
||||
this.menuLabel = '按钮/权限';
|
||||
}else{
|
||||
this.show = true;
|
||||
this.menuLabel = '菜单名称';
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.form.validateFields(['url','component'], { force: true });
|
||||
});
|
||||
},
|
||||
selectIcons(){
|
||||
this.iconChooseVisible = true
|
||||
},
|
||||
handleIconCancel () {
|
||||
this.iconChooseVisible = false
|
||||
},
|
||||
handleIconChoose (value) {
|
||||
this.model.icon = value
|
||||
this.form.icon = value
|
||||
this.iconChooseVisible = false
|
||||
},
|
||||
// 根据屏幕变化,设置抽屉尺寸
|
||||
resetScreenSize(){
|
||||
let screenWidth = document.body.clientWidth;
|
||||
if(screenWidth < 500){
|
||||
this.drawerWidth = screenWidth;
|
||||
}else{
|
||||
this.drawerWidth = 700;
|
||||
}
|
||||
},
|
||||
initDictConfig() {
|
||||
},
|
||||
handleParentIdChange(value){
|
||||
if(!value){
|
||||
this.validateStatus="error"
|
||||
}else{
|
||||
this.validateStatus="success"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
okText="保存并安排任务"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="任务类名"
|
||||
hasFeedback >
|
||||
<a-input placeholder="请输入任务类名" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" v-decorator="['jobClassName', {rules: [{ required: true, message: '请输入任务类名!' }], validateTrigger: 'blur'}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="cron表达式">
|
||||
<!-- <a-input placeholder="请输入cron表达式" v-decorator="['cronExpression', {'initialValue':'0/1 * * * * ?',rules: [{ required: true, message: '请输入任务类名!' }]}]" />-->
|
||||
<!-- <a target="_blank" href="http://cron.qqe2.com/">-->
|
||||
<!-- <a-icon type="share-alt" />-->
|
||||
<!-- 在线cron表达式生成-->
|
||||
<!-- </a>-->
|
||||
<!-- <j-cron ref="innerVueCron" v-decorator="['cronExpression', {'initialValue':'0/1 * * * * ?',rules: [{ required: true, message: '请输入cron表达式!' }]}]" @change="setCorn"></j-cron>-->
|
||||
<j-cron ref="innerVueCron" v-decorator="['cronExpression', { initialValue: '* * * * * ? *' }]" @change="setCorn"></j-cron>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="参数">
|
||||
<a-textarea placeholder="请输入参数" @change="event => event.target.value = event.target.value.trim()" :maxLength="300" :rows="5" v-decorator="['parameter', {}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述">
|
||||
<a-textarea placeholder="请输入描述" @change="event => event.target.value = event.target.value.trim()" :maxLength="300" :rows="3" v-decorator="['description', {}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态">
|
||||
<j-dict-select-tag type="radioButton" v-decorator="[ 'status', {'initialValue':0}]" :trigger-change="true" dictCode="quartz_status"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpAction } from '@/api/manage'
|
||||
import JCron from "@/components/jero/JCron";
|
||||
import pick from 'lodash.pick'
|
||||
// import moment from "moment"
|
||||
|
||||
export default {
|
||||
name: "QuartzJobModal",
|
||||
components: {
|
||||
JCron
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title:"操作",
|
||||
buttonStyle: 'solid',
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
cron: {
|
||||
label: '',
|
||||
value: ''
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
cron: {
|
||||
rules: [{
|
||||
required: true, message: '请输入cron表达式!'
|
||||
}],
|
||||
}
|
||||
},
|
||||
url: {
|
||||
add: "/sys/quartzJob/add",
|
||||
edit: "/sys/quartzJob/edit",
|
||||
},
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({});
|
||||
},
|
||||
edit (record) {
|
||||
let that = this;
|
||||
that.form.resetFields();
|
||||
this.model = Object.assign({},record);
|
||||
console.log(this.model)
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model,'jobClassName','cronExpression','parameter','description','status'));
|
||||
});
|
||||
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk () {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
console.log('values',values)
|
||||
if (!err) {
|
||||
if (typeof values.cronExpression == "undefined" || Object.keys(values.cronExpression).length==0 ) {
|
||||
this.$message.warning('请输入cron表达式!');
|
||||
return false;
|
||||
}
|
||||
|
||||
that.confirmLoading = true;
|
||||
let httpurl = '';
|
||||
let method = '';
|
||||
if(!this.model.id){
|
||||
httpurl+=this.url.add;
|
||||
method = 'post';
|
||||
}else{
|
||||
httpurl+=this.url.edit;
|
||||
method = 'put';
|
||||
}
|
||||
let formData = Object.assign(this.model, values);
|
||||
//时间格式化
|
||||
|
||||
console.log('提交参数',formData)
|
||||
httpAction(httpurl,formData,method).then((res)=>{
|
||||
if(res.success){
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok');
|
||||
that.close();
|
||||
}else{
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
setCorn(data){
|
||||
console.log('data)',data);
|
||||
this.$nextTick(() => {
|
||||
this.model.cronExpression = data;
|
||||
})
|
||||
|
||||
// console.log(Object.keys(data).length==0);
|
||||
if (Object.keys(data).length==0) {
|
||||
this.$message.warning('请输入cron表达式!');
|
||||
}
|
||||
},
|
||||
validateCron(rule, value, callback){
|
||||
if(!value){
|
||||
callback()
|
||||
}else if (Object.keys(value).length==0) {
|
||||
callback("请输入cron表达式!");
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
title="数据规则/按钮权限配置"
|
||||
width="365"
|
||||
:closable="false"
|
||||
@close="onClose"
|
||||
:visible="visible"
|
||||
>
|
||||
|
||||
<a-tabs defaultActiveKey="1">
|
||||
<a-tab-pane tab="数据规则" key="1">
|
||||
|
||||
<a-checkbox-group v-model="dataruleChecked" v-if="dataruleList.length>0">
|
||||
<a-row>
|
||||
<a-col :span="24" v-for="(item,index) in dataruleList" :key=" 'dr'+index ">
|
||||
<a-checkbox :value="item.id">{{ item.ruleName }}</a-checkbox>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="24">
|
||||
<div style="width: 100%;margin-top: 15px">
|
||||
<a-button @click="saveDataruleForRole" type="primary" size="small" icon="save">点击保存</a-button>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
<div v-else><h3>无配置信息!</h3></div>
|
||||
|
||||
</a-tab-pane>
|
||||
<!--<a-tab-pane tab="按钮权限" key="2">敬请期待!!!</a-tab-pane>-->
|
||||
</a-tabs>
|
||||
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ARow from 'ant-design-vue/es/grid/Row'
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
import { getAction,postAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'RoleDataruleModal',
|
||||
components: { ACol, ARow },
|
||||
data(){
|
||||
return {
|
||||
functionId:'',
|
||||
roleId:'',
|
||||
visible:false,
|
||||
tabList: [{
|
||||
key: '1',
|
||||
tab: '数据规则',
|
||||
}, {
|
||||
key: '2',
|
||||
tab: '按钮权限',
|
||||
}],
|
||||
activeTabKey: '1',
|
||||
url:{
|
||||
datarule:"/sys/role/datarule",
|
||||
},
|
||||
dataruleList:[],
|
||||
dataruleChecked:[]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
loadData(){
|
||||
getAction(`${this.url.datarule}/${this.functionId}/${this.roleId}`).then(res=>{
|
||||
console.log(res)
|
||||
if(res.success){
|
||||
this.dataruleList = res.result.datarule
|
||||
let drChecked = res.result.drChecked
|
||||
if(drChecked){
|
||||
this.dataruleChecked = drChecked.split(",")
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
saveDataruleForRole(){
|
||||
if(!this.dataruleChecked || this.dataruleChecked.length==0){
|
||||
this.$message.warning("请注意，现未勾选任何数据权限!")
|
||||
}
|
||||
let params = {
|
||||
permissionId:this.functionId,
|
||||
roleId:this.roleId,
|
||||
dataRuleIds:this.dataruleChecked.join(",")
|
||||
}
|
||||
console.log("保存数据权限",params)
|
||||
postAction(this.url.datarule,params).then(res=>{
|
||||
if(res.success){
|
||||
this.$message.success(res.message)
|
||||
}else{
|
||||
this.$message.error(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
show(functionId,roleId){
|
||||
this.onReset()
|
||||
this.functionId = functionId
|
||||
this.roleId = roleId
|
||||
this.visible=true
|
||||
this.loadData()
|
||||
},
|
||||
onClose(){
|
||||
this.visible=false
|
||||
this.onReset()
|
||||
},
|
||||
onTabChange (key) {
|
||||
this.activeTabKey = key
|
||||
},
|
||||
onReset(){
|
||||
this.functionId=''
|
||||
this.roleId=''
|
||||
this.dataruleList=[]
|
||||
this.dataruleChecked=[]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭"
|
||||
wrapClassName="ant-modal-cust-warp"
|
||||
style="top:5%;height: 85%;overflow-y: hidden">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="角色名称">
|
||||
<a-input placeholder="请输入角色名称" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" v-decorator="[ 'roleName', validatorRules.roleName]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="角色编码">
|
||||
<a-input placeholder="请输入角色编码" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" :disabled="roleDisabled" v-decorator="[ 'roleCode', validatorRules.roleCode]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述">
|
||||
<a-textarea :rows="5" @change="event => event.target.value = event.target.value.trim()" :maxLength="300" placeholder="请输入描述" v-decorator="[ 'description', validatorRules.description ]" />
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import {addRole,editRole,duplicateCheck } from '@/api/api'
|
||||
import {checkRoleCode} from "@/utils/validateOnly";
|
||||
|
||||
export default {
|
||||
name: "RoleModal",
|
||||
data () {
|
||||
return {
|
||||
title:"操作",
|
||||
visible: false,
|
||||
roleDisabled: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules:{
|
||||
roleName:{
|
||||
rules: [
|
||||
{ required: true, message: '请输入角色名称!' },
|
||||
{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
roleCode:{
|
||||
rules: [
|
||||
{ required: true,validator: this.validateRoleCode},
|
||||
{ min: 0, max: 50, message: '长度不超过 50 个字符', trigger: 'blur' },
|
||||
],
|
||||
validateTrigger: 'blur'},
|
||||
description:{
|
||||
rules: [
|
||||
{ min: 0, max: 300, message: '长度不超过 300 个字符', trigger: 'blur' }
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({});
|
||||
},
|
||||
edit (record) {
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.visible = true;
|
||||
|
||||
//编辑页面禁止修改角色编码
|
||||
if(this.model.id){
|
||||
this.roleDisabled = true;
|
||||
}else{
|
||||
this.roleDisabled = false;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model,'roleName', 'description','roleCode'))
|
||||
});
|
||||
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk () {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true;
|
||||
values.roleName = (values.roleName || '').trim()
|
||||
values.roleCode = (values.roleCode || '').trim()
|
||||
let formData = Object.assign(this.model, values);
|
||||
let obj;
|
||||
console.log(formData)
|
||||
if(!this.model.id){
|
||||
obj=addRole(formData);
|
||||
}else{
|
||||
obj=editRole(formData);
|
||||
}
|
||||
obj.then((res)=>{
|
||||
if(res.success){
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok');
|
||||
that.close();
|
||||
}else{
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
validateRoleCode(rule, value, callback){
|
||||
checkRoleCode(value,this.model.id).then(res => {
|
||||
if(res.success){
|
||||
callback()
|
||||
}else {
|
||||
callback(res.code === 500 ? '角色编码已经存在': res)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal
|
||||
centered
|
||||
:title="title"
|
||||
:width="1000"
|
||||
:visible="visible"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :span="10">
|
||||
<a-form-item label="用户账号">
|
||||
<a-input placeholder="请输入用户账号" v-model="queryParam.username"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<a-table
|
||||
size="small"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns1"
|
||||
:dataSource="dataSource1"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:scroll="{ y: 240 }"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys,onSelectAll:onSelectAll,onSelect:onSelect,onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {filterObj} from '@/utils/util'
|
||||
import {getAction} from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "SelectUserModal",
|
||||
data() {
|
||||
return {
|
||||
title: "添加已有用户",
|
||||
names: [],
|
||||
visible: false,
|
||||
placement: 'right',
|
||||
description: '',
|
||||
// 查询条件
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns1: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 50,
|
||||
align: "center",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '用户账号',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'username'
|
||||
},
|
||||
{
|
||||
title: '用户名称',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'realname'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'sex_dictText'
|
||||
},
|
||||
{
|
||||
title: '电话',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'phone'
|
||||
},
|
||||
{
|
||||
title: '部门',
|
||||
align: "center",
|
||||
width: 150,
|
||||
dataIndex: 'orgCode'
|
||||
}
|
||||
],
|
||||
columns2: [
|
||||
{
|
||||
title: '用户账号',
|
||||
align: "center",
|
||||
dataIndex: 'username',
|
||||
|
||||
},
|
||||
{
|
||||
title: '用户名称',
|
||||
align: "center",
|
||||
dataIndex: 'realname',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
width: 100,
|
||||
scopedSlots: {customRender: 'action'},
|
||||
}
|
||||
],
|
||||
//数据集
|
||||
dataSource1: [],
|
||||
dataSource2: [],
|
||||
// 分页参数
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
isorter: {
|
||||
column: 'createTime',
|
||||
order: 'desc',
|
||||
},
|
||||
loading: false,
|
||||
selectedRowKeys: [],
|
||||
selectedRows: [],
|
||||
url: {
|
||||
list: "/sys/user/page",
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
searchQuery() {
|
||||
this.loadData(1);
|
||||
},
|
||||
searchReset() {
|
||||
this.queryParam = {};
|
||||
this.loadData(1);
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk() {
|
||||
this.dataSource2 = this.selectedRowKeys;
|
||||
console.log("data:" + this.dataSource2);
|
||||
this.$emit("selectFinished", this.dataSource2);
|
||||
this.visible = false;
|
||||
},
|
||||
add() {
|
||||
this.visible = true;
|
||||
},
|
||||
loadData(arg) {
|
||||
//加载数据 若传入参数1则加载第一页的内容
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1;
|
||||
}
|
||||
var params = this.getQueryParams();//查询条件
|
||||
getAction(this.url.list, params).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource1 = res.result.records;
|
||||
this.ipagination.total = res.result.total;
|
||||
}
|
||||
})
|
||||
},
|
||||
getQueryParams() {
|
||||
var param = Object.assign({}, this.queryParam, this.isorter);
|
||||
param.field = this.getQueryField();
|
||||
param.pageNo = this.ipagination.current;
|
||||
param.pageSize = this.ipagination.pageSize;
|
||||
return filterObj(param);
|
||||
},
|
||||
getQueryField() {
|
||||
//TODO 字段权限控制
|
||||
},
|
||||
onSelectAll(selected, selectedRows, changeRows) {
|
||||
if (selected === true) {
|
||||
for (var a = 0; a < changeRows.length; a++) {
|
||||
this.dataSource2.push(changeRows[a]);
|
||||
}
|
||||
} else {
|
||||
for (var b = 0; b < changeRows.length; b++) {
|
||||
this.dataSource2.splice(this.dataSource2.indexOf(changeRows[b]), 1);
|
||||
}
|
||||
}
|
||||
// console.log(selected, selectedRows, changeRows);
|
||||
},
|
||||
onSelect(record, selected) {
|
||||
if (selected === true) {
|
||||
this.dataSource2.push(record);
|
||||
} else {
|
||||
var index = this.dataSource2.indexOf(record);
|
||||
//console.log();
|
||||
if (index >= 0) {
|
||||
this.dataSource2.splice(this.dataSource2.indexOf(record), 1);
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
onSelectChange(selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys;
|
||||
this.selectionRows = selectedRows;
|
||||
},
|
||||
onClearSelected() {
|
||||
this.selectedRowKeys = [];
|
||||
this.selectionRows = [];
|
||||
},
|
||||
handleDelete: function (record) {
|
||||
this.dataSource2.splice(this.dataSource2.indexOf(record), 1);
|
||||
},
|
||||
handleTableChange(pagination, filters, sorter) {
|
||||
//分页、排序、筛选变化时触发
|
||||
console.log(sorter);
|
||||
//TODO 筛选
|
||||
if (Object.keys(sorter).length > 0) {
|
||||
this.isorter.column = sorter.field;
|
||||
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
|
||||
}
|
||||
this.ipagination = pagination;
|
||||
this.loadData();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.ant-card-body .table-operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.anty-row-operator button {
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
background-color: #ffffff
|
||||
}
|
||||
|
||||
.ant-modal-cust-warp {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.ant-modal-cust-warp .ant-modal-body {
|
||||
height: calc(100% - 110px) !important;
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.ant-modal-cust-warp .ant-modal-content {
|
||||
height: 90% !important;
|
||||
overflow-y: hidden
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
:destroyOnClose="true"
|
||||
cancelText="关闭">
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item label="父级节点" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-tree-select
|
||||
ref="treeSelect"
|
||||
placeholder="请选择父级节点，若没有可不选择"
|
||||
v-decorator="['pid', validatorRules.pid]"
|
||||
dict="sys_category,name,id"
|
||||
pidField="pid"
|
||||
pidValue="0">
|
||||
</j-tree-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="分类名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input v-decorator="[ 'name', validatorRules.name]" placeholder="请输入分类名称"></a-input>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { httpAction,getAction } from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import JTreeSelect from '@/components/jero/JTreeSelect'
|
||||
|
||||
export default {
|
||||
name: "SysCategoryModal",
|
||||
components: {
|
||||
JTreeSelect
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: this.$form.createForm(this),
|
||||
title:"操作",
|
||||
width:800,
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
|
||||
confirmLoading: false,
|
||||
validatorRules:{
|
||||
code:{
|
||||
rules: [{
|
||||
required: true, message: '请输入类型编码!'
|
||||
},{
|
||||
validator: this.validateMyCode
|
||||
}]
|
||||
},
|
||||
pid:{},
|
||||
name:{rules: [{ required: true, message: '请输入类型名称!' }]}
|
||||
},
|
||||
url: {
|
||||
add: "/sys/category/add",
|
||||
edit: "/sys/category/edit",
|
||||
checkCode:"/sys/category/checkCode",
|
||||
},
|
||||
expandedRowKeys:[],
|
||||
pidField:"pid",
|
||||
subExpandedKeys:[]
|
||||
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({});
|
||||
},
|
||||
edit (record) {
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model,'pid','name','code'))
|
||||
})
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk () {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true;
|
||||
let httpurl = '';
|
||||
let method = '';
|
||||
if(!this.model.id){
|
||||
httpurl+=this.url.add;
|
||||
method = 'post';
|
||||
}else{
|
||||
httpurl+=this.url.edit;
|
||||
method = 'put';
|
||||
}
|
||||
let formData = Object.assign(this.model, values);
|
||||
console.log("表单提交数据",formData)
|
||||
httpAction(httpurl,formData,method).then((res)=>{
|
||||
if(res.success){
|
||||
that.$message.success(res.message);
|
||||
that.submitSuccess(formData)
|
||||
}else{
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
popupCallback(row){
|
||||
this.form.setFieldsValue(pick(row,'pid','name','code'))
|
||||
},
|
||||
submitSuccess(formData){
|
||||
if(!formData.id){
|
||||
let treeData = this.$refs.treeSelect.getCurrTreeData()
|
||||
this.expandedRowKeys=[]
|
||||
this.getExpandKeysByPid(formData[this.pidField],treeData,treeData)
|
||||
if(formData.pid && this.expandedRowKeys.length==0){
|
||||
this.expandedRowKeys = this.subExpandedKeys;
|
||||
}
|
||||
this.$emit('ok',formData,this.expandedRowKeys.reverse());
|
||||
}else{
|
||||
this.$emit('ok',formData);
|
||||
}
|
||||
},
|
||||
getExpandKeysByPid(pid,arr,all){
|
||||
if(pid && arr && arr.length>0){
|
||||
for(let i=0;i<arr.length;i++){
|
||||
if(arr[i].key==pid){
|
||||
this.expandedRowKeys.push(arr[i].key)
|
||||
this.getExpandKeysByPid(arr[i]['parentId'],all,all)
|
||||
}else{
|
||||
this.getExpandKeysByPid(pid,arr[i].children,all)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
validateMyCode(rule, value, callback){
|
||||
let params = {
|
||||
pid: this.form.getFieldValue('pid'),
|
||||
code: value
|
||||
}
|
||||
getAction(this.url.checkCode,params).then((res) => {
|
||||
if (res.success) {
|
||||
callback()
|
||||
} else {
|
||||
callback(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="1000"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="规则名称">
|
||||
<a-input placeholder="请输入规则名称" v-decorator="['ruleName', validatorRules.ruleName]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="规则Code">
|
||||
<a-input placeholder="请输入规则Code" v-decorator="['ruleCode', validatorRules.ruleCode]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="规则描述">
|
||||
<a-textarea placeholder="请输入规则描述" v-decorator="['ruleDescription', {}]"/>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
<!-- 规则设计 -->
|
||||
<a-tabs v-model="tabs.activeKey">
|
||||
<a-tab-pane tab="局部规则" :key="tabs.design.key" forceRender>
|
||||
<a-alert type="info" showIcon message="局部规则按照你输入的位数有序的校验。"/>
|
||||
<j-editable-table
|
||||
ref="designTable"
|
||||
dragSort
|
||||
rowNumber
|
||||
:maxHeight="240"
|
||||
:columns="tabs.design.columns"
|
||||
:dataSource="tabs.design.dataSource"
|
||||
style="margin-top: 8px;"
|
||||
>
|
||||
|
||||
<template #action="props">
|
||||
<my-action-button :rowEvent="props"/>
|
||||
</template>
|
||||
|
||||
</j-editable-table>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="全局规则" :key="tabs.global.key" forceRender>
|
||||
<j-editable-table
|
||||
ref="globalTable"
|
||||
dragSort
|
||||
rowNumber
|
||||
actionButton
|
||||
:maxHeight="240"
|
||||
:columns="tabs.global.columns"
|
||||
:dataSource="tabs.global.dataSource"
|
||||
>
|
||||
|
||||
<template #actionButtonAfter>
|
||||
<a-alert type="info" showIcon message="全局规则可校验用户输入的所有字符；全局规则的优先级比局部规则的要高。" style="margin-bottom: 8px;"/>
|
||||
</template>
|
||||
|
||||
<template #action="props">
|
||||
<my-action-button :rowEvent="props" allowEmpty/>
|
||||
</template>
|
||||
|
||||
</j-editable-table>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import { httpAction } from '@/api/manage'
|
||||
import { validateDuplicateValue, alwaysResolve, failedSymbol } from '@/utils/util'
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
import JEditableTable from '@comp/jero/JEditableTable'
|
||||
|
||||
export default {
|
||||
name: 'SysCheckRuleModal',
|
||||
components: {
|
||||
JEditableTable,
|
||||
'my-action-button': {
|
||||
props: { rowEvent: Object, allowEmpty: Boolean },
|
||||
methods: {
|
||||
confirmIsShow() {
|
||||
const { index, allValues: { inputValues } } = this.rowEvent
|
||||
let value = inputValues[index]
|
||||
return value.digits || value.pattern
|
||||
},
|
||||
handleLineAdd() {
|
||||
const { target } = this.rowEvent
|
||||
target.add()
|
||||
},
|
||||
handleLineDelete() {
|
||||
const { rowId, target } = this.rowEvent
|
||||
target.removeRows(rowId)
|
||||
},
|
||||
renderDeleteButton() {
|
||||
if (this.allowEmpty || this.rowEvent.index > 0) {
|
||||
if (this.confirmIsShow()) {
|
||||
return (
|
||||
<a-popconfirm title="确定要删除吗？" onConfirm={this.handleLineDelete}>
|
||||
<a-button icon="minus"/>
|
||||
</a-popconfirm>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<a-button icon="minus" onClick={this.handleLineDelete}/>
|
||||
)
|
||||
}
|
||||
}
|
||||
return ''
|
||||
},
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<a-button onClick={this.handleLineAdd} icon="plus"/>
|
||||
|
||||
{this.renderDeleteButton()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
ruleName: { rules: [{ required: true, message: '请输入规则名称!' },] },
|
||||
ruleCode: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入规则Code!' },
|
||||
{ validator: (rule, value, callback) => validateDuplicateValue('sys_check_rule', 'rule_code', value, this.model.id, callback) }
|
||||
]
|
||||
},
|
||||
},
|
||||
tabs: {
|
||||
activeKey: 'design',
|
||||
global: {
|
||||
key: 'global',
|
||||
columns: [
|
||||
{
|
||||
title: '优先级',
|
||||
key: 'priority',
|
||||
width: '15%',
|
||||
type: FormTypes.select,
|
||||
defaultValue: '1',
|
||||
options: [
|
||||
{ title: '优先运行', value: '1' },
|
||||
{ title: '最后运行', value: '0' },
|
||||
],
|
||||
validateRules: []
|
||||
},
|
||||
{
|
||||
title: '规则（正则表达式）',
|
||||
key: 'pattern',
|
||||
width: '50%',
|
||||
type: FormTypes.input,
|
||||
validateRules: [
|
||||
{ required: true, message: '规则不能为空' },
|
||||
{ handler: this.validatePatternHandler },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '提示文本',
|
||||
key: 'message',
|
||||
width: '20%',
|
||||
type: FormTypes.input,
|
||||
validateRules: [
|
||||
{ required: true, message: '${title}不能为空' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: '15%',
|
||||
slotName: 'action',
|
||||
type: FormTypes.slot
|
||||
}
|
||||
],
|
||||
dataSource: [],
|
||||
},
|
||||
design: {
|
||||
key: 'design',
|
||||
columns: [
|
||||
{
|
||||
title: '位数',
|
||||
key: 'digits',
|
||||
width: '15%',
|
||||
type: FormTypes.inputNumber,
|
||||
validateRules: [
|
||||
{ required: true, message: '${title}不能为空' },
|
||||
{ pattern: /^[1-9]\d*$/, message: '请输入零以上的正整数' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '规则（正则表达式）',
|
||||
key: 'pattern',
|
||||
width: '50%',
|
||||
type: FormTypes.input,
|
||||
validateRules: [
|
||||
{ required: true, message: '规则不能为空' },
|
||||
{ handler: this.validatePatternHandler }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '提示文本',
|
||||
key: 'message',
|
||||
width: '20%',
|
||||
type: FormTypes.input,
|
||||
validateRules: [
|
||||
{ required: true, message: '${title}不能为空' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: '15%',
|
||||
slotName: 'action',
|
||||
type: FormTypes.slot
|
||||
},
|
||||
],
|
||||
dataSource: [],
|
||||
}
|
||||
},
|
||||
url: {
|
||||
add: '/sys/checkRule/add',
|
||||
edit: '/sys/checkRule/edit',
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
|
||||
validatePatternHandler(type, value, row, column, callback, target) {
|
||||
if (type === 'blur' || type === 'getValues') {
|
||||
try {
|
||||
new RegExp(value)
|
||||
callback(true)
|
||||
} catch (e) {
|
||||
callback(false, '请输入正确的正则表达式')
|
||||
}
|
||||
} else {
|
||||
callback(true) // 不填写或者填写 null 代表不进行任何操作
|
||||
}
|
||||
},
|
||||
|
||||
add() {
|
||||
this.edit({})
|
||||
},
|
||||
edit(record) {
|
||||
this.form.resetFields()
|
||||
this.tabs.activeKey = this.tabs.design.key
|
||||
this.tabs.global.dataSource = []
|
||||
this.tabs.design.dataSource = [{ digits: '', pattern: '', message: '' }]
|
||||
this.model = Object.assign({}, record)
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'ruleName', 'ruleCode', 'ruleDescription'))
|
||||
// 子表数据
|
||||
let ruleJson = this.model.ruleJson
|
||||
if (ruleJson) {
|
||||
let ruleList = JSON.parse(ruleJson)
|
||||
// 筛选出全局规则和局部规则
|
||||
let global = [], design = [], priority = '1'
|
||||
ruleList.forEach(rule => {
|
||||
if (rule.digits === '*') {
|
||||
global.push(Object.assign(rule, { priority }))
|
||||
} else {
|
||||
priority = '0'
|
||||
design.push(rule)
|
||||
}
|
||||
})
|
||||
this.tabs.global.dataSource = global
|
||||
this.tabs.design.dataSource = design
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
},
|
||||
handleOk() {
|
||||
Promise.all([
|
||||
// 主表单校验
|
||||
alwaysResolve(new Promise((resolve, reject) => {
|
||||
this.form.validateFields((error, values) => error ? reject(error) : resolve(values))
|
||||
})),
|
||||
// 局部规则子表校验
|
||||
alwaysResolve(this.$refs.designTable.getValuesPromise),
|
||||
// 全局规则子表校验
|
||||
alwaysResolve(this.$refs.globalTable.getValuesPromise),
|
||||
]).then(results => {
|
||||
let [mainResult, designResult, globalResult] = results
|
||||
|
||||
if (mainResult.type === failedSymbol) {
|
||||
return Promise.reject('主表校验未通过')
|
||||
} else if (designResult.type === failedSymbol) {
|
||||
this.tabs.activeKey = this.tabs.design.key
|
||||
return Promise.reject('局部规则子表校验未通过')
|
||||
} else if (globalResult.type === failedSymbol) {
|
||||
this.tabs.activeKey = this.tabs.global.key
|
||||
return Promise.reject('全局规则子表校验未通过')
|
||||
} else {
|
||||
// 所有校验已通过，这一步是整合数据
|
||||
let mainValues = mainResult.data, globalValues = globalResult.data, designValues = designResult.data
|
||||
|
||||
// 整合两个子表的数据
|
||||
let firstGlobal = [], afterGlobal = []
|
||||
globalValues.forEach(v => {
|
||||
v.digits = '*'
|
||||
if (v.priority === '1') {
|
||||
firstGlobal.push(v)
|
||||
} else {
|
||||
afterGlobal.push(v)
|
||||
}
|
||||
})
|
||||
let concatValues = firstGlobal.concat(designValues).concat(afterGlobal)
|
||||
let subValues = concatValues.map(i => pick(i, 'digits', 'pattern', 'message'))
|
||||
|
||||
// 生成 formData，用于传入后台
|
||||
let ruleJson = JSON.stringify(subValues)
|
||||
let formData = Object.assign(this.model, mainValues, { ruleJson })
|
||||
|
||||
// 判断请求方式和请求地址，并发送请求
|
||||
let method = 'post', httpUrl = this.url.add
|
||||
if (this.model.id) {
|
||||
method = 'put'
|
||||
httpUrl = this.url.edit
|
||||
}
|
||||
this.confirmLoading = true
|
||||
return httpAction(httpUrl, formData, method)
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.$emit('ok')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).catch(e => {
|
||||
console.error(e)
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="功能测试"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
@ok="visible=false"
|
||||
@cancel="visible=false"
|
||||
>
|
||||
<a-form :form="form">
|
||||
<a-form-item label="功能测试">
|
||||
<a-input placeholder="请输入" v-decorator="['test', validatorRules.test]" @change="e=>testValue=e.target.value"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-row type="flex" :gutter="8">
|
||||
<a-col v-for="(str,index) of testValue" :key="index">
|
||||
<a-row>
|
||||
<a-col>
|
||||
<a-input :value="str" style="text-align: center;width: 40px;"/>
|
||||
</a-col>
|
||||
<a-col style="text-align: center;">{{index+1}}</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { validateCheckRule } from '@/utils/util'
|
||||
|
||||
export default {
|
||||
name: 'SysCheckRuleTestModal',
|
||||
data() {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
ruleCode: '',
|
||||
testValue: '',
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
test: {
|
||||
rules: [{ validator: (rule, value, callback) => validateCheckRule(this.ruleCode, value, callback) }]
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open(ruleCode) {
|
||||
this.ruleCode = ruleCode
|
||||
this.form.resetFields()
|
||||
this.testValue = ''
|
||||
this.visible = true
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<j-form-container :disabled="formDisabled">
|
||||
<a-form :form="form" slot="detail">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="表名" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input :maxLength="50" @change="e => {e.target.value = (e.target.value + '').trim()}" v-decorator="['tableName', validatorRules.tableName]" placeholder="请输入表名" ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<!-- maxLength 之前是120-->
|
||||
<a-form-item label="字段名" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input :maxLength="50" @change="e => {e.target.value = (e.target.value + '').trim()}" v-decorator="['fieldName',validatorRules.fieldName]" placeholder="请输入字段名" ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<!-- maxLength 之前是120-->
|
||||
<a-form-item label="混淆码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input :maxLength="50" @change="e => {e.target.value = (e.target.value + '').trim()}" v-decorator="['confusionCode',validatorRules.confusionCode]" placeholder="请输入混淆码" ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
|
||||
<a-button @click="submitForm">提 交</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</j-form-container>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import { validateDuplicateValue } from '@/utils/util'
|
||||
|
||||
export default {
|
||||
name: 'SysConfusionForm',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
//流程表单data
|
||||
formData: {
|
||||
type: Object,
|
||||
default: ()=>{},
|
||||
required: false
|
||||
},
|
||||
//表单模式：true流程表单 false普通表单
|
||||
formBpm: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false
|
||||
},
|
||||
//表单禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: this.$form.createForm(this),
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
confirmLoading: false,
|
||||
validatorRules: {
|
||||
tableName: {
|
||||
rules: [{
|
||||
required: true, message: '请输入表名!'
|
||||
}],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
fieldName: {
|
||||
rules: [{
|
||||
required: true,
|
||||
message: '请输入字段名！'
|
||||
}],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
confusionCode: {
|
||||
rules: [{
|
||||
required: true, message: '请输入混淆码!',
|
||||
}],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
realname: {rules: [{required: true, message: '请输入用户名称!'}], validateTrigger: 'blur'},
|
||||
phone: {rules: [{required: true, message: '请输入手机号!'},{validator: this.validatePhone}], validateTrigger: 'blur'},
|
||||
email: {
|
||||
rules: [{
|
||||
required: true,
|
||||
message: '请输入邮箱!'
|
||||
},{ validator: this.validateEmail}],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
roles: {},
|
||||
// sex:{initialValue:((!this.model.sex)?"": (this.model.sex+""))}
|
||||
},
|
||||
url: {
|
||||
add: "/sys/confusion/add",
|
||||
edit: "/sys/confusion/edit",
|
||||
queryById: "/sys/confusion/queryById"
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formDisabled(){
|
||||
if(this.formBpm===true){
|
||||
if(this.formData.disabled===false){
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
return this.disabled
|
||||
},
|
||||
showFlowSubmitButton(){
|
||||
if(this.formBpm===true){
|
||||
if(this.formData.disabled===false){
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
//如果是流程中表单，则需要加载流程表单data
|
||||
this.showFlowData();
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({});
|
||||
},
|
||||
edit (record) {
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model,'confusionCode','tableName','fieldName'))
|
||||
})
|
||||
},
|
||||
//渲染流程表单数据
|
||||
showFlowData(){
|
||||
if(this.formBpm === true){
|
||||
let params = {id:this.formData.dataId};
|
||||
getAction(this.url.queryById,params).then((res)=>{
|
||||
if(res.success){
|
||||
this.edit (res.result);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
submitForm () {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true;
|
||||
let httpurl = '';
|
||||
let method = '';
|
||||
if(!this.model.id){
|
||||
httpurl+=this.url.add;
|
||||
method = 'post';
|
||||
}else{
|
||||
httpurl+=this.url.edit;
|
||||
method = 'put';
|
||||
}
|
||||
let formData = Object.assign(this.model, values);
|
||||
console.log("表单提交数据",formData)
|
||||
httpAction(httpurl,formData,method).then((res)=>{
|
||||
if(res.success){
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok');
|
||||
}else{
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
popupCallback(row){
|
||||
this.form.setFieldsValue(pick(row,'confusionType','confusionName'))
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
switchFullscreen
|
||||
@ok="handleOk"
|
||||
:okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<sys-confusion-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></sys-confusion-form>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import SysConfusionForm from './SysConfusionForm'
|
||||
export default {
|
||||
name: 'SysConfusionModal',
|
||||
components: {
|
||||
SysConfusionForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title:'',
|
||||
width:800,
|
||||
visible: false,
|
||||
disableSubmit: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.visible=true
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.realForm.add();
|
||||
})
|
||||
},
|
||||
edit (record) {
|
||||
this.visible=true
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.realForm.edit(record);
|
||||
})
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk () {
|
||||
this.$refs.realForm.submitForm();
|
||||
},
|
||||
submitCallback(){
|
||||
this.$emit('ok');
|
||||
this.visible = false;
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="部门角色名称">
|
||||
<a-input placeholder="请输入部门角色名称" v-decorator="['roleName', validatorRules.roleName]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="部门角色编码">
|
||||
<a-input placeholder="请输入部门角色编码" v-decorator="['roleCode', validatorRules.roleCode]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述">
|
||||
<a-input placeholder="请输入描述" v-decorator="['description', validatorRules.description]" />
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpAction } from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import {duplicateCheck } from '@/api/api'
|
||||
|
||||
export default {
|
||||
name: "SysDepartRoleModal",
|
||||
data () {
|
||||
return {
|
||||
title:"操作",
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules:{
|
||||
roleName:{
|
||||
rules: [
|
||||
{ required: true, message: '请输入部门角色名称!' },
|
||||
{ min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
|
||||
]},
|
||||
roleCode:{
|
||||
rules: [
|
||||
{ required: true, message: '请输入部门角色编码!'},
|
||||
{ min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' },
|
||||
{ validator: this.validateRoleCode}
|
||||
]},
|
||||
description:{
|
||||
rules: [
|
||||
{ min: 0, max: 126, message: '长度不超过 126 个字符', trigger: 'blur' }
|
||||
]}
|
||||
},
|
||||
url: {
|
||||
add: "/sys/sysDepartRole/add",
|
||||
edit: "/sys/sysDepartRole/edit",
|
||||
},
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add (departId) {
|
||||
this.edit({},departId);
|
||||
},
|
||||
edit (record,departId) {
|
||||
this.departId = departId;
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model,'roleName','roleCode','description'))
|
||||
});
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk () {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true;
|
||||
let httpurl = '';
|
||||
let method = '';
|
||||
if(!this.model.id){
|
||||
httpurl+=this.url.add;
|
||||
method = 'post';
|
||||
}else{
|
||||
httpurl+=this.url.edit;
|
||||
method = 'put';
|
||||
}
|
||||
let formData = Object.assign(this.model, values);
|
||||
formData.departId = this.departId;
|
||||
httpAction(httpurl,formData,method).then((res)=>{
|
||||
if(res.success){
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok');
|
||||
}else{
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
validateRoleCode(rule, value, callback){
|
||||
if(/[\u4E00-\u9FA5]/g.test(value)){
|
||||
callback("部门角色编码不可输入汉字!");
|
||||
}else{
|
||||
var params = {
|
||||
tableName: "sys_depart_role",
|
||||
fieldName: "role_code",
|
||||
fieldVal: value,
|
||||
dataId: this.model.id,
|
||||
};
|
||||
duplicateCheck(params).then((res)=>{
|
||||
if(res.success){
|
||||
callback();
|
||||
}else{
|
||||
callback(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<j-form-container :disabled="formDisabled">
|
||||
<a-form :form="form" slot="detail">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="租户名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input v-decorator="['name']" placeholder="请输入租户名称"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="24">
|
||||
<a-form-item label="租户编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input-number style="width: 100%" :min="1" v-decorator="['id',{rules: [{ required: true, message: '请输入租户编号'}]}]" placeholder="请输入租户编号"></a-input-number>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="24">
|
||||
<a-form-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date placeholder="请选择开始时间" v-decorator="['beginDate']" :trigger-change="true" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date placeholder="请选择结束时间" v-decorator="['endDate']" :trigger-change="true" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-radio-group name="tenantStatus" v-decorator="[ 'status', {initialValue:1}]">
|
||||
<a-radio :value="1">正常</a-radio>
|
||||
<a-radio :value="0">冻结</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
|
||||
<a-button @click="submitForm">提 交</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</j-form-container>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import { validateDuplicateValue } from '@/utils/util'
|
||||
import JFormContainer from '@/components/jero/JFormContainer'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
import JDictSelectTag from "@/components/dict/JDictSelectTag"
|
||||
|
||||
export default {
|
||||
name: "TenantForm",
|
||||
components: {
|
||||
JFormContainer,
|
||||
JDate,
|
||||
JDictSelectTag,
|
||||
},
|
||||
props: {
|
||||
formData: {
|
||||
type: Object,
|
||||
default: ()=>{},
|
||||
required: false
|
||||
},
|
||||
normal: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: this.$form.createForm(this),
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
confirmLoading: false,
|
||||
validatorRules: {
|
||||
},
|
||||
url: {
|
||||
add: "/sys/tenant/add",
|
||||
edit: "/sys/tenant/edit",
|
||||
queryById: "/sys/tenant/queryById"
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formDisabled(){
|
||||
if(this.normal===false){
|
||||
if(this.formData.disabled===false){
|
||||
return false
|
||||
}else{
|
||||
return true
|
||||
}
|
||||
}
|
||||
return this.disabled
|
||||
},
|
||||
showFlowSubmitButton(){
|
||||
if(this.normal===false){
|
||||
if(this.formData.disabled===false){
|
||||
return true
|
||||
}else{
|
||||
return false
|
||||
}
|
||||
}else{
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.showFlowData();
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({});
|
||||
},
|
||||
edit (record) {
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model,'id','name','beginDate','endDate','status'))
|
||||
})
|
||||
},
|
||||
showFlowData(){
|
||||
if(this.normal === false){
|
||||
let params = {id:this.formData.dataId};
|
||||
getAction(this.url.queryById,params).then((res)=>{
|
||||
if(res.success){
|
||||
this.edit (res.result);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
submitForm () {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true;
|
||||
let httpurl = '';
|
||||
let method = '';
|
||||
if(!this.model.id){
|
||||
httpurl+=this.url.add;
|
||||
method = 'post';
|
||||
}else{
|
||||
httpurl+=this.url.edit;
|
||||
method = 'put';
|
||||
}
|
||||
let formData = Object.assign(this.model, values);
|
||||
console.log("表单提交数据",formData)
|
||||
httpAction(httpurl,formData,method).then((res)=>{
|
||||
if(res.success){
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok');
|
||||
}else{
|
||||
if("该编号已存在!" == res.message){
|
||||
this.model.id=""
|
||||
}
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
popupCallback(row){
|
||||
this.form.setFieldsValue(pick(row, 'id', 'name','beginDate','endDate','status'))
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
switchFullscreen
|
||||
@ok="handleOk"
|
||||
:okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<tenant-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit" normal></tenant-form>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import TenantForm from './TenantForm'
|
||||
export default {
|
||||
name: "TenantModal",
|
||||
components: {
|
||||
TenantForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title:'',
|
||||
width:800,
|
||||
visible: false,
|
||||
disableSubmit: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.visible=true
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.realForm.add();
|
||||
})
|
||||
},
|
||||
edit (record) {
|
||||
this.visible=true
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.realForm.edit(record);
|
||||
})
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk () {
|
||||
this.$refs.realForm.submitForm();
|
||||
},
|
||||
submitCallback(){
|
||||
this.$emit('ok');
|
||||
this.visible = false;
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,631 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
:title="title"
|
||||
:maskClosable="true"
|
||||
:width="drawerWidth"
|
||||
placement="right"
|
||||
:closable="true"
|
||||
@close="handleCancel"
|
||||
:visible="visible"
|
||||
style="height: 100%;overflow: auto;padding-bottom: 53px;">
|
||||
|
||||
<template slot="title">
|
||||
<div style="width: 100%;">
|
||||
<span>{{ title }}</span>
|
||||
<span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
|
||||
<a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入用户账号" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" v-decorator.trim="[ 'username', validatorRules.username]"
|
||||
:readOnly="!!model.id"/>
|
||||
</a-form-item>
|
||||
|
||||
<template v-if="!model.id">
|
||||
<a-form-item label="登录密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input type="password" placeholder="请输入登录密码" :maxLength="50" autocomplete='new-password'
|
||||
@change="event => event.target.value = event.target.value.trim()" v-decorator="[ 'password',validatorRules.password]"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input type="password" @blur="handleConfirmBlur" :maxLength="50" placeholder="请重新输入登录密码"
|
||||
@change="event => event.target.value = event.target.value.trim()" v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<a-form-item label="用户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入用户姓名" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" v-decorator.trim="[ 'realname', validatorRules.realname]"/>
|
||||
</a-form-item>
|
||||
|
||||
<!--<a-form-item label="工号" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
||||
<!--<a-input placeholder="请输入工号" v-decorator.trim="[ 'workNo', validatorRules.workNo]" />-->
|
||||
<!--</a-form-item>-->
|
||||
|
||||
<!--<a-form-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
||||
<!--<j-select-position placeholder="请选择职务" :multiple="false" v-decorator="['post', {}]"/>-->
|
||||
<!--</a-form-item>-->
|
||||
|
||||
<a-form-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
:disabled="departDisabled"
|
||||
style="width: 100%"
|
||||
placeholder="请选择用户角色"
|
||||
optionFilterProp="children"
|
||||
v-model="selectedRole"
|
||||
:getPopupContainer="(target) => target.parentNode">
|
||||
<a-select-option v-for="(role,roleindex) in roleList" :key="roleindex.toString()" :value="role.id">
|
||||
{{ role.roleName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<!-- update--begin--autor:wangshuai-----date:20200108------for：新增身份和负责部门------ -->
|
||||
<!-- <a-form-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
||||
<!-- <a-radio-group-->
|
||||
<!-- v-model="identity"-->
|
||||
<!-- @change="identityChange">-->
|
||||
<!-- <a-radio value="1">普通用户</a-radio>-->
|
||||
<!-- <a-radio value="2">上级</a-radio>-->
|
||||
<!-- </a-radio-group>-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item label="负责部门" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="departIdShow==true">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
style="width: 100%"
|
||||
placeholder="请选择负责部门"
|
||||
v-model="departIds"
|
||||
optionFilterProp="children"
|
||||
:getPopupContainer="(target) => target.parentNode"
|
||||
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
||||
>
|
||||
<a-select-option v-for="item in resultDepartOptions" :key="item.key" :value="item.key"
|
||||
>{{ item.title }}
|
||||
</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol" v-has="'user:sex'">
|
||||
<a-select v-decorator="[ 'sex', {}]" placeholder="请选择性别" :getPopupContainer="(target) => target.parentNode">
|
||||
<a-select-option :value="1">男</a-select-option>
|
||||
<a-select-option :value="2">女</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入邮箱" @change="event => event.target.value = event.target.value.trim()" v-decorator="[ 'email', validatorRules.email]" :maxLength="50"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入手机号码" @change="event => event.target.value = event.target.value.trim()" :disabled="isDisabledAuth('user:form:phone')"
|
||||
v-decorator="[ 'phone', validatorRules.phone]" :maxLength="11"/>
|
||||
</a-form-item>
|
||||
|
||||
<!--<a-form-item label="座机" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
||||
<!--<a-input placeholder="请输入座机" v-decorator="[ 'telephone', validatorRules.telephone]"/>-->
|
||||
<!--</a-form-item>-->
|
||||
|
||||
<!-- <a-form-item label="工作流引擎" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
||||
<!-- <j-dict-select-tag v-decorator="['activitiSync', {}]" placeholder="请选择是否同步工作流引擎" :type="'radio'"-->
|
||||
<!-- :triggerChange="true" dictCode="activiti_sync"/>-->
|
||||
<!-- </a-form-item>-->
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
|
||||
<div class="drawer-bootom-button" v-show="!disableSubmit">
|
||||
<!-- <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">-->
|
||||
<!-- -->
|
||||
<!-- </a-popconfirm>-->
|
||||
<a-button style="margin-right: .8rem" @click="handleCancel">取消</a-button>
|
||||
<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import moment from 'moment'
|
||||
import Vue from 'vue'
|
||||
import {ACCESS_TOKEN} from "@/store/mutation-types"
|
||||
import {getAction} from '@/api/manage'
|
||||
import {addUser, editUser, queryUserRole, queryall} from '@/api/api'
|
||||
import {disabledAuthFilter} from "@/utils/authFilter"
|
||||
import {duplicateCheck} from '@/api/api'
|
||||
import { isEmail, passwordReg} from "@/utils/validate";
|
||||
import {checkPhone,checkEmail,checkUserName} from "@/utils/validateOnly";
|
||||
import { getRSAPublicKey } from "@/api/login.js";
|
||||
import {encrypt} from "@/utils/util";
|
||||
|
||||
|
||||
export default {
|
||||
name: "UserModal",
|
||||
data() {
|
||||
return {
|
||||
departDisabled: false, //是否是我的部门调用该页面
|
||||
roleDisabled: false, //是否是角色维护调用该页面
|
||||
modalWidth: 800,
|
||||
drawerWidth: 700,
|
||||
modaltoggleFlag: true,
|
||||
confirmDirty: false,
|
||||
selectedDepartKeys: [], //保存用户选择部门id
|
||||
checkedDepartKeys: [],
|
||||
checkedDepartNames: [], // 保存部门的名称 =>title
|
||||
checkedDepartNameString: "", // 保存部门的名称 =>title
|
||||
resultDepartOptions: [],
|
||||
userId: "", //保存用户id
|
||||
disableSubmit: false,
|
||||
userDepartModel: {userId: '', departIdList: []}, // 保存SysUserDepart的用户部门中间表数据需要的对象
|
||||
dateFormat: "YYYY-MM-DD",
|
||||
validatorRules: {
|
||||
username: {
|
||||
rules: [{
|
||||
required: true, validator: this.validateUsername,
|
||||
}],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
password: {
|
||||
rules: [{
|
||||
required: true,
|
||||
message: '请输入密码'
|
||||
}, {
|
||||
validator: this.validateToNextPassword,
|
||||
}],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
confirmpassword: {
|
||||
rules: [{
|
||||
required: true, message: '请重新输入登录密码!',
|
||||
}, {
|
||||
validator: this.compareToFirstPassword,
|
||||
}],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
realname: {rules: [{required: true, message: '请输入用户名称!'}], validateTrigger: 'blur'},
|
||||
phone: {rules: [{required: true,validator: this.validatePhone}], validateTrigger: 'blur'},
|
||||
email: {
|
||||
rules: [{
|
||||
required: true,
|
||||
validator: this.validateEmail
|
||||
},],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
roles: {},
|
||||
// sex:{initialValue:((!this.model.sex)?"": (this.model.sex+""))}
|
||||
},
|
||||
departIdShow: false,
|
||||
departIds: [], //负责部门id
|
||||
title: "操作",
|
||||
visible: false,
|
||||
model: {},
|
||||
roleList: [],
|
||||
selectedRole: [],
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16},
|
||||
},
|
||||
uploadLoading: false,
|
||||
confirmLoading: false,
|
||||
headers: {},
|
||||
form: this.$form.createForm(this),
|
||||
picUrl: "",
|
||||
url: {
|
||||
fileUpload: window._CONFIG['domianURL'] + "/sys/common/upload",
|
||||
userWithDepart: "/sys/user/userDepartList", // 引入为指定用户查看部门信息需要的url
|
||||
userId: "/sys/user/generateUserId", // 引入生成添加用户情况下的url
|
||||
syncUserByUserName: "/act/process/extActProcess/doSyncUserByUserName",//同步用户到工作流
|
||||
// queryTenantList: '/sys/tenant/queryList'
|
||||
},
|
||||
identity: "1",
|
||||
fileList: [],
|
||||
tenantList: [],
|
||||
currentTenant: [],
|
||||
// 公钥
|
||||
rsaPublicKey:""
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const token = Vue.ls.get(ACCESS_TOKEN);
|
||||
this.headers = {"X-Access-Token": token}
|
||||
// this.initTenantList()
|
||||
|
||||
},
|
||||
computed: {
|
||||
uploadAction: function () {
|
||||
return this.url.fileUpload;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isDisabledAuth(code) {
|
||||
return disabledAuthFilter(code);
|
||||
},
|
||||
// initTenantList() {
|
||||
// getAction(this.url.queryTenantList).then(res => {
|
||||
// if (res.success) {
|
||||
// this.tenantList = res.result
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
//窗口最大化切换
|
||||
toggleScreen() {
|
||||
if (this.modaltoggleFlag) {
|
||||
this.modalWidth = window.innerWidth;
|
||||
} else {
|
||||
this.modalWidth = 800;
|
||||
}
|
||||
this.modaltoggleFlag = !this.modaltoggleFlag;
|
||||
},
|
||||
initialRoleList() {
|
||||
queryall().then((res) => {
|
||||
if (res.success) {
|
||||
this.roleList = res.result;
|
||||
} else {
|
||||
console.log(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
loadUserRoles(userid) {
|
||||
queryUserRole({userid: userid}).then((res) => {
|
||||
if (res.success) {
|
||||
this.selectedRole = res.result;
|
||||
} else {
|
||||
console.log(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
refresh() {
|
||||
this.selectedDepartKeys = [];
|
||||
this.checkedDepartKeys = [];
|
||||
this.checkedDepartNames = [];
|
||||
this.checkedDepartNameString = "";
|
||||
this.userId = ""
|
||||
this.resultDepartOptions = [];
|
||||
this.departId = [];
|
||||
this.departIdShow = false;
|
||||
this.currentTenant = []
|
||||
},
|
||||
add() {
|
||||
this.picUrl = "";
|
||||
this.refresh();
|
||||
this.edit({activitiSync: '1'});
|
||||
},
|
||||
edit(record) {
|
||||
this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
|
||||
// 获取公钥
|
||||
this.getPublicKey()
|
||||
let that = this;
|
||||
that.initialRoleList();
|
||||
that.checkedDepartNameString = "";
|
||||
that.form.resetFields();
|
||||
if (record.hasOwnProperty("id")) {
|
||||
that.loadUserRoles(record.id);
|
||||
setTimeout(() => {
|
||||
this.fileList = record.avatar;
|
||||
}, 5)
|
||||
}
|
||||
that.userId = record.id;
|
||||
that.visible = true;
|
||||
that.model = Object.assign({}, record);
|
||||
that.$nextTick(() => {
|
||||
that.form.setFieldsValue(pick(this.model, 'username', 'sex', 'realname', 'email', 'phone', 'post'))
|
||||
});
|
||||
//身份为上级显示负责部门，否则不显示
|
||||
if (this.model.userIdentity == "2") {
|
||||
this.identity = "2";
|
||||
this.departIdShow = true;
|
||||
} else {
|
||||
this.identity = "1";
|
||||
this.departIdShow = false;
|
||||
}
|
||||
// 调用查询用户对应的部门信息的方法
|
||||
that.checkedDepartKeys = [];
|
||||
that.loadCheckedDeparts();
|
||||
|
||||
//update-begin-author:taoyan date:2020710 for:多租户配置
|
||||
if (!record.relTenantIds || record.relTenantIds.length == 0) {
|
||||
this.currentTenant = []
|
||||
} else {
|
||||
this.currentTenant = record.relTenantIds.split(',').map(Number);
|
||||
}
|
||||
//update-end-author:taoyan date:2020710 for:多租户配置
|
||||
},
|
||||
//
|
||||
getPublicKey() {
|
||||
// 获取公钥
|
||||
getRSAPublicKey().then(res => {
|
||||
this.rsaPublicKey = res.result;
|
||||
});
|
||||
},
|
||||
loadCheckedDeparts() {
|
||||
let that = this;
|
||||
if (!that.userId) {
|
||||
return
|
||||
}
|
||||
getAction(that.url.userWithDepart, {userId: that.userId}).then((res) => {
|
||||
that.checkedDepartNames = [];
|
||||
if (res.success) {
|
||||
var depart = [];
|
||||
var departId = [];
|
||||
for (let i = 0; i < res.result.length; i++) {
|
||||
that.checkedDepartNames.push(res.result[i].title);
|
||||
this.checkedDepartNameString = this.checkedDepartNames.join(",");
|
||||
that.checkedDepartKeys.push(res.result[i].key);
|
||||
//新增负责部门选择下拉框
|
||||
depart.push({
|
||||
key: res.result[i].key,
|
||||
title: res.result[i].title
|
||||
})
|
||||
departId.push(res.result[i].key)
|
||||
}
|
||||
that.resultDepartOptions = depart;
|
||||
//判断部门id是否存在，不存在择直接默认当前所在部门
|
||||
if (this.model.departIds) {
|
||||
this.departIds = this.model.departIds.split(",");
|
||||
} else {
|
||||
this.departIds = departId;
|
||||
}
|
||||
that.userDepartModel.departIdList = that.checkedDepartKeys
|
||||
} else {
|
||||
console.log(res.message);
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
this.disableSubmit = false;
|
||||
this.selectedRole = [];
|
||||
this.userDepartModel = {userId: '', departIdList: []};
|
||||
this.checkedDepartNames = [];
|
||||
this.checkedDepartNameString = '';
|
||||
this.checkedDepartKeys = [];
|
||||
this.selectedDepartKeys = [];
|
||||
this.resultDepartOptions = [];
|
||||
this.departIds = [];
|
||||
this.departIdShow = false;
|
||||
this.identity = "1";
|
||||
this.fileList = [];
|
||||
},
|
||||
moment,
|
||||
handleSubmit() {
|
||||
console.log("username",this.form.getFieldValue('username'))
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true;
|
||||
let formData = Object.assign(this.model, values);
|
||||
if (that.fileList != '') {
|
||||
formData.avatar = that.fileList;
|
||||
} else {
|
||||
formData.avatar = null;
|
||||
}
|
||||
// 公钥参数
|
||||
formData.rsaPublicKey = that.rsaPublicKey
|
||||
// 新建 JSEncrypt 对象
|
||||
formData.password =encrypt(that.rsaPublicKey,values.password)
|
||||
formData.confirmpassword = formData.password
|
||||
formData.phone = encrypt(that.rsaPublicKey,values.phone)
|
||||
formData.email = encrypt(that.rsaPublicKey,values.email)
|
||||
debugger
|
||||
|
||||
//update-begin-author:taoyan date:2020710 for:多租户配置
|
||||
formData.relTenantIds = this.currentTenant.length > 0 ? this.currentTenant.join(',') : ''
|
||||
//update-end-author:taoyan date:2020710 for:多租户配置
|
||||
formData.selectedroles = this.selectedRole.length > 0 ? this.selectedRole.join(",") : '';
|
||||
formData.selecteddeparts = this.userDepartModel.departIdList.length > 0 ? this.userDepartModel.departIdList.join(",") : '';
|
||||
formData.userIdentity = this.identity;
|
||||
//如果是上级择传入departIds,否则为空
|
||||
if (this.identity === "2") {
|
||||
formData.departIds = this.departIds.join(",");
|
||||
} else {
|
||||
formData.departIds = "";
|
||||
}
|
||||
// that.addDepartsToUser(that,formData); // 调用根据当前用户添加部门信息的方法
|
||||
let obj;
|
||||
if (!this.model.id) {
|
||||
formData.id = this.userId;
|
||||
obj = addUser(formData);
|
||||
} else {
|
||||
obj = editUser(formData);
|
||||
}
|
||||
obj.then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok');
|
||||
that.close();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.checkedDepartNames = [];
|
||||
that.userDepartModel.departIdList = {userId: '', departIdList: []};
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
validateToNextPassword(rule, value, callback) {
|
||||
const form = this.form;
|
||||
if (!value) {
|
||||
callback()
|
||||
}
|
||||
if (!passwordReg(value)) {
|
||||
callback('密码长度至少8位，并包括数字、小写字母、大写字母和特殊符号4类中的3类')
|
||||
}
|
||||
if (value && this.confirmDirty) {
|
||||
form.validateFields(['confirm'], {force: true})
|
||||
}
|
||||
callback();
|
||||
},
|
||||
compareToFirstPassword(rule, value, callback) {
|
||||
const form = this.form;
|
||||
if (value && value !== form.getFieldValue('password')) {
|
||||
callback('两次输入的密码不一样！');
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
validatePhone(rule, value, callback) {
|
||||
checkPhone(value,this.userId).then(res => {
|
||||
if(res.success){
|
||||
callback()
|
||||
}else {
|
||||
callback(res.code === 500 ? '手机号已存在': res)
|
||||
}
|
||||
})
|
||||
},
|
||||
validateEmail(rule, value, callback) {
|
||||
checkEmail(value,this.userId).then(res => {
|
||||
if(res.success){
|
||||
callback()
|
||||
}else {
|
||||
callback(res.code === 500 ? '邮箱已存在': res)
|
||||
}
|
||||
})
|
||||
},
|
||||
validateUsername(rule, value, callback) {
|
||||
checkUserName(value,this.userId).then(res => {
|
||||
if(res.success){
|
||||
callback()
|
||||
}else {
|
||||
callback(res.code === 500 ? '用户已存在': res)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleConfirmBlur(e) {
|
||||
const value = e.target.value;
|
||||
this.confirmDirty = this.confirmDirty || !!value
|
||||
},
|
||||
|
||||
normFile(e) {
|
||||
console.log('Upload event:', e);
|
||||
if (Array.isArray(e)) {
|
||||
return e
|
||||
}
|
||||
return e && e.fileList
|
||||
},
|
||||
beforeUpload: function (file) {
|
||||
var fileType = file.type;
|
||||
if (fileType.indexOf('image') < 0) {
|
||||
this.$message.warning('请上传图片');
|
||||
return false;
|
||||
}
|
||||
//TODO 验证文件大小
|
||||
},
|
||||
handleChange(info) {
|
||||
this.picUrl = "";
|
||||
if (info.file.status === 'uploading') {
|
||||
this.uploadLoading = true;
|
||||
return
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
var response = info.file.response;
|
||||
this.uploadLoading = false;
|
||||
console.log(response);
|
||||
if (response.success) {
|
||||
this.model.avatar = response.message;
|
||||
this.picUrl = "Has no pic url yet";
|
||||
} else {
|
||||
this.$message.warning(response.message);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 搜索用户对应的部门API
|
||||
onSearch() {
|
||||
this.$refs.departWindow.add(this.checkedDepartKeys, this.userId);
|
||||
},
|
||||
|
||||
// 获取用户对应部门弹出框提交给返回的数据
|
||||
modalFormOk(formData) {
|
||||
this.checkedDepartNames = [];
|
||||
this.selectedDepartKeys = [];
|
||||
this.checkedDepartNameString = '';
|
||||
this.userId = formData.userId;
|
||||
this.userDepartModel.userId = formData.userId;
|
||||
this.departIds = [];
|
||||
this.resultDepartOptions = [];
|
||||
var depart = [];
|
||||
for (let i = 0; i < formData.departIdList.length; i++) {
|
||||
this.selectedDepartKeys.push(formData.departIdList[i].key);
|
||||
this.checkedDepartNames.push(formData.departIdList[i].title);
|
||||
this.checkedDepartNameString = this.checkedDepartNames.join(",");
|
||||
//新增部门选择，如果上面部门选择后不为空直接付给负责部门
|
||||
depart.push({
|
||||
key: formData.departIdList[i].key,
|
||||
title: formData.departIdList[i].title
|
||||
})
|
||||
this.departIds.push(formData.departIdList[i].key)
|
||||
}
|
||||
this.resultDepartOptions = depart;
|
||||
this.userDepartModel.departIdList = this.selectedDepartKeys;
|
||||
this.checkedDepartKeys = this.selectedDepartKeys //更新当前的选择keys
|
||||
},
|
||||
// 根据屏幕变化,设置抽屉尺寸
|
||||
resetScreenSize() {
|
||||
let screenWidth = document.body.clientWidth;
|
||||
if (screenWidth < 500) {
|
||||
this.drawerWidth = screenWidth;
|
||||
} else {
|
||||
this.drawerWidth = 700;
|
||||
}
|
||||
},
|
||||
identityChange(e) {
|
||||
if (e.target.value === "1") {
|
||||
this.departIdShow = false;
|
||||
} else {
|
||||
this.departIdShow = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avatar-uploader > .ant-upload {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
}
|
||||
|
||||
.ant-upload-select-picture-card i {
|
||||
font-size: 49px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ant-upload-select-picture-card .ant-upload-text {
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.drawer-bootom-button {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
width: 100%;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 16px;
|
||||
text-align: right;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
:title="title"
|
||||
:maskClosable="true"
|
||||
width=650
|
||||
placement="right"
|
||||
:closable="true"
|
||||
@close="close"
|
||||
:visible="visible"
|
||||
style="overflow: auto;padding-bottom: 53px;">
|
||||
|
||||
<a-form>
|
||||
<a-form-item label='所拥有的权限'>
|
||||
<a-tree
|
||||
checkable
|
||||
@check="onCheck"
|
||||
:checkedKeys="checkedKeys"
|
||||
:treeData="treeData"
|
||||
@expand="onExpand"
|
||||
@select="onTreeNodeSelect"
|
||||
:selectedKeys="selectedKeys"
|
||||
:expandedKeys="expandedKeysss"
|
||||
:checkStrictly="checkStrictly">
|
||||
<span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
|
||||
{{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
|
||||
</span>
|
||||
</a-tree>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<div class="drawer-bootom-button">
|
||||
<a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
|
||||
<a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
|
||||
<a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
|
||||
<a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
|
||||
<a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
|
||||
<a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button>
|
||||
树操作 <a-icon type="up" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
<!-- <a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" cancelText="取消">-->
|
||||
<!-- -->
|
||||
<!-- </a-popconfirm>-->
|
||||
<a-button style="margin-right: .8rem" @click="close">取消</a-button>
|
||||
<a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>
|
||||
<a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
|
||||
</div>
|
||||
|
||||
<role-datarule-modal ref="datarule"></role-datarule-modal>
|
||||
|
||||
</a-drawer>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import {queryTreeListForRole,queryRolePermission,saveRolePermission} from '@/api/api'
|
||||
import RoleDataruleModal from './RoleDataruleModal.vue'
|
||||
|
||||
export default {
|
||||
name: "RoleModal",
|
||||
components:{
|
||||
RoleDataruleModal
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
roleId:"",
|
||||
treeData: [],
|
||||
defaultCheckedKeys:[],
|
||||
checkedKeys:[],
|
||||
expandedKeysss:[],
|
||||
allTreeKeys:[],
|
||||
autoExpandParent: true,
|
||||
checkStrictly: true,
|
||||
title:"角色权限配置",
|
||||
visible: false,
|
||||
loading: false,
|
||||
selectedKeys:[]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onTreeNodeSelect(id){
|
||||
if(id && id.length>0){
|
||||
this.selectedKeys = id
|
||||
}
|
||||
this.$refs.datarule.show(this.selectedKeys[0],this.roleId)
|
||||
},
|
||||
onCheck (o) {
|
||||
if(this.checkStrictly){
|
||||
this.checkedKeys = o.checked;
|
||||
}else{
|
||||
this.checkedKeys = o
|
||||
}
|
||||
},
|
||||
show(roleId){
|
||||
this.roleId=roleId
|
||||
this.visible = true;
|
||||
},
|
||||
close () {
|
||||
this.reset()
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
onExpand(expandedKeys){
|
||||
this.expandedKeysss = expandedKeys;
|
||||
this.autoExpandParent = false
|
||||
},
|
||||
reset () {
|
||||
this.expandedKeysss = []
|
||||
this.checkedKeys = []
|
||||
this.defaultCheckedKeys = []
|
||||
this.loading = false
|
||||
},
|
||||
expandAll () {
|
||||
this.expandedKeysss = this.allTreeKeys
|
||||
},
|
||||
closeAll () {
|
||||
this.expandedKeysss = []
|
||||
},
|
||||
checkALL () {
|
||||
this.checkedKeys = this.allTreeKeys
|
||||
},
|
||||
cancelCheckALL () {
|
||||
//this.checkedKeys = this.defaultCheckedKeys
|
||||
this.checkedKeys = []
|
||||
},
|
||||
switchCheckStrictly (v) {
|
||||
if(v==1){
|
||||
this.checkStrictly = false
|
||||
}else if(v==2){
|
||||
this.checkStrictly = true
|
||||
}
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
handleSubmit(exit) {
|
||||
let that = this;
|
||||
let params = {
|
||||
roleId:that.roleId,
|
||||
permissionIds:that.checkedKeys.join(","),
|
||||
lastpermissionIds:that.defaultCheckedKeys.join(","),
|
||||
};
|
||||
that.loading = true;
|
||||
console.log("请求参数：",params);
|
||||
saveRolePermission(params).then((res)=>{
|
||||
if(res.success){
|
||||
that.$message.success(res.message);
|
||||
that.loading = false;
|
||||
if (exit) {
|
||||
that.close()
|
||||
}
|
||||
}else {
|
||||
that.$message.error(res.message);
|
||||
that.loading = false;
|
||||
if (exit) {
|
||||
that.close()
|
||||
}
|
||||
}
|
||||
this.loadData();
|
||||
})
|
||||
},
|
||||
loadData(){
|
||||
queryTreeListForRole().then((res) => {
|
||||
this.treeData = res.result.treeList
|
||||
this.allTreeKeys = res.result.ids
|
||||
queryRolePermission({roleId:this.roleId}).then((res)=>{
|
||||
this.checkedKeys = [...res.result];
|
||||
this.defaultCheckedKeys = [...res.result];
|
||||
this.expandedKeysss = this.allTreeKeys;
|
||||
console.log(this.defaultCheckedKeys)
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible () {
|
||||
if (this.visible) {
|
||||
this.loadData();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.drawer-bootom-button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 16px;
|
||||
text-align: right;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
@active-color: #4a4a48;
|
||||
ul {
|
||||
max-height: 700px;
|
||||
overflow-y: auto;
|
||||
padding-left: .5rem;
|
||||
i {
|
||||
font-size: 1.5rem;
|
||||
border: 1px solid #f1f1f1;
|
||||
padding: .2rem;
|
||||
margin: .3rem;
|
||||
cursor: pointer;
|
||||
&.active, &:hover {
|
||||
border-radius: 2px;
|
||||
border-color: @active-color;
|
||||
background-color: @active-color;
|
||||
color: #fff;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
float: left;
|
||||
width: 5%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #555;
|
||||
transition: color .3s ease-in-out,background-color .3s ease-in-out;
|
||||
position: relative;
|
||||
margin: 3px 0;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
padding: 10px 0 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model="show"
|
||||
:width="900"
|
||||
:keyboard="false"
|
||||
:closable="false"
|
||||
:centered="true"
|
||||
@ok="ok"
|
||||
@cancel="cancel"
|
||||
:maskClosable="false"
|
||||
:mask="false"
|
||||
okText="确认"
|
||||
cancelText="取消">
|
||||
<a-tabs>
|
||||
<a-tab-pane tab="方向性图标" key="1">
|
||||
<ul>
|
||||
<li v-for="icon in icons.directionIcons" :key="icon">
|
||||
<a-icon :type="icon" :title="icon" @click="chooseIcon(icon)" :class="{'active':activeIndex === icon}"/>
|
||||
</li>
|
||||
</ul>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="指示性图标" key="2">
|
||||
<ul>
|
||||
<li v-for="icon in icons.suggestionIcons" :key="icon">
|
||||
<a-icon :type="icon" :title="icon" @click="chooseIcon(icon)" :class="{'active':activeIndex === icon}"/>
|
||||
</li>
|
||||
</ul>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="编辑类图标" key="3">
|
||||
<ul>
|
||||
<li v-for="icon in icons.editIcons" :key="icon">
|
||||
<a-icon :type="icon" :title="icon" @click="chooseIcon(icon)" :class="{'active':activeIndex === icon}"/>
|
||||
</li>
|
||||
</ul>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="数据类图标" key="4">
|
||||
<ul>
|
||||
<li v-for="icon in icons.dataIcons" :key="icon">
|
||||
<a-icon :type="icon" :title="icon" @click="chooseIcon(icon)" :class="{'active':activeIndex === icon}"/>
|
||||
</li>
|
||||
</ul>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="网站通用图标" key="5">
|
||||
<ul>
|
||||
<li v-for="icon in icons.webIcons" :key="icon">
|
||||
<a-icon :type="icon" :title="icon" @click="chooseIcon(icon)" :class="{'active':activeIndex === icon}"/>
|
||||
</li>
|
||||
</ul>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="品牌和标识" key="6">
|
||||
<ul>
|
||||
<li v-for="icon in icons.logoIcons" :key="icon">
|
||||
<a-icon :type="icon" :title="icon" @click="chooseIcon(icon)" :class="{'active':activeIndex === icon}"/>
|
||||
</li>
|
||||
</ul>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
const directionIcons = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrows-alt', 'down', 'up', 'left', 'right', 'caret-up', 'caret-down', 'caret-left', 'caret-right', 'up-circle', 'down-circle', 'left-circle', 'right-circle', 'up-circle-o', 'down-circle-o', 'right-circle-o', 'left-circle-o', 'double-right', 'double-left', 'vertical-left', 'vertical-right', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'play-circle', 'play-circle-o', 'up-square', 'down-square', 'left-square', 'right-square', 'up-square-o', 'down-square-o', 'left-square-o', 'right-square-o', 'login', 'logout', 'menu-fold', 'menu-unfold', 'border-bottom', 'border-horizontal', 'border-inner', 'border-left', 'border-right', 'border-top', 'border-verticle', 'pic-center', 'pic-left', 'pic-right', 'radius-bottomleft', 'radius-bottomright', 'radius-upleft', 'radius-upright', 'fullscreen', 'fullscreen-exit']
|
||||
const suggestionIcons = ['question', 'question-circle', 'plus', 'plus-circle', 'pause', 'pause-circle', 'minus', 'minus-circle', 'plus-square', 'minus-square', 'info', 'info-circle', 'exclamation', 'exclamation-circle', 'close', 'close-circle', 'close-square', 'check', 'check-circle', 'check-square', 'clock-circle', 'warning', 'issues-close', 'stop']
|
||||
const editIcons = ['edit', 'form', 'copy', 'scissor', 'delete', 'snippets', 'diff', 'highlight', 'align-center', 'align-left', 'align-right', 'bg-colors', 'bold', 'italic', 'underline', 'strikethrough', 'redo', 'undo', 'zoom-in', 'zoom-out', 'font-colors', 'font-size', 'line-height', 'colum-height', 'dash', 'small-dash', 'sort-ascending', 'sort-descending', 'drag', 'ordered-list', 'radius-setting']
|
||||
const dataIcons = ['area-chart', 'pie-chart', 'bar-chart', 'dot-chart', 'line-chart', 'radar-chart', 'heat-map', 'fall', 'rise', 'stock', 'box-plot', 'fund', 'sliders']
|
||||
const webIcons = ['lock', 'unlock', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'ellipsis', 'file', 'file-text', 'file-unknown', 'file-pdf', 'file-word', 'file-excel', 'file-jpg', 'file-ppt', 'file-markdown', 'file-add', 'folder', 'folder-open', 'folder-add', 'hdd', 'frown', 'meh', 'smile', 'inbox', 'laptop', 'appstore', 'link', 'mail', 'mobile', 'notification', 'paper-clip', 'picture', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'home', 'loading', 'loading-3-quarters', 'cloud-upload', 'star', 'heart', 'environment', 'eye', 'camera', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customer-service', 'qrcode', 'scan', 'like', 'dislike', 'message', 'pay-circle', 'calculator', 'pushpin', 'bulb', 'select', 'switcher', 'rocket', 'bell', 'disconnect', 'database', 'compass', 'barcode', 'hourglass', 'key', 'flag', 'layout', 'printer', 'sound', 'usb', 'skin', 'tool', 'sync', 'wifi', 'car', 'schedule', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'man', 'woman', 'shop', 'gift', 'idcard', 'medicine-box', 'red-envelope', 'coffee', 'copyright', 'trademark', 'safety', 'wallet', 'bank', 'trophy', 'contacts', 'global', 'shake', 'api', 'fork', 'dashboard', 'table', 'profile', 'alert', 'audit', 'branches', 'build', 'border', 'crown', 'experiment', 'fire', 'money-collect', 'property-safety', 'read', 'reconciliation', 'rest', 'security-scan', 'insurance', 'interation', 'safety-certificate', 'project', 'thunderbolt', 'block', 'cluster', 'deployment-unit', 'dollar', 'euro', 'pound', 'file-done', 'file-exclamation', 'file-protect', 'file-search', 'file-sync', 'gateway', 'gold', 'robot', 'shopping']
|
||||
const logoIcons = ['android', 'apple', 'windows', 'ie', 'chrome', 'github', 'aliwangwang', 'dingding', 'weibo-square', 'weibo-circle', 'taobao-circle', 'html5', 'weibo', 'twitter', 'wechat', 'youtube', 'alipay-circle', 'taobao', 'skype', 'qq', 'medium-workmark', 'gitlab', 'medium', 'linkedin', 'google-plus', 'dropbox', 'facebook', 'codepen', 'amazon', 'google', 'codepen-circle', 'alipay', 'ant-design', 'aliyun', 'zhihu', 'slack', 'slack-square', 'behance', 'behance-square', 'dribbble', 'dribbble-square', 'instagram', 'yuque', 'alibaba', 'yahoo']
|
||||
export default {
|
||||
name: 'Icons',
|
||||
props: {
|
||||
iconChooseVisible: {
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: {
|
||||
directionIcons,
|
||||
suggestionIcons,
|
||||
editIcons,
|
||||
dataIcons,
|
||||
webIcons,
|
||||
logoIcons
|
||||
},
|
||||
choosedIcon: '',
|
||||
activeIndex: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
show: {
|
||||
get: function () {
|
||||
return this.iconChooseVisible
|
||||
},
|
||||
set: function () {
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reset () {
|
||||
this.activeIndex = ''
|
||||
},
|
||||
chooseIcon (icon) {
|
||||
this.activeIndex = icon
|
||||
this.choosedIcon = icon
|
||||
this.$message.success(`选中 ${icon}`)
|
||||
},
|
||||
ok () {
|
||||
if (this.choosedIcon === '') {
|
||||
this.$message.warning('尚未选择任何图标')
|
||||
return
|
||||
}
|
||||
this.reset()
|
||||
this.$emit('choose', this.choosedIcon)
|
||||
},
|
||||
cancel () {
|
||||
this.reset()
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import "Icon";
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TestPage"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,484 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<a-form v-if="!mobile" :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
|
||||
<div class="user-box">
|
||||
<span class="title">用户登录</span>
|
||||
<a-row>
|
||||
<a-col :span="3"></a-col>
|
||||
<a-col :span="18">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
size="large"
|
||||
v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
|
||||
type="text"
|
||||
placeholder="请输入帐号">
|
||||
<a-icon slot="prefix" type="user" :style="{ color: '#B3B7C2',fontSize:'20px' }" />
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="3"></a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="3"></a-col>
|
||||
<a-col :span="18">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
|
||||
size="large"
|
||||
type="password"
|
||||
autocomplete="false"
|
||||
placeholder="请输入密码"
|
||||
>
|
||||
<a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }" />
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="3"></a-col>
|
||||
</a-row>
|
||||
<a-row style="margin-bottom: 0%;">
|
||||
<a-col :span="3"></a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
v-decorator="['inputCode',validatorRules.inputCode]"
|
||||
size="large"
|
||||
type="text"
|
||||
@change="inputCodeChange"
|
||||
autocomplete="off"
|
||||
placeholder="请输入验证码">
|
||||
<a-icon slot="prefix" type="safety" :style="{ color: '#B3B7C2',fontSize:'20px'}" />
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6" style="text-align: right">
|
||||
<img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage"
|
||||
@click="handleChangeCheckCode" />
|
||||
<img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode" />
|
||||
</a-col>
|
||||
<a-col :span="3"></a-col>
|
||||
</a-row>
|
||||
<a-row style="margin-bottom: 2%;">
|
||||
<a-col :span="3"></a-col>
|
||||
<a-col :span="7">
|
||||
<a-form-item>
|
||||
<a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">自动登录</a-checkbox>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6"></a-col>
|
||||
<a-col :span="5" style="text-align: right;color: #1891FF;">
|
||||
<a-form-item>
|
||||
<router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
|
||||
忘记密码
|
||||
</router-link>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="login-btn">
|
||||
<a-col :span="3"></a-col>
|
||||
<a-col :span="18">
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
:loading="loginBtn"
|
||||
@click.stop.prevent="handleSubmit"
|
||||
:disabled="loginBtn">
|
||||
{{ loginBtn ? "登录中" : "登录" }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="3"></a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-form>
|
||||
<a-form v-if="mobile" :form="form" class="user-layout-login user-layout-login-mobile" ref="formLogin"
|
||||
id="formLogin">
|
||||
<div class="user-box user-box-mobile">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
size="large"
|
||||
v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
|
||||
type="text"
|
||||
placeholder="请输入帐号">
|
||||
<a-icon slot="prefix" type="user" :style="{ color: '#B3B7C2',fontSize:'20px' }" />
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
|
||||
size="large"
|
||||
type="password"
|
||||
autocomplete="false"
|
||||
placeholder="请输入密码"
|
||||
>
|
||||
<a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }" />
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="14">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
v-decorator="['inputCode',validatorRules.inputCode]"
|
||||
size="large"
|
||||
type="text"
|
||||
@change="inputCodeChange"
|
||||
placeholder="请输入验证码">
|
||||
<a-icon slot="prefix" type="safety" :style="{ color: '#B3B7C2',fontSize:'20px'}" />
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="10" style="text-align: right">
|
||||
<img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage"
|
||||
@click="handleChangeCheckCode" />
|
||||
<img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="10">
|
||||
<a-form-item>
|
||||
<a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">自动登录</a-checkbox>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="4"></a-col>
|
||||
<a-col :span="9" style="text-align: right;color: #1891FF;">
|
||||
<a-form-item>
|
||||
<router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
|
||||
忘记密码
|
||||
</router-link>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="login-btn">
|
||||
<a-col :span="24">
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
:loading="loginBtn"
|
||||
@click.stop.prevent="handleSubmit"
|
||||
:disabled="loginBtn">
|
||||
{{ loginBtn ? "登录中" : "登录" }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import { mapActions } from "vuex";
|
||||
import { timeFix } from "@/utils/util";
|
||||
import { ACCESS_TOKEN } from "@/store/mutation-types";
|
||||
import { postAction, getAction } from "@/api/manage";
|
||||
import { getRSAPublicKey } from "@/api/login.js";
|
||||
import { JSEncrypt } from "jsencrypt";
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
data() {
|
||||
return {
|
||||
loginBtn: false,
|
||||
mobile: isMobile(),
|
||||
// login type: 0 email, 1 username, 2 telephone
|
||||
loginType: 0,
|
||||
stepCaptchaVisible: false,
|
||||
form: this.$form.createForm(this),
|
||||
state: {
|
||||
time: 60,
|
||||
smsSendBtn: false
|
||||
},
|
||||
validatorRules: {
|
||||
username: { rules: [{ required: true, message: "请输入用户名!" }, { validator: this.handleUsernameOrEmail }] },
|
||||
password: { rules: [{ required: true, message: "请输入密码!", validator: "click" }] },
|
||||
mobile: { rules: [{ validator: this.validateMobile }] },
|
||||
captcha: { rule: [{ required: true, message: "请输入验证码!" }] },
|
||||
inputCode: { rules: [{ required: true, message: "请输入验证码!" }] }
|
||||
},
|
||||
velorifiedCode: "",
|
||||
inputCodeContent: "",
|
||||
inputCodeNull: true,
|
||||
currentUsername: "",
|
||||
currdatetime: "",
|
||||
randCodeImage: "",
|
||||
requestCodeSuccess: false,
|
||||
rsaPublicKey: ""
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.currdatetime = new Date().getTime();
|
||||
Vue.ls.remove(ACCESS_TOKEN);
|
||||
this.getRouterData();
|
||||
this.handleChangeCheckCode();
|
||||
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["Login", "Logout", "PhoneLogin"]),
|
||||
handleUsernameOrEmail(rule, value, callback) {
|
||||
const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
|
||||
if (regex.test(value)) {
|
||||
this.loginType = 0;
|
||||
} else {
|
||||
this.loginType = 1;
|
||||
}
|
||||
callback();
|
||||
},
|
||||
handleSubmit() {
|
||||
let that = this;
|
||||
let loginParams = {};
|
||||
that.loginBtn = true;
|
||||
that.form.validateFields(["username", "password", "inputCode", "rememberMe"], { force: true }, (err, values) => {
|
||||
if (!err) {
|
||||
|
||||
loginParams.remember_me = values.rememberMe;
|
||||
loginParams.captcha = that.inputCodeContent;
|
||||
loginParams.checkKey = that.currdatetime;
|
||||
loginParams.rsaPublicKey = that.rsaPublicKey;
|
||||
// 新建JSEncrypt对象
|
||||
let encrypt = new JSEncrypt();
|
||||
encrypt.setPublicKey(loginParams.rsaPublicKey);
|
||||
// 公钥加密
|
||||
loginParams.username = encrypt.encrypt(values.username);
|
||||
loginParams.password = encrypt.encrypt(values.password);
|
||||
//登录
|
||||
that.Login(loginParams).then((res) => {
|
||||
console.log(res);
|
||||
this.loginSuccess();
|
||||
}).catch((err) => {
|
||||
if (err.code === 500) {
|
||||
// 刷新验证码
|
||||
this.handleChangeCheckCode();
|
||||
}
|
||||
that.requestFailed(err);
|
||||
});
|
||||
} else {
|
||||
that.loginBtn = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
getCaptcha(e) {
|
||||
e.preventDefault();
|
||||
let that = this;
|
||||
this.form.validateFields(["mobile"], { force: true }, (err, values) => {
|
||||
if (!values.mobile) {
|
||||
that.cmsFailed("请输入手机号");
|
||||
} else if (!err) {
|
||||
this.state.smsSendBtn = true;
|
||||
let interval = window.setInterval(() => {
|
||||
if (that.state.time-- <= 0) {
|
||||
that.state.time = 60;
|
||||
that.state.smsSendBtn = false;
|
||||
window.clearInterval(interval);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
const hide = this.$message.loading("验证码发送中..", 0);
|
||||
let smsParams = {};
|
||||
smsParams.mobile = values.mobile;
|
||||
smsParams.smsmode = "0";
|
||||
postAction("/sys/sms", smsParams)
|
||||
.then(res => {
|
||||
if (!res.success) {
|
||||
setTimeout(hide, 0);
|
||||
this.cmsFailed(res.message);
|
||||
}
|
||||
setTimeout(hide, 500);
|
||||
})
|
||||
.catch(err => {
|
||||
setTimeout(hide, 1);
|
||||
clearInterval(interval);
|
||||
that.state.time = 60;
|
||||
that.state.smsSendBtn = false;
|
||||
this.requestFailed(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
handleChangeCheckCode() {
|
||||
this.currdatetime = new Date().getTime();
|
||||
getAction(`/sys/randomImage/${this.currdatetime}`).then(res => {
|
||||
if (res.success) {
|
||||
this.randCodeImage = res.result;
|
||||
this.requestCodeSuccess = true;
|
||||
} else {
|
||||
this.$message.error(res.message);
|
||||
this.requestCodeSuccess = false;
|
||||
}
|
||||
}).catch(() => {
|
||||
this.requestCodeSuccess = false;
|
||||
});
|
||||
this.getPublicKey();
|
||||
},
|
||||
//获取RSA公钥
|
||||
getPublicKey() {
|
||||
// 获取公钥
|
||||
getRSAPublicKey().then(res => {
|
||||
this.rsaPublicKey = res.result;
|
||||
});
|
||||
},
|
||||
loginSuccess() {
|
||||
this.$router.push({ path: "/dashboard/analysis" }).catch((res) => {
|
||||
console.log(res);
|
||||
});
|
||||
this.$notification.success({
|
||||
message: "欢迎",
|
||||
description: `${timeFix()}，欢迎回来`
|
||||
});
|
||||
},
|
||||
cmsFailed(err) {
|
||||
this.$notification["error"]({
|
||||
message: "登录失败",
|
||||
description: err,
|
||||
duration: 4
|
||||
});
|
||||
},
|
||||
requestFailed(err) {
|
||||
this.$notification["error"]({
|
||||
message: "登录失败",
|
||||
description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
|
||||
duration: 4
|
||||
});
|
||||
this.loginBtn = false;
|
||||
},
|
||||
validateMobile(rule, value, callback) {
|
||||
if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
|
||||
callback();
|
||||
} else {
|
||||
callback("您的手机号码格式不正确!");
|
||||
}
|
||||
},
|
||||
validateInputCode(rule, value, callback) {
|
||||
if (!value || this.verifiedCode == this.inputCodeContent) {
|
||||
callback();
|
||||
} else {
|
||||
callback("您输入的验证码不正确!");
|
||||
}
|
||||
},
|
||||
generateCode(value) {
|
||||
this.verifiedCode = value.toLowerCase();
|
||||
},
|
||||
inputCodeChange(e) {
|
||||
this.inputCodeContent = e.target.value;
|
||||
},
|
||||
getRouterData() {
|
||||
this.$nextTick(() => {
|
||||
if (this.$route.params.username) {
|
||||
this.form.setFieldsValue({
|
||||
"username": this.$route.params.username
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 判断当前设备
|
||||
function isMobile() {
|
||||
var userAgentInfo = navigator.userAgent;
|
||||
|
||||
var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||||
|
||||
var mobile_flag = false;
|
||||
|
||||
//根据userAgent判断是否是手机
|
||||
for (var v = 0; v < mobileAgents.length; v++) {
|
||||
if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
|
||||
mobile_flag = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
var screen_width = window.screen.width;
|
||||
var screen_height = window.screen.height;
|
||||
|
||||
//根据屏幕分辨率判断是否是手机
|
||||
if (screen_width < 500 && screen_height < 800) {
|
||||
mobile_flag = true;
|
||||
}
|
||||
return mobile_flag;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.ant-input-affix-wrapper /deep/ .ant-input:not(:first-child) {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.ant-row {
|
||||
margin-bottom: 4%;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 100%;
|
||||
|
||||
.user-layout-login {
|
||||
z-index: 99;
|
||||
width: 24%;
|
||||
height: 56%;
|
||||
padding: 3% 0 3% 0;
|
||||
min-width: 332px;
|
||||
min-height: 460px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
position: absolute;
|
||||
right: 8%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.user-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
color: #1891FF;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
margin: 0 0 5% 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-bottom: 0;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-layout-login-mobile {
|
||||
right: 0;
|
||||
width: 100%;
|
||||
min-width: 0 !important;
|
||||
height: 46% !important;
|
||||
background: transparent;
|
||||
min-height: 0;
|
||||
padding: 0 2rem 0 2rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: 6rem;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.ant-row {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<a-card :bordered="false" style="width: 100%;text-align: center;">
|
||||
<a-steps class="steps" :current="currentTab">
|
||||
<a-step title="手机验证"/>
|
||||
<a-step title="密码"/>
|
||||
<a-step title="完成"/>
|
||||
</a-steps>
|
||||
<div class="content">
|
||||
<step2 v-if="currentTab === 0" @nextStep="nextStep"/>
|
||||
<step3 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep" :userList="userList"/>
|
||||
<step4 v-if="currentTab === 2" @prevStep="prevStep" @finish="finish" :userList="userList"/>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Step1 from './Step1'
|
||||
import Step2 from './Step2'
|
||||
import Step3 from './Step3'
|
||||
import Step4 from './Step4'
|
||||
|
||||
export default {
|
||||
name: "Alteration",
|
||||
components: {
|
||||
Step1,
|
||||
Step2,
|
||||
Step3,
|
||||
Step4
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。',
|
||||
currentTab: 0,
|
||||
userList: {},
|
||||
// form
|
||||
form: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// handler
|
||||
nextStep(data) {
|
||||
this.userList = data;
|
||||
if (this.currentTab < 4) {
|
||||
this.currentTab += 1
|
||||
}
|
||||
},
|
||||
prevStep(data) {
|
||||
this.userList = data;
|
||||
if (this.currentTab > 0) {
|
||||
this.currentTab -= 1
|
||||
}
|
||||
},
|
||||
finish() {
|
||||
this.currentTab = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.steps {
|
||||
max-width: 750px;
|
||||
margin: 16px auto;
|
||||
}
|
||||
.ant-steps-item{
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
|
||||
<a-form style="max-width: 500px; margin: 40px auto 0;" :form="form" @keyup.enter.native="nextStep">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
v-decorator="['username',validatorRules.username]"
|
||||
size="large"
|
||||
type="text"
|
||||
autocomplete="false"
|
||||
placeholder="请输入用户账号或手机号">
|
||||
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-row :gutter="0">
|
||||
<a-col :span="14">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
v-decorator="['inputCode',validatorRules.inputCode]"
|
||||
size="large"
|
||||
type="text"
|
||||
@change="inputCodeChange"
|
||||
placeholder="请输入验证码">
|
||||
<a-icon slot="prefix" v-if=" inputCodeContent==verifiedCode " type="smile"
|
||||
:style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
<a-icon slot="prefix" v-else type="frown" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="10" style="text-align: right">
|
||||
<img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
|
||||
<img v-else style="margin-top: 2px;" src="../../../assets/checkcode.png" @click="handleChangeCheckCode"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item :wrapperCol="{span: 19, offset: 5}">
|
||||
<router-link style="float: left;line-height: 40px;" :to="{ name: 'login' }">使用已有账户登录</router-link>
|
||||
<a-button type="primary" @click="nextStep">下一步</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction,postAction } from '@/api/manage'
|
||||
import { checkOnlyUser } from '@/api/api'
|
||||
|
||||
export default {
|
||||
name: "Step1",
|
||||
data() {
|
||||
return {
|
||||
form: this.$form.createForm(this),
|
||||
inputCodeContent: "",
|
||||
inputCodeNull: true,
|
||||
verifiedCode: "",
|
||||
validatorRules: {
|
||||
username: {rules: [{required: false}, {validator: this.validateInputUsername}]},
|
||||
inputCode: {rules: [{required: true, message: '请输入验证码!'}]},
|
||||
},
|
||||
randCodeImage:'',
|
||||
requestCodeSuccess:true,
|
||||
currdatetime:''
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.handleChangeCheckCode();
|
||||
},
|
||||
methods: {
|
||||
handleChangeCheckCode(){
|
||||
this.currdatetime = new Date().getTime();
|
||||
getAction(`/sys/randomImage/${this.currdatetime}`).then(res=>{
|
||||
if(res.success){
|
||||
this.randCodeImage = res.result
|
||||
this.requestCodeSuccess=true
|
||||
}else{
|
||||
this.$message.error(res.message)
|
||||
this.requestCodeSuccess=false
|
||||
}
|
||||
}).catch(()=>{
|
||||
this.requestCodeSuccess=false
|
||||
})
|
||||
},
|
||||
nextStep() {
|
||||
let that = this
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
let isPhone = false;
|
||||
var params = {}
|
||||
var reg = /^[1-9]\d*$|^0$/;
|
||||
var username = values.username;
|
||||
if (reg.test(username) == true) {
|
||||
params.phone = username;
|
||||
isPhone = true
|
||||
} else {
|
||||
params.username = username;
|
||||
}
|
||||
that.validateInputCode().then(()=>{
|
||||
getAction("/sys/user/querySysUser", params).then((res) => {
|
||||
if (res.success) {
|
||||
var userList = {
|
||||
username: res.result.username,
|
||||
phone: res.result.phone,
|
||||
isPhone: isPhone
|
||||
};
|
||||
setTimeout(function () {
|
||||
that.$emit('nextStep', userList)
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
validateInputCode() {
|
||||
return new Promise((resolve,reject)=>{
|
||||
postAction("/sys/checkCaptcha",{
|
||||
captcha:this.inputCodeContent,
|
||||
checkKey:this.currdatetime
|
||||
}).then(res=>{
|
||||
if(res.success){
|
||||
resolve();
|
||||
}else{
|
||||
this.$message.error(res.message)
|
||||
reject();
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
inputCodeChange(e) {
|
||||
this.inputCodeContent = e.target.value;
|
||||
console.log(this.inputCodeContent)
|
||||
if (!e.target.value || 0 == e.target.value) {
|
||||
this.inputCodeNull = true
|
||||
} else {
|
||||
this.inputCodeContent = this.inputCodeContent.toLowerCase()
|
||||
this.inputCodeNull = false
|
||||
}
|
||||
},
|
||||
generateCode(value) {
|
||||
this.verifiedCode = value.toLowerCase();
|
||||
console.log(this.verifiedCode);
|
||||
},
|
||||
validateInputUsername(rule, value, callback) {
|
||||
console.log(value);
|
||||
var reg = /^[0-9]+.?[0-9]*/;
|
||||
if (!value) {
|
||||
callback("请输入用户名和手机号！");
|
||||
}
|
||||
|
||||
//判断用户输入账号还是手机号码
|
||||
if (reg.test(value)) {
|
||||
var params = {
|
||||
phone: value,
|
||||
};
|
||||
checkOnlyUser(params).then((res) => {
|
||||
if (res.success) {
|
||||
callback("用户名不存在!")
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
var params = {
|
||||
username: value,
|
||||
};
|
||||
checkOnlyUser(params).then((res) => {
|
||||
if (res.success) {
|
||||
callback("用户名不存在!")
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-form :form="form" style="max-width: 500px; margin: 40px auto 0;" @keyup.enter.native="nextStep">
|
||||
<a-form-item
|
||||
label="手机"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 16}"
|
||||
style="text-align: left"
|
||||
>
|
||||
<a-input
|
||||
type="text"
|
||||
autocomplete="false"
|
||||
v-decorator="['phone',{ rules: validatorRules.phone.rule}]"
|
||||
placeholder="请输入手机号">
|
||||
<a-icon slot="prefix" type="phone" :style="{ color: 'rgba(0,0,0,.25)'}"/>
|
||||
</a-input>
|
||||
<a-col :span="3"></a-col>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="验证码"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
v-if="show">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="13">
|
||||
<a-input
|
||||
v-decorator="['captcha',validatorRules.captcha]"
|
||||
type="text"
|
||||
placeholder="手机短信验证码">
|
||||
</a-input>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-button
|
||||
tabindex="-1"
|
||||
size="default"
|
||||
:disabled="state.smsSendBtn"
|
||||
@click.stop.prevent="getCaptcha"
|
||||
v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"></a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapperCol="{span: 19, offset: 5}">
|
||||
<router-link style="float: left;line-height: 40px;" :to="{ name: 'login' }">使用已有账户登录</router-link>
|
||||
<a-button type="primary" @click="nextStep" style="margin-left: 20px">下一步</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {postAction} from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "Step2",
|
||||
props: ['userList'],
|
||||
data() {
|
||||
return {
|
||||
form: this.$form.createForm(this),
|
||||
loading: false,
|
||||
// accountName: this.userList.username,
|
||||
dropList: "0",
|
||||
captcha: "",
|
||||
show: true,
|
||||
state: {
|
||||
time: 60,
|
||||
smsSendBtn: false,
|
||||
},
|
||||
formLogin: {
|
||||
captcha: "",
|
||||
mobile: "",
|
||||
},
|
||||
validatorRules: {
|
||||
captcha: {rule: [{required: true, message: '请输入短信验证码!'}, {validator: this.validateCaptcha}]},
|
||||
phone: {rule: [{required: true, message: '请输入手机号码!'}, {validator: this.validatePhone}]},
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
nextStep() {
|
||||
let that = this
|
||||
that.loading = true
|
||||
this.form.validateFields((err, values) => {
|
||||
console.log(values);
|
||||
if (!err) {
|
||||
if (that.dropList == "0") {
|
||||
if (values.captcha == undefined) {
|
||||
this.cmsFailed("请输入短信验证码!");
|
||||
} else {
|
||||
var params = {}
|
||||
params.phone = values.phone;
|
||||
params.smscode = values.captcha;
|
||||
postAction("/sys/user/phoneVerification", params).then((res) => {
|
||||
if (res.success) {
|
||||
console.log(res);
|
||||
var userList = {
|
||||
username: res.result.username,
|
||||
phone: values.phone,
|
||||
smscode: res.result.smscode
|
||||
};
|
||||
setTimeout(function () {
|
||||
that.$emit('nextStep', userList)
|
||||
}, 0)
|
||||
} else {
|
||||
this.cmsFailed(res.message);
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
getCaptcha(e) {
|
||||
e.preventDefault();
|
||||
let that = this;
|
||||
let phone=that.form.getFieldValue("phone")
|
||||
if(!phone){
|
||||
this.cmsFailed("手机号不能为空!");
|
||||
return;
|
||||
}
|
||||
this.state.smsSendBtn = true;
|
||||
let interval = window.setInterval(() => {
|
||||
if (that.state.time-- <= 0) {
|
||||
that.state.time = 60;
|
||||
that.state.smsSendBtn = false;
|
||||
window.clearInterval(interval);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
const hide = this.$message.loading('验证码发送中..', 0);
|
||||
let smsParams = {
|
||||
mobile: phone,
|
||||
smsmode: "2"
|
||||
};
|
||||
postAction("/sys/sms", smsParams).then(res => {
|
||||
if (!res.success) {
|
||||
setTimeout(hide, 1);
|
||||
this.cmsFailed(res.message);
|
||||
}
|
||||
setTimeout(hide, 500);
|
||||
})
|
||||
},
|
||||
cmsFailed(err) {
|
||||
this.$notification['error']({
|
||||
message: "验证错误",
|
||||
description: err,
|
||||
duration: 4,
|
||||
});
|
||||
},
|
||||
handleChangeSelect(value) {
|
||||
var that = this;
|
||||
console.log(value);
|
||||
if (value == 0) {
|
||||
that.dropList = "0";
|
||||
that.show = true;
|
||||
} else {
|
||||
that.dropList = "1";
|
||||
that.show = false;
|
||||
}
|
||||
},
|
||||
validatePhone(rule,value,callback){
|
||||
if(value){
|
||||
var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
|
||||
if(!myreg.test(value)){
|
||||
callback("请输入正确的手机号")
|
||||
}else{
|
||||
callback();
|
||||
}
|
||||
}else{
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.stepFormText {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.ant-row{
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.ant-col{
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.ant-form-item-label,
|
||||
.ant-form-item-control {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.getCaptcha {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
|
||||
<a-form-item
|
||||
label="账号名"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
>
|
||||
<a-input
|
||||
type="text"
|
||||
autocomplete="false" :value="accountName" disabled>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="新密码"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
class="stepFormText">
|
||||
<a-input
|
||||
v-decorator="['password',validatorRules.password]"
|
||||
type="password"
|
||||
autocomplete="false">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="确认密码"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
class="stepFormText">
|
||||
<a-input
|
||||
v-decorator="['confirmPassword',validatorRules.confirmPassword]"
|
||||
type="password"
|
||||
autocomplete="false">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapperCol="{span: 19, offset: 5}">
|
||||
<a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
|
||||
<a-button :loading="loading" type="primary" @click="nextStep" style="margin-left:20px">提交</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { putAction,getAction } from '@/api/manage'
|
||||
export default {
|
||||
name: "Step3",
|
||||
// components: {
|
||||
// Result
|
||||
// },
|
||||
props: ['userList'],
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
form: this.$form.createForm(this),
|
||||
accountName: this.userList.username,
|
||||
validatorRules: {
|
||||
username: {rules: [{required: true, message: '用户名不能为空!'}]},
|
||||
password: {
|
||||
rules: [{
|
||||
required: true,
|
||||
pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{8,}$/,
|
||||
message: '密码由8位数字、大小写字母和特殊符号组成!!'
|
||||
}, {validator: this.handlePasswordLevel}]
|
||||
},
|
||||
confirmPassword: {rules: [{required: true, message: '密码不能为空!'}, {validator: this.handlePasswordCheck}]},
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
nextStep () {
|
||||
let that = this
|
||||
that.loading = true
|
||||
this.form.validateFields((err, values) => {
|
||||
if ( !err ){
|
||||
var params={}
|
||||
params.username=this.userList.username;
|
||||
params.password=values.password;
|
||||
params.smscode=this.userList.smscode;
|
||||
params.phone= this.userList.phone;
|
||||
getAction("/sys/user/passwordChange", params).then((res) => {
|
||||
if(res.success){
|
||||
var userList = {
|
||||
username: this.userList.username
|
||||
}
|
||||
console.log(userList);
|
||||
setTimeout(function () {
|
||||
that.$emit('nextStep', userList)
|
||||
}, 1500)
|
||||
}else{
|
||||
this.passwordFailed(res.message);
|
||||
that.loading = false
|
||||
}
|
||||
})
|
||||
} else{
|
||||
that.loading = false
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
prevStep () {
|
||||
this.$emit('prevStep', this.userList)
|
||||
},
|
||||
|
||||
handlePasswordCheck (rule, value, callback) {
|
||||
let password = this.form.getFieldValue('password')
|
||||
if (value && password && value.trim() !== password.trim()) {
|
||||
callback(new Error('两次密码不一致'))
|
||||
}
|
||||
callback()
|
||||
},
|
||||
passwordFailed(err){
|
||||
this.$notification[ 'error' ]({
|
||||
message: "更改密码失败",
|
||||
description:err,
|
||||
duration: 4,
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.stepFormText {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.ant-form-item-label,
|
||||
.ant-form-item-control {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-form style="margin: 40px auto 0;">
|
||||
<result title="更改密码成功" :is-success="true">
|
||||
<div class="toLogin">
|
||||
<h3>将在<span>{{time}}</span>秒后返回登录页面.</h3>
|
||||
</div>
|
||||
</result>
|
||||
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Result from '@/views/result/Result'
|
||||
export default {
|
||||
name: "Step4",
|
||||
props:['userList'],
|
||||
components: {
|
||||
Result
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
time: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
countDown(){
|
||||
let that = this;
|
||||
that.time--;
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
let that = this;
|
||||
that.time = 5;
|
||||
setInterval(that.countDown, 1000);
|
||||
},
|
||||
watch: {
|
||||
time: function (newVal,oldVal) {
|
||||
if (newVal == 0) {
|
||||
var params = {
|
||||
username: this.userList.username
|
||||
};
|
||||
this.$router.push({name: 'login', params})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.toLogin{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,380 @@
|
||||
<template>
|
||||
<div class="main user-layout-register">
|
||||
<h3><span>注册</span></h3>
|
||||
<a-form ref="formRegister" :autoFormCreate="(form)=>{this.form = form}" id="formRegister">
|
||||
<a-form-item
|
||||
fieldDecoratorId="username"
|
||||
:fieldDecoratorOptions="{rules: [{ required: false}, { validator: this.checkUsername }]}">
|
||||
<a-input size="large" type="text" autocomplete="false" placeholder="请输入用户名"></a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-popover placement="rightTop" trigger="click" :visible="state.passwordLevelChecked">
|
||||
<template slot="content">
|
||||
<div :style="{ width: '240px' }">
|
||||
<div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
|
||||
<a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor "/>
|
||||
<div style="margin-top: 10px;">
|
||||
<span>请至少输入 8 个字符。请不要使用容易被猜到的密码。</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<a-form-item
|
||||
fieldDecoratorId="password"
|
||||
:fieldDecoratorOptions="{rules: [{ required: false}, { validator: this.handlePasswordLevel }]}">
|
||||
<a-input size="large" type="password" @click="handlePasswordInputClick" autocomplete="false" placeholder="至少8位密码，区分大小写"></a-input>
|
||||
</a-form-item>
|
||||
</a-popover>
|
||||
|
||||
<a-form-item
|
||||
fieldDecoratorId="password2"
|
||||
:fieldDecoratorOptions="{rules: [{ required: false}, { validator: this.handlePasswordCheck }]}">
|
||||
|
||||
<a-input size="large" type="password" autocomplete="false" placeholder="确认密码"></a-input>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item-->
|
||||
<!-- fieldDecoratorId="email">-->
|
||||
<!-- <a-input size="large" type="text" placeholder="邮箱"></a-input>-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item
|
||||
fieldDecoratorId="mobile"
|
||||
:fieldDecoratorOptions="{rules: [{ required: false}, { validator: this.handlePhoneCheck }]}">
|
||||
<a-input size="large" placeholder="11 位手机号">
|
||||
<a-select slot="addonBefore" size="large" defaultValue="+86">
|
||||
<a-select-option value="+86">+86</a-select-option>
|
||||
<a-select-option value="+87">+87</a-select-option>
|
||||
</a-select>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<!--<a-input-group size="large" compact>
|
||||
<a-select style="width: 20%" size="large" defaultValue="+86">
|
||||
<a-select-option value="+86">+86</a-select-option>
|
||||
<a-select-option value="+87">+87</a-select-option>
|
||||
</a-select>
|
||||
<a-input style="width: 80%" size="large" placeholder="11 位手机号"></a-input>
|
||||
</a-input-group>-->
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col class="gutter-row" :span="16">
|
||||
<a-form-item
|
||||
fieldDecoratorId="captcha"
|
||||
:fieldDecoratorOptions="{rules: [{ required: false}, { validator: this.handleCaptchaCheck }]}">
|
||||
<a-input size="large" type="text" placeholder="验证码">
|
||||
<a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col class="gutter-row" :span="8">
|
||||
<a-button
|
||||
class="getCaptcha"
|
||||
size="large"
|
||||
:disabled="state.smsSendBtn"
|
||||
@click.stop.prevent="getCaptcha"
|
||||
v-text="!state.smsSendBtn && '获取验证码'||(state.time+' s')"></a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
size="large"
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
class="register-button"
|
||||
:loading="registerBtn"
|
||||
@click.stop.prevent="handleSubmit"
|
||||
:disabled="registerBtn">注册
|
||||
</a-button>
|
||||
<router-link class="login" :to="{ name: 'login' }">使用已有账户登录</router-link>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mixinDevice} from '@/utils/mixin.js'
|
||||
import {getSmsCaptcha} from '@/api/login'
|
||||
import {getAction, postAction} from '@/api/manage'
|
||||
import {checkOnlyUser} from '@/api/api'
|
||||
|
||||
const levelNames = {
|
||||
0: '低',
|
||||
1: '低',
|
||||
2: '中',
|
||||
3: '强'
|
||||
}
|
||||
const levelClass = {
|
||||
0: 'error',
|
||||
1: 'error',
|
||||
2: 'warning',
|
||||
3: 'success'
|
||||
}
|
||||
const levelColor = {
|
||||
0: '#ff0000',
|
||||
1: '#ff0000',
|
||||
2: '#ff7e05',
|
||||
3: '#52c41a',
|
||||
}
|
||||
export default {
|
||||
name: "Register",
|
||||
components: {},
|
||||
mixins: [mixinDevice],
|
||||
data() {
|
||||
return {
|
||||
form: null,
|
||||
|
||||
state: {
|
||||
time: 60,
|
||||
smsSendBtn: false,
|
||||
passwordLevel: 0,
|
||||
passwordLevelChecked: false,
|
||||
percent: 10,
|
||||
progressColor: '#FF0000'
|
||||
},
|
||||
registerBtn: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
passwordLevelClass() {
|
||||
return levelClass[this.state.passwordLevel]
|
||||
},
|
||||
passwordLevelName() {
|
||||
return levelNames[this.state.passwordLevel]
|
||||
},
|
||||
passwordLevelColor() {
|
||||
return levelColor[this.state.passwordLevel]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkUsername(rule, value, callback) {
|
||||
if(!value){
|
||||
callback(new Error("请输入用户名"))
|
||||
}else{
|
||||
var params = {
|
||||
username: value,
|
||||
};
|
||||
checkOnlyUser(params).then((res) => {
|
||||
if (res.success) {
|
||||
callback()
|
||||
} else {
|
||||
callback("用户名已存在!")
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
handleEmailCheck(rule, value, callback) {
|
||||
var params = {
|
||||
email: value,
|
||||
};
|
||||
checkOnlyUser(params).then((res) => {
|
||||
if (res.success) {
|
||||
callback()
|
||||
} else {
|
||||
callback("邮箱已存在!")
|
||||
}
|
||||
})
|
||||
},
|
||||
handlePasswordLevel(rule, value, callback) {
|
||||
|
||||
let level = 0
|
||||
let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/;
|
||||
if (!reg.test(value)) {
|
||||
callback(new Error('密码由8位数字、大小写字母和特殊符号组成!'))
|
||||
}
|
||||
// 判断这个字符串中有没有数字
|
||||
if (/[0-9]/.test(value)) {
|
||||
level++
|
||||
}
|
||||
// 判断字符串中有没有字母
|
||||
if (/[a-zA-Z]/.test(value)) {
|
||||
level++
|
||||
}
|
||||
// 判断字符串中有没有特殊符号
|
||||
if (/[^0-9a-zA-Z_]/.test(value)) {
|
||||
level++
|
||||
}
|
||||
this.state.passwordLevel = level
|
||||
this.state.percent = level * 30
|
||||
if (level >= 2) {
|
||||
if (level >= 3) {
|
||||
this.state.percent = 100
|
||||
}
|
||||
callback()
|
||||
} else {
|
||||
if (level === 0) {
|
||||
this.state.percent = 10
|
||||
}
|
||||
callback(new Error('密码强度不够'))
|
||||
}
|
||||
},
|
||||
|
||||
handlePasswordCheck(rule, value, callback) {
|
||||
let password = this.form.getFieldValue('password')
|
||||
//console.log('value', value)
|
||||
if (value === undefined) {
|
||||
callback(new Error('请输入密码'))
|
||||
}
|
||||
if (value && password && value.trim() !== password.trim()) {
|
||||
callback(new Error('两次密码不一致'))
|
||||
}
|
||||
callback()
|
||||
},
|
||||
handleCaptchaCheck(rule, value, callback){
|
||||
if(!value){
|
||||
callback(new Error("请输入验证码"))
|
||||
}else{
|
||||
callback();
|
||||
}
|
||||
},
|
||||
handlePhoneCheck(rule, value, callback) {
|
||||
var reg=/^1[3456789]\d{9}$/
|
||||
if(!reg.test(value)){
|
||||
callback(new Error("请输入正确手机号"))
|
||||
}else{
|
||||
var params = {
|
||||
phone: value,
|
||||
};
|
||||
checkOnlyUser(params).then((res) => {
|
||||
if (res.success) {
|
||||
callback()
|
||||
} else {
|
||||
callback("手机号已存在!")
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
handlePasswordInputClick() {
|
||||
if (!this.isMobile()) {
|
||||
this.state.passwordLevelChecked = true
|
||||
return;
|
||||
}
|
||||
this.state.passwordLevelChecked = false
|
||||
},
|
||||
|
||||
handleSubmit() {
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
var register = {
|
||||
username: values.username,
|
||||
password: values.password,
|
||||
phone: values.mobile,
|
||||
smscode: values.captcha
|
||||
};
|
||||
postAction("/sys/user/register", register).then((res) => {
|
||||
if (!res.success) {
|
||||
this.registerFailed(res.message)
|
||||
} else {
|
||||
this.$router.push({name: 'registerResult', params: {...values}})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getCaptcha(e) {
|
||||
e.preventDefault()
|
||||
let that = this
|
||||
this.form.validateFields(['mobile'], {force: true}, (err, values) => {
|
||||
if (!err) {
|
||||
this.state.smsSendBtn = true;
|
||||
let interval = window.setInterval(() => {
|
||||
if (that.state.time-- <= 0) {
|
||||
that.state.time = 60;
|
||||
that.state.smsSendBtn = false;
|
||||
window.clearInterval(interval);
|
||||
}
|
||||
}, 1000);
|
||||
const hide = this.$message.loading('验证码发送中..', 0);
|
||||
const params = {
|
||||
mobile: values.mobile,
|
||||
smsmode: "1"
|
||||
};
|
||||
postAction("/sys/sms", params).then((res) => {
|
||||
if (!res.success) {
|
||||
this.registerFailed(res.message);
|
||||
setTimeout(hide, 0);
|
||||
}
|
||||
setTimeout(hide, 500);
|
||||
}).catch(err => {
|
||||
setTimeout(hide, 1);
|
||||
clearInterval(interval);
|
||||
that.state.time = 60;
|
||||
that.state.smsSendBtn = false;
|
||||
this.requestFailed(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
registerFailed(message) {
|
||||
this.$notification['error']({
|
||||
message: "注册失败",
|
||||
description: message,
|
||||
duration: 2,
|
||||
});
|
||||
|
||||
},
|
||||
requestFailed(err) {
|
||||
this.$notification['error']({
|
||||
message: '错误',
|
||||
description: ((err.response || {}).data || {}).message || "请求出现错误，请稍后再试",
|
||||
duration: 4,
|
||||
});
|
||||
this.registerBtn = false;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'state.passwordLevel'(val) {
|
||||
console.log(val)
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.user-register {
|
||||
|
||||
&.error {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: #ff7e05;
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.user-layout-register {
|
||||
.ant-input-group-addon:first-child {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.user-layout-register {
|
||||
|
||||
& > h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.getCaptcha {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.register-button {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.login {
|
||||
float: right;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<result
|
||||
:isSuccess="true"
|
||||
:content="false"
|
||||
:title="email">
|
||||
|
||||
<template slot="action">
|
||||
<a-button size="large" style="margin-left: 8px" @click="goHomeHandle">返回首页</a-button>
|
||||
</template>
|
||||
|
||||
</result>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Result from '@/views/result/Result'
|
||||
|
||||
export default {
|
||||
name: "RegisterResult",
|
||||
components: {
|
||||
Result
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
email () {
|
||||
let v = this.form ? this.form.username || this.form.mobile : ' XXX '
|
||||
let title = `你的账户：${v} 注册成功`
|
||||
this.username = v;
|
||||
return title
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.form = this.$route.params
|
||||
},
|
||||
methods: {
|
||||
goHomeHandle () {
|
||||
let params={};
|
||||
params.username=this.form.username;
|
||||
params.password=this.form.password;
|
||||
console.log(params);
|
||||
this.$router.push({name:'login',params})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user