332 lines
12 KiB
Vue
332 lines
12 KiB
Vue
<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> |