|
@@ -0,0 +1,229 @@
|
|
|
+<template>
|
|
|
+ <div class="card-search">
|
|
|
+ <div>
|
|
|
+ <a-form
|
|
|
+ ref="formRef"
|
|
|
+ name="advanced_search"
|
|
|
+ class="ant-advanced-search-form"
|
|
|
+ :model="formState"
|
|
|
+ @finish="onQuery"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <a-space>
|
|
|
+ <a-select v-model:value="formState.tabName" :options="fieldList" class="operTexts"></a-select>
|
|
|
+ <a-input v-model:value="formState.subjectName" style="width: 400px"></a-input>
|
|
|
+ <a-button type="primary" html-type="submit" @click="onQuery">查询</a-button>
|
|
|
+ <a-button @click="() => {formRef.resetFields();}">重置</a-button>
|
|
|
+ </a-space>
|
|
|
+ </div>
|
|
|
+ <a-divider orientation="center" @click="pageState.showMoreQuery=!pageState.showMoreQuery">
|
|
|
+ <template v-if="pageState.showMoreQuery">
|
|
|
+ 展开更多
|
|
|
+ <DoubleRightOutlined rotate="90"/>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ 折 叠
|
|
|
+ <DoubleLeftOutlined rotate="90"/>
|
|
|
+ </template>
|
|
|
+ </a-divider>
|
|
|
+ </a-form>
|
|
|
+ <div class="search-container">
|
|
|
+ <div class="search-body">
|
|
|
+ <div class="search-order">
|
|
|
+ <div>综合排序
|
|
|
+ <p class="search-order-icon">
|
|
|
+ <caret-up-outlined @click="pageState.defaultOrder='asc'" :style="{ color: pageState.defaultOrder=='asc'? '#1890FF':'#cccccc' }"/>
|
|
|
+ <caret-down-outlined @click="pageState.defaultOrder='desc'" :style="{ color: pageState.defaultOrder=='desc'? '#1890FF':'#cccccc' }"/></p></div>
|
|
|
+ <div>创建时间
|
|
|
+ <p class="search-order-icon">
|
|
|
+ <caret-up-outlined @click="pageState.timeOrder='asc'" :style="{ color: pageState.timeOrder=='asc'? '#1890FF':'#cccccc' }"/>
|
|
|
+ <caret-down-outlined @click="pageState.timeOrder='desc'" :style="{ color: pageState.timeOrder=='desc'? '#1890FF':'#cccccc' }"/></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <component is="cycleView" :kid="'id'"></component>
|
|
|
+ <component is="listView" :kid="'id'"></component>
|
|
|
+ <component is="tableView"></component>
|
|
|
+ <component is="listView"></component>
|
|
|
+ <component is="tableView"></component>
|
|
|
+ <component is="chatView" :kid="'id'"></component>
|
|
|
+ <component is="docView"></component>
|
|
|
+ </div>
|
|
|
+ <div class="search-sider">
|
|
|
+ <div class="search-sider-block">
|
|
|
+ <b>你可能要找的对象</b>
|
|
|
+ <a-list size="small" :data-source="listData">
|
|
|
+ <template #renderItem="{ item }">
|
|
|
+ <a-list-item>{{ item }}
|
|
|
+ <template #actions>
|
|
|
+ <a key="list-loadmore-edit">井筒</a>
|
|
|
+ </template>
|
|
|
+ </a-list-item>
|
|
|
+ </template>
|
|
|
+ </a-list>
|
|
|
+ </div>
|
|
|
+ <div class="search-sider-block">
|
|
|
+ <b>你可能要找的年月报</b>
|
|
|
+ <a-list size="small" :data-source="listData">
|
|
|
+ <template #renderItem="{ item }">
|
|
|
+ <a-list-item>{{ item }}
|
|
|
+ <template #actions>
|
|
|
+ <a key="list-loadmore-edit">年报</a>
|
|
|
+ </template>
|
|
|
+ </a-list-item>
|
|
|
+ </template>
|
|
|
+ </a-list>
|
|
|
+ </div>
|
|
|
+ <div class="search-sider-block">
|
|
|
+ <b>你可能要找的业务过程</b>
|
|
|
+ <div class="search-sider-process">
|
|
|
+ <template v-for="it in listData">
|
|
|
+ <span>{{ it }}</span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import {defineComponent, reactive, ref} from 'vue';
|
|
|
+import {useRoute, useRouter} from "vue-router";
|
|
|
+import type {SelectProps, FormInstance} from "ant-design-vue";
|
|
|
+import tableView from '@/components/basic/es-result/table-view.vue';
|
|
|
+import listView from '@/components/basic/es-result/list-view.vue';
|
|
|
+import chatView from '@/components/basic/es-result/chat-view.vue';
|
|
|
+import docView from '@/components/basic/es-result/doc-view.vue';
|
|
|
+import cycleView from '@/components/basic/es-result/cycle-view.vue';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'esdomainResult',
|
|
|
+ components: {tableView, listView, chatView, docView,cycleView},
|
|
|
+ setup() {
|
|
|
+
|
|
|
+ const route = useRoute();
|
|
|
+ const router = useRouter();
|
|
|
+ const formRef = ref<FormInstance>();
|
|
|
+ const formState = reactive({
|
|
|
+ page: 1, rows: 10, subjectName: '', tabName: '', tabCode: null, total: 0
|
|
|
+ });
|
|
|
+ const pageState = reactive({
|
|
|
+ showMoreQuery: false,
|
|
|
+ defaultOrder:'',
|
|
|
+ timeOrder:''
|
|
|
+ });
|
|
|
+
|
|
|
+ const fieldList = [
|
|
|
+ {value: '', label: '不限'},
|
|
|
+ {value: 'wellId', label: '井号'},
|
|
|
+ {value: 'wellName', label: '井名'}
|
|
|
+ ] as SelectProps['options'];
|
|
|
+
|
|
|
+ function onQuery() {
|
|
|
+ console.log("");
|
|
|
+ }
|
|
|
+
|
|
|
+ const listData: string[] = [
|
|
|
+ '井号1-1.',
|
|
|
+ '井号2-1',
|
|
|
+ '井号3-1',
|
|
|
+ '井号4-1',
|
|
|
+ '井号5-1',
|
|
|
+ '井号5-1',
|
|
|
+ '井号5-1',
|
|
|
+ ];
|
|
|
+ return {
|
|
|
+ router, route, formState, fieldList, formRef, onQuery, pageState, listData
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ }
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.search-container {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .search-body {
|
|
|
+ width: 80%;
|
|
|
+ min-width: 800px;
|
|
|
+
|
|
|
+ .search-order {
|
|
|
+ display: flex;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 9px;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ div{
|
|
|
+ display: flex;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .search-order-icon{
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ span{
|
|
|
+ height: 9px;
|
|
|
+ cursor:pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-sider {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 10px;
|
|
|
+
|
|
|
+ .search-sider-block {
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .search-sider-process{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ span{
|
|
|
+ padding: 3px 10px;
|
|
|
+ border: 1px solid black;
|
|
|
+ margin: 5px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ cursor:pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.search-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 10px 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-view {
|
|
|
+ .search-view-chat {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .search-chat {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-view-doc {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-right: 10px;
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|