网格力量页面

src/views/modules/user/gridForce-add-or-update.vue

@@ -0,0 +1,159 @@
+<template>
+    <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false"
+        :close-on-press-escape="false">
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
+            :label-width="$i18n.locale === 'en-US' ? '120px' : '180px'">
+            <el-form-item label="姓名" prop="name">
+                <el-input v-model="dataForm.name" placeholder="姓名"></el-input>
+            </el-form-item>
+            <template v-if="dataForm.id != ''">
+                <el-form-item label="性别" prop="allDeptIds">
+                    <el-radio v-model="dataForm.sex" label="1">男</el-radio>
+                    <el-radio v-model="dataForm.sex" label="2">女</el-radio>
+                </el-form-item>
+            </template>
+            <el-form-item label="联系电话" prop="mobile">
+                <el-input v-model="dataForm.mobile" placeholder="联系电话"></el-input>
+            </el-form-item>
+            <template v-if="dataForm.id == ''">
+                <el-form-item label="居住网格" prop="deptId">
+                    <el-cascader v-model="dataForm.deptId" :options="options" clearable></el-cascader>
+                </el-form-item>
+            </template>
+            <template v-if="dataForm.id != ''">
+                <el-form-item label="居住网格" prop="allDeptIds">
+                    <el-cascader v-model="dataForm.allDeptIds" :options="options" clearable></el-cascader>
+                </el-form-item>
+            </template>
+            
+            <template v-if="dataForm.id != ''">
+                <el-form-item label="职务" prop="post">
+                    <el-select v-model="dataForm.post">
+                        <el-option v-for="item in postOptions" :key="item.value" :label="item.label" :value="item.value"
+                        :v-model="dataForm.post">
+                        </el-option>
+              </el-select>
+                </el-form-item>
+            </template>
+        </el-form>
+        <template slot="footer">
+            <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+            <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+        </template>
+    </el-dialog>
+</template>
+  
+<script>
+import debounce from 'lodash/debounce'
+export default {
+    data() {
+        return {
+            visible: false,
+            dataForm: {
+                id: '',
+                name: '',
+                sex:'',
+                post:'',
+                mobile: '',
+                allDeptIds: [],
+            },
+            options: [],
+       
+        }
+    },
+    computed: {
+        dataRule() {
+            return {
+                name: [
+                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+                ],
+                idCard: [
+                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+                ],
+                mobile: [
+                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+                ],
+                post: [
+                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+                ],
+                allDeptIds: [
+                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+                ],
+                
+            }
+        }
+    },
+    methods: {
+        init() {
+            this.visible = true
+            this.getByLoginUser()
+            this.$nextTick(() => {
+                this.$refs['dataForm'].resetFields()
+                if (this.dataForm.id) {
+                    this.getInfo()
+                }
+            })
+        },
+        getByLoginUser() {
+            this.$http
+                .get(`/sys/dept/party/getDeptTree`)
+                .then(({ data: res }) => {
+                    if (res.code !== 0) {
+                        return this.$message.error(res.msg)
+                    }
+                    this.options = res.data.options
+                })
+                .catch(() => { })
+        },
+        // 获取信息
+        getInfo() {
+            this.$http.get(`/app-user/knightpionner/${this.dataForm.id}`).then(({ data: res }) => {
+                if (res.code !== 0) {
+                    return this.$message.error(res.msg)
+                }
+                this.dataForm = {
+                    ...this.dataForm,
+                    ...res.data
+                }
+            }).catch(() => { })
+        },
+       
+        // 表单提交
+        dataFormSubmitHandle: debounce(function () {
+            this.$refs['dataForm'].validate((valid) => {
+                if (!valid) {
+                    return false
+                }
+                this.$http[!this.dataForm.id ? 'post' : 'put'](!this.dataForm.id ? '/app-user/knightpionner/save' : '/app-user/knightpionner/', this.dataForm).then(({ data: res }) => {
+                    if (res.code !== 0) {
+                        return this.$message.error(res.msg)
+                    }
+                    this.$message({
+                        message: this.$t('prompt.success'),
+                        type: 'success',
+                        duration: 500,
+                        onClose: () => {
+                            this.visible = false
+                            this.$emit('refreshDataList')
+                        }
+                    })
+                }).catch(() => { })
+            })
+        }, 1000, { 'leading': true, 'trailing': false })
+    }
+}
+</script>
+<style textarea="javascript">
+.el-input {
+    width: 81% !important;
+}
+
+.el-col-12 {
+    width: 45% !important;
+}
+
+.el-cascader {
+    width: 100% !important;
+}
+</style>
+  

src/views/modules/user/gridForce-detail.vue

