SmartCommunity/operationSupport/src/views/operationManagement/workOrders/index.vue

<template>
    <div class="main">
        <div class="search">
            <el-input placeholder="请输入地址/报修人" class="search-input" clearable v-model="mixins_query.name"></el-input>
            <el-select v-model="mixins_query.communityId" placeholder="选择社区" clearable>
                <el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
            </el-select>
            <el-select class="width90" placeholder="请选择工单类型" v-model="mixins_query.orderType" clearable>
                <el-option label="业主报修" :value="1"></el-option>
                <el-option label="内部报修" :value="2"></el-option>
            </el-select>
            <el-button type="primary" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>

            <div class="search-icon">
                <el-tooltip class="item" effect="light" placement="bottom" content="新增">
                    <i class="zoniot_font zoniot-icon-tianjia2" @click="addOrEdit('add')"></i>
                </el-tooltip>
            </div>
        </div>
        <zz-table
            :cols="cols"
            :settings="{ showIndex: true, stripe: true }"
            :loading="mixins_onQuery"
            :data="mixins_list"
            :pageset="mixins_pageset"
            @page-change="pageChange"
        >
            <template slot="repairFile" slot-scope="scope">
                <div class="imgVdio"><img :src="scope.row.repairFile" alt="" /></div>
            </template>
            <template slot-scope="scope" slot="opt">
                <div class="opt">
                    <el-tooltip effect="light" placement="bottom" content="派单">
                        <i v-if="scope.row.orderStatus !== 4" class="zoniot_font zoniot-icon-paidan" @click="dispatchTask(scope.row)"></i>
                        <i v-else class="zoniot_font zoniot-icon-paidan ashText"></i>
                    </el-tooltip>
                    <el-tooltip effect="light" placement="bottom" :content="scope.row.orderStatus == 4 ? '已关闭' : '关闭'">
                        <i
                            v-if="scope.row.orderStatus !== 4"
                            class="zoniot_font zoniot-icon-guanbi2 redText"
                            @click="closeTask(scope.row)"
                        ></i>
                        <i v-else class="zoniot_font zoniot-icon-guanbi2 ashText"></i>
                    </el-tooltip>
                </div>
            </template>
        </zz-table>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    name: 'workOrdersManagement',
    data() {
        let _this = this;
        return {
            communityArr: [],
            cols: [
                {
                    label: '所属社区',
                    prop: 'communityName'
                },
                {
                    label: '地址',
                    prop: 'address'
                },
                {
                    label: '工单类型',
                    prop: 'orderType',
                    format(val) {
                        if (val == 1) {
                            return '业主报修';
                        } else if (val == 2) {
                            return '内部报修';
                        }
                        return '--';
                    }
                },
                {
                    label: '报修人',
                    prop: 'repairName'
                },
                {
                    label: '手机号',
                    prop: 'repairPhone'
                },
                {
                    label: '内容描述',
                    prop: 'repairContent'
                },
                {
                    label: '图片/视频',
                    prop: 'repairFile',
                    slot: 'repairFile'
                },
                {
                    label: '报修时间',
                    prop: 'createDate'
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt'
                }
            ],
            mixins_post: 'get'
        };
    },
    created() {
        this.getorgTree();
        this.mixins_dataUrl = '/sc-community-web/workOrder/page';
        this.mixins_query = {};
        this.mixins_search();
    },
    mounted() {},
    methods: {
        getorgTree() {
            this.$http
                .get('/sc-community/assets/community/list')
                .then((data) => {
                    this.communityArr = data.data;
                    this.$store.commit('setAreaSelect', data.data);
                })

                .catch(function () {});
        },
        dispatchTask(row) {
            console.log(row);
        },
        closeTask(data = {}) {
            new Promise((resolve) => {
                let title = '关闭工单';
                this.$store.dispatch('addPopup', {
                    url: '/operationManagement/workOrders/stepPage/closeTsk.vue',
                    width: '500px',
                    height: '100px',
                    props: {
                        data,
                        callback: resolve
                    },
                    notip: true,
                    title: title
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        addOrEdit() {
            new Promise((resolve) => {
                let title = '添加工单';
                this.$store.dispatch('addPopup', {
                    url: '/operationManagement/workOrders/stepPage/add.vue',
                    width: '500px',
                    height: '500px',
                    props: {
                        callback: resolve
                    },
                    title: title
                });
            }).then(() => {
                this.mixins_search();
            });
        }
    }
};
</script>
<style scoped lang='scss'>
.imgVdio img {
    width: 64px;
}
</style>