|
|
|
@ -4,20 +4,22 @@ |
|
|
|
<!-- 项目名称 --> |
|
|
|
<view class="mb-3 font-bold text-base flex justify-center">新建任务</view> |
|
|
|
<div class="flex items-center mb-2"> |
|
|
|
<div class="mr-2">名称</div> |
|
|
|
<u-input v-model="nameValue" :type="type" :border="border" /> |
|
|
|
<div>名称<span class="text-red-500">*</span>：</div> |
|
|
|
<u-input v-model="name" :type="type" :border="border" /> |
|
|
|
</div> |
|
|
|
<!-- 起止时间 --> |
|
|
|
<div class="flex items-center mb-2"> |
|
|
|
<div class="mr-2">起止-截止时间</div> |
|
|
|
<u-input v-model="timeValue" :type="type" :border="border" /> |
|
|
|
<div class="mb-2"> |
|
|
|
<div>起止时间：</div> |
|
|
|
<u-input placeholder="请选择起止时间" v-model="timeValue" :type="type" :border="border" @click="$emit('showTime')" /> |
|
|
|
<!-- <u-picker mode="time" v-model="showChooseTime"></u-picker> --> |
|
|
|
<!-- <u-input v-model="timeValue" :type="type" :border="border" /> --> |
|
|
|
</div> |
|
|
|
<!-- 多选框 --> |
|
|
|
<div class="flex justify-between items-center"> |
|
|
|
<div class="mr-2">负责人</div> |
|
|
|
<div>负责人<span class="text-red-500">*</span>：</div> |
|
|
|
<div label="负责人" class="flex-1"> |
|
|
|
<u-dropdown ref="uDropdown" placeholder="请选择负责人"> |
|
|
|
<u-dropdown-item :title="dropTitle"> |
|
|
|
<u-dropdown-item :title="roleList"> |
|
|
|
<view class="slot-content bg-white"> |
|
|
|
<div |
|
|
|
class="flex flex-row justify-between mb-1 drop-item" |
|
|
|
@ -42,30 +44,30 @@ |
|
|
|
<div v-if="show" class="mb-6"> |
|
|
|
<!-- 描述 --> |
|
|
|
<div class="flex items-center mb-2"> |
|
|
|
<div class="mr-2">描述</div> |
|
|
|
<u-input v-model="decripeValue" :type="type" :border="border" /> |
|
|
|
<div>描述：</div> |
|
|
|
<u-input v-model="description" :type="type" :border="border" /> |
|
|
|
</div> |
|
|
|
<!-- 所属项目 --> |
|
|
|
<div class="w flex items-center mb-2"> |
|
|
|
<div class="mr-2">所属项目</div> |
|
|
|
<div>当前项目</div> |
|
|
|
<div>所属项目<span class="text-red-500">*</span>：</div> |
|
|
|
<div>{{ project.name }}</div> |
|
|
|
</div> |
|
|
|
<!-- 所属任务 --> |
|
|
|
<div class="w flex items-center mb-2"> |
|
|
|
<div class="mr-2">所属任务</div> |
|
|
|
<div>当前任务</div> |
|
|
|
<div>所属任务：</div> |
|
|
|
<div></div> |
|
|
|
</div> |
|
|
|
<!-- 上道工序 --> |
|
|
|
<div class="flex items-center mb-2"> |
|
|
|
<div class="mr-2">上道工序</div> |
|
|
|
<u-input v-model="lastValue" :type="type" :border="border" /> |
|
|
|
<div>上道工序：</div> |
|
|
|
<u-input v-model="processTaskId" :type="type" :border="border" /> |
|
|
|
</div> |
|
|
|
<!-- 检查人多选框 --> |
|
|
|
<div class="flex justify-between items-center"> |
|
|
|
<div class="mr-2">检查人</div> |
|
|
|
<div>检查人<span class="text-red-500">*</span>：</div> |
|
|
|
<div label="检查人" class="flex-1"> |
|
|
|
<u-dropdown ref="dropdown"> |
|
|
|
<u-dropdown-item :title="secondDropTitle"> |
|
|
|
<u-dropdown-item :title="checkerList"> |
|
|
|
<view class="slot-content bg-white"> |
|
|
|
<div |
|
|
|
class="flex flex-row justify-between mb-1 drop-item" |
|
|
|
@ -83,160 +85,205 @@ |
|
|
|
</div> |
|
|
|
<!-- 是否是日常任务 --> |
|
|
|
<div class="flex justify-between items-center mt-6"> |
|
|
|
是否是日常任务 |
|
|
|
<u-switch v-model="checked" size="28"></u-switch> |
|
|
|
是否是日常任务： |
|
|
|
<u-switch v-model="isGlobal" size="28"></u-switch> |
|
|
|
</div> |
|
|
|
<div class="mt-6"> |
|
|
|
<div>交付物</div> |
|
|
|
<u-input placeholder="交付物名称1" :type="type" :border="border" /> |
|
|
|
<u-input placeholder="交付物名称2" :type="type" :border="border" /> |
|
|
|
<div>交付物：</div> |
|
|
|
<div v-for="(sort, sortIndex) in deliverSort" :key="sort.id"> |
|
|
|
<u-input @click="addDeliver(sortIndex)" v-model="sort.name" placeholder="交付物名称1" :type="type" :border="border" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="flex items-center mb-6"> |
|
|
|
<u-button type="primary" size="medium" @click="$emit('closeMask')">提交</u-button> |
|
|
|
<u-button type="primary" size="medium" @click="setParameters">提交</u-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapState } from 'vuex'; |
|
|
|
import { mapState, mapGetters } from 'vuex'; |
|
|
|
|
|
|
|
export default { |
|
|
|
props: { |
|
|
|
startTime: { |
|
|
|
type: String, |
|
|
|
default: '', |
|
|
|
}, |
|
|
|
endTime: { |
|
|
|
type: String, |
|
|
|
default: '', |
|
|
|
}, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
projects: ['我是睡', '我叫什么', '我的名字是'], |
|
|
|
title: 'tall1', |
|
|
|
arrow: true, |
|
|
|
show: false, |
|
|
|
checked: false, //开关选择器默认关闭 |
|
|
|
nameValue: '', //名称 |
|
|
|
isGlobal: false, //是否日常任务 |
|
|
|
name: '', //名称 |
|
|
|
showChooseTime: false, |
|
|
|
timeValue: '', //起止时间 |
|
|
|
decripeValue: '', //描述 |
|
|
|
projectValue: '', //所属项目 |
|
|
|
description: '', //描述 |
|
|
|
projectShow: false, //所属项目模糊搜索展示 |
|
|
|
taskValue: '', //所属任务 |
|
|
|
lastValue: '', //上道工序 |
|
|
|
processTaskId: '', //上道工序 |
|
|
|
type: 'text', |
|
|
|
border: true, |
|
|
|
dropTitle: undefined, //负责人默认多选 |
|
|
|
secondDropTitle: undefined, //检查人默认多选 |
|
|
|
// 负责人下拉多选列表 |
|
|
|
roleOptions: [], |
|
|
|
// 检查人下拉多选列表 |
|
|
|
checkoutOptions: [], |
|
|
|
// 交付物 |
|
|
|
diliverables: [], |
|
|
|
// 所属项目下拉单选 |
|
|
|
projectOptions: [ |
|
|
|
{ |
|
|
|
label: 'tall1', |
|
|
|
value: 1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: 'tall2', |
|
|
|
value: 2, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: 'tall3', |
|
|
|
value: 3, |
|
|
|
}, |
|
|
|
], |
|
|
|
roleList: undefined, //负责人默认多选 |
|
|
|
checkerList: undefined, //检查人默认多选 |
|
|
|
roleOptions: [], // 负责人下拉多选列表 |
|
|
|
checkoutOptions: [], // 检查人下拉多选列表 |
|
|
|
roleIdList: [], // 选中的负责人id |
|
|
|
checkerIdList: [], // 选中的检查人id |
|
|
|
deliverables: [], // 交付物 |
|
|
|
deliverSort: [{ id: 1, name: '' }], // 交付物排序 |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
computed: { ...mapState('role', ['visibleRoles', 'invisibleRoles']) }, |
|
|
|
computed: { |
|
|
|
...mapState('role', ['visibleRoles']), |
|
|
|
...mapState('project', ['project']), |
|
|
|
...mapGetters('project', ['projectId']), |
|
|
|
}, |
|
|
|
|
|
|
|
watch: { |
|
|
|
endTime(val) { |
|
|
|
if (val) { |
|
|
|
this.timeValue = this.startTime + ' 至 ' + val; |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
let newArr = []; |
|
|
|
if (this.visibleRoles.length || this.invisibleRoles.length) { |
|
|
|
const arr = this.visibleRoles.concat(this.invisibleRoles); |
|
|
|
arr.forEach(role => { |
|
|
|
let item = { id: '', name: '', dropdownShow: false, status: false }; |
|
|
|
item.id = role.id; |
|
|
|
item.name = role.name; |
|
|
|
newArr.push(item); |
|
|
|
// 获取负责人和检查人列表 |
|
|
|
if (this.visibleRoles.length) { |
|
|
|
this.visibleRoles.forEach(role => { |
|
|
|
role.dropdownShow = false; |
|
|
|
role.status = false; |
|
|
|
}); |
|
|
|
} |
|
|
|
this.roleOptions = [...newArr]; |
|
|
|
this.checkoutOptions = [...newArr]; |
|
|
|
this.roleOptions = this.$u.deepClone(this.visibleRoles); |
|
|
|
this.checkoutOptions = this.$u.deepClone(this.visibleRoles); |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
isProjectShow($event) { |
|
|
|
console.log(this.projectValue); |
|
|
|
console.log($event); |
|
|
|
this.projectShow = true; |
|
|
|
}, |
|
|
|
|
|
|
|
// 下拉多选确定按钮 |
|
|
|
closeDropdown() { |
|
|
|
this.$refs.uDropdown.close(); |
|
|
|
}, |
|
|
|
|
|
|
|
// 下拉多选确定按钮 |
|
|
|
dropdownClosed() { |
|
|
|
this.$refs.dropdown.close(); |
|
|
|
}, |
|
|
|
|
|
|
|
// 负责人下拉多选选中 |
|
|
|
change(index) { |
|
|
|
console.log(index); |
|
|
|
let arr = [...this.roleOptions]; |
|
|
|
// 选择多选项图标的展示 |
|
|
|
arr[index].dropdownShow = !arr[index].dropdownShow; |
|
|
|
// 多选展示的改变 |
|
|
|
this.dropTitle = arr[index].name; |
|
|
|
this.roleList = arr[index].name; |
|
|
|
let shows = ''; |
|
|
|
// 遍历arr，如果选中，添加到多选展示框上 |
|
|
|
arr.map(val => { |
|
|
|
if (val.dropdownShow === true) { |
|
|
|
shows += val.name + ','; |
|
|
|
this.roleIdList.push(val.id); |
|
|
|
} |
|
|
|
}); |
|
|
|
this.roleOptions = [...arr]; |
|
|
|
// 删除最后的',' |
|
|
|
this.dropTitle = shows.slice(0, shows.length - 1); |
|
|
|
console.log(this.dropTitle); |
|
|
|
this.roleList = shows.slice(0, shows.length - 1); |
|
|
|
}, |
|
|
|
|
|
|
|
// 检查人下拉多选选中 |
|
|
|
choose(index) { |
|
|
|
console.log(index); |
|
|
|
let arr = [...this.checkoutOptions]; |
|
|
|
// 选择多选项图标的展示 |
|
|
|
arr[index].dropdownShow = !arr[index].dropdownShow; |
|
|
|
// 多选展示的改变 |
|
|
|
this.secondDropTitle = arr[index].name; |
|
|
|
this.checkerList = arr[index].name; |
|
|
|
let shows = ''; |
|
|
|
// 遍历arr，如果选中，添加到多选展示框上 |
|
|
|
arr.map(val => { |
|
|
|
if (val.dropdownShow === true) { |
|
|
|
shows += val.name + ','; |
|
|
|
this.checkerIdList.push(val.id); |
|
|
|
} |
|
|
|
}); |
|
|
|
this.checkoutOptions = [...arr]; |
|
|
|
// 删除最后的',' |
|
|
|
this.secondDropTitle = shows.slice(0, shows.length - 1); |
|
|
|
console.log(this.secondDropTitle); |
|
|
|
// this.dropTitle = arr[value - 1].name; |
|
|
|
this.checkerList = shows.slice(0, shows.length - 1); |
|
|
|
// this.roleList = arr[value - 1].name; |
|
|
|
}, |
|
|
|
|
|
|
|
// 所属项目下拉单选框 |
|
|
|
// project(value) { |
|
|
|
// console.log(value); |
|
|
|
// this.title = this.projectOptions[value - 1].label; |
|
|
|
// }, |
|
|
|
|
|
|
|
// 打开下拉框 |
|
|
|
openDropdown() { |
|
|
|
this.arrow = !this.arrow; |
|
|
|
this.show = true; |
|
|
|
}, |
|
|
|
|
|
|
|
// 关闭下拉框 |
|
|
|
closeSecondDropdown() { |
|
|
|
this.arrow = !this.arrow; |
|
|
|
this.show = false; |
|
|
|
}, |
|
|
|
|
|
|
|
// 设置交付物 TODO |
|
|
|
addDeliver(e) { |
|
|
|
console.log('e: ', e, this.deliverSort[0].name); |
|
|
|
}, |
|
|
|
|
|
|
|
// 设置提交参数 |
|
|
|
async setParameters() { |
|
|
|
const { projectId, name, startTime, endTime, roleIdList, description, processTaskId, checkerIdList, isGlobal, deliverables } = this; |
|
|
|
if (!name) { |
|
|
|
this.$t.ui.showToast('请输入名称'); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (!roleIdList || !roleIdList.length) { |
|
|
|
this.$t.ui.showToast('请选择负责人'); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (!checkerIdList || !checkerIdList.length) { |
|
|
|
this.$t.ui.showToast('请选择检查人'); |
|
|
|
return; |
|
|
|
} |
|
|
|
const params = { |
|
|
|
name, |
|
|
|
startTime: startTime ? this.$moment(startTime).format('x') - 0 : '', |
|
|
|
endTime: endTime ? this.$moment(endTime).format('x') - 0 : '', |
|
|
|
roleIdList, |
|
|
|
description, |
|
|
|
projectId, |
|
|
|
parentTaskId: '', // 父任务 |
|
|
|
processTaskId, // 上道工序 TODO |
|
|
|
checkerIdList, |
|
|
|
global: isGlobal ? 1 : 0, |
|
|
|
deliverList: deliverables, // 交付物 |
|
|
|
}; |
|
|
|
console.log('params: ', params); |
|
|
|
// await this.handleSubmit(params); |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 新建任务 |
|
|
|
* @param name 任务名 |
|
|
|
* @param startTime 开始时间 |
|
|
|
* @param endTime 结束时间 |
|
|
|
* @param roleIdList 负责人id（数组） |
|
|
|
* @param description 描述 |
|
|
|
* @param projectId 所属项目id |
|
|
|
* @param parentTaskId 所属任务id |
|
|
|
* @param processTaskId 上道工序（任务id） |
|
|
|
* @param checkerIdList 检查人id（数组） |
|
|
|
* @param global 是否日常任务 0否 1是 |
|
|
|
* @param deliverList 交付物名字（数组） |
|
|
|
*/ |
|
|
|
async handleSubmit(params) { |
|
|
|
try { |
|
|
|
const data = await this.$u.api.saveTask(params); |
|
|
|
console.log('data: ', data); |
|
|
|
// TODO 任务新建成功 继续 or 取消 |
|
|
|
this.$emit('closeMask'); |
|
|
|
} catch (error) { |
|
|
|
this.$emit('closeMask'); |
|
|
|
console.error('error: ', error); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
