主分支：2025年8月12日 - 合并前
This commit is contained in:
PC-202311141343\Administrator
268
src/pages/business/CRM/marketInformation/beCurrentDetail.vue
Normal file
268
src/pages/business/CRM/marketInformation/beCurrentDetail.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<view class="con-body">
|
||||
<view class="con-bg">
|
||||
<!-- 头部 -->
|
||||
<customHeader ref="customHeaderRef" :title="'通用表单添加'" :leftFlag="true" :rightFlag="true">
|
||||
<template #right>
|
||||
<view class="head-right" @click="submitForm">
|
||||
<uni-icons custom-prefix="iconfont" type="icon-phonebaocun" size="22"
|
||||
color="#B7D2FF"></uni-icons>保存
|
||||
</view>
|
||||
</template>
|
||||
</customHeader>
|
||||
|
||||
<!-- 高度来避免头部遮挡 -->
|
||||
<view class="top-height"></view>
|
||||
|
||||
<!-- 正文内容 -->
|
||||
<view class="white-bg">
|
||||
<view class="form-con">
|
||||
<uni-forms ref="formRef" :model="formData" :rules="rules" label-width="100px">
|
||||
<uni-forms-item label="客户名称" name="cusName" class="f-c-right">
|
||||
<view @click="chooseCustomer" class="form-item-container">
|
||||
<text class="name">{{ formData.cusName || '点击选择客户' }}</text>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="通用表单类型" name="generalFormType" class="f-c-right">
|
||||
<picker @change="onGeneralFormTypeChange" :value="generalFormTypeIndex" :range="array"
|
||||
:range-key="'name'">
|
||||
<view class="picker">
|
||||
{{ array[generalFormTypeIndex]?.name || '请选择通用表单类型' }}
|
||||
<uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item label="信息内容" name="informationContent" required
|
||||
class="uni-forms-item is-direction-top is-top">
|
||||
<uni-easyinput type="textarea" autoHeight v-model="formData.informationContent"
|
||||
placeholder="请输入信息内容" class="form-texarea" />
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<view class="footer-con">
|
||||
<button class="btn-default" type="default" @click="handleDelete" size="mini">删 除</button>
|
||||
<button class="btn-primary" type="primary" @click="submitForm" size="mini">保存/修改</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
reactive,
|
||||
onUnmounted,
|
||||
computed
|
||||
} from 'vue'
|
||||
import customHeader from '@/components/customHeader.vue'
|
||||
import {
|
||||
getGuestList
|
||||
} from '@/api/business.js'
|
||||
import {
|
||||
isEmpty
|
||||
} from '@/utils/validate.js'
|
||||
import {
|
||||
crmMarketInformationAdd,crminformationItemForDetail,crmMarketInformationDelete
|
||||
} from '@/api/crm/api_ys.js'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { useMessage } from '@/utils/message.js'
|
||||
import cache from '@/utils/cache.js'
|
||||
let customerUser = reactive({})
|
||||
// 客户相关
|
||||
const guestList = ref([])
|
||||
const guestArr = ref([])
|
||||
const guestIndex = ref(0)
|
||||
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
cusId: null,
|
||||
cusName: null,
|
||||
generalFormType:"专项市场调研信息",//通用表单类型
|
||||
informationContent: "", //信息内容
|
||||
picture: "", //、图片
|
||||
photos: null,
|
||||
description: null,
|
||||
informationType:"通用表单" //信息类型
|
||||
})
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
cusName: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请选择客户'
|
||||
}]
|
||||
},
|
||||
generalFormType: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请选择通用表单类型'
|
||||
}]
|
||||
},
|
||||
informationContent: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请输入信息内容'
|
||||
}]
|
||||
},
|
||||
}
|
||||
const imgList = ref([])
|
||||
|
||||
// picker 相关
|
||||
const index = ref(0)
|
||||
const array = ref([{
|
||||
id: 0,
|
||||
name: '专项市场调研信息'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '供货改进需求信息'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '客户赞扬、抱怨信息'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '领导承诺'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '待办事项'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '备忘录'
|
||||
}
|
||||
|
||||
])
|
||||
|
||||
const generalFormTypeIndex = ref(0)
|
||||
|
||||
// 表单引用 & 客户选择器引用
|
||||
const formRef = ref(null)
|
||||
const customHeaderRef = ref(null)
|
||||
// 选择客户页面跳转
|
||||
function chooseCustomer() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/business/CRM/chooseCus'
|
||||
})
|
||||
}
|
||||
//定义数据接收的值
|
||||
let selectedCustomer = reactive(null)
|
||||
|
||||
//监听时间
|
||||
onMounted(() => {
|
||||
uni.$on('onCustomerSelected', handleCustomerSelected)
|
||||
})
|
||||
//取消监听
|
||||
onUnmounted(() => {
|
||||
uni.$off('onCustomerSelected', handleCustomerSelected)
|
||||
})
|
||||
|
||||
//处理 接收数据
|
||||
const handleCustomerSelected = (data) => {
|
||||
formData.value.cusName = data.cusName
|
||||
formData.value.cusId = data.cusId
|
||||
}
|
||||
// 提交表单
|
||||
const submitForm = async () => {
|
||||
try {
|
||||
// 表单校验
|
||||
await formRef.value.validate()
|
||||
const res = await crmMarketInformationAdd(formData.value);
|
||||
console.log(res)
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
})
|
||||
uni.$emit('refreshMarketOpportunityList')
|
||||
uni.navigateBack(1)
|
||||
} catch (err) {
|
||||
console.log('表单验证失败:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const onGeneralFormTypeChange = (e) => {
|
||||
generalFormTypeIndex.value = e.detail.value
|
||||
console.log('generalFormTypeIndex:', array.value[e.detail.value]?.name)
|
||||
formData.value.generalFormType = array.value[e.detail.value]?.name || ''
|
||||
}
|
||||
//定义查询参数
|
||||
const queryParams = ref({
|
||||
informationId: 0
|
||||
})
|
||||
onMounted(() => {
|
||||
crminformationItemForDetail1()
|
||||
})
|
||||
onLoad(options => {
|
||||
queryParams.value.informationId = options.informationId
|
||||
})
|
||||
const dataList = ref([])
|
||||
function crminformationItemForDetail1() {
|
||||
crminformationItemForDetail(queryParams.value).then(res => {
|
||||
formData.value = res.rows[0]
|
||||
})
|
||||
}
|
||||
// 根据ID删除表单
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
|
||||
const res = await crmMarketInformationDelete(formData.value);
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
})
|
||||
uni.$emit('refreshMarketOpportunityList')
|
||||
uni.navigateBack(1)
|
||||
} catch (err) {
|
||||
console.log('表单验证失败:', err)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.white-bg {
|
||||
width: 750rpx;
|
||||
padding: 30rpx 0 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.form-con {
|
||||
/* #ifdef APP-PLUS */
|
||||
height: calc(120vh - 100px)
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS */
|
||||
height:calc(120vh - 80px)
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
:deep(.uni-date-x) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:deep(.uni-date-x .icon-calendar) {
|
||||
float: right;
|
||||
margin-top: 15rpx;
|
||||
margin-right: 20rpx;
|
||||
background: url('../../../static/images/business/icon-date.png') no-repeat;
|
||||
background-size: 32rpx 35rpx;
|
||||
width: 32rpx;
|
||||
height: 35rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-date-x .icon-calendar::before) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.uni-date-x .uni-date__x-input) {
|
||||
padding-left: 20rpx;
|
||||
color: #919191;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user