ks-app-employment-service/packageB/priority/helpFollow.vue

<template>
    <AppLayout :title="title" :show-bg-image="false" >
		<view class="info-box">
			<view class="info-item info-line">
				<image class="info-img" :src="baseUrl+'/dispatch/person-icon.png'" mode=""></image>
				<view class="info-label">
					人员姓名
				</view>
				<view class="info-value">
					{{personInfo.name}}
				</view>
			</view>
			<view class="info-item">
				<image class="info-img" :src="baseUrl+'/dispatch/help-icon.png'" mode=""></image>
				<view class="info-label">
					帮扶类型
				</view>
				<view class="info-value">
					{{personInfo.taskType}}
				</view>
			</view>
		</view>
        <view class="main-list" :style="getBackgroundStyle('k.png')">
			<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="followDate" required >
					  <uni-datetime-picker class="picker-value" type="date" placeholder="请选择跟进日期"  v-model="formData.followDate" @change="onFollowDateChange" />
                  </uni-forms-item>
            
                  <!-- 跟进方式 -->
                  <uni-forms-item label="跟进方式：" name="followWay" required >
					  <uni-data-select v-model="formData.followWay" placeholder="请选择跟进方式" :localdata="followWays" @change="onMethodChange"></uni-data-select>
                  </uni-forms-item>
            
                  <!-- 跟进内容 -->
                  <uni-forms-item label="跟进内容：" name="content" required>
					  <uni-easyinput type="textarea" v-model="formData.content" placeholder="请输入跟进内容"></uni-easyinput>
                  </uni-forms-item>
            
                  <!-- 跟进结果 -->
                  <uni-forms-item label="跟进结果：" name="result" required>
					  <uni-easyinput type="textarea" v-model="formData.result" placeholder="请输入跟进结果"></uni-easyinput>
                  </uni-forms-item>
            
                  <!-- 下一步计划 -->
                  <uni-forms-item label="下一步计划：" name="nextPlan">
					  <uni-easyinput type="textarea" v-model="formData.nextPlan" placeholder="请输入下一步计划（可选）"></uni-easyinput>
                  </uni-forms-item>
            
                  <!-- 下次联系时间 -->
                  <uni-forms-item label="下次联系：" name="nextContactDate" >
					  <uni-datetime-picker class="picker-value" type="date" placeholder="请选择跟进日期"  v-model="formData.nextContactDate" @change="onDateChange" />
                  </uni-forms-item>
                </uni-forms>
            
                <!-- 按钮组 -->
                <view class="button-group">
				  <button class="btn submit-btn" @click="handleSubmit">保存跟进</button>
                  <button class="btn reset-btn"  @click="handleReset">重置</button>
                </view>
			</view>
        </view>
		<view class="main-list" :style="getBackgroundStyle('k.png')">
			<view class="list-top">
				<view class="list-title">
					<text>跟进历史记录</text>
					<view class="title-line"></view>
				</view>
				<view class="title-total">
					共<text class="total-num">{{followListNum}}</text>条记录
				</view>
			</view>
			<view class="list-box" v-if="followListNum>0">
				<uni-steps :options="followList" active-color="#007AFF" :active="active" direction="column" />
			</view>
			<empty v-else pdTop="200"></empty>
		</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"

const title = ref('');
const formData = reactive({
  goalPersonId:'',
  followDate: '',
  followWay: '',
  content: '',
  result: '',
  nextPlan: '',
  nextContactDate: ''
})
const personInfo=ref({
	goalPersonId:'',
	name:'',
	taskType:''
})
const followWays = ref([])
const followList = ref([])
const followListNum=ref(0)
const active=ref(null)
// 表单引用
const formRef = ref(null)

// 校验规则
const rules = {
	followDate: {
		rules: [{
			required: true,
			errorMessage: '请选择跟进日期'
		}]
	},
	followWay: {
		rules: [{
			required: true,
			errorMessage: '请选择跟进方式'
		}]
	},
	content: {
		rules: [{
			required: true,
			errorMessage: '请填写跟进内容'
		}]
	},
	result: {
		rules: [{
			required: true,
			errorMessage: '请填写跟进结果'
		}]
	}
}
const baseUrl = config.imgBaseUrl
const getBackgroundStyle = (imageName) => ({
    backgroundImage: `url(${baseUrl}/dispatch/${imageName})`,
    backgroundSize: 'cover',      // 覆盖整个容器
    backgroundPosition: 'center', // 居中
    backgroundRepeat: 'no-repeat'
});

const onFollowDateChange = (e)=>{
	formData.followDate=e
}
const onMethodChange = (e) => {
	formData.followWay=e
}
// 事件处理
const onDateChange = ( e) => {
  formData.nextContactDate=e
}
function getFollowList(){
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	let params={
		goalPersonId:personInfo.value.goalPersonId
	}
	$api.myRequest('/dispatch/assist/records/getFollowList', params,'get',9100,header).then((resData) => {
		console.log("resData",resData)
		if(resData && resData.code == 200){
			if(resData.data && resData.data.length>0){
				followListNum.value=resData.data.length
				resData.data.forEach(item=>{
					const obj={
						title:item.followDate,
						desc:`跟进方式：${getFollowWaysLabelByValue(item.followWay)}\n跟进人：${item.createByName}\n跟进内容：${item.content}`
					}
					followList.value.push(obj)
				})
			}
			
		}
	});
}

function getDictionary(){
	$api.myRequest('/system/public/dict/data/type/assist_follow_way').then((resData) => {
		if(resData && resData.code == 200){
			resData.data.forEach(item=>{
				const obj = {
				    value: item.dictValue,
				    text: item.dictLabel
				}
				followWays.value.push(obj)
			})
		}
	});
}
function getFollowWaysLabelByValue(value) {
	if (!Array.isArray(followWays.value)) {
	    return ''
	  }
	  const item = followWays.value.find(item => item.value === String(value))
	  return item ? item.text : '暂无跟进方式'
}
const handleSubmit = () => {
  formRef.value?.validate()
    .then(() => {
		let header={
			'Authorization':uni.getStorageSync('Padmin-Token')
		}
		formData.goalPersonId=personInfo.value.goalPersonId
		$api.myRequest('/dispatch/assist/records/addRecords', formData,'post',9100,header).then((resData) => {
			console.log("resData",resData)
			if(resData && resData.code == 200){
				handleReset()
				uni.showToast({
				  title: '保存成功',
				  icon: 'success',
				  duration: 2000 
				});
			}else{
				uni.showToast({
				  title: resData.msg,
				  icon: 'none',
				  duration: 2000
				});
			}
			
		});
    })
    .catch((errors) => {
      console.log('校验失败:', errors);
    });
};

const handleReset = () => {
	  formData.followDate = '';
	  formData.followWay = '';
	  formData.content = '';
	  formData.result = '';
	  formData.nextPlan = '';
	  formData.nextContactDate = '';
}
onLoad((options) => {
	personInfo.value.goalPersonId=options.id
	personInfo.value.name=options.name
	personInfo.value.taskType=options.taskType
	getDictionary()
	getFollowList()
});


</script>

<style lang="stylus" scoped>
image
  height: 100%
  width: 100%
.info-box
  margin: 30rpx 30rpx
  background: linear-gradient(0deg, #D9ECFF 0%, #F0F7FF 100%)
  border-radius: 20rpx
  padding: 40rpx 0
  display: flex
  align-items: center
.info-img
  width: 40rpx
  height: 40rpx
  margin-bottom: 20rpx
.info-line
  border-right: 2rpx solid #B7D6FF
.info-item
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  width: 50%
.info-label
  font-size: 26rpx
  color: #6E7E9B
  margin-bottom: 20rpx
.info-value
  font-weight: bold
  font-size: 28rpx
  color: #3D61AC
.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
.title-total
  font-size: 24rpx
  color: #999999
.total-num
  color: #3088FF
  margin-left: 4rpx
  margin-right: 4rpx
  font-weight: bold
  font-size: 26rpx

.label
  width: 160rpx
  font-size: 28rpx
  color: #404040

.input,
.picker
  flex: 1

.picker-value
  color: #666
.list-box
  margin-top: 40rpx

.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;
}
:deep(.uni-steps__column-circle )
  width: 24rpx !important
  height: 24rpx !important
  background: radial-gradient(circle, 
    #00C0FA 0%, 
    #015EEA 50%, 
    #FFFFFF 51%,  
    #FFFFFF 100%) !important
  border-radius: 50%
  border: 2rpx solid #015EEA
:deep(.uni-steps__column-title)
  font-size: 28rpx !important
  color: #006CFF !important
  margin-bottom: 24rpx
:deep(.uni-steps__column-desc)
  font-size: 28rpx
  color: #898989 !important
  line-height: 1.5
:deep(.uni-steps__column-text )
  padding: 16rpx 0 !important
  border: none
:deep(.uni-steps__column-line)
  background-color: #368BFF !important
:deep(.uni-steps__column-line--before)
  background-color:rgba(0,0,0,0) !important
:deep(.uni-date-x)
  background: rgba(0,0,0,0) !important
:deep(.uni-stat-box)
  background: rgba(0,0,0,0) !important
:deep(.uni-easyinput__content)
  background: rgba(0,0,0,0) !important
</style>