|
@@ -1,87 +1,116 @@
|
|
|
<template>
|
|
|
<div class="layout-pd">
|
|
|
- <el-row style="height: auto;">
|
|
|
- <!--操作-->
|
|
|
- <el-col :xs="24">
|
|
|
- <el-card class="my-fill mt8" shadow="never" :body-style="{ paddingBottom: '0' }" style="height: 88vh">
|
|
|
- <div style="width: 100%;display: flex;justify-content: left;align-items: center;">
|
|
|
- <h1 style="margin-bottom: 10px;font-size: 30px;">推送模板:</h1>
|
|
|
- </div>
|
|
|
- <hr style="margin: 10px;" />
|
|
|
- <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
|
|
|
- <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
|
|
|
- <el-form-item label="模板名称:" style="width: 100%;">
|
|
|
- <el-input v-model="Data.templateName" style="width: 100%;" placeholder="请输入" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
|
|
|
- <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
|
|
|
- <el-form-item label="模板类型:" style="width: 100%;">
|
|
|
- <el-select v-model="Data.templateType" placeholder="请选择">
|
|
|
- <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <!-- 能不能通过调节距离的方式进行高度调节??? -->
|
|
|
- <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
|
|
|
- <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
|
|
|
- <el-form-item style="width: 100%;">
|
|
|
- </el-form-item>
|
|
|
- <el-form-item style="width: 100%;">
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
|
|
|
- <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
|
|
|
- <el-form-item label="模  板:" style="width: 100%;">
|
|
|
- <el-input type="textarea" rows="12" v-model="Data.templateContent" style="width: 100%;"
|
|
|
- placeholder="请输入" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
|
|
|
- <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
|
|
|
- <el-row justify="end" style="margin-top: 30px;">
|
|
|
- <el-button type="primary" @click="toSave">保存</el-button>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <el-dialog v-model="isShowDialog" style="width: 60%;">
|
|
|
+
|
|
|
+ <el-row style="height: auto;">
|
|
|
+ <!--操作-->
|
|
|
+ <el-col :xs="24">
|
|
|
+ <el-card class="my-fill mt8" shadow="never" :body-style="{ paddingBottom: '0' }" >
|
|
|
+ <div style="width: 100%;display: flex;justify-content: left;align-items: center;">
|
|
|
+ <h1 style="margin-bottom: 10px;font-size: 30px;">推送模板:</h1>
|
|
|
+ </div>
|
|
|
+ <hr style="margin: 10px;" />
|
|
|
+ <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
|
|
|
+ <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
|
|
|
+ <el-form-item label="模板名称:" style="width: 100%;">
|
|
|
+ <el-input v-model="Data.templateName" style="width: 100%;" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
|
|
|
+ <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
|
|
|
+ <el-form-item label="模板类型:" style="width: 100%;">
|
|
|
+ <el-select v-model="Data.templateType" placeholder="请选择">
|
|
|
+ <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <!-- 能不能通过调节距离的方式进行高度调节??? -->
|
|
|
+ <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
|
|
|
+ <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
|
|
|
+ <el-form-item style="width: 100%;">
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width: 100%;">
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
|
|
|
+ <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
|
|
|
+ <el-form-item label="模  板:" style="width: 100%;">
|
|
|
+ <el-input type="textarea" rows="12" v-model="Data.templateContent" style="width: 100%;"
|
|
|
+ placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
|
|
|
+ <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
|
|
|
+ <el-row justify="end" style="margin-top: 30px;">
|
|
|
+ <el-button type="primary" @click="toSave">保存</el-button>
|
|
|
+ </el-row>
|
|
|
+ <el-row justify="end">
|
|
|
+ <label class="tooltip" v-if="isShowTooltip">模板名称不能为空</label>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="">
|
|
|
-import { reactive } from 'vue';
|
|
|
+import { reactive, ref } from 'vue';
|
|
|
import { pushTemplateModel } from "/@/api/admin/AlarmService/pushTemplateDto";
|
|
|
import { pushTemplateApi } from "/@/api/admin/AlarmService/pushTemplateApi";
|
|
|
|
|
|
const Data = reactive({
|
|
|
- id:0,
|
|
|
+ id: 0,
|
|
|
templateName: '',
|
|
|
templateType: '',
|
|
|
templateContent: ''
|
|
|
} as pushTemplateModel)
|
|
|
|
|
|
const typeList = [
|
|
|
- {name:"微信公众号",id:"wx"},
|
|
|
- {name:"邮件",id:"email"}
|
|
|
+ { name: "微信公众号", id: "wx" },
|
|
|
+ { name: "邮件", id: "email" }
|
|
|
]
|
|
|
|
|
|
-const toSave = async() => {
|
|
|
- Data.id = Number(new Date()),
|
|
|
+// 提交数据
|
|
|
+const toSave = async () => {
|
|
|
+ if (Data.templateName == '') {
|
|
|
+ isShowTooltip.value = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ Data.id = Number(new Date())
|
|
|
console.log(Data)
|
|
|
const res = await new pushTemplateApi().addForm(Data)
|
|
|
console.log(res)
|
|
|
- Data.templateName= '',
|
|
|
- Data.templateType= '',
|
|
|
- Data.templateContent= ''
|
|
|
+ Data.templateName = ''
|
|
|
+ Data.templateType = ''
|
|
|
+ Data.templateContent = ''
|
|
|
+ isShowTooltip.value = false
|
|
|
+ isShowDialog.value = false
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+const isShowDialog = ref(false)
|
|
|
+const isShowTooltip = ref(false)
|
|
|
+/**
|
|
|
+ * 根据参数 打开表单
|
|
|
+ * @param val
|
|
|
+ */
|
|
|
+const openDialog = () => {
|
|
|
+ isShowDialog.value = true
|
|
|
}
|
|
|
|
|
|
+defineExpose({
|
|
|
+ openDialog,
|
|
|
+})
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
@@ -102,4 +131,16 @@ const toSave = async() => {
|
|
|
height: 100%;
|
|
|
padding: 0;
|
|
|
}
|
|
|
+
|
|
|
+/* 输入框标签固定四个字符宽度 */
|
|
|
+::v-deep .el-form-item__label {
|
|
|
+ // 字体大小14,4个字符,12px右间距
|
|
|
+ width: 100px;
|
|
|
+ justify-content: start;
|
|
|
+}
|
|
|
+
|
|
|
+.tooltip {
|
|
|
+ font-size: 12px;
|
|
|
+ color: red;
|
|
|
+}
|
|
|
</style>
|