init
This commit is contained in:
lijing
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div id="app" v-if="isLogin">
|
||||
<layout-old v-if="isLayoutOld" :layoutData="layoutData"></layout-old>
|
||||
<layout v-else :layoutData="layoutData"></layout>
|
||||
<div :class="['base-wrap-main', layoutData.isAlone ? 'alone-page' : '']">
|
||||
<transition v-if="!isNoAuthority" :name="!isBack ? 'fade' : 'back'" :mode="!isBack ? 'out-in' : 'in-out'">
|
||||
<router-view v-if="isRouterAlive"></router-view>
|
||||
</transition>
|
||||
<div v-else class="no-authority-wrap">
|
||||
<h3>暂无权限</h3>
|
||||
<h6>如需查看，请联络管理员为您分配权限</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import layout from "./frame/layout.vue";
|
||||
import layoutOld from "./frame/layout_old.vue";
|
||||
|
||||
const appendLink = (baseHost, name, version) => {
|
||||
var headHTML = `<link type="text/css" rel="stylesheet" href="${baseHost}/BschHome/front/css/${name}.css?v=${version}">`;
|
||||
$("head:eq(0)").append(headHTML);
|
||||
};
|
||||
|
||||
export default {
|
||||
components: { layout, layoutOld },
|
||||
name: "app",
|
||||
data() {
|
||||
return {
|
||||
isRouterAlive: true,
|
||||
isBack: false,
|
||||
isLogin: false,
|
||||
isNoAuthority: false,
|
||||
layoutData: {},
|
||||
isLayoutOld: conf.isLayoutOld,
|
||||
};
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
reload: this.reload,
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
try {
|
||||
const baseHost = window.conf.baseHost,
|
||||
ssoHost = window.conf.ssoHost;
|
||||
var version = localStorage.getItem("themeVersion") || new Date().getTime();
|
||||
appendLink(baseHost, "base.layout", version);
|
||||
var info = await this.getUserInfo();
|
||||
var bschResult = await this.getBschHomeJsonp(baseHost, info.id);
|
||||
this.setCurrentRole(bschResult, baseHost);
|
||||
var mod = await this.getUserMod();
|
||||
this.layoutInit(info, mod, bschResult.appList, baseHost, ssoHost);
|
||||
this.isLogin = true;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
this.$Message.error("载入用户信息失败！");
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
var isTrident = navigator.userAgent.indexOf("Trident") > -1; // 是否是IE内核
|
||||
if (isTrident) {
|
||||
$("html").css("overflow", "hidden");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reload() {
|
||||
this.isRouterAlive = false;
|
||||
this.$nextTick(() => (this.isRouterAlive = true));
|
||||
},
|
||||
getUserInfo() {
|
||||
const _this = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
_this.$api.get(
|
||||
APIConfig.Base.GetUserInfo,
|
||||
null,
|
||||
resp => {
|
||||
resolve(resp.data);
|
||||
},
|
||||
error => reject(error)
|
||||
);
|
||||
});
|
||||
},
|
||||
getUserMod() {
|
||||
const _this = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
_this.$api.get(
|
||||
APIConfig.Base.GetUserMod,
|
||||
null,
|
||||
resp => {
|
||||
resolve(resp.data);
|
||||
},
|
||||
error => reject(error)
|
||||
);
|
||||
});
|
||||
},
|
||||
getBschHomeJsonp(baseHost, userId) {
|
||||
var version = localStorage.getItem("themeVersion") || new Date().getTime();
|
||||
return new Promise((resolve, reject) => {
|
||||
var crossStorage,
|
||||
crossUrl = `${baseHost}/BschHome/front/libs/cross`;
|
||||
try {
|
||||
var HEAD = document.getElementsByTagName("head")[0];
|
||||
var node = document.createElement("script");
|
||||
node.src = `${crossUrl}/client.js?v=${version}`;
|
||||
node.onload = function () {
|
||||
crossStorage = new Client(`${crossUrl}/middle.html?v=${version}`, () => {
|
||||
crossStorage.getRoteData({ userId }, resp => {
|
||||
resolve(resp);
|
||||
});
|
||||
|
||||
//分页数据默认条数
|
||||
const customPageCount = localStorage.getItem("customPageCount");
|
||||
crossStorage.getItem("customPageCount", resp => {
|
||||
if (resp == null) return false;
|
||||
if (customPageCount == null) localStorage.setItem("customPageCount", resp);
|
||||
else if (resp != customPageCount) {
|
||||
crossStorage.setItem({
|
||||
key: "customPageCount",
|
||||
value: customPageCount,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
HEAD.appendChild(node);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
console.error("获取身份信息失败！");
|
||||
resolve(null);
|
||||
}
|
||||
});
|
||||
},
|
||||
layoutInit(info, mod, appList, baseHost, ssoHost) {
|
||||
this.layoutData.appName = "应用页规范示例";
|
||||
this.layoutData.baseHost = baseHost;
|
||||
this.layoutData.ssoHost = ssoHost;
|
||||
const routes = this.$router.options.routes;
|
||||
let arr = [];
|
||||
mod.forEach(element => {
|
||||
let iconIndex = routes.findIndex(x => typeof x.meta !== "undefined" && typeof x.meta.modId !== "undefined" && typeof x.meta.icon !== "undefined" && x.meta.modId == element.modId);
|
||||
let icon = iconIndex > -1 ? "iconfont " + routes[iconIndex].meta.icon : ""; //icon不传则为默认
|
||||
arr.push({
|
||||
id: element.id,
|
||||
name: element.name,
|
||||
modId: element.modId,
|
||||
page: element.page,
|
||||
children: element.children || [],
|
||||
icon,
|
||||
});
|
||||
});
|
||||
// arr[0].icon = "iconfont icon-apps"; //icon样式示例，参见static/style/font 目录
|
||||
this.layoutData.modList = arr.sort((a, b) => a.modId - b.modId);
|
||||
this.layoutData.isAlone = arr.length == 1; //当只有一个选项卡时，隐藏menu和nav
|
||||
let { id, name, profilePicture } = info;
|
||||
this.layoutData.userInfo = { id, name, avatar: profilePicture };
|
||||
this.layoutData.appList = appList || [];
|
||||
//无权限
|
||||
if (arr.length == 0) {
|
||||
this.layoutData.isAlone = true;
|
||||
this.isNoAuthority = true;
|
||||
}
|
||||
},
|
||||
setCurrentRole(result, baseHost) {
|
||||
if (result) {
|
||||
let { childId, roleId, schId } = result.checkRole;
|
||||
localStorage.setItem("currentRole", encodeURI(JSON.stringify({ childId, roleId, schId })));
|
||||
localStorage.setItem("themeVersion", result.themeVersion);
|
||||
appendLink(baseHost, result.themeName, result.themeVersion);
|
||||
} else {
|
||||
appendLink(baseHost, "default-theme", new Date().getTime());
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
#loging-box,
|
||||
.mop-load-div {
|
||||
display: none;
|
||||
}
|
||||
/* 开始过渡阶段,动画出去阶段 */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 1ms cubic-bezier(0, 0.99, 1, 0.03);
|
||||
}
|
||||
/* 进入开始 */
|
||||
.fade-enter {
|
||||
// transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
/* 出去终点 */
|
||||
.fade-leave-active {
|
||||
// transform: translateY(-10px);
|
||||
// opacity: 0;
|
||||
}
|
||||
|
||||
.back-enter-active,
|
||||
.back-leave-active {
|
||||
transition: all 1ms cubic-bezier(0, 0.99, 1, 0.03);
|
||||
}
|
||||
/* 进入开始 */
|
||||
.back-enter {
|
||||
display: none;
|
||||
}
|
||||
/* 出去终点 */
|
||||
.back-leave-active {
|
||||
display: none;
|
||||
}
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
import Vue from "vue";
|
||||
import confirm from "./confirm.vue";
|
||||
export default props => {
|
||||
// 创建实例
|
||||
const vm = new Vue({
|
||||
render(h) {
|
||||
// h为createElement，返回VNode虚拟Node
|
||||
return h(confirm, { props });
|
||||
}
|
||||
}).$mount();
|
||||
|
||||
// 手动挂载实例到body
|
||||
document.body.appendChild(vm.$el);
|
||||
|
||||
const comp = vm.$children[0];
|
||||
// 销毁方法
|
||||
// comp.remove = function() {
|
||||
// document.body.removeChild(vm.$el);
|
||||
// vm.$destroy();
|
||||
// };
|
||||
// 返回组件
|
||||
return comp;
|
||||
};
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<Modal v-model="modal" @on-visible-change="showChange" :title="title || '提示'">
|
||||
<Alert type="warning" class="mb-1" show-icon>
|
||||
<Icon type="ios-bulb-outline" :class="{ 'mt-5': !info }" slot="icon" :size="28"></Icon>
|
||||
<div v-if="msg" :class="['message-box', info ? '' : 'mt-10 mb-10 ml-10']">{{ msg }}</div>
|
||||
<span v-if="info" slot="desc">{{ info }}</span>
|
||||
</Alert>
|
||||
<div slot="footer">
|
||||
<Button type="primary" @click="ok">确定</Button>
|
||||
<Button @click="cancle">取消</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: String,
|
||||
msg: String,
|
||||
info: String,
|
||||
onOk: Function,
|
||||
onCancel: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modal: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.modal = true;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
ok() {
|
||||
this.modal = false;
|
||||
typeof this.onOk === "function" && this.onOk();
|
||||
},
|
||||
cancle() {
|
||||
this.modal = false;
|
||||
typeof this.onCancel === "function" && this.onCancel();
|
||||
},
|
||||
showChange(state) {
|
||||
if (!state) this.destroy();
|
||||
},
|
||||
destroy() {
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(this.$el);
|
||||
}, 300);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.my-confirwm {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.message-box {
|
||||
font-size: 16px;
|
||||
color: #17233d;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,332 @@
|
||||
<template>
|
||||
<div class="page-wrapper">
|
||||
<div class="main-container">
|
||||
<div class="fix mb-12" v-if="true">
|
||||
<Button class="fl" type="primary" size="large">新增数据</Button>
|
||||
<Dropdown class="fr">
|
||||
<Button type="success" size="large">
|
||||
导入/导出
|
||||
<Icon type="ios-arrow-down"></Icon>
|
||||
</Button>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>批量导入文件</DropdownItem>
|
||||
<DropdownItem>批量导出文件</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Button class="fr mr-12" type="success" size="large">上传文件</Button>
|
||||
<Button class="fr mr-12" size="large">普通操作</Button>
|
||||
</div>
|
||||
<div class="search-wrap fix" v-if="true">
|
||||
<div class="search-wrap_date fl">
|
||||
<DatePicker
|
||||
type="date"
|
||||
placeholder="开始时间"
|
||||
v-model="dataParmas.startDt"
|
||||
@on-change="search"
|
||||
></DatePicker>
|
||||
<span class="ml-8 mr-8">至</span>
|
||||
<DatePicker
|
||||
type="date"
|
||||
placeholder="结束时间"
|
||||
v-model="dataParmas.endDt"
|
||||
@on-change="search"
|
||||
></DatePicker>
|
||||
</div>
|
||||
<Select
|
||||
v-model="dataParmas.classId"
|
||||
@on-change="search"
|
||||
class="search-wrap_sel ml-12"
|
||||
clearable
|
||||
placeholder="请选择年级"
|
||||
>
|
||||
<Option :value="1">高一</Option>
|
||||
<Option :value="2">高二</Option>
|
||||
<Option :value="3">高三</Option>
|
||||
</Select>
|
||||
<Input
|
||||
placeholder="输入关键字搜索"
|
||||
class="fr"
|
||||
search
|
||||
@on-search="search"
|
||||
suffix="ios-search"
|
||||
style="width: 200px"
|
||||
v-model="dataParmas.name"
|
||||
/>
|
||||
<Tooltip class="fr mr-15" content="查看代码">
|
||||
<Button icon="md-code" @click="showCode({ name: '默认列表', url: 'default.vue' })"></Button>
|
||||
</Tooltip>
|
||||
<!-- <Button type="primary" class="fl ml-10" @click="search">搜索</Button> -->
|
||||
</div>
|
||||
<!-- {{ useTableHeight({ otherH: 4 }) }} -->
|
||||
<!-- <div :style="{ background: 'green', height: useTableHeight({ otherH: 0 }) + 'px' }"></div> -->
|
||||
<Table
|
||||
:columns="columns"
|
||||
:data="listData"
|
||||
@on-selection-change="selectChange"
|
||||
class="link-table table-bottom-box"
|
||||
:height="useTableHeight({ isSearch: true, isOperat: true })"
|
||||
no-data-text="暂无数据"
|
||||
></Table>
|
||||
<div class="page-panel">
|
||||
<div class="fl ml-15 align-middle">
|
||||
<Button type="error" ghost @click="removeData">删除</Button>
|
||||
</div>
|
||||
<Page
|
||||
class="page-box"
|
||||
:total="total"
|
||||
:current="dataParmas.page"
|
||||
:page-size="dataParmas.count"
|
||||
:page-size-opts="[10, 20, 30, 40]"
|
||||
@on-page-size-change="pageSizeUpdate"
|
||||
@on-change="pageUpdate"
|
||||
placement="top"
|
||||
show-total
|
||||
show-sizer
|
||||
></Page>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myConfirm from "../components/myConfirm";
|
||||
import { self_viewport } from "../mixins/self_viewport";
|
||||
export default {
|
||||
mixins: [self_viewport],
|
||||
data() {
|
||||
return {
|
||||
dataUrl: APIConfig.Leave.GetLeaveList,
|
||||
columns: [
|
||||
{
|
||||
type: "selection",
|
||||
width: 60,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
type: "index",
|
||||
title: "序号",
|
||||
width: 70,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "开始时间",
|
||||
width: 120,
|
||||
align: "center",
|
||||
key: "leave_date",
|
||||
},
|
||||
{
|
||||
title: "结束时间",
|
||||
width: 120,
|
||||
align: "center",
|
||||
key: "leave_enddate",
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
width: 100,
|
||||
align: "center",
|
||||
key: "leave_typeName",
|
||||
},
|
||||
{
|
||||
title: "请假人",
|
||||
width: 100,
|
||||
align: "center",
|
||||
key: "teaname",
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
align: "left",
|
||||
key: "status",
|
||||
width: 200,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "备注",
|
||||
align: "left",
|
||||
key: "remake",
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
width: 120,
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
render: (h, params) => {
|
||||
// #2d8cf0
|
||||
// #656667
|
||||
return [
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
attrs: {
|
||||
class: "operating-link",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.$Message.success("hi");
|
||||
},
|
||||
},
|
||||
},
|
||||
"文字"
|
||||
),
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
attrs: {
|
||||
class: "operating-link",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.$Message.success("hi");
|
||||
},
|
||||
},
|
||||
},
|
||||
"按钮"
|
||||
),
|
||||
];
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
width: 180,
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
render: (h, params) => {
|
||||
var operatingHandle = (info, iconClass, callback) => {
|
||||
return h(
|
||||
"Tooltip",
|
||||
{
|
||||
props: {
|
||||
content: info,
|
||||
placement: "bottom",
|
||||
transfer: true,
|
||||
},
|
||||
},
|
||||
[
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
attrs: {
|
||||
class: `operating-btn iconfont ${iconClass}`,
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
callback();
|
||||
},
|
||||
},
|
||||
},
|
||||
""
|
||||
),
|
||||
]
|
||||
);
|
||||
};
|
||||
return [
|
||||
operatingHandle("查看", "icon-browse", () => {
|
||||
console.log("查看", params.row);
|
||||
this.$Message.success("hi");
|
||||
}),
|
||||
operatingHandle("编辑", "icon-edit", () => {
|
||||
console.log("编辑", params.row);
|
||||
this.$Message.success("hi");
|
||||
}),
|
||||
operatingHandle("撤销", "icon-back disabled", () => {
|
||||
console.log("撤销", params.row);
|
||||
this.$Message.success("hi");
|
||||
}),
|
||||
operatingHandle("删除", "icon-ashbin", () => {
|
||||
console.log("删除", params.row);
|
||||
myConfirm({
|
||||
title: "删除",
|
||||
msg: "确定删除吗？",
|
||||
info: "删除后不可恢复",
|
||||
onOk: () => {
|
||||
this.$Message.success("操作成功");
|
||||
},
|
||||
});
|
||||
}),
|
||||
];
|
||||
},
|
||||
},
|
||||
],
|
||||
dataParmas: {
|
||||
name: "",
|
||||
classId: null,
|
||||
startDt: null,
|
||||
endDt: null,
|
||||
page: 1,
|
||||
count: 10,
|
||||
},
|
||||
listData: [],
|
||||
selectList: [],
|
||||
tableHeight: 0,
|
||||
total: 30,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.dataParmas.count = parseInt(localStorage.getItem("customPageCount") || 10);
|
||||
this.getData();
|
||||
},
|
||||
mounted() {
|
||||
const _this = this;
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
const _this = this;
|
||||
let item = {},
|
||||
{ dataUrl, dataParmas } = this;
|
||||
for (const key in dataParmas) {
|
||||
const element = dataParmas[key];
|
||||
item[key] = element;
|
||||
}
|
||||
|
||||
_this.$api.get(dataUrl, item, resp => {
|
||||
let rData = JSON.parse(JSON.stringify(resp.data));
|
||||
if (_this.dataFilter) _this.listData = this.dataFilter(rData);
|
||||
else _this.listData = resp.data;
|
||||
});
|
||||
},
|
||||
removeData() {
|
||||
if (this.selectList.length == 0) this.$Message.info("请选择");
|
||||
console.log(this.selectList.map(x => x.SerID));
|
||||
},
|
||||
search() {
|
||||
this.$Message.success("search");
|
||||
this.getData();
|
||||
},
|
||||
selectChange(selection) {
|
||||
this.selectList = selection;
|
||||
},
|
||||
pageUpdate(page) {
|
||||
this.dataParmas.page = page;
|
||||
this.getData();
|
||||
},
|
||||
pageSizeUpdate(size) {
|
||||
this.dataParmas.page = 1;
|
||||
this.dataParmas.count = size;
|
||||
localStorage.setItem("customPageCount", size);
|
||||
this.getData();
|
||||
},
|
||||
reloadData() {
|
||||
this.getData();
|
||||
},
|
||||
|
||||
dataFilter(data) {
|
||||
data.forEach((element, index) => {
|
||||
let type = index % 4;
|
||||
var arrText = ["审核中", "审核通过", "审核撤销", "审核拒绝"];
|
||||
var arrClass = ["shenhe", "tongguo", "chexiao", "jujue"];
|
||||
element.status = "朱浩东西 " + arrText[type];
|
||||
let className = `status-${arrClass[type]}`;
|
||||
|
||||
element.cellClassName = {
|
||||
status: className,
|
||||
};
|
||||
});
|
||||
console.log(data);
|
||||
return data;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="main-wrapper">
|
||||
<div class="main-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="main-wrapper">
|
||||
<div class="main-container">
|
||||
<ul class="fix">
|
||||
<li v-for="item in typeData" class="fl">
|
||||
<type-set-box :type="{ name: item.name, id: item.id }" :active="item.active" @active="activeSave" @edit="editSave" @remove="removeSave" />
|
||||
</li>
|
||||
</ul>
|
||||
<br />
|
||||
<br />
|
||||
<Tooltip content="查看代码">
|
||||
<Button icon="md-code" @click="showCode({ name: '字段管理', url: 'field.vue' })"></Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myConfirm from "../components/myConfirm";
|
||||
import TypeSetBox from "../components/type_set_box.vue";
|
||||
|
||||
export default {
|
||||
components: { TypeSetBox },
|
||||
data() {
|
||||
return {
|
||||
typeData: [
|
||||
{
|
||||
id: 1,
|
||||
name: "矿泉水",
|
||||
active: true, //是否启用
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "矿泉水",
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "矿泉水",
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "矿泉水矿泉水矿泉水矿泉水矿泉水",
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "矿泉水",
|
||||
active: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
activeSave(id) {
|
||||
console.log(id);
|
||||
var typeFind = this.typeData.find(x => x.id == id);
|
||||
myConfirm({
|
||||
title: "修改状态",
|
||||
msg: "确定修改该物品状态吗？",
|
||||
info: (!typeFind.active ? "启用" : "停用") + "状态",
|
||||
onOk: () => {
|
||||
typeFind.active = !typeFind.active;
|
||||
this.$Message.success("操作成功！");
|
||||
},
|
||||
onCancel: () => {
|
||||
this.$Message.info("取消操作！");
|
||||
},
|
||||
});
|
||||
},
|
||||
editSave(id, name) {
|
||||
this.$Message.success("修改成功！");
|
||||
},
|
||||
removeSave(id) {
|
||||
myConfirm({
|
||||
msg: "确定删除该物品吗？",
|
||||
onOk: () => {
|
||||
let index = this.typeData.findIndex(x => x.id == id);
|
||||
this.typeData.splice(index, 1);
|
||||
this.$Message.success("删除成功!");
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div :id="domId" :ref="domId" class="ztree"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
require("@public/libs/ztree/zTreeStyle.css");
|
||||
import "@public/libs/ztree/jquery.ztree.all.min.js";
|
||||
export default {
|
||||
props: {
|
||||
treeData: {
|
||||
type: Object,
|
||||
},
|
||||
setting: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
domId: "",
|
||||
treeSetting: {
|
||||
view: {
|
||||
dblClickExpand: false,
|
||||
showIcon: false,
|
||||
},
|
||||
check: {
|
||||
enable: false,
|
||||
},
|
||||
callback: {},
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.$watch("treeData", val => {
|
||||
if (val) {
|
||||
this.$nextTick(() => {
|
||||
this.initTree(this.treeData, this.domId);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.domId = this.uuid();
|
||||
},
|
||||
methods: {
|
||||
uuid() {
|
||||
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
|
||||
var r = (Math.random() * 16) | 0,
|
||||
v = c == "x" ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
},
|
||||
initTree(_data, _domId) {
|
||||
const _this = this;
|
||||
_this.treeSetting.callback.onClick = (event, treeId, treeNode, clickFlag) => {
|
||||
// console.log(event, treeId, treeNode, clickFlag);
|
||||
_this.$emit("on-tree-click", treeNode);
|
||||
};
|
||||
var zNodes = _this.openFistNode(_data);
|
||||
$.fn.zTree.init($("#" + _domId), _this.treeSetting, zNodes);
|
||||
var treeObj = $.fn.zTree.getZTreeObj(_domId);
|
||||
var nodes = treeObj.getNodes();
|
||||
if (nodes && nodes.length > 0) {
|
||||
setTimeout(function () {
|
||||
$("#" + nodes[0].tId + "_a").click();
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
openFistNode(_zNodes) {
|
||||
//展开一级节点
|
||||
if (_zNodes && _zNodes.length > 0) {
|
||||
for (var key in _zNodes) {
|
||||
if (_zNodes.hasOwnProperty(key)) {
|
||||
var element = _zNodes[key];
|
||||
element.open = true;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
_zNodes.open = true;
|
||||
}
|
||||
return _zNodes;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,34 @@
|
||||
export const self_viewport = {
|
||||
data() {
|
||||
return {
|
||||
height: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
useTableHeight() {
|
||||
return (settings = {}) => {
|
||||
let { isSearch = true, isPage = true, otherH = 0 } = settings;
|
||||
let bodyH = this.height,
|
||||
headerH = 100,
|
||||
paddingH = 15,
|
||||
searchH = 62 + 10,
|
||||
pageH = 62,
|
||||
borderH = 4;
|
||||
let tableH = bodyH - headerH - paddingH - borderH;
|
||||
isSearch && (tableH -= searchH);
|
||||
isPage && (tableH -= pageH);
|
||||
otherH > 0 && (tableH -= otherH);
|
||||
console.log(tableH);
|
||||
return tableH;
|
||||
};
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.height = document.body.clientHeight;
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
this.height = document.body.clientHeight;
|
||||
})();
|
||||
};
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div>
|
||||
<Table :columns="columns" :data="listData" @on-selection-change="selectChange" class="link-table table-bottom-box" :height="tableHeight" no-data-text="暂无数据"></Table>
|
||||
<div class="page-panel">
|
||||
<div class="fl ml-15 align-middle">
|
||||
<slot :sel-ids="selectList"></slot>
|
||||
</div>
|
||||
<Page
|
||||
class="page-box fr mr-5 align-middle"
|
||||
:total="total"
|
||||
:current="dataParmas.page"
|
||||
:page-size="dataParmas.count"
|
||||
:page-size-opts="[10, 20, 30, 40]"
|
||||
@on-page-size-change="pageSizeUpdate"
|
||||
@on-change="pageUpdate"
|
||||
placement="top"
|
||||
show-total
|
||||
show-sizer
|
||||
></Page>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
tableHeight: {
|
||||
default: 0,
|
||||
type: Number,
|
||||
},
|
||||
dataUrl: {
|
||||
default: "",
|
||||
type: String,
|
||||
},
|
||||
dataParmas: {
|
||||
default: {},
|
||||
type: Object,
|
||||
},
|
||||
dataFilter: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
columns: {
|
||||
default: [],
|
||||
type: Array,
|
||||
},
|
||||
autoLoad: {
|
||||
default: true,
|
||||
Type: Boolean,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
listData: [],
|
||||
selectList: [],
|
||||
total: 30,
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.dataParmas.page = 1;
|
||||
this.dataParmas.count = parseInt(localStorage.getItem("customPageCount") || 10);
|
||||
if (this.autoLoad) this.getData();
|
||||
},
|
||||
|
||||
methods: {
|
||||
getData() {
|
||||
const _this = this;
|
||||
let item = {},
|
||||
{ dataUrl, dataParmas } = this;
|
||||
// console.log("dataParmas", dataParmas);
|
||||
for (const key in dataParmas) {
|
||||
const element = dataParmas[key];
|
||||
item[key] = element;
|
||||
}
|
||||
_this.$api.get(dataUrl, item, resp => {
|
||||
let rData = resp.data;
|
||||
if (typeof _this.dataFilter === "function") {
|
||||
let fData = _this.dataFilter(rData);
|
||||
_this.listData = JSON.parse(JSON.stringify(fData));
|
||||
} else _this.listData = rData;
|
||||
});
|
||||
},
|
||||
selectChange(selection) {
|
||||
this.selectList = selection;
|
||||
},
|
||||
pageUpdate(page) {
|
||||
this.dataParmas.page = page;
|
||||
this.getData();
|
||||
},
|
||||
pageSizeUpdate(size) {
|
||||
this.dataParmas.page = 1;
|
||||
this.dataParmas.count = size;
|
||||
localStorage.setItem("customPageCount", size);
|
||||
this.getData();
|
||||
},
|
||||
reloadData() {
|
||||
this.getData();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div class="main-wrapper">
|
||||
<Tabs class="tabs-panel" type="card" v-model="tabIndex">
|
||||
<TabPane label="普通分页" name="1"></TabPane>
|
||||
<TabPane label="多层tab" name="2"></TabPane>
|
||||
<TabPane label="带有提示" name="3"></TabPane>
|
||||
</Tabs>
|
||||
<!-- <div class="tabs-panel" style="background: green; height: 30px"></div> -->
|
||||
<div v-show="tabIndex == 1" class="main-container">
|
||||
<div class="fix mb-12" v-if="true">
|
||||
<Button class="fl" type="primary" size="large">新增数据</Button>
|
||||
<Dropdown class="fr">
|
||||
<Button type="success" size="large">
|
||||
导入\导出
|
||||
<Icon type="ios-arrow-down"></Icon>
|
||||
</Button>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>批量导入文件</DropdownItem>
|
||||
<DropdownItem>批量导出文件</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Button class="fr mr-12" type="success" size="large">上传文件</Button>
|
||||
<Button class="fr mr-12" size="large">普通操作</Button>
|
||||
</div>
|
||||
<div class="search-wrap fix">
|
||||
<div class="search-wrap_date fl">
|
||||
<DatePicker
|
||||
type="date"
|
||||
placeholder="开始时间"
|
||||
v-model="dataParmas.startDt"
|
||||
@on-change="search"
|
||||
></DatePicker>
|
||||
<span class="ml-8 mr-8">至</span>
|
||||
<DatePicker
|
||||
type="date"
|
||||
placeholder="结束时间"
|
||||
v-model="dataParmas.endDt"
|
||||
@on-change="search"
|
||||
></DatePicker>
|
||||
</div>
|
||||
<Input
|
||||
placeholder="输入关键字搜索"
|
||||
class="fr"
|
||||
search
|
||||
@on-search="search"
|
||||
suffix="ios-search"
|
||||
style="width: 200px"
|
||||
v-model="dataParmas.name"
|
||||
/>
|
||||
<Tooltip class="fr mr-15" content="查看代码">
|
||||
<Button icon="md-code" @click="showCode({ name: 'tabs页', url: 'tabs.vue' })"></Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<table-page
|
||||
v-show="useTableHeight({ isTabs: true }) > 0"
|
||||
:tableHeight="useTableHeight({ isTabs: true })"
|
||||
:dataFilter="dataFilter"
|
||||
:dataUrl="tableUrl"
|
||||
:columns="columns"
|
||||
:dataParmas="dataParmas"
|
||||
ref="tablePage"
|
||||
>
|
||||
<template v-slot="slotProps">
|
||||
<Button type="error" ghost @click="removeData(slotProps.selIds)">删除</Button>
|
||||
</template>
|
||||
</table-page>
|
||||
</div>
|
||||
<div v-show="tabIndex == 2" class="main-container">
|
||||
<Tabs>
|
||||
<TabPane label="二级tab1" name="1"></TabPane>
|
||||
<TabPane label="二级tab2" name="2"></TabPane>
|
||||
</Tabs>
|
||||
<div v-for="n in 100">{{ n }}</div>
|
||||
</div>
|
||||
<div v-show="tabIndex == 3" class="main-container">
|
||||
<Alert show-icon>
|
||||
请注意
|
||||
<template slot="desc">
|
||||
此处设置资源管理的节点 请假统计的时间按此处设置的时间计算为1天
|
||||
<br />
|
||||
如：此处设置的工作时间为8小时，一天按8小时计算。此处设置的工作时间为9小时，则一天按9小时计算。以此类推
|
||||
</template>
|
||||
</Alert>
|
||||
<div class="search-wrap fix" v-if="true">
|
||||
<div class="search-wrap_date fl">
|
||||
<DatePicker
|
||||
type="date"
|
||||
placeholder="开始时间"
|
||||
v-model="dataParmas.startDt"
|
||||
@on-change="search"
|
||||
></DatePicker>
|
||||
<span class="ml-8 mr-8">至</span>
|
||||
<DatePicker
|
||||
type="date"
|
||||
placeholder="结束时间"
|
||||
v-model="dataParmas.endDt"
|
||||
@on-change="search"
|
||||
></DatePicker>
|
||||
</div>
|
||||
<Select
|
||||
v-model="dataParmas.classId"
|
||||
@on-change="search"
|
||||
class="search-wrap_sel ml-12"
|
||||
clearable
|
||||
placeholder="请选择年级"
|
||||
>
|
||||
<Option :value="1">高一</Option>
|
||||
<Option :value="2">高二</Option>
|
||||
<Option :value="3">高三</Option>
|
||||
</Select>
|
||||
<Input
|
||||
placeholder="输入关键字搜索"
|
||||
class="fr"
|
||||
search
|
||||
@on-search="search"
|
||||
suffix="ios-search"
|
||||
style="width: 200px"
|
||||
v-model="dataParmas.name"
|
||||
/>
|
||||
<!-- <Button type="primary" class="fl ml-10" @click="search">搜索</Button> -->
|
||||
</div>
|
||||
<!-- <div class="search-wrap mb-10 fix">
|
||||
<Input style="width: 250px" class="fl" search enter-button placeholder="输入关键字搜索" />
|
||||
</div> -->
|
||||
<table-page
|
||||
v-show="useTableHeight({ otherH: 114, isOperat: false, isTabs: true }) > 0"
|
||||
:tableHeight="useTableHeight({ otherH: 114, isOperat: false, isTabs: true })"
|
||||
:dataUrl="tableUrl"
|
||||
:columns="columns"
|
||||
:dataParmas="dataParmas"
|
||||
:dataFilter="dataFilter"
|
||||
ref="tablePage2"
|
||||
>
|
||||
<template v-slot="slotProps">
|
||||
<Button type="error" ghost @click="removeData(slotProps.selIds)">删除</Button>
|
||||
</template>
|
||||
</table-page>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tablePage from "../components/table_page";
|
||||
import { self_viewport } from "../mixins/self_viewport";
|
||||
import myConfirm from "../components/myConfirm";
|
||||
export default {
|
||||
components: { tablePage },
|
||||
data() {
|
||||
return {
|
||||
tableUrl: APIConfig.Leave.GetLeaveList,
|
||||
columns: [
|
||||
{
|
||||
type: "selection",
|
||||
width: 60,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
type: "index",
|
||||
title: "序号",
|
||||
width: 70,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "开始时间",
|
||||
width: 120,
|
||||
align: "center",
|
||||
key: "leave_date",
|
||||
},
|
||||
{
|
||||
title: "结束时间",
|
||||
width: 120,
|
||||
align: "center",
|
||||
key: "leave_enddate",
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
width: 100,
|
||||
align: "center",
|
||||
key: "leave_typeName",
|
||||
},
|
||||
{
|
||||
title: "请假人",
|
||||
width: 100,
|
||||
align: "center",
|
||||
key: "teaname",
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
align: "left",
|
||||
key: "status",
|
||||
width: 200,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "备注",
|
||||
align: "left",
|
||||
key: "remake",
|
||||
tooltip: true,
|
||||
},
|
||||
],
|
||||
dataParmas: {
|
||||
name: "",
|
||||
startDt: null,
|
||||
endDt: null,
|
||||
},
|
||||
tabIndex: "1",
|
||||
};
|
||||
},
|
||||
mixins: [self_viewport],
|
||||
created() {},
|
||||
|
||||
methods: {
|
||||
removeData(row) {
|
||||
if (row.length == 0) {
|
||||
this.$Message.info("请选择数据");
|
||||
return;
|
||||
}
|
||||
myConfirm({
|
||||
title: "删除",
|
||||
msg: "确定删除选中的数据吗？",
|
||||
info: "删除后不可恢复",
|
||||
onOk: () => {
|
||||
this.$Message.success("操作成功");
|
||||
this.$refs.tablePage.reloadData();
|
||||
},
|
||||
});
|
||||
},
|
||||
search() {
|
||||
this.$refs.tablePage.reloadData();
|
||||
},
|
||||
dataFilter(data) {
|
||||
data.forEach((element, index) => {
|
||||
let type = index % 4;
|
||||
var arrText = ["审核中", "审核通过", "审核撤销", "审核拒绝"];
|
||||
var arrClass = ["shenhe", "tongguo", "chexiao", "jujue"];
|
||||
element.status = "朱浩东西 " + arrText[type];
|
||||
let className = `status-${arrClass[type]}`;
|
||||
element.cellClassName = {
|
||||
status: className,
|
||||
};
|
||||
});
|
||||
return data;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="page-wrapper tree-wrapper">
|
||||
<div class="tree-container">
|
||||
<my-tree :treeData="treeData" @on-tree-click="treeLink"></my-tree>
|
||||
</div>
|
||||
<div class="main-container">
|
||||
<div class="search-wrap fix">
|
||||
<Select class="search-wrap_sel">
|
||||
<Option value="0">请选择</Option>
|
||||
<Option :value="n" v-for="n in 5">选项{{ n }}</Option>
|
||||
</Select>
|
||||
<Input
|
||||
placeholder="输入关键字搜索"
|
||||
class="fr"
|
||||
search
|
||||
@on-search="search"
|
||||
suffix="ios-search"
|
||||
style="width: 200px"
|
||||
v-model="dataParmas.name"
|
||||
/>
|
||||
|
||||
<!-- <Button class="fr" type="success">导出</Button>
|
||||
<Button class="fr mr-10" type="success">导入</Button> -->
|
||||
<Tooltip class="fr mr-15" content="查看代码">
|
||||
<Button icon="md-code" @click="showCode({ name: '树结构', url: 'tree.vue' })"></Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<table-page
|
||||
v-show="useTableHeight() > 0"
|
||||
:tableHeight="useTableHeight({ isOperat: false })"
|
||||
:dataUrl="tableUrl"
|
||||
:columns="columns"
|
||||
:dataParmas="dataParmas"
|
||||
:dataFilter="dataFilter"
|
||||
:autoLoad="false"
|
||||
ref="tablePage"
|
||||
>
|
||||
<template v-slot="slotProps">
|
||||
<Button type="error" ghost @click="removeData(slotProps.selIds)">删除</Button>
|
||||
</template>
|
||||
</table-page>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myTree from "../components/my_tree";
|
||||
import tablePage from "../components/table_page";
|
||||
import { self_viewport } from "../mixins/self_viewport";
|
||||
import myConfirm from "../components/myConfirm";
|
||||
export default {
|
||||
components: { tablePage, myTree },
|
||||
data() {
|
||||
return {
|
||||
treeData: {},
|
||||
tableUrl: APIConfig.Leave.GetLeaveList,
|
||||
columns: [
|
||||
{
|
||||
type: "selection",
|
||||
width: 60,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
type: "index",
|
||||
title: "序号",
|
||||
width: 70,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "开始时间",
|
||||
width: 120,
|
||||
align: "center",
|
||||
key: "leave_date",
|
||||
},
|
||||
{
|
||||
title: "结束时间",
|
||||
width: 120,
|
||||
align: "center",
|
||||
key: "leave_enddate",
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
width: 100,
|
||||
align: "center",
|
||||
key: "leave_typeName",
|
||||
},
|
||||
{
|
||||
title: "请假人",
|
||||
width: 100,
|
||||
align: "center",
|
||||
key: "teaname",
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
align: "left",
|
||||
key: "status",
|
||||
width: 200,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "备注",
|
||||
align: "center",
|
||||
key: "remake",
|
||||
tooltip: true,
|
||||
},
|
||||
],
|
||||
dataParmas: {
|
||||
groupId: 0,
|
||||
name: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
mixins: [self_viewport],
|
||||
mounted() {
|
||||
const _this = this;
|
||||
this.treeData = {
|
||||
id: 1556,
|
||||
name: "弘育信息技术高级中学",
|
||||
pid: 0,
|
||||
type: 2,
|
||||
no: "9999",
|
||||
children: [
|
||||
{
|
||||
id: 1562,
|
||||
name: "学生组",
|
||||
pid: 1556,
|
||||
type: 8,
|
||||
no: "9999",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
removeData(row) {
|
||||
if (row.length == 0) {
|
||||
this.$Message.info("请选择数据！");
|
||||
return;
|
||||
}
|
||||
myConfirm({
|
||||
title: "删除",
|
||||
msg: "确定删除选中的数据吗？",
|
||||
info: "删除后不可恢复",
|
||||
onOk: () => {
|
||||
this.$Message.success("操作成功");
|
||||
this.$refs.tablePage.reloadData();
|
||||
},
|
||||
});
|
||||
},
|
||||
search() {
|
||||
this.$refs.tablePage.reloadData();
|
||||
},
|
||||
treeLink(treeNode) {
|
||||
const _this = this;
|
||||
_this.dataParmas.groupId = treeNode.id;
|
||||
_this.$refs.tablePage.reloadData();
|
||||
},
|
||||
dataFilter(data) {
|
||||
data.forEach((element, index) => {
|
||||
let type = index % 4;
|
||||
var arrText = ["审核中", "审核通过", "审核撤销", "审核拒绝"];
|
||||
var arrClass = ["shenhe", "tongguo", "chexiao", "jujue"];
|
||||
element.status = "朱浩东西 " + arrText[type];
|
||||
let className = `status-${arrClass[type]}`;
|
||||
|
||||
element.cellClassName = {
|
||||
status: className,
|
||||
};
|
||||
});
|
||||
return data;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="type_set-box">
|
||||
<div class="type_name">
|
||||
<i class="iconfont icon-stop fl mr-10" v-if="!isEdit && !active" style="color: #ff5959"></i>
|
||||
<Input v-if="isEdit" v-model="type.name" ref="type_input" @on-blur="update" @on-enter="update" />
|
||||
<span v-else class="fl">{{ type.name }}</span>
|
||||
</div>
|
||||
<div class="type_action flex">
|
||||
<div class="action_item" @click="open">
|
||||
<span v-if="active">停用</span>
|
||||
<span v-else>启用</span>
|
||||
</div>
|
||||
<div class="action_edit" @click="edit">
|
||||
<span>编辑</span>
|
||||
</div>
|
||||
<div class="action_delete" @click="remove">
|
||||
<span>删除</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="divider2"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TypeSetBox",
|
||||
props: {
|
||||
type: {
|
||||
name: { type: String, default: "" },
|
||||
id: { type: String, default: "" },
|
||||
},
|
||||
active: { type: Boolean, default: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isEdit: false,
|
||||
eventType: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
type: {
|
||||
deep: true,
|
||||
handler(newVal) {
|
||||
if (this.isEdit) {
|
||||
this.isEdit = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
"type.name"(newVal) {
|
||||
if (this.isEdit) {
|
||||
this.isEdit = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.$emit("active", this.type.id);
|
||||
},
|
||||
edit() {
|
||||
this.isEdit = !this.isEdit;
|
||||
if (this.isEdit) this.$nextTick(() => this.$refs["type_input"].focus());
|
||||
},
|
||||
update(e) {
|
||||
if (!this.type.name) {
|
||||
this.$Message.error("值不得为空！");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.eventType == "") {
|
||||
this.eventType = e.type;
|
||||
this.isEdit = false;
|
||||
this.$emit("edit", this.type.id, this.type.name);
|
||||
setTimeout(() => {
|
||||
this.eventType = "";
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
remove() {
|
||||
this.$emit("remove", this.type.id);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.type_set-box {
|
||||
width: 222px;
|
||||
background: #ffffff;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 15px;
|
||||
.type_name {
|
||||
height: 66px;
|
||||
border: 1px solid #e9e9e9;
|
||||
border-bottom: none;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
line-height: 66px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
span {
|
||||
height: 24px;
|
||||
font-size: 15px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #272829;
|
||||
line-height: 24px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 222px;
|
||||
display: inline-block;
|
||||
}
|
||||
.iconfont {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
.type_action {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 222px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background: #f7f7f7;
|
||||
border-radius: 0px 0px 2px 2px;
|
||||
border-top: none;
|
||||
border: 1px solid #e9e9e9;
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
div {
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
div:hover {
|
||||
color: #6c91f0;
|
||||
}
|
||||
}
|
||||
.divider {
|
||||
// position: relative;
|
||||
height: 14px;
|
||||
width: 1px;
|
||||
background: #e8e8e8;
|
||||
// left: 73px;
|
||||
// top: -23px;
|
||||
float: left;
|
||||
margin-left: 71px;
|
||||
margin-top: -22px;
|
||||
}
|
||||
.divider2 {
|
||||
// position: relative;
|
||||
// left: 146px;
|
||||
// top: -37px;
|
||||
height: 14px;
|
||||
width: 1px;
|
||||
background: #e8e8e8;
|
||||
float: left;
|
||||
margin-left: 147px;
|
||||
margin-top: -22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="tabs-wrapper">
|
||||
<Tabs class="tabs-panel" type="card" v-model="tabIndex">
|
||||
<TabPane label="PC选择人员" name="1"></TabPane>
|
||||
<TabPane label="WebApp选择人员" name="2"></TabPane>
|
||||
</Tabs>
|
||||
<div class="main-container" v-show="tabIndex === '1'">
|
||||
<Checkbox v-model="isAddto">是否追加</Checkbox>
|
||||
<Button type="primary" @click="show">选择人员</Button>
|
||||
<Tooltip content="查看代码">
|
||||
<Button class="ml-15" icon="md-code" @click="showCode({ name: '选择人员', url: 'userCheck.vue' })"></Button>
|
||||
</Tooltip>
|
||||
<user-check ref="userCheck" :treeData="treeData" v-model="userids" @on-submit="submit" :isDisabled="isAddto" />
|
||||
<br />
|
||||
ids: {{ userids }}
|
||||
<br />
|
||||
names:{{ userNames }}
|
||||
</div>
|
||||
<div class="main-container" v-show="tabIndex === '2'">
|
||||
<div class="webapp-panel fl">
|
||||
<Button type="primary" @click="showWebAppUserCheck">选择人员</Button>
|
||||
<br />
|
||||
ids: {{ userids }}
|
||||
<br />
|
||||
names:{{ userNames }}
|
||||
<app-user-check v-model="userids" :treeData="treeData" @on-submit="submit" ref="userChecks"></app-user-check>
|
||||
</div>
|
||||
<p class="mt-30">../components/UserCheck 文件夹内</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userCheck from "../components/user_check.vue";
|
||||
import appUserCheck from "../components/UserCheck/index.vue";
|
||||
export default {
|
||||
components: { userCheck, appUserCheck },
|
||||
data() {
|
||||
return {
|
||||
treeData: [],
|
||||
tabIndex: "1",
|
||||
userids: [161240, 162190, 162666, 162667, 162698, 162699, 162710, 162711, 161225],
|
||||
userNames: [],
|
||||
isAddto: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const _this = this;
|
||||
this.treeData = [
|
||||
{
|
||||
name: "教师",
|
||||
data: [
|
||||
{
|
||||
name: "基础平台",
|
||||
data: _this.getTreeData2(),
|
||||
},
|
||||
{
|
||||
name: "教学组",
|
||||
data: _this.getTreeData2(),
|
||||
},
|
||||
{
|
||||
name: "自定义组",
|
||||
data: _this.getTreeData(3),
|
||||
},
|
||||
{
|
||||
name: "自定义组",
|
||||
data: _this.getTreeData(3),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "班级",
|
||||
data: [
|
||||
{
|
||||
name: "必修班",
|
||||
data: _this.getTreeData(4),
|
||||
},
|
||||
{
|
||||
name: "选修班",
|
||||
data: _this.getTreeData(5),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.$refs.userCheck.show();
|
||||
},
|
||||
submit(arr) {
|
||||
this.userNames = arr.map(x => x.name);
|
||||
},
|
||||
getTreeData(type) {
|
||||
return () =>
|
||||
new Promise((resolve, reject) => {
|
||||
console.time("time");
|
||||
function randomFun(index) {
|
||||
const id = Math.floor(Math.random() * index);
|
||||
return id;
|
||||
}
|
||||
var arr = Array.from({ length: 2000 }, (item, index) => {
|
||||
return {
|
||||
id: index + 1,
|
||||
name: `dep:${index + 1}`,
|
||||
pid: randomFun(index),
|
||||
};
|
||||
});
|
||||
function treeArr(arr = []) {
|
||||
arr.forEach(item => {
|
||||
const children = arr.filter(_ => _.pid === item.id);
|
||||
if (children.length) {
|
||||
item.children = children;
|
||||
}
|
||||
});
|
||||
return arr.find(item => item.pid === 0);
|
||||
}
|
||||
var tree = [treeArr(arr, 0)];
|
||||
setTimeout(() => {
|
||||
console.log("请求完成！");
|
||||
resolve(tree);
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
getTreeData2() {
|
||||
return () =>
|
||||
new Promise((resolve, reject) => {
|
||||
this.$api.get(APIConfig.Base.GetSchoolAll, null, resp => {
|
||||
console.log("请求完成！");
|
||||
resolve(resp.Data);
|
||||
});
|
||||
});
|
||||
},
|
||||
showWebAppUserCheck() {
|
||||
this.$refs["userChecks"].show();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,447 @@
|
||||
<template>
|
||||
<Modal v-model="modal" title="选择用户" width="720px" :mask-closable="false" :closable="false">
|
||||
<Tabs class="tabs-panel" type="card" v-if="firstTabIndex && firstTabIndex.length > 1" v-model="firstTabIndex" @on-click="firstTabChange">
|
||||
<TabPane v-for="(item, index) in firstTabData" :label="item" :name="index + ''"></TabPane>
|
||||
</Tabs>
|
||||
<AutoComplete @on-search="handleSearch" @on-select="handleSelect" placeholder="输入名字搜索" v-model="searchTreeName" :clearable="true" class="auto-box">
|
||||
<Option v-for="item in currentFlatten" :value="item.name">
|
||||
<span>{{ item.name }}</span>
|
||||
<span class="fr info">{{ item.group }}</span>
|
||||
</Option>
|
||||
</AutoComplete>
|
||||
<div class="tree-wrap fix">
|
||||
<div class="tree-panel fl">
|
||||
<ul class="tree-tab-ul fix">
|
||||
<li
|
||||
@click="secondTabChange(index)"
|
||||
:style="{ width: 100 / secondTabData.length + '%' }"
|
||||
:class="{ active: index == secondTabIndex, fl: true }"
|
||||
v-for="(item, index) in secondTabData"
|
||||
>
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tree-box">
|
||||
<div :id="ztreeDomId" class="ztree"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="arrow-box fl">
|
||||
<svg t="1626916477711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10021" width="36" height="36">
|
||||
<path
|
||||
d="M138.935 256.078v511.844h63.42V256.078h-63.42z m126.842 0v511.844h127.215V256.078H265.777zM885.064 512L583.254 64.323v191.755H456.414v511.844h126.842v191.755L885.064 512z"
|
||||
p-id="10022"
|
||||
fill="#2d8cf0"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="user-panel fr">
|
||||
<div class="title-box fix">
|
||||
<Checkbox @on-change="checkAllUser" v-model="isCheckUserAll">全选</Checkbox>
|
||||
<div class="fr">{{ tempUserList.length }}</div>
|
||||
<a href="javascript:;" @click="delCheckUser" v-if="tempUserList.findIndex(x => x.isCheck) > -1">删除选中</a>
|
||||
</div>
|
||||
<ul class="user-box">
|
||||
<li :class="{ active: item.isCheck }" v-for="(item, index) in tempUserList" @click="checkUserOne(item)">
|
||||
{{ item.name }}
|
||||
<span class="info">{{ item.group }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<i-Button type="primary" @click="submit">提交</i-Button>
|
||||
<i-Button @click="modal = false" style="margin-left: 8px">取消</i-Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
require("@public/libs/ztree/zTreeStyle.css");
|
||||
import "@public/libs/ztree/jquery.ztree.all.min.js";
|
||||
export default {
|
||||
props: {
|
||||
treeData: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
userids: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
ignoreIds: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
model: {
|
||||
prop: "userids",
|
||||
event: "change",
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ztreeDomId: null,
|
||||
modal: false,
|
||||
isCheckUserAll: false,
|
||||
firstTabIndex: 0,
|
||||
secondTabIndex: 0,
|
||||
cacheMap: new Map(),
|
||||
currentTree: [],
|
||||
currentFlatten: [],
|
||||
searchTreeName: null,
|
||||
tempUserList: [],
|
||||
isDisabled: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
searchTreeName(val) {
|
||||
this.handleSearch(val);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
firstTabData() {
|
||||
if (this.treeData.length > 1) return this.treeData.map(x => x.name);
|
||||
else return [];
|
||||
},
|
||||
secondTabData() {
|
||||
if (this.treeData.length == 0) return [];
|
||||
return this.treeData[this.firstTabIndex].data.map(x => x.name);
|
||||
},
|
||||
currentTreeFlatten() {
|
||||
const flatten = (data, pid, pname) => {
|
||||
return data.reduce((arr, { id, name, children = [], type }) => arr.concat([{ id, name, pid, type, group: pname }], flatten(children, id, name)), []);
|
||||
};
|
||||
if (!this.currentTree) return [];
|
||||
var newArr = flatten(this.currentTree, 0, "");
|
||||
return newArr;
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.isDisabled = this.ignoreIds.length > 0;
|
||||
this.ztreeDomId = this.uuid();
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.modal = true;
|
||||
this.firstTabChange("0");
|
||||
},
|
||||
firstTabChange(index) {
|
||||
this.firstTabIndex = index;
|
||||
this.secondTabChange(0);
|
||||
},
|
||||
secondTabChange(index) {
|
||||
const _this = this;
|
||||
if (index != 0 && this.secondTabIndex == index) return;
|
||||
this.secondTabIndex = index;
|
||||
this.changeEmpty();
|
||||
this.initTree();
|
||||
},
|
||||
handleSearch(query) {
|
||||
const _this = this;
|
||||
let arr = [],
|
||||
searchArr = this.currentTreeFlatten.filter(x => x.type == 2 && x.name.indexOf(query) != -1);
|
||||
for (const item of searchArr) {
|
||||
!arr.map(x => _this.getSplitId(x.id)).includes(_this.getSplitId(item.id)) && arr.push(item);
|
||||
}
|
||||
this.currentFlatten = arr;
|
||||
},
|
||||
handleSelect(query) {
|
||||
const _this = this;
|
||||
if (query.indexOf(",") != -1) query = query.split(",")[0];
|
||||
var treeObj = $.fn.zTree.getZTreeObj(this.ztreeDomId);
|
||||
var node = treeObj.getNodeByParam("name", query, null);
|
||||
if (!!node) treeObj.checkNode(node, true, true, true);
|
||||
},
|
||||
formatTree(tree, level = 0) {
|
||||
const _this = this;
|
||||
tree.forEach(element => {
|
||||
element.open = level == 0;
|
||||
element.type = 1;
|
||||
element.id = element.id + "," + element.pid;
|
||||
element.checked = false;
|
||||
if (typeof element.children !== "undefined" && element.children.length > 0) element.children = _this.formatTree(element.children, level + 1);
|
||||
else {
|
||||
element.type = 2;
|
||||
}
|
||||
});
|
||||
return tree;
|
||||
},
|
||||
initTree() {
|
||||
const _this = this;
|
||||
let first = _this.firstTabIndex,
|
||||
second = _this.secondTabIndex,
|
||||
cacheKey = first + "," + second,
|
||||
cacheMap = _this.cacheMap,
|
||||
tree = this.treeData[first].data[second].data;
|
||||
|
||||
if (!!tree && typeof tree === "function") {
|
||||
var cacheData = cacheMap.get(cacheKey);
|
||||
if (!cacheData) {
|
||||
tree().then(data => {
|
||||
cacheMap.set(cacheKey, data);
|
||||
_this.createTree(data, _this.ztreeDomId);
|
||||
});
|
||||
} else {
|
||||
_this.createTree(cacheData, _this.ztreeDomId);
|
||||
}
|
||||
} else {
|
||||
_this.createTree(tree, _this.ztreeDomId);
|
||||
}
|
||||
},
|
||||
createTree(_data, _domId) {
|
||||
const _this = this;
|
||||
var jtree = JSON.parse(JSON.stringify(_data));
|
||||
var ftree = _this.formatTree(jtree);
|
||||
_this.currentTree = ftree;
|
||||
//_this.tempUserList = JSON.parse(JSON.stringify(_this.userids));
|
||||
|
||||
let treeSetting = {
|
||||
view: {
|
||||
dblClickExpand: false,
|
||||
showIcon: false,
|
||||
},
|
||||
check: {
|
||||
enable: true,
|
||||
chkboxType: { Y: "ps", N: "ps" },
|
||||
},
|
||||
callback: {},
|
||||
};
|
||||
function formatUser(tree, checked) {
|
||||
const recursionCheckIds = tree => {
|
||||
let arrIds = [];
|
||||
for (const key in tree) {
|
||||
const element = tree[key];
|
||||
if (element.type == 2 && !element.chkDisabled) arrIds.push({ id: element.id, tid: element.tId });
|
||||
if (typeof element.children !== "undefined" && element.children) {
|
||||
var childIds = recursionCheckIds(element.children);
|
||||
arrIds = [...arrIds, ...childIds];
|
||||
}
|
||||
}
|
||||
return arrIds;
|
||||
};
|
||||
var checkIds = recursionCheckIds([tree]);
|
||||
var checkUserList = _this.currentTreeFlatten.filter(x => checkIds.map(x => x.id).includes(x.id));
|
||||
let checkUserArr = [];
|
||||
for (const element of checkUserList) {
|
||||
var findObj = checkIds.find(x => x.id == element.id);
|
||||
if (!!findObj && checkUserArr.findIndex(x => x.id == element.id) === -1 && _this.tempUserList.findIndex(x => x.id == element.id) === -1) {
|
||||
checkUserArr.push({ ...element, isCheck: false, tid: findObj.tid });
|
||||
}
|
||||
}
|
||||
if (checked) _this.tempUserList = _this.tempUserList.concat(checkUserArr);
|
||||
else {
|
||||
var ids = checkUserList.map(x => x.id);
|
||||
_this.tempUserList = _this.tempUserList.filter(x => !ids.includes(x.id));
|
||||
}
|
||||
}
|
||||
|
||||
//当禁止时，是否还显示在右侧
|
||||
var isCheckFormat = treeNode => {
|
||||
let id = _this.getSplitId(treeNode.id);
|
||||
return _this.ignoreIds.findIndex(x => x == id) === -1;
|
||||
};
|
||||
|
||||
treeSetting.callback.onClick = (event, treeId, treeNode, clickFlag) => {
|
||||
let check = treeNode.checked;
|
||||
let treeObj = $.fn.zTree.getZTreeObj(treeId);
|
||||
treeObj.checkNode(treeNode, !check, true);
|
||||
if (isCheckFormat(treeNode)) formatUser(treeNode, treeNode.checked);
|
||||
};
|
||||
treeSetting.callback.onCheck = (event, treeId, treeNode) => {
|
||||
if (isCheckFormat(treeNode)) formatUser(treeNode, treeNode.checked);
|
||||
};
|
||||
var treeObj = $.fn.zTree.init($("#" + _domId), treeSetting, ftree);
|
||||
//checkUser
|
||||
var nodes = treeObj.getNodesByFilter(x => _this.userids.includes(_this.getSplitId(x.id)));
|
||||
var arr = [];
|
||||
nodes.forEach(element => {
|
||||
var splitId = _this.getSplitId(element.id); //重复id只选择第一个
|
||||
if (!arr.includes(splitId)) treeObj.checkNode(element, true, true, true);
|
||||
arr.push(splitId);
|
||||
});
|
||||
|
||||
var ignorNodes = treeObj.getNodesByFilter(x => _this.ignoreIds.includes(_this.getSplitId(x.id)));
|
||||
ignorNodes.forEach(element => {
|
||||
treeObj.checkNode(element, true, true, true);
|
||||
treeObj.setChkDisabled(element, true);
|
||||
});
|
||||
},
|
||||
checkAllUser(check) {
|
||||
//全选用户
|
||||
const _this = this;
|
||||
_this.tempUserList.forEach(element => {
|
||||
element.isCheck = check;
|
||||
});
|
||||
},
|
||||
checkUserOne(item) {
|
||||
item.isCheck = !item.isCheck;
|
||||
let tlist = this.tempUserList;
|
||||
this.isCheckUserAll = tlist.length > 0 && tlist.filter(x => x.isCheck).length == tlist.length;
|
||||
},
|
||||
delCheckUser() {
|
||||
//删除选中用户
|
||||
const _this = this;
|
||||
let tlist = _this.tempUserList,
|
||||
delArr = [];
|
||||
for (const item of tlist) {
|
||||
item.isCheck && delArr.push(item);
|
||||
}
|
||||
var treeObj = $.fn.zTree.getZTreeObj(_this.ztreeDomId);
|
||||
delArr.forEach(element => {
|
||||
var node = treeObj.getNodeByTId(element.tid);
|
||||
treeObj.checkNode(node, false, true, true);
|
||||
});
|
||||
_this.isCheckUserAll = false;
|
||||
},
|
||||
changeEmpty() {
|
||||
this.tempUserList = [];
|
||||
this.searchTreeName = "";
|
||||
},
|
||||
submit() {
|
||||
const _this = this;
|
||||
let objArr = [],
|
||||
idsArr = this.tempUserList.map(x => _this.getSplitId(x.id));
|
||||
idsArr = Array.from(new Set(idsArr));
|
||||
this.$emit("change", idsArr);
|
||||
function delKey(obj, ...args) {
|
||||
args.forEach(v => {
|
||||
delete obj[v];
|
||||
});
|
||||
return obj;
|
||||
}
|
||||
idsArr.forEach(element => {
|
||||
let findObj = _this.tempUserList.find(x => _this.getSplitId(x.id) == element);
|
||||
delKey(findObj, "id", "isCheck", "tid", "pid", "type");
|
||||
let item = { ...findObj, id: element };
|
||||
if (_this.isDisabled) item.disabled = this.userids.findIndex(x => x == element) !== -1;
|
||||
objArr.push(item);
|
||||
});
|
||||
this.$emit("on-submit", objArr);
|
||||
this.modal = false;
|
||||
},
|
||||
getSplitId(strId) {
|
||||
if (typeof strId === "string" && strId.indexOf(",") != -1) return parseInt(strId.split(",")[0]);
|
||||
else return strId;
|
||||
},
|
||||
uuid() {
|
||||
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
|
||||
var r = (Math.random() * 16) | 0,
|
||||
v = c == "x" ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tree-wrap {
|
||||
height: 430px;
|
||||
position: relative;
|
||||
}
|
||||
.tree-panel {
|
||||
border: 1px solid #eee;
|
||||
width: 280px;
|
||||
height: 430px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tree-tab-ul {
|
||||
li {
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid #eee;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
li.active {
|
||||
background: #fff;
|
||||
color: #2d8cf0;
|
||||
border-bottom: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
.tree-box {
|
||||
padding: 4px 0;
|
||||
height: 394px;
|
||||
width: auto;
|
||||
overflow-y: auto;
|
||||
border: none;
|
||||
}
|
||||
.user-panel {
|
||||
border: 1px solid #eee;
|
||||
width: 280px;
|
||||
.title-box {
|
||||
background: #f7f7f7;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
padding: 0 12px;
|
||||
a {
|
||||
text-decoration: none;
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.user-box {
|
||||
height: 396px;
|
||||
overflow-y: auto;
|
||||
li {
|
||||
line-height: 32px;
|
||||
padding-left: 12px;
|
||||
cursor: pointer;
|
||||
.info {
|
||||
float: right;
|
||||
margin-right: 12px;
|
||||
font-size: 12px;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
li:hover {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
li.active {
|
||||
background: #e4edf6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.arrow-box {
|
||||
width: 128px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
margin-top: -17px;
|
||||
}
|
||||
|
||||
.auto-box {
|
||||
width: 200px;
|
||||
margin-bottom: 10px;
|
||||
/deep/.ivu-select-item .info {
|
||||
font-size: 12px;
|
||||
color: gray;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .ztree li {
|
||||
overflow: hidden;
|
||||
}
|
||||
/deep/ .ztree li a {
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .ztree li a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/deep/ .ivu-auto-complete .ivu-select-dropdown-list {
|
||||
max-height: 310px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user