thoth-frontend-test/src/views/projectManage/components/workflowAndStatus.vue

<template>
  <el-dialog
    title="拉取望岳状态及工作流"
    :visible.sync="dialogVisible"
    width="33%"
    class="public_task"
    :before-close="close"
  >
    <div class="blueStripe" />
    <div class="Layout_flex_start">
      <div class="el-icon-warning iconSty" />
      <div class="dia-content">
        <div>点击确定按钮，将同步望岳{{ dia_content }}”<span style="color: rgb(230, 162, 60);">{{ titName }}</span> “的状态及工作流到质惠，同步后质惠上的状态及工作流时间将被覆盖，并且无法恢复，请谨慎操作！</div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="danger" @click="requirementSyncDpmWorkflow">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import '@/styles/PublicStyle/index.scss'
import { requirementSyncDpmWorkflow, taskSyncDpmWorkflow } from '@/api/requirement.js'
export default {
  props: {
    visible: { type: Boolean, default: false },
    name: { type: String, required: true },
    dpmrequired: { type: String, required: true }
  },
  data() {
    return {
      dia_content: this.name,
      dialogVisible: false,
      requirementId: Number(this.$route.query.id), // 需求id
      titName: ''
    }
  },
  watch: {
    visible: {
      handler(newV, old) {
        this.dialogVisible = newV
      },
      deep: true,
      immediate: true
    },
    dpmrequired: {
      handler(newV, old) {
        this.titName = newV
      },
      deep: true,
      immediate: true
    }

  },
  methods: {
    async requirementSyncDpmWorkflow() {
      if (this.name === '需求') {
        const res = await requirementSyncDpmWorkflow(this.requirementId)
        if (res.code === 200) {
          this.$emit('update')
        }
      }
      if (this.name === '任务') {
        const res = await taskSyncDpmWorkflow(this.requirementId)
        if (res.code === 200) {
          this.$emit('update')
        }
      }
    },
    close() {
      this.dialogVisible = false
      this.$emit('update')
    }
  }
}
</script>

<style lang="scss" scoped>
.iconSty {
font-size: 40px;
color: #F56C6C;
margin: -24px 10px 0 10px;
}
.dia-content {
  color: #333;
}
</style>