|
@@ -0,0 +1,137 @@
|
|
|
+<template>
|
|
|
+ <div class="card-search">
|
|
|
+ <a-form
|
|
|
+ ref="formRef"
|
|
|
+ name="advanced_search"
|
|
|
+ class="ant-advanced-search-form"
|
|
|
+ :model="formState"
|
|
|
+ @finish="onQuery"
|
|
|
+ >
|
|
|
+ <a-divider orientation="left"><b style="color:#4E61D0">1.输入检索控制条件</b></a-divider>
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="22">
|
|
|
+ <div class="col-title">组织单位:</div>
|
|
|
+ <a-input v-model:value="formState.subjectName" style="width: 200px"></a-input>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <div class="col-title">
|
|
|
+ 作业区/项目部:
|
|
|
+ </div>
|
|
|
+ <a-input v-model:value="formState.tabCode" style="width: 200px"></a-input>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <div class="col-title">
|
|
|
+ 井名:
|
|
|
+ </div>
|
|
|
+ <a-input v-model:value="formState.tabName" style="width: 200px"></a-input>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <div class="col-title">
|
|
|
+ 地层名称:
|
|
|
+ </div>
|
|
|
+ <a-input v-model:value="formState.tabName" style="width: 200px"></a-input>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-divider orientation="left"><b style="color:#4E61D0">2.输入检索内容条件</b></a-divider>
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24" class="query-row">
|
|
|
+ <div class="operTexts"> </div>
|
|
|
+ <a-select v-model:value="formState.tabName" :options="fieldList" class="operTexts"></a-select>
|
|
|
+ <a-input v-model:value="formState.subjectName" style="width: 200px"></a-input>
|
|
|
+ <img src="~@/assets/images/add.png" @click="addQuery"/>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24" class="query-row" v-for="(it,index) in queryList">
|
|
|
+ <a-select v-model:value="it.oper" :options="operTexts" class="operTexts"></a-select>
|
|
|
+ <a-select v-model:value="it.field" :options="fieldList" class="operTexts"></a-select>
|
|
|
+ <a-input v-model:value="it.key" style="width: 200px"></a-input>
|
|
|
+ <img src="~@/assets/images/sub.png" @click="onDelete(index)"/>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4" style="text-align: right">
|
|
|
+ <a-button type="primary" html-type="submit" @click="onQuery">查询</a-button>
|
|
|
+ <a-button style="margin: 0 8px" @click="() => {formRef.resetFields();}">重置</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import {reactive, defineComponent, ref} from 'vue';
|
|
|
+import {useRoute, useRouter} from "vue-router";
|
|
|
+import {DownOutlined, UpOutlined} from "@ant-design/icons-vue";
|
|
|
+import type {FormInstance, SelectProps} from "ant-design-vue";
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'domainESIndex',
|
|
|
+ components: {DownOutlined, UpOutlined},
|
|
|
+ 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 queryList= ref<any>([]);
|
|
|
+
|
|
|
+ const operTexts = [
|
|
|
+ {value: '=', label: '等于'},
|
|
|
+ {value: 'like', label: '包含'},
|
|
|
+ {value: 'null', label: '为空'},
|
|
|
+ {value: 'not null', label: '不为空'}
|
|
|
+ ] as SelectProps['options'];
|
|
|
+
|
|
|
+ const fieldList = [
|
|
|
+ {value: '', label: '不限'},
|
|
|
+ {value: 'wellId', label: '井号'},
|
|
|
+ {value: 'wellName', label: '井名'}
|
|
|
+ ] as SelectProps['options'];
|
|
|
+
|
|
|
+ const onQuery = () => {
|
|
|
+ console.log("");
|
|
|
+ }
|
|
|
+ function addQuery(){
|
|
|
+ queryList.value.push({});
|
|
|
+ }
|
|
|
+ function onDelete(index) {
|
|
|
+ queryList.value.splice(index, 1);
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ router, route, formState, formRef, onQuery, operTexts, fieldList,addQuery,queryList,onDelete
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ }
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.ant-row {
|
|
|
+
|
|
|
+ .ant-col {
|
|
|
+ margin: 10px 0px;
|
|
|
+
|
|
|
+ .col-title {
|
|
|
+ width: 120px;
|
|
|
+ text-align: left;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .query-row{
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ img{
|
|
|
+ margin-left:5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.operTexts{
|
|
|
+ width:80px;
|
|
|
+}
|
|
|
+</style>
|