æ·feat: commplete init process
This commit is contained in:
engigu
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user