|
|
|
@ -1,146 +1,276 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="cardcard"> |
|
|
|
<div class="cardcard"> |
|
|
|
<template v-for="item in projectData"> |
|
|
|
<Container |
|
|
|
<div class="card_content" :key="item.id"> |
|
|
|
group-name="col" |
|
|
|
<el-card |
|
|
|
@drop="(e) => onCardDrop(e)" |
|
|
|
class="little_card" |
|
|
|
:get-child-payload="getCardPayload()" |
|
|
|
:class=" |
|
|
|
drag-class="card-ghost" |
|
|
|
color == 'black' |
|
|
|
drop-class="card-ghost-drop" |
|
|
|
? { card_black: true } |
|
|
|
:drop-placeholder="dropPlaceholderOptions" |
|
|
|
: color == 'blue' |
|
|
|
class="draggable-container" |
|
|
|
? { card_blue: true } |
|
|
|
> |
|
|
|
: color == 'orange' |
|
|
|
<Draggable v-for="item in proData" :key="item.id"> |
|
|
|
? { card_orange: true } |
|
|
|
<div class="card_content" :key="item.id"> |
|
|
|
: { card_green: true } |
|
|
|
<el-card |
|
|
|
" |
|
|
|
ref="card" |
|
|
|
> |
|
|
|
class="little_card" |
|
|
|
<div style="padding: 0rem 0rem 0 1.5rem"> |
|
|
|
:class=" |
|
|
|
<div class="admin_title"> |
|
|
|
color == 'black' |
|
|
|
<template> |
|
|
|
? { card_black: true } |
|
|
|
<el-checkbox class="check"></el-checkbox> |
|
|
|
: color == 'blue' |
|
|
|
</template> |
|
|
|
? { card_blue: true } |
|
|
|
<!-- 任务总述 --> |
|
|
|
: color == 'orange' |
|
|
|
<el-tooltip |
|
|
|
? { card_orange: true } |
|
|
|
v-if="item.taskName.length > 13" |
|
|
|
: { card_green: true } |
|
|
|
:content="item.taskName" |
|
|
|
" |
|
|
|
placement="top" |
|
|
|
> |
|
|
|
> |
|
|
|
<div style="padding: 0rem 0rem 0 1.5rem"> |
|
|
|
<span> |
|
|
|
<div class="admin_title"> |
|
|
|
|
|
|
|
<template> |
|
|
|
|
|
|
|
<el-checkbox class="check"></el-checkbox> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<!-- 任务总述 --> |
|
|
|
|
|
|
|
<el-tooltip |
|
|
|
|
|
|
|
v-if="item.taskName.length > 11" |
|
|
|
|
|
|
|
:content="item.taskName" |
|
|
|
|
|
|
|
placement="top" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<span> |
|
|
|
|
|
|
|
{{ |
|
|
|
|
|
|
|
item.taskName.length > 11 |
|
|
|
|
|
|
|
? item.taskName.slice(0, 9) + '...' |
|
|
|
|
|
|
|
: item.taskName |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
<span v-else> |
|
|
|
{{ |
|
|
|
{{ |
|
|
|
item.taskName.length > 13 |
|
|
|
item.taskName.length > 18 |
|
|
|
? item.taskName.slice(0, 11) + '...' |
|
|
|
? item.taskName.slice(0, 17) + '...' |
|
|
|
: item.taskName |
|
|
|
: item.taskName |
|
|
|
}} |
|
|
|
}} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</el-tooltip> |
|
|
|
<span> |
|
|
|
<span v-else> |
|
|
|
<el-dropdown |
|
|
|
{{ |
|
|
|
trigger="click" |
|
|
|
item.taskName.length > 18 |
|
|
|
placement="bottom-start" |
|
|
|
? item.taskName.slice(0, 17) + '...' |
|
|
|
@command="handleCommand" |
|
|
|
: item.taskName |
|
|
|
> |
|
|
|
}} |
|
|
|
<span class="el-dropdown-link"> |
|
|
|
</span> |
|
|
|
<i |
|
|
|
|
|
|
|
class="el-icon-more" |
|
|
|
|
|
|
|
style=" |
|
|
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
|
|
transform: rotate(90deg); |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
" |
|
|
|
|
|
|
|
></i> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
<el-dropdown-menu slot="dropdown"> |
|
|
|
|
|
|
|
<el-dropdown-item |
|
|
|
|
|
|
|
v-for="i in operateName" |
|
|
|
|
|
|
|
:key="i.id" |
|
|
|
|
|
|
|
:command="{ id: i.id, content: item }" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{{ i.name }} |
|
|
|
|
|
|
|
</el-dropdown-item> |
|
|
|
|
|
|
|
</el-dropdown-menu> |
|
|
|
|
|
|
|
</el-dropdown> |
|
|
|
|
|
|
|
<!-- <a @click="handleEdit(record)">编辑</a |
|
|
|
|
|
|
|
><a-divider type="vertical" /> --> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="union" v-if="item.typePid_dictText != null"> |
|
|
|
|
|
|
|
<span>任务类型：</span> |
|
|
|
|
|
|
|
<span>{{ item.typePid_dictText }}</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="union" v-if="item.level_dictText != null"> |
|
|
|
|
|
|
|
<span>任务层级：</span> |
|
|
|
|
|
|
|
<span>{{ item.level_dictText }}</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="union"> |
|
|
|
|
|
|
|
<span>对应项目：</span> |
|
|
|
|
|
|
|
<span>{{ item.union.split('-')[0] }}</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="union" v-if="item.union.split('-')[1] != null"> |
|
|
|
|
|
|
|
<span>对应模块：</span> |
|
|
|
|
|
|
|
<span>{{ item.union.split('-')[1] }}</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="union" v-if="item.union.split('-')[2] != null"> |
|
|
|
|
|
|
|
<span>对应功能：</span> |
|
|
|
|
|
|
|
<span>{{ item.union.split('-')[2] }}</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="union" v-if="item.upperTaskName != null"> |
|
|
|
|
|
|
|
<span>上级任务：</span> |
|
|
|
|
|
|
|
<span>{{ item.upperTaskName }}</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 头像 --> |
|
|
|
<!-- 项目内容/判断类型（文字？文件？照片） --> |
|
|
|
<span class="pic" @click="LookPeople(item.managerUsers)"> |
|
|
|
<div class="substance wordtext"> |
|
|
|
<el-tooltip |
|
|
|
<!-- <span>任务内容：</span> --> |
|
|
|
:content="item.managerUsers_dictText" |
|
|
|
<div v-if="item.contentType == 'text'"> |
|
|
|
placement="top" |
|
|
|
{{ item.taskDescribe }} |
|
|
|
> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 类型是图片 --> |
|
|
|
|
|
|
|
<div v-else-if="item.contentType == 'image'" class="sub_image"> |
|
|
|
<img |
|
|
|
<img |
|
|
|
:src="item.headpic" |
|
|
|
:src="item.taskPic" |
|
|
|
alt="" |
|
|
|
alt="" |
|
|
|
style=" |
|
|
|
style=" |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
height: 100%; |
|
|
|
cursor: pointer; |
|
|
|
border-radius: 10px 10px 10px 10px; |
|
|
|
border-radius: 50%; |
|
|
|
|
|
|
|
" |
|
|
|
" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</el-tooltip> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<!-- 类型是文档 --> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
|
|
|
|
v-else-if="item.contentType == 'file'" |
|
|
|
<!-- 项目内容/判断类型（文字？文件？照片） --> |
|
|
|
class="sub_document" |
|
|
|
<div class="substance"> |
|
|
|
> |
|
|
|
<div v-if="item.contentType == 'text'"> |
|
|
|
<div class="document"> |
|
|
|
{{ item.taskDescribe }} |
|
|
|
<img |
|
|
|
</div> |
|
|
|
src="../../../../../../public/filepic.png" |
|
|
|
<!-- 类型是图片 --> |
|
|
|
alt="" |
|
|
|
<div v-else-if="item.contentType == 'image'" class="sub_image"> |
|
|
|
style="width: 100%; height: 100%" |
|
|
|
<img |
|
|
|
/> |
|
|
|
:src="item.taskPic" |
|
|
|
</div> |
|
|
|
alt="" |
|
|
|
<div class="s_operate"> |
|
|
|
style=" |
|
|
|
<el-link |
|
|
|
width: 100%; |
|
|
|
class="s_c_operate" |
|
|
|
height: 100%; |
|
|
|
@click="lookFile(item.taskFile)" |
|
|
|
border-radius: 10px 10px 10px 10px; |
|
|
|
> |
|
|
|
" |
|
|
|
点击查看 |
|
|
|
/> |
|
|
|
</el-link> |
|
|
|
|
|
|
|
<el-link class="s_c_operate" :href="item.taskFile"> |
|
|
|
|
|
|
|
下载文档 |
|
|
|
|
|
|
|
</el-link> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 类型是文档 --> |
|
|
|
<!-- 日期 --> |
|
|
|
<div v-else-if="item.contentType == 'file'" class="sub_document"> |
|
|
|
<div class="time"> |
|
|
|
<div class="document"> |
|
|
|
<!-- <i class="el-icon-date" style="font-size: 18px"></i> --> |
|
|
|
<iframe |
|
|
|
<div>任务周期：</div> |
|
|
|
:src="item.taskFile" |
|
|
|
<div class="timearea"> |
|
|
|
frameborder="0" |
|
|
|
<span class="starttime"> |
|
|
|
style=" |
|
|
|
{{ (item.startTime || '').slice(0, 10) }} |
|
|
|
width: 100%; |
|
|
|
</span> |
|
|
|
height: 100%; |
|
|
|
<span>-</span> |
|
|
|
border-radius: 10px 10px 10px 10px; |
|
|
|
<span class="endtime"> |
|
|
|
" |
|
|
|
{{ (item.expectedEndTime || '').slice(0, 10) }} |
|
|
|
></iframe> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="s_operate"> |
|
|
|
</div> |
|
|
|
<div>点击查看</div> |
|
|
|
<div class="time"> |
|
|
|
<div>上传文档</div> |
|
|
|
<div>发布提交：</div> |
|
|
|
|
|
|
|
<div class="timearea"> |
|
|
|
|
|
|
|
<span class="starttime" v-if="item.createTime != null"> |
|
|
|
|
|
|
|
{{ (item.createTime || '').slice(0, 10) }} |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
<span class="starttime" v-else> 待提交 </span> |
|
|
|
|
|
|
|
<span>-</span> |
|
|
|
|
|
|
|
<span class="endtime" v-if="item.publishTime != null"> |
|
|
|
|
|
|
|
{{ (item.publishTime || '').slice(0, 10) }} |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
<span class="endtime" v-else> 待提交 </span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div></div> |
|
|
|
<div class="time"> |
|
|
|
</div> |
|
|
|
<div>任务时长：</div> |
|
|
|
<div class="time"> |
|
|
|
<div class="timearea"> |
|
|
|
<i class="el-icon-date" style="font-size: 18px"></i> |
|
|
|
<span class="starttime" v-if="item.expectedDuration != null"> |
|
|
|
<!-- <span>项目工期:</span> --> |
|
|
|
{{ item.expectedDuration }} |
|
|
|
<div class="timearea"> |
|
|
|
</span> |
|
|
|
<!-- <span class="starttime"> |
|
|
|
<span class="starttime" v-else> 待提交 </span> |
|
|
|
{{ (item.startTime || '').slice(0, 10) }} |
|
|
|
<span>-</span> |
|
|
|
</span> |
|
|
|
<span class="endtime" v-if="item.realDuration != null"> |
|
|
|
<span>至</span> --> |
|
|
|
{{ item.realDuration }} |
|
|
|
<span>截止到</span> |
|
|
|
</span> |
|
|
|
<span class="endtime"> |
|
|
|
<span class="endtime" v-else> 待提交 </span> |
|
|
|
{{ (item.expectedEndTime || '').slice(0, 10) }} |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 进度 --> |
|
|
|
<!-- 进度 --> |
|
|
|
<!-- <div class="schedule"> |
|
|
|
<div class="schedule"> |
|
|
|
|
|
|
|
<span>项目进度:</span> |
|
|
|
<span>项目进度:</span> |
|
|
|
<span class="s_tiao"> |
|
|
|
<span class="s_tiao"> |
|
|
|
<!-- :percentage="Number(item.schedule)" --> |
|
|
|
|
|
|
|
<el-progress :percentage="30" :show-text="false"></el-progress> |
|
|
|
<el-progress :percentage="30" :show-text="false"></el-progress> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<div class="operate"> |
|
|
|
|
|
|
|
<div class="o_left"> |
|
|
|
<!-- 任务类型标签/任务负责人头像 --> |
|
|
|
<el-button |
|
|
|
<div class="operate"> |
|
|
|
type="primary" |
|
|
|
<div class="o_left"> |
|
|
|
round |
|
|
|
<div |
|
|
|
class="but" |
|
|
|
class="but" |
|
|
|
size="small" |
|
|
|
:class=" |
|
|
|
></el-button> |
|
|
|
item.typeId_dictText === '前端开发' |
|
|
|
<el-button |
|
|
|
? { orange: true } |
|
|
|
type="success" |
|
|
|
: item.typeId_dictText === '日常业务' |
|
|
|
round |
|
|
|
? { green: true } |
|
|
|
class="but" |
|
|
|
: item.typeId_dictText === '测试' |
|
|
|
size="small" |
|
|
|
? { purple: true } |
|
|
|
></el-button> |
|
|
|
: item.typeId_dictText === '编码' |
|
|
|
|
|
|
|
? { lakeblue: true } |
|
|
|
|
|
|
|
: item.typeId_dictText === 'UI设计' |
|
|
|
|
|
|
|
? { blue: true } |
|
|
|
|
|
|
|
: item.typeId_dictText === '文档' |
|
|
|
|
|
|
|
? { pink: true } |
|
|
|
|
|
|
|
: { colors: true } |
|
|
|
|
|
|
|
" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{{ item.typeId_dictText }} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="leval">{{ item.workLevel }}</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 头像 --> |
|
|
|
|
|
|
|
<div class="headpic"> |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
v-for="(ii, index) in (item.headpic || '') |
|
|
|
|
|
|
|
.split(',') |
|
|
|
|
|
|
|
.slice(0, 3)" |
|
|
|
|
|
|
|
:key="index" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<el-tooltip |
|
|
|
|
|
|
|
:content="item.managerUsers_dictText.split(',')[index]" |
|
|
|
|
|
|
|
placement="top" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<span |
|
|
|
|
|
|
|
class="pic" |
|
|
|
|
|
|
|
@click="LookPeople(item.managerUsers)" |
|
|
|
|
|
|
|
:style="{ left: index - 1 + 0.1 * index + 'rem' }" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<img |
|
|
|
|
|
|
|
:src="item.headpic" |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
style=" |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
|
|
" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<span |
|
|
|
|
|
|
|
class="pic" |
|
|
|
|
|
|
|
@click="LookPeople(item.managerUsers)" |
|
|
|
|
|
|
|
style="left: 2.2rem" |
|
|
|
|
|
|
|
v-if="(item.headpic || '').split(',').length > 3" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
+3 |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<span class="edit">编辑</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</el-card> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Draggable> |
|
|
|
</template> |
|
|
|
</Container> |
|
|
|
|
|
|
|
<el-empty description="暂无数据" v-if="proData.length === 0"></el-empty> |
|
|
|
<!-- 弹出框 --> |
|
|
|
<!-- 弹出框 --> |
|
|
|
<el-drawer |
|
|
|
<el-drawer |
|
|
|
:visible.sync="drawer" |
|
|
|
:visible.sync="drawer" |
|
|
|
@ -214,15 +344,65 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-drawer> |
|
|
|
</el-drawer> |
|
|
|
|
|
|
|
<task-modal ref="modalForm" @ok="modalFormOk"></task-modal> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
<script> |
|
|
|
|
|
|
|
import { Container, Draggable } from 'vue-smooth-dnd' |
|
|
|
|
|
|
|
import { putAction } from '@/api/manage.js' |
|
|
|
|
|
|
|
import TaskModal from '@/views/task/modules/TaskModal' |
|
|
|
|
|
|
|
import { mixinDevice } from '@/utils/mixin' |
|
|
|
|
|
|
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
props: ['color', 'projectData'], |
|
|
|
mixins: [JeecgListMixin, mixinDevice], |
|
|
|
|
|
|
|
components: { |
|
|
|
|
|
|
|
Container, |
|
|
|
|
|
|
|
Draggable, |
|
|
|
|
|
|
|
TaskModal |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
props: [ |
|
|
|
|
|
|
|
'color', |
|
|
|
|
|
|
|
'projectData', |
|
|
|
|
|
|
|
'statusNum', |
|
|
|
|
|
|
|
'timeid', |
|
|
|
|
|
|
|
'typeId', |
|
|
|
|
|
|
|
'managerUsers', |
|
|
|
|
|
|
|
'projectId' |
|
|
|
|
|
|
|
], |
|
|
|
data() { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
return { |
|
|
|
drawer: false |
|
|
|
url: { |
|
|
|
|
|
|
|
list: '/task/task/list', |
|
|
|
|
|
|
|
updateWorkStatus: '/task/task/updateWorkStatus', |
|
|
|
|
|
|
|
delete: '/task/task/delete', |
|
|
|
|
|
|
|
deleteBatch: '/task/task/deleteBatch', |
|
|
|
|
|
|
|
fengjie: '/task/task/fengjie' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
drawer: false, |
|
|
|
|
|
|
|
operateName: [ |
|
|
|
|
|
|
|
{ id: 1, name: '分解任务' }, |
|
|
|
|
|
|
|
{ id: 2, name: '关联任务' }, |
|
|
|
|
|
|
|
{ id: 3, name: '子级任务' }, |
|
|
|
|
|
|
|
{ id: 4, name: '编辑任务' }, |
|
|
|
|
|
|
|
{ id: 5, name: '删除任务' } |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
headpics: [], |
|
|
|
|
|
|
|
proData: [], |
|
|
|
|
|
|
|
dropPlaceholderOptions: { |
|
|
|
|
|
|
|
className: 'drop-preview', |
|
|
|
|
|
|
|
animationDuration: '150', |
|
|
|
|
|
|
|
showOnTop: true |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
watch: { |
|
|
|
|
|
|
|
projectData: { |
|
|
|
|
|
|
|
handler(newVal) { |
|
|
|
|
|
|
|
this.proData = newVal |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
@ -249,7 +429,78 @@ export default { |
|
|
|
done() |
|
|
|
done() |
|
|
|
}) |
|
|
|
}) |
|
|
|
.catch((_) => {}) |
|
|
|
.catch((_) => {}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 点击任务操作框 |
|
|
|
|
|
|
|
handleCommand(command) { |
|
|
|
|
|
|
|
let { id, content } = command |
|
|
|
|
|
|
|
if (id === 1) { |
|
|
|
|
|
|
|
this.$emit('fenjie', content, this.timeid) |
|
|
|
|
|
|
|
} else if (id === 5) { |
|
|
|
|
|
|
|
this.$emit('delete', content.id, this.timeid) |
|
|
|
|
|
|
|
} else if (id === 4) { |
|
|
|
|
|
|
|
this.$emit('edit', content, this.timeid) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 拖拽 |
|
|
|
|
|
|
|
onCardDrop(dropResult) { |
|
|
|
|
|
|
|
const { removedIndex, addedIndex, payload } = dropResult |
|
|
|
|
|
|
|
if (removedIndex !== null || addedIndex !== null) { |
|
|
|
|
|
|
|
if (addedIndex !== null && payload) { |
|
|
|
|
|
|
|
this.changeStatu(payload.id, this.statusNum) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
this.proData = this.applyDrag(this.proData, dropResult) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// 重新调用一下获取数据的方法（主要是为了改变总数） |
|
|
|
|
|
|
|
for (let i = 0; i < 4; i++) { |
|
|
|
|
|
|
|
this.$emit( |
|
|
|
|
|
|
|
'getAllData', |
|
|
|
|
|
|
|
i, |
|
|
|
|
|
|
|
this.timeid, |
|
|
|
|
|
|
|
this.typeId, |
|
|
|
|
|
|
|
this.managerUsers, |
|
|
|
|
|
|
|
this.projectId |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
getCardPayload(columnId) { |
|
|
|
|
|
|
|
return (index) => this.proData[index] |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
applyDrag(arr, dragResult) { |
|
|
|
|
|
|
|
const { removedIndex, addedIndex, payload } = dragResult |
|
|
|
|
|
|
|
if (removedIndex === null && addedIndex === null) return arr |
|
|
|
|
|
|
|
const result = [...arr] |
|
|
|
|
|
|
|
let itemToAdd = payload |
|
|
|
|
|
|
|
if (removedIndex !== null) { |
|
|
|
|
|
|
|
itemToAdd = result.splice(removedIndex, 1)[0] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (addedIndex !== null) { |
|
|
|
|
|
|
|
result.splice(addedIndex, 0, itemToAdd) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return result |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 拖拽改变状态 |
|
|
|
|
|
|
|
async changeStatu(id, workStatus) { |
|
|
|
|
|
|
|
const res = await putAction(this.url.updateWorkStatus, { id, workStatus }) |
|
|
|
|
|
|
|
if (res.success) { |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// 查看文档 |
|
|
|
|
|
|
|
lookFile(fileurl) { |
|
|
|
|
|
|
|
let Base64 = require('js-base64').Base64 |
|
|
|
|
|
|
|
this.dialogurl = |
|
|
|
|
|
|
|
'http://127.0.0.1:8012/onlinePreview?url=' + |
|
|
|
|
|
|
|
encodeURIComponent(Base64.encode(fileurl)) |
|
|
|
|
|
|
|
window.open(this.dialogurl) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
|
|
|
|
this.proData = this.projectData |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
created() { |
|
|
|
|
|
|
|
this.proData = this.projectData |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
@ -258,7 +509,7 @@ export default { |
|
|
|
.cardcard { |
|
|
|
.cardcard { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
height: 100%; |
|
|
|
// overflow: scroll; |
|
|
|
//overflow: scroll; |
|
|
|
.card_content { |
|
|
|
.card_content { |
|
|
|
width: 99%; |
|
|
|
width: 99%; |
|
|
|
.little_card { |
|
|
|
.little_card { |
|
|
|
@ -279,20 +530,17 @@ export default { |
|
|
|
position: absolute; |
|
|
|
position: absolute; |
|
|
|
left: -1.5rem; |
|
|
|
left: -1.5rem; |
|
|
|
} |
|
|
|
} |
|
|
|
.pic { |
|
|
|
} |
|
|
|
position: relative; |
|
|
|
.union { |
|
|
|
display: inline-block; |
|
|
|
margin-top: 0.5rem; |
|
|
|
width: 1rem; |
|
|
|
font-size: 12px; |
|
|
|
height: 1rem; |
|
|
|
color: #999999; |
|
|
|
border-radius: 50%; |
|
|
|
|
|
|
|
// background-color: rgb(10, 228, 155); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
// 项目内容 |
|
|
|
// 项目内容 |
|
|
|
.substance { |
|
|
|
.substance { |
|
|
|
margin-top: 1rem; |
|
|
|
margin-top: 1rem; |
|
|
|
font-size: 14px; |
|
|
|
font-size: 13px; |
|
|
|
color: #999999; |
|
|
|
color: #555555; |
|
|
|
.sub_image { |
|
|
|
.sub_image { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 20vh; |
|
|
|
height: 20vh; |
|
|
|
@ -302,9 +550,9 @@ export default { |
|
|
|
.sub_document { |
|
|
|
.sub_document { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 20vh; |
|
|
|
height: 15vh; |
|
|
|
.document { |
|
|
|
.document { |
|
|
|
width: 55%; |
|
|
|
width: 60%; |
|
|
|
height: 100%; |
|
|
|
height: 100%; |
|
|
|
background-color: #52c93f; |
|
|
|
background-color: #52c93f; |
|
|
|
border-radius: 10px 10px 10px 10px; |
|
|
|
border-radius: 10px 10px 10px 10px; |
|
|
|
@ -312,37 +560,47 @@ export default { |
|
|
|
.s_operate { |
|
|
|
.s_operate { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
top: 2.7rem; |
|
|
|
top: 2.7rem; |
|
|
|
left: 1.5rem; |
|
|
|
left: 1rem; |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
justify-content: space-between; |
|
|
|
width: 25%; |
|
|
|
// width: 40%; |
|
|
|
height: 40%; |
|
|
|
height: 40%; |
|
|
|
color: #3e75e6; |
|
|
|
|
|
|
|
|
|
|
|
.s_c_operate { |
|
|
|
|
|
|
|
border-bottom: 1px solid #9f9f9f; |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
color: #9f9f9f; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.s_c_operate:hover { |
|
|
|
|
|
|
|
border-bottom: 1px solid #3e75e6; |
|
|
|
|
|
|
|
color: #3e75e6; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
// 项目时间 |
|
|
|
// 项目时间 |
|
|
|
.time { |
|
|
|
.time { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
margin-top: 1rem; |
|
|
|
margin-top: 0.7rem; |
|
|
|
font-size: 13px; |
|
|
|
font-size: 12px; |
|
|
|
color: #999999; |
|
|
|
color: #999999; |
|
|
|
|
|
|
|
//background-color: #33bfff; |
|
|
|
.timearea { |
|
|
|
.timearea { |
|
|
|
width: 80%; |
|
|
|
width: 70%; |
|
|
|
margin-left: 1rem; |
|
|
|
|
|
|
|
//background-color: #3e75e6; |
|
|
|
|
|
|
|
.starttime { |
|
|
|
.starttime { |
|
|
|
width: 45%; |
|
|
|
width: 48%; |
|
|
|
padding: 0.1rem; |
|
|
|
// padding: 0 0.1rem; |
|
|
|
display: inline-block; |
|
|
|
display: inline-block; |
|
|
|
background: #f0f0f0; |
|
|
|
background: #f0f0f0; |
|
|
|
|
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
.endtime { |
|
|
|
.endtime { |
|
|
|
width: 45%; |
|
|
|
width: 48%; |
|
|
|
padding: 0.1rem; |
|
|
|
// padding: 0 0.1rem; |
|
|
|
display: inline-block; |
|
|
|
display: inline-block; |
|
|
|
//background: #f0f0f0; |
|
|
|
background: #f0f0f0; |
|
|
|
|
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -359,7 +617,7 @@ export default { |
|
|
|
margin-left: 0.3rem; |
|
|
|
margin-left: 0.3rem; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
//操作 |
|
|
|
//标签/头像 |
|
|
|
.operate { |
|
|
|
.operate { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
justify-content: space-between; |
|
|
|
@ -370,12 +628,61 @@ export default { |
|
|
|
width: 60%; |
|
|
|
width: 60%; |
|
|
|
// background-color: antiquewhite; |
|
|
|
// background-color: antiquewhite; |
|
|
|
.but { |
|
|
|
.but { |
|
|
|
width: 50%; |
|
|
|
padding: 0.2rem 0.6rem; |
|
|
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.leval { |
|
|
|
|
|
|
|
margin-left: 1rem; |
|
|
|
|
|
|
|
padding: 0.2rem 0.6rem; |
|
|
|
|
|
|
|
color: #5dddfd; |
|
|
|
|
|
|
|
border-radius: 4px 4px 4px 4px; |
|
|
|
|
|
|
|
background-color: #e4f8f8; |
|
|
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.orange { |
|
|
|
|
|
|
|
background: #fff6f0; |
|
|
|
|
|
|
|
color: #ffb580; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.blue { |
|
|
|
|
|
|
|
background: #f0f4ff; |
|
|
|
|
|
|
|
color: #306bff; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.green { |
|
|
|
|
|
|
|
background: #f3faf0; |
|
|
|
|
|
|
|
color: #78c552; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.lakeblue { |
|
|
|
|
|
|
|
background: #f0faff; |
|
|
|
|
|
|
|
color: #33bfff; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.purple { |
|
|
|
|
|
|
|
background: #f7f0ff; |
|
|
|
|
|
|
|
color: #bb80ff; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.pink { |
|
|
|
|
|
|
|
background: #fff0fc; |
|
|
|
|
|
|
|
color: #ff80ee; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.colors { |
|
|
|
|
|
|
|
background: #fff0f7; |
|
|
|
|
|
|
|
color: #ff80d9; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.edit { |
|
|
|
|
|
|
|
font-size: 13px; |
|
|
|
.headpic { |
|
|
|
font-weight: 600; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
width: 20%; |
|
|
|
|
|
|
|
//background-color: #b8f5af; |
|
|
|
|
|
|
|
.pic { |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
|
|
width: 1.5rem; |
|
|
|
|
|
|
|
height: 1.5rem; |
|
|
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
|
|
border: 2px solid #ffffff; |
|
|
|
|
|
|
|
background-color: #33bfff; |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -498,4 +805,20 @@ export default { |
|
|
|
/deep/.el-drawer { |
|
|
|
/deep/.el-drawer { |
|
|
|
width: 24% !important; |
|
|
|
width: 24% !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.card-ghost { |
|
|
|
|
|
|
|
transition: transform 0.18s ease; |
|
|
|
|
|
|
|
transform: rotateZ(5deg); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.card-ghost-drop { |
|
|
|
|
|
|
|
transition: transform 0.18s ease-in-out; |
|
|
|
|
|
|
|
transform: rotateZ(0deg); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.drop-preview { |
|
|
|
|
|
|
|
background-color: rgba(176, 176, 243, 0.1); |
|
|
|
|
|
|
|
border: 1px dashed rgb(63, 128, 194); |
|
|
|
|
|
|
|
margin: 5px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.wordtext { |
|
|
|
|
|
|
|
word-break: break-all; |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|
|
