feat(audit_activity/inspectiontast): 新增：勤策移动端_售点稽核的 JS 功能完成稽查任务部分

src/api/mobile/audit_activity/sales_point_inspection.js

@@ -7,3 +7,28 @@ export function getTerminalStoreListAPI(params) {
     params
   })
 }
+
+// 售点稽查-单条任务详情
+export function getInspectionTaskDetailAPI(params) {
+  return request({
+    url: '/operation/risk/query/i_store',
+    params
+  })
+}
+
+// 售点稽查-创建/修改任务总体（页面对应外框总体）
+export function createInspectionTaskAPI(data) {
+  return request({
+    url: '/operation/risk/core/i_store',
+    method: 'POST',
+    data
+  })
+}
+
+// 售点稽查-创建/修改任务明细（4 个tab页）
+export function createInspectionTaskDetailAPI(params) {
+  return request({
+    url: '/operation/risk/create/i_store',
+    params
+  })
+}

src/permission.js

@@ -42,7 +42,6 @@ router.beforeEach((to, from, next) => {
             useVersionStore().getVersion().then((res) => {
               // 生成可访问路由表
               accessRoutes.forEach(route => {
-                console.log('挂载路由', route)
                 if (!isHttp(route.path) ) {
                   router.addRoute(route)
                 }

src/views/mobile/pages/audit_activity/sales_point_inspection/examine/inspectionTask/index.vue

@@ -10,11 +10,18 @@
       <!-- 终端名称 -->
       <div class="terminal-wrap">
         <div>
-          <van-image width="2.25rem"
-            height="3.5rem"></van-image>
+          <van-image fit="scale-down"
+            width="2.25rem"
+            height="3.5rem"
+            :src="form.storePicture || form.commitStorePicture[0]?.url"
+            @click="previewStoreImage"></van-image>
         </div>
         <div class="terminal-info">
-          <p>终端名称：世纪港湾广缘超时</p>
+          <div class="terminal-name">
+            <span>终端名称：</span>
+            <van-field v-model="form.storeName"
+              placeholder="请输入终端名" />
+          </div>
           <p>终端编码：P0500052306</p>
           <p>经销商：秦皇岛红朗森商贸有限公司</p>
           <p>地址：河北省秦皇岛市海港区北环路街道秦皇岛冻结附录</p>
@@ -36,18 +43,21 @@
         <van-field label="门头照"
           label-align="top">
           <template #input>
-            <van-uploader :max-count="2"
+            <van-uploader :max-count="1"
               accept="image/*"
-              v-model="form.posPhotos"
-              :after-read="posPhotosRead"
-              preview-size="120"
-              @delete="deletePosPhotos">
+              capture="camera"
+              reupload
+              :model-value="form.commitStorePicture"
+              :after-read="commitStorePhotosRead"
+              preview-size="78"
+              @delete="deleteCommitStorePhotos">
             </van-uploader>
           </template>
         </van-field>
       </div>
       <!-- 门店类型选择 -->
       <van-field :model-value="form.selectedType.join('')"
+        readonly
         label="门店类型"
         label-align="top"
         placeholder="请选择"
@@ -84,7 +94,7 @@
         <van-field label="礼盒/礼袋是否在售："
           label-align="top">
           <template #input>
-            <van-checkbox-group v-model="form.verify"
+            <van-checkbox-group v-model="form.lhldArr"
               direction="horizontal"
               shape="square">
               <van-checkbox name="礼盒">礼盒</van-checkbox>
@@ -92,10 +102,13 @@
             </van-checkbox-group>
           </template>
         </van-field>
-        <van-field label="我品 SKU 总数："
+        <van-field v-model="form.skuNum"
+          label="我品 SKU 总数："
+          type="number"
           placeholder="请输入"
           label-align="top" />
-        <van-field label="备注："
+        <van-field v-model="form.remark"
+          label="备注："
           placeholder="请输入"
           label-align="top"
           type="textarea"
@@ -105,12 +118,14 @@
           <van-field label="大日期产品照片"
             label-align="top">
             <template #input>
-              <van-uploader :max-count="2"
+              <van-uploader :max-count="4"
                 accept="image/*"
-                v-model="form.posPhotos"
-                :after-read="posPhotosRead"
-                preview-size="120"
-                @delete="deletePosPhotos">
+                capture="camera"
+                reupload
+                :model-value="form.longTimePictureArr"
+                :after-read="longTimePictureArrRead"
+                preview-size="78"
+                @delete="deleteLongTimePictureArr">
               </van-uploader>
             </template>
           </van-field>
@@ -121,19 +136,51 @@
 </template>
 
 <script setup>
-import { uploadFileToOSSAPI, getLocation } from '@/api'
+import { uploadFileToOSSAPI, getLocation, getInspectionTaskDetailAPI, createInspectionTaskAPI } from '@/api'
 import { typeOptions as typeOption } from '@/views/mobile/constant'
 import convention from './tabs/conventionalDisplay.vue'
 import scheduleDisplay from './tabs/scheduleDisplay.vue'
 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'
 
-const router = useRouter();
-const form = reactive({
+const router = useRouter()
+const route = useRoute()
+
+/*************** 稽查任务总体 ***************/
+const form = reactive({ // 当前页信息总对象
   selectedType: [], // 门店类型
+  storePicture: route.query.storePicture, // 门店照片（原始门店照片）
+  storeName: route.query.storeName, // 门店名称
+  storeCode: route.query.storeCode, // 门店编码
+  dealersName: route.query.dealersName, // 经销商名称
+  storeAddr: route.query.storeAddr, // 门店地址
+  commitStorePicture: [], // 上报拍摄的门店照片
+  lhldArr: [], // 其他-礼盒礼袋是否在售
+  skuNum: '', // 我品 SKU 总数
+  remark: '', // 备注
+  longTimePictureArr: [], // 大日期产品照片
 })
 
-// 地理定位
+// 稽查任务详情
+const getInspectionTaskDetailFn = async () => {
+  const res = await getInspectionTaskDetailAPI({
+    storeCode: form.storeCode
+  })
+  console.log(res)
+}
+getInspectionTaskDetailFn()
+
+// 门店图片预览
+const previewStoreImage = () => {
+  showImagePreview({
+    images: [form.storePicture],
+  })
+}
+
+/*************** 地理定位 ***************/
 const addressStr = ref('')
 const addressLoading = ref(true)
 const getLocationFn = () => {
@@ -178,40 +225,45 @@ const handleClickLocation = () => {
   }, 1500)
 }
 
-// 门头照
-// 门头照上传逻辑
-// POS 两张照片
-const posPhotosRead = async (file) => {
-
-  // 处理上传的文件
-  const date = new Date()
-  const month = date.getMonth() + 1
-  const theDate = date.getDate()
-  const pictureUrl = await uploadFileToOSSAPI(`risk/${date.getFullYear()}-${month}/${theDate}/${planId.value}/${employeeNo}/${uuidv4()}.png`, file.file)
-  // 判断 objectUrl
-  const index = form.value.posPhotos.findIndex(o => o.objectUrl)
-  form.value.posPhotos[index] = {
+/*************** 门头照上传 ***************/
+// 上传照片
+const commitStorePhotosRead = async (file) => {
+  const pictureUrl = await uploadFileToOSSAPI(`risk/${form.storeCode}storeFrontPhoto/${useUserStore().userInfo.employeeNo}/${uuidv4()}.png`, file.file)
+  form.commitStorePicture = [{
     url: pictureUrl
-  }
-
+  }]
+  showNotify({ type: 'success', message: '门头照，上传成功' })
 }
-// 删除 照片
-const deletePosPhotos = async () => {
-  if (isInitializing.value) return
-
-  showNotify({ type: 'success', message: 'POS 照片删除成功' })
+// 删除照片
+const deleteCommitStorePhotos = async () => {
+  form.commitStorePicture = []
+  showNotify({ type: 'success', message: '门头照，删除成功' })
 }
 
-// 门店类型
-const showTypePopup = ref(false)
+/*************** 门店类型 ***************/
 const typeOptions = ref(typeOption); // 门店类型
+const showTypePopup = ref(false)
 // 确认门店类型
-const handleTypeConfirm = (val) => {
-  form.selectedType = val;
+const handleTypeConfirm = ({ selectedValues }) => {
+  form.selectedType = selectedValues;
   showTypePopup.value = false;
 };
 
-// 信息填写组
+/****** 大日期产品照片 ***************/
+const longTimePictureArrRead = async (file) => {
+  const pictureUrl = await uploadFileToOSSAPI(`risk/${form.storeCode}longTimePicture/${useUserStore().userInfo.employeeNo}/${uuidv4()}.png`, file.file)
+  form.longTimePictureArr.push({
+    url: pictureUrl
+  })
+  showNotify({ type: 'success', message: '大日期产品照片，上传成功' })
+}
+// 删除照片
+const deleteLongTimePictureArr = async (file, { name, index }) => {
+  form.longTimePictureArr.splice(index, 1)
+  showNotify({ type: 'success', message: '大日期产品照片，删除成功' })
+}
+
+/*************** 信息填写组 ***************/
 const active = ref(0)
 </script>
 
@@ -247,17 +299,28 @@ const active = ref(0)
           flex-direction: column;
           justify-content: space-between;
 
+          .terminal-name {
+            color: black;
+            font-size: 15px;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+
+            span {
+              display: inline-block;
+              width: 120px;
+            }
+
+            .van-cell {
+              padding: 0;
+            }
+          }
+
           p {
             font-size: 14px;
             margin: 0;
             color: #a1a1a1;
           }
-
-          p:first-child {
-            color: black;
-            font-size: 15px;
-            font-weight: bold;
-          }
         }
 
 

src/views/mobile/pages/audit_activity/sales_point_inspection/examine/inspectionTask/tabs/categoryInfomation.vue

@@ -18,6 +18,7 @@
         </template>
       </van-field>
       <van-field v-model="selectedTypeObj.price"
+        type="number"
         :label="selectedTypeObj.label + ' 价格：'"
         label-width="4rem"
         placeholder="请输入价格"
@@ -39,19 +40,16 @@
           :key="index">
           <div class="table-cell first-column">{{ obj.name }}</div>
           <div class="table-cell second-column">
-            <van-field :model-value="obj.value"
-              type="text"
+            <van-field type="text"
               placeholder="请输入"
               :border="false"
               class="cell-input">
               <template #input>
                 <el-date-picker v-model="obj.value"
                   type="month"
-                  placeholder="选择月份"
-                  :size="size" />
+                  placeholder="选择月份" />
               </template>
             </van-field>
-
           </div>
         </div>
       </div>
@@ -350,6 +348,7 @@ const selectedTypeObj = ref(typeOptions.value[0])
         ::v-deep(.van-cell__value) {
           display: flex;
           align-items: center;
+
           .van-field__control {
             .el-input {
               width: auto;

src/views/mobile/pages/audit_activity/sales_point_inspection/examine/inspectionTask/tabs/conventionalDisplay.vue

@@ -13,6 +13,7 @@
           :rules="[{ required: true, message: '请输入形式' }]" />
         <van-field v-model="obj.cost"
           name="cost"
+          type="number"
           label="费用"
           placeholder="费用"
           auto-complete="off"
@@ -23,9 +24,12 @@
           <template #input>
             <van-uploader :max-count="2"
               accept="image/*"
-              v-model="obj.displayPhotos"
+              capture="camera"
+              reupload
+              :model-value="obj.displayPhotos"
+              :name="index"
               :after-read="displayPhotosRead"
-              preview-size="120"
+              preview-size="78"
               @delete="deletedisplayPhotos">
             </van-uploader>
           </template>
@@ -65,7 +69,13 @@
 </template>
 
 <script setup>
-// 陈列组信息
+import { uploadFileToOSSAPI } from '@/api'
+import useUserStore from '@/store/modules/user'
+import { v4 as uuidv4 } from 'uuid'
+
+const route = useRoute()
+/*************** 陈列组信息 ***************/
+// 陈列组
 const displayGroup = ref([
   {
     modality: '', // 形式
@@ -84,31 +94,28 @@ const addItem = () => {
   })
 }
 
+/*************** 陈列照片 ***************/
+// 上传照片
+const displayPhotosRead = async (file, { name, index }) => {
+  // name：是当前照片组件所在陈列组的索引
+  // index: 当前照片组的索引
+  const target = displayGroup.value[name]
 
-// 陈列照片
-const displayPhotosRead = async (file) => {
-
-  // 处理上传的文件
-  const date = new Date()
-  const month = date.getMonth() + 1
-  const theDate = date.getDate()
-  const pictureUrl = await uploadFileToOSSAPI(`risk/${date.getFullYear()}-${month}/${theDate}/${planId.value}/${employeeNo}/${uuidv4()}.png`, file.file)
-  // 判断 objectUrl
-  const index = form.value.posPhotos.findIndex(o => o.objectUrl)
-  form.value.posPhotos[index] = {
+  const pictureUrl = await uploadFileToOSSAPI(`risk/${route.query.storeCode}/displayPhoto/${useUserStore().userInfo.employeeNo}/${uuidv4()}.png`, file.file)
+  target.displayPhotos.push({
     url: pictureUrl
-  }
-
+  })
+  showNotify({ type: 'success', message: '常规陈列照片，上传成功' })
 }
-// 删除 照片
-const deletedisplayPhotos = async () => {
-  if (isInitializing.value) return
-
-  showNotify({ type: 'success', message: 'POS 照片删除成功' })
+// 删除照片
+const deletedisplayPhotos = async (file, { name, index }) => {
+  const target = displayGroup.value[name]
+  target.displayPhotos.splice(index, 1)
+  showNotify({ type: 'success', message: '常规陈列照片，删除成功' })
 }
 
 
-// 总体核查结果
+/*************** 总体核查结果 ***************/
 const overAll = ref({})
 </script>
 
@@ -129,6 +136,7 @@ const overAll = ref({})
     /* 每个分组 */
     .item {
       margin-bottom: 10px;
+
       .van-cell-group {
         padding: 0;
         margin: 0;

src/views/mobile/pages/audit_activity/sales_point_inspection/examine/inspectionTask/tabs/scheduleAdjustment.vue

@@ -23,9 +23,12 @@
           <template #input>
             <van-uploader :max-count="2"
               accept="image/*"
-              v-model="obj.displayPhotos"
+              capture="camera"
+              reupload
+              :model-value="obj.displayPhotos"
+              :name="index"
               :after-read="displayPhotosRead"
-              preview-size="120"
+              preview-size="78"
               @delete="deletedisplayPhotos">
             </van-uploader>
           </template>
@@ -65,7 +68,12 @@
 </template>
 
 <script setup>
-// 陈列组信息
+import { uploadFileToOSSAPI } from '@/api'
+import useUserStore from '@/store/modules/user'
+import { v4 as uuidv4 } from 'uuid'
+
+const route = useRoute()
+/*************** 陈列组信息 ***************/
 const displayGroup = ref([
   {
     modality: '', // 形式
@@ -84,27 +92,20 @@ const addItem = () => {
   })
 }
 
-
-// 陈列照片
-const displayPhotosRead = async (file) => {
-
-  // 处理上传的文件
-  const date = new Date()
-  const month = date.getMonth() + 1
-  const theDate = date.getDate()
-  const pictureUrl = await uploadFileToOSSAPI(`risk/${date.getFullYear()}-${month}/${theDate}/${planId.value}/${employeeNo}/${uuidv4()}.png`, file.file)
-  // 判断 objectUrl
-  const index = form.value.posPhotos.findIndex(o => o.objectUrl)
-  form.value.posPhotos[index] = {
+/*************** 照片 ***************/
+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)
+  target.displayPhotos.push({
     url: pictureUrl
-  }
-
+  })
+  showNotify({ type: 'success', message: '照片上传成功' })
 }
-// 删除 照片
-const deletedisplayPhotos = async () => {
-  if (isInitializing.value) return
-
-  showNotify({ type: 'success', message: 'POS 照片删除成功' })
+// 删除照片
+const deletedisplayPhotos = async (file, { name, index }) => {
+  const target = displayGroup.value[name]
+  target.displayPhotos.splice(index, 1)
+  showNotify({ type: 'success', message: '照片删除成功' })
 }
 
 

src/views/mobile/pages/audit_activity/sales_point_inspection/examine/inspectionTask/tabs/scheduleDisplay.vue

@@ -23,9 +23,12 @@
           <template #input>
             <van-uploader :max-count="2"
               accept="image/*"
-              v-model="obj.displayPhotos"
+              capture="camera"
+              reupload
+              :model-value="obj.displayPhotos"
+              :name="index"
               :after-read="displayPhotosRead"
-              preview-size="120"
+              preview-size="78"
               @delete="deletedisplayPhotos">
             </van-uploader>
           </template>
@@ -65,7 +68,12 @@
 </template>
 
 <script setup>
-// 陈列组信息
+import { uploadFileToOSSAPI } from '@/api'
+import useUserStore from '@/store/modules/user'
+import { v4 as uuidv4 } from 'uuid'
+
+const route = useRoute()
+/*************** 陈列组信息 ***************/
 const displayGroup = ref([
   {
     modality: '', // 形式
@@ -84,30 +92,21 @@ const addItem = () => {
   })
 }
 
-
-// 陈列照片
-const displayPhotosRead = async (file) => {
-
+/*************** 照片 ***************/
+const displayPhotosRead = async (file, { name, index }) => {
   // 处理上传的文件
-  const date = new Date()
-  const month = date.getMonth() + 1
-  const theDate = date.getDate()
-  const pictureUrl = await uploadFileToOSSAPI(`risk/${date.getFullYear()}-${month}/${theDate}/${planId.value}/${employeeNo}/${uuidv4()}.png`, file.file)
-  // 判断 objectUrl
-  const index = form.value.posPhotos.findIndex(o => o.objectUrl)
-  form.value.posPhotos[index] = {
+  const pictureUrl = await uploadFileToOSSAPI(`risk/${route.query.storeCode}/scheduleDisplayPhoto/${useUserStore().userInfo.employeeNo}/${uuidv4()}.png`, file.file)
+  displayGroup.value[name].displayPhotos.push({
     url: pictureUrl
-  }
-
+  })
+  showNotify({ type: 'success', message: '照片上传成功' })
 }
 // 删除 照片
-const deletedisplayPhotos = async () => {
-  if (isInitializing.value) return
-
-  showNotify({ type: 'success', message: 'POS 照片删除成功' })
+const deletedisplayPhotos = async (file, { name, index }) => {
+  displayGroup.value[name].displayPhotos.splice(index, 1)
+  showNotify({ type: 'success', message: '照片删除成功' })
 }
 
-
 // 总体核查结果
 const overAll = ref({})
 </script>

src/views/mobile/pages/audit_activity/sales_point_inspection/examine/newTerminal.vue

@@ -69,7 +69,9 @@ import { uploadFileToOSSAPI } from '@/api'
 import { v4 as uuidv4 } from 'uuid';
 import { typeOptions as typeOption } from '@/views/mobile/constant'
 
+
 const router = useRouter();
+
 const form = ref({
   selectedType: []
 })

src/views/mobile/pages/audit_activity/sales_point_inspection/examine/storeList.vue

@@ -6,7 +6,7 @@
         <van-tag type="primary"
           round
           size="medium"
-          @click="router.push({ path: '/taskList' })">稽查记录</van-tag>
+          @click="clickRecord">稽查记录</van-tag>
       </template>
     </van-nav-bar>
     <!-- 头部区域 -->
@@ -59,7 +59,7 @@ import { getTerminalStoreListAPI } from '@/api'
 
 const router = useRouter();
 
-/*************** 终端门店列表 *******************/
+/*************** 终端门店列表 ***************/
 const query = reactive({
   col: '',
   pageNum: 1,
@@ -105,10 +105,11 @@ const handlerSearch = () => {
   getTerminalStoreListFn()
 }
 
-/*******新增终端********/
-const addNewTerminal = () => {
+/*************** 跳转路由 ***************/
+// 稽查记录
+const clickRecord = () => {
   router.push({
-    path: '/newTerminal'
+    path: '/taskList'
   })
 }
 
@@ -117,11 +118,21 @@ const handleClickStore = (item) => {
   router.push({
     path: '/inspectionTask',
     query: {
-      storeName: item.name,
-      storeCode: item.code
+      storeName: item.storeName,
+      storeCode: item.storeCode,
+      dealersName: item.dealersName,
+      storeAddr: item.storeAddr,
+      storePicture: item.storePictures?.split(",")[0]
     }
   })
 }
+
+// 新建终端
+const addNewTerminal = () => {
+  router.push({
+    path: '/newTerminal'
+  })
+}
 </script>
 
 <style lang="scss"