epmet-oper-gov/src/views/modules/communityParty/elegant/index.vue

<template>
  <div v-if="pageLoading" class="resi-container">
    <el-card class="resi-card-table">
      <div class="resi-row-btn">
        <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="所属网格" prop="gridId">
            <el-select v-model="searchForm.gridId" filterable placeholder="请选择" clearable>
              <el-option
                v-for="item in optionsG"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="党员姓名" prop="name">
            <el-select v-model="searchForm.name" filterable placeholder="请选择" clearable>
              <el-option
                v-for="item in demandOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主要事迹" prop="mainDeed">
            <el-input v-model="searchForm.mainDeed" placeholder="请输入" class="input-width" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetForm('searchForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="resi-row-btn">
        <el-button type="success" @click="handleAdd">新增</el-button>
        <el-button type="warning" size="small" @click="handleExport">导出</el-button>
        <el-upload
          ref="upload"
          class="upload-demo"
          action="uploadUlr"
          :limit="1"
          :with-credentials="true"
          :show-file-list="false"
          :auto-upload="true"
          :on-success="handleExcelSuccess"
          :before-upload="beforeExcelUpload"
          :http-request="uploadHttpRequest"
          >
          <el-button type="danger" :loading="importLoading">{{importBtnTitle}}</el-button>
        </el-upload>
      </div>
      
      <el-table
        :data="tableData"
        row-key="categoryId"
        v-loading="tableLoading"
        border
        max-height="800"
        style="width: 100%"
        class="resi-table"
      >
        <el-table-column label="序号" type="index" align="center" width="50">
        </el-table-column>
        <el-table-column
          v-for="item in tableHeader"
          :key="item.columnName"
          :prop="item.columnName"
          :label="item.label"
          :align="item.align"
          :width="item.width"
        >
          <template slot-scope="scope">
            <span>{{ handleFilterSpan(scope.row, item) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              @click="handleLook(scope.row)"
              type="text"
              size="small"
              class="btn-color-look"
              >查看</el-button
            >
            <el-button
                @click="handleEdit(scope.row, 'edit')"
                type="text"
                size="small"
                class="btn-color-edit"
                >编辑</el-button
              >
            <el-popconfirm
                title="删除之后无法恢复，确认删除？"
                @onConfirm="handleDel(scope.row)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  size="small"
                  class="btn-color-del"
                  >删除</el-button
                >
              </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

    <el-dialog
      title="居民需求分类"
      :visible.sync="dialogVisible"
      width="40%"
      append-to-body
      :close-on-click-modal="false"
      :before-close="handlerCancle"
    >
      <el-form v-if="dialogVisible" 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
          :disabled="disabled" placeholder="请选择" class="input-width" clearable>
              <el-option
                v-for="item in optionsEditG"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="党员姓名" prop="name">
          <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}" :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="照片">
          <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"
              :action="uploadUlr"
              :data="{customerId:customerId}"
              :show-file-list="false"
              :disabled="disabled"
              :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">
        <el-button size="small" @click="handlerCancle">取消</el-button>
        <el-button
          type="primary"
          size="small"
          :loading="btnLoading"
          @click="handleSUbmit"
          >提交</el-button
        >
      </div>
    </el-dialog>

  </div>
</template>

<script>
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,
      currentPage: 1,
      pageSize: 20,
      total: null,
      tableData: [],
      unloadPencent: 0,
      addLevel: '1',
      addType: 'add',
      value: '',
      optionsEditG: [],
      optionsG: [],
      options: [
        {
          label: '是',
          value: 1
        },{
          label: '否',
          value: 2
        }
      ],
      demandOptions: [],
      tableHeader: [
        {
          label: '党员姓名',
          columnName: 'name',
          align: 'center',
          width: '160',
          options: []
        }, {
          label: '所属网格',
          align: 'center',
          columnName: 'gridName',
          width: '300',
          options: []
        }, {
          label: '主要事迹',
          columnName: 'mainDeed',
          align: 'center',
          width: '',
          options: []
        }
      ],
      customerId: '',
      searchForm: {
        gridId: '',
        mainDeed: '',
        name: ''
      },
      form: {
        agencyId: '',
        gridId: '',
        name: '',
        mainDeed: '',
        imageList: []
      },
      rules: {
        gridId: [{ required: true, message: '网格不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        mainDeed: [{ required: true, message: '主要事迹不能为空', trigger: 'blur' }],
      }
    }
  },
  async created() {
    this.customerId = localStorage.getItem('customerId')
    setTimeout(() => {
      this.getTableData()
      this.getGridList('query')
      this.getGridList('addorupdate')
    }, 200)
    this.pageLoading = true
  },
  mounted() {
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getTableData()
    },
    handleFilterSpan(row, item) {
      let _val = ''
      if (item.options && item.options.length > 0) {
        item.options.forEach((n) => {
          if (n.value === row[item.columnName]) _val = n.label
        })
      }
      return _val || row[item.columnName]
    },
    // 上传大图标成功
    handleExcelSuccess (res, file) {
      if (res.code === 0 && res.msg === 'success') {

        console.log('resss---ppp', res)

      } else {
        this.$message.error(res.msg)
      }
    },
    handleProgress(event, file, fileList) {
      console.log('percentage', event, file.percentage)
      this.uploading = true
      this.unloadPencent = Number(file.percentage.toFixed(0))
    },
    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
    },
    uploadHttpRequest(file) {
      this.importLoading = true
      this.importBtnTitle = '正在上传中...'
      const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加
      formData.append('file', file.file) //添加文件对象
      axios({
        url: window.SITE_CONFIG['apiURL'] + '/resi/partymember/icpartymemberstyle/import',
        method: 'post',
        data: formData,
        responseType: 'blob'
      })
      .then((res) => {
        this.importLoading = false
        this.importBtnTitle = '导入人员数据'
        // let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
        //   console.log('filename', fileName)
        // let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
        // var url = window.URL.createObjectURL(blob)
        // var aLink = document.createElement('a')
        // aLink.style.display = 'none'
        // aLink.href = url
        // aLink.setAttribute('download', fileName)
        // document.body.appendChild(aLink)
        // aLink.click()
        // document.body.removeChild(aLink) //下载完成移除元素
        // window.URL.revokeObjectURL(url) //释放掉blob对象
        this.getTableData()
      })
      .catch( err => {
          console.log('失败', err)
          param.onError() //上传失败的文件会从文件列表中删除
      })
    },
    handleExport() {
      let params = {
        agencyId: this.$store.state.user.agencyId,
        pageSize: 9999,
        pageNo: this.currentPage
      }
      // .post('epmetuser/icresiuser/exportExcel', params)
      axios({
        url: window.SITE_CONFIG['apiURL'] + '/resi/partymember/icpartymemberstyle/export',
        // url: 'epmetuser/icresiuser/exportExcel',
        method: 'post',
        data: params,
        responseType: 'blob'
      })
        .then(res => {
          console.log('resllll', res)
          let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
          console.log('filename', fileName)
          let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
          var url = window.URL.createObjectURL(blob)
          var aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', fileName)
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink) //下载完成移除元素
          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
      this.getTableData()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.handleSearch()
    },
    handleAdd() {
      this.dialogVisible = true
    },

    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) {
      this.disabled = true
      await this.getDetail(row.id)
    },
    async handleEdit(row, addType) {
      // this.form = { ...row }
      await this.getDetail(row.id)
      // this.dialogVisible = true
    },
    async addNew() {
      const { user } = await this.$store.state
      const _form = {
        ...this.form,
        agencyId: user.agencyId
      }
      await this.$http
        .post('/resi/partymember/icpartymemberstyle/save', _form)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            this.$message.success('操作成功')
            this.handlerCancle()
            this.getTableData()
          } 
        })
        .catch(err => {
          console.log('err', err)
          return this.$message.error('网络错误')
        })
        this.btnLoading = false
    },
    handleSUbmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.btnLoading = true
          this.addNew() 
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      
    },
    handleDel(row) {
      let params = {
        id: row.id
      }
      console.log('row1', row)
      this.$http
        .post('/resi/partymember/icpartymemberstyle/delete', params)
        .then(({ data: res }) => {
          console.log('row2', row)
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            console.log('row3', row)
            this.$message.success('删除成功')
            this.getTableData()
          }
        })
        .catch((err) => {
          console.log('row4', err)
          return this.$message.error('网络错误')
        })
    },
    async getDetail(id) {
      let params = {
        id,
      }
      this.$http
        .post('/resi/partymember/icpartymemberstyle/detail', params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            this.form = { ...res.data }
            this.dialogVisible = true
          }
        })
        .catch((err) => {
          console.log('row4', err)
          return this.$message.error('网络错误')
        })
    },
    async getGridList(type, agencyId) {
      const { user } = await this.$store.state
      console.log('user---ppp', user)
      // addorupdate  query
      await this.$http
        .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 {
            console.log('获取查询详情成功', res.data)
            
            if (type === 'query') this.optionsG = res.data
            else this.optionsEditG = res.data
          }
        })
        .catch(() => {
          return this.$message.error('网络错误')
        })
    },
    async getTableData() {
      this.tableLoading = true
      const { user } = await this.$store.state
      let params = {
        ...this.searchForm,
        agencyId: user.agencyId,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }
      await this.$http
        .post('/resi/partymember/icpartymemberstyle/list', params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            this.tableData = res.data.list
            this.total = res.data.total
          }
        })
        .catch(() => {
          return this.$message.error('网络错误')
        })
      this.tableLoading = false
    }
    
  }
}
</script>

