|
@@ -1,41 +1,67 @@
|
|
|
<template>
|
|
|
<div class="auxiliary-msg-template-container layout-padding">
|
|
|
<div class="layout-padding-auto layout-padding-view pd20">
|
|
|
- <ProTable
|
|
|
- ref="proTableRef"
|
|
|
- :columns="columns"
|
|
|
- :data="state.tableData"
|
|
|
- @updateTable="queryList"
|
|
|
+ <el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
|
|
|
+ <el-form-item label="关键字" prop="Keyword">
|
|
|
+ <el-input
|
|
|
+ v-model="state.queryParams.Keyword"
|
|
|
+ placeholder="模板名称/模板内容/模板编码"
|
|
|
+ clearable
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
+ class="keyword-input"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="queryList" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
|
|
|
+ <el-button @click="resetQuery(ruleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <vxe-toolbar
|
|
|
+ ref="toolbarRef"
|
|
|
:loading="state.loading"
|
|
|
- :total="state.total"
|
|
|
- v-model:page-index="state.queryParams.PageIndex"
|
|
|
- v-model:page-size="state.queryParams.PageSize"
|
|
|
+ custom
|
|
|
+ :refresh="{
|
|
|
+ queryMethod: handleQuery,
|
|
|
+ }"
|
|
|
>
|
|
|
- <template #table-search>
|
|
|
- <el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
|
|
|
- <el-form-item label="关键字" prop="Keyword">
|
|
|
- <el-input
|
|
|
- v-model="state.queryParams.Keyword"
|
|
|
- placeholder="模板名称/模板内容/模板编码"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="keyword-input"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="queryList" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
|
|
|
- <el-button @click="resetQuery(ruleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </template>
|
|
|
- <template #tableHeader="scope">
|
|
|
- <el-button type="primary" @click="addTem" v-auth="'auxiliary:msgTemplate:add'"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
|
|
|
- </template>
|
|
|
- <!-- 表格操作 -->
|
|
|
- <template #operation="{ row }">
|
|
|
- <el-button link type="primary" @click="updateTem(row)" v-auth="'auxiliary:msgTemplate:edit'" title="修改模板"> 编辑 </el-button>
|
|
|
+ <template #buttons>
|
|
|
+ <el-button type="primary" @click="addTem" v-auth="'auxiliary:msgTemplate:add'">
|
|
|
+ <SvgIcon name="ele-Plus" class="mr5" />新增短信模板</el-button
|
|
|
+ >
|
|
|
</template>
|
|
|
- </ProTable>
|
|
|
+ </vxe-toolbar>
|
|
|
+ <div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
|
|
|
+ <vxe-table
|
|
|
+ border
|
|
|
+ :loading="state.loading"
|
|
|
+ :data="state.tableData"
|
|
|
+ :column-config="{ resizable: true }"
|
|
|
+ :row-config="{ isCurrent: true, isHover: true, height: 30 }"
|
|
|
+ ref="tableRef"
|
|
|
+ height="auto"
|
|
|
+ auto-resize
|
|
|
+ id="auxiliaryMsgTemplate"
|
|
|
+ :custom-config="{ storage: true }"
|
|
|
+ :scrollY="{ enabled: true, gt: 0 }"
|
|
|
+ show-overflow
|
|
|
+ >
|
|
|
+ <vxe-column field="name" title="模板名称" width="300"></vxe-column>
|
|
|
+ <vxe-column field="content" title="模板内容" min-width="30"></vxe-column>
|
|
|
+ <vxe-column field="code" title="模板编码" width="120"></vxe-column>
|
|
|
+ <vxe-column title="操作" fixed="right" width="90" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button link type="primary" @click="updateTem(row)" v-auth="'auxiliary:msgTemplate:edit'" title="修改模板"> 编辑 </el-button>
|
|
|
+ </template>
|
|
|
+ </vxe-column>
|
|
|
+ </vxe-table>
|
|
|
+ </div>
|
|
|
+ <pagination
|
|
|
+ @pagination="queryList"
|
|
|
+ :total="state.total"
|
|
|
+ v-model:current-page="state.queryParams.PageIndex"
|
|
|
+ v-model:page-size="state.queryParams.PageSize"
|
|
|
+ :disabled="state.loading"
|
|
|
+ />
|
|
|
</div>
|
|
|
<!-- 新增模板 -->
|
|
|
<msg-template-add ref="msgTemplateAddRef" @updateList="queryList" />
|
|
@@ -48,18 +74,12 @@
|
|
|
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
|
|
|
import { FormInstance } from 'element-plus';
|
|
|
import { msgTemplateList } from '@/api/auxiliary/msgTemplate';
|
|
|
+import { formatDate } from '@/utils/formatTime';
|
|
|
// 引入组件
|
|
|
const MsgTemplateAdd = defineAsyncComponent(() => import('@/views/auxiliary/msgTemplate/components/M-template-add.vue')); // 新增模板
|
|
|
const MsgTemplateEdit = defineAsyncComponent(() => import('@/views/auxiliary/msgTemplate/components/M-template-edit.vue')); // 编辑模板
|
|
|
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
|
|
|
|
|
|
-const proTableRef = ref<RefType>(); // 表格ref
|
|
|
-// 表格配置项
|
|
|
-const columns = ref<any[]>([
|
|
|
- { prop: 'name', label: '模板名称' },
|
|
|
- { prop: 'content', label: '模板内容', minWidth: 300 },
|
|
|
- { prop: 'code', label: '模板编码' },
|
|
|
- { prop: 'operation', label: '操作', fixed: 'right', width: 80, align: 'center' },
|
|
|
-]);
|
|
|
// 定义变量内容
|
|
|
const state = reactive<any>({
|
|
|
loading: false, // 加载状态
|
|
@@ -107,8 +127,13 @@ const msgTemplateEditRef = ref<RefType>(); // 修改模板
|
|
|
const updateTem = (row: any) => {
|
|
|
msgTemplateEditRef.value.openDialog(row.id);
|
|
|
};
|
|
|
+const toolbarRef = ref<RefType>();
|
|
|
+const tableRef = ref<RefType>();
|
|
|
// 页面加载时
|
|
|
onMounted(() => {
|
|
|
queryList();
|
|
|
+ if (tableRef.value && toolbarRef.value) {
|
|
|
+ tableRef.value.connect(toolbarRef.value);
|
|
|
+ }
|
|
|
});
|
|
|
</script>
|