mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

InputSearch添加回车搜索

wangqin
zhangzhang 9 months ago
parent
ed128e2bfa
commit
ad90a7fdf0
2 changed files with 198 additions and 100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 142
      ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
  2. 106
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/firstResponders/index.vue

142
ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
View File

@ -1,109 +1,169 @@
<template> <template>
<ElPopover ref="PopoverRef" placement="bottom" popper-class="global-input-search-popover" :popperOptions="popperOptions" <div class="from-content" style="width: 100%">
:visibleArrow="false" :width="this.width" trigger="click" @show="handleShow"> <div class="InputSearch input" v-if="params && types == 'input'">
<div class='InputSearch' slot="reference" ref="ReferenceInputRef"> <ElInput
style="width: 100%"
v-model="value"
:placeholder="placeholder"
@change="handleSearch"
></ElInput>
<img src="./search.svg" @click="handleFormShow" />
</div>
<ElPopover
v-else
ref="PopoverRef"
placement="bottom"
popper-class="global-input-search-popover"
:popperOptions="popperOptions"
:visibleArrow="false"
:width="this.width"
trigger="click"
@show="handleShow"
style="width: 100%"
>
<div class="InputSearch" slot="reference" ref="ReferenceInputRef">
<span>{{ placeholder }}</span> <span>{{ placeholder }}</span>
<img src="./search.svg"> <img src="./search.svg" @click="handleFormShow" />
</div> </div>
<div style="width: 100%;max-height: 360px;"> <div style="width: 100%; max-height: 360px">
<slot> <slot>
<Form v-if="formList && formList.length" class="form" ref="FormConfigRef" :formList="formList" <Form
v-bind="getFormConfigOptions" /> v-if="formList && formList.length"
class="form"
ref="FormConfigRef"
:formList="formList"
v-bind="getFormConfigOptions"
/>
<!-- <ElEmpty v-else description="暂无搜索内容"></ElEmpty> --> <!-- <ElEmpty v-else description="暂无搜索内容"></ElEmpty> -->
<div v-else class="no-data">暂无数据</div> <div v-else class="no-data">暂无数据</div>
</slot> </slot>
<div class="footer"> <div class="footer">
<Button style="background-color: rgba(0, 179, 204, .3);" @click.native="handleResetForm"> <Button
style="background-color: rgba(0, 179, 204, 0.3)"
@click.native="handleResetForm"
>
重置 重置
</Button> </Button>
<Button @click.native="handleSearch"> <Button @click.native="handleSearch"> 搜索 </Button>
搜索
</Button>
</div> </div>
</div> </div>
</ElPopover> </ElPopover>
</div>
</template> </template>
<script> <script>
import Button from '@screen/components/Buttons/Button.vue'; import Button from "@screen/components/Buttons/Button.vue";
import Form from '@screen/components/FormConfig'; import Form from "@screen/components/FormConfig";
import { cloneDeep } from "lodash" import { cloneDeep } from "lodash";
export default { export default {
name: 'InputSearch', name: "InputSearch",
components: { components: {
Button, Button,
Form Form,
}, },
props: { props: {
type: {
type: String,
default: "form",
},
placeholder: { placeholder: {
type: String, type: String,
default: "请点击右侧图标筛选" default: "请点击右侧图标筛选",
},
valueData: {
type: String,
},
params: {
type: String,
},
queryParams: {
type: Array,
}, },
formConfigOptions: { formConfigOptions: {
type: Object, type: Object,
default: null default: null,
}, },
formList: { formList: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
}, },
data() { data() {
return { return {
types: this.type,
value: this.valueData,
width: null, width: null,
popperOptions: { popperOptions: {
popHideCallBack: () => { popHideCallBack: () => {
// console.log("---") // console.log("---")
}
}
}
}, },
emit: [ },
"handleSearch" };
], },
emit: ["handleSearch"],
computed: { computed: {
getFormConfigOptions() { getFormConfigOptions() {
return { return {
column: "1", column: "1",
labelWidth: "120px", labelWidth: "120px",
...this.formConfigOptions ...this.formConfigOptions,
};
},
},
methods: {
handleFormShow() {
console.log(this.params, this.types);
if (this.params) {
if (this.types == "form") {
this.types = "input";
} else {
this.types = "form";
} }
} else {
this.types = "form";
} }
console.log(this.params, this.types);
}, },
methods: {
handleShow() { handleShow() {
if (this.width) return; if (this.width) return;
this.width = this.$refs.ReferenceInputRef.getBoundingClientRect().width this.width = this.$refs.ReferenceInputRef.getBoundingClientRect().width;
}, },
handleResetForm() { handleResetForm() {
this.$refs.FormConfigRef?.reset(); this.$refs.FormConfigRef?.reset();
this.$refs.PopoverRef.doClose(); this.$refs.PopoverRef.doClose();
this.$emit('handleSearch', cloneDeep(this.$refs.FormConfigRef?.formData)); this.$emit("handleSearch", cloneDeep(this.$refs.FormConfigRef?.formData));
}, },
handleSearch() { handleSearch() {
if (this.types == "form") {
this.$refs.FormConfigRef.validate() this.$refs.FormConfigRef.validate()
.then((result) => { .then((result) => {
this.$refs.PopoverRef.doClose(); this.$refs.PopoverRef.doClose();
this.$emit('handleSearch', result); this.$emit("handleSearch", result);
}) })
.catch((err) => { .catch((err) => {
console.log("catch") console.log("catch");
}); });
} else {
let params = {};
params[this.params] = this.value;
this.$emit("handleSearch", params);
} }
} },
} },
};
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.InputSearch { .InputSearch {
width: 100%;
height: 26px; height: 26px;
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%) !important; background: linear-gradient(180deg, #005c79 0%, #009bcc 100%) !important;
color: #fff; color: #fff;
border-radius: 2px; border-radius: 2px;
display: flex; display: flex;
@ -116,7 +176,17 @@ export default {
font-size: 12px; font-size: 12px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
line-height: 14px; line-height: 14px;
} }
.input ::v-deep .el-input__inner {
background: none;
height: auto !important;
font-size: 12px;
padding: 0px 0;
line-height: 14px;
}
::v-deep .el-input__inner::placeholder {
font-size: 12px;
}
</style> </style>

106
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/firstResponders/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class='FirstResponders'> <div class="FirstResponders">
<div class="filter"> <div class="filter">
<div> <div>
<ButtonGradient @click.native="handleOpenDialogAddEdit()"> <ButtonGradient @click.native="handleOpenDialogAddEdit()">
@ -22,15 +22,33 @@
</ButtonGradient> </ButtonGradient>
</div> </div>
<InputSearch style="width: 402px;" :formList="searchFormList" :formConfigOptions="{ labelWidth: '72px' }" <InputSearch
@handleSearch="handleSearch" /> style="width: 402px"
:formList="searchFormList"
:formConfigOptions="{ labelWidth: '72px' }"
placeholder="请输入姓名、电话，回车搜索"
type="input"
:valueData="valueData"
:params="params"
:queryParams="queryParams"
@handleSearch="handleSearch"
/>
</div> </div>
<div class='body'> <div class="body">
<ElEmpty v-if="!data.length && !isFirst" description="暂无数据" style="width: 100%;height: 100%;position: absolute;" /> <ElEmpty
v-if="!data.length && !isFirst"
description="暂无数据"
style="width: 100%; height: 100%; position: absolute"
/>
<template v-else> <template v-else>
<PeopleCard v-for="(item, index) in data" :cardData="item" :key="index" <PeopleCard
@edit="data => handleOpenDialogAddEdit(data)" @delete="handleDelete" /> v-for="(item, index) in data"
:cardData="item"
:key="index"
@edit="(data) => handleOpenDialogAddEdit(data)"
@delete="handleDelete"
/>
</template> </template>
</div> </div>
@ -40,27 +58,28 @@
<script> <script>
import PeopleCard from "./../../components/PeopleCard/index.vue"; import PeopleCard from "./../../components/PeopleCard/index.vue";
import InputSearch from '@screen/components/InputSearch/index.vue'; import InputSearch from "@screen/components/InputSearch/index.vue";
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue";
import AddNEditDialog from "./components/AddNEditDialog.vue" import AddNEditDialog from "./components/AddNEditDialog.vue";
import { Message } from "element-ui"; import { Message } from "element-ui";
import { searchFormList } from "./data"; import { searchFormList } from "./data";
import request from "@/utils/request"; import request from "@/utils/request";
import { setLoading } from "@screen/utils/index.js" import { setLoading } from "@screen/utils/index.js";
import { delay, exportFile, confirm } from "@screen/utils/common"; import { delay, exportFile, confirm } from "@screen/utils/common";
import { getSelectOptionsStation } from "@screen/pages/control/event/businessDataManagement/utils.js"; import { getSelectOptionsStation } from "@screen/pages/control/event/businessDataManagement/utils.js";
import { values } from "lodash";
// 应急人员 // 应急人员
export default { export default {
name: 'FirstResponders', name: "FirstResponders",
components: { components: {
PeopleCard, PeopleCard,
ButtonGradient, ButtonGradient,
InputSearch, InputSearch,
AddNEditDialog AddNEditDialog,
}, },
inject: ['getPagination', 'setTotal', 'setCurrentPage'], inject: ["getPagination", "setTotal", "setCurrentPage"],
data() { data() {
return { return {
searchFormList, searchFormList,
@ -68,7 +87,10 @@ export default {
addNEditDialogVisible: false, addNEditDialogVisible: false,
dialogData: null, dialogData: null,
isFirst: true, isFirst: true,
} valueData: "",
params: "value",
queryParams: ["phone", "name"],
};
}, },
created() { created() {
this.getData(); this.getData();
@ -81,11 +103,11 @@ export default {
request({ request({
url: `/business/employees/${data.id}`, url: `/business/employees/${data.id}`,
method: "DELETE", method: "DELETE",
data: {} data: {},
}) })
.then((result) => { .then((result) => {
if (result.code != 200) return Message.error(`删除失败!`); if (result.code != 200) return Message.error(`删除失败!`);
this.setCurrentPage(1) this.setCurrentPage(1);
Message.success(`删除成功!`); Message.success(`删除成功!`);
}) })
.catch((err) => { .catch((err) => {
@ -102,24 +124,28 @@ export default {
request({ request({
url: `/business/employees/sysPost`, url: `/business/employees/sysPost`,
method: "post", method: "post",
data: {} data: {},
}), }),
// 机构 // 机构
getSelectOptionsStation() getSelectOptionsStation(),
]) ]).then(([post, organization]) => {
.then(([post, organization]) => { if (post.status === "fulfilled" && post.value.code == 200) {
if (post.status === 'fulfilled' && post.value.code == 200) { this.searchFormList[0].options.options = post.value.data.map(
this.searchFormList[0].options.options = post.value.data.map(item => ({ (item) => ({
key: item.postId, key: item.postId,
label: item.postName, label: item.postName,
})) })
);
} }
if (organization.status === 'fulfilled' && Array.isArray(organization.value)) { if (
organization.status === "fulfilled" &&
Array.isArray(organization.value)
) {
this.searchFormList[1].options.options = organization.value; this.searchFormList[1].options.options = organization.value;
} }
}) });
}, },
handleExport() { handleExport() {
exportFile({ exportFile({
@ -127,11 +153,12 @@ export default {
filename: "应急人员", filename: "应急人员",
data: { data: {
...this.searchData, ...this.searchData,
...this.getPagination() ...this.getPagination(),
} },
}); });
}, },
handleSearch(data) { handleSearch(data) {
console.log(88888, data);
this.searchData = data; this.searchData = data;
this.getData(); this.getData();
}, },
@ -145,26 +172,27 @@ export default {
method: "get", method: "get",
params: { params: {
...this.searchData, ...this.searchData,
...this.getPagination() ...this.getPagination(),
} },
}).then(result => { })
.then((result) => {
if (result.code != 200) return; if (result.code != 200) return;
this.data = result.rows; this.data = result.rows;
this.setTotal(result.total) this.setTotal(result.total);
}).finally(() => { })
.finally(() => {
this.isFirst = false; this.isFirst = false;
closeLoading(); closeLoading();
}) });
} },
} },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.FirstResponders { .FirstResponders {
.body { .body {
display: grid; display: grid;
grid-template-columns: repeat(10, 1fr); grid-template-columns: repeat(10, 1fr);

Write Preview
Loading…
Cancel
Save