thoth-frontend-test/src/views/projectManage/taskList/dialog/taskDialog.vue

<template>
  <el-dialog :visible.sync="visible" :show="show" class="deleteClassName public_task" title="状态变更" width="30%" :close-on-click-modal="false" :destroy-on-close="true" @close="OnClose()">
    <div class="blueStripe" />
    <div align="center">
      <div style=" margin-bottom: 5%; white-space:nowrap;">{{ name }}</div>
      <div style=" margin: 2% 3%; display: flex; justify-content: space-between; align-items: center; white-space:nowrap;">
        <span>{{ codeName }}：</span>
        <el-date-picker
          v-model="date"
          type="date"
          :clearable="false"
          format="yyyy.MM.dd"
          value-format="yyyy.MM.dd"
          style="width: 100%;"
        />
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="OnClose">取 消</el-button>
      <el-button size="small" type="primary" @click="task_status_uptate(date)">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import '@/styles/PublicStyle/index.scss'
import { taskUpdate, taskGet } from '@/api/taskIndex' // 更新状态接口
export default {
  name: 'TemplateDialog',
  props: {
    show: { type: Boolean, default: false }, // 弹窗展示
    statusName: { type: String, default: null }, // 状态name
    taskId: { type: [String, Number], default: null } // 任务ID
  },
  data() {
    return {
      visible: this.show,
      date: new Date(),
      name: '',
      task_Id: this.taskId,
      codeName: '',
      taskData: {},
      measurementTimeName: '实际提测时间',
      exitTimeName: '实际准出时间',
      onlineTimeName: '实际上线完成时间',
      measurementTime: '请确认提测报告发出后再切换任务状态为已提测！',
      exitTime: '请确认准出报告发出后再切换任务状态为已准出！',
      onlineTime: '请确认所有端或服务均已上线后再切换任务状态为已上线',
      userData: { id: '', ename: localStorage.getItem('username'), name: localStorage.getItem('realname') }
    }
  },
  watch: {
    show: {
      immediate: true,
      handler(show) {
        this.visible = this.show
        const date = new Date()
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const strDate = date.getDate()
        this.date = year + '.' + month + '.' + strDate
      }
    },
    statusName: {
      immediate: true,
      handler(statusName) {
        if (statusName === '已提测') {
          this.name = this.measurementTime
          this.codeName = this.measurementTimeName
        }
        if (statusName === '已准出') {
          this.name = this.exitTime
          this.codeName = this.exitTimeName
        }
        if (statusName === '已上线') {
          this.name = this.onlineTime
          this.codeName = this.onlineTimeName
        }
      }
    }
  },
  created() {
    this.getTaskData()
  },
  methods: {
    getTaskData() {
      taskGet(this.task_Id).then(res => {
        this.taskData = res.data
      })
    },
    OnClose() {
      this.$emit('update:show', false)
      this.$emit('getList')
    },
    task_status_uptate(e) {
      if (this.statusName === '已提测') {
        this.taskData.status = 70
        this.taskData.launchTestRealTime = e
      }
      if (this.statusName === '已准出') {
        this.taskData.status = 90
        this.taskData.testFinishRealTime = e
      }
      if (this.statusName === '已上线') {
        this.taskData.status = 100
        this.taskData.onlineRealTime = e
      }
      const taskInfoDO = this.taskData
      const user = this.userData
      taskUpdate({ taskInfoDO, user }).then(res => {
        if (res.code === 200) {
          this.$emit('update:show', false)
          this.$emit('getList')
          this.$emit('changeStatusAll')
          this.$message({ message: res.msg, type: 'success' })
        }
      })
    }

  }
}
</script>