renyuan

hb_client/src/api/employee.js

@@ -1,6 +1,12 @@
 import request from '@/utils/request'
 
-
+export function getEmployeeList(query) {
+  return request({
+    url: '/hrm/employee/',
+    method: 'get',
+    params: query
+  })
+}
 export function getEmployee(id) {
   return request({
     url: `/hrm/employee/${id}/`,

hb_client/src/router/index.js

@@ -403,6 +403,36 @@ export const asyncRoutes = [
      
     ]
   },
+  
+  {
+    path: '/personnel',
+    component: Layout,
+    redirect: '/personnel/user',
+    name: 'personnel',
+    meta: { title: '人员管理', icon: 'example', perms: ['personnel_set'] },
+    children: [
+      {
+        path: 'user',
+        name: 'user',
+        component: () => import('@/views/personnel/user'),
+        meta: { title: '人员列表', icon: 'example', perms: ['user_manage'] }
+      },
+      {
+        path: 'personnel',
+        name: 'personnel',
+        component: () => import('@/views/personnel/user'),
+        meta: { title: '考勤列表', icon: 'example', perms: ['user_manage'] }
+      } ,{
+        path: 'userupdate',
+        name: 'userupdate',
+        component: () => import('@/views/personnel/userupdate'),
+        meta: { title: '人员信息详情', icon: 'employee', perms: ['employee_detail'] },
+        hidden: true
+      },
+     
+    ]
+  }
+  ,
   {
     path: '/inm',
     component: Layout,
@@ -544,13 +574,7 @@ export const asyncRoutes = [
         meta: { title: '用户管理', icon: 'user', perms: ['user_manage'] }
       }
       ,
-      {
-        path: 'userupdate',
-        name: 'userupdate',
-        component: () => import('@/views/system/userupdate'),
-        meta: { title: '人员信息详情', icon: 'employee', perms: ['employee_detail'] },
-        hidden: true
-      },
+     
       {
         path: 'organization',
         name: 'Organization',

hb_client/src/views/personnel/user.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="app-container">
+  
+        <el-card>
+          <div slot="header" class="clearfix">
+    <span>用户</span>
+  </div>
+        <div>
+        
+          <el-input
+            v-model="listQuery.name"
+            placeholder="姓名"
+            style="width: 200px;"
+            class="filter-item"
+            @keyup.enter.native="handleFilter"
+          />
+          <el-button
+            class="filter-item"
+            type="primary"
+            icon="el-icon-search"
+            @click="handleFilter"
+            size="small"
+          >搜索</el-button>
+          <el-button
+            class="filter-item"
+            type="primary"
+            icon="el-icon-refresh-left"
+            @click="resetFilter"
+            size="small"
+          >重置</el-button>
+        </div>
+      
+        <el-table
+          v-loading="listLoading"
+          :data="userList.results"
+          style="width: 100%;margin-top:6px;"
+          highlight-current-row
+          row-key="id"
+          height="100"
+          stripe
+          border
+          v-el-height-adaptive-table="{bottomOffset: 50}"
+        >
+          <el-table-column type="index" width="50" />
+           <el-table-column align="center" label="工号">
+            <template slot-scope="scope">{{ scope.row.number }}</template>
+          </el-table-column>
+          <el-table-column align="center" label="姓名">
+            <template slot-scope="scope">{{ scope.row.name }}</template>
+          </el-table-column>
+          <el-table-column align="header-center" label="照片">
+            <template slot-scope="scope"> <img :src="scope.row.photo" min-width="70" height="70"/></template>
+          </el-table-column>
+            <el-table-column align="header-center" label="电子签名">
+            <template slot-scope="scope"> <img :src="scope.row.signature" min-width="70" height="40"/></template>
+          </el-table-column>
+          <el-table-column align="header-center" label="部门">
+            <template
+              v-if="scope.row.dept_"
+              slot-scope="scope"
+            >{{ scope.row.dept_.name }}</template>
+          </el-table-column>
+         
+          <el-table-column align="center" label="操作">
+            <template slot-scope="scope">
+              <el-link
+                v-if="!scope.row.is_superuser"
+                :disabled="!checkPermission(['user_update'])"
+                type="primary"
+                size="small"
+             
+                @click="handleEdit(scope)"
+              >编辑</el-link>
+              <el-link
+                v-if="!scope.row.is_superuser"
+                :disabled="!checkPermission(['user_delete'])"
+                type="danger"
+                size="small"
+              
+                @click="handleDelete(scope)"
+              >删除</el-link>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="userList.count>0"
+          :total="userList.count"
+          :page.sync="listQuery.page"
+          :limit.sync="listQuery.page_size"
+          @pagination="getList"
+        />
+        </el-card>
+    
+
+  </div>
+</template>
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+}
+.avatar {
+  width: 100px;
+  height: 100px;
+  display: block;
+}
+</style>
+<script>
+import { getUserList, createUser, deleteUser, updateUser } from "@/api/user";
+
+import { getEmployeeList, } from "@/api/employee";
+import { getOrgAll } from "@/api/org"
+import { getRoleAll } from "@/api/role"
+import { genTree } from "@/utils"
+import checkPermission from "@/utils/permission"
+import { upUrl, upHeaders } from "@/api/file"
+import Pagination from "@/components/Pagination" // secondary package based on el-pagination
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+const defaultUser = {
+  id: "",
+  name: "",
+  username: "",
+  dept: null,
+  avatar: "/media/default/avatar.png"
+};
+export default {
+  components: { Pagination, Treeselect },
+  data() {
+    return {
+      user: defaultUser,
+      upHeaders: upHeaders(),
+      upUrl: upUrl(),
+      userList: {count:0},
+      roles: [],
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        page_size: 20
+      },
+      enabledOptions: [
+        { key: "true", display_name: "激活" },
+        { key: "false", display_name: "禁用" }
+      ],
+      dialogVisible: false,
+      dialogType: "new",
+      rule1: {
+        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+        username: [{ required: true, message: "请输入账号", trigger: "change" }]
+        // password: [
+        //   { required: true, message: '请输入密码', trigger: 'change' }
+        // ],
+      },
+      filterOrgText: "",
+      treeLoding: false,
+      orgData: []
+    };
+  },
+  computed: {},
+  watch: {
+    filterOrgText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  created() {
+    this.getList();
+    this.getOrgAll();
+    this.getRoleAll();
+  },
+  methods: {
+    checkPermission,
+    handleAvatarSuccess(res, file) {
+        this.user.avatar = res.data.path
+    },
+    beforeAvatarUpload(file) {
+      const isLt2M = file.size / 1024 / 1024 < 0.5;
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 500KB!");
+      }
+      return isLt2M;
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    handleOrgClick(obj, node, vue) {
+      this.listQuery.page = 1;
+      this.listQuery.dept = obj.id;
+      this.getList();
+    },
+    getList() {
+      this.listLoading = true;
+      getEmployeeList(this.listQuery).then(response => {
+        if (response.data) {
+          this.userList = response.data
+        }
+        this.listLoading = false;
+      });
+    },
+    getOrgAll() {
+      this.treeLoding = true;
+      getOrgAll().then(response => {
+        this.orgData = genTree(response.data);
+        this.treeLoding = false;
+      });
+    },
+    getRoleAll() {
+      getRoleAll().then(response => {
+        this.roles = genTree(response.data);
+      });
+    },
+    resetFilter() {
+      this.listQuery = {
+        page: 1,
+        page_size: 20
+      };
+      this.getList();
+    },
+    handleFilter() {
+      this.listQuery.page = 1;
+      this.getList();
+    },
+  
+    handleEdit(scope) {
+      this.$router.push({name:"userupdate",params:{id:scope.row.id}})
+    },
+    handleDelete(scope) {
+      this.$confirm("确认删除?", "警告", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "error"
+      })
+        .then(async () => {
+          await deleteUser(scope.row.id);
+          this.userList.splice(scope.row.index, 1);
+          this.$message({
+            type: "success",
+            message: "成功删除!"
+          });
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    },
+   
+  }
+};
+</script>

hb_client/src/views/personnel/userupdate.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="app-container">
+     <el-card>
+    <el-row>
+      <el-col :span="4">
+        <div>基础信息</div>
+        <el-form label-width="60px">
+          <el-form-item label="姓名">{{userDate.name}}</el-form-item>
+          <el-form-item label="账户">{{userDate.username}}</el-form-item>
+           
+          <el-form-item label="角色">
+            <el-tag
+              v-for="(item, index) in userDate.roles_name"
+              :key="index"
+              style="margin:2px"
+            >{{item}}</el-tag>
+          </el-form-item>
+          <el-form-item label="手机">{{userDate.phone}}</el-form-item>
+        </el-form>
+      </el-col>
+      <el-col :span="20">
+        <div>详细信息</div>
+        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="工号" prop="number">
+                <el-input
+                  v-model="formData.number"
+                  placeholder="请输入编号"
+                  clearable
+                  :style="{width: '100%'}"
+                ></el-input>
+              </el-form-item>
+               <el-form-item label="学历" prop="qualification">
+                <el-input
+                  v-model="formData.qualification"
+                  placeholder="请输入学历"
+                  clearable
+                  :style="{width: '100%'}"
+                ></el-input>
+              </el-form-item>
+              
+            </el-col>
+           
+           
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="性别" prop="gender">
+                <el-select
+                  v-model="formData.gender"
+                  placeholder="请选择性别"
+                  clearable
+                  :style="{width: '100%'}"
+                >
+                  <el-option
+                    v-for="item in genderOptions"
+                    :key="item.key"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+              
+               <el-form-item label="在职状态" prop="job_state">
+                <el-select
+                  v-model="formData.job_state"
+                  placeholder="请选择在职状态"
+                  clearable
+                  :style="{width: '100%'}"
+                >
+                  <el-option
+                    v-for="item in jobstateOptions"
+                    :key="item.key"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+               <el-form-item label="出生年月" prop="birthday">
+          <el-date-picker
+            v-model="formData.birthday"
+            type="date"
+            placeholder="选择日期"
+            value-format="yyyy-MM-dd"
+            style="width:100%"
+          >
+          </el-date-picker>
+        </el-form-item>
+            </el-col>
+           
+          </el-row>
+          <el-row>
+          
+            <el-col :span="8">
+              <el-form-item label="身份证号" prop="id_number">
+                <el-input
+                  v-model="formData.id_number"
+                  placeholder="请输入身份证号"
+                  clearable
+                  :style="{width: '100%'}"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          
+          </el-row>
+         
+         
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="证件照" prop="photo">
+                <el-upload
+                  :action="upUrl"
+                  accept=".png, .jpeg, .jpg"
+                  :headers="upHeaders"
+                  class="avatar-uploader"
+                  :show-file-list="false"
+                  :on-success="handleSuccess"
+                  :before-upload="beforeUpload"
+                >
+                  <img v-if="formData.photo" :src="formData.photo" class="avatar" />
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+              </el-form-item>
+            </el-col>
+             </el-row>
+              <el-row>
+            <el-col :span="6">
+              <el-form-item label="签名图片" prop="signature">
+                <el-upload :action="upUrl" :headers="upHeaders" accept=".png, .jpeg, .jpg" :before-upload="beforeUpload" class="avatar-uploader"
+                  :show-file-list="false"
+                  :on-success="handleSuccess2"><img v-if="formData.signature" :src="formData.signature" class="avatar2" />
+                  <i v-else class="el-icon-plus avatar-uploader-icon2"></i></el-upload>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item size="large">
+            <el-button type="primary" @click="submitForm" >保存</el-button>
+            <el-button @click="goBack">返回</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+     </el-card>
+  </div>
+</template>
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 110px;
+  height: 140px;
+  line-height: 140px;
+  text-align: center;
+}
+.avatar {
+  width: 110px;
+  height: 140px;
+  display: block;
+}
+.avatar-uploader-icon2 {
+  font-size: 28px;
+  color: #8c939d;
+  width: 150px;
+  height: 90px;
+  line-height: 90px;
+  text-align: center;
+}
+.avatar2 {
+  width: 150px;
+  height: 90px;
+  display: block;
+}
+</style>
+<script>
+
+import { upUrl, upHeaders } from "@/api/file"
+import { genSignature } from "@/api/util"
+import { getUser } from "@/api/user";
+import { getEmployee, updateEmployee } from "@/api/employee";
+const defaultForm = {
+  user:{},
+};
+export default {
+  name: "Employeedetail",
+  components: {},
+  props: ["id"],
+  data() {
+    return {
+      upHeaders: upHeaders(),
+      upUrl: upUrl(),
+      formData: Object.assign({}, defaultForm),
+      userDate:[],
+      genderOptions: [
+        { value: "男", label: "男" },
+        { value: "女", label: "女" }
+      ],
+      jobstateOptions:[
+        { value: 1, label: "在职" },
+        { value: 2, label: "离职" }
+      ],
+      rules: {
+       
+        ID_number: [
+          {
+            pattern: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
+            message: "身份证格式错误",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.formData.id = this.$route.params.id;
+    this.getDetail();
+    
+  },
+  mounted() {},
+  methods: {
+    getDetail() {
+      getEmployee(this.$route.params.id).then(res => {
+        this.formData = res.data;
+         getUser(res.data.user).then(Response => {
+         
+          this.userDate=Response.data;
+        
+        })
+      });
+    },
+   
+    
+    beforeUpload(file) {
+      const isLt1M = file.size / 1024 / 1024 < 1;
+      if (!isLt1M) {
+        this.$message.error("上传头像图片大小不能超过 1MB!");
+      }
+      return isLt1M;
+    },
+    handleSuccess(res, file) {
+      this.formData.photo = res.data.path;
+    },
+    handleSuccess2(res, file) {
+      const loading = this.$loading({text:'上传成功,正在转换..'})
+      genSignature({path:res.data.path}).then(res=>{
+        this.formData.signature = res.data.path
+        loading.close()
+      }).catch(error=>{loading.close()})
+      // this.formData.photo = res.data.path;
+    },
+   
+    submitForm() {
+      this.$refs["elForm"].validate(valid => {
+        if (!valid) return;
+        // TODO 提交表单
+        var data = this.formData;
+      
+        updateEmployee(this.$route.params.id, data).then(res => {
+          this.$message.success("成功");
+        });
+      });
+    },
+    resetForm() {
+      this.$refs["elForm"].resetFields();
+    },
+    goBack() {
+      this.$router.go(-1);
+    }
+  }
+};
+</script>

hb_client/src/views/system/user.vue

@@ -130,7 +130,7 @@
       </el-col>
     </el-row>
 
-    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑用户':'新增用户'">
+    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='update'?'编辑用户':'新增用户'">
       <el-form ref="Form" :model="user" label-width="80px" label-position="right" :rules="rule1">
         <el-form-item label="姓名" prop="name">
           <el-input v-model="user.name" placeholder="姓名" />
@@ -320,7 +320,13 @@ export default {
       });
     },
     handleEdit(scope) {
-      this.$router.push({name:"userupdate",params:{id:scope.row.employee_user}})
+      this.user = Object.assign({}, scope.row); // copy obj
+    
+      this.dialogType = "update";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
     },
     handleDelete(scope) {
       this.$confirm("确认删除?", "警告", {
@@ -343,7 +349,7 @@ export default {
     async confirm(form) {
       this.$refs[form].validate(valid => {
         if (valid) {
-          const isEdit = this.dialogType === "edit";
+          const isEdit = this.dialogType === "update";
           if (isEdit) {
             updateUser(this.user.id, this.user).then(res => {
                 this.getList();