物业监管-维修基金管理，物业管理服务-共治力量-维修基金审核:添加切换处理按钮,切换待处理已处理页面

guanqb

2024-03-02 06e162e45f637402390be4c99cc506cf1ac9de64

 src/views/gzll/todo.vue

@@ -1,247 +1,69 @@
<template>
    <basic-container>
        <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form"
            @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
            @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
            <template slot-scope="{row, size, index}" slot="menu">
                <el-button type="text" :size="size" icon="el-icon-s-check" v-if="permission.gzll_todo_handle"
                    @click.stop="handleWork(row)">处理
                </el-button>
                <el-button type="text" :size="size" icon="el-icon-info" v-if="permission.gzll_todo_detail"
                    @click.stop="handleDetail(row)">详情
                </el-button>
                <el-button type="text" :size="size" icon="el-icon-search" v-if="permission.gzll_todo_follow"
                    @click.stop="handleImage(row, index)">流程图
                </el-button>
            </template>
            <template slot-scope="{row, size}" slot="processDefinitionVersion">
                <el-tag :size="size">v{{ row.processDefinitionVersion }}</el-tag>
            </template>
            <template slot-scope="{row, size}" slot="linkPhone">
                <el-button :size="size" type="text" @click="showStringDispose(row, 'linkPhoneflag')"
                    v-text="textDispose(row, 'linkPhoneflag', 'linkPhone')">
                </el-button>
            </template>
        </avue-crud>
        <flow-design is-dialog :is-display.sync="flowBox" :process-instance-id="processInstanceId"></flow-design>
        <div class="tab-list">
            <div :class="{ 'choose': typeStatus == 1 }" @click="changeType(1)">待处理</div>
            <div :class="{ 'choose': typeStatus == 2 }" @click="changeType(2)">已处理</div>
        </div>
        <div v-if="typeStatus == 1">
            <todo />
        </div>
        <div v-if="typeStatus == 2">
            <done />
        </div>
    </basic-container>
</template>

  
<script>
import {
    mapGetters
} from "vuex"
import {
    todoList
} from "@/api/work/work"
import {
    flowCategory,
    flowRoute
} from "@/util/flow"

import todo from './components/todo'
import done from './components/done'
export default {
    components: { todo, done },
    data () {
        return {
            form: {},
            selectionId: '',
            selectionList: [],
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            processInstanceId: '',
            flowBox: false,
            workBox: false,
            option: {
                labelWidth: 120,
                searchLabelWidth: 96,
                searchShow: true,
                searchMenuSpan: 3,
                menuWidth: 210,

                height: 'auto',
                calcHeight: 30,
                tip: false,
                simplePage: true,
                border: true,
                index: true,
                // selection: true,
                editBtn: false,
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                dialogWidth: 900,
                dialogClickModal: false,
                column: [{
                    label: "流程分类",
                    type: "select",
                    row: true,
                    dicUrl: "/api/blade-system/dict/dictionary?code=flow",
                    props: {
                        label: "dictValue",
                        value: "dictKey"
                    },
                    dataType: "number",
                    slot: true,
                    prop: "category",
                    // search: true,
                    hide: true,
                    width: 100,
                },
                {
                    width: 100,
                    label: '申请类型',
                    prop: 'categoryName',
                    // search: true,
                },
                {
                    width: 220,
                    overHidden: true,
                    label: "小区",
                    prop: "districtId",
                    // search: true,
                    type: 'tree',
                    dicUrl: `/api/blade-district/district/getDistrictTree`,
                    props: {
                        label: "name",
                        value: "id"
                    },
                    defaultExpandedKeys: ["361102003"],
                    searchSpan: 5,
                    span: 12,
                },
                {
                    width: 110,
                    label: '联系人',
                    prop: 'linkman',
                    // search: true,
                },
                {
                    width: 120,
                    label: '联系电话',
                    prop: 'linkPhone',
                    // search: true,
                    slot: true
                },
                {
                    label: '项目名称',
                    prop: 'name',
                    // search: true,
                },
                {
                    label: '当前步骤',
                    prop: 'taskName',
                },
                // {
                //   label: '流程版本',
                //   prop: 'processDefinitionVersion',
                //   // slot: true,
                //   width: 80,
                // },
                {
                    width: 144,
                    label: '申请时间',
                    prop: 'createTime',
                },
                ]
            },
            data: []
            typeStatus: 1,
        }
    },
    computed: {
        ...mapGetters(["permission", "flowRoutes"]),
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },

        textDispose () {
            return (row, flag, type) => {
                if (row[flag] || row[type] == null) {
                    return row[type]
                } else {
                    if (type == 'principalIdCard') {
                        return row[type].replace(/^(.{6})(?:\d+)(.{4})$/, "$1******$2")
                    } else {
                        return row[type].replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
                    }
                }
            }
        }
    },
    methods: {
        showStringDispose (row, type) {
            row[type] = !row[type]
        changeType (type) {
            this.typeStatus = type
        },

        searchReset () {
            this.query = {}
            this.onLoad(this.page)
        },
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
        selectionChange (list) {
            this.selectionList = list
        },
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },
        handleWork (row) {
            this.$router.push({
                path: `/gzll/process/${flowRoute(this.flowRoutes, row.category)}/handle/${row.taskId}/${row.processInstanceId}/${row.businessId}`
            })
        },
        handleDetail (row) {
            this.$router.push({
                path: `/gzll/process/${flowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}`
            })
        },
        handleImage (row) {
            this.processInstanceId = row.processInstanceId
            this.flowBox = true
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            const query = {
                ...this.query,
                category: (params.category) ? flowCategory(params.category) : null
            }
            this.loading = true
            todoList(page.currentPage, page.pageSize, Object.assign(params, query)).then(res => {
                const data = {
                    ...res.data.data,
                    records: res.data.data.records.map(item => {
                        return {
                            ...item,
                            'linkPhoneflag': false
                        }
                    })
                }
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            })
        }
    }
}
</script>
</script>
  
<style lang="scss" scoped>
.avue-upload__icon {
    line-height: 6;
}

.tab-list {
    display: flex;
    margin-right: 6px;
    border: 1px solid #dcdfe6;
    color: #606266;
    border-radius: 4px;
    height: 34px;
    width: 121px;
    margin-bottom: 10px;

    &>div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        cursor: pointer;
        font-size: 12px;
    }

    &>div:nth-child(2) {
        border-left: 1px solid #dcdfe6;
        // border-right: 1px solid #dcdfe6;
    }

    .choose {
        color: #FFF;
        background-color: #409dfe;
    }
}
</style>