medical_lab_ui_mobil/src/views/platform/bpmn/reminders/index.vue

<template>
    <div :class="{'ibps-fixed-toolbar':checkMode}">
        <van-sticky>
            <van-nav-bar
                :title="generateTitle($route.name,$route.params.title||$route.meta.title)"
                :left-text="$t('common.button.back')"
                :right-text="$utils.isNotEmpty(listData)?rightText:''"
                left-arrow
                @click-left="$router.push({ name: 'dashboard' })"
                @click-right="toCheckMode()"
            />
            <van-search v-model="subject" show-action placeholder="请输入搜索关键词" @search="onSearch">
                <!-- <template #left>
          <van-icon name="bars" :class="{'ibps-active':$utils.isNotEmpty(typeId)}" class="ibps-pr-5"
            @click="clickType" />
        </template> -->
                <template #action>
                    <!-- <van-icon name="filter-o" :class="{'ibps-active':stateActive}" @click="clickMoreSearch" /> -->
                </template>
            </van-search>
        </van-sticky>
        <!-- 内容展示区 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" @load="loadData">
                <van-checkbox-group v-model="checkedIds">
                    <van-cell v-for="(item,index) in listData" :key="item.id+index" :title="item.shi_wu_ming_cheng" @click="onClick(item,index)">
                        <template slot="icon">
                            <van-checkbox v-if="checkMode" ref="checkboxes" :name="item.id_" class="ibps-mr-10" />
                            <ibps-avatar
                                v-else
                                :icon="_randomIcon(4)"
                                :text="item.name"
                                :bg-color="_randomColor(1)"
                                radius="4"
                                icon-prefix="ibps-icon"
                                class="ibps-mr-10"
                                @click="overlayShow(item)"
                            />
                            <!-- <van-icon name="notes-o" size="1.5rem" color="#1E90FF" /> -->
                        </template>
                        <template #label>
                            <van-row @click="overlayShow(item)">
                                <van-col span="24">{{ item.shi_wu_shuo_ming_==''?'/':item.shi_wu_shuo_ming_==null?'/':item.shi_wu_shuo_ming_ }}</van-col>
                            </van-row>
                        </template>
                        <!-- 插入内容 -->
                        <span>{{ item.create_time_|formatRelativeTime }}</span>
                        <div>
                            <!-- 系统消息 -->
                            <van-icon name="bell" size="1.3rem" color="#1E90FF" @click="sendSystemInfo(item)" />
                        </div>
                        <div>
                            <!-- 短信催办 -->
                            <van-icon name="comment-o" size="1.3rem" color="#1E90FF" @click="sendSmsInfo(item)" />
                        </div>
                    </van-cell>
                </van-checkbox-group>
                <ibps-list-result-page :result-type="resultType" :error-type="errorType" :result-message="resultMessage" />
            </van-list>
        </van-pull-refresh>
        <ibps-toolbar v-show="checkMode" :actions="mainActions" />
        <!-- 点击搜索的右边显示 -->
        <ibps-more-search
            :show="moreSearchPopup"
            :search-forms="searchForms"
            @callback="onMoreSearch"
            @close="show => moreSearchPopup = show"
            @reset-form="resetForm"
        />
        <van-divider v-if="footText">到底了~</van-divider>
        <van-empty v-if="noData" description="暂无数据" />
        <van-popup v-model="reminderSon" position="bottom" :style="{height:'100%',width:'100%'}">
            <Reminder :son-data="sonData" @son="son" />
        </van-popup>

    </div>
</template>
<script>
import { mapState } from 'vuex'
import ActionUtils from '@/utils/action'
import i18n from '@/utils/i18n'
import random from '@/mixins/random'
import bpmnStatus from '@/mixins/bpmnStatus'
import IbpsMoreSearch from '@/components/ibps-more-search'
import IbpsTypeTree from '@/business/platform/cat/type/tree'
import IbpsAvatar from '@/components/ibps-avatar'
import IbpsToolbar from '@/components/ibps-toolbar'
import IbpsListResultPage from '@/components/ibps-list-result-page'
import IbpsBpmnFormrenderDialog from '@/business/platform/bpmn/form/dialog'
import Reminder from './reminder.vue'
import { sendSmsList } from './sendSms'
import { Notify } from 'vant'

