From e156c3fc8e4c6378858b9afbb287d188f51c37d2 Mon Sep 17 00:00:00 2001
From: shilixia <2309368887@qq.com>
Date: Tue, 17 Aug 2021 09:49:54 +0800
Subject: [PATCH] ss

---
 hb_client/.env.development                |   4 +-
 hb_client/src/api/employee.js             |  16 ++
 hb_client/src/api/util.js                 |   9 +
 hb_client/src/router/index.js             |   8 +
 hb_client/src/views/system/user.vue       |   7 +-
 hb_client/src/views/system/userupdate.vue | 242 ++++++++++++++++++++++
 6 files changed, 279 insertions(+), 7 deletions(-)
 create mode 100644 hb_client/src/api/employee.js
 create mode 100644 hb_client/src/api/util.js
 create mode 100644 hb_client/src/views/system/userupdate.vue

diff --git a/hb_client/.env.development b/hb_client/.env.development
index f0aff47..db8f2e7 100644
--- a/hb_client/.env.development
+++ b/hb_client/.env.development
@@ -2,7 +2,9 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = 'http://localhost:8000/api'
+#VUE_APP_BASE_API = 'http://localhost:8000/api'
+VUE_APP_BASE_API = 'http://47.95.0.242:2222/api'
+
 
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.
diff --git a/hb_client/src/api/employee.js b/hb_client/src/api/employee.js
new file mode 100644
index 0000000..16ba451
--- /dev/null
+++ b/hb_client/src/api/employee.js
@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+
+export function getEmployee(id) {
+  return request({
+    url: `/hrm/employee/${id}/`,
+    method: 'get'
+  })
+}
+export function updateEmployee(id, data) {
+  return request({
+    url: `/hrm/employee/${id}/`,
+    method: 'put',
+    data
+  })
+}
\ No newline at end of file
diff --git a/hb_client/src/api/util.js b/hb_client/src/api/util.js
new file mode 100644
index 0000000..872cfe8
--- /dev/null
+++ b/hb_client/src/api/util.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function genSignature(data) {
+  return request({
+    url: '/utils/signature/',
+    method: 'post',
+    data
+  })
+}
diff --git a/hb_client/src/router/index.js b/hb_client/src/router/index.js
index 3991778..c0f8b2e 100644
--- a/hb_client/src/router/index.js
+++ b/hb_client/src/router/index.js
@@ -123,6 +123,14 @@ export const asyncRoutes = [
         name: 'User',
         component: () => import('@/views/system/user.vue'),
         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',
diff --git a/hb_client/src/views/system/user.vue b/hb_client/src/views/system/user.vue
index 6e33e4d..af18416 100644
--- a/hb_client/src/views/system/user.vue
+++ b/hb_client/src/views/system/user.vue
@@ -320,12 +320,7 @@ export default {
       });
     },
     handleEdit(scope) {
-      this.user = Object.assign({}, scope.row); // copy obj
-      this.dialogType = "edit";
-      this.dialogVisible = true;
-      this.$nextTick(() => {
-        this.$refs["Form"].clearValidate();
-      });
+      this.$router.push({name:"userupdate",params:{id:scope.row.employee_user}})
     },
     handleDelete(scope) {
       this.$confirm("确认删除?", "警告", {
diff --git a/hb_client/src/views/system/userupdate.vue b/hb_client/src/views/system/userupdate.vue
new file mode 100644
index 0000000..5c6a186
--- /dev/null
+++ b/hb_client/src/views/system/userupdate.vue
@@ -0,0 +1,242 @@
+<template>
+  <div class="app-container">
+    <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-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-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>
+  </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: "女" }
+      ],
+      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>
\ No newline at end of file