Commit fd811cb7 authored by hangjun83's avatar hangjun83

前端更新

parent 1e7fc2e8
<template>
<div style="display: inline-block">
<Dropdown @on-click="handleLanDropdown">
<div class="header-right-icon header-action">
<Icon type="md-globe" :size="20" class="language"></Icon>
</div>
<DropdownMenu slot="list">
<DropdownItem name="zh-CN" :selected="currLang == 'zh-CN'"
><div class="lan-logo-content">
<img src="@/assets/icon/chinese.png" class="country-logo" />简体中文
</div></DropdownItem
>
<DropdownItem name="en-US" :selected="currLang == 'en-US'"
><div class="lan-logo-content">
<img src="@/assets/icon/english.png" class="country-logo" />English
</div></DropdownItem
>
</DropdownMenu>
</Dropdown>
</div>
</template>
<script>
export default {
name: "language",
props: {},
data() {
return {
currLang: "zh-CN",
};
},
methods: {
handleLanDropdown(name) {
this.currLang = name;
this.$i18n.locale = name;
this.$store.commit("switchLang", name);
},
},
mounted() {
if (localStorage.lang) {
this.currLang = localStorage.lang;
}
},
};
</script>
<style lang="less" scoped>
.lan-logo-content {
display: flex;
align-items: center;
.country-logo {
width: 15px;
margin-right: 8px;
}
}
</style>
\ No newline at end of file
<template>
<div>
<Modal title="身份验证" v-model="passCheckVisible" fullscreen footer-hide>
<div class="pass-check" @keydown.enter="checkPass">
<Icon type="md-lock" size="30" style="margin-bottom:10px;"/>
<div class="title" style="margin-bottom:40px;">密码认证</div>
<div class="desc">请输入您的密码</div>
<Input
autofocus
v-model="password"
password
size="large"
placeholder="请输入您的密码"
type="password"
style="width:300px;margin-bottom:40px;"
/>
<div style="margin-bottom:60px;">
<Button size="large" @click="passCheckVisible=false" style="margin-right:20px;">取消</Button>
<Button
:loading="loading"
:disabled="!password"
@click="checkPass"
type="primary"
size="large"
>提交</Button>
</div>
</div>
</Modal>
</div>
</template>
<script>
import { unlock } from "@/api/index";
export default {
name: "circleLoading",
data() {
return {
loading: false,
passCheckVisible: false, // 密码验证
password: ""
};
},
methods: {
checkPass() {
this.loading = true;
unlock({ password: this.password }).then(res => {
this.loading = false;
if (res.success) {
this.passCheckVisible = false;
this.$emit("on-success", true);
}
});
},
show(){
this.password = "";
this.passCheckVisible = true;
}
}
};
</script>
<style lang="less">
.pass-check {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
.title {
font-weight: 600;
font-size: 16px;
color: #2f3033;
}
.desc {
font-size: 14px;
line-height: 28px;
margin: 15px 0;
}
}
</style>
<template>
<div>
<Cascader
v-model="selectDep"
:data="department"
:load-data="loadData"
@on-change="handleChangeDep"
@on-visible-change="handleVisibleChange"
change-on-select
:size="size"
:transfer="transfer"
:transfer-class-name="transferClassName"
:disabled="disabled"
:filterable="filterable"
:clearable="clearable"
:placeholder="placeholder"
></Cascader>
</div>
</template>
<script>
import { initDepartment, loadDepartment } from "@/api/index";
export default {
name: "departmentChoose",
props: {
size: String,
transfer: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
filterable: {
type: Boolean,
default: true,
},
clearable: {
type: Boolean,
default: true,
},
placeholder: {
type: String,
default: "请选择或输入搜索部门",
},
transferClassName: String,
},
data() {
return {
selectDep: [],
department: [],
};
},
methods: {
initDepartmentData() {
initDepartment().then((res) => {
if (res.success) {
res.result.forEach(function (e) {
if (e.isParent) {
e.value = e.id;
e.label = e.title;
e.loading = false;
e.children = [];
} else {
e.value = e.id;
e.label = e.title;
}
if (e.status == -1) {
e.label = "[已禁用] " + e.label;
e.disabled = true;
}
});
this.department = res.result;
}
});
},
loadData(item, callback) {
item.loading = true;
loadDepartment(item.value).then((res) => {
item.loading = false;
if (res.success) {
res.result.forEach(function (e) {
if (e.isParent) {
e.value = e.id;
e.label = e.title;
e.loading = false;
e.children = [];
} else {
e.value = e.id;
e.label = e.title;
}
if (e.status == -1) {
e.label = "[已禁用] " + e.label;
e.disabled = true;
}
});
item.children = res.result;
callback();
}
});
},
handleChangeDep(value, selectedData) {
let departmentId = "";
// 获取最后一个值
if (value && value.length > 0) {
departmentId = value[value.length - 1];
}
this.$emit("on-change", departmentId);
},
handleVisibleChange(status) {
this.$emit("on-visible-change", status);
},
clearSelect() {
this.selectDep = [];
this.$emit("on-change", "");
},
},
mounted() {
this.initDepartmentData();
},
};
</script>
<style lang="less">
</style>
<template>
<div>
<div style="display: flex;">
<Input
v-model="departmentTitle"
readonly
:size="size"
:disabled="disabled"
:prefix="prefix"
:suffix="suffix"
style="margin-right: 10px"
:placeholder="placeholder"
:clearable="clearable"
@on-clear="clearSelect"
/>
<Poptip
transfer
trigger="click"
placement="right"
title="选择部门"
width="250"
>
<Button
:size="size"
:disabled="disabled"
:icon="icon"
:type="type"
:shape="shape"
:ghost="ghost"
>{{ text }}</Button
>
<div slot="content">
<Input
v-model="searchKey"
suffix="ios-search"
@on-change="searchDep"
placeholder="输入部门名搜索"
clearable
/>
<div class="dep-tree-bar">
<Tree
:data="dataDep"
:load-data="loadData"
@on-select-change="selectTree"
:multiple="multiple"
></Tree>
<Spin size="large" fix v-if="depLoading"></Spin>
</div>
</div>
</Poptip>
</div>
</div>
</template>
<script>
import { initDepartment, loadDepartment, searchDepartment } from "@/api/index";
export default {
name: "departmentTreeChoose",
props: {
text: {
type: String,
default: "选择部门",
},
icon: {
type: String,
default: "md-list",
},
disabled: {
type: Boolean,
default: false,
},
size: String,
type: String,
shape: String,
ghost: {
type: Boolean,
default: false,
},
prefix: String,
suffix: String,
multiple: {
type: Boolean,
default: false,
},
clearable: {
type: Boolean,
default: true,
},
placeholder: {
type: String,
default: "点击选择部门",
},
},
data() {
return {
depLoading: false,
departmentTitle: "",
searchKey: "",
dataDep: [],
selectDep: [],
departmentId: [],
};
},
methods: {
initDepartmentData() {
initDepartment().then((res) => {
if (res.success) {
res.result.forEach(function (e) {
if (e.isParent) {
e.loading = false;
e.children = [];
}
if (e.status == -1) {
e.title = "[已禁用] " + e.title;
e.disabled = true;
}
});
this.dataDep = res.result;
}
});
},
loadData(item, callback) {
loadDepartment(item.id).then((res) => {
if (res.success) {
res.result.forEach(function (e) {
if (e.isParent) {
e.loading = false;
e.children = [];
}
if (e.status == -1) {
e.title = "[已禁用] " + e.title;
e.disabled = true;
}
});
callback(res.result);
}
});
},
searchDep() {
// 搜索部门
if (this.searchKey) {
this.depLoading = true;
searchDepartment({ title: this.searchKey }).then((res) => {
this.depLoading = false;
if (res.success) {
res.result.forEach(function (e) {
if (e.status == -1) {
e.title = "[已禁用] " + e.title;
e.disabled = true;
}
});
this.dataDep = res.result;
}
});
} else {
this.initDepartmentData();
}
},
selectTree(v) {
let ids = [],
title = "";
v.forEach((e) => {
ids.push(e.id);
if (title == "") {
title = e.title;
} else {
title = title + "" + e.title;
}
});
this.departmentId = ids;
this.departmentTitle = title;
if (this.multiple) {
this.$emit("on-change", this.departmentId);
} else {
this.$emit("on-change", this.departmentId[0]);
}
},
clearSelect() {
this.departmentId = [];
this.departmentTitle = "";
this.initDepartmentData();
if (this.multiple) {
this.$emit("on-change", []);
} else {
this.$emit("on-change", "");
}
this.$emit("on-clear");
},
setData(ids, title) {
this.departmentTitle = title;
if (this.multiple) {
this.departmentId = ids;
} else {
this.departmentId = [];
this.departmentId.push(ids);
}
this.$emit("on-change", this.departmentId);
},
},
mounted() {
this.initDepartmentData();
},
};
</script>
<style lang="less">
.dep-tree-bar {
position: relative;
min-height: 80px;
max-height: 500px;
overflow: auto;
margin-top: 5px;
}
.dep-tree-bar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.dep-tree-bar::-webkit-scrollbar-thumb {
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px #d1d1d1;
background: #e4e4e4;
}
</style>
<template>
<div class="user-choose">
<Button
:size="size"
:type="type"
:shape="shape"
@click="userModalVisible = true"
:icon="icon"
>{{ text }}</Button
>
<span
v-show="showClear && selectUsers.length > 0"
@click="clearData"
class="clear"
>清空已选</span
>
<Collapse simple class="collapse">
<Panel name="1">
已选择
<span class="select-count">{{ selectUsers.length }}</span>
<p slot="content">
<Tag
v-for="(item, i) in selectUsers"
:key="i"
:name="item.id"
color="default"
closable
@on-close="handleCancelUser"
>
<Tooltip placement="top" :content="item.username">{{
item.nickname
}}</Tooltip>
</Tag>
</p>
</Panel>
</Collapse>
<Drawer
title="选择用户"
closable
v-model="userModalVisible"
width="815"
draggable
:transfer="transfer"
:mask-style="maskStyle"
:class-name="className"
class="user-choose-drawer"
>
<Form ref="searchForm" :model="searchForm" inline :label-width="70">
<FormItem label="用户名" prop="nickname">
<Input
type="text"
v-model="searchForm.nickname"
clearable
placeholder="请输入用户名"
style="width: 180px"
/>
</FormItem>
<FormItem label="部门" prop="department">
<department-choose
@on-change="handleSelectDep"
style="width: 180px"
ref="dep"
></department-choose>
</FormItem>
<span v-if="drop">
<FormItem label="手机号" prop="mobile">
<Input
type="text"
v-model="searchForm.mobile"
clearable
placeholder="请输入手机号"
style="width: 180px"
/>
</FormItem>
<FormItem label="邮箱" prop="email">
<Input
type="text"
v-model="searchForm.email"
clearable
placeholder="请输入邮箱"
style="width: 180px"
/>
</FormItem>
<FormItem label="性别" prop="sex">
<dict dict="sex" v-model="searchForm.sex" style="width: 180px" />
</FormItem>
<FormItem label="登录账号" prop="username">
<Input
type="text"
v-model="searchForm.username"
clearable
placeholder="请输入登录账号"
style="width: 180px"
/>
</FormItem>
<FormItem label="用户ID" prop="id">
<Input
type="text"
v-model="searchForm.id"
clearable
placeholder="请输入用户ID"
style="width: 180px"
/>
</FormItem>
</span>
<FormItem style="margin-left: -35px" class="br">
<Button @click="handleSearchUser" type="primary" icon="ios-search"
>搜索</Button
>
<Button @click="handleResetUser">重置</Button>
<a class="drop-down" @click="dropDown">
{{ dropDownContent }}
<Icon :type="dropDownIcon"></Icon>
</a>
</FormItem>
</Form>
<Alert show-icon>
已选择
<span class="select-count">{{ selectUsers.length }}</span>
<a style="margin-left: 10px" @click="clearData">清空已选</a>
</Alert>
<Table
:loading="userLoading"
border
:columns="userColumns"
:data="userData"
style="margin: 2vh 0"
></Table>
<Row type="flex" justify="end">
<Page
:current="searchForm.pageNumber"
:total="totalUser"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[10, 20, 50]"
size="small"
show-total
show-elevator
show-sizer
transfer
></Page>
</Row>
</Drawer>
</div>
</template>
<script>
import { getUserListData } from "@/api/index";
import departmentChoose from "./department-choose";
import dict from "@/views/my-components/xboot/dict";
export default {
name: "userChoose",
components: {
departmentChoose,
dict,
},
props: {
value: {
type: Array,
default: [],
},
text: {
type: String,
default: "选择用户",
},
icon: {
type: String,
default: "md-person-add",
},
showClear: {
type: Boolean,
default: true,
},
size: String,
type: String,
shape: String,
transfer: {
type: Boolean,
default: true,
},
maskStyle: Object,
className: Object
},
data() {
return {
userLoading: true,
userModalVisible: false,
drop: false,
dropDownContent: "展开",
dropDownIcon: "ios-arrow-down",
selectUsers: this.value,
searchForm: {
id: "",
nickname: "",
type: "",
status: "",
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "createTime", // 默认排序字段
order: "desc", // 默认排序方式
},
userColumns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "用户名",
key: "nickname",
minWidth: 130,
sortable: true,
},
{
title: "登录账号",
key: "username",
minWidth: 130,
sortable: true,
},
{
title: "头像",
key: "avatar",
width: 80,
align: "center",
render: (h, params) => {
return h("Avatar", {
props: {
src: params.row.avatar,
},
});
},
},
{
title: "所属部门",
key: "departmentTitle",
width: 120,
},
{
title: "手机",
key: "mobile",
width: 125,
sortable: true,
},
{
title: "邮箱",
key: "email",
width: 180,
sortable: true,
},
{
title: "性别",
key: "sex",
width: 70,
align: "center",
},
{
title: "创建时间",
key: "createTime",
sortable: true,
sortType: "desc",
width: 170,
},
{
title: "操作",
key: "action",
width: 130,
align: "center",
fixed: "right",
render: (h, params) => {
return h("div", [
h(
"Button",
{
props: {
type: "info",
size: "small",
},
on: {
click: () => {
this.chooseUser(params.row);
},
},
},
"添加该用户"
),
]);
},
},
],
userData: [],
totalUser: 0,
};
},
methods: {
handleSelectDep(v) {
this.searchForm.departmentId = v;
},
dropDown() {
if (this.drop) {
this.dropDownContent = "展开";
this.dropDownIcon = "ios-arrow-down";
} else {
this.dropDownContent = "收起";
this.dropDownIcon = "ios-arrow-up";
}
this.drop = !this.drop;
},
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
},
changePageSize(v) {
this.searchForm.pageSize = v;
this.getDataList();
},
getDataList() {
this.userLoading = true;
getUserListData(this.searchForm).then((res) => {
this.userLoading = false;
if (res.success) {
this.userData = res.result.content;
this.totalUser = res.result.totalElements;
}
});
},
handleSearchUser() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.getDataList();
},
handleResetUser() {
this.$refs.searchForm.resetFields();
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.$refs.dep.clearSelect();
this.searchForm.departmentId = "";
// 重新加载数据
this.getDataList();
},
setData(v) {
this.selectUsers = v;
this.$emit("on-change", this.selectUsers);
this.$emit("input", this.selectUsers);
},
chooseUser(v) {
// 去重
let that = this;
let flag = true;
this.selectUsers.forEach((e) => {
if (v.id == e.id) {
that.$Message.warning("已经添加过啦,请勿重复选择");
flag = false;
}
});
if (flag) {
let u = {
id: v.id,
username: v.username,
nickname: v.nickname,
};
this.selectUsers.push(u);
this.$emit("on-change", this.selectUsers);
this.$emit("input", this.selectUsers);
this.$Message.success(`添加用户 ${v.nickname} 成功`);
}
},
clearData() {
this.selectUsers = [];
this.$emit("on-change", this.selectUsers);
this.$emit("input", this.selectUsers);
},
handleCancelUser(event, id) {
// 删除所选用户
this.selectUsers = this.selectUsers.filter((e) => {
return e.id != id;
});
this.$emit("on-change", this.selectUsers);
this.$emit("input", this.selectUsers);
this.$Message.success("删除所选用户成功");
},
setCurrentValue(value) {
if (value === this.selectUsers) {
return;
}
this.selectUsers = value;
},
},
watch: {
value(val) {
this.setCurrentValue(val);
},
},
mounted() {
this.getDataList();
},
};
</script>
<style lang="less">
.user-choose {
.clear {
font-size: 12px;
margin-left: 15px;
color: #40a9ff;
cursor: pointer;
}
.collapse {
font-size: 12px;
margin-top: 15px;
width: 500px;
}
}
.user-choose-drawer {
.select-count {
font-weight: 600;
color: #40a9ff;
}
.drop-down {
margin-left: 5px;
}
}
</style>
\ No newline at end of file
......@@ -71,13 +71,6 @@
style="width: 180px"
/>
</FormItem>
<FormItem label="部门" prop="department">
<department-choose
@on-change="handleSelectDep"
style="width: 180px"
ref="dep"
></department-choose>
</FormItem>
<span v-if="drop">
<FormItem label="手机号" prop="mobile">
<Input
......@@ -163,12 +156,10 @@
<script>
import { searchUserByName, getUserListData } from "@/api/index";
import departmentChoose from "./department-choose";
import dict from "@/views/my-components/xboot/dict";
export default {
name: "userSelect",
components: {
departmentChoose,
dict,
},
props: {
......@@ -286,29 +277,12 @@ export default {
});
},
},
{
title: "所属部门",
key: "departmentTitle",
width: 120,
},
{
title: "手机",
key: "mobile",
width: 125,
sortable: true,
},
{
title: "邮箱",
key: "email",
width: 180,
sortable: true,
},
{
title: "性别",
key: "sex",
width: 70,
align: "center",
},
{
title: "创建时间",
key: "createTime",
......@@ -425,9 +399,6 @@ export default {
}
}
},
handleSelectDep(v) {
this.searchForm.departmentId = v;
},
dropDown() {
if (this.drop) {
this.dropDownContent = "展开";
......@@ -466,7 +437,6 @@ export default {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.$refs.dep.clearSelect();
this.searchForm.departmentId = "";
// 重新加载数据
this.getDataList();
},
......
......@@ -59,9 +59,6 @@
</Row>
</Card>
<check-password ref="checkPass" @on-success="resetPass" />
<addEdit :data="form" :type="showType" v-model="showUser" @on-submit="getDataList" />
</div>
......@@ -76,7 +73,6 @@ import {
getAllUserData,
resetUserPass,
} from "@/api/index";
import checkPassword from "@/views/my-components/xboot/check-password";
import addEdit from "./addEdit.vue";
import {
shortcuts
......@@ -85,7 +81,6 @@ import dict from "@/views/my-components/xboot/dict";
export default {
name: "user-manage",
components: {
checkPassword,
addEdit,
dict,
},
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment