异常人员举报信息增加

src/api/sys/DictService.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+
+export default class DictService {
+
+  getDictMap(dictTypeId) {
+    return request.get('/sys/dict/getDictMap', {
+      'dictTypeId': dictTypeId
+    }
+    )
+  }
+
+}

src/main.js

@@ -6,7 +6,7 @@ import './styles/index.css';
 import './styles/style.css';
 import api from '@/api';
 import axios from 'axios';
-
+import dictUtils from '@/utils/dictUtils'
 
 
 import { NavBar, Button, Form, Field, CellGroup, Tabbar, TabbarItem, Icon, Toast, Image as VanImage, Grid, GridItem, Row, Col, Tab, Tabs, Popup, PickerGroup, DatePicker, TimePicker, Picker, Uploader, Dialog, List, Cell, Cascader, Search, RadioGroup, Radio, DropdownMenu, DropdownItem, SwipeCell, Checkbox, CheckboxGroup, Swipe, SwipeItem, Loading, TextEllipsis } from 'vant';
@@ -57,4 +57,5 @@ app.use(router)
 
 app.config.globalProperties.$API = api
 app.config.globalProperties.$axios = axios
+app.config.globalProperties.$dictUtils = dictUtils
 app.mount('#app')

src/utils/dictUtils.js

@@ -0,0 +1,40 @@
+import DictService from '@/api/sys/DictService'
+export function getDictLabel(type, value, defaultLabel) {
+  if ((!value && value !== 0) || (!type && type !== 0)) {
+    if (defaultLabel !== undefined) {
+      return defaultLabel
+    } else {
+      return '--'
+    }
+  }
+  let dictList = JSON.parse(localStorage.getItem('dictList') || '[]')
+  let dicts = dictList[type]
+  if (dicts) {
+    for (let i = 0; i < dicts.length; i++) {
+      if (dicts[i].value && dicts[i].value.toString() === value.toString()) {
+        return dicts[i].label
+      }
+    }
+  }
+  if (defaultLabel !== undefined) {
+    return defaultLabel
+  } else {
+    return '--'
+  }
+}
+
+export function getDictList(type) {
+  if (!type && type !== 0) {
+    return []
+  }
+  let dictList = JSON.parse(localStorage.getItem('dictList') || '[]')
+  let dicts = dictList[type]
+  return dicts || []
+}
+export function refreshDictList() {
+  new DictService().getDictMap().then((data) => {
+    localStorage.setItem('dictList', JSON.stringify(data || '[]'))
+  })
+}
+
+export default { getDictList, getDictLabel, refreshDictList }

src/views/activityMan/differentbelievers/ReligiousPeopleReportInfo.vue

@@ -1,11 +1,5 @@
 <template>
-  <van-nav-bar
-    fixed
-    title="私设聚会点"
-    left-text=""
-    left-arrow
-    @click-left="onClickLeft"
-  />
+  <van-nav-bar fixed title="私设聚会点" left-text="" left-arrow @click-left="onClickLeft" />
   <van-loading size="16px" v-if="isLoading">加载中...</van-loading>
   <div class="main" v-if="!isLoading">
     <div class="banner">
@@ -14,40 +8,19 @@
     <div class="info">
       <p class="miniTitle">详细信息</p>
       <van-cell-group>
-        <van-field
-          v-model="inputForm.abnormalName"
-          center
-          readonly
-          label="异常人员:"
-          input-align="right"
-        />
+        <van-field v-model="religiousType" center readonly label="宗教类型:" input-align="right" />
       </van-cell-group>
       <van-cell-group>
-        <van-field
-          v-model="inputForm.abnormalIdcar"
-          center
-          readonly
-          label="身份证号:"
-          input-align="right"
-        />
+        <van-field v-model="inputForm.abnormalName" center readonly label="异常人员:" input-align="right" />
       </van-cell-group>
       <van-cell-group>
-        <van-field
-          v-model="inputForm.abnormalPhone"
-          center
-          label="手机号:"
-          readonly
-          input-align="right"
-        />
+        <van-field v-model="inputForm.abnormalIdcar" center readonly label="身份证号:" input-align="right" />
       </van-cell-group>
       <van-cell-group>
-        <van-field
-          v-model="inputForm.sex"
-          center
-          label="性别:"
-          readonly
-          input-align="right"
-        >
+        <van-field v-model="inputForm.abnormalPhone" center label="手机号:" readonly input-align="right" />
+      </van-cell-group>
+      <van-cell-group>
+        <van-field v-model="inputForm.sex" center label="性别:" readonly input-align="right">
           <template #input>
             <span v-if="inputForm.sex == 1">男</span>
             <span v-if="inputForm.sex == 2">女</span>
