opms_frontend/src/views/plat/work/index.vue

<template>
  <div class="app-container">
    <vab-query-form>
      <vab-query-form-top-panel>
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item label="项目名">
            <el-input
              v-model="queryForm.nboName"
              clearable
              filterable
              placeholder="请选择项目名"
              @keyup.enter.native="fetchData(1)" />
          </el-form-item>
          <el-form-item label="工单类型">
            <el-select
              v-model="queryForm.orderTypeName"
              clearable
              filterable
              placeholder="请选择工单类型"
              @change="fetchData(1)">
              <el-option v-for="user in orderTypeList" :key="user.val" :label="user.val" :value="user.val" />
            </el-select>
          </el-form-item>
          <el-form-item label="支持人员">
            <el-input
              v-model="queryForm.assignUserName"
              clearable
              filterable
              placeholder="请输入支持人员"
              @keyup.enter.native="fetchData(1)" />
          </el-form-item>
          <el-form-item label="销售工程师">
            <el-input
              v-model="queryForm.saleName"
              clearable
              filterable
              placeholder="请输入销售工程师"
              @keyup.enter.native="fetchData(1)" />
          </el-form-item>
          <el-form-item label="时间">
            <el-date-picker
              v-model="queryForm.trialTime"
              end-placeholder="结束日期"
              range-separator="至"
              start-placeholder="开始日期"
              style="width: 100%"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="fetchData(1)" />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="fetchData(1)">查询</el-button>
            <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-top-panel>
    </vab-query-form>
    <el-empty v-if="dynamicsList.length == 0" :image-size="200" />
    <ul v-else v-infinite-scroll="loadData" class="records" :style="{ height: height }">
      <li v-for="(v, index) in dynamicsList" :key="index">
        <div class="date">
          <h2>{{ parseTime(v.updatedTime, '{y}-{m}-{d}').split('-')[2] }}</h2>
          <h3>{{ parseTime(v.updatedTime, '{y}-{m}-{d}').split('-').splice(0, 2).join('.') }}</h3>
        </div>
        <ul class="content">
          <li>
            <vab-icon class="user-avatar" icon="account-circle-fill" />
            <div class="text">
              <p class="action">{{ v.custName }} - {{ v.orderTypeName }} - {{ v.assignUserName }}</p>
              <el-row
                v-if="v.orderTypeName == '产品试用申请（硬件）' || v.orderTypeName == '产品试用申请（软件）'"
                :gutter="20">
                <el-col v-if="v.feedbackTrail" :span="24">
                  <p class="tit">试用开始反馈:</p>
                  <div v-for="(row, idx) in startList(v.feedbackTrail)" :key="idx">
                    <div>
                      <el-descriptions border :column="3" :content-style="CS" :label-style="LS">
                        <el-descriptions-item label="反馈人员">
                          {{ row.feedbackTrialName }}
                        </el-descriptions-item>
                        <el-descriptions-item label="反馈时间">
                          {{ parseTime(row.feedbackTrialTime, '{y}-{m}-{d}') }}
                        </el-descriptions-item>
                        <el-descriptions-item label="更新时间">
                          {{ parseTime(row.createdTime, '{y}-{m}-{d}') }}
                        </el-descriptions-item>
                      </el-descriptions>
                      <el-descriptions border :column="1" :content-style="CS" :label-style="LS">
                        <el-descriptions-item label="总结/问题">
                          <span v-html="row.feedbackTrialContent.replace(/\n/g, '<br>')"></span>
                        </el-descriptions-item>
                        <el-descriptions-item label="讲解纪要补充">
                          <span v-html="row.feedbackTrialDist.replace(/\n/g, '<br>')"></span>
                        </el-descriptions-item>
                        <el-descriptions-item label="计划">
                          <span v-html="row.feedbackTrialPlan.replace(/\n/g, '<br>')"></span>
                        </el-descriptions-item>
                      </el-descriptions>
                    </div>
                  </div>
                </el-col>
                <el-col v-if="v.feedbackTrail" :span="24">
                  <p class="tit">试用过程反馈:</p>
                  <div v-for="(row, idx) in processList(v.feedbackTrail)" :key="idx">
                    <div v-show="idx < (v.showLength ? v.showLength : 1)">
                      <el-descriptions border :column="3" :content-style="CS" :label-style="LS">
                        <el-descriptions-item label="反馈人员">
                          {{ row.feedbackTrialName }}
                        </el-descriptions-item>
                        <el-descriptions-item label="反馈时间">
                          {{ parseTime(row.feedbackTrialTime, '{y}-{m}-{d}') }}
                        </el-descriptions-item>
                        <el-descriptions-item label="更新时间">
                          {{ parseTime(row.createdTime, '{y}-{m}-{d}') }}
                        </el-descriptions-item>
                      </el-descriptions>
                      <el-descriptions border :column="1" :content-style="CS" :label-style="LS">
                        <el-descriptions-item label="总结/问题">
                          <span v-html="row.feedbackTrialContent.replace(/\n/g, '<br>')"></span>
                        </el-descriptions-item>
                        <el-descriptions-item label="讲解纪要补充">
                          <span v-html="row.feedbackTrialDist.replace(/\n/g, '<br>')"></span>
                        </el-descriptions-item>
                        <el-descriptions-item label="计划">
                          <span v-html="row.feedbackTrialPlan.replace(/\n/g, '<br>')"></span>
                        </el-descriptions-item>
                      </el-descriptions>
                    </div>
                  </div>
                  <div v-if="v.feedbackTrail && processList(v.feedbackTrail).length > 1" style="margin-top: 10px">
                    <el-button size="mini" @click="changeLength(index, 1)">收起</el-button>
                    <el-button size="mini" @click="changeLength(index, 999)">展开</el-button>
                  </div>
                </el-col>
                <el-col v-if="v.feedbackTrail" :span="24">
                  <p class="tit">试用总结反馈:</p>
                  <div v-for="(row, idx) in endList(v.feedbackTrail)" :key="idx">
                    <div>
                      <el-descriptions border :column="3" :content-style="CS" :label-style="LS">
                        <el-descriptions-item label="反馈人员">
                          {{ row.feedbackTrialName }}
                        </el-descriptions-item>
                        <el-descriptions-item label="反馈时间">
                          {{ parseTime(row.feedbackTrialTime, '{y}-{m}-{d}') }}
                        </el-descriptions-item>
                        <el-descriptions-item label="更新时间">
                          {{ parseTime(row.createdTime, '{y}-{m}-{d}') }}
                        </el-descriptions-item>
                      </el-descriptions>
                      <el-descriptions border :column="1" :content-style="CS" :label-style="LS">
                        <el-descriptions-item label="总结/问题">
                          <span v-html="row.feedbackTrialContent.replace(/\n/g, '<br>')"></span>
                        </el-descriptions-item>
                        <el-descriptions-item label="讲解纪要补充">
                          <span v-html="row.feedbackTrialDist.replace(/\n/g, '<br>')"></span>
                        </el-descriptions-item>
                        <el-descriptions-item label="计划">
                          <span v-html="row.feedbackTrialPlan.replace(/\n/g, '<br>')"></span>
                        </el-descriptions-item>
                      </el-descriptions>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="v.orderTypeName == '技术文件支持' || v.orderTypeName == '售前讲解支持'" :gutter="20">
                <el-col v-if="v.feedbackSupportTime" :span="24">
                  <p class="tit">{{ v.feedbackSupportName }} (支持人员)总结:</p>
                  <el-descriptions border :column="1" :content-style="CS" :label-style="LS">
                    <el-descriptions-item label="反馈时间">{{ v.feedbackSupportTime }}</el-descriptions-item>
                    <el-descriptions-item label="本次讲解情况反馈">
                      <span v-html="v.feedbackSupportContent.replace(/\n/g, '<br>')"></span>
                    </el-descriptions-item>
                  </el-descriptions>
                </el-col>
                <el-col v-if="v.feedbackSaleTime" :span="24">
                  <p class="tit">{{ v.feedbackSaleName }} (销售人员)反馈:</p>
                  <el-descriptions border :column="1" :content-style="CS" :label-style="LS">
                    <el-descriptions-item label="反馈时间">{{ v.feedbackSaleTime }}</el-descriptions-item>
                    <el-descriptions-item v-if="v.orderTypeName == '售前讲解支持'" label="会议纪要">
                      <span v-html="v.feedbackSaleMeeting.replace(/\n/g, '<br>')"></span>
                    </el-descriptions-item>
                    <el-descriptions-item v-if="v.orderTypeName == '售前讲解支持'" label="讲解纪要补充">
                      <span v-html="v.feedbackSaleDist.replace(/\n/g, '<br>')"></span>
                    </el-descriptions-item>
                    <el-descriptions-item v-if="v.orderTypeName == '技术文件支持'" label="用户反馈">
                      <span v-html="v.feedbackSaleUser.replace(/\n/g, '<br>')"></span>
                    </el-descriptions-item>
                    <el-descriptions-item label="销售下一步工作计划">
                      <span v-html="v.feedbackSaleNext.replace(/\n/g, '<br>')"></span>
                    </el-descriptions-item>
                  </el-descriptions>
                </el-col>
              </el-row>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
  import workApi from '@/api/work/index'
  import to from 'await-to-js'
  export default {
    name: 'WorkRecords',
    data() {
      return {
        LS: {
          width: '13%',
        },
        CS: {
          width: '150px',
        },
        orderTypeList: [
          {
            val: '技术文件支持',
          },
          {
            val: '售前讲解支持',
          },
          {
            val: '产品试用申请（软件）',
          },
          {
            val: '产品试用申请（硬件）',
          },
        ],
        tryType: {
          10: '试用启动反馈',
          20: '试用过程反馈',
          30: '试用总结反馈',
        },
        height: this.$baseTableHeight(1),
        dynamicsList: [],
        queryForm: {
          nboName: '',
          orderTypeName: '',
          assignUserName: '',
          saleName: '',
          trialTime: [],
          updatedTimeStart: null,
          updatedTimeEnd: null,
          pageSize: 10,
          pageNum: 1,
        },
        total: 0,
      }
    },
    computed: {
      startList() {
        return function (list) {
          return list.filter((item) => item.feedbackTrialType == 10)
        }
      },
      processList() {
        return function (list) {
          return list.filter((item) => item.feedbackTrialType == 20)
        }
      },
      endList() {
        return function (list) {
          return list.filter((item) => item.feedbackTrialType == 30)
        }
      },
    },
    mounted() {
      this.fetchData(1)
    },
    methods: {
      loadData() {
        console.log('load')
        if (this.total > this.dynamicsList.length) {
          this.queryForm.pageNum++
          this.fetchData()
        }
      },
      getFirstDay() {
        var y = new Date().getFullYear() //获取年份
        var m = new Date().getMonth() + 1 //获取月份
        var d = '01'
        m = m < 10 ? '0' + m : m //月份补 0

        return [y, m, d].join('-') + ' 00:00:00'
      },
      getLastDay() {
        var y = new Date().getFullYear() //获取年份
        var m = new Date().getMonth() + 1 //获取月份
        var d = new Date(y, m, 0).getDate() //获取当月最后一日
        m = m < 10 ? '0' + m : m //月份补 0
        d = d < 10 ? '0' + d : d //日数补 0

        return [y, m, d].join('-') + ' 00:00:00'
      },
      reset() {
        this.queryForm = {
          nboName: '',
          orderTypeName: '',
          assignUserName: '',
          saleName: '',
          trialTime: [],
          updatedTimeStart: null,
          updatedTimeEnd: null,
        }
        this.fetchData(1)
      },
      changeLength(index, length) {
        this.$set(this.dynamicsList[index], 'showLength', length)
      },
      async fetchData(num) {
        let params = this.queryForm
        params.pageNum = num || params.pageNum
        if (params.trialTime && params.trialTime.length == 2) {
          params.updatedTimeStart = params.trialTime[0]
          params.updatedTimeEnd = params.trialTime[1]
        } else {
          params.updatedTimeStart = null
          params.updatedTimeEnd = null
        }
        const [err, res] = await to(workApi.getListFull(params))
        if (err) return
        if (res.code == 200) {
          if (this.queryForm.pageNum == 1) {
            this.dynamicsList = res.data.list
          } else {
            this.dynamicsList = this.dynamicsList.concat(res.data.list)
          }
          this.total = res.data.total
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .records {
    margin: 0;
    padding: 10px 20px;
    list-style: none;
    height: 100%;
    overflow-y: 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;

        & + li {
          margin-top: 10px;
        }
      }

      .user-avatar {
        font-size: 40px;
      }

      .text {
        flex: 1;
        padding-left: 20px;

        p {
          font-weight: 500;
          margin: 0;
          line-height: 20px;

          span {
            color: #1d66dc;
          }
        }

        .action {
          font-weight: bold;
          color: #333;
        }
      }
      .tit {
        font-weight: bold !important;
        color: #000;
        padding: 10px 0;
      }
    }
  }
</style>