跟进动态样式优化暂存

src/components/normal-basic-layout/details/modules/followUp/followUp.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="normal-panel follow__panel" id="containerFull">
-    <div class="container flex-align-center flex-between">
+    <div class="container flex-align-center flex-between" style="padding: 10px 10px 0 10px !important;">
       <div>
         <slot name="collapse"></slot>
         <p class="inline-16">跟进动态</p>
@@ -10,141 +10,147 @@
         <addLog :ownertable="ownertable" @onSuccess="queryLogs" :status="status"></addLog>
       </div>
     </div>
-    <div  class="container" >
+    <div style="padding: 0 10px 0 10px">
+      <el-input style="width: 100%" placeholder="搜索" :suffix-icon="search?search.length > 0?'':'':'el-icon-search'" v-model="search" @keyup.native.enter="queryLogs()" @clear="queryLogs" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
+      </el-input>
+    </div>
+    <div class="container" style="padding: 10px;!important;">
       <div v-if="logList.length === 0">
         <el-empty description="暂无记录" :image-size="40"></el-empty>
       </div>
-      <div :style="{overflow: isFull?'auto':'none',height:isFull?(windowHeight - 100) + 'px':''}">
-        <el-timeline>
-          <el-timeline-item
-            v-for="i in logList" :key="i.index"
-            :timestamp="i.createdate">
-              <div slot="dot" class="dot"></div>
-              <div class="step__panel normal-margin">
-                <div class="flex-align-center " style="margin-bottom:10px" v-if="i.userextend.length > 0">
-                  <!-- <p><small>跟进人:</small>{{i.changeby}}</p> -->
-<!--                    <img height="30" width="30" :src="i.headpic" alt="">-->
-                      <div class="avatar" >
-                        <img class="avatar__image" v-if="i.headpic" :src="i.headpic" alt="">
-                        <p v-else>{{i.userextend[0].name.substr(0, 1)}}</p>
-                      </div>
-                      <div style="margin-left: 10px">
-                        <p>{{ i.userextend[0].name }}&nbsp;</p>
-                        <small style="color:#999999ad;margin-top:10px">部门：{{ i.userextend[0].depname?i.userextend[0].depname:"--" }}&emsp;职位：{{ i.userextend[0].position?i.userextend[0].position:"--" }}</small>
-                      </div>
-<!--                  <div style="margin-left: 20px">
-                    <small style="color:#999">{{i.createdate}}</small>
-                  </div>-->
-
+      <el-timeline v-else>
+        <el-card v-for="i in logList" :key="i.index" shadow="hover">
+          <div style="margin-bottom: 10px;padding: 10px 10px 0 10px">
+            <div style="float: left;border: 5px solid #3874F6;width: 5px;height:5px;margin-top: 2.5px;border-radius: 40px"></div>
+            <span style="color: #3874F6;margin-left: 10px">{{i.createdate}}</span>
+          </div>
+          <div slot="dot" class="dot"></div>
+          <div class="step__panel normal-margin" style="padding: 0 10px 0 10px">
+            <div class="flex-align-center " style="margin-bottom:10px" v-if="i.userextend.length > 0">
+              <div class="avatar" >
+                <img class="avatar__image" v-if="i.headpic" :src="i.headpic" alt="">
+                <p v-else>{{i.userextend[0].name.substr(0, 1)}}</p>
+              </div>
+              <div style="margin-left: 10px">
+                <p style="font-weight: bold;font-size: 15px;color:#333333;">{{ i.userextend[0].name }}&nbsp;</p>
+                <small style="color:#999999;margin-top:10px;font-size: 12px">部门：{{ i.userextend[0].depname?i.userextend[0].depname:"--" }}&emsp;职位：{{ i.userextend[0].position?i.userextend[0].position:"--" }}</small>
+              </div>
+            </div>
+            <div class="flex-align-center " style="margin-bottom:10px" v-else>
+              <div class="avatar" >
+                <img class="avatar__image" v-if="i.headpic" :src="i.headpic" alt="">
+                <p v-else>{{i.createby.substr(0, 1)}}</p>
+              </div>
+              <div style="margin-left: 10px">
+                <p>{{ i.createby }}&nbsp;</p>
+                <small style="color:#999999ad;margin-top:10px;font-size: 12px">部门：{{"--" }}&emsp;职位：{{ "--" }}</small>
+              </div>
+            </div>
+          </div>
+          <div style="padding: 0 10px 10px 10px">
+            <span style="color: #999999;font-size: 14px">跟进内容：{{i.content}}</span>
+          </div>
+          <div style="padding: 0 10px 10px 10px">
+            <div class="flex-align-center flex-between pionter" v-for="img in i.attinfos" :key="img.index" style="padding:10px;margin-bottom:5px">
+              <div class="flex-align-center" style="flex:1;width:100%">
+                <img width="30" :src="checkFileType(img.postfix) === 'file'?require('@/assets/file_icons/file.svg'):img.url" class="inline-16" alt="">
+                <div class="file__link">
+                  <a :href="img.url">{{img.document}}</a>
+                  <p>{{(img.contentlength / 1024).toFixed(2)}}kb</p>
                 </div>
