Skip to content

T
template_vue
Commit eb7b92c8 authored by 高宇's avatar 高宇
Browse files
Options

删除菜单

parent 65a444a0
Hide whitespace changes
Inline Side-by-side
Showing with 1109 additions and 0 deletions
src/views/instance/Template.vue 0 → 100644
View file @ eb7b92c8
<!--
* @Description: 模板渲染页面
* @version:
* @Author: jooey wong
* @Date: 2020-06-30 09:27:17
* @LastEditors: jooey wong
* @LastEditTime: 2020-07-15 09:49:55
-->
<template>
<div ref="instance-template" class="instance-template">
<!-- 项目审批单 蓝色页头 （预留） -->
<!--<div class="instance-template-blue-header">
<div class="instance-template-blue-header-title">项目启动审批单</div>
</div>-->
<!-- 项目审批单 标题容器 （预留） -->
<div class="instance-template-title-container">
<div class="instance-template-title-container-info">
<!--<div>流程实例编号：89757</div>-->
<div>发起时间：{{ new Date().toDateString() }}</div>
</div>
<div class="instance-template-title-container-title">
{{ getTitle }}
</div>
</div>
<!-- 主容器 -->
<div class="instance-template-main-container">
<div class="instance-template-main-container-iframe">
<div class="instance-common-title">
基础信息
</div>
<iframe
v-show="iframeVisible"
id="templateIframe"
ref="templateIframe"
frameborder="0"
name="templateIframe"
scrolling="auto"
:src="templateUrl"
:style="iframeStyle"
/>
<div
v-if="flowType !== 1"
class="history-records"
>
<div class="instance-common-title">
审批历史记录
</div>
<el-table :data="approvalRecordTableData" style="width: 100%">
<el-table-column
label="序号"
type="index"
width="50">
</el-table-column>
<el-table-column prop="actName" label="操作步骤" />
<el-table-column prop="updateBy" label="操作人" />
<el-table-column prop="transition" label="操作" />
<el-table-column prop="remarks" label="操作意见" />
<el-table-column prop="updateDate" label="时间" />
</el-table>
</div>
</div>
<div class="instance-template-main-container-flow">
<!-- <el-steps direction="vertical" :active="1" align-center>-->
<!-- <el-step title="申请" />-->
<!-- <el-step title="（网络办、档案室、财务部、办公室）审批" />-->
<!-- <el-step title="部门领导审批" />-->
<!-- <el-step title="政治部/本部门（备档）" />-->
<!-- <el-step title="结束" />-->
<!-- </el-steps>-->
</div>
</div>
<!-- 审批意见 -->
<div v-if="isApprovalNode" class="instance-template-approval-comments">
<div class="instance-common-title">
审批意见
</div>
<el-input
v-model="approvalComments"
type="textarea"
rows="10"
placeholder="请输入内容"
maxlength="30"
show-word-limit
/>
</div>
<div class="commit-btns">
<!-- 提交节点 -->
<el-button
v-show="!instanceStatus || instanceStatus === '2'"
size="small"
type="primary"
@click.prevent.stop="eventDistribution('onSubmissionProcess', '提交')"
>提交</el-button>
<!-- 个人申请 被驳回时 可以撤销 -->
<el-button
v-if="!instanceStatus || instanceStatus === '2'"
size="small"
type="info"
@click="revokeProcess"
>撤销</el-button>
<!-- 非审批节点 只能完成 -->
<el-button
v-if="flowType === 2 && !isApprovalNode && instanceStatus !== '2'"
type="primary"
size="small"
@click="eventDistribution('approvalProcessEvent', '完成')"
>完成</el-button>
<!-- 审核节点 进行通过和驳回 -->
<el-button
v-if="isApprovalNode"
type="primary"
size="small"
@click.prevent.stop="eventDistribution('approvalProcessEvent', '通过')"
>通过</el-button>
<el-button
v-if="isApprovalNode"
type="danger"
size="small"
@click.prevent.stop="approvalProcessEvent('驳回')"
>驳回</el-button>
<el-button
v-if="isApprovalNode"
type="danger"
size="small"
@click.prevent.stop="approverRejectProcess"
>拒绝</el-button>
<!-- <el-button-->
<!-- size="small"-->
<!-- @click.prevent.stop="endorsementDialogVisible = true"-->
<!-- >加签</el-button>-->
<!-- 加签节点 -->
<el-button v-if="isCourtSign" type="primary" size="small">加签</el-button>
</div>
<el-dialog
title="选择审批人"
:visible.sync="approverDialogVisible"
@closed="resetDialog"
>
<el-form :model="approverForm">
<el-form-item
v-for="(act, i) in dialogFormNotCourtSignList"
:key="`approverNotFormItem${i}`"
:label="act.actName"
label-width="100px"
>
<el-select
v-model="approverForm[act.actId]"
:placeholder="`请选择${act.actName}`"
>
<el-option
v-for="(item, index) in act.resultUserDTOList"
:key="`ad-option-${index}`"
:label="item.userName"
:value="item.userId"
/>
</el-select>
</el-form-item>
<el-form-item
v-for="(actCourt, i) in dialogFormCourtSignList"
:key="`approverFormItem${i}`"
:label="actCourt.actName"
label-width="100px"
>
<span
v-for="(user, index) in actCourt.resultUserDTOList"
:key="`username-face-${index}`"
>
{{ user.userName }}
</span>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="approverDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="approverSubmit">确 定</el-button>
</div>
</el-dialog>
<template-reject-dialog
:visible.sync="rejectDialogFormVisible"
@onConfirm="approverReject"
/>
<template-endorsement-dialog :visible.sync="endorsementDialogVisible" />
</div>
</template>
<script>
import {
queryWfTaskMess,
getFirstTemplate,
onProcessSubmit,
completeTask,
getCommitBtns,
getRolesByInsId,
revokeProcess,
rejectProcess
} from '@/api/businessManage/template'
import { toDoTaskByTaskId, doneTaskByTaskId } from '@/api/workflow.js'
import { treeselect } from '@/api/system/dept.js'
import TemplateRejectDialog from '@/views/instance/components/TemplateRejectDialog'
import TemplateEndorsementDialog from '@/views/instance/components/TemplateEndorsementDialog'
// const INSTANCE_STATUS_OBJECT = {
// 0: '已提交',
// 1: '审核中',
// 2: '已驳回',
// 3: '待填写',
// 4: '已通过',
// 5: '已撤销'
// }
export default {
components: {
// 拒绝 dialog
TemplateRejectDialog,
// 加签 dialog
TemplateEndorsementDialog
},
data() {
return {
// 列表页path路径
instanceListPath: '/instance/InstanceList',
iframeApis: { treeselect: treeselect },
// 控制iframe是否显示
iframeVisible: true,
// 模板地址
// templateUrl: `${process.env.BASE_URL}template/unionConsolationFund.html`,
// templateUrl: `${process.env.BASE_URL}template/handover.html`,
templateUrl: '',
// iframe 样式
iframeStyle: {
width: '100%',
height: '400px'
},
// iframe contentWindow对象
iframeContentWin: null,
// 审批意见
approvalComments: '',
// 审批历史记录表格数据
approvalRecordTableData: [],
// 流程实例的Id
instanceId: this.$route.query.instanceId,
// processId
processId: this.$route.query.processId,
// taskId
taskId: this.$route.query.taskId || '',
// templateId
templateId: this.$route.query.templateId,
// processName
processName: this.$route.query.processName || '',
// userTaskId
userTaskId: this.$route.query.taskId,
// 判断是否为加签节点
isCourtSign: false,
// 流程说明 (number) 1:提交进入 2:代办进入 3:已办进入
flowType: Number(this.$route.query.flowType),
// 流程实例状态
instanceStatus: this.$route.query.instanceStatus || null,
// 是否是审批节点
isApprovalNode: false,
// 判断是否为第一节点
isFirstFlow: false,
// 提交节点 提交按钮表单项
// 表单权限Json
powerJson: {},
// 提交消息 通过 驳回 提交
commitMessage: '',
// 审批人dialog visible
approverDialogVisible: false,
// 审批人表单
approverForm: {},
// 审批人表单数量
approverFormItemList: [],
// dialog submit function name
approverDialogFuncName: '',
// 指定审批人选项列表
approverDialogOptions: [],
// 按钮列表
buttonList: [],
// 该节点是否需要指定审批人
isApproval: false,
// 控制拒绝备注是否显示
rejectDialogFormVisible: false,
// 加签dialog显隐
endorsementDialogVisible: false
}
},
computed: {
getTitle() {
let temp = ''
switch (this.flowType) {
case 1:
temp = '申请'
break
case 2:
temp = '审批'
break
default:
temp = '管理'
}
return this.processName + temp + '信息'
},
dialogFormNotCourtSignList() {
return this.approverFormItemList.filter(function(item) {
return item.iscountersign === '0'
})
},
dialogFormCourtSignList() {
return this.approverFormItemList.filter(function(item) {
return item.iscountersign === '1'
})
}
},
watch: {},
created() {},
mounted() {
const that = this
const loading = that.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
window.onmessage = that.handleMessage
that.iframeContentWin = this.$refs.templateIframe.contentWindow
that.iframeContentWin.onload = function() {
// 查询审批时间
that.queryWfTaskMess()
// 方法控制底部按钮的显隐
that.controlButtonVisible(that.flowType)
// 区分由何处进入模板 调用不同接口
if (that.flowType === 1) {
// 获取第一节点模板
that.getFirstTemplate()
} else if (that.flowType === 2) {
// 获取模板详情 准备回显
that.getTemplateDetial()
} else if (that.flowType === 3) {
// 准备获取已办事项模板详情
that.getDoneTemplateDetial()
}
loading.close()
}
},
beforeCreate() {},
beforeMount() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {},
activated() {},
methods: {
/**
* @author: jooey wong
* @description: 提交节点 流程
* @return:
*/
onSubmissionProcess() {
// 向模板发送提交请求
this.iframeContentWin.postMessage(
{
cmd: 'onSubmit'
},
'*'
)
this.commitMessage = '提交'
},
/**
* @author: Comrade Wong
* @describe: 审批节点 点击通过或者驳回按钮
**/
approvalProcessEvent(message) {
this.iframeContentWin.postMessage(
{
cmd: 'onPassOrRejected'
},
'*'
)
this.commitMessage = message
},
/**
* @author: jooey wong
* @description: 处理iframe返回的数据
* @return:
*/
handleMessage(event) {
// 根据上面制定的结构来解析iframe内部发回来的数据
const that = this
const data = event.data
const switchCmd = {
iframeSubmit: () => {
// 业务逻辑
if (data.params.success) {
this.$message.success('验证成功！')
} else {
this.$message.error('验证失败！')
}
},
iframeGetData: () => {
data.params.api.forEach(item => {
that.getDataByApi(item)
})
},
// 获取iframe高度
getClientHeight() {
that.iframeStyle.height = data.params.clientHeight + 'px'
},
// 提交节点 提交按钮的功能
onSubmissionProcess() {
// 模拟表单验证成功
that.submitProcess(data)
},
// 审批节点 通过 或者 驳回 流程实例
completeTask() {
that.handleCompleteTask(data.params.data, that.commitMessage)
}
}
if (data.cmd) {
switchCmd[data.cmd]()
}
},
/**
* @description: 根据qpi信息查询接口
*/
getDataByApi(item) {
const that = this
// 动态加载
this.iframeApis[item]({})
.then(res => {
const tempJson = { name: item, data: res }
that.iframeContentWin.postMessage(
{
cmd: 'backData',
params: tempJson
},
'*'
)
})
.catch(err => {
})
},
/**
* @author: jooey wong
* @description: 查询审批记录
*/
queryWfTaskMess() {
// TODO: wxy 未调通 由于不知道返回参数字段 所以未调通
if (this.instanceId && this.instanceId !== '') {
queryWfTaskMess(this.instanceId).then(res => {
if (res.code === 200) {
this.approvalRecordTableData = res.data
}
})
}
},
/**
* @author: jooey wong
* @description: 获取第一节点的模板
*/
getFirstTemplate() {
const processId = this.processId
const that = this
getFirstTemplate(processId).then(res => {
this.isApproval = !(!res.data.ifApprove || res.data.ifApprove === '0')
this.templateUrl = res.data.pcHtml
that.powerJson = {}
res.data.resultFieldAndPermissionDTOList.forEach(function(item) {
that.powerJson[item.specialTag] = item
})
that.powerJson['flowType'] = that.flowType
// 将powerJson 传给iframe
that.iframeContentWin.postMessage(
{
cmd: 'powerJson',
params: that.powerJson
},
'*'
)
})
},
/**
* @author: liuhuaizhi
* @description: 获取代办模板详情
*/
getTemplateDetial() {
const taskId = this.taskId
const processId = this.processId
const that = this
toDoTaskByTaskId({ taskId: taskId, processId: processId }).then(res => {
this.isApproval = !(!res.data.ifApprove || res.data.ifApprove === '0')
this.templateUrl = res.data.pcHtml
if (res.data.resultFieldAndPermissionDTOList.length > 0) {
this.processId = res.data.resultFieldAndPermissionDTOList[0].processId
}
that.powerJson = {}
res.data.resultFieldAndPermissionDTOList.forEach(function(item) {
that.powerJson[item.specialTag] = item
})
that.powerJson['flowType'] = that.flowType
// 将powerJson 传给iframe
that.iframeContentWin.postMessage(
{
cmd: 'powerJson',
params: that.powerJson
},
'*'
)
})
},
/**
* @author: liuhuaizhi
* @description: 获取已办模板详情
*/
getDoneTemplateDetial() {
const taskId = this.taskId
const that = this
doneTaskByTaskId({ taskId: taskId }).then(res => {
this.templateUrl = res.data.pcHtml
that.powerJson = {}
res.data.resultDoneFieldAndPermissionDTOList.forEach(function(item) {
that.powerJson[item.specialTag] = item
})
that.powerJson['flowType'] = that.flowType
// 将powerJson 传给iframe
that.iframeContentWin.postMessage(
{
cmd: 'powerJson',
params: that.powerJson
},
'*'
)
})
},
/**
* @author Comrade Wong
* @describe 审批流程处理 通过 或者 驳回的事件
* @param {Object} data 从iframe获取到的表单数据
* @param {String} commitMessage 通过 或者 驳回
**/
handleCompleteTask(data, commitMessage) {
this.$confirm(`此操作将${commitMessage}该流程实例, 是否继续?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const takeUserMesJson = []
if (!data) {
return
}
const queryProcessCommitDtoList = JSON.stringify(data)
// form表单的数据
Object.keys(this.approverForm).forEach(item => {
takeUserMesJson.push({
actId: item,
takeUsers: this.approverForm[item]
})
})
// 获取会签节点的数据
this.dialogFormCourtSignList.forEach(item => {
item.resultUserDTOList.forEach(user => {
takeUserMesJson.push({
actId: item.actId,
takeUsers: user.userId
})
})
})
// 如果为空传空
const takeUserMes =
JSON.stringify(takeUserMesJson) === '[]'
? ''
: JSON.stringify(takeUserMesJson)
completeTask(
this.processId,
this.instanceId,
this.userTaskId,
queryProcessCommitDtoList,
commitMessage,
takeUserMes
).then(res => {
this.$message.success(`${commitMessage}成功！`)
this.$router.push({
path: '/businessManage/todolist'
})
})
})
},
/**
* @author WangXinYu
* @describe 提交节点 提交事件
* @param {Object} data 从iframe传来的参数
**/
submitProcess(data) {
this.$confirm('此操作将提交该流程实例, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const queryProcessCommitDtoList = JSON.stringify(data.params.data)
// 处理审批人数据
const takeUserMesJson = []
Object.keys(this.approverForm).forEach(item => {
takeUserMesJson.push({
actId: item,
takeUsers: this.approverForm[item]
})
})
// 获取会签节点的数据
this.dialogFormCourtSignList.forEach(item => {
item.resultUserDTOList.forEach(user => {
takeUserMesJson.push({
actId: item.actId,
takeUsers: user.userId
})
})
})
const takeUserMes = JSON.stringify(takeUserMesJson)
if (data.params.success) {
onProcessSubmit(
this.processId,
queryProcessCommitDtoList,
'提交',
takeUserMes
).then(res => {
if (res.code === 200) {
this.$message.success('提交成功！')
this.$router.go(-1)
this.approverDialogVisible = false
}
})
}
})
},
/**
* @author WangXinYu
* @describe 控制 流程 中 通过 和 驳回 的 按钮显示
**/
getProcessBtnsState(taskId, processId) {
// 待办情况下
if (taskId === '' || !taskId) {
return
}
getCommitBtns(taskId, processId).then(res => {
if (res.data) {
// '1' 是 审批节点 ‘0’不是审批节点
const obj = {
0: false,
1: true
}
this.isApprovalNode = obj[res.data]
}
})
},
/**
* @author WangXinYu
* @describe 控制流程模板显示
**/
controlButtonVisible(flowType) {
if (flowType === 1) {
this.isFirstFlow = true
} else if (flowType === 2) {
this.getProcessBtnsState(this.taskId, this.processId)
}
},
/**
* @author WangXinYu
* @describe 撤销按钮功能事件
**/
revokeProcess() {
this.$confirm('此操作将撤销该流程实例, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 如果是第一节点 撤销就是返回上一页
if (this.flowType === 1) {
this.$router.go(-1)
} else {
// 其他情况下 如果不是审批节点
// 已驳回状态
if (this.instanceStatus && Number(this.instanceStatus) === 2) {
revokeProcess(
this.instanceId,
this.taskId,
this.approvalComments
).then(res => {
console.warn(res)
this.$message.success('撤销流程成功！')
this.$router.go(-1)
})
}
}
})
},
/**
* @author WangXinYu
* @describe dialog 打开dialog操作
**/
openApproverDialog(funcName, commitMessage) {
this.approverDialogFuncName = funcName || ''
this.commitMessage = commitMessage
getRolesByInsId(this.processId, this.taskId).then(res => {
// 清空之前的数据
this.approverFormItemList = []
// 处理返回的数据
const data = res.data
Object.keys(data).forEach(actId => {
this.$set(this.approverForm, actId, '')
this.approverFormItemList.push(
Object.assign(data[actId], { actId: actId })
)
})
this.approverDialogVisible = true
})
},
/**
* @author: Comrade Wong
* @describe: 指定审批人提交功能
**/
approverSubmit() {
this[this.approverDialogFuncName](this.commitMessage)
},
/**
* @author: Comrade Wong
* @describe: 重置dialog中数据
**/
resetDialog() {
this.approverDialogFuncName = ''
this.approverForm = {
approver: ''
}
},
/**
* @author WangXinYu
* @describe 根据ifApprove 判断该节点是否需要指定审批人，进而分发事件
* @param {String} funcName 选择完了之后执行的函数名
* @param {String} commitMessage 提交信息
**/
eventDistribution(funcName, commitMessage) {
// if (commitMessage === '提交' || this.isApproval) {
// this.openApproverDialog(funcName, commitMessage)
// } else {
// this[funcName](commitMessage)
// }
this[funcName](commitMessage)
},
/**
* @author WangXinYu
* @describe dialog 审批人拒绝事件
* @param {Object} rejectForm 拒绝表单对象
**/
approverReject(rejectForm) {
// TODO: 处理审批人拒绝事件
alert(rejectForm)
// 关闭模态框
this.rejectDialogFormVisible = false
},
/**
* @author WangXinYu
* @describe 审批人拒绝
**/
approverRejectProcess() {
this.$confirm('此操作将拒绝该流程实例, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const instanceId = this.instanceId
const taskId = this.taskId
const remarks = this.approvalComments
rejectProcess(instanceId, taskId, remarks).then(res => {
if (res.code === 200) {
this.$message.success('拒绝流程成功！')
this.$router.go(-1)
}
})
})
}
}
}
</script>
<style lang="scss" scoped>
// @import url(); 引入公共css类
$header-height: 40px;
$left-width: 100%;
$color-main-text: #303133;
$color-meta-text: #909399;
.instance-template {
width: 100%;
/*height: calc(100vh - 90px);*/
padding-bottom: 12px;
> div {
margin-bottom: 12px;
padding: 0 12px;
}
.commit-btns {
text-align: center;
margin: 12px;
}
&-blue-header {
background-color: #276fc4;
height: $header-height;
cursor: default;
&-title {
text-align: left;
line-height: $header-height;
padding: 0 12px;
color: #ffffff;
font-weight: 500;
box-sizing: border-box;
}
}
&-title-container {
position: relative;
height: $header-height;
padding: 0 12px;
&-info {
font-size: 12px;
position: absolute;
top: 50%;
transform: translateY(-50%);
color: $color-meta-text;
}
&-title {
line-height: $header-height;
text-align: center;
font-weight: 800;
color: $color-main-text;
}
}
&-main-container {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
&-iframe {
width: $left-width;
margin-bottom: 12px;
.history-records {
width: 100%;
}
}
&-flow {
width: calc(100% - #{$left-width});
height: 400px;
}
}
&-approval-comments {
width: $left-width;
}
.instance-common-title {
line-height: 40px;
background-color: #f2f6fc;
padding: 0 12px;
}
}
</style>
src/views/instance/components/TemplateEndorsementDialog.vue 0 → 100644
View file @ eb7b92c8
<template>
<el-dialog
class="TemplateEndorsementDialog"
title="加签"
:visible.sync="endorsementDialogFormVisible"
:before-close="beforeClose"
@closed="resetForm"
>
<div class="main-dialog-content">
<el-form
ref="dialogSearchForm"
size="small"
:inline="true"
:model="dialogSearchForm"
label-width="80px"
>
<el-form-item label="部门">
<el-input v-model.trim="dialogSearchForm.department" :maxlength="30" />
</el-form-item>
<el-form-item label="名称">
<el-input v-model.trim="dialogSearchForm.department" :maxlength="30" />
</el-form-item>
<el-button type="primary" size="small">查 询</el-button>
</el-form>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
height="200px"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column prop="department" label="部门" show-overflow-tooltip />
<el-table-column :show-overflow-tooltip="true" prop="name" label="姓名" width="120" />
</el-table>
<el-pagination
class="my-right-pagination"
background
layout="prev, pager, next"
:total="1000"
/>
<el-form ref="form" :model="submitForm" label-width="80px">
<el-form-item label="加签类型">
<el-radio v-model="submitForm.type" label="1">前加签</el-radio>
<el-radio v-model="submitForm.type" label="2">后加签</el-radio>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary">确 定</el-button>
<el-button @click="closeDialog">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'TemplateEndorsementDialog',
components: {},
props: {
// 控制dialog是否能显示
visible: {
type: Boolean,
require: true
}
},
data() {
return {
// 控制显隐
endorsementDialogFormVisible: false,
// 表单标签宽度
formLabelWidth: '100px',
// 条件查询表单
dialogSearchForm: {
// 部门
department: '',
// 人员名称
name: ''
},
// 表格数据
tableData: [
{
name: '李逍遥',
department: '网络办'
},
{
name: '王小虎',
department: '政治部'
}
],
// 需要提交的表单
submitForm: {
// 加签类型
type: '1',
},
// 多选选中的数据
multipleSelection: []
}
},
computed: {},
watch: {
visible: {
handler(newVal) {
this.endorsementDialogFormVisible = newVal
},
immediate: true
}
},
created() {},
mounted() {},
methods: {
/**
* @author WangXinYu
* @describe 关闭模态框前的回调
**/
beforeClose(done) {
this.$emit('update:visible', false)
done()
},
/**
* @author WangXinYu
* @describe 重置表单
**/
resetForm() {},
/**
* @author WangXinYu
* @describe 关闭模态框
**/
closeDialog() {
this.$emit('update:visible', false)
},
/**
* @author WangXinYu
* @describe 表格选中的时候 触发事件
* @param {Array} val 多选选中的数组
**/
handleSelectionChange(val) {
this.multipleSelection = val
}
}
}
</script>
<style lang="scss" scoped>
.TemplateEndorsementDialog {
.my-right-pagination {
text-align: right;
margin-top: 8px;
}
}
</style>
src/views/instance/components/TemplateRejectDialog.vue 0 → 100644
View file @ eb7b92c8
<template>
<el-dialog
class="rejectDialog"
title="拒绝"
:visible.sync="rejectDialogFormVisible"
:before-close="beforeClose"
@closed="resetForm"
>
<el-form :model="rejectForm">
<el-form-item label="拒绝备注" :label-width="formLabelWidth">
<el-input
v-model="rejectForm.remark"
:maxlength="30"
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
placeholder="请输入拒绝备注"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button
type="primary"
@click="onSubmit"
>确 定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'RejectDialog',
components: {},
props: {
// 控制dialog是否能显示
visible: {
type: Boolean,
require: true
}
},
data() {
return {
// 控制显隐
rejectDialogFormVisible: false,
// 表单标签宽度
formLabelWidth: '100px',
// 表单数据
rejectForm: {
remark: ''
}
}
},
computed: {},
watch: {
visible: {
handler(newVal) {
this.rejectDialogFormVisible = newVal
},
immediate: true
}
},
created() {},
mounted() {},
methods: {
/**
* @author WangXinYu
* @describe 关闭模态框前的回调
**/
beforeClose(done) {
this.$emit('update:visible', false)
done()
},
/**
* @author WangXinYu
* @describe 重置表单
**/
resetForm() {
this.rejectForm = {
remark: ''
}
},
/**
* @author WangXinYu
* @describe 关闭模态框
**/
closeDialog() {
this.$emit('update:visible', false)
},
/**
* @author WangXinYu
* @describe 处理确定事件
**/
onSubmit() {
this.$emit('onConfirm', this.rejectForm)
}
}
}
</script>
<style scoped>
.rejectDialog {
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment