opms_frontend/src/views/customer/follow.vue

<!--
 * @Author: wanglj 471442253@qq.com
 * @Date: 2022-12-15 15:38:21
 * @LastEditors: wanglj
 * @LastEditTime: 2022-12-30 14:36:03
 * @Description: file content
 * @FilePath: \opms_frontend\src\views\customer\follow.vue
-->
<template>
  <div class="follow-container">
    <el-row :gutter="10" style="margin-bottom: 10px">
      <el-col :span="4">
        <el-input v-model="queryForm.custId" placeholder="客户" />
      </el-col>
      <!-- <el-col :span="4">
        <el-date-picker
          v-model="queryForm.date"
          end-placeholder="结束日期"
          placeholder="时间范围"
          start-placeholder="开始日期"
          style="width: 100%"
          type="daterange" />
      </el-col> -->
      <el-col :span="4">
        <el-input v-model="queryForm.daysBeforeToday" placeholder="查询天数">
          <template slot="append">天</template>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-input v-model="queryForm.targetType" placeholder="跟进类型" />
      </el-col>
      <el-col :span="4">
        <el-input v-model="queryForm.indusTry" placeholder="跟进人员" />
      </el-col>
      <el-col :span="4">
        <el-input v-model="queryForm.managerId" placeholder="创建者" />
      </el-col>
      <el-col :span="4">
        <el-button icon="el-icon-plus" type="primary" @click="search">
          查询
        </el-button>
        <el-button @click="addFollowUp">添加</el-button>
        <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <div class="follow">
      <ul
        v-infinite-scroll="load"
        class="records infinite-list"
        :infinite-scroll-disabled="loadFlag"
        :infinite-scroll-immediate-check="false">
        <li v-for="(date, index) in records" :key="index">
          <div class="date">
            <h2>{{ date.followDay.split('-')[2] }}</h2>
            <h3>{{ date.followDay.split('-').splice(0, 2).join('.') }}</h3>
          </div>
          <ul class="content">
            <li v-for="(item, idx) in date.followupList" :key="idx">
              <!-- <el-avatar class="user-avatar"
              :src="avatar" />-->
              <vab-icon class="user-avatar" icon="account-circle-fill" />
              <div class="text">
                <p class="action">
                  <span>
                    {{ item.contactsName }} 跟进（{{
                      formatType(item.followType)
                    }}）
                  </span>
                  <span>
                    <vab-icon icon="time-line" />
                    {{ item.followDate }}
                  </span>
                </p>
                <p>{{ item.followContent }}</p>
                <div class="footer">
                  <p>
                    来自客户：
                    <span>{{ item.custName }}</span>
                  </p>
                  <div>
                    <el-button size="mini" @click="showDetail(item)">
                      <vab-icon icon="arrow-right-circle-fill" />
                      详情
                    </el-button>
                    <el-button size="mini" @click="showComment(item.id)">
                      <!-- <vab-icon icon="chat-3-fill" /> -->
                      评论({{ item.commentNumber }})
                    </el-button>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
      <div class="comment">
        <ul>
          <li v-for="item in comments" :key="item.id">
            <vab-icon class="user-avatar" icon="account-circle-fill" />
            <div class="text">
              <p>{{ item.createdName }}</p>
              <p>{{ item.content }}</p>
              <p>{{ item.createdTime }}</p>
            </div>
          </li>
        </ul>
        <div class="form">
          <el-input
            v-model="comment"
            maxlength="300"
            resize="none"
            :rows="5"
            show-word-limit
            type="textarea" />
          <el-button size="mini" type="primary" @click="handleComment">
            评论
          </el-button>
        </div>
      </div>
    </div>
    <!-- 跟进详情 -->
    <FollowDetail ref="followDetail" />
  </div>
</template>

