crm-mobile/pages_task/detail.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar
        title="任务详情"
        :command-list="commandList"
        @command="handleCommand" />

      <view v-if="!$isEmpty(detailData)" class="container">
        <view class="header-top">
          <view class="bg linear-gradient" />
          <view class="card">
            <view
              :class="{active: detailData.status === 5}"
              class="task-name"
              @click="handleCommand('name')">
              <view
                class="check-box"
                @click.stop="handleCommand('status')">
                <text class="icon wk wk-check" />
              </view>
              <view class="text">
                {{ detailData.name }}
              </view>
            </view>

            <view class="info-cell">
              <view
                class="info-cell-item main-user"
                @click="handleCommand('mainUserId')">
                <template v-if="!$isEmpty(detailData.mainUser)">
                  <wk-avatar
                    :name="detailData.mainUser.realname"
                    :avatar="detailData.mainUser.img"
                    :size="12"
                    :preview="false"
                    class="avatar" />
                  <text class="text">
                    {{ detailData.mainUser.realname || '' }}
                  </text>
                </template>
                <template v-else>
                  <view class="avatar empty-user">
                    <i class="wk wk-plus" />
                  </view>
                  <text class="text">
                    负责人
                  </text>
                </template>
              </view>

              <view
                class="info-cell-item"
                @click="handleCommand('stopTime')">
                <view class="icon-box">
                  <text class="wk wk-calendar" />
                </view>
                <view class="time-box">
                  {{ endTimeText }}
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="section task-section">
          <view class="task-header">
            <text class="wk wk-edit" />
            <text>任务描述</text>
          </view>

          <view class="cell" @click="handleCommand('description')">
            <view class="cell-body">
              {{ detailData.description || '' }}
            </view>
          </view>

          <view class="cell" @click="handleCommand('labelId')">
            <view class="cell-title">
              任务标签
            </view>
            <view class="cell-body">
              <template v-if="detailData && detailData.labelList">
                <view
                  v-for="(item, index) in detailData.labelList"
                  :key="index"
                  :style="{backgroundColor: item.color}"
                  class="tag-item">
                  {{ item.labelName }}
                </view>
              </template>
            </view>
          </view>

          <view class="cell" @click="handleCommand('ownerUserId')">
            <view class="cell-title">
              参与人
            </view>
            <view class="cell-body">
              <template v-if="detailData && detailData.ownerUserList">
                <wk-avatar
                  v-for="(item, index) in detailData.ownerUserList"
                  :key="index"
                  :name="item.realname"
                  :avatar="item.img"
                  :size="12"
                  :preview="false"
                  class="avatar avatar-list-item" />
              </template>
            </view>
          </view>

          <view class="cell" @click="handleCommand('startTime')">
            <view class="cell-title">
              开始时间
            </view>
            <view class="cell-body">
              {{ detailData.startTime | formatTime }}
            </view>
          </view>

          <view class="cell" @click="handleCommand('priority')">
            <view class="cell-title">
              优先级
            </view>
            <view class="cell-body">
              <template v-if="priorityObj">
                <view
                  :style="{backgroundColor: priorityObj.color}"
                  class="priority-item">
                  {{ priorityObj.label }}
                </view>
              </template>
            </view>
          </view>
        </view>

        <view class="section relevance-section">
          <view class="cell-box" @click="handleCommand('relevance')">
            <view class="cell-box-left">
              <image :src="$static('images/icon/relate.png')" class="type-icon" />
              <text>关联业务</text>
            </view>
            <view class="cell-box-right">
              <view class="add-icon">
                <text class="wk wk-plus" />
              </view>
            </view>
          </view>
          <view
            v-if="showRelevance"
            class="section-item-content relevance">
            <relevance-section
              :relevance-data="relevanceData"
              is-add
              @delete="handleToDeleteRelevance" />
          </view>
        </view>

        <view class="section chlid-task-section">
          <view class="cell-box" @click="handleAddChildTask">
            <view class="cell-box-left">
              <image :src="$static('images/icon/sub.png')" class="type-icon" />
              <text>子任务</text>
            </view>
            <view class="cell-box-right">
              <view class="add-icon">
                <text class="wk wk-plus" />
              </view>
            </view>
          </view>
          <view
            v-if="detailData.childTask"
            class="section-item-content child-task">
            <child-task-item
              v-for="(child, index) in detailData.childTask"
              :key="index"
              :item-data="child"
              @status="childTaskStatus"
              @delete="childTaskDelete" />
          </view>
        </view>

        <view class="section file-section">
          <view class="cell-box" @click="handleAddFile">
            <view class="cell-box-left">
              <image :src="$static('images/icon/clip.png')" class="type-icon" />
              <text>附件</text>
            </view>
            <view class="cell-box-right">
              <view class="add-icon">
                <text class="wk wk-plus" />
              </view>
            </view>
          </view>
          <view
            v-if="detailData.file && detailData.file.length > 0"
            class="section-item-content file">
            <wk-file-content
              :list="detailData.file"
              show-delete
              @delete="handleToDeleteFile" />
          </view>
        </view>

        <view
          class="section comment-section">
          <view class="cell-box">
            <view class="cell-box-left">
              <image :src="$static('images/oa/log_comment.png')" class="type-icon" />
              <text>评论</text>
            </view>
          </view>

          <view class="section-item-content">
            <comment-list
              v-if="!$isEmpty(replyList)"
              :reply-list="replyList"
              :show-icon="false"
              @choose="handleCommentChoose" />

            <view v-else class="empty-reply">
              暂无评论，发表第一条评论吧
            </view>
          </view>
        </view>

        <view class="section activity-section">
          <view class="cell-box">
            <view class="cell-box-left">
              <image :src="$static('images/oa/time_arrow.png')" class="type-icon" />
              <text>活动</text>
            </view>
          </view>
          <view class="section-item-content">
            <record-item
              v-for="(v, index) in recordList"
              :key="index"
              :item="v" />
          </view>
        </view>
      </view>

      <add-comment
        ref="comment"
        v-model="content"
        :replay="replayInfo"
        @change-user="changeCommentUser"
        @submit="submitComment" />
    </view>

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        v-if="showEditPop"
        v-model="dialogMsg"
        :title="editPopTitle"
        :placeholder="editPlaceholder || '请输入内容'"
        :required="editPopRequired"
        :required-text="editPopRequiredText"
        mode="input"
        @confirm="handleDialogConfirm" />

      <uni-popup-dialog
        v-else
        :content="dialogMsg"
        type="warning"
        @confirm="handleDialogConfirm" />
    </uni-popup>

    <uni-popup ref="popupPicker" type="picker">
      <wk-date-picker
        v-model="timeValue"
        type="date"
        @select="handleSelectTime" />
    </uni-popup>

    <uni-popup ref="popupOptions">
      <view class="pop-wrapper">
        <view
          v-for="(item, index) in popOptions"
          :key="index"
          class="pop-item"
          @click.stop="handlePopChoose(item)">
          {{ item.label }}
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import * as TaskAPI from 'API/oa/task'
  import {QueryCommentList, SetComment} from 'API/oa/comment'
  import { FileDeleteById } from 'API/file'

  import CommentList from '@/components/base/comment-list.vue'
  import RelevanceSection from '@/components/base/relevance-section.vue'
  import AddComment from '@/components/base/add-comment.vue'
  import ChildTaskItem from './components/childTaskItem.vue'
  import RecordItem from './components/recordItem.vue'

  import moment from 'moment'
  import { deepCopy } from '@/utils/lib.js'
  import WkFile from '@/utils/file.js'

  export default {
    name: 'TaskDetail',
    filters: {
      formatTime(date) {
        if (!date) return ''
        return moment(date).format('YYYY-MM-DD')
      }
    },
    components: {
      CommentList,
      RecordItem,
      RelevanceSection,
      ChildTaskItem,
      AddComment
    },
    data() {
      return {
        guid: null,
        id: null,
        routerQuery: {},
        refreshPage: false,

        detailData: null,
        fileBatchId: null,
        childTaskList: [], // 子任务
        recordList: [], // 操作记录

        replyList: [], // 评论
        replayInfo: null,
        content: '',

        commandList: [
          {label: '删除', value: 'delete', icon: 'wk-bin', noCheck: true}
        ],
        priorityLib: [
          {value: 3, label: '高', color: '#E60000'},
          {value: 2, label: '中', color: '#FFA200'},
          {value: 1, label: '低', color: '#5DBC47'},
          {value: 0, label: '无', color: '#FFFFFF'},
        ],
        popOptions: [],

        dialogMsg: '', // popup内容信息
        dialogConfig: {}, // / popup额外参数
        showEditPop: false, // popup是否显示编辑
        editPopTitle: '', // 编辑标题
        editPlaceholder: '', // 输入框提示信息
        editPopRequired: false, // 输入框是否必填
        editPopRequiredText: '', // 输入框必填验证出错提示信息
        timeValue: null, // 时间选择
        allTime: {}
      }
    },
    computed: {
      endTimeText() {
        if (!this.detailData || !this.detailData.stopTime) return '截止时间'
        return moment(this.detailData.stopTime).format('MM-DD截止')
      },
      priorityObj() {
        if (!this.detailData) return null
        return this.priorityLib.find(o => o.value === this.detailData.priority) || null
      },

      relevanceData() {
        if (!this.detailData) return {}
        return {
          customerList: this.detailData.customerList || [],
          contactsList: this.detailData.contactsList || [],
          businessList: this.detailData.businessList || [],
          contractList: this.detailData.contractList || []
        }
      },
      showRelevance() {
        if (!this.detailData) return false
        return (this.detailData.customerList || []).length > 0 ||
          (this.detailData.contactsList || []).length > 0 ||
          (this.detailData.businessList || []).length > 0 ||
          (this.detailData.contractList || []).length > 0
      }
    },
    created() {
      this.guid = this.$guid()
    },
    onLoad(options) {
      this.routerQuery = options
      this.id = options.id
      if (this.id) {
        this.getDetail()
        this.getCommentList()
        this.getPopOptions()
      }
    },
    onShow() {
      if (this.refreshPage) {
        this.$nextTick(function() {
          this.refreshPage = false
          this.getDetail()
        })
      }
    },
    methods: {
      /**
       * 获取任务详情
       */
      getDetail() {
        TaskAPI.QueryTaskInfo({
          taskId: this.id,
        }).then(res => {
          this.allTime = {
            startTime: res.startTime || '',
            stopTime: res.stopTime || ''
          }
          this.detailData = res
          this.fileBatchId = res.batchId
          this.childTaskList = this.detailData.childTask || []
          this.getRecordList()
        }).catch()
      },

      /**
       * 获取评论列表
       */
      getCommentList() {
        QueryCommentList({
          typeId: this.id,
          type: 1
        }).then(res => {
          this.replyList = res
        }).catch()
      },

      /**
       * 修改记录列表
       */
      getRecordList() {
        TaskAPI.TaskLog({
          taskId: this.id,
        }).then(response => {
          this.recordList = response
        }).catch()
      },

      /**
       * 根据权限筛选出可选关联项
       */
      getPopOptions() {
        const map = {
          customer: this.$auth('crm.customer.index'),
          contacts: this.$auth('crm.contacts.index'),
          business: this.$auth('crm.business.index'),
          contract: this.$auth('crm.contract.index')
        }
        const options = [
          { label: '客户', value: 'customer' },
          { label: '联系人', value: 'contacts' },
          { label: '商机', value: 'business' },
          { label: '合同', value: 'contract' }
        ]
        this.popOptions = options.filter(o => {
          return map[o.value]
        })
      },

      /**
       * 操作
       * @param {String} command
       */
      handleCommand(command) {
        this.showEditPop = false
        const value = command.value || command

        const that = this
        const bridge = getApp().globalData.selectedValBridge

        this.dialogConfig = { command: value }
        switch (value) {
        case 'delete':
          this.dialogMsg = '您确定要删除该任务吗？'
          this.dialogConfig.params = {
            taskId: this.id
          }
          break
        case 'status':
          this.dialogMsg = '你确定要更改任务的状态吗？'
          break
        case 'name':
          this.showEditPop = true
          this.editPopTitle = '任务名称'
          this.editPlaceholder = '请输入任务名称'
          this.editPopRequired = true
          this.editPopRequiredText = '任务名称不能为空'
          this.dialogMsg = this.detailData.name
          break
        case 'description':
          this.showEditPop = true
          this.editPopTitle = '任务描述'
          this.editPlaceholder = '请输入任务描述'
          this.editPopRequired = false
          this.dialogMsg = this.detailData.description
          break
        case 'mainUserId':
          bridge.user = {
            guid: this.guid,
            title: '选择负责人',
            defaultVal: this.detailData.mainUser ? [this.detailData.mainUser] : [],
            maxlength: 1,
            config: {
              checkFn: ({ data }) => {
                if (data.length === 0) {
                  this.$toast('请选择负责人')
                  return false
                }
                if (
                  that.detailData.mainUser &&
                  data[0].userId == that.detailData.mainUser.userId
                ) {
                  this.$toast('已经是负责人啦')
                  return false
                }
                return true
              }
            }
          }
          uni.$on('selected-user', this.selectedUser)
          this.$Router.navigateTo('/pages_common/selectList/user')
          return
        case 'ownerUserId':
          // eslint-disable-next-line no-case-declarations
          const list = this.detailData.ownerUserList || []
          bridge.user = {
            guid: this.guid,
            title: '选择参与人',
            defaultVal: list
          }
          uni.$on('selected-user', this.selectedUser)
          this.$Router.navigateTo('/pages_common/selectList/user')
          return
        case 'startTime':
          this.timeValue = this.detailData.startTime
          this.$refs.popupPicker.open()
          return
        case 'stopTime':
          this.timeValue = this.detailData.stopTime
          this.$refs.popupPicker.open()
          return
        case 'priority':
          bridge.options = {
            guid: this.guid,
            title: '选择优先级',
            list: this.priorityLib,
            defaultVal: this.priorityLib.filter(o => o.value === this.detailData.priority),
            maxlength: 1,
            config: {
              checkFn: ({ data }) => {
                if (data.length === 0) {
                  this.$toast('请选择优先级')
                  return false
                }
                return true
              }
            }
          }
          uni.$on('selected-options', this.selectedOptions)
          this.$Router.navigateTo('/pages_common/selectList/options')
          return
        case 'labelId':
          bridge.options = {
            guid: this.guid,
            title: '选择标签',
            request: TaskAPI.GetLabelList,
            defaultVal: this.detailData.labelList,
            config: {
              labelField: 'name',
              valueField: 'labelId'
            }
          }
          uni.$on('selected-options', this.selectedOptions)
          this.$Router.navigateTo('/pages_common/selectList/options')
          return
        case 'relevance':
          this.$refs.popupOptions.open()
          return
        }
        this.$refs.popup.open()
      },

      /**
       * popup点击确定
       */
      handleDialogConfirm(next, inputValue = null) {
        const value = this.dialogConfig.command
        const params = this.dialogConfig.params
        switch (value) {
        case 'delete':
          this.deleteTask(params)
          break
        case 'status':
          this.updateTask('status', this.detailData.status === 5 ? 1 : 5)
          break
        case 'name':
          this.updateTask('name', inputValue)
          break
        case 'description':
          this.updateTask('description', inputValue)
          break
        case 'deleteFile':
          this.deleteFile(params)
          break
        case 'deleteRelevance':
          // eslint-disable-next-line no-case-declarations
          const data = deepCopy(this.relevanceData)
          data[`${params.type}List`].splice(params.index, 1)
          this.updateTaskRelevance(data)
          break
        case 'deleteChild':
          this.deleteTask(params)
          break
        case 'statusChild':
          this.updateChildStatus(params)
          break
        }
        next()
      },

      /**
       * 选择负责人/参与人
       * @param {Object} data
       */
      selectedUser(data) {
        if (this.guid === data.guid) {
          this.$nextTick(function() {
            const command = this.dialogConfig.command
            if (command === 'mainUserId') {
              this.updateTask(command, data.data[0].userId)
            } else if (command === 'ownerUserId') {
              this.updateTask(command, data.data.map(o => o.userId).join(','))
            }
          })
        }
        uni.$off('selected-user')
      },

      /**
       * 选择开始时间/结束时间
       * @param {Object} date
       * @param {Object} next
       */
      handleSelectTime(date, next) {
        next()
        const field = this.dialogConfig.command
        if (field === 'startTime' &&
          date &&
          this.detailData.stopTime) {
          if (moment(this.detailData.stopTime).isBefore(date)) {
            this.$toast('开始时间不能大于结束时间')
            return
          }
        }
        if (field === 'stopTime' &&
          date &&
          this.detailData.startTime) {
          if (moment(date).isBefore(this.detailData.startTime)) {
            this.$toast('开始时间不能大于结束时间')
            return
          }
        }
        if (field === 'startTime') {
          this.allTime.startTime = date
        } else if (field === 'stopTime') {
          this.allTime.stopTime = date
        }
        this.updateTask(field, date)
      },

      /**
       * 选择标签/优先级
       * @param {Object} data
       */
      selectedOptions(data) {
        if (this.guid === data.guid) {
          const command = this.dialogConfig.command
          if (command === 'labelId') {
            this.updateTask(command, data.data.map(o => o.labelId).join(','))
          } else if (command === 'priority') {
            this.updateTask(command, data.data[0].value)
          }
        }
        uni.$off('selected-options')
      },

      /**
       * 去选择关联项
       * @param {Object} opt
       */
      handlePopChoose(opt) {
        this.$refs.popupOptions.close()
        const data = deepCopy(this.relevanceData[`${opt.value}List`])
        const map = {
          customer: {labelField: 'customerName', valueField: 'customerId', title: '客户'},
          contacts: {labelField: 'name', valueField: 'contactsId', title: '联系人'},
          business: {labelField: 'businessName', valueField: 'businessId', title: '商机'},
          contract: {labelField: 'name', valueField: 'contractId', title: '合同'}
        }
        const bridge = getApp().globalData.selectedValBridge
        bridge[opt.value] = {
          guid: this.guid,
          defaultVal: data.map(o => {
            return {
              [`${opt.value}Id`]: o.id || o[`${opt.value}Id`],
              [map[opt.value].labelField]: o.name || o[map[opt.value].labelField]
            }
          })
        }
        uni.$on('selected-relevance', this.selectedRelevance)
        this.$Router.navigateTo({
          url: '/pages_common/selectList/relevance',
          query: {
            type: opt.value
          }
        })
      },

      /**
       * 选择关联项回调
       * @param {Object} data
       */
      selectedRelevance(data) {
        if (this.guid === data.guid) {
          let relevance = deepCopy(this.relevanceData)
          relevance = {
          ...relevance,
          [`${data.type}List`]: data.data
          }
          this.updateTaskRelevance(relevance)
        }
        uni.$off('selected-relevance')
      },

      /**
       * 删除关联项
       * @param {String} type
       * @param {Number} index
       */
      handleToDeleteRelevance(type, index) {
        this.showEditPop = false
        this.dialogMsg = '您确定要取消关联吗?'
        this.dialogConfig = {
          command: 'deleteRelevance',
          params: {
            type,
            index
          }
        }
        this.$refs.popup.open()
      },

      /**
       * 更新任务的关联业务
       */
      updateTaskRelevance(data) {
        const keys = [
          'customer',
          'contacts',
          'business',
          'contract'
        ]
        const params = {
          taskId: this.id
        }
        keys.forEach(key => {
          params[`${key}Ids`] = data[`${key}List`].map(o => {
            return o.hasOwnProperty('id') ? o.id : o[`${key}Id`]
          }).join(',')
        })
        TaskAPI.TaskRelation(params).then(() => {
          this.$toast('修改成功')
          this.refreshPrev()
          this.getDetail()
        }).catch()
      },

      /**
       * 添加附件
       */
      handleAddFile() {
        const params = {}
        if (this.fileBatchId) {
          params.batchId = this.fileBatchId
        }
        const fileUpload = new WkFile(params)
        fileUpload.choose().then(data => {
          console.log('upload res: ', data)
          const fileList = this.detailData.file.concat(data)
          this.refreshPrev()
          this.$set(this.detailData, 'file', fileList)
        })
      },

      /**
       * 点击删除附件
       * @param {Number} index
       */
      handleToDeleteFile(index) {
        this.showEditPop = false
        this.dialogMsg = '您确定要删除该文件吗?'
        this.dialogConfig = {
          command: 'deleteFile',
          params: index
        }
        this.$refs.popup.open()
      },

      /**
       * 删除附件
       * @param {Object} index
       */
      deleteFile(index) {
        const fileId = this.detailData.file[index].fileId
        FileDeleteById({id: fileId}).then(() => {
          this.detailData.file.splice(index, 1)
          this.getRecordList()
        }).catch()
      },

      /**
       * 添加子任务
       */
      handleAddChildTask() {
        this.$Router.navigateTo({
          url: '/pages_task/add',
          query: {
            pid: this.id
          }
        })
      },

      /**
       * 去修改子任务状态
       * @param {Object} data
       */
      childTaskStatus(data) {
        this.dialogMsg = '您确定要更改该子任务的状态吗？'
        this.dialogConfig = {
          command: 'statusChild',
          params: data
        }
        this.$refs.popup.open()
      },

      /**
       * 修改子任务的状态
       * @param {Object} params
       */
      updateChildStatus(params) {
        TaskAPI.SetWorkChildTaskStatus({
          taskId: params.taskId,
          status: params.status
        }).then(() => {
          this.$toast('修改成功')
          const findIndex = this.detailData.childTask.findIndex(o => o.taskId === params.taskId)
          if (findIndex !== -1) {
            this.detailData.childTask[findIndex].status = params.status
            this.$set(this.detailData, 'childTask', this.detailData.childTask)
          } else {
            this.getDetail()
          }
          this.getRecordList()
        }).catch()
      },

      /**
       * 删除子任务
       * @param {String|Number} taskId
       */
      childTaskDelete(taskId) {
        this.dialogMsg = '您确定要删除该子任务吗？'
        this.dialogConfig = {
          command: 'deleteChild',
          params: {
            taskId: taskId
          }
        }
        this.$refs.popup.open()
      },

      /**
       * 删除任务
       */
      deleteTask(params) {
        TaskAPI.DeleteTask(params).then(() => {
          this.$toast('删除成功')
          if (this.dialogConfig.command === 'deleteChild') {
            this.refreshPrev()
            this.getDetail()
            this.getRecordList()
          } else {
            this.$refreshAndToPrev(this)
          }
        })
      },

      /**
       * 选择回复人
       * @param {Object} user
       */
      handleCommentChoose(user) {
        console.log('user--', user)
        if (this.replayInfo) {
          let str = `回复@${this.replayInfo.user.realname} `
          if (this.content.startsWith(str)) {
            this.content = this.content.replace(str, `回复@${user.user.realname} `)
          } else {
            this.content = `回复@${user.user.realname} ` + this.content
          }
        } else {
          this.content = `回复@${user.user.realname} ` + this.content
        }
        this.replayInfo = user
        this.$refs.comment.focus()
      },
      changeCommentUser(data) {
        this.replayInfo = data
      },

      /**
       * 提交回复
       */
      submitComment() {
        let params = {
          type: 1,
          typeId: this.id,
          content: this.content
        }
        if (this.replayInfo) {
          params.pid = this.replayInfo.userId; // 被回复人的id
          params.mainId = this.replayInfo.mainId != 0 ? this.replayInfo.mainId : this.replayInfo.commentId; // 回复主id
          let str = `回复@${this.replayInfo.user.realname} `
          if (params.content.startsWith(str)) {
            params.content = params.content.replace(str, '')
          }
        }
        if (this.$isEmpty(params.content)) {
          this.$toast('回复内容不能为空')
          return
        }
        console.log('回复：', params)
        SetComment(params).then(() => {
          this.$toast('回复成功')
          this.content = ''
          this.replayInfo = null
          this.refreshPrev()
          this.getCommentList()
          this.getRecordList()
        })
      },

      /**
       * 编辑保存任务基本信息
       * @param {Object} key
       * @param {Object} value
       */
      updateTask(key, value) {
        let params = {}
        if (key === 'startTime' || key === 'stopTime') {
          params = {
            taskId: this.id,
            startTime: this.allTime.startTime.split(' ')[0] || '',
            stopTime: this.allTime.stopTime.split(' ')[0] || ''
          }
        } else {
          params = {
            taskId: this.id,
            [key]: value
          }
        }
        if (key === 'mainUserId') {
          params.userId = value
          delete params.mainUserId
        }
        if (!this.detailData.startTime) {
          this.detailData.startTime = ''
        }
        if (!this.detailData.stopTime) {
          this.detailData.stopTime = ''
        }
        if ((key === 'startTime' || key === 'stopTime') && 
          (this.detailData.startTime.split(' ')[0] ===
            this.allTime.startTime.split(' ')[0]) &&
          this.detailData.stopTime === this.allTime.stopTime) return
        const requestMap = {
          name: TaskAPI.SetWorkTaskTitle,
          description: TaskAPI.SetWorkTaskDescription,
          mainUserId: TaskAPI.SetWorkTaskMainUser,
          ownerUserId: TaskAPI.SetWorkTaskOwnerUser,
          labelId: TaskAPI.SetWorkTaskLabel,
          priority: TaskAPI.SetWorkTaskPriority,
          status: TaskAPI.SetWorkTaskStatus,
          startTime: TaskAPI.SetWorkTaskTime,
          stopTime: TaskAPI.SetWorkTaskTime
        }
        const request = requestMap[key]
        if (!request) return
        request(params).then(() => {
          this.$toast('修改成功')
          this.refreshPrev()
          this.getDetail()
        }).catch(() => {})
      },

      refreshPrev() {
        this.$refreshAndToPrev(this, false)
      }
    }
  }
