175 lines
5.5 KiB
Vue
175 lines
5.5 KiB
Vue
<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>
|