parent
d3fae3f6c2
commit
256236fe26
@ -0,0 +1,247 @@
|
|||||||
|
<template>
|
||||||
|
<div style="padding: 20px">
|
||||||
|
<el-card shadow="always">
|
||||||
|
<template #header>
|
||||||
|
<p>{{ title }}</p>
|
||||||
|
<vxe-toolbar ref="toolbar" custom print>
|
||||||
|
<template #buttons>
|
||||||
|
<div class="selects">
|
||||||
|
<el-select
|
||||||
|
style="width: 180px"
|
||||||
|
filterable
|
||||||
|
clearable
|
||||||
|
size="small"
|
||||||
|
v-model="select.custom_model_id"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in models"
|
||||||
|
:key="item.id"
|
||||||
|
:value="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-select
|
||||||
|
style="width: 100px"
|
||||||
|
size="small"
|
||||||
|
v-model="select.date_type"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in dataTypes"
|
||||||
|
:key="item.value"
|
||||||
|
:value="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-date-picker
|
||||||
|
style="width: 240px"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
size="small"
|
||||||
|
:value="select.date_range ? select.date_range.split('~') : ''"
|
||||||
|
type="daterange"
|
||||||
|
align="right"
|
||||||
|
unlink-panels
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
:picker-options="pickerOptions"
|
||||||
|
@input="
|
||||||
|
([start, end]) => (select.date_range = `${start}~${end}`)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
<el-input
|
||||||
|
clearable
|
||||||
|
v-model="select.keyword"
|
||||||
|
style="width: 160px"
|
||||||
|
placeholder="请输入关键词"
|
||||||
|
size="small"
|
||||||
|
></el-input>
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-search"
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
@click="getList"
|
||||||
|
>搜索</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</vxe-toolbar>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #default>
|
||||||
|
<div>
|
||||||
|
<vxe-table
|
||||||
|
ref="table"
|
||||||
|
stripe
|
||||||
|
style="margin-top: 10px"
|
||||||
|
:loading="loading"
|
||||||
|
keep-source
|
||||||
|
show-overflow
|
||||||
|
:column-config="{ resizable: true }"
|
||||||
|
:print-config="{}"
|
||||||
|
:custom-config="{ mode: 'popup' }"
|
||||||
|
:data="list"
|
||||||
|
>
|
||||||
|
<vxe-column field="name" title="Name"></vxe-column>
|
||||||
|
<vxe-column field="role" title="Role"></vxe-column>
|
||||||
|
<vxe-column field="sex" title="Sex"></vxe-column>
|
||||||
|
</vxe-table>
|
||||||
|
|
||||||
|
<el-pagination
|
||||||
|
style="margin-top: 10px"
|
||||||
|
@size-change="
|
||||||
|
(e) => {
|
||||||
|
select.page_size = e;
|
||||||
|
select.page = 1;
|
||||||
|
getList();
|
||||||
|
}
|
||||||
|
"
|
||||||
|
@current-change="
|
||||||
|
(e) => {
|
||||||
|
select.page = e;
|
||||||
|
getList();
|
||||||
|
}
|
||||||
|
"
|
||||||
|
:current-page="select.page"
|
||||||
|
:page-sizes="[20, 30, 40, 50]"
|
||||||
|
:page-size="select.page_size"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="total"
|
||||||
|
></el-pagination>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { flowList } from "@/api/flow";
|
||||||
|
import moment from "moment/moment";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pickerOptions: {
|
||||||
|
shortcuts: [
|
||||||
|
{
|
||||||
|
text: "一年前",
|
||||||
|
onClick(picker) {
|
||||||
|
picker.$emit("pick", [
|
||||||
|
moment().subtract(1, "years").toDate(),
|
||||||
|
new Date(),
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "一月前",
|
||||||
|
onClick(picker) {
|
||||||
|
picker.$emit("pick", [
|
||||||
|
moment().subtract(1, "months").toDate(),
|
||||||
|
new Date(),
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "一周前",
|
||||||
|
onClick(picker) {
|
||||||
|
picker.$emit("pick", [
|
||||||
|
moment().subtract(1, "weeks").toDate(),
|
||||||
|
new Date(),
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "一周后",
|
||||||
|
onClick(picker) {
|
||||||
|
picker.$emit("pick", [
|
||||||
|
new Date(),
|
||||||
|
moment().add(1, "weeks").toDate(),
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "一月后",
|
||||||
|
onClick(picker) {
|
||||||
|
picker.$emit("pick", [
|
||||||
|
new Date(),
|
||||||
|
moment().add(1, "months").toDate(),
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "一年后",
|
||||||
|
onClick(picker) {
|
||||||
|
picker.$emit("pick", [
|
||||||
|
new Date(),
|
||||||
|
moment().add(1, "years").toDate(),
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
page: 1,
|
||||||
|
page_size: 20,
|
||||||
|
sort_name: "",
|
||||||
|
sort_type: "",
|
||||||
|
keyword: "",
|
||||||
|
department_id: "",
|
||||||
|
is_fav: "",
|
||||||
|
custom_model_id: "",
|
||||||
|
date_range: "",
|
||||||
|
date_type: "create_date",
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
list: [],
|
||||||
|
total: 0,
|
||||||
|
|
||||||
|
title: "",
|
||||||
|
models: [],
|
||||||
|
dataTypes: [
|
||||||
|
{
|
||||||
|
value: "create_date",
|
||||||
|
label: "录入时间",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "happened_date",
|
||||||
|
label: "经办时间",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getList() {
|
||||||
|
this.loading = true;
|
||||||
|
try {
|
||||||
|
const res = await flowList(this.$route.meta.type, this.select, false);
|
||||||
|
console.log(res);
|
||||||
|
this.list = res?.data?.data || [];
|
||||||
|
this.total = res?.data?.total ?? 0;
|
||||||
|
this.models = res.customModels;
|
||||||
|
this.title = res.pageTitle;
|
||||||
|
this.loading = false;
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if(this.$refs['table'] && this.$refs['toolbar']) {
|
||||||
|
this.$refs['table'].connect(this.$refs['toolbar'])
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.selects > * + * {
|
||||||
|
margin: 2px 0 2px 6px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue