水电上报表单修改

pages/tabBar/sdPage/dfReport.vue

@@ -1,15 +1,12 @@
 <template>
   <view class="page-content dfReport">
-    <!-- 房间图片 -->
     <view class="bg-box">
 			<view class="bg-text">
         <view>填写信息</view>
         <view>请您填写相关问题</view>
       </view>
-      
       <image class="bg-img" src="/static/img/bsorbxBac.png" mode="aspectFill"></image>
 		</view>
-
     <view class="info-card">
       <view class="meter-row">
         <view class="meter-label">
@@ -17,8 +14,8 @@
           <text>乐业社区</text>
         </view>
         <view class="picker-label">
-        <picker mode="selector" :range="items" @change="onPickerChange($event,'乐业社区')">
+          <picker mode="selector" :range="deptNames" @change="onPickerChange($event,'乐业社区')">
-          <view :style="{'color':!form.pickerValue?'#cbcbcb':''}">{{form.pickerValue || pickerPlaceholder}}</view>
+            <view :style="{'color':!form.apartmentName?'#cbcbcb':''}">{{form.apartmentName || pickerPlaceholder}}</view>
           </picker>
           <image class="arrow-r" src="/static/img/arrow-right.png" mode="aspectFill"></image>
         </view>
@@ -29,40 +26,44 @@
           <text>房屋</text>
         </view>
         <view class="picker-label">
-        <picker mode="selector" :range="items" @change="onPickerChange($event,'房屋')">
+          <view class="uni-list-cell-db" v-if="multiArray[0].length">
-          <view :style="{'color':!form.pickerValue2?'#cbcbcb':''}">{{form.pickerValue2 || pickerPlaceholder}}</view>
+            <picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
+              <view class="uni-input">{{multiArray[0][multiIndex[0]] + multiArray[1][multiIndex[1]] + multiArray[2][multiIndex[2]]}}</view>
             </picker>
+          </view>
+          <view v-else @click="handleShowToast" style="color:#cbcbcb">请选择社区</view>
           <image class="arrow-r" src="/static/img/arrow-right.png" mode="aspectFill"></image>
         </view>
       </view>
     </view>
-  <view class="section-card">
+    <scroll-view class="house-view" scroll-y="true">
+      <view class="section-card" v-for="(item,index) in form.waterMeters" :key="item.id">
         <view class="meter-row">
           <text class="meter-label">水表号</text>
-      <u-input v-model="form.waterMeter" type="digit" placeholder="请输入水表号" border="none"  />
+          <!-- <text>20072620</text> -->
+          <u-input v-model="item.waterMeter" type="digit" placeholder="请输入水表号" border="none"  />
         </view>
         <view class="meter-row">
           <text class="meter-label">上次表数</text>
-      <u-input v-model="form.waterMeter" type="digit" :placeholder="`3823.1`" border="none"  />
+          <u-input v-model="item.waterMeter" type="digit" :placeholder="`3823.1`" border="none"  />
         </view>
         <view class="meter-row">
           <text class="meter-label">本次表数</text>
-      <u-input v-model="form.waterMeter" type="digit" placeholder="请输入本次表数" border="none"  />
+          <u-input v-model="item.waterMeter" type="digit" placeholder="请输入本次表数" border="none"  />
         </view>
-
         <view class="imeter-row">
           <text class="meter-label">上传图片</text>
           <u-upload
-        v-model="fileList"
+            v-model="item.fileList"
             :max-count="10"
             :multiple="true"
             :preview-full-image="true"
             :deletable="true"
             :show-upload-list="true"
-        :file-list="fileList"
+            :file-list="item.fileList"
             accept="image"
-        @after-read="afterRead"
+            @after-read="afterRead($event,index)"
-        @delete="onDelete"
+            @delete="onDelete($event,index)"
           >
             <view class="custom-upload-btn">
               <view class="icon-box">
@@ -72,50 +73,205 @@
             </view>
           </u-upload>
         </view>
-      
       </view>
+    </scroll-view>
     <!-- 提交按钮 -->
-  <view class="u-button--primary">提交</view>
+    <view class="u-button--primary" @click="onSubmit">提交</view>
   </view>
 </template>
 
 <script>
