æ·feat: commplete init process
This commit is contained in:
engigu
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<Index></Index>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Index from "./views/home/index.vue"
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,89 @@
|
||||
// request.js
|
||||
import axios from 'axios';
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { usePageState } from '../store/page_sate';
|
||||
import { CONSTANT } from '../constant';
|
||||
|
||||
const ERR_NETWORK = "ERR_NETWORK";
|
||||
|
||||
const request = axios.create({
|
||||
baseURL: 'http://127.0.0.1:8000',
|
||||
timeout: 50000,
|
||||
withCredentials: true, // 允许发送跨域凭证（例如，用于保持登录状态）
|
||||
});
|
||||
|
||||
|
||||
// 请求拦截器
|
||||
request.interceptors.request.use(
|
||||
(config) => {
|
||||
const pageState = usePageState();
|
||||
// console.log('config', config);
|
||||
if (!CONSTANT.NO_AUTH_URL.includes(config.url)) {
|
||||
config.url = '/api/v1' + config.url;
|
||||
}
|
||||
|
||||
if (pageState.Token && !CONSTANT.NO_AUTH_URL.includes(config.url)) {
|
||||
// 添加 token 参数到 URL 中
|
||||
config.headers = {
|
||||
...config.headers,
|
||||
'm-token': pageState.Token,
|
||||
};
|
||||
}
|
||||
|
||||
return config;
|
||||
},
|
||||
(error) => {
|
||||
// 处理请求错误
|
||||
handleException(error);
|
||||
// return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// 响应拦截器
|
||||
request.interceptors.response.use(
|
||||
(response) => {
|
||||
// console.log('request.interceptors.response', response);
|
||||
if (response && response.data.code != 200) {
|
||||
ElMessage({ message: response.data.msg, type: 'error' })
|
||||
// Promise.reject();
|
||||
}
|
||||
return response;
|
||||
},
|
||||
(error) => {
|
||||
if (error.response && error.response.status === 401) {
|
||||
// 未授权，可能是登录状态过期，执行登出操作
|
||||
logout();
|
||||
}
|
||||
handleException(error);
|
||||
// return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// 异常处理
|
||||
const handleException = (error) => {
|
||||
console.log('handleException', error);
|
||||
if (error.code == ERR_NETWORK) {
|
||||
ElMessage({ message: `网络错误！`, type: 'error' })
|
||||
} else if (error.response && error.response.data.code != 200) {
|
||||
ElMessage({ message: error.response.data.msg, type: 'error' })
|
||||
};
|
||||
|
||||
// if (error.response) {
|
||||
// // 服务器返回错误状态码
|
||||
// console.error('Server Error:', error.response.status, error.response.data);
|
||||
// } else if (error.request) {
|
||||
// // 请求发送成功，但没有收到响应
|
||||
// console.error('No response received:', error.request);
|
||||
// } else {
|
||||
// // 其他错误
|
||||
// console.error('Error:', error.message);
|
||||
// }
|
||||
};
|
||||
|
||||
// 登出系统
|
||||
const logout = () => {
|
||||
// 执行登出逻辑，清除本地存储的用户信息等
|
||||
console.log('User logged out');
|
||||
};
|
||||
|
||||
export { request, handleException, logout };
|
||||
@@ -0,0 +1,33 @@
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* #main-container {
|
||||
display: block;
|
||||
margin-left: 0px;
|
||||
padding: 0;
|
||||
} */
|
||||
|
||||
.main-center-body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0 0 0 0;
|
||||
padding: 0;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
/* flex: 1; */
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
/* margin-top: -10vh; */
|
||||
/* flex: 1; */
|
||||
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
textarea {
|
||||
width: 99%;
|
||||
padding: 2px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 46%;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-top: 3%;
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
After Width: | Height: | Size: 276 B |
@@ -0,0 +1 @@
|
||||
@import './base.css';
|
||||
@@ -0,0 +1 @@
|
||||
<svg t="1700568914730" class="titleicon" viewBox="0 0 1280 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4276" width="200" height="200"><path d="M1046.485822 53.112897c4.54104 44.898732-52.062062 38.886651-76.749969 36.200402-24.687907-2.622291-56.794977 18.995617-73.29622 42.532274-9.977496 14.390619-18.164159 37.351651-24.048323 57.498518 104.891624-10.233329 257.368228 37.351651 342.176943 157.657228 15.030202 23.536657 27.246239 48.160605 36.903944 73.616011 38.183109 101.054125 34.089778 207.03304 4.732914 308.790707a544.732902 544.732902 0 0 1-21.234158 61.016225 406.90275 406.90275 0 0 1-65.813098 105.914957 403.12921 403.12921 0 0 1-165.204307 118.514743l-18.547909 6.587706-12.08812 1.918749H215.923245l-7.54708-0.7675-12.791662-3.38979c-104.891624-33.322278-189.956172-133.225154-195.32867-325.29195L0 674.403893l0.575625-13.23937c1.854791-27.629989 8.186663-62.743099 21.553949-101.885583a410.996082 410.996082 0 0 1 127.596823-186.054716 383.557968 383.557968 0 0 1 106.426623-62.551224c86.023923-33.514153 176.397011-35.816652 260.118436-19.827075l4.541039 0.831458 4.349165 0.895416 15.222077 3.453749 11.832287 3.197915 59.033518 18.867701-36.072486 44.770815c-15.733744 19.507284-43.875399 47.201231-83.401632 74.703302l-17.39666 11.512496-17.908326 10.744995-8.31458 4.477082 26.222906 116.404119-36.328318 9.785621-14.070828 3.453749c-25.583323 5.500414-50.974771 7.035414-74.063719-0.447709-18.803742-6.012081-42.660191-24.304157-63.830391-46.369772l-8.890205-9.657705-3.645623-4.349165-1.726874 3.709582a136.231194 136.231194 0 0 0-9.08208 30.380196c-5.756248 33.450195 8.058747 73.424137 24.815823 92.547671l4.604998 4.732914 18.036243 15.541869 6.971455 5.244581c39.334359 27.693947 79.116426 30.380196 130.986613-8.570413 20.146867-15.158119 38.694776-43.939357 54.556436-83.017883 7.16333-17.588534 13.431245-36.456235 19.315409-56.794976l3.261874-11.896246 3.261874-12.407911 9.593746-38.502901 5.756247-20.274783 5.820206-17.588535c11.256662-31.787279 26.222906-62.231433 45.858106-91.076629 51.998104-75.854552 129.707447-128.939947 236.837612-149.790356-23.152907-23.024991-58.074143-49.311855-97.728293-51.614354-90.820796-6.971455-147.935565 45.666231-155.418687 50.143313-7.611039 4.477082-32.810612 18.547909-54.684353 0-21.809783-18.547909-10.872912-83.145799 45.410399-113.270162 56.28331-30.124363 151.261396-36.328318 213.428871 14.070828 35.304986 28.71728 56.027477 68.435389 67.284139 97.47246l6.39583-0.959375 1.535-0.255833c-1.023333-23.728532 1.023333-54.492478 13.942911-96.257252C897.7188 12.819164 943.385031 4.184792 959.886274 0.795002c16.565202-3.325832 81.546842 1.918749 86.599548 52.253937z m-170.960555 215.091787l-6.779581 0.831458-17.652492 2.878124c-88.77413 16.309368-150.110147 57.882268-191.235339 118.003077-15.605827 22.769157-27.502072 47.137272-36.64811 72.848512l-4.796873 14.454577-4.15729 14.582494-13.623119 53.852895-3.645624 13.047494a632.227866 632.227866 0 0 1-22.065616 64.853724c-20.722492 51.102687-46.433731 90.884755-80.139759 116.276202-81.099134 60.888308-157.337436 55.835602-222.319075 9.913538l-10.169371-7.483122-9.785621-8.058747-7.674997-6.77958-11.192704-10.553121c-34.665402-36.136444-58.266018-102.653083-47.776855-163.2216a223.214492 223.214492 0 0 1 28.909155-76.494135c9.785621-16.501243 19.763117-29.228946 27.94978-37.991235l4.668956-4.796873 43.491649-42.212483 20.274783 57.370602c7.227289 20.466658 48.73623 64.59789 62.423308 68.947055l1.854791 0.511667 2.110624 0.319791 3.006041 0.127917-22.385408-99.647043 29.420822-13.111453a354.968605 354.968605 0 0 0 45.474356-24.304157l14.326661-9.593746 14.326661-10.425204-13.814995-1.279166a390.337549 390.337549 0 0 0-127.916614 11.384579l-17.972285 5.308539-17.780409 6.395831a305.784667 305.784667 0 0 0-84.936632 49.88748A332.839031 332.839031 0 0 0 95.937461 584.99018c-10.872912 31.787279-15.989577 60.05685-17.460618 80.779341l-0.38375 8.442497 0.255833 19.827075c2.814166 86.983298 25.32749 150.046189 61.527892 193.921588 22.065616 26.734572 46.689564 43.491649 68.819138 52.445812l9.337913 3.38979 2.942082 0.831458h745.561987l11.000829-3.837499a320.622994 320.622994 0 0 0 108.601206-70.098304l12.791661-13.111453 10.872912-12.279995c22.513324-26.734572 39.014567-53.852895 48.992063-75.598719l3.837499-8.954163 8.31458-21.234158c3.581665-9.785621 6.651664-19.25145 10.361246-32.107071 25.007698-86.791423 28.397488-176.141178-2.814166-258.711352a322.349868 322.349868 0 0 0-28.525405-57.626435c-38.758734-54.876228-94.978086-90.373088-161.942434-109.112872-42.532274-11.960203-87.750797-15.86166-112.56662-13.751036z m104.699749 166.931182a60.696434 60.696434 0 0 1 35.432902 55.963519c0 33.386236-25.775198 60.4406-57.43456 60.504558a57.562476 57.562476 0 0 1-53.149353-37.41561 62.934974 62.934974 0 0 1 12.47187-66.004973 55.387894 55.387894 0 0 1 62.679141-13.111452z" p-id="4277"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
@@ -0,0 +1,34 @@
|
||||
// 定义一些常量名
|
||||
const CONSTANT = {
|
||||
PAGE: 1,
|
||||
PAGE_SIZE: 6,
|
||||
TOTAL: 0,
|
||||
LOG_TASK_ID: "00000000-0000-0000-0000-000000000001",
|
||||
STORE_TOKEN_NAME: '__message_nest_token__',
|
||||
NO_AUTH_URL: [
|
||||
'/auth',
|
||||
],
|
||||
WAYS_DATA: [
|
||||
{
|
||||
type: 'Email',
|
||||
label: '邮箱',
|
||||
inputs: [
|
||||
{ subLabel: 'smtp服务地址', value: '', col: 'server' },
|
||||
{ subLabel: 'smtp服务端口', value: '', col: 'port' },
|
||||
{ subLabel: '邮箱账号', value: '', col: 'account' },
|
||||
{ subLabel: '邮箱密码', value: '', col: 'passwd' },
|
||||
{ subLabel: '渠道名', value: '', col: 'name' },
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'Dtalk',
|
||||
label: '钉钉',
|
||||
inputs: [
|
||||
{ subLabel: 'webhook地址', value: '', col: 'webhook_url' },
|
||||
{ subLabel: '渠道名', value: '', col: 'name' },
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
export { CONSTANT }
|
||||
@@ -0,0 +1,20 @@
|
||||
import './assets/main.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
// import './assets/styles/global.css'
|
||||
import pinia from './store';
|
||||
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(router)
|
||||
app.use(ElementPlus)
|
||||
app.use(pinia);
|
||||
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
|
||||
import LoginInex from '../views/home/login.vue'
|
||||
import { CONSTANT } from '../constant'
|
||||
|
||||
const router = createRouter({
|
||||
// history: createWebHistory(import.meta.env.BASE_URL),
|
||||
history: createWebHashHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: LoginInex
|
||||
},
|
||||
{
|
||||
path: '/sendways',
|
||||
name: 'sendWays',
|
||||
component: () => import('../views/tabsTools/sendWays/sendWays.vue')
|
||||
},
|
||||
{
|
||||
path: '/sendtasks',
|
||||
name: 'sendtasks',
|
||||
component: () => import('../views/tabsTools/sendTasks/sendTasks.vue')
|
||||
},
|
||||
{
|
||||
path: '/sendlogs',
|
||||
name: 'sendlogs',
|
||||
component: () => import('../views/tabsTools/sendLogs/sendLogs.vue')
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
name: 'settings',
|
||||
component: () => import('../views/tabsTools/settings/settings.vue')
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
// 登录失效重定向到登录页面
|
||||
router.beforeEach((to, from, next) => {
|
||||
const isAuthenticated = Boolean(localStorage.getItem(CONSTANT.STORE_TOKEN_NAME));
|
||||
if (!isAuthenticated && to.path !== '/login') {
|
||||
next('/login');
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
});
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,6 @@
|
||||
// store/index.js
|
||||
import { createPinia } from 'pinia';
|
||||
|
||||
const pinia = createPinia();
|
||||
|
||||
export default pinia;
|
||||
@@ -0,0 +1,23 @@
|
||||
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
export const usePageState = defineStore({
|
||||
id: 'pageState',
|
||||
state: () => ({
|
||||
isLogin: false, // 全局的登录状态
|
||||
Token: '', // 全局的登录状态
|
||||
isShowAddWayDialog: false,
|
||||
ShowDialogData: {}
|
||||
}),
|
||||
actions: {
|
||||
setIsLogin(state) {
|
||||
this.isLogin = state;
|
||||
},
|
||||
setToken(token) {
|
||||
this.Token = token;
|
||||
},
|
||||
setShowAddWayDialog(status) {
|
||||
this.isShowAddWayDialog = status;
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,27 @@
|
||||
import useClipboard from "vue-clipboard3";
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
function copyToClipboard(obj) {
|
||||
const { toClipboard } = useClipboard();
|
||||
try {
|
||||
if (!obj) {
|
||||
ElMessage({
|
||||
message: `复制内容为空`,
|
||||
type: 'error',
|
||||
})
|
||||
} else {
|
||||
toClipboard(obj);
|
||||
ElMessage({
|
||||
message: '复制成功',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage({
|
||||
message: `复制失败，${e}`,
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
export { copyToClipboard };
|
||||
@@ -0,0 +1,28 @@
|
||||
|
||||
|
||||
const gethttpOrigin = () => {
|
||||
return window.location.origin
|
||||
}
|
||||
|
||||
class ApiStrGenerate {
|
||||
|
||||
|
||||
static getCurlString(task_id, options) {
|
||||
let data = { task_id: task_id };
|
||||
data.text = 'Hello World!';
|
||||
if (options.html) {
|
||||
data.html = '<h1> Hello World! </h1>';
|
||||
}
|
||||
if (options.markdown) {
|
||||
data.html = '** Hello World! **';
|
||||
}
|
||||
let dataStr = JSON.stringify(data, null, 4)
|
||||
let example = `curl -X POST --location '${gethttpOrigin()}/api/v1/message/send' \\
|
||||
--header 'Accept: application/json' \\
|
||||
--data '${dataStr}'`;
|
||||
return example;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { ApiStrGenerate };
|
||||
@@ -0,0 +1,23 @@
|
||||
|
||||
<template>
|
||||
<el-popconfirm width="70px" confirm-button-text="确定" cancel-button-text="算了" icon-color="#626AEF" title="确定删除吗?"
|
||||
@confirm="handleDelete()">
|
||||
<template #reference>
|
||||
<el-button link size="small" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
methods: {
|
||||
handleDelete() {
|
||||
// 触发自定义事件
|
||||
this.$emit('customHandleDelete');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="inex-title-bar" v-if="pageState.isLogin">
|
||||
<el-menu :collapse="isCollapse" breakpoint="768px" mode="horizontal" @select="handleSelect()"
|
||||
:default-active="currActivate()" :ellipsis="false" :menu-width="'auto'">
|
||||
<el-menu-item index="0" :disabled="false">
|
||||
<img style="width: 60px" src="../../../public/titlelogo.svg" alt="Element logo" />
|
||||
</el-menu-item>
|
||||
|
||||
<div class="flex-grow" style="flex-grow: 1" />
|
||||
<div v-for="(item, index) in menuData" :key="index" class="banner-title">
|
||||
<router-link :to="{ path: item.path }">
|
||||
<el-menu-item :index="item.id">{{ item.title }}</el-menu-item>
|
||||
</router-link>
|
||||
</div>
|
||||
<el-button plain class="logout-btn" @click="clickLogout()">登出</el-button>
|
||||
</el-menu>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted, reactive } from 'vue';
|
||||
import { usePageState } from '../../store/page_sate.js';
|
||||
import { CONSTANT } from '../../constant'
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const pageState = usePageState();
|
||||
const router = useRouter();
|
||||
const isCollapse = ref(false);
|
||||
const menuData = reactive([
|
||||
{
|
||||
id: '1',
|
||||
title: '发信日志',
|
||||
path: '/sendlogs',
|
||||
}, {
|
||||
id: '2',
|
||||
title: '发信任务',
|
||||
path: '/sendtasks',
|
||||
}, {
|
||||
id: '3',
|
||||
title: '发信渠道',
|
||||
path: '/sendways',
|
||||
}, {
|
||||
id: '4',
|
||||
title: '设置',
|
||||
path: '/settings',
|
||||
},
|
||||
]);
|
||||
|
||||
const checkIsLogin = () => {
|
||||
pageState.isLogin = Boolean(localStorage.getItem(CONSTANT.STORE_TOKEN_NAME));
|
||||
};
|
||||
|
||||
const clickLogout = () => {
|
||||
localStorage.removeItem(CONSTANT.STORE_TOKEN_NAME);
|
||||
console.log('clickLogout')
|
||||
router.push('/login', { replace: true }).then(() => { router.go() });
|
||||
};
|
||||
|
||||
const loadLocalToken = () => {
|
||||
pageState.setToken(localStorage.getItem(CONSTANT.STORE_TOKEN_NAME));
|
||||
}
|
||||
|
||||
const currActivate = () => {
|
||||
const cur_path = useRoute().path;
|
||||
let result = '1';
|
||||
menuData.forEach(element => {
|
||||
if (element.path == cur_path) {
|
||||
result = element.id;
|
||||
};
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
checkIsLogin();
|
||||
loadLocalToken();
|
||||
});
|
||||
|
||||
const handleSelect = () => { };
|
||||
|
||||
return {
|
||||
isCollapse, handleSelect, menuData, pageState, clickLogout, currActivate
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-menu-item ul {
|
||||
height: 15vh;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
width: 150px !important;
|
||||
font-size: 15px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.el-menu-item li {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
margin: auto 40px auto 40px;
|
||||
float: right;
|
||||
/* background-color: #f7efee;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease; */
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="login-center-container" v-if="!pageState.isLogin">
|
||||
|
||||
<div class="main-center-body">
|
||||
<div class="container">
|
||||
<img class="login-logo" src="../../../public/logo.svg" alt="login logo">
|
||||
<p class="desc">A Message Way Hosted Site</p>
|
||||
|
||||
<div class="login-block">
|
||||
<p class="login-text">账号：</p>
|
||||
<el-input style="width: 80%;" v-model="account" placeholder="请输入账号" />
|
||||
</div>
|
||||
|
||||
<div class="login-block">
|
||||
<p class="login-text">密码：</p>
|
||||
<el-input style="width: 80%;" v-model="passwd" type="password" placeholder="请输入密码" show-password />
|
||||
</div>
|
||||
|
||||
<div class="btn-area">
|
||||
<el-button id="custom-h2d-copy-button" type="success" @click="clickLogin()">登录</el-button>
|
||||
<el-button type="primary" @click="clickRegister()">注册</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toRefs, reactive, onMounted } from 'vue';
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { request } from '../../api/api'
|
||||
import { CONSTANT } from '../../constant'
|
||||
import { usePageState } from '../../store/page_sate';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
const pageState = usePageState();
|
||||
const state = reactive({
|
||||
account: 'admin',
|
||||
passwd: '123456',
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
});
|
||||
|
||||
// 登录
|
||||
const clickLogin = async () => {
|
||||
const rspe = await request.post('/auth', { username: state.account, passwd: state.passwd });
|
||||
const rsp = rspe.data;
|
||||
if (rsp.code != 200) {
|
||||
ElMessage({ message: rsp.msg, type: 'error' });
|
||||
} else {
|
||||
pageState.setToken(rsp.data.token);
|
||||
pageState.setIsLogin(true);
|
||||
localStorage.setItem(CONSTANT.STORE_TOKEN_NAME, rsp.data.token);
|
||||
router.push('/sendlogs', { replace: true })
|
||||
}
|
||||
};
|
||||
|
||||
// 注册
|
||||
const clickRegister = () => {
|
||||
ElMessage({ message: `暂未开放注册！`, type: 'error' })
|
||||
|
||||
};
|
||||
|
||||
return { ...toRefs(state), clickLogin, clickRegister, pageState };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
@import url('../../../src/assets/center_button_textarea.css');
|
||||
|
||||
.login-logo {
|
||||
height: 200px !important;
|
||||
}
|
||||
|
||||
.login-center-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-center-container img {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
font-size: 25px;
|
||||
margin-bottom: 80px;
|
||||
/* color: rgb(64, 87, 45); */
|
||||
}
|
||||
|
||||
.login-text {
|
||||
font-size: 13px;
|
||||
/* width: 20px; */
|
||||
width: 20%;
|
||||
display: inline;
|
||||
/* display: flex; */
|
||||
/* justify-content: right; */
|
||||
/* align-items: center; */
|
||||
}
|
||||
|
||||
.login-block {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn-area {
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="main-center-body">
|
||||
<div class="container">
|
||||
<div class="search-input-sendways">
|
||||
<el-input v-model="search" size="small" placeholder="根据任务名字搜索相应日志" @change="filterFunc()" />
|
||||
</div>
|
||||
<hr />
|
||||
<div ref="refContainer">
|
||||
<el-table :data="tableData" empty-text="发信日志为空" :row-style="rowStyle()">
|
||||
<el-table-column label="ID" prop="id" width="100px" />
|
||||
<el-table-column label="任务名" prop="task_name" show-overflow-tooltip width="150px" />
|
||||
<el-table-column label="发信日志" prop="log">
|
||||
<template #default="scope">
|
||||
<el-tooltip placement="top">
|
||||
<template #content>
|
||||
<div v-html="TransHtml(scope.row.log)"></div>
|
||||
</template>
|
||||
<span class="log-overflow">{{ scope.row.log }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" prop="created_on" width="160px" />
|
||||
<el-table-column label="状态" prop="status" width="60px">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.status == 0" type="danger">失败</el-tag>
|
||||
<el-tag v-if="scope.row.status == 1" type="success">成功</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div class="pagination-block">
|
||||
<el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="handPageChange" />
|
||||
<el-text class="total-tip" size="small">共{{ total }}条</el-text>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import { reactive, toRefs, onMounted } from 'vue'
|
||||
import { request } from '../../../api/api'
|
||||
import { copyToClipboard } from '../../../util/clipboard.js';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { CONSTANT } from '@/constant'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
setup() {
|
||||
const router = useRoute();
|
||||
const state = reactive({
|
||||
search: '',
|
||||
optionValue: '',
|
||||
tableData: [],
|
||||
total: CONSTANT.TOTAL,
|
||||
pageSize: CONSTANT.PAGE_SIZE,
|
||||
currPage: CONSTANT.PAGE,
|
||||
});
|
||||
|
||||
const handleDelete = async (index, row) => {
|
||||
const rsp = await request.post('/sendways/delete', { id: row.id });
|
||||
if (rsp.status == 200) {
|
||||
state.tableData.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
const TransHtml = (raw) => {
|
||||
if (raw) {
|
||||
return raw.replace(/\n/g, '<br />')
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
const handPageChange = async (pageNum) => {
|
||||
state.currPage = pageNum;
|
||||
await queryListData(pageNum, state.pageSize);
|
||||
|
||||
}
|
||||
|
||||
const rowStyle = () => {
|
||||
return {
|
||||
'font-size': '13px',
|
||||
}
|
||||
}
|
||||
|
||||
const filterFunc = async () => {
|
||||
await queryListData(state.currPage, state.pageSize, state.search, state.optionValue);
|
||||
|
||||
}
|
||||
|
||||
const queryListData = async (page, size, name = '', taskid = '') => {
|
||||
let params = { page: page, size: size, name: name, taskid: taskid };
|
||||
const rsp = await request.get('/sendlogs/list', { params: params });
|
||||
state.tableData = await rsp.data.data.lists;
|
||||
state.total = await rsp.data.data.total;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
state.search = router.query.name;
|
||||
await queryListData(1, state.pageSize, router.query.name, router.query.taskid);
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state), handleDelete, TransHtml,
|
||||
rowStyle, handPageChange, filterFunc, copyToClipboard
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
hr {
|
||||
color: #FAFCFF;
|
||||
background-color: #FAFCFF;
|
||||
border-color: #FAFCFF;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
margin-top: -10vh;
|
||||
}
|
||||
|
||||
|
||||
.pagination-block {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.total-tip {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.search-input-sendways {
|
||||
width: 200px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
|
||||
.log-overflow {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<el-dialog v-model="isShow" width="58%" :close-on-press-escape="false" :before-close="() => { }" :show-close="false">
|
||||
<template #header="">
|
||||
<el-text class="mx-1">添加发信任务(绑定关联实例)</el-text>
|
||||
<el-tooltip placement="top">
|
||||
<template #content>
|
||||
一个任务可以关联创建多个实例
|
||||
<br />
|
||||
选择不同的渠道，填写的实例信息也不一样
|
||||
<br />
|
||||
一个任务可以绑定一个实例，也可以绑定多个实例，多个实例意味着一个消息可以推送给多个消息渠道
|
||||
</template>
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<div class="add-top">
|
||||
<el-input v-model="currTaskInput.taskName" placeholder="请输入任务名" size="small" class="taskNameInput"></el-input>
|
||||
</div>
|
||||
|
||||
<div class="dashed" />
|
||||
|
||||
<div class="ins-area">
|
||||
|
||||
<div class="ins-add">
|
||||
<el-input v-model="searchWayID" placeholder="请输入要添加的渠道id" size="small" @change="searchID"
|
||||
class="searchInput"></el-input>
|
||||
<el-button @click="searchID()" size="small" type="primary" style="margin-left: 20px;">查询</el-button>
|
||||
|
||||
<div class="store-area" v-if="isShowAddBox">
|
||||
|
||||
<div class="display-label">
|
||||
<el-text class="mx-1" size="small">渠道名：{{ currWayTmp.name }}</el-text><br />
|
||||
<el-text class="mx-1" size="small">渠道类型：{{ currWayTmp.type }}</el-text> <br />
|
||||
<el-text class="mx-1" size="small">渠道创建时间：{{ currWayTmp.created_on }}</el-text><br />
|
||||
</div>
|
||||
|
||||
<el-radio-group v-model="currInsInput.content_type" class="ml-4">
|
||||
<el-radio label="text" size="small">text</el-radio>
|
||||
<el-radio label="html" size="small">html</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<div>
|
||||
<el-input v-model="currInsInput.toAccount" placeholder="目的邮箱账号（发给谁）" size="small"
|
||||
style="width: 200px; margin: 10px 40px 5px 0;" class="searchInput"></el-input>
|
||||
<el-input v-model="currInsInput.title" placeholder="邮箱标题" size="small"
|
||||
style="width: 200px; margin: 0px 40px 5px 0;" class="searchInput"></el-input>
|
||||
<el-button @click="clickStore()" size="small" style="width: 200px">暂存</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ins-table">
|
||||
<el-table :data="insTableData" empty-text="发信实例为空" style="width: 100%" max-height="300"
|
||||
:row-style="insRowStyle()">
|
||||
<el-table-column prop="way_name" label="渠道名" />
|
||||
<el-table-column prop="way_type" label="渠道+内容类型">
|
||||
<template #default="scope">
|
||||
{{ scope.row.way_type }}+{{ scope.row.content_type }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="way_type" label="额外信息">
|
||||
<template #default="scope">
|
||||
{{ formatExtraInfo(scope) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="60px">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="small" @click.prevent="insTableData.splice(scope.$index, 1)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleCancer()" size="small">取消</el-button>
|
||||
<el-button type="primary" size="small" @click="handleSubmit()">
|
||||
确定添加
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, onMounted, watch, reactive, toRefs } from 'vue';
|
||||
import { _ } from 'lodash';
|
||||
import { QuestionFilled } from '@element-plus/icons-vue'
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { usePageState } from '../../../store/page_sate.js';
|
||||
import { request } from '../../../api/api'
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
QuestionFilled,
|
||||
},
|
||||
props: {
|
||||
componentName: String
|
||||
},
|
||||
setup(props) {
|
||||
const pageState = usePageState();
|
||||
const state = reactive({
|
||||
insTableData: [],
|
||||
isShow: false,
|
||||
isShowAddBox: false,
|
||||
searchWayID: '',
|
||||
currWayTmp: {},
|
||||
currInsInput: {
|
||||
content_type: 'text'
|
||||
},
|
||||
currTaskInput: {
|
||||
taskName: '',
|
||||
taskId: uuidv4(),
|
||||
},
|
||||
});
|
||||
|
||||
watch(pageState.ShowDialogData, (newValue, oldValue) => {
|
||||
if (newValue[props.componentName]) {
|
||||
state.isShow = pageState.ShowDialogData[props.componentName].isShow;
|
||||
resetPageInitData();
|
||||
}
|
||||
});
|
||||
|
||||
const handleCancer = () => {
|
||||
if (pageState.ShowDialogData[props.componentName]) {
|
||||
pageState.ShowDialogData[props.componentName].isShow = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面每次弹出，重置数据
|
||||
const resetPageInitData = () => {
|
||||
state.insTableData = [];
|
||||
state.currInsInput = { content_type: 'text' };
|
||||
state.currWayTmp = {};
|
||||
state.searchWayID = '';
|
||||
state.isShowAddBox = false;
|
||||
state.currTaskInput = {
|
||||
taskName: '',
|
||||
taskId: uuidv4(),
|
||||
}
|
||||
}
|
||||
|
||||
const insRowStyle = () => {
|
||||
return {
|
||||
'font-size': '12px'
|
||||
}
|
||||
}
|
||||
|
||||
// 点击暂存实例
|
||||
const clickStore = () => {
|
||||
let insData = {
|
||||
id: uuidv4(),
|
||||
task_id: state.currTaskInput.taskId,
|
||||
way_id: state.currWayTmp.id,
|
||||
way_type: state.currWayTmp.type,
|
||||
way_name: state.currWayTmp.name,
|
||||
content_type: state.currInsInput.content_type,
|
||||
config: JSON.stringify({ to_account: state.currInsInput.toAccount, title: state.currInsInput.title })
|
||||
};
|
||||
state.insTableData.push(insData);
|
||||
}
|
||||
|
||||
const searchID = async () => {
|
||||
const rsp = await request.get('/sendways/get', { params: { id: state.searchWayID } });
|
||||
let data = await rsp.data;
|
||||
state.isShowAddBox = Boolean(data.data);
|
||||
if (data.data) {
|
||||
state.currWayTmp = data.data;
|
||||
}
|
||||
}
|
||||
|
||||
const getFinalData = () => {
|
||||
let postData = { id: state.currTaskInput.taskId, name: state.currTaskInput.taskName }
|
||||
postData.ins_data = state.insTableData
|
||||
return postData
|
||||
}
|
||||
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
let postData = getFinalData();
|
||||
const rsp = await request.post('/sendtasks/ins/addmany', postData);
|
||||
if (await rsp.data.code == 200) {
|
||||
handleCancer();
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
const formatExtraInfo = (scope) => {
|
||||
if (!scope.row.config) {
|
||||
return ""
|
||||
}
|
||||
let config = JSON.parse(scope.row.config)
|
||||
let info = `发送账号：${config.to_account}\n标题：${config.title}`
|
||||
return info
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state), handleCancer, handleSubmit,
|
||||
searchID, formatExtraInfo,
|
||||
clickStore, insRowStyle
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep(.el-table .cell) {
|
||||
white-space: pre-line !important;
|
||||
}
|
||||
|
||||
.dashed {
|
||||
border-top: 2px dashed var(--el-border-color);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ins-area {
|
||||
display: flex;
|
||||
max-width: 900px;
|
||||
|
||||
}
|
||||
|
||||
.add-top {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ins-add {
|
||||
flex: 45%;
|
||||
}
|
||||
|
||||
.ins-table {
|
||||
flex: 55%;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.wayTitleInput {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.taskNameInput {
|
||||
/* width: 80%; */
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.display-label {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<el-dialog v-model="isShow" width="58%" :close-on-press-escape="false" :before-close="() => { }" :show-close="false">
|
||||
<template #header="">
|
||||
<el-text class="mx-1">编辑发信任务</el-text>
|
||||
<el-tooltip placement="top">
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
|
||||
<div class="dashed" />
|
||||
|
||||
<div class="ins-area">
|
||||
|
||||
<div class="ins-add">
|
||||
<el-input v-model="searchWayID" placeholder="请输入要添加的渠道id" size="small" @change="searchID"
|
||||
class="searchInput"></el-input>
|
||||
<el-button @click="searchID()" size="small" type="primary" style="margin-left: 20px;">查询</el-button>
|
||||
|
||||
<div class="store-area" v-if="isShowAddBox">
|
||||
|
||||
<div class="display-label">
|
||||
<el-text class="mx-1" size="small">渠道名：{{ currWayTmp.name }}</el-text><br />
|
||||
<el-text class="mx-1" size="small">渠道类型：{{ currWayTmp.type }}</el-text> <br />
|
||||
<el-text class="mx-1" size="small">渠道创建时间：{{ currWayTmp.created_on }}</el-text><br />
|
||||
</div>
|
||||
|
||||
<el-radio-group v-model="currInsInput.content_type" class="ml-4">
|
||||
<el-radio label="text" size="small">text</el-radio>
|
||||
<el-radio label="html" size="small">html</el-radio>
|
||||
</el-radio-group>
|
||||
<div>
|
||||
<el-input v-model="currInsInput.toAccount" placeholder="目的邮箱账号（发给谁）" size="small"
|
||||
style="width: 200px; margin: 10px 40px 5px 0;" class="searchInput"></el-input>
|
||||
<el-input v-model="currInsInput.title" placeholder="邮箱标题" size="small"
|
||||
style="width: 200px; margin: 0px 40px 5px 0;" class="searchInput"></el-input>
|
||||
</div>
|
||||
<div>
|
||||
<el-button @click="handleAddSubmit()" size="small" style="width: 200px">添加</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ins-table">
|
||||
<el-table :data="insTableData" empty-text="发信实例为空" style="width: 100%" max-height="300"
|
||||
:row-style="insRowStyle()">
|
||||
<el-table-column prop="way_name" label="渠道名" />
|
||||
<el-table-column prop="way_type" label="渠道+内容类型">
|
||||
<template #default="scope">
|
||||
{{ scope.row.way_type }}+{{ scope.row.content_type }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="way_type" label="额外信息">
|
||||
<template #default="scope">
|
||||
{{ formatExtraInfo(scope) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="60px">
|
||||
<template #default="scope">
|
||||
<tableDeleteButton @customHandleDelete="handleDelete(scope.$index, scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleCancer()" size="small">取消</el-button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, onMounted, watch, reactive, toRefs } from 'vue';
|
||||
import { _ } from 'lodash';
|
||||
import { QuestionFilled } from '@element-plus/icons-vue'
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { usePageState } from '@/store/page_sate.js';
|
||||
import { request } from '@/api/api'
|
||||
import tableDeleteButton from '@/views/common/tableDeleteButton.vue'
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
QuestionFilled,
|
||||
tableDeleteButton,
|
||||
},
|
||||
props: {
|
||||
componentName: String
|
||||
},
|
||||
setup(props) {
|
||||
const pageState = usePageState();
|
||||
const state = reactive({
|
||||
insTableData: [],
|
||||
isShow: false,
|
||||
isShowAddBox: false,
|
||||
searchWayID: '',
|
||||
currWayTmp: {},
|
||||
currInsInput: {},
|
||||
currTaskInput: {
|
||||
taskName: '',
|
||||
taskId: '',
|
||||
},
|
||||
});
|
||||
|
||||
watch(pageState.ShowDialogData, (newValue, oldValue) => {
|
||||
if (newValue[props.componentName]) {
|
||||
state.isShow = pageState.ShowDialogData[props.componentName].isShow;
|
||||
resetPageInitData();
|
||||
state.currTaskInput.taskId = pageState.ShowDialogData[props.componentName].rowData.id;
|
||||
queryListData();
|
||||
}
|
||||
});
|
||||
|
||||
const queryListData = async () => {
|
||||
let params = { id: state.currTaskInput.taskId };
|
||||
const rsp = await request.get('/sendtasks/ins/gettask', { params: params });
|
||||
state.insTableData = await rsp.data.data.ins_data;
|
||||
state.total = await rsp.data.data.total;
|
||||
}
|
||||
|
||||
const handleCancer = () => {
|
||||
if (pageState.ShowDialogData[props.componentName]) {
|
||||
pageState.ShowDialogData[props.componentName].isShow = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面每次弹出，重置数据
|
||||
const resetPageInitData = () => {
|
||||
state.insTableData = [];
|
||||
state.currInsInput = {};
|
||||
state.currWayTmp = {};
|
||||
state.searchWayID = '';
|
||||
state.isShowAddBox = false;
|
||||
state.currTaskInput = {
|
||||
taskName: '',
|
||||
// taskId: uuidv4(),
|
||||
}
|
||||
}
|
||||
|
||||
const insRowStyle = () => {
|
||||
return {
|
||||
'font-size': '12px'
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (index, row) => {
|
||||
const rsp = await request.post('/sendtasks/ins/delete', { id: row.id });
|
||||
if (rsp.status == 200) {
|
||||
state.insTableData.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// // 点击暂存实例
|
||||
// const clickStore = () => {
|
||||
// let insData = {
|
||||
// id: uuidv4(),
|
||||
// task_id: state.currTaskInput.taskId,
|
||||
// way_id: state.currWayTmp.id,
|
||||
// way_type: state.currWayTmp.type,
|
||||
// way_name: state.currWayTmp.name,
|
||||
// content_type: state.currInsInput.content_type
|
||||
// };
|
||||
|
||||
// }
|
||||
|
||||
const formatExtraInfo = (scope) => {
|
||||
if (!scope.row.config) {
|
||||
return ""
|
||||
}
|
||||
let config = JSON.parse(scope.row.config)
|
||||
let info = `发送账号：${config.to_account}\n标题：${config.title}`
|
||||
return info
|
||||
}
|
||||
|
||||
const searchID = async () => {
|
||||
const rsp = await request.get('/sendways/get', { params: { id: state.searchWayID } });
|
||||
let data = await rsp.data;
|
||||
state.isShowAddBox = Boolean(data.data);
|
||||
if (data.data) {
|
||||
state.currWayTmp = data.data;
|
||||
}
|
||||
}
|
||||
|
||||
const getFinalData = () => {
|
||||
let postData = {
|
||||
id: uuidv4(),
|
||||
task_id: state.currTaskInput.taskId,
|
||||
way_id: state.currWayTmp.id,
|
||||
way_type: state.currWayTmp.type,
|
||||
way_name: state.currWayTmp.name,
|
||||
content_type: state.currInsInput.content_type,
|
||||
config: JSON.stringify({ to_account: state.currInsInput.toAccount, title: state.currInsInput.title })
|
||||
}
|
||||
return postData
|
||||
}
|
||||
|
||||
|
||||
const handleAddSubmit = async () => {
|
||||
let postData = getFinalData();
|
||||
const rsp = await request.post('/sendtasks/ins/addone', postData);
|
||||
if (await rsp.data.code == 200) {
|
||||
state.insTableData.push(postData);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state), handleCancer, handleAddSubmit,
|
||||
searchID, handleDelete, insRowStyle, formatExtraInfo
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep(.el-table .cell) {
|
||||
white-space: pre-line !important;
|
||||
}
|
||||
|
||||
.dashed {
|
||||
border-top: 2px dashed var(--el-border-color);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ins-area {
|
||||
display: flex;
|
||||
max-width: 900px;
|
||||
|
||||
}
|
||||
|
||||
/* .add-top {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
*/
|
||||
.ins-add {
|
||||
flex: 45%;
|
||||
}
|
||||
|
||||
.ins-table {
|
||||
flex: 55%;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.wayTitleInput {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.taskNameInput {
|
||||
/* width: 80%; */
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.display-label {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="main-center-body">
|
||||
<div class="container">
|
||||
|
||||
<div class="search-input-sendways">
|
||||
<el-input v-model="search" size="small" placeholder="搜索" @change="filterFunc()" />
|
||||
</div>
|
||||
|
||||
<div class="search-box">
|
||||
<el-button size="small" type="primary" @click="clickAdd">新增任务</el-button>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div ref="refContainer">
|
||||
<el-table :data="tableData" empty-text="发信任务为空" :row-style="rowStyle()">
|
||||
<el-table-column label="ID" prop="id" width="320px" />
|
||||
<el-table-column label="任务名" prop="name" />
|
||||
<el-table-column label="创建时间" prop="created_on" />
|
||||
<el-table-column fixed="right" label="操作" width="190px">
|
||||
<template #default="scope">
|
||||
<el-button link size="small" type="primary" @click="handleViewAPI(scope.$index, scope.row)">接口</el-button>
|
||||
<el-button link size="small" type="primary" @click="handleViewLogs(scope.$index, scope.row)">日志</el-button>
|
||||
<el-button link size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
||||
<tableDeleteButton @customHandleDelete="handleDelete(scope.$index, scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div class="pagination-block">
|
||||
<el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="handPageChange" />
|
||||
<el-text class="total-tip" size="small">共{{ total }}条</el-text>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<addTaskPopUpComponent :componentName="addTaskPopUpComponentName" />
|
||||
<editTaskPopUpComponent :componentName="editTaskPopUpComponentName" />
|
||||
<viewTaskAPIPopUpComponent :componentName="viewTaskAPIPopUpComponentName" />
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import { computed, ref, reactive, toRefs, onMounted } from 'vue'
|
||||
// import { InfoFilled } from '@element-plus/icons-vue'
|
||||
import { usePageState } from '../../../store/page_sate';
|
||||
import { request } from '../../../api/api'
|
||||
import addTaskPopUpComponent from './addTaskPopUp.vue'
|
||||
import editTaskPopUpComponent from './editTaskPopUp.vue'
|
||||
import viewTaskAPIPopUpComponent from './viewTaskAPIPopUp.vue'
|
||||
import tableDeleteButton from '@/views/common/tableDeleteButton.vue'
|
||||
import { useRouter } from 'vue-router';
|
||||
import { CONSTANT } from '@/constant'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
addTaskPopUpComponent,
|
||||
editTaskPopUpComponent,
|
||||
tableDeleteButton,
|
||||
viewTaskAPIPopUpComponent,
|
||||
// InfoFilled,
|
||||
},
|
||||
setup() {
|
||||
const pageState = usePageState();
|
||||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
addTaskPopUpComponentName: 'addTaskPopUpComponentName',
|
||||
editTaskPopUpComponentName: 'editTaskPopUpComponentName',
|
||||
viewTaskAPIPopUpComponentName: 'viewTaskAPIPopUpComponentName',
|
||||
search: '',
|
||||
optionValue: '',
|
||||
dialogFormVisible: false,
|
||||
// confirmBtnVisible: false,
|
||||
tableData: [],
|
||||
total: CONSTANT.TOTAL,
|
||||
pageSize: CONSTANT.PAGE_SIZE,
|
||||
currPage: CONSTANT.PAGE,
|
||||
displayCols: [
|
||||
{ 'col': 'id', 'label': '任务ID' },
|
||||
{ 'col': 'name', 'label': '任务名' },
|
||||
{ 'col': 'type', 'label': '发信任务' },
|
||||
{ 'col': 'created_on', 'label': '创建时间' },
|
||||
],
|
||||
options: [
|
||||
{ label: '邮箱', value: 'Email' },
|
||||
{ label: '钉钉', value: 'Dtalk' }
|
||||
]
|
||||
});
|
||||
|
||||
const handleEdit = (index, row) => {
|
||||
console.log(index, row)
|
||||
let name = state.editTaskPopUpComponentName;
|
||||
pageState.ShowDialogData[name] = {};
|
||||
pageState.ShowDialogData[name].isShow = true;
|
||||
pageState.ShowDialogData[name].rowData = row;
|
||||
}
|
||||
|
||||
const handleDelete = async (index, row) => {
|
||||
const rsp = await request.post('/sendtasks/delete', { id: row.id });
|
||||
if (rsp.status == 200) {
|
||||
state.tableData.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
const handleViewAPI = (index, row) => {
|
||||
console.log(index, row)
|
||||
let name = state.viewTaskAPIPopUpComponentName;
|
||||
pageState.ShowDialogData[name] = {};
|
||||
pageState.ShowDialogData[name].isShow = true;
|
||||
pageState.ShowDialogData[name].rowData = row;
|
||||
}
|
||||
|
||||
const handPageChange = async (pageNum) => {
|
||||
state.currPage = pageNum;
|
||||
await queryListData(pageNum, state.pageSize);
|
||||
|
||||
}
|
||||
const rowStyle = () => {
|
||||
return {
|
||||
'font-size': '13px',
|
||||
}
|
||||
}
|
||||
|
||||
const handleViewLogs = (index, row) => {
|
||||
router.push('/sendlogs?name=' + row.name, { replace: true });
|
||||
}
|
||||
|
||||
const filterFunc = async () => {
|
||||
await queryListData(state.currPage, state.pageSize, state.search, state.optionValue);
|
||||
|
||||
}
|
||||
const clickAdd = () => {
|
||||
pageState.ShowDialogData[state.addTaskPopUpComponentName] = {};
|
||||
pageState.ShowDialogData[state.addTaskPopUpComponentName].isShow = true;
|
||||
}
|
||||
|
||||
const queryListData = async (page, size, name = '') => {
|
||||
let params = { page: page, size: size, name: name };
|
||||
const rsp = await request.get('/sendtasks/list', { params: params });
|
||||
state.tableData = await rsp.data.data.lists;
|
||||
state.total = await rsp.data.data.total;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await queryListData(1, state.pageSize);
|
||||
});
|
||||
|
||||
|
||||
return {
|
||||
...toRefs(state), handleEdit, handleDelete, handleViewAPI, handleViewLogs,
|
||||
clickAdd, rowStyle, handPageChange, filterFunc
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
hr {
|
||||
color: #FAFCFF;
|
||||
background-color: #FAFCFF;
|
||||
border-color: #FAFCFF;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
margin-top: -10vh;
|
||||
}
|
||||
|
||||
.pagination-block {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.total-tip {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
float: right;
|
||||
}
|
||||
|
||||
:global(.select .el-input__inner) {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.search-input-sendways {
|
||||
/* margin-left: 40px; */
|
||||
width: 150px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.op-col {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<el-dialog v-model="isShow" width="58%" :close-on-press-escape="false" :before-close="() => { }" :show-close="false">
|
||||
<template #header="">
|
||||
<el-text class="mx-1">查看接入API</el-text>
|
||||
<el-tooltip placement="top">
|
||||
<template #content>
|
||||
一个任务可能关联多个不同渠道的实例
|
||||
<br />
|
||||
实例的内容类型大体上可以可以分为text、html、markdown
|
||||
<br />
|
||||
发送的消息会优先现在相应的类型消息进行发送，如果没有，将使用传的text消息进行发送
|
||||
<br />
|
||||
*text节点必传
|
||||
</template>
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<el-tabs v-model="activeName" @tab-click="renderApiString">
|
||||
<el-tab-pane label="curl" name="curl">
|
||||
<pre><code class="language-shell line-numbers">{{ currCode }}</code></pre>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleCancer()" size="small">取消</el-button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, onMounted, watch, reactive, toRefs, onUpdated } from 'vue';
|
||||
import { _ } from 'lodash';
|
||||
import { usePageState } from '@/store/page_sate.js';
|
||||
import Prism from "prismjs";
|
||||
import { ApiStrGenerate } from "@/util/viewApi.js";
|
||||
import { QuestionFilled } from '@element-plus/icons-vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
QuestionFilled,
|
||||
},
|
||||
props: {
|
||||
componentName: String,
|
||||
},
|
||||
setup(props) {
|
||||
const pageState = usePageState();
|
||||
const state = reactive({
|
||||
isShow: false,
|
||||
currCode: '',
|
||||
activeName: 'curl',
|
||||
language: "python",
|
||||
});
|
||||
|
||||
watch(pageState.ShowDialogData, (newValue, oldValue) => {
|
||||
if (newValue[props.componentName]) {
|
||||
state.isShow = pageState.ShowDialogData[props.componentName].isShow;
|
||||
renderApiString();
|
||||
}
|
||||
});
|
||||
|
||||
const handleCancer = () => {
|
||||
if (pageState.ShowDialogData[props.componentName]) {
|
||||
pageState.ShowDialogData[props.componentName].isShow = false;
|
||||
}
|
||||
}
|
||||
|
||||
const renderApiString = () => {
|
||||
console.log('renderApiString', state.activeName)
|
||||
let task_id = pageState.ShowDialogData[props.componentName].rowData.id;
|
||||
if (state.activeName == 'curl') {
|
||||
state.currCode = ApiStrGenerate.getCurlString(task_id, {});
|
||||
}
|
||||
setTimeout(() => {
|
||||
Prism.highlightAll()
|
||||
}, 100)
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state), handleCancer, renderApiString
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.language-javascript {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
/* pre {
|
||||
overflow: hidden !important;
|
||||
code{
|
||||
display: inline-block;
|
||||
padding-bottom: 20px;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: red;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
top: 10px;
|
||||
left: 15px;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: sandybrown;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
top: 10px;
|
||||
left: 30px;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
code:first-child{
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: limegreen;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
top: -24px;
|
||||
left: -7px;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<el-dialog v-model="isShow" width="500px" :close-on-press-escape="false" :before-close="() => { }" :show-close="false">
|
||||
<template #header="">
|
||||
<el-text class="mx-1">新增发信渠道</el-text>
|
||||
</template>
|
||||
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-form label-width="100px" v-for="item in waysLabelData">
|
||||
<el-tab-pane :label="item.label" :name="item.type">
|
||||
<el-form-item :label="one.subLabel" v-for="one in item.inputs">
|
||||
<el-input v-model="one.value" />
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
</el-form>
|
||||
</el-tabs>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="testMseeageDialogVisible = true" size="small">测试发信</el-button>
|
||||
<el-button @click="handleCancer()" size="small">取消</el-button>
|
||||
<el-button type="primary" size="small" @click="handleSubmit()">
|
||||
确定添加
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="testMseeageDialogVisible" width="50%" align-center>
|
||||
<span>将发送一条测试信息，将注意查收</span>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button size="small" @click="testMseeageDialogVisible = false">取消</el-button>
|
||||
<el-button size="small" type="primary" @click="(testMseeageDialogVisible = false) || handleTest()">
|
||||
确定发送
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, onMounted, watch, reactive, toRefs } from 'vue';
|
||||
import { usePageState } from '../../../store/page_sate.js';
|
||||
import { request } from '../../../api/api'
|
||||
import { CONSTANT } from '../../../constant'
|
||||
import { _ } from 'lodash';
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
componentName: String
|
||||
},
|
||||
setup(props) {
|
||||
const pageState = usePageState();
|
||||
const state = reactive({
|
||||
isShow: false,
|
||||
testMseeageDialogVisible: false,
|
||||
activeName: "Email",
|
||||
waysLabelData: _.cloneDeep(CONSTANT.WAYS_DATA),
|
||||
|
||||
});
|
||||
|
||||
watch(pageState.ShowDialogData, (newValue, oldValue) => {
|
||||
if (newValue[props.componentName]) {
|
||||
state.isShow = pageState.ShowDialogData[props.componentName].isShow;
|
||||
}
|
||||
});
|
||||
|
||||
const handleCancer = () => {
|
||||
if (pageState.ShowDialogData[props.componentName]) {
|
||||
pageState.ShowDialogData[props.componentName].isShow = false;
|
||||
}
|
||||
}
|
||||
|
||||
const handleClick = () => {
|
||||
}
|
||||
|
||||
const getInputData = (type) => {
|
||||
for (const element of state.waysLabelData) {
|
||||
if (element.type == type) {
|
||||
const data = {};
|
||||
for (const item of element.inputs) {
|
||||
data[item.col] = item.value;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
const getFinalData = () => {
|
||||
const inputData = getInputData(state.activeName);
|
||||
const { name, ...nameObject } = inputData;
|
||||
let postData = { name: name }
|
||||
const { name: _, ...auth } = inputData;
|
||||
if (state.activeName == 'Email') {
|
||||
auth.port = Number(auth.port)
|
||||
};
|
||||
postData.auth = JSON.stringify(auth);
|
||||
postData.type = state.activeName;
|
||||
return postData
|
||||
}
|
||||
|
||||
const handleTest = async () => {
|
||||
let postData = getFinalData();
|
||||
const rsp = await request.post('/sendways/test', postData).data;
|
||||
if (await rsp.data.code == 200) {
|
||||
ElMessage({ message: response.data.msg, type: 'success' })
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
let postData = getFinalData();
|
||||
const rsp = await request.post('/sendways/add', postData).data;
|
||||
if (rsp.code == 200) {
|
||||
handleCancer();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state), handleCancer, handleSubmit, handleClick, handleTest
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* :global(.el-dialog) {
|
||||
width: 500px;
|
||||
|
||||
} */
|
||||
/* :global(.el-dialog__title) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:global(.el-dialog label) {
|
||||
font-size: 13px;
|
||||
} */
|
||||
</style>
|
||||
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<el-dialog v-model="isShow" width="500px" :close-on-press-escape="false" :before-close="() => { }" :show-close="false">
|
||||
<template #header="">
|
||||
<el-text class="mx-1">编辑发信渠道</el-text>
|
||||
</template>
|
||||
|
||||
<el-tabs class="demo-tabs" @tab-click="handleClick">
|
||||
|
||||
<el-form label-width="100px" v-for="item in waysLabelData">
|
||||
<!-- <el-tab-pane :label="item.label" :name="item.type"> -->
|
||||
<el-form-item :label="one.subLabel" v-for="one in item.inputs">
|
||||
<el-input v-model="one.value" />
|
||||
</el-form-item>
|
||||
<!-- </el-tab-pane> -->
|
||||
</el-form>
|
||||
|
||||
</el-tabs>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="testMseeageDialogVisible = true" size="small">测试发信</el-button>
|
||||
<el-button @click="handleCancer()" size="small">取消</el-button>
|
||||
<el-button type="primary" size="small" @click="handleSubmit()">
|
||||
确定编辑
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="testMseeageDialogVisible" width="50%" align-center>
|
||||
<span>将发送一条测试信息，将注意查收</span>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button size="small" @click="testMseeageDialogVisible = false">取消</el-button>
|
||||
<el-button size="small" type="primary" @click="(testMseeageDialogVisible = false) || handleTest()">
|
||||
确定发送
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, onMounted, watch, reactive, toRefs } from 'vue';
|
||||
import { usePageState } from '../../../store/page_sate.js';
|
||||
import { request } from '../../../api/api'
|
||||
import { CONSTANT } from '../../../constant'
|
||||
import { _ } from 'lodash';
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
componentName: String
|
||||
},
|
||||
setup(props) {
|
||||
const pageState = usePageState();
|
||||
const state = reactive({
|
||||
isShow: false,
|
||||
testMseeageDialogVisible: false,
|
||||
waysLabelData: [],
|
||||
editData: {},
|
||||
|
||||
});
|
||||
|
||||
const dealDisplayData = () => {
|
||||
|
||||
}
|
||||
|
||||
// 监测父页面传过来的数据
|
||||
watch(pageState.ShowDialogData, (newValue, oldValue) => {
|
||||
if (newValue[props.componentName]) {
|
||||
// 弹出编辑框
|
||||
state.isShow = pageState.ShowDialogData[props.componentName].isShow;
|
||||
|
||||
// 展示编辑框
|
||||
if (newValue[props.componentName].rowData) {
|
||||
const row = pageState.ShowDialogData[props.componentName].rowData;
|
||||
let nowData = [];
|
||||
_.cloneDeep(CONSTANT.WAYS_DATA).forEach(element => {
|
||||
if (element.type == row.type) {
|
||||
// 填充输入框的值
|
||||
state.editData = row;
|
||||
element.inputs.forEach(one => {
|
||||
let newRow = Object.assign(row, JSON.parse(row.auth));
|
||||
if (newRow[one.col]) {
|
||||
one.value = newRow[one.col];
|
||||
};
|
||||
});
|
||||
nowData.push(element);
|
||||
};
|
||||
});
|
||||
state.waysLabelData = nowData;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
const handleCancer = () => {
|
||||
if (pageState.ShowDialogData[props.componentName]) {
|
||||
pageState.ShowDialogData[props.componentName].isShow = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const handleClick = () => {
|
||||
}
|
||||
|
||||
const getEditData = (type) => {
|
||||
for (const element of state.waysLabelData) {
|
||||
// if (element.type == type) {
|
||||
const data = {};
|
||||
for (const item of element.inputs) {
|
||||
data[item.col] = item.value;
|
||||
}
|
||||
return data;
|
||||
// }
|
||||
}
|
||||
return {};
|
||||
}
|
||||
const getFinalData = () => {
|
||||
const editData = getEditData(state.waysLabelData);
|
||||
const { name, ...nameObject } = editData;
|
||||
let postData = { name: name }
|
||||
const { name: _, ...auth } = editData;
|
||||
if (state.editData.type == 'Email') {
|
||||
auth.port = Number(auth.port)
|
||||
};
|
||||
postData.auth = JSON.stringify(auth);
|
||||
postData.type = state.editData.type;
|
||||
postData.id = state.editData.id;
|
||||
return postData
|
||||
}
|
||||
|
||||
const handleTest = async () => {
|
||||
let postData = getFinalData();
|
||||
const rsp = await request.post('/sendways/test', postData);
|
||||
if (await rsp.data.code == 200) {
|
||||
ElMessage({ message: response.data.msg, type: 'success' })
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
let postData = getFinalData();
|
||||
const rsp = await request.post('/sendways/edit', postData);
|
||||
// console.log('edit res',rsp)
|
||||
if (await rsp.data.code == 200) {
|
||||
handleCancer();
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state), handleCancer, handleSubmit, handleClick, handleTest
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* :global(.el-dialog) {
|
||||
width: 500px;
|
||||
|
||||
} */
|
||||
/* :global(.el-dialog__title) {
|
||||
font-size: 14px;
|
||||
} */
|
||||
|
||||
/* :global(.el-dialog label) {
|
||||
font-size: 13px;
|
||||
} */
|
||||
</style>
|
||||
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div class="main-center-body">
|
||||
<div class="container">
|
||||
<el-select v-model="optionValue" class="select" placeholder="渠道筛选" size="small" @change="filterFunc()">
|
||||
<el-option v-for="item in options" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<div class="search-input-sendways">
|
||||
<el-input v-model="search" size="small" placeholder="搜索" @change="filterFunc()" />
|
||||
</div>
|
||||
|
||||
<!-- <td class="line">
|
||||
<div />
|
||||
</td> -->
|
||||
<div class="search-box">
|
||||
<el-button size="small" type="primary" @click="clickAdd">新增渠道</el-button>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<div ref="refContainer">
|
||||
<el-table :data="tableData" empty-text="发信渠道为空" :row-style="rowStyle()">
|
||||
<el-table-column label="ID" width="320px">
|
||||
<template #default="scope">
|
||||
{{ scope.row.id }}
|
||||
<el-icon>
|
||||
<CopyDocument @click="copyToClipboard(scope.row.id)" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="渠道名" prop="name" />
|
||||
<el-table-column label="发信渠道" prop="type" />
|
||||
<el-table-column label="创建时间" prop="created_on" />
|
||||
<el-table-column fixed="right" label="操作" width="100px">
|
||||
<template #default="scope">
|
||||
<!-- <el-button link size="small" type="primary" @click="handleView(scope.$index, scope.row)">查看</el-button> -->
|
||||
<el-button link size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
||||
<tableDeleteButton @customHandleDelete="handleDelete(scope.$index, scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
|
||||
</div>
|
||||
<div class="pagination-block">
|
||||
<el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="handPageChange" />
|
||||
<el-text class="total-tip" size="small">共{{ total }}条</el-text>
|
||||
</div>
|
||||
|
||||
<addWayComponent :componentName="addWayComponentName" />
|
||||
<editWayComponent :componentName="editWayComponentName" />
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import { reactive, toRefs, onMounted } from 'vue'
|
||||
import addWayComponent from './addWayPopUp.vue'
|
||||
import editWayComponent from './editWayPopUp.vue'
|
||||
import { usePageState } from '../../../store/page_sate.js';
|
||||
import { request } from '../../../api/api'
|
||||
import { CopyDocument } from '@element-plus/icons-vue'
|
||||
import { copyToClipboard } from '../../../util/clipboard.js';
|
||||
import tableDeleteButton from '@/views/common/tableDeleteButton.vue'
|
||||
import { CONSTANT } from '@/constant'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
addWayComponent,
|
||||
editWayComponent,
|
||||
CopyDocument,
|
||||
tableDeleteButton,
|
||||
},
|
||||
setup() {
|
||||
const pageState = usePageState();
|
||||
const state = reactive({
|
||||
addWayComponentName: 'addWayComponent',
|
||||
editWayComponentName: 'editWayComponent',
|
||||
search: '',
|
||||
optionValue: '',
|
||||
dialogFormVisible: false,
|
||||
// confirmBtnVisible: false,
|
||||
tableData: [],
|
||||
total: CONSTANT.TOTAL,
|
||||
pageSize: CONSTANT.PAGE_SIZE,
|
||||
currPage: CONSTANT.PAGE,
|
||||
displayCols: [
|
||||
{ 'col': 'id', 'label': '渠道ID' },
|
||||
{ 'col': 'name', 'label': '渠道名' },
|
||||
{ 'col': 'type', 'label': '发信渠道' },
|
||||
{ 'col': 'created_on', 'label': '创建时间' },
|
||||
],
|
||||
options: [
|
||||
{ label: '邮箱', value: 'Email' },
|
||||
{ label: '钉钉', value: 'Dtalk' }
|
||||
]
|
||||
});
|
||||
|
||||
const handleEdit = (index, row) => {
|
||||
console.log(index, row)
|
||||
let name = state.editWayComponentName;
|
||||
pageState.ShowDialogData[name] = {};
|
||||
pageState.ShowDialogData[name].isShow = true;
|
||||
pageState.ShowDialogData[name].rowData = row;
|
||||
}
|
||||
|
||||
const handleDelete = async (index, row) => {
|
||||
const rsp = await request.post('/sendways/delete', { id: row.id });
|
||||
if (rsp.status == 200 && await rsp.data.code == 200) {
|
||||
state.tableData.splice(index, 1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const handPageChange = async (pageNum) => {
|
||||
console.log('pageNum', pageNum)
|
||||
state.currPage = pageNum;
|
||||
await queryListData(pageNum, state.pageSize);
|
||||
|
||||
}
|
||||
const rowStyle = () => {
|
||||
return {
|
||||
'font-size': '13px',
|
||||
}
|
||||
}
|
||||
const filterFunc = async () => {
|
||||
console.log('state.optionValue', state.optionValue);
|
||||
await queryListData(state.currPage, state.pageSize, state.search, state.optionValue);
|
||||
|
||||
}
|
||||
const clickAdd = () => {
|
||||
pageState.ShowDialogData[state.addWayComponentName] = {};
|
||||
pageState.ShowDialogData[state.addWayComponentName].isShow = true;
|
||||
console.log('clickAdd', pageState.ShowDialogData[state.addWayComponentName].isShow)
|
||||
}
|
||||
|
||||
const queryListData = async (page, size, name = '', type = '') => {
|
||||
let params = { page: page, size: size, name: name, type: type };
|
||||
const rsp = await request.get('/sendways/list', { params: params });
|
||||
state.tableData = await rsp.data.data.lists;
|
||||
state.total = await rsp.data.data.total;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await queryListData(1, state.pageSize);
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state), handleEdit, handleDelete,
|
||||
clickAdd, rowStyle, handPageChange, filterFunc, copyToClipboard
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
hr {
|
||||
color: #FAFCFF;
|
||||
background-color: #FAFCFF;
|
||||
border-color: #FAFCFF;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
margin-top: -10vh;
|
||||
}
|
||||
|
||||
.el-table th,
|
||||
.el-table .cell {
|
||||
font-size: 10px;
|
||||
/* 调整字体大小 */
|
||||
}
|
||||
|
||||
/* .search-input {
|
||||
margin-right: 0px;
|
||||
margin-left: 0px;
|
||||
padding-left: 0px;
|
||||
} */
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.pagination-block {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.total-tip {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
float: right;
|
||||
}
|
||||
|
||||
:global(.select .el-input__inner) {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.search-input-sendways {
|
||||
margin-left: 40px;
|
||||
width: 150px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.op-col {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="main-center-body">
|
||||
<div class="container">
|
||||
<div class="setting-main" style="display: flex;">
|
||||
<div style="width: 120px;">
|
||||
<el-menu :default-active="currTab" mode="vertical" width="100px" @select="handleSelect">
|
||||
<el-menu-item index="resetPasswd">
|
||||
重置密码
|
||||
</el-menu-item>
|
||||
<el-menu-item index="logCleanSetting">
|
||||
日志清理
|
||||
</el-menu-item>
|
||||
<el-menu-item index="siteCustomSetting">
|
||||
站点设置
|
||||
</el-menu-item>
|
||||
<el-menu-item index="aboutSetting">
|
||||
站点关于
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="setting-right">
|
||||
<resetPasswd v-if="currTab == 'resetPasswd'" />
|
||||
<setLogClean v-if="currTab == 'logCleanSetting'" />
|
||||
<siteCustom v-if="currTab == 'siteCustomSetting'" />
|
||||
<aboutSetting v-if="currTab == 'aboutSetting'" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import { reactive, toRefs, onMounted } from 'vue'
|
||||
import { copyToClipboard } from '@/util/clipboard.js';
|
||||
|
||||
import resetPasswd from './view/resetPasswd.vue'
|
||||
import setLogClean from './view/setLogClean.vue'
|
||||
import siteCustom from './view/siteCustom.vue'
|
||||
import aboutSetting from './view/about.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
resetPasswd,
|
||||
setLogClean,
|
||||
siteCustom,
|
||||
aboutSetting,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
currTab: 'resetPasswd',
|
||||
});
|
||||
|
||||
const handleSelect = (index) => {
|
||||
state.currTab = index;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state), copyToClipboard, handleSelect
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
hr {
|
||||
color: #FAFCFF;
|
||||
background-color: #FAFCFF;
|
||||
border-color: #FAFCFF;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
margin-top: -10vh;
|
||||
}
|
||||
|
||||
/* .setting-main {
|
||||
|
||||
} */
|
||||
|
||||
.setting-right {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="setting-container">
|
||||
<el-text size="small">当前版本：v1.0.0</el-text>
|
||||
<div class="buttom">
|
||||
<div class="tips">
|
||||
<el-text size="small">版本功能说明</el-text>
|
||||
<el-tooltip placement="top">
|
||||
<template #content>
|
||||
logo请输入svg文本，替换后登录页面、ico、导航栏logo将全部一起更换
|
||||
<br />
|
||||
*将在下一次登录的时候生效
|
||||
</template>
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, reactive, toRefs } from 'vue';
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { request } from '@/api/api'
|
||||
import { QuestionFilled } from '@element-plus/icons-vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
QuestionFilled,
|
||||
},
|
||||
props: {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
oldPasswd: '',
|
||||
newPasswd: '',
|
||||
});
|
||||
|
||||
const handleChange = async () => {
|
||||
let postData = { old_passwd: state.oldPasswd, new_passwd: state.newPasswd };
|
||||
const rsp = await request.post('/settings/setpasswd', postData);
|
||||
if (await rsp.data.code == 200) {
|
||||
let msg = await rsp.data.msg;
|
||||
ElMessage({ message: msg, type: 'success' })
|
||||
}
|
||||
}
|
||||
return {
|
||||
...toRefs(state), handleChange
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-input .el-input__wrapper) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
float: right !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.setting-container {
|
||||
width: 200px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
.buttom {
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="setting-container">
|
||||
<el-input v-model="oldPasswd" size="small" placeholder="请输入旧密码" type="password" show-password>
|
||||
<template #prepend>旧密码</template>
|
||||
</el-input>
|
||||
<el-input v-model="newPasswd" size="small" placeholder="请输入新密码" type="password" show-password
|
||||
style=" margin-top: 15px;">
|
||||
<template #prepend>新密码</template>
|
||||
</el-input>
|
||||
<el-button @click="handleChange" size="small" type="primary">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, reactive, toRefs } from 'vue';
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { request } from '@/api/api'
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
oldPasswd: '',
|
||||
newPasswd: '',
|
||||
});
|
||||
|
||||
const handleChange = async () => {
|
||||
let postData = { old_passwd: state.oldPasswd, new_passwd: state.newPasswd };
|
||||
const rsp = await request.post('/settings/setpasswd', postData);
|
||||
if (await rsp.data.code == 200) {
|
||||
let msg = await rsp.data.msg;
|
||||
ElMessage({ message: msg, type: 'success' })
|
||||
}
|
||||
}
|
||||
return {
|
||||
...toRefs(state), handleChange
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* :deep(.el-input .el-input__wrapper) {
|
||||
margin-top: 10px;
|
||||
} */
|
||||
|
||||
:deep(.el-button) {
|
||||
float: right !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.setting-container {
|
||||
width: 300px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="setting-container">
|
||||
<div>
|
||||
<el-input v-model="cron" size="small" placeholder="请输入定时日志清除的Cron表达式">
|
||||
<template size="small" #prepend>cron://</template>
|
||||
</el-input>
|
||||
<el-input v-model.number="keepNum" size="small" placeholder="请输入要保留的最近的日志条数" style="margin-top: 15px;">
|
||||
<template size="small" #prepend>保留数</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="buttom">
|
||||
<div class="tips">
|
||||
<el-text size="small">说明</el-text>
|
||||
<el-tooltip placement="top">
|
||||
<template #content>
|
||||
cron如果不设置，默认是在每天的0点1分进行清理
|
||||
<br />
|
||||
保留数目如果不设置，默认保留最近1000条
|
||||
</template>
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-button @click="handleView" size="small">查看日志</el-button>
|
||||
<el-button @click="handleSubmit" size="small" type="primary">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, reactive, toRefs } from 'vue';
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { QuestionFilled } from '@element-plus/icons-vue'
|
||||
import { useRouter } from 'vue-router';
|
||||
import { request } from '@/api/api'
|
||||
import { CONSTANT } from '@/constant'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
QuestionFilled,
|
||||
},
|
||||
props: {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const state = reactive({
|
||||
cron: '',
|
||||
keepNum: 1000,
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
let postData = { old_passwd: state.oldPasswd, new_passwd: state.newPasswd };
|
||||
const rsp = await request.post('/settings/setpasswd', postData);
|
||||
if (await rsp.data.code == 200) {
|
||||
let msg = await rsp.data.msg;
|
||||
ElMessage({ message: msg, type: 'success' })
|
||||
}
|
||||
}
|
||||
const handleView = async () => {
|
||||
router.push('/sendlogs?taskid=' + CONSTANT.LOG_TASK_ID, { replace: true });
|
||||
}
|
||||
return {
|
||||
...toRefs(state), handleSubmit, handleView
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* :deep(.el-input .el-input__wrapper) {
|
||||
margin-top: 10px;
|
||||
} */
|
||||
|
||||
:deep(.el-button) {
|
||||
float: right !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.buttom {
|
||||
display: flex;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
width: 300px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.setting-container {
|
||||
width: 300px;
|
||||
margin: 40px auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="setting-container">
|
||||
<div>
|
||||
<el-input v-model="title" size="small" placeholder="请输入自定义的网站标题">
|
||||
<template size="small" #prepend>站点标题</template>
|
||||
</el-input>
|
||||
<el-input v-model.number="slogan" size="small" placeholder="请输入自定义的网站slogan" style="margin-top: 15px;">
|
||||
<template size="small" #prepend>站点标语</template>
|
||||
</el-input>
|
||||
<el-input v-model.number="logo" size="small" placeholder="请输入自定义的网站logo（svg文本）" style="margin-top: 15px;">
|
||||
<template size="small" #prepend>站点图标</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="buttom">
|
||||
<div class="tips">
|
||||
<el-text size="small">说明</el-text>
|
||||
<el-tooltip placement="top">
|
||||
<template #content>
|
||||
1. logo请输入svg文本，替换后登录页面，ico，导航栏logo将全部一起更换
|
||||
<br />
|
||||
2. slogan将在登录页面展示
|
||||
<br />
|
||||
*将在下一次登录的时候生效
|
||||
</template>
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-button @click="handleView" size="small">查看日志</el-button>
|
||||
<el-button @click="handleSubmit" size="small" type="primary">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, reactive, toRefs } from 'vue';
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { QuestionFilled } from '@element-plus/icons-vue'
|
||||
import { useRouter } from 'vue-router';
|
||||
import { request } from '@/api/api'
|
||||
import { CONSTANT } from '@/constant'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
QuestionFilled,
|
||||
},
|
||||
props: {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const state = reactive({
|
||||
title: '',
|
||||
slogan: '',
|
||||
logo: '',
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
let postData = { old_passwd: state.oldPasswd, new_passwd: state.newPasswd };
|
||||
const rsp = await request.post('/settings/setpasswd', postData);
|
||||
if (await rsp.data.code == 200) {
|
||||
let msg = await rsp.data.msg;
|
||||
ElMessage({ message: msg, type: 'success' })
|
||||
}
|
||||
}
|
||||
const handleView = async () => {
|
||||
router.push('/sendlogs?taskid=' + CONSTANT.LOG_TASK_ID, { replace: true });
|
||||
}
|
||||
return {
|
||||
...toRefs(state), handleSubmit, handleView
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-button) {
|
||||
float: right !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.buttom {
|
||||
display: flex;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
width: 300px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.setting-container {
|
||||
width: 300px;
|
||||
margin: 40px auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user