YZProjectCloud/yanzhu-ui-vue3/src/views/manage/schedule/indexViews.vue

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="项目名称" prop="projectName" v-if="!userStore.currentPrjId">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入项目名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="计划名称" prop="taskName">
        <el-input
          v-model="queryParams.taskName"
          placeholder="请输入计划名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="计划状态" prop="activeTags">
        <el-select
          v-model="queryParams.activeTags"
          placeholder="请选择计划状态"
          clearable
        >
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <div class="flex gap-2">
        <el-tag type="success" effect="dark">正常完工</el-tag>
        <el-tag type="warning" effect="dark">延期完工</el-tag>
        <el-tag type="primary" effect="dark">正在进行</el-tag>
      </div>
    </el-row>

    <el-table
      v-loading="loading"
      :data="planList"
      row-key="taskId"
      default-expand-all
    >
      <el-table-column label="任务名称" align="left" prop="taskName" />
      <el-table-column label="任务工期" align="center" prop="taskDuation" width="120">
        <template #default="scope">{{ scope.row.taskDuation }}d</template>
      </el-table-column>
      <el-table-column
        label="计划开始时间"
        align="center"
        prop="planStartDate"
        width="120"
      >
        <template #default="scope">
          <span>{{ scope.row.planStartDate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="计划结束时间"
        align="center"
        prop="planFinishDate"
        width="120"
      >
        <template #default="scope">
          <span>{{ scope.row.planFinishDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进度开始时间" align="center" prop="startDate" width="120">
        <template #default="scope">
          <span>{{ scope.row.startDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进度结束时间" align="center" prop="finishDate" width="120">
        <template #default="scope">
          <span>{{ scope.row.finishDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="延期天数" align="center" width="120" />
      <el-table-column label="完成进度" align="center" prop="operator" width="250">
        <template #default="scope">
          <el-progress
            v-if="scope.row.Progress==0"
            :percentage="Number(scope.row.scheduleNode)"
            :stroke-width="15"
            :text-inside="true"
          />
          <el-progress
            v-if="scope.row.Progress==-2"
            :percentage="Number(scope.row.scheduleNode)"
            :stroke-width="15"
            status="exception"
            :text-inside="true"
            :indeterminate="true"
          />
          <el-progress
            v-if="scope.row.Progress==-1"
            :percentage="Number(scope.row.scheduleNode)"
            :stroke-width="15"
            status="warning"
            :text-inside="true"
          />
          <el-progress
            v-if="scope.row.Progress==1"
            :percentage="Number(scope.row.scheduleNode)"
            :stroke-width="15"
            status="success"
            :text-inside="true"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="Plan">
import { listPlan } from "@/api/manage/plan";
import useUserStore from "@/store/modules/user";

const { proxy } = getCurrentInstance();

const userStore = useUserStore();
const planList = ref([]);
const loading = ref(true);
const showSearch = ref(true);

const data = reactive({
  queryParams: {
    comid: null,
    projectId: null,
    activeTags: "",
  },
  compId: "",
  projectId: "",
});

const { queryParams } = toRefs(data);

function buildTree(all, id) {
  let tmps = all.filter((d) => d.parentId == id);
  if (tmps.length > 0) {
    tmps.forEach((it) => {
      it.children = buildTree(all, it.taskId);
    });
  }
  return tmps;
}

/** 查询计划管理列表 */
function getList() {
  if (!queryParams.value.projectId) {
    planList.value = [];
    proxy.$modal.msgWarning("请切换到项目数据！！！");
    loading.value = false;
    return;
  }
  loading.value = true;
  listPlan(queryParams.value).then((response) => {
    let tmps = response.data || [];
    tmps.forEach(tmp => {
        tmp.Progress = compareDate(tmp.planFinishDate,tmp.finishDate);
    })
    let objs = buildTree(tmps, 0);
    planList.value = objs;
    loading.value = false;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

function compareDate(planFinishDate,finishDate) {
  let _planFinishDate = new Date(planFinishDate).getTime();
  let _finishDate = new Date(finishDate).getTime();
  if(planFinishDate && !finishDate){
    let date = new Date().getTime();
    if(_planFinishDate>date){
      return -2;
    }else{
      return 0;
    }
  }else{
    if(_planFinishDate>_finishDate){
      return 1;
    }else{
      return -1;
    }
  }
}

data.compId = userStore.currentComId;
data.projectId = userStore.currentPrjId;
queryParams.value.projectId = data.projectId;
getList();
</script>
<style lang="scss" scope>
.gap-2 {
  position: absolute;
  right: 0px;
  z-index: 99;
  margin-top: -33px;
  .el-tag--default {
    margin: 2px 10px;
    .el-tag__content {
      font-weight: 800;
      padding: 0 20px;
    }
  }
}
.el-progress-bar__outer{
    background-color: #453838 !important;
}
</style>