rax-medical/src/views/logs-manage/message-manage.vue

<template>
    <div class="table-page custom-table-table">
        <h3 class="main-color" style="font-size: 24px;line-height: 1;padding: 28px 0;">消息管理</h3>
        <div class="search-part ">
            <div class="search-cell">
                <span class="label">消息类型</span>
                <el-select v-model="queryParams.type" placeholder="请选择消息类型">
                    <el-option v-for="item in getMessageType()" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
            <div class="search-cell">
                <span class="label">消息内容</span>
                <el-input v-model="queryParams.content" placeholder="请输入消息内容"></el-input>
            </div>
            <el-button type="primary" icon="Search" @click="queryData(queryParams)">查询</el-button>
            <!-- <el-button icon="Refresh" @click="queryParams = {}">重置</el-button> -->
        </div>
        <div class="button-part" style="justify-content: space-between;">
            <el-button type="primary" icon="FirstAidKit" @click="addData">新增</el-button>
        </div>
        <div class="table-part">
            <el-table ref="tableRef" :data="tableData" height="100%" border show-overflow-tooltip>
                <el-table-column property="type" label="消息类型" width="120" align="center" />
                <el-table-column property="content" label="消息内容" width="120" align="center" />
                <el-table-column property="creator" label="创建人" width="120" align="center" />
                <el-table-column label="创建时间" width="220" align="center">
                    <template #default="scope">{{ dateFormater('yyyy-MM-dd HH:mm:ss', scope.row.creatTime) }}</template>
                </el-table-column>
                <el-table-column property="editor" label="修改人" width="120" align="center" />
                <el-table-column label="修改时间" width="220" align="center">
                    <template #default="scope">{{ dateFormater('yyyy-MM-dd HH:mm:ss', scope.row.editTime) }}</template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <span @click.stop>
                            <el-button link icon="EditPen" @click="editData(scope.row)">修改</el-button>
                            <el-button type="danger" link icon="Delete" @click="removeData(scope.row)">删除</el-button>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-part">
            <CommonPagination :total="100" @paginationChange="paginationChange" />
        </div>
    </div>
    <el-dialog v-model="isFormDialog" :title="formDialogTitle" width="40%"><MessageForm ref="messageFormRef" :type="formDialogTitle === '新增消息' ? 'add' : 'edit'" @close="isFormDialog = false" /></el-dialog>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import CommonPagination from '@/components/common-pagination.vue'
import MessageForm from './form/message-form.vue'
import { tableRemoveRow } from '@/utils/table-util'
import { getMessageType } from '@/static-data/core'
import { dateFormater } from '@/utils/date-util'

const router = useRouter()
const route = useRoute()

const tableRef = ref()
const messageFormRef = ref()
const isFormDialog = ref(false)
const formDialogTitle = ref('')
const queryParams = ref({} as any)
const tableData = ref([] as any)

queryData({type: '公告', content: '测试测试测试'})

function queryData (e: any) {
    tableData.value = []
    while (tableData.value.length < 10) {
        tableData.value.push({
            type: e.type,
            content: e.content,
            creator: 'admin',
            creatTime: new Date(),
            editor: 'admin',
            editTime: new Date(),
            hospital: '',
            showDept: '',
            permissions: '',
            link: '',
            isHot: true,
        })
    }
}

const addData = () => {
    isFormDialog.value = true
    formDialogTitle.value = '新增消息'
    setTimeout(() => {
        messageFormRef.value.resetData()
    }, 0)
}
const editData = (e: any) => {
    isFormDialog.value = true
    formDialogTitle.value = '修改'
    setTimeout(() => {
        messageFormRef.value.resetData()
        messageFormRef.value.formData = JSON.parse(JSON.stringify(e))
    }, 0)
}
const removeData = (e?: any) => {
    const selectRow = e || tableRef.value.getSelectionRows()
    tableRemoveRow({ data: selectRow }, (res: boolean) => {
        if (res) {
            console.log('调用删除', selectRow)
        }
    })
}
const paginationChange = (page: number, size: number) => {

}
</script>

<style lang='scss' scoped>
.table-page.custom-table-table {
    .search-part {
        padding: 40px 30px;
        border: 1px solid $border-color;
        &>.search-cell ~ .search-cell {
            margin-left: 50px;
        }
        .search-cell {
            flex-grow: 1;
        }
        &>.el-button {
            margin-left: 100px;
        }
    }
    .table-part {
        height: calc(100% - 292px);
    }
}

</style>