-                <div class="flex-align-center " style="margin-bottom:10px" v-else>
-                  <!-- <p><small>跟进人:</small>{{i.changeby}}</p> -->
-                  <!--                    <img height="30" width="30" :src="i.headpic" alt="">-->
-                  <div class="avatar" >
-                    <img class="avatar__image" v-if="i.headpic" :src="i.headpic" alt="">
-                    <p v-else>{{i.createby.substr(0, 1)}}</p>
+              </div>
+              <i style="color:red;" class="el-icon-delete" v-if="nowUserid === i.createuserid" @click="deleteFile(img)"></i>
+            </div>
+          </div>
+          <div style="padding: 10px" v-if="isShow">
+            <div style="border: 1px solid #9ca3af;padding: 10px;border-radius: 5px">
+              <el-input type="textarea" style="border: none;margin-bottom: 10px" :rows="1" v-model="content" placeholder="我评论："></el-input>
+              <el-divider></el-divider>
+              <div style="display: flex;justify-content: right">
+                <el-button   type="primary" size="small" :disabled="content.length == 0" @click="onComment(i)">发布</el-button>
+              </div>
+            </div>
+          </div>
+          <div v-if="isShow && i.comment.length > 0" style="padding: 0 10px 10px 10px">
+            <div style="max-height: 360px;min-height:200px;background: #F5F5F5;border-radius: 2px;padding: 10px;overflow:auto">
+              <div style="color: #333;font-size: 16px;font-weight: bold">评论({{i.commentqty}})</div>
+              <div v-for="item in i.comment" :key="item.index">
+                <div style="color: #333;font-size: 14px;font-weight: bold">{{item.createby}}</div>
+                <div style="color:#666;font-size: 14px">{{item.content}}</div>
+                <div style="display: flex;justify-content: space-between">
+                  <div style="display: flex;justify-content: space-between">
+                    <div style="font-size: 12px;color: #999">{{item.createdate}}</div>
+                    <el-button type="text" size="small" ><svg t="1727053625238" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11334" width="14" height="14"><path d="M343.113143 156.379429h333.897143v-73.142858H343.113143v73.142858zM677.010286 0a83.456 83.456 0 0 1 83.456 83.456v64.146286h215.917714a46.299429 46.299429 0 1 1 0 92.672h-48.64v700.196571a83.456 83.456 0 0 1-83.456 83.456H176.128a83.456 83.456 0 0 1-83.456-83.456V240.054857H47.542857a46.299429 46.299429 0 0 1 0-92.452571h212.114286v-64.146286A83.456 83.456 0 0 1 343.113143 0h333.897143z m156.525714 241.371429H186.587429v688.859428h647.021714v-689.005714zM384.877714 345.6a41.764571 41.764571 0 0 1 41.764572 41.764571v333.897143a41.764571 41.764571 0 0 1-83.456 0V387.364571a41.764571 41.764571 0 0 1 41.691428-41.764571z m250.441143 0a41.764571 41.764571 0 0 1 41.764572 41.764571v333.897143a41.764571 41.764571 0 0 1-83.456 0V387.364571a41.764571 41.764571 0 0 1 41.545142-41.764571z" fill="#999999" p-id="11335"></path></svg>
+                      <span style="color: #666666;font-size: 14px;margin-left: 5px" @click="onDel(item)">删除</span></el-button>
                   </div>
-                  <div style="margin-left: 10px">
-                    <p>{{ i.createby }}&nbsp;</p>
-                    <small style="color:#999999ad;margin-top:10px">部门：{{"--" }}&emsp;职位：{{ "--" }}</small>
+                  <div>
+                    <el-button type="text"  v-if="!isContentShow" size="small" @click="isContentShow = true;sys_datacommentid = item.sys_datacommentid">
+                      <svg t="1727055468269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11646" width="14" height="14"><path d="M643.657143 457.289143c0 36.571429 29.257143 58.514286 58.514286 58.514286 36.571429 0 58.514286-29.257143 58.514285-58.514286 0-36.571429-29.257143-58.514286-58.514285-58.514286-29.257143-7.314286-58.514286 21.942857-58.514286 58.514286" fill="#3874F6" p-id="11647"></path><path d="M1024 142.774857c0-43.885714-43.885714-87.771429-87.771429-87.771428H87.771429c-43.885714 0-87.771429 36.571429-87.771429 87.771428v621.714286c0 51.2 43.885714 87.771429 87.771429 87.771428h307.2l117.028571 117.028572 117.028571-117.028572h307.2c51.2 0 87.771429-43.885714 87.771429-87.771428v-621.714286z m-65.828571 592.457143c0 29.257143-21.942857 51.2-51.2 51.2H592.457143l-80.457143 80.457143-80.457143-80.457143H117.028571c-29.257143 0-51.2-21.942857-51.2-51.2v-563.2c0-29.257143 21.942857-51.2 51.2-51.2h789.942858c29.257143 0 51.2 21.942857 51.2 51.2v563.2z" fill="#3874F6" p-id="11648"></path><path d="M453.485714 457.289143c0 36.571429 29.257143 58.514286 58.514286 58.514286s58.514286-29.257143 58.514286-58.514286c0-36.571429-21.942857-65.828571-58.514286-65.828572s-58.514286 29.257143-58.514286 65.828572M256 457.289143c0 36.571429 29.257143 58.514286 58.514286 58.514286s58.514286-29.257143 58.514285-58.514286c0-36.571429-29.257143-58.514286-58.514285-58.514286-36.571429-7.314286-58.514286 21.942857-58.514286 58.514286" fill="#3874F6" p-id="11649"></path></svg>
+                      <span style="color: #3874F6;font-size: 14px;margin-left: 5px">回复</span></el-button>
+                    <el-button type="text"  v-if="isContentShow" size="small" @click="isContentShow = false;sys_datacommentid = ''">
+                      <svg t="1727055468269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11646" width="14" height="14"><path d="M643.657143 457.289143c0 36.571429 29.257143 58.514286 58.514286 58.514286 36.571429 0 58.514286-29.257143 58.514285-58.514286 0-36.571429-29.257143-58.514286-58.514285-58.514286-29.257143-7.314286-58.514286 21.942857-58.514286 58.514286" fill="#3874F6" p-id="11647"></path><path d="M1024 142.774857c0-43.885714-43.885714-87.771429-87.771429-87.771428H87.771429c-43.885714 0-87.771429 36.571429-87.771429 87.771428v621.714286c0 51.2 43.885714 87.771429 87.771429 87.771428h307.2l117.028571 117.028572 117.028571-117.028572h307.2c51.2 0 87.771429-43.885714 87.771429-87.771428v-621.714286z m-65.828571 592.457143c0 29.257143-21.942857 51.2-51.2 51.2H592.457143l-80.457143 80.457143-80.457143-80.457143H117.028571c-29.257143 0-51.2-21.942857-51.2-51.2v-563.2c0-29.257143 21.942857-51.2 51.2-51.2h789.942858c29.257143 0 51.2 21.942857 51.2 51.2v563.2z" fill="#3874F6" p-id="11648"></path><path d="M453.485714 457.289143c0 36.571429 29.257143 58.514286 58.514286 58.514286s58.514286-29.257143 58.514286-58.514286c0-36.571429-21.942857-65.828571-58.514286-65.828572s-58.514286 29.257143-58.514286 65.828572M256 457.289143c0 36.571429 29.257143 58.514286 58.514286 58.514286s58.514286-29.257143 58.514285-58.514286c0-36.571429-29.257143-58.514286-58.514285-58.514286-36.571429-7.314286-58.514286 21.942857-58.514286 58.514286" fill="#3874F6" p-id="11649"></path></svg>
+                      <span style="color: #3874F6;font-size: 14px;margin-left: 5px">取消回复</span></el-button>
                   </div>
