mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-01-03 20:35:29 +08:00
JEECG-BOOT 2.0.2版本发布
This commit is contained in:
zhangdaihao
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:width="modalWidth"
|
||||
:visible="visible"
|
||||
:footer="null"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<!--table区 -->
|
||||
<div class="marginCss">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="small"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:rowClassName="setdataCss"
|
||||
:loading="loading"
|
||||
:scroll="{ y: 700 }"
|
||||
:pagination="false">
|
||||
<span slot="dataVersionTitle1"><a-icon type="smile-o" /> 版本:{{dataVersion1Num}}</span>
|
||||
<span slot="dataVersionTitle2"><a-icon type="smile-o" /> 版本:{{dataVersion2Num}}</span>
|
||||
<template slot="avatarslot" slot-scope="text, record">
|
||||
<div class="anty-img-wrap">
|
||||
<img :src="getAvatarView(record)"/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getAction} from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'DataLogCompareModal',
|
||||
data() {
|
||||
return {
|
||||
modalWidth: 1000,
|
||||
modaltoggleFlag: true,
|
||||
confirmDirty: false,
|
||||
title: '操作',
|
||||
visible: false,
|
||||
model: {},
|
||||
confirmLoading: false,
|
||||
headers: {},
|
||||
//版本号
|
||||
dataVersion1Num:'',
|
||||
dataVersion2Num:'',
|
||||
//表头
|
||||
columns: [
|
||||
{
|
||||
title: '字段名',
|
||||
align: 'left',
|
||||
dataIndex: 'code',
|
||||
width: '30%',
|
||||
}, {
|
||||
align: 'left',
|
||||
dataIndex: 'dataVersion1',
|
||||
width: '30%',
|
||||
slots: { title: 'dataVersionTitle1' },
|
||||
}, {
|
||||
title: '',
|
||||
dataIndex: 'imgshow',
|
||||
align: 'center',
|
||||
scopedSlots: {customRender: "avatarslot"},
|
||||
width: '10%',
|
||||
}, {
|
||||
align: 'left',
|
||||
dataIndex: 'dataVersion2',
|
||||
width: '30%',
|
||||
slots: { title: 'dataVersionTitle2' },
|
||||
}
|
||||
],
|
||||
//数据集
|
||||
dataSource: [],
|
||||
loading: false,
|
||||
url: {
|
||||
queryCompareUrl: "/sys/dataLog/queryCompareList",
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
loadData(dataId1, dataId2) {
|
||||
this.dataSource = [];
|
||||
let that = this;
|
||||
getAction(that.url.queryCompareUrl, {dataId1: dataId1, dataId2: dataId2}).then((res) => {
|
||||
if (res.success) {
|
||||
that.dataVersion1Num = res.result[0].dataVersion;
|
||||
that.dataVersion2Num = res.result[1].dataVersion;
|
||||
let json1 = JSON.parse(res.result[0].dataContent);
|
||||
let json2 = JSON.parse(res.result[1].dataContent);
|
||||
for (var item1 in json1) {
|
||||
for (var item2 in json2) {
|
||||
if (item1 == item2) {
|
||||
this.dataSource.push({
|
||||
code: item1,
|
||||
imgshow: '',
|
||||
dataVersion1: json1[item1],
|
||||
dataVersion2: json2[item2],
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log(res.message);
|
||||
}
|
||||
})
|
||||
},
|
||||
compareModal(dataId1, dataId2) {
|
||||
this.visible = true
|
||||
this.loadData(dataId1, dataId2);
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
modalFormOk() {
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
this.disableSubmit = false;
|
||||
},
|
||||
setdataCss(record) {
|
||||
let className = 'trcolor';
|
||||
const dataVersion1 = record.dataVersion1;
|
||||
const dataVersion2 = record.dataVersion2;
|
||||
if (dataVersion1 != dataVersion2) {
|
||||
return className;
|
||||
}
|
||||
},
|
||||
getAvatarView: function (avatar) {
|
||||
if (avatar.dataVersion1 != avatar.dataVersion2) {
|
||||
return "/goright.png";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.anty-img-wrap {
|
||||
height: 25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.anty-img-wrap > img {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.marginCss {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@import '../../../assets/less/index.less';
|
||||
</style>
|
||||
153
ant-design-vue-jeecg/src/views/system/modules/DataLogModal.vue
Normal file
153
ant-design-vue-jeecg/src/views/system/modules/DataLogModal.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal
|
||||
:width="modalWidth"
|
||||
:visible="visible"
|
||||
title="数据对比窗口"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="取消">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form @submit="handleSubmit" :form="form" class="form">
|
||||
<a-row class="form-row" :gutter="24">
|
||||
<a-col :md="12" :sm="8">
|
||||
<a-form-item label="数据库表名" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
|
||||
<a-input placeholder="请输入数据库表名" v-decorator="[ 'dataTale', {}]" @blur="handleTableBlur" disabled/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="12" :sm="8">
|
||||
<a-form-item label="数据ID" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
|
||||
<a-input placeholder="请输入数据ID" v-decorator="[ 'dataId', {}]" @blur="handleIdBlur" disabled/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row class="form-row" :gutter="24">
|
||||
<a-col :md="12" :sm="8">
|
||||
<a-form-item label="版本号1" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
|
||||
<a-select placeholder="请选择版本号" v-decorator="[ 'dataVersion1', {}]" @change="handleChange1">
|
||||
<a-select-option v-for="(log,logindex) in DataVersionList" :key="logindex.toString()" :value="log.id">
|
||||
{{ log.dataVersion }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="8">
|
||||
<a-form-item label="版本号2" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
|
||||
<a-select placeholder="请选择版本号" v-decorator="[ 'dataVersion2', {}]" @change="handleChange2">
|
||||
<a-select-option v-for="(log,logindex) in DataVersionList" :key="logindex.toString()" :value="log.id">
|
||||
{{ log.dataVersion }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
<data-log-compare-modal ref="modal" @ok="modalFormOk" ></data-log-compare-modal>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@/api/manage'
|
||||
import DataLogCompareModal from './DataLogCompareModal'
|
||||
export default {
|
||||
name: 'DataLogModal',
|
||||
components: { DataLogCompareModal },
|
||||
dataId1:'',
|
||||
dataId2: '',
|
||||
dataTable1:'',
|
||||
dataID3:'',
|
||||
|
||||
data () {
|
||||
return {
|
||||
modalWidth:700,
|
||||
modaltoggleFlag:true,
|
||||
confirmDirty: false,
|
||||
title:"操作",
|
||||
visible: false,
|
||||
model: {},
|
||||
confirmLoading: false,
|
||||
headers:{},
|
||||
form:this.$form.createForm(this),
|
||||
url: {
|
||||
queryDataVerListUrl:"/sys/dataLog/queryDataVerList",
|
||||
},
|
||||
DataVersionList:[],
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
addModal(records){
|
||||
const dataTable = records[0].dataTable
|
||||
const dataId = records[0].dataId;
|
||||
const dataVersion1 = records[0].dataVersion;
|
||||
const dataVersion2 = records[1].dataVersion;
|
||||
this.dataId1 = records[0].id;
|
||||
this.dataId2 = records[1].id;
|
||||
this.dataTable1 = records[0].dataTable
|
||||
this.dataID3 = records[0].dataId
|
||||
this.initDataVersionList();
|
||||
this.form.resetFields();
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue({dataTale:dataTable,dataId:dataId,dataVersion1:dataVersion1,dataVersion2:dataVersion2});
|
||||
});
|
||||
},
|
||||
handleOk () {
|
||||
this.close();
|
||||
this.$refs.modal.compareModal(this.dataId1 ,this.dataId2);
|
||||
this.$refs.modal.title="数据比较";
|
||||
},
|
||||
handleCancel(){
|
||||
this.close()
|
||||
},
|
||||
handleSubmit(){
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
this.disableSubmit = false;
|
||||
},
|
||||
modalFormOk () {
|
||||
},
|
||||
initDataVersionList(){
|
||||
let that = this;
|
||||
getAction(that.url.queryDataVerListUrl,{dataTable:this.dataTable1,dataId:this.dataID3}).then((res)=>{
|
||||
if(res.success){
|
||||
this.DataVersionList = res.result;
|
||||
}else{
|
||||
this.DataVersionList=[];
|
||||
this.dataId1 = '',
|
||||
this.dataId2='',
|
||||
console.log(res.message);
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
handleChange1(value) {
|
||||
this.dataId1 = value;
|
||||
},
|
||||
handleChange2(value) {
|
||||
this.dataId2 = value;
|
||||
},
|
||||
handleTableBlur(e){
|
||||
this.dataTable1 = e.target.value;
|
||||
this.initDataVersionList();
|
||||
},
|
||||
handleIdBlur(e){
|
||||
this.dataID3 = e.target.value;
|
||||
this.initDataVersionList();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
193
ant-design-vue-jeecg/src/views/system/modules/DepartModal.vue
Normal file
193
ant-design-vue-jeecg/src/views/system/modules/DepartModal.vue
Normal file
@ -0,0 +1,193 @@
|
||||
<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="电话">
|
||||
<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: "/sysdepart/sysDepart/add",
|
||||
},
|
||||
}
|
||||
},
|
||||
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;
|
||||
}else{
|
||||
this.seen = true;
|
||||
}
|
||||
this.edit(depart);
|
||||
},
|
||||
edit (record) {
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, {});
|
||||
this.visible = true;
|
||||
this.loadTreeData();
|
||||
this.model.parentId = record!=null?record.toString():null;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model,'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>
|
||||
164
ant-design-vue-jeecg/src/views/system/modules/DepartWindow.vue
Normal file
164
ant-design-vue-jeecg/src/views/system/modules/DepartWindow.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:width="modalWidth"
|
||||
:visible="visible"
|
||||
title="部门搜索"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭"
|
||||
wrapClassName="ant-modal-cust-warp"
|
||||
>
|
||||
<!--部门树-->
|
||||
<template>
|
||||
<a-form :form="form">
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级部门">
|
||||
<a-tree
|
||||
multiple
|
||||
treeCheckable="tree"
|
||||
checkable
|
||||
:checkedKeys="checkedKeys"
|
||||
allowClear="true"
|
||||
:checkStrictly="true"
|
||||
@check="onCheck"
|
||||
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
||||
:treeData="departTree"
|
||||
placeholder="请选择上级部门"
|
||||
>
|
||||
</a-tree>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import { getAction } from '@/api/manage'
|
||||
import { queryIdTree } from '@/api/api'
|
||||
import userModal from './UserModal'
|
||||
export default {
|
||||
name: "DepartWindow",
|
||||
components: {
|
||||
userModal,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
checkedKeys:[], // 存储选中的部门id
|
||||
userId:"", // 存储用户id
|
||||
model:{}, // 存储SysUserDepartsVO表
|
||||
userDepartModel:{userId:'',departIdList:[]}, // 存储用户id一对多部门信息的对象
|
||||
departList:[], // 存储部门信息
|
||||
modalWidth:400,
|
||||
departTree:[],
|
||||
title:"操作",
|
||||
visible: false,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
confirmLoading: false,
|
||||
headers:{},
|
||||
form:this.$form.createForm(this),
|
||||
url: {
|
||||
userId:"/sys/user/generateUserId", // 引入生成添加用户情况下的url
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add (checkedDepartKeys,userId) {
|
||||
this.checkedKeys = checkedDepartKeys;
|
||||
this.userId = userId;
|
||||
this.edit({});
|
||||
},
|
||||
edit (record) {
|
||||
this.departList = [];
|
||||
this.queryDepartTree();
|
||||
this.form.resetFields();
|
||||
this.visible = true;
|
||||
this.model = Object.assign({}, record);
|
||||
let filedsVal = pick(this.model,'id','userId','departIdList');
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(filedsVal);
|
||||
});
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
this.departList = [];
|
||||
this.checkedKeys = [];
|
||||
},
|
||||
handleSubmit () {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true;
|
||||
if(this.userId == null){
|
||||
getAction(this.url.userId).then((res)=>{
|
||||
if(res.success){
|
||||
let formData = {userId:res.result,
|
||||
departIdList:this.departList}
|
||||
console.log(formData)
|
||||
that.$emit('ok', formData);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.departList = [];
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
})
|
||||
}else {
|
||||
let formData = {userId:this.userId,
|
||||
departIdList:this.departList}
|
||||
console.log(formData)
|
||||
that.departList = [];
|
||||
that.$emit('ok', formData);
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
|
||||
// 选择部门时作用的API
|
||||
onCheck(checkedKeys, info){
|
||||
this.departList = [];
|
||||
this.checkedKeys = checkedKeys.checked;
|
||||
let checkedNodes = info.checkedNodes;
|
||||
for (let i = 0; i < checkedNodes.length; i++) {
|
||||
let de = checkedNodes[i].data.props;
|
||||
let depart = {key:"",value:"",title:""};
|
||||
depart.key = de.value;
|
||||
depart.value = de.value;
|
||||
depart.title = de.title;
|
||||
this.departList.push(depart);
|
||||
}
|
||||
console.log('onCheck', checkedKeys, info);
|
||||
},
|
||||
queryDepartTree(){
|
||||
queryIdTree().then((res)=>{
|
||||
if(res.success){
|
||||
this.departTree = res.result;
|
||||
}
|
||||
})
|
||||
},
|
||||
modalFormOk(){
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ant-table-tbody .ant-table-row td{
|
||||
padding-top:10px;
|
||||
padding-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
113
ant-design-vue-jeecg/src/views/system/modules/DeptBaseInfo.vue
Normal file
113
ant-design-vue-jeecg/src/views/system/modules/DeptBaseInfo.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<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-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, 'departName', 'parentId', 'orgCode', 'departOrder', 'mobile', 'fax', 'address', 'memo'));
|
||||
});
|
||||
},
|
||||
clearForm() {
|
||||
this.form.resetFields();
|
||||
this.treeData = [];
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less'
|
||||
</style>
|
||||
291
ant-design-vue-jeecg/src/views/system/modules/DeptUserInfo.vue
Normal file
291
ant-design-vue-jeecg/src/views/system/modules/DeptUserInfo.vue
Normal file
@ -0,0 +1,291 @@
|
||||
<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.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: -46px 0px 10px 2px">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus" style="margin-top: 16px">用户录入</a-button>
|
||||
<!--<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-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 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>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
||||
import {getAction, postAction, deleteAction} from '@/api/manage'
|
||||
import SelectUserModal from './SelectUserModal'
|
||||
import UserModal from './UserModal'
|
||||
|
||||
export default {
|
||||
name: "DeptUserInfo",
|
||||
mixins: [JeecgListMixin],
|
||||
components: {
|
||||
SelectUserModal,
|
||||
UserModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '用户信息',
|
||||
currentDeptId: '',
|
||||
// 表头
|
||||
columns: [{
|
||||
title: '用户账号',
|
||||
align: "center",
|
||||
dataIndex: 'username'
|
||||
},
|
||||
{
|
||||
title: '用户名称',
|
||||
align: "center",
|
||||
dataIndex: 'realname'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: {customRender: 'action'},
|
||||
align: "center",
|
||||
width: 170
|
||||
}],
|
||||
url: {
|
||||
list: "/sys/user/departUserList",
|
||||
edit: "/sys/user/editSysDepartWithUser",
|
||||
delete: "/sys/user/deleteUserInDepart",
|
||||
deleteBatch: "/sys/user/deleteUserInDepartBatch",
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
loadData(arg) {
|
||||
if (!this.url.list) {
|
||||
this.$message.error("请设置url.list属性!")
|
||||
return
|
||||
}
|
||||
//加载数据 若传入参数1则加载第一页的内容
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1;
|
||||
}
|
||||
if (this.currentDeptId === '') return;
|
||||
var params = this.getQueryParams();//查询条件
|
||||
params.depId = this.currentDeptId;
|
||||
getAction(this.url.list, params).then((res) => {
|
||||
if (res.success) {
|
||||
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.selectedRowKeys.length <= 0) {
|
||||
this.$message.warning('请选择一条记录！');
|
||||
return;
|
||||
} else {
|
||||
var ids = "";
|
||||
for (var a = 0; a < this.selectedRowKeys.length; a++) {
|
||||
ids += this.selectedRowKeys[a] + ",";
|
||||
}
|
||||
var 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(res.message);
|
||||
that.loadData();
|
||||
that.onClearSelected();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
handleDelete: function (id) {
|
||||
if (!this.url.delete) {
|
||||
this.$message.error("请设置url.delete属性!")
|
||||
return
|
||||
}
|
||||
var that = this;
|
||||
deleteAction(that.url.delete, {depId: this.currentDeptId, userId: id}).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.loadData();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
open(record) {
|
||||
//console.log(record);
|
||||
this.currentDeptId = record.id;
|
||||
this.loadData(1);
|
||||
},
|
||||
clearList() {
|
||||
this.currentDeptId = '';
|
||||
this.dataSource = [];
|
||||
},
|
||||
hasSelectDept() {
|
||||
if (this.currentDeptId == null) {
|
||||
this.$message.error("请选择一个部门!")
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
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();
|
||||
this.$refs.modalForm.title = "新增";
|
||||
}
|
||||
},
|
||||
selectOK(data) {
|
||||
let params = {};
|
||||
params.depId = this.currentDeptId;
|
||||
params.userIdList = [];
|
||||
for (var 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.loadData();
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/** Button按钮间距 */
|
||||
.ant-btn {
|
||||
margin-left: 3px
|
||||
}
|
||||
|
||||
.ant-card {
|
||||
margin-left: -30px;
|
||||
margin-right: -30px;
|
||||
}
|
||||
|
||||
.table-page-search-wrapper {
|
||||
margin-top: -16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
158
ant-design-vue-jeecg/src/views/system/modules/DictItemModal.vue
Normal file
158
ant-design-vue-jeecg/src/views/system/modules/DictItemModal.vue
Normal file
@ -0,0 +1,158 @@
|
||||
<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="['itemText', validatorRules.itemText]"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="数据值">
|
||||
<a-input placeholder="请输入数据值" v-decorator="['itemValue', validatorRules.itemValue]"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述">
|
||||
<a-input v-decorator="['description']"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="排序值">
|
||||
<a-input-number :min="1" 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'
|
||||
|
||||
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: '请输入数据值!'}]},
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
add(dictId) {
|
||||
this.dictId = dictId;
|
||||
this.edit({});
|
||||
},
|
||||
edit(record) {
|
||||
if (record.id) {
|
||||
this.dictId = record.dictId;
|
||||
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');
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 关闭
|
||||
handleCancel() {
|
||||
this.close();
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
151
ant-design-vue-jeecg/src/views/system/modules/DictModal.vue
Normal file
151
ant-design-vue-jeecg/src/views/system/modules/DictModal.vue
Normal file
@ -0,0 +1,151 @@
|
||||
<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="请输入字典名称" v-decorator="[ 'dictName', validatorRules.dictName]"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="字典编码">
|
||||
<a-input placeholder="请输入字典编码" v-decorator="[ 'dictCode', validatorRules.dictCode]"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述">
|
||||
<a-input 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'
|
||||
|
||||
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: '请输入字典名称!' }] },
|
||||
dictCode: {
|
||||
rules: [{ required: true, message: '请输入字典编码!' },
|
||||
{ validator: this.validateDictCode }]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
validateDictCode(rule, value, callback) {
|
||||
// 重复校验
|
||||
var params = {
|
||||
tableName: 'sys_dict',
|
||||
fieldName: 'dict_code',
|
||||
fieldVal: value,
|
||||
dataId: this.model.id
|
||||
}
|
||||
duplicateCheck(params).then((res) => {
|
||||
if (res.success) {
|
||||
callback()
|
||||
} else {
|
||||
callback(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
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')
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
that.close()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 关闭
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
close() {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
142
ant-design-vue-jeecg/src/views/system/modules/PasswordModal.vue
Normal file
142
ant-design-vue-jeecg/src/views/system/modules/PasswordModal.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="重新设定密码"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭"
|
||||
style="top:20px;"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入用户账号" v-decorator="[ 'username', {}]" :readOnly="true"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="登陆密码" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
|
||||
<a-input type="password" placeholder="请输入登陆密码" v-decorator="[ 'password', validatorRules.password]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
|
||||
<a-input type="password" @blur="handleConfirmBlur" placeholder="请重新输入登陆密码" v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {changPassword} from '@/api/api'
|
||||
|
||||
export default {
|
||||
name: "PasswordModal",
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
confirmDirty: false,
|
||||
validatorRules:{
|
||||
password:{
|
||||
rules: [{
|
||||
required: true,
|
||||
pattern:/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
|
||||
message: '密码由8位数字、大小写字母和特殊符号组成!'
|
||||
}, {
|
||||
validator: this.validateToNextPassword,
|
||||
}],
|
||||
},
|
||||
confirmpassword:{
|
||||
rules: [{
|
||||
required: true, message: '请重新输入登陆密码!',
|
||||
}, {
|
||||
validator: this.compareToFirstPassword,
|
||||
}],
|
||||
},
|
||||
},
|
||||
|
||||
model: {},
|
||||
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
form:this.$form.createForm(this)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
console.log("created");
|
||||
},
|
||||
|
||||
methods: {
|
||||
show (username) {
|
||||
this.form.resetFields();
|
||||
this.visible = true;
|
||||
this.model.username = username;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue({username:username});
|
||||
});
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
this.disableSubmit = false;
|
||||
this.selectedRole = [];
|
||||
},
|
||||
handleSubmit () {
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.confirmLoading = true;
|
||||
let formData = Object.assign(this.model, values);
|
||||
changPassword(formData).then((res)=>{
|
||||
if(res.success){
|
||||
this.$message.success(res.message);
|
||||
this.$emit('ok');
|
||||
}else{
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false;
|
||||
this.close();
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
validateToNextPassword (rule, value, callback) {
|
||||
const form = this.form;
|
||||
const confirmpassword=form.getFieldValue('confirmpassword');
|
||||
console.log("confirmpassword==>",confirmpassword);
|
||||
if (value && confirmpassword && value !== confirmpassword) {
|
||||
callback('两次输入的密码不一样！');
|
||||
}
|
||||
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()
|
||||
}
|
||||
},
|
||||
handleConfirmBlur (e) {
|
||||
const value = e.target.value
|
||||
this.confirmDirty = this.confirmDirty || !!value
|
||||
}
|
||||
}
|
||||
}
|
||||
</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/list',
|
||||
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,388 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
:title="title"
|
||||
:width="drawerWidth"
|
||||
@close="handleCancel"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
|
||||
>
|
||||
<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,user:create" v-decorator="[ 'perms', {}]" :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>
|
||||
|
||||
|
||||
</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} 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, //是否路由菜单
|
||||
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:{rules: [{initialValue:1.0,validator: this.validateNumber}]},
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.initDictConfig();
|
||||
},
|
||||
methods: {
|
||||
loadTree(){
|
||||
var that = this;
|
||||
queryTreeList().then((res)=>{
|
||||
if(res.success){
|
||||
console.log('----queryTreeList---')
|
||||
console.log(res)
|
||||
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);
|
||||
//--------------------------------------------------------------------------------------------------
|
||||
//根据菜单类型，动态展示页面字段
|
||||
console.log(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
|
||||
}
|
||||
|
||||
|
||||
|
||||
//console.log('record.menuType', record.menuType);
|
||||
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','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;
|
||||
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;
|
||||
console.log(formData);
|
||||
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');
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
validateNumber(rule, value, callback){
|
||||
if(!value || new RegExp(/^[0-9]*[1-9][0-9]*$/).test(value)){
|
||||
callback();
|
||||
}else{
|
||||
callback("请输入正整数!");
|
||||
}
|
||||
},
|
||||
onChangeMenuType(e) {
|
||||
//console.log('localMenuType checked', e.target.value)
|
||||
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) {
|
||||
console.log(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>
|
||||
157
ant-design-vue-jeecg/src/views/system/modules/QuartzJobModal.vue
Normal file
157
ant-design-vue-jeecg/src/views/system/modules/QuartzJobModal.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<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="请输入任务类名" v-decorator="['jobClassName', {rules: [{ required: true, message: '请输入任务类名!' }]}]" />
|
||||
</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>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="参数"
|
||||
hasFeedback >
|
||||
<a-input placeholder="请输入参数" v-decorator="['parameter', {}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述"
|
||||
hasFeedback >
|
||||
<a-input placeholder="请输入描述" v-decorator="['description', {}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态">
|
||||
<a-radio-group buttonStyle="solid" v-decorator="[ 'status', {'initialValue':0}]">
|
||||
<a-radio-button :value="0">正常</a-radio-button>
|
||||
<a-radio-button :value="-1">停止</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'
|
||||
import moment from "moment"
|
||||
|
||||
export default {
|
||||
name: "QuartzJobModal",
|
||||
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:{
|
||||
},
|
||||
url: {
|
||||
add: "/sys/quartzJob/add",
|
||||
edit: "/sys/quartzJob/edit",
|
||||
},
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({});
|
||||
},
|
||||
edit (record) {
|
||||
this.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) => {
|
||||
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;
|
||||
that.close();
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</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>
|
||||
166
ant-design-vue-jeecg/src/views/system/modules/RoleModal.vue
Normal file
166
ant-design-vue-jeecg/src/views/system/modules/RoleModal.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<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="请输入角色名称" v-decorator="[ 'roleName', validatorRules.roleName]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="角色编码">
|
||||
<a-input placeholder="请输入角色编码" :disabled="roleDisabled" v-decorator="[ 'roleCode', validatorRules.roleCode]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述">
|
||||
<a-textarea :rows="5" 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'
|
||||
|
||||
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: 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' }
|
||||
]}
|
||||
},
|
||||
}
|
||||
},
|
||||
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;
|
||||
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');
|
||||
}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_role",
|
||||
fieldName: "role_code",
|
||||
fieldVal: value,
|
||||
dataId: this.model.id,
|
||||
};
|
||||
duplicateCheck(params).then((res)=>{
|
||||
if(res.success){
|
||||
callback();
|
||||
}else{
|
||||
callback(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="1200"
|
||||
:visible="visible"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :span="6">
|
||||
<a-form-item label="账号">
|
||||
<a-input placeholder="请输入账号查询" v-model="queryParam.username"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<a-form-item label="性别">
|
||||
<a-select v-model="queryParam.sex" placeholder="请选择性别查询">
|
||||
<a-select-option value="">请选择性别查询</a-select-option>
|
||||
<a-select-option value="1">男性</a-select-option>
|
||||
<a-select-option value="2">女性</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
|
||||
<template v-if="toggleSearchStatus">
|
||||
<a-col :span="6">
|
||||
<a-form-item label="邮箱">
|
||||
<a-input placeholder="请输入邮箱查询" v-model="queryParam.email"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<a-form-item label="手机号码">
|
||||
<a-input placeholder="请输入手机号码查询" v-model="queryParam.phone"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<a-form-item label="状态">
|
||||
<a-select v-model="queryParam.status" placeholder="请选择用户状态查询">
|
||||
<a-select-option value="">请选择用户状态</a-select-option>
|
||||
<a-select-option value="1">正常</a-select-option>
|
||||
<a-select-option value="2">解冻</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</template>
|
||||
|
||||
<a-col :span="6" >
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchByquery" 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>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
|
||||
</a-table>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { filterObj } from '@/utils/util';
|
||||
|
||||
import { getUserList } from '@/api/api'
|
||||
|
||||
export default {
|
||||
name: "SelectUserListModal",
|
||||
components: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title:"选择用户",
|
||||
queryParam: {},
|
||||
columns: [{
|
||||
title: '用户账号',
|
||||
align:"center",
|
||||
dataIndex: 'username',
|
||||
fixed:'left',
|
||||
width:200
|
||||
},{
|
||||
title: '真实姓名',
|
||||
align:"center",
|
||||
dataIndex: 'realname',
|
||||
},{
|
||||
title: '性别',
|
||||
align:"center",
|
||||
dataIndex: 'sex',
|
||||
customRender:function (text) {
|
||||
if(text==1){
|
||||
return "男";
|
||||
}else if(text==2){
|
||||
return "女";
|
||||
}else{
|
||||
return text;
|
||||
}
|
||||
}
|
||||
},{
|
||||
title: '手机号码',
|
||||
align:"center",
|
||||
dataIndex: 'phone'
|
||||
},{
|
||||
title: '邮箱',
|
||||
align:"center",
|
||||
dataIndex: 'email'
|
||||
},{
|
||||
title: '状态',
|
||||
align:"center",
|
||||
dataIndex: 'status',
|
||||
customRender:function (text) {
|
||||
if(text==1){
|
||||
return "正常";
|
||||
}else if(text==2){
|
||||
return "冻结";
|
||||
}else{
|
||||
return text;
|
||||
}
|
||||
}
|
||||
}],
|
||||
dataSource:[],
|
||||
ipagination:{
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
pageSizeOptions: ['5', '10', '20'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
isorter:{
|
||||
column: 'createTime',
|
||||
order: 'desc',
|
||||
},
|
||||
selectedRowKeys: [],
|
||||
selectionRows: [],
|
||||
visible:false,
|
||||
toggleSearchStatus:false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
add (selectUser,userIds) {
|
||||
this.visible = true;
|
||||
this.edit(selectUser,userIds);
|
||||
},
|
||||
edit(selectUser,userIds){
|
||||
if(!userIds){
|
||||
this.selectedRowKeys = []
|
||||
}else{
|
||||
this.selectedRowKeys = userIds.split(',');
|
||||
}
|
||||
if(!selectUser){
|
||||
this.selectionRows=[]
|
||||
}else{
|
||||
this.selectionRows = selectUser;
|
||||
}
|
||||
},
|
||||
loadData (arg){
|
||||
if(arg===1){
|
||||
this.ipagination.current = 1;
|
||||
}
|
||||
let params = this.getQueryParams();//查询条件
|
||||
getUserList(params).then((res)=>{
|
||||
if(res.success){
|
||||
this.dataSource = res.result.records;
|
||||
this.ipagination.total = res.result.total;
|
||||
}
|
||||
})
|
||||
},
|
||||
getQueryParams(){
|
||||
let param = Object.assign({}, this.queryParam,this.isorter);
|
||||
param.field = this.getQueryField();
|
||||
param.current = this.ipagination.current;
|
||||
param.pageSize = this.ipagination.pageSize;
|
||||
return filterObj(param);
|
||||
},
|
||||
getQueryField(){
|
||||
let str = "id,";
|
||||
for(let a = 0;a<this.columns.length;a++){
|
||||
str+=","+this.columns[a].dataIndex;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
onSelectChange (selectedRowKeys,selectionRows) {
|
||||
this.selectedRowKeys = selectedRowKeys;
|
||||
console.log(this.selectedRowKeys);
|
||||
this.selectionRows = selectionRows;
|
||||
},
|
||||
searchReset(){
|
||||
let that = this;
|
||||
Object.keys(that.queryParam).forEach(function(key){
|
||||
that.queryParam[key] = '';
|
||||
});
|
||||
that.loadData(1);
|
||||
},
|
||||
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.ipagination = pagination;
|
||||
this.loadData();
|
||||
},
|
||||
handleCancel () {
|
||||
this.selectionRows = [];
|
||||
this.selectedRowKeys = [];
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk () {
|
||||
this.$emit("choseUser",this.selectionRows);
|
||||
this.handleCancel();
|
||||
},
|
||||
searchByquery(){
|
||||
this.loadData(1);
|
||||
},
|
||||
handleToggleSearch(){
|
||||
this.toggleSearchStatus = !this.toggleSearchStatus;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style 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}
|
||||
|
||||
.anty-img-wrap{height:25px;position: relative;}
|
||||
.anty-img-wrap > img{max-height:100%;}
|
||||
</style>
|
||||
@ -0,0 +1,275 @@
|
||||
<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">
|
||||
<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: 113,
|
||||
dataIndex: 'username'
|
||||
},
|
||||
{
|
||||
title: '用户名称',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'realname'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'status'
|
||||
}
|
||||
],
|
||||
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/list",
|
||||
}
|
||||
}
|
||||
},
|
||||
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,280 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
:okButtonProps="{ props: {disabled: disabled} }"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="标题">
|
||||
<a-input placeholder="请输入标题" v-decorator="['titile', validatorRules.title]" :readOnly="disableSubmit" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="消息类型">
|
||||
<a-select
|
||||
v-decorator="[ 'msgCategory', validatorRules.msgCategory]"
|
||||
placeholder="请选择消息类型"
|
||||
:disabled="disableSubmit">
|
||||
<a-select-option value="1">通知公告</a-select-option>
|
||||
<a-select-option value="2">系统消息</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="内容">
|
||||
<j-editor v-decorator="[ 'msgContent', {} ]" triggerChange></j-editor>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="开始时间">
|
||||
<j-date v-decorator="[ 'startTime', validatorRules.startTime]" placeholder="请选择开始时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss"></j-date>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="结束时间">
|
||||
<j-date v-decorator="[ 'endTime', validatorRules.endTime]" placeholder="请选择结束时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss"></j-date>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="优先级">
|
||||
<a-select
|
||||
v-decorator="[ 'priority', {}]"
|
||||
placeholder="请选择优先级"
|
||||
:disabled="disableSubmit">
|
||||
<a-select-option value="L">低</a-select-option>
|
||||
<a-select-option value="M">中</a-select-option>
|
||||
<a-select-option value="H">高</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="通告对象类型">
|
||||
<a-select
|
||||
v-decorator="[ 'msgType', validatorRules.msgType]"
|
||||
placeholder="请选择通告对象类型"
|
||||
:disabled="disableSubmit"
|
||||
@change="chooseMsgType">
|
||||
<a-select-option value="USER">指定用户</a-select-option>
|
||||
<a-select-option value="ALL">全体用户</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="指定用户"
|
||||
v-if="userType">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
style="width: 100%"
|
||||
placeholder="请选择用户"
|
||||
v-model="selectedUser"
|
||||
@dropdownVisibleChange="selectUserIds">
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
<select-user-list-modal ref="UserListModal" @choseUser="choseUser"></select-user-list-modal>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpAction } from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import { getAction } from '@/api/manage'
|
||||
import JDate from '@/components/jeecg/JDate'
|
||||
import JEditor from '@/components/jeecg/JEditor'
|
||||
import SelectUserListModal from "./SelectUserListModal";
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
components: { JEditor, JDate, SelectUserListModal},
|
||||
name: "SysAnnouncementModal",
|
||||
data () {
|
||||
return {
|
||||
title:"操作",
|
||||
visible: false,
|
||||
disableSubmit:false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules:{
|
||||
title:{rules: [{ required: true, message: '请输入标题!' }]},
|
||||
msgCategory:{rules: [{ required: true, message: '请选择消息类型!' }]},
|
||||
msgType:{rules: [{ required: true, message: '请选择通告对象类型!' }]},
|
||||
endTime:{rules:[{validator: this.endTimeValidate}]},
|
||||
startTime:{rules:[{validator: this.startTimeValidate}]}
|
||||
},
|
||||
url: {
|
||||
queryByIds: "/sys/user/queryByIds",
|
||||
add: "/sys/annountCement/add",
|
||||
edit: "/sys/annountCement/edit",
|
||||
},
|
||||
userType:false,
|
||||
userIds:[],
|
||||
selectedUser:[],
|
||||
disabled:false,
|
||||
msgContent:"",
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({});
|
||||
},
|
||||
edit (record) {
|
||||
this.form.resetFields();
|
||||
this.model = {}
|
||||
this.disable = false;
|
||||
this.visible = true;
|
||||
this.getUser(record);
|
||||
},
|
||||
getUser(record){
|
||||
this.model = Object.assign({}, record);
|
||||
// 指定用户
|
||||
if(record&&record.msgType === "USER"){
|
||||
this.userType = true;
|
||||
this.userIds = record.userIds;
|
||||
getAction(this.url.queryByIds,{userIds:this.userIds}).then((res)=>{
|
||||
if(res.success){
|
||||
for(var i=0;i<res.result.length;i++){
|
||||
this.selectedUser.push(res.result[i].realname);
|
||||
}
|
||||
this.$refs.UserListModal.edit(res.result,this.userIds);
|
||||
}
|
||||
});
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model,'endTime','startTime','titile','msgContent','sender','priority','msgCategory','msgType','sendStatus','delFlag'))
|
||||
});
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.selectedUser = [];
|
||||
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(this.userType){
|
||||
formData.userIds = this.userIds;
|
||||
}
|
||||
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;
|
||||
that.close();
|
||||
})
|
||||
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.visible = false;
|
||||
this.$emit('close');
|
||||
this.resetUser();
|
||||
},
|
||||
resetUser (){
|
||||
this.userType = false;
|
||||
this.userIds = [];
|
||||
this.selectedUser = [];
|
||||
this.disabled = false;
|
||||
this.$refs.UserListModal.edit(null,null);
|
||||
},
|
||||
selectUserIds() {
|
||||
this.$refs.UserListModal.add(this.selectedUser,this.userIds);
|
||||
},
|
||||
chooseMsgType(value) {
|
||||
if("USER" == value) {
|
||||
this.userType = true;
|
||||
} else {
|
||||
this.userType = false;
|
||||
this.selectedUser = [];
|
||||
this.userIds = [];
|
||||
}
|
||||
},
|
||||
// 子modal回调
|
||||
choseUser:function(userList){
|
||||
this.selectedUser = [];
|
||||
this.userIds = [];
|
||||
for(var i=0;i<userList.length;i++){
|
||||
this.selectedUser.push(userList[i].realname);
|
||||
this.userIds += userList[i].id+","
|
||||
}
|
||||
},
|
||||
startTimeValidate(rule,value,callback){
|
||||
let endTime = this.form.getFieldValue("endTime")
|
||||
if(!value || !endTime){
|
||||
callback()
|
||||
}else if(moment(value).isBefore(endTime)){
|
||||
callback()
|
||||
}else{
|
||||
callback("开始时间需小于结束时间")
|
||||
}
|
||||
},
|
||||
endTimeValidate(rule,value,callback){
|
||||
let startTime = this.form.getFieldValue("startTime")
|
||||
if(!value || !startTime){
|
||||
callback()
|
||||
}else if(moment(startTime).isBefore(value)){
|
||||
callback()
|
||||
}else{
|
||||
callback("结束时间需大于开始时间")
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,162 @@
|
||||
<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">
|
||||
</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-item label="类型编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input v-decorator="[ 'code', validatorRules.code]" placeholder="请输入类型编码"></a-input>
|
||||
</a-form-item>
|
||||
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { httpAction } from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import JTreeSelect from '@/components/jeecg/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:{
|
||||
pid:{},
|
||||
name:{},
|
||||
code:{},
|
||||
},
|
||||
url: {
|
||||
add: "/sys/category/add",
|
||||
edit: "/sys/category/edit",
|
||||
},
|
||||
expandedRowKeys:[],
|
||||
pidField:"pid"
|
||||
|
||||
}
|
||||
},
|
||||
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)
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,181 @@
|
||||
<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="['userName', {}]" readOnly/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="代理人用户名">
|
||||
<j-select-user-by-dep placeholder="请输入代理人用户名" v-decorator="['agentUserName', validatorRules.agentUserName]" :trigger-change="true"></j-select-user-by-dep>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="代理开始时间">
|
||||
<j-date
|
||||
v-decorator="[ 'startTime', validatorRules.startTime]"
|
||||
:trigger-change="true"
|
||||
:showTime="true"
|
||||
date-format="YYYY-MM-DD HH:mm:ss"
|
||||
style="width:100%"
|
||||
placeholder="请选择开始时间" >
|
||||
</j-date>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="代理结束时间">
|
||||
<j-date
|
||||
v-decorator="[ 'endTime', validatorRules.endTime]"
|
||||
:trigger-change="true"
|
||||
:showTime="true"
|
||||
date-format="YYYY-MM-DD HH:mm:ss"
|
||||
style="width:100%"
|
||||
placeholder="请选择结束时间" >
|
||||
</j-date>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态">
|
||||
<a-radio-group class="fontiframe" name="radioGroup" v-decorator="[ 'status', {}]">
|
||||
<a-radio class="radioGroup" value="1">有效</a-radio>
|
||||
<a-radio class="radioGroup" value="0">无效</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
import JDate from '@/components/jeecg/JDate.vue';
|
||||
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
|
||||
|
||||
export default {
|
||||
name: "SysUserAgentModal",
|
||||
components: {
|
||||
JDate,
|
||||
JSelectUserByDep
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title:"操作",
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
username:"",
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules:{
|
||||
agentUserName:{rules: [{ required: true, message: '请输入代理人用户名!' }]},
|
||||
startTime:{rules: [{ required: true, message: '请输入代理开始时间!' }]},
|
||||
endTime:{rules: [{ required: true, message: '请输入代理结束时间!' }]},
|
||||
},
|
||||
url: {
|
||||
add: "/system/sysUserAgent/add",
|
||||
edit: "/system/sysUserAgent/edit",
|
||||
queryByUserName:"/system/sysUserAgent/queryByUserName",
|
||||
},
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
agentSettings(username){
|
||||
this.username = username;
|
||||
this.init();
|
||||
|
||||
},
|
||||
init () {
|
||||
var params = {userName:this.username};//查询条件
|
||||
getAction(this.url.queryByUserName,params).then((res)=>{
|
||||
if(res.success){
|
||||
console.log("获取流程节点信息",res);
|
||||
this.edit (res.result);
|
||||
}else{
|
||||
this.edit({userName:this.username,status:"0"});
|
||||
}
|
||||
})
|
||||
},
|
||||
edit (record) {
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model,'userName','agentUserName','status','startTime','endTime'))
|
||||
});
|
||||
},
|
||||
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);
|
||||
httpAction(httpurl,formData,method).then((res)=>{
|
||||
if(res.success){
|
||||
that.$message.success(res.message);
|
||||
//this.init();
|
||||
}else{
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
})
|
||||
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
554
ant-design-vue-jeecg/src/views/system/modules/UserModal.vue
Normal file
554
ant-design-vue-jeecg/src/views/system/modules/UserModal.vue
Normal file
@ -0,0 +1,554 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
:title="title"
|
||||
:maskClosable="true"
|
||||
:width="drawerWidth"
|
||||
placement="right"
|
||||
:closable="true"
|
||||
@close="handleCancel"
|
||||
:visible="visible"
|
||||
style="height: calc(100% - 55px);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="请输入用户账号" v-decorator="[ '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="请输入登陆密码" v-decorator="[ 'password', validatorRules.password]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" >
|
||||
<a-input type="password" @blur="handleConfirmBlur" placeholder="请重新输入登陆密码" v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<a-form-item label="用户名字" :labelCol="labelCol" :wrapperCol="wrapperCol" >
|
||||
<a-input placeholder="请输入用户名称" v-decorator="[ 'realname', validatorRules.realname]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled" >
|
||||
<a-select
|
||||
mode="multiple"
|
||||
style="width: 100%"
|
||||
placeholder="请选择用户角色"
|
||||
v-model="selectedRole">
|
||||
<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>
|
||||
|
||||
<!--部门分配-->
|
||||
<a-form-item label="部门分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">
|
||||
<a-input-search
|
||||
placeholder="点击右侧按钮选择部门"
|
||||
v-model="checkedDepartNameString"
|
||||
disabled
|
||||
@search="onSearch">
|
||||
<a-button slot="enterButton" icon="search">选择</a-button>
|
||||
</a-input-search>
|
||||
</a-form-item>
|
||||
<a-form-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-upload
|
||||
listType="picture-card"
|
||||
class="avatar-uploader"
|
||||
:showUploadList="false"
|
||||
:action="uploadAction"
|
||||
:data="{'isup':1}"
|
||||
:headers="headers"
|
||||
:beforeUpload="beforeUpload"
|
||||
@change="handleChange"
|
||||
>
|
||||
<img v-if="picUrl" :src="getAvatarView()" alt="头像" style="height:104px;max-width:300px"/>
|
||||
<div v-else>
|
||||
<a-icon :type="uploadLoading ? 'loading' : 'plus'" />
|
||||
<div class="ant-upload-text">上传</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-date-picker
|
||||
style="width: 100%"
|
||||
placeholder="请选择生日"
|
||||
v-decorator="['birthday', {initialValue:!model.birthday?null:moment(model.birthday,dateFormat)}]"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-select v-decorator="[ 'sex', {}]" placeholder="请选择性别">
|
||||
<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="请输入邮箱" v-decorator="[ 'email', validatorRules.email]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入手机号码" :disabled="isDisabledAuth('user:form:phone')" v-decorator="[ 'phone', validatorRules.phone]" />
|
||||
</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>
|
||||
<depart-window ref="departWindow" @ok="modalFormOk"></depart-window>
|
||||
|
||||
<div class="drawer-bootom-button" v-show="!disableSubmit">
|
||||
<a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
|
||||
<a-button style="margin-right: .8rem">取消</a-button>
|
||||
</a-popconfirm>
|
||||
<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 departWindow from './DepartWindow'
|
||||
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'
|
||||
|
||||
export default {
|
||||
name: "RoleModal",
|
||||
components: {
|
||||
departWindow,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
departDisabled: false, //是否是我的部门调用该页面
|
||||
roleDisabled: false, //是否是角色维护调用该页面
|
||||
modalWidth:800,
|
||||
drawerWidth:700,
|
||||
modaltoggleFlag:true,
|
||||
confirmDirty: false,
|
||||
selectedDepartKeys:[], //保存用户选择部门id
|
||||
checkedDepartKeys:[],
|
||||
checkedDepartNames:[], // 保存部门的名称 =>title
|
||||
checkedDepartNameString:"", // 保存部门的名称 =>title
|
||||
userId:"", //保存用户id
|
||||
disableSubmit:false,
|
||||
userDepartModel:{userId:'',departIdList:[]}, // 保存SysUserDepart的用户部门中间表数据需要的对象
|
||||
dateFormat:"YYYY-MM-DD",
|
||||
validatorRules:{
|
||||
username:{
|
||||
rules: [{
|
||||
required: true, message: '请输入用户账号!'
|
||||
},{
|
||||
validator: this.validateUsername,
|
||||
}]
|
||||
},
|
||||
password:{
|
||||
rules: [{
|
||||
required: true,
|
||||
pattern:/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
|
||||
message: '密码由8位数字、大小写字母和特殊符号组成!'
|
||||
}, {
|
||||
validator: this.validateToNextPassword,
|
||||
}],
|
||||
},
|
||||
confirmpassword:{
|
||||
rules: [{
|
||||
required: true, message: '请重新输入登陆密码!',
|
||||
}, {
|
||||
validator: this.compareToFirstPassword,
|
||||
}],
|
||||
},
|
||||
realname:{rules: [{ required: true, message: '请输入用户名称!' }]},
|
||||
phone:{rules: [{validator: this.validatePhone}]},
|
||||
email:{
|
||||
rules: [{
|
||||
validator: this.validateEmail
|
||||
}],
|
||||
},
|
||||
roles:{}
|
||||
// sex:{initialValue:((!this.model.sex)?"": (this.model.sex+""))}
|
||||
},
|
||||
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",
|
||||
imgerver: window._CONFIG['domianURL']+"/sys/common/view",
|
||||
userWithDepart: "/sys/user/userDepartList", // 引入为指定用户查看部门信息需要的url
|
||||
userId:"/sys/user/generateUserId", // 引入生成添加用户情况下的url
|
||||
syncUserByUserName:"/process/extActProcess/doSyncUserByUserName",//同步用户到工作流
|
||||
},
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const token = Vue.ls.get(ACCESS_TOKEN);
|
||||
this.headers = {"X-Access-Token":token}
|
||||
|
||||
},
|
||||
computed:{
|
||||
uploadAction:function () {
|
||||
return this.url.fileUpload;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isDisabledAuth(code){
|
||||
return disabledAuthFilter(code);
|
||||
},
|
||||
//窗口最大化切换
|
||||
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=""
|
||||
},
|
||||
add () {
|
||||
this.picUrl = "";
|
||||
this.refresh();
|
||||
this.edit({activitiSync:'1'});
|
||||
},
|
||||
edit (record) {
|
||||
this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
|
||||
let that = this;
|
||||
that.initialRoleList();
|
||||
that.checkedDepartNameString = "";
|
||||
that.form.resetFields();
|
||||
if(record.hasOwnProperty("id")){
|
||||
that.loadUserRoles(record.id);
|
||||
this.picUrl = "Has no pic url yet";
|
||||
}
|
||||
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','activitiSync'))
|
||||
});
|
||||
// 调用查询用户对应的部门信息的方法
|
||||
that.checkedDepartKeys = [];
|
||||
that.loadCheckedDeparts();
|
||||
},
|
||||
//
|
||||
loadCheckedDeparts(){
|
||||
let that = this;
|
||||
if(!that.userId){return}
|
||||
getAction(that.url.userWithDepart,{userId:that.userId}).then((res)=>{
|
||||
that.checkedDepartNames = [];
|
||||
if(res.success){
|
||||
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);
|
||||
}
|
||||
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 = [];
|
||||
},
|
||||
moment,
|
||||
handleSubmit () {
|
||||
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true;
|
||||
let avatar = that.model.avatar;
|
||||
if(!values.birthday){
|
||||
values.birthday = '';
|
||||
}else{
|
||||
values.birthday = values.birthday.format(this.dateFormat);
|
||||
}
|
||||
let formData = Object.assign(this.model, values);
|
||||
formData.avatar = avatar;
|
||||
formData.selectedroles = this.selectedRole.length>0?this.selectedRole.join(","):'';
|
||||
formData.selecteddeparts = this.userDepartModel.departIdList.length>0?this.userDepartModel.departIdList.join(","):'';
|
||||
|
||||
// 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');
|
||||
}else{
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.checkedDepartNames = [];
|
||||
that.userDepartModel.departIdList = {userId:'',departIdList:[]};
|
||||
|
||||
that.close();
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
validateToNextPassword (rule, value, callback) {
|
||||
const form = this.form;
|
||||
const confirmpassword=form.getFieldValue('confirmpassword');
|
||||
|
||||
if (value && confirmpassword && value !== confirmpassword) {
|
||||
callback('两次输入的密码不一样！');
|
||||
}
|
||||
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){
|
||||
if(!value){
|
||||
callback()
|
||||
}else{
|
||||
if(new RegExp(/^1[3|4|5|7|8][0-9]\d{8}$/).test(value)){
|
||||
var params = {
|
||||
tableName: 'sys_user',
|
||||
fieldName: 'phone',
|
||||
fieldVal: value,
|
||||
dataId: this.userId
|
||||
};
|
||||
duplicateCheck(params).then((res) => {
|
||||
if (res.success) {
|
||||
callback()
|
||||
} else {
|
||||
callback("手机号已存在!")
|
||||
}
|
||||
})
|
||||
}else{
|
||||
callback("请输入正确格式的手机号码!");
|
||||
}
|
||||
}
|
||||
},
|
||||
validateEmail(rule, value, callback){
|
||||
if(!value){
|
||||
callback()
|
||||
}else{
|
||||
if(new RegExp(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/).test(value)){
|
||||
var params = {
|
||||
tableName: 'sys_user',
|
||||
fieldName: 'email',
|
||||
fieldVal: value,
|
||||
dataId: this.userId
|
||||
};
|
||||
duplicateCheck(params).then((res) => {
|
||||
console.log(res)
|
||||
if (res.success) {
|
||||
callback()
|
||||
} else {
|
||||
callback("邮箱已存在!")
|
||||
}
|
||||
})
|
||||
}else{
|
||||
callback("请输入正确格式的邮箱!")
|
||||
}
|
||||
}
|
||||
},
|
||||
validateUsername(rule, value, callback){
|
||||
var params = {
|
||||
tableName: 'sys_user',
|
||||
fieldName: 'username',
|
||||
fieldVal: value,
|
||||
dataId: this.userId
|
||||
};
|
||||
duplicateCheck(params).then((res) => {
|
||||
if (res.success) {
|
||||
callback()
|
||||
} else {
|
||||
callback("用户名已存在!")
|
||||
}
|
||||
})
|
||||
},
|
||||
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);
|
||||
}
|
||||
}
|
||||
},
|
||||
getAvatarView(){
|
||||
return this.url.imgerver +"/"+ this.model.avatar;
|
||||
},
|
||||
// 搜索用户对应的部门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;
|
||||
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(",");
|
||||
}
|
||||
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;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</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>
|
||||
186
ant-design-vue-jeecg/src/views/system/modules/UserRoleModal.vue
Normal file
186
ant-design-vue-jeecg/src/views/system/modules/UserRoleModal.vue
Normal file
@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
:title="title"
|
||||
:maskClosable="true"
|
||||
width=650
|
||||
placement="right"
|
||||
:closable="true"
|
||||
@close="close"
|
||||
:visible="visible"
|
||||
style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
|
||||
|
||||
<a-form>
|
||||
<a-form-item label='所拥有的权限'>
|
||||
<a-tree
|
||||
checkable
|
||||
@check="onCheck"
|
||||
:checkedKeys="checkedKeys"
|
||||
:treeData="treeData"
|
||||
@expand="onExpand"
|
||||
@select="onTreeNodeSelect"
|
||||
: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-button style="margin-right: .8rem">取消</a-button>
|
||||
</a-popconfirm>
|
||||
<a-button @click="handleSubmit" 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,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onTreeNodeSelect(id){
|
||||
this.$refs.datarule.show(id[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(){
|
||||
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;
|
||||
that.close();
|
||||
}else {
|
||||
that.$message.error(res.message);
|
||||
that.loading = false;
|
||||
that.close();
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
visible () {
|
||||
if (this.visible) {
|
||||
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)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" 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>
|
||||
35
ant-design-vue-jeecg/src/views/system/modules/icon/Icon.less
Normal file
35
ant-design-vue-jeecg/src/views/system/modules/icon/Icon.less
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
123
ant-design-vue-jeecg/src/views/system/modules/icon/Icons.vue
Normal file
123
ant-design-vue-jeecg/src/views/system/modules/icon/Icons.vue
Normal file
@ -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>
|
||||
Reference in New Issue
Block a user