tall4-pc/src/components/tall/center/ProjectDetail.vue

<template>
  <div class="navbar flex items-center justify-between">
    <div class="project-name">项目名称</div>
    <div class="project-action">
      <img />
      <img @click="toShowMask" />
    </div>
  </div>

  <div class="role-list flex items-center">
    <div class="role-box relative">
      <div class="role-name">角色名称</div>
      <div class="line-box absolute flex justify-center"><div class="line"></div></div>
    </div>
  </div>

  <div class="global">
    <div class="global-box">
      <div class="global-task">任务1</div>
      <div class="global-task">任务1</div>
      <div class="global-task">任务1</div>
      <div class="global-task">任务1</div>
    </div>
  </div>
  <div class="task-list">
    <div class="task-box">
      <div class="task-time flex items-center justify-between">
        <div class="flex items-center">
          <img />
          <span>10日 09:00</span>
        </div>
        <div class="task-action"></div>
      </div>

      <div class="task-info">
        <div>
          <div class="task-card">
            <div class="task-name">任务名</div>
            <div class="task-con">
              <div>
                <a-checkbox><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox>
              </div>
              <div>
                <a-checkbox><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox>
              </div>
              <div>
                <a-checkbox><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox>
              </div>
              <div>
                <a-checkbox><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox>
              </div>
              <div>
                <a-checkbox><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox>
              </div>
            </div>
            <div class="open-icon" @click="openCard">
              <img />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="task-box">
      <div class="task-time flex items-center justify-between">
        <div class="flex items-center">
          <img />
          <span>10日 09:00</span>
        </div>
        <div class="task-action"></div>
      </div>

      <div class="task-info">
        <div>
          <div class="task-card">
            <div class="task-name">任务名</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, watch } from 'vue';
import { useStore } from 'vuex';
// import { findShowRole } from 'apis';

const store = useStore();
// const project = ref(0)
const project = computed(() => store.state.projects.project);
watch(project, (newVal, oldVal) => {
  console.log(newVal.p, oldVal.p);
  // clearTasksData();
  // getGlobalData(); // 查可变日常任务
  // initPlanTasks(); // 处理定期任务
});
console.log('project', project.value.p);

// 设置 初始显示角色信息
// const setInitialRoleId = visibleList => {
//   if (!visibleList || !visibleList.length) return;
//   const index = visibleList.findIndex(item => +item.mine === 1);
//   const currentRole = index > 0 ? visibleList[index] : visibleList[0];
//   // const storageRoleId = uni.getStorageSync('roleId');
//   const currentRoleId = storageRoleId ? storageRoleId : currentRole ? currentRole.id : '';
//   store.commit('role/setRoleId', currentRoleId);
//   // 清空storage
//   // uni.setStorageSync('roleId', '');
// }

// /**
//  * 通过项目id获取角色信息
//  * @param {string} projectId
//  * @param {object} params 提交的参数
//  */
// const getRoles = async params => {
//   try {
//     let data = await findShowRole(params);
//     store.commit('role/setInvisibleRoles', data ? data.invisibleList : []);
//     store.commit('role/setVisibleRoles', data ? data.visibleList : []);
//     setInitialRoleId(data ? data.visibleList : []);
//   } catch (error) {
//     throw new Error(error);
//   }
// }

// // 清除已有的任务数据
// function clearTasksData() {
//   // 清空日常任务的数据
//   // setPermanents([]);
//   // setDailyTasks([]);
//   // // 清空定期任务数据
//   // clearTasks();
//   // 到顶的标志复位
//   // 到底的标志复位
//   // clearEndFlag();
// }

// // 获取可变全局任务
// function getGlobalData() {
//   const { roleId, timeNode, timeUnit, projectId } = this;
//   const param = { roleId, timeNode, timeUnit, projectId };
//   store.dispatch('task/getGlobal', param);
// }
</script>

<style scoped>
.navbar {
  padding: 0 16px;
  height: 44px;
}

.project-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.role-list {
  padding: 0 16px;
  height: 36px;
  border-bottom: 1px solid #cccccc;
}

.role-box {
  height: 36px;
}

.role-name {
  font-size: 14px;
  line-height: 36px;
  font-weight: 600;
  color: #1890ff;
}

.role-box .line-box {
  width: 100%;
  bottom: 0;
}

.line-box .line {
  width: 16px;
  height: 2px;
  background-color: #1890ff;
}

.global {
  padding: 16px;
}

.global-box {
  border: 1px solid #cccccc;
  border-radius: 10px;
  padding: 12px 16px;
}

.global-task {
  padding: 8px 0;
}

.task-list {
  padding: 0 16px;
}

.task-box {
}

.task-time {
  height: 32px;
}

.task-time img {
  width: 23px;
  height: 23px;
  margin-right: 16px;
}

.task-time span {
  font-size: 14px;
  color: #595959;
}

.task-info {
  margin: 8px 0;
  padding-left: 11px;
}

.task-info > div {
  padding-left: 27px;
  border-left: 1px solid #d2d2d2;
}

.task-info .task-card {
  padding: 16px;
  border-radius: 8px;
  -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
}

.task-con {
  margin-top: 16px;
}

.task-con > div {
  height: 30px;
}

.child-project-name {
  color: #607d8b;
}
</style>