From d1f61e3d107af971fcd64de3db35834078dc1427 Mon Sep 17 00:00:00 2001
From: laishajiang <12977614+laishajiang@user.noreply.gitee.com>
Date: Thu, 1 Feb 2024 20:47:17 +0800
Subject: [PATCH] =?UTF-8?q?pc=E4=BA=92=E8=81=94=E7=BD=91=E5=89=8D=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/imgs/FaultUpload.jpg        | Bin 0 -> 6739 bytes
 public/imgs/web_btn_delete.png     | Bin 0 -> 872 bytes
 src/util/validator copy.js         | 131 +++++++
 src/views/MailDetail.vue           | 182 +++++++++
 src/views/MailEvaluate.vue         |   3 +
 src/views/components/MailDraft.vue | 176 +++++++++
 src/views/components/MyMail.vue    | 212 +++++++++++
 src/views/components/WriteInfo.vue | 576 +++++++++++++++++++++++++++++
 8 files changed, 1280 insertions(+)
 create mode 100644 public/imgs/FaultUpload.jpg
 create mode 100644 public/imgs/web_btn_delete.png
 create mode 100644 src/util/validator copy.js
 create mode 100644 src/views/MailDetail.vue
 create mode 100644 src/views/MailEvaluate.vue
 create mode 100644 src/views/components/MailDraft.vue
 create mode 100644 src/views/components/MyMail.vue
 create mode 100644 src/views/components/WriteInfo.vue

diff --git a/public/imgs/FaultUpload.jpg b/public/imgs/FaultUpload.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e50c490904ddda79f6ec75f439ca9b456599ad07
GIT binary patch
literal 6739
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

literal 0
HcmV?d00001

