|
|
@@ -1,191 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-container style="height: 500px; border: 1px solid #eee">
|
|
|
- <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
|
|
|
- <div class="JKWTree-tree">
|
|
|
- <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
|
|
- </div>
|
|
|
- </el-aside>
|
|
|
-
|
|
|
- <el-container>
|
|
|
- <el-header style="text-align: right; font-size: 12px">
|
|
|
- <div class="gva-search-box">
|
|
|
- <el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" class="demo-form-inline" :rules="searchRule" @keyup.enter="onSubmit">
|
|
|
- <el-form-item label="创建日期" prop="createdAt">
|
|
|
- <template #label>
|
|
|
- <span>
|
|
|
- 创建日期
|
|
|
- <el-tooltip content="搜索范围是开始日期（包含）至结束日期（不包含）">
|
|
|
- <el-icon><QuestionFilled /></el-icon>
|
|
|
- </el-tooltip>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- <el-date-picker v-model="searchInfo.startCreatedAt" type="datetime" placeholder="开始日期" :disabled-date="time=> searchInfo.endCreatedAt ? time.getTime() > searchInfo.endCreatedAt.getTime() : false"></el-date-picker>
|
|
|
- —
|
|
|
- <el-date-picker v-model="searchInfo.endCreatedAt" type="datetime" placeholder="结束日期" :disabled-date="time=> searchInfo.startCreatedAt ? time.getTime() < searchInfo.startCreatedAt.getTime() : false"></el-date-picker>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="SKC" prop="skc">
|
|
|
- <el-input v-model="searchInfo.skc" type="text" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="skcNum" prop="skcNum">
|
|
|
- <el-input v-model="searchInfo.skcNum" type="text" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
|
|
|
- <el-button icon="refresh" @click="onReset">重置</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
-
|
|
|
- </el-header>
|
|
|
-
|
|
|
- <el-main>
|
|
|
- <el-table :data="tableData">
|
|
|
- <el-table-column prop="date" label="日期" width="140">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="name" label="姓名" width="120">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="address" label="地址">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
- </el-container>
|
|
|
-</template>
|
|
|
-<script setup>
|
|
|
-import { ref, reactive } from 'vue'
|
|
|
-
|
|
|
-const handleNodeClick = (node,check) => {
|
|
|
- //存放当前节点的nodeId
|
|
|
- console.log(node,check);
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-const treeData=ref([{
|
|
|
- label: '一级 1',
|
|
|
- children: [{
|
|
|
- label: '二级 1-1',
|
|
|
- children: [{
|
|
|
- label: '三级 1-1-1'
|
|
|
- }]
|
|
|
- }]
|
|
|
-}, {
|
|
|
- label: '一级 2',
|
|
|
- children: [{
|
|
|
- label: '二级 2-1',
|
|
|
- children: [{
|
|
|
- label: '三级 2-1-1'
|
|
|
- }]
|
|
|
- }, {
|
|
|
- label: '二级 2-2',
|
|
|
- children: [{
|
|
|
- label: '三级 2-2-1'
|
|
|
- }]
|
|
|
- }]
|
|
|
-}, {
|
|
|
- label: '一级 3',
|
|
|
- children: [{
|
|
|
- label: '二级 3-1',
|
|
|
- children: [{
|
|
|
- label: '三级 3-1-1'
|
|
|
- }]
|
|
|
- }, {
|
|
|
- label: '二级 3-2',
|
|
|
- children: [{
|
|
|
- label: '三级 3-2-1'
|
|
|
- }]
|
|
|
- }]
|
|
|
-}])
|
|
|
-
|
|
|
-const item = ref({
|
|
|
- date: '2016-05-02',
|
|
|
- name: '王小虎',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄'
|
|
|
-});
|
|
|
-
|
|
|
-const tableData=ref([])
|
|
|
-
|
|
|
-
|
|
|
-const initData=()=>{
|
|
|
- tableData.value=Array(20).fill(item.value)
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-const searchRule = reactive({
|
|
|
- createdAt: [
|
|
|
- { validator: (rule, value, callback) => {
|
|
|
- if (searchInfo.value.startCreatedAt && !searchInfo.value.endCreatedAt) {
|
|
|
- callback(new Error('请填写结束日期'))
|
|
|
- } else if (!searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt) {
|
|
|
- callback(new Error('请填写开始日期'))
|
|
|
- } else if (searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt && (searchInfo.value.startCreatedAt.getTime() === searchInfo.value.endCreatedAt.getTime() || searchInfo.value.startCreatedAt.getTime() > searchInfo.value.endCreatedAt.getTime())) {
|
|
|
- callback(new Error('开始日期应当早于结束日期'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
- }, trigger: 'change' }
|
|
|
- ],
|
|
|
-})
|
|
|
-
|
|
|
-const elFormRef = ref()
|
|
|
-const elSearchFormRef = ref()
|
|
|
-
|
|
|
-// =========== 表格控制部分 ===========
|
|
|
-const page = ref(1)
|
|
|
-const total = ref(0)
|
|
|
-const pageSize = ref(10)
|
|
|
-
|
|
|
-const searchInfo = ref({})
|
|
|
-
|
|
|
-// 重置
|
|
|
-const onReset = () => {
|
|
|
- searchInfo.value = {}
|
|
|
- getTableData()
|
|
|
-}
|
|
|
-
|
|
|
-// 搜索
|
|
|
-const onSubmit = () => {
|
|
|
- elSearchFormRef.value?.validate(async(valid) => {
|
|
|
- if (!valid) return
|
|
|
- page.value = 1
|
|
|
- pageSize.value = 10
|
|
|
- if (searchInfo.value.is_urgent === ""){
|
|
|
- searchInfo.value.is_urgent=null
|
|
|
- }
|
|
|
- getTableData()
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 分页
|
|
|
-const handleSizeChange = (val) => {
|
|
|
- pageSize.value = val
|
|
|
- getTableData()
|
|
|
-}
|
|
|
-
|
|
|
-// 修改页面容量
|
|
|
-const handleCurrentChange = (val) => {
|
|
|
- page.value = val
|
|
|
- getTableData()
|
|
|
-}
|
|
|
-
|
|
|
-// 查询
|
|
|
-const getTableData = async() => {
|
|
|
- initData()
|
|
|
-}
|
|
|
-
|
|
|
-getTableData()
|
|
|
-
|
|
|
-</script>
|
|
|
-<style>
|
|
|
-.el-header {
|
|
|
- background-color: #B3C0D1;
|
|
|
- color: #333;
|
|
|
- line-height: 60px;
|
|
|
-}
|
|
|
-
|
|
|
-.el-aside {
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-</style>
|
