模板流程

 Source/UBCS-WEB/src/api/integration/sysInfo.js

@@ -16,7 +16,7 @@
    data: params
  })
}
 // é›†æˆç³»ç»Ÿä¿¡æ¯ç®¡ç†æ–°å¢ž
 // é›†æˆç³»ç»Ÿä¿¡æ¯ç®¡ç†ä¿®æ”¹
 export const sysInfoEdit = (params) => {
    return request({
      url: '/api/ubcs-code/dockingManagement/editSave',
@@ -24,7 +24,7 @@
      data: params
    })
  }
   // é›†æˆç³»ç»Ÿä¿¡æ¯ç®¡ç†æ–°å¢ž
   // é›†æˆç³»ç»Ÿä¿¡æ¯ç®¡ç†åˆ é™¤
export const sysInfoDel = (params) => {
    return request({
      url: '/api/ubcs-code/dockingManagement/deleteDataById',

 Source/UBCS-WEB/src/api/template/flowpath.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,26 @@
import request from '@/router/axios';

// æ¨¡æ¿æµç¨‹åˆ—表
export const getFlowpathList = (params) => {
    return request({
      url: '/api/ubcs-flow/processTS/tlist',
      method: 'get',
      params: params
    })
  }
  // æ¨¡æ¿æµç¨‹èŽ·å–选项
export const getStartList = () => {
    return request({
      url: '/api/ubcs-flow/work/start-list',
      method: 'get',
      params: {mode:'1',current:1,size:100}
    })
  }
    // æ¨¡æ¿æµç¨‹æ–°å¢ž
export const flowpathSave = (params) => {
    return request({
      url: '/api/ubcs-flow/processTS/tsou',
      method: 'post',
      data: params
    })
  }

 Source/UBCS-WEB/src/components/template/Business.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,206 @@
<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
            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%;
    }
}

::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>

 Source/UBCS-WEB/src/components/template/FlowPath.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,229 @@
<template>
    <el-dialog title="模板流程" width="90%" append-to-body="true" :visible.sync="dialogVisible">
        <avue-crud ref="crud" :table-loading="loading" :data="data" v-model="form" :option="option" :page.sync="page"
            :search.sync="search" @on-load="getDataList" @row-save="handleSave" @row-del="handleDelete"
            @row-update="handleEdit" @refresh-change="handleRefresh" @size-change="handleSizePage"
            @current-change="handleCurrentPage" @selection-change="selectionChange" @row-click="handleRowClick">
            <template slot="menuLeft">
                <el-button icon="el-icon-delete" size="small" type="danger" @click="handleDeleteByIds">删 é™¤
                </el-button>
            </template>
            <template slot="search" slot-scope="{row,size}">
                <el-input :placeholder="`请输入${selectValue === 'id' ? '系统编号' : '系统名称'}并按回车查询`" :size="size"
                    style="width:300px;margin-left: 10px;" v-model="search[selectValue]" clearable
                    @keyup.enter.native="handleEnter" @clear="handleClear"></el-input>
            </template>
        </avue-crud>
    </el-dialog>
</template>

<script>
import { getFlowpathList, getStartList, flowpathSave } from '@/api/template/flowpath.js'
export default {
    name: 'FlowPath',
    props: {
        // æ˜¯å¦æ‰“å¼€
        visible: {
            typeof: Boolean,
            default: false
        },
        code: {
            typeof: String,
            required: true,
            default: ""
        }
    },
    watch: {
        visible(n) {
            this.dialogVisible = n;
        },
        dialogVisible(n) {
            this.$emit('update:visible', n)
        },
    },
    data() {
        return {
            dialogVisible: this.visible,
            loading: false,
            page: {
                currentPage: 1,
                pageSize: 10,
                total: 0
            },
            search: {},
            delIds: [],
            data: [],
            startData: [],
            form: {},
            option: {
                height: "auto",
                border: true,
                align: 'center',
                menuAlign: 'center',
                index: true,
                searchMenuSpan: 8,
                searchBtn: false,
                emptyBtn: false,
                columnBtn: false,
                defaultSort: {
                    prop: 'id,name,description,version',
                    order: 'descending'
                },
                selection: true,
                column: [
                    {
                        label: '模板key',
                        prop: 'modelKey',
                        sortable: true,
                        type: 'tree',
                        dicData: [],
                        props: {
                            label: "key",
                            value: "key"
                        },
                        rules: [{
                            required: true,
                            message: '模板key不能为空',
                            trigger: 'blur'
                        }],
                        nodeClick: (data) => {
                            console.log(data)
                            // èŠ‚点点击的时候会获取到数据
                            this.form.modeName = data.name
                        }
                    }, {
                        label: '模板名称',
                        prop: 'modelName',
                        sortable: true,
                        addDisabled: true,
                        editDisabled: true,
                    },
                    {
                        label: '流程模板用途',
                        prop: 'buttonTypeKey',
                        type: 'tree',
                        dicUrl: '/api/ubcs-flow/processTS/tt',
                        dicMethod: 'post',
                        props: {
                            value: "codee",
                            label: "namee",
                        },
                    },
                ]
            },
        }
    },
    created() {
        this.getStart()
    },
    methods: {
        async getStart() {
            const response = await getStartList()
            if (response.status === 200) {
                console.log(response.data.data.records)
                const data = response.data.data.records
                let newData = data.map(item => {
                    const { key, name, version } = item
                    return { key, name, version }
                })
                this.option.column[0].dicData = newData

            }
        },
        // èŽ·å–列表
        async getDataList() {
            this.loading = false
            console.log(this.search)
            const { pageSize, currentPage } = this.page
            let param = { size: pageSize, current: currentPage }
            const response = await getFlowpathList({ ...param, ...this.search })
            if (response.status === 200) {
                console.log(response)
                this.loading = false
                const data = response.data.data
                this.data = data.records
                this.page.total = data.total
            }else this.loading = false
        },
        // æ–°å¢ž
        async handleSave(row, done, loading) {
            console.log(row)
            const response = await flowpathSave({...row,...{templateId:this.code}})
            if(response.status ===200){
                loading()
                console.log(response)
                this.$message({
                    type: 'success',
                    message: '新增数据成功！'
                })
                done()
                this.getDataList()
            }

        },
        // ç¼–辑
        async handleEdit(row, index, done, loading) {
            console.log(row)
            const {modelName,modelKey,buttonTypeKey,id} = row
            let param = {modelName,modelKey,buttonTypeKey,id}
            const response = await flowpathSave({...param,...{templateId:this.code}})
            if (response.status === 200) {
                loading()
                this.$message({
                    type: 'success',
                    message: '修改数据成功！'
                })
                done()
                this.getDataList()
            }

        },
        // åˆ é™¤å•æ¡
        handleDelete(row) {
            const { oid } = row
        },
        // å¤šæ¡æ•°æ®åˆ é™¤
        handleDeleteByIds() {

        },
        // åˆ é™¤æŽ¥å£
        deleteSysInfo(param) {
            this.$confirm('是否确定删除选择的集成系统?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // æŽ¥å£
            })
        },
        // enter搜索
        handleEnter() {
            if (this.search[this.selectValue] === '') return
            else this.getDataList()
        },
        // è¾“入框清空
        handleClear() {

        },
        // åˆ·æ–°æŒ‰é’®
        handleRefresh() {
            this.getDataList()
        },
        handleSizePage(event) {
            this.page.pageSize = event
        },
        handleCurrentPage(event) {
            this.page.currentPage = event
        },
        // ç‚¹å‡»é€‰æ‹©
        handleRowClick(row) {
            this.$refs.crud.toggleRowSelection(row, true)
        },
        // å¤šé€‰
        selectionChange(list) {
            console.log(list)

        },
    }
}
</script>

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

@@ -1,192 +1,32 @@
<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>
                                <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>
        <el-button @click="visibleFlow = true">模板流程</el-button>
        <flow-business :visible.sync="outerVisible"></flow-business>
        <flow-path :visible.sync="visibleFlow" code="A12826E4-2B66-6D56-DE30-92BB1D7F607F"></flow-path>
    </div>
</template>

<script>
import FlowBusiness from '@/components/template/Business'
import FlowPath from '@/components/template/FlowPath'
export default {
    components:{
        FlowBusiness,
        FlowPath
    },
    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 },
                ]
            },
            visibleFlow: false,
           
        }
    },
    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%;
    }
}
::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>

 Source/UBCS-WEB/vue.config.js

@@ -26,10 +26,11 @@
    proxy: {
      '/api': {
        //本地服务接口地址
         target: 'http://192.168.1.104:37000',
        //  target: 'http://localhost:37000',
        //  target: 'http://localhost:37000',
        // target: 'http://192.168.1.51:37000',
        target: 'http://192.168.1.46:37000',
        // target: 'http://192.168.1.46:37000',
        // target: 'http://dev.vci-tech.com:37000',
        // target: 'http://192.168.1.51:37000/',
        //   target: 'http://localhost:37000',