From 4c03fa477d849c5a7cb5ba590ee48cfe1953aa42 Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Wed, 13 Dec 2023 20:26:17 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A4=BE=E5=8C=BA=E6=9E=B6=E6=9E=84,=E7=BD=91?=
 =?UTF-8?q?=E6=A0=BC=E6=9E=B6=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../communityFrameWork/index.vue              | 720 +++++++++++++++++
 .../communityParty/gridFrameWork/index.vue    | 738 ++++++++++++++++++
 2 files changed, 1458 insertions(+)
 create mode 100644 src/views/modules/communityParty/communityFrameWork/index.vue
 create mode 100644 src/views/modules/communityParty/gridFrameWork/index.vue

diff --git a/src/views/modules/communityParty/communityFrameWork/index.vue b/src/views/modules/communityParty/communityFrameWork/index.vue
new file mode 100644
index 00000000..5b43bfae
--- /dev/null
+++ b/src/views/modules/communityParty/communityFrameWork/index.vue
@@ -0,0 +1,720 @@
+<template>
+  <div v-if="pageLoading" class="resi-container">
+    <el-card ref="searchCard" class="search-card">
+      <div class="">
+        <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
+          <el-form-item label="所属社区" prop="communityId">
+            <el-select v-model="searchForm.communityId" filterable placeholder="请选择" clearable>
+              <el-option v-for="item in orgOptions" :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="searchForm.name" placeholder="请输入" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="职位" prop="type">
+            <el-select v-model="searchForm.type" filterable placeholder="请选择" clearable>
+              <el-option v-for="item in optionsEditC" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button class="diy-button--search" size="small" @click="handleSearch">查询</el-button>
+            <el-button class="diy-button--reset" size="small" @click="resetForm('searchForm')">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+    <el-card class="resi-card-table">
+
+      <div class="resi-row-btn">
+        <el-button class="diy-button--add" size="small" @click="handleAdd">新增</el-button>
+        <!-- <el-button
+                   class="diy-button--export"
+                   size="small"
+                   @click="handleExportModule('room')">下载模板</el-button> -->
+        <!-- <el-upload ref="upload" class="upload-demo" action="uploadUlr" :limit="1" :accept="'.xls,.xlsx'"
+          :with-credentials="true" :show-file-list="false" :auto-upload="true" :on-success="handleExcelSuccess"
+          :before-upload="beforeExcelUpload" :http-request="uploadHttpRequest">
+          <el-button size="small" class="diy-button--delete" :loading="importLoading">{{ importBtnTitle }}</el-button>
+        </el-upload> -->
+        <!-- <el-button class="diy-button--reset" size="small" :loading="exportBtn" @click="handleExport">{{ exportBtnTitle
+        }}</el-button> -->
+
+      </div>
+
+      <el-table :data="tableData" row-key="id" v-loading="tableLoading" border :height="tableHeight" 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">
+            <div class="div-content">{{ handleFilterSpan(scope.row, item) }}</div>
+          </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="删除之后无法恢复，确认删除？" @confirm="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="total">
+        </el-pagination>
+      </div>
+    </el-card>
+
+    <el-dialog title="社区人员架构" :visible.sync="dialogVisible" width="50%" top="5vh" class="dialog-h" 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 dialog-h-content scroll-h">
+        <el-form-item label="所属社区" prop="communityId">
+          <el-select v-model="form.communityId" filterable placeholder="请选择" clearable>
+            <el-option v-for="item in orgOptions" :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="mobile">
+          <el-input v-model="form.mobile" placeholder="请输入" :disabled="disabled" class="input-width" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="职位" prop="type">
+          <el-select v-model="form.type" filterable :disabled="disabled" placeholder="请选择" class="input-width" clearable>
+            <el-option v-for="item in optionsEditC" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div class="resi-btns">
+        <el-button size="small" @click="handlerCancle">取消</el-button>
+        <el-button v-if="!disabled" type="primary" size="small" :loading="btnLoading" @click="handleSUbmit">提交</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { mapGetters } from 'vuex'
+import { requestPost } from "@/js/dai/request";
+export default {
+  data() {
+    return {
+      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',
+      importBtnTitle: '导入',
+      importLoading: false,
+      exportBtn: false,
+      exportBtnTitle: '导出',
+      tableLoading: false,
+      btnLoading: false,
+      uploading: false,
+      disabled: false,
+      pageLoading: false,
+      dialogVisible: false,
+      currentPage: 1,
+      pageSize: 20,
+      total: null,
+      tableData: [],
+      searchH: 0,
+      unloadPencent: 0,
+      addLevel: '1',
+      addType: 'add',
+      value: '',
+      optionsG: [],
+      optionsEditC: [],
+      options: [
+        {
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 2
+        }
+      ],
+      demandOptions: [],
+      tableHeader: [
+        {
+          label: '组织名称',
+          columnName: 'agencyName',
+          align: 'center',
+          width: '160',
+          options: []
+        }, {
+          label: '姓名',
+          align: 'center',
+          columnName: 'name',
+          width: '200',
+          options: []
+        }, {
+          label: '职责',
+          align: 'center',
+          columnName: 'type',
+          width: '',
+          options: []
+        }
+      ],
+      customerId: '',
+      searchForm: {
+        type: '',
+        mainDeed: '',
+        name: ''
+      },
+      form: {
+        communityId: '',
+        name: '',
+        mobile: '',
+        type: ''
+      },
+      rules: {
+        communityId: [{ required: true, message: '社区不能为空', trigger: 'blur' }],
+        type: [{ required: true, message: '职责不能为空', trigger: 'blur' }],
+        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+        mobile: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
+      },
+      orgOptions: [],
+
+    }
+  },
+  computed: {
+    ...mapGetters(['clientHeight', 'iframeHeight']),
+    tableHeight() {
+      const h = this.clientHeight - this.searchH - 280 + this.iframeHeigh
+      const _h = this.clientHeight - 280 - this.searchH
+      return this.$store.state.inIframe ? h : _h
+    }
+  },
+  async created() {
+    this.customerId = localStorage.getItem('customerId')
+    this.getTableData()
+    this.pageLoading = true
+  },
+  mounted() {
+    this.getOrgTreeList()
+    this.getCateList()
+    this.$nextTick(() => {
+      this.searchH = this.$refs.searchCard.$el.offsetHeight
+      console.log('tableHeight', this.tableHeight)
+    })
+
+  },
+  methods: {
+    getOrgTreeList() {
+      this.$http
+        .post('/gov/org/customeragency/agencygridtree', {})
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            console.log('获取组织树成功', res.data)
+            this.orgOptions = []
+            this.orgOptions = this.filterCommunity([res.data]).map(item => ({ label: item.agencyName, value: item.agencyId }))
+            console.log(this.orgOptions);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+          return this.$message.error('网络错误')
+        })
+    },
+    filterCommunity(data) {
+      // 如果数据为空，返回空数组
+      if (!data || data.length === 0) {
+        return [];
+      }
+      // 用于存储符合条件的节点
+      const result = [];
+
+      // 遍历数据
+      for (const node of data) {
+        // 如果当前节点的 level 是 community，则加入结果集
+        if (node.level === 'community') {
+          result.push(node);
+        }
+        // 如果当前节点有子节点，递归调用 filterCommunity 处理子节点
+        if (node.subAgencyList && node.subAgencyList.length > 0) {
+          const communityChildren = this.filterCommunity(node.subAgencyList);
+          // 将符合条件的子节点合并到结果集中
+          result.push(...communityChildren);
+        }
+      }
+      return result;
+    },
+
+    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))
+    },
+
+    download(data, fileName) {
+      console.log('data', data)
+      if (!data) {
+        return
+      }
+
+      var csvData = new Blob([data])
+
+      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+        window.navigator.msSaveOrOpenBlob(csvData, fileName)
+      }
+      // for Non-IE (chrome, firefox etc.)
+      else {
+        var a = document.createElement('a')
+        document.body.appendChild(a)
+        a.style = 'display: none'
+        var url = window.URL.createObjectURL(csvData)
+        a.href = url
+        a.download = fileName
+        a.click()
+        a.remove()
+        window.URL.revokeObjectURL(url)
+      }
+    },
+    async handleExportModule() {
+      let url = "/resi/partymember/icpartymemberstyle/import/template-download"
+
+
+      let params = {}
+      // app.ajax.exportFilePost(
+      //   url,
+      //   params,
+      //   (data, rspMsg) => {
+
+      //     this.download(data, 'a.xls')
+      //   },
+      //   (rspMsg, data) => {
+      //     this.$message.error(rspMsg);
+      //   }
+      // );
+      await this.$http({
+        method: 'POST',
+        url,
+        responseType: 'blob',
+        data: params
+      })
+        .then(res => {
+          console.log('res-------dd', res)
+          if (res.headers["content-disposition"]) {
+            let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
+            this.download(res.data, fileName)
+            // 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对象
+          } else this.$message.error('下载失败')
+        })
+        .catch(err => {
+          console.log('err', err)
+          return this.$message.error('网络错误')
+        })
+    },
+    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.importLoading = true
+      this.importBtnTitle = '正在上传中...'
+      this.$message({
+        showClose: true,
+        message: '导入中，请到系统管理-导入记录中查看进度',
+        duration: 0
+      })
+      const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加
+      formData.append('file', file.file) //添加文件对象
+      this.$http
+        .post('/resi/partymember/icpartymemberstyle/import', formData).then(res => {
+          console.log('res-up', res)
+          if (res.data.code == 0 && res.data.msg == 'success') {
+            // this.$message.success('导入成功')
+            this.getTableData()
+          } else {
+            this.$message.error(res.data.msg)
+          }
+        }).catch(err => {
+          console.log('失败', err)
+          file.onError() //上传失败的文件会从文件列表中删除
+          // this.$message.error('导入失败')
+        })
+      // await 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)
+      //     file.onError() //上传失败的文件会从文件列表中删除
+      //     this.$message.error('导入失败')
+      // })
+      this.importLoading = false
+      this.importBtnTitle = '导入'
+      this.$refs.upload.clearFiles()
+    },
+    async handleExport() {
+      this.exportBtn = true
+      this.exportBtnTitle = '正在导出...'
+      let params = {
+        agencyId: this.$store.state.user.agencyId,
+        pageSize: 9999,
+        pageNo: this.currentPage
+      }
+      // .post('epmetuser/icresiuser/exportExcel', params)
+      await 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)
+          this.$message.error('获取导出失败')
+        })
+      this.exportBtn = false
+      this.exportBtnTitle = '导出'
+    },
+
+    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 _form = {
+        ...this.form,
+      }
+      await this.$http
+        .post('/gov/org/customerCommunityManageUser/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) {
+      console.log('row1', row)
+      this.$http
+        .post('/gov/org/customerCommunityManageUser/delete', [row.id])
+        .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) {
+      this.$http
+        .post(`/gov/org/customerCommunityManageUser/${id}`)
+        .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 getCateList() {
+      const url = "/sys/dict/data/dictlist"
+
+      let params = {
+        dictType: 'communityFrameWork'
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.optionsEditC = data;
+        this.tableHeader[2].options = data;
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+    async getTableData() {
+      this.tableLoading = true
+      const { user } = await this.$store.state
+      let params = {
+        ...this.searchForm,
+        pageNo: this.currentPage,
+        pageSize: this.pageSize
+      }
+      await this.$http
+        .post('/gov/org/customerCommunityManageUser/page', 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>
+@import "@/assets/scss/buttonstyle.scss";
+
+.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: 500px;
+  }
+
+  .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;
+      }
+    }
+  }
+}
+
+.div-content {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</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);
+  }
+}
+
+
+.resi-btns {
+  margin-top: 20px;
+  text-align: center;
+}
+</style>
diff --git a/src/views/modules/communityParty/gridFrameWork/index.vue b/src/views/modules/communityParty/gridFrameWork/index.vue
new file mode 100644
index 00000000..784d0cc0
--- /dev/null
+++ b/src/views/modules/communityParty/gridFrameWork/index.vue
@@ -0,0 +1,738 @@
+<template>
+  <div v-if="pageLoading" class="resi-container">
+    <el-card ref="searchCard" class="search-card">
+      <div class="">
+        <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 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="searchForm.name" placeholder="请输入" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="职位" prop="type">
+            <el-select v-model="searchForm.type" filterable placeholder="请选择" clearable>
+              <el-option v-for="item in optionsEditC" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button class="diy-button--search" size="small" @click="handleSearch">查询</el-button>
+            <el-button class="diy-button--reset" size="small" @click="resetForm('searchForm')">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+    <el-card class="resi-card-table">
+
+      <div class="resi-row-btn">
+        <el-button class="diy-button--add" size="small" @click="handleAdd">新增</el-button>
+        <!-- <el-button
+                   class="diy-button--export"
+                   size="small"
+                   @click="handleExportModule('room')">下载模板</el-button> -->
+        <!-- <el-upload ref="upload" class="upload-demo" action="uploadUlr" :limit="1" :accept="'.xls,.xlsx'"
+          :with-credentials="true" :show-file-list="false" :auto-upload="true" :on-success="handleExcelSuccess"
+          :before-upload="beforeExcelUpload" :http-request="uploadHttpRequest">
+          <el-button size="small" class="diy-button--delete" :loading="importLoading">{{ importBtnTitle }}</el-button>
+        </el-upload> -->
+        <!-- <el-button class="diy-button--reset" size="small" :loading="exportBtn" @click="handleExport">{{ exportBtnTitle
+        }}</el-button> -->
+
+      </div>
+
+      <el-table :data="tableData" row-key="id" v-loading="tableLoading" border :height="tableHeight" 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">
+            <div class="div-content">{{ handleFilterSpan(scope.row, item) }}</div>
+          </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="222" @confirm="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="total">
+        </el-pagination>
+      </div>
+    </el-card>
+
+    <el-dialog title="网格人员架构" :visible.sync="dialogVisible" width="50%" top="5vh" class="dialog-h" 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 dialog-h-content scroll-h">
+        <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="mobile">
+          <el-input v-model="form.mobile" placeholder="请输入" :disabled="disabled" class="input-width" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="人员属性" prop="property">
+          <el-input v-model="form.property" placeholder="请输入" :disabled="disabled" class="input-width"
+            clearable></el-input>
+        </el-form-item>
+        <el-form-item label="职位" prop="type">
+          <el-select v-model="form.type" filterable :disabled="disabled" placeholder="请选择" class="input-width" clearable>
+            <el-option v-for="item in optionsEditC" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div class="resi-btns">
+        <el-button size="small" @click="handlerCancle">取消</el-button>
+        <el-button v-if="!disabled" type="primary" size="small" :loading="btnLoading" @click="handleSUbmit">提交</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { mapGetters } from 'vuex'
+import { requestPost, requestGet } from "@/js/dai/request";
+export default {
+  data() {
+    return {
+      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',
+      importBtnTitle: '导入',
+      importLoading: false,
+      exportBtn: false,
+      exportBtnTitle: '导出',
+      tableLoading: false,
+      btnLoading: false,
+      uploading: false,
+      disabled: false,
+      pageLoading: false,
+      dialogVisible: false,
+      currentPage: 1,
+      pageSize: 20,
+      total: null,
+      tableData: [],
+      searchH: 0,
+      unloadPencent: 0,
+      addLevel: '1',
+      addType: 'add',
+      value: '',
+      optionsEditG: [],
+      optionsC: [],
+      optionsEditC: [],
+      options: [
+        {
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 2
+        }
+      ],
+      demandOptions: [],
+      tableHeader: [
+        {
+          label: '组织名称',
+          columnName: 'agencyName',
+          align: 'center',
+          width: '160',
+          options: []
+        }, {
+          label: '姓名',
+          align: 'center',
+          columnName: 'name',
+          width: '200',
+          options: []
+        }, {
+          label: '职位',
+          align: 'center',
+          columnName: 'type',
+          width: '',
+          options: []
+        }
+      ],
+      customerId: '',
+      searchForm: {
+        gridId: null,
+        type: null,
+        name: null
+      },
+      form: {
+        type: '',
+        gridId: '',
+        name: '',
+        property: '',
+        mobile: ''
+      },
+      rules: {
+        gridId: [{ required: true, message: '网格不能为空', trigger: 'blur' }],
+        property: [{ required: true, message: '人员属性不能为空', trigger: 'blur' }],
+        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+        type: [{ required: true, message: '职位不能为空', trigger: 'blur' }],
+        mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' }]
+      },
+
+      orgOptions: [],
+      orgOptionProps: {
+        multiple: false,
+        value: 'agencyId',
+        label: 'agencyName',
+        children: 'subAgencyList',
+        checkStrictly: true
+      },
+      formType: ''
+    }
+  },
+  computed: {
+    ...mapGetters(['clientHeight', 'iframeHeight']),
+    tableHeight() {
+      const h = this.clientHeight - this.searchH - 280 + this.iframeHeigh
+      const _h = this.clientHeight - 280 - this.searchH
+      return this.$store.state.inIframe ? h : _h
+    }
+  },
+  async created() {
+    this.customerId = localStorage.getItem('customerId')
+    this.getTableData()
+    this.pageLoading = true
+  },
+
+  mounted() {
+    this.getCateList()
+    this.getGridList()
+    this.$nextTick(() => {
+      this.searchH = this.$refs.searchCard.$el.offsetHeight
+      console.log('tableHeight', this.tableHeight)
+    })
+
+  },
+  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))
+    },
+    download(data, fileName) {
+      console.log('data', data)
+      if (!data) {
+        return
+      }
+
+      var csvData = new Blob([data])
+
+      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+        window.navigator.msSaveOrOpenBlob(csvData, fileName)
+      }
+      // for Non-IE (chrome, firefox etc.)
+      else {
+        var a = document.createElement('a')
+        document.body.appendChild(a)
+        a.style = 'display: none'
+        var url = window.URL.createObjectURL(csvData)
+        a.href = url
+        a.download = fileName
+        a.click()
+        a.remove()
+        window.URL.revokeObjectURL(url)
+      }
+    },
+    async handleExportModule() {
+      let url = "/resi/partymember/icpartymemberstyle/import/template-download"
+
+
+      let params = {}
+      await this.$http({
+        method: 'POST',
+        url,
+        responseType: 'blob',
+        data: params
+      })
+        .then(res => {
+          console.log('res-------dd', res)
+          if (res.headers["content-disposition"]) {
+            let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
+            this.download(res.data, fileName)
+            // 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对象
+          } else this.$message.error('下载失败')
+        })
+        .catch(err => {
+          console.log('err', err)
+          return this.$message.error('网络错误')
+        })
+    },
+    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.importLoading = true
+      this.importBtnTitle = '正在上传中...'
+      this.$message({
+        showClose: true,
+        message: '导入中，请到系统管理-导入记录中查看进度',
+        duration: 0
+      })
+      const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加
+      formData.append('file', file.file) //添加文件对象
+      this.$http
+        .post('/resi/partymember/icpartymemberstyle/import', formData).then(res => {
+          console.log('res-up', res)
+          if (res.data.code == 0 && res.data.msg == 'success') {
+            // this.$message.success('导入成功')
+            this.getTableData()
+          } else {
+            this.$message.error(res.data.msg)
+          }
+        }).catch(err => {
+          console.log('失败', err)
+          file.onError() //上传失败的文件会从文件列表中删除
+          // this.$message.error('导入失败')
+        })
+      // await 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)
+      //     file.onError() //上传失败的文件会从文件列表中删除
+      //     this.$message.error('导入失败')
+      // })
+      this.importLoading = false
+      this.importBtnTitle = '导入'
+      this.$refs.upload.clearFiles()
+    },
+    async handleExport() {
+      this.exportBtn = true
+      this.exportBtnTitle = '正在导出...'
+      let params = {
+        agencyId: this.$store.state.user.agencyId,
+        pageSize: 9999,
+        pageNo: this.currentPage
+      }
+      // .post('epmetuser/icresiuser/exportExcel', params)
+      await 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)
+          this.$message.error('获取导出失败')
+        })
+      this.exportBtn = false
+      this.exportBtnTitle = '导出'
+    },
+    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
+    },
+    handleSearch(val) {
+      console.log('searchhh--', val)
+      this.currentPage = 1
+      this.getTableData()
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.handleSearch()
+    },
+    handleAdd() {
+
+      this.dialogVisible = true
+    },
+
+
+    async handleLook(row) {
+      this.disabled = true
+      await this.getDetail(row.id)
+    },
+    async handleEdit(row, addType) {
+      // this.form = { ...row }
+      await this.getDetail(row.id)
+      this.formType = addType
+      // this.dialogVisible = true
+    },
+    async addNew() {
+      const { user } = await this.$store.state
+      const _form = {
+        ...this.form,
+        // customerId: 'b09527201c4409e19d1dbc5e3c3429a1'
+      }
+      await this.$http
+        .post('/gov/org/customerGridManageUser/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) {
+      this.$http
+        .post('/gov/org/customerGridManageUser/delete', [row.id])
+        .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('网络错误')
+        })
+    },
+    handlerCancle() {
+      for (const n in this.form) {
+        this.form[n] = ''
+        if (n === 'imageList') this.form[n] = []
+      }
+      this.disabled = false
+      this.dialogVisible = false
+    },
+    async getDetail(id) {
+      this.$http
+        .post(`/gov/org/customerGridManageUser/${id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            this.form = { ...res.data }
+            // const _arr = this.optionsEditC.map(item => item.property)
+
+            // if (!_arr.includes(res.data.property) && !this.disabled) this.form.property = ''
+
+            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 {
+            this.optionsEditG = res.data
+          }
+        })
+        .catch(() => {
+          return this.$message.error('网络错误')
+        })
+    },
+
+    async getCateList() {
+      const url = "/sys/dict/data/dictlist"
+      let params = {
+        dictType: 'gridFrameWork'
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        this.optionsEditC = data;
+        this.tableHeader[2].options = data;
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    async getTableData() {
+      this.tableLoading = true
+      const { user } = await this.$store.state
+      let url = '/gov/org/customerGridManageUser/page'
+      let params = {
+        ...this.searchForm,
+        pageNo: this.currentPage,
+        pageSize: this.pageSize
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code == 0) {
+        console.log(data);
+        this.tableData = data.list;
+        this.total = data.total;
+      } else {
+        this.$message.error(msg)
+      }
+
+      this.tableLoading = false
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/buttonstyle.scss";
+
+.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: 500px;
+  }
+
+  .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;
+      }
+    }
+  }
+}
+
+.div-content {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</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>