OA/pages/addquest/index.vue

821 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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" @change="columnCode" @confirm="confirm"
keyName="name" :defaultIndex='defaultIndex'>
</u-picker>
<!-- 协作人 -->
<u-picker :show="flag2" :columns="columns3" ref="uPicker5" @cancel="cancel"
@close="flag2 = false" @confirm="confirm1" @change="columnCode1" keyName="name"
closeOnClickOverlay :defaultIndex='defaultIndex1'>
</u-picker>
<!-- 验收人 -->
<u-picker :show="flag3" :columns="columns3" ref="uPicker6" @cancel="cancel"
@close="flag3 = false" @confirm="confirm" @change="columnCode2" keyName="name"
closeOnClickOverlay :defaultIndex='defaultIndex2'>
</u-picker>
<!-- 任务性质 -->
<u-form-item label="工作类型:" prop="userInfo.cate" borderBottom
@click="show3 = true; hideKeyboard()" ref="item3">
<u--input v-model="cate" 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.plan_hours" borderBottom
@click="endmonth = true; hideKeyboard()" ref="item5">
<u--input v-model="model1.userInfo.plan_hours" 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="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="priority_status" disabled disabledColor="#ffffff" placeholder="请选择"
border="none"></u--input>
</u-form-item>
<u-form-item label="流转状态:" prop="userInfo.flow_status" borderBottom
@click="show6 = true; hideKeyboard()" ref="item7">
<u--input v-model="flow_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.content" ref="item8">
<u--textarea v-model="model1.userInfo.content" 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="show6" :actions="actions6" title="请选择流转状态" @close="show6 = false"
@select="Select6">
</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="plan_hours" 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 {
addprojecttask,
projectlist,
getemployee,
userdepartment,
projecttaskview
} 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: [
],
defaultIndex: [0, 0, 0],
defaultIndex1: [0, 0, 0],
defaultIndex2: [0, 0, 0],
columns3: [],
director_name: '', //指派给
assist_admin_names: '', //协作人
priority_status: '', //优先级,
flow_status: '',
cate: '',
project: '', //关联项目
model1: {
userInfo: {
title: '', //任务主题
// start_time: '', //开始时间
end_time: '', //结束日期
plan_hours: '', //结束月份
// assist_check_names: '', //验收人
content: '', //详细内容
assist_admin_ids: []
},
},
flag1: false, //指派给
flag2: false, //协作人
flag3: false, //验收人
show3: false, //
show4: false, //
show5: false, //
show6: false, //
list: [{
title: '负责人:',
value: '',
},
{
title: '协作人:',
value: ''
}
//,
// {
// title: '验收人:',
// value: ''
// },
],
starttime: false, //开始时间
endtime: false, //结束日期
endmonth: false, //结束月份
start_time: Number(new Date()), //开始时间
end_time: Number(new Date()),
plan_hours: Number(new Date()),
actions3: [{
name: '其他',
index: '1'
}, {
name: '方案策划',
index: '2'
},
{
name: '撰写',
index: '3'
}, {
name: '需求调研 ',
index: '4'
}, {
name: '需求沟通',
index: '5'
}, {
name: '参加会议',
index: '6'
}, {
name: '拜访客户',
index: '7'
}, {
name: '接待客户',
index: '8'
}
],
actions4: [{
name: '项目1',
id: '78'
}, ],
actions5: [{
name: '低',
id: '1',
}, {
name: '中',
id: '2'
}, {
name: '高',
id: '3'
}, {
name: '紧急',
id: '4'
}],
rules: {
},
actions6: [{
name: '进行中',
id: '2',
}, {
name: '已完成',
id: '3'
}, {
name: '已拒绝',
id: '4'
}, {
name: '已关闭',
id: '5'
}],
rules: {
},
type: 0
}
},
onLoad(option) {
this.type = option.type
if (this.type == 1) {
uni.setNavigationBarTitle({
title: '编辑任务'
})
// this.buname=
// console.log(this.columns3[0])
this.getDeatil(option.data)
}
this.getDocumentList()
this.getDocumentList1()
},
onShow() {},
methods: {
//获取任务详情
async getDeatil(id) {
let res = await projecttaskview({
id: id
})
this.list[0].value = res.data.detail.director_name
this.model1.userInfo.id = res.data.detail.id
this.model1.userInfo.title = res.data.detail.title
this.list[1].value = res.data.detail.assist_admin_names
this.model1.userInfo.end_time = res.data.detail.end_time
this.cate = res.data.detail.cate_name
this.model1.userInfo.cate = res.data.detail.cate
this.model1.userInfo.plan_hours = res.data.detail.plan_hours
this.model1.userInfo.flow_status == res.data.detail.flow_status
this.flow_status = res.data.detail.flow_name
this.model1.userInfo.priority_status == res.data.detail.priority_status
this.priority_status = res.data.detail.priority_name
this.model1.userInfo.content = res.data.detail.content
this.project = res.data.detail.project_name
this.model1.userInfo.project_id = res.data.detail.project_id
if (res.data.detail.assist_admin_ids.length > 1) {
this.model1.userInfo.assist_admin_ids = res.data.detail.assist_admin_ids.split(',')
} else {
this.model1.userInfo.assist_admin_ids.push(res.data.detail.assist_admin_ids)
}
},
async getDocumentList1() {
let res = await projectlist({
page: 1,
limit: 10000,
})
this.actions4 = res.data.data.map((step, index) => {
return {
name: step.name,
id: step.id,
};
});
},
//获取部门
async getDocumentList() {
const res = await userdepartment()
const deArr = res.data
let codelist = [
[], //顶级部门
[], //次级部门
[] // 负责人
]
codelist[0] = res.data.map((item) => { // 赋值
return {
id: item.id,
name: item.title
}
})
codelist[1] = res.data[0].children.map((item) => { // 赋值
return {
id: item.id,
name: item.title
}
})
let dat = await getemployee({
did: codelist[1][0].id
})
codelist[2] = dat.data.map((item) => {
return {
id: item.id,
name: item.name
}
})
this.$forceUpdate()
this.$nextTick(() => {
this.columns3 = codelist
})
},
//监听人员加载数据
async columnCode(e) {
if (e.columnIndex == 1) {
let arr1 = []
let dat = await getemployee({
did: this.columns3[e.columnIndex][e.index].id
})
if (dat.data.length > 0) {
const newColumn = dat.data.map((item) => {
return {
id: item.id,
name: item.name
}
})
// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
this.$set(this.columns3, 2, newColumn);
}
}
},
async columnCode1(e) {
if (e.columnIndex == 1) {
let arr1 = []
let dat = await getemployee({
did: this.columns3[e.columnIndex][e.index].id
})
if (dat.data.length > 0) {
const newColumn = dat.data.map((item) => {
return {
id: item.id,
name: item.name
}
})
// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
this.$set(this.columns4, 2, newColumn);
}
}
},
async columnCode2(e) {
if (e.columnIndex == 1) {
let arr1 = []
let dat = await getemployee({
did: this.columns3[e.columnIndex][e.index].id
})
if (dat.data.length > 0) {
const newColumn = dat.data.map((item) => {
return {
id: item.id,
name: item.name
}
})
// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
this.$set(this.columns5, 2, newColumn);
}
}
},
groupChange(n) {
// console.log('groupChange', n);
},
navigateBack() {
uni.navigateBack()
},
Select3(e) {
console.log(e)
this.cate = e.name
this.model1.userInfo.cate = e.index //任务性质id
this.$refs.form1.validateField('userInfo.cate')
},
Select4(e) {
this.project = e.name
this.model1.userInfo.project_id = e.id //关联项目id
this.$refs.form1.validateField('userInfo.project')
},
Select5(e) {
this.priority_status = e.name
this.model1.userInfo.priority = e.id //优先级id
this.$refs.form1.validateField('userInfo.priority')
},
Select6(e) {
this.flow_status = e.name
this.model1.userInfo.flow_status = e.id //优先级id
this.$refs.form1.validateField('userInfo.flow_status')
},
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.plan_hours')
},
end_monthConfirm(e) {
this.endmonth = false
this.model1.userInfo.plan_hours = uni.$u.timeFormat(e.value, 'yyyy-mm')
this.$refs.form1.validateField('userInfo.plan_hours')
},
//新建任务
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 (date2.length > 0) {
Toast('结束时间不存在')
this.model1.userInfo.end_time = ''
return
}
let userInfo = this.model1.userInfo
const arr = Object.values(userInfo)
const bool = arr.every(item => item)
console.log(bool, this.model1.userInfo)
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.content
// const { msg } = await this.addNewTask(this.model1.userInfo)
console.log(this.model1.userInfo);
this.model1.userInfo.assist_admin_ids = this.model1.userInfo.assist_admin_ids.toString()
const res = await addprojecttask(this.model1.userInfo)
if (res.code == 0) {
uni.showToast({
title: '已提交',
});
setTimeout(function() {
uni.navigateBack({
delta: 1
});
}, 1000)
return
} else {
// 新建任务成功跳转回上一页
uni.$u.toast(res.msg)
}
} else {
uni.$u.toast('请填写所有信息')
return
}
},
reset() {
this.list.forEach(item => {
item.value = ''
})
this.project = ''
this.flow_status = ''
this.priority_status = ''
this.cate = ''
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
},
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[2]
if (name == undefined) {
this.list[num].value = '暂无'
} else {
this.list[0].value = name.name
this.model1.userInfo.director_uid = name.id
}
this[`flag${this.index}`] = false
},
confirm1(e) {
const num = this.index - 1
const name = e.value[2]
if (name == undefined) {
this.list[num].value = '暂无'
} else {
this.list[1].value += name.name + ','
this.model1.userInfo.assist_admin_ids.push(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>