<script>
  import to from 'await-to-js'
  import api from '@/api/customer/follow'
  import FollowDetail from './components/FollowDetail.vue'
  export default {
    name: 'Follow',
    components: {
      FollowDetail,
    },
    data() {
      return {
        listLoading: false,
        queryForm: {
          custId: '',
          targetType: '',
          targetId: '',
          managerId: '',
          daysBeforeToday: 20,
          date: [],
        },
        loadFlag: true,
        records: [],
        followId: '',
        comment: '',
        comments: [],
        visible: false,
        form: {
          id: '',
          followType: '',
          followDate: '',
          followContent: '',
          targetId: '',
          targetType: '',
          targetName: '',
          custId: '',
          custName: '',
          contactsId: 0,
          contactsName: '',
          reminders: '',
          nextTime: '',
          remark: '',
          createdBy: '',
          createdName: '',
          createdTime: '',
          updatedBy: '',
          updatedName: '',
          updatedTime: '',
          deletedTime: '',
        },
      }
    },
    mounted() {
      this.fetchData()
      this.getOptions()
    },
    methods: {
      getOptions() {},
      search() {
        this.queryForm.daysBeforeToday = 20
        this.fetchData()
      },
      async fetchData() {
        let params = { ...this.queryForm }
        const [err, res] = await to(api.getListByDay(params))
        if (err) return console.log(err, 'err')
        this.records = res.data.list || []
        await this.$nextTick()
        this.loadFlag = false
      },
      load() {
        this.queryForm.daysBeforeToday += 20
        console.log('到底了', this.queryForm.daysBeforeToday)
        this.fetchData()
      },
      reset() {
        this.queryForm = {
          custId: '',
          targetType: '',
          targetId: '',
          managerId: '',
          daysBeforeToday: '',
          date: [],
        }
        this.fetchData()
      },
      // 详情
      showDetail(row) {
        this.$refs.followDetail.init({ ...row })
      },
      async showComment(id) {
        this.followId = id
        const [err, res] = await to(api.getComment({ followId: id + '' }))
        if (err) return
        this.comments = res.data.list || []
      },
      formatType(val) {
        let str = ''
        if (val == 10) str = '电话'
        else if (val == 20) str = '邮件'
        else if (val == 30) str = '拜访'
        return str
      },
      // 评论
      async handleComment() {
        let str = ''
        if (!this.followId) str = '请选择跟进记录'
        else if (!this.comment) str = '请输入评论'
        if (str) return this.$message.warning(str)
        let params = {
          followId: this.followId + '',
          content: this.comment,
          remark: '',
        }
        const [err, res] = await to(api.addComment(params))
        if (err) return
        this.$message.success(res.msg)
        this.showComment(this.followId)
        this.comment = ''
        this.fetchData()
      },
      addFollowUp() {
        let params = {
          followType: '20',
          followDate: '2022-10-29',
          followContent: '跟进内容',
          targetId: 1,
          targetType: '20',
          targetName: 'dashoo',
          custId: 26,
          custName: '测试客户1348',
          contactsId: 55,
          contactsName: 'wanglj',
          reminders: '',
          nextTime: this.parseTime(new Date()),
          remark: '',
        }
        api.addFollowUp(params)
      },
    },
  }
</script>

<style lang="scss" scoped>
  $base: '.follow';
  .follow {
    height: calc(100vh - 240px);
    display: flex;
    .comment {
      width: 300px;
      display: flex;
      flex-direction: column;
      border-radius: 4px;
      border: 1px solid rgb(215, 232, 244);
      ul {
        flex: 1;
        overflow-y: auto;
        padding: 10px;
        li {
          display: flex;
          border-bottom: 1px solid #e3e5e7;
          .text {
            flex: 1;
            padding: 0 10px;
            p {
              font-weight: 500;
              margin: 0;
              line-height: 32px;
            }
            p:first-child {
              line-height: 30px;
              font-weight: bold;
            }
            p:last-child {
              font-size: 12px;
              color: #9499a0;
              text-align: right;
            }
          }
        }
        .user-avatar {
          font-size: 30px;
        }
      }
      .form {
        padding: 4px;
        text-align: right;
        .el-textarea {
          margin-bottom: 4px;
        }
      }
    }
    .records {
      flex: 1;
      margin: 0;
      height: 100%;
      padding: 10px 20px;
      list-style: none;
      overflow: auto;
      > li {
        display: flex;
        + li {
          margin-top: 10px;
        }
      }
      .date {
        width: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        h2,
        h3 {
          margin: 0;
        }
        h2 {
          font-size: 26px;
          line-height: 32px;
        }
      }
      .content {
        flex: 1;
        list-style: none;
        li {
          display: flex;
          border: 1px solid rgb(215, 232, 244);
          background: rgb(247, 251, 254);
          border-radius: 4px;
          padding: 8px;
          + li {
            margin-top: 10px;
          }
        }
        .user-avatar {
          font-size: 40px;
        }
        .text {
          flex: 1;
          padding-left: 20px;
          padding-right: 10px;
          p {
            font-weight: 500;
            margin: 0;
            line-height: 32px;
            span {
              color: #1d66dc;
            }
          }
          .action {
            display: flex;
            justify-content: space-between;
            span:first-child {
              font-weight: bold;
              color: #333;
            }
          }
          .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
  }
</style>