icore-pass/src/views/workFlow/components/processManagement.vue

<template>
    <div class="test_page">
        <!-- 下拉选择公司 -->
        <!-- <div class="company-select" v-if="companys !== '' && companys.length > 1">
            <el-dropdown
                trigger="click"
                @command="selectComPany"
            >
                <span class="el-dropdown-link">
                    {{companyName}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <div v-for="item in companys" :key="item.id">
                        <el-dropdown-item :command="item">{{item.companyName}}</el-dropdown-item>
                    </div>
                </el-dropdown-menu>
            </el-dropdown>
        </div> -->
        <div class="searchArea">
            <el-form
                v-model="searchForm"
                inline
            >
                <el-form-item prop="type">
                    <el-select
                        v-model="searchForm.type"
                        size="small"
                        clearable
                        placeholder="流程类型">
                        <el-option
                            v-for="item in typeOptions"
                            :key="item.index"
                            :label="item.dictName"
                            :value="item.dictName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="processCnName">
                    <el-input
                        v-model="searchForm.name"
                        size="small"
                        placeholder="流程名称"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item prop="key">
                    <el-input
                        v-model="searchForm.key"
                        size="small"
                        placeholder="流程KEY"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item prop="status">
                    <el-select
                        v-model="searchForm.status"
                        placeholder="流程状态"
                        size="small"
                        clearable>
                        <el-option key="0" label="未部署" value="0"></el-option>
                        <el-option key="1" label="已部署" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="bigestVersion">
                    <el-checkbox v-model="searchForm.bigestVersion">查询最高版本</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        @click="searchData"
                        size="small"
                        v-privilege="activeMenu + 'QUERY'"
                        icon="el-icon-search"
                    >查询</el-button>
                    <el-button
                        type="primary"
                        @click="refresh"
                        size="small"
                        v-privilege="activeMenu + 'QUERY'"
                        icon="el-icon-refresh"
                    >重置</el-button>
                    <el-button
                        type="primary"
                        @click="goDesign('','add')"
                        icon="el-icon-plus"
                        size="small"
                        v-privilege="activeMenu + 'ADD'"
                    >新增流程</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="tableArea">
            <el-table
                individual-columns="individual-vue-table-columns"
                :individual-info="individualInfo"
                drag-column="individual-vue-table"
                v-loading="tableLoading"
                ref="singleTable"
                :data="tableData"
                :height="tableHeight + 'px'"
                border
                class="yt-table-no-srcoll"
                highlight-current-row
                style="width: 100%"
            >
                <el-table-column
                    width="80"
                    type="index"
                    label="序号"
                    align="center">
                </el-table-column>
                <!-- tableKey表示为根据获取的tableData设置的header显示值列表 -->
                <el-table-column
                    v-for ="(item, index) of tableKeys"
                    :key="index"
                    :label="item.label"
                    :prop="item.key"
                    :fixed="item.fixed"
                    :width="item.width"
                    header-align="center"
                    align="center"
                    sortable
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-for="item in deployStatus" :key="item.value" :class="item.class" v-if="scope.column.property === 'status' && scope.row.status === item.value">
                            {{item.label}}
                        </span>
                        <el-tag v-if="scope.column.property === 'version'" style="min-width: 56px;">v{{scope.row.version}}</el-tag>
                        <span v-if="scope.column.property !== 'status' && scope.column.property !== 'version'">
                            {{scope.row[scope.column.property]}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    :show-overflow-tooltip="true"
                    width="180"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="editRow(scope.row, 'publish')"
                            :disabled="scope.row.status === '1'"
                            v-privilege="activeMenu + 'PUBLISH'"
                        >发布</el-button>
                        <el-dropdown
                            split-button
                            size="mini"
                            type="primary"
                            trigger="click"
                            @click="handleCommand([scope.row, 'edit'])"
                            @command="handleCommand"
                            style="margin-left: 3px;"
                            v-privilege="activeMenu + 'PUT'"
                        >
                            修改
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
                                    :command="[scope.row, 'show']"
                                    v-privilege="activeMenu + 'LOOK'"
                                >显示</el-dropdown-item>
                                <el-dropdown-item
                                    :command="[scope.row, 'del']"
                                    v-privilege="activeMenu + 'DELETE'"
                                >删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <!-- <el-dropdown split-button size="mini" type="primary" trigger="click" @click="handleCommand([scope.row, 'show'])" style="margin-left: 3px;">
                            显示
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :command="[scope.row, 'copy']">复制</el-dropdown-item>
                                <el-dropdown-item :command="[scope.row, 'history']">历史版本</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="foot-style">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page='pageIndex'
                :page-sizes="[10, 20, 30, 40, 100, 200]"
                :page-size='pageSize'
                layout="total, sizes, prev, pager, next, jumper"
                :total='total'
            >
            </el-pagination>
        </div>
        <icore-individual :uiId="activeMenu" indexClass="individual-index"></icore-individual>
    </div>
</template>

<script>
import { checkCharLength, checkCharLength2, checkCharNoChinese, checkChar, checkChinese } from '@/utils/validator.js';
import store from '@/store/index.js';
export default {
    name: 'processManagement',
    data () {
        return {
            individualInfo: {},
            tableKeys: [],
            store,
            activeMenu: '',
            tableLoading: false, // 表格loading
            searchForm: {
                type: '',
                name: '',
                key: '',
                bigestVersion: true,
                queryType: '0',
                status: ''
            },
            deployStatus: [
                {
                    value: '1',
                    label: '● 已部署',
                    class: 'green'
                }, {
                    value: '0',
                    label: '● 未部署',
                    class: 'red'
                }
            ],
            tableData: [],
            tableHeight: 0,
            pageSize: 20,
            pageIndex: 1,
            total: 0,
            companys: [], // 公司数组
            companyId: '',
            companyName: '',
            scroll: 0, // 滚动条位置
            typeOptions: []
        }
    },
    watch: {
        'searchForm.bigestVersion': {
            immediate: true,
            handler (n, o) {
                if (n === true) {
                    this.searchForm.queryType = '0';
                } else {
                    this.searchForm.queryType = '1';
                }
            }
        }
    },
    mounted: function () {
        this.$nextTick(() => {
            this.tableHeight = this.getTreeHeight(this.$refs['singleTable'].$el) - 80;
        })
        // 获取公司信息
        this.companys = JSON.parse(window.top.localStorage.getItem('companys'));
        this.companyId = window.top.localStorage.getItem('companyId');
        if (this.companyId !== '' && this.companyId !== null) {
            this.companyName = this.companys.find((x) => x.id === this.companyId).companyName;
        }
        this.searchData();
        this.getDictList();
    },
    // 操作成功刷新列表
    activated () {
        // 滚动条保持
        this.$nextTick(() => {
            setTimeout(() => {
                this.$refs.singleTable.bodyWrapper.scrollTop = this.scroll;
            }, 13)
        })
        if (this.$route.params.operate && this.$route.params.operate === 'success') {
            this.searchData();
        }
    },
    // 获取菜单页面id
    created () {
        this.activeMenu = window.top.localStorage.getItem('activeMenu');
    },
    methods: {
        //  计算树区域高度
        getTreeHeight (dom) {
            return window.innerHeight - dom.offsetTop;
        },
        editRow: function (row, type) {
            switch (type) {
                case 'edit':
                    this.goDesign(row, 'edit');
                    break;
                case 'del':
                    this.delData(row);
                    break;
                case 'publish':
                    this.publish(row);
                    break;
                case 'show':
                    this.goDesign(row, 'show');
                    // this.showRow(row);
                    break;
            }
        },
        // 下拉菜单
        handleCommand (command) {
            this.editRow(command[0], command[1]);
        },
        // 获取数据字典中-流程类型数据
        getDictList () {
            this.axios.get('pass/v1/sysdicts/listDict?pDictId=PROCESS_TYPE&status=1&companyId=' + this.companyId).then((res) => {
                if (res.code === '0') {
                    this.typeOptions = res.data.list;
                } else {
                    this.$message.error(res.message)
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        delData (row) {
            this.$confirm('确定要删除已选择的记录吗？确定请选是，取消选否。', '提示', {
                customClass: 'org-Manage-changeprimaryforbutton',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.axios.delete('pass/act/v1/actinformations/' + row.id).then(res => {
                    if (res.code === '0') {
                        this.$message.success('删除成功');
                        this.searchData();
                    } else {
                        this.$message.error(res.message);
                    }
                });
            }).catch(() => {
                this.$message.info('已取消操作');
            });
        },
        publish (row) {
            this.$confirm('确定要发布已选择的记录吗？确定请选是，取消选否。', '提示', {
                customClass: 'org-Manage-changeprimaryforbutton',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.axios.get('pass/act/v1/actinformations/deployTextProcess?id=' + row.id + '&companyId=' + this.companyId).then((res) => {
                        let data = [];
                        if (res.code === '0') {
                        this.$message.success('部署成功');
                        this.searchData();
                    } else {
                        this.$message.error(res.message);
                    }
                }).catch((err) => {
                    console.log(err);
                })
            }).catch(() => {
                this.$message.info('已取消操作');
            });
        },
        // 重置搜索
        refresh () {
            for (let item in this.searchForm) {
                this.searchForm[item] = ''
            }
            this.searchData();
        },
        // 搜索
        searchData () {
            let that = this,
                searchData = {
                    type: this.searchForm.type,
                    name: this.searchForm.name,
                    key: this.searchForm.key,
                    queryType: this.searchForm.queryType,
                    status: this.searchForm.status
                };
            that.tableLoading = true;
            that.getActList(searchData);
        },
        handleCurrentChange (pageIndex) {
            this.pageIndex = pageIndex
            this.searchData();
        },
        handleSizeChange (pageSize) {
            // this.pageIndex = 1
            this.pageSize = pageSize;
            this.searchData()
        },
        getActList (data) {
            this.tableLoading = true;
            this.tableKeys = [
                {
                    key: 'type',
                    label: '流程类型',
                    width: 'auto'
                },
                {
                    key: 'name',
                    label: '流程名称',
                    width: 'auto'
                },
                {
                    key: 'key',
                    label: '流程Key',
                    width: 'auto'
                },
                {
                    key: 'version',
                    label: '流程版本',
                    width: 'auto'
                },
                {
                    key: 'status',
                    label: '部署状态',
                    width: 'auto'
                },
                {
                    key: 'crtDate',
                    label: '创建日期',
                    width: 'auto'
                }
            ]
            let url = data ? '&queryType=' + data.queryType : '';
            this.axios.get('pass/act/v1/actinformations/like/?pageNum=' +  this.pageIndex + '&pageSize=' + this.pageSize + (data ? '&type=' + data.type + '&name=' + data.name + '&key=' + data.key + '&status=' + data.status : '') + '&companyId=' + this.companyId + url).then((res) => {
                let data = [];
                if (res.code === '0') {
                    if (res.data.total >= 1) {
                        for (let i = 0; i < res.data.list.length; i++) {
                            let item = {};
                            item.id = res.data.list[i].id;
                            item.type = res.data.list[i].type;
                            item.name = res.data.list[i].name;
                            item.key = res.data.list[i].key;
                            item.crtDate = res.data.list[i].crtDate;
                            item.version = res.data.list[i].version;
                            item.bpmnText = res.data.list[i].bpmnText;
                            item.text = res.data.list[i].text;
                            // item.text = decodeURIComponent(escape(res.data.list[i].text)); //base64解码
                            item.status = res.data.list[i].status;
                            // switch (res.data.list[i].status) {
                            //     case '0':
                            //         item.status = '未部署';
                            //         break
                            //     case '1':
                            //         item.status = '已部署';
                            //         break
                            // }
                            data.push(item);
                        }
                    }
                    this.tableData = data;
                    this.total = res.data.total;
                    this.tableLoading = false;
                } else {
                    this.$message.error(res.message);
                    this.tableLoading = false;
                }
            }).catch((err) => {
                console.log(err);
            })
        },
        goDesign (item, status) {
            // 记住当前页面table滚动条位置
            let wrapperScrollTop = this.$refs.singleTable.bodyWrapper.scrollTop;
            this.scroll = wrapperScrollTop;
            let data = item ? JSON.stringify(item) : '';
            this.$router.push({ name: 'processDdesign2', query: { type: status, data: data || '', companyId: this.companyId } })
        },
        // 下拉选择公司
        selectComPany (command) {
            this.companyId = command.id;
            this.companyName = command.companyName;
            // 下拉选择了公司以后需要再重新调用下查询接口，重新获取数据
            this.getActList();
        }
    }
}
</script>
<style lang="less" scoped>
.test_page {
    padding: 15px;
    min-width: 1000px;
    position: relative;;
    .foot-style {
        margin: 5px 0 0;
        text-align: right;
    }
    .green {
        color: #67C23A;
    }
    .red {
        color: #F56C6C;
    }
}
.tableButton {
    margin-bottom: 10px;
}
.el-form {
    .lineFormItem {
        width: 20%;
        display: inline-block;
        margin: 0 1%;
    }
    .buttonFormItem {
        width: 7%;
        display: inline-block;
    }
    .el-select {
        width: 100%;
    }
}
.company-select {
    position: absolute;
    right: 20px;
    top: 28px;
    .el-dropdown {
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
    }
}
</style>