mirror of https://github.com/jeecgboot/jeecg-boot
zhangdaihao
5 years ago
424 changed files with 34576 additions and 20791 deletions
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 4.6 KiB |
@ -1,35 +0,0 @@
|
||||
|
||||
<template> |
||||
<component ref="compModel" :is="comp" :formData="formData" v-if="comp" @ok="callBackOk" @close="callBackClose"></component> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
name: 'DynamicComponent', |
||||
data () { |
||||
return { |
||||
compName: this.path |
||||
} |
||||
}, |
||||
computed: { |
||||
comp: function () { |
||||
return () => import(`@/views/${this.compName}.vue`) |
||||
} |
||||
}, |
||||
props: ['path','formData'], |
||||
methods: { |
||||
add () { |
||||
this.$refs.compModel.add(); |
||||
}, |
||||
callBackClose () { |
||||
this.$emit('close'); |
||||
}, |
||||
handleOk () { |
||||
this.$refs.compModel.handleOk(); |
||||
}, |
||||
callBackOk(){ |
||||
this.$emit('ok'); |
||||
this.close(); |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,72 +0,0 @@
|
||||
<template> |
||||
<a-modal |
||||
:title="title" |
||||
:width="width" |
||||
:visible="visible" |
||||
:confirmLoading="confirmLoading" |
||||
@ok="handleOk" |
||||
@cancel="handleCancel" |
||||
destroyOnClose |
||||
cancelText="关闭"> |
||||
<a-spin :spinning="confirmLoading"> |
||||
<dynamic-component ref="dynamiclink" :path="path" :formData="formData" @ok="callBackOk" @close="callBackClose"></dynamic-component> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import DynamicComponent from "./DynamicComponent"; |
||||
|
||||
export default { |
||||
name: "FormCommonModal", |
||||
props: ['path'], |
||||
components: { |
||||
DynamicComponent |
||||
}, |
||||
data () { |
||||
return { |
||||
title:"操作", |
||||
width:"80%", |
||||
visible: false, |
||||
confirmLoading: false, |
||||
formData:{}, |
||||
} |
||||
}, |
||||
created () { |
||||
}, |
||||
methods: { |
||||
add () { |
||||
this.formData =[]; |
||||
this.title = "新增"; |
||||
this.visible = true; |
||||
this.$refs.dynamiclink.add(); |
||||
}, |
||||
edit (record) { |
||||
var data = { |
||||
dataId:record.id, |
||||
} |
||||
this.formData = data; |
||||
this.visible = true; |
||||
}, |
||||
callBackClose () { |
||||
this.$emit('close'); |
||||
this.visible = false; |
||||
}, |
||||
handleOk () { |
||||
this.$refs.dynamiclink.handleOk(); |
||||
}, |
||||
callBackOk(){ |
||||
this.$emit('ok'); |
||||
this.callBackClose(); |
||||
}, |
||||
handleCancel () { |
||||
this.callBackClose() |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -1,120 +0,0 @@
|
||||
<template> |
||||
<a-modal |
||||
:title="title" |
||||
:width="280" |
||||
:visible="visible" |
||||
:confirmLoading="confirmLoading" |
||||
:bodyStyle ="bodyStyle" |
||||
:mask = "false" |
||||
destroyOnClose |
||||
:footer="null" |
||||
@cancel="handleCancel" |
||||
cancelText="关闭"> |
||||
|
||||
<a-spin :spinning="confirmLoading"> |
||||
<div style="height: 300px;overflow: hidden;overflow-y: auto;overflow-x: auto;"> |
||||
<template v-for="(item, key, index) in nodeInfos"> |
||||
<table class="gridtable"> |
||||
<tbody> |
||||
<tr> |
||||
<th width="90">任务名称</th> |
||||
<td width="150">{{ item.taskName}}</td> |
||||
</tr> |
||||
<tr> |
||||
<th width="90">执行人</th> |
||||
<td width="150">{{ item.taskAssigneeId}}</td> |
||||
</tr> |
||||
<tr> |
||||
<th width="90">开始时间</th> |
||||
<td width="150">{{ item.taskBeginTime }}</td> |
||||
</tr> |
||||
<tr> |
||||
<th width="90">结束时间</th> |
||||
<td width="150">{{ item.taskEndTime }}</td> |
||||
</tr> |
||||
<tr> |
||||
<th width="90">耗时</th> |
||||
<td width="150">{{ item.durationStr }}</td> |
||||
</tr> |
||||
<tr> |
||||
<th width="90">意见</th> |
||||
<td width="150">{{ item.remarks }}</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</template> |
||||
</div> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import { httpAction } from '@/api/manage' |
||||
import pick from 'lodash.pick' |
||||
|
||||
export default { |
||||
name: "ProcNodeInfoModel", |
||||
data () { |
||||
return { |
||||
title:"任务审批详情", |
||||
visible: false, |
||||
bodyStyle:{ |
||||
padding: "0", |
||||
}, |
||||
confirmLoading: false, |
||||
validatorRules:{ |
||||
}, |
||||
nodeInfos:[], |
||||
} |
||||
}, |
||||
created () { |
||||
}, |
||||
methods: { |
||||
showInfo(record,taskId) { |
||||
this.nodeInfos = []; |
||||
for (var item of record) { |
||||
if(item.taskId == taskId){ |
||||
this.nodeInfos.push(item); |
||||
} |
||||
} |
||||
this.visible = true; |
||||
}, |
||||
close() { |
||||
this.nodeInfos = []; |
||||
this.visible = false; |
||||
}, |
||||
handleCancel () { |
||||
this.nodeInfos = []; |
||||
this.visible = false; |
||||
}, |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
table.gridtable { |
||||
margin: 0 auto; |
||||
margin-top: 10px; |
||||
font-family: verdana,arial,sans-serif; |
||||
font-size:12px; |
||||
color:#333333; |
||||
border-width: 1px; |
||||
border-color: #ddd; |
||||
border-collapse: collapse; |
||||
} |
||||
table.gridtable th { |
||||
border-width: 1px; |
||||
padding: 8px; |
||||
border-style: solid; |
||||
border-color: #ddd; |
||||
background-color: #eee; |
||||
} |
||||
table.gridtable td { |
||||
border-width: 1px; |
||||
padding: 8px; |
||||
border-style: solid; |
||||
border-color: #ddd; |
||||
background-color: #ffffff; |
||||
} |
||||
</style> |
||||
@ -1,136 +0,0 @@
|
||||
<template> |
||||
<a-modal |
||||
:title="title" |
||||
:width="900" |
||||
:visible="visible" |
||||
:confirmLoading="confirmLoading" |
||||
@cancel="handleCancel" |
||||
:bodyStyle="bodyStyle" |
||||
style="top: 50px;" |
||||
destroyOnClose |
||||
:footer="null" |
||||
cancelText="关闭"> |
||||
|
||||
<a-spin :spinning="confirmLoading"> |
||||
<img :src="picUrl" alt="流程图" usemap="#planetmap"/> |
||||
<map name="planetmap"> |
||||
<template v-for="(item, key, index) in nodePositionInfo.positionList"> |
||||
<area shape="rect" :coords="item.coords" title="Venus" @mouseover="showNodeInfo(nodePositionInfo.hisTasks,item.id)"> |
||||
</template> |
||||
</map> |
||||
</a-spin> |
||||
<proc-node-info-model ref="nodeInfoModel"></proc-node-info-model> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getAction } from '@/api/manage' |
||||
import qs from 'qs'; |
||||
import ProcNodeInfoModel from "./ProcNodeInfoModel.vue"; |
||||
|
||||
export default { |
||||
components: {ProcNodeInfoModel}, |
||||
name: "ProcessInstPicModal", |
||||
data () { |
||||
return { |
||||
title:"操作", |
||||
visible: false, |
||||
nodePositionInfo:{}, |
||||
model: {}, |
||||
labelCol: { |
||||
xs: { span: 24 }, |
||||
sm: { span: 5 }, |
||||
}, |
||||
wrapperCol: { |
||||
xs: { span: 24 }, |
||||
sm: { span: 16 }, |
||||
}, |
||||
bodyStyle:{ |
||||
"overflow-y":"auto", |
||||
"overflow-x":"auto", |
||||
height:(window.innerHeight-280)+"px", |
||||
}, |
||||
confirmLoading: false, |
||||
picUrl:"", |
||||
url: { |
||||
getProcessInfo: "/process/extActFlowData/getProcessInfo", |
||||
getNodePositionInfo:"/act/task/getNodePositionInfo", |
||||
}, |
||||
} |
||||
}, |
||||
created () { |
||||
}, |
||||
methods: { |
||||
preview(flowCode,dataId){ |
||||
this.visible = true; |
||||
var params = { |
||||
flowCode:flowCode, |
||||
dataId:dataId |
||||
};//查询条件
|
||||
this.confirmLoading = true; |
||||
getAction(this.url.getProcessInfo,params).then((res)=>{ |
||||
if(res.success){ |
||||
var processInstanceId = res.result.processInstanceId; |
||||
this.picUrl = this.getResourceURL(processInstanceId); |
||||
this.getNodePositionInfoData(processInstanceId); |
||||
console.log("---流程图----",this.picUrl) |
||||
}else{ |
||||
this.$message.warning(res.message); |
||||
} |
||||
}).catch(e => { |
||||
console.error(e) |
||||
}).then(() => { |
||||
this.confirmLoading = false; |
||||
}) |
||||
|
||||
|
||||
}, |
||||
close () { |
||||
this.$emit('close'); |
||||
this.visible = false; |
||||
}, |
||||
handleCancel () { |
||||
this.close() |
||||
}, |
||||
// 获取静态资源访问地址
|
||||
getResourceURL(processInstanceId) { |
||||
var params = qs.stringify({ |
||||
//'token': Cookies.get('token'),
|
||||
'_t': Date.parse(new Date())/1000, |
||||
'processInstanceId': processInstanceId |
||||
}) |
||||
return `${window._CONFIG['domianURL']}/act/process/processPic?${params}` |
||||
}, |
||||
// 获取静态资源访问地址
|
||||
getResourceURL(processInstanceId) { |
||||
var params = qs.stringify({ |
||||
//'token': Cookies.get('token'),
|
||||
'_t': Date.parse(new Date())/1000, |
||||
'processInstanceId': processInstanceId |
||||
}) |
||||
return `${window._CONFIG['domianURL']}/act/process/processPic?${params}` |
||||
}, |
||||
|
||||
// 查询坐标信息数据
|
||||
getNodePositionInfoData(processInstanceId) { |
||||
var params = {processInstanceId:processInstanceId};//查询条件
|
||||
getAction(this.url.getNodePositionInfo,params).then(res => { |
||||
if (res.success) { |
||||
this.nodePositionInfo = res.result |
||||
} |
||||
}).catch(e => { |
||||
console.error(e) |
||||
}).then(() => { |
||||
}) |
||||
}, |
||||
showNodeInfo(data,taskId){ |
||||
this.$refs.nodeInfoModel.close(); |
||||
this.$refs.nodeInfoModel.showInfo(data,taskId); |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -1,56 +0,0 @@
|
||||
# JDictSelectTag 组件用法 |
||||
---- |
||||
- 从字典表获取数据,dictCode格式说明: 字典code |
||||
```html |
||||
<j-dict-select-tag v-model="queryParam.sex" placeholder="请输入用户性别" |
||||
dictCode="sex"/> |
||||
``` |
||||
|
||||
v-decorator用法： |
||||
```html |
||||
<j-dict-select-tag v-decorator="['sex', {}]" :triggerChange="true" placeholder="请输入用户性别" |
||||
dictCode="sex"/> |
||||
``` |
||||
|
||||
- 从数据库表获取字典数据，dictCode格式说明: 表名,文本字段,取值字段 |
||||
```html |
||||
<j-dict-select-tag v-model="queryParam.username" placeholder="请选择用户名称" |
||||
dictCode="sys_user,realname,id"/> |
||||
``` |
||||
|
||||
|
||||
|
||||
# JDictSelectUtil.js 列表字典函数用法 |
||||
---- |
||||
|
||||
- 第一步: 引入依赖方法 |
||||
```html |
||||
import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil' |
||||
``` |
||||
|
||||
- 第二步: 在created()初始化方法执行字典配置方法 |
||||
```html |
||||
//初始化字典配置 |
||||
this.initDictConfig(); |
||||
``` |
||||
|
||||
- 第三步: 实现initDictConfig方法，加载列表所需要的字典(列表上有多个字典项，就执行多次initDictOptions方法) |
||||
|
||||
```html |
||||
initDictConfig() { |
||||
//初始化字典 - 性别 |
||||
initDictOptions('sex').then((res) => { |
||||
if (res.success) { |
||||
this.sexDictOptions = res.result; |
||||
} |
||||
}); |
||||
}, |
||||
``` |
||||
|
||||
- 第四步: 实现字段的customRender方法 |
||||
```html |
||||
customRender: (text, record, index) => { |
||||
//字典值替换通用方法 |
||||
return filterDictText(this.sexDictOptions, text); |
||||
} |
||||
``` |
||||
@ -1,309 +0,0 @@
|
||||
<template> |
||||
|
||||
<a-modal |
||||
:width="modalWidth" |
||||
:visible="visible" |
||||
:title="title" |
||||
@ok="handleSubmit" |
||||
@cancel="close" |
||||
cancelText="关闭" |
||||
style="margin-top: -70px" |
||||
wrapClassName="ant-modal-cust-warp" |
||||
> |
||||
<a-row :gutter="10" style="background-color: #ececec; padding: 10px; margin: -10px"> |
||||
<a-col :md="6" :sm="24"> |
||||
<a-card :bordered="false"> |
||||
<!--组织机构--> |
||||
<a-directory-tree |
||||
selectable |
||||
:selectedKeys="selectedKeys" |
||||
:checkStrictly="true" |
||||
@select="this.onSelect" |
||||
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}" |
||||
:treeData="departTree" |
||||
/> |
||||
</a-card> |
||||
</a-col> |
||||
<a-col :md="18" :sm="24"> |
||||
<a-card :bordered="false"> |
||||
用户账号: |
||||
<a-input-search |
||||
:style="{width:'150px',marginBottom:'15px'}" |
||||
placeholder="请输入用户账号" |
||||
v-model="queryParam.username" |
||||
@search="onSearch" |
||||
></a-input-search> |
||||
<a-button @click="searchReset(1)" style="margin-left: 20px" icon="redo">重置</a-button> |
||||
<!--用户列表--> |
||||
<a-table |
||||
ref="table" |
||||
:scroll="scrollTrigger" |
||||
size="middle" |
||||
rowKey="id" |
||||
:columns="columns" |
||||
:dataSource="dataSource" |
||||
:pagination="ipagination" |
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
||||
@change="handleTableChange"> |
||||
</a-table> |
||||
</a-card> |
||||
</a-col> |
||||
</a-row> |
||||
</a-modal> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
import { filterObj } from '@/utils/util' |
||||
import { queryDepartTreeList, getUserList, queryUserByDepId, queryUserRoleMap } from '@/api/api' |
||||
|
||||
export default { |
||||
name: 'JSearchUserByDep', |
||||
components: {}, |
||||
data() { |
||||
return { |
||||
queryParam: { |
||||
username:"", |
||||
}, |
||||
columns: [ |
||||
{ |
||||
title: '用户账号', |
||||
align: 'center', |
||||
dataIndex: 'username' |
||||
}, |
||||
{ |
||||
title: '真实姓名', |
||||
align: 'center', |
||||
dataIndex: 'realname' |
||||
}, |
||||
{ |
||||
title: '角色名称', |
||||
align: 'center', |
||||
dataIndex: 'roleName' |
||||
}, |
||||
{ |
||||
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' |
||||
} |
||||
], |
||||
scrollTrigger: {}, |
||||
dataSource: [], |
||||
selectedKeys: [], |
||||
userNameArr: [], |
||||
departName: '', |
||||
userRolesMap: {}, |
||||
title: '', |
||||
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' |
||||
}, |
||||
selectedRowKeys: [], |
||||
selectedRows: [], |
||||
modalWidth: 1250, |
||||
departTree: [], |
||||
visible: false, |
||||
form: this.$form.createForm(this) |
||||
} |
||||
}, |
||||
created() { |
||||
// 该方法触发屏幕自适应
|
||||
this.resetScreenSize(); |
||||
this.queryUserRoleMap(); |
||||
}, |
||||
methods: { |
||||
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.assignRoleName(this.dataSource); |
||||
this.ipagination.total = res.result.total; |
||||
} |
||||
}) |
||||
}, |
||||
queryUserRoleMap(){ |
||||
queryUserRoleMap().then((res) => { |
||||
if (res.success) { |
||||
this.userRolesMap = res.result; |
||||
this.loadData(); |
||||
} |
||||
}) |
||||
}, |
||||
// 触发屏幕自适应
|
||||
resetScreenSize() { |
||||
let screenWidth = document.body.clientWidth; |
||||
if (screenWidth < 500) { |
||||
this.scrollTrigger = { x: 800 }; |
||||
} else { |
||||
this.scrollTrigger = {}; |
||||
} |
||||
}, |
||||
showModal() { |
||||
this.visible = true; |
||||
this.assignRoleName(this.dataSource); |
||||
this.queryDepartTree(); |
||||
this.form.resetFields(); |
||||
}, |
||||
getQueryParams() { |
||||
let 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() { |
||||
let str = 'id,'; |
||||
for (let a = 0; a < this.columns.length; a++) { |
||||
str += ',' + this.columns[a].dataIndex; |
||||
} |
||||
return str; |
||||
}, |
||||
searchReset(num) { |
||||
let that = this; |
||||
if(num !== 0){ |
||||
that.queryParam = {}; |
||||
that.loadData(1); |
||||
} |
||||
that.selectedRowKeys = []; |
||||
that.userNameArr = []; |
||||
that.selectedKeys = []; |
||||
}, |
||||
close() { |
||||
this.searchReset(0); |
||||
this.visible = false; |
||||
}, |
||||
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(); |
||||
}, |
||||
handleSubmit() { |
||||
let that = this; |
||||
for (let i = 0, len = this.selectedRowKeys.length; i < len; i++) { |
||||
this.getUserNames(this.selectedRowKeys[i]); |
||||
} |
||||
that.$emit('ok', that.userNameArr.join(',')); |
||||
that.close(); |
||||
}, |
||||
// 遍历匹配,获取用户真实姓名
|
||||
getUserNames(rowId) { |
||||
let dataSource = this.dataSource; |
||||
for (let i = 0, len = dataSource.length; i < len; i++) { |
||||
if (rowId === dataSource[i].id) { |
||||
this.userNameArr.push(dataSource[i].realname); |
||||
} |
||||
} |
||||
}, |
||||
// 点击树节点,筛选出对应的用户
|
||||
onSelect(selectedKeys) { |
||||
if (selectedKeys[0] != null) { |
||||
this.queryUserByDepId(selectedKeys); // 调用方法根据选选择的id查询用户信息
|
||||
if (this.selectedKeys[0] !== selectedKeys[0]) { |
||||
this.selectedKeys = [selectedKeys[0]]; |
||||
} |
||||
} |
||||
}, |
||||
onSelectChange(selectedRowKeys, selectionRows) { |
||||
this.selectedRowKeys = selectedRowKeys; |
||||
this.selectionRows = selectionRows; |
||||
}, |
||||
onSearch() { |
||||
this.loadData(1); |
||||
}, |
||||
// 根据选择的id来查询用户信息
|
||||
queryUserByDepId(selectedKeys) { |
||||
queryUserByDepId({ id: selectedKeys.toString() }).then((res) => { |
||||
if (res.success) { |
||||
this.dataSource = res.result; |
||||
this.ipagination.total = res.result.length; |
||||
this.assignRoleName(this.dataSource); |
||||
} |
||||
}) |
||||
}, |
||||
// 传入用户id,找到匹配的角色名称
|
||||
queryUserRole(userId) { |
||||
let map = this.userRolesMap; |
||||
let roleName = []; |
||||
for (var key in map) { |
||||
if (userId === key) { |
||||
roleName.push(map[key]); |
||||
} |
||||
} |
||||
return roleName.join(','); |
||||
}, |
||||
queryDepartTree() { |
||||
queryDepartTreeList().then((res) => { |
||||
if (res.success) { |
||||
this.departTree = res.result; |
||||
} |
||||
}) |
||||
}, |
||||
// 为角色名称赋值
|
||||
assignRoleName(data) { |
||||
let userId = ''; |
||||
let role = ''; |
||||
for (let i = 0, length = data.length; i < length; i++) { |
||||
userId = this.dataSource[i].id; |
||||
role = this.queryUserRole(userId); |
||||
this.dataSource[i].roleName = role; |
||||
} |
||||
}, |
||||
modalFormOk() { |
||||
this.loadData(); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.ant-table-tbody .ant-table-row td { |
||||
padding-top: 10px; |
||||
padding-bottom: 10px; |
||||
} |
||||
|
||||
#components-layout-demo-custom-trigger .trigger { |
||||
font-size: 18px; |
||||
line-height: 64px; |
||||
padding: 0 24px; |
||||
cursor: pointer; |
||||
transition: color .3s; |
||||
} |
||||
</style> |
||||
@ -1,276 +0,0 @@
|
||||
<template> |
||||
<div> |
||||
<a-modal |
||||
centered |
||||
:title="title" |
||||
:width="1000" |
||||
:visible="visible" |
||||
@ok="handleOk" |
||||
@cancel="handleCancel" |
||||
cancelText="关闭"> |
||||
<a-row :gutter="18"> |
||||
<a-col :span="16"> |
||||
<a-card title="选择人员" :bordered="true"> |
||||
<!-- 查询区域 --> |
||||
<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.name"></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-card> |
||||
</a-col> |
||||
<a-col :span="8"> |
||||
<a-card title="用户选择" :bordered="true"> |
||||
<!-- table区域-begin --> |
||||
<div> |
||||
<a-table |
||||
size="small" |
||||
bordered |
||||
rowKey="id" |
||||
:columns="columns2" |
||||
:dataSource="dataSource2" |
||||
:loading="loading" |
||||
:scroll="{ y: 240 }" |
||||
> |
||||
<span slot="action" slot-scope="text, record"> |
||||
<a-button type="primary" size="small" @click="handleDelete(record)" icon="delete">删除</a-button> |
||||
</span> |
||||
</a-table> |
||||
</div> |
||||
<!-- table区域-end --> |
||||
</a-card> |
||||
</a-col> |
||||
</a-row> |
||||
</a-modal> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { filterObj } from '@/utils/util' |
||||
import { getAction } from '@/api/manage' |
||||
|
||||
export default { |
||||
name: "SelectDemoModal", |
||||
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: 'name' |
||||
}, |
||||
{ |
||||
title: '年龄', |
||||
align:"center", |
||||
width:100, |
||||
dataIndex: 'age' |
||||
}, |
||||
{ |
||||
title: '出生日期', |
||||
align:"center", |
||||
width:100, |
||||
dataIndex: 'birthday' |
||||
} |
||||
], |
||||
columns2: [ |
||||
|
||||
{ |
||||
title: '用户账号', |
||||
align:"center", |
||||
width:100, |
||||
dataIndex: 'name' |
||||
}, |
||||
{ |
||||
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: "/test/jeecgDemo/list", |
||||
}, |
||||
|
||||
} |
||||
}, |
||||
created() { |
||||
this.loadData(); |
||||
}, |
||||
methods: { |
||||
searchQuery(){ |
||||
this.loadData(1); |
||||
}, |
||||
searchReset(){ |
||||
this.queryParam={}; |
||||
this.loadData(1); |
||||
}, |
||||
handleCancel() { |
||||
this.visible = false; |
||||
}, |
||||
handleOk() { |
||||
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> |
||||
@ -1,87 +0,0 @@
|
||||
<template> |
||||
<div> |
||||
<a-modal |
||||
:title="title" |
||||
:width="800" |
||||
:visible="visible" |
||||
:confirmLoading="confirmLoading" |
||||
@ok="handleSubmit" |
||||
@cancel="handleCancel"> |
||||
<div> |
||||
<a-form-item label="用户名：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }"> |
||||
<a-input-search placeholder="点击右侧按钮选择用户" disabled @search="onSearch" v-model="userNames"> |
||||
<a-button slot="enterButton" icon="search">选择</a-button> |
||||
</a-input-search> |
||||
</a-form-item> |
||||
</div> |
||||
</a-modal> |
||||
|
||||
<!-- 用户查询列表 --> |
||||
<select-user-list-modal ref="selectUserListModal" @ok="getUserCallBack"></select-user-list-modal> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {getUserList} from '@/api/api' |
||||
import SelectUserListModal from './modal/SelectUserListModal' |
||||
|
||||
export default { |
||||
name: "SelectUserModal", |
||||
components: { |
||||
SelectUserListModal, |
||||
}, |
||||
props: ['taskId'], |
||||
data() { |
||||
return { |
||||
title: "操作", |
||||
visible: false, |
||||
selectUserListVisible: false, |
||||
model: {}, |
||||
confirmLoading: false, |
||||
userNames: '', |
||||
userKeys: '', |
||||
} |
||||
}, |
||||
created() { |
||||
}, |
||||
methods: { |
||||
open() { |
||||
this.userNames = '' |
||||
this.userKeys = '' |
||||
this.visible = true; |
||||
}, |
||||
close() { |
||||
this.$emit('close'); |
||||
this.visible = false; |
||||
}, |
||||
handleCancel() { |
||||
this.close() |
||||
}, |
||||
onSearch() { |
||||
this.$refs.selectUserListModal.open(); |
||||
}, |
||||
getUserCallBack(selectionRows) { |
||||
console.log(selectionRows) |
||||
let names = '' |
||||
let keys = '' |
||||
for (let row of selectionRows) { |
||||
names = row.realname + "," + names |
||||
keys = row.username + "," + keys |
||||
} |
||||
this.userNames = names |
||||
this.userKeys = keys |
||||
|
||||
console.log('--userkeys--' + this.userKeys) |
||||
}, |
||||
handleSubmit() { |
||||
console.log("taskId: "+ this.taskId) |
||||
this.$emit('ok', this.userKeys,this.taskId); |
||||
this.close() |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
@ -1,97 +0,0 @@
|
||||
<template> |
||||
<a-modal |
||||
:title="title" |
||||
:width="600" |
||||
:visible="visible" |
||||
@cancel="handleCancel" |
||||
:okButtonProps="okButtonProps" |
||||
cancelText="关闭"> |
||||
|
||||
<div class="message"> |
||||
<div class="title">{{ record.titile }}</div> |
||||
<div class="createBy">发布人：{{ record.sender }}</div> |
||||
<div class="sendTime">发布时间：{{ record.sendTime }}</div> |
||||
<a-divider /> |
||||
<p v-html="record.msgContent"></p> |
||||
</div> |
||||
|
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "SysAnnouncementModal", |
||||
components: { |
||||
}, |
||||
data () { |
||||
return { |
||||
title:"通知消息", |
||||
record: {}, |
||||
labelCol: { |
||||
xs: { span: 24 }, |
||||
sm: { span: 5 }, |
||||
}, |
||||
wrapperCol: { |
||||
xs: { span: 24 }, |
||||
sm: { span: 16 }, |
||||
}, |
||||
visible: false, |
||||
okButtonProps:{ |
||||
style: { |
||||
display:"none" |
||||
}, |
||||
} |
||||
} |
||||
}, |
||||
created () { |
||||
}, |
||||
methods: { |
||||
detail (record) { |
||||
this.visible = true; |
||||
this.record = record; |
||||
}, |
||||
handleCancel () { |
||||
this.visible = false; |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.message{ |
||||
width: 90%; |
||||
margin-left: 5%; |
||||
margin-right: 5%; |
||||
min-height: 200px; |
||||
} |
||||
.title{ |
||||
width: 100%; |
||||
font-size: 16px; |
||||
text-align: center; |
||||
font-weight: bolder; |
||||
margin-bottom: 10px; |
||||
} |
||||
.createBy { |
||||
width: 50%; |
||||
text-align: left; |
||||
padding-left: 5%; |
||||
float: left; |
||||
} |
||||
.sendTime{ |
||||
width: 50%; |
||||
text-align: right; |
||||
padding-right: 5%; |
||||
float: right; |
||||
} |
||||
.message .ant-divider .ant-divider-horizontal .ant-divider-with-text-right{ |
||||
font-size: 16px; |
||||
font-weight: lighter!important; |
||||
} |
||||
.message p{ |
||||
font-size: 16px; |
||||
} |
||||
.message .ant-divider-horizontal{ |
||||
margin-top: 40px; |
||||
margin-bottom: 8px; |
||||
} |
||||
</style> |
||||
@ -1,147 +0,0 @@
|
||||
import { UserLayout, TabLayout, RouteView, BlankLayout, PageView } from '@/components/layouts' |
||||
|
||||
/** |
||||
* 走菜单，走权限控制 |
||||
* @type {[null,null]} |
||||
*/ |
||||
export const asyncRouterMap = [ |
||||
|
||||
{ |
||||
path: '/', |
||||
name: 'dashboard', |
||||
component: TabLayout, |
||||
meta: { title: '首页' }, |
||||
redirect: '/dashboard/workplace', |
||||
children: [ |
||||
// // account
|
||||
// {
|
||||
// path: '/account',
|
||||
// component: RouteView,
|
||||
// name: 'account',
|
||||
// meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
|
||||
// children: [
|
||||
// {
|
||||
// path: '/account/center',
|
||||
// name: 'center',
|
||||
// component: () => import('@/views/account/center/Index'),
|
||||
// meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
|
||||
// },
|
||||
// {
|
||||
// path: '/account/settings',
|
||||
// name: 'settings',
|
||||
// component: () => import('@/views/account/settings/Index'),
|
||||
// meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ] },
|
||||
// redirect: '/account/settings/base',
|
||||
// alwaysShow: true,
|
||||
// children: [
|
||||
// {
|
||||
// path: '/account/settings/base',
|
||||
// name: 'BaseSettings',
|
||||
// component: () => import('@/views/account/settings/BaseSetting'),
|
||||
// meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
|
||||
// },
|
||||
// {
|
||||
// path: '/account/settings/security',
|
||||
// name: 'SecuritySettings',
|
||||
// component: () => import('@/views/account/settings/Security'),
|
||||
// meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
|
||||
// },
|
||||
// {
|
||||
// path: '/account/settings/custom',
|
||||
// name: 'CustomSettings',
|
||||
// component: () => import('@/views/account/settings/Custom'),
|
||||
// meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
|
||||
// },
|
||||
// {
|
||||
// path: '/account/settings/binding',
|
||||
// name: 'BindingSettings',
|
||||
// component: () => import('@/views/account/settings/Binding'),
|
||||
// meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ] }
|
||||
// },
|
||||
// {
|
||||
// path: '/account/settings/notification',
|
||||
// name: 'NotificationSettings',
|
||||
// component: () => import('@/views/account/settings/Notification'),
|
||||
// meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ] }
|
||||
// },
|
||||
// ]
|
||||
// },
|
||||
// ]
|
||||
// }
|
||||
] |
||||
}, |
||||
{ |
||||
path: '*', redirect: '/404', hidden: true |
||||
} |
||||
] |
||||
|
||||
/** |
||||
* 基础路由 |
||||
* @type { *[] } |
||||
*/ |
||||
export const constantRouterMap = [ |
||||
{ |
||||
path: '/user', |
||||
component: UserLayout, |
||||
redirect: '/user/login', |
||||
hidden: true, |
||||
children: [ |
||||
{ |
||||
path: 'login', |
||||
name: 'login', |
||||
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login') |
||||
}, |
||||
{ |
||||
path: 'register', |
||||
name: 'register', |
||||
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register') |
||||
}, |
||||
{ |
||||
path: 'register-result', |
||||
name: 'registerResult', |
||||
component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult') |
||||
}, |
||||
] |
||||
}, |
||||
|
||||
// {
|
||||
// path: '/',
|
||||
// name: 'index',
|
||||
// component: TabLayout,
|
||||
// meta: {title: '首页'},
|
||||
// redirect: '/dashboard/workplace',
|
||||
// children: [
|
||||
// {
|
||||
// path: '/online',
|
||||
// name: 'online',
|
||||
// redirect: '/online',
|
||||
// component: RouteView,
|
||||
// meta: {title: '在线开发', icon: 'dashboard', permission: ['dashboard']},
|
||||
// children: [
|
||||
// {
|
||||
// path: '/online/auto/:code',
|
||||
// name: 'report',
|
||||
// component: () => import('@/views/modules/online/cgreport/OnlCgreportAutoList')
|
||||
// },
|
||||
// ]
|
||||
// },
|
||||
// ]
|
||||
// },
|
||||
|
||||
{ |
||||
path: '/test', |
||||
component: BlankLayout, |
||||
redirect: '/test/home', |
||||
children: [ |
||||
{ |
||||
path: 'home', |
||||
name: 'TestHome', |
||||
component: () => import('@/views/Home') |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
path: '/404', |
||||
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404') |
||||
}, |
||||
] |
||||
@ -1,250 +0,0 @@
|
||||
<template> |
||||
<a-card :bordered="false"> |
||||
|
||||
<!-- 查询区域 --> |
||||
<div class="table-page-search-wrapper"> |
||||
<a-form layout="inline"> |
||||
<a-row :gutter="24"> |
||||
|
||||
<a-col :md="6" :sm="8" class="1"> |
||||
<a-form-item label="请假人"> |
||||
<a-input placeholder="请输入请假人" v-model="queryParam.name"></a-input> |
||||
</a-form-item> |
||||
</a-col> |
||||
<a-col :md="6" :sm="8" class="1"> |
||||
<a-form-item label="请假天数"> |
||||
<a-input placeholder="请输入请假天数" v-model="queryParam.days"></a-input> |
||||
</a-form-item> |
||||
</a-col> |
||||
<template v-if="toggleSearchStatus"> |
||||
<a-col :md="6" :sm="8"> |
||||
<a-form-item label="开始时间"> |
||||
<a-input placeholder="请输入开始时间" v-model="queryParam.beginDate"></a-input> |
||||
</a-form-item> |
||||
</a-col> |
||||
<a-col :md="6" :sm="8"> |
||||
<a-form-item label="请假结束时间"> |
||||
<a-input placeholder="请输入请假结束时间" v-model="queryParam.endDate"></a-input> |
||||
</a-form-item> |
||||
</a-col> |
||||
<a-col :md="6" :sm="8"> |
||||
<a-form-item label="请假原因"> |
||||
<a-input placeholder="请输入请假原因" v-model="queryParam.reason"></a-input> |
||||
</a-form-item> |
||||
</a-col> |
||||
</template> |
||||
<a-col :md="6" :sm="8" > |
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button> |
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button> |
||||
<a @click="handleToggleSearch" style="margin-left: 8px"> |
||||
{{ toggleSearchStatus ? '收起' : '展开' }} |
||||
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
||||
</a> |
||||
</span> |
||||
</a-col> |
||||
|
||||
</a-row> |
||||
</a-form> |
||||
</div> |
||||
|
||||
<!-- 操作按钮区域 --> |
||||
<div class="table-operator"> |
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button> |
||||
<a-button type="primary" icon="download" @click="handleExportXls">导出</a-button> |
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :action="importExcelUrl" @change="handleImportExcel"> |
||||
<a-button type="primary" icon="import">导入</a-button> |
||||
</a-upload> |
||||
<a-dropdown v-if="selectedRowKeys.length > 0"> |
||||
<a-menu slot="overlay"> |
||||
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item> |
||||
</a-menu> |
||||
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button> |
||||
</a-dropdown> |
||||
</div> |
||||
|
||||
<!-- table区域-begin --> |
||||
<div> |
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;"> |
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项 |
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a> |
||||
</div> |
||||
|
||||
<a-table |
||||
ref="table" |
||||
size="middle" |
||||
bordered |
||||
rowKey="id" |
||||
:columns="columns" |
||||
:dataSource="dataSource" |
||||
:pagination="ipagination" |
||||
:loading="loading" |
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
||||
@change="handleTableChange"> |
||||
|
||||
<span slot="action" slot-scope="text, record"> |
||||
<template v-if="record.bpmStatus === '1'"> |
||||
<a @click="handleEdit(record)">编辑</a> |
||||
<a-divider type="vertical"/> |
||||
<a @click="startProcess(record)">提交流程</a> |
||||
<a-divider type="vertical"/> |
||||
</template> |
||||
<a-dropdown> |
||||
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a> |
||||
<a-menu slot="overlay"> |
||||
<a-menu-item v-if="record.bpmStatus === '1'"> |
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)"> |
||||
<a>删除</a> |
||||
</a-popconfirm> |
||||
</a-menu-item> |
||||
<a-menu-item v-else @click="handlePreviewPic(record)">审批进度</a-menu-item> |
||||
</a-menu> |
||||
</a-dropdown> |
||||
</span> |
||||
|
||||
</a-table> |
||||
</div> |
||||
<!-- table区域-end --> |
||||
|
||||
<!-- 表单区域 --> |
||||
<form-common-modal ref="modalForm" :path="path" @ok="modalFormOk"></form-common-modal> |
||||
<!-- 审批流程 --> |
||||
<process-inst-pic-modal ref="processInstPicModal"></process-inst-pic-modal> |
||||
|
||||
</a-card> |
||||
</template> |
||||
|
||||
<script> |
||||
import { postAction } from '@/api/manage' |
||||
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||
import JDate from '@/components/jeecg/JDate.vue' |
||||
import FormCommonModal from "@/components/bpm/FormCommonModal"; |
||||
import ProcessInstPicModal from "@/components/bpm/ProcessInstPicModal"; |
||||
|
||||
export default { |
||||
name: "JoaDemoList", |
||||
mixins:[JeecgListMixin], |
||||
components: { |
||||
FormCommonModal, |
||||
ProcessInstPicModal, |
||||
JDate |
||||
}, |
||||
data () { |
||||
return { |
||||
description: '流程测试管理页面', |
||||
// 表头
|
||||
columns: [ |
||||
{ |
||||
title: '#', |
||||
dataIndex: '', |
||||
key:'rowIndex', |
||||
width:60, |
||||
align:"center", |
||||
customRender:function (t,r,index) { |
||||
return parseInt(index)+1; |
||||
} |
||||
}, |
||||
{ |
||||
title: '请假人', |
||||
align:"center", |
||||
dataIndex: 'name' |
||||
}, |
||||
{ |
||||
title: '请假天数', |
||||
align:"center", |
||||
dataIndex: 'days' |
||||
}, |
||||
{ |
||||
title: '开始时间', |
||||
align:"center", |
||||
dataIndex: 'beginDate' |
||||
}, |
||||
{ |
||||
title: '结束时间', |
||||
align:"center", |
||||
dataIndex: 'endDate' |
||||
}, |
||||
{ |
||||
title: '请假原因', |
||||
align:"center", |
||||
dataIndex: 'reason' |
||||
}, |
||||
{ |
||||
title: '流程状态', |
||||
align:"center", |
||||
dataIndex: 'bpmStatus', |
||||
customRender:function (text) { |
||||
if(text=='1'){ |
||||
return "待提交"; |
||||
}else if(text=='2'){ |
||||
return "处理中"; |
||||
}else if(text=='3'){ |
||||
return "已完成"; |
||||
}else if(text=='4'){ |
||||
return "已作废"; |
||||
}else{ |
||||
return text; |
||||
} |
||||
} |
||||
}, |
||||
{ |
||||
title: '操作', |
||||
dataIndex: 'action', |
||||
align:"center", |
||||
scopedSlots: { customRender: 'action' }, |
||||
} |
||||
], |
||||
flowCode:"dev_joa_demo_001", |
||||
path:"jeecg/modules/JoaDemoForm", |
||||
url: { |
||||
list: "/test/joaDemo/list", |
||||
delete: "/test/joaDemo/delete", |
||||
deleteBatch: "/test/joaDemo/deleteBatch", |
||||
exportXlsUrl: "test/joaDemo/exportXls", |
||||
importExcelUrl: "test/joaDemo/importExcel", |
||||
startProcess: "/process/extActProcess/startMutilProcess", |
||||
}, |
||||
} |
||||
}, |
||||
computed: { |
||||
importExcelUrl: function(){ |
||||
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`; |
||||
} |
||||
}, |
||||
methods: { |
||||
startProcess: function(record){ |
||||
var that = this; |
||||
this.$confirm({ |
||||
title:"提示", |
||||
content:"确认提交流程吗?", |
||||
onOk: function(){ |
||||
var param = { |
||||
flowCode:that.flowCode, |
||||
id:record.id, |
||||
formUrl:that.path, |
||||
formUrlMobile:that.path |
||||
} |
||||
postAction(that.url.startProcess,param).then((res)=>{ |
||||
if(res.success){ |
||||
that.$message.success(res.message); |
||||
that.loadData(); |
||||
that.onClearSelected(); |
||||
}else{ |
||||
that.$message.warning(res.message); |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
handlePreviewPic: function(record){ |
||||
var flowCode = this.flowCode; |
||||
var dataId = record.id; |
||||
this.$refs.processInstPicModal.preview(flowCode,dataId); |
||||
this.$refs.processInstPicModal.title="流程图"; |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
<style scoped> |
||||
@import '~@assets/less/common.less' |
||||
</style> |
||||
@ -1,160 +0,0 @@
|
||||
<template> |
||||
|
||||
<a-form :form="form"> |
||||
<a-form-item |
||||
:labelCol="labelCol" |
||||
:wrapperCol="wrapperCol" |
||||
label="请假人"> |
||||
<a-input placeholder="请输入请假人" v-decorator="['name', {}]" /> |
||||
</a-form-item> |
||||
<a-form-item |
||||
:labelCol="labelCol" |
||||
:wrapperCol="wrapperCol" |
||||
label="请假天数"> |
||||
<a-input-number v-decorator="[ 'days', {}]" /> |
||||
</a-form-item> |
||||
<a-form-item |
||||
:labelCol="labelCol" |
||||
:wrapperCol="wrapperCol" |
||||
label="开始时间"> |
||||
<a-date-picker showTime format='YYYY-MM-DD' v-decorator="[ 'beginDate', {}]" /> |
||||
</a-form-item> |
||||
<a-form-item |
||||
:labelCol="labelCol" |
||||
:wrapperCol="wrapperCol" |
||||
label="请假结束时间"> |
||||
<a-date-picker showTime format='YYYY-MM-DD' v-decorator="[ 'endDate', {}]" /> |
||||
</a-form-item> |
||||
<a-form-item |
||||
:labelCol="labelCol" |
||||
:wrapperCol="wrapperCol" |
||||
label="请假原因"> |
||||
<a-input placeholder="请输入请假原因" v-decorator="['reason', {}]" /> |
||||
</a-form-item> |
||||
</a-form> |
||||
</template> |
||||
|
||||
<script> |
||||
import { httpAction,getAction } from '@/api/manage' |
||||
import moment from "moment" |
||||
import pick from 'lodash.pick' |
||||
import JDate from '@/components/jeecg/JDate.vue' |
||||
|
||||
export default { |
||||
name: "JoaDemoModal", |
||||
components: { JDate }, |
||||
props: ['formData'], |
||||
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:{ |
||||
name:{}, |
||||
days:{}, |
||||
beginDate:{}, |
||||
endDate:{}, |
||||
reason:{}, |
||||
bpmStatus:{}, |
||||
}, |
||||
url: { |
||||
queryById: "/test/joaDemo/queryById", |
||||
add: "/test/joaDemo/add", |
||||
edit: "/test/joaDemo/edit", |
||||
}, |
||||
} |
||||
}, |
||||
created () { |
||||
console.log("form start"); |
||||
console.log("formdata",this.formData); |
||||
if(this.formData.dataId){ |
||||
var params = {id:this.formData.dataId};//查询条件
|
||||
getAction(this.url.queryById,params).then((res)=>{ |
||||
if(res.success){ |
||||
console.log("获取表单数据",res); |
||||
this.edit (res.result); |
||||
} |
||||
}) |
||||
} |
||||
}, |
||||
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,'name','days','reason','bpmStatus')) |
||||
//时间格式化
|
||||
this.form.setFieldsValue({beginDate:this.model.beginDate?moment(this.model.beginDate):null}) |
||||
this.form.setFieldsValue({endDate:this.model.endDate?moment(this.model.endDate):null}) |
||||
}); |
||||
|
||||
}, |
||||
close () { |
||||
this.$emit('close'); |
||||
this.visible = false; |
||||
}, |
||||
handleOk () { |
||||
const that = this; |
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => { |
||||
if (!err) { |
||||
that.confirmLoading = true; |
||||
let httpurl = ''; |
||||
let method = ''; |
||||
if(!this.model.id){ |
||||
httpurl+=this.url.add; |
||||
method = 'post'; |
||||
}else{ |
||||
httpurl+=this.url.edit; |
||||
method = 'put'; |
||||
} |
||||
let formData = Object.assign(this.model, values); |
||||
//时间格式化
|
||||
formData.beginDate = formData.beginDate?formData.beginDate.format('YYYY-MM-DD HH:mm:ss'):null; |
||||
formData.endDate = formData.endDate?formData.endDate.format('YYYY-MM-DD HH:mm:ss'):null; |
||||
|
||||
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> |
||||
@ -1,7 +1,7 @@
|
||||
Ant Design Jeecg Vue |
||||
==== |
||||
|
||||
当前最新版本： 2.0.1（发布日期：20190603） |
||||
当前最新版本： 2.0.2（发布日期：20190708） |
||||
|
||||
Overview |
||||
---- |
||||
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
@ -0,0 +1,181 @@
|
||||
# JDictSelectTag 组件用法 |
||||
---- |
||||
- 从字典表获取数据,dictCode格式说明: 字典code |
||||
```html |
||||
<j-dict-select-tag v-model="queryParam.sex" placeholder="请输入用户性别" |
||||
dictCode="sex"/> |
||||
``` |
||||
|
||||
v-decorator用法： |
||||
```html |
||||
<j-dict-select-tag v-decorator="['sex', {}]" :triggerChange="true" placeholder="请输入用户性别" |
||||
dictCode="sex"/> |
||||
``` |
||||
|
||||
- 从数据库表获取字典数据，dictCode格式说明: 表名,文本字段,取值字段 |
||||
```html |
||||
<j-dict-select-tag v-model="queryParam.username" placeholder="请选择用户名称" |
||||
dictCode="sys_user,realname,id"/> |
||||
``` |
||||
|
||||
|
||||
|
||||
# JDictSelectUtil.js 列表字典函数用法 |
||||
---- |
||||
|
||||
- 第一步: 引入依赖方法 |
||||
```html |
||||
import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil' |
||||
``` |
||||
|
||||
- 第二步: 在created()初始化方法执行字典配置方法 |
||||
```html |
||||
//初始化字典配置 |
||||
this.initDictConfig(); |
||||
``` |
||||
|
||||
- 第三步: 实现initDictConfig方法，加载列表所需要的字典(列表上有多个字典项，就执行多次initDictOptions方法) |
||||
|
||||
```html |
||||
initDictConfig() { |
||||
//初始化字典 - 性别 |
||||
initDictOptions('sex').then((res) => { |
||||
if (res.success) { |
||||
this.sexDictOptions = res.result; |
||||
} |
||||
}); |
||||
}, |
||||
``` |
||||
|
||||
- 第四步: 实现字段的customRender方法 |
||||
```html |
||||
customRender: (text, record, index) => { |
||||
//字典值替换通用方法 |
||||
return filterDictText(this.sexDictOptions, text); |
||||
} |
||||
``` |
||||
|
||||
|
||||
# JMultiSelectTag 多选组件 |
||||
下拉/checkbox |
||||
|
||||
## 参数配置 |
||||
| 参数 | 类型 | 必填 |说明| |
||||
|--------------|---------|----|---------| |
||||
| placeholder |string | | placeholder | |
||||
| disabled |Boolean | | 是否禁用 | |
||||
| type |string | | 多选类型 select/checkbox 默认是select | |
||||
| dictCode |string | | 数据字典编码或者表名,显示字段名,存储字段名拼接而成的字符串,如果提供了options参数 则此参数可不填| |
||||
| options |Array | | 多选项,如果dictCode参数未提供,可以设置此参数加载多选项 | |
||||
|
||||
使用示例 |
||||
---- |
||||
```vue |
||||
<template> |
||||
<a-form> |
||||
<a-form-item label="下拉多选" style="width: 300px"> |
||||
<j-multi-select-tag |
||||
v-model="selectValue" |
||||
:options="dictOptions" |
||||
placeholder="请做出你的选择"> |
||||
</j-multi-select-tag> |
||||
{{ selectValue }} |
||||
</a-form-item> |
||||
|
||||
<a-form-item label="checkbox"> |
||||
<j-multi-select-tag |
||||
v-model="checkboxValue" |
||||
:options="dictOptions" |
||||
type="checkbox"> |
||||
</j-multi-select-tag> |
||||
{{ checkboxValue }} |
||||
</a-form-item> |
||||
</a-form > |
||||
</template> |
||||
|
||||
<script> |
||||
import JMultiSelectTag from '@/components/dict/JMultiSelectTag' |
||||
export default { |
||||
components: {JMultiSelectTag}, |
||||
data() { |
||||
return { |
||||
selectValue:"", |
||||
checkboxValue:"", |
||||
dictOptions:[{ |
||||
label:"选项一", |
||||
value:"1" |
||||
},{ |
||||
label:"选项二", |
||||
value:"2" |
||||
},{ |
||||
label:"选项三", |
||||
value:"3" |
||||
}] |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
``` |
||||
|
||||
# JSearchSelectTag 字典表的搜索组件 |
||||
下拉搜索组件,支持异步加载,异步加载用于大数据量的字典表 |
||||
|
||||
## 参数配置 |
||||
| 参数 | 类型 | 必填 |说明| |
||||
|--------------|---------|----|---------| |
||||
| placeholder |string | | placeholder | |
||||
| disabled |Boolean | | 是否禁用 | |
||||
| dict |string | | 表名,显示字段名,存储字段名拼接而成的字符串,如果提供了dictOptions参数 则此参数可不填| |
||||
| dictOptions |Array | | 多选项,如果dict参数未提供,可以设置此参数加载多选项 | |
||||
| async |Boolean | | 是否支持异步加载,设置成true,则通过输入的内容加载远程数据,否则在本地过滤数据,默认false| |
||||
|
||||
使用示例 |
||||
---- |
||||
```vue |
||||
<template> |
||||
<a-form> |
||||
<a-form-item label="下拉搜索" style="width: 300px"> |
||||
<j-search-select-tag |
||||
placeholder="请做出你的选择" |
||||
v-model="selectValue" |
||||
:dictOptions="dictOptions"> |
||||
</j-search-select-tag> |
||||
{{ selectValue }} |
||||
</a-form-item> |
||||
|
||||
<a-form-item label="异步加载" style="width: 300px"> |
||||
<j-search-select-tag |
||||
placeholder="请做出你的选择" |
||||
v-model="asyncSelectValue" |
||||
dict="sys_depart,depart_name,id" |
||||
:async="true"> |
||||
</j-search-select-tag> |
||||
{{ asyncSelectValue }} |
||||
</a-form-item> |
||||
</a-form > |
||||
</template> |
||||
|
||||
<script> |
||||
import JSearchSelectTag from '@/components/dict/JSearchSelectTag' |
||||
export default { |
||||
components: {JSearchSelectTag}, |
||||
data() { |
||||
return { |
||||
selectValue:"", |
||||
asyncSelectValue:"", |
||||
dictOptions:[{ |
||||
text:"选项一", |
||||
value:"1" |
||||
},{ |
||||
text:"选项二", |
||||
value:"2" |
||||
},{ |
||||
text:"选项三", |
||||
value:"3" |
||||
}] |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
``` |
||||
|
||||
@ -0,0 +1,48 @@
|
||||
<template> |
||||
<div v-if="disabled" class="jeecg-form-container-disabled"> |
||||
<fieldset disabled> |
||||
<slot></slot> |
||||
</fieldset> |
||||
</div> |
||||
<div v-else> |
||||
<slot></slot> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
/** |
||||
* 使用方法 |
||||
* 在form下直接写这个组件就行了， |
||||
*<a-form layout="inline" :form="form" > |
||||
* <j-form-container :disabled="true"> |
||||
* <!-- 表单内容省略..... --> |
||||
* </j-form-container> |
||||
*</a-form> |
||||
*/ |
||||
export default { |
||||
name: 'JFormContainer', |
||||
props:{ |
||||
disabled:{ |
||||
type:Boolean, |
||||
default:false, |
||||
required:false |
||||
} |
||||
}, |
||||
mounted(){ |
||||
console.log("我是表单禁用专用组件,但是我并不支持表单中iframe的内容禁用") |
||||
} |
||||
} |
||||
</script> |
||||
<style> |
||||
.jeecg-form-container-disabled{ |
||||
cursor: not-allowed; |
||||
} |
||||
.jeecg-form-container-disabled fieldset[disabled] { |
||||
-ms-pointer-events: none; |
||||
pointer-events: none; |
||||
} |
||||
.jeecg-form-container-disabled .ant-select{ |
||||
-ms-pointer-events: none; |
||||
pointer-events: none; |
||||
} |
||||
</style> |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue