58 lines
2.5 KiB
Vue

<template>
<div class="root">
<div class="search-box">
<el-date-picker v-model="script.filterData.year" type="year" placeholder="年度" format="YYYY"
style="width: 240px; margin-right: 10px" size="large" />
<el-input v-model="script.filterData.code" style="width: 240px; margin-right: 10px" size="large"
placeholder="路线编码" :suffix-icon="Search" />
</div>
<div class="event-box">
<el-button type="primary" @click="script.openAddDialog">项目填报</el-button>
<el-button type="primary" color="#952DE6" @click="">导出</el-button>
</div>
<DynamicTable :dataSource="script.tableData.value" :columns="script.columns" :autoHeight="true"
:pagination="script.pagination">
</DynamicTable>
<div class="model-box">
<MyDialog v-model="script.modelVisible.value" :title="script.model?.title"
:dynamicComponent="script.model?.content" :component-props="script.model?.props"
:onConfirm="script.model?.onConfirm" :onCancel="script.model?.onCancel" ref="dialogRef"
:width="script.model?.width" :footer-position="script.model?.footerPosition"
:onCancelType="script.model?.onCancelType" :onConfirmName="script.model?.onConfirmName"
:onCancelName="script.model?.onCancelName"
:tagContent="script.model?.tagContent"
:tagType="script.model?.tagType"
>
</MyDialog>
<MyDrawer v-model="script.drawerVisible.value" :title="script.drawer?.title"
:dynamicComponent="script.drawer?.content" :component-props="script.drawer?.props"
:onConfirm="script.drawer?.onConfirm" :onCancel="script.drawer?.onCancel" ref="drawerRef"
:direction="script.drawer?.direction" :size="script.drawer?.size">
</MyDrawer>
</div>
</div>
</template>
<script setup>
import DynamicTable from "../../component/DynamicTable";
import { Search } from "@element-plus/icons-vue";
import MyDialog from "../../component/MyDialog";
import MyDrawer from "../../component/MyDrawer";
import scriptFn from "./index.js";
const script = scriptFn();
const { dialogRef, drawerRef } = script;
</script>
<style scoped>
.root {
height: 100%;
padding: 25px;
}
.event-box {
margin: 20px 0;
display: flex;
justify-content: flex-end;
}
</style>