邮箱界面

src/views/deliveryRecord/components/emailEdits.vue

+<template>
+    <div>
+        <el-dialog title="邮件内容" :visible="emailVidable"  @close="cancel" center
+            :distroy-on-close="true">
+            <div>
+                <el-form>
+                    <el-col :span="24">
+                        <el-form-item label="邮件主题：" label-width="100px">
+                           <div>主题</div>
+                        </el-form-item>
+                    </el-col>
+                     <el-col :span="12">
+                        <el-form-item label="收件人：" label-width="100px">
+                           <div>收件人</div>
+                        </el-form-item>
+                    </el-col>
+                     <el-col :span="12">
+                        <el-form-item label="发件人：" label-width="100px">
+                           <div>发件人</div>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="邮件附件：" label-width="100px">
+                           <div  style="color: blue; cursor: pointer" @click="viewAttachments">附件</div>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="邮件正文：" label-width="100px">
+                            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="sendData"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-form>
+                
+            </div>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="cancel" class="endbutton1" round><span>取 消</span></el-button>
+                <el-button @click="submitSend" class="endbutton1" type="primary" round><span>确 认</span></el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import {
+    updateSendContent,update
+} from "@/api/deliveryRecord/deliveryRecord.js";
+export default {
+    props: ["emailVidable", "emailRow","queryParams"],
+    data() {
+        return {
+            sendData:'',
+            fileURL: window.location.origin + "/API",
+        };
+    },
+    watch: {
+        emailVidable(val){
+            if(val){
+                this.sendData = this.emailRow.mailContent;
+            }
+        }
+    },
+    methods: {
+        cancel() {
+            this.$emit("cancelEmail");
+        },
+        submitSend() {
+            console.log(this.emailRow.mailContent)
+            this.updateSendContentFn({
+                id:this.emailRow.id,
+                mailContent:this.sendData
+            })
+        },
+        updateSendContentFn(data){
+            update(data).then(res=>{
+                this.$message.success('更新成功');
+                this.$emit("cancelEmail");
+                this.$emit('getList',this.queryParams);
+            })
+        },
+        // 查看附件下载附件
+        viewAttachments(val){
+            window.open(this.fileURL + val);
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/deliveryRecord/components/resend.vue

+<template>
+    <div>
+        <el-dialog title="修改内容" :visible="resendVidable" v-if="resendVidable" @close="cancel" center
+            :distroy-on-close="true">
+            <div style="margin-bottom: 30px;"><span style="font-weight: bold;">发送内容:</span>{{ sendData }}</div>
+            <el-form label-width="100px">
+                <el-form-item v-for="(item,index) in rowData.templateParams" :label="item.paramName" :key="item.id"> 
+                    <el-input v-model="rowData.templateParams[index].paramValue" @input="changeContent"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="cancel" class="endbutton1" round><span>取 消</span></el-button>
+                <el-button @click="submitSend" class="endbutton1" type="primary" round><span>确 认</span></el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import {
+    updateSendContent,
+} from "@/api/deliveryRecord/deliveryRecord.js";
+export default {
+    props: ["resendVidable", "rowData","queryParams"],
+    data() {
+        return {
+            sendData:'',
+            param:"",
+            paramValue:""
+
+        };
+    },
+    watch: {
+        resendVidable(val){
+            if(val){
+                this.sendData = this.rowData.sendContent;
+            }
+        }
+    },
+    methods: {
+        cancel() {
+            this.$emit("cancelSend");
+        },
+        submitSend() {
+            console.log(this.rowData)
+            this.updateSendContentFn({
+                id:this.rowData.id,
+                templateParams:this.rowData.templateParams
+            })
+        },
+        updateSendContentFn(data){
+            updateSendContent(data).then(res=>{
+                this.$message.success('更新成功');
+                this.$emit("cancelSend");
+                this.$emit('getList',this.queryParams);
+            })
+        },
+        changeContent(){
+            let templateContent = this.rowData.templateContent
+            this.rowData.templateParams.forEach(item => {
+                templateContent = templateContent.replace(item.param,item.paramValue)
+            });
+           this.sendData = templateContent
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/deliveryRecord/emailRecord.vue

             <!-- 缴费人 -->
             <!-- <el-table-column label="案件状态" align="center" prop="caseStatusName" /> -->
             <el-table-column label="内容" align="center" prop="mailContent"></el-table-column>
+            <el-table-column label="操作" align="center">
+                <template  slot-scope="scope">
+                    <el-button size="mini" type="text" @click="emailEditing(scope.row)" icon="el-icon-s-promotion">邮箱编辑</el-button>
+                    <el-button v-if="scope.row.sendStatus == '未发送'" size="mini" type="text" @click="resendCounts(scope.row)" icon="el-icon-s-promotion">重新发送</el-button>
+                </template>
+            </el-table-column>
         </el-table>
+        <emailEdits :emailVidable="emailVidable" @cancelEmail="cancelEmail"   @getList="getList" :queryParams="queryParams" :emailRow="emailRow"></emailEdits>
         <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
             @pagination="getList(queryParams)" />
 
 import {
     emailList,
 } from "@/api/deliveryRecord/deliveryRecord.js";
-
+import emailEdits from "./components/emailEdits.vue";
 import { getDicts } from '@/api/system/dict/data.js'
 export default {
     name: "paymentList",
     dicts: ["case_status"],
-    components: {},
+    components: {emailEdits},
     data() {
         return {
             queryParams: {
             // 校验表单
             rules: {},
             dataList: [],
+            emailVidable:false,
+            emailRow:{},
         };
     },
     created() {
         })
     },
     methods: {
+         // 邮箱编辑内容
+         emailEditing(data){
+            this.emailVidable = true
+            this.emailRow = data;
+            console.log(data)
+        },
+        // 重新发送
+        resendCounts(row){
+           if(row.sendStatus=='未发送'){
+            row.sendStatus = 0
+           }else if(row.sendStatus=='已发送'){
+            row.sendStatus = 1
+           }
+            reSendMailRecord(row).then(res=>{
+                console.log(res)
+                this.$message.success('发送成功');
+                this.getList(this.queryParams);
+            })
+            
+        },
+        // 关闭弹窗
+        cancelEmail(){
+            this.emailVidable = false
+        },
         /** 搜索按钮操作 */
         handleQuery() {
             this.queryParams.pageNum = 1;

vue.config.js

 const port = process.env.port || process.env.npm_config_port || 80 // 端口
 
 // const API = 'http://121.40.189.20:9001'  //生产
-  const API = 'http://121.40.189.20:8001'  //测试
+  // const API = 'http://121.40.189.20:8001'  //测试
 // const API = 'http://172.16.1.26:8001'  //Bs
 // const API = 'http://192.168.3.77:9001' //Q
-// const API = 'http://172.16.0.103:8001' //W
+const API = 'http://172.16.0.241:8001' //W
 
 // vue.config.js 配置说明 
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions