| 提交 | 用户 | 时间 | ||
| 1308d4 | 1 | <template> |
| W | 2 | <div class="dialog-search"> |
| 3 | <el-form | |
| 4 | :inline="true" | |
| 5 | ref="ruleForm" | |
| 6 | :model="formInline" | |
| 7 | class="demo-form-inline" | |
| 8 | v-show="showSearch" | |
| 9 | > | |
| 10 | <el-form-item | |
| 11 | v-for="(item, index) in formItemListData" | |
| 12 | :key="index" | |
| 13 | :label="item.label" | |
| 14 | > | |
| 15 | <!-- 下拉选择框 --> | |
| 16 | <template v-if="item.component == 'Select'"> | |
| 17 | <template v-if="item.slot"> | |
| 18 | <slot :name="item.slot" :form="formInline" :field="item.field"> | |
| 19 | </slot> | |
| 20 | </template> | |
| 21 | <template v-else> | |
| 22 | <el-select | |
| 23 | v-model="formInline[item.field]" | |
| 24 | :multiple="item.multiple" | |
| 25 | :placeholder="item.componentProps.placeholder" | |
| 26 | size="mini" | |
| 27 | clearable | |
| 28 | > | |
| 29 | <el-option | |
| 30 | v-for="(item2, index2) in item.selectOptions" | |
| 31 | size="mini" | |
| 32 | :key="index2" | |
| 33 | :label="item2.label" | |
| 34 | :value="item2.value" | |
| 35 | ></el-option> | |
| 36 | </el-select> | |
| 37 | </template> | |
| 38 | </template> | |
| 39 | ||
| 40 | <!-- 下拉选择框end --> | |
| 41 | <!-- 输入框 --> | |
| 42 | <el-input | |
| 43 | v-if="item.component == 'Input' && item.show !== false" | |
| 44 | v-model.trim="formInline[item.field]" | |
| 45 | :placeholder="item.componentProps.placeholder" | |
| 46 | clearable | |
| 47 | size="mini" | |
| 48 | ></el-input> | |
| 49 | <!-- 输入框 --> | |
| 50 | <!-- 日期范围选择框 --> | |
| 51 | <el-date-picker | |
| 52 | v-if=" | |
| 53 | item.component == 'daterange' || | |
| 54 | item.component == 'datetimerange' || | |
| 55 | item.component == 'date' || | |
| 56 | item.component == 'datetime' | |
| 57 | " | |
| 58 | size="mini" | |
| 59 | v-model="formInline[item.field]" | |
| 60 | :value-format="item.valueFormat || 'yyyy/MM/dd'" | |
| 61 | :format="item.format || 'yyyy/MM/dd'" | |
| 62 | clearable | |
| 63 | :type="item.component || ''" | |
| 64 | :range-separator="item.rangeSeparator || '至'" | |
| 65 | :start-placeholder="item.componentProps.startPlaceholder" | |
| 66 | :end-placeholder="item.componentProps.endPlaceholder" | |
| 67 | :placeholder="item.componentProps.placeholder" | |
| 68 | > | |
| 69 | </el-date-picker> | |
| 70 | <!-- 日期范围选择框end --> | |
| 71 | <!-- 级联选择器 --> | |
| 72 | <el-cascader | |
| 73 | v-if="item.component == 'cascader'" | |
| 74 | v-model="formInline[item.field]" | |
| 75 | :options="item.options" | |
| 76 | :props="item.props" | |
| 77 | size="mini" | |
| 78 | clearable | |
| 79 | ></el-cascader> | |
| 80 | <!-- 级联选择器end --> | |
| 81 | </el-form-item> | |
| 82 | ||
| 83 | <slot name="formItem"></slot> | |
| 84 | <el-form-item style="width: 10rem"> | |
| 85 | <el-button type="primary" size="mini" @click="onSubmit">查询</el-button> | |
| 86 | <el-button type="" size="mini" @click="resetForm('ruleForm')" | |
| 87 | >重置</el-button | |
| 88 | > | |
| 89 | </el-form-item> | |
| 90 | <!-- 可用于显示其他按钮 --> | |
| 91 | <slot name="formButton"></slot> | |
| 92 | </el-form> | |
| 93 | <el-row :gutter="10" class="mb8"> | |
| 94 | <div class="bottonBox"> | |
| 95 | <slot name="actionButton"></slot> | |
| 96 | <right-toolbar | |
| 97 | :showSearch.sync="showSearch" | |
| 98 | @queryTable="getList" | |
| 99 | class="rightbotton" | |
| 100 | ></right-toolbar> | |
| 101 | </div> | |
| 102 | </el-row> | |
| 103 | </div> | |
| 104 | </template> | |
| 105 | ||
| 106 | <script> | |
| 107 | import request from "@/utils/request"; | |
| 108 | import { time } from "echarts"; | |
| 109 | ||
| 110 | export default { | |
| 111 | name: "BaseSearch", | |
| 112 | props: { | |
| 113 | emitSearch: { | |
| 114 | // 是否立即执行搜索 | |
| 115 | type: Boolean, | |
| 116 | default: false, | |
| 117 | }, | |
| 118 | formItemList: { | |
| 119 | type: Array, | |
| 120 | default() { | |
| 121 | return []; | |
| 122 | }, | |
| 123 | }, | |
| 124 | }, | |
| 125 | data() { | |
| 126 | let formInline = {}; | |
| 127 | for (const obj of this.formItemList) { | |
| 128 | formInline[obj.field] = obj.defaultValue || ""; | |
| 129 | } | |
| 130 | return { | |
| 131 | formInline, | |
| 132 | showSearch: true, | |
| 133 | // formItemListData: [], | |
| 134 | }; | |
| 135 | }, | |
| 136 | computed: { | |
| 137 | formItemListData() { | |
| 138 | return JSON.parse(JSON.stringify(this.formItemList)).map((item) => { | |
| 139 | if (item.component == "Select" && !item.slot) { | |
| 140 | if (item.componentProps.options) { | |
| 141 | item.selectOptions = item.componentProps.options; | |
| 142 | } | |
| 143 | } | |
| 144 | ||
| 145 | return item; | |
| 146 | }); | |
| 147 | }, | |
| 148 | }, | |
| 149 | mounted() {}, | |
| 150 | watch: { | |
| 151 | emitSearch(newVal, oldVal) { | |
| 152 | // 是否立即触发搜索 用在弹窗中异步请求下拉框后 或者给下拉框赋值默认值后 需要用到这个方法 | |
| 153 | if (newVal) { | |
| 154 | console.log("此时触发--立即执行搜索"); | |
| 155 | this.$emit("search", this.formInline); | |
| 156 | } | |
| 157 | }, | |
| 158 | formItemList: { | |
| 159 | handler(newVal, oldVal) { | |
| 160 | for (const obj of this.formItemList) { | |
| 161 | console.log(obj); | |
| 162 | if (obj.defaultValue) { | |
| 163 | formInline[obj.field] = obj.defaultValue; | |
| 164 | } | |
| 165 | } | |
| 166 | }, | |
| 167 | deep: true, | |
| 168 | }, | |
| 169 | showSearch() { | |
| 170 | this.$emit("showSearchChange"); | |
| 171 | }, | |
| 172 | }, | |
| 173 | methods: { | |
| 174 | onSubmit() { | |
| 175 | this.$emit("search", this.formInline); | |
| 176 | }, | |
| 177 | resetForm(formName) { | |
| 178 | this.$refs[formName].resetFields(); | |
| 179 | let formInline = {}; | |
| 180 | for (const obj of this.formItemList) { | |
| 181 | formInline[obj.field] = ""; // 所有筛选条件清空 | |
| 182 | } | |
| 183 | this.formInline = formInline; | |
| 184 | ||
| 185 | this.$emit("search", this.formInline); | |
| 186 | }, | |
| 187 | getList() { | |
| 188 | this.$emit("getList"); | |
| 189 | }, | |
| 190 | }, | |
| 191 | }; | |
| 192 | </script> | |
| 193 | ||
| 194 | <style lang="scss" scoped> | |
| 195 | .dialog-search { | |
| 196 | // margin: 0 1rem; | |
| 197 | margin-bottom: 20px; | |
| 198 | text-align: left; | |
| 199 | ::v-deep .el-form-item__content { | |
| 200 | // width: 16rem; | |
| 201 | .el-input { | |
| 202 | width: 16rem; | |
| 203 | } | |
| 204 | .el-select { | |
| 205 | .el-input__inner { | |
| 206 | // height: 3.2rem; | |
| 207 | width: 16rem; | |
| 208 | } | |
| 209 | } | |
| 210 | } | |
| 211 | ::v-deep .el-form-item { | |
| 212 | margin-bottom: 5px; | |
| 213 | } | |
| 214 | } | |
| 215 | .bottonclas { | |
| 216 | display: flex; | |
| 217 | justify-content: flex-start; | |
| 218 | } | |
| 219 | .bottonBox { | |
| 220 | display: flex; | |
| 221 | justify-content: flex-start; | |
| 222 | } | |
| 223 | .rightbotton { | |
| 224 | margin-left: 20px; | |
| 225 | } | |
| 226 | </style> | |
