249 lines
9.2 KiB
Vue
249 lines
9.2 KiB
Vue
<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> |