<template>
|
<el-dialog :title="`执行${title}`" width="90%" append-to-body="true" :visible.sync="visible">
|
<div class="dialogwarp">
|
<div class="dialogwarp_tab">
|
<el-card class="dialogwarp_tab_card">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="业务数据信息" name="first">
|
|
</el-tab-pane>
|
<el-tab-pane label="流程跟踪" name="second">
|
<avue-crud :data="data" :option="option" ref="crud">
|
</avue-crud>
|
<div style="padding: 10px 0; width: 100%; height: 100% ">
|
<el-image :src="url" flt="fill"></el-image>
|
</div>
|
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
</div>
|
<div class="dialogwarp_card">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>当前任务：</span>
|
<span>{{ title }}</span>
|
</div>
|
<div style="width: 100%;">
|
<p>请在下方输入您的审批意见：</p>
|
<el-input type="textarea" :rows="4" placeholder="请输入内容" show-word-limit v-model="opinionVal">
|
</el-input>
|
</div>
|
<div style="width: 100%;">
|
<p>审批意见附件：</p>
|
<el-upload drag action="https://jsonplaceholder.typicode.com/posts/" multiple style="width: 100%;">
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
</el-upload>
|
</div>
|
<div style="width: 100%;">
|
<p>已上传审批文件：</p>
|
<el-card class="box-card">
|
<el-table :data="tableData" stripe style="width: 100%">
|
<el-table-column prop="date" label="文件名">
|
</el-table-column>
|
<el-table-column prop="name" label="上传人 ">
|
</el-table-column>
|
<el-table-column prop="address" label="操作">
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</div>
|
<div style="margin-top: 20px;">
|
<el-button v-if="!isRefuse" type="primary" size="mini" @click="handelAgree">同意</el-button>
|
<el-button v-if="!isAgree" type="primary" size="mini" @click="handelRefuse">不同意</el-button>
|
<el-button v-if="isAgree && !isRefuse" type="primary" size="mini" @click="handelRevert"
|
v-for="item in btnList" :key="item">{{ item }}</el-button>
|
<el-button v-if="isRefuse" type="primary" size="mini" @click="handelExecute">执行</el-button>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
<script>
|
export default {
|
name:'FlowBusiness',
|
props: {
|
// 是否打开
|
visible: {
|
typeof: Boolean,
|
default: false
|
}
|
},
|
watch: {
|
visible(n) {
|
this.dialogVisible = n;
|
},
|
dialogVisible(n) {
|
this.$emit('update:visible', n)
|
},
|
},
|
data() {
|
return {
|
dialogVisible: this.visible,
|
destroyClose: true,
|
activeName: 'first',
|
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
|
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
title: '业务测试-申请-物品-审核',
|
data: [
|
{
|
name: '张三',
|
sex: '男'
|
}, {
|
name: '李四',
|
sex: '女'
|
}, {
|
name: '李四',
|
sex: '女'
|
}, {
|
name: '李四',
|
sex: '女'
|
}
|
],
|
btnList: ['返回1', '返回1', '返回1'],
|
isAgree: false,
|
isRefuse: false,
|
opinionVal: '',
|
option: {
|
menu: false,
|
addBtn: false,
|
refreshBtn: false,
|
columnBtn: false,
|
index: true,
|
header: false,
|
stripe: true,
|
indexLabelClassName: '序号',
|
column: [
|
{ label: '任务名称', prop: 'name', minWidth: 120 },
|
{ label: '执行操作', prop: 'sex', minWidth: 80 },
|
{ label: '任务开始时间', prop: 'sex', minWidth: 140 },
|
{ label: '审批意见', prop: 'sex', minWidth: 220, overHidden: true },
|
{ label: '执行人', prop: 'sex', minWidth: 80 },
|
{ label: '任务完成时间', prop: 'sex', minWidth: 140 },
|
{ label: '已上传审批文件', prop: 'sex', minWidth: 220, overHidden: true },
|
]
|
},
|
}
|
},
|
methods: {
|
closeDialog() {
|
this.destroyClose = true
|
this.outerVisible = false
|
},
|
handleClick(tab, event) {
|
console.log(event)
|
},
|
handelAgree() {
|
this.isAgree = !this.isAgree
|
this.outerVisible = false
|
},
|
handelRefuse() {
|
if (!this.opinionVal) {
|
this.$alert('当处理方式为不同意时，需要填写审批意见', '提示信息', {
|
confirmButtonText: '确定',
|
}).then(() => {
|
|
});
|
} else {
|
this.isRefuse = true
|
this.isAgree = true
|
this.outerVisible = false
|
this.opinionVal = ''
|
}
|
},
|
handelExecute() {
|
this.outerVisible = false
|
this.isAgree = false
|
this.isRefuse = false
|
},
|
handelRevert() {
|
this.outerVisible = false
|
this.isAgree = false
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.dialogwarp {
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: flex;
|
justify-content: space-between;
|
height: 70vh;
|
|
&_tab {
|
width: 79%;
|
|
|
&_card {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
&_card {
|
// margin-left: 20px;
|
width: 20%;
|
}
|
}
|
|
::v-deep(.el-upload) {
|
width: 100%;
|
height: 120px;
|
}
|
|
::v-deep(.el-upload-dragger) {
|
width: 100%;
|
height: 120px;
|
}
|
|
::v-deep(.el-upload-dragger .el-icon-upload) {
|
margin: 15px 0 16px;
|
}
|
</style>
|