diff --git a/public/imgs/web_btn_delete.png b/public/imgs/web_btn_delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b3c67b48e31917d87c35e9ea1e64e34eb9d2c6e
GIT binary patch
literal 872
zcmV-u1DE`XP)<h;3K|Lk000e1NJLTq001EX001Ef1^@s6SLDKP00001b5ch_0Itp)
z=>Px&B1uF+R9FecSUpP|Q53yzTv6O57Fw)pDv5<i4A|&DP$U>)VP$?t5NnbAilFI4
zl!!=Dij5W)Dq>-<l2t*Quq%otFXz13kvBW@W_Ok~dtsdS?$<f{KJTa`rD(0&q+EV0
zO1(yCLA35c`xfmY+82_|9xJ8(q)DslaR#s_cX#jM`w>8V_a?;MfYcW38`9Oa1wwxl
ze2u9l30*2pAn6x?zpIrjVpr-Aai3K#_cLO%6iyQO^{?>jzah!A<=<FSsZET^CydJP
zxCF5z^!@!Cd3xGJz))OJgSu16WTsVT=dbGc2#E@TJvjDMJ2#<!3nJsyL_9mOnF4<V
zUV;FjdN{%c#{v$Ggf5rA*IWbV=OXLtA`cH%no6^yLu6(~WMCj_vo%;FDx3WfsGdof
zT_Ex!FgV{MBO)Z?5)wE%a#?NtWUy<@beMC1+pr!Xf%$onQYrdSpG45k4?KelUB>8n
z5XGGX*ViJ;%Oa1DcDTsyuE^qISjQgq6x)^o#N3=nf4^@F{u0kW0J#fAuok{zI&|b&
zTf-sUrZrp|emqa>m6d32;sKZV3PZxX;0kT`QJl;9Q?RhWnEHgHv9#n*nLFYJcTL_i
zmr)V{cY<bEdWr8<Zo_6IY%B+EWA2VZ>gd%~k+HFG82i+xmx6~Sm;Q7-I}<rM3B$2Z
zeOduNr-KDa>je0mj$-Q=7~~?S<D#V`fbX#;1c{qeL<R>%hKIu;>{FjkcupL9rYQAm
z!urE!XGQk+!~X13pGJU7d~<;zZX+?ay}j1S7Y*kH$GBuMxIPI~#n>f>PXEzS{|q=d
zaJqyH^y8VqIF}HQxVEsKh+JU7rM9!9b$55VON{=E3vxu?69N8nQA0&yWp#x+ZhKqg
z@-m2Zzx(<`rlv&l`FI~!WkqjO`<2Tqa);uho1#6%ju^Mg|6pO7?8bny9G#asMOkf6
z+XM(4B0+^I$5ED}dCGnhh2I^Ka-aD_Yr+OJQ}ds`z#=0N5aEzj%JRv??HdHdz5Q)J
y$vo9lV7og<!gexMaVx*dZ8B_EYSO0uf8rlN2*V^%%AyGX0000<MNUMnLSTXcK$YnL

literal 0
HcmV?d00001

diff --git a/src/util/validator copy.js b/src/util/validator copy.js
new file mode 100644
index 0000000..3d03ff4
--- /dev/null
+++ b/src/util/validator copy.js	
@@ -0,0 +1,131 @@
+/**
+ * 验证身份证号码
+ * @param { String } code 身份证号码
+ */
+export function validatorIdCard(rule,code,callback) {
+    
+    // 身份证号前两位代表区域
+    const city = {
+        11: '北京',
+        12: '天津',
+        13: '河北',
+        14: '山西',
+        15: '内蒙古',
+        21: '辽宁',
+        22: '吉林',
+        23: '黑龙江 ',
+        31: '上海',
+        32: '江苏',
+        33: '浙江',
+        34: '安徽',
+        35: '福建',
+        36: '江西',
+        37: '山东',
+        41: '河南',
+        42: '湖北 ',
+        43: '湖南',
+        44: '广东',
+        45: '广西',
+        46: '海南',
+        50: '重庆',
+        51: '四川',
+        52: '贵州',
+        53: '云南',
+        54: '西藏 ',
+        61: '陕西',
+        62: '甘肃',
+        63: '青海',
+        64: '宁夏',
+        65: '新疆',
+        71: '台湾',
+        81: '香港',
+        82: '澳门',
+        91: '国外 ',
+    };
+    const idCardReg = /^[1-9]\d{5}(19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i; // 身份证格式正则表达式
+    // 如果身份证不满足格式正则表达式
+    if (!code) {
+        callback(new Error('请输入身份证号码'));
+        
+    }
+    if (!code.match(idCardReg)) {
+        callback(new Error('请输入正确的身份证号码'));
+        
+    } 
+    if (!city[code.substr(0, 2)]) {
+        // 区域数组中不包含需验证的身份证前两位
+        callback(new Error('请输入正确的身份证号码'));
+        
+    }
+    if (code.length === 18) {
+        // 18位身份证需要验证最后一位校验位
+        code = code.split('');
+        // ∑(ai×Wi)(mod 11)
+        // 加权因子
+        const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
+        // 校验位
+        const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
+        let sum = 0;
+        let ai = 0;
+        let wi = 0;
+        for (let i = 0; i < 17; i++) {
+            ai = parseInt(code[i]);
+            wi = factor[i];
+            sum += ai * wi; // 开始计算并相加
+        }
+        const last = parity[sum % 11]; // 求余
+        if (last.toString() !== code[17]) {
+            callback(new Error('请输入正确的身份证号码'));
+        }
+    }
+    return true
+}
+
+/**
+ * 校验手机号
+ * @param {*} phonenumber 
+ * @returns 
+ */
+export function validatorPhone(rule,phonenumber,callback) {
+    if (!phonenumber) {
+        callback(new Error('请输入手机号码'));
+    }
+    if (!/^1[3456789]\d{9}/.test(phonenumber)) {
+        callback(new Error('请输入手机号码'));
+    }
+    return true
+}
+
+/**
+ * 校验手机号
+ * @param {*} phonenumber 
+ * @returns 
+ */
+export function Phone(phonenumber) {
+    if (!phonenumber) {
+        return '请输入手机号码';
+    }
+    if (!/^1[3456789]\d{9}/.test(phonenumber)) {
+        return '请输入手机号码';
+    }
+    return true
+}
+
+
+/**
+ * 校验内容长度
+ * @param {*} content
+ * @returns 
+ */
+export function validatorContent(rule,content,callback) {
+    if (!content) {
+        callback(new Error('请输入信件内容'));
+    }
+    if (content.length < 10) {
+        callback(new Error('信件内容不能少于 10 个字'));
+    }
+    if (content.length > 300) {
+        callback(new Error('信件内容不能多于 300 个字'));
+    }
+    return true
+}
\ No newline at end of file
diff --git a/src/views/MailDetail.vue b/src/views/MailDetail.vue
new file mode 100644
index 0000000..0420010
--- /dev/null
+++ b/src/views/MailDetail.vue
@@ -0,0 +1,182 @@
+<template>
+     
+      <div class="wrapper">
+        <div class="card_first">
+            <h2>基本信息</h2>
+            <div class="row flex">
+                <label>信件标题</label>
+                <span>{{ mail.title }}</span>
+            </div>
+            <div class="row flex">
+                <label>联系人姓名</label>
+                <span>{{ mail.contactName }}</span>
+            </div>
+            <div class="row flex">
+                <label>联系人电话</label>
+                <span>{{ mail.contactPhone }}</span>
+            </div>
+            <div class="row flex">
+                <label>证件号码</label>
+                <span>{{ mail.contactIdCard }}</span>
+            </div>
+        </div>
+        <div class="card_second">
+            <h2>信件内容</h2>
+            <div class="row flex" v-if="mail.caseNumber">
+                <label>案件编号</label>
+                <span>{{ mail.caseNumber }}</span>
+            </div>
+            <div class="row">
+                <label>案件内容</label>
+                <div class="textarea text-wrap">{{ mail.content }}</div>
+            </div>
+            <div class="row">
+                <label>附件</label>
+                <div class="attachments" v-if="mail.attachments">
+                    <template
+                        v-for="(file, index) in JSON.parse(mail.attachments)"
+                        :key="index"
+                    >
+                        <img :src="`/api/file/stream/${file.filepath}`" @click="handleShowImgPreview(`/api/file/stream/${file.filepath}`)" />
+                    </template>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <Loading :loading="loading" />
+
+</template>
+<script setup>
+import { useRoute } from "vue-router";
+import { getMail } from "@/api/mail";
+
+
+const props = defineProps(["message"]);
+if (props.message) {
+    console.log(props.message,9999);  
+    console.log("msg"+props.message)
+    getMail(props.message).then((data) => {
+        mail.value = data;
+        loading.value = false;
+    });
+}
+const route = useRoute();
+const loading = ref(true);
+const mail = ref({});
+
+function onMounted(){
+          
+}
+const showImgPreview = ref(false);
+const imgFilepath = ref("");
+function handleShowImgPreview(filepath) {
+    imgFilepath.value = filepath;
+    showImgPreview.value = true;
+}
+</script>
+<style lang="scss" scoped>
+.card_first {
+    width: 1200px;
+    height: 172.5px;
+    background: #FFFFFF;
+    box-shadow: inset 0px -1px 0px 0px rgba(227,227,227,1);
+    padding-bottom: var(--van-padding-md);
+    h2{
+    width: 48px;
+    height: 17px;
+    font-family: PingFang-SC-Regular;
+    font-size: 12px;
+    color: #333333;
+    font-weight: 400;
+    margin-bottom:15px ;
+    }
+    label{
+        width: 90px;
+height: 20px;
+font-family: PingFang-SC-Regular;
+font-size: 14px;
+color: #666666;
+letter-spacing: 0;
+font-weight: 400;
+    }
+    span{
+        width: 229px;
+        height: 20px;
+        font-family: PingFang-SC-Regular;
+        font-size: 14px;
+        color: #333333;
+        letter-spacing: 0;
+        font-weight: 400;
+    }
+    .row.flex{
+        margin-bottom:15px ;
+    }
+}
+.card_second{
+    width: 1200px;
+    height: 365px;
+    background: #FFFFFF;
+    box-shadow: inset 0px -1px 0px 0px rgba(227,227,227,1);
+    label{
+        width: 90px;
+        height: 20px;
+        font-family: PingFang-SC-Regular;
+        font-size: 14px;
+        color: #666666;
+        letter-spacing: 0;
+        font-weight: 400;
+    }
+    span{
+        width: 229px;
+        height: 20px;
+        font-family: PingFang-SC-Regular;
+        font-size: 14px;
+        color: #333333;
+        letter-spacing: 0;
+        font-weight: 400;
+    }
+    h2{
+        width: 48px;
+        height: 17px;
+        font-family: PingFang-SC-Regular;
+        font-size: 12px;
+        color: #333333;
+        font-weight: 400;
+        margin-top: 40px;
+    }
+    .row{
+        margin-top: 16px;
+    }
+    .row.flex{
+        margin-top: 16px;
+    }
+    .textarea.text-wrap{
+        margin-left: 14px;
+        margin-top: 16px;
+        width: 1134px;
+        height: 60px;
+        font-family: PingFangSC-Regular;
+        font-size: 14px;
+        color: #333333;
+        font-weight: 400;
+    }
+}
+img{
+    width:120px;
+height: 120px;
+}
+
+::v-deep .el-tabs__item {
+    width: 400px;
+    height: 33px;
+    font-family: PingFang SC;
+    font-size: 24px;
+    color: #333333 100%;
+    text-align: center;
+    font-weight: 400;
+    margin-bottom: 1.2%;
+}
+  
+
+</style>
\ No newline at end of file
diff --git a/src/views/MailEvaluate.vue b/src/views/MailEvaluate.vue
new file mode 100644
index 0000000..6c57829
--- /dev/null
+++ b/src/views/MailEvaluate.vue
@@ -0,0 +1,3 @@
+<template>
+    <div></div>
+</template>
\ No newline at end of file
diff --git a/src/views/components/MailDraft.vue b/src/views/components/MailDraft.vue
new file mode 100644
index 0000000..17684d0
--- /dev/null
+++ b/src/views/components/MailDraft.vue
@@ -0,0 +1,176 @@
+<template> 
+    <el-dialog
+    v-model="dialogVisible"
+    title="提示"
+    width="30%"
+    
+    >
+    <span>确认删除该草稿吗？</span>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="dialogChoose()">
+          确定
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+  <el-scrollbar>
+    <div v-if="mails.length<=0" v-loading="loading">
+          <h2 style="position: relative; left: 570px;">无草稿</h2>
+        </div>
+        
+        <div v-else v-loading="loading">
+        
+            <div class="card"  v-for="mail in mails" :key="mail.id" >
+                <header class="title" @click="goWraiteMail(mail.id)">
+                    {{ mail.title }}
+                </header>
+                <div class="content">信件日期：{{ mail.createTime }}</div> 
+                <div class="deleteImg">
+                    <img src="/imgs/web_btn_delete.png" alt="" @click="handleDel(mail.id)"/>
+                </div>
+            </div> 
+            <el-pagination
+            background
+            layout="prev, pager, next"
+            :current-page="params.current"
+            :page-size="params.size"
+            :total="total"
+            @current-change="handlePageChange"/>
+        </div>
+    </el-scrollbar>
+    </template>
+<script setup>
+import { useRouter } from "vue-router";
+import { listDraft, delDraft } from "@/api/mailDraft";
+import PageStore from "@/store/page";
+import { onMounted } from 'vue';
+import { updateEvaluate } from "@/api/mail";
+import UserStore from "@/store/user";
+const loading = ref(true);
+const pageStore = PageStore();
+const route = useRoute();
+const router = useRouter();
+const total = ref(0)
+const params = ref({
+size: 6,
+current: 1,
+});
+const mails = ref([]);
+const mailId = ref([]);
+const dialogVisible = ref(false)
+function handlePageChange(currentPage) {
+    params.value.current = currentPage
+    getListDraft()
+    
+      // 在此刷新数据
+    }
+function getListDraft(){
+    listDraft(params.value).then((data) => {
+        loading.value = false;
+        total.value = data.total;
+        params.value.size = data.size
+        mails.value = data.records;
+    });
+}
+onMounted(() => {
+    getListDraft()
+})
+
+function handleDel(id) {
+        dialogVisible.value = true;
+        mailId.val = id
+}
+function dialogChoose(){
+    loading.value = true;
+    delDraft(mailId.val).then(() => {
+        loading.value = false;
+            mails.value.splice(mails.value.findIndex((item) => item.id === mailId.val), 1)
+            ElMessage({
+                message: '删除成功',
+                type: 'success',
+                })
+        });
+    dialogVisible.value = false    
+}
+
+
+function goWraiteMail(id) {
+    pageStore.mailDraftId = id;
+    pageStore.mailTabActive = "write";
+    console.log("mailid"+pageStore.mailDraftId)
+}
+function refresh() {
+    mails.value = [];
+    params.value.current = 1;
+    finished.value = false
+    // onLoad()
+}
+
+watch(() => pageStore.myMailDraftRefresh, (val) => {
+    
+    if (val) {
+        getListDraft()
+        pageStore.myMailDraftRefresh = false;
+        console.log("pageStore.myMailDraftRefreshLater"+pageStore.myMailDraftRefresh)
+    }
+})
+</script>
+<style lang="scss" scoped>
+.title{
+width: 500px;
+height: 30px;
+font-family: PingFang-SC-Bold;
+font-size: 17px;
+color: #333333;
+letter-spacing: 0;
+font-weight: 700;
+cursor: pointer;
+}
+.content{
+position: relative;
+top: -5px;
+width: 300px;
+height: 17px;
+font-family: PingFang-SC-Regular;
+font-size: 12px;
+color: #666666;
+letter-spacing: 0;
+font-weight: 400;
+}
+::v-deep footer{
+position: relative; top: 8px;
+span{
+    width: 150px;
+height: 30px;
+font-family: PingFang-SC-Regular;
+font-size: 14px;
+color: #333333;
+letter-spacing: 0;
+font-weight: 400;
+}
+
+}
+.card{
+margin-left: 10px;
+padding-bottom: 0px;
+.deleteImg{
+    width: 33px;
+        height: 33px;
+        position: relative;
+         top:-80px;
+         left: 1100px;
+         cursor: pointer;
+}
+    img{
+        width: 33px;
+        height: 33px;
+        opacity: 1;
+    }
+}
+.el-pagination{
+    position: relative;
+    left: 580px;
+}
+</style>  
\ No newline at end of file
diff --git a/src/views/components/MyMail.vue b/src/views/components/MyMail.vue
new file mode 100644
index 0000000..a5d4699
--- /dev/null
+++ b/src/views/components/MyMail.vue
@@ -0,0 +1,212 @@
+ <template > 
+        <div v-if="mails.length<=0" v-loading="loading">
+            <h2 style="position: relative; left: 570px;">暂无信件</h2>
+            </div>
+            <div v-else v-loading="loading">
+                <el-scrollbar>
+                <div class="card"  v-for=" (mail,index) in  mails" :key="mail.id" >
+                    <header class="title" @click="gotoMailDetail(mail.id)">
+                        {{ mail.title }}
+                    </header>
+                    <div class="content">信件日期：{{ mail.createTime }}</div> 
+                <footer class="flex v-center between" >
+                    <span style="position: relative;left: 2px;" >评价本次办理服务</span>
+                   <div class="satisfaction_style" ref="myref" v-if="!mail.satisfaction" style="position: relative; left: -550px; padding-left: 10%;">
+                      <el-radio-group v-model="mailDataList[index]"  @change="satischange()">
+                            <el-radio-button label="NOT_SATISFIED" ref="satis">不满意</el-radio-button>
+                            <el-radio-button label="BASICALLY_SATISFIED">基本满意</el-radio-button>
+                            <el-radio-button label="SATISFIED" >满意</el-radio-button>
+                      </el-radio-group>
+                      <el-button style="position: relative; top: 4px; left: 50px; " @click="sumbit(mailDataList[index],mail.id,index)">提交</el-button>
+                   </div>
+                   <div v-else class="satisfaction_style" style="position: relative; left: -950px;top: -6px;">
+                        {{satisfactions[mail.satisfaction]}}
+                   </div>
+                </footer>
+                </div> 
+            </el-scrollbar>
+                <el-pagination
+      background
+      layout="prev, pager, next"
+      :current-page="params.current"
+      :page-size="params.size"
+      :total="total"
+      @current-change="handlePageChange"/>
+            </div>
+            
+
+        </template>
+<script setup>
+const loading = ref(true);
+import { useRouter } from "vue-router";
+import { listMail } from "@/api/mail";
+import PageStore from "@/store/page";
+import { onMounted } from 'vue';
+import { updateEvaluate } from "@/api/mail";
+import UserStore from "@/store/user";
+const pageStore = PageStore();
+const route = useRoute();
+const router = useRouter();
+const mailDataList = ref([])
+const myref = ref([])
+const satisfactions = {
+    NOT_SATISFIED: "不满意",
+    BASICALLY_SATISFIED: "基本满意",
+    SATISFIED: "满意",
+};
+const satis = ref();
+function satischange(){
+    console.log("myref.value"+myref) 
+    console.log(satis)
+}
+
+const total = ref(0)
+const params = ref({
+    size: 10,
+    current: 1,
+});
+
+function handlePageChange(currentPage) {
+    params.value.current = currentPage
+    getListMail()
+    
+      // 在此刷新数据
+    }
+
+const mails = ref([]);
+const const_satisfaction = '';
+const mailData = [];
+function getListMail(){
+    listMail(params.value).then((data) => {
+        loading.value = false;
+        total.value = data.total;
+        params.value.size = data.size
+        // params.value.current = data.current
+        mails.value = data.records;
+        // const_satisfaction = mails.value.satisfaction;
+        // mailDataList.value = mails.value.satisfaction
+        // console.log(mailDataList)
+    });
+}
+onMounted(() => {
+    getListMail()
+})
+// const mailId = ref();
+const centerDialogVisible=ref(false)
+const emit = defineEmits(['child-msg'])
+const satisfaction = ref(route.query.satisfaction || "SATISFIED");
+function sumbit(satisfaction,id,index) {
+    if(satisfaction == null){
+        ElMessage({
+                 message: '请选择评价',
+                type: 'warning',
+                })
+        return;   
+    }
+    ElMessageBox.confirm(
+        '确定提交评价吗？',
+        '提示',
+        {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        }
+        )
+        .then(() => {
+            updateEvaluate({
+                mailId: id,
+                satisfaction: satisfaction
+            }).then(data => {
+                mails.value[index].satisfaction = satisfaction
+                loading.value = false;
+                ElMessage({
+                 message: '提交成功',
+                type: 'success',
+                })     
+            })
+        })
+        .catch(() => {
+          loading.value = false,
+        ElMessage({
+        type: 'info',
+        message: '取消提交',
+        })
+        })
+}
+function gotoMailDetail(id){
+    emit('child-msg', id)    
+}
+watch(() => pageStore.myMailRefresh, (val) => {
+    if (val) {
+        getListMail()
+        pageStore.myMailRefresh = false;
+    }
+})
+
+
+</script>
+<style lang="scss" scoped>
+.title{
+    width: 500px;
+    height: 30px;
+    font-family: PingFang-SC-Bold;
+    font-size: 17px;
+    color: #333333;
+    letter-spacing: 0;
+    font-weight: 700;
+    cursor: pointer;
+}
+.content{
+    position: relative;
+    top: -5px;
+    width: 300px;
+height: 17px;
+font-family: PingFang-SC-Regular;
+font-size: 12px;
+color: #666666;
+letter-spacing: 0;
+font-weight: 400;
+}
+::v-deep footer{
+    position: relative; top: 8px;
+    span{
+        width: 150px;
+height: 30px;
+font-family: PingFang-SC-Regular;
+font-size: 14px;
+color: #333333;
+letter-spacing: 0;
+font-weight: 400;
+    }
+    .el-button{
+        width: 45px;
+        height: 24px;
+        background: #0E5A98;
+        border-radius: 2px;
+        span{
+            width: 24px;
+            height: 17px;
+            font-family: PingFang-SC-Regular;
+            font-size: 12px;
+            color: #FFFFFF;
+            letter-spacing: 0;
+            text-align: right;
+            font-weight: 400;
+        }
+    }
+}
+.satisfaction_style{
+    position: relative;
+    left: -550px; 
+    padding-left: 10%;
+    top: -8px;
+}
+.card{
+    margin-left: 10px;
+    padding-bottom: 30px;
+}
+.el-pagination{
+    position: relative;
+    left: 580px;
+}
+</style>  
\ No newline at end of file
diff --git a/src/views/components/WriteInfo.vue b/src/views/components/WriteInfo.vue
new file mode 100644
index 0000000..9978355
--- /dev/null
+++ b/src/views/components/WriteInfo.vue
@@ -0,0 +1,576 @@
+<template>
+  <!-- <el-scrollbar > -->
+    <span>联系人信息</span>
+    <el-form 
+    :model="mail" 
+    :rules="rules"
+    label-width="120px"  
+    style="margin-top: 0.9%;" 
+    label-position="left"
+    ref="formRef"
+    v-loading="loading">
+      <el-form-item label="联系人姓名" :required="true"  prop="contactName" >
+        <el-input v-model="mail.contactName" placeholder="请输入姓名" readonly/>
+      </el-form-item>
+      <el-form-item label="称呼" prop="contactSex" style="top:-25px"  >
+        <el-radio-group v-model="mail.contactSex" >
+            <el-radio label="M">先生</el-radio>
+            <el-radio label="F">女士</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="证件号码"  prop="contactIdCard" type="text" style="top:-25px" >
+        <el-input v-model="mail.contactIdCard" placeholder="请输入证件号码" readonly="true"/>
+      </el-form-item>
+      <el-form-item label="联系电话"  prop="contactPhone" style="top:-25px">
+        <el-input v-model="mail.contactPhone" placeholder="请输入联系电话"   readonly="true"/>
+                        <div
+                            class="releative"
+                            style="width: 77px; height: 24px">
+                            <el-button
+                                size="small"
+                                type="primary"
+                                @click="smsSendCode"
+                                :disabled="sendBtnDisabled"
+                                class="send-btn"
+                                >{{
+                                    sendBtnDisabled
+                                        ? `${time}秒后重发`
+                                        : "发送验证码"
+                                }}</el-button>
+                        </div>
+      </el-form-item>
+      
+      <el-form-item label="验证码"  prop="code" style="top:-25px" >
+        <el-input v-model="mail.code" placeholder="请输入验证码" oninput="value=value.replace(/[^\d.]/g,'')"/>
+      </el-form-item>
+      <span style="width: 48px;
+            height: 17px;
+            font-family: PingFang-SC-Regular;
+            font-size: 12px;
+            color: #666666;
+            font-weight: 400;
+            position: relative;
+            top: -8px;
+            right: 9px;">信件内容</span>
+      <el-form-item label="案件编号"  prop="caseNumber" >
+        <el-input v-model="mail.caseNumber" placeholder="如有具体案件编号请输入案件编号"/>
+      </el-form-item>
+      <el-form-item label="被投诉/涉及单位" >
+      <el-select
+        v-model="mail.involvedDeptName"
+        placeholder="请选择单位"
+        @change="selectMediaId"
+        ref="mySelected"
+      >
+        <el-option v-for="item in depts"
+         :key="item.value" 
+         :label="item.text"
+         :value="item.text"
+         ref="select"  />
+      </el-select>   
+        </el-form-item>       
+        <el-form-item label="信件内容" prop="content"   class="content_item">
+          
+            <el-input v-model="mail.content" @input="timeEffectInput"  resize="none" :rows="3"  type="textarea" class="content" placeholder="请您尽量完整的描述您的信件内容，如发生事件、涉及单位、涉及对象姓名、警号以及具体事项"  /> 
+            <span ref="contentSpan" style="position: absolute; right: 85px;  top: 120px;">{{ mail.content ? mail.content.length : 0 }}/300</span>
+        </el-form-item>
+        <div style="position: relative; top: 100px;">
+        <span>附件</span>
+        <el-upload
+          v-model:file-list="mail.attachments"
+          action="/api/file/upload"
+          :http-request="uploadAction"
+          :headers="headers"
+          list-type="picture-card"
+          :limit="5"
+          :show-file-list="true"
+          :auto-upload="true"
+          multiple
+          :on-success="handleSuccess"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+        >
+        <el-image
+      	style="width: 89px; height: 89px  " 
+      	:src="imgurl">														
+		</el-image>	
+
+        <el-icon><Plus /></el-icon>
+        </el-upload>
+        <span class="uploadSign">最多只能上传9张图片，支持格式为png、jpg、gif、svg</span>
+        <el-dialog v-model="previewVisible" title="图片预览">
+            <img w-full :src="dialogImageUrl" alt="Preview Image" />
+        </el-dialog>
+        <el-form-item class="commit">
+      <el-button class="button1"  @click="handleSaveDraft">存稿</el-button>
+      <el-button class="button2" @click="handleSave">提交</el-button>
+    </el-form-item>
+      </div>   
+    </el-form>
+    
+</template>
+<script setup>
+import { reactive } from 'vue'
+import { ref } from 'vue'
+import { validatorIdCard, validatorPhone ,validatorContent,Phone} from "@/util/validator copy";
+import { getToken } from "@/util/cookie";
+import UserStore from "@/store/user";
+import PageStore from "@/store/page";
+import { addMail } from "@/api/mail";
+import { depts } from "@/store/dept";
+import { send } from "@/api/sms";
+import { saveDraft, getDraft } from "@/api/mailDraft";
+const userStore = UserStore();
+const pageStore = PageStore();
+const mySelected = ref();
+const imgurl = ref();
+const loading = ref(false);
+imgurl.value = "/imgs/FaultUpload.jpg"
+const rules= {	
+  contactName: [ { type: 'string',required: true,message: "", trigger: 'blur'}, {max: 30,message: "名称长度不能超过30位" }],
+      contactPhone: [{ required: true, validator: validatorPhone, trigger: "blur" },
+          ],
+      contactIdCard: [{ required: true, validator: validatorIdCard, trigger: "blur" },
+          ],
+      code:[{ required: true, message: "请输入验证码", trigger: "blur" },
+          ],
+      content:[{ required: true, validator: validatorContent, trigger: "blur" },
+      ],
+} 
+
+const headers = reactive({"Authorization": getToken()});
+const previewVisible = ref(false);
+const dialogImageUrl = ref('');
+const select = ref('');
+const mail = ref({
+    contactName: '',
+    contactIdCard: '',
+    contactPhone: '',
+    contactSex: '',
+    smsRequestId: '',
+    content: '',
+    code:'',
+    involvedDeptName:'',
+    attachments:''
+  })
+
+const mailData = ref({
+    contactName: '',
+    contactIdCard: '',
+    contactPhone: '',
+    contactSex: '',
+    smsRequestId: '',
+    content: '',
+    code:'',
+    involvedDeptId:'',
+    involvedDeptName:'',
+    attachments:[]
+  })
+
+//预览图片
+const handlePictureCardPreview = (filepath) => {
+  console.log(filepath)
+  dialogImageUrl.value = filepath.url;
+  previewVisible.value = true;
+};
+
+
+initMail();
+function initMail() {
+    mail.value = {
+        contactName: '蒋礼',
+        contactIdCard: '421083200202250451',
+        contactPhone: '17365710386',
+        contactSex: 'M',
+        content: "",
+        attachments: [],
+    };
+}
+const list = ref([])
+watch(
+    () => pageStore.mailTabActive,
+    () => {
+      
+        if (pageStore.mailDraftId) {
+            
+            getDraft(pageStore.mailDraftId).then((data) => {
+                mail.value = data;
+                mailData.value.attachments = JSON.parse(data.attachments);
+                console.log( mailData.value.attachments.filepath)
+                list.value = []
+                for(const i of mailData.value.attachments){   
+                  let obj = new Object(); 
+                  console.log(i.filepath)
+                  obj.url = "/api/file/stream/"+i.filepath;
+                  list.value.push(obj);
+                }
+                
+                // mailData.value.attachments = list.value;
+                mail.value.attachments = list.value;
+                
+            });
+
+            pageStore.mailDraftId = "";
+        }
+    }
+);
+
+const filepath = ref();
+const  handleSuccess = (obj,response,file) =>{
+        console.log(response.response.data.filepath);
+        //拼接得到图片信息对象
+        filepath.value = response.response.data.filepath;
+        //将图片信息对象，push到数组中
+        mailData.value.attachments.push({filepath: filepath.value})
+        console.log("response.response"+response.response)
+        console.log("mailData.value.attachments"+mailData.value.attachments)
+}
+
+//移除图片
+const handleRemove = (file, fileList) => {
+  // console.log('handleRemove', handleRemove);
+   console.log('file', file);
+   var index =  mailData.value.attachments.findIndex(
+            temp => {
+                if(file.name == temp.file){
+                    return true
+                }
+            }
+        );
+   mailData.value.attachments.splice(index,1)
+  console.log('fileList', fileList);
+};
+
+const emit = defineEmits(['childWriter-msg'])
+
+const handleSaveDraft = () => {
+    formRef.value.validate().then(() => {
+        mailData.value.code = mail.value.code;
+        mailData.value.contactIdCard = mail.value.contactIdCard;
+        mailData.value.contactName = mail.value.contactName;
+        mailData.value.content = mail.value.content;
+        mailData.value.contactPhone = mail.value.contactPhone;
+        mailData.value.smsRequestId = mail.value.smsRequestId;
+        mailData.value.contactSex = mail.value.contactSex;
+        // mailData.value.attachments = mail.value.attachments;
+        loading.value = true;
+        ElMessageBox.confirm(
+        '确定提交草稿内容吗？',
+        '提示',
+        {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        }
+        )
+        .then(() => {
+          saveDraft(mailData.value).then((data) => {
+            loading.value = false;
+            mail.value.id = data.id;
+            initMail();
+            // 刷新我的草稿
+            pageStore.mailTabActive = "draft"
+            pageStore.myMailDraftRefresh = true
+          });
+        ElMessage({
+        type: 'success',
+        message: '提交成功',
+        })
+        })
+        .catch(() => {
+          loading.value = false,
+        ElMessage({
+        type: 'info',
+        message: '取消提交',
+        })
+        
+        })
+        
+    });
+};
+
+const handleSave = () => {
+    formRef.value.validate().then(() => {
+        mailData.value.code = mail.value.code;
+        mailData.value.contactIdCard = mail.value.contactIdCard;
+        mailData.value.contactName = mail.value.contactName;
+        mailData.value.content = mail.value.content;
+        mailData.value.contactPhone = mail.value.contactPhone;
+        mailData.value.smsRequestId = mail.value.smsRequestId;
+        mailData.value.contactSex = mail.value.contactSex;
+        loading.value = true;
+        ElMessageBox.confirm(
+    '确定提交信件吗?',
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      addMail(mailData.value)
+            .then(() => {
+                loading.value = false;
+                // showSuccessToast("提交成功");
+                // 跳转到我的信件
+                pageStore.mailTabActive = "my";
+                // 刷新我的信件
+                pageStore.myMailRefresh = true
+                // 更新用户联系电话
+                userStore.user.phone = mail.value.phone;
+                initMail();
+                setTimeout(() => {
+                emit('childWriter-msg', "my")
+                }, 300)
+                })
+            .catch(() => {
+                loading.value = false;
+            });
+      ElMessage({
+        type: 'success',
+        message: '提交成功',
+      })
+    })
+    .catch(() => {
+      loading.value = false;
+      ElMessage({
+        type: 'info',
+        message: '取消提交',
+      })
+    })
+    });
+    
+
+};
+
+
+
+
+function selectMediaId(depart){
+      console.log(mySelected.value, 'select值')
+      for (const i of depts) {
+                if(i.text == depart){
+                   mailData.value.involvedDeptId=i.value;
+                   mailData.value.involvedDeptName=i.text;
+                   
+                }
+            }
+      // console.log(mailData.value.involved_dept_id, 'select值')
+      // console.log(depart, '选中的ID值')
+}
+
+const formRef = ref();
+
+const sendBtnDisabled = ref(false);
+let time = ref(30);
+
+function smsSendCode() {
+    formRef.value.validate(Phone).then(() => {
+        sendBtnDisabled.value = true;
+        // 发送短信
+        send(mail.value.contactPhone).then((data) => {
+            mail.value.smsRequestId = data.requestId;
+        });
+        let timer = setInterval(() => {
+            time.value -= 1;
+            if (time.value <= 0) {
+                sendBtnDisabled.value = false;
+                clearInterval(timer);
+                time.value = 30;
+            }
+        }, 1000);
+    });
+    
+}
+const contentSpan = ref();
+
+function timeEffectInput() {
+      console.log(mail.value)
+      // contentData = mail.value
+      const length = mail.value.content.length  // 先拿到当前输入时文本域文字长度
+      if (length > 300) {  // 当长度超过200
+      	// 获取文本域计数统计设置字体为红色
+        contentSpan.style = 'color:red' 
+       	// 防止后续输入溢出截取0-200的字符
+         mail.value.content = mail.value.content.substr(0, 300)
+      } else {
+        contentSpan.style  = 'color:#909399'
+      }
+    }
+
+</script>
+
+
+
+<style lang="scss" scoped>
+
+.wrapper {
+    background-color: #fff;
+    
+}
+.commit{
+  position:absolute;
+  top: 300px;
+}
+span{
+    width: 60px;
+height: 17px;
+font-family: PingFang-SC-Regular;
+font-size: 12px;
+color: #666666;
+font-weight: 400;   
+margin-left: 0.8%;
+    }
+.content{
+  width: 1112px;
+  resize:none;
+  height: 64px;
+  font-family: PingFangSC-Regular;
+  font-size: 14px;
+  color: #CCCCCC;
+  font-weight: 400;
+  position: relative;
+  left: -100px;
+  top:50px;
+}
+.releative{
+  position: absolute;
+  left: 90%;
+  top: 3.9%;
+  .el-button{
+    width: 77px;
+    height: 24px;
+    background: #0E5A98;
+    border-radius: 2px;
+      span{
+        width: 60px;
+        height: 17px;
+        font-family: PingFang-SC-Regular;
+        font-size: 12px;
+        color: #FFFFFF;
+        letter-spacing: 0;
+        text-align: right;
+        font-weight: 400;
+      }
+  }
+}    
+// ::v-deep .el-image__inner{
+//   background-size:100% 100%;
+// }
+::v-deep .content_item {
+  .el-form-item__error{
+  top: 30px;
+}
+}
+::v-deep .el-form-item__label {
+    margin-top: 1.1%;
+    margin-bottom: 1.1%;
+    width: 70px;
+height: 20px;
+font-family: PingFang-SC-Regular;
+font-size: 14px;
+color: #333333;
+letter-spacing: 0;
+line-height: 20px;
+font-weight: 400;
+}
+.el-form-item{
+  position: relative;
+  top: -10px;
+}
+.el-input{
+    margin-top: 1.1%;
+    margin-bottom: 1.1%;
+    width: 229px;
+height: 20px;
+font-family: PingFang-SC-Regular;
+font-size: 14px;
+color: #999999;
+letter-spacing: 0;
+font-weight: 400;
+
+}
+.el-radio__label{
+    width: 28px;
+height: 20px;
+font-family: PingFang-SC-Regular;
+font-size: 14px;
+color: #999999;
+letter-spacing: 0;
+font-weight: 400;
+}
+::v-deep .el-upload--picture-card{
+  width: 150px;
+height: 150px;
+  border:2px dashed white
+}
+
+// ::v-deep .el-icon::before {
+//             content: '';
+//             position: absolute;
+//             width: 31.25px;
+//             border-top: 4.16px solid;
+//             color: cornflowerblue;
+//         }
+//         ::v-deep .el-icon::after {
+//             content: '';
+//             position: absolute;
+//             height: 31.25px;
+//             border-left: 4.16px solid;
+//             color: cornflowerblue;
+//         }
+::v-deep .el-select__suffix{
+  visibility:hidden;
+}        
+.uploadSign{
+  position: relative;
+  top: 5px;
+  width: 295px;
+height: 17px;
+font-family: PingFang-SC-Regular;
+font-size: 12px;
+color: #333333;
+letter-spacing: 0;
+line-height: 17px;
+font-weight: 400;
+}
+.commit{
+  top: 180%;
+  position: absolute;
+  left: 20%;
+}
+::v-deep .button1{
+  position: relative;
+  left: -50px;
+  width: 266px;
+height: 44px;
+background: #F3FAFF;
+border: 0.5px solid rgba(32,119,192,1);
+border-radius: 2px;
+  span{
+    width: 34px;
+height: 24px;
+font-family: PingFang-SC-Regular;
+font-size: 17px;
+color: #0E5A98;
+text-align: left;
+font-weight: 400;
+  }
+}
+::v-deep .button2{
+  width: 266px;
+height: 44px;
+background: #0E5A98;
+border-radius: 2px;
+  span{
+    width: 34px;
+height: 24px;
+font-family: PingFang-SC-Regular;
+font-size: 17px;
+color: #FFFFFF;
+text-align: left;
+font-weight: 400;
+  }
+}
+</style>
\ No newline at end of file