cxyy-admin/src/views/message/index.vue

<template>
  <div class="main " v-loading="loading">
    <custom-search-bar :fields="fields.filter((f) => f.isSearch)" v-model="searchForm" @search="search" @reset="toReset"></custom-search-bar>
    <custom-button-bar :fields="buttonFields" @create="toAdd"></custom-button-bar>
    <custom-table :data="data" :fields="fields" @query="search" :total="total" :opera="opera" @remind="toRemind" @view="toView">
      <template #is_use="{ row }">
        <el-tag v-if="row.is_use == '0'" type="success">{{ $t('common.is_use_abled') }}</el-tag>
        <el-tag v-else type="info">{{ $t('common.is_use_disabled') }}</el-tag>
      </template>
    </custom-table>
    <el-dialog v-model="dialog.show" :title="dialog.title" :destroy-on-close="false" @close="toClose" :top="dialog.top">
      <el-row>
        <el-col :span="24" v-if="dialog.type == '1'">
          <custom-form v-model="form" :fields="formFields" :rules="rules" @save="toSave">
            <template #type>
              <el-radio v-for="i in msgTypeList" :key="i.id" :label="i.value">{{ i.label }}</el-radio>
            </template>
            <template #to>
              <to-select v-model="form"></to-select>
            </template>
          </custom-form>
        </el-col>
        <el-col :span="24" v-else="dialog.type == '2'">
          <to-view-com :data="viewData"></to-view-com>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup>
import toSelect from './parts/to.vue'
import toViewCom from './parts/view.vue'
const $checkRes = inject('$checkRes')
import { cloneDeep, get } from 'lodash-es'
const { t } = useI18n()
// 接口
import { MessageStore } from '@/store/api/system/message'
import { DictDataStore } from '@/store/api/system/dictData'
const store = MessageStore()
const dictDataStore = DictDataStore()
const data = ref([])
const searchForm = ref({})
const viewData = ref([])
const fields = [
  { label: t('pages.message.content'), model: 'content' },
  { label: t('pages.message.type'), model: 'type', format: (i) => getDict(i) }
]
const opera = [
  { label: t('pages.message.view'), method: 'view', type: 'primary' },
  { label: t('pages.message.remind'), method: 'remind', type: 'primary' }
]
const buttonFields = [{ label: t('common.create'), method: 'create' }]
let skip = 0
let limit = inject('limit')
const total = ref(0)
const isReadList = ref([])
const msgTypeList = ref([])
// 加载中
const loading = ref(false)
const formFields = [
  { label: t('pages.message.content'), model: 'content', type: 'textarea', options: { rows: 4 } },
  { label: t('pages.message.type'), model: 'type', type: 'radio' },
  { label: t('pages.message.to'), model: 'to', custom: true }
]
const rules = reactive({ content: [{ required: true, message: t('pages.message.contentRuleMessage'), trigger: 'blur' }], type: [{ required: true, message: t('pages.message.typeRuleMessage'), trigger: 'blur' }] })
const dialog = ref({ type: '1', show: false, title: t('pages.message.dialogTitle'), top: '15vh' })
const form = ref({})
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search({ skip, limit })
  loading.value = false
})

const searchOther = async () => {
  let result = await dictDataStore.query({ code: 'messageIsRead', is_use: '0' })
  if ($checkRes(result)) isReadList.value = result.data
  result = await dictDataStore.query({ code: 'messageType', is_use: '0' })
  if ($checkRes(result)) msgTypeList.value = result.data
}
const search = async (query = { skip, limit }) => {
  skip = query.skip
  limit = query.limit
  const info = { skip: query.skip, limit: query.limit, ...searchForm.value }
  const res = await store.query(info)
  if (res.errcode == '0') {
    data.value = res.data
    total.value = res.total
  }
}
// 字典数据转换
const getDict = (data) => {
  const res = msgTypeList.value.find((f) => f.value == data)
  return get(res, 'label')
}
const toRemind = async (data) => {
  const id = get(data, 'id')
  if (!id) return
  const res = await store.remind(id)
  $checkRes(res, t('pages.message.remindSuccess'))
}

// 查看发送对象
const toView = (data) => {
  let values = get(data, 'to', [])
  values = values.map((i) => {
    const is_read = isReadList.value.find((f) => f.value === i.is_read)
    if (is_read) i.is_read = get(is_read, 'label')
    return i
  })
  viewData.value = values
  dialog.value = { type: '2', show: true, title: t('pages.message.viewTitle'), top: '15vh' }
}
// 添加
const toAdd = () => {
  dialog.value = { type: '1', show: true, title: t('pages.message.addDialogTitle'), top: '15vh' }
  form.value.to = []
  form.value.type = '0'
}

const toSave = async () => {
  const data = cloneDeep(form.value)
  let res
  if (get(data, 'id')) res = await store.update(data)
  else res = await store.create(data)
  if ($checkRes(res, true)) {
    search({ skip, limit })
    toClose()
  }
}
// 重置
const toReset = async () => {
  searchForm.value = {}
  await search({ skip, limit })
}
const toClose = () => {
  form.value = {}
  dialog.value = { show: false }
}
// provide
provide('isReadList', isReadList)
provide('codeInfo', form)
</script>
<style scoped lang="scss"></style>