-                  <!--                  <div style="margin-left: 20px">
-                                      <small style="color:#999">{{i.createdate}}</small>
-                                    </div>-->
-
-                </div>
-<!--                <div >
-                  <span>{{i.userextend[0].name}}</span>
-                  <span>
-                    <small>部门:{{i.userextend[0].depname}}</small>
-                    <small>职位:{{i.userextend[0].position}}</small>
-                  </span>
-                </div>-->
-                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
-                  <span>跟进类型：{{i.type}}</span>
-                </div>
-                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
-                  <span>跟进对象：</span>
-                  <span v-for="item in i.contacts" :key="item.index">
-                    <span v-if="item.rowindex === i.contacts.length">
-                      {{item.name}}
-                    </span>
-                    <span v-else>
-                       {{item.name + ','}}
-                    </span>
-
-                  </span>
                 </div>
-                 <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
-                  <span>目的：{{i.target}}</span>
-                </div>
-                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
-                  <span>过程：{{i.content}}</span>
-                </div>
-                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
-                  <span>结果：{{i.results}}</span>
-                </div>
-                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
-                  <span>下次跟进计划：{{i.nextplan}}</span>
-                </div>
-                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
-                  <span>营销费用：</span>
-                  <span v-if="i.salesfeesamount || i.salesfeesamount == 0">
-                    <span style="color: red">¥ </span>
-                      <span style="font-size: 12px;color: red">{{tool.formatAmount(i.salesfeesamount,2)}}</span>
-                  </span>
-                  <span v-else>--</span>
-                </div>
-                <div v-if="$route.path === '/projectChangeDetail'">
-                  <marketingExpenses  class="inline-16" ownertable="sa_project" :ownerid="i.sys_datafollowupid" :dataTime="i.createdate" :userid="i.createuserid" @onSuccess="onSuccess"></marketingExpenses>
-                </div>
-                <div v-if="$route.path === '/customerDetail'">
-                  <marketingExpenses  class="inline-16" ownertable="sa_customers" :ownerid="i.sys_datafollowupid" :dataTime="i.createdate" :userid="i.createuserid" @onSuccess="onSuccess"></marketingExpenses>
-                </div>
-                <div v-if="$route.path === '/PublicCustomerDetail'">
-                  <marketingExpenses  class="inline-16" ownertable="sa_customers" :ownerid="i.sys_datafollowupid" :dataTime="i.createdate" :userid="i.createuserid" @onSuccess="onSuccess"></marketingExpenses>
+                <div style="border: 1px solid #9ca3af;padding: 10px;border-radius: 5px" v-if="isContentShow && sys_datacommentid == item.sys_datacommentid">
+                  <el-input type="textarea" style="border: none;margin-bottom: 10px" :rows="1" v-model="replyContent" :placeholder="'我回复'+item.createby+'：'"></el-input>
+                  <el-divider></el-divider>
+                  <div style="display: flex;justify-content: right">
+                    <el-button   type="primary" size="small" :disabled="replyContent.length == 0" @click="onReply(i.sys_datafollowupid,item)">发布</el-button>
+                  </div>
                 </div>