<style lang="scss" scoped>
.resi-container .resi-card-table {
  ::v-deep .el-table th {
    color: #fff;
    background-color: rgba(33, 149, 254, 1);
    // border-right: 1px solid rgba(33, 149, 254, 1);
  }
}
.resi-table {
  ::v-deep .el-button--text {
    text-decoration: underline;
  }
  ::v-deep .btn-color-del {
    margin-left: 10px;
    color: rgba(213, 16, 16, 1);
  }
  ::v-deep .btn-color-edit {
    color: rgba(0, 167, 169, 1);
  }
}
.form-wr {
  .input-width {
    width: 260px;

  }
  .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>

<style lang="scss" scoped>

.resi-row-btn {
  display: flex;
  margin-bottom: 13px;
  ::v-deep .el-button {
    // margin-left: 10px;
    border: 0;
  }
  ::v-deep .el-select {
    margin-right: 10px;
  }
  .el-button--success {
    background: rgba(34, 193, 195, 1);
  }
  .el-button {
    margin-left: 10px;
    border: 0;
  }
  .el-button--success {
    background: rgba(34, 193, 195, 1);
  }
  .el-button--warning {
    background: rgba(254, 179, 73, 1);
  }
  .el-button--danger {
    background: rgba(254, 98, 82, 1);
  }
}
.avatar-uploader {
  ::v-deep
  .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
}
  
  

.resi-btns {
  margin-top: 20px;
  text-align: center;
}
</style>