人员管理页面开发

2021-11-08 10:31:34 +08:00 · 2021-11-08 10:31:34 +08:00 · 224e6e3047
parent 2da6abb98e
commit 224e6e3047
5 changed files with 233 additions and 45 deletions
--- a/src/views/person/PersonForm.vue
+++ b/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) => {
+        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
--- a/src/views/person/PersonList.vue
+++ b/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
@ -126,7 +128,7 @@
    data () {
      return {
        // 查询参数
-        queryParam: {isAdmin: 2},
+        queryParam: { isAdmin: 2 },
        // 表头
        columns: [
          {
@ -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)
@ -268,10 +271,10 @@
      selectOrg (orgData) {
        this.$confirm({
          title: '提示',
-          content: '确认转移部门至'+ orgData.name +'吗',
+          content: '确认转移部门至' + orgData.name + '吗',
          onOk: () => {
            const paramIds = this.selectedRowKeys.join(',')
-            const param = { ids: paramIds,targetOrgId: orgData.id }
+            const param = { ids: paramIds, targetOrgId: orgData.id }
            personTransferOrg(param).then((res) => {
              if (res.code === 200) {
                this.$message.success('操作成功')
@ -313,6 +316,12 @@
          }
        })
      },
+      personRegister () {
+        this.$router.push({
+          path: '/person/personRegister',
+          query: { orgId: this.orgId }
+        })
+      },
      /**
       * 点击左侧机构树查询列表
       */
@ -320,12 +329,13 @@
        this.queryParam = {
          'orgId': e.toString()
        }
+        this.orgId = e.toString()
        this.$refs.table.refresh(true)
      },
      handleOk () {
        this.$refs.table.refresh()
      },
-      onRadioChange(e) {
+      onRadioChange (e) {
        this.queryParam.isAdmin = e.target.value
        this.$refs.table.refresh(true)
      },
--- a/src/views/person/PersonRegister.vue
+++ b/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>
--- a/src/views/sys/dictionary/DictionaryList.vue
+++ b/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"
--- a/src/views/sys/dictionaryItem/DictionaryItemList.vue
+++ b/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()