-                <div class="follow-progress">
-                  <p v-if="$route.path !== '/projectChangeDetail' && $route.path !== '/customerDetail' && $route.path !== '/PublicCustomerDetail'">{{i.content}}</p>
-                  <div>
-                    <!-- <previewImage v-show="checkFileType(img.postfix) === 'img'" style="width:60px;height:60px;margin-left:5px" v-for="img in i.attinfos" :key="img.index" :image="img" :deletebtn="true" @onSuccess="queryLogs"></previewImage> -->
-                    <div class="flex-align-center flex-between pionter" v-for="img in i.attinfos" :key="img.index" style="padding:10px;margin-bottom:5px">
-                      <div class="flex-align-center" style="flex:1;width:100%">
-                        <img width="30" :src="checkFileType(img.postfix) === 'file'?require('@/assets/file_icons/file.svg'):img.url" class="inline-16" alt="">
-                        <div class="file__link">
-                          <a :href="img.url">{{img.document}}</a>
-                          <p>{{(img.contentlength / 1024).toFixed(2)}}kb</p>
-                        </div>
+                <div v-if="item.subcomment.length > 0" style="margin-left: 10px">
+                  <div v-for="k in item.subcomment" :key="k.index">
+                    <div style="display: flex;justify-content: left">
+                      <div style="font-size: 14px;font-weight: bold;color:#333;">{{k.replyusername}}</div><i style="margin-top: 5px" class="el-icon-caret-right"></i><div style="font-size: 14px;font-weight: bold;color:#333;">{{k.createby}}</div>
+                    </div>
+                    <div>{{k.content}}</div>
+                    <div style="display: flex;justify-content: space-between">
+                      <div style="display: flex;justify-content: space-between">
+                        <div style="font-size: 12px;margin-top: 5px;margin-right: 10px">{{k.createdate}}</div>
+                        <el-button type="text" size="small" ><svg t="1727053625238" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11334" width="14" height="14"><path d="M343.113143 156.379429h333.897143v-73.142858H343.113143v73.142858zM677.010286 0a83.456 83.456 0 0 1 83.456 83.456v64.146286h215.917714a46.299429 46.299429 0 1 1 0 92.672h-48.64v700.196571a83.456 83.456 0 0 1-83.456 83.456H176.128a83.456 83.456 0 0 1-83.456-83.456V240.054857H47.542857a46.299429 46.299429 0 0 1 0-92.452571h212.114286v-64.146286A83.456 83.456 0 0 1 343.113143 0h333.897143z m156.525714 241.371429H186.587429v688.859428h647.021714v-689.005714zM384.877714 345.6a41.764571 41.764571 0 0 1 41.764572 41.764571v333.897143a41.764571 41.764571 0 0 1-83.456 0V387.364571a41.764571 41.764571 0 0 1 41.691428-41.764571z m250.441143 0a41.764571 41.764571 0 0 1 41.764572 41.764571v333.897143a41.764571 41.764571 0 0 1-83.456 0V387.364571a41.764571 41.764571 0 0 1 41.545142-41.764571z" fill="#999999" p-id="11335"></path></svg>
+                          <span style="color: #666666;font-size: 14px;margin-left: 5px" @click="onDel(k)">删除</span></el-button>
+                      </div>
+                      <div>
+                        <el-button  type="text" v-if="!isContentShow"  size="small" @click="isContentShow = true;sys_datacommentid = k.sys_datacommentid">
+                          <svg t="1727055468269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11646" width="14" height="14"><path d="M643.657143 457.289143c0 36.571429 29.257143 58.514286 58.514286 58.514286 36.571429 0 58.514286-29.257143 58.514285-58.514286 0-36.571429-29.257143-58.514286-58.514285-58.514286-29.257143-7.314286-58.514286 21.942857-58.514286 58.514286" fill="#3874F6" p-id="11647"></path><path d="M1024 142.774857c0-43.885714-43.885714-87.771429-87.771429-87.771428H87.771429c-43.885714 0-87.771429 36.571429-87.771429 87.771428v621.714286c0 51.2 43.885714 87.771429 87.771429 87.771428h307.2l117.028571 117.028572 117.028571-117.028572h307.2c51.2 0 87.771429-43.885714 87.771429-87.771428v-621.714286z m-65.828571 592.457143c0 29.257143-21.942857 51.2-51.2 51.2H592.457143l-80.457143 80.457143-80.457143-80.457143H117.028571c-29.257143 0-51.2-21.942857-51.2-51.2v-563.2c0-29.257143 21.942857-51.2 51.2-51.2h789.942858c29.257143 0 51.2 21.942857 51.2 51.2v563.2z" fill="#3874F6" p-id="11648"></path><path d="M453.485714 457.289143c0 36.571429 29.257143 58.514286 58.514286 58.514286s58.514286-29.257143 58.514286-58.514286c0-36.571429-21.942857-65.828571-58.514286-65.828572s-58.514286 29.257143-58.514286 65.828572M256 457.289143c0 36.571429 29.257143 58.514286 58.514286 58.514286s58.514286-29.257143 58.514285-58.514286c0-36.571429-29.257143-58.514286-58.514285-58.514286-36.571429-7.314286-58.514286 21.942857-58.514286 58.514286" fill="#3874F6" p-id="11649"></path></svg>
+                          <span style="color: #3874F6;font-size: 14px;margin-left: 5px">回复</span></el-button>
+                        <el-button type="text" v-if="isContentShow" size="small" @click="isContentShow = false;sys_datacommentid = ''">
+                          <svg t="1727055468269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11646" width="14" height="14"><path d="M643.657143 457.289143c0 36.571429 29.257143 58.514286 58.514286 58.514286 36.571429 0 58.514286-29.257143 58.514285-58.514286 0-36.571429-29.257143-58.514286-58.514285-58.514286-29.257143-7.314286-58.514286 21.942857-58.514286 58.514286" fill="#3874F6" p-id="11647"></path><path d="M1024 142.774857c0-43.885714-43.885714-87.771429-87.771429-87.771428H87.771429c-43.885714 0-87.771429 36.571429-87.771429 87.771428v621.714286c0 51.2 43.885714 87.771429 87.771429 87.771428h307.2l117.028571 117.028572 117.028571-117.028572h307.2c51.2 0 87.771429-43.885714 87.771429-87.771428v-621.714286z m-65.828571 592.457143c0 29.257143-21.942857 51.2-51.2 51.2H592.457143l-80.457143 80.457143-80.457143-80.457143H117.028571c-29.257143 0-51.2-21.942857-51.2-51.2v-563.2c0-29.257143 21.942857-51.2 51.2-51.2h789.942858c29.257143 0 51.2 21.942857 51.2 51.2v563.2z" fill="#3874F6" p-id="11648"></path><path d="M453.485714 457.289143c0 36.571429 29.257143 58.514286 58.514286 58.514286s58.514286-29.257143 58.514286-58.514286c0-36.571429-21.942857-65.828571-58.514286-65.828572s-58.514286 29.257143-58.514286 65.828572M256 457.289143c0 36.571429 29.257143 58.514286 58.514286 58.514286s58.514286-29.257143 58.514285-58.514286c0-36.571429-29.257143-58.514286-58.514285-58.514286-36.571429-7.314286-58.514286 21.942857-58.514286 58.514286" fill="#3874F6" p-id="11649"></path></svg>
+                          <span style="color: #3874F6;font-size: 14px;margin-left: 5px">取消回复</span></el-button>
+                      </div>
+                    </div>
+                    <div style="border: 1px solid #9ca3af;padding: 10px;border-radius: 5px" v-if="isContentShow && sys_datacommentid == k.sys_datacommentid">
+                      <el-input type="textarea" style="border: none;margin-bottom: 10px" :rows="1" v-model="replyContent" :placeholder="'我回复'+k.createby+'：'"></el-input>
+                      <el-divider></el-divider>
+                      <div style="display: flex;justify-content: right">
+                        <el-button   type="primary" size="small" :disabled="replyContent.length == 0" @click="onReply(i.sys_datafollowupid,k)">发布</el-button>
                       </div>
