CKQ/src/views/goaf/checkTask/manage/CheckTask.vue

<template>
  <el-drawer
    :title="title"
    :modal-append-to-body="false"
    :modal="false"
    :wrapper-closable="false"
    size="35%"
    :visible.sync="dialogVisible"
  >
    <div class="content-container">
      <el-form ref="ruleForm" :model="formData" :rules="rules" label-position="right" label-width="120px">
        <el-form-item label="任务名称" prop="taskTitle">
          <el-input v-model="formData.taskTitle" />
        </el-form-item>
        <el-form-item label="执行人员">
          <user-selector :default-val="formData.handleAccountId" @setUserInfo="handleUserSelect" />
        </el-form-item>
        <el-form-item label="检查表" prop="checklistId">
          <el-select v-model="formData.checklistId" style="width: 100%" filterable placeholder="检查表">
            <el-option
              v-for="item in checklist"
              :key="item.checklistId"
              :label="item.checklistTitle"
              :value="item.checklistId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="expectedStartDate">
          <el-date-picker
            v-model="formData.expectedStartDate"
            type="date"
            placeholder="开始时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="结束时间" prop="expectedEndDate">
          <el-date-picker
            v-model="formData.expectedEndDate"
            type="date"
            placeholder="结束时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="任务说明" prop="taskDesc">
          <el-input v-model="formData.taskDesc" type="textarea" :rows="10" />
        </el-form-item>
      </el-form>

      <div class="btn-group">
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        <el-button class="cancel-btn" @click="dialogVisible = false">取 消</el-button>
      </div>
    </div>

  </el-drawer>
</template>

<script>
import { ACTION_ADD, ACTION_UPDATE } from '@/utils/actionType'
import { createCheckTask, updateCheckTask } from '@/api/goaf/task'
import UserSelector from '@/components/UserSelector/index'
import { getChecklist } from '@/api/goaf/check'
export default {
  components: { UserSelector },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      checklist: [],
      formData: {
        'taskId': undefined,
        'ocId': undefined,
        'goafId': undefined,
        'jobId': undefined,
        'checkDefId': undefined,
        'checklistId': undefined,
        'taskTitle': '',
        'taskDesc': '',
        'expectedStartDate': '',
        'expectedEndDate': '',
        'handleAccountId': undefined,
        'handleAccountName': '',
        'handlePositionId': undefined,
        'handlePositionName': '',
        'handleGroupId': undefined,
        'handleGroupName': '',
        'status': 0
      },
      rules: {
        taskTitle: [
          { required: true, message: '请输入任务名称', trigger: 'blur' }
        ],
        checklistId: [
          { required: true, message: '请选择清单', trigger: 'blur' }
        ],
        handleAccountId: [
          { required: true, message: '请选择执行人', trigger: 'blur' }
        ],
        expectedStartDate: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        expectedEndDate: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ]
      },
      viewData: {},
      actionType: '',
      taskCatList: [],
      userList: [],
      checkList: [],
      userSelObj: undefined
    }
  },
  mounted() {
    getChecklist().then((res) => {
      this.checklist = res.data
    })
  },
  methods: {
    // 选择执行人员
    handleUserSelect(obj) {
      this.formData.handleAccountId = obj.accountId
      this.formData.handleAccountName = obj.accountName
      this.formData.handlePositionId = obj.positionId
      this.formData.handlePositionName = obj.positionName
      this.formData.handleGroupId = obj.groupId
      this.formData.handleGroupName = obj.groupName
    },

    // Show Add Dialog
    showAddModel() {
      this.resetFormData()
      this.actionType = ACTION_ADD
      this.dialogVisible = true
    },

    // Show Edit Dialog
    showEditModel(data) {
      this.resetFormData()
      this.actionType = ACTION_UPDATE
      this.dialogVisible = true
      this.formData = data
      this.formData.handleAccountId = parseFloat(data.handleAccountId)
    },

    // Reset Form Data
    resetFormData() {
      this.formData = {
        'taskId': undefined,
        'ocId': undefined,
        'goafId': undefined,
        'jobId': undefined,
        'checkDefId': undefined,
        'checklistId': undefined,
        'taskTitle': '',
        'taskDesc': '',
        'expectedStartDate': '',
        'expectedEndDate': '',
        'handleAccountId': undefined,
        'handleAccountName': '',
        'handlePositionId': undefined,
        'handlePositionName': '',
        'handleGroupId': undefined,
        'handleGroupName': '',
        'status': 0
      }
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          switch (this.actionType) {
            case ACTION_ADD:
              // this.formData.goafId = 439020
              // this.formData.jobId = 116
              // this.formData.checkDefId = 682
              createCheckTask(this.formData).then((resp) => {
                const { msg } = resp
                this.dialogVisible = false
                this.$message.success(msg)
                this.formSuccess()
              })
              break
            case ACTION_UPDATE:
              updateCheckTask(this.formData).then((resp) => {
                const { code, msg } = resp
                if (code === 0) {
                  this.dialogVisible = false
                  this.$message.success(msg)
                  this.formSuccess()
                } else {
                  this.$message.error(msg)
                }
              }).catch((error) => {
                console.log(error)
              })
              break
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    formSuccess() {
      this.$emit('formSuccess')
    },
    resetFormField(formName) {
      this.$refs[formName].resetFields()
    }

  }
}
</script>

<style lang="scss">
</style>
<style lang="scss" scoped>
  .task-info-component {
      margin: 15px;
      position: relative;
      height: calc(100% - 15px);

      .btn-group {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;

          .el-button {
              width: 100%;
              margin: 0 0 15px;
          }

          .cancel-btn {
              background: #004F7B;
              border-color: #004F7B;
              color: #FFF;

              &:hover {
                  background: #026197;
                  border-color: #026197;
              }
          }
      }

  }

</style>