@@ -55,57 +28,38 @@
         </van-field>
       </van-cell-group>
       <van-cell-group>
-        <van-field
-          v-model="inputForm.nativePlace"
-          center
-          readonly
-          label="籍贯:"
-          input-align="right"
-        />
+        <van-field v-model="inputForm.nativePlace" center readonly label="籍贯:" input-align="right" />
+      </van-cell-group>
+      <van-cell-group>
+        <van-field v-model="inputForm.currentResidence" center readonly label="现居地:" input-align="right" />
       </van-cell-group>
       <van-cell-group>
-        <van-field
-          v-model="inputForm.currentResidence"
-          center
-          readonly
-          label="现居地:"
-          input-align="right"
-        />
+        <van-field v-model="inputForm.currentResidenceDetail" center readonly label="现居地详情:" input-align="right"
+          right-icon="location" />
       </van-cell-group>
       <van-cell-group>
-        <van-field
-          v-model="inputForm.currentResidenceDetail"
-          center
-          readonly
-          label="现居地详情:"
-          input-align="right"
-          right-icon="location"
-        />
+        <van-field v-model="inputForm.abnormalBehavior" center readonly label="异常行为:" input-align="right">
+        </van-field>
       </van-cell-group>
       <van-cell-group>
-        <van-field
-          v-model="inputForm.abnormalBehavior"
-          center
-          readonly
-          label="异常行为:"
-          input-align="right"
-        >
+        <van-field name="uploader" readonly label="附件:" input-align="right">
+          <template #input>
+            <span v-show="fileList.length == 0">无</span>
+            <van-uploader v-show="fileList.length != 0" v-model="fileList" :max-count="fileList.length" :deletable="false"
+              @click-preview="downHandle">
+            </van-uploader>
+          </template>
         </van-field>
       </van-cell-group>
     </div>
-    <van-button
-      v-if="inputForm.assessment == 0"
-      type="primary"
-      class="btn-sub"
-      @click="update"
-      >审核</van-button
-    >
+    <van-button v-if="inputForm.assessment == 0" type="primary" class="btn-sub" @click="update">审核</van-button>
   </div>
 </template>
       
-      <script>
-import { ref } from "vue";
+<script>
+import { ref, getCurrentInstance } from "vue";
 import { useRoute } from "vue-router";
