新增流程测试页面

 Source/UBCS-WEB/src/views/flow/flowPath.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,188 @@
<template>
    <div>
        <el-button @click="outerVisible = true">流程测试</el-button>
        <el-dialog :title="`执行${title}`" width="90%" append-to-body="true" :visible.sync="outerVisible">
            <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>
                                <el-image style="width: 100%; height: 100%" :src="url" fit="cover"></el-image>
                            </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="请输入内容" 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>
    </div>
</template>

<script>
export default {
    data() {
        return {
            outerVisible: false,
            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
            console.log(this.isAgree)
        },
        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%;
    }
}

/deep/ .el-upload,
/deep/ .el-upload-dragger {
    width: 100%;
    height: 120px;
}

/deep/ .el-upload-dragger .el-icon-upload {
    margin: 15px 0 16px;
}
</style>