From bafee731925d60578f22f968b0a5d7ae13bf3c14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Thu, 24 Aug 2023 15:02:49 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E7=82=B9=E4=BA=BA=E7=BE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js                                   |   3 +
 src/router/index.js                           |   5 +
 src/views/gridman/emphasis/index.vue          | 467 ++++++++++++++++++
 src/views/gridman/emphasis/widget/AddForm.vue | 169 +++++++
 src/views/gridman/emphasis/widget/validate.js |  28 ++
 src/views/gridman/navigation/index.vue        |   2 +-
 src/views/gridman/site/index.vue              |  12 +-
 7 files changed, 683 insertions(+), 3 deletions(-)
 create mode 100644 src/views/gridman/emphasis/index.vue
 create mode 100644 src/views/gridman/emphasis/widget/AddForm.vue
 create mode 100644 src/views/gridman/emphasis/widget/validate.js

diff --git a/src/main.js b/src/main.js
index 0b807bc..910d936 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,6 +28,9 @@ import '../public/ueditor/lang/zh-cn/zh-cn.js'
 import '../public/ueditor/formdesign/leipi.formdesign.v4.js'
 import drag from '@/components/Widget/dragwidget.js';
 
+import 'mapbox-gl/dist/mapbox-gl.css'
+import mapBoxGl from 'mapbox-gl'
+Vue.prototype.$mapboxgl = mapBoxGl
 // 引入样式文件
 import 'leaflet/dist/leaflet.css'
 // 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
diff --git a/src/router/index.js b/src/router/index.js
index 55c0f8e..f6134f7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -86,6 +86,11 @@ export const constantRouterMap = [
           name: 'gridman_site',
           meta: { title: '站点管理', icon: 'zhuyeicon', sortNo: 0 }, // iconfont icon-
           component: () => import('@/views/gridman/site/index')
+        },{
+          path: '/gridman_emphasis',
+          name: 'gridman_emphasis',
+          meta: { title: '重点人群', icon: 'zhuyeicon', sortNo: 0 }, // iconfont icon-
+          component: () => import('@/views/gridman/emphasis/index')
         }
     ]
   },
