出入库登记的组件开发

package.json

@@ -78,6 +78,7 @@
     "@dcloudio/uni-ui": "^1.4.28",
     "@vue/shared": "^3.2.34",
     "better-mock": "^0.3.6",
+    "china-division": "^2.7.0",
     "core-js": "^3.22.5",
     "crypto-js": "^4.1.1",
     "flyio": "^0.6.14",

src/components/low-code/DEVICE_IN_TABLE.vue

@@ -10,6 +10,26 @@
       <view class="title">设备入库登记</view>
       <u-button type="primary" plain @click="open" size="mini">新增</u-button>
     </view>
+    <view class="list-box">
+      <view class="device-info-item" v-for="(item, index) in value" :key="index">
+        <view class="device-no">{{ item.deviceNo }}</view>
+        <view class="content">
+          <view class="item">型号：{{ item.deviceModel }}</view>
+          <view class="item">供应商：{{ item.supplierName }}</view>
+          <view class="item">运行状态：{{ item.deviceStatus }}</view>
+          <view class="item">总扫描数：{{ item.scanCount }}</view>
+          <view class="item">当前所在地：{{ item.location }}</view>
+          <view class="item">发往地：{{ item.address }}</view>
+        </view>
+        <view class="foot flex justify-between items-center">
+          <text class="link" @click="previewImg(item)">查看快递单</text>
+          <view class="btn-box flex items-center">
+            <u-button type="error" size="mini">删除</u-button>
+            <u-button type="primary" size="mini" class="m-l-10rpx" @click="edit(item)">编辑</u-button>
+          </view>
+        </view>
+      </view>
+    </view>
 
     <u-popup v-model="showPopup" mode="bottom" :mask-close-able="false" :closeable="true" :border-radius="28">
       <view class="form-box">
@@ -18,33 +38,56 @@
             <text class="red">*</text>
             <text class="text">设备编号</text>
           </view>
-          <u-input v-model="deviceStr" type="select" :border="true" placeholder="请选择设备" @click="showSelect1 = true" />
+          <u-input :value="deviceStr" type="select" :border="true" placeholder="请选择设备" @click="showSelect = true" />
 
-          <u-select v-model="showSelect1" :list="deviceList" @confirm="confirm"></u-select>
+          <u-select v-model="showSelect" :list="deviceList" @confirm="confirm"></u-select>
+        </view>
+        <view class="f-item">
+          <view class="label">
+            <text class="text">总扫描量</text>
+          </view>
+          <u-input v-model="curDeviceInfo.scanCount" type="text" :border="true" placeholder="请输入总扫描量" />
+        </view>
+        <view class="f-item">
+          <view class="label">
+            <text class="red">*</text>
+            <text class="text">快递单拍照</text>
+            <UPLOADIMAGE :key="comKey" :config="{ length: 1, value: curDeviceInfo.imgList }" @getLists="getImages"></UPLOADIMAGE>
+          </view>
+        </view>
+        <view class="flex justify-between items-center p-b-50rpx">
+          <u-button class="flex-1" @click="showPopup = false">取消</u-button>
+          <u-button class="flex-1 m-l-30rpx" type="primary" @click="save">保存</u-button>
         </view>
       </view>
     </u-popup>
+    <u-toast ref="uToast" />
   </view>
 </template>
 
 <script>
   import { deviceCanIn } from '@/api/sop'
