From 2916be69340bdf774f7979c21ca9240e3266e346 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E6=9C=89=E6=B8=85=E9=A6=99=E6=9C=88=E6=9C=89?=
 =?UTF-8?q?=E9=98=B4?= <185154740@qq.com>
Date: Thu, 16 Dec 2021 10:49:43 +0800
Subject: [PATCH] Opinion

---
 src/apps/AppWorkonline/AppWorkonline.vue |  20 +-
 src/apps/AppWorkonline/Msg.vue           |  70 ++++
 src/apps/AppWorkonline/Opinion.vue       | 388 +++++++++++++++++++++++
 src/apps/AppWorkonline/detail.vue        |  38 ++-
 4 files changed, 479 insertions(+), 37 deletions(-)
 create mode 100644 src/apps/AppWorkonline/Msg.vue
 create mode 100644 src/apps/AppWorkonline/Opinion.vue

diff --git a/src/apps/AppWorkonline/AppWorkonline.vue b/src/apps/AppWorkonline/AppWorkonline.vue
index fb13375c..3a18df37 100644
--- a/src/apps/AppWorkonline/AppWorkonline.vue
+++ b/src/apps/AppWorkonline/AppWorkonline.vue
@@ -9,7 +9,6 @@
     <template v-if="datas.length > 0">
       <u-card v-for="(item, index) in datas" :key="index" :foot-border-top="false" :head-border-bottom="false" :show-head="false" @click="goDetail(item, 1)">
         <view class="body" slot="body">
-          <!-- 审批名称 -->
           <view class="u-body-item">
             <div class="title">{{ item.processName }}</div>
           </view>
@@ -20,10 +19,8 @@
 
               <span class="business_status" v-if="item.approvalStatus == 0"> {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}</span>
 
-              <!-- end -->
               <span class="business_status_blue" v-if="item.approvalStatus == 1"> {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}</span>
 
-              <!-- false -->
               <span class="business_status_gray" v-if="item.approvalStatus == 2">
                 {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}
               </span>
@@ -71,9 +68,7 @@
 
 <script>
 export default {
-  name: 'WorkOnline',
-  appName: '网上办事',
-  // 组件
+  name: 'AppWorkonline',
   components: {},
   props: {},
   data() {
@@ -84,28 +79,21 @@ export default {
         { name: '抄送我的', type: 3 },
         { name: '超时督办', type: 4 },
       ],
-      currentType: 0, // 0待我审批 1已审批 2抄送我的 3超时
+      currentType: 0,
       keyword: '',
       datas: {},
       listType: 0,
       current: 1,
     }
   },
-  // 计算
   computed: {},
-  // 监听
   watch: {},
-  // 实例创建后
   created() {
-    // 字典
     this.$dict.load('listApprovalStatusHb').then(() => {
-      this.dictList = this.$dict.getDict('listApprovalStatusHb')
       this.getList()
     })
   },
-  // 实例渲染后
   mounted() {},