diff --git a/src/views/gridman/emphasis/index.vue b/src/views/gridman/emphasis/index.vue
new file mode 100644
index 0000000..4b875ca
--- /dev/null
+++ b/src/views/gridman/emphasis/index.vue
@@ -0,0 +1,467 @@
+<template>
+  <div class="site-content">
+
+    <sticky :className="'sub-navbar'">
+      <div class="filter-container">
+
+        <el-input @keyup.enter.native="handleFilter" size="mini" prefix-icon="el-icon-search"
+          style="width: 200px;margin-bottom: 0;margin:0px 12px;" class="filter-item" :placeholder="'名称'"
+          v-model="listQuery.name">
+        </el-input>
+
+        <el-button type="primary" size="mini" @click="getList()">查询</el-button>
+        <el-button type="primary" size="mini" @click="add()">添加</el-button>
+        <el-button type="warning" size="mini" @click="react()">编辑</el-button>
+        <el-button type="danger" size="mini" @click="del()">删除</el-button>
+
+        <permission-btn moduleName='modulemanager' :size="'mini'" v-on:btn-event="onBtnClicked"></permission-btn>
+
+      </div>
+    </sticky>
+    <div class="app-container flex-item">
+      <div class="fh">
+        <el-table ref="mainTable" :key='tableKey' :data="tableData" v-loading="listLoading" border fit
+          highlight-current-row style="width: 100%;" height="calc(100% - 112px)" @row-click="rowClick"
+          @selection-change="handleSelectionChange">
+          <el-table-column type="selection" align="center" width="55">
+          </el-table-column>
+          <el-table-column prop="userName" label="姓名" show-overflow-tooltip align="center">
+          </el-table-column>
+          <el-table-column label="性别" show-overflow-tooltip align="center">
+            <template slot-scope="scope">
+              <span>{{scope.row.sex == 0 ? '男' : '女'}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="phone" label="电话" show-overflow-tooltip align="center">
+          </el-table-column>
+          <el-table-column prop="cardNo" label="身份证号" show-overflow-tooltip align="center">
+          </el-table-column>
+          <el-table-column prop="politicalOutlook" label="政治面貌" show-overflow-tooltip align="center">
+          </el-table-column>
+          <el-table-column prop="education" label="学历" show-overflow-tooltip align="center">
+          </el-table-column>
+
+        </el-table>
+        <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize"
+          @pagination="handleCurrentChange" />
+      </div>
+    </div>
+
+    <el-dialog width="40%" height="60%" top=" calc(50vh - 340px)" class="dialog-mini body-small addWindow"
+      v-el-drag-dialog :title="titleStr" :close-on-click-modal="false" :close-on-press-escape="false"
+      :visible.sync="addServiceVisible">
+      <el-container style="overflow-y:hidden;">
+        <el-container v-if="addServiceVisible">
+          <AddForm @addSuccess="addSuccess" :detailInfo="detailInfo" @close="addServiceVisible = false"></AddForm>
+        </el-container>
+      </el-container>
+    </el-dialog>
+
+  </div>
+
+
+</template>
+
+<script>
+  import Pagination from '@/components/Pagination'
+  import { listToTreeSelect } from '@/utils'
+  import extend from "@/extensions/delRows.js"
+  import * as modules from '@/api/modules'
+  import * as login from '@/api/login'
+  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+  import waves from '@/directive/waves' // 水波纹指令
+  import permissionBtn from '@/components/PermissionBtn'
+  import elDragDialog from '@/directive/el-dragDialog'
+  import iconData from '@/assets/public/css/comIconfont/iconfont/iconfont.json'
+  import { getMethodCommon, postMethodCommon } from "@/api/common";
+  import AddForm from './widget/AddForm';
+  import Sticky from '@/components/Sticky'
+
+  export default {
+    name: 'module',
+    components: {
+      permissionBtn,
+      Pagination,
+      AddForm,
+      Sticky
+    },
+    mixins: [extend],
+    directives: {
+      waves,
+      elDragDialog
+    },
+    data() {
+      return {
+        tableKey: 0,
+        titleStr: '添加',
+        tableData: [],
+        addServiceVisible: false,
+        total: 0,
+        listQuery: {
+          // 查询条件
+          pageIndex: 1,
+          pageSize: 20,
+          name: null,
+        },
+        detailInfo:[]
+
+      }
+    },
+    computed: {
+
+    },
+    filters: {
+
+    },
+    created() {
+      this.getList()
+    },
+    mounted() {
+
+    },
+    methods: {
+      add() {
+        this.addServiceVisible = true;
+        this.detailInfo=[]
+        this.titleStr = '添加'
+      },
+      addSuccess() {
+        this.addServiceVisible = false;
+        this.getList();
+      },
+      del() {
+        var _this = this
+        if(this.multipleSelection.length != 1){
+          this.$message({
+            type: 'info',
+            message: '请选择一条数据进行删除'
+          });
+          return;
+        }
+        this.$confirm('确定删除所选数据?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          postMethodCommon("/Grid/DeleteKeyUser?Id=" + _this.multipleSelection[0].id, {}).then(res => {
+            if (res.code == 200) {
+              this.$message({
+                type: "success",
+                message: "删除成功",
+              })
+            }
+            _this.getList();
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+
+      },
+      react() {
+        if(this.multipleSelection.length != 1){
+          this.$message({
+            type: 'info',
+            message: '请选择一条数据进行编辑'
+          });
+          return;
+        }
+        this.detailInfo = this.multipleSelection
+        this.addServiceVisible = true;
+        this.titleStr = '编辑'
+      },
+      rowClick(row) {
+        this.$refs.mainTable.clearSelection()
+        this.$refs.mainTable.toggleRowSelection(row)
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val
+      },
+      onBtnClicked: function (domId) {
+        console.log('you click:' + domId)
+        switch (domId) {
+          case 'btnAdd':
+            this.addServiceVisible = true;
+            break
+          case 'btnEdit':
+            if (this.multipleSelection.length != 1) {
+              this.$message({
+                message: '只能选中一个进行编辑',
+                type: 'error'
+              })
+              return
+            }
+            this.handleUpdate()
+            break
+          case 'btnDel':
+            if (this.multipleSelection.length < 1) {
+              this.$message({
+                message: '至少删除一个',
+                type: 'error'
+              })
+              return
+            }
+            this.handleDelete()
+            break
+          case 'btnAddMenu':
+            this.handleAddMenu()
+            break
+          case 'btnEditMenu':
+            if (this.selectMenus.length !== 1) {
+              this.$message({
+                message: '只能选中一个进行编辑',
+                type: 'error'
+              })
+              return
+            }
+            this.handleEditMenu(this.selectMenus[0])
+            break
+          case 'btnDelMenu':
+            if (this.selectMenus.length < 1) {
+              this.$message({
+                message: '至少删除一个',
+                type: 'error'
+              })
+              return
+            }
+            this.handleDelMenus(this.selectMenus)
+            break
+          default:
+            break
+        }
+      },
+      getList() {
+        this.listLoading = true
+        getMethodCommon("/Grid/LoadKeyUser", this.listQuery).then(res => {
+          if (res.code == 200) {
+            this.tableData = res.data
+            this.tableData.forEach((item, index) => {
+              switch (item.state) {
+                case 0: this.tableData[index].state = "未审核";
+                  break;
+                case 1: this.tableData[index].state = "审核通过";
+                  break;
+                case 2: this.tableData[index].state = "未通过";
+                  break;
+                case 3: this.tableData[index].state = "全部";
+                  break;
+              }
+            })
+            this.total = res.count
+            this.listLoading = false
+          }
+        })
+      },
+      handleFilter() {
+        this.listQuery.pageIndex = 1
+        this.getList()
+      },
+      handleSizeChange(val) {
+        this.listQuery.pageSize = val
+        this.getList()
+      },
+      handleCurrentChange(val) {
+        this.listQuery.pageIndex = val.page
+        this.listQuery.pageSize = val.limit
+        this.getList()
+      },
+
+
+      handleUpdate() {
+        this.editForm = this.multipleSelection[0];
+        this.editServiceVisible = true;
+      },
+
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep .el-pagination__jump{
+    color: #fff;
+  }
+  ::v-deep .sticky {
+    background: rgba(0, 9, 34, 0.6);
+  }
+
+  ::v-deep .dialog-mini .el-dialog__header {
+    background: rgba(10, 39, 78, 1);
+  }
+
+  ::v-deep .dialog-mini .el-dialog__header .el-dialog__title {
+    color: #fff;
+
+  }
+
+  ::v-deep .el-descriptions__body {
+    background: rgba(0, 9, 34, 1);
+    color: #fff;
+  }
+
+  ::v-deep .el-descriptions-item__label.is-bordered-label {
+    background: rgba(0, 9, 34, 0.6);
+    color: #fff;
+  }
+
+  ::v-deep .el-input__inner {
+    background: rgba(0, 9, 34, 1);
+    color: #fff;
+  }
+
+  ::v-deep .el-dialog {
+    background: rgba(10, 39, 78, 1);
+
+  }
+
+  ::v-deep .el-loading-mask {
+    background: rgba(0, 9, 34, 0.9);
+
+  }
+
+  .filter-container {
+    text-align: right;
+  }
+
+  .site-container {
+    width: 100%;
+    height: 100%;
+    background-image: url(/img/gridman/bg.png);
+    background-size: 100% 100%;
+  }
+
+  .site-header {
+    width: 100%;
+    height: 99px;
+    background-image: url(/img/gridman/header.png);
+    background-size: 100% 100%;
+    text-align: center;
+    color: #fff;
+    line-height: 90px;
+    font-size: 36px;
+    letter-spacing: 5px;
+  }
+
+  .header-btn {
+    width: 100px;
+    height: 50px;
+    position: absolute;
+    top: 4%;
+    left: 2%;
+  }
+
+  .site-content {
+    width: 100%;
+    height: 94%;
+    background: rgba(0, 9, 34, 0.6);
+  }
+
+  .app-container {
+    height: 100%;
+    background: rgba(0, 9, 34, 0.6);
+  }
+
+  ::v-deep .el-table {
+    background: rgba(0, 9, 34, 0.6);
+    border-left: 1px solid #00EDE8;
+  }
+
+  ::v-deep .el-table .el-table__body tr:hover td {
+    background: rgba(24, 77, 143, 0.4) !important;
+    cursor: pointer;
+  }
+
+  ::v-deep .el-table .el-table__body tr.current-row td {
+    cursor: pointer;
+    background: rgba(24, 77, 143, 0.4) !important;
+  }
+
+  ::v-deep .el-table tr {
+    background: rgba(0, 9, 34, 0.6);
+    border: none;
+    color: #fff;
+
+  }
+
+  ::v-deep .el-table th.el-table__cell {
+    background: rgba(0, 9, 34, 0.6);
+    color: #fff;
+    border: 1px solid #00EDE8;
+
+  }
+
+  ::v-deep .el-pagination__total,
+  .el-pagination__jump {
+    color: #fff;
+  }
+
+  ::v-deep .el-table td.el-table__cell,
+  .el-table th.el-table__cell.is-leaf {
+    border-bottom: 1px solid #00EDE8;
+  }
+
+  ::v-deep .el-table--border .el-table__cell,
+  .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
+    border-right: 1px solid #00EDE8;
+  }
+
+  ::v-deep .pagination-container {
+    background: rgba(0, 9, 34, 0.6) !important;
+    border: none;
+  }
+
+  .text {
+    font-size: 14px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: '';
+  }
+
+  .clearfix:after {
+    clear: both;
+  }
+
+  .el-card__header {
+    padding: 12px 20px;
+  }
+
+  .selectIcon-box {
+    text-align: center;
+    border: 1px solid #eeeeee;
+    border-right: 0;
+    border-bottom: 0;
+
+    .el-col {
+      padding: 10px 0;
+      border-right: 1px solid #eeeeee;
+      border-bottom: 1px solid #eeeeee;
+
+      &.active {
+        .iconfont {
+          color: #409EFF;
+        }
+      }
+    }
+
+    .iconfont {
+      cursor: pointer;
+      font-size: 20px;
+    }
+  }
+
+  .custom-icon-input::before {
+    font-size: 18px;
+    position: absolute;
+    right: 10px;
+    top: 0;
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/gridman/emphasis/widget/AddForm.vue b/src/views/gridman/emphasis/widget/AddForm.vue
new file mode 100644
index 0000000..9b72f8e
--- /dev/null
+++ b/src/views/gridman/emphasis/widget/AddForm.vue
@@ -0,0 +1,169 @@
+<template>
+  <div style="width:100%;height:100%;overflow:auto;padding:0px 23px; background: rgba(0, 9, 34, 0.6);">
+    <el-form ref="form" size="mini" :model="addForm" :rules="rules" label-width="140px">
+      <el-form-item label="姓名: " prop="userName">
+        <el-input v-model="addForm.userName" style="width:300px ;"></el-input>
+      </el-form-item>
+
+      <el-form-item label="身份证号: " prop="cardNo" >
+        <el-input v-model="addForm.cardNo" style="width:300px ;"></el-input>
+      </el-form-item>
+
+      <el-form-item label="电话: " prop="phone">
+        <el-input v-model="addForm.phone" style="width:300px ;"></el-input>
+      </el-form-item>
+
+
+      <el-form-item label="性别: " prop="sex">
+        <el-radio-group v-model="addForm.sex">
+          <el-radio label="0">男</el-radio>
+          <el-radio label="1">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="政治面貌：" prop="politicalOutlook">
+        <el-select v-model="addForm.politicalOutlook" placeholder="请选择" style="width:300px ;">
+          <el-option label="群众" value="群众"></el-option>
+          <el-option label="中共党员" value="中共党员"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="学历：" prop="education">
+        <el-select v-model="addForm.education" placeholder="请选择" style="width:300px ;">
+          <el-option label="小学" value="小学"></el-option>
+          <el-option label="初中" value="初中"></el-option>
+          <el-option label="高中" value="高中"></el-option>
+          <el-option label="专科" value="专科"></el-option>
+          <el-option label="本科" value="本科"></el-option>
+          <el-option label="研究生" value="研究生"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button @click="close()">取消</el-button>
+        <el-button type="primary" @click="submitForm('form')" v-if="detailInfo.length == 0">保存</el-button>
+        <el-button type="primary" @click="createForm('form')" v-else>编辑</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+  import { postMethodCommon, getMethodCommon } from '../../../../api/common';
+  import { validateMobile, validID, validateStock } from './validate.js'
+  import form from '../../../../store/modules/form';
+  let BASE_IMAGE_URL = process.env.VUE_APP_BASE_IMG_URL;
+  // let BASE_IMAGE_URL = BASE_IMAGE_API_URL;
+  export default {
+    name: "AddForm",
+    props:['detailInfo'],
+    data() {
+      return {
+        BASE_IMAGE_URL: BASE_IMAGE_URL,
+        addForm: {
+          sex: "0"
+        },
+        rules: {
+          userName: [
+            { required: true, message: '姓名不能为空', trigger: 'blur' },
+          ],
+          phone: [
+            { required: true, message: '电话不能为空', trigger: 'blur' },
+            { validator: validateMobile.bind(this), trigger: 'blur' }
+          ],
+          sex: [
+            { required: true, message: '性别不能为空', trigger: 'blur' },
+          ],
+          cardNo: [
+            { required: true, message: '身份证号不能为空', trigger: 'blur' },
+            { validator: validID.bind(this), trigger: 'blur' }
+          ],
+          politicalOutlook: [
+            { required: true, message: '政治面貌不能为空', trigger: 'blur' },
+          ],
+          education: [
+            { required: true, message: '学历不能为空', trigger: 'blur' },
+          ],
+        },
+
+      }
+    },
+    created() {
+      console.log(this.detailInfo)
+      if(this.detailInfo.length == 1){
+        this.addForm=this.detailInfo[0]
+        this.addForm.sex = this.addForm.sex.toString()
+      }else{
+        this.addForm={
+          sex:"0"
+        }
+      }
+    },
+    methods: {
+     
+      submitForm() {
+        var _this =this 
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            console.log(_this.addForm)
+            _this.addForm.sex = Number(_this.addForm.sex)
+            postMethodCommon("/Grid/AddKeyUser", _this.addForm).then(response => {
+              if (response.code == 200) {
+                // 上传shp
+                this.$emit("addSuccess");
+                this.$message({
+                  type:"success",
+                  message:"添加成功"
+                })
+              }
+            })
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      createForm(){
+        var _this =this 
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            console.log(_this.addForm)
+            _this.addForm.sex = Number(_this.addForm.sex)
+            postMethodCommon("/Grid/EditKeyUser", _this.addForm).then(response => {
+              if (response.code == 200) {
+                // 上传shp
+                this.$emit("addSuccess");
+                this.$message({
+                  type:"success",
+                  message:"编辑成功"
+                })
+              }
+            })
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      close() {
+        this.$emit("close");
+      }
+    }
+  }
+</script>
+<style scoped>
+  ::v-deep .el-form-item__label {
+    color: #fff;
+  }
+
+  ::v-deep .el-radio {
+    color: #fff;
+
+  }
+
+  .service-type-btn {
+    width: 100%;
+    height: 180px;
+    text-align: center;
+    margin-top: 100px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/gridman/emphasis/widget/validate.js b/src/views/gridman/emphasis/widget/validate.js
new file mode 100644
index 0000000..b7222cb
--- /dev/null
+++ b/src/views/gridman/emphasis/widget/validate.js
@@ -0,0 +1,28 @@
+const validateMobile = function (rule, value, callback) {
+    let newValue = value.replace(/[^0-9]/gi, '')
+    if (value !== newValue) {
+      callback(new Error('请输入正确的手机号'))
+    } else if (newValue.length !== 11) {
+      callback(new Error('请输入正确的手机号'))
+    } else {
+      callback()
+    }
+  }
+  const validID = function(rule, value, callback) {
+    // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
+    let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
+    if (reg.test(value)) {
+      callback();
+    } else {
+      callback(new Error("请输入正确的身份证号码"));
+    }
+  }
+  var validateStock = (rule, value, callback) => {
+    if (!value || value == 0) {
+      callback(new Error("不能为空"));
+    } else {
+      callback();
+    }
+  };
+
+  export { validateMobile ,validID,validateStock}
\ No newline at end of file
diff --git a/src/views/gridman/navigation/index.vue b/src/views/gridman/navigation/index.vue
index 2719ca4..d8377a0 100644
--- a/src/views/gridman/navigation/index.vue
+++ b/src/views/gridman/navigation/index.vue
@@ -27,7 +27,7 @@
             navList:[
                 {
                     lable:"重点人群",
-                    url:"",
+                    url:"/gridman_emphasis",
                     top:30,
                 },{
                     lable:"区域划分",
diff --git a/src/views/gridman/site/index.vue b/src/views/gridman/site/index.vue
index c2801c0..58c5ad7 100644
--- a/src/views/gridman/site/index.vue
+++ b/src/views/gridman/site/index.vue
@@ -114,6 +114,7 @@
   import AddForm from './widget/Examine';
   import EditForm from './widget/EditForm';
   import SelectRoles from './widget/SelectRoles'
+  import Sticky from '@/components/Sticky'
 
   export default {
     name: 'module',
@@ -122,7 +123,8 @@
       Pagination,
       AddForm,
       EditForm,
-      SelectRoles
+      SelectRoles,
+      Sticky
       // elDragDialog
     },
     mixins: [extend],
@@ -592,6 +594,12 @@
 </script>
 
 <style lang="scss" scoped>
+    ::v-deep .el-pagination__jump{
+    color: #fff;
+  }
+  ::v-deep .sticky{
+    background: rgba(0, 9, 34, 0.6);
+  }
   ::v-deep .dialog-mini .el-dialog__header {
     background: rgba(10,39,78, 1);
   }
@@ -659,7 +667,7 @@
 
   .site-content {
     width: 100%;
-    height: 86%;
+    height: 94%;
     background: rgba(0, 9, 34, 0.6);
   }