317 lines
8.5 KiB
Vue
317 lines
8.5 KiB
Vue
<template>
|
|
<AppLayout :title="title" :show-bg-image="false" >
|
|
<view class="main-list" :style="getBackgroundStyle('k.png')" v-if="showVue=='main'">
|
|
<view class="list-top">
|
|
<view class="list-title">
|
|
<text>创建任务</text>
|
|
<view class="title-line"></view>
|
|
</view>
|
|
</view>
|
|
<view class="form-container">
|
|
<uni-forms ref="formRef" v-model="formData" :rules="rules" validate-trigger="submit" >
|
|
<uni-forms-item label="任务名称：" name="taskName" required >
|
|
<uni-easyinput v-model="formData.taskName" placeholder="请输入任务名称"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="任务类型：" name="taskType" required >
|
|
<uni-data-select v-model="formData.taskType" placeholder="请选择任务类型" :localdata="taskTypeOptions" @change="taskTypeChange"></uni-data-select>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="优先级：" name="priority" required >
|
|
<uni-data-select v-model="formData.priority" placeholder="请选择优先级" :localdata="priorityOptions" @change="priorityChange"></uni-data-select>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="目标人员：" required >
|
|
<button class="choice-btn" @click="choicePerson">从帮扶人员库选择目标人员</button>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="目标人数：" name="taskAllocation.goalPersonCount" required>
|
|
<uni-easyinput v-model="formData.taskAllocation.goalPersonCount" disabled></uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="执行区域：" name="taskAllocation.executeDeptId" required >
|
|
<uni-data-select v-model="formData.taskAllocation.executeDeptId" placeholder="请选择执行区域" :localdata="executeDeptOptions" @change="executeDeptChange"></uni-data-select>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="截止时间：" name="taskAllocation.deadline" required>
|
|
<uni-datetime-picker class="picker-value" type="date" placeholder="请选择截止时间" v-model="formData.taskAllocation.deadline" @change="onDateChange" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="分配说明：" name="allocationNote" >
|
|
<uni-easyinput type="textarea" v-model="formData.taskAllocation.allocationNote" placeholder="请输入分配说明"></uni-easyinput>
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
<!-- 按钮组 -->
|
|
<view class="button-group">
|
|
<button class="btn submit-btn" @click="handleSubmit">确定</button>
|
|
<button class="btn reset-btn" @click="handleCancel">取消</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="" v-else>
|
|
<target-personel-choice @update:show-vue="handleShowVueChange"></target-personel-choice>
|
|
</view>
|
|
</AppLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { inject, ref, reactive } from 'vue';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
const { $api, navTo, navBack } = inject('globalFunction');
|
|
import config from "@/config.js"
|
|
import targetPersonelChoice from './targetPersonnelChoice.vue'
|
|
|
|
const props = defineProps({
|
|
taskTypeOptions: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => []
|
|
},
|
|
priorityOptions:{
|
|
type: Array,
|
|
required: true,
|
|
default: () => []
|
|
},
|
|
executeDeptOptions:{
|
|
type: Array,
|
|
required: true,
|
|
default: () => []
|
|
},
|
|
})
|
|
const title = ref('');
|
|
const formData = reactive({
|
|
taskName: '',
|
|
taskType: '',
|
|
priority: '',
|
|
taskAllocation: {
|
|
goalPersonCount: null,
|
|
executeDeptId: '',
|
|
executeDeptName: '',
|
|
executeDeptAncestors: '',
|
|
allocationStatus: '1',
|
|
allocationNote: '',
|
|
deadline: null,
|
|
goalPersonList: []
|
|
}
|
|
})
|
|
// 表单引用
|
|
const formRef = ref(null)
|
|
// 校验规则
|
|
const rules = {
|
|
taskName: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请填写任务名称'
|
|
}]
|
|
},
|
|
taskType: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请选择任务类型'
|
|
}]
|
|
},
|
|
priority: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请选择优先级'
|
|
}]
|
|
},
|
|
'taskAllocation.goalPersonCount': {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请选择目标人员'
|
|
}]
|
|
},
|
|
'taskAllocation.executeDeptId': {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请选择执行区域'
|
|
}]
|
|
},
|
|
'taskAllocation.deadline':{
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请选择截止时间'
|
|
}]
|
|
},
|
|
}
|
|
const baseUrl = config.imgBaseUrl
|
|
const getBackgroundStyle = (imageName) => ({
|
|
backgroundImage: `url(${baseUrl}/dispatch/${imageName})`,
|
|
backgroundSize: 'cover', // 覆盖整个容器
|
|
backgroundPosition: 'center', // 居中
|
|
backgroundRepeat: 'no-repeat'
|
|
});
|
|
const showVue=ref('main')
|
|
const emit = defineEmits(['update:showView'])
|
|
function choicePerson(){
|
|
showVue.value='choice'
|
|
}
|
|
// 事件处理
|
|
function onDateChange(e){
|
|
formData.taskAllocation.deadline=e
|
|
}
|
|
function taskTypeChange(e){
|
|
formData.taskType=e
|
|
}
|
|
function priorityChange(e){
|
|
formData.priority=e
|
|
}
|
|
function executeDeptChange(e){
|
|
formData.taskAllocation.executeDeptId=e
|
|
formData.taskAllocation.executeDeptName=getLabelByValue(e,props.executeDeptOptions)
|
|
formData.taskAllocation.executeDeptAncestors=getAncestorsByValue(e,props.executeDeptOptions)
|
|
}
|
|
function getLabelByValue(value,arr) {
|
|
if (!Array.isArray(arr)) {
|
|
return ''
|
|
}
|
|
|
|
const item = arr.find(item => item.value === value)
|
|
return item ? item.text : '暂无'
|
|
}
|
|
function getAncestorsByValue(value,arr){
|
|
if (!Array.isArray(arr)) {
|
|
return ''
|
|
}
|
|
|
|
const item = arr.find(item => item.value === value)
|
|
return item ? item.ancestors : ''
|
|
}
|
|
function normalizePersonData(dataList) {
|
|
if (!Array.isArray(dataList)) return [];
|
|
return dataList.map(obj => {
|
|
const fullValue = obj;
|
|
return {
|
|
personId: String(fullValue) // 确保转为字符串，防止意外类型
|
|
};
|
|
});
|
|
}
|
|
function handleShowVueChange(newValue){
|
|
showVue.value=newValue.showVue
|
|
if(newValue.selectedPersonIds&&newValue.selectedPersonIds.length>0){
|
|
formData.taskAllocation.goalPersonList = normalizePersonData(newValue.selectedPersonIds)
|
|
formData.taskAllocation.goalPersonCount=newValue.selectedPersonIds.length
|
|
}else{
|
|
|
|
}
|
|
}
|
|
const handleSubmit = () => {
|
|
formRef.value?.validate()
|
|
.then(() => {
|
|
let header={
|
|
'Authorization':uni.getStorageSync('Padmin-Token')
|
|
}
|
|
$api.myRequest('/dispatch/assist/task/add', formData,'post',9100,header).then((resData) => {
|
|
if(resData && resData.code == 200){
|
|
handleCancel()
|
|
uni.showToast({
|
|
title: '创建成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
});
|
|
}else{
|
|
uni.showToast({
|
|
title: resData.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
|
|
});
|
|
})
|
|
.catch((errors) => {
|
|
console.log('校验失败:', errors);
|
|
});
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
formData.taskName=''
|
|
formData.taskType=''
|
|
formData.priority=''
|
|
formData.taskAllocation.goalPersonCount=null
|
|
formData.taskAllocation.executeDeptId=''
|
|
formData.taskAllocation.executeDeptName=''
|
|
formData.taskAllocation.executeDeptAncestors=''
|
|
formData.taskAllocation.allocationStatus='1'
|
|
formData.taskAllocation.allocationNote=''
|
|
formData.taskAllocation.deadline=null
|
|
formData.taskAllocation.goalPersonList=[]
|
|
emit('update:showView', 'main')
|
|
}
|
|
onLoad((options) => {});
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
image
|
|
height: 100%
|
|
width: 100%
|
|
.main-list
|
|
background-color: #ffffff
|
|
padding: 20rpx 20rpx 28rpx 20rpx
|
|
margin: 30rpx 30rpx
|
|
box-shadow: 0px 3px 20px 0px rgba(0,105,234,0.1)
|
|
border-radius: 12px
|
|
.list-top
|
|
display: flex
|
|
align-items: center
|
|
justify-content: space-between
|
|
.list-title
|
|
font-weight: bold
|
|
font-size: 36rpx
|
|
color: #404040
|
|
position: relative
|
|
|
|
.title-line
|
|
position: absolute
|
|
bottom: -10rpx
|
|
left: 70rpx
|
|
width: 70rpx
|
|
height: 8rpx
|
|
background: linear-gradient(90deg, #FFAD58 0%, #FF7A5B 100%)
|
|
border-radius: 4rpx
|
|
|
|
.input,
|
|
.picker
|
|
flex: 1
|
|
|
|
.picker-value
|
|
color: #666
|
|
|
|
.form-container
|
|
margin-top: 30rpx
|
|
:deep(.uni-forms-item__label)
|
|
width: 194rpx !important
|
|
font-size: 28rpx;
|
|
color: #404040;
|
|
|
|
.button-group {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 40rpx 20rpx 20rpx;
|
|
}
|
|
|
|
.btn {
|
|
width: 45%;
|
|
height: 80rpx;
|
|
font-size: 30rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.reset-btn {
|
|
background-color: #D8E9FF;
|
|
color: #1176FF;
|
|
}
|
|
|
|
.submit-btn {
|
|
background-color: #368BFF;
|
|
color: white;
|
|
}
|
|
.choice-btn{
|
|
width: 100%;
|
|
height: 70rpx;
|
|
font-size: 28rpx;
|
|
border-radius: 8rpx;
|
|
background-color: #368BFF;
|
|
color: white;
|
|
margin-left: 0;
|
|
}
|
|
:deep(.uni-easyinput__content)
|
|
background: rgba(0,0,0,0) !important
|
|
</style>
|