cas_cloud_web/src/views/admin/agent/service/enterprise/update-status.vue

<script setup>
import { ref } from "vue";
import FileUpload from "@/components/FileUpload/index.vue";
import {
  getTechnologyDemandUpdateStatus,
  updateDemandProcess,
} from "@/api/admin/agent/service/technology-demand";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const active = ref(0); /*active step index*/
const updateStatusList = ref([]); /*update status list*/
const route = useRoute();
const router = useRouter();
const cooperationMemoUrl = ref(""); // 合作备忘录
const technicalSolutionUrl = ref(""); // 客户确认技术解决方案
const contractUrl = ref(""); // 签署服务合同（合同额）
const conclusionUrl = ref(""); // 结题
//未结题原因描述
const reason = ref("");

// steps title, description, id
const steps = [
  {
    title: "合作备忘录",
    description: "合作备忘录",
    id: 1,
  },
  {
    title: "客户确认技术解决方案",
    description: "客户确认技术解决方案",
    id: 2,
  },
  {
    title: "签署服务合同（合同额）",
    description: "签署服务合同（合同额）",
    id: 3,
  },
  {
    title: "结题",
    description: "结题",
    id: 4,
  },
  {
    title: "未结题",
    description: "未结题",
    id: 5,
  },
];

const getUpdateStatus = async (demandId) => {
  const resp = await getTechnologyDemandUpdateStatus({
    demandId,
  });
  updateStatusList.value = resp.data.sort((a, b) => a.sort - b.sort);
  const reverseIndex = updateStatusList.value.findLastIndex(
    (item) => item.status === "1"
  );
  console.log(updateStatusList.value.length, reverseIndex);
  active.value = reverseIndex === -1 ? 0 : reverseIndex;
};

const goToStep = (index) => {
  // if (index <= active.value) {
  //   active.value = index;
  // }
  if (
    (active.value === 3 && index === 4) ||
    (active.value === 4 && index === 3)
  ) {
  } else {
    active.value = index;
  }
};
const close = () => {
  router.go(-1);
};
const submit = () => {
  console.log(updateStatusList.value[active.value]);
  updateDemandProcess({
    ...updateStatusList.value[active.value],
    status: "1",
  })
    .then((resp) => {
      ElMessage.success("操作成功");
    })
    .catch(() => {})
    .finally(() => {
      getUpdateStatus(route.query.id);
      // active.value = updateStatusList.value.findIndex((item) => item.status === "1") + 1;
      //   反向从列表中查找index
    });
};

if (route.query.id) {
  getUpdateStatus(route.query.id);
} else {
  router.go(-1);
}
</script>

<template>
  <div class="app-container">
    <h2 class="page-title">需求状态</h2>
    <div style="width: 80%; margin: 0 auto">
      <el-steps :active="active" finish-status="finish" process-status="finish">
        <el-step
          v-for="(item, index) in steps"
          :key="item.id"
          :status="active === 4 && index === 3 ? 'wait' : ''"
          :style="`cursor: ${
            (active === 4 && index === 3) || (active === 3 && index === 4)
              ? 'not-allowed'
              : 'pointer'
          }`"
          :title="item.title"
          @click="goToStep(index)"
        >
          <!--            :status="active === 4 ? 'error' : ''"-->
        </el-step>
      </el-steps>
      <div v-if="updateStatusList.length" class="steps-content">
        <template
          v-for="(item, index) in steps.slice(0, active + 1)"
          :key="item.id"
        >
          <div
            v-if="
              !(index === 3 && updateStatusList[4].status !== '0') &&
              !(index === 4 && updateStatusList[3].status !== '0')
            "
            :class="`step-item ${active === index ? 'active' : ''}`"
          >
            <h3 class="title">{{ index + 1 }}.{{ item.title }}</h3>
            <div class="form-wrap">
              <el-form :model="updateStatusList[0]" label-position="top">
                <el-row v-if="index !== 4" justify="space-between">
                  <el-col :span="12">
                    <el-form-item :label="`上传文件`">
                      <file-upload v-model="updateStatusList[index].files" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      v-if="index === 2 || index === 3"
                      label="金额"
                    >
                      <el-input-number
                        v-model="updateStatusList[index].remark"
                        :controls="false"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item v-else label="未结题原因描述">
                  <el-input
                    v-model="updateStatusList[index].remark"
                    :rows="5"
                    type="textarea"
                  />
                </el-form-item>
              </el-form>
            </div>
            <div v-if="updateStatusList[index].updateTime" class="upload-time">
              <span>上传时间：</span>
              <span>{{ updateStatusList[index].updateTime }}</span>
            </div>
          </div>
        </template>
      </div>
      <div class="steps-action">
        <el-button @click="close">关闭</el-button>
        <el-button
          v-if="
            updateStatusList.length &&
            updateStatusList[3]?.status === '0' &&
            updateStatusList[4]?.status === '0'
          "
          type="primary"
          @click="submit"
          >提交
        </el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-title {
  text-align: center;
}

.steps-content {
  margin-top: 36px;

  .step-item {
    border-radius: 12px;
    //min-height: 240px;
    border-bottom: 1px solid #ebeef5;
    padding: 12px 24px;

    &.active {
      background-color: rgba(0, 255, 127, 0.03);
    }

    .title {
      margin: 0;
      text-align: end;
      font-size: 22px;
      font-weight: 700;
      color: #169bd5;
    }

    .form-wrap {
      display: flex;
      justify-content: space-between;
      align-items: end;

      :deep(.el-form) {
        width: 100%;
      }

      :deep(.el-form-item__label) {
        font-size: 24px;
        font-weight: 700;
      }
    }

    .upload-time {
      text-align: end;
      font-size: 14px;
      color: #909399;
    }
  }
}

.steps-action {
  margin-top: 20px;
  display: flex;
  justify-content: end;
}
</style>