1.图片上传组件封装

2.人员管理功能开发

src/components/ImageUpload/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="clearfix">
+    <a-upload
+      list-type="picture-card"
+      :multiple="false"
+      :file-list="fileList"
+      :before-upload="beforeUpload"
+      :preview-file="previewFile"
+      :remove="handleRemove"
+      @preview="handlePreview">
+      <div v-if="fileList.length < 1">
+        <a-icon type="plus" />
+        <div class="ant-upload-text">上传</div>
+      </div>
+    </a-upload>
+    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+      <img alt="example" style="width: 100%" :src="previewImage" />
+    </a-modal>
+  </div>
+</template>
+<script>
+import Upload from 'ant-design-vue/lib/upload'
+import 'ant-design-vue/lib/upload/style'
+import { ossUpload } from '@/api/sys/oss'
+import axios from 'axios'
+import storage from 'store'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+// function getBase64(file) {
+//   return new Promise((resolve, reject) => {
+//     const reader = new FileReader()
+//     reader.readAsDataURL(file)
+//     reader.onload = () => resolve(reader.result)
+//     reader.onerror = error => reject(error)
+//   })
+// }
+export default {
+  components: {
+    [Upload.name]: Upload
+  },
+  props: {
+    sourceId: {
+      type: String,
+      default: ''
+    },
+    defaultList: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      uploading: false,
+      fileList: [],
+      previewVisible: false,
+      previewImage: ''
+    }
+  },
+  methods: {
+    previewFile (file) {
+      console.log(file)
+    },
+    clear () {
+      this.fileList = []
+    },
+    flush () {
+      this.clear()
+      this.defaultList.forEach((file, index) => {
+        this.fileList.push({
+            uid: index,
+            name: 'image.png',
+            status: 'done',
+            url: file
+        })
+      })
+    },
+    handleRemove (file) {
+      const index = this.fileList.indexOf(file)
+      const newFileList = this.fileList.slice()
+      newFileList.splice(index, 1)
+      this.fileList = newFileList
+    },
+    handleCancel () {
+      this.previewVisible = false
+    },
+    beforeUpload (file) {
+      this.fileList = [...this.fileList, file]
+      return false
+    },
+    async handlePreview (file) {
+      console.log(file)
+      this.previewImage = file.url
+      this.previewVisible = true
+    },
+    submitUpload () {
+      return new Promise((resolve, reject) => {
+        const { fileList } = this
+        if (fileList.length === 0) {
+          resolve({})
+        } else {
+          const data = new FormData()
+          data.append('file', fileList[0])
+          data.append('sourceId', this.sourceId)
+
+          const header = {}
+          header['Content-Type'] = 'multipart/form-data'
+          header[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)
+
+          axios.post(ossUpload(), data, { headers: header }).then((res) => {
+            if (res.data.code === 200) {
+              resolve(res.data.url)
+              this.uploading = false
+            } else {
+              this.$message.error(res.data.msg)
+              this.uploading = false
+            }
+          }, (err) => {
+            reject(err)
+            this.uploading = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+/* you can make up upload button and sample style by using stylesheets */
+/* .ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}
+.ant-upload-list-picture-card .ant-upload-list-item{
+  width: 90px;
+  height: 90px;
+}
+.ant-upload.ant-upload-select-picture-card{
+  width: 90px;
+  height: 90px;
+} */
+</style>

src/components/index.js

@@ -26,6 +26,7 @@ import StandardFormRow from '@/components/StandardFormRow'
 import ArticleListContent from '@/components/ArticleListContent'
 
 import Dialog from '@/components/Dialog'
+import ImageUpload from '@/components/ImageUpload'
 import SearchCom from '@/components/SearchCom'
 import orgTree from '@/components/OrgTree/Index'
 
@@ -55,6 +56,7 @@ export {
   ArticleListContent,
 
   Dialog,
+  ImageUpload,
   SearchCom,
   orgTree
 }

src/views/org/OrgForm.vue

@@ -20,12 +20,12 @@
         </a-form-item>
 
         <a-form-item
-          label="机构名称"
+          label="名称"
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
           has-feedback
         >
-          <a-input placeholder="请输入机构名称" v-decorator="['name', {rules: [{required: true, message: '请输入机构名称！'}]}]" />
+          <a-input placeholder="请输入名称" v-decorator="['name', {rules: [{required: true, message: '请输入名称！'}]}]" />
         </a-form-item>
 
         <a-form-item
@@ -38,17 +38,17 @@
         </a-form-item>
 
         <a-form-item
-          label="上级机构"
+          label="上级"
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
           has-feedback
         >
           <a-tree-select
-            v-decorator="['pid', {rules: [{ required: true, message: '请选择上级机构！' }]}]"
+            v-decorator="['pid', {rules: [{ required: true, message: '请选择上级！' }]}]"
             style="width: 100%"
             :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
             :treeData="orgTree"
-            placeholder="请选择上级机构"
+            placeholder="请选择上级"
             :replaceFields="replaceFields"
           >
             <span slot="title" slot-scope="{ id }">{{ id }}
@@ -62,7 +62,7 @@
           label="类型"
         >
           <a-radio-group v-decorator="['type',{rules: [{ required: true, message: '请选择类型！' }]}]" >
-            <a-radio :value="1" checked>单位</a-radio>
+            <a-radio :value="1" :checked="true">{{ orgType === 1 ? '单位' : '项目' }}</a-radio>
             <a-radio :value="2">部门</a-radio>
           </a-radio-group>
         </a-form-item>
@@ -107,7 +107,7 @@
           sm: { span: 15 }
         },
         orgTree: [],
-        modalTitle: '新增机构',
+        modalTitle: '新增',
         visible: false,
         confirmLoading: false,
         formLoading: true,
@@ -117,20 +117,23 @@
           key: 'id',
           value: 'id'
         },
-        form: this.$form.createForm(this)
+        form: this.$form.createForm(this),
+        orgType: 1
       }
     },
     methods: {
       // 新增初始化方法
-      add () {
+      add (orgType) {
         this.visible = true
-        this.modalTitle = '新增机构'
+        this.modalTitle = '新增'
+        this.orgType = orgType
         this.getOrgTree()
       },
       // 编辑初始化方法
       edit (record) {
         this.visible = true
-        this.modalTitle = '编辑机构'
+        this.modalTitle = '编辑'
+        this.orgType = record.orgType
         this.getOrgTree()
         setTimeout(() => {
           this.form.setFieldsValue(
@@ -150,15 +153,22 @@
        * 获取机构树，并加载于表单中
        */
       getOrgTree () {
-        orgList().then((res) => {
+        const params = { orgType: this.orgType }
+        orgList(params).then((res) => {
           this.formLoading = false
           if (!res.code === 200 || !res.data.length) {
-            this.orgTree = []
+            this.orgTree = [{
+              'id': '0',
+              'parentId': '0',
+              'name': '顶级',
+              'value': '0',
+              'pid': '0'
+            }]
             return
           }
           const orgList = listToTree(res.data, [], rootParentId)
           this.orgTree = [{
-            'id': '-1',
+            'id': '0',
             'parentId': '0',
             'name': '顶级',
             'value': '0',
@@ -174,6 +184,7 @@
         validateFields((errors, values) => {
           if (!errors) {
             if (values.id) {
+              values.orgType = this.orgType
               orgEdit(values).then((res) => {
                 if (res.code === 200) {
                   this.$message.success('编辑成功')
@@ -188,6 +199,7 @@
                 this.confirmLoading = false
               })
             } else {
+              values.orgType = this.orgType
               orgAdd(values).then((res) => {
                 if (res.code === 200) {
                   this.$message.success('新增成功')

src/views/org/OrgList.vue

@@ -1,9 +1,9 @@
 <template>
   <a-card :bordered="false">
-    <a-tabs default-active-key="1" >
+    <a-tabs default-active-key="1" @change="tabsCallback">
-      <a-tab-pane key="1" tab="单位部门信息" @change="tabsCallback">
+      <a-tab-pane key="1" tab="单位部门信息">
         <div class="table-operator">
-          <a-button @click="$refs.orgForm.add()" icon="plus" type="primary" v-if="hasPerm('sys:org:add')">新增机构</a-button>
+          <a-button @click="$refs.orgForm.add(1)" icon="plus" type="primary" v-if="hasPerm('sys:org:add')">新增机构</a-button>
         </div>
 
         <s-table
@@ -25,9 +25,9 @@
         </s-table>
         <org-form ref="orgForm" @ok="handleOk" />
       </a-tab-pane>
-      <a-tab-pane key="2" tab="项目工程信息" @change="tabsCallback">
+      <a-tab-pane key="2" tab="项目工程信息" >
         <div class="table-operator">
-          <a-button @click="$refs.orgForm.add()" icon="plus" type="primary" v-if="hasPerm('sys:org:add')">新增项目</a-button>
+          <a-button @click="$refs.orgForm.add(2)" icon="plus" type="primary" v-if="hasPerm('sys:org:add')">新增项目</a-button>
         </div>
 
         <s-table
@@ -67,7 +67,7 @@
     data () {
       return {
         // 查询参数
-        queryParam: {},
+        queryParam: { orgType: 1 },
         expandedRowKeys: [],
         // 表头
         columns: [
@@ -114,8 +114,12 @@
     methods: {
       tabsCallback (key) {
         if (key === '1') {
+          this.queryParam.orgType = 1
+          this.$refs.table.refresh(true)
         }
         if (key === '2') {
+          this.queryParam.orgType = 2
+          this.$refs.table.refresh(true)
         }
       },
       /**

src/views/person/PersonDetail.vue

@@ -4,6 +4,7 @@
     :width="900"
     :visible="visible"
     :confirmLoading="confirmLoading"
+    :destroyOnClose="true"
     @ok="handleCancel"
     @cancel="handleCancel"
   >
@@ -26,7 +27,7 @@
               :wrapperCol="wrapperCol"
               has-feedback
             >
-              <a-input placeholder="请输入用户名" readOnly  v-decorator="['userName', {rules: [{required: true, min: 5, message: '请输入至少五个字符的账号！'}]}]" />
+              <a-input placeholder="请输入用户名" readOnly v-decorator="['userName', {rules: [{required: true, min: 5, message: '请输入至少五个字符的账号！'}]}]" />
             </a-form-item>
           </a-form>
         </a-col>
@@ -38,7 +39,7 @@
               :wrapperCol="wrapperCol"
               has-feedback
             >
-              <a-input placeholder="请输入姓名" readOnly  v-decorator="['name', {rules: [{required: true, message: '请输入姓名！'}]}]" />
+              <a-input placeholder="请输入姓名" readOnly v-decorator="['name', {rules: [{required: true, message: '请输入姓名！'}]}]" />
             </a-form-item>
           </a-form>
         </a-col>
@@ -77,7 +78,7 @@
               :labelCol="labelCol"
               :wrapperCol="wrapperCol"
             >
-              <a-radio-group disabled  v-decorator="['sex',{rules: [{ required: true, message: '请选择性别！' }]}]" >
+              <a-radio-group disabled v-decorator="['sex',{rules: [{ required: true, message: '请选择性别！' }]}]" >
                 <a-radio :value="1">男</a-radio>
                 <a-radio :value="2">女</a-radio>
               </a-radio-group>
@@ -92,7 +93,7 @@
               :wrapperCol="wrapperCol"
               has-feedback
             >
-              <a-input placeholder="请输入手机号" readOnly  v-decorator="['phone',{rules: [{ required: true, message: '请输入手机号！' }]}]" />
+              <a-input placeholder="请输入手机号" readOnly v-decorator="['phone',{rules: [{ required: true, message: '请输入手机号！' }]}]" />
             </a-form-item>
           </a-form>
         </a-col>
@@ -106,7 +107,7 @@
               :wrapperCol="{span: 20}"
               has-feedback
             >
-              <a-select style="width: 100%"  disabled placeholder="请选择岗位" v-decorator="['jobs',{rules: [{ required: true, message: '请选择岗位！' }]}]" >
+              <a-select style="width: 100%" disabled placeholder="请选择岗位" v-decorator="['jobs',{rules: [{ required: true, message: '请选择岗位！' }]}]" >
                 <a-select-option v-for="(item,index) in jobsData" :key="index" :value="item.value" >{{ item.name }}</a-select-option>
               </a-select>
             </a-form-item>
@@ -169,7 +170,7 @@
               :wrapperCol="wrapperCol"
               has-feedback
             >
-              <a-input readOnly  v-decorator="['orgName',{rules: [{ required: true, message: '请选择机构！' }]}]" />
+              <a-input readOnly v-decorator="['orgName',{rules: [{ required: true, message: '请选择机构！' }]}]" />
             </a-form-item>
             <a-form-item style="display: none;">
               <a-input v-decorator="['orgId']" />
@@ -178,28 +179,51 @@
         </a-col>
       </a-row>
 
+      <a-divider orientation="left">身份证信息</a-divider>
+      <a-row :gutter="24">
+        <a-col :md="12" :sm="24">
+          <a-form :form="form">
+            <a-form-item
+              label="身份证正面"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol">
+              <img alt="image" :src="idPhotoFace" style="width: 50%;" v-if="idPhotoFace"/>
+            </a-form-item>
+          </a-form>
+        </a-col>
+        <a-col :md="12" :sm="24">
+          <a-form :form="form">
+            <a-form-item
+              label="身份证反面"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol">
+              <img alt="image" :src="idPhotoBack" style="width: 50%;" v-if="idPhotoBack" />
+            </a-form-item>
+          </a-form>
+        </a-col>
+      </a-row>
+
       <a-divider orientation="left">变动信息</a-divider>
       <s-table
-          ref="table"
+        ref="table"
-          :columns="columns"
+        :columns="columns"
-          :data="loadData"
+        :data="loadData"
-          :rowKey="(record) => record.id"
+        :rowKey="(record) => record.id"
-          :pagination="{ pageSize: 5 }"
+        :pagination="{ pageSize: 5 }"
-          :showSizeChanger="false"
+        :showSizeChanger="false"
-        >
+      >
-          <template slot="createTime" slot-scope="text, record">
+        <template slot="createTime" slot-scope="text, record">
-            {{ record.createTime | moment('YYYY-MM-DD') }}
+          {{ record.createTime | moment('YYYY-MM-DD') }}
-          </template>
+        </template>
-      </s-table>  
+      </s-table>
     </a-spin>
 
-
   </a-modal>
 </template>
 
 <script>
   import { STable } from '@/components'
-  import {  personGet, personChangeLogPage } from '@/api/person/person'
+  import { personGet, personChangeLogPage } from '@/api/person/person'
   import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
   export default {
     components: {
@@ -223,8 +247,10 @@
         workTypeData: [],
         degreeData: [],
         typeData: [],
+        idPhotoFace: '',
+        idPhotoBack: '',
         // 查询参数
-        queryParam: {  },
+        queryParam: { },
         // 表头
         columns: [
           {
@@ -258,15 +284,15 @@
         this.confirmLoading = true
         this.visible = true
 
+        console.log(record)
         this.queryParam.userId = record.userId
         this.queryParam.orgId = record.orgId
 
-
         // 基本信息加入表单
         personGet({ id: record.id }).then((res) => {
          if (res.code === 200) {
            const data = res.data
-            
+
            // 默认选中的多选框
            const type = data.type.split(',')
            const typeIntArr = []// 保存转换后的整型字符串
@@ -275,7 +301,8 @@
            })
            this.form.getFieldDecorator('type', { valuePropName: 'checked', initialValue: typeIntArr })
 
-          console.log(data)
+           this.idPhotoFace = data.idPhotoFace
+           this.idPhotoBack = data.idPhotoBack
            this.form.setFieldsValue(
              {
                id: data.id,
@@ -301,7 +328,7 @@
         })
         this.confirmLoading = false
       },
-      
+
       /**
        * 获取字典数据
        */
@@ -365,4 +392,4 @@
       }
     }
   }
-</script>
+</script>

src/views/person/PersonForm.vue

@@ -179,6 +179,29 @@
       </a-row>
 
       <a-divider orientation="left">上传身份证</a-divider>
+      <a-row :gutter="24">
+        <a-col :md="12" :sm="24">
+          <a-form :form="form">
+            <a-form-item
+              label="身份证正面"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol">
+              <image-upload ref="upload" sourceId="idPhoto" :defaultList="fileList"></image-upload>
+
+            </a-form-item>
+          </a-form>
+        </a-col>
+        <a-col :md="12" :sm="24">
+          <a-form :form="form">
+            <a-form-item
+              label="身份证反面"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol">
+              <image-upload ref="upload1" sourceId="idPhoto" :defaultList="fileList2"></image-upload>
+            </a-form-item>
+          </a-form>
+        </a-col>
+      </a-row>
 
     </a-spin>
 
@@ -191,9 +214,11 @@
   import { personAddOrUpdate, personGet } from '@/api/person/person'
   import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
   import OrgTree from '../org/OrgTree'
+  import ImageUpload from '@/components/ImageUpload'
   export default {
     components: {
-      OrgTree
+      OrgTree,
+      ImageUpload
     },
     data () {
       return {
@@ -213,7 +238,9 @@
         jobsData: [],
         workTypeData: [],
         degreeData: [],
-        typeData: []
+        typeData: [],
+        fileList: [],
+        fileList2: []
       }
     },
     mounted () {
@@ -262,7 +289,18 @@
            })
            this.form.getFieldDecorator('type', { valuePropName: 'checked', initialValue: typeIntArr })
 
-          console.log(data)
+          if (data.idPhotoFace) {
+            this.fileList.push(data.idPhotoFace)
+          }
+          if (data.idPhotoBack) {
+            this.fileList2.push(data.idPhotoBack)
+          }
+          this.$nextTick(() => {
+            this.$refs.upload.flush()
+          })
+          this.$nextTick(() => {
+            this.$refs.upload1.flush()
+          })
            this.form.setFieldsValue(
              {
                id: data.id,
@@ -317,18 +355,34 @@
         validateFields((errors, values) => {
           if (!errors) {
             values.type = values.type.join(',')
-            console.log(values)
+
-            personAddOrUpdate(values).then((res) => {
+            // 先上传身份证照片
-              this.confirmLoading = false
+            this.$refs.upload.submitUpload().then((url) => {
-              if (res.code === 200) {
+              if (url.length > 0) {
-                this.$message.success('操作成功')
+                values.idPhotoFace = url
-                this.$emit('ok', values)
-                this.handleCancel()
-              } else {
-                this.$message.error('操作失败：' + res.msg)
               }
-            }).finally((res) => {
+              this.$refs.upload1.submitUpload().then((url1) => {
-              this.confirmLoading = false
+                if (url1.length > 0) values.idPhotoBack = url1
+
+                // 上传之后调用人员增改方法
+                personAddOrUpdate(values).then((res) => {
+                  this.confirmLoading = false
+                  if (res.code === 200) {
+                    this.$message.success('操作成功')
+                    this.$emit('ok', values)
+
+                    this.handleCancel()
+                  } else {
+                    this.$message.error('操作失败：' + res.msg)
+                  }
+                }).finally((res) => {
+                  this.confirmLoading = false
+                })
+              }, (err) => {
+                this.$message.error(err)
+              })
+            }, (err) => {
+              this.$message.error(err)
             })
           } else {
             this.confirmLoading = false
@@ -349,7 +403,6 @@
         if (parseInt(idCardNo.substr(16, 1)) % 2 === 1) {
           this.form.setFieldsValue({ sex: 1 })
         } else {
-          console.log('sex 2')
           this.form.setFieldsValue({ sex: 2 })
         }
 
@@ -365,7 +418,6 @@
         if (monthNow < monthBirth || (monthNow === monthBirth && dayNow < dayBirth)) {
           age--
         }
-        console.log(age)
         // 得到年龄
         this.form.setFieldsValue({ age })
       },
@@ -373,7 +425,6 @@
         this.$refs.orgModal.loadOrg()
       },
       selectOrg (orgData) {
-        console.log(orgData)
         this.form.setFieldsValue({ orgId: orgData.id })
         this.form.setFieldsValue({ orgName: orgData.name })
       },

src/views/person/PersonList.vue

@@ -14,6 +14,10 @@
         <div v-else>
           <a-empty :image="simpleImage" />
         </div>
+
+        <a-button type="primary" @click="changeOrgType" style="display: block; margin: 10px auto;">
+          {{ orgType === 1 ? '切换到项目组' : '切换到人员管理' }}
+        </a-button>
       </a-card>
     </a-col>
     <a-col :md="19" :sm="24">
@@ -175,27 +179,12 @@
           key: 'id',
           value: 'id'
         },
-        orgId: ''
+        orgId: '',
+        orgType: 1
       }
     },
     created () {
-      /**
+      this.getOrgTree()
-       * 获取到机构树，展开顶级下树节点，考虑到后期数据量变大，不建议全部展开
-       */
-      orgList().then(res => {
-        this.treeLoading = false
-        if (!res.code === 200 || !res.data.length) {
-          return
-        }
-        this.orgTree = listToTree(res.data, [], rootParentId)
-        this.orgId = this.orgTree[0].id
-        console.log(this.orgId)
-        for (var item of this.orgTree) {
-          if (item.pid === 0) {
-            this.defaultExpandedKeys.push(item.id)
-          }
-        }
-      })
 
       if (this.hasPerm('person:edit') || this.hasPerm('person:resetPwd') || this.hasPerm('person:del')) {
         this.columns.push({
@@ -207,6 +196,31 @@
       }
     },
     methods: {
+      /**
+       * 获取到机构树，展开顶级下树节点，考虑到后期数据量变大，不建议全部展开
+       */
+      async getOrgTree () {
+         await orgList({ orgType: this.orgType }).then(res => {
+          this.treeLoading = false
+          if (!res.code === 200 || !res.data.length) {
+            return
+          }
+          this.defaultExpandedKeys = []
+          this.orgTree = listToTree(res.data, [], rootParentId)
+          this.orgId = this.orgTree[0].id
+          for (var item of this.orgTree) {
+            if (item.pid === 0) {
+              this.defaultExpandedKeys.push(item.id)
+            }
+          }
+        })
+      },
+      async changeOrgType () {
+        this.orgType = this.orgType === 1 ? 2 : 1
+        await this.getOrgTree()
+        // 此处使用async和await 由于需要等待orgTree的返回 再往下依据结果继续执行
+        this.handleClick(this.orgId)
+      },
       /**
        * 重置密码
        */
@@ -326,9 +340,7 @@
        * 点击左侧机构树查询列表
        */
       handleClick (e) {
-        this.queryParam = {
+        this.queryParam.orgId = e.toString()
-          'orgId': e.toString()
-        }
         this.orgId = e.toString()
         this.$refs.table.refresh(true)
       },

src/views/person/PersonRegister.vue

@@ -85,7 +85,6 @@
         // 加载数据方法 必须为 Promise 对象
         loadData: parameter => {
           return personRegisterPage(Object.assign(parameter, this.queryParam)).then((res) => {
-            console.log(res)
             this.invitationCode = res.invitationCode
             return res
           })

src/views/sys/dictionaryItem/DictionaryItemList.vue

@@ -46,14 +46,13 @@
 
 <script>
 import { dictionaryItemPage, dictionaryItemDel } from '@/api/sys/dictionaryItem'
-import { STable, GoBack } from '@/components'
+import { STable } from '@/components'
 import DictionaryItemForm from './DictionaryItemForm'
 
 export default {
   name: 'DictionaryItemList',
   components: {
     STable,
-    GoBack,
     DictionaryItemForm
   },
   data () {