提交

src/api/index.js

@@ -10,14 +10,14 @@ function login_api(user_name, password) {
   });
 }
 
-function menu_api(token) {
+function menu_api() {
   return service({
     url: '/admin/module/list',
     method: 'GET',
   });
 }
 
-function login_out_api(token) {
+function login_out_api() {
   return service({
     url: '/admin/users/logout',
     method: 'GET',
@@ -79,7 +79,7 @@ function custom_rule_api(data) {
     })
 }
 
-function orgin_api(data) {
+function organ_api(data) {
     return service({
         url: '/admin/organ/list',
         method: 'POST',
@@ -87,6 +87,37 @@ function orgin_api(data) {
     })
 }
 
+function region_api(data) {
+    return service({
+        url: '/admin/region/tree',
+        method: 'GET',
+        data,
+    })
+}
+
+function custom_add(params) {
+    return service({
+        url: '/admin/custom/add',
+        method: 'POST',
+        data: params,
+    })
+}
+
+function custom_del(data) {
+    return service({
+        url: '/admin/custom/delete/' + data,
+        method: 'DELETE',
+    })
+}
+
+function custom_updata(data) {
+    return service({
+        url: '/admin/custom/update',
+        method: 'POST',
+        data,
+    })
+}
+
 export default {
   login_api,
   menu_api,
@@ -98,5 +129,9 @@ export default {
   user_edit_api,
   custom_list_api,
   custom_rule_api,
-  orgin_api
+  organ_api,
+  region_api,
+  custom_add,
+  custom_del,
+  custom_updata
 };

src/view/home/index.vue

@@ -77,7 +77,7 @@ export default {
   },
   methods: {
     changePage(p) {
-      this.$router.replace(p);
+      this.$router.push(p);
     },
     login_out() {
       api.login_out_api().then(r => {

src/view/user/index.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="user">
     <Space wrap style="margin-bottom: 1em">
-      <Button type="primary" icon="ios-search" @click="show_edit">
+      <Button type="primary" icon="ios-search" @click="() => show_edit()">
         新增
       </Button>
       <Input
@@ -26,11 +26,18 @@
           >
             <Button size="small" type="error"> 删 除 </Button>
           </Poptip>
-          <Button size="small" type="primary" @click="() => add_user(row)">
+          <Button size="small" type="primary" @click="() => show_edit(row)">
             修 改
           </Button>
         </Space>
       </template>
+      <template #photo="{ row }">
+        <Image :src="row.photo" fit="cover" width="58px" height="58px">
+          <template #error>
+            <Icon type="ios-image-outline" size="24" color="#ccc" />
+          </template>
+        </Image>
+      </template>
     </Table>
     <br />
     <Page
@@ -41,7 +48,12 @@
       @on-page-size-change="sizeChange"
     />
 
-    <Drawer title="用户详情" placement="right" v-model="show_user_edit">
+    <Drawer
+      :mask-closable="false"
+      title="用户详情"
+      placement="right"
+      v-model="show_user_edit"
+    >
       <Form
         ref="formInline"
         :model="user"
@@ -51,9 +63,44 @@
         <FormItem label="用户名">
           <Input v-model="user.name" placeholder="请输入用户名"></Input>
         </FormItem>
+        <FormItem label="头像">
+          <div class="img-box" v-if="user.photo && user.photo.url">
+            <Image
+              :src="user.photo.url"
+              fit="cover"
+              width="100%"
+              height="100%"
+            />
+            <Icon
+              type="ios-trash-outline"
+              class="check-icon"
+              size="25"
+              @click="handleRemove"
+            ></Icon>
+          </div>
+          <Upload
+            ref="upload"
+            v-else
+            :show-upload-list="false"
+            :on-success="handle_success"
+            :format="['jpg', 'jpeg', 'png']"
+            :max-size="5120"
+            :on-format-error="handle_format_error"
+            :headers="{
+              Authorization: token,
+            }"
+            type="drag"
+            :action="base_url + '/admin/leaders/upload'"
+            style="display: inline-block; width: 58px"
+          >
+            <div style="width: 58px; height: 58px; line-height: 58px">
+              <Icon type="ios-camera" size="20"></Icon>
+            </div>
+          </Upload>
+        </FormItem>
         <FormItem label="角色">
           <Select
-            v-model="user.adminRoles"
+            v-model="user.roleId"
             filterable
             :remote-method="get_role_data"
             :loading="isLoad"
@@ -69,9 +116,9 @@
         </FormItem>
         <FormItem label="机构">
           <Select
-            v-model="user.organ"
+            v-model="user.organId"
             filterable
-            :remote-method="get_organ_data"
+            :remote-method="get_regan_data"
             :loading="isLoad"
           >
             <Option
@@ -84,20 +131,7 @@
           </Select>
         </FormItem>
         <FormItem label="地域">
-          <Select
-            v-model="user.adminRoles"
-            filterable
-            :remote-method="get_role_data"
-            :loading="isLoad"
-          >
-            <Option
-              v-for="(option, index) in rules"
-              :value="option.roleId"
-              :key="index"
-            >
-              {{ option.name }}
-            </Option>
-          </Select>
+          <TreeSelect v-model="user.regionId" :data="region" />
         </FormItem>
         <FormItem label="手机号">
           <Input v-model="user.phone" placeholder="请输入手机号"></Input>
@@ -110,7 +144,12 @@
           ></Input>
         </FormItem>
         <FormItem label="简介">
-          <Input v-model="user.info" placeholder="请输入简介"></Input>
+          <Input
+            v-model="user.info"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入简介"
+          ></Input>
         </FormItem>
         <FormItem label="职位">
           <Input v-model="user.position" placeholder="请输入职位"></Input>
@@ -119,7 +158,12 @@
           <Input v-model="user.level" placeholder="请输入职级"></Input>
         </FormItem>
         <FormItem label="履历">
-          <Input v-model="user.resume" placeholder="请输入履历"></Input>
+          <Input
+            v-model="user.resume"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入履历"
+          ></Input>
         </FormItem>
         <FormItem>
           <Button type="primary" @click="save_user">保 存</Button>
@@ -130,18 +174,28 @@
 </template>
 
 <script setup>
-import api from '../../api/index.js';
 import { ref, onMounted } from 'vue';
+import { Image, Message } from 'view-ui-plus';
 
+import api from '../../api/index.js';
+import { base_url } from '../../config/index';
+
+const token = localStorage.getItem('neican_token');
 const searchText = ref('');
 const total = ref(0);
 const page = ref(1);
 const pageSize = ref(10);
 const formInline = ref(null);
+const upload = ref(null);
 const list = ref([]);
-const user = ref({});
+const user = ref({
+  headSculpture: [],
+  photo: {},
+  regionId: '',
+});
 const rules = ref([]);
 const organ = ref([]);
+const region = ref([]);
 const show_user_edit = ref(false);
 const isLoad = ref(false);
 
@@ -151,6 +205,11 @@ const columns = [
     key: 'name',
     align: 'center',
   },
+  {
+    title: '头像',
+    slot: 'photo',
+    align: 'center',
+  },
   {
     title: '手机号',
     key: 'phone',
@@ -175,17 +234,10 @@ const ruleInline = {
       trigger: 'blur',
     },
   ],
-  sex: [
+  newpassword: [
     {
       required: true,
-      message: '请选择性别',
-      trigger: 'blur',
-    },
-  ],
-  adminRoles: [
-    {
-      required: true,
-      message: '请选择角色',
+      message: '请输入密码',
       trigger: 'blur',
     },
   ],
@@ -201,15 +253,14 @@ const ruleInline = {
 onMounted(() => {});
 get_list();
 get_role_data();
-get_organ_data();
+get_regan_data();
+get_region_api();
 
-function change(page) {
-  page.value = page;
+function change(p) {
+  page.value = p;
   get_list();
 }
 
-function add_user() {}
-
 function sizeChange(pageSize) {
   pageSize.value = pageSize;
   get_list();
@@ -223,22 +274,70 @@ function get_list() {
       name: searchText.value,
     })
     .then(r => {
-      console.log(r.records);
       list.value = r.records || [];
       total.value = r.total || 0;
     });
 }
 
-function show_edit(row) {
+function show_edit(data) {
+  const row = JSON.parse(JSON.stringify(data || {}));
   show_user_edit.value = true;
-  user.value = row || {};
+  if (row.photo)
+    row.photo = {
+      url: row.photo,
+    };
+  user.value = row || {
+    headSculpture: [],
+    photo: {},
+    regionId: '',
+  };
 }
 
 function save_user() {
   formInline.value.validate(valid => {
     if (!valid) return;
-    user.value.password = user.value.newpassword || '';
-    console.log(user.value);
+    const U = user.value;
+    if (!U.userId)
+      api
+        .custom_add({
+          name: U.name,
+          regionId: U.regionId,
+          organId: U.organId,
+          phone: U.phone,
+          password: U.newpassword,
+          info: U.info,
+          photo: U.photo.url,
+          position: U.position,
+          resume: U.resume,
+          level: U.level,
+          roleId: U.roleId,
+        })
+        .then(() => {
+          Message.info('新增成功');
+          show_user_edit.value = false;
+          get_list();
+        });
+    else
+      api
+        .custom_updata({
+          name: U.name,
+          regionId: U.regionId,
+          organId: U.organId,
+          phone: U.phone,
+          password: U.newpassword,
+          info: U.info,
+          photo: U.photo.url,
+          position: U.position,
+          resume: U.resume,
+          level: U.level,
+          roleId: U.roleId,
+          userId: U.userId,
+        })
+        .then(() => {
+          Message.info('修改成功');
+          show_user_edit.value = false;
+          get_list();
+        });
   });
 }
 
@@ -259,16 +358,80 @@ function get_role_data(query) {
     });
 }
 
-function get_organ_data(query) {
-  api.orgin_api({
-    page: 1,
-    pageSize: 100000,
-    name: query
-  }).then(r => {
-    console.log(r);
-    organ.value = r.records || [];
+function get_regan_data(query) {
+  api
+    .organ_api({
+      page: 1,
+      pageSize: 100000,
+      name: query,
+    })
+    .then(r => {
+      organ.value = r.records || [];
+    });
+}
+
+function get_region_api() {
+  api.region_api().then(r => {
+    region.value = tree_change(r || []);
+  });
+}
+
+function tree_change(list) {
+  const li = [];
+  for (let i = 0; i < list.length; i++) {
+    const v = list[i];
+    v.title = v.name;
+    v.value = v.regionId;
+    v.expand = false;
+    v.selected = false;
+    v.checked = false;
+    li.children = tree_change(v.children || []);
+    li.push(v);
+  }
+  return li;
+}
+
+function handle_success(response, file, fileList) {
+  user.value.photo.url = response.data.url || '';
+  user.value.photo.file = file || null;
+  Message.info('头像上传成功');
+}
+
+function handle_format_error(file) {
+  Message.info('头像上传失败');
+}
+
+function handleRemove() {
+  user.value.photo.url = '';
+  user.value.photo.file = null;
+}
+
+function del_user(row) {
+  api.custom_del(row.userId).then(() => {
+    Message.info('删除成功');
+    get_list();
   });
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.img-box {
+  width: 58px;
+  height: 58px;
+  position: relative;
+
+  .check-icon {
+    opacity: 0;
+    transition: all 0.5s;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+</style>