From 5173f8e31d106abd003e123c8679cf53c7940b33 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 30 一月 2023 11:54:12 +0800
Subject: [PATCH] 网格绘制
---
src/views/systemSetting/baseSetting/department/updateUser/index.vue | 205 +++++++++++++++++---------------------------------
1 files changed, 71 insertions(+), 134 deletions(-)
diff --git a/src/views/systemSetting/baseSetting/department/updateUser/index.vue b/src/views/systemSetting/baseSetting/department/updateUser/index.vue
index 7de6472..c5ab3b6 100644
--- a/src/views/systemSetting/baseSetting/department/updateUser/index.vue
+++ b/src/views/systemSetting/baseSetting/department/updateUser/index.vue
@@ -1,80 +1,39 @@
<template>
<div class="updateUser">
- <!-- <header>
- <div class="headerTitle">{{updateFlag ? '淇敼鐢ㄦ埛閮ㄩ棬淇℃伅' :'鏌ョ湅鐢ㄦ埛淇℃伅'}}</div>
- </header> -->
<main>
<div class="mainContent">
- <el-form
- ref="user"
- label-width="140px"
- autoComplete="on"
- :model="user"
- :rules="createUserRules"
- label-position="right"
- >
- <!-- 閮ㄩ棬id
- <el-form-item class="optionItem" label="閮ㄩ棬id:" prop="id">
- <el-input v-model="user.id" placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" :disabled="!updateFlag"></el-input>
- </el-form-item> -->
+ <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
+ label-position="right">
<!-- 閮ㄩ棬鍚嶇О -->
<el-form-item class="optionItem" label="閮ㄩ棬鍚嶇О:" prop="departName">
- <el-input
- v-model="user.departName"
- placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�"
- :disabled="!updateFlag"
- ></el-input>
+ <el-input v-model="user.departName" placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" :disabled="!updateFlag"></el-input>
</el-form-item>
<!-- 涓婄骇閮ㄩ棬 -->
<el-form-item class="optionItems" label="涓婄骇閮ㄩ棬:" prop="parentId">
- <el-select v-model="user.parentId" placeholder="璇烽�夋嫨涓婄骇閮ㄩ棬">
- <el-option
- v-for="item in departList"
- :key="item.departName"
- :label="item.departName"
- :value="item.id"
- >
+ <el-select v-model="user.parentId" placeholder="璇烽�夋嫨涓婄骇閮ㄩ棬" :disabled="!updateFlag">
+ <el-option v-for="item in departList" :key="item.departName" :label="item.departName" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<!-- 閮ㄩ棬绫诲瀷 -->
<el-form-item class="optionItem" label="閮ㄩ棬绫诲瀷:" prop="departType">
- <el-select
- v-model="user.departType"
- placeholder="璇烽�夋嫨閮ㄩ棬绫诲瀷"
- :disabled="!updateFlag"
- >
- <el-option
- v-for="item in typeList"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- >
+ <el-select v-model="user.departType" placeholder="璇烽�夋嫨閮ㄩ棬绫诲瀷" :disabled="!updateFlag">
+ <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<!--娣诲姞浜哄憳 -->
- <el-form-item class="optionItem add" label="娣诲姞浜哄憳:">
+ <el-form-item class="optionItem add" label="閮ㄩ棬浜哄憳:">
<ul class="addPerson">
- <li
- v-for="(item, index) in checkedList"
- :key="index"
- @click="setLeader(index)"
- >
+ <li v-for="(item, index) in checkedList" :key="index" @click="setLeader(index)">
<div class="li-item">
<div class="li-icon">
- <i
- :class="[
- 'el-icon-user-solid',
- item.leader ? 'leader' : '',
- ]"
- ></i>
+ <i :class="[
+ 'el-icon-user-solid',
+ item.leader ? 'leader' : '',
+ ]"></i>
</div>
- <label
- style="font-size: 12px"
- :class="[item.leader ? 'leader' : '']"
- >{{ item.username }}</label
- >
+ <label style="font-size: 12px" :class="[item.leader ? 'leader' : '']">{{ item.username }}</label>
</div>
</li>
<li class="li-btn" v-if="updateFlag">
@@ -89,11 +48,7 @@
</div>
<div class="scrollWrap">
<el-checkbox-group v-model="checkedUser">
- <el-checkbox
- v-for="user in userList"
- :label="user.id"
- :key="user.id"
- >
+ <el-checkbox v-for="user in userList" :label="user.id" :key="user.id">
{{ user.username }}
</el-checkbox>
</el-checkbox-group>
@@ -103,27 +58,16 @@
</div>
</el-form-item>
<el-form-item style="margin-top: -40px">
- <label style="color: #ff0000ab"
- >绾㈣壊浠ｈ〃閮ㄩ棬棰嗗锛岀偣鍑诲ご鍍忓彲璁剧疆閮ㄩ棬棰嗗</label
- >
+ <label style="color: #ff0000ab">绾㈣壊浠ｈ〃閮ㄩ棬棰嗗锛岀偣鍑诲ご鍍忓彲璁剧疆閮ㄩ棬棰嗗</label>
</el-form-item>
<!-- 閮ㄩ棬鎻忚堪 -->
<el-form-item class="optionItem" label="閮ㄩ棬鎻忚堪:" prop="departDes">
- <el-input
- type="textarea"
- :rows="4"
- v-model="user.departDes"
- placeholder="璇疯緭鍏ラ儴闂ㄦ弿杩�"
- :disabled="!updateFlag"
- ></el-input>
+ <el-input type="textarea" :rows="4" v-model="user.departDes" placeholder="璇疯緭鍏ラ儴闂ㄦ弿杩�" :disabled="!updateFlag">
+ </el-input>
</el-form-item>
<el-form-item v-if="updateFlag">
<div class="optionBtn">
- <el-button
- type="primary"
- class="btn submit"
- @click.native.prevent="handleUser"
- >鎻愪氦
+ <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦
</el-button>
</div>
</el-form-item>
@@ -143,33 +87,11 @@
callback();
}
};
- const validateId = (rule, value, callback) => {
- if (!value) {
- callback(new Error("璇峰～鍐欓儴闂╥d"));
- } else {
- callback();
- }
- };
const validatePass = (rule, value, callback) => {
if (!value) {
callback();
} else {
callback();
- // const rep = /^\w+$/;
- // if (!rep.test(value)) {
- // callback(new Error("瀵嗙爜鍙兘鏄互鏁板瓧銆�26涓嫳鏂囧瓧姣嶆垨鑰呬笅鍒掔嚎缁勬垚鐨勫瓧绗︿覆"));
- // }
- }
- };
- const validatePhone = (rule, value, callback) => {
- if (!value) {
- callback();
- } else {
- callback();
- // const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/
- // if (!rep.test(value)) {
- // callback("璇疯緭鍏ユ纭殑鎵嬫満鍙风爜");
- // }
}
};
return {
@@ -181,7 +103,6 @@
departType: "",
},
createUserRules: {
- id: [{ required: true, trigger: "blur", validator: validateId }],
departName: [
{ required: true, trigger: "blur", validator: validateNickname },
],
@@ -202,17 +123,20 @@
created() {
const that = this;
this.user = JSON.parse(JSON.stringify(that.userInfo));
+ console.log(this.user);
+ this.user.parentId = this.user.parentId === 0 ? '鏆傛棤涓婄骇閮ㄩ棬' : this.user.parentId;
this.checkedList = this.user.userInfoDTOS;
this.checkedList.forEach((e) => {
this.checkedUser.push(e.userId);
});
+ console.log(this.checkedUser)
this.$axios({
method: "get",
url: "sccg/depart/tree",
}).then((res) => {
that.departList = res.data;
});
- this.getUserList();
+ this.getUserList(this.user.id);
// 鑾峰彇閮ㄩ棬绫诲瀷
this.getDepartType();
},
@@ -223,25 +147,32 @@
const { user, checkedList } = this;
const arr = [];
checkedList.forEach((item) => {
- arr.push({ leader: item.leader, userId: item.id });
+ arr.push({ leader: item.leader, userId: item.id ? item.id : item.userId });
});
- this.$axios
- .post("sccg/depart/update", {
- id: user.id,
- departName: user.departName,
- parentId: user.parentId,
- departDes: user.departDes,
- departManagerList: arr,
- })
- .then((res) => {
- this.$message({
- message: res.message,
- type: res.code === 200 ? "success" : "warning",
+ // if (arr.length === 0) {
+ // this.$message({
+ // type: 'warning',
+ // message: '璇烽�夋嫨閮ㄩ棬浜哄憳',
+ // })
+ // } else {
+ this.$axios
+ .post("sccg/depart/update", {
+ id: user.id,
+ departName: user.departName,
+ parentId: user.parentId === '鏆傛棤涓婄骇閮ㄩ棬' ? 0 : user.parentId,
+ departDes: user.departDes,
+ departManagerList: arr,
+ departType: user.departType
+ })
+ .then((res) => {
+ this.$message({
+ message: res.message,
+ type: res.code === 200 ? "success" : "warning",
+ });
+ this.$emit("changeDialog", { flag: false });
+ this.getDepartList();
});
- this.$emit("changeDialog", { flag: false });
- debugger;
- this.getDepartList();
- });
+ // }
} else {
return false;
}
@@ -254,23 +185,23 @@
// 璁剧疆棰嗗
setLeader(idx) {
- this.checkedList.forEach((item, index) => {
- item.leader = index === idx;
- });
+ if (this.updateFlag) {
+ this.checkedList.forEach((item, index) => {
+ item.leader = index === idx;
+ });
+ }
},
// 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�
- getUserList() {
+ getUserList(id) {
// 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜)
- this.$axios.get(`sccg/admin/list`).then((res) => {
+ this.$axios.get(`/sccg/depart/query_surplus_exist_user?id=`+id).then((res) => {
if (res.code === 200) {
- this.userList = res.data.records;
+ this.userList = res.data;
}
});
},
addUser() {
- console.log(this.checkedUser);
- console.log(this.userList);
this.checkedList = [];
this.userList.forEach((item) => {
this.checkedUser.forEach((child) => {
@@ -284,6 +215,7 @@
});
});
this.checkedList[0].leader = true;
+ console.log(this.checkedList);
this.openUser = false;
},
},
@@ -293,13 +225,13 @@
<style lang="scss" scoped>
.updateUser {
border-radius: 1px;
- background-color: #09152f;
+ // background-color: #09152f;
main {
// border: 1px solid #fff;
text-align: left;
padding: 0 55px;
- background-color: #09152f;
+ // background-color: #09152f;
padding-bottom: 50px;
// .mainTitle {
@@ -348,12 +280,12 @@
}
.updateUser::v-deep .el-form-item__label {
- color: #4b9bb7;
+ // color: #4b9bb7;
}
.updateUser::v-deep .el-input__inner {
- background-color: #09152f;
- border: 1px solid #17324c;
+ // background-color: #09152f;
+ // border: 1px solid #17324c;
}
.addPerson {
@@ -362,6 +294,7 @@
padding: 0;
flex-wrap: wrap;
max-width: 280px;
+
li {
color: #fff;
text-align: center;
@@ -369,6 +302,7 @@
margin-left: 10px;
}
}
+
.li-icon {
background-color: #cccccc;
width: 36px;
@@ -376,6 +310,7 @@
border-radius: 50%;
margin: 0 auto;
}
+
.li-btn {
background-color: #cccccc;
width: 36px;
@@ -389,15 +324,16 @@
right: 0;
.box-card {
- max-height: 200px;
+ min-height: 240px;
+ max-height: 260px;
overflow: hidden;
- background-color: #09152f;
+ // background-color: #09152f;
position: relative;
max-width: 220px;
.scrollWrap {
overflow: scroll;
- height: 160px;
+ height: 180px;
position: relative;
color: #4b9bb7;
@@ -424,8 +360,8 @@
top: 77px;
right: 20px;
width: 20px;
- height: 160px;
- background-color: #09152f;
+ height: 180px;
+ // background-color: #09152f;
}
.item {
@@ -437,6 +373,7 @@
.leader {
color: red;
}
+
.el-input {
width: 280px !important;
}
--
Gitblit v1.8.0