-  // 方法
   methods: {
     getList() {
       this.$http.post(`/app/approv-alapply-info/list?listType=${this.listType}&current=${this.current}&param=${this.keyword}`).then((res) => {
@@ -115,10 +103,8 @@ export default {
       })
     },
 
-    // 跳转页面的id
     goDetail(item) {
-      console.log(1)
-      uni.navigateTo({ url: `./detail?id=${item.id}&listType=${this.listType}` })
+      uni.navigateTo({ url: `./Detail?id=${item.id}&listType=${this.listType}` })
     },
 
     change(index) {
diff --git a/src/apps/AppWorkonline/Msg.vue b/src/apps/AppWorkonline/Msg.vue
new file mode 100644
index 00000000..2621c6ee
--- /dev/null
+++ b/src/apps/AppWorkonline/Msg.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="closemsg">
+    <img :src="imgSrc" alt="" />
+    <text>{{ text }}</text>
+    <u-button type="primary" :custom-style="{ width: '100%', borderRadius: '4px', marginTop: '48px' }" @click="goBack">
+      {{ btnText }}
+    </u-button>
+    <back></back>
+  </div>
+</template>
+
+<script>
+import back from '../../components/AiBack'
+
+export default {
+  name: 'Msg',
+  components: { back },
+  data() {
+    return {
+      flag: true,
+    }
+  },
+  onLoad(val) {
+    this.flag = val?.flag == 1
+  },
+  methods: {
+    goBack() {
+      uni.navigateTo({
+        url: `./AppWorkonline`,
+      })
+    },
+  },
+  computed: {
+    text() {
+      return this.flag ? '提交成功！' : '提交失败'
+    },
+    btnText() {
+      return this.flag ? '确定' : '我知道了'
+    },
+    imgSrc() {
+      return this.flag ? this.$cdn + 'other/' + 'kztcg.png' : this.$cdn + 'other/' + 'kztsb.png'
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.closemsg {
+  min-height: 100%;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 96px;
+
+  img {
+    width: 192px;
+    height: 192px;
+  }
+
+  text {
+    font-size: 36px;
+    font-weight: 800;
+    color: #333333;
+    line-height: 50px;
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/src/apps/AppWorkonline/Opinion.vue b/src/apps/AppWorkonline/Opinion.vue
new file mode 100644
index 00000000..65a1d534
--- /dev/null
+++ b/src/apps/AppWorkonline/Opinion.vue
@@ -0,0 +1,388 @@
+<template>
+  <div class="approvalopinion">
+    <div class="nobtn">
+      <div class="approvalopinion_text">
+        <!-- 拒绝时写固定的意见 -->
+        <div class="list" v-if="type == 0">
+          <div class="textarea_msgfont">
+            <span class="msgfont">
+              <span class="icon">*</span>
+              <span> 审批意见:</span>
+            </span>
+            <textarea :maxlength="150" placeholder="请输入审批意见" v-model="opinion" class="textarea" clearable="false"> </textarea>
+            <div class="clearns" @click="clearn">清空内容</div>
+            <div class="msg_length">
+              <span class="font">{{ opinion.length }}</span>
+              <span>/150</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 同意意见 -->
+        <div v-if="type == 1">
+          <div class="list" v-for="(item, index) in list" :key="index">
+            <div class="textarea_msgfont" v-if="item.fieldDataType == 1">
+              <span class="msgfont">
+                <span class="icon" v-if="item.mustFill == 1">*</span>
+                <span> {{ item.fieldName }}:</span>
+              </span>
+              <textarea :maxlength="150" placeholder="请输入审批意见" v-model="item.fieldValue" class="textarea" clearable="false"> </textarea>
+              <div class="clearns" @click="clearn">清空内容</div>
+              <div class="msg_length">
+                <span class="font">{{ item.fieldValue.length }}</span>
+                <span>/{{ item.fieldLength }}</span>
+              </div>
+            </div>
+
+            <!-- 入户调查时间 -->
+            <!-- v-if="item.fieldType == 3 && item.fieldDataType == 8" .-->
+            <div class="calendar" v-if="item.fieldDataType == 8">
+              <div class="left">
+                <span class="icon" v-if="item.mustFill == 1">*</span>
+                <span> {{ item.fieldName }}:</span>
+              </div>
+              <div class="left">
+                <u-input type="text" @click="timeSelect(index)" class="right" placeholder="请选择" disabled v-model="item.fieldValue"></u-input>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 附件资料 -->
+      <div class="reply_files">
+        <text class="img">附件资料</text>
+        <text class="img_text">(最多支持9个附件)</text>
+        <!-- 单个文件最大10MB.zip、.rar、.doc、.docx、.xls、.xlsx、.ppt、.pptx、.pdf、.txt、.jpg、.png格式 -->
+        <div class="upload">
+          <div class="info">
+            <ai-uploader multiple @list="(v) => (annex = v)" :limit="9" action="/admin/file/add2" type="file" placeholder="添加文件" preview />
+          </div>
+        </div>
+      </div>
+
+      <!-- 图片资料 -->
+      <div class="reply_img">
+        <text class="img">图片资料</text>
+        <text class="img_text">(最多9张)</text>
+        <div class="upload">
+          <div class="info">
+            <ai-uploader multiple @list="(v) => (picture = v)" :limit="9" :size="2097152" preview />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="btn" @click="btn">确定</div>
+
+    <!-- 日期选择器 -->
+    <u-calendar v-model="show" :mode="mode" @change="calendar" />
+    <AiBack />
+  </div>
+</template>
+
+<script>
+import AiBack from '../../components/AiBack'
+import AiUploader from '../../components/AiUploader.vue'
+
+export default {
+  name: 'Opinion',
+  components: {
+    AiBack,
+    AiUploader,
+  },
+  props: {},
+  data() {
+    return {
+      mode: 'date',
+      show: false,
+      list: [],
+      type: '',
+      picture: [],
+      pass: false,
+      annex: [],
+      stepList: '',
+      filedIndex: 0,
+      fileNameList: [],
+      opinion: '',
+    }
+  },
+  onLoad(options) {
+    this.objid = options.id
+    this.type = options.type
+
+    this.getList()
+  },
+  computed: {},
+  watch: {},
+  onShow() {},
+  mounted() {},
+  methods: {
+    getList() {
+      this.$http
+        .post(`/app/approv-alapply-info/approval-popup?type=${this.type}&id=${this.objid}`)
+        .then((res) => {
+          if (res.code == 0) {
+            res.data.fieldInfos.map((item) => {
+              if (item.fieldDataType == 1) {
+                item.fieldValue = ''
+              }
+
+              if (item.fieldType == 3) {
+                this.list.push(item)
+              }
+            })
+          }
+        })
+        .catch(() => {
+          // this.$u.toast(err)
+        })
+    },
+
+    timeSelect(index) {
+      this.filedIndex = index
+      this.show = true
+    },
+
+    clearn() {
+      this.opinion = ''
+      this.list.map((item) => {
+        if (item.mustFill == 1 && item.fieldValue) {
+          item.fieldValue = ''
+        }
+      })
+    },
+
+    btn() {
+      if (this.type == 0 && this.opinion == '') {
+        return uni.showToast({
+          title: '请输入审批意见',
+          icon: 'none',
+        })
+      }
+
+      if (
+        this.list.some((item) => {
+          if (item.mustFill == 1 && !item.fieldValue) {
+            uni.showToast({
+              title: item.fieldName + '为必填',
+              icon: 'none',
+            })
+            return true
+          }
+        })
+      )
+        return
+
+      var file = []
+      this.annex.map((item) => {
+        file.push(item.id)
+      })
+
+      var img = []
+      this.picture.map((item) => {
+        img.push(item.id)
+      })
+      var params = {
+        id: this.objid,
+        picture: img.join(','),
+        pass: this.type == 1,
+        annex: file.join(','),
+        fieldInfos: this.list,
+        opinion: this.opinion,
+      }
+      uni.showLoading({
+        title: '加载中',
+      })
+
+      this.$http
+        .post(`/app/approv-alapply-info/approval`, params)
+        .then((res) => {
+          if (res.code == 0) {
+            uni.navigateTo({
+              url: `./Msg?flag=1`,
+            })
+            // this.getList()
+          }
+        })
+        .catch((e) => {
+          uni.navigateTo({
+            url: `./Msg?flag=0`,
+          })
+          uni.showToast({
+            title: e,
+            icon: 'none',
+          })
+          // this.getList()
+        })
+    },
+
+    data(e) {
+      this.files.push(e)
+    },
+
+    change(e) {
+      this.files = e
+    },
+
+    calendar(e) {
+      this.list[this.filedIndex].fieldValue = e.result
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.approvalopinion {
+  height: 100%;
+
+  .nobtn {
+    padding: 0 0 112px 0;
+
+    .approvalopinion_text {
+      .list {
+        .textarea_msgfont {
+          position: relative;
+          height: 400px;
+          padding: 32px;
+          background-color: #fff;
+
+          .msgfont {
+            font-size: 32px;
+
+            .icon {
+              margin-right: 8px;
+              color: #ff4466;
+            }
+          }
+
+          .textarea {
+            margin-top: 10px;
+          }
+
+          .clearns {
+            color: #1365dd;
+          }
+
+          .msg_length {
+            position: absolute;
+            bottom: 42px;
+            right: 32px;
+
+            .font {
+              color: #999;
+            }
+          }
+        }
+
+        .calendar {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 20px;
+          background-color: #fff;
+          padding: 0 32px;
+
+          .left {
+            .icon {
+              color: #ff4466;
+              margin-right: 8px;
+            }
+          }
+
+          .right {
+            width: 160px;
+          }
+        }
+      }
+    }
+
+    .reply_files {
+      margin-top: 20px;
+      background-color: #fff;
+      padding: 0 20px 0;
+
+      .img {
+        display: inline-block;
+        margin-top: 20px;
+        font-size: 32px;
+      }
+
+      .img_text {
+        font-size: 32px;
+        color: #999;
+        margin-left: 10px;
+      }
+
+      .upload {
+        width: 100%;
+        margin-top: 10px;
+        padding: 12px 12px 12px 0;
+        box-sizing: border-box;
+
+        .info {
+          width: 100%;
+          text-align: center;
+        }
+
+        ::v-deep .info > span {
+          width: 380px;
+          text-align: left;
+          //  word-break: break-all;
+        }
+
+        ::v-deep .ai-uploader .fileList .default {
+          max-width: 160px;
+          max-height: 160px;
+        }
+      }
+    }
+
+    .reply_img {
+      margin-top: 20px;
+      background-color: #fff;
+      padding: 0 20px;
+      box-sizing: border-box;
+
+      .img {
+        display: inline-block;
+        margin-top: 20px;
+        font-size: 32px;
+      }
+
+      .img_text {
+        font-size: 32px;
+        color: #999;
+        margin-left: 10px;
+      }
+
+      .upload {
+        width: 100%;
+        margin-top: 10px;
+        padding: 12px 12px 12px 0;
+        box-sizing: border-box;
+
+        .info {
+          width: 100%;
+          text-align: center;
+        }
+
+        ::v-deep .ai-uploader .fileList .default {
+          width: 160px;
+          height: 160px;
+        }
+      }
+    }
+  }
+
+  .btn {
+    position: fixed;
+    bottom: 0;
+    line-height: 112px;
+    width: 100%;
+    background-color: #1355dd;
+    color: #fff;
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/apps/AppWorkonline/detail.vue b/src/apps/AppWorkonline/detail.vue
index 1b45a057..8a678441 100644
--- a/src/apps/AppWorkonline/detail.vue
+++ b/src/apps/AppWorkonline/detail.vue
@@ -84,8 +84,8 @@
       <u-tabs class="tabs" :list="list_tabs" height="96" active-color="#1365dd" inactive-color="#999" bar-width="374" font-size="30" :is-scroll="false" :current="current" @change="change"></u-tabs>
 
       <!-- 表单申请的折叠窗 -->
-      <div style="background-color: #fff">
-        <div v-if="current == 0" class="collapse">
+      <div style="background-color: #fff" v-if="current == 0">
+        <div class="collapse">
           <u-collapse event-type="close" :arrow="true" :accordion="true">
             <u-collapse-item v-if="item.length > 0" v-for="(item, index) in inforlist" :title="item[0].groupName" :key="index">
               <div v-for="(items, indexs) in item" :key="indexs">
@@ -110,8 +110,6 @@
 
       <!-- 流程信息 -->
       <div v-if="current == 1" class="workflow">
-        <!-- 第一步发起 -->
-
         <!-- v-if="item.nodeType == 3" -->
         <div class="step-list">
           <div class="step-item" v-for="(item, index) in stepList" :key="index">
@@ -238,24 +236,24 @@
         </div>
       </div>
     </div>
+
     <!-- 底部按钮v-if="canApproval &&list.approvalStatus ==0 "-->
     <div class="reject_agree" v-if="canApproval && list.approvalStatus == 0">
       <div class="reject" @click="agree(0)">拒绝</div>
       <div class="agree" @click="agree(1)">同意</div>
     </div>
 
-    <back />
+    <AiBack></AiBack>
   </div>
 </template>
 
 <script>
-import back from '../../components/AiBack'
+import AiBack from '../../components/AiBack.vue'
 import AiImage from '../../components/AiImage'
-import { mapActions } from 'vuex'
 
 export default {
-  name: 'workonlineDetail',
-  components: { AiImage, back },
+  name: 'Detail',
+  components: { AiImage, AiBack },
   computed: {
     canApproval() {
       return this.listType == 0
@@ -268,7 +266,7 @@ export default {
   },
   data() {
     return {
-      objid: '', // 传进来的id
+      objid: '',
       list: [],
       list_tabs: [
         {
@@ -278,7 +276,7 @@ export default {
           name: '流程信息',
         },
       ],
-      current: 0, //默认tab栏在'0申请表单'还是在'1流程信息'
+      current: 0,
       inforlist: [],
       stepList: [],
       dictList: ['hbDepartment'],
@@ -289,20 +287,18 @@ export default {
   },
   // 方法
   methods: {
-    ...mapActions(['injectJWeixin']),
     getDetail() {
       this.$http.post(`/app/approv-alapply-info/info-id-table?id=${this.objid}`).then((res) => {
         if (res.code == 0) {
           if (res.data) {
             this.list = res.data
-            console.log(res.data)
-            if (res.data.createUserAvatar) {
-              console.log(res.data.createUserAvatar)
-            }
+
+            // if (res.data.createUserAvatar) {
+            //   console.log(res.data.createUserAvatar)
+            // }
 
             this.inforlist = [[], [], [], [], [], [], [], [], [], []]
             res.data.tableInfo.tableFieldInfos.map((item) => {
-              // console.log(item);
               if (item.groupIndex) {
                 this.inforlist[item.groupIndex - 1].push(item)
               }
@@ -340,16 +336,18 @@ export default {
         }
       })
     },
+
     change(i) {
       this.current = i
     },
+
     agree(type) {
       this.$http
         .post(`/app/approv-alapply-info/approval-popup?type=${type}&id=${this.objid}`)
         .then((res) => {
           if (res.code == 0) {
             uni.navigateTo({
-              url: `/pages/workonline/approvalopinion?id=${this.objid}&type=${type}`,
+              url: `./Opinion?id=${this.objid}&type=${type}`,
             })
           }
         })
@@ -403,7 +401,7 @@ export default {
         height: 122px;
         line-height: 122px;
         border-bottom: 1px solid #eee;
-        padding-bottom: 10px;
+        padding-bottom: 15px;
 
         .people_msg {
           .avatar {
@@ -912,7 +910,7 @@ export default {
         height: 122px;
         line-height: 122px;
         border-bottom: 1px solid #eee;
-        padding-bottom: 10px;
+        padding-bottom: 15px;
 
         .people_msg {
           .avatar {