@@ -0,0 +1,63 @@
+<template>
+    <el-dialog :visible.sync="visible" title="红色尖兵详情" :close-on-click-modal="false" :close-on-press-escape="false">
+      <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
+        :label-width="$i18n.locale === 'en-US' ? '120px' : '180px'">
+        <el-form-item label="姓名" prop="name" v-if="dataForm.name">
+          <span>{{ dataForm.name }}</span>
+        </el-form-item>
+        <el-form-item label="自由职业者" prop="freelance">
+          <span v-if="dataForm.freelance === 0">否</span>
+          <span v-if="dataForm.freelance === 1">是</span>
+        </el-form-item>
+        <el-form-item label="所属社区" prop="allDeptIds" v-if="dataForm.allDeptIds">
+          <span>{{ dataForm.parentDeptNames }}</span>
+        </el-form-item>
+        
+      </el-form>
+      <template slot="footer">
+        <el-button @click="visible = false" type="primary">{{ $t('confirm') }}</el-button>
+      </template>
+    </el-dialog>
+  </template>
+    
+  <script>
+  export default {
+    data() {
+      return {
+        visible: false,
+        dataForm: {
+             id: '',
+             name: '',
+             sex:'',
+             post:'',
+             mobile: '',
+             allDeptIds: [],
+        }
+      }
+    },
+    methods: {
+      init() {
+        this.visible = true
+        this.$nextTick(() => {
+          this.$refs['dataForm'].resetFields()
+          if (this.dataForm.id) {
+            this.getInfo()
+          }
+        })
+      },
+      // 获取信息
+      getInfo() {
+        this.$http.get(`/app-user/redspearhead/${this.dataForm.id}`).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data
+          }
+        }).catch(() => { })
+      }
+    }
+  }
+  </script>
+    

src/views/modules/user/gridForce.vue

@@ -0,0 +1,149 @@
+<template>
+    <el-card shadow="never" class="aui-card--fill">
+      <div class="mod-__reportparty}">
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+          <el-form-item label="姓名" label-width="70px">
+            <el-input v-model="dataForm.name" placeholder="请输入姓名" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="证件号码" label-width="70px">
+            <el-input v-model="dataForm.idCard" placeholder="请输入证件号码" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="联系电话" label-width="70px">
+            <el-input v-model="dataForm.mobile" placeholder="请输入联系电话" clearable></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+          </el-form-item>
+        </el-form>
+        <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
+          style="width: 100%;">
+          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+          <el-table-column prop="name" label="姓名" header-align="center" align="center"></el-table-column>
+          <el-table-column prop="idCard" label="证件号码" header-align="center" align="center"></el-table-column>
+          <el-table-column prop="mobile" label="联系电话" header-align="center" align="center"></el-table-column>
+          <el-table-column prop="parentDeptNames" label="所属社区" header-align="center" align="center"></el-table-column>
+         
+          <el-table-column prop="owners" label="职务" header-align="center" align="center"
+            :formatter="formatValue"></el-table-column>
+          <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+            <template slot-scope="scope">
+              <!-- <el-button type="text" size="small" @click="examine(scope.row)">{{$t(scope.row.status===0)? '审核' : '驳回' }}</el-button> -->
+              <el-button type="text" size="mini" @click="detail(scope.row.id)" class="custom-table-button-default">查看</el-button>
+              <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+              <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+        <!-- 弹窗, 新增 / 修改 审核-->
+        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+        <reportParty-detail v-if="detailVisible" ref="reportPartyDetail" @refreshDataList="getDataList"></reportParty-detail>
+        <!-- <reportparty-examine ref="reportPartyExamine" @refreshDataList="getDataList"></reportparty-examine> -->
+      </div>
+    </el-card>
+  </template>
+  
+  <script>
+  import mixinViewModule from '@/mixins/view-module'
+  import AddOrUpdate from './gridForce-add-or-update'
+  import Flowparty from './flowparty'
+  import ReportPartyDetail from './gridForce-detail'
+  // import ReportPartyExamine from './reportparty-examine'
+  export default {
+    mixins: [mixinViewModule],
+    data () {
+      return {
+        mixinViewModuleOptions: {
+          getDataListURL: '',
+          getDataListIsPage: true,
+          deleteURL: '',
+          deleteIsBatch: true
+        },
+        dataForm: {
+            id: '',
+            name: '',
+            idCard: '',
+            mobile: '',
+            freelance: '',
+            workUnit: '',
+            partyName: '',
+            workAddr: '',
+            status: '',
+            deptId: '',
+            allDeptIds: []
+          },
+        detailVisible: false,
+        regOptions: [{
+          value: 0,
+          label: '否'
+        }, {
+          value: 1,
+          label: '是'
+        }
+        ]
+      }
+    },
+    components: {
+      AddOrUpdate,
+      Flowparty,
+      ReportPartyDetail
+  },
+    methods: {
+      formatValue (value) {
+        if (value === 0) {
+          return '否'
+        } else {
+          return '是'
+        }
+      },
+      // 审核驳回
+      examine (row) {
+        console.log(row);
+        row.status = row.status === 0 ? 1 : 0
+        const data = {
+          id: row.id,
+          status: row.status,
+          allDeptIds: row.allDeptIds
+        }
+        this.$http['put']('/app-user/reportparty/', data).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.getDataList()
+            }
+          })
+        }).catch(() => { })
+      },
+      detail (userId) {
+        this.detailVisible = true
+        this.$nextTick(() => {
+          this.$refs.reportPartyDetail.dataForm.id = userId
+          this.$refs.reportPartyDetail.init()
+        })
+      },
+      formatStatus (row) {
+        if(row.status == 0 ){
+          return '未审核'
+        }else{
+          return '已审核'
+        }
+      }
+    }
+  }
+  </script>
+