志愿者页面

src/views/modules/base/residentManagement/volunteer/volunteer.vue

@@ -10,7 +10,7 @@
         >
           <el-form-item label="志愿者类别">
             <el-select
-              v-model="formData.volunteerCategory"
+              v-model="formData.volunteerCategories"
               placeholder="请选择"
               size="small"
               class="u-item-width-normal"
@@ -206,21 +206,18 @@
           >
             批量删除
           </el-button>
-          <!-- 
-                :on-success="handleExcelSuccess"
-              :before-upload="beforeExcelUpload"
-              :http-request="uploadHttpRequest"
-           -->
           <el-upload
             :headers="$getElUploadHeaders()"
             ref="upload"
-            class="upload-demo"
+            class="upload-btn"
             action="uploadUlr"
             :limit="1"
             :accept="'.xls,.xlsx'"
             :with-credentials="true"
             :show-file-list="false"
             :auto-upload="true"
+            :before-upload="beforeExcelUpload"
+            :http-request="uploadHttpRequest"
           >
             <el-button
               type="primary"
@@ -263,7 +260,7 @@
           />
 
           <el-table-column
-            prop="volunteerCategoryName"
+            prop="volunteerCategoriesName"
             align="center"
             width="200"
             label="志愿者类别"
@@ -376,7 +373,6 @@
                 >查看</el-button
               >
               <el-button
-                v-if="scope.row.serviceStatus === 'in_service'"
                 @click="handleEdit(scope.row)"
                 type="text"
                 size="small"
@@ -419,44 +415,24 @@
       <add-form
         ref="ref_add_form"
         :formType="formType"
-        @handleOk="handleOk"
+        @handleComfirm="handleComfirm"
         @handleClose="handleClose"
       ></add-form>
     </el-dialog>
-    <el-dialog
-      v-if="showDetail"
-      :visible.sync="showDetail"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :title="detailDiaTitle"
-      :modal-append-to-body="false"
-      width="850px"
-      top="5vh"
-      class="dialog-h"
-      @closed="diaDetailClose"
-    >
-      <detail-form
-        ref="ref_detail_form"
-        :statusArray="statusArray"
-        @diaDetailClose="diaDetailClose"
-      >
-      </detail-form>
-    </el-dialog>
   </div>
 </template>
-    
-      <script>
+    <script>
 import { requestPost } from "@/js/dai/request";
 import { genderList, binaryOptionList } from "@/js/columns/constants";
 import nextTick from "dai-js/tools/nextTick";
 import { mapGetters } from "vuex";
 import axios from "axios";
-import addForm from "./addForm.vue";
+import addForm from "./addForm";
 // import detailForm from "./detailForm";
 //   import editForm from "./editForm";
 
 export default {
-  components: { addForm },
+  components: { addForm  },
 
   data() {
     let endDisabledDate = (time) => {
@@ -496,7 +472,7 @@ export default {
         nation: "",
         currentResidence: "",
         cultureLevel: "1",
-        volunteerCategory: "",
+        volunteerCategories: "",
         occupation: "",
         hobbyInfo: "",
         remark: "",
@@ -524,7 +500,7 @@ export default {
       dicts: {
         educationList: [],
         nationList: [],
-        volunteerList: [],
+        volunteerList:[]
       }, //字典对象
     };
   },
@@ -576,24 +552,69 @@ export default {
       }
     },
 
-    binaryText(value) {
-      let text = "";
-      text = this.binaryOptionList.filter((item) => item.value == value)[0]
-        .label;
-      return text || "--";
+    binaryText(value){
+       let text = ''
+       text = this.binaryOptionList.filter(item=>item.value == value)[0].label
+       return text || "--"
     },
     // ------------------------------------事件------------------------------------------
-    checkNumberInput() {
-      if (isNaN(this.formData.retirementAmount)) {
-        this.$message.error("请输入数字");
-        this.formData.retirementAmount = "";
-      } else {
-        this.formData.retirementAmount = parseFloat(
-          this.formData.retirementAmount
-        );
+    checkNumberInput(){
+        if (isNaN(this.formData.retirementAmount)) {
+        this.$message.error('请输入数字');
+        this.formData.retirementAmount = '';
+        } else {
+        this.formData.retirementAmount = parseFloat(this.formData.retirementAmount);
+        }
+    },
+    // 导入
+    beforeExcelUpload(file) {
+      console.log("file", file);
+      const isType = file.type === "application/vnd.ms-excel";
+      const isTypeComputer =
+        file.type ===
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+      const fileType = isType || isTypeComputer;
+      const isLt1M = file.size / 1024 / 1024 < 10;
+      if (!fileType) {
+        this.$message.error("上传文件只能是xls/xlsx格式！");
       }
+
+      if (!isLt1M) {
+        this.$message.error("上传文件大小不能超过 10MB!");
+      }
+      return fileType && isLt1M;
     },
 
+    async uploadHttpRequest(file) {
+      this.$message({
+        showClose: true,
+        dangerouslyUseHTMLString: true,
+        message:
+          "导入中，请到系统管理-<a id='clickA' style='cursor: pointer;'>导入记录</a>中查看进度",
+        duration: 3000,
+      });
+      let than = this;
+      document.getElementById("clickA").addEventListener("click", function () {
+        than.$router.replace("/main/importRecord-index");
+      });
+      const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
+      formData.append("file", file.file); //添加文件对象
+      await this.$http
+        .post("/actual/base/resiCategorized/disability/import", formData)
+        .then((res) => {
+          console.log("res-up", res);
+          if (res.data.code == 0 && res.data.msg == "success") {
+            this.$message.success("导入成功");
+            this.getTableData();
+            this.$refs.upload.clearFiles();
+          } else this.$message.error(res.data.msg);
+        })
+        .catch((err) => {
+          console.log("失败", err);
+          file.onError(); //上传失败的文件会从文件列表中删除
+          // this.$message.error('导入失败')
+        });
+    },
     // 搜索事件
     handleSearch(val) {
       console.log(this.formData);
@@ -610,29 +631,23 @@ export default {
     //   查看详情触发事件
     async handleDetail(row) {
       this.addDiaTitle = "详情";
-      this.showDetail = true;
-      this.formType = "add";
+      this.formType = "detail";
       this.showAdd = true;
       this.$nextTick(() => {
         this.$refs.ref_add_form.initForm("detail", row);
       });
     },
-    //   详情弹出框取消事件
-    diaDetailClose() {
-      this.$refs.ref_detail_form.diaDestroy();
-      this.showDetail = false;
-    },
+
     //   编辑触发事件
     async handleEdit(row) {},
     //  新增弹出框组件取消事件
     handleClose() {
       this.formType = "";
       this.showAdd = false;
-      this.showDetail = false;
       this.showEdit = false;
     },
     //  新增弹出框组件确定事件
-    handleOk() {
+    handleComfirm() {
       this.handleClose();
       this.pageNo = 1;
       this.getTableData();
@@ -645,7 +660,7 @@ export default {
         type: "warning",
       })
         .then(() => {
-          this.cancelFuwu([row.id]);
+          this.cancelFuwu([row.categorizedResiId]);
         })
         .catch((err) => {
           if (err == "cancel") {
@@ -809,7 +824,7 @@ export default {
   props: {},
 };
 </script>
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 @import "@/assets/scss/buttonstyle.scss";
 @import "@/assets/scss/modules/management/list-main.scss";
 @import "@/assets/scss/modules/shequzhili/event-info.scss";
@@ -817,5 +832,5 @@ export default {
   margin-right: 10px;
 }
 </style>
-    
-    
+  
+