From f20a554bdb24e9dfde9dc6a69d78595944f61d15 Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期二, 25 十月 2022 14:53:57 +0800
Subject: [PATCH] 设备管理 样式调整
---
src/views/personalCenter/components/SubAccount.vue | 220 +++++++++++++++++++++++++++++++++++-------------------
1 files changed, 143 insertions(+), 77 deletions(-)
diff --git a/src/views/personalCenter/components/SubAccount.vue b/src/views/personalCenter/components/SubAccount.vue
index 377c64f..996cc34 100644
--- a/src/views/personalCenter/components/SubAccount.vue
+++ b/src/views/personalCenter/components/SubAccount.vue
@@ -10,7 +10,11 @@
<div class="cluster">
鎺堟潈鏃堕暱
- <el-select v-model="timeLength" placeholder="璇烽�夋嫨">
+ <el-select
+ @change="findUserList"
+ v-model="timeLength"
+ placeholder="璇烽�夋嫨"
+ >
<el-option
v-for="item in durationArr"
:key="item.value"
@@ -29,39 +33,42 @@
</div>
<div class="btns">
- <div class="button add" @click="isShowAdd = true">
+ <div class="button add" @click="addSubCount">
<span class="iconfont"></span>
<span>娣诲姞瀛愯处鍙�</span>
</div>
- <div class="button export" @click="isShowRelate = true">
+ <!-- <div class="button export" @click="isShowRelate = true">
<span class="iconfont"></span>
<span>鍏宠仈瀛愯处鍙�</span>
- </div>
+ </div> -->
</div>
<div class="table-area">
<el-table
id="multipleTable"
ref="multipleTable"
- tooltip-effect="dark"
:data="dataList"
:fit="true"
:default-sort="{ prop: 'createTime', order: 'descending' }"
- :stripe="true"
>
<el-table-column label="搴忓彿" width="55" class-name="index">
<template slot-scope="scope">{{
scope.$index + 1 + (page - 1) * size
}}</template>
</el-table-column>
- <el-table-column
+ <!-- <el-table-column
prop="trueName"
label="濮撳悕"
show-overflow-tooltip
- ></el-table-column>
+ ></el-table-column> -->
<el-table-column
prop="username"
label="鐢ㄦ埛鍚�"
+ show-overflow-tooltip
+ ></el-table-column>
+ <el-table-column
+ prop="phoneNum"
+ label="鎵嬫満鍙�"
show-overflow-tooltip
></el-table-column>
<el-table-column prop="userType" label="鐢ㄦ埛绫诲瀷">
@@ -69,10 +76,16 @@
<span>{{ scope.row.userType == 1 ? "涓汉" : "鍏徃" }}</span>
</template>
</el-table-column>
- <el-table-column prop="authDuration" label="鎺堟潈鏃堕暱" > </el-table-column>
- <el-table-column prop="dataNames" label="鏉冮檺">
+ <el-table-column prop="authDuration" label="鎺堟潈鏃堕暱">
+ <template slot-scope="scope">
+ <span>{{ scope.row.authDuration + " 骞�" }} </span>
+ </template>
</el-table-column>
+
+ <!-- <el-table-column prop="authDuration" label="鎺堟潈鏃堕暱">
+ </el-table-column> -->
+ <el-table-column prop="dataNames" label="鏉冮檺"> </el-table-column>
<el-table-column label="鐘舵��">
<template slot-scope="scope">
@@ -83,14 +96,9 @@
<el-table-column label="鎿嶄綔">
<template slot-scope="scope">
- <!-- 缂栬緫 -->
<span class="iconfont option" @click="editUser(scope.row)"
>缂栬緫</span
>
- <!-- 瑙ｇ粦 -->
- <!-- <span class="iconfont option" @click="Untying(scope.row)"
- >瑙ｇ粦</span
- > -->
</template>
</el-table-column>
</el-table>
@@ -127,11 +135,11 @@
<el-form-item label="瀵嗙爜" prop="password">
<el-input v-model="ruleForm.password" style="width: 350px"></el-input>
</el-form-item>
- <el-form-item label="閲嶇疆瀵嗙爜" prop="isChangePwd">
+ <!-- <el-form-item label="閲嶇疆瀵嗙爜">
<el-checkbox v-model="ruleForm.isChangePwd"
>棣栨鐧婚檰淇敼瀵嗙爜</el-checkbox
>
- </el-form-item>
+ </el-form-item> -->
<el-form-item label="鐢ㄦ埛绫诲瀷" prop="userType">
<el-radio v-model="ruleForm.userType" :label="1">涓汉</el-radio>
<el-radio v-model="ruleForm.userType" :label="2">鍏徃</el-radio>
@@ -139,11 +147,11 @@
<el-form-item label="濮撳悕" prop="trueName">
<el-input v-model="ruleForm.trueName" style="width: 350px"></el-input>
</el-form-item>
- <el-form-item label="閭" prop="email">
+ <el-form-item label="閭">
<el-input v-model="ruleForm.email" style="width: 350px"></el-input>
</el-form-item>
- <el-form-item label="琛屼笟" prop="industryId">
+ <el-form-item label="琛屼笟">
<el-select
v-model="ruleForm.industryId"
placeholder="璇烽�夋嫨琛屼笟"
@@ -157,28 +165,26 @@
></el-option>
</el-select>
</el-form-item>
- <el-form-item label="鍦板尯" prop="address">
+ <el-form-item label="鍦板尯">
<el-cascader
v-model="ruleForm.address"
:props="options"
style="width: 350px"
- @change="handleChange"
></el-cascader>
</el-form-item>
- <el-form-item label="鎺堟潈鏃堕暱" prop="authDuration">
+ <el-form-item label="鎺堟潈鏃堕暱">
<el-select
v-model="ruleForm.authDuration"
style="width: 350px"
placeholder="璇烽�夋嫨鎺堟潈鏃堕暱"
>
- <el-option label="涓�骞�" value="涓�骞�"></el-option>
- <el-option label="涓ゅ勾" value="涓ゅ勾"></el-option>
+ <el-option label="涓�骞�" :value="1"></el-option>
+ <el-option label="涓ゅ勾" :value="2"></el-option>
+ <el-option label="涓夊勾" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="鐢ㄦ埛鏉冮檺" prop="menuIds" class="user-tree">
- <!-- <TreeBox :defaultProp="defaultProp" :treeData="sysMenus"></TreeBox> -->
- <!-- <TreeBox :defaultProp="defaultProp2" :treeData="data2"></TreeBox> -->
<div class="tree-box">
<div class="t">鑿滃崟鏉冮檺</div>
<el-tree
@@ -233,14 +239,24 @@
import Steps from "./Steps";
import StepsCard from "./StepCard";
-import TreeBox from "./TreeBox";
export default {
components: {
Steps,
StepsCard,
- TreeBox,
},
data() {
+ const validateTree = (rule, value, callback) => {
+ if (
+ this.ruleForm.menuIds &&
+ this.ruleForm.dataIds &&
+ this.ruleForm.menuIds.length > 0 &&
+ this.ruleForm.dataIds.length > 0
+ ) {
+ callback();
+ } else {
+ callback(new Error("璇烽�夎彍鍗曟潈闄愬拰鏁版嵁鏉冮檺"));
+ }
+ };
return {
searchTime: [
this.$moment().format("YYYY-MM-DD 00:00:00"),
@@ -278,24 +294,29 @@
dataList: [],
isShowAdd: false, //鏄惁灞曠ず鏂板寮圭獥
isShowUnbind: false, //鏄惁灞曠ず瑙ｇ粦寮圭獥
- isShowRelate: false,isEditing: false,
+ isShowRelate: false,
+ isEditing: false,
unbindId: "",
durationArr: [
{
- value: "涓�骞�",
- label: "涓�骞�",
+ value: 1,
+ label: "1骞�",
},
{
- value: "涓ゅ勾",
- label: "涓ゅ勾",
+ value: 2,
+ label: "2骞�",
+ },
+ {
+ value: 3,
+ label: "3骞�",
},
], //鎵�灞為泦缇や笅鎷夋
timeLength: null, //閫変腑鐨勬巿鏉冩椂闀�
showQuit: false, //灞曠ず閫�鍑洪泦缇ょ殑寮圭獥
showJoin: false, //灞曠ず鍔犲叆闆嗙兢鐨勫脊绐�
activeEquipment: null, //澶勭悊涓殑璁惧
- checkedData:[],
- checkedMenu:[],
+ checkedData: [],
+ checkedMenu: [],
ruleForm: {
id: "",
username: "",
@@ -306,24 +327,22 @@
isChangePwd: false,
industryId: "",
address: [],
- authDuration: "",
+ authDuration: 1,
areaId: "",
provinceId: "",
menuIds: [],
dataIds: [],
},
rules: {
- name: [
- { required: true, message: "璇疯緭鍏ユ椿鍔ㄥ悕绉�", trigger: "blur" },
- { min: 3, max: 5, message: "闀垮害鍦� 3 鍒� 5 涓瓧绗�", trigger: "blur" },
+ username: [
+ { required: true, message: "璇疯緭鍏ョ敤鎴峰悕", trigger: "blur" },
],
- region: [
- { required: true, message: "璇烽�夋嫨娲诲姩鍖哄煙", trigger: "change" },
+ password: [{ required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" }],
+ userType: [
+ { required: true, message: "璇烽�夋嫨鐢ㄦ埛绫诲瀷", trigger: "blur" },
],
- resource: [
- { required: true, message: "璇烽�夋嫨娲诲姩璧勬簮", trigger: "change" },
- ],
- desc: [{ required: true, message: "璇峰～鍐欐椿鍔ㄥ舰寮�", trigger: "blur" }],
+ trueName: [{ required: true, message: "璇疯緭鍏ュ鍚�", trigger: "blur" }],
+ menuIds: [{ validator: validateTree, trigger: "blur" }],
},
sysMenus: [],
DataTree: [],
@@ -356,9 +375,13 @@
}
});
},
+ addSubCount() {
+ this.isShowAdd = true;
+ this.resetUser();
+ },
editUser(row) {
this.isShowAdd = true;
- this.isEditing = true
+ this.isEditing = true;
this.ruleForm.id = row.id;
this.ruleForm.username = row.username;
this.ruleForm.userType = row.userType;
@@ -367,9 +390,8 @@
this.ruleForm.email = row.email;
this.ruleForm.isChangePwd = row.isChangePwd;
this.ruleForm.industryId = row.industryId;
- this.ruleForm.areaId =row.areaId ;
- debugger
- this.ruleForm.address = [ row.provinceId,row.areaId]
+ this.ruleForm.areaId = row.areaId;
+ this.ruleForm.address = [row.provinceId, row.areaId];
this.ruleForm.provinceId = row.provinceId;
this.ruleForm.authDuration = row.authDuration;
this.checkedMenu = row.menuIds;
@@ -384,13 +406,16 @@
trueName: "",
email: "",
isChangePwd: false,
+ address: [],
industryId: "",
areaId: "",
provinceId: "",
- authDuration: "",
+ authDuration: 1,
};
- this.$refs.treeMenus.setCheckedKeys([]);
- this.$refs.treeData.setCheckedKeys([]);
+ this.$nextTick(() => {
+ this.$refs.treeMenus.setCheckedKeys([]);
+ this.$refs.treeData.setCheckedKeys([]);
+ });
},
async getIndustrys() {
let res = await getDic();
@@ -403,23 +428,49 @@
saveSubUser() {
this.ruleForm.menuIds = this.$refs.treeMenus.getCheckedKeys();
this.ruleForm.dataIds = this.$refs.treeData.getCheckedKeys();
- let json = {
- id: this.isEditing? this.ruleForm.id:"",
- username: this.ruleForm.username,
- password: this.ruleForm.password,
- isChangePwd: this.ruleForm.isChangePwd,
- userType: this.ruleForm.userType,
- trueName: this.ruleForm.trueName,
- email: this.ruleForm.email,
- industryId: this.ruleForm.industryId,
- areaId: this.ruleForm.address[1],
- authDuration: this.ruleForm.authDuration,
- menuIds: this.ruleForm.menuIds,
- dataIds: this.ruleForm.dataIds,
- };
- debugger
- saveSubUser(json).then((res) => {
- debugger;
+ this.$refs["ruleForm"].validate((valid) => {
+ if (valid) {
+ let json = {
+ id: this.isEditing ? this.ruleForm.id : "",
+ username: this.ruleForm.username,
+ password: this.ruleForm.password,
+ isChangePwd: this.ruleForm.isChangePwd,
+ userType: this.ruleForm.userType,
+ trueName: this.ruleForm.trueName,
+ email: this.ruleForm.email,
+ industryId: this.ruleForm.industryId,
+ areaId:
+ this.ruleForm.address.length == 2 ? this.ruleForm.address[1] : "",
+ authDuration: this.ruleForm.authDuration,
+ menuIds: this.ruleForm.menuIds,
+ dataIds: this.ruleForm.dataIds,
+ };
+
+ if (typeof json.areaId === "string") {
+ delete json.areaId;
+ }
+
+ if (typeof json.authDuration === "string") {
+ delete json.authDuration;
+ }
+
+ saveSubUser(json)
+ .then((res) => {
+ if (res.success) {
+ this.$notify.success(res.data);
+ this.isShowAdd = false;
+ this.isEditing = false;
+ this.findUserList();
+ } else {
+ this.$notify.error(res.msg);
+ }
+ })
+ .catch((err) => {
+ this.$notify.error(err.data.msg);
+ });
+ } else {
+ return false;
+ }
});
},
findUserList() {
@@ -427,15 +478,23 @@
inputText: this.inputText,
page: this.page,
size: this.size,
- }).then((res) => {
- if (res.success) {
- this.dataList = res.data.dataList;
- }
- });
+ authDuration: this.timeLength,
+ })
+ .then((res) => {
+ if (res.success) {
+ this.dataList = res.data.dataList;
+ this.total = res.data.total;
+ } else {
+ this.$notify.error("鍔犺浇瀛愯处鎴峰垪琛ㄥけ璐�");
+ }
+ })
+ .catch((e) => {
+ this.$notify.error(e.msg);
+ });
},
goback() {
this.isShowAdd = false;
- this.isEditing =false
+ this.isEditing = false;
this.isShowRelate = false;
this.activeIndex = 0;
},
@@ -477,10 +536,12 @@
//鍒嗛〉鍔熻兘
handleSizeChange(size) {
this.size = size;
+ this.findUserList();
},
//鍒嗛〉鍔熻兘
refrash(page) {
this.page = page;
+ this.findUserList();
},
//瑙ｇ粦鎸夐挳
@@ -572,6 +633,11 @@
border-color: #c0c5cc;
}
.user-tree {
+ .el-form-item__label:before {
+ content: "*";
+ color: #f52323;
+ margin-right: 4px;
+ }
.el-form-item__content {
display: flex;
.tree-box {
@@ -773,7 +839,7 @@
.option {
margin-right: 10px;
- font-size: 14px;
+ font-size: 14px;
color: rgb(0, 101, 255);
cursor: pointer;
}
@@ -834,4 +900,4 @@
color: #0065ff;
border-color: #0065ff;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0