Skip to content

W
wangxiaolu-sfa-ui
提交 67171863 authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

feat(conventionaldisplay.vue): 新增：常规陈列功能接口对接完毕！外层售点稽核任务接口对接完成！

上级 31e332d1
显示空白字符变更
内嵌 并排
正在显示 包含 306 行增加 和 74 行删除
src/api/mobile/audit_activity/sales_point_inspection.js
浏览文件 @ 67171863
......@@ -26,9 +26,10 @@ export function createInspectionTaskAPI(data) {
}
// 售点稽查-创建/修改任务明细（4 个tab页）
export function createInspectionTaskDetailAPI(params) {
export function createInspectionTaskDetailAPI(data) {
return request({
url: '/operation/risk/create/i_store',
params
url: '/operation/risk/core/i_store_detail',
method: 'POST',
data
})
}
src/views/mobile/pages/audit_activity/sales_point_inspection/examine/inspectionTask/index.vue
浏览文件 @ 67171863
......@@ -13,14 +13,15 @@
<van-image fit="scale-down"
width="2.25rem"
height="3.5rem"
:src="form.storePicture || form.commitStorePicture[0]?.url"
:src="form.storePicture"
@click="previewStoreImage"></van-image>
</div>
<div class="terminal-info">
<div class="terminal-name">
<span>终端名称：</span>
<van-field v-model="form.storeName"
placeholder="请输入终端名" />
placeholder="请输入终端名"
@change="handleStoreNameChange" />
</div>
<p>终端编码：P0500052306</p>
<p>经销商：秦皇岛红朗森商贸有限公司</p>
......@@ -46,7 +47,6 @@
<van-uploader :max-count="1"
accept="image/*"
capture="camera"
reupload
:model-value="form.commitStorePicture"
:after-read="commitStorePhotosRead"
preview-size="78"
......@@ -76,16 +76,21 @@
swipeable
sticky>
<van-tab title="常规陈列">
<convention />
<convention :isInitializing="isInitializing"
:form="form"
ref="conventionRef" />
</van-tab>
<van-tab title="档期陈列">
<scheduleDisplay />
<scheduleDisplay :rstId="form.rstId"
:form="form" />
</van-tab>
<van-tab title="档期补差">
<scheduleAdjustment />
<scheduleAdjustment :rstId="form.rstId"
:form="form" />
</van-tab>
<van-tab title="品类信息">
<categoryInfomation />
<categoryInfomation :rstId="form.rstId"
:form="form" />
</van-tab>
</van-tabs>
<!-- 任务总结 -->
......@@ -96,7 +101,8 @@
<template #input>
<van-checkbox-group v-model="form.lhldArr"
direction="horizontal"
shape="square">
shape="square"
@change="handleLhldArrChange">
<van-checkbox name="礼盒">礼盒</van-checkbox>
<van-checkbox name="礼袋">礼袋</van-checkbox>
</van-checkbox-group>
......@@ -106,13 +112,15 @@
label="我品 SKU 总数："
type="number"
placeholder="请输入"
label-align="top" />
label-align="top"
@change="handleSkuNumChange" />
<van-field v-model="form.remark"
label="备注："
placeholder="请输入"
label-align="top"
type="textarea"
border />
border
@change="handleRemarkChange" />
<!-- 大日期产品照片 -->
<div class="header-photo-section">
<van-field label="大日期产品照片"
......@@ -121,7 +129,6 @@
<van-uploader :max-count="4"
accept="image/*"
capture="camera"
reupload
:model-value="form.longTimePictureArr"
:after-read="longTimePictureArrRead"
preview-size="78"
......@@ -132,6 +139,14 @@
</div>
</div>
</div>
<!-- 加载进度 -->
<van-overlay :show="isInitializing">
<van-loading v-if="isInitializing"
vertical
color="#f12528"
size="40"
text-color="#f12528">加载中...</van-loading>
</van-overlay>
</div>
</template>
......@@ -144,24 +159,29 @@ import scheduleAdjustment from './tabs/scheduleAdjustment.vue'
import categoryInfomation from './tabs/categoryInfomation.vue'
import { showImagePreview } from 'vant';
import useUserStore from '@/store/modules/user'
import { v4 as uuidv4 } from 'uuid'
import { v4 as uuidv4 } from 'uuid';
const router = useRouter()
const route = useRoute()
const conventionRef = ref(null)
/*************** 稽查任务总体 ***************/
const isInitializing = ref(true)
const form = reactive({ // 当前页信息总对象
selectedType: [], // 门店类型
storePicture: route.query.storePicture, // 门店照片（原始门店照片）
storeName: route.query.storeName, // 门店名称
rstId: '', // 稽查任务 ID（获取详情接口有则保存，没有则主动新建一次并获取 id）
storePicture: '', // 门店照片（原始门店照片）
storeName: '', // 门店名称
storeCode: route.query.storeCode, // 门店编码
dealersName: route.query.dealersName, // 经销商名称
storeAddr: route.query.storeAddr, // 门店地址
commitStorePicture: [], // 上报拍摄的门店照片
dealersName: '', // 经销商名称
storeAddr: '', // 门店地址
lhldArr: [], // 其他-礼盒礼袋是否在售
skuNum: '', // 我品 SKU 总数
remark: '', // 备注
longTimePictureArr: [], // 大日期产品照片
// 前端特有属性和后端接口不一致
commitStorePicture: [], // 上报拍摄的门店照片
selectedType: [], // 门店类型
})
// 稽查任务详情
......@@ -169,7 +189,44 @@ const getInspectionTaskDetailFn = async () => {
const res = await getInspectionTaskDetailAPI({
storeCode: form.storeCode
})
console.log(res)
if (res.data) {
Object.assign(form, res.data)
const { storeName, lhldArr, longTimePictureArr, storePicture, storeType, skuNum, cgclRiskRArr } = res.data
// 终端照片取值优先级：1. 路由传递 2. 详情接口返回(门头照) 3. 空着
if (route.query.storePicture) form.storePicture = route.query.storePicture
if (!storeName) form.storeName = route.query.storeName
if (!lhldArr) form.lhldArr = []
if (!longTimePictureArr) form.longTimePictureArr = []
else {
// 前端特有结构数据格式处理
form.longTimePictureArr = longTimePictureArr?.map(o => ({
url: o
}))
}
if (skuNum === 0) form.skuNum = ''
if (!cgclRiskRArr) form.cgclRiskRArr = []
// 前端特有属性回显数值
if (storePicture) form.commitStorePicture = [{
url: form.storePicture
}]
if (storeType) form.selectedType = [storeType]
} else {
// 没有的话调用新建接口，得到一个总体稽查任务 id
const res = await createInspectionTaskAPI({
storeCode: form.storeCode,
})
form.rstId = res.data.rstId
}
nextTick(() => {
isInitializing.value = false
conventionRef.value.init()
})
// 一定在这里获取地理位置（保证稽查任务 id 创建完毕）
getLocationFn()
}
getInspectionTaskDetailFn()
......@@ -180,6 +237,16 @@ const previewStoreImage = () => {
})
}
// 终端门店名称修改
const handleStoreNameChange = async () => {
await createInspectionTaskAPI({
storeCode: form.storeCode,
rstId: form.rstId,
rStoreName: form.storeName // 修改门店名称
})
showNotify({ type: 'success', message: '门店名称修改成功' })
}
/*************** 地理定位 ***************/
const addressStr = ref('')
const addressLoading = ref(true)
......@@ -195,8 +262,17 @@ const getLocationFn = () => {
})
const { standard_address } = res.result.formatted_addresses
addressStr.value = standard_address
// 准备给后台保存的参数
const { province, city } = res.result.address_component
addressLoading.value = false
await createInspectionTaskAPI({
rstId: form.rstId,
storeCode: form.storeCode,
province: province,
city: city,
address: standard_address,
coordinates: JSON.stringify([lat, lng])
})
},
function (error) {
showDialog({
......@@ -217,7 +293,7 @@ const getLocationFn = () => {
})
}
}
getLocationFn()
const handleClickLocation = () => {
addressLoading.value = true
setTimeout(() => {
......@@ -228,43 +304,104 @@ const handleClickLocation = () => {
/*************** 门头照上传 ***************/
// 上传照片
const commitStorePhotosRead = async (file) => {
const pictureUrl = await uploadFileToOSSAPI(`risk/${form.storeCode}storeFrontPhoto/${useUserStore().userInfo.employeeNo}/${uuidv4()}.png`, file.file)
const pictureUrl = await uploadFileToOSSAPI(`risk/storeFrontPhoto/${useUserStore().empInfo.empNo}/${form.storeCode}.png`, file.file)
form.commitStorePicture = [{
url: pictureUrl
}]
await createInspectionTaskAPI({
storeCode: form.storeCode,
rstId: form.rstId,
storePicture: pictureUrl
})
if (!form.storePicture) form.storePicture = pictureUrl
showNotify({ type: 'success', message: '门头照，上传成功' })
}
// 删除照片
const deleteCommitStorePhotos = async () => {
form.commitStorePicture = []
await createInspectionTaskAPI({
storeCode: form.storeCode,
rstId: form.rstId,
storePicture: ""
})
if (!route.query.storePicture) form.storePicture = ""
showNotify({ type: 'success', message: '门头照，删除成功' })
}
/*************** 门店类型 ***************/
const typeOptions = ref(typeOption); // 门店类型
const typeOptions = ref(typeOption) // 门店类型
const showTypePopup = ref(false)
// 确认门店类型
const handleTypeConfirm = ({ selectedValues }) => {
form.selectedType = selectedValues;
showTypePopup.value = false;
};
const handleTypeConfirm = async ({ selectedValues }) => {
form.selectedType = selectedValues
showTypePopup.value = false
await createInspectionTaskAPI({
storeCode: form.storeCode,
rstId: form.rstId,
storeType: selectedValues.join(',')
})
}
/*************** tabs 组 ***************/
const active = ref(0)
/*************** 其他信息填写 ***************/
// 礼盒礼袋在售
const handleLhldArrChange = async () => {
if (isInitializing.value) return
await createInspectionTaskAPI({
storeCode: form.storeCode,
rstId: form.rstId,
lhldArr: form.lhldArr
})
showNotify({ type: 'success', message: '礼盒礼袋在售，修改成功' })
}
// 我品 SKU 总数
const handleSkuNumChange = async () => {
await createInspectionTaskAPI({
storeCode: form.storeCode,
rstId: form.rstId,
skuNum: form.skuNum * 1
})
showNotify({ type: 'success', message: '我品 SKU 总数，修改成功' })
}
/****** 大日期产品照片 ***************/
// 备注
const handleRemarkChange = async () => {
await createInspectionTaskAPI({
storeCode: form.storeCode,
rstId: form.rstId,
remark: form.remark
})
showNotify({ type: 'success', message: '备注，修改成功' })
}
// 大日期照片上传
const longTimePictureArrRead = async (file) => {
const pictureUrl = await uploadFileToOSSAPI(`risk/${form.storeCode}longTimePicture/${useUserStore().userInfo.employeeNo}/${uuidv4()}.png`, file.file)
const pictureUrl = await uploadFileToOSSAPI(`risk/longTimePicture/${useUserStore().empInfo.empNo}/${form.storeCode}/${uuidv4()}.png`, file.file)
form.longTimePictureArr.push({
url: pictureUrl
})
await createInspectionTaskAPI({
storeCode: form.storeCode,
rstId: form.rstId,
longTimePictureArr: form.longTimePictureArr.map(o => o.url)
})
showNotify({ type: 'success', message: '大日期产品照片，上传成功' })
}
// 删除照片
const deleteLongTimePictureArr = async (file, { name, index }) => {
form.longTimePictureArr.splice(index, 1)
await createInspectionTaskAPI({
storeCode: form.storeCode,
rstId: form.rstId,
longTimePictureArr: form.longTimePictureArr.map(o => o.url)
})
showNotify({ type: 'success', message: '大日期产品照片，删除成功' })
}
/*************** 信息填写组 ***************/
const active = ref(0)
</script>
<style scoped
......@@ -395,5 +532,11 @@ const active = ref(0)
}
}
.van-overlay{
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
}
</style>
\ No newline at end of file
src/views/mobile/pages/audit_activity/sales_point_inspection/examine/inspectionTask/tabs/conventionalDisplay.vue
浏览文件 @ 67171863
......@@ -5,19 +5,21 @@
v-for="(obj, index) in displayGroup">
<p class="title">常规陈列{{ index + 1 }}：</p>
<van-cell-group inset>
<van-field v-model="obj.modality"
name="modality"
<van-field v-model="obj.modal"
name="modal"
label="形式"
placeholder="请输入形式"
auto-complete="off"
:rules="[{ required: true, message: '请输入形式' }]" />
:rules="[{ required: true, message: '请输入形式' }]"
@change="handleModalityChange(index)" />
<van-field v-model="obj.cost"
name="cost"
type="number"
label="费用"
placeholder="费用"
auto-complete="off"
:rules="[{ required: true, message: '请输入费用' }]" />
:rules="[{ required: true, message: '请输入费用' }]"
@change="handleCostChange(index)" />
<van-field label="常规陈列照片"
label-align="top"
class="header-photo-section">
......@@ -25,8 +27,7 @@
<van-uploader :max-count="2"
accept="image/*"
capture="camera"
reupload
:model-value="obj.displayPhotos"
:model-value="obj.photoArr"
:name="index"
:after-read="displayPhotosRead"
preview-size="78"
......@@ -37,9 +38,10 @@
<van-field label="核查结果"
label-align="top">
<template #input>
<van-checkbox-group v-model="obj.verify"
<van-checkbox-group v-model="obj.riskRArr"
direction="horizontal"
shape="square">
shape="square"
@change="handleVerifyChange(index)">
<van-checkbox name="合格">合格</van-checkbox>
<van-checkbox name="需整改">需整改</van-checkbox>
<van-checkbox name="不合格">不合格</van-checkbox>
......@@ -52,13 +54,14 @@
<!-- 新增按钮 -->
<van-button class="add-item"
type="primary"
@click="addItem">新增一组陈列</van-button>
@click="createTask">新增一组陈列</van-button>
<!-- 总体判定 -->
<div class="overall">
<p class="title">常规陈列总体判定结果：</p>
<van-checkbox-group v-model="overAll.verify"
<van-checkbox-group v-model="form.cgclRiskRArr"
direction="horizontal"
shape="square">
shape="square"
@change="handleOverallChange">
<van-checkbox name="合格">合格</van-checkbox>
<van-checkbox name="需整改">需整改</van-checkbox>
<van-checkbox name="不合格">不合格</van-checkbox>
......@@ -69,54 +72,142 @@
</template>
<script setup>
import { uploadFileToOSSAPI } from '@/api'
import { uploadFileToOSSAPI, createInspectionTaskAPI, createInspectionTaskDetailAPI } from '@/api'
import useUserStore from '@/store/modules/user'
import { v4 as uuidv4 } from 'uuid'
const route = useRoute()
const props = defineProps({
isInitializing: {
type: Boolean,
default: false
},
form: {
type: Object,
default: () => { }
}
})
const displayGroup = ref([])
/*************** 陈列组信息 ***************/
// 陈列组
const displayGroup = ref([
{
modality: '', // 形式
cost: '', // 费用
displayPhotos: [], // 陈列照片
verify: [] // 核查结果
}
])
// 新增一组
const addItem = () => {
displayGroup.value.push({
modality: '', // 形式
cost: '', // 费用
displayPhotos: [], // 陈列照片
verify: [] // 核查结果
// 特殊字段处理
const checkProperty = (list) => {
list.map(item => {
item.riskRArr = item.riskRArr || []
item.photoArr = item.photoArr?.map(o => ({
url: o
})) || []
})
}
// 创建任务组
const createTask = async () => {
const { data } = await createInspectionTaskDetailAPI({
taskDetail: {
rstId: props.form.rstId,
detailName: '常规陈列'
}
})
checkProperty([data])
displayGroup.value.push(data)
}
const init = () => {
// 查询外层是否传入初始数据
if (props.form.detailMap) {
checkProperty(props.form.detailMap['常规陈列'])
displayGroup.value = props.form.detailMap['常规陈列'] || []
} else {
// 没传递则自己至少新建 1 个
if (displayGroup.value.length === 0) {
createTask()
}
}
}
/*************** 基本信息 ***************/
// 形式修改
const handleModalityChange = async (index) => {
await createInspectionTaskDetailAPI({
taskDetail: {
rstId: props.form.rstId,
...displayGroup.value[index]
}
})
showNotify({ type: 'success', message: '形式，保存成功' })
}
// 费用修改
const handleCostChange = async (index) => {
/*************** 陈列照片 ***************/
await createInspectionTaskDetailAPI({
taskDetail: {
rstId: props.form.rstId,
...displayGroup.value[index]
}
})
showNotify({ type: 'success', message: '费用，保存成功' })
}
// 上传照片
const displayPhotosRead = async (file, { name, index }) => {
// name：是当前照片组件所在陈列组的索引
// index: 当前照片组的索引
const target = displayGroup.value[name]
const pictureUrl = await uploadFileToOSSAPI(`risk/${route.query.storeCode}/displayPhoto/${useUserStore().userInfo.employeeNo}/${uuidv4()}.png`, file.file)
target.displayPhotos.push({
const pictureUrl = await uploadFileToOSSAPI(`risk/displayPhoto/${useUserStore().empInfo.empNo}/${props.form.storeCode}/${uuidv4()}.png`, file.file)
target.photoArr.push({
url: pictureUrl
})
await createInspectionTaskDetailAPI({
taskDetail: {
rstId: props.form.rstId,
rstdId: target.rstdId,
photoArr: target.photoArr.map(o => o.url)
}
})
showNotify({ type: 'success', message: '常规陈列照片，上传成功' })
}
// 删除照片
const deletedisplayPhotos = async (file, { name, index }) => {
const target = displayGroup.value[name]
target.displayPhotos.splice(index, 1)
target.photoArr.splice(index, 1)
await createInspectionTaskDetailAPI({
taskDetail: {
rstId: props.form.rstId,
rstdId: target.rstdId,
photoArr: target.photoArr.map(o => o.url)
}
})
showNotify({ type: 'success', message: '常规陈列照片，删除成功' })
}
// 核查结果
const handleVerifyChange = async (index) => {
const target = displayGroup.value[index]
await createInspectionTaskDetailAPI({
taskDetail: {
rstId: props.form.rstId,
rstdId: target.rstdId,
riskRArr: target.riskRArr
}
})
showNotify({ type: 'success', message: '核查结果，保存成功' })
}
/*************** 总体核查结果 ***************/
const overAll = ref({})
const handleOverallChange = async () => {
if (props.isInitializing) return
await createInspectionTaskAPI({
rstId: props.form.rstId,
cgclRiskRArr: props.form.cgclRiskRArr
})
showNotify({ type: 'success', message: '核查结果，保存成功' })
}
defineExpose({
init
})
</script>
<style scoped
......
src/views/mobile/pages/audit_activity/sales_point_inspection/examine/inspectionTask/tabs/scheduleAdjustment.vue
浏览文件 @ 67171863
......@@ -24,7 +24,6 @@
<van-uploader :max-count="2"
accept="image/*"
capture="camera"
reupload
:model-value="obj.displayPhotos"
:name="index"
:after-read="displayPhotosRead"
......@@ -95,7 +94,7 @@ const addItem = () => {
/*************** 照片 ***************/
const displayPhotosRead = async (file, { name, index }) => {
const target = displayGroup.value[name]
const pictureUrl = await uploadFileToOSSAPI(`risk/${route.query.storeCode}/scheduleAdjustmentPhoto/${useUserStore().userInfo.employeeNo}/${uuidv4()}.png`, file.file)
const pictureUrl = await uploadFileToOSSAPI(`risk/scheduleAdjustmentPhoto/${useUserStore().empInfo.empNo}/${form.storeCode}.png`, file.file)
target.displayPhotos.push({
url: pictureUrl
})
......
src/views/mobile/pages/audit_activity/sales_point_inspection/examine/inspectionTask/tabs/scheduleDisplay.vue
浏览文件 @ 67171863
......@@ -24,7 +24,6 @@
<van-uploader :max-count="2"
accept="image/*"
capture="camera"
reupload
:model-value="obj.displayPhotos"
:name="index"
:after-read="displayPhotosRead"
......@@ -95,7 +94,7 @@ const addItem = () => {
/*************** 照片 ***************/
const displayPhotosRead = async (file, { name, index }) => {
// 处理上传的文件
const pictureUrl = await uploadFileToOSSAPI(`risk/${route.query.storeCode}/scheduleDisplayPhoto/${useUserStore().userInfo.employeeNo}/${uuidv4()}.png`, file.file)
const pictureUrl = await uploadFileToOSSAPI(`risk/scheduleDisplayPhoto/${useUserStore().empInfo.empNo}/${form.storeCode}.png`, file.file)
displayGroup.value[name].displayPhotos.push({
url: pictureUrl
})
......
src/views/mobile/pages/audit_activity/sales_point_inspection/examine/storeList.vue
浏览文件 @ 67171863
......@@ -120,8 +120,6 @@ const handleClickStore = (item) => {
query: {
storeName: item.storeName,
storeCode: item.storeCode,
dealersName: item.dealersName,
storeAddr: item.storeAddr,
storePicture: item.storePictures?.split(",")[0]
}
})
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论