zhywpt-web/src/views/messagePush/pushManagement/shortMessage/index.vue

<template>
  <div>
    <crud-template class="as-weight" :ref="(el) => (crudRef = el)" :home-data="field" @refreshLeft="refreshLeft"
      :tableData="tableData" @btnSearch="btnSearch" @CurrentChange="handleCurrentChange"
      @pageSizeChange="pageSizeChange">
      <template #search>
        <el-input maxlength="60" v-trim clearable v-model="searchForm.id" style="width: 200px"
          placeholder="请输入消息记录id" />
        <el-input maxlength="60" v-trim clearable v-model="searchForm.title" style="width: 200px"
          placeholder="请输入消息标题" />
        <el-date-picker unlink-panels v-model="timeValue" type="datetimerange" range-separator="到"
          start-placeholder="查询开始日期" end-placeholder="查询结束日期" value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss" @change="dateChangeHandle" :default-time="defaultTime" />
        <el-select clearable v-model="searchForm.sendResult" placeholder="请选择发送状态" style="width: 200px">
          <el-option v-for="item in sendResultOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </template>
      <template #searchCustomButton>
        <el-button type="primary" icon="Upload" @click="isUploadShow = true">
          导入
        </el-button>
      </template>
      <template #CustomButton>
        <el-button type="primary" @click="handleAdd">短信信息推送</el-button>
      </template>
      <template #operation="{ scope }">
        <el-button type="success" @click="handleData(scope, 'detail')" size="small">
          详情
        </el-button>
        <el-button type="primary" @click="handleData(scope, 'edit')" size="small"
          v-if="scope.row.sendResult === 'WAIT'">
          编辑
        </el-button>
        <el-button type="warning" @click="retransmission(scope)" size="small" v-if="handleShow(scope)">
          重发消息
        </el-button>
      </template>
    </crud-template>
    <addOrEditDialog v-model="isShow" @handleSendSuccess="handleSendSuccess" v-if="updateShow" :dataList="selectedData"
      :addOrEditText="addOrEditText" />
    <detailDialog v-model="isDetailShow" :dataList="selectedData" :detailInfo="detailInfo" :column="2" />
    <uploadDialog v-model="isUploadShow" :messageType="searchForm.messageType" messageImportType="HLTSHORT" />
  </div>
</template>

<!-- 短信信息推送 -->
<script lang="ts" setup>
  // @ts-ignore crudFrom模板
  import CrudTemplate from '@/crud/index.vue'
  import { ref, onMounted, onBeforeMount, nextTick } from 'vue'
  import addOrEditDialog from './components/addOrEditDialog.vue'
  import detailDialog from '@/views/messagePush/pushManagement/components/detailDialog/index.vue'
  import uploadDialog from '@/views/messagePush/pushManagement/components/uploadDialog/index.vue'

  import {
    sendResultOption,
    handleInit,
  } from '@/views/messagePush/pushManagement/components/common'
  import crudConfig from '@/views/messagePush/pushManagement/components/commonCrudConfig'
  // @ts-ignore
  import BaseService from '@/utils/baseService'
  import { ElMessage } from 'element-plus'

  // 拿到配置
  const { field } = crudConfig({
    searchOperation: {
      isTemplate: true,
      templateUrl:
        import.meta.env.VITE_APP_UPLOAD_URL +
        'sett-minio/template/消息推送/短信消息批量发送模板.xlsx',
      templateFileName: '短信消息批量发送模板',
    },
  })

  // 获取数据，查询条件
  const searchForm = ref({
    startTime: '', //开始时间
    endTime: '', //结束时间
    tradingDate: '', id: '',
    title: '', //标题
    messageType: 'SHORT', //消息类型
    messageChannel: 'HLT_SHORT', //消息渠道
    sendResult: '', //发送结果
  })

  // 搜索重置
  function refreshLeft() {
    field.value.paging.currentPage = 1
    searchForm.value = {
      id: '',
      startTime: '', //开始时间
      endTime: '', //结束时间
      tradingDate: '',
      title: '', //标题
      messageType: 'SHORT', //消息类型
      messageChannel: 'HLT_SHORT', //消息渠道
      sendResult: '', //发送结果
    }
    getList()
    tableData.value = []
  }

  const {
    timeValue,
    isUploadShow,
    dateChangeHandle,
    defaultTime,
    crudRef,
    tableData,
    getList,
    btnSearch,
    handleCurrentChange,
    pageSizeChange,
    retransmission,
    handleShow,
  } = handleInit(searchForm, field)

  const isShow = ref(false)
  const isDetailShow = ref(false)
  const isEditShow = ref(false)
  const selectedData = ref<any>({})
  const addOrEditText = ref('推送')
  const handleAdd = () => {
    selectedData.value = {}
    nextTick(() => {
      addOrEditText.value = '推送'
      isShow.value = true
    })
  }
  const handleData = (scope, key) => {
    console.log(scope)
    if (key == 'detail') {
      isDetailShow.value = true
    } else {
      addOrEditText.value = '修改'
      isShow.value = true
    }
    selectedData.value = scope.row
  }

  const mobileListHide = (detailList, userShow) => {
    if (!userShow && !detailList.importMessage) {
      return false
    } else {
      return true
    }
  }
  const detailInfo = [
    {
      label: '消息内容',
      key: 'message',
      isDisImport: true,
      // isHide: isMessage, //可隐藏
    },
    {
      label: '导入文件下载',
      key: 'excelUrl',
      // isHide: importMessage, //可隐藏
      isImport: true, // 导入展示
      type: 'button',
      btnLabel: '文件下载',
      handleBtn(data) {
        // 下载文件
        const url = import.meta.env.VITE_APP_UPLOAD_URL + data.excelUrl
        const fileName = data.fileName || data.excelUrl.split('/').pop() || ''
        BaseService.getDownload(url, fileName, true)
      },
    },
    {
      label: '文件名',
      key: 'fileName',
      isImport: true, // 导入展示
    },
    {
      label: '手机号',
      key: 'mobileList',
      type: 'tag',
      isHide: mobileListHide, //可隐藏
    },
  ]
  // 消息推送后刷新页面
  const updateShow = ref(true)
  const handleSendSuccess = () => {
    getList()
    // 重置页面内容
    updateShow.value = false
    nextTick(() => {
      updateShow.value = true
    })
  }
</script>