|
|
|
@ -2,26 +2,33 @@
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref, reactive } from 'vue'
|
|
|
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
|
|
|
import { getDetails, editClueUpdate } from "@/api/home";
|
|
|
|
|
import { showToast } from 'vant';
|
|
|
|
|
import { getDetails, editClueUpdate } from "@/api/index";
|
|
|
|
|
import { Navigate } from '@/utils/index'
|
|
|
|
|
import 'vant/es/toast/style'
|
|
|
|
|
let addProp = ref(false)
|
|
|
|
|
let editCode = ref(false)
|
|
|
|
|
let showcluePicker = ref(false)
|
|
|
|
|
const refForm = ref()
|
|
|
|
|
let addForm = reactive({
|
|
|
|
|
stageName: '',
|
|
|
|
|
record: [{val: ''}]
|
|
|
|
|
})
|
|
|
|
|
const refForm = ref()
|
|
|
|
|
const customInformation = ref("")
|
|
|
|
|
// let addForm = reactive({
|
|
|
|
|
// customInformation: ''
|
|
|
|
|
// // record: [{val: ''}]
|
|
|
|
|
// })
|
|
|
|
|
let customFieldName = {
|
|
|
|
|
text: 'name',
|
|
|
|
|
value: 'clueStageId'
|
|
|
|
|
}
|
|
|
|
|
let formData: any = ref({})
|
|
|
|
|
onLoad((option: any) => {
|
|
|
|
|
getDetails(option.id).then(res => {
|
|
|
|
|
let formData: any = ref({})
|
|
|
|
|
let index = 0
|
|
|
|
|
onLoad((option: any) => {
|
|
|
|
|
index = option.index
|
|
|
|
|
uni.showLoading({})
|
|
|
|
|
getDetails(option.id).then(res => {
|
|
|
|
|
uni.hideLoading()
|
|
|
|
|
formData.value = res.data
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
showToast('数据错误')
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
uni.hideLoading()
|
|
|
|
|
Navigate.show_info('数据错误')
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
uni.navigateBack({
|
|
|
|
|
delta: 1
|
|
|
|
@ -31,32 +38,51 @@ onLoad((option: any) => {
|
|
|
|
|
})
|
|
|
|
|
const cancellationFun = () => {
|
|
|
|
|
addProp.value = false
|
|
|
|
|
addForm.stageName = ''
|
|
|
|
|
addForm.record = [{val: ''}]
|
|
|
|
|
refForm.value.resetValidation()
|
|
|
|
|
customInformation.value = ''
|
|
|
|
|
// addForm.record = [{val: ''}]
|
|
|
|
|
// refForm.value.resetValidation()
|
|
|
|
|
}
|
|
|
|
|
const openAddProp = () => {
|
|
|
|
|
customInformation.value = formData.value.customInformation
|
|
|
|
|
addProp.value = true
|
|
|
|
|
}
|
|
|
|
|
interface activeObj {
|
|
|
|
|
id: number
|
|
|
|
|
labelName: string
|
|
|
|
|
}
|
|
|
|
|
const activeArr = ref<activeObj[]>([])
|
|
|
|
|
|
|
|
|
|
const activeArrFun = () => {
|
|
|
|
|
if (formData.value.clueLabelName != '') {
|
|
|
|
|
JSON.parse(formData.value.clueLabelName).forEach((t1: any) => {
|
|
|
|
|
formData.value.organizeEntities.forEach((t2: any) => {
|
|
|
|
|
let data = t2.labelEntityList.filter((t3: any) => t3.labelName == t1)[0]
|
|
|
|
|
if (data) {
|
|
|
|
|
activeArr.value.push({id: data.id, labelName: data.labelName})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const saveCode = async () => {
|
|
|
|
|
editCode.value = !editCode.value
|
|
|
|
|
editCode.value = !editCode.value
|
|
|
|
|
if (editCode.value == true && formData.value.clueLabelName) {
|
|
|
|
|
JSON.parse(formData.value.clueLabelName).forEach((t1: any) => {
|
|
|
|
|
formData.value.organizeEntities.forEach((t2: any) => {
|
|
|
|
|
let data = t2.labelEntityList.filter((t3: any) => t3.labelName == t1)[0]
|
|
|
|
|
if (data) {
|
|
|
|
|
activeArr.value.push({id: data.id, labelName: data.labelName})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
} else if(editCode.value == false && activeArr.value.length > 0) {
|
|
|
|
|
const res = await editClueUpdate({clueId: formData.value.clueId, clueLabelList: activeArr.value})
|
|
|
|
|
formData.value.clueLabelName = JSON.stringify(activeArr.value.map((item: any) => {
|
|
|
|
|
return item[Object.keys(item)[1]]
|
|
|
|
|
}))
|
|
|
|
|
activeArrFun()
|
|
|
|
|
} else if(editCode.value == false) {
|
|
|
|
|
const params = {
|
|
|
|
|
clueId: formData.value.clueId,
|
|
|
|
|
clueLabelList: activeArr.value,
|
|
|
|
|
customInformation: formData.value.customInformation,
|
|
|
|
|
clueStageId: formData.value.clueStageId,
|
|
|
|
|
clueStageName: formData.value.clueStageName
|
|
|
|
|
}
|
|
|
|
|
const res: any = await editClueUpdate(params)
|
|
|
|
|
Navigate.show_info('操作成功');
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
uni.$emit('updatePage', {index: index, clueLabelList: activeArr.value})
|
|
|
|
|
formData.value.clueLabelName = JSON.stringify(activeArr.value.map((item: any) => {
|
|
|
|
|
return item[Object.keys(item)[1]]
|
|
|
|
|
}) || "")
|
|
|
|
|
}
|
|
|
|
|
activeArr.value = []
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -69,85 +95,112 @@ const addClueCode = (id: number, labelName: string) => {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const onConfirm = (data: any) => {
|
|
|
|
|
// console.log("🚀 ~ file: index.vue:64 ~ onConfirm ~ res:", data.selectedOptions[0])
|
|
|
|
|
showcluePicker.value = false
|
|
|
|
|
editClueUpdate({clueId: formData.value.clueId, clueStageName: data.selectedOptions[0].name, clueStageId: data.selectedOptions[0].clueStageId}).then(res => {
|
|
|
|
|
formData.value.clueStageName = data.selectedOptions[0].name
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '操作成功',
|
|
|
|
|
icon: 'none'
|
|
|
|
|
})
|
|
|
|
|
showcluePicker.value = false
|
|
|
|
|
activeArrFun()
|
|
|
|
|
const params = {
|
|
|
|
|
clueId: formData.value.clueId,
|
|
|
|
|
clueLabelList: activeArr.value,
|
|
|
|
|
customInformation: formData.value.customInformation,
|
|
|
|
|
clueStageId: data.selectedOptions[0].clueStageId,
|
|
|
|
|
clueStageName: data.selectedOptions[0].name
|
|
|
|
|
}
|
|
|
|
|
editClueUpdate(params).then(res => {
|
|
|
|
|
uni.$emit('updatePage', {index: index, clueStageName: data.selectedOptions[0].name})
|
|
|
|
|
formData.value.clueStageName = data.selectedOptions[0].name
|
|
|
|
|
activeArr.value = []
|
|
|
|
|
Navigate.show_info('操作成功');
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const editInformation = () => {
|
|
|
|
|
activeArrFun()
|
|
|
|
|
const params = {
|
|
|
|
|
clueId: formData.value.clueId,
|
|
|
|
|
clueLabelList: activeArr.value,
|
|
|
|
|
customInformation: customInformation.value,
|
|
|
|
|
clueStageId: formData.value.clueStageId,
|
|
|
|
|
clueStageName: formData.value.clueStageName
|
|
|
|
|
}
|
|
|
|
|
editClueUpdate(params).then(res => {
|
|
|
|
|
uni.$emit('updatePage', {index: index, customInformation: customInformation.value})
|
|
|
|
|
formData.value.customInformation = customInformation.value
|
|
|
|
|
cancellationFun()
|
|
|
|
|
activeArr.value = []
|
|
|
|
|
Navigate.show_info('操作成功');
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const compareId = (id: number) => {
|
|
|
|
|
return activeArr.value.some(item => item.id == id)
|
|
|
|
|
}
|
|
|
|
|
const onRecordSubmit = () => {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
const onBack = () => {
|
|
|
|
|
uni.switchTab({
|
|
|
|
|
url: '/pages/index'
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const addRecord = () => {
|
|
|
|
|
addForm.record.push({val: ''})
|
|
|
|
|
console.log("🚀 ~ file: index.vue:23 ~ addRecord ~ addForm:", addForm)
|
|
|
|
|
}
|
|
|
|
|
// const addRecord = () => {
|
|
|
|
|
// addForm.record.push({val: ''})
|
|
|
|
|
// }
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<view>
|
|
|
|
|
<view>
|
|
|
|
|
<van-nav-bar
|
|
|
|
|
title="详情"
|
|
|
|
|
left-text="返回"
|
|
|
|
|
left-arrow
|
|
|
|
|
left-arrow
|
|
|
|
|
safe-area-inset-top
|
|
|
|
|
style="padding-top: var(--status-bar-height);"
|
|
|
|
|
@click-left="onBack"
|
|
|
|
|
/>
|
|
|
|
|
<view class="flex justify-between border-b-1 border-b-stone-300 items-center px-32rpx py-20rpx bg-teal-500">
|
|
|
|
|
<h2 class="title-doc-block text-base font-bold! border-b-stone-300 text-white">
|
|
|
|
|
<van-icon name="fire-o" color="#007aff" class="mr-10rpx"/>业务标签
|
|
|
|
|
业务标签
|
|
|
|
|
</h2>
|
|
|
|
|
<text class="block text-c7" @click="saveCode">{{ editCode ? '保存' : '打标' }}</text>
|
|
|
|
|
<text class="block text-c7 font-600" @click="saveCode">{{ editCode ? '保存' : '打标' }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<div v-if="editCode == false">
|
|
|
|
|
<view v-for="item in formData.organizeEntities">
|
|
|
|
|
<h2 class="title-doc-block mt-32rpx py-24rpx px-32rpx fs-14">{{ item.name }}</h2>
|
|
|
|
|
<view v-if="formData.clueLabelName" class="px-32rpx flex flex-wrap">
|
|
|
|
|
<view v-for="it in JSON.parse(formData.clueLabelName)" class="block-button mr-16rpx mb-16rpx" :class="{'tag-active': it == 3}">{{ it }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else>
|
|
|
|
|
<view v-if="editCode == false">
|
|
|
|
|
<!-- <view v-if="formData.organizeEntities && formData.organizeEntities.length > 0">
|
|
|
|
|
<view v-for="item in formData.organizeEntities">
|
|
|
|
|
<h2 class="title-doc-block mt-32rpx py-24rpx px-32rpx fs-14">{{ item.name }}</h2>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
</view> -->
|
|
|
|
|
<view v-if="formData.clueLabelName && JSON.parse(formData.clueLabelName).length != 0" class="px-32rpx flex flex-wrap">
|
|
|
|
|
<view v-for="it in JSON.parse(formData.clueLabelName)" style="background-color: #007aff; color: #fff;" class="block-button mr-16rpx mt-16rpx mb-16rpx" :class="{'tag-active': it == 3}">{{ it }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<van-empty v-else image-size="60rpx" description="未打标" />
|
|
|
|
|
</view>
|
|
|
|
|
<view v-else>
|
|
|
|
|
<view v-for="item in formData.organizeEntities">
|
|
|
|
|
<h2 class="title-doc-block mt-32rpx py-24rpx px-32rpx fs-14">{{ item.name }}</h2>
|
|
|
|
|
<view class="px-32rpx flex flex-wrap">
|
|
|
|
|
<view v-for="it in item.labelEntityList" class="block-button mr-16rpx mb-16rpx" :class="{'tag-active': compareId(it.id)}" @click="addClueCode(it.id, it.labelName)">{{ it.labelName }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</div>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="flex justify-between border-b-1 border-b-stone-300 items-center px-32rpx py-20rpx bg-teal-500">
|
|
|
|
|
<h2 class="title-doc-block text-base font-bold! text-c2 border-b-stone-300 text-white">
|
|
|
|
|
<van-icon name="fire-o" color="#007aff" class="mr-10rpx"/>线索阶段
|
|
|
|
|
线索阶段
|
|
|
|
|
</h2>
|
|
|
|
|
</view>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="formData.clueStageName"
|
|
|
|
|
is-link
|
|
|
|
|
readonly
|
|
|
|
|
label="阶段"
|
|
|
|
|
placeholder="选择线索阶段"
|
|
|
|
|
@click="showcluePicker = true"
|
|
|
|
|
/>
|
|
|
|
|
<div v-if="formData.otherClue">
|
|
|
|
|
<view class="flex justify-between border-b-1 border-b-stone-300 items-center px-32rpx py-20rpx bg-teal-500">
|
|
|
|
|
<h2 class="title-doc-block text-base font-bold! text-white"><van-icon name="fire-o" color="#007aff" class="mr-10rpx"/>自定义属性</h2>
|
|
|
|
|
</view>
|
|
|
|
|
<van-cell title="阶段" is-link :value="formData.clueStageName" @click="showcluePicker = true" />
|
|
|
|
|
<view v-if="formData.otherClue">
|
|
|
|
|
<view class="flex justify-between border-b-1 border-b-stone-300 items-center px-32rpx py-20rpx bg-teal-500">
|
|
|
|
|
<!-- <van-icon name="fire-o" color="#007aff" class="mr-10rpx font-600"/> -->
|
|
|
|
|
<h2 class="title-doc-block text-base font-bold! text-white">自定义属性</h2>
|
|
|
|
|
</view>
|
|
|
|
|
<van-cell-group>
|
|
|
|
|
<van-cell v-for="(it, key) in JSON.parse(formData.otherClue)" :title="key" :value="it" />
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
</div>
|
|
|
|
|
<van-cell title="备注" :label="formData.remark" />
|
|
|
|
|
</view>
|
|
|
|
|
<view>
|
|
|
|
|
<view class="flex justify-between border-b-1 border-b-stone-300 items-center px-32rpx py-20rpx bg-teal-500">
|
|
|
|
|
<h2 class="title-doc-block text-base font-bold! text-c2 border-b-stone-300 text-white">
|
|
|
|
|
客户资料
|
|
|
|
|
</h2>
|
|
|
|
|
<text class="block text-c7 font-600" @click="openAddProp">编辑</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<van-cell title="客户资料" :label="formData.customInformation || '未录入'" />
|
|
|
|
|
<!-- <view class="flex items-center v_cell px-32rpx" @click.stop="showcluePicker = true">
|
|
|
|
|
<view class="van-cell__title van-field__label"><label>阶段</label></view>
|
|
|
|
|
<view class="van-cell__value van-field__value text-left text-c2">{{ formData.clueStageName }}</view>
|
|
|
|
@ -182,46 +235,31 @@ const addRecord = () => {
|
|
|
|
|
</van-steps>
|
|
|
|
|
</view> -->
|
|
|
|
|
<van-popup v-model:show="addProp" :style="{ width: '80%', borderRadius: '7px' }">
|
|
|
|
|
<view>
|
|
|
|
|
<text class="title-doc-block text-base font-bold! block text-center pt-30rpx mt-15rpx">添加记录</text>
|
|
|
|
|
<van-form ref="refForm" @submit="onRecordSubmit">
|
|
|
|
|
<van-cell-group inset>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="addForm.stageName"
|
|
|
|
|
name="阶段名"
|
|
|
|
|
label="阶段名"
|
|
|
|
|
placeholder="阶段名"
|
|
|
|
|
:rules="[{ required: true, message: '请填写阶段名' }]"
|
|
|
|
|
>
|
|
|
|
|
<template #button>
|
|
|
|
|
<van-icon name="add" color="#18CC73" @click="addRecord" />
|
|
|
|
|
</template>
|
|
|
|
|
</van-field>
|
|
|
|
|
<van-field
|
|
|
|
|
v-for="(item, index) in addForm.record"
|
|
|
|
|
v-model="item.val"
|
|
|
|
|
autosize
|
|
|
|
|
clearable
|
|
|
|
|
type="textarea"
|
|
|
|
|
maxlength="50"
|
|
|
|
|
show-word-limit
|
|
|
|
|
label="记录-1"
|
|
|
|
|
placeholder="记录"
|
|
|
|
|
>
|
|
|
|
|
</van-field>
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
<div style="margin: 16px;" class="flex justify-around">
|
|
|
|
|
<van-button block class="w-30vw!" @click="cancellationFun">
|
|
|
|
|
取消
|
|
|
|
|
</van-button>
|
|
|
|
|
<van-button block type="primary" class="w-30vw!" native-type="submit">
|
|
|
|
|
提交
|
|
|
|
|
</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
</van-form>
|
|
|
|
|
</view>
|
|
|
|
|
<view>
|
|
|
|
|
<text class="title-doc-block text-base font-bold! block text-center pt-30rpx mt-15rpx">客户资料编辑</text>
|
|
|
|
|
<!-- <van-field
|
|
|
|
|
v-model="customInformation"
|
|
|
|
|
autosize
|
|
|
|
|
clearable
|
|
|
|
|
type="textarea"
|
|
|
|
|
maxlength="80"
|
|
|
|
|
show-word-limit
|
|
|
|
|
label="备注"
|
|
|
|
|
placeholder="客户资料"
|
|
|
|
|
>
|
|
|
|
|
</van-field> -->
|
|
|
|
|
<textarea v-model="customInformation" maxlength="140" placeholder="客户资料" class="p-15rpx text-sm" auto-height />
|
|
|
|
|
<view style="margin: 16px;" class="flex justify-around">
|
|
|
|
|
<van-button block class="w-30vw!" size="small" @click="cancellationFun">
|
|
|
|
|
取消
|
|
|
|
|
</van-button>
|
|
|
|
|
<van-button block type="primary" size="small" class="w-30vw!" @click="editInformation">
|
|
|
|
|
提交
|
|
|
|
|
</van-button>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</van-popup>
|
|
|
|
|
<van-popup v-model:show="showcluePicker" round position="bottom">
|
|
|
|
|
<van-popup v-model:show="showcluePicker" round position="bottom" class="popup">
|
|
|
|
|
<van-picker
|
|
|
|
|
:columns="formData.clueStageEntities"
|
|
|
|
|
@cancel="showcluePicker = false"
|
|
|
|
@ -255,7 +293,6 @@ const addRecord = () => {
|
|
|
|
|
height: 54rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 54rpx;
|
|
|
|
|
color: $uni-text-color-placeholder;
|
|
|
|
|
border: 1px solid $uni-border-color;
|
|
|
|
|
padding: 0 20rpx;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
@ -269,5 +306,11 @@ const addRecord = () => {
|
|
|
|
|
box-shadow: 0 2px 8px 0 rgba(0,0,0,.1);
|
|
|
|
|
margin-top: 15rpx;
|
|
|
|
|
color: $uni-text-color-placeholder;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// #ifdef APP-PLUS
|
|
|
|
|
::v-deep .popup .van-haptics-feedback {
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
line-height: 60rpx;
|
|
|
|
|
}
|
|
|
|
|
// #endif
|
|
|
|
|
</style>
|