sound-chain/pages/task/create.vue

<template>
  <s-layout 
	:title="state.reason===1?'话术调整':(state.reason===2?'任务调整':'任务创建')"
	navbar="normal"
	showBackButton
	:bgStyle="{ color: '#FAFAFA' }"
  >
    <uni-forms
      ref="taskFormRef"
      v-model="state.model"
      :rules="rules"
      validateTrigger="bind"
      labelWidth="360"
      labelAlign="left"
	  label-position="top"
      :labelStyle="{ fontWeight: 'bold' }"
    >
      <view class="form_box">
		<template v-if="state.reason===1">
			<uni-forms-item name="typeId" label="电访任务类型：" class="form-item">
			  <uni-data-select
				v-model="state.model.typeId"
				:border="false"
				:clear="false"
				:localdata="state.taskType"
				@change="change"
			  ></uni-data-select>
			</uni-forms-item>
		</template>
		<template v-else-if="state.reason===2">
			<uni-forms-item name="name" label="任务名称：" class="form-item">
			  <uni-easyinput
				v-model="state.model.name"
				placeholder="请输入本次任务的名称"
				:maxlength="12"
				:inputBorder="false"
				:clearable="false"
				placeholderStyle="color:#999999;font-size:28rpx;font-weight:400;line-height:normal"
			  />
			</uni-forms-item>
			<uni-forms-item name="planTime" label="任务执行时间：" class="textarea-item">
			  <uni-datetime-picker type="datetime" hide-second :border="false" :clear-icon="false" v-model="state.model.planTime" :start="state.startTime" @change="changeLog" @show="showDatetimePicker" />
			</uni-forms-item>
		</template>
		<template v-else>
			<uni-forms-item name="name" label="任务名称：" class="form-item">
			  <uni-easyinput
				v-model="state.model.name"
				placeholder="请输入本次任务的名称"
				:maxlength="12"
				:inputBorder="false"
				:clearable="false"
				placeholderStyle="color:#999999;font-size:28rpx;font-weight:400;line-height:normal"
			  />
			</uni-forms-item>

			<uni-forms-item name="typeId" label="电访任务类型：" class="form-item">
			  <uni-data-select
				v-model="state.model.typeId"
				:border="false"
				:clear="false"
				:localdata="state.taskType"
				@change="change"
			  ></uni-data-select>
			</uni-forms-item>
			<uni-forms-item name="planTime" label="任务执行时间：" class="textarea-item">
			  <uni-datetime-picker type="datetime" hide-second :border="false" :clear-icon="false" v-model="state.model.planTime" :start="state.startTime" @change="changeLog" @show="showDatetimePicker" />
			</uni-forms-item>
		</template>
      </view>
    </uni-forms>
	<view class="submit_btn" @click="submitForm">{{state.reason===1?'接听测试电话':(state.reason===2?'开始执行任务':'下一步')}}</view>
  </s-layout>
</template>

