党员风采

src/views/modules/communityParty/elegant/index.vue

@@ -6,7 +6,7 @@
           <el-form-item label="所属网格">
             <el-select v-model="searchForm.gridId" filterable placeholder="请选择" clearable>
               <el-option
-                v-for="item in demandOptions"
+                v-for="item in optionsG"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
@@ -43,7 +43,6 @@
           :with-credentials="true"
           :show-file-list="false"
           :auto-upload="true"
-          :on-progress="handleProgress"
           :on-success="handleExcelSuccess"
           :before-upload="beforeExcelUpload"
           :http-request="uploadHttpRequest"
@@ -130,9 +129,10 @@
     >
       <el-form label-width="100px" :model="form" :rules="rules" ref="ruleForm" class="form-wr">
         <el-form-item label="所属网格" prop="gridId">
-          <el-select v-model="form.gridId" filterable placeholder="请选择" class="input-width" clearable>
+          <el-select v-model="form.gridId" filterable
+          :disabled="disabled" placeholder="请选择" class="input-width" clearable>
               <el-option
-                v-for="item in demandOptions"
+                v-for="item in optionsEditG"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
@@ -140,16 +140,37 @@
             </el-select>
         </el-form-item>
         <el-form-item label="党员姓名" prop="name">
-          <el-input v-model="form.name" placeholder="请输入" class="input-width" clearable></el-input>
+          <el-input v-model="form.name" placeholder="请输入" :disabled="disabled" class="input-width" clearable></el-input>
         </el-form-item>
         <el-form-item label="主要事迹" prop="mainDeed">
-          <el-input v-model="form.mainDeed" :autosize="{ minRows: 2, maxRows: 10}" type="textarea" clearable class="input-width-textarea" placeholder="请输入内容"></el-input>
+          <el-input v-model="form.mainDeed" :autosize="{ minRows: 2, maxRows: 10}" :disabled="disabled" type="textarea" clearable class="input-width-textarea" placeholder="请输入内容"></el-input>
         </el-form-item>
         <!-- <el-form-item label="状态">
           <el-switch v-model="form.usableFlag"></el-switch>
         </el-form-item> -->
         <el-form-item label="照片">
-          <el-input-number v-model="form.awardPoint" :min="0" size="small" label="描述文字"></el-input-number>
+          <div class="imsg-list">
+            <div v-for="(item, index) in form.imageList" :key="index" class="imgs-item">
+               <el-image
+                style="width: 100px; height: 100px"
+                :src="item"
+                fit="fill"
+                :preview-src-list="form.imageList"></el-image>
+                <i class="el-icon-delete" @click="handleDelimg(item, index)"></i>
+            </div>
+            <el-upload class="avatar-uploader"
+              v-if="form.imageList.length < 3 && !disabled"
+              :action="uploadUlr"
+              :data="{customerId:customerId}"
+              :show-file-list="false"
+              :on-progress="handleProgress"
+              :on-success="handleImgSuccess"
+              :before-upload="beforeImgUpload">
+              <el-progress v-if="uploading" :width="100" type="circle" :percentage="unloadPencent"></el-progress>
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              
+            </el-upload>
+          </div>
         </el-form-item>
       </el-form>
       <div class="resi-btns">
