|
@@ -3,6 +3,15 @@
|
|
|
<el-card shadow="nover">
|
|
|
<div class="search">
|
|
|
<el-form inline>
|
|
|
+ <el-form-item label="关键字">
|
|
|
+ <el-input v-model="searchParams.keyWord" style="width: 200px; margin-left: 20px" class="search-input" placeholder="请输入关键字" clearable @keyup.enter="handleSearch" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="handleSearch">
|
|
|
+ <el-icon><ele-Search /></el-icon>
|
|
|
+ 搜索
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" v-auth="'add'" @click="addOrEdit()">
|
|
|
<el-icon>
|
|
@@ -36,7 +45,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref } from 'vue';
|
|
|
+import { ref, reactive, watch } from 'vue';
|
|
|
import api from '/@/api/screen';
|
|
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
|
|
import { useSearch } from '/@/hooks/useCommon';
|
|
@@ -44,10 +53,31 @@ import EditForm from './edit.vue';
|
|
|
|
|
|
const editFormRef = ref();
|
|
|
|
|
|
-const { params, tableData, getList, loading } = useSearch<any[]>(api.getList, 'Data', { name: '', address: '' });
|
|
|
+const searchParams = reactive({
|
|
|
+ keyWord: ''
|
|
|
+});
|
|
|
+
|
|
|
+// 监听搜索参数变化,确保在API请求中正确传递搜索条件
|
|
|
+watch(searchParams, (newVal) => {
|
|
|
+ // 处理搜索参数的值
|
|
|
+ for (const key in newVal) {
|
|
|
+ if (newVal[key] === '' || newVal[key] === null) {
|
|
|
+ delete params[key];
|
|
|
+ } else {
|
|
|
+ params[key] = newVal[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+}, { deep: true });
|
|
|
+
|
|
|
+const { params, tableData, getList, loading } = useSearch<any[]>(api.getList, 'Data', searchParams);
|
|
|
|
|
|
getList();
|
|
|
|
|
|
+// 搜索
|
|
|
+const handleSearch = () => {
|
|
|
+ getList(1);
|
|
|
+};
|
|
|
+
|
|
|
const addOrEdit = async (row?: any) => {
|
|
|
if (row) {
|
|
|
editFormRef.value.open(row);
|