forked from TALL/tall3-pc-keti
13 changed files with 622 additions and 431 deletions
@ -0,0 +1,68 @@ |
|||||
|
<template> |
||||
|
<div class="global"> |
||||
|
<div class="global-box" v-if="permanents && permanents.length > 0"> |
||||
|
<div class="global-task cursor-pointer" v-for="(item, index) in permanents" :key="index" @click="toDetail(item)"> |
||||
|
<template v-for="v in item.plugins"> |
||||
|
<template v-if="v[0].pluginId == 1">{{ item.name }}</template> |
||||
|
</template> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { computed, watch } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import { getPermanent } from 'apis'; |
||||
|
|
||||
|
const store = useStore(); |
||||
|
const project = computed(() => store.state.projects.project); // 项目信息 |
||||
|
const roleId = computed(() => store.state.role.roleId); // 当前角色 |
||||
|
const permanents = computed(() => store.state.task.permanents); // 日常任务 |
||||
|
const sessionPermanents = sessionStorage.getItem('permanents'); // 日常任务缓存 |
||||
|
|
||||
|
if (sessionPermanents) { |
||||
|
const arr = JSON.parse(sessionPermanents); |
||||
|
store.commit('task/setPermanents', arr); |
||||
|
} |
||||
|
|
||||
|
watch([project, roleId], async () => { |
||||
|
if (roleId.value) { |
||||
|
await getPermanentData(roleId.value); // 根据角色查找永久的日常任务 |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 日常任务 |
||||
|
async function getPermanentData(id) { |
||||
|
const params = { param: { roleId: id } }; |
||||
|
try { |
||||
|
const data = await getPermanent(params); |
||||
|
store.commit('task/setPermanents', data); |
||||
|
const globalHeight = data.length * 38 + 26; |
||||
|
store.commit('task/setGlobalHeight', globalHeight); |
||||
|
} catch (error) { |
||||
|
throw new Error(error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function toDetail(item) { |
||||
|
store.commit('task/setTaskDetail', item); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.global { |
||||
|
padding: 16px; |
||||
|
} |
||||
|
|
||||
|
.global-box { |
||||
|
border: 1px solid #cccccc; |
||||
|
border-radius: 10px; |
||||
|
padding: 12px 16px; |
||||
|
} |
||||
|
|
||||
|
.global-task { |
||||
|
padding: 8px 0; |
||||
|
line-height: 22px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,57 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!-- 项目标题 --> |
||||
|
<div class="navbar flex items-center justify-between"> |
||||
|
<div class="project-name">{{ project.name }}</div> |
||||
|
<div class="project-action"> |
||||
|
<ReloadOutlined :style="{ fontSize: 20 + 'px' }" /> |
||||
|
<MoreOutlined :style="{ fontSize: 20 + 'px' }" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 角色 --> |
||||
|
<Roles /> |
||||
|
|
||||
|
<!-- 日常任务 --> |
||||
|
<Global /> |
||||
|
|
||||
|
<!-- 定期任务 --> |
||||
|
<RegularTask /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { computed } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import { ReloadOutlined, MoreOutlined } from '@ant-design/icons-vue'; |
||||
|
import Roles from './Roles.vue'; // 角色 |
||||
|
import Global from './Global.vue'; // 日常任务面板 |
||||
|
import RegularTask from './RegularTask.vue'; // 定期任务 |
||||
|
|
||||
|
const store = useStore(); |
||||
|
const project = computed(() => store.state.projects.project); // 项目信息 |
||||
|
const sessionProject = sessionStorage.getItem('project'); // 项目信息 |
||||
|
|
||||
|
if (sessionProject) { |
||||
|
const projectInfo = JSON.parse(sessionProject); |
||||
|
store.commit('projects/setProject', projectInfo); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.navbar { |
||||
|
padding: 0 16px; |
||||
|
height: 44px; |
||||
|
} |
||||
|
|
||||
|
.project-name { |
||||
|
font-size: 16px; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.project-action .anticon { |
||||
|
margin-left: 16px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
</style> |
||||
@ -1,343 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 项目标题 --> |
|
||||
<div class="navbar flex items-center justify-between"> |
|
||||
<div class="project-name">{{ project.name }}</div> |
|
||||
<div class="project-action"> |
|
||||
<ReloadOutlined :style="{ fontSize: 20 + 'px' }" /> |
|
||||
<MoreOutlined :style="{ fontSize: 20 + 'px' }" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 角色 --> |
|
||||
<div class="role-list flex items-center"> |
|
||||
<div class="role-box relative" v-for="(item, index) in roles" :key="index"> |
|
||||
<div class="role-name" :class="{ mine: item.mine === 1 && currRoleId === item.id }">{{ item.name }}</div> |
|
||||
<div class="line-box absolute flex justify-center" v-if="item.mine === 1 && currRoleId === item.id"><div class="line"></div></div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 日常任务 --> |
|
||||
<div class="global"> |
|
||||
<div class="global-box" v-if="permanentObj.permanentList && permanentObj.permanentList.length > 0"> |
|
||||
<div class="global-task cursor-pointer" v-for="(item, index) in permanentObj.permanentList" :key="index" @click="toDetail(item)"> |
|
||||
<template v-for="v in item.plugins"> |
|
||||
<template v-if="v[0].pluginId == 1">{{ item.name }}</template> |
|
||||
</template> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 定期任务 --> |
|
||||
<div class="task-list" :style="{ height: 'calc(100vh - 160px - (' + globalHeight + 'px))' }"> |
|
||||
<div class="task-box" v-for="(item, index) in taskObj.tasks" :key="index"> |
|
||||
<div class="task-time flex items-center justify-between"> |
|
||||
<div class="flex items-center"> |
|
||||
<PlayCircleOutlined style="font-size: 23px; color: #999999" /> |
|
||||
<span>{{ dayjs(item.planStart).format('D日 HH:mm') }}</span> |
|
||||
</div> |
|
||||
<div class="task-action"></div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="task-info"> |
|
||||
<div> |
|
||||
<div class="task-card"> |
|
||||
<div class="task-name cursor-pointer" @click="toDetail(item)"> |
|
||||
<template v-for="v in item.plugins"> |
|
||||
<template v-if="v[0].pluginId == 1">{{ item.name }}</template> |
|
||||
</template> |
|
||||
</div> |
|
||||
|
|
||||
<div class="task-con" v-if="item.sonList && item.sonList.length > 0"> |
|
||||
<div v-for="(val, key) in item.sonList" :key="key"> |
|
||||
<a-checkbox>{{ val.name }}</a-checkbox> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="open-icon" v-if="item.sonList" @click="openCard"> |
|
||||
<img /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { computed, watch, reactive, ref } from 'vue'; |
|
||||
import { useStore } from 'vuex'; |
|
||||
import dayjs from 'dayjs'; |
|
||||
import { findShowRole, getRegularTask, findSonTask, findProjectById } from 'apis'; |
|
||||
import { ReloadOutlined, MoreOutlined, PlayCircleOutlined } from '@ant-design/icons-vue'; |
|
||||
|
|
||||
const store = useStore(); |
|
||||
const projectId = sessionStorage.getItem('projectId'); |
|
||||
const project = computed(() => store.state.projects.project); // 项目信息 |
|
||||
const currRoleId = computed(() => store.state.role.roleId); // 当前角色 |
|
||||
const roles = ref([ |
|
||||
{ id: 1, name: '项目经理', mine: 1, pm: 1, sequence: 1 }, |
|
||||
{ id: 2, name: '运维', mine: 0, pm: 0, sequence: 2 }, |
|
||||
]); |
|
||||
|
|
||||
const permanents = computed(() => store.state.role.permanents); // 日常任务 |
|
||||
const permanentObj = reactive({ permanentList: [] }); // 日常任务 |
|
||||
const tasks = computed(() => store.state.role.tasks); // 定期任务 |
|
||||
const taskObj = reactive({ tasks: [] }); // 定期任务 |
|
||||
const globalHeight = ref(0); // 日常任务面板高度 |
|
||||
|
|
||||
init(); |
|
||||
|
|
||||
// 监听项目信息 |
|
||||
watch(project, async () => { |
|
||||
permanentObj.permanentList = permanents.value; |
|
||||
taskObj.tasks = tasks.value; |
|
||||
|
|
||||
await getRoles(project.value.id); // 通过项目id获取角色信息 |
|
||||
await getPermanentData(currRoleId.value); // 根据角色查找永久的日常任务 |
|
||||
await getTasks({ roleId: currRoleId.value }); |
|
||||
}); |
|
||||
|
|
||||
// 刷新页面判断是否有项目ID缓存，有则加载对应的项目信息、角色、任务 |
|
||||
async function init() { |
|
||||
try { |
|
||||
if (projectId) { |
|
||||
permanentObj.permanentList = permanents.value; |
|
||||
taskObj.tasks = tasks.value; |
|
||||
|
|
||||
await getFindProjectById(projectId); |
|
||||
await getRoles(projectId); // 通过项目id获取角色信息 |
|
||||
await getPermanentData(currRoleId.value); // 根据角色查找永久的日常任务 |
|
||||
await getTasks({ roleId: currRoleId.value }); |
|
||||
} |
|
||||
} catch (error) { |
|
||||
console.log('error: ', error); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 设置 初始显示角色信息 |
|
||||
function setInitialRoleId(visibleList) { |
|
||||
if (!visibleList || !visibleList.length) return; |
|
||||
|
|
||||
roles.value = [...visibleList]; |
|
||||
|
|
||||
const index = visibleList.findIndex(item => +item.mine === 1); |
|
||||
const currentRole = index > 0 ? visibleList[index] : visibleList[0]; |
|
||||
// const storageRoleId = this.$t.storage.getStorageSync('roleId'); |
|
||||
// const currentRoleId = storageRoleId ? storageRoleId : currentRole ? currentRole.id : ''; |
|
||||
const currentRoleId = currentRole ? currentRole.id : ''; |
|
||||
currRoleId.value = currentRoleId; |
|
||||
store.commit('role/setRoleId', currentRoleId); |
|
||||
// 清空storage |
|
||||
// this.$t.storage.setStorageSync('roleId', ''); |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 通过项目id获取项目信息 |
|
||||
* @param {string} projectId |
|
||||
* @param {object} params 提交的参数 |
|
||||
*/ |
|
||||
async function getFindProjectById(params) { |
|
||||
try { |
|
||||
const data = await findProjectById(params); |
|
||||
store.commit('projects/setProject', data); |
|
||||
} catch (error) { |
|
||||
throw new Error(error); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 通过项目id获取角色信息 |
|
||||
* @param {string} projectId |
|
||||
* @param {object} params 提交的参数 |
|
||||
*/ |
|
||||
async function getRoles(params) { |
|
||||
try { |
|
||||
const 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); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 日常任务 |
|
||||
async function getPermanentData(roleId) { |
|
||||
const params = { param: { roleId } }; |
|
||||
try { |
|
||||
const data = await store.dispatch('task/getPermanent', params); |
|
||||
permanentObj.permanentList = data; |
|
||||
globalHeight.value = data.length * 38 + 26; |
|
||||
} catch (error) { |
|
||||
throw new Error(error); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 根据id获取子任务 |
|
||||
async function getSonTask(detailId) { |
|
||||
const params = { param: { detailId } }; |
|
||||
try { |
|
||||
const data = await findSonTask(params); |
|
||||
taskObj.tasks.forEach(item => { |
|
||||
if (item.detailId === detailId) { |
|
||||
item.sonList = data; |
|
||||
} |
|
||||
}); |
|
||||
} catch (error) { |
|
||||
throw new Error(error); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 根据时间基准点和角色查找定期任务 |
|
||||
* @param {object} query |
|
||||
* @param {string} query.roleId 角色id |
|
||||
* @param {string} query.timeNode 时间基准点 默认当前 |
|
||||
* @param {string} query.timeUnit 时间颗粒度 默认天 |
|
||||
* @param {string} query.queryNum 查找颗粒度数量 默认3个 |
|
||||
* @param {number} query.queryType 0向上查找 1向下查找(默认) 下查包含自己，上查不包含 |
|
||||
*/ |
|
||||
async function getTasks(query) { |
|
||||
const params = { param: query }; |
|
||||
try { |
|
||||
const data = await getRegularTask(params); |
|
||||
taskObj.tasks = data; |
|
||||
|
|
||||
data.forEach(item => { |
|
||||
item.plugins.forEach(val => { |
|
||||
if (Number(val[0].pluginId) === 6) { |
|
||||
getSonTask(item.detailId); |
|
||||
} |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
store.commit('task/setUpTasks', data); |
|
||||
} catch (error) { |
|
||||
throw new Error(error); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function toDetail(item) { |
|
||||
store.commit('task/setTaskDetail', item); |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.navbar { |
|
||||
padding: 0 16px; |
|
||||
height: 44px; |
|
||||
} |
|
||||
|
|
||||
.project-name { |
|
||||
font-size: 16px; |
|
||||
font-weight: 600; |
|
||||
color: #333; |
|
||||
} |
|
||||
|
|
||||
.project-action .anticon { |
|
||||
margin-left: 16px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
.role-list { |
|
||||
padding: 0 16px; |
|
||||
height: 36px; |
|
||||
border-bottom: 1px solid #cccccc; |
|
||||
} |
|
||||
|
|
||||
.role-box { |
|
||||
margin-right: 16px; |
|
||||
height: 36px; |
|
||||
} |
|
||||
|
|
||||
.role-name { |
|
||||
font-size: 14px; |
|
||||
line-height: 36px; |
|
||||
color: #333333; |
|
||||
} |
|
||||
|
|
||||
.role-name.mine { |
|
||||
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; |
|
||||
line-height: 22px; |
|
||||
} |
|
||||
|
|
||||
.task-list { |
|
||||
padding: 0 16px 50px; |
|
||||
overflow-y: auto; |
|
||||
} |
|
||||
|
|
||||
.task-box { |
|
||||
} |
|
||||
|
|
||||
.task-time { |
|
||||
height: 32px; |
|
||||
} |
|
||||
|
|
||||
.task-time .anticon { |
|
||||
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; |
|
||||
} |
|
||||
|
|
||||
:deep(.ant-checkbox + span) { |
|
||||
color: #607d8b; |
|
||||
} |
|
||||
|
|
||||
.task-list::-webkit-scrollbar { |
|
||||
width: 0 !important; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,186 @@ |
|||||
|
<template> |
||||
|
<div class="task-list" :style="{ height: 'calc(100vh - 160px - (' + globalHeight + 'px))' }"> |
||||
|
<div class="task-box" v-for="(item, index) in tasks" :key="index"> |
||||
|
<div class="task-time flex items-center justify-between"> |
||||
|
<div class="flex items-center"> |
||||
|
<PlayCircleOutlined style="font-size: 23px; color: #999999" /> |
||||
|
<span>{{ dayjs(item.planStart).format('D日 HH:mm') }}</span> |
||||
|
</div> |
||||
|
<div class="task-action"></div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="task-info"> |
||||
|
<div> |
||||
|
<div class="task-card"> |
||||
|
<div class="task-name cursor-pointer" @click="toDetail(item)"> |
||||
|
<template v-for="v in item.plugins"> |
||||
|
<template v-if="v[0].pluginId == 1">{{ item.name }}</template> |
||||
|
</template> |
||||
|
</div> |
||||
|
|
||||
|
<div class="task-con" v-if="item.sonList && item.sonList.length > 0"> |
||||
|
<div v-for="(val, key) in item.sonList" :key="key"> |
||||
|
<!-- <a-checkbox>{{ val.name }}</a-checkbox> --> |
||||
|
<span class="son-task-name cursor-pointer" @click.stop="toSonDetail(item, val.detailId)">{{ val.name }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="open-icon" v-if="item.sonList" @click="openCard"> |
||||
|
<img /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { computed, watch, reactive } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import dayjs from 'dayjs'; |
||||
|
import { PlayCircleOutlined } from '@ant-design/icons-vue'; |
||||
|
import { getRegularTask, findSonTask } from 'apis'; |
||||
|
|
||||
|
const store = useStore(); |
||||
|
const project = computed(() => store.state.projects.project); // 项目信息 |
||||
|
const roleId = computed(() => store.state.role.roleId); // 当前角色 |
||||
|
const globalHeight = computed(() => store.state.task.globalHeight); // 日常任务面板高度 |
||||
|
const sessionGlobalHeight = sessionStorage.getItem('globalHeight'); // 日常任务面板高度缓存 |
||||
|
const tasks = computed(() => store.state.task.tasks); // 定期任务 |
||||
|
const taskObj = reactive({ tasks: [] }); // 定期任务 |
||||
|
const sessionTasks = sessionStorage.getItem('tasks'); // 定期任务缓存 |
||||
|
const subProjectInfo = computed(() => store.state.task.subProjectInfo); // 子课题信息 |
||||
|
|
||||
|
if (sessionGlobalHeight) { |
||||
|
store.commit('task/setGlobalHeight', sessionGlobalHeight); |
||||
|
} |
||||
|
|
||||
|
if (sessionTasks) { |
||||
|
const arr = JSON.parse(sessionTasks); |
||||
|
store.commit('task/setUpTasks', arr); |
||||
|
} |
||||
|
|
||||
|
watch([project, roleId, subProjectInfo], async () => { |
||||
|
if (roleId.value) { |
||||
|
await getTasks({ roleId: roleId.value }); // 根据角色查找定期任务 |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
/** |
||||
|
* 根据时间基准点和角色查找定期任务 |
||||
|
* @param {object} query |
||||
|
* @param {string} query.roleId 角色id |
||||
|
* @param {string} query.timeNode 时间基准点 默认当前 |
||||
|
* @param {string} query.timeUnit 时间颗粒度 默认天 |
||||
|
* @param {string} query.queryNum 查找颗粒度数量 默认3个 |
||||
|
* @param {number} query.queryType 0向上查找 1向下查找(默认) 下查包含自己，上查不包含 |
||||
|
*/ |
||||
|
async function getTasks(query) { |
||||
|
const params = { param: query }; |
||||
|
try { |
||||
|
const data = await getRegularTask(params); |
||||
|
taskObj.tasks = data; |
||||
|
|
||||
|
data.forEach(item => { |
||||
|
item.plugins.forEach(val => { |
||||
|
if (Number(val[0].pluginId) === 6) { |
||||
|
getSonTask(item.detailId); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
store.commit('task/setUpTasks', data); |
||||
|
} catch (error) { |
||||
|
throw new Error(error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 根据id获取子任务 |
||||
|
async function getSonTask(id) { |
||||
|
const params = { param: { detailId: id } }; |
||||
|
try { |
||||
|
const data = await findSonTask(params); |
||||
|
taskObj.tasks.forEach(item => { |
||||
|
if (item.detailId === id) { |
||||
|
item.sonList = data; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
store.commit('task/setUpTasks', taskObj.tasks); |
||||
|
} catch (error) { |
||||
|
throw new Error(error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function toDetail(item) { |
||||
|
store.commit('task/setTaskDetail', item); |
||||
|
store.commit('task/sonDetailId', ''); |
||||
|
} |
||||
|
|
||||
|
function toSonDetail(item, id) { |
||||
|
store.commit('task/setTaskDetail', item); |
||||
|
store.commit('task/sonDetailId', id); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.task-list { |
||||
|
padding: 0 16px 50px; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.task-box { |
||||
|
} |
||||
|
|
||||
|
.task-time { |
||||
|
height: 32px; |
||||
|
} |
||||
|
|
||||
|
.task-time .anticon { |
||||
|
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; |
||||
|
padding-left: 16px; |
||||
|
} |
||||
|
|
||||
|
.task-con > div { |
||||
|
height: 30px; |
||||
|
} |
||||
|
|
||||
|
:deep(.ant-checkbox + span) { |
||||
|
color: #607d8b; |
||||
|
} |
||||
|
|
||||
|
.son-task-name { |
||||
|
color: #607d8b; |
||||
|
} |
||||
|
|
||||
|
.task-list::-webkit-scrollbar { |
||||
|
width: 0 !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,93 @@ |
|||||
|
<template> |
||||
|
<div class="role-list flex items-center"> |
||||
|
<div class="role-box relative" v-for="(item, index) in roles" :key="index"> |
||||
|
<div class="role-name" :class="{ mine: item.mine === 1 && roleId === item.id }">{{ item.name }}</div> |
||||
|
<div class="line-box absolute flex justify-center" v-if="item.mine === 1 && roleId === item.id"><div class="line"></div></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { computed, watch } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import { findShowRole } from 'apis'; |
||||
|
|
||||
|
const store = useStore(); |
||||
|
const roleId = computed(() => store.state.role.roleId); // 当前角色 |
||||
|
const sessionRoles = sessionStorage.getItem('roles'); // 角色缓存 |
||||
|
const roles = computed(() => store.state.role.visibleRoles); // 当前项目角色列表 |
||||
|
|
||||
|
const project = computed(() => store.state.projects.project); // 项目信息 |
||||
|
|
||||
|
if (sessionRoles) { |
||||
|
const roleArr = JSON.parse(sessionRoles); |
||||
|
store.commit('role/setVisibleRoles', roleArr); |
||||
|
setInitialRoleId(roleArr); |
||||
|
} |
||||
|
|
||||
|
watch(project, async () => { |
||||
|
if (project.value.id) { |
||||
|
await getRoles(project.value.id); // 通过项目id获取角色信息 |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
/** |
||||
|
* 通过项目id获取角色信息 |
||||
|
* @param {string} projectId |
||||
|
* @param {object} params 提交的参数 |
||||
|
*/ |
||||
|
async function getRoles(params) { |
||||
|
try { |
||||
|
const 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 setInitialRoleId(visibleList) { |
||||
|
if (!visibleList || !visibleList.length) return; |
||||
|
const index = visibleList.findIndex(item => +item.mine === 1); |
||||
|
const currentRole = index > 0 ? visibleList[index] : visibleList[0]; |
||||
|
const currentRoleId = currentRole ? currentRole.id : ''; |
||||
|
store.commit('role/setRoleId', currentRoleId); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.role-list { |
||||
|
padding: 0 16px; |
||||
|
height: 36px; |
||||
|
border-bottom: 1px solid #cccccc; |
||||
|
} |
||||
|
|
||||
|
.role-box { |
||||
|
margin-right: 16px; |
||||
|
height: 36px; |
||||
|
} |
||||
|
|
||||
|
.role-name { |
||||
|
font-size: 14px; |
||||
|
line-height: 36px; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.role-name.mine { |
||||
|
font-weight: 600; |
||||
|
color: #1890ff; |
||||
|
} |
||||
|
|
||||
|
.role-box .line-box { |
||||
|
width: 100%; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.line-box .line { |
||||
|
width: 16px; |
||||
|
height: 2px; |
||||
|
background-color: #1890ff; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue