|
|
@@ -1,102 +0,0 @@
|
|
|
-<!-- 表格搜索栏示例 -->
|
|
|
-<template>
|
|
|
- <ArtSearchBar ref="searchBarBasicRef" v-model="formDataBasic" :items="baseFormItems" @search="search"> </ArtSearchBar>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts">
|
|
|
- // 表单数据双向绑定
|
|
|
- const searchBarBasicRef = ref()
|
|
|
- // 基础示例表单数据
|
|
|
- const formDataBasic = ref({
|
|
|
- courseID: undefined,
|
|
|
- courseName: undefined,
|
|
|
- courseType: undefined,
|
|
|
- createUser: undefined,
|
|
|
- trainPlan: undefined,
|
|
|
- level: undefined,
|
|
|
- date: undefined
|
|
|
- })
|
|
|
- // 基础表单项配置
|
|
|
- const baseFormItems = [
|
|
|
- { label: '课程编码', key: 'courseID', type: 'input', placeholder: '请输入课程编码', clearable: true },
|
|
|
- { label: '课程名称', key: 'courseName', type: 'input', placeholder: '请输入课程名称', clearable: true },
|
|
|
- {
|
|
|
- label: '课程类型',
|
|
|
- key: 'courseType',
|
|
|
- type: 'select',
|
|
|
- props: {
|
|
|
- placeholder: '请选择课程类型',
|
|
|
- options: [
|
|
|
- { label: '基础操作', value: '1' },
|
|
|
- { label: '故障处理', value: '2' },
|
|
|
- { label: '非正常处理', value: '3' }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '培训对象',
|
|
|
- key: 'trainObject',
|
|
|
- type: 'select',
|
|
|
- props: {
|
|
|
- placeholder: '请选择培训对象',
|
|
|
- options: [
|
|
|
- { label: '行车调度员', value: '1' },
|
|
|
- { label: '电力调度员', value: '2' },
|
|
|
- { label: '供电检修员', value: '3' }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '培训路线',
|
|
|
- key: 'trainRoute',
|
|
|
- type: 'select',
|
|
|
- props: {
|
|
|
- placeholder: '请选择培训路线',
|
|
|
- options: [
|
|
|
- { label: '成渝高铁线', value: '1' },
|
|
|
- { label: '成西高铁线', value: '2' },
|
|
|
- { label: '青藏铁路', value: '3' }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- { label: '培训计划', key: 'trainPlan', type: 'input', placeholder: '请输入培训计划', clearable: true },
|
|
|
- {
|
|
|
- label: '培训日期',
|
|
|
- key: 'date',
|
|
|
- type: 'datetime',
|
|
|
- props: {
|
|
|
- style: { width: '100%' },
|
|
|
- placeholder: '请选择培训日期',
|
|
|
- type: 'date',
|
|
|
- valueFormat: 'YYYY-MM-DD',
|
|
|
- shortcuts: [
|
|
|
- { text: '今日', value: new Date() },
|
|
|
- { text: '昨日', value: () => new Date(Date.now() - 86400000) },
|
|
|
- { text: '一周前', value: () => new Date(Date.now() - 604800000) }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- { label: '创建人', key: 'createUser', type: 'input', placeholder: '请输入创建人', clearable: true }
|
|
|
- ]
|
|
|
-
|
|
|
- const search = async () => {
|
|
|
- await searchBarBasicRef.value.validate()
|
|
|
- console.log(`表单数据`, formDataBasic.value)
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
- .search-bar {
|
|
|
- padding-bottom: 20px;
|
|
|
-
|
|
|
- .title {
|
|
|
- margin-bottom: 5px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 500;
|
|
|
-
|
|
|
- &.m-15 {
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|