人员管理页面开发

src/views/person/PersonForm.vue

@@ -26,7 +26,7 @@
               :wrapperCol="wrapperCol"
               has-feedback
             >
-              <a-input placeholder="请输入用户名" v-decorator="['userName', {rules: [{required: true, min: 5, message: '请输入至少五个字符的账号！'}]}]" />
+              <a-input placeholder="请输入用户名" :disabled="registerDisabled" v-decorator="['userName', {rules: [{required: true, min: 5, message: '请输入至少五个字符的账号！'}]}]" />
             </a-form-item>
           </a-form>
         </a-col>
@@ -38,7 +38,7 @@
               :wrapperCol="wrapperCol"
               has-feedback
             >
-              <a-input placeholder="请输入姓名" v-decorator="['name', {rules: [{required: true, message: '请输入姓名！'}]}]" />
+              <a-input placeholder="请输入姓名" :disabled="registerDisabled" v-decorator="['name', {rules: [{required: true, message: '请输入姓名！'}]}]" />
             </a-form-item>
           </a-form>
         </a-col>
@@ -106,7 +106,9 @@
               :wrapperCol="{span: 20}"
               has-feedback
             >
-              <a-input v-decorator="['jobs',{rules: [{ required: true, message: '请输入岗位！' }]}]" />
+              <a-select style="width: 100%" 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>
           </a-form>
         </a-col>
@@ -120,7 +122,9 @@
               :wrapperCol="wrapperCol"
               has-feedback
             >
-              <a-input v-decorator="['workType',{rules: [{ required: true, message: '请输入工种！' }]}]" />
+              <a-select style="width: 100%" placeholder="请选择工种" v-decorator="['workType',{rules: [{ required: true, message: '请选择工种！' }]}]" >
+                <a-select-option v-for="(item,index) in workTypeData" :key="index" :value="item.value" >{{ item.name }}</a-select-option>
+              </a-select>
             </a-form-item>
           </a-form>
         </a-col>
@@ -132,7 +136,9 @@
               :wrapperCol="wrapperCol"
               has-feedback
             >
-              <a-input v-decorator="['degreeId',{rules: [{ required: true, message: '请输入工种！' }]}]" />
+              <a-select style="width: 100%" placeholder="请选择学历" v-decorator="['degreeId',{rules: [{ required: true, message: '请选择学历！' }]}]" >
+                <a-select-option v-for="(item,index) in degreeData" :key="index" :value="item.value" >{{ item.name }}</a-select-option>
+              </a-select>
             </a-form-item>
           </a-form>
         </a-col>
@@ -146,20 +152,8 @@
               :wrapperCol="{span: 20}"
             >
               <a-checkbox-group v-decorator="['type',{rules: [{ required: true, message: '请选择人员类型！' }]}]">
-                <a-checkbox value="1" name="type">
-                  单位主要负责人
-                </a-checkbox>
-                <a-checkbox value="2" name="type">
-                  安全管理员
-                </a-checkbox>
-                <a-checkbox value="3" name="type">
-                  班组长
-                </a-checkbox>
-                <a-checkbox value="4" name="type">
-                  特种作业人员
-                </a-checkbox>
-                <a-checkbox value="5" name="type">
-                  其他
+                <a-checkbox name="type" v-for="(item,index) in typeData" :key="index" :value="item.value" >
+                  {{ item.name }}
                 </a-checkbox>
               </a-checkbox-group>
             </a-form-item>
@@ -175,7 +169,7 @@
               :wrapperCol="wrapperCol"
               has-feedback
             >
-              <a-input readOnly @click="openOrgTree" v-decorator="['orgName',{rules: [{ required: true, message: '请选择机构！' }]}]" />
+              <a-input readOnly @click="openOrgTree" :disabled="registerDisabled" v-decorator="['orgName',{rules: [{ required: true, message: '请选择机构！' }]}]" />
             </a-form-item>
             <a-form-item style="display: none;">
               <a-input v-decorator="['orgId']" />
@@ -183,6 +177,9 @@
           </a-form>
         </a-col>
       </a-row>
+
+      <a-divider orientation="left">上传身份证</a-divider>
+
     </a-spin>
 
     <org-tree @selectOrg="selectOrg($event)" ref="orgModal"/>
@@ -192,6 +189,7 @@
 
 <script>
   import { personAddOrUpdate, personGet } from '@/api/person/person'
+  import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
   import OrgTree from '../org/OrgTree'
   export default {
     components: {
@@ -210,28 +208,61 @@
         modalTitle: '新增人员',
         visible: false,
         confirmLoading: false,
-        form: this.$form.createForm(this)
+        registerDisabled: false,
+        form: this.$form.createForm(this),
+        jobsData: [],
+        workTypeData: [],
+        degreeData: [],
+        typeData: []
       }
     },
