kd-aiot-frontend-pro/src/views/project-manage/task-manage/components/task-form.vue

<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      class="el-form-box"
      label-width="120px"
    >
      <el-row>
        <el-col :span="8">
          <!-- prop="projectId"         -->
          <el-form-item label="关联项目">
            <ele-tree-select
              :disabled="dialogType == 'view'"
              ref="projectTreeSelect"
              clearable
              filterable
              :data="projectList"
              v-model="form.projectId"
              childrenKey="sonTreeList"
              disabledKey="isChoice"
              valueKey="id"
              labelKey="name"
              placeholder="请选择"
              @change="changeProject"
              default-expand-all
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关联项目阶段" prop="projectStageId">
            <el-select
              v-model="form.projectStageId"
              :disabled="dialogType == 'view'"
              style="width: 100%"
              @change="changeProjectStage"
              clearable
            >
              <el-option
                v-for="item in projectStageList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关联项目BOM" prop="projectBomId">
            <ele-tree-select
              :disabled="dialogType == 'view'"
              clearable
              ref="projectRef"
              filterable
              :data="projectBOMList"
              v-model="form.projectBomId"
              @change="changeProjectBom"
              childrenKey="children"
              valueKey="id"
              labelKey="name"
              placeholder="请选择"
              default-expand-all
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <!--          <el-form-item label="关联计划" prop="targetPlanId">-->
          <!--            <el-select v-model="form.targetPlanId" :disabled="dialogType=='view'" style="width: 100%"-->
          <!--                       @change="changeTargetPlan" clearable>-->
          <!--              <el-option v-for="item in targetPlanList" :label="item.name" :value="item.id"-->
          <!--                         :key="item.id"></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <el-form-item label="关联计划">
            <el-row>
              <el-col :span="24">
                <ele-tree-select
                  :disabled="dialogType == 'view'"
                  clearable
                  ref="planTreeRef"
                  filterable
                  :data="targetPlanList"
                  v-model="form.targetPlanId"
                  childrenKey="children"
                  @change="changeTargetPlan"
                  node-key="id"
                  valueKey="id"
                  labelKey="name"
                  placeholder="请选择"
                  default-expand-all
                />
              </el-col>
              <!--              <el-col :span="1">-->

              <!--                <el-popover-->
              <!--                  placement="right"-->
              <!--                  v-model="popoverFlag"-->
              <!--                  width="1000"-->
              <!--                  trigger="click">-->
              <!--                  <headerTitle title="项目信息"></headerTitle>-->
              <!--                  <project-form ref="projectForm" dialog-type="view"></project-form>-->
              <!--                  <el-button :disabled="!form.projectId" type="text" slot="reference"-->
              <!--                             @click="getProjectInfo(form.projectId)">详情-->
              <!--                  </el-button>-->
              <!--                </el-popover>-->

              <!--              </el-col>-->
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关联计划节点" prop="planStageId">
            <el-select
              v-model="form.planStageId"
              :disabled="dialogType == 'view'"
              style="width: 100%"
              @change="changePlanStage"
              clearable
            >
              <el-option
                v-for="item in planStageList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关联任务" prop="taskId">
            <ele-tree-select
              :disabled="dialogType == 'view'"
              ref="taskTreeSelect"
              clearable
              filterable
              :data="taskList"
              v-model="form.taskId"
              childrenKey="sonTreeList"
              disabledKey="isChoice"
              valueKey="id"
              labelKey="name"
              placeholder="请选择"
              default-expand-all
              @change="changeTask"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="前置任务">
            <el-select
              v-model="form.beforeTaskId"
              :disabled="dialogType == 'view'"
              style="width: 100%"
              clearable
            >
              <el-option
                v-for="item in beforeTaskList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  projectsBomGetTreeDataAPI,
  projectsSelectTreeDataAPI
} from '@/api/project-manage';
import PersonSelect from '@/components/CommomSelect/person-select.vue';
import { getBeforeTaskListAPI } from '@/api/project-manage/task';
import { getTargetPlanTreeAPI } from '@/api/project-manage/plan';