+import $base from "@/utils/config";
 import ReligiousPeopleReportService from "@/api/differentbelievers/ReligiousPeopleReportService";
 export default {
   setup() {
@@ -135,14 +89,52 @@ export default {
       currentResidenceLevel5: "",
       currentResidenceLevel6: "",
     });
+    let religiousType = ref('');
+    // 文件
+    let fileList = ref([]);
     // 获取信息
     let route = useRoute();
+    const current = getCurrentInstance()
     new ReligiousPeopleReportService()
       .queryById(route.query.id)
       .then((data) => {
         inputForm.value = data;
+        religiousType.value = current.appContext.config.globalProperties.$dictUtils.getDictLabel('hs_religion_type', inputForm.value.religiousType)
+        inputForm.value.information.split("|").forEach((item) => {
+          if (item.trim().length > 0) {
+            fileList.value.push({
+              file: {
+                name: decodeURIComponent(
+                  item.substring(item.lastIndexOf("/") + 1)
+                ),
+              },
+              url: $base + item.replace("程序附件//", "程序附件/"),
+            });
+          }
+        });
         isLoading.value = false;
       });
+    /**
+ * 下载文件 网页端可用
+ */
+    const downHandle = (fileObj) => {
+      if (
+        !(
+          fileObj.file.name.includes(".jpg") ||
+          fileObj.file.name.includes(".jpeg") ||
+          fileObj.file.name.includes(".png")
+        )
+      ) {
+        // 声明a标签
+        const aEle = document.createElement("a");
+        // 设置下载文件名
+        aEle.download = fileObj.file.name;
+        // 下载地址
+        aEle.href = fileObj.url;
+        // 调用下载
+        aEle.click();
+      }
+    };
     // 审核通过
     const update = () => {
       xm.showConfirm({
@@ -167,6 +159,9 @@ export default {
       inputForm,
       isLoading,
       update,
+      fileList,
+      downHandle,
+      religiousType
     };
   },
 };

src/views/activityMan/differentbelievers/ReligiousPeopleReportView.vue

@@ -1,65 +1,33 @@
 <template>
-  <van-nav-bar
-    fixed
-    title="信教异常群众信息上报"
-    left-text=""
-    left-arrow
-    @click-left="onClickLeft"
-  />
+  <van-nav-bar fixed title="信教异常群众信息上报" left-text="" left-arrow @click-left="onClickLeft" />
   <van-loading size="16px" v-if="isLoading">加载中...</van-loading>
   <div class="main" v-if="!isLoading">
     <!-- <p class="title">信教异常群众上报</p> -->
-    <van-form
-      class="formArea"
-      @submit="submit"
-      show-error
-      :show-error-message="false"
-      validate-trigger="onChange"
-    >
+    <van-form class="formArea" @submit="submit" show-error :show-error-message="false" validate-trigger="onChange">
       <!-- <p class="miniTitle">基础信息</p> -->
       <van-cell-group>
-        <van-field
-          v-model="inputForm.abnormalName"
-          center
-          required
-          :rules="[{ required: true }]"
-          label="异常人员:"
-          placeholder="请填写异常人员姓名"
-          input-align="right"
-        />
+        <van-field v-model="religiousType" center readonly label="宗教类型:" placeholder="请选择宗教类型" input-align="right"
+          right-icon="arrow-down" @click="showPlace = true" />
+        <van-popup v-model:show="showPlace" round position="bottom">
+          <van-picker title="宗教类型" :columns="$dictUtils.getDictList('hs_religion_type')" :columns-field-names="{
+            text: 'label',
+            value: 'value'
+          }" @cancel="showPlace = false" @confirm="getType" />
+        </van-popup>
+      </van-cell-group>
+      <van-cell-group>
+        <van-field v-model="inputForm.abnormalName" center label="异常人员:" placeholder="请填写异常人员姓名" input-align="right" />
       </van-cell-group>
       <van-cell-group>
-        <van-field
-          v-model="inputForm.abnormalIdcar"
-          center
-          required
-          :rules="[{ required: true }]"
-          label="身份证号:"
-          placeholder="请填写身份证号"
-          input-align="right"
-          type="digit"
-        />
+        <van-field v-model="inputForm.abnormalIdcar" center label="身份证号:" placeholder="请填写身份证号" input-align="right"
+          type="digit" />
       </van-cell-group>
       <van-cell-group>
-        <van-field
-          v-model="inputForm.abnormalPhone"
-          center
-          required
-          :rules="[{ required: true }]"
-          label="手机号:"
-          placeholder="请填写手机号"
-          input-align="right"
-          type="tel"
-        />
+        <van-field v-model="inputForm.abnormalPhone" center label="手机号:" placeholder="请填写手机号" input-align="right"
+          type="tel" />
       </van-cell-group>
       <van-cell-group>
-        <van-field
-          name="radio"
-          label="性别:"
-          required
-          :rules="[{ required: true }]"
-          input-align="right"
-        >
+        <van-field name="radio" label="性别:" input-align="right">
           <template #input>
             <van-radio-group v-model="inputForm.sex" direction="horizontal">
               <van-radio name="1">男</van-radio>
@@ -69,74 +37,41 @@
         </van-field>
       </van-cell-group>
       <van-cell-group>
-        <van-field
-          v-model="inputForm.nativePlace"
-          center
-          readonly
-          required
-          :rules="[{ required: true }]"
-          label="籍贯:"
-          placeholder="请选择籍贯"
-          input-align="right"
-          right-icon="arrow-down"
-          @click="showArea = true"
-        />
+        <van-field v-model="inputForm.nativePlace" center readonly label="籍贯:" placeholder="请选择籍贯" input-align="right"
+          right-icon="arrow-down" @click="showArea = true" />
         <van-popup v-model:show="showArea" round position="bottom">
-          <van-cascader
-            v-model="cascaderValue"
-            title="请选择籍贯"
-            :options="options"
-            @close="showArea = false"
-            @finish="onFinish2"
-          />
+          <van-cascader v-model="cascaderValue" title="请选择籍贯" :options="options" @close="showArea = false"
+            @finish="onFinish2" />
         </van-popup>
       </van-cell-group>
       <van-cell-group>
-        <van-field
-          v-model="inputForm.currentResidence"
-          center
-          readonly
-          required
-          :rules="[{ required: true }]"
-          label="现居地:"
-          placeholder="请选择现居地"
-          input-align="right"
-          right-icon="arrow-down"
-          @click="showCurrentArea = true"
-        />
+        <van-field v-model="inputForm.currentResidence" center readonly label="现居地:" placeholder="请选择现居地"
+          input-align="right" right-icon="arrow-down" @click="showCurrentArea = true" />
         <van-popup v-model:show="showCurrentArea" round position="bottom">
-          <van-cascader
-            v-model="cascaderValue"
-            title="请选择现居地"
-            :options="options"
-            @close="showCurrentArea = false"
-            @finish="onFinish"
-          />
+          <van-cascader v-model="cascaderValue" title="请选择现居地" :options="options" @close="showCurrentArea = false"
+            @finish="onFinish" />
         </van-popup>
       </van-cell-group>
       <van-cell-group>
-        <van-field
-          v-model="inputForm.currentResidenceDetail"
-          center
-          label="现居地详情:"
-          placeholder="请填写现居地详情"
-          input-align="right"
-          right-icon="location"
-        />
+        <van-field v-model="inputForm.currentResidenceDetail" center label="现居地详情:" placeholder="请填写现居地详情"
+          input-align="right" right-icon="location" />
       </van-cell-group>
       <van-cell-group>
         <div class="rowTextArea">
-          <van-field
-            v-model="inputForm.abnormalBehavior"
-            placeholder="请填写异常行为"
-            center
-            rows="2"
-            type="textarea"
-            label="异常行为:"
-            label-align="top"
-          />
+          <van-field v-model="inputForm.abnormalBehavior" placeholder="请填写异常行为" center rows="2" type="textarea"
+            label="异常行为:" label-align="top" />
         </div>
       </van-cell-group>
+      <van-cell-group>
+        <van-field name="uploader" required :rules="[{ required: true }]" label="附件上传:">
+          <template #input>
+            <van-uploader :after-read="afterRead" v-model="fileList" :max-count="5" capture="camera" accept=""
+              :preview-full-image="false" :before-delete="deleteRead">
+              <van-button>上传文件</van-button>
+            </van-uploader>
+          </template>
+        </van-field>
+      </van-cell-group>
       <div class="subbtn">
         <van-button type="primary" native-type="submit">提交</van-button>
         <van-button type="default" hairline>取消</van-button>
@@ -145,11 +80,14 @@
   </div>
 </template>
     
-    <script>
-import { ref, onMounted } from "vue";
+<script>
+import { ref, onMounted, getCurrentInstance } from "vue";
 import { useCascaderAreaData } from "@vant/area-data";
 import ReligiousPeopleReportService from "@/api/differentbelievers/ReligiousPeopleReportService";
 import { useRoute } from "vue-router";
+import tools from "@/api/sys/tools";
+// 图片路径
+import $base from "@/utils/config";
 export default {
   setup() {
     // 返回
@@ -160,25 +98,28 @@ export default {
     let isLoading = ref(true);
     // 异常人员信息
     const inputForm = ref({
-      id: "",
-      abnormalName: "",
-      abnormalIdcar: "",
-      sex: "1",
-      abnormalPhone: "",
-      nativePlace: "",
-      currentResidence: "",
-      currentResidenceDetail: "",
-      abnormalBehavior: "",
-      state: "0",
-      assessment: "0",
-      currentResidenceId: "",
-      currentResidenceLevel1: "",
-      currentResidenceLevel2: "",
-      currentResidenceLevel3: "",
-      currentResidenceLevel4: "",
-      currentResidenceLevel5: "",
-      currentResidenceLevel6: "",
+      id: '',
+      abnormalName: '',
+      religiousType: '',
+      information: '',
+      abnormalIdcar: '',
+      sex: '',
+      abnormalPhone: '',
+      nativePlace: '',
+      currentResidence: '',
+      currentResidenceDetail: '',
+      abnormalBehavior: '',
+      state: '0',
+      assessment: '0',
+      currentResidenceId: '',
+      currentResidenceLevel1: '',
+      currentResidenceLevel2: '',
+      currentResidenceLevel3: '',
+      currentResidenceLevel4: '',
+      currentResidenceLevel5: '',
+      currentResidenceLevel6: ''
     });
+    const current = getCurrentInstance()
     // 根据路由初始化
     let route = useRoute();
     onMounted(() => {
@@ -187,6 +128,27 @@ export default {
           .queryById(route.query.id)
           .then((data) => {
             inputForm.value = data;
+            religiousType.value = current.appContext.config.globalProperties.$dictUtils.getDictLabel('hs_religion_type', inputForm.value.religiousType)
+            inputForm.value.information.split("|").forEach((item) => {
+              if (item.trim().length > 0) {
+                fileupList.value.push({
+                  file: {
+                    name: decodeURIComponent(
+                      item.substring(item.lastIndexOf("/") + 1)
+                    ),
+                  },
+                  url: item,
+                });
+                fileList.value.push({
+                  file: {
+                    name: decodeURIComponent(
+                      item.substring(item.lastIndexOf("/") + 1)
+                    ),
+                  },
+                  url: $base + item.replace("程序附件//", "程序附件/"),
+                });
+              }
+            });
             isLoading.value = false;
           });
       } else {
@@ -201,22 +163,77 @@ export default {
     // 全部选项选择完毕后，会触发 finish 事件
     const onFinish = ({ selectedOptions }) => {
       showCurrentArea.value = false;
-      inputForm.value.currentResidence = selectedOptions
+      console.log(selectedOptions);
+      inputForm.value.currentResidence = '中国/' + selectedOptions
         .map((option) => option.text)
         .join("/");
+      inputForm.value.currentResidenceId = '100000/' + selectedOptions
+        .map((option) => option.value)
+        .join("/");
+      inputForm.value.currentResidenceLevel1 = '100000'
+      inputForm.value.currentResidenceLevel2 = selectedOptions[0].value ? selectedOptions[0].value : ''
+      inputForm.value.currentResidenceLevel3 = selectedOptions[1].value ? selectedOptions[1].value : ''
+      inputForm.value.currentResidenceLevel4 = selectedOptions[2].value ? selectedOptions[2].value : ''
     };
     // 籍贯选择
     let showArea = ref(false);
     // 全部选项选择完毕后，会触发 finish 事件
     const onFinish2 = ({ selectedOptions }) => {
       showArea.value = false;
-      inputForm.value.nativePlace = selectedOptions
+      inputForm.value.nativePlace = '中国/' + selectedOptions
         .map((option) => option.text)
         .join("/");
     };
+    const getType = ({ selectedOptions }) => {
+      showPlace.value = false;
+      inputForm.value.religiousType = selectedOptions[0].value;
+      religiousType.value = selectedOptions[0].label
+    };
+    // 文件上传
+    let fileList = ref([]);
+    let fileupList = ref([]);
+    const afterRead = (file) => {
+      file.status = "uploading";
+      file.message = "上传中";
+      // 此时可以自行将文件上传至服务器
+      new tools()
+        .uploadFile(file, `differentbelievers/religiousPeopleReport`)
+        .then(({ data, status, statusText }) => {
+          if (status == 200 || statusText == "OK") {
+            file.status = "done";
+            // xm.showToast({
+            //   message: "上传成功",
+            // });
+            data.name = decodeURIComponent(
+              data.url.substring(data.url.lastIndexOf("/") + 1)
+            );
+            fileupList.value.push(data);
+          }
+        })
+        .catch(() => {
+          file.status = "failed";
+          file.message = "上传失败";
+        });
+    };
+    // 删除文件
+    const deleteRead = (file) => {
+      //删除文件操作
+      for (let index = 0; index < fileList.value.length; index++) {
+        if (file.file.name == fileList.value[index].file.name) {
+          let delurl = fileupList.value[index].url;
+          new tools().uploadFiledelete("", delurl).then(({ data }) => { });
+          fileupList.value.splice(index, 1);
+          fileList.value.splice(index, 1);
+        }
+      }
+    };
     // 提交数据
     const submit = () => {
       isLoading.value = true;
+      //保存前附件处理
+      inputForm.value.information = fileupList.value
+        .map((option) => option.url)
+        .join("|");
       new ReligiousPeopleReportService().save(inputForm.value).then((res) => {
         if (res.status == 200 || res.statusText == "OK") {
           xm.showToast({
@@ -226,8 +243,11 @@ export default {
         onClickLeft();
       });
     };
+    let showPlace = ref(false);
+    let religiousType = ref('');
     return {
       inputForm,
+      religiousType,
       // 返回
       onClickLeft,
       // 地区选择
@@ -237,23 +257,37 @@ export default {
       onFinish2,
       cascaderValue,
       isLoading,
+      getType,
+      // 文件上传
+      afterRead,
+      deleteRead,
+      fileList,
       submit,
       showCurrentArea,
+      showPlace
     };
   },
 };
 </script>
     
 <style scoped>
+.van-uploader .van-button {
+  border: none;
+  color: #36a7f3;
+  top: -4px;
+}
+
 .rowTextArea::v-deep .van-field__value {
   width: 98%;
   border: 2px solid #ccc;
   border-radius: 10px;
   padding-left: 10px;
 }
+
 .rowTextArea::v-deep .van-cell {
   display: flow-root;
 }
+
 .van-radio {
   margin-right: 10px;
 }