+
+import {
+  queryDeptDropdownList,
+} from "@/common/rec";
+import { getdeptList } from '@/common/api';
+import { uploadImage } from '@/pages/api';
+
 export default {
   data() {
     return {
-      items: ['选项1', '选项2', '选项3'], // 下拉列表的选项
       pickerPlaceholder: '请选择', // 初始显示的文字
       waterMeter: 3245.1,
       electricMeter: 2672.6,
       remark: '',
       fileList: [],
+      deptNames: [],
+      deptOptions: [],
+
+      buildingOptions: [],
+      unitOptions: [],
+      houseOptions: [],
+      currentHouse: {},
+      multiArray: [[],[],[]],
+      multiIndex: [0, 0, 0],
       form:{
-        pickerValue: '',
+        apartmentId: '',
-        pickerValue2: '',
+        apartmentName:'',
-        waterMeter: ''
+        buildingId: '',
+        unitId: '',
+        houseId: '',
+        waterMeters: []
       },
     }
   },
+  watch: {
+    "form.apartmentId": {
+      handler(newVal, oldVal) {
+        console.log("newVal", newVal);
+        this.form.buildingId = null;
+        this.form.unitId = null;
+        this.form.houseId = null;
+        this.buildingOptions = [];
+        this.unitOptions = [];
+        this.houseOptions = [];
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  onLoad () {
+    this.getTree()
+  },
   methods: {
-    onPickerChange(e,type){
+    getTree(){
+      getdeptList().then(async (res) => {
+        this.deptOptions = this.handleTree(
+          res.data,
+          "deptId",
+          "parentId",
+          "children",
+          2
+        );
+        const deptInfo = this.deptOptions[0].children.filter(item=>item.deptName == '城阳区')[0]
+        this.deptOptions = await this.getListByParentId('1', deptInfo.deptId);
+        const array = JSON.parse(JSON.stringify(this.deptOptions))
+        this.deptNames = array.map(item=>item.name)
+      });
+    },
+    // 三级联动通用接口
+    async getListByParentId(type, id) {
+      return new Promise((resolve, reject) => {
+        queryDeptDropdownList({ type, id }).then((res) => {
+          resolve(res.data);
+        });
+      });
+    },
+    async onPickerChange(e,type){
       if(type == '乐业社区'){
-        this.form.pickerValue = this.items[e.detail.value]
+        const apartmentInfo =  this.deptOptions[e.detail.value]
-      } else if(type == '房屋'){
+        this.form.apartmentName = apartmentInfo.name
-        this.form.pickerValue2 = this.items[e.detail.value]
+        this.form.apartmentId = apartmentInfo.id
+        // 楼
+        const buildingArray = await this.getListByParentId("2", apartmentInfo.id);
+        this.buildingOptions = buildingArray
+        const buildingNames = buildingArray.map(item=> item.name)
+        this.form.buildingId = buildingArray[0].id
+        // 单元
+        const unitArray = await this.getListByParentId("3", buildingArray[0].id);
+        this.unitOptions = unitArray
+        const unitNames = unitArray.map(item=> item.name)
+        this.form.unitId = unitArray[0].id
+        // 户
+        const houseArray = await this.getListByParentId("4", unitArray[0].id);
+        this.houseOptions = houseArray
+        const houseNames = houseArray.map(item=> item.name)
+        this.form.houseId = houseArray[0].id
+        let house = houseArray[0]
+        for (let index = 0; index < house.type; index++) {
+          this.form.waterMeters.push({
+            waterMeter: '',
+            imageList: [],
+            fileList: []
+          })
         }
+        this.multiArray = [buildingNames, unitNames, houseNames]
+      }
+    },
+    handleShowToast(){
+      uni.showToast({ title: '请选择乐业社区', icon: 'none' });
+    },
+    async bindMultiPickerColumnChange (e) {
+      if(!this.multiArray[0].length) return
+      console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
+      this.multiIndex[e.detail.column] = e.detail.value
+      switch (e.detail.column) {
+        case 0: {
+          const unitArray = await this.getListByParentId("3", this.buildingOptions[e.detail.value].id);
+          this.unitOptions = unitArray
+          const unitNames = unitArray.map(item=> item.name)
+          this.form.unitId = unitArray[0].id
+
+          const houseArray = await this.getListByParentId("4", unitArray[0].id);
+          this.houseOptions = houseArray
+          const houseNames = houseArray.map(item=> item.name)
+          this.form.houseId = houseArray[0].id
+
+          this.multiArray[1] = unitNames
+          this.multiArray[2] = houseNames
+
+        }//拖动第1列
+          this.multiIndex.splice(1, 1, 0)
+          this.multiIndex.splice(2, 1, 0)
+          break
+        case 1:{
+          const houseArray = await this.getListByParentId("4", this.unitOptions[e.detail.value].id);
+          this.houseOptions = houseArray
+          const houseNames = houseArray.map(item=> item.name)
+          this.form.houseId = houseArray[0].id
+
+          this.multiArray[2] = houseNames
+        } //拖动第2列
+          this.multiIndex.splice(2, 1, 0)
+          break
+        case 2:{
+          this.currentHouse = this.houseOptions[e.detail.value]
+          console.log(this.houseOptions[e.detail.value]);
+        }
+      }
+      this.$forceUpdate()
     },
-    afterRead(event) {
+    async afterRead(event,index) {
-      let files = Array.isArray(event) ? event : [event]
+      let lists = [].concat(event.file);
-      this.fileList = this.fileList.concat(files)
+      let fileListLen = this.form.waterMeters[index][`fileList${event.name}`].length;
+      lists.map((item) => {
+        this.form.waterMeters[index][`fileList${event.name}`].push({
+          ...item,
+          status: "uploading",
+          message: "上传中",
+        });
+      });
+      for (let i = 0; i < lists.length; i++) {
+        const result = await uploadImage(lists[i].url);
+        let item = this.form.waterMeters[index][`fileList${event.name}`][fileListLen];
+
+        this.form.waterMeters[index][`fileList${event.name}`].splice(
+          fileListLen,
+          1,
+          Object.assign(item, {
+            status: "success",
+            message: "",
+            url: result.url,
+          })
+        );
+        fileListLen++;
+      }
+      var arry = [];
+      this.form.waterMeters[index].fileList.filter((v, i) => {
+        arry.push(v.url);
+      });
+      this.form.waterMeters[index].imageList = arry
     },
-    onDelete(event) {
+    onDelete(event,index) {
-      this.fileList.splice(event.index, 1)
+      this.form.waterMeters[index].fileList.splice(event.index, 1)
+      this.form.waterMeters[index].imageList.splice(event.index, 1)
     },
     onSubmit() {
-      if(!this.form.pickerValue){
+      let {buildingId, unitId, houseId} = this.form
+      if(!this.form.apartmentName){
         uni.showToast({ title: '请选择乐业社区', icon: 'none' });
         return
-      } else if(!this.form.pickerValue2){
+      } else if(!buildingId && !unitId && !houseId){
         uni.showToast({ title: '请选择房屋', icon: 'none' });
         return
       }
@@ -132,14 +288,12 @@ export default {
   padding-bottom: 40rpx;
 }
 .bg-box {
-  /* padding-top: 40rpx; */
   width: 100vw;
   height: 280rpx;
   object-fit: cover;
   display: block;
   position: relative;
   display: flex;
-  /* align-items: center; */
 }
 .bg-img{
   position: absolute;
@@ -171,6 +325,9 @@ export default {
   position: relative;
   z-index: 2;
 }
+.house-view{
+  height: calc(100vh - 600rpx);
+}
 .room-title {
   font-weight: bold;
   font-size: 32rpx;
@@ -292,6 +449,7 @@ display: flex;
 .submit-btn-wrap {
   width: 100%;
   display: flex;
+  align-items: center;
   justify-content: center;
   margin: 40rpx 0 0 0;
 }

pages/tabBar/sdPage/sfReport.vue

@@ -1,15 +1,12 @@
 <template>
   <view class="page-content sfReport">
-    <!-- 房间图片 -->
     <view class="bg-box">
 			<view class="bg-text">
         <view>填写信息</view>
         <view>请您填写相关问题</view>
       </view>
-      
       <image class="bg-img" src="/static/img/bsorbxBac.png" mode="aspectFill"></image>
 		</view>
-
     <view class="info-card">
       <view class="meter-row">
         <view class="meter-label">
@@ -17,8 +14,8 @@
           <text>乐业社区</text>
         </view>
         <view class="picker-label">
-        <picker mode="selector" :range="items" @change="onPickerChange($event,'乐业社区')">
+          <picker mode="selector" :range="deptNames" @change="onPickerChange($event,'乐业社区')">
-          <view :style="{'color':!form.pickerValue?'#cbcbcb':''}">{{form.pickerValue || pickerPlaceholder}}</view>
+            <view :style="{'color':!form.apartmentName?'#cbcbcb':''}">{{form.apartmentName || pickerPlaceholder}}</view>
           </picker>
           <image class="arrow-r" src="/static/img/arrow-right.png" mode="aspectFill"></image>
         </view>
@@ -29,41 +26,44 @@
           <text>房屋</text>
         </view>
         <view class="picker-label">
-        <picker mode="selector" :range="items" @change="onPickerChange($event,'房屋')">
+          <view class="uni-list-cell-db" v-if="multiArray[0].length">
-          <view :style="{'color':!form.pickerValue2?'#cbcbcb':''}">{{form.pickerValue2 || pickerPlaceholder}}</view>
+            <picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
+              <view class="uni-input">{{multiArray[0][multiIndex[0]] + multiArray[1][multiIndex[1]] + multiArray[2][multiIndex[2]]}}</view>
             </picker>
+          </view>
+          <view v-else @click="handleShowToast" style="color:#cbcbcb">请选择社区</view>
           <image class="arrow-r" src="/static/img/arrow-right.png" mode="aspectFill"></image>
         </view>
       </view>
     </view>
-  <view class="section-card">
+    <scroll-view class="house-view" scroll-y="true">
+      <view class="section-card" v-for="(item,index) in form.waterMeters" :key="item.id">
         <view class="meter-row">
           <text class="meter-label">水表号</text>
           <!-- <text>20072620</text> -->
-      <u-input v-model="form.waterMeter" type="digit" placeholder="请输入水表号" border="none"  />
+          <u-input v-model="item.waterMeter" type="digit" placeholder="请输入水表号" border="none"  />
         </view>
         <view class="meter-row">
           <text class="meter-label">上次表数</text>
-      <u-input v-model="form.waterMeter" type="digit" :placeholder="`3823.1`" border="none"  />
+          <u-input v-model="item.waterMeter" type="digit" :placeholder="`3823.1`" border="none"  />
         </view>
         <view class="meter-row">
           <text class="meter-label">本次表数</text>
-      <u-input v-model="form.waterMeter" type="digit" placeholder="请输入本次表数" border="none"  />
+          <u-input v-model="item.waterMeter" type="digit" placeholder="请输入本次表数" border="none"  />
         </view>
-
         <view class="imeter-row">
           <text class="meter-label">上传图片</text>
           <u-upload
-        v-model="fileList"
+            v-model="item.fileList"
             :max-count="10"
             :multiple="true"
             :preview-full-image="true"
             :deletable="true"
             :show-upload-list="true"
-        :file-list="fileList"
+            :file-list="item.fileList"
             accept="image"
-        @after-read="afterRead"
+            @after-read="afterRead($event,index)"
-        @delete="onDelete"
+            @delete="onDelete($event,index)"
           >
             <view class="custom-upload-btn">
               <view class="icon-box">
@@ -73,50 +73,205 @@
             </view>
           </u-upload>
         </view>
-      
       </view>
+    </scroll-view>
     <!-- 提交按钮 -->
     <view class="u-button--primary" @click="onSubmit">提交</view>
   </view>
 </template>
 
 <script>
+
+import {
+  queryDeptDropdownList,
+} from "@/common/rec";
+import { getdeptList } from '@/common/api';
+import { uploadImage } from '@/pages/api';
+
 export default {
   data() {
     return {
-      items: ['选项1', '选项2', '选项3'], // 下拉列表的选项
       pickerPlaceholder: '请选择', // 初始显示的文字
       waterMeter: 3245.1,
       electricMeter: 2672.6,
       remark: '',
       fileList: [],
+      deptNames: [],
+      deptOptions: [],
+
+      buildingOptions: [],
+      unitOptions: [],
+      houseOptions: [],
+      currentHouse: {},
+      multiArray: [[],[],[]],
+      multiIndex: [0, 0, 0],
       form:{
-        pickerValue: '',
+        apartmentId: '',
-        pickerValue2: '',
+        apartmentName:'',
-        waterMeter: ''
+        buildingId: '',
+        unitId: '',
+        houseId: '',
+        waterMeters: []
       },
     }
   },
+  watch: {
+    "form.apartmentId": {
+      handler(newVal, oldVal) {
+        console.log("newVal", newVal);
+        this.form.buildingId = null;
+        this.form.unitId = null;
+        this.form.houseId = null;
+        this.buildingOptions = [];
+        this.unitOptions = [];
+        this.houseOptions = [];
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  onLoad () {
+    this.getTree()
+  },
   methods: {
-    onPickerChange(e,type){
+    getTree(){
+      getdeptList().then(async (res) => {
+        this.deptOptions = this.handleTree(
+          res.data,
+          "deptId",
+          "parentId",
+          "children",
+          2
+        );
+        const deptInfo = this.deptOptions[0].children.filter(item=>item.deptName == '城阳区')[0]
+        this.deptOptions = await this.getListByParentId('1', deptInfo.deptId);
+        const array = JSON.parse(JSON.stringify(this.deptOptions))
+        this.deptNames = array.map(item=>item.name)
+      });
+    },
+    // 三级联动通用接口
+    async getListByParentId(type, id) {
+      return new Promise((resolve, reject) => {
+        queryDeptDropdownList({ type, id }).then((res) => {
+          resolve(res.data);
+        });
+      });
+    },
+    async onPickerChange(e,type){
       if(type == '乐业社区'){
-        this.form.pickerValue = this.items[e.detail.value]
+        const apartmentInfo =  this.deptOptions[e.detail.value]
-      } else if(type == '房屋'){
+        this.form.apartmentName = apartmentInfo.name
-        this.form.pickerValue2 = this.items[e.detail.value]
+        this.form.apartmentId = apartmentInfo.id
+        // 楼
+        const buildingArray = await this.getListByParentId("2", apartmentInfo.id);
+        this.buildingOptions = buildingArray
+        const buildingNames = buildingArray.map(item=> item.name)
+        this.form.buildingId = buildingArray[0].id
+        // 单元
+        const unitArray = await this.getListByParentId("3", buildingArray[0].id);
+        this.unitOptions = unitArray
+        const unitNames = unitArray.map(item=> item.name)
+        this.form.unitId = unitArray[0].id
+        // 户
+        const houseArray = await this.getListByParentId("4", unitArray[0].id);
+        this.houseOptions = houseArray
+        const houseNames = houseArray.map(item=> item.name)
+        this.form.houseId = houseArray[0].id
+        let house = houseArray[0]
+        for (let index = 0; index < house.type; index++) {
+          this.form.waterMeters.push({
+            waterMeter: '',
+            imageList: [],
+            fileList: []
+          })
+        }
+        this.multiArray = [buildingNames, unitNames, houseNames]
       }
     },
-    afterRead(event) {
+    handleShowToast(){
-      let files = Array.isArray(event) ? event : [event]
+      uni.showToast({ title: '请选择乐业社区', icon: 'none' });
-      this.fileList = this.fileList.concat(files)
     },
-    onDelete(event) {
+    async bindMultiPickerColumnChange (e) {
-      this.fileList.splice(event.index, 1)
+      if(!this.multiArray[0].length) return
+      console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
+      this.multiIndex[e.detail.column] = e.detail.value
+      switch (e.detail.column) {
+        case 0: {
+          const unitArray = await this.getListByParentId("3", this.buildingOptions[e.detail.value].id);
+          this.unitOptions = unitArray
+          const unitNames = unitArray.map(item=> item.name)
+          this.form.unitId = unitArray[0].id
+
+          const houseArray = await this.getListByParentId("4", unitArray[0].id);
+          this.houseOptions = houseArray
+          const houseNames = houseArray.map(item=> item.name)
+          this.form.houseId = houseArray[0].id
+
+          this.multiArray[1] = unitNames
+          this.multiArray[2] = houseNames
+
+        }//拖动第1列
+          this.multiIndex.splice(1, 1, 0)
+          this.multiIndex.splice(2, 1, 0)
+          break
+        case 1:{
+          const houseArray = await this.getListByParentId("4", this.unitOptions[e.detail.value].id);
+          this.houseOptions = houseArray
+          const houseNames = houseArray.map(item=> item.name)
+          this.form.houseId = houseArray[0].id
+
+          this.multiArray[2] = houseNames
+        } //拖动第2列
+          this.multiIndex.splice(2, 1, 0)
+          break
+        case 2:{
+          this.currentHouse = this.houseOptions[e.detail.value]
+          console.log(this.houseOptions[e.detail.value]);
+        }
+      }
+      this.$forceUpdate()
+    },
+    async afterRead(event,index) {
+      let lists = [].concat(event.file);
+      let fileListLen = this.form.waterMeters[index][`fileList${event.name}`].length;
+      lists.map((item) => {
+        this.form.waterMeters[index][`fileList${event.name}`].push({
+          ...item,
+          status: "uploading",
+          message: "上传中",
+        });
+      });
+      for (let i = 0; i < lists.length; i++) {
+        const result = await uploadImage(lists[i].url);
+        let item = this.form.waterMeters[index][`fileList${event.name}`][fileListLen];
+
+        this.form.waterMeters[index][`fileList${event.name}`].splice(
+          fileListLen,
+          1,
+          Object.assign(item, {
+            status: "success",
+            message: "",
+            url: result.url,
+          })
+        );
+        fileListLen++;
+      }
+      var arry = [];
+      this.form.waterMeters[index].fileList.filter((v, i) => {
+        arry.push(v.url);
+      });
+      this.form.waterMeters[index].imageList = arry
+    },
+    onDelete(event,index) {
+      this.form.waterMeters[index].fileList.splice(event.index, 1)
+      this.form.waterMeters[index].imageList.splice(event.index, 1)
     },
     onSubmit() {
-      if(!this.form.pickerValue){
+      let {buildingId, unitId, houseId} = this.form
+      if(!this.form.apartmentName){
         uni.showToast({ title: '请选择乐业社区', icon: 'none' });
         return
-      } else if(!this.form.pickerValue2){
+      } else if(!buildingId && !unitId && !houseId){
         uni.showToast({ title: '请选择房屋', icon: 'none' });
         return
       }
@@ -170,6 +325,9 @@ export default {
   position: relative;
   z-index: 2;
 }
+.house-view{
+  height: calc(100vh - 600rpx);
+}
 .room-title {
   font-weight: bold;
   font-size: 32rpx;

pages/tabBar/xjPage/xj.vue

@@ -77,11 +77,10 @@ import {
 import { getdeptList,addInspection } from '@/common/api';
 import { uploadImage } from '@/pages/api';
 import { getDicts } from "@/common/system/dict/data";
-import { baseUrl } from "@/utils/config";
+
 export default {
   data () {
     return {
-      uploadUlr: baseUrl + '/common/upload',
       wtlxShow: false,
       lysqShow: false,
       deptOptions: [],
@@ -177,8 +176,8 @@ export default {
           "children",
           2
         );
-        this.form.apartmentId = this.deptOptions[0].children.filter(item=>item.deptName == '城阳区')[0].deptId
+        const deptInfo = this.deptOptions[0].children[0]
-        this.deptOptions = await this.getListByParentId("1", this.form.apartmentId);
+        this.deptOptions = await this.getListByParentId("1", deptInfo.deptId);
         console.log(this.deptOptions);
       });
     },

pages/tabBar/xjPage/xjRecord.vue

@@ -45,6 +45,9 @@
       </view>
     </view>
     <view style="text-align: center;" v-if="isLoading">加载中...</view>
+    <view v-else class="no-data">
+      暂无数据~
+    </view>
   </scroll-view>
 </template>
 
@@ -133,8 +136,7 @@ export default {
     },
 
     handlePreviewImage(list,index){
-      const images = list.filter(item=> item.format == 'image')
+      const filePaths = list.filter(item=> item.format == 'image').map(item=> item.url)
-      const filePaths = images.map(item=> item.url)
       uni.previewImage({
         urls: filePaths,
         current:index,