devicesmgt/sgzb-ui/src/views/index.vue

<template>
    <!-- 首页 -->
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
        >
            <el-form-item label="关键字" prop="keyWord">
                <el-input
                    v-model="queryParams.keyWord"
                    placeholder="请输入关键字"
                    clearable
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="待办单号" prop="taskCode">
                <el-input
                    v-model="queryParams.taskCode"
                    placeholder="请输入待办单号"
                    clearable
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="待办事件" prop="taskTypeId">
                <el-select
                    v-model="queryParams.taskTypeId"
                    placeholder="待办事件"
                    clearable
                    filterable
                    style="width: 240px"
                >
                    <el-option
                        v-for="types in taskTypeList"
                        :key="types.taskTypeId"
                        :label="types.taskType"
                        :value="types.taskTypeId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker
                    v-model="dateRange"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >查询</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="typeList" border>
            <el-table-column
                label="序号"
                align="center"
                type="index"
                width="100"
            />
            <el-table-column
                label="任务单号"
                align="center"
                prop="taskCode"
                show-overflow-tooltip
            />
            <el-table-column
                label="待办任务"
                align="center"
                prop="taskType"
                show-overflow-tooltip
            />
            <el-table-column label="待办事件" align="center" prop="taskEvent">
            </el-table-column>
            <el-table-column
                label="任务创建人"
                align="center"
                prop="createName"
                show-overflow-tooltip
            />
            <el-table-column
                label="创建时间"
                align="center"
                prop="createTime"
                width="180"
            >
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) || '-' }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="{ row }">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handlePreview(row.taskTypeId, row.taskCode)"
                        >查 看</el-button
                    >

                    <!-- 代办事件为领料任务时显示催办按钮 -->
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit-outline"
                        style="color: #e6a23c"
                        v-if="row.taskTypeId == 29"
                        @click="
                            handleUrging(
                                row.taskTypeId,
                                row.taskCode,
                                row.taskEvent,
                                row.taskId,
                            )
                        "
                        >催 办</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 催办弹框 -->
        <el-dialog
            title="催办"
            :visible.sync="urgingDialogVisible"
            width="60%"
            append-to-body
            :before-close="handleCloseUrgingDialog"
        >
            <el-form label-width="120px" label-position="right">
                <el-form-item label="待办人：">
                    <el-row>
                        <el-tag
                            class="addressee"
                            :closable="toPersonInfo.length > 1"
                            type="info"
                            v-for="(item, v) in toPersonInfo"
                            :key="v.noticeUser"
                            @close="handleDeleteToPerson(v)"
                            >{{ item.v_name }}</el-tag
                        >
                    </el-row>
                </el-form-item>
                <el-form-item label="通知内容：">
                    <div
                        class="message-info"
                        v-html="sendMessageParams.message"
                    >
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    icon="el-icon-position"
                    size="medium"
                    type="primary"
                    @click="submitForm"
                    >发 送</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        getToDoList,
        getTaskTypeList,
        getToPersonInfoAp,
        sendUrgingMessageApi,
    } from '@/api/index'
    export default {
        name: 'myIndex',
        data() {
            return {
                // 遮罩层
                loading: false,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 字典表格数据
                typeList: [],
                // 日期范围
                dateRange: [],
                taskTypeList: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    keyWord: '',
                    taskCode: '',
                    taskTypeId: '',
                },

                /* 列表查看跳转的路由地址 */
                previewRouterList: [
                    /* 新购任务 */
                    {
                        taskTypeId: 23,
                        routerPath: 'store/newBuy/newDevicesList',
                    },
                    /* 领料任务 */
                    {
                        taskTypeId: 29,
                        routerPath: 'claimAndRefund/receive/receiveManage',
                    },
                    /* 退料任务 */
                    {
                        taskTypeId: 36,
                        routerPath: 'claimAndRefund/return/returnApply',
                    },
                    /* 维修任务 */
                    {
                        taskTypeId: 41,
                        routerPath: 'repairTest/repair/repair',
                    },
                ],

                /* 催办弹框 */
                urgingDialogVisible: false,
                /* 待办人信息 */
                toPersonInfo: [],
                /* 发送参数 */
                sendMessageParams: {
                    taskId: '',
                    message: '',
                    // 接收人
                    bmNoticeInfoList: [],
                },
            }
        },
        created() {
            this.getList()
            this.getTaskTypeList()
        },
        methods: {
            getTaskTypeList() {
                getTaskTypeList().then((response) => {
                    this.taskTypeList = response.data
                })
            },
            /** 查询字典类型列表 */
            getList() {
                this.loading = true
                console.log(this.dateRange)
                if (this.dateRange && this.dateRange.length > 0) {
                    this.queryParams.startTime = this.dateRange[0]
                    this.queryParams.endTime = this.dateRange[1]
                } else {
                    this.queryParams.startTime = ''
                    this.queryParams.endTime = ''
                }
                getToDoList(this.queryParams).then((response) => {
                    this.typeList = response.rows
                    this.total = response.total
                    this.loading = false
                })
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1
                this.getList()
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRange = []
                this.resetForm('queryForm')
                this.handleQuery()
            },

            /**
             * 列表查看操作===========================================================
             */
            handlePreview(id, key) {
                const [routerInfo] = this.previewRouterList.filter(
                    (e) => e.taskTypeId == id,
                )
                this.$router.push({
                    path: routerInfo.routerPath,
                    query: {
                        keyWord: key,
                    },
                })
            },

            /* 催办按钮 */
            async handleUrging(id, taskCode, taskStatus, taskId) {
                /* 先获取催办人信息 */
                const { data: res } = await getToPersonInfoAp({
                    taskStatus,
                })
                res.map((e) => {
                    this.toPersonInfo.push({
                        noticeUser: e.userId,
                        phone: e.phonenumber,
                        modelName: '领料催办',
                        companyId: e.companyId,
                        v_name: e.nickName,
                    })
                })

                this.sendMessageParams.message = `宁夏送变电工程有限公司提示：您有一条任务单号为 <span style="color:#529b2e">${taskCode}</span> 的待办任务未处理，请及时处理。`
                this.sendMessageParams.taskId = taskId

                this.urgingDialogVisible = true
            },

            /* 取消其中某一个待办人 */
            handleDeleteToPerson(v) {
                this.toPersonInfo.splice(v, 1)
            },

            /* 催办发送 */
            async submitForm() {
                this.sendMessageParams.bmNoticeInfoList = this.toPersonInfo
                const res = await sendUrgingMessageApi(this.sendMessageParams)
                if (res.code == 200) {
                    this.$message.success('发送成功！')
                    this.toPersonInfo = []
                    this.urgingDialogVisible = false
                } else {
                    this.$message.error(res.msg)
                }
            },
            /* 弹框右上角关闭按钮 */
            handleCloseUrgingDialog() {
                this.toPersonInfo = []
                this.urgingDialogVisible = false
            },
        },
    }
</script>

<style scoped>
    .message-info {
        height: 100px;
        padding: 0 10px;
        border: 1px solid #ccc;
        letter-spacing: 1px;
        border-radius: 3px;
        font-size: 16px;
        font-weight: bold;
    }

    .addressee {
        margin-left: 3px;
    }
</style>