604 lines
18 KiB
Vue
604 lines
18 KiB
Vue
<template>
|
||
<!-- 新建任务 -->
|
||
<view>
|
||
<view class="task_box">
|
||
<!-- 主题 -->
|
||
<!-- 信息填写表单 -->
|
||
<view class="u-page">
|
||
<view class="u-demo-block">
|
||
<view class="u-demo-block__content">
|
||
<u--form labelPosition="left" :model="model1" ref="form1">
|
||
<u-form-item label="任务主题:" prop="userInfo.title" borderBottom ref="item">
|
||
<u--input v-model="model1.userInfo.title" border="none" placeholder="请输入"></u--input>
|
||
</u-form-item>
|
||
<u-cell-group>
|
||
<view class="cell" v-for="(item, index) in list" :key="index">
|
||
<u-cell @click="showPicker(index)" :title="item.title" isLink :value="item.value"
|
||
:label="item.value?'':'请选择'">
|
||
</u-cell>
|
||
|
||
</view>
|
||
</u-cell-group>
|
||
<!-- 指派给 -->
|
||
|
||
<u-picker :show="flag1" :columns="columns3" ref="uPicker4" @cancel="cancel" closeOnClickOverlay
|
||
@close="flag1 = false" @confirm="confirm" @change="changeHandler1" keyName="name" :defaultIndex=[0,0]>
|
||
</u-picker>
|
||
<!-- 协作人 -->
|
||
<u-picker :show="flag2" :columns="columns3" ref="uPicker5" @cancel="cancel" @close="flag2 = false"
|
||
@confirm="confirm" @change="changeHandler2" keyName="name" closeOnClickOverlay :defaultIndex=[0,0]>
|
||
</u-picker>
|
||
|
||
<!-- 验收人 -->
|
||
<u-picker :show="flag3" :columns="columns3" ref="uPicker6" @cancel="cancel" @close="flag3 = false"
|
||
@confirm="confirm" @change="changeHandler3" keyName="name" closeOnClickOverlay :defaultIndex=[0,0]>
|
||
</u-picker>
|
||
<!-- 任务性质 -->
|
||
<u-form-item label="任务性质:" prop="userInfo.isbug" borderBottom @click="show3 = true; hideKeyboard()"
|
||
ref="item3">
|
||
<u--input v-model="model1.userInfo.isbug" disabled disabledColor="#ffffff" placeholder="请选择"
|
||
border="none"></u--input>
|
||
</u-form-item>
|
||
<!-- 开始时间 -->
|
||
<u-form-item label="任务开始时间:" prop="userInfo.start_time" borderBottom
|
||
@click="starttime = true; hideKeyboard()" ref="item8">
|
||
<u--input v-model="model1.userInfo.start_time" disabled disabledColor="#ffffff" placeholder="请选择"
|
||
border="none"></u--input>
|
||
</u-form-item>
|
||
<!-- 预计结束日期 -->
|
||
<u-form-item label="预计结束日期:" prop="userInfo.end_time" borderBottom @click="endtime = true; hideKeyboard()"
|
||
ref="item4">
|
||
<u--input v-model="model1.userInfo.end_time" disabled disabledColor="#ffffff" placeholder="请选择"
|
||
border="none"></u--input>
|
||
</u-form-item>
|
||
<!-- 月份 -->
|
||
<u-form-item label="月份:" prop="userInfo.demo1" borderBottom @click="endmonth = true; hideKeyboard()"
|
||
ref="item5">
|
||
<u--input v-model="model1.userInfo.demo1" disabled disabledColor="#ffffff" placeholder="请选择"
|
||
border="none"></u--input>
|
||
</u-form-item>
|
||
<!-- 关联项目 -->
|
||
<u-form-item label="关联项目:" prop="userInfo.project" borderBottom @click="show4 = true; hideKeyboard()"
|
||
ref="item6">
|
||
<u--input v-model="model1.userInfo.project" disabled disabledColor="#ffffff" placeholder="请选择"
|
||
border="none"></u--input>
|
||
</u-form-item>
|
||
<!-- 优先级 -->
|
||
<u-form-item label="优先级:" prop="userInfo.priority_status" borderBottom
|
||
@click="show5 = true; hideKeyboard()" ref="item7">
|
||
<u--input v-model="model1.userInfo.priority_status" disabled disabledColor="#ffffff" placeholder="请选择"
|
||
border="none"></u--input>
|
||
</u-form-item>
|
||
|
||
<view class="gray"></view>
|
||
<!-- 详细描述 -->
|
||
<view class="elaborate_box">
|
||
<view class="elaborate">详细描述:</view>
|
||
<u-form-item prop="userInfo.docContent_markdown_doc" ref="item8">
|
||
<u--textarea v-model="model1.userInfo.docContent_markdown_doc" count autoHeight maxlength='200'>
|
||
</u--textarea>
|
||
</u-form-item>
|
||
</view>
|
||
</u--form>
|
||
</u-action-sheet>
|
||
<!-- 任务性质 -->
|
||
<u-action-sheet :show="show3" :actions="actions3" title="请选择任务性质" @close="show3 = false" @select="Select3">
|
||
</u-action-sheet>
|
||
<!-- 关联项目 -->
|
||
<u-action-sheet :show="show4" :actions="actions4" title="请选择关联项目" @close="show4 = false" @select="Select4">
|
||
</u-action-sheet>
|
||
<!-- 优先级 -->
|
||
<u-action-sheet :show="show5" :actions="actions5" title="请选择优先级" @close="show5 = false" @select="Select5">
|
||
</u-action-sheet>
|
||
<!-- 开始时间 -->
|
||
<u-datetime-picker :show="starttime" :value="start_time" mode="datetime" closeOnClickOverlay
|
||
@confirm="start_timeConfirm" @cancel="start_timeClose" @close="start_timeClose"></u-datetime-picker>
|
||
<!-- 结束日期 -->
|
||
<u-datetime-picker :show="endtime" :value="end_time" mode="datetime" closeOnClickOverlay
|
||
@confirm="end_timeConfirm" @cancel="end_timeClose" @close="end_timeClose"></u-datetime-picker>
|
||
<!-- 结束月份 -->
|
||
<u-datetime-picker :show="endmonth" :value="demo1" mode="date" closeOnClickOverlay
|
||
@confirm="end_monthConfirm" @cancel="end_monthClose" @close="end_monthClose"></u-datetime-picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 信息填写表单 end-->
|
||
|
||
<!-- 提交按钮 -->
|
||
<view class="btn_box">
|
||
<u-button type="error" class="btn reset" text="重置" @click="reset"></u-button>
|
||
<u-button type="primary" class="btn sub" text="立即提交" @click="submit"></u-button>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
addNewTaskApi,
|
||
getDepartmentApi,
|
||
getDepartmentPersonApi
|
||
} from '@/api/oa.js'
|
||
import { Toast } from '@/libs/uniApi'
|
||
// import { data } from '../../../uni_modules/uview-ui/libs/mixin/mixin'
|
||
export default {
|
||
data() {
|
||
return {
|
||
index: 0,
|
||
loading: false,
|
||
columnData: [
|
||
|
||
],
|
||
columns3: [],
|
||
model1: {
|
||
userInfo: {
|
||
title: '', //任务主题
|
||
director_name: '', //指派给
|
||
assist_admin_names: '', //协作人
|
||
isbug: '', //任务性质
|
||
start_time: '', //开始时间
|
||
end_time: '', //结束日期
|
||
demo1: '', //结束月份
|
||
project: '', //关联项目
|
||
priority_status: '', //优先级，
|
||
assist_check_names: '', //验收人
|
||
docContent_markdown_doc: '', //详细内容
|
||
},
|
||
},
|
||
flag1: false, //指派给
|
||
flag2: false, //协作人
|
||
flag3: false, //验收人
|
||
|
||
show3: false, //
|
||
show4: false, //
|
||
show5: false, //
|
||
list: [{
|
||
title: '指派给:',
|
||
value: '',
|
||
},
|
||
{
|
||
title: '协作人:',
|
||
value: ''
|
||
},
|
||
{
|
||
title: '验收人:',
|
||
value: ''
|
||
},
|
||
],
|
||
starttime: false, //开始时间
|
||
endtime: false, //结束日期
|
||
endmonth: false, //结束月份
|
||
start_time: Number(new Date()), //开始时间
|
||
end_time: Number(new Date()),
|
||
demo1: Number(new Date()),
|
||
actions3: [{
|
||
name: '部门工作',
|
||
index: '0'
|
||
}, {
|
||
name: '部门协助',
|
||
index: '1'
|
||
}, ],
|
||
actions4: [{
|
||
name: '项目1',
|
||
id: '78'
|
||
}, ],
|
||
actions5: [{
|
||
name: '一般',
|
||
id: '1',
|
||
}, {
|
||
name: '紧急',
|
||
id: '4'
|
||
}],
|
||
rules: {
|
||
|
||
},
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getDepartment()
|
||
|
||
},
|
||
onShow() {},
|
||
methods: {
|
||
groupChange(n) {
|
||
// console.log('groupChange', n);
|
||
},
|
||
navigateBack() {
|
||
uni.navigateBack()
|
||
},
|
||
Select3(e) {
|
||
this.model1.userInfo.isbug = e.name
|
||
this.model1.userInfo.is_bug = e.index //任务性质id
|
||
this.$refs.form1.validateField('userInfo.is_bug')
|
||
},
|
||
Select4(e) {
|
||
this.model1.userInfo.project = e.name
|
||
this.model1.userInfo.project_id = e.id //关联项目id
|
||
this.$refs.form1.validateField('userInfo.project')
|
||
},
|
||
Select5(e) {
|
||
this.model1.userInfo.priority_status = e.name
|
||
this.model1.userInfo.priority = e.id //优先级id
|
||
this.$refs.form1.validateField('userInfo.priority')
|
||
},
|
||
change(e) {
|
||
// console.log(e);
|
||
},
|
||
//开始日期
|
||
start_timeClose() {
|
||
this.starttime = false
|
||
this.$refs.form1.validateField('userInfo.start_time')
|
||
},
|
||
start_timeConfirm(e) {
|
||
this.starttime = false
|
||
this.model1.userInfo.start_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
|
||
this.$refs.form1.validateField('userInfo.start_time')
|
||
},
|
||
//结束日期
|
||
end_timeClose() {
|
||
this.endtime = false
|
||
this.$refs.form1.validateField('userInfo.end_time')
|
||
},
|
||
end_timeConfirm(e) {
|
||
this.endtime = false
|
||
this.model1.userInfo.end_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
|
||
this.$refs.form1.validateField('userInfo.end_time')
|
||
},
|
||
//结束月份
|
||
end_monthClose() {
|
||
this.endmonth = false
|
||
this.$refs.form1.validateField('userInfo.demo1')
|
||
},
|
||
end_monthConfirm(e) {
|
||
this.endmonth = false
|
||
this.model1.userInfo.demo1 = uni.$u.timeFormat(e.value, 'yyyy-mm')
|
||
this.$refs.form1.validateField('userInfo.demo1')
|
||
},
|
||
//新建任务
|
||
async addNewTask(data) {
|
||
const res = await addNewTaskApi(data)
|
||
Toast('slkdff')
|
||
},
|
||
//获取部门列表
|
||
async getDepartment() {
|
||
const res = await getDepartmentApi()
|
||
const deArr = res[0].children
|
||
this.columns3.push(deArr)
|
||
let id = deArr[0].id
|
||
this.getDepartmentPerson(id)
|
||
|
||
},
|
||
//获取部门对应的人员列表
|
||
async getDepartmentPerson(id) {
|
||
const data = {
|
||
did: id
|
||
}
|
||
const res = await getDepartmentPersonApi(data)
|
||
const nameArr = []
|
||
res.forEach(item => {
|
||
let obj = {}
|
||
obj.name = item.name
|
||
obj.id = item.id
|
||
nameArr.push(obj)
|
||
})
|
||
this.columnData = []
|
||
this.columnData = nameArr
|
||
// this.columnData = res
|
||
if (this.columns3[1]) {
|
||
return
|
||
} else {
|
||
this.columns3.push(nameArr)
|
||
// this.columns3.push(res)
|
||
}
|
||
},
|
||
|
||
async submit() {
|
||
//结束时间不能低于开始时间
|
||
var d1 = new Date(this.model1.userInfo.start_time)
|
||
const date1 = d1.getTime()
|
||
var d2 = new Date(this.model1.userInfo.end_time)
|
||
const date2 = d2.getTime()
|
||
if (date1 > date2) {
|
||
Toast('结束时间不低于开始时间')
|
||
this.model1.userInfo.end_time = ''
|
||
return
|
||
}
|
||
this.model1.userInfo.director_name = this.list[0].value
|
||
this.model1.userInfo.assist_admin_names = this.list[1].value
|
||
this.model1.userInfo.assist_check_names = this.list[2].value
|
||
let userInfo = this.model1.userInfo
|
||
const arr = Object.values(userInfo)
|
||
const bool = arr.every(item => item)
|
||
if (bool) {
|
||
this.model1.userInfo.director_uid = this.list[0].id + ''
|
||
this.model1.userInfo.assist_admin_ids = this.list[1].id + ''
|
||
this.model1.userInfo.assist_check_ids = this.list[2].id + ''
|
||
this.model1.userInfo.ueditorcontent = this.model1.userInfo.docContent_markdown_doc
|
||
// const { msg } = await this.addNewTask(this.model1.userInfo)
|
||
console.log(this.model1.userInfo);
|
||
const res = await addNewTaskApi(this.model1.userInfo)
|
||
if (res.code == 0) {
|
||
uni.$u.toast('验收时间不能大于本月月底18点')
|
||
return
|
||
} else {
|
||
// 新建任务成功跳转回上一页
|
||
uni.showToast({
|
||
title: '已提交',
|
||
});
|
||
setTimeout(function() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}, 1000)
|
||
}
|
||
} else {
|
||
uni.$u.toast('请填写所有信息')
|
||
return
|
||
}
|
||
},
|
||
reset() {
|
||
this.list.forEach(item => {
|
||
item.value = ''
|
||
})
|
||
for (let i in this.model1.userInfo) {
|
||
this.model1.userInfo[i] = ''
|
||
}
|
||
|
||
},
|
||
hideKeyboard() {
|
||
uni.hideKeyboard()
|
||
},
|
||
//picker选择器
|
||
showPicker(index) {
|
||
console.log(index);
|
||
this.index = index + 1
|
||
this[`show${index + 1}`] = true
|
||
},
|
||
//两级联动
|
||
changeHandler1(e) {
|
||
this.change(e)
|
||
const {
|
||
columnIndex,
|
||
value,
|
||
values,
|
||
index,
|
||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||
picker = this.$refs.uPicker4
|
||
} = e
|
||
let id = e.value[0].id
|
||
if (columnIndex === 0) {
|
||
this.getDepartmentPerson(id)
|
||
this.loading = true
|
||
uni.$u.sleep(500).then(() => {
|
||
picker.setColumnValues(1, this.columnData)
|
||
this.loading = false
|
||
})
|
||
}
|
||
},
|
||
changeHandler2(e) {
|
||
this.change(e)
|
||
const {
|
||
columnIndex,
|
||
value,
|
||
values,
|
||
index,
|
||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||
picker = this.$refs.uPicker5
|
||
} = e
|
||
let id = e.value[0].id
|
||
if (columnIndex === 0) {
|
||
this.getDepartmentPerson(id)
|
||
this.loading = true
|
||
uni.$u.sleep(500).then(() => {
|
||
picker.setColumnValues(1, this.columnData)
|
||
this.loading = false
|
||
})
|
||
}
|
||
},
|
||
changeHandler3(e) {
|
||
this.change(e)
|
||
const {
|
||
columnIndex,
|
||
value,
|
||
values,
|
||
index,
|
||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||
picker = this.$refs.uPicker6
|
||
} = e
|
||
let id = e.value[0].id
|
||
if (columnIndex === 0) {
|
||
this.getDepartmentPerson(id)
|
||
this.loading = true
|
||
uni.$u.sleep(500).then(() => {
|
||
picker.setColumnValues(1, this.columnData)
|
||
this.loading = false
|
||
})
|
||
}
|
||
},
|
||
change(e) {
|
||
// console.log('change', e);
|
||
},
|
||
showPicker(index) {
|
||
this.index = index + 1
|
||
this[`flag${index + 1}`] = true
|
||
},
|
||
close() {
|
||
// console.log('close');
|
||
this[`flag${this.index}`] = false
|
||
},
|
||
confirm(e) {
|
||
const num = this.index - 1
|
||
const name = e.value[1]
|
||
if (name == undefined) {
|
||
this.list[num].value = '暂无'
|
||
} else {
|
||
this.list[num].value = name.name
|
||
this.list[num].id = name.id
|
||
}
|
||
|
||
this[`flag${this.index}`] = false
|
||
},
|
||
cancel() {
|
||
// console.log('cancel');
|
||
this[`flag${this.index}`] = false
|
||
},
|
||
|
||
|
||
},
|
||
onReady() {
|
||
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
|
||
this.$refs.form1.setRules(this.rules)
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/deep/.u-form {
|
||
background-color: #fff;
|
||
}
|
||
|
||
/deep/.uicon-arrow-right {
|
||
display: none;
|
||
}
|
||
|
||
/deep/.u-cell__right-icon-wrap {
|
||
display: none !important;
|
||
}
|
||
|
||
/deep/.u-form-item {
|
||
padding: 0 28rpx;
|
||
}
|
||
|
||
/deep/.u-form-item__body__left {
|
||
width: 220rpx !important;
|
||
// background-color: pink;
|
||
}
|
||
|
||
/deep/.input-placeholder,
|
||
/deep/.u-input__content,
|
||
/deep/.uni-input-wrapper {
|
||
font-size: 28rpx !important;
|
||
}
|
||
|
||
/deep/.u-textarea {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
/deep/.u-form-item__body__right__message {
|
||
margin-left: 220rpx !important;
|
||
}
|
||
|
||
/deep/.u-cell__title {
|
||
display: inline-block !important;
|
||
flex: none;
|
||
}
|
||
|
||
/deep/.u-cell__body {
|
||
padding: 21rpx 0 !important;
|
||
}
|
||
|
||
/deep/.u-line:first-child {
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
/deep/.u-cell__value {
|
||
color: black !important;
|
||
}
|
||
|
||
/deep/.u-cell__title-text {
|
||
display: inline-block !important;
|
||
width: 220rpx !important;
|
||
}
|
||
|
||
/deep/.u-cell__label {
|
||
font-size: 28rpx !important;
|
||
color: #CCCCCC !important;
|
||
}
|
||
|
||
/deep/.u-cell__body__content {
|
||
flex: none !important;
|
||
}
|
||
|
||
.cell {
|
||
margin: 0 auto;
|
||
width: 694rpx;
|
||
// background-color: pink;
|
||
}
|
||
|
||
.row {
|
||
margin: 0 auto;
|
||
margin-top: 21rpx;
|
||
width: 694rpx;
|
||
height: 0rpx;
|
||
border-bottom: 1rpx solid #CCCCCC;
|
||
}
|
||
|
||
.de {
|
||
font-size: 28rpx;
|
||
|
||
.miaoshu {
|
||
font-size: 28rpx;
|
||
color: #CCCCCC;
|
||
}
|
||
}
|
||
|
||
.ch {
|
||
color: rgb(192, 196, 204);
|
||
}
|
||
|
||
.gray {
|
||
// width: 750rpx;
|
||
height: 35rpx;
|
||
background-color: #F5F5F5;
|
||
}
|
||
|
||
.elaborate_box {
|
||
background-color: #fff;
|
||
padding: 35.5rpx 28rpx;
|
||
margin-bottom: 200rpx;
|
||
overflow: hidden;
|
||
|
||
.elaborate {
|
||
color: #666666;
|
||
font-size: 32rpx;
|
||
|
||
}
|
||
|
||
.elaborate_info {
|
||
width: 100%;
|
||
// height: 350rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.btn_box {
|
||
z-index: 9999;
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 750rpx;
|
||
background: #FFFFFF;
|
||
display: flex;
|
||
|
||
.btn {
|
||
text-align: center;
|
||
line-height: 88rpx;
|
||
// width: 375rpx;
|
||
height: 88rpx;
|
||
}
|
||
|
||
.reset {
|
||
border: none;
|
||
background-color: #fff;
|
||
color: #999999;
|
||
}
|
||
|
||
.sub {
|
||
color: #fff;
|
||
background-color: $theme-oa-color;
|
||
}
|
||
}
|
||
</style>
|