</script>

<style scoped lang="scss">
.header-top  {
  position: relative;
  width: 100%;
  padding-bottom: 30rpx;
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 160rpx;
  }
  .card {
    position: relative;
    width: calc(100% - 64rpx);
    border-radius: 10rpx;
    background-color: white;
    box-shadow: 0 14rpx 16rpx 0 rgba(28,108,255,0.10);
    padding: 10rpx;
    margin: 0 auto;
  }
}

.main-container {
  flex: 1;
  overflow: hidden;

  .container {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-bottom: 110rpx;

    .header-top {
      .task-name {
        width: 100%;
        font-size: 32rpx;
        padding: 20rpx 30rpx;
        overflow: hidden;
        display: flex;
        align-items: flex-start;
        justify-content: center;;
        .check-box {
          width: 40rpx;
          height: 40rpx;
          border: 1rpx solid #ccc;
          border-radius: 6rpx;
          overflow: hidden;
          margin-right: 25rpx;
          margin-top: 5rpx;
          @include center;
          .icon {
            font-size: 28rpx;
            line-height: 1;
            color: white;
          }
        }
        .text {
          flex: 1;
        }
        &.active {
          .check-box {
            background-color: $theme-color;
            border-color: $theme-color;
          }
          .text {
            text-decoration: line-through;
          }
        }
      }

      .info-cell {
        margin: 20rpx 0;
        @include center;
        .info-cell-item {
          width: 48%;
          @include center;
          .text {
            font-size: $wk-font-medium;
          }
        }
        .avatar, .icon-box {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          margin-right: 15rpx;
        }
        .empty-user {
          border: 1rpx dashed #C0C0C0;
          @include center;
          .wk-plus {
            font-size: $wk-font-base;
            color: $light;
          }
        }
        .icon-box {
          background-color: $theme-color;
          color: white;
          font-size: $wk-font-large;
          @include center;
        }
        .time-box {
          font-size: $wk-font-mini;
          color: $light;
          background-color: #F1F1F1;
          border-radius: 8rpx;
          padding: 5rpx 10rpx;
        }
      }
    }

    .section {
      width: 100%;
      background-color: white;
      padding: 15rpx 36rpx;
      margin-top: 10rpx;
    }

    .task-section {
      border-radius: 20rpx 20rpx 0 0;
      margin-top: 20rpx;
      padding-bottom: 0;

      .task-header {
        font-size: $wk-font-large;
        color: $dark;
        font-weight: 500;
        padding: 0 15rpx 15rpx 15rpx;
        .wk {
          font-weight: bold;
          margin-right: 15rpx;
        }
      }

      .cell {
        border-bottom: 1rpx solid $border-color;
        padding: 15rpx;
        &:last-child {
          border: 0 none;
        }

        .cell-title {
          font-size: $wk-font-base;
          color: $light;
          margin-bottom: 10rpx;
        }
        .cell-body {
          min-height: 45rpx;
          flex-wrap: wrap;
          @include left;
          .tag-item {
            font-size: 24rpx;
            color: white;
            border-radius: 6rpx;
            padding: 5rpx 20rpx;
            margin: 8rpx;
            &:first-child {
              margin-left: 0;
            }
          }
          .avatar, .priority-item {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            margin: 8rpx;
          }
          .priority-item {
            color: white;
            font-size: $wk-font-base;
            @include center;
          }
        }
      }
    }

    .comment-section, .activity-section {
      .cell-box {
        border-bottom: 1rpx solid $border-color;
        padding-bottom: 20rpx;
        margin-bottom: 15rpx;
      }
    }

    .comment-section {
      .cell-box {
        border-bottom: 1rpx solid $border-color;
        padding-bottom: 20rpx;
        margin-bottom: 20rpx;
      }
      .section-item-content {
        .empty-reply {
          width: 100%;
          font-size: $wk-font-sm;
          color: $light;
          text-align: center;
          padding: 50rpx 0 70rpx;
        }
      }
    }

    .cell-box {
      padding: 8rpx 0;
      @include left;
      .cell-box-left {
        flex: 1;
        font-size: $wk-font-medium;
        @include left;
        .type-icon {
          width: 38rpx;
          height: 38rpx;
          margin-right: 15rpx;
        }
      }
      .cell-box-right {
        .add-icon {
          width: 38rpx;
          height: 38rpx;
          background-color: #E1E1E1;
          border-radius: 50%;
          @include center;
          .wk {
            font-size: $wk-font-mini;
            color: white;
          }
        }
      }
    }
  }
}
</style>