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

src/api/mobile/audit_activity/sales_point_inspection.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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]
     }
   })