+  import UPLOADIMAGE from './UPLOAD_IMAGE.vue'
   export default {
     name: 'DEVICEINTABLE',
+    components: { UPLOADIMAGE },
+    props: ['config', 'onChange'],
     computed: {
       deviceStr() {
-        return this.deviceList.find((item) => item.value == this.deviceItemInfo.deviceNo)?.label || ''
+        return this.deviceList.find((item) => item.value == this.curDeviceInfo.deviceNo)?.label || ''
       }
     },
     data() {
       return {
+        comKey: Date.now() + '',
         inOutTime: '',
         list: [],
         show: false,
         showPopup: false,
-        showSelect1: false,
+        showSelect: false,
         deviceList: [],
-        deviceItemInfo: {
+        value: [],
+        curDeviceInfo: {
           deviceNo: '', //设备编号
           deviceModel: '',
           supplierName: '', //供应商
@@ -52,24 +95,28 @@
           scanCount: '', //总扫描量
           location: '', //当前所在地
           address: '', //发往地
-          basePhotoPath: '' //拍照
+          basePhotoPath: '', //拍照
+          imgList: []
         }
       }
     },
+    created() {
+      this.value = this.config.value || []
+    },
     mounted() {
       deviceCanIn().then((res) => {
-        res = [
-          {
-            deviceNo: 1,
-            deviceModel: '周大福',
-            supplierName: '似懂非懂',
-            deviceStatus: 'NORMAL',
-            scanCount: 20,
-            location: '武汉',
-            address: '北京',
-            basePhotoPath: ''
-          }
-        ]
+        // res = [
+        //   {
+        //     deviceNo: 'XXXXXXXX0123',
+        //     deviceModel: '周大福',
+        //     supplierName: '似懂非懂',
+        //     deviceStatus: 'NORMAL',
+        //     scanCount: 20,
+        //     location: '武汉',
+        //     address: '北京',
+        //     basePhotoPath: ''
+        //   }
+        // ]
         this.deviceList = res.map((item) => {
           item.value = item.deviceNo
           item.label = item.deviceModel
@@ -78,25 +125,67 @@
       })
     },
     methods: {
-      open() {
+      previewImg(item) {
+        console.log('item.basePhotoPath:', item.basePhotoPath)
+        uni.previewImage({
+          indicator: 'none',
+          loop: false,
+          urls: [item.basePhotoPath]
+        })
+      },
+      save() {
+        if (!this.curDeviceInfo.deviceNo) {
+          this.$refs.uToast.show({
+            title: '请选择设备',
+            type: 'error'
+          })
+          return
+        } else if (!this.curDeviceInfo.basePhotoPath) {
+          this.$refs.uToast.show({
+            title: '请上传快递单照片',
+            type: 'error'
+          })
+          return
+        }
+        this.value.push({ ...this.curDeviceInfo })
+        this.showPopup = false
+      },
+      getImages(lists) {
+        this.curDeviceInfo.imgList = lists
+        this.curDeviceInfo.basePhotoPath = lists[0]?.url || ''
+      },
+      edit(item) {
+        console.log('item', item)
+        this.curDeviceInfo = { ...item }
+        this.comKey = Date.now() + ''
         this.showPopup = true
       },
-      add() {
-        // this.list.push({
-        //   deviceNo: '', //设备编号
-        //   supplierName: '', //供应商
-        //   deviceStatus: '', //运行状态
-        //   scanCount: '', //总扫描量
-        //   location: '', //当前所在地
-        //   address: '', //发往地
-        //   basePhotoPath: '' //拍照
-        // })
+      open() {
+        this.curDeviceInfo = {
+          deviceNo: '', //设备编号
+          deviceModel: '',
+          supplierName: '', //供应商
+          deviceStatus: '', //运行状态
+          scanCount: '', //总扫描量
+          location: '', //当前所在地
+          address: '', //发往地
+          basePhotoPath: '', //拍照
+          imgList: []
+        }
+        this.comKey = Date.now() + ''
+        this.showPopup = true
       },
       change(obj) {
         this.inOutTime = obj.result
       },
       confirm(arr) {
-        this.deviceItemInfo.deviceNo = arr[0].value
+        this.curDeviceInfo.deviceNo = arr[0].value
+        let item = this.deviceList.find((item) => item.deviceNo == arr[0].value)
+        for (let key in this.curDeviceInfo) {
+          if (item[key]) {
+            this.curDeviceInfo[key] = item[key]
+          }
+        }
       }
     }
   }
@@ -104,14 +193,46 @@
 
 <style lang="scss" scoped>
   .device-in-table {
+    .list-box {
+      .device-info-item {
+        padding: 24rpx 0;
+        border-bottom: 1px solid #f0f0f0;
+        &:first-child {
+          padding-top: 0;
+        }
+        .foot {
+          margin-top: 10rpx;
+          .link {
+            color: $u-type-primary;
+            font-size: 28rpx;
+          }
+        }
+        .content {
+          background-color: #f7f7f7;
+          border-radius: 12rpx;
+          padding: 24rpx;
+          .item {
+            color: #262626;
+            font-size: 24rpx;
+            line-height: 60rpx;
+          }
+        }
+        .device-no {
+          color: #262626;
+          font-size: 32rpx;
+        }
+      }
+    }
     .form-box {
-      padding: 24rpx;
+      padding: 24rpx 24px 0 24px;
       padding-top: 80rpx;
       .f-item {
+        margin-bottom: 30rpx;
         .label {
-          margin-bottom: 10rpx;
+          margin-bottom: 4rpx;
           .red {
             color: red;
+            margin-right: 4rpx;
           }
           .text {
             color: #595959;

src/components/low-code/DEVICE_OUT_TABLE.vue

@@ -0,0 +1,280 @@
+<template>
+  <view class="device-in-table">
+    <view class="head flex justify-between items-center">
+      <view class="title">设备出库时间</view>
+    </view>
+    <u-input v-model="inOutTime" type="select" :border="true" placeholder="请选择出库时间" @click="show = true" />
+
+    <u-calendar v-model="show" mode="date" @change="change"></u-calendar>
+    <view class="head flex justify-between items-center m-t-24rpx">
+      <view class="title">设备出库登记</view>
+      <u-button type="primary" plain @click="open" size="mini">新增</u-button>
+    </view>
+    <view class="list-box">
+      <view class="device-info-item" v-for="(item, index) in value" :key="index">
+        <view class="device-no">{{ item.deviceNo }}</view>
+        <view class="content">
+          <view class="item">型号：{{ item.deviceModel }}</view>
+          <view class="item">供应商：{{ item.supplierName }}</view>
+          <view class="item">运行状态：{{ item.deviceStatus }}</view>
+          <view class="item">总扫描数：{{ item.scanCount }}</view>
+          <view class="item">当前所在地：{{ item.location }}</view>
+          <view class="item">发往地：{{ item.address }}</view>
+        </view>
+        <view class="foot flex justify-between items-center">
+          <text class="link" @click="previewImg(item)">查看快递单</text>
+          <view class="btn-box flex items-center">
+            <u-button type="error" size="mini">删除</u-button>
+            <u-button type="primary" size="mini" class="m-l-10rpx" @click="edit(item)">编辑</u-button>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <u-popup v-model="showPopup" mode="bottom" :mask-close-able="false" :closeable="true" :border-radius="28">
+      <view class="form-box">
+        <view class="f-item">
+          <view class="label">
+            <text class="red">*</text>
+            <text class="text">设备编号</text>
+          </view>
+          <u-input :value="deviceStr" type="select" :border="true" placeholder="请选择设备" @click="showSelect = true" />
+
+          <u-select v-model="showSelect" :list="deviceList" @confirm="confirm"></u-select>
+        </view>
+        <view class="f-item">
+          <view class="label">
+            <text class="red">*</text>
+            <text class="text">发往地</text>
+          </view>
+          <u-input v-model="curDeviceInfo.address" type="select" :border="true" placeholder="选择发往地" @click="showSelect2 = true" />
+          <u-select
+            v-model="showSelect2"
+            :default-value="curDeviceInfo.addressValue"
+            mode="mutil-column-auto"
+            :list="areaData"
+            @confirm="confirm2"
+          ></u-select>
+        </view>
+        <view class="f-item">
+          <view class="label">
+            <text class="red">*</text>
+            <text class="text">快递单拍照</text>
+            <UPLOADIMAGE :key="comKey" :config="{ length: 1, value: curDeviceInfo.imgList }" @getLists="getImages"></UPLOADIMAGE>
+          </view>
+        </view>
+        <view class="flex justify-between items-center p-b-50rpx">
+          <u-button class="flex-1" @click="showPopup = false">取消</u-button>
+          <u-button class="flex-1 m-l-30rpx" type="primary" @click="save">保存</u-button>
+        </view>
+      </view>
+    </u-popup>
+    <u-toast ref="uToast" />
+  </view>
+</template>
+
+<script>
+  import { deviceCanOut } from '@/api/sop'
+  import UPLOADIMAGE from './UPLOAD_IMAGE.vue'
+  import { buildData } from '@/utils/area'
+
+  export default {
+    name: 'DEVICEOUTTABLE',
+    components: { UPLOADIMAGE },
+    props: ['config', 'onChange'],
+    computed: {
+      deviceStr() {
+        return this.deviceList.find((item) => item.value == this.curDeviceInfo.deviceNo)?.label || ''
+      }
+    },
+    data() {
+      return {
+        comKey: Date.now() + '',
+        inOutTime: '',
+        list: [],
+        show: false,
+        showPopup: false,
+        showSelect: false,
+        showSelect2: false,
+        deviceList: [],
+        value: [],
+        curDeviceInfo: {
+          deviceNo: '', //设备编号
+          deviceModel: '',
+          supplierName: '', //供应商
+          deviceStatus: '', //运行状态
+          scanCount: '', //总扫描量
+          location: '', //当前所在地
+          address: '', //发往地
+          addressValue: [], //发往地
+          basePhotoPath: '', //拍照
+          imgList: []
+        },
+        areaData: [],
+        areaCodeMap: {}
+      }
+    },
+    created() {
+      this.value = this.config.value || []
+    },
+    mounted() {
+      const data = buildData(2)
+      const { areaData, areaCodeMap } = data
+      console.log('areaData:', areaData)
+      console.log('areaCodeMap:', areaCodeMap)
+      this.areaData = areaData
+      this.areaCodeMap = areaCodeMap
+      deviceCanOut().then((res) => {
+        res = [
+          {
+            deviceNo: 'XXXXXXXX0123',
+            deviceModel: '周大福',
+            supplierName: '似懂非懂',
+            deviceStatus: 'NORMAL',
+            scanCount: 20,
+            location: '武汉',
+            address: '',
+            basePhotoPath: ''
+          }
+        ]
+        this.deviceList = res.map((item) => {
+          item.value = item.deviceNo
+          item.label = item.deviceModel
+          return item
+        })
+      })
+    },
+    methods: {
+      previewImg(item) {
+        console.log('item.basePhotoPath:', item.basePhotoPath)
+        uni.previewImage({
+          indicator: 'none',
+          loop: false,
+          urls: [item.basePhotoPath]
+        })
+      },
+      showError(txt) {
+        this.$refs.uToast.show({
+          title: txt,
+          type: 'error'
+        })
+      },
+      save() {
+        if (!this.curDeviceInfo.deviceNo) {
+          this.showError('请选择设备')
+          return
+        } else if (!this.curDeviceInfo.address) {
+          this.showError('请选择发往地')
+          return
+        } else if (!this.curDeviceInfo.basePhotoPath) {
+          this.showError('请上传快递单照片')
+          return
+        }
+        this.value.push({ ...this.curDeviceInfo })
+        this.showPopup = false
+      },
+      getImages(lists) {
+        this.curDeviceInfo.imgList = lists
+        this.curDeviceInfo.basePhotoPath = lists[0]?.url || ''
+      },
+      edit(item) {
+        console.log('item', item)
+        this.curDeviceInfo = { ...item }
+        this.comKey = Date.now() + ''
+        this.showPopup = true
+      },
+      open() {
+        this.curDeviceInfo = {
+          deviceNo: '', //设备编号
+          deviceModel: '',
+          supplierName: '', //供应商
+          deviceStatus: '', //运行状态
+          scanCount: '', //总扫描量
+          location: '', //当前所在地
+          address: '', //发往地
+          addressValue: [],
+          basePhotoPath: '', //拍照
+          imgList: []
+        }
+        this.comKey = Date.now() + ''
+        this.showPopup = true
+      },
+      change(obj) {
+        this.inOutTime = obj.result
+      },
+      confirm(arr) {
+        this.curDeviceInfo.deviceNo = arr[0].value
+        let item = this.deviceList.find((item) => item.deviceNo == arr[0].value)
+        for (let key in this.curDeviceInfo) {
+          if (item[key]) {
+            this.curDeviceInfo[key] = item[key]
+          }
+        }
+        !this.curDeviceInfo.addressValue.length && (this.curDeviceInfo.addressValue = [])
+      },
+      confirm2(e) {
+        this.curDeviceInfo.address = e.map((item) => item.label).join('')
+        this.curDeviceInfo.addressValue = e.map((item) => item.value)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .device-in-table {
+    .list-box {
+      .device-info-item {
+        padding: 24rpx 0;
+        border-bottom: 1px solid #f0f0f0;
+        &:first-child {
+          padding-top: 0;
+        }
+        .foot {
+          margin-top: 10rpx;
+          .link {
+            color: $u-type-primary;
+            font-size: 28rpx;
+          }
+        }
+        .content {
+          background-color: #f7f7f7;
+          border-radius: 12rpx;
+          padding: 24rpx;
+          .item {
+            color: #262626;
+            font-size: 24rpx;
+            line-height: 60rpx;
+          }
+        }
+        .device-no {
+          color: #262626;
+          font-size: 32rpx;
+        }
+      }
+    }
+    .form-box {
+      padding: 24rpx 24px 0 24px;
+      padding-top: 80rpx;
+      .f-item {
+        margin-bottom: 30rpx;
+        .label {
+          margin-bottom: 4rpx;
+          .red {
+            color: red;
+            margin-right: 4rpx;
+          }
+          .text {
+            color: #595959;
+          }
+        }
+      }
+    }
+    .head {
+      .title {
+        color: #595959;
+        font-size: 28rpx;
+        height: 60rpx;
+      }
+    }
+  }
+</style>

src/components/low-code/UPLOAD_IMAGE.vue

@@ -38,7 +38,13 @@
     created() {
       this.fileList = this.config.value || []
     },
-
+    watch: {
+      'config.value'(value) {
+        console.log('watch', value)
+        this.$refs.uUpload?.clear()
+        this.fileList = value || []
+      }
+    },
     methods: {
       //   ab2str(buffer, decodeType = 'utf-8') {
       //     // 默认是uft-8格式
@@ -47,21 +53,27 @@
       //   },
 
       change(lists) {
+        console.log('lll', lists)
         //非常蛋疼，这个change事件里的回调里提供的参数lists里，并不会立刻包含response属性，会有延迟！于是使用了一个定时器！
         setTimeout(() => {
-          let responseList = lists.map((item) => {
-            return item.response.data
-          })
+          //上传图片，删除图片会触发该方法，同样从父组件改变config的value值也会触发watch也会触发这里的change方法，通过lists里有没有file属性来判断
+          let imgList =
+            lists.length && lists[0].file
+              ? lists.map((item) => {
+                  return { ...item.response.data, url: item.response.data.previewUrl }
+                })
+              : lists
+
           //该组件兼容动态表单使用和常规业务使用，通过config参数里是否有formName来区分
           if (this.config.formName) {
             this.onChange({
               prop: this.config.formName,
-              value: responseList
+              value: imgList
             })
           } else {
-            this.$emit('getLists', responseList)
+            this.$emit('getLists', imgList)
           }
-        }, 200)
+        }, 250)
       },
       beforeUpload(index, list) {
         console.log('beforeUpload:')

src/components/low-code/my-form-item.vue

@@ -14,7 +14,8 @@
       <!-- <TEXT :config="config" :onChange="onChange" type="number"></TEXT> -->
       <!-- <UPLOADIMAGE :config="config" :onChange="onChange"></UPLOADIMAGE> -->
       <!-- <RADIOWITHINPUT :config="config" :onChange="onChange"></RADIOWITHINPUT> -->
-      <DEVICEINTABLE :config="config" :onChange="onChange"></DEVICEINTABLE>
+      <!-- <DEVICEINTABLE :config="config" :onChange="onChange"></DEVICEINTABLE> -->
+      <DEVICEOUTTABLE :config="config" :onChange="onChange"></DEVICEOUTTABLE>
     </view>
   </u-form-item>
 </template>
@@ -29,10 +30,11 @@
   import UPLOADIMAGE from './UPLOAD_IMAGE.vue'
   import RADIOWITHINPUT from './RADIO_WITH_INPUT.vue'
   import DEVICEINTABLE from './DEVICE_IN_TABLE.vue'
+  import DEVICEOUTTABLE from './DEVICE_OUT_TABLE.vue'
   export default {
     name: 'MyFormItem',
     props: ['config'],
-    components: { TEXT, SELECT, MULTIPLESELECT, DATE, RADIO, CHECKBOX, UPLOADIMAGE, RADIOWITHINPUT, DEVICEINTABLE },
+    components: { TEXT, SELECT, MULTIPLESELECT, DATE, RADIO, CHECKBOX, UPLOADIMAGE, RADIOWITHINPUT, DEVICEINTABLE, DEVICEOUTTABLE },
     computed: {
       isBigTitle() {
         return this.bigTitles.includes(this.config.code)

src/pages/index/tab1-content.vue

@@ -61,7 +61,7 @@
           <view class="label">客户名称</view>
           <u-input v-model="params.custom" type="input" :border="true" placeholder="请输入" clearable />
         </view>
-        <view class="flex justify-between items-center">
+        <view class="flex justify-between items-center p-b-50rpx">
           <u-button class="flex-1" @click="showPopup = false" :throttle-time="1">取消</u-button>
           <u-button class="flex-1 m-l-30rpx" type="primary" @click="searchByParams" :throttle-time="1">搜索</u-button>
         </view>

src/pages/index/tab2-content.vue

@@ -68,7 +68,7 @@
           <view class="label">客户名称</view>
           <u-input v-model="params.custom" type="input" :border="true" placeholder="请输入" clearable />
         </view>
-        <view class="flex justify-between items-center">
+        <view class="flex justify-between items-center p-b-50rpx">
           <u-button class="flex-1" @click="showPopup = false">取消</u-button>
           <u-button class="flex-1 m-l-30rpx" type="primary" @click="searchByParams">搜索</u-button>
         </view>

src/pages/index/tab3-content.vue

@@ -48,7 +48,7 @@
           <view class="label">标题关键字</view>
           <u-input v-model="params.title" type="input" :border="true" placeholder="请输入" clearable />
         </view>
-        <view class="flex justify-between items-center">
+        <view class="flex justify-between items-center p-b-50rpx">
           <u-button class="flex-1" @click="showPopup = false">取消</u-button>
           <u-button class="flex-1 m-l-30rpx" type="primary" @click="searchByParams">搜索</u-button>
         </view>

src/pages/sop-step/sop-step.vue

@@ -3,6 +3,7 @@
     <u-tabs :list="tabs" :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
     <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
       <view class="main">
+        <!-- <u-button class="premission-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权登录</u-button> -->
         <RadiusCell title="SOP各协作项目角色说明" @click="showPopup1 = true"></RadiusCell>
         <RadiusCell title="项目派单信息" @click="showPopup2 = true"></RadiusCell>
         <view class="form-wrap">
@@ -123,6 +124,9 @@
       }
     },
     methods: {
+      getPhoneNumber(e) {
+        console.log('eee', e)
+      },
       tabChange(index) {
         this.current = index
       },

src/pages/sop-step/test.js

@@ -28,9 +28,8 @@ export default {
     formKey: 'XXX',
     formProperty: [
       {
-        code: 'DEVICE_IN_TABLE',
-        title: '设备入库登记',
-        span: 12
+        code: 'DEVICE_OUT_TABLE',
+        title: '设备出库登记'
       }
       // {
       //   code: 'RADIO',

src/utils/area.js

@@ -0,0 +1,45 @@
+import pcaData from 'china-division/dist/pca-code.json'
+
+export const buildData = (limitLevel) => {
+  let areaCodeMap = {}
+
+  const transferData = (list, parent, parentLevel) => {
+    let curLevel = parentLevel + 1
+    // if (list.length === 1 && list[0].name === '市辖区' && limitLevel === 2) {
+    //   return transferData(list[0].children, parent, parentLevel);
+    // }
+    return list.map((area) => {
+      let narea = { ...area }
+      if (narea.name === '市辖区' && parent) {
+        narea.name = parent.name
+      }
+      let pathInfo = { pathName: '', pathCode: '' }
+      if (parent) {
+        pathInfo.pathName = `${parent.pathName}_${narea.name}`
+        pathInfo.pathCode = `${parent.pathCode}_${narea.code}`
+      } else {
+        pathInfo.pathName = `${narea.name}`
+        pathInfo.pathCode = `${narea.code}`
+      }
+      areaCodeMap[narea.code] = narea.name
+
+      if (area.children && area.children.length && curLevel < limitLevel) {
+        return {
+          label: narea.name,
+          value: narea.code,
+          children: transferData(area.children, { ...area, ...pathInfo }, curLevel)
+        }
+      } else {
+        areaCodeMap[pathInfo.pathName] = pathInfo.pathCode
+
+        return {
+          label: narea.name,
+          value: narea.code
+        }
+      }
+    })
+  }
+  const areaData = transferData(pcaData, null, 0)
+
+  return { areaData, areaCodeMap }
+}