export default {
    components: {
        IbpsMoreSearch,
        IbpsTypeTree,
        IbpsAvatar,
        IbpsToolbar,
        IbpsListResultPage,
        IbpsBpmnFormrenderDialog,
        Reminder
    },
    mixins: [random, bpmnStatus],
    data() {
        const { userId, userList = [], deptList = [], menus, userInfo } = this.$store.getters
        return {
            reminderSon: false,
            sonData: '',
            userId: userId,
            footText: false,
            showPop: false,
            noData: false,
            showConfirmationBoxList: true,
            countTotal: {},
            examPopup: '',
            ReachBottomShow: false,
            moreSearchPopup: false,
            searchForms: {
                forms: [
                    // { prop: 'Q^examName_^SL', label: '考试名称', fieldType: 'text' },
                    //   { prop: 'Q^bankName^SL', label: '题库名称', fieldType: 'text' },
                    { prop: 'examName', label: '考试名称', fieldType: 'text' },
                    { prop: 'bankName', label: '题库名称', fieldType: 'text' },
                    {
                        prop: 'examType', label: '考试类型', fieldType: 'checker', cols: 2, valueKey: 'value', options: [
                            { value: 'trainingExam', label: '培训考试' },
                            { value: 'POCTtraining', label: 'POCT培训' },
                            { value: 'selfAssessment', label: '自主考核' },
                            { value: 'routine', label: '常规' }
                        ]
                    },
                    { prop: ['startDateDL', 'startDateDG'], label: '开始时间', fieldType: 'dateRange', options: { datefmt: 'yyyy-MM-dd' }},
                    { prop: ['limitDateDL', 'limitDateDG'], label: '限考时间', fieldType: 'dateRange', options: { datefmt: 'yyyy-MM-dd' }}
                    // { prop: ['Q^startDate^DL^yyyy-MM-dd', 'Q^startDate^DG^yyyy-MM-dd'], label: '开始时间', fieldType: 'dateRange', options: { datefmt: 'yyyy-MM-dd' }},
                    // { prop: ['Q^limitDate^DL^yyyy-MM-dd', 'Q^limitDate^DG^yyyy-MM-dd'], label: '限考时间', fieldType: 'dateRange', options: { datefmt: 'yyyy-MM-dd' }}
                ]
            },
            mainActions: [{
                'name': '信息催办',
                'type': 'primary',
                'callback': this.batchReminders
            },
            {
                'name': '消息催办',
                'type': 'default',
                'callback': this.smsReminders
            }],
            stateActive: false,
            subject: '',
            moreSubject: '',
            subjectTitle: '',
            typeId: '',
            moreParams: {},
            listData: [],
            pagination: {},
            sorts: {},

            loading: false,
            finished: false,
            refreshing: false,
            resultType: 'init',
            errorType: null,
            resultMessage: null,

            checkMode: false,
            checkedIds: [],
            proInstId: '',
            defId: '',
            formrenderVisible: false,
            formrenderTitle: '',
            typeTreePopup: false,
            keyword: '',
            name: '全部',
            current: 0,
            startTime: [],
            endTime: []
        }
    },
    computed: {
        ...mapState('ibps/user', [
            'info'
        ]),
        rightText() {
            return this.checkMode ? this.$t('common.button.cancel') : this.$t('common.button.manage')
        },
        selectedIds() {
            return this.checkedIds.join(',')
        }
    },

    beforeRouteLeave(to, from, next) {
        if (this.showPop === true) {
        // this.showConfirmationBoxList = true
            this.$refs.childPop.parentSubmit()
            this.showPop = false
            next(false)
        } else {
            next()
        }
    },

    methods: {
        sendFunction(listData) {
            const sendNotice = (req, ups) => {
                req.forEach((item, i) => {
                    this.$common.sendMsg(item)
                })
                updateTimes(ups)
            }
            // 更新数据并重新渲染
            const updateTimes = req => {
                const params = {
                    tableName: 't_gqswb',
                    updList: req
                }
                this.$common.request('update', JSON.stringify(params)).then(() => {
                    Notify({ type: 'success', message: '消息催办成功！' })
                    this.onRefreshPage()
                })
                // this.$common.request('update', JSON.stringify(params)).then(() => {
                // template.$message.success('消息催办成功')
                // template.handleAction('search', position, [], [], 0, { button_type: 'search' })
                // })
            }
            const msgContent = {
                soon: '即将超时，请及时处理！',
                overtime: '已超时，请及时处理！'
            }
            const msgTitle = {
                soon: '计划事务即将到期提醒',
                overtime: '事务超时提醒'
            }
            const noticeList = []
            const upList = []
            let flag = false
            let msg = ''
            const currentTime = new Date(new Date().getTime() + 28800000).toJSON().slice(0, 16).replace('T', ' ')
            listData.forEach(item => {
                const notice = {
                    subject: msgTitle[item.guo_qi_zhuang_tai],
                    content: `${item.shi_wu_ming_cheng}【${item.shi_wu_shuo_ming_}】${msgContent[item.guo_qi_zhuang_tai]}`,
                    receiverId: item.chu_li_ren_id_,
                    canreplay: '0'
                }
                const up = {
                    where: {
                        id_: item.id_
                    },
                    param: {
                        ti_xing_ci_shu_: parseInt(item.ti_xing_ci_shu_) + 1,
                        ti_xing_shi_jian_: currentTime
                    }
                }
                noticeList.push(notice)
                upList.push(up)
                // 校验提醒时间 （间隔不足2小时不允许发送）
                const D = new Date(item.ti_xing_shi_jian_).getTime()
                const N = new Date(currentTime).getTime()
                if (N - D < 7200000) {
                    flag = true
                    msg = `事务【${item.shi_wu_ming_cheng}】上次消息催办时间为${item.ti_xing_shi_jian_}，距今不足两小时，请勿频繁催办！`
                }
            })
            if (flag) {
                Notify({ type: 'primary', message: msg })
                return
            }
            // updateTimes(upList)
            sendNotice(noticeList, upList)
        },
        overlayShow(item) {
            this.reminderSon = true
            this.sonData = item
        },
        son() {
            this.reminderSon = false
        },
        onClick(item, index) {
            if (this.checkMode) {
                this.$refs.checkboxes[index].toggle()
            }
        },
        // 信息批量催办
        batchReminders() {
            // console.log('进入催办函数', this.checkedIds)
            if (this.checkedIds.length === 0) {
                this.$notify({
                    type: 'warning',
                    message: this.$t('common.dialog.selectedRecords')
                })
                return
            }
            this.getSMSInfo(this.checkedIds).then(res => {
                this.sendFunction(res)
            })
        },
        // 消息批量催办
        smsReminders() {
            if (this.checkedIds.length === 0) {
                this.$notify({
                    type: 'warning',
                    message: this.$t('common.dialog.selectedRecords')
                })
                return
            }
            this.getSMSInfo(this.checkedIds).then(res => {
                res.forEach(item => {
                    this.smsFunction(item)
                })
            })
        },
        // 查询所有详细信息
        getSMSInfo(list) {
            const sql = `select * from t_gqswb`
            return new Promise((resolve, reject) => {
                this.$common.request('sql', sql).then(res => {
                    const listData = []
                    res.variables.data.forEach(item => {
                        if (list.includes(item.id_)) {
                            listData.push(item)
                        }
                    })
                    resolve(listData)// 将处理后的数据作为参数传递给resolve
                }).catch(err => {
                    reject(err)
                })
            })
        },
        // 单条数据催办
        sendSystemInfo(item) {
            this.sendFunction([item])
        },
        // 单条短信信息发布
        sendSmsInfo(item) {
            // console.log('发送短信消息', item)
            this.smsFunction(item)
            // sendSmsList().then(res=>{
            //   console.log('发送短信成功', res);
            // })
        },
        // 短信催办函数
        smsFunction(item) {
            if (item.chu_li_ren_dian_h) {
                const obj = {
                    sig: item.id_,
                    list: [
                        { chu_li_ren_: item.chu_li_ren_ming_, chu_li_ren_dian_h: item.chu_li_ren_dian_h, ren_wu_ming_cheng: item.shi_wu_ming_cheng }
                    ]
                }
                // 获取当时时间
                const currentTime = new Date(new Date().getTime() + 28800000).toJSON().slice(0, 16).replace('T', ' ')
                const D = new Date(item.duan_xin_shi_jian).getTime()
                const N = new Date(currentTime).getTime()
                if (N - D < 7200000) {
                    Notify({ type: 'primary', message: `事务【${item.shi_wu_ming_cheng}】上次信息催办时间为${item.duan_xin_shi_jian}，距今不足两小时，请勿频繁催办！` })
                    return
                }
                sendSmsList(obj).then((res) => {
                    // console.log('短信催办成功', res)
                    const up = {
                        tableName: 't_gqswb',
                        updList: [
                            {
                                where: {
                                    id_: item.id_
                                },
                                param: {
                                    duan_xin_ci_shu_: parseInt(item.duan_xin_ci_shu_) + 1,
                                    duan_xin_shi_jian: this.getCurrentDateTime()
                                }
                            }]
                    }
                    this.$common.request('update', JSON.stringify(up)).then(() => {
                        // 更改数据库信息成功
                        console.log('更改数据库信息成功')
                        Notify({ type: 'success', message: '短信催办成功！' })
                        this.onRefreshPage()
                    })
                })
            } else {
                Notify({ type: 'danger', message: '还未上传手机号' })
            }
        },
        getCurrentDateTime() {
            const now = new Date()
            const year = now.getFullYear()
            const month = ('0' + (now.getMonth() + 1)).slice(-2) // 月份从0开始，所以加1，并补零
            const day = ('0' + now.getDate()).slice(-2) // 补零
            const hours = ('0' + now.getHours()).slice(-2) // 补零
            const minutes = ('0' + now.getMinutes()).slice(-2) // 补零
            const seconds = ('0' + now.getSeconds()).slice(-2) // 补零
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
        },
        updataSet(v) {
            this.showPop = v
        },
        generateTitle(name, title) { // generateTitle by vue-i18n
            return i18n.generateTitle(name, title)
        },
        toCheckMode() {
            if (this.$utils.isEmpty(this.listData)) {
                return
            }
            if (this.checkMode) {
                // this.show = true
                this.checkedIds = []
            }
            this.checkMode = !this.checkMode
        },
        clickType() {
            this.typeTreePopup = true
        },
        onSearch() {
            this.stateActive = false
            ActionUtils.initListData(this)
            this.current = 0
            this.listData = []
            this.loadData()
        },
        clickMoreSearch() {
            this.moreSearchPopup = true
            this.stateActive = false
        },
        clickTypeNode(data) {
            this.typeId = data.id
            this.onMoreSearch({})
        },
        // 高级查询
        onMoreSearch(params) {
            if (this.$utils.isNotEmpty(this.typeId)) {
                params['Q^type_id_^SL'] = this.typeId
            }
            this.moreParams = params
            this.onSearch()
            if (this.$utils.isNotEmpty(params)) {
                this.stateActive = true
            }
        },
        resetForm() {
            this.typeId = ''
        },
        // 下拉刷新
        onRefresh() {
            this.footText = false
            this.noData = false
            this.refreshing = true
            this.finished = false
            this.loading = true
            this.onSearch()
        },
        onRefreshPage() {
            this.checkedIds = []
            this.checkMode = false
            this.onRefresh()
        },
        /**
       * 加载数据
       */
        loadData() {
            this.loading = true
            let page = 0
            if (this.current === 0) {
                page = 0
            } else {
                page = this.current * 10
            }
            const key = this.subject
            const sql = `select * from t_gqswb where t_gqswb.shi_wu_ming_cheng like'%` + key + `%'  ORDER BY t_gqswb.create_time_ DESC LIMIT ${page},10 `
            this.$common.request('sql', sql).then(res => {
                if (this.current === 0 && res.variables.data.length === 0) {
                    this.finished = true
                    this.noData = true
                    this.footText = false
                }

                const data = res.variables.data
                this.listData.push(...data)
                this.refreshing = false
                if (this.listData.length !== 0 && (this.listData.length) % 10 !== 0) {
                    this.footText = true
                    this.noData = false
                    this.finished = true
                    return
                } else {
                    this.current++
                }
                this.loading = false
            }).catch(err => {
                console.log(err)
            })
        },
        // 获取格式化参数
        getSearcFormData() {
            let params = {}
            if (this.$utils.isNotEmpty(this.subject)) {
                params['Q^subject_^SL'] = this.subject
            }
            if (this.$utils.isNotEmpty(this.moreParams)) {
                params = Object.assign(params, this.moreParams)
            }
            return ActionUtils.formatParams(
                params,
                this.pagination,
                this.sorts)
        },

        transformTime(timeStamp) {
            const hours = Math.floor(parseInt(timeStamp) / 3600000)
            const minutes = Math.floor((parseInt(timeStamp) % 3600000) / 60000)
            return hours + '小时' + minutes + '分钟'
        }
    }
}
</script>
<style scoped lang="scss">
  .examRow {
    padding: 2% 0;

    .popupTitle {
      text-align: center;
      font-size: 14px;
      color: #555;
    }

    .popupContent {
      text-align: left;
      font-size: 14px;
      color: #777;
    }
  }

  .examRowto {
    margin: 10% 0;

    .van-col {
      text-align: center;

      .van-button {
        width: 80%;
        font-size: 16px;
      }
    }
  }
</style>