-                      <i style="color:red;" class="el-icon-delete" v-if="nowUserid === i.createuserid" @click="deleteFile(img)"></i>
                     </div>
-                  </div>
-                  <!-- <div v-show="checkFileType(file.postfix) === 'file'"  class="flex-align-center pionter" style="margin-bottom:10px;" v-for="file in i.attinfos" :key="file.index">
-                    <a class="file__link" :href="file.url">{{file.document}}</a>
-                    <i style="color:red;" class="el-icon-delete" @click="deleteFile(file)"></i>
-                  </div> -->
-                  <div style="text-align:right" v-if="nowUserid === i.createuserid">
-                    <upload class="inline-16" slot="upload"
-                      :folderid="folderid"
-                      :status="status"
-                      btntype="icon"
-                      :bindData="{ ownertable: 'sys_datafollowup', ownerid: i.sys_datafollowupid,usetype: 'default' }"
-                      @onSuccess="queryLogs">
-                    </upload>
-                    <editLog :status="status" ref="edits" :data="i" :ownertable="ownertable" @onSuccess="queryLogs"></editLog>
-                    <el-popconfirm
-                        title="确定删除该跟进动态吗？"
-                        @confirm="deleteLogs(i)"
-                    >
-                      <el-button slot="reference" icon="el-icon-delete" size="mini" type="text" :disabled="status === '已结案' || status === '已失败'">删 除</el-button>
-                    </el-popconfirm>
-
                   </div>
                 </div>
               </div>
-          </el-timeline-item>
-        </el-timeline>
-      </div>
+            </div>
+          </div>
+          <el-divider></el-divider>
+          <div style="display: flex;justify-content: space-between;padding: 0 10px 10px 10px">
+            <div>
+              <el-button type="text" size="small" @click="isShow?isShow = false:isShow = true">
+                <svg t="1727055468269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11646" width="14" height="14"><path d="M643.657143 457.289143c0 36.571429 29.257143 58.514286 58.514286 58.514286 36.571429 0 58.514286-29.257143 58.514285-58.514286 0-36.571429-29.257143-58.514286-58.514285-58.514286-29.257143-7.314286-58.514286 21.942857-58.514286 58.514286" fill="#999999" p-id="11647"></path><path d="M1024 142.774857c0-43.885714-43.885714-87.771429-87.771429-87.771428H87.771429c-43.885714 0-87.771429 36.571429-87.771429 87.771428v621.714286c0 51.2 43.885714 87.771429 87.771429 87.771428h307.2l117.028571 117.028572 117.028571-117.028572h307.2c51.2 0 87.771429-43.885714 87.771429-87.771428v-621.714286z m-65.828571 592.457143c0 29.257143-21.942857 51.2-51.2 51.2H592.457143l-80.457143 80.457143-80.457143-80.457143H117.028571c-29.257143 0-51.2-21.942857-51.2-51.2v-563.2c0-29.257143 21.942857-51.2 51.2-51.2h789.942858c29.257143 0 51.2 21.942857 51.2 51.2v563.2z" fill="#999999" p-id="11648"></path><path d="M453.485714 457.289143c0 36.571429 29.257143 58.514286 58.514286 58.514286s58.514286-29.257143 58.514286-58.514286c0-36.571429-21.942857-65.828571-58.514286-65.828572s-58.514286 29.257143-58.514286 65.828572M256 457.289143c0 36.571429 29.257143 58.514286 58.514286 58.514286s58.514286-29.257143 58.514285-58.514286c0-36.571429-29.257143-58.514286-58.514285-58.514286-36.571429-7.314286-58.514286 21.942857-58.514286 58.514286" fill="#999999" p-id="11649"></path></svg>
+                <span style="font-size: 14px;color: #3874F6">评论({{i.commentqty}})</span></el-button>
+            </div>
+            <div>
+              <editLog :status="status" ref="edits" :data="i" :ownertable="ownertable" @onSuccess="queryLogs"></editLog>
+              <el-popconfirm
+                  title="确定删除该跟进动态吗？"
+                  @confirm="deleteLogs(i)"
+              >
+                <el-button slot="reference" icon="el-icon-delete" size="mini" type="text" :disabled="status === '已结案' || status === '已失败'">删 除</el-button>
+              </el-popconfirm>
+            </div>
+          </div>
+        </el-card>
+      </el-timeline>
     </div>
   </div>
 </template>
