|
|
@@ -1,214 +1,228 @@
|
|
|
<template>
|
|
|
- <transition name="el-fade-in">
|
|
|
- <div class="table-com-search">
|
|
|
- <el-form @keyup.enter="onComSearch" label-position="top" :model="baTable.comSearch.form">
|
|
|
- <el-row>
|
|
|
- <template v-for="(item, idx) in baTable.table.column" :key="idx">
|
|
|
- <template v-if="item.operator !== false">
|
|
|
- <el-col v-if="item.render == 'datetime' && (item.operator == 'RANGE' || item.operator == 'NOT RANGE')" :span="8">
|
|
|
- <div class="com-search-col mt-20 flex justify-flex-start">
|
|
|
- <div class="com-search-col-label ">{{ item.label }}:</div>
|
|
|
- <div class="com-search-col-input-range">
|
|
|
- <el-date-picker
|
|
|
- class="datetime-picker"
|
|
|
- v-model="baTable.comSearch.form[item.prop!]"
|
|
|
- :default-value="baTable.comSearch.form[item.prop! + '-default'] ? baTable.comSearch.form[item.prop! + '-default']:[new Date(), new Date()]"
|
|
|
- type="datetimerange"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col v-else-if="item.render == 'dateType' && (item.operator == 'RANGE' || item.operator == 'NOT RANGE')" :span="8">
|
|
|
- <div class="com-search-col mt-20 flex justify-flex-start">
|
|
|
- <div class="com-search-col-label ">{{ item.label }}:</div>
|
|
|
- <div class="com-search-col-input-range">
|
|
|
- <el-date-picker
|
|
|
- class="datetime-picker"
|
|
|
- v-model="baTable.comSearch.form[item.prop!]"
|
|
|
- :default-value="baTable.comSearch.form[item.prop! + '-default'] ? baTable.comSearch.form[item.prop! + '-default']:[new Date(), new Date()]"
|
|
|
- type="daterange"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col v-else :span="8">
|
|
|
- <div class="com-search-col mt-20 flex justify-flex-start">
|
|
|
- <div class="com-search-col-label">{{ item.label }}:</div>
|
|
|
- <div v-if="item.operator == 'RANGE' || item.operator == 'NOT RANGE'" class="com-search-col-input-range">
|
|
|
- <el-input
|
|
|
- :placeholder="item.operatorPlaceholder"
|
|
|
- type="string"
|
|
|
- v-model="baTable.comSearch.form[item.prop! + '-start']"
|
|
|
- ></el-input>
|
|
|
- <div class="range-separator">{{ $t('to') }}</div>
|
|
|
- <el-input
|
|
|
- :placeholder="item.operatorPlaceholder"
|
|
|
- type="string"
|
|
|
- v-model="baTable.comSearch.form[item.prop! + '-end']"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- <div v-else-if="item.operator == 'NULL' || item.operator == 'NOT NULL'" class="com-search-col-input">
|
|
|
- <el-checkbox v-model="baTable.comSearch.form[item.prop!]" :label="item.operator" size="large"></el-checkbox>
|
|
|
- </div>
|
|
|
- <div v-else-if="item.operator" class="com-search-col-input">
|
|
|
- <el-date-picker
|
|
|
- class="datetime-picker"
|
|
|
- v-if="item.render == 'datetime'"
|
|
|
- v-model="baTable.comSearch.form[item.prop!]"
|
|
|
- type="datetime"
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
- :placeholder="item.operatorPlaceholder"
|
|
|
- :default-value="baTable.comSearch.form[item.prop! + '-default'] ? baTable.comSearch.form[item.prop! + '-default']:new Date()"
|
|
|
- ></el-date-picker>
|
|
|
- <el-select
|
|
|
- :placeholder="item.operatorPlaceholder"
|
|
|
- v-else-if="item.render == 'tag'"
|
|
|
- v-model="baTable.comSearch.form[item.prop!]"
|
|
|
- :clearable="true"
|
|
|
- class="w100"
|
|
|
- >
|
|
|
- <el-option v-for="(opt, okey) in item.replaceValue" :key="item.prop! + okey" :label="opt" :value="okey" />
|
|
|
- </el-select>
|
|
|
- <el-input
|
|
|
- :placeholder="item.operatorPlaceholder"
|
|
|
- v-else
|
|
|
- type="string"
|
|
|
- v-model="baTable.comSearch.form[item.prop!]"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <div class="com-search-col pl-20 mt-20 mr-20 flex justify-flex-end">
|
|
|
- <div class="box">
|
|
|
- <el-button v-blur @click="onComSearch" type="primary">搜索</el-button>
|
|
|
- <el-button @click="onResetForm()">重置</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
+ <transition name="el-fade-in">
|
|
|
+ <div class="table-com-search">
|
|
|
+ <el-form @keyup.enter="onComSearch" label-position="top" :model="baTable.comSearch.form">
|
|
|
+ <el-row>
|
|
|
+ <template v-for="(item, idx) in baTable.table.column" :key="idx">
|
|
|
+ <template v-if="item.operator !== false">
|
|
|
+ <el-col v-if="item.render == 'datetime' && (item.operator == 'RANGE' || item.operator == 'NOT RANGE')"
|
|
|
+ :span="8">
|
|
|
+ <div class="com-search-col mt-20 flex justify-flex-start">
|
|
|
+ <div class="com-search-col-label ">{{ item.label }}:</div>
|
|
|
+ <div class="com-search-col-input-range">
|
|
|
+ <el-date-picker
|
|
|
+ class="datetime-picker"
|
|
|
+ v-model="baTable.comSearch.form[item.prop!]"
|
|
|
+ :default-value="baTable.comSearch.form[item.prop! + '-default'] ? baTable.comSearch.form[item.prop! + '-default']:[new Date(), new Date()]"
|
|
|
+ type="datetimerange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ v-else-if="item.render == 'dateType' && (item.operator == 'RANGE' || item.operator == 'NOT RANGE')"
|
|
|
+ :span="8">
|
|
|
+ <div class="com-search-col mt-20 flex justify-flex-start">
|
|
|
+ <div class="com-search-col-label ">{{ item.label }}:</div>
|
|
|
+ <div class="com-search-col-input-range">
|
|
|
+ <el-date-picker
|
|
|
+ class="datetime-picker"
|
|
|
+ v-model="baTable.comSearch.form[item.prop!]"
|
|
|
+ :default-value="baTable.comSearch.form[item.prop! + '-default'] ? baTable.comSearch.form[item.prop! + '-default']:[new Date(), new Date()]"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-else :span="8">
|
|
|
+ <div class="com-search-col mt-20 flex justify-flex-start">
|
|
|
+ <div class="com-search-col-label">{{ item.label }}:</div>
|
|
|
+ <div v-if="item.operator == 'RANGE' || item.operator == 'NOT RANGE'"
|
|
|
+ class="com-search-col-input-range">
|
|
|
+ <el-input
|
|
|
+ :placeholder="item.operatorPlaceholder"
|
|
|
+ type="string"
|
|
|
+ v-model="baTable.comSearch.form[item.prop! + '-start']"
|
|
|
+ ></el-input>
|
|
|
+ <div class="range-separator">{{ $t("to") }}</div>
|
|
|
+ <el-input
|
|
|
+ :placeholder="item.operatorPlaceholder"
|
|
|
+ type="string"
|
|
|
+ v-model="baTable.comSearch.form[item.prop! + '-end']"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="item.operator == 'NULL' || item.operator == 'NOT NULL'" class="com-search-col-input">
|
|
|
+ <el-checkbox v-model="baTable.comSearch.form[item.prop!]" :label="item.operator"
|
|
|
+ size="large"></el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="item.operator" class="com-search-col-input">
|
|
|
+ <el-date-picker
|
|
|
+ class="datetime-picker"
|
|
|
+ v-if="item.render == 'datetime'"
|
|
|
+ v-model="baTable.comSearch.form[item.prop!]"
|
|
|
+ type="datetime"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ :placeholder="item.operatorPlaceholder"
|
|
|
+ :default-value="baTable.comSearch.form[item.prop! + '-default'] ? baTable.comSearch.form[item.prop! + '-default']:new Date()"
|
|
|
+ ></el-date-picker>
|
|
|
+ <el-select
|
|
|
+ :placeholder="item.operatorPlaceholder"
|
|
|
+ v-else-if="item.render == 'tag'"
|
|
|
+ v-model="baTable.comSearch.form[item.prop!]"
|
|
|
+ :clearable="true"
|
|
|
+ class="w100"
|
|
|
+ >
|
|
|
+ <el-option v-for="(opt, okey) in item.replaceValue" :key="item.prop! + okey" :label="opt"
|
|
|
+ :value="okey" />
|
|
|
+ </el-select>
|
|
|
+ <el-input
|
|
|
+ :placeholder="item.operatorPlaceholder"
|
|
|
+ v-else
|
|
|
+ type="string"
|
|
|
+ v-model="baTable.comSearch.form[item.prop!]"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="com-search-col pl-20 mt-20 mr-20 flex justify-flex-end">
|
|
|
+ <div class="box">
|
|
|
+ <el-button v-blur @click="onComSearch" type="primary">搜索</el-button>
|
|
|
+ <el-button @click="onResetForm()">重置</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { inject } from 'vue'
|
|
|
-import useCurrentInstance from '/@/utils/useCurrentInstance'
|
|
|
-import type baTableClass from '/@/utils/baTable'
|
|
|
+import { inject } from "vue";
|
|
|
+import useCurrentInstance from "/@/utils/useCurrentInstance";
|
|
|
+import type baTableClass from "/@/utils/baTable";
|
|
|
|
|
|
-const { proxy } = useCurrentInstance()
|
|
|
+const { proxy } = useCurrentInstance();
|
|
|
|
|
|
-const baTable = inject('baTable') as baTableClass
|
|
|
+const baTable = inject("baTable") as baTableClass;
|
|
|
|
|
|
const onComSearch = () => {
|
|
|
|
|
|
- let comSearchData: comSearchData[] = []
|
|
|
- for (const key in baTable.comSearch.form) {
|
|
|
- if (!baTable.comSearch.fieldData.has(key)) {
|
|
|
- continue
|
|
|
- }
|
|
|
-
|
|
|
- let val = ''
|
|
|
- let fieldDataTemp = baTable.comSearch.fieldData.get(key)
|
|
|
-
|
|
|
- if ((fieldDataTemp.render == 'datetime' || fieldDataTemp.render=='dateType' ) && (fieldDataTemp.operator == 'RANGE' || fieldDataTemp.operator == 'NOT RANGE')) {
|
|
|
-
|
|
|
- // 时间范围组件返回的是时间数组
|
|
|
- if (baTable.comSearch.form[key] && baTable.comSearch.form[key].length >= 2) {
|
|
|
- // 数组转字符串，以实现通过url参数传递预设搜索值
|
|
|
- val = baTable.comSearch.form[key][0] + ',' + baTable.comSearch.form[key][1]
|
|
|
- }
|
|
|
- } else if (fieldDataTemp.operator == 'RANGE' || fieldDataTemp.operator == 'NOT RANGE') {
|
|
|
- // 普通的范围筛选，baTable在初始化时已准备好start和end字段
|
|
|
- if (!baTable.comSearch.form[key + '-start'] && !baTable.comSearch.form[key + '-end']) {
|
|
|
- continue
|
|
|
- }
|
|
|
- val = baTable.comSearch.form[key + '-start'] + ',' + baTable.comSearch.form[key + '-end']
|
|
|
- } else if (baTable.comSearch.form[key]) {
|
|
|
- val = baTable.comSearch.form[key]
|
|
|
- }
|
|
|
-
|
|
|
- if (val) {
|
|
|
- comSearchData.push({
|
|
|
- field: key,
|
|
|
- val: val,
|
|
|
- operator: fieldDataTemp.operator,
|
|
|
- render: fieldDataTemp.render,
|
|
|
- })
|
|
|
- }
|
|
|
+ let comSearchData: comSearchData[] = [];
|
|
|
+ for (const key in baTable.comSearch.form) {
|
|
|
+
|
|
|
+ if (!baTable.comSearch.fieldData.has(key)) {
|
|
|
+ continue;
|
|
|
}
|
|
|
+ let val = "";
|
|
|
|
|
|
- proxy.eventBus.emit('onTableComSearch', comSearchData)
|
|
|
-}
|
|
|
+ let fieldDataTemp = baTable.comSearch.fieldData.get(key);
|
|
|
|
|
|
-const onResetForm = () => {
|
|
|
- // 封装好的onResetForm在此处不能使用
|
|
|
- for (const key in baTable.comSearch.form) {
|
|
|
- baTable.comSearch.form[key] = ''
|
|
|
+ if ((fieldDataTemp.render == "datetime" || fieldDataTemp.render == "dateType") && (fieldDataTemp.operator == "RANGE" || fieldDataTemp.operator == "NOT RANGE")) {
|
|
|
+
|
|
|
+ // 时间范围组件返回的是时间数组
|
|
|
+ if (baTable.comSearch.form[key] && baTable.comSearch.form[key].length >= 2) {
|
|
|
+ // 数组转字符串，以实现通过url参数传递预设搜索值
|
|
|
+ val = baTable.comSearch.form[key][0] + "," + baTable.comSearch.form[key][1];
|
|
|
+ }
|
|
|
+ } else if (fieldDataTemp.operator == "RANGE" || fieldDataTemp.operator == "NOT RANGE") {
|
|
|
+ // 普通的范围筛选，baTable在初始化时已准备好start和end字段
|
|
|
+ if (!baTable.comSearch.form[key + "-start"] && !baTable.comSearch.form[key + "-end"]) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ val = baTable.comSearch.form[key + "-start"] + "," + baTable.comSearch.form[key + "-end"];
|
|
|
+ } else if (baTable.comSearch.form[key]) {
|
|
|
+ val = baTable.comSearch.form[key];
|
|
|
}
|
|
|
-}
|
|
|
+
|
|
|
+ if (val) {
|
|
|
+ comSearchData.push({
|
|
|
+ field: key,
|
|
|
+ val: val,
|
|
|
+ operator: fieldDataTemp.operator,
|
|
|
+ render: fieldDataTemp.render
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ proxy.eventBus.emit("onTableComSearch", comSearchData);
|
|
|
+};
|
|
|
+
|
|
|
+const onResetForm = () => {
|
|
|
+ // 封装好的onResetForm在此处不能使用
|
|
|
+ for (const key in baTable.comSearch.form) {
|
|
|
+ baTable.comSearch.form[key] = "";
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.table-com-search {
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 1px solid #f6f6f6;
|
|
|
+ border-bottom: none;
|
|
|
+ padding: 13px 15px;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ .com-search-col {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 8px;
|
|
|
+ color: var(--color-regular);
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .com-search-col-label {
|
|
|
+ width: 20%;
|
|
|
+ padding: 0 15px;
|
|
|
+ text-align: right;
|
|
|
overflow: hidden;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
- max-width: 100%;
|
|
|
- background-color: #ffffff;
|
|
|
- border: 1px solid #f6f6f6;
|
|
|
- border-bottom: none;
|
|
|
- padding: 13px 15px;
|
|
|
- font-size: 14px;
|
|
|
- .com-search-col {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding-top: 8px;
|
|
|
- color: var(--color-regular);
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
- .com-search-col-label {
|
|
|
- width: 20%;
|
|
|
- padding: 0 15px;
|
|
|
- text-align: right;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- .com-search-col-input {
|
|
|
- padding: 0 15px;
|
|
|
- width: 80%;
|
|
|
- }
|
|
|
- .com-search-col-input-range {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 0 15px;
|
|
|
- width: 80%;
|
|
|
- .range-separator {
|
|
|
- padding: 0 5px;
|
|
|
- }
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .com-search-col-input {
|
|
|
+ padding: 0 15px;
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .com-search-col-input-range {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 15px;
|
|
|
+ width: 80%;
|
|
|
+
|
|
|
+ .range-separator {
|
|
|
+ padding: 0 5px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
:deep(.datetime-picker) {
|
|
|
- width: 100%;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
|
|
|
.w16 {
|
|
|
- width: 16.5% !important;
|
|
|
+ width: 16.5% !important;
|
|
|
}
|
|
|
+
|
|
|
.w83 {
|
|
|
- width: 83.5% !important;
|
|
|
+ width: 83.5% !important;
|
|
|
}
|
|
|
</style>
|
yigeren911