+    mounted () {
+      this.dictionaryDropDown()
+    },
     methods: {
-      // 新增初始化方法
-      add () {
+      // 注册信息编辑 新增人员初始化方法
+      registerEdit (record) {
         this.modalTitle = '新增人员'
+        this.confirmLoading = true
         this.visible = true
+
+        this.registerDisabled = true
+        setTimeout(() => {
+           // 基本信息加入表单
+           this.form.setFieldsValue(
+             {
+               name: record.name,
+               userName: record.userName,
+               phone: record.phone,
+               orgId: record.orgId,
+               orgName: record.orgName
+             }
+           )
+        }, 100)
+
+        this.confirmLoading = false
       },
       // 编辑初始化方法
       edit (record) {
         this.modalTitle = '编辑人员'
         this.confirmLoading = true
         this.visible = true
+
+        this.registerDisabled = true
+
         // 基本信息加入表单
         personGet({ id: record.id }).then((res) => {
          if (res.code === 200) {
            const data = res.data
            // 默认选中的多选框
            const type = data.type.split(',')
-           this.form.getFieldDecorator('type', { valuePropName: 'checked', initialValue: type })
+           const typeIntArr = []// 保存转换后的整型字符串
+           type.forEach(item => {
+               typeIntArr.push(+item)
+           })
+           this.form.getFieldDecorator('type', { valuePropName: 'checked', initialValue: typeIntArr })
 
+          console.log(data)
            this.form.setFieldsValue(
              {
                id: data.id,
@@ -242,8 +273,8 @@
                // age: data.age,
                // sex: data.sex,
                phone: data.phone,
-               jobs: data.jobs,
-               workType: data.workType,
+               jobs: parseInt(data.jobs),
+               workType: parseInt(data.workType),
                degreeId: data.degreeId,
                orgId: data.orgId,
                orgName: data.orgName
@@ -257,6 +288,29 @@
         })
         this.confirmLoading = false
       },
+      /**
+       * 获取字典数据
+       */
+      dictionaryDropDown () {
+        this.formLoading = true
+        // 岗位
+        dictionaryDropDown({ dictionaryCode: '0002' }).then((res) => {
+          this.jobsData = res.data
+        })
+        // 工种
+        dictionaryDropDown({ dictionaryCode: '0003' }).then((res) => {
+          this.workTypeData = res.data
+        })
+        // 学历
+        dictionaryDropDown({ dictionaryCode: '0004' }).then((res) => {
+          this.degreeData = res.data
+        })
+        // 人员类型
+        dictionaryDropDown({ dictionaryCode: '0005' }).then((res) => {
+          this.typeData = res.data
+          this.formLoading = false
+        })
+      },
       handleSubmit () {
         const { form: { validateFields } } = this
         this.confirmLoading = true

src/views/person/PersonList.vue

@@ -41,7 +41,7 @@
       </a-card>
       <a-card :bordered="false">
         <div class="table-operator">
-          <a-button @click="$refs.personForm.add()" icon="plus" type="primary" v-if="hasPerm('person:add')">新增人员</a-button>
+          <a-button @click="personRegister" icon="plus" type="primary" v-if="hasPerm('person:add')">新增人员</a-button>
 
           <a-button @click="transfer" type="primary" v-if="hasPerm('person:transfer')">转移部门</a-button>
           <a-button @click="quit" type="primary" v-if="hasPerm('person:quit')">离职</a-button>
@@ -52,7 +52,7 @@
         </div>
 
         <div class="table-operator">
-          <div class='person-type'>
+          <div class="person-type">
             <a-radio-group v-model="queryParam.isAdmin" @change="onRadioChange">
               <a-radio :value="2">学员</a-radio>
               <a-radio :value="1">管理员</a-radio>
@@ -111,6 +111,7 @@
   import { orgList } from '@/api/org/org'
   import { listToTree } from '@/utils/util'
   import { personPage, personDel, personQuit, personTransferOrg, personSetAdmin, personResetPwd } from '@/api/person/person'
+  import PersonRegister from './PersonRegister'
   import PersonForm from './PersonForm'
   import PersonDetail from './PersonDetail'
   import OrgTree from '../org/OrgTree'
@@ -119,6 +120,7 @@
   export default {
     components: {
       STable,
+      PersonRegister,
       PersonForm,
       PersonDetail,
       OrgTree
@@ -172,14 +174,13 @@
           title: 'name',
           key: 'id',
           value: 'id'
-        }
+        },
+        orgId: ''
       }
     },
     created () {
       /**
        * 获取到机构树，展开顶级下树节点，考虑到后期数据量变大，不建议全部展开
-       完犊子，你的决策支撑写完了？可以的呢
-       我反正用不上，这两天发展党员还可以凑凑
        */
       orgList().then(res => {
         this.treeLoading = false
@@ -187,6 +188,8 @@
           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)
@@ -313,6 +316,12 @@
           }
         })
       },
+      personRegister () {
+        this.$router.push({
+          path: '/person/personRegister',
+          query: { orgId: this.orgId }
+        })
+      },
       /**
        * 点击左侧机构树查询列表
        */
@@ -320,6 +329,7 @@
         this.queryParam = {
           'orgId': e.toString()
         }
+        this.orgId = e.toString()
         this.$refs.table.refresh(true)
       },
       handleOk () {

src/views/person/PersonRegister.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <a-card :bordered="false" style="padding-bottom: 0px; margin-bottom: 10px ">
+      <div class="table-page-search-wrapper">
+        <h3>新增人员</h3>
+        <h3>单位邀请码：{{ invitationCode }}</h3>
+        <h3>邀请链接： www.anquanpeixun.com</h3>
+      </div>
+    </a-card>
+
+    <a-card :bordered="false">
+      <div class="table-operator">
+        <h3>最近注册人员</h3>
+      </div>
+
+      <s-table
+        ref="table"
+        :columns="columns"
+        :data="loadData"
+        :rowKey="(record) => record.id"
+      >
+        <template slot="createTime" slot-scope="text, record">
+          {{ record.createTime | moment('YYYY-MM-DD') }}
+        </template>
+
+        <span slot="action" slot-scope="text, record">
+          <a @click="$refs.personForm.registerEdit(record)">编辑</a>
+        </span>
+      </s-table>
+
+      <person-form ref="personForm" @ok="handleOk" />
+
+    </a-card>
+  </div>
+</template>
+<script>
+  import { STable } from '@/components'
+  import { personRegisterPage } from '@/api/person/personRegister'
+  import PersonForm from './PersonForm'
+
+  export default {
+    components: {
+      STable,
+      PersonForm
+    },
+    data () {
+      return {
+        invitationCode: '',
+        // 查询参数
+        queryParam: { orgId: this.$route.query.orgId },
+        // 表头
+        columns: [
+          {
+            title: '姓名',
+            dataIndex: 'name'
+          },
+          {
+            title: '用户名',
+            dataIndex: 'userName'
+          },
+          {
+            title: '单位信息',
+            dataIndex: 'unit'
+          },
+          {
+            title: '部门信息',
+            dataIndex: 'dept'
+          },
+          {
+            title: '手机号',
+            dataIndex: 'phone'
+          },
+          {
+            title: '注册时间',
+            dataIndex: 'createTime',
+            scopedSlots: { customRender: 'createTime' }
+          },
+          {
+            title: '操作',
+            width: '150px',
+            dataIndex: 'action',
+            scopedSlots: { customRender: 'action' }
+          }
+        ],
+        // 加载数据方法 必须为 Promise 对象
+        loadData: parameter => {
+          return personRegisterPage(Object.assign(parameter, this.queryParam)).then((res) => {
+            console.log(res)
+            this.invitationCode = res.invitationCode
+            return res
+          })
+        }
+      }
+    },
+    created () {
+    },
+    methods: {
+      handleOk () {
+        this.$refs.table.refresh()
+      }
+    }
+  }
+</script>
+<style lang="less">
+  .table-operator {
+    margin-bottom: 18px;
+  }
+  button {
+    margin-right: 8px;
+  }
+  .person-type span{
+    font-size: 24px;
+  }
+  h3 {
+    font-weight: 600;
+  }
+</style>

src/views/sys/dictionary/DictionaryList.vue

@@ -7,6 +7,8 @@
         @search="handleRefresh"
         @reset="() => {queryParam = {}, handleRefresh()}" >
       </SearchCom>
+
+      <a-button type="primary" @click="handleCreate">新增</a-button>
     </div>
     <s-table
       ref="table"

src/views/sys/dictionaryItem/DictionaryItemList.vue

@@ -46,13 +46,14 @@
 
 <script>
 import { dictionaryItemPage, dictionaryItemDel } from '@/api/sys/dictionaryItem'
-import { STable } from '@/components'
+import { STable, GoBack } from '@/components'
 import DictionaryItemForm from './DictionaryItemForm'
 
 export default {
   name: 'DictionaryItemList',
   components: {
     STable,
+    GoBack,
     DictionaryItemForm
   },
   data () {
@@ -91,6 +92,10 @@ export default {
     }
   },
   methods: {
+    goBack () {
+      // 返回到上一级
+      this.$router.push({ path: '/dictionary' })
+    },
     // 增
     handleCreate () {
       this.$refs.modal.add()