@@ -172,10 +193,12 @@ import axios from 'axios'
 export default {
   data() {
     return {
+      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',
       importBtnTitle: '导入人员数据',
       importLoading: false,
       tableLoading: false,
       btnLoading: false,
+      uploading: false,
       disabled: false,
       pageLoading: false,
       dialogVisible: false,
@@ -183,9 +206,12 @@ export default {
       pageSize: 20,
       total: null,
       tableData: [],
+      unloadPencent: 0,
       addLevel: '1',
       addType: 'add',
       value: '',
+      optionsEditG: [],
+      optionsG: [],
       options: [
         {
           label: '是',
@@ -220,7 +246,6 @@ export default {
       customerId: '',
       searchForm: {
         gridId: '',
-        agencyId: '',
         mainDeed: '',
         name: ''
       },
@@ -238,8 +263,11 @@ export default {
   },
   async created() {
     this.customerId = localStorage.getItem('customerId')
+    setTimeout(() => {
       this.getTableData()
-    this.getOptions()
+      this.getGridList('query')
+      this.getGridList('addorupdate')
+    }, 200)
     this.pageLoading = true
   },
   mounted() {
@@ -275,7 +303,9 @@ export default {
       }
     },
     handleProgress(event, file, fileList) {
-      console.log('percentage', file.percentage)
+      console.log('percentage', event, file.percentage)
+      this.uploading = true
+      this.unloadPencent = Number(file.percentage.toFixed(0))
     },
     beforeExcelUpload (file) {
       console.log('file', file)
@@ -287,10 +317,10 @@ export default {
           this.$message.error('上传文件只能是xls/xlsx格式！')
       }
       
-      // if (!isLt1M) {
+      if (!isLt1M) {
-      //   this.$message.error('上传图片大小不能超过 10MB!')
+        this.$message.error('上传文件大小不能超过 10MB!')
-      // }
+      }
-      return fileType
+      return fileType && isLt1M
     },
     uploadHttpRequest(file) {
       this.importLoading = true
@@ -326,39 +356,64 @@ export default {
       })
     },
     handleExport() {
-      let params = {
+      let params = {}
-        formCode: 'resi_base_info',
+      // window.location.href = window.SITE_CONFIG['apiURL'] + '/resi/partymember/icpartymemberstyle/export'
-        conditions: this.conditions
-      }
-
       // .post('epmetuser/icresiuser/exportExcel', params)
-      axios({
+      // axios({
-        url: window.SITE_CONFIG['apiURL'] + '/resi/partymember/icpartymemberstyle/export',
+      //   url: window.SITE_CONFIG['apiURL'] + '/resi/partymember/icpartymemberstyle/export',
-        // url: 'epmetuser/icresiuser/exportExcel',
+      //   // url: 'epmetuser/icresiuser/exportExcel',
-        method: 'post',
+      //   method: 'post',
-        data: params,
+      //   data: params,
-        responseType: 'blob'
+      //   responseType: 'blob'
-      })
+      // })
+      this.$http.post('/resi/partymember/icpartymemberstyle/export')
         .then(res => {
           console.log('resllll', res)
-          let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
+          // let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
-          console.log('filename', fileName)
+          // console.log('filename', fileName)
-          let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
+          // let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
-          var url = window.URL.createObjectURL(blob)
+          // var url = window.URL.createObjectURL(blob)
-          var aLink = document.createElement('a')
+          // var aLink = document.createElement('a')
-          aLink.style.display = 'none'
+          // aLink.style.display = 'none'
-          aLink.href = url
+          // aLink.href = url
-          aLink.setAttribute('download', fileName)
+          // aLink.setAttribute('download', fileName)
-          document.body.appendChild(aLink)
+          // document.body.appendChild(aLink)
-          aLink.click()
+          // aLink.click()
-          document.body.removeChild(aLink) //下载完成移除元素
+          // document.body.removeChild(aLink) //下载完成移除元素
-          window.URL.revokeObjectURL(url) //释放掉blob对象
+          // window.URL.revokeObjectURL(url) //释放掉blob对象
         })
         .catch((err) => {
           console.log('获取导出情失败', err)
           return this.$message.error('网络错误')
         })
     },
+    beforeImgUpload (file) {
+      const isPNG = (file.type === 'image/png') || (file.type === 'image/jpeg')
+      const isLt1M = file.size / 1024 / 1024 < 10
+
+      if (!isPNG) {
+        this.$message.error('上传图片只能是 PNG 或 JPEG 格式!')
+      }
+      if (!isLt1M) {
+        this.$message.error('上传图片大小不能超过 10MB!')
+      }
+      return isPNG && isLt1M
+    },
+    handleImgSuccess (res, file) {
+      if (res.code === 0 && res.msg === 'success') {
+
+        console.log('res.data.url', res.data.url)
+        this.uploading = false
+        this.unloadPencent = 0
+        this.form.imageList.push(res.data.url)
+
+      } else {
+        this.$message.error(res.msg)
+      }
+    },
+    handleDelimg(item, index) {
+      this.form.imageList.splice(index, 1)
+    },
     handleSearch(val) {
       console.log('searchhh--', val)
       this.currentPage = 1
@@ -372,34 +427,27 @@ export default {
     },
 
     handlerCancle() {
+      for(const n in this.form) {
+        this.form[n] = ''
+        if (n === 'imageList') this.form[n] = []
+      }
+      this.disabled = false
       this.dialogVisible = false
     },
     async handleLook(row) {
-      const params = {
+      this.disabled = true
-        categoryId: row.categoryId,
+      await this.getDetail(row.id)
-        usableFlag: !row.usableFlag
-      }
-      this.$http
-        .post('/heart/icresidemanddict/updatestatus', params)
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
-          } else {
-            this.getTableData()
-          }
-        })
-        .catch(() => {
-          return this.$message.error('网络错误')
-        })
     },
     async handleEdit(row, addType) {
-      
+      // this.form = { ...row }
-      this.form = { ...row }
+      await this.getDetail(row.id)
-      this.dialogVisible = true
+      // this.dialogVisible = true
     },
     async addNew() {
+      const { user } = await this.$store.state
       const _form = {
-        ...this.form
+        ...this.form,
+        agencyId: user.agencyId
       }
       await this.$http
         .post('/resi/partymember/icpartymemberstyle/save', _form)
@@ -407,11 +455,13 @@ export default {
           if (res.code !== 0) {
             return this.$message.error(res.msg)
           } else {
-            this.dialogVisible = false
+            this.$message.success('操作成功')
+            this.handlerCancle()
             this.getTableData()
           } 
         })
-        .catch(() => {
+        .catch(err => {
+          console.log('err', err)
           return this.$message.error('网络错误')
         })
         this.btnLoading = false
@@ -450,20 +500,18 @@ export default {
           return this.$message.error('网络错误')
         })
     },
-    sortData() {
+    async getDetail(id) {
-      const _data = this.tableData.map((item, index)=> {
+      let params = {
-        return {
+        id,
-          id: item.id,
-          sort: index
       }
-      })
       this.$http
-        .post('/oper/customize/resicategorystatsconfig/updatesort', _data)
+        .post('/resi/partymember/icpartymemberstyle/detail', params)
         .then(({ data: res }) => {
           if (res.code !== 0) {
             return this.$message.error(res.msg)
           } else {
-            // this.getTableData()
+            this.form = { ...res.data }
+            this.dialogVisible = true
           }
         })
         .catch((err) => {
@@ -471,17 +519,20 @@ export default {
           return this.$message.error('网络错误')
         })
     },
-    async getOptions() {
+    async getGridList(type, agencyId) {
-      const params = {
+      const { user } = await this.$store.state
-        parentCategoryCode: 0
+      console.log('user---ppp', user)
-      }
+      // addorupdate  query
-      this.$http
+      await this.$http
-        .post('/heart/icresidemanddict/subcodelist', params)
+        .post('/gov/org/customergrid/gridoption', { agencyId: agencyId || user.agencyId, purpose: type })
         .then(({ data: res }) => {
           if (res.code !== 0) {
             return this.$message.error(res.msg)
           } else {
-            this.demandOptions = res.data
+            console.log('获取查询详情成功', res.data)
+            
+            if (type === 'query') this.optionsG = res.data
+            else this.optionsEditG = res.data
           }
         })
         .catch(() => {
@@ -490,9 +541,10 @@ export default {
     },
     async getTableData() {
       this.tableLoading = true
+      const { user } = await this.$store.state
       let params = {
-        // formCode: 'resi_base_info',
         ...this.searchForm,
+        agencyId: user.agencyId,
         pageNo: this.currentPage,
         pageSize: this.pageSize
       }
@@ -544,6 +596,23 @@ export default {
   .input-width-textarea {
     width: 400px;
   }
+  .imsg-list {
+    display: flex;
+    align-items: center;
+    .imgs-item {
+      position: relative;
+      margin-right: 10px;
+      .el-icon-delete {
+        position: absolute;
+        top: 0;
+        right: 0;
+        font-size: 18px;
+        color: red;
+        z-index: 3;
+        cursor: pointer;
+      }
+    }
+  }
 }
 </style>
 
@@ -587,8 +656,8 @@ export default {
     border-color: #409EFF;
   }
   .avatar {
-    width: 70px;
+    width: 100px;
-    height: 70px;
+    height: 100px;
     display: block;
   }
   .avatar-uploader-icon {
@@ -596,9 +665,9 @@ export default {
     border-radius: 6px;
     font-size: 28px;
     color: #8c939d;
-    width: 70px;
+    width: 100px;
-    height: 70px;
+    height: 100px;
-    line-height: 70px;
+    line-height: 100px;
     text-align: center;
   }
 }