Web/admin.ui.plus-master/src/views/admin/statement/alarmRules/template.vue

<!-- 规则列表 -- 表格 -->
<template>
    <div class="layout-pd">
        <el-row>
            <!--操作-->
            <el-col :xs="24">
                <el-card class="mt8" shadow="hover">
                    <el-form :model="Data.Filter" @submit.stop.prevent>
                        <el-form-item prop="name" style="width: 100%">
                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                                <el-form-item label="模板名称">
                                    <el-input v-model="Data.time1" placeholder="请输入模板名称" clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="14" :md="10" :lg="8" :xl="6" class="mb20">
                              <el-form-item label="状态">
                                  <el-select  placeholder="请选择上传状态">
                                   <el-option label="所有" :value="''"></el-option>
                                   <el-option label="正常" :value="''"></el-option>
                                   <el-option label="未授权" :value="''"></el-option>
                                 </el-select>
                             </el-form-item>
                           </el-col>
                           <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="模板类型">
                  <el-select placeholder="请选择模板类型类型">
                    <el-option label="所有" :value="''"></el-option>
                    <el-option label="电子邮箱" :value="''"></el-option>
                    <el-option label="微信" :value="''"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
                        </el-form-item>

                    </el-form>
 
                    <hr>

                    <!-- 按钮 -->
                    <el-row justify="space-between" class="submit-button"  style="margin-bottom: -9px;">
                        <el-row>
                            <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
                            <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
                        </el-row>
                        <el-row>
                            <el-button type="primary" icon="ele-RefreshRight" @click="addTemplate('')"> 添加 </el-button>
                        </el-row>
                    </el-row>
                </el-card>
            </el-col>
            <!--表格-->
            <el-col :xs="24">
                <el-card style="height: 55vh" class="my-fill mt8" shadow="hover">
                    <el-table ref="multipleTableRef" v-loading="Data.loading" stripe :data="Data.tableModel"
                        row-key="id" style="width: 100%">
                        <el-table-column v-for="column in Data.dynamicColumns" :key="column.prop" :prop="column.prop"
                            :label="column.label" />
                            <el-table-column prop="creator" label="添加人" />
                            <el-table-column prop="createTime" label="添加时间" />
                        <el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
                            <template #default="{ row }">
                                <el-tag type="success" v-if="row.isActive">启用</el-tag>
                                <el-tag type="danger" v-else>禁用</el-tag>
                            </template>
                        </el-table-column>

                        <!-- 操作 -->
                        <el-table-column label="操作" fixed="right" header-align="center" align="center"
                            class="right-operation" width="100" >
                            <template #default="{ row }">
                                <el-link class="my-el-link mr12 ml12" @click="addTemplate(row)" type="primary"
                                    icon="ele-Edit" :underline="false" target="_blank">编辑</el-link>
                                <el-link class="my-el-link mr12 ml12" @click="toDelete(row.id)" type="primary"
                                    icon="ele-Delete" :underline="false" target="_blank">删除</el-link>
                                <el-link class="my-el-link mr12 ml12" @click="toOpen(row)" type="primary"
                                    icon="ele-SwitchButton" :underline="false" target="_blank">启用</el-link>
                            </template>
                        </el-table-column>

                    </el-table>
                    <div class="my-flex my-flex-end" style="margin-top: 20px">
                        <el-pagination v-model:currentPage="Data.pageInput.currentPage"
                            v-model:page-size="Data.pageInput.pageSize" :total="Data.total"
                            :page-sizes="[5, 10, 20, 50, 100]" small background @size-change="onSizeChange"
                            @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <EditDialog ref="editDialogRef" />

    </div>

</template>

<script setup lang="ts" name="">
import { defineAsyncComponent, onBeforeMount, onMounted, reactive, ref, watch } from "vue";
import { pushTemplateModel_SearchFilter, pushTemplateModel, PageInputPushTemplateFilterModel } from "/@/api/admin/AlarmService/pushTemplateDto";
import { pushTemplateApi } from "/@/api/admin/AlarmService/pushTemplateApi";
import eventBus from "/@/utils/mitt";


/**页面对象 */
const Data = reactive({
    time1: '',
    /** 选择框列表 */
    statusList: [] as any,
    supplierList: [] as any,
    /**加载显示 */
    loading: false,
    /**条件查询模块 */
    Filter: {
        /** 模板名称 */
        templateName: ""
    } as pushTemplateModel_SearchFilter,
    /**表格信息 */
    tableModel: [] as pushTemplateModel[],
    tableData: [] as any,
    /**动态表头 */
    dynamicColumns: [
        { prop: 'templateName', label: '模板名称' },
        { prop: 'templateType', label: '模板类型' },
        { prop: 'templateContent', label: '模板内容' },
    ],
    /**分页总数 */
    total: 0,
    /**分页标识 */
    pageInput: {
        currentPage: 1,
        pageSize: 10,
    } as PageInputPushTemplateFilterModel,
})

/**引入组件*/
const EditDialog = defineAsyncComponent(() => import('./components/pushTemplate.vue'))
const editDialogRef = ref()


// 条件查询
const init = async () => {
    Data.loading = true
    const res: any = await new pushTemplateApi().getPage({ ...Data.pageInput, filter: Data.Filter })
    // console.log(res)
    Data.tableModel = res?.data ?? []
    // Data.total = 100   // ---- 接口中没有总的数据量,后端添加后获取赋值，即可实现页码跳转
    Data.loading = false
    dataChange()
}

const onQuery = () => {
    init()
}

/**重置查询条件 */
const resetQuery = () => {
    Data.Filter.templateName = ''
}
/**重置 */
const onReset = () => {
    resetQuery()
    init()
}

/** 
 * 添加模板
*/
const addTemplate = ((row: any) => {
    editDialogRef.value.openDialog(row)
    init()
})

/**
* 页条变化
* @param val
*/
const onSizeChange = (val: number) => {
    Data.pageInput.pageSize = val
    init()
}

/**
 * 页数 变化
 * @param val
 */
const onCurrentChange = (val: number) => {
    Data.pageInput.currentPage = val
    init()
}

/** 数据转换 */
const dataChange = (() => {
    // Data.tableData = []
    // // 推送方式
    // let index = 0
    Data.tableModel.forEach((item: any) => {

        if (item.templateType == 'wx') {
            item.templateType = "微信"
        } else if (item.templateType == 'email') {
            item.templateType = "电子邮箱"
        }
    })
})

// 操作
const toDelete = (async (id: number) => {
    await new pushTemplateApi().deliteData({ 'id': id }).then((res) => {
        eventBus.emit('refreshView')
    })

})

const toOpen = (async (row: any) => {
    row.isActive = !row.isActive
    await new pushTemplateApi().addForm(row).then(() => {
        eventBus.emit('refreshView')
    })
})

// 挂载前
onBeforeMount(() => {
    eventBus.off('refreshView')
})

// 挂载时
onMounted(async () => {
    await init()
    eventBus.off('refreshView')
    eventBus.on('refreshView', async () => {
        await init()
    })
})

</script>

<style scoped lang="scss">
.el-input,
.el-select {
    width: 240px;
}

/* 输入框标签固定四个字符宽度 */
::v-deep .el-form-item__label {
    // 字体大小14，4个字符，12px右间距
    width: 14*4px+12px;
    justify-content: start;
}

/* 数据表头 设置灰色样式 */
::v-deep .el-table th.el-table__cell {
    background-color: #F6F6F6;
}
</style>