<script setup>
  import { ref, reactive, unref, computed } from 'vue'
  import sheep from '@/common'
  import { onLoad } from '@dcloudio/uni-app'
  import taskApi from '@/common/api/member/task'
  import { formatDate } from '@/common/helper/utils'
  const taskFormRef = ref(null);
  const state = reactive({
    showRegion: false,
    model: {
      name: '',
      typeId: '',
      planTime: '',
    },
	taskType: [],
	startTime:null,
	timer: null,
	reason:null,
  })

  const rules = {
    name: {
      rules: [
        {
          required: true,
          errorMessage: '请输入任务名称',
        },
      ],
    },
    typeId: {
      rules: [
        {
          required: true,
          errorMessage: '请选择电访任务类型',
        },
      ],
    },
    planTime: {
      rules: [
        {
          required: true,
          errorMessage: '请选择任务执行时间',
        },
      ],
    },
  }
  const taskFormInfo = computed(() => sheep.$store('task').taskFormInfo)
  onLoad(async (options) => {
  	state.reason = Number(options.reason||null)
	if(!state.reason){
		sheep.$store('task').resetTaskData()
	}
	state.model = {
	  name: taskFormInfo.value.name,
	  typeId: taskFormInfo.value.typeId,
	  callPlatform: taskFormInfo.value.callPlatform,
	  planTime: taskFormInfo.value.planTime||formatDate(new Date().getTime()+10*60*1000, 'YYYY-MM-DD HH:mm')
	}
    getTaskType()
  })
  function showDatetimePicker(){
	  state.startTime = new Date().getTime()+10*60*1000
  }
  function closeDatetimePicker(){
	  console.log('closeDatetimePicker')
  }
	const change = (e) => {
	  console.log("e:", e)
	  state.taskType.forEach(item=>{
		  if(item.value===e){
			  state.model.callPlatform = item.callPlatform
		  }
	  })
	}
	const changeLog = (e) => {
		console.log('change事件:', e);
	}
	async function submitForm(){
		const validate = await unref(taskFormRef).validate().catch((error) => {
		  console.log('error: ', error)
		})
		if (!validate) return
		sheep.$store('task').updateTaskFormInfo(state.model)
		if(state.reason===1){
			sheep.$router.go('/pages/task/speechTest',{
				isTest:true
			})
		} else if(state.reason===2){
			const { code, data } = await taskApi.addTask({
				...taskFormInfo.value,
				planTime: taskFormInfo.value.planTime+':00'
			})
			if (code === 1) {
				sheep.$store('task').resetTaskData()
				sheep.$router.go('/pages/index/index')
			}
		} else{
			sheep.$router.go('/pages/task/executionList')
		}
		
	}
	async function getTaskType(){
		const { code, data } = await taskApi.taskType()
		if (code === 1) {
			state.taskType = (data.records||[]).map(item=>{
				return {
					value: item.id,
					text: item.name,
					callPlatform: item.callPlatform
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
.form_box{
	padding: 40rpx 30rpx;
}
:deep() {
	.uni-forms-item__inner{
		  padding-bottom: 40rpx;
	}
    .uni-forms-item__label {
		height: 60rpx;
		padding: 0 0 20rpx 0;
		.label-text {
		  font-size: 28rpx !important;
		  color: #222222 !important;
		  font-weight: bold;
		}
	}
	.uni-easyinput__content-input {
      font-size: 28rpx;
      color: #222222;
      line-height: 100rpx;
	  font-weight: 500;
	  height: 100rpx;
	  background: #fff;
	  border-radius: 20rpx;
	  padding: 0 20rpx !important;
    }
	.uni-stat__select{
		.uni-stat-box{
			border-radius: 20rpx;
		}
	}
	.uni-select{
		height: 100rpx;
		border: none;
		padding: 0 20rpx !important;
		border-radius: 20rpx;
		.uni-select__input-box{
			height: 100rpx;
			.uni-select__input-text{
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
			}
			.uni-select__input-placeholder{
				font-weight: 400;
				color: #999999;
			}
		}
	}
	.uni-date-x{
		padding: 0 20rpx;
		border-radius: 20rpx;
		flex-direction: row-reverse;
	}
	.uni-date__x-input{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		.uni-input-placeholder{
			font-weight: 400;
			color: #999999;
		}
		.uni-input-input{
			font-weight: 500;
			color: #222222;
		}
	}
	.uni-date__icon-clear{
		top: 10rpx;
		border: 18rpx solid transparent;
	}
	.uniui-bottom{
		font-size: 36rpx !important;
	}
	.uniui-top{
		font-size: 36rpx !important;
	}
	.uniui-clear{
		font-size: 48rpx !important;
	}
	.uni-error-message .uni-error-message-text{
		color: #FF4E4E;
		line-height: 40rpx;
		font-size: 24rpx;
	}
}
.submit_btn{
	width: 630rpx;
	height: 104rpx;
	line-height: 104rpx;
	background: #35E89A;
	border-radius: 40rpx;
	font-weight: bold;
	font-size: 32rpx;
	color: #222222;
	text-align: center;
	position: fixed;
	left: calc(50%);
	transform: translateX(-50%);
	bottom: 40rpx;
}
</style>