export default {
  name: 'task-form',
  components: { PersonSelect },
  props: {
    dialogType: {
      type: String,
      default: ''
    },
    dialogForm: {
      type: Object,
      default: () => {
        return {};
      }
    },
    deptList: {
      type: Array,
      default() {
        return [];
      }
    },
    userList: {
      type: Array,
      default() {
        return [];
      }
    },
    deptTreeList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  watch: {
    dialogForm: {
      handler(val) {
        for (const key in this.form) {
          if (key == 'relationType') {
            this.form[key] = this.dialogForm[key];
          } else {
            this.form[key] = this.dialogForm[key] || this.form[key];
          }
        }
        this.$nextTick(async () => {
          await this.getUserList(this.dialogForm.responsibleDeptId);
          //通过项目去查
          if (this.dialogForm.projectId) {
            await this.getBeforeTaskList(this.dialogForm.projectId);
            //查项目阶段
            await this.getProjectsSelectTreeData(
              {
                treeType: 0,
                id: this.dialogForm.projectId,
                isTask: 0,
                isPlan: 0
              },
              'projectStageList'
            );
            //查项目BOM
            this.projectBOMList = await projectsBomGetTreeDataAPI(
              this.dialogForm.projectId
            );
            //查项目阶段关联的计划
            let params = {
              projectId: this.form.projectId,
              projectBomId: this.form.projectBomId,
              projectStageId: this.form.projectStageId,
              processStatus: [2],
              status: [0, 1]
            };
            this.targetPlanList = await this.getTargetPlanTree(params);
            if (!this.dialogForm.projectStageId) {
              //查项目关联的计划
              // await this.getProjectsSelectTreeData({
              //   treeType: 0,
              //   id: this.dialogForm.projectId,
              //   isTask: 0,
              //   isPlan: 1
              // }, 'targetPlanList')
              //查项目关联的任务
              await this.getProjectsSelectTreeData(
                {
                  treeType: 0,
                  id: this.dialogForm.projectId,
                  isTask: 1,
                  isPlan: 0
                },
                'taskList'
              );
            }
          }
          //通过项目阶段去查
          if (this.dialogForm.projectStageId) {
            // await this.getProjectsSelectTreeData({
            //   treeType: 1,
            //   id: this.dialogForm.projectStageId,
            //   isTask: 0,
            //   isPlan: 1
            // }, 'targetPlanList')
            if (!this.dialogForm.targetPlanId) {
              //查项目阶段关联的任务
              await this.getProjectsSelectTreeData(
                {
                  treeType: 1,
                  id: this.dialogForm.projectStageId,
                  isTask: 1,
                  isPlan: 0
                },
                'taskList'
              );
            }
          }
          //通过计划去查
          if (this.dialogForm.targetPlanId) {
            //查计划关联下的节点
            await this.getProjectsSelectTreeData(
              {
                treeType: 2,
                id: this.dialogForm.targetPlanId,
                isTask: 0,
                isPlan: 0
              },
              'planStageList'
            );
            if (!this.dialogForm.planStageId) {
              //查计划关联下的任务
              await this.getProjectsSelectTreeData(
                {
                  treeType: 2,
                  id: this.dialogForm.targetPlanId,
                  isTask: 1,
                  isPlan: 0
                },
                'taskList'
              );
            }
          }
          //通过计划节点去查
          if (this.dialogForm.planStageId) {
            //查计划关联下的任务
            await this.getProjectsSelectTreeData(
              {
                treeType: 3,
                id: this.dialogForm.planStageId,
                isTask: 1,
                isPlan: 0
              },
              'taskList'
            );
          }
        });
      },
      deep: true
    }
  },
  data() {
    return {
      form: {
        beforeTaskId: '',
        projectId: '',
        projectStageId: '',
        projectBomId: '',
        targetPlanId: '',
        planStageId: '',
        taskId: '',
        relationType: '',
        relationId: '',
        relationName: ''
      },
      projectList: [],
      projectStageList: [],
      targetPlanList: [],
      planStageList: [],
      projectBOMList: [],
      taskList: [],
      beforeTaskList: [],
      rules: {
        type: { required: true, message: '请选择任务类型', trigger: 'change' },
        name: { required: true, message: '请输入任务名称', trigger: 'blur' },
        planStartDate: {
          required: true,
          message: '请选择计划开始日期',
          trigger: 'change'
        },
        projectId: {
          required: true,
          message: '请选择关联项目',
          trigger: ['change', 'blur']
        },
        responsibleDeptId: {
          required: true,
          message: '请选择负责部门',
          trigger: 'change'
        },
        cost: {
          required: true,
          message: '请输入费用',
          trigger: ['change', 'blur']
        }
      }
    };
  },
  async created() {
    this.targetPlanList = await this.getTargetPlanTree({
      projectId: '',
      processStatus: [2],
      status: [0, 1]
    });
    //查项目
    await this.getProjectsSelectTreeData(
      { treeType: 0, isTask: 0, isPlan: 0 },
      'projectList'
    );
  },

  methods: {
    //关联项目改变
    async changeProject(val) {
      //项目阶段
      this.projectStageList = [];
      //项目BOM
      this.projectBOMList = [];
      //项目关联计划
      this.targetPlanList = [];
      //项目关联计划下的节点
      this.planStageList = [];
      //项目关联的任务
      this.taskList = [];
      //前置任务
      this.beforeTaskList = [];

      this.form.projectStageId = null;
      this.form.targetPlanId = null;
      this.form.planStageId = null;
      this.form.taskId = null;
      this.form.beforeTaskId = null;
      this.form.projectBomId = null;
      this.$emit('changeProject', val);
      //查计划
      let params = {
        projectId: val,
        projectBomId: this.form.projectBomId,
        projectStageId: this.form.projectStageId,
        processStatus: [2],
        status: [0, 1]
      };
      this.targetPlanList = await this.getTargetPlanTree(params);
      if (!val) return;
      //查前置任务
      await this.getBeforeTaskList(val);

      // let node = this.$refs.projectTreeSelect?.$refs?.tree?.getCurrentNode() || {};
      this.setTaskInfo(0, val, '项目');
      //查项目阶段
      await this.getProjectsSelectTreeData(
        { treeType: 0, id: val, isTask: 0, isPlan: 0 },
        'projectStageList'
      );
      //查项目关联的计划
      // await this.getProjectsSelectTreeData({treeType: 0, id: val, isTask: 0, isPlan: 1}, 'targetPlanList')
      //查项目关联的任务
      await this.getProjectsSelectTreeData(
        { treeType: 0, id: val, isTask: 1, isPlan: 0 },
        'taskList'
      );
      //查项目关联的BOM
      this.projectBOMList = await projectsBomGetTreeDataAPI(val);
      if (val) {
        this.$refs.form.clearValidate('projectId');
      } else {
        this.$refs.form.validateField('projectId');
      }
    },
    //关联项目阶段改变
    async changeProjectStage(val) {
      //项目关联计划
      this.targetPlanList = [];
      //项目关联计划下的节点
      this.planStageList = [];
      //项目关联的任务
      this.taskList = [];

      this.form.targetPlanId = null;
      this.form.planStageId = null;
      this.form.taskId = null;
      let params = {
        projectId: this.form.projectId,
        projectBomId: this.form.projectBomId,
        projectStageId: val,
        processStatus: [2],
        status: [0, 1]
      };
      this.targetPlanList = await this.getTargetPlanTree(params);
      if (!val) {
        if (this.form.projectId) {
          await this.changeProject(this.form.projectId);
        }
        return;
      }
      this.setTaskInfo(1, val, '项目阶段');
      //查项目阶段关联的计划
      // await this.getProjectsSelectTreeData({treeType: 1, id: val, isTask: 0, isPlan: 1}, 'targetPlanList')
      //查项目阶段关联的任务
      await this.getProjectsSelectTreeData(
        { treeType: 1, id: val, isTask: 1, isPlan: 0 },
        'taskList'
      );
    },
    //关联项目BOM改变
    async changeProjectBom(val) {
      //项目关联计划
      this.targetPlanList = [];
      //项目关联计划下的节点
      this.planStageList = [];
      //项目关联的任务
      this.taskList = [];

      this.form.targetPlanId = null;
      this.form.planStageId = null;
      this.form.taskId = null;
      let params = {
        projectId: this.form.projectId,
        projectBomId: val,
        projectStageId: this.form.projectStageId,
        processStatus: [2],
        status: [0, 1]
      };
      this.targetPlanList = await this.getTargetPlanTree(params);
      if (!val) {
        if (this.form.projectId) {
          await this.changeProject(this.form.projectId);
        }
        return;
      }
      this.setTaskInfo(5, val, '项目BOM');
      //查项目BOM关联的计划
      // await this.getProjectsSelectTreeData({treeType: 1, id: val, isTask: 0, isPlan: 1}, 'targetPlanList')
      //查项目BOM关联的任务
      await this.getProjectsSelectTreeData(
        { treeType: 1, id: val, isTask: 1, isPlan: 0 },
        'taskList'
      );
    },
    //关联计划改变
    async changeTargetPlan(val) {
      //项目关联计划下的节点
      this.planStageList = [];
      //项目关联的任务
      this.taskList = [];

      this.form.planStageId = null;
      this.form.taskId = null;
      if (!val) {
        if (this.form.projectStageId) {
          await this.changeProjectStage(this.form.projectStageId);
        } else if (this.form.projectId) {
          await this.changeProject(this.form.projectId);
        }
        return;
      }

      let nodeData =
        this.$refs?.planTreeRef?.$refs?.tree?.getCurrentNode() || {};
      await this.getProjectsSelectTreeData(
        {
          treeType: 0,
          id: nodeData.projectId,
          isTask: 0,
          isPlan: 0
        },
        'projectStageList'
      );
      this.projectBOMList = await projectsBomGetTreeDataAPI(nodeData.projectId);
      this.form.projectId = nodeData.projectId;
      this.form.projectBomId = nodeData.projectBomId;
      this.form.projectStageId = nodeData.projectStageId;
      this.setTaskInfo(2, val, '计划');
      this.$emit('changeProject', this.form.projectId);
      //查项目关联的计划下的节点
      await this.getProjectsSelectTreeData(
        { treeType: 2, id: val, isTask: 0, isPlan: 0 },
        'planStageList'
      );
      //查项目关联的计划的任务
      await this.getProjectsSelectTreeData(
        { treeType: 2, id: val, isTask: 1, isPlan: 0 },
        'taskList'
      );
    },
    //关联计划节点改变
    async changePlanStage(val) {
      //项目关联的任务
      this.taskList = [];
      this.form.taskId = null;
      if (!val) {
        if (this.form.targetPlanId) {
          await this.changeTargetPlan(this.form.targetPlanId);
        } else if (this.form.projectStageId) {
          await this.changeProjectStage(this.form.projectStageId);
        } else if (this.form.projectId) {
          await this.changeProject(this.form.projectId);
        }
        return;
      }
      this.setTaskInfo(3, val, '计划节点');
      //查项目关联的任务
      await this.getProjectsSelectTreeData(
        { treeType: 3, id: val, isTask: 1, isPlan: 0 },
        'taskList'
      );
    },
    //关联任务改变
    async changeTask(val) {
      if (!val) {
        if (this.form.planStageId) {
          this.setTaskInfo(3, this.form.planStageId, '计划节点');
        } else if (this.form.targetPlanId) {
          this.setTaskInfo(2, this.form.targetPlanId, '计划');
        } else if (this.form.projectStageId) {
          this.setTaskInfo(1, this.form.projectStageId, '项目阶段');
        } else if (this.form.projectBomId) {
          this.setTaskInfo(5, this.form.projectBomId, '项目Bom');
        } else if (this.form.projectId) {
          this.setTaskInfo(0, this.form.projectId, '项目');
        }
        return;
      }
      this.setTaskInfo(4, val, '任务');
    },
    //设置任务类型
    setTaskInfo(type, id, name) {
      this.form.relationType = type;
      this.form.relationId = id;
      this.form.relationName = name;
    },
    //查项目关联信息集合
    async getProjectsSelectTreeData(params, listName) {
      params.ifFilter = this.dialogType == 'view' ? '0' : '1';
      this[listName] = await projectsSelectTreeDataAPI(params);
    },
    async getBeforeTaskList(val) {
      this.beforeTaskList = await getBeforeTaskListAPI(val);
    },
    // 获取人员数据
    getUserList(groupId) {
      if (groupId) {
        this.$refs.directorRef.getList({ groupId });
      }
    },
    personChange(val, info) {
      this.form.responsibleUserName = info.name;
    },
    async getTargetPlanTree(data = {}) {
      return await getTargetPlanTreeAPI(data);
    },
    validForm() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            this.$message.warning('有必填项未填，请检查');
            reject('有必填项未填，请检查');
          } else {
            resolve(this.form);
          }
        });
      });
    }
  }
};
</script>


<style scoped lang="scss">
</style>