dy-admin-manager/src/views/musicInspection/index.vue

<!--  -->
<template>
    <div class="m-container">
        <h2>
            <div class="squrt"></div>乐团巡查
        </h2>
        <div class="m-core">
            <save-form :inline="true" ref="searchForm" @submit="search" @reset="onReSet" :model="searchForm">
                <el-form-item prop='organId'>
                    <el-select class='multiple'
                                v-model.trim="searchForm.organId"
                                filterable
                                clearable
                                @change="onBranchChange"
                                placeholder="请选择分部">
                        <el-option v-for="(item,index) in selects.branchs"
                                :key="index"
                                :label="item.name"
                                :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop='cooperationOrganId'>
                    <el-select class='multiple'
                                v-model.trim="searchForm.cooperationOrganId"
                                filterable
                                clearable
                                placeholder="请选择合作单位">
                        <el-option v-for="(item,index) in cooperationList"
                                :key="index"
                                :label="item.name"
                                :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop='userId'>
                    <el-select class='multiple'
                                v-model.trim="searchForm.userId"
                                filterable
                                clearable
                                placeholder="请选择乐团主管">
                        <el-option v-for="(item,index) in educationList"
                                :key="index"
                                :label="item.userName"
                                :value="item.userId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop='musicGroupId'>
                    <el-select class='multiple'
                                v-model.trim="searchForm.musicGroupId"
                                filterable
                                clearable
                                placeholder="请选择乐团">
                        <el-option v-for="(item,index) in musicGroupList"
                                :key="index"
                                :label="item.name"
                                :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop='conclusionStatus'>
                    <el-select class='multiple'
                                v-model.trim="searchForm.conclusionStatus"
                                clearable
                                placeholder="巡查项目是否异常">
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop='createTimer'>
                    <el-date-picker v-model.trim="searchForm.createTimer"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="巡查开始日期"
                                end-placeholder="巡查结束日期"
                                :picker-options="{ firstDayOfWeek: 1 }">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" native-type="submit">搜索</el-button>
                    <el-button native-type="reset" type="primary">重置</el-button>
                </el-form-item>
            </save-form>
            <div class="tableWrap">
                <el-table style="width: 100%"
                        :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                        :data="tableList">
                <el-table-column align="center"
                                prop="id"
                                width="120px"
                                label="巡查编号">
                </el-table-column>
                <el-table-column align="center"
                                label="所属分部">
                    <template slot-scope="scope">
                        {{ scope.row.organName }}(<copy-text>{{scope.row.organId}}</copy-text>)
                    </template>
                </el-table-column>
                <el-table-column align="center"
                                prop="cooperationName"
                                label="合作单位"></el-table-column>
                <el-table-column align="center"
                                prop="musicGroupName"
                                label="巡查乐团">
                    <template slot-scope="scope">
                        {{ scope.row.musicGroupName }}(<copy-text>{{scope.row.musicGroupId}}</copy-text>)
                    </template>
                </el-table-column>
                <el-table-column align="center"
                                label="乐团主管">
                    <template slot-scope="scope">
                        {{ scope.row.realName }}(<copy-text>{{ scope.row.userId }}</copy-text>)
                    </template>
                </el-table-column>
                <el-table-column align="center"
                                label="巡查项目异常">
                    <template slot-scope="scope">
                    {{ scope.row.conclusionStatus ? '异常' : '正常' }}
                    </template>
                </el-table-column>
                <el-table-column align="center"
                                prop="subject"
                                label="巡查时间">
                    <template slot-scope="scope">
                        {{ dayjs(scope.row.planStart).format('YYYY-MM-DD HH:mm') }}~
                        {{ dayjs(scope.row.planEnd).format('HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column align="center"
                                prop="submitedTime"
                                label="提交时间"></el-table-column>
                <el-table-column align="center"
                                prop="status"
                                label="提交状态">
                    <template slot-scope="scope">
                        {{ scope.row.status | statusFormat }}
                    </template>
                </el-table-column>
                <el-table-column align="center"
                                label="处理方式">
                    <template slot-scope="scope">
                        <overflow-text width="100%" :text="scope.row.memo"></overflow-text>
                    </template>
                </el-table-column>
                <el-table-column align="center"
                                width="250px"
                                label="操作">
                    <template slot-scope="scope">
                        <auth auths="inspectionItemPlanConclusion/getPlanConclusion" v-if="scope.row.status != 0">
                            <el-button type="text" @click="onLook(scope.row)">查看</el-button>
                        </auth>
                        <auth auths="inspectionItemPlanConclusion/GPS-INFO" v-if="scope.row.status != 0">
                            <el-button type="text" @click="onGPS(scope.row)">GPS定位</el-button>
                        </auth>
                        <auth auths="inspectionItemPlanConclusion/exportPlanConclusion" v-if="scope.row.status != 0">
                            <el-button type="text" @click="onExport(scope.row)">下载</el-button>
                        </auth>
                        <auth auths="inspectionItemPlan/updateMemo" v-if="scope.row.conclusionStatus == 1 || scope.row.status == 0">
                            <el-button type="text" @click="handleClick(scope.row)">立即处理</el-button>
                        </auth>
                    </template>
                </el-table-column>
                </el-table>
                <pagination :total.sync="pageInfo.total"
                            sync
                            :page.sync="pageInfo.page"
                            :limit.sync="pageInfo.limit"
                            :page-sizes="pageInfo.page_size"
                            @pagination="getList" />
            </div>
        </div>

        <el-dialog title="乐团巡查表" :visible.sync="tableStatus" width="1200px">
            <look-detail v-if="tableStatus" :detail="planDetail" />
        </el-dialog>

        <el-dialog :visible.sync="gpsVisible" width="1000px" append-to-body>
            <gpsLoction v-if="gpsVisible"
                  :activeRow='activeRow' />
        </el-dialog>

        <el-dialog title="处理方式" :visible.sync="handleStatus"
                @close="handleClose('ruleForm')"
                width="500px">
            <el-form :model="handleForm"
                    label-position="top"
                    ref="ruleForm">
                <el-form-item label="处理方式"
                            prop="memo"
                            :rules="[{ required: true, message: '请输入处理方式', trigger: 'blur' }]">
                    <el-input type="textarea"
                            v-model.trim="handleForm.memo"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleStatus = false">取 消</el-button>
                <el-button @click="onHandleSubmit('ruleForm')"
                        type="primary">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import LookDetail from './modals/lookDetail'
import dayjs from 'dayjs'
import { inspectionItemPlan, updateMemo } from './api'
import { findEducationUsers } from '@/api/buildTeam'
import { queryByOrganId } from '@/api/systemManage'
import { getTeamList } from '@/api/teamServer'
import { getTimes } from "@/utils";
import { Export } from '@/utils/downLoadFile'
import gpsLoction from "../teamDetail/componentCourse/gpsLocation";
export default {
    components: { pagination, LookDetail, gpsLoction },
    data () {
        return {
            educationList: [],
            cooperationList: [],
            musicGroupList: [],
            activeRow: null,
            planDetail: null,
            searchForm: {
                organId: null,
                userId: null,
                musicGroupId: null,
                conclusionStatus: null,
                cooperationOrganId: null,
                createTimer: []
            },
            tableList: [],
            pageInfo: {
                // 分页规则
                limit: 10, // 限制显示条数
                page: 1, // 当前页
                total: 0, // 总条数
                page_size: [10, 20, 40, 50] // 选择限制显示条数
            },
            handleStatus: false,
            handleForm: {
                id: null,
                memo: null,
            },
            tableStatus: false,
            gpsVisible: false,
        };
    },
    async mounted () {
        const { query } = this.$route
        if (query.organId) {
          this.searchForm.organId = query.organId
        }
        if (query.conclusionStatus) {
          this.searchForm.conclusionStatus = Number(query.conclusionStatus)
        }
        this.getList()
        // 分部
        await this.$store.dispatch('setBranchs')

        //  获取乐团主管
        await findEducationUsers().then(res => {
            if (res.code == 200) {
                this.educationList = res.data
            }
        });

        // 乐团列表 {只查询进行中的乐团}
        await getTeamList({ musicGroupStatus: 'PROGRESS', rows: 9999 }).then(res => {
            if(res.code == 200) {
                this.musicGroupList = res.data.rows
            }
        })
    },
    methods: {
        dayjs,
        async getList() {
            try {
                let { createTimer, ...rest } = this.searchForm
                let params = {
                    ...rest,
                    page: this.pageInfo.page,
                    rows: this.pageInfo.limit,
                    ...getTimes(createTimer, ["startTime", "endTime"]),
                }
                const res = await inspectionItemPlan(params)
                this.tableList = res.data.rows
                this.pageInfo.total = res.data.total
            } catch(err) {}
        },
        onLook(row) {
            this.planDetail = row
            this.tableStatus = true
        },
        onGPS(row) {
            this.activeRow = {
                schoolLongitudeLatitude: row.schoolGps,
                signOutLongitudeLatitude: row.submitedGps,
            }
            this.gpsVisible = true
        },
        async onExport(row) {
            await Export(this, {
                url: '/api-web/inspectionItemPlanConclusion/exportPlanConclusion',
                fileName: '巡查结果.xlsx',
                method: 'get',
                params: {
                    planId: row.id
                }
            }, '您确定导出巡查结果?')
        },
        async onBranchChange(value) {
            if(!value) {
                this.cooperationList = []
                this.searchForm.cooperationOrganId = null
                return
            }
            // 合作单位
            await queryByOrganId({ organId: value }).then(res => {
                if(res.code == 200) {
                    this.cooperationList = res.data
                }
            })
        },
        search() {
            this.pageInfo.page = 1
            this.getList()
        },
        onReSet() {
            this.$refs['searchForm'].resetFields()
            this.pageInfo.page = 1
            this.getList()
        },
        handleClick(row) {
            this.handleForm.id = row.id
            this.handleForm.memo =  row.memo
            this.handleStatus = true
        },
        onHandleSubmit(formName) {
            this.$refs[formName].validate(async (valid) => {
                if(valid) {
                    console.log(this.handleForm)
                    try {
                        await updateMemo(this.handleForm)
                        this.$message.success('处理成功')
                        this.getList()
                        this.handleStatus = false
                    } catch(err) {}
                }
            })
        },
        handleClose(formName) {
            this.$refs[formName].resetFields()
        }
    },
    filters: {
        statusFormat(value) {
            let template = ['未提交', '正常', '异常']
            return template[value]
        }
    }
};
</script>
<style lang='scss' scoped>
/deep/.el-dialog__body {
    padding: 10px 20px;
}
/deep/.description-title {
    margin: 0 !important;
}
</style>