修改数据确认
This commit is contained in:
龙运模
parent
e2812373b3
commit
a58602d8d9
@ -39,6 +39,7 @@ export default {
|
||||
return await http.post(this.url, params);
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
maintenance:{
|
||||
list:{
|
||||
|
||||
@ -2,10 +2,11 @@
|
||||
<el-container class="mainBox">
|
||||
<el-aside width="340px">
|
||||
<el-container>
|
||||
<el-header><span class="emailTitle">邮件通知</span></el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-scrollbar height="100%">
|
||||
<div class="emailMain">
|
||||
<div class="itemBox" v-for="item in confirmList" :key="item" @click="emailChange(item)">
|
||||
<div class="itemBox" :class="emailId == item.id?'itemTrue':''" v-for="item in confirmList" :key="item" @click="()=>{this.emailChange(item);}">
|
||||
<div class="name text">{{item.from && item.from.email}}</div>
|
||||
<div class="title text">{{item.subject}}</div>
|
||||
<div class="msg text">{{item.text}}</div>
|
||||
@ -16,11 +17,11 @@
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
<el-container class="mainHeaderNoBorderPadding">
|
||||
<el-main class="nopadding">
|
||||
<el-container class="mainHeaderNoBorderPadding" v-loading="loading">
|
||||
<el-main class="nopadding emailMiddle">
|
||||
<div class="emailContent">
|
||||
<div class="title">【邮件名称】{{emailParams.subject}}</div>
|
||||
<div class="fromPeople itemText"><span class="text">发件人：</span>{{emailParams.from && emailParams.from.email}} {{emailParams.from && emailParams.from.name?emailParams.from.name:''}}</div>
|
||||
<div class="fromPeople itemText"><span class="text">发件人：</span>{{emailParams.from && emailParams.from.email}} {{emailParams.from && emailParams.from.name?'('+emailParams.from.name+')':''}}</div>
|
||||
<div class="date itemText"><span class="text">时 间：</span> {{emailParams.sent_at}}</div>
|
||||
<div class="receivingPeople itemText"><span class="text">收件人：</span>{{emailParams.source_email}}</div>
|
||||
<div class="theme itemText">
|
||||
@ -28,7 +29,81 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="emailBody">
|
||||
<div class="searchMain " style="padding-left: 10px;">
|
||||
<scSearch ref="scSearch" :searchList="searchList" @fetchSelectData="getSelectData"></scSearch>
|
||||
|
||||
<div class="searchItem searchBtn">
|
||||
<el-button :size="size" :icon="searchShow?'el-icon-ArrowUpBold':'el-icon-ArrowDownBold'" @click="searchShowClick">{{searchShow?'收起':'更多'}}</el-button>
|
||||
<el-button :size="size" type="primary" icon="el-icon-search" @click="upSearch">查询</el-button>
|
||||
<el-button :size="size" type="info" icon="el-icon-RefreshRight" @click="reset">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table class="scTable" :data="emailData.rows" ref="table" :row-key="rowKey" :key="toggleIndex" :header-cell-style="{'background': '#F5F7FA','color':'#606266'}" @selection-change="selectionChange" stripe :size="size">
|
||||
<el-table-column type="selection" align="center" width="45"></el-table-column>
|
||||
<el-table-column label="序号" align="center" type="index"></el-table-column>
|
||||
<template v-for="(item, index) in userColumn" :key="index">
|
||||
<el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop" :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<slot :name="item.prop" v-bind="scope">
|
||||
{{scope.row[item.prop]}}
|
||||
</slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column min-width="1"></el-table-column>
|
||||
<template #empty>
|
||||
<el-empty :description="emptyText" :image-size="100"></el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="annex">
|
||||
<div class="annexMain" v-if="emailParams.file_path && emailParams.file_path.length>0">
|
||||
<div class="title">
|
||||
{{emailParams.file_path && emailParams.file_path.length}} 个附件
|
||||
(<span class="down" @click="downFile(emailParams)">下载</span>)
|
||||
</div>
|
||||
<div class="itemBox">
|
||||
<div class="leftBox">
|
||||
<el-icon style="font-size: 26px;"><sc-icon-FilePdf/></el-icon>
|
||||
</div>
|
||||
<div class="rightBox">
|
||||
<div class="name">{{emailParams.file_name && emailParams.file_name.file}}</div>
|
||||
<div class="size">{{emailParams.file_name && emailParams.file_name.size}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scTable-page">
|
||||
<div class="scTable-do">
|
||||
<el-button @click="reset" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
|
||||
<el-popover placement="top" title="列设置" :width="500" trigger="click" :hide-after="0" @show="customColumnShow=true" @after-leave="customColumnShow=false">
|
||||
<template #reference>
|
||||
<el-button icon="el-icon-set-up" circle style="margin-left:15px"></el-button>
|
||||
</template>
|
||||
<columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange" @save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting>
|
||||
</el-popover>
|
||||
<el-popover placement="top" title="表格设置" :width="400" trigger="click" :hide-after="0">
|
||||
<template #reference>
|
||||
<el-button icon="el-icon-setting" circle style="margin-left:15px"></el-button>
|
||||
</template>
|
||||
<el-form label-width="80px" label-position="left">
|
||||
<el-form-item label="表格尺寸">
|
||||
<el-radio-group v-model="config.size" size="small" @change="configSizeChange">
|
||||
<el-radio-button label="large">大</el-radio-button>
|
||||
<el-radio-button label="default">正常</el-radio-button>
|
||||
<el-radio-button label="small">小</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="样式">
|
||||
<el-checkbox v-model="config.config.border" label="纵向边框" @change="configSizeChange"></el-checkbox>
|
||||
<el-checkbox v-model="config.config.stripe" label="斑马纹" @change="configSizeChange"></el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="scTable-pagination">
|
||||
<el-pagination background :small="true" :layout="paginationLayout" :total="total" :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
@ -38,9 +113,12 @@
|
||||
|
||||
<script>
|
||||
|
||||
import columnSetting from '@/components/scTable/columnSetting'
|
||||
import config from "@/config/table";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
columnSetting
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -51,7 +129,39 @@ export default {
|
||||
},
|
||||
confirmList:[],
|
||||
|
||||
emailId:'',
|
||||
searchShow:false,
|
||||
searchList:[
|
||||
{name:'创建日期',type:'date',code:'activation_date'},
|
||||
{name:'状态',type:'select',code:'active_status', data:[], placeholder:"请选择状态",show:true},
|
||||
{name:'联系方式',type:'text',code:['mobile'],placeholder:"请输入手机号",isOpen:true,show:false},
|
||||
{name:'姓名',type:'text',code:['name'],placeholder:"请输入姓名",isOpen:true,show:false},
|
||||
{name:'关键字',type:'text',code:['login_name','roles','department'],keyword:true,show:true},
|
||||
],
|
||||
emailParams: {},
|
||||
toggleIndex: 0,
|
||||
rowKey:"",
|
||||
paginationLayout:config.paginationLayout,
|
||||
scPageSize:config.pageSize,
|
||||
pageSizes:config.pageSizes,
|
||||
currentPage: 1,
|
||||
total:0,
|
||||
loading:false,
|
||||
customColumnShow: false,
|
||||
config: {
|
||||
size: 'small',
|
||||
config:{
|
||||
border: false,
|
||||
stripe: false
|
||||
},
|
||||
},
|
||||
|
||||
userColumn:[],
|
||||
emailData:{
|
||||
list:[],
|
||||
column:[]
|
||||
},
|
||||
emptyText: "暂无数据",
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -66,7 +176,7 @@ export default {
|
||||
item.text = this.stripHtmlTags(item.summary)
|
||||
})
|
||||
this.confirmList = res.data.rows;
|
||||
this.emailChange(res.data.rows[0])
|
||||
await this.emailChange(res.data.rows[5])
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -75,21 +185,109 @@ export default {
|
||||
div.innerHTML = html;
|
||||
return div.textContent || div.innerText || '';
|
||||
},
|
||||
emailChange(item){
|
||||
this.emailParams = item;
|
||||
}
|
||||
emailChange(item) {
|
||||
this.emailId = item.id;
|
||||
this.getEmailData();
|
||||
},
|
||||
async getEmailData() {
|
||||
let params = {
|
||||
mail_data_id: this.emailId
|
||||
}
|
||||
this.loading = true;
|
||||
const res = await this.$API.orders.order.mail.detail.post(params);
|
||||
if (res.code == 200) {
|
||||
this.total = res.data.total;
|
||||
this.emailData = res.data;
|
||||
this.userColumn = res.data.columnConfig;
|
||||
res.data.mail_info[0].text = this.stripHtmlTags(res.data.mail_info[0].summary)
|
||||
this.emailParams = res.data.mail_info[0];
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
getSelectData(){
|
||||
|
||||
},
|
||||
searchShowClick(){
|
||||
|
||||
},
|
||||
upSearch(){
|
||||
this.getEmailData();
|
||||
},
|
||||
reset(){
|
||||
this.getEmailData();
|
||||
},
|
||||
downFile(info){
|
||||
if(info.file_path && info.file_path.length>0){
|
||||
info.file_path.forEach(em=>{
|
||||
const link = document.createElement('a');
|
||||
link.href = em;
|
||||
link.setAttribute('download', '');
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
})
|
||||
}
|
||||
},
|
||||
// 选择数据
|
||||
selectionChange(){
|
||||
|
||||
},
|
||||
|
||||
//分页点击
|
||||
paginationChange(){
|
||||
this.getEmailData();
|
||||
},
|
||||
//条数变化
|
||||
pageSizeChange(size){
|
||||
this.scPageSize = size
|
||||
this.getEmailData();
|
||||
},
|
||||
|
||||
//自定义变化事件
|
||||
columnSettingChange(userColumn){
|
||||
this.userColumn = userColumn;
|
||||
this.toggleIndex += 1;
|
||||
},
|
||||
//自定义列保存
|
||||
async columnSettingSave(userColumn){
|
||||
this.$refs.columnSetting.isSave = true
|
||||
try {
|
||||
await config.columnSettingSave(this.tableName, userColumn,this.apiObj);
|
||||
this.$message.success('保存成功')
|
||||
}catch(error){
|
||||
this.$message.error('保存失败')
|
||||
this.$refs.columnSetting.isSave = false
|
||||
}
|
||||
this.$refs.columnSetting.isSave = false
|
||||
},
|
||||
//自定义列重置
|
||||
async columnSettingBack(userColumn){
|
||||
this.$refs.columnSetting.isSave = true
|
||||
try {
|
||||
const column = await config.columnSettingReset(this.tableName, userColumn,this.apiObj)
|
||||
if(column){
|
||||
this.userColumn = column
|
||||
this.$refs.columnSetting.usercolumn = JSON.parse(JSON.stringify(this.userColumn||[]))
|
||||
}
|
||||
}catch(error){
|
||||
this.$message.error('重置失败')
|
||||
this.$refs.columnSetting.isSave = false
|
||||
}
|
||||
this.$refs.columnSetting.isSave = false
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.emailTitle{font-size: 14px;font-weight: 600;}
|
||||
.emailMain{
|
||||
padding: 5px 0;
|
||||
.itemBox{
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.08);
|
||||
position: relative;
|
||||
padding: 12px 0;
|
||||
margin-right: 10px;
|
||||
padding: 12px 0 12px 10px;
|
||||
cursor: pointer;
|
||||
.name{margin-bottom: 10px;font-size: 14px;font-weight: 600;color: var(--el-color-dark)}
|
||||
.title{margin-bottom: 6px;color: var(--el-text-color-regular)}
|
||||
@ -102,40 +300,91 @@ export default {
|
||||
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.itemTrue{
|
||||
background: #EFF5FF;
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
.itemBox:last-child{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.emailContent{
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.06);
|
||||
padding: 10px;
|
||||
color: var(--el-color-dark);
|
||||
.title{
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.fromPeople{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.date{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.receivingPeople{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.itemText{
|
||||
padding: 0 10px;
|
||||
.text{
|
||||
color: var(--el-text-color-regular)
|
||||
.emailMiddle{
|
||||
display: flex;flex-direction: column;
|
||||
.emailContent{
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.06);
|
||||
padding: 10px 5px 10px 10px;
|
||||
color: var(--el-color-dark);
|
||||
.title{
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
padding: 10px 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.fromPeople{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.date{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.receivingPeople{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.itemText{
|
||||
padding: 0 0 0 10px;
|
||||
.text{
|
||||
color: var(--el-text-color-regular)
|
||||
}
|
||||
}
|
||||
.theme{
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.theme{
|
||||
line-height: 20px;
|
||||
}
|
||||
.emailBody{
|
||||
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;flex-direction: column;
|
||||
}
|
||||
.annex{
|
||||
flex-basis: 100px;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
display: flex;justify-content: space-between;
|
||||
.down{
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
.annexMain{
|
||||
width: 320px;
|
||||
.itemBox{
|
||||
margin-top: 8px;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
background: #f6f6f6;
|
||||
display: flex;align-items: center;
|
||||
.leftBox{flex-basis: 40px;display: flex;align-items: center;justify-content: flex-start;}
|
||||
.rightBox{
|
||||
flex: 1;overflow: hidden;
|
||||
.name{
|
||||
width: 100%;
|
||||
white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.scTable-page{
|
||||
flex: 1;
|
||||
display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scTable{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.scTable ::v-deep .el-table__header .cell{
|
||||
white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user