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