@@ -174,7 +180,14 @@ export default {
       ownertableNew:'',
       owneridNew:'',
       isFull:false,
+      search:'',
       windowHeight: window.innerHeight,  //实时屏幕高度
+      commentqty:0,
+      content:'',
+      isShow:false,
+      sys_datacommentid:'',
+      isContentShow:false,
+      replyContent:'',
     }
   },
   methods:{
@@ -187,8 +200,6 @@ export default {
         }
       })
       this.logList = res.data
-      console.log(this.logList,'跟进数据')
-      console.log(this.logList.length,'数据')
     },
     async queryLogsNew(ownertable,ownerid) {
       this.owneridNew = ownerid
@@ -249,6 +260,63 @@ export default {
     onSuccess(){
       this.queryLogs()
       this.$emit('logSuccess')
+    },
+    async onComment(data){
+      const res = await this.$api.requested({
+        "id": 20240429161601,
+        "content": {
+          "ownertable":'sys_datafollowup',//数据表
+          "ownerid":data.sys_datafollowupid,//数据id
+          "content":this.content,//内容
+          "replyid":"0"//被回复评论id
+        }
+      })
+      this.tool.showMessage(res,()=>{
+        this.content = ''
+        this.sys_datacommentid = ''
+        this.queryLogs()
+      })
+    },
+    async onReply(id,data){
+      const res = await this.$api.requested({
+        "id": 20240429161601,
+        "content": {
+          "ownertable":'sys_datafollowup',//数据表
+          "ownerid":id,//数据id
+          "content":this.replyContent,//内容
+          "replyid":data.sys_datacommentid//被回复评论id
+        }
+      })
+      this.tool.showMessage(res,()=>{
+        this.replyContent = ''
+        this.isContentShow = false
+        this.sys_datacommentid = ''
+        this.queryLogs()
+      })
+    },
+    onDel(data){
+      console.log(data,'删除')
+      this.$confirm('确定删除该评论吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async() => {
+        const res = await this.$api.requested({
+          "id": 20240429161701,
+          "content": {
+            "sys_datacommentid":data.sys_datacommentid
+          }
+        })
+        this.tool.showMessage(res,()=>{
+          this.queryLogs()
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+
     }
   },
   mounted () {
@@ -278,14 +346,27 @@ export default {
 
 </script>
 <style>
+
 .el-step__description{
   padding-right:0px !important;
 }
 </style>
 <style scoped>
-.step__panel{
-  background-color: #eff4ff;
+/deep/ .el-card__body {
+  padding: 0;
+}
+/deep/ .el-divider--horizontal {
+  display: block;
+  height: 1px;
+  width: 100%;
+  margin:0 0 10px 0 ;
+}
+.el-card__body {
   padding: 10px;
+}
+.step__panel{
+ /* background-color: #eff4ff;*/
+  /*padding: 10px;*/
   border-radius: 5px;
   color:#666
 }
@@ -360,4 +441,5 @@ export default {
 .flex-wrap{
   flex-wrap: wrap
 };
+
 </style>

src/components/normal-basic-layout/details/modules/followUp/followUpCopy.vue

@@ -0,0 +1,363 @@
+<template>
+  <div class="normal-panel follow__panel" id="containerFull">
+    <div class="container flex-align-center flex-between">
+      <div>
+        <slot name="collapse"></slot>
+        <p class="inline-16">跟进动态</p>
+      </div>
+      <div style="display: flex;justify-content: space-between">
+        <fullScreen class="inline-16" domId="containerFull" @onFull="onFull" @backFull="backFull"></fullScreen>
+        <addLog :ownertable="ownertable" @onSuccess="queryLogs" :status="status"></addLog>
+      </div>
+    </div>
+    <div  class="container" >
+      <div v-if="logList.length === 0">
+        <el-empty description="暂无记录" :image-size="40"></el-empty>
+      </div>
+      <div :style="{overflow: isFull?'auto':'none',height:isFull?(windowHeight - 100) + 'px':''}">
+        <el-timeline>
+          <el-timeline-item
+            v-for="i in logList" :key="i.index"
+            :timestamp="i.createdate">
+              <div slot="dot" class="dot"></div>
+              <div class="step__panel normal-margin">
+                <div class="flex-align-center " style="margin-bottom:10px" v-if="i.userextend.length > 0">
+                  <!-- <p><small>跟进人:</small>{{i.changeby}}</p> -->
+<!--                    <img height="30" width="30" :src="i.headpic" alt="">-->
+                      <div class="avatar" >
+                        <img class="avatar__image" v-if="i.headpic" :src="i.headpic" alt="">
+                        <p v-else>{{i.userextend[0].name.substr(0, 1)}}</p>
+                      </div>
+                      <div style="margin-left: 10px">
+                        <p>{{ i.userextend[0].name }}&nbsp;</p>
+                        <small style="color:#999999ad;margin-top:10px">部门：{{ i.userextend[0].depname?i.userextend[0].depname:"--" }}&emsp;职位：{{ i.userextend[0].position?i.userextend[0].position:"--" }}</small>
+                      </div>
+<!--                  <div style="margin-left: 20px">
+                    <small style="color:#999">{{i.createdate}}</small>
+                  </div>-->
+
+                </div>
+                <div class="flex-align-center " style="margin-bottom:10px" v-else>
+                  <!-- <p><small>跟进人:</small>{{i.changeby}}</p> -->
+                  <!--                    <img height="30" width="30" :src="i.headpic" alt="">-->
+                  <div class="avatar" >
+                    <img class="avatar__image" v-if="i.headpic" :src="i.headpic" alt="">
+                    <p v-else>{{i.createby.substr(0, 1)}}</p>
+                  </div>
+                  <div style="margin-left: 10px">
+                    <p>{{ i.createby }}&nbsp;</p>
+                    <small style="color:#999999ad;margin-top:10px">部门：{{"--" }}&emsp;职位：{{ "--" }}</small>
+                  </div>
+                  <!--                  <div style="margin-left: 20px">
+                                      <small style="color:#999">{{i.createdate}}</small>
+                                    </div>-->
+
+                </div>
+<!--                <div >
+                  <span>{{i.userextend[0].name}}</span>
+                  <span>
+                    <small>部门:{{i.userextend[0].depname}}</small>
+                    <small>职位:{{i.userextend[0].position}}</small>
+                  </span>
+                </div>-->
+                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
+                  <span>跟进类型：{{i.type}}</span>
+                </div>
+                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
+                  <span>跟进对象：</span>
+                  <span v-for="item in i.contacts" :key="item.index">
+                    <span v-if="item.rowindex === i.contacts.length">
+                      {{item.name}}
+                    </span>
+                    <span v-else>
+                       {{item.name + ','}}
+                    </span>
+
+                  </span>
+                </div>
+                 <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
+                  <span>目的：{{i.target}}</span>
+                </div>
+                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
+                  <span>过程：{{i.content}}</span>
+                </div>
+                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
+                  <span>结果：{{i.results}}</span>
+                </div>
+                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
+                  <span>下次跟进计划：{{i.nextplan}}</span>
+                </div>
+                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
+                  <span>营销费用：</span>
+                  <span v-if="i.salesfeesamount || i.salesfeesamount == 0">
+                    <span style="color: red">¥ </span>
+                      <span style="font-size: 12px;color: red">{{tool.formatAmount(i.salesfeesamount,2)}}</span>
+                  </span>
+                  <span v-else>--</span>
+                </div>
+                <div v-if="$route.path === '/projectChangeDetail'">
+                  <marketingExpenses  class="inline-16" ownertable="sa_project" :ownerid="i.sys_datafollowupid" :dataTime="i.createdate" :userid="i.createuserid" @onSuccess="onSuccess"></marketingExpenses>
+                </div>
+                <div v-if="$route.path === '/customerDetail'">
+                  <marketingExpenses  class="inline-16" ownertable="sa_customers" :ownerid="i.sys_datafollowupid" :dataTime="i.createdate" :userid="i.createuserid" @onSuccess="onSuccess"></marketingExpenses>
+                </div>
+                <div v-if="$route.path === '/PublicCustomerDetail'">
+                  <marketingExpenses  class="inline-16" ownertable="sa_customers" :ownerid="i.sys_datafollowupid" :dataTime="i.createdate" :userid="i.createuserid" @onSuccess="onSuccess"></marketingExpenses>
+                </div>
+                <div class="follow-progress">
+                  <p v-if="$route.path !== '/projectChangeDetail' && $route.path !== '/customerDetail' && $route.path !== '/PublicCustomerDetail'">{{i.content}}</p>
+                  <div>
+                    <!-- <previewImage v-show="checkFileType(img.postfix) === 'img'" style="width:60px;height:60px;margin-left:5px" v-for="img in i.attinfos" :key="img.index" :image="img" :deletebtn="true" @onSuccess="queryLogs"></previewImage> -->
+                    <div class="flex-align-center flex-between pionter" v-for="img in i.attinfos" :key="img.index" style="padding:10px;margin-bottom:5px">
+                      <div class="flex-align-center" style="flex:1;width:100%">
+                        <img width="30" :src="checkFileType(img.postfix) === 'file'?require('@/assets/file_icons/file.svg'):img.url" class="inline-16" alt="">
+                        <div class="file__link">
+                          <a :href="img.url">{{img.document}}</a>
+                          <p>{{(img.contentlength / 1024).toFixed(2)}}kb</p>
+                        </div>
+                      </div>
+                      <i style="color:red;" class="el-icon-delete" v-if="nowUserid === i.createuserid" @click="deleteFile(img)"></i>
+                    </div>
+                  </div>
+                  <!-- <div v-show="checkFileType(file.postfix) === 'file'"  class="flex-align-center pionter" style="margin-bottom:10px;" v-for="file in i.attinfos" :key="file.index">
+                    <a class="file__link" :href="file.url">{{file.document}}</a>
+                    <i style="color:red;" class="el-icon-delete" @click="deleteFile(file)"></i>
+                  </div> -->
+                  <div style="text-align:right" v-if="nowUserid === i.createuserid">
+                    <upload class="inline-16" slot="upload"
+                      :folderid="folderid"
+                      :status="status"
+                      btntype="icon"
+                      :bindData="{ ownertable: 'sys_datafollowup', ownerid: i.sys_datafollowupid,usetype: 'default' }"
+                      @onSuccess="queryLogs">
+                    </upload>
+                    <editLog :status="status" ref="edits" :data="i" :ownertable="ownertable" @onSuccess="queryLogs"></editLog>
+                    <el-popconfirm
+                        title="确定删除该跟进动态吗？"
+                        @confirm="deleteLogs(i)"
+                    >
+                      <el-button slot="reference" icon="el-icon-delete" size="mini" type="text" :disabled="status === '已结案' || status === '已失败'">删 除</el-button>
+                    </el-popconfirm>
+
+                  </div>
+                </div>
+              </div>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import upload from '@/components/upload/hw_obs_upload.vue'
+import previewImage from '@/components/previewImage/index.vue'
+import fullScreen from "@/views/salesData/components/fullScreen";
+import addLog from './addLog.vue'
+import editLog from './editLog.vue'
+import marketingExpenses from '@/components/marketingExpenses/index'
+export default {
+  props:['ownertable','status'],
+  components:{
+    addLog,
+    editLog,
+    upload,
+    previewImage,
+    fullScreen,
+    marketingExpenses
+  },
+  data () {
+    return {
+      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
+      logList:[],
+      nowUserid:'',
+      ownertableNew:'',
+      owneridNew:'',
+      isFull:false,
+      windowHeight: window.innerHeight,  //实时屏幕高度
+    }
+  },
+  methods:{
+    async queryLogs() {
+      const res = await this.$api.requested({
+        "id": 20220930121501,
+        "content": {
+            "ownertable":this.ownertable,
+            "ownerid":this.$route.query.id
+        }
+      })
+      this.logList = res.data
+      console.log(this.logList,'跟进数据')
+      console.log(this.logList.length,'数据')
+    },
+    async queryLogsNew(ownertable,ownerid) {
+      this.owneridNew = ownerid
+      this.ownertableNew = ownertable
+      const res = await this.$api.requested({
+        "id": 20220930121501,
+        "content": {
+          "ownertable":this.ownertableNew,
+          "ownerid":this.owneridNew
+        }
+      })
+      this.logList = res.data
+      console.log(this.logList,'跟进数据')
+      console.log(this.logList.length,'数据')
+    },
+    async deleteLogs (val) {
+      const res = await this.$api.requested({
+        "id": 20220930121701,
+        "content": {
+          "sys_datafollowupid":val.sys_datafollowupid
+        }
+      })
+      this.tool.showMessage(res,()=>{
+        this.queryLogs()
+      })
+    },
+    checkFileType (type) {
+      let arr = ['JPG','JPEG','PNG']
+      if (arr.includes(type.toUpperCase())) {
+        return 'img'
+      } else {
+        return 'file'
+      }
+    },
+    async deleteFile (row) {
+      const res = await this.$api.requested({
+        "classname": "system.attachment.Attachment",
+        "method": "deleteFileLink",
+        "content": {
+          "linksids":[row.linksid]
+        }
+      })
+      this.tool.showMessage(res,()=>{
+        this.queryLogs()
+      })
+    },
+    /*全屏*/
+    onFull(){
+      this.heightChart = this.windowWidth > 1128 ? 'calc(100vh - 85px)':'calc(100vh - 115px)'
+      this.isFull = true
+    },
+    /*退出全屏*/
+    backFull(val){
+      this.heightChart = '100%'
+      this.isFull = false
+      this.$emit('backFull',val)
+    },
+    onSuccess(){
+      this.queryLogs()
+      this.$emit('logSuccess')
+    }
+  },
+  mounted () {
+    this.queryLogs()
+    console.log(this.windowHeight,'windowHeight高度')
+    this.nowUserid = JSON.parse(sessionStorage.getItem('active_account')).userid
+
+    var that = this;
+    // <!--把window.onresize事件挂在到mounted函数上-->
+    window.onresize = () => {
+      return (() => {
+        window.fullHeight = document.documentElement.clientHeight;
+        that.windowHeight = window.fullHeight; // 高
+      })()
+    };
+  },
+  watch: {
+    $route () {
+      this.queryLogs()
+    },
+    windowHeight (val) {
+      console.log("实时屏幕高度：",val );
+      console.log(this.windowHeight)
+    }
+  }
+}
+
+</script>
+<style>
+.el-step__description{
+  padding-right:0px !important;
+}
+</style>
+<style scoped>
+.step__panel{
+  background-color: #eff4ff;
+  padding: 10px;
+  border-radius: 5px;
+  color:#666
+}
+.follow-progress p{
+  width:100%;
+  margin-bottom:5px;
+  font-size:14px;
+  word-wrap: break-word;
+}
+.file__link{
+  color:#999;
+  font-size: 12px;
+  padding: 0 5px;
+  display:block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pionter{
+  margin:6px 0;
+  padding: 10px;
+  transition: .2s linear;
+  cursor: pointer;
+  border-radius: 5px;
+  background: #ffff;
+}
+.pionter:hover{
+  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
+}
+.sticky{
+  position: sticky;
+  top:0px;
+  /* background: #fff; */
+  z-index: 9999;
+}
+.dot{
+  background:#fff;height:10px;width:10px;border-radius:100%;border:2px solid #3874F6;
+}
+.normal-panel{
+  border-radius: 5px;
+}
+.avatar__image{
+  height: 100%;
+  width: 100%;
+}
+.avatar:hover .avatar__model{
+  display: block;
+}
+.avatar{
+  position: relative;
+  height:40px;
+  width: 40px;
+  margin-bottom: 5px;
+  border-radius: 100%;
+  text-align: center;
+  line-height: 40px;
+  color:#fff;
+  font-weight: 500;
+  background: #3874F6;
+  cursor: pointer;
+  overflow: hidden;
+}
+.scroll{
+  height: 410px;
+  overflow: auto;
+}
+.scroll::-webkit-scrollbar-thumb { /*滚动条滑块*/
+  border-radius: 10px;
+  background-color: #CACACA;
+}
+.flex-wrap{
+  flex-wrap: wrap
+};
+</style>