帮扶
This commit is contained in:
497
packageB/priority/helpFilter.vue
Normal file
497
packageB/priority/helpFilter.vue
Normal file
@@ -0,0 +1,497 @@
|
|||||||
|
<template>
|
||||||
|
<view class="help-filter-page">
|
||||||
|
<view class="header">
|
||||||
|
<view class="back-btn" @click="goBack">
|
||||||
|
<uni-icons type="arrowleft" size="24" color="#fff" />
|
||||||
|
</view>
|
||||||
|
<view class="title">筛选和帮扶</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 筛选条件区域 -->
|
||||||
|
<view class="filter-section">
|
||||||
|
<view class="filter-item">
|
||||||
|
<view class="filter-label">人员姓名：</view>
|
||||||
|
<input class="filter-input" v-model="filters.personName" placeholder="请输入人员姓名" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="filter-item">
|
||||||
|
<view class="filter-label">身份证号：</view>
|
||||||
|
<input class="filter-input" v-model="filters.idCard" placeholder="请输入身份证号" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="filter-item">
|
||||||
|
<view class="filter-label">帮扶类型：</view>
|
||||||
|
<picker class="filter-picker" mode="selector" range="{{helpTypes}}" bindchange="onHelpTypeChange">
|
||||||
|
<view class="picker-text">{{filters.helpType || '请选择帮扶类型'}}</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="filter-item">
|
||||||
|
<view class="filter-label">帮扶人员：</view>
|
||||||
|
<input class="filter-input" v-model="filters.helperName" placeholder="请输入帮扶人员姓名" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="filter-item">
|
||||||
|
<view class="filter-label">所属区域：</view>
|
||||||
|
<picker class="filter-picker" mode="selector" range="{{regions}}" bindchange="onRegionChange">
|
||||||
|
<view class="picker-text">{{filters.region || '请选择所属区域'}}</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="date-range">
|
||||||
|
<view class="filter-label">帮扶时间：</view>
|
||||||
|
<view class="date-inputs">
|
||||||
|
<input class="date-input" v-model="filters.startDate" type="date" placeholder="开始日期" />
|
||||||
|
<view class="date-separator">至</view>
|
||||||
|
<input class="date-input" v-model="filters.endDate" type="date" placeholder="结束日期" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="filter-buttons">
|
||||||
|
<button class="query-btn" type="primary" @click="queryData">查询</button>
|
||||||
|
<button class="reset-btn" @click="resetFilters">重置</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 帮扶记录列表 -->
|
||||||
|
<view class="list-section">
|
||||||
|
<view class="list-header">
|
||||||
|
<view class="list-title">帮扶记录列表</view>
|
||||||
|
<view class="list-count">共{{helpRecords.length}}条记录</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="records-list">
|
||||||
|
<view class="record-item" v-for="record in helpRecords" :key="record.id">
|
||||||
|
<view class="record-header">
|
||||||
|
<view class="person-name">{{record.personName}}</view>
|
||||||
|
<view class="job-tag" @click="showJobRecommend(record)">{{record.jobTag}}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="record-info">
|
||||||
|
<view class="info-row">
|
||||||
|
<uni-icons type="call" size="14" color="#999" />
|
||||||
|
<span class="info-label">联系电话：</span>
|
||||||
|
<span class="info-value">{{record.phone}}</span>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-row">
|
||||||
|
<uni-icons type="card" size="14" color="#999" />
|
||||||
|
<span class="info-label">身份证号：</span>
|
||||||
|
<span class="info-value">{{record.idCard}}</span>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-row">
|
||||||
|
<uni-icons type="location" size="14" color="#999" />
|
||||||
|
<span class="info-label">所属区域：</span>
|
||||||
|
<span class="info-value">{{record.region}}</span>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-row">
|
||||||
|
<uni-icons type="person" size="14" color="#999" />
|
||||||
|
<span class="info-label">帮扶人员：</span>
|
||||||
|
<span class="info-value">{{record.helperName}}</span>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-row">
|
||||||
|
<uni-icons type="briefcase" size="14" color="#999" />
|
||||||
|
<span class="info-label">帮扶单位：</span>
|
||||||
|
<span class="info-value">{{record.helperUnit}}</span>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-row">
|
||||||
|
<uni-icons type="calendar" size="14" color="#999" />
|
||||||
|
<span class="info-label">帮扶日期：</span>
|
||||||
|
<span class="info-value">{{record.helpDate}}</span>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-row">
|
||||||
|
<uni-icons type="time" size="14" color="#999" />
|
||||||
|
<span class="info-label">下次联系：</span>
|
||||||
|
<span class="info-value">{{record.nextContactDate}}</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="record-actions">
|
||||||
|
<button class="detail-btn" @click="showDetail(record)">详情</button>
|
||||||
|
<button class="follow-btn" @click="followUp(record)">跟进</button>
|
||||||
|
<button class="recommend-btn" @click="showJobRecommend(record)">智能推荐</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { useRouter } from 'uni-app'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'HelpFilter',
|
||||||
|
setup() {
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
// 筛选条件
|
||||||
|
const filters = reactive({
|
||||||
|
personName: '',
|
||||||
|
idCard: '',
|
||||||
|
helpType: '',
|
||||||
|
helperName: '',
|
||||||
|
region: '',
|
||||||
|
startDate: '',
|
||||||
|
endDate: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 帮扶类型选项
|
||||||
|
const helpTypes = ref(['就业帮扶', '技能培训', '创业支持', '政策咨询'])
|
||||||
|
|
||||||
|
// 区域选项
|
||||||
|
const regions = ref(['喀什地区/疏勒县', '喀什地区/疏附县', '喀什地区/伽师县', '喀什地区/岳普湖县'])
|
||||||
|
|
||||||
|
// 帮扶记录数据
|
||||||
|
const helpRecords = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
personName: '王小明',
|
||||||
|
jobTag: '招聘岗位推荐',
|
||||||
|
phone: '13912345678',
|
||||||
|
idCard: '371302198801112024',
|
||||||
|
region: '喀什地区/疏勒县',
|
||||||
|
helperName: '新兴社区管理员',
|
||||||
|
helperUnit: '新兴社区',
|
||||||
|
helpDate: '2023-11-05',
|
||||||
|
nextContactDate: '2023-11-06'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
personName: '赵小美',
|
||||||
|
jobTag: '招聘岗位推荐',
|
||||||
|
phone: '15912345678',
|
||||||
|
idCard: '371302198801112024',
|
||||||
|
region: '喀什地区/疏勒县',
|
||||||
|
helperName: '新兴社区管理员',
|
||||||
|
helperUnit: '新兴社区',
|
||||||
|
helpDate: '2023-11-05',
|
||||||
|
nextContactDate: '2023-11-06'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
personName: '赵小美',
|
||||||
|
jobTag: '招聘岗位推荐',
|
||||||
|
phone: '15912345678',
|
||||||
|
idCard: '371302198801112024',
|
||||||
|
region: '喀什地区/疏勒县',
|
||||||
|
helperName: '新兴社区管理员',
|
||||||
|
helperUnit: '新兴社区',
|
||||||
|
helpDate: '2023-11-05',
|
||||||
|
nextContactDate: '2023-11-06'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
// 返回上一页
|
||||||
|
const goBack = () => {
|
||||||
|
router.back()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置筛选条件
|
||||||
|
const resetFilters = () => {
|
||||||
|
Object.keys(filters).forEach(key => {
|
||||||
|
filters[key] = ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询数据
|
||||||
|
const queryData = () => {
|
||||||
|
// 这里是模拟查询，实际项目中应该调用API
|
||||||
|
console.log('查询条件:', filters)
|
||||||
|
// 实际开发中这里应该调用接口获取数据
|
||||||
|
// fetchHelpRecords(filters)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示详情
|
||||||
|
const showDetail = (record) => {
|
||||||
|
console.log('查看详情:', record)
|
||||||
|
// 跳转到详情页面
|
||||||
|
// router.push({ path: '/detail', query: { id: record.id } })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 跟进
|
||||||
|
const followUp = (record) => {
|
||||||
|
console.log('跟进记录:', record)
|
||||||
|
// 跳转到跟进页面
|
||||||
|
router.push({ path: '/packageB/priority/helpFollow', query: { personId: record.id, personName: record.personName } })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 智能推荐
|
||||||
|
const showJobRecommend = (record) => {
|
||||||
|
console.log('智能推荐:', record)
|
||||||
|
// 跳转到推荐页面
|
||||||
|
// router.push({ path: '/recommend', query: { id: record.id } })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 帮扶类型选择变化
|
||||||
|
const onHelpTypeChange = (e) => {
|
||||||
|
filters.helpType = helpTypes.value[e.detail.value]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 区域选择变化
|
||||||
|
const onRegionChange = (e) => {
|
||||||
|
filters.region = regions.value[e.detail.value]
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 组件挂载时的初始化逻辑
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
filters,
|
||||||
|
helpTypes,
|
||||||
|
regions,
|
||||||
|
helpRecords,
|
||||||
|
goBack,
|
||||||
|
resetFilters,
|
||||||
|
queryData,
|
||||||
|
showDetail,
|
||||||
|
followUp,
|
||||||
|
showJobRecommend,
|
||||||
|
onHelpTypeChange,
|
||||||
|
onRegionChange
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.help-filter-page {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background-color: #1989fa;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn {
|
||||||
|
padding: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-section {
|
||||||
|
background-color: #fff;
|
||||||
|
margin-top: 100rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
width: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-input {
|
||||||
|
flex: 1;
|
||||||
|
height: 80rpx;
|
||||||
|
border: 1rpx solid #e0e0e0;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-picker {
|
||||||
|
flex: 1;
|
||||||
|
height: 80rpx;
|
||||||
|
border: 1rpx solid #e0e0e0;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-range {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-inputs {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-input {
|
||||||
|
flex: 1;
|
||||||
|
height: 80rpx;
|
||||||
|
border: 1rpx solid #e0e0e0;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-separator {
|
||||||
|
margin: 0 20rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-btn {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #1989fa;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border: none;
|
||||||
|
height: 88rpx;
|
||||||
|
line-height: 88rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-btn {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #333;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border: 1rpx solid #e0e0e0;
|
||||||
|
height: 88rpx;
|
||||||
|
line-height: 88rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-section {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-count {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-item {
|
||||||
|
border: 1rpx solid #e0e0e0;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.person-name {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-tag {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #ff6600;
|
||||||
|
padding: 5rpx 15rpx;
|
||||||
|
border: 1rpx solid #ff6600;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-info {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
color: #666;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
color: #333;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-btn {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #e8f3ff;
|
||||||
|
color: #1989fa;
|
||||||
|
font-size: 28rpx;
|
||||||
|
border: none;
|
||||||
|
height: 70rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow-btn {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #e6f7ff;
|
||||||
|
color: #1890ff;
|
||||||
|
font-size: 28rpx;
|
||||||
|
border: none;
|
||||||
|
height: 70rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommend-btn {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #f6ffed;
|
||||||
|
color: #52c41a;
|
||||||
|
font-size: 28rpx;
|
||||||
|
border: none;
|
||||||
|
height: 70rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
442
packageB/priority/helpFollow.vue
Normal file
442
packageB/priority/helpFollow.vue
Normal file
@@ -0,0 +1,442 @@
|
|||||||
|
<template>
|
||||||
|
<view class="help-follow-page">
|
||||||
|
<view class="header">
|
||||||
|
<view class="back-btn" @click="goBack">
|
||||||
|
<uni-icons type="arrowleft" size="24" color="#fff" />
|
||||||
|
</view>
|
||||||
|
<view class="title">跟进</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 人员信息卡片 -->
|
||||||
|
<view class="person-info-card">
|
||||||
|
<view class="info-item">
|
||||||
|
<uni-icons type="person" size="20" color="#1989fa" />
|
||||||
|
<span class="info-label">人员姓名</span>
|
||||||
|
<span class="info-value">{{personInfo.personName}}</span>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<uni-icons type="briefcase" size="20" color="#1989fa" />
|
||||||
|
<span class="info-label">帮扶类型</span>
|
||||||
|
<span class="info-value">{{personInfo.helpType}}</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 新增跟进记录 -->
|
||||||
|
<view class="follow-form-section">
|
||||||
|
<view class="section-title">新增跟进记录</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label required">跟进日期：</view>
|
||||||
|
<input class="form-input date-input" v-model="followData.followDate" type="date" placeholder="请选择跟进日期" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label required">跟进方式：</view>
|
||||||
|
<picker class="form-picker" mode="selector" range="{{followMethods}}" @change="onFollowMethodChange">
|
||||||
|
<view class="picker-text">{{followData.followMethod || '请选择跟进方式'}}</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label required">跟进内容：</view>
|
||||||
|
<textarea class="form-textarea" v-model="followData.followContent" placeholder="请输入跟进内容" rows="4"></textarea>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label required">跟进结果：</view>
|
||||||
|
<textarea class="form-textarea" v-model="followData.followResult" placeholder="请输入跟进结果" rows="3"></textarea>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">下一步计划：</view>
|
||||||
|
<textarea class="form-textarea" v-model="followData.nextPlan" placeholder="请输入下一步计划" rows="3"></textarea>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">下次联系：</view>
|
||||||
|
<input class="form-input date-input" v-model="followData.nextContactDate" type="date" placeholder="请选择下次联系日期" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-buttons">
|
||||||
|
<button class="save-btn" type="primary" @click="saveFollowRecord">保存跟进</button>
|
||||||
|
<button class="reset-btn" @click="resetForm">重置</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 跟进历史记录 -->
|
||||||
|
<view class="history-section">
|
||||||
|
<view class="section-header">
|
||||||
|
<view class="section-title">跟进历史记录</view>
|
||||||
|
<view class="record-count">共{{historyRecords.length}}条记录</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="history-list">
|
||||||
|
<view class="history-item" v-for="record in historyRecords" :key="record.id">
|
||||||
|
<view class="history-header">
|
||||||
|
<uni-icons type="time" size="16" color="#1989fa" />
|
||||||
|
<span class="history-date">{{record.date}}</span>
|
||||||
|
</view>
|
||||||
|
<view class="history-content">
|
||||||
|
<view class="history-row">
|
||||||
|
<span class="history-label">跟进方式：</span>
|
||||||
|
<span class="history-value">{{record.method}}</span>
|
||||||
|
</view>
|
||||||
|
<view class="history-row">
|
||||||
|
<span class="history-label">跟进人：</span>
|
||||||
|
<span class="history-value">{{record.follower}}</span>
|
||||||
|
</view>
|
||||||
|
<view class="history-row">
|
||||||
|
<span class="history-label">跟进内容：</span>
|
||||||
|
<span class="history-value">{{record.content}}</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { useRouter, useRoute } from 'uni-app'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'HelpFollow',
|
||||||
|
setup() {
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
// 人员信息
|
||||||
|
const personInfo = reactive({
|
||||||
|
personName: '王小美',
|
||||||
|
helpType: '招聘岗位推荐'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 跟进方式选项
|
||||||
|
const followMethods = ref(['电话', '微信', '邮件', '上门拜访', '视频会议', '其他'])
|
||||||
|
|
||||||
|
// 跟进表单数据
|
||||||
|
const followData = reactive({
|
||||||
|
followDate: '',
|
||||||
|
followMethod: '',
|
||||||
|
followContent: '',
|
||||||
|
followResult: '',
|
||||||
|
nextPlan: '',
|
||||||
|
nextContactDate: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 历史记录数据
|
||||||
|
const historyRecords = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
date: '2025-11-05',
|
||||||
|
method: '电话',
|
||||||
|
follower: '新兴社区管理员',
|
||||||
|
content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
date: '2025-11-05',
|
||||||
|
method: '电话',
|
||||||
|
follower: '新兴社区管理员',
|
||||||
|
content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
// 返回上一页
|
||||||
|
const goBack = () => {
|
||||||
|
router.back()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置表单
|
||||||
|
const resetForm = () => {
|
||||||
|
Object.keys(followData).forEach(key => {
|
||||||
|
followData[key] = ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存跟进记录
|
||||||
|
const saveFollowRecord = () => {
|
||||||
|
// 表单验证
|
||||||
|
if (!followData.followDate) {
|
||||||
|
uni.showToast({ title: '请选择跟进日期', icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!followData.followMethod) {
|
||||||
|
uni.showToast({ title: '请选择跟进方式', icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!followData.followContent) {
|
||||||
|
uni.showToast({ title: '请输入跟进内容', icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!followData.followResult) {
|
||||||
|
uni.showToast({ title: '请输入跟进结果', icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 这里是模拟保存，实际项目中应该调用API
|
||||||
|
console.log('保存跟进记录:', followData)
|
||||||
|
|
||||||
|
// 保存成功后添加到历史记录列表
|
||||||
|
const newRecord = {
|
||||||
|
id: historyRecords.value.length + 1,
|
||||||
|
date: followData.followDate,
|
||||||
|
method: followData.followMethod,
|
||||||
|
follower: '当前登录用户', // 实际应该从登录信息中获取
|
||||||
|
content: followData.followContent
|
||||||
|
}
|
||||||
|
historyRecords.value.unshift(newRecord)
|
||||||
|
|
||||||
|
// 清空表单
|
||||||
|
resetForm()
|
||||||
|
|
||||||
|
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 跟进方式选择变化
|
||||||
|
const onFollowMethodChange = (e) => {
|
||||||
|
followData.followMethod = followMethods.value[e.detail.value]
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 组件挂载时的初始化逻辑
|
||||||
|
// 可以从路由参数中获取人员ID等信息
|
||||||
|
console.log('路由参数:', route.query)
|
||||||
|
|
||||||
|
// 实际项目中应该根据ID加载人员信息和历史记录
|
||||||
|
// loadPersonInfo(route.query.personId)
|
||||||
|
// loadHistoryRecords(route.query.personId)
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
personInfo,
|
||||||
|
followMethods,
|
||||||
|
followData,
|
||||||
|
historyRecords,
|
||||||
|
goBack,
|
||||||
|
resetForm,
|
||||||
|
saveFollowRecord,
|
||||||
|
onFollowMethodChange
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.help-follow-page {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background-color: #1989fa;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn {
|
||||||
|
padding: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.person-info-card {
|
||||||
|
background-color: #fff;
|
||||||
|
margin-top: 100rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow-form-section {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-section {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-count {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.required::before {
|
||||||
|
content: '*';
|
||||||
|
color: #ff4d4f;
|
||||||
|
margin-right: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
border: 1rpx solid #e0e0e0;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-input {
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-picker {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
border: 1rpx solid #e0e0e0;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-textarea {
|
||||||
|
width: 100%;
|
||||||
|
border: 1rpx solid #e0e0e0;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
min-height: 150rpx;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #1989fa;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border: none;
|
||||||
|
height: 88rpx;
|
||||||
|
line-height: 88rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-btn {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #333;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border: 1rpx solid #e0e0e0;
|
||||||
|
height: 88rpx;
|
||||||
|
line-height: 88rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item {
|
||||||
|
border: 1rpx solid #e0e0e0;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
gap: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-date {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #1989fa;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-content {
|
||||||
|
padding-left: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-row {
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-label {
|
||||||
|
color: #666;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-value {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
26
pages.json
26
pages.json
@@ -420,8 +420,30 @@
|
|||||||
"navigationBarTitleTextSize": "30rpx"
|
"navigationBarTitleTextSize": "30rpx"
|
||||||
// "navigationStyle": "custom"
|
// "navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
]
|
{
|
||||||
|
"path" : "priority/helpFilter",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : "筛选和帮扶",
|
||||||
|
"navigationBarTitleTextSize": "30rpx",
|
||||||
|
"navigationBarBackgroundColor": "#1989fa",
|
||||||
|
"navigationBarTextStyle": "white",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "priority/helpFollow",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : "跟进",
|
||||||
|
"navigationBarTitleTextSize": "30rpx",
|
||||||
|
"navigationBarBackgroundColor": "#1989fa",
|
||||||
|
"navigationBarTextStyle": "white",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"root": "packageRc",
|
"root": "packageRc",
|
||||||
|
|||||||
Reference in New Issue
Block a user