filter组件

components.d.ts

@@ -20,6 +20,7 @@ declare module 'vue' {
     copy: typeof import('./src/components/CtForm/index copy.vue')['default']
     CtBtn: typeof import('./src/components/CtVuetify/CtBtn/index.vue')['default']
     CtDialog: typeof import('./src/components/CtDialog/index.vue')['default']
+    CtFilter: typeof import('./src/components/CtFilter/index.vue')['default']
     CtForm: typeof import('./src/components/CtForm/index.vue')['default']
     CtIcon: typeof import('./src/components/CtVuetify/CtIcon/index.vue')['default']
     CtMenu: typeof import('./src/components/CtVuetify/CtMenu/index.vue')['default']

src/components/CtFilter/index.vue

@@ -0,0 +1,77 @@
+<template>
+	<v-card style="width:100%; min-height: 80px;" elevation="5">
+		<v-form v-model="valid" ref="formRef">
+			<div class="flex-horizon d-flex pa-2 flex-wrap">
+				<div v-for="(item, index) in items.options" :key="`filter_${item.label}_${index}`" class="pa-3" v-show="!item.hidden">
+					<textUI
+            v-if="item.type == 'text'"
+            v-model="item.value"
+            :item="item"
+            @blur="item.blur"
+            @appendInnerClick="item.appendInnerClick"
+          ></textUI>
+          <autocompleteUI
+            v-if="item.type === 'autocomplete'"
+            v-model="item.value"
+            :item="item"
+            @search="v => item.search ? item.search(v) : null"
+          ></autocompleteUI>
+				</div>
+				<template v-if="showBtn">
+					<div class="pa-3">
+						<v-btn color="primary" class="elevation-5 half-button" @click="search">查 询</v-btn>
+            <v-btn color="primary" variant="outlined" v-if="showResetBtn" class="elevation-5 half-button ml-3" @click="reset">重 置</v-btn>
+					</div>
+				</template>
+				<slot name="btn"></slot>
+			</div>
+			<slot></slot>
+		</v-form>
+	</v-card>
+</template>
+
+<script setup>
+defineOptions({ name:'components-ct-filter'})
+import { ref } from 'vue'
+import textUI from './../FormUI/TextInput'
+import autocompleteUI from './../FormUI/autocomplete'
+
+const emit = defineEmits(['search', 'reset'])
+const props = defineProps({
+  items: {
+    type: Object,
+    default: () => ({})
+  },
+  showBtn: {
+    type: Boolean,
+    default: true
+  },
+  showResetBtn: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const formRef = ref()
+const valid = ref(false)
+
+const search = () => {
+  const obj = props.items?.options.reduce((res, item) => {
+    res[item.key] = item.value
+    return res
+  }, {})
+  emit('search', obj)
+}
+
+const reset = () => {
+  formRef.value.reset()
+  const obj = props.items?.options.reduce((res, item) => {
+    res[item.key] = null
+    return res
+  }, {})
+  emit('reset', obj)
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/recruit/enterprise/newlyAppointed/index.vue

@@ -1,12 +1,5 @@
 <template>
-	<v-card class="pa-3" elevation="5">
-		<CtForm ref="CtFormRef" :items="formItems" class="mt-3">
-			<template #formBtn>
-				<v-btn color="primary" class="elevation-5" width="90" @click.stop="handleSearch">搜 索</v-btn>
-				<v-btn variant="outlined" color="primary" width="90" class="elevation-5 ml-3" @click.stop="handleReset">重 置</v-btn>
-			</template>
-		</CtForm>
-	</v-card>
+	<CtFilter :items="formItems" @reset="handleReset" @search="handleSearch" />
 
 	<v-card class="mt-3" elevation="5">
 		<CtTable
@@ -77,7 +70,6 @@ const headers = [
   { title: '过往工作酒店品牌', key: 'workHistory', sortable: false },
   { title: '操作', key: 'actions', sortable: false, align: 'center' }
 ]
-const CtFormRef = ref()
 const formItems = ref({
   options: [
 		{
@@ -87,7 +79,7 @@ const formItems = ref({
       label: '中文名',
 			clearable: true,
 			hideDetails: true,
-			col: 3
+			width: 200
     },
 		{
       type: 'text',
@@ -96,8 +88,7 @@ const formItems = ref({
       label: '英文名',
 			clearable: true,
 			hideDetails: true,
-			flexStyle: 'mx-3',
-			col: 3
+			width: 200
     },
 		{
       type: 'text',
@@ -106,7 +97,7 @@ const formItems = ref({
       label: '职位',
 			clearable: true,
 			hideDetails: true,
-			col: 3
+			width: 200
     },
 		{
       type: 'text',
@@ -115,8 +106,7 @@ const formItems = ref({
       label: '任职酒店',
 			clearable: true,
 			hideDetails: true,
-			flexStyle: 'ml-3',
-			col: 3
+			width: 200
     },
 		{
       type: 'text',
@@ -125,17 +115,16 @@ const formItems = ref({
       label: '酒店品牌',
 			clearable: true,
 			hideDetails: true,
-			col: 3
+			width: 200
     },
 		{
       type: 'text',
       key: 'workTerritory',
       value: '',
       label: '工作地域',
-			flexStyle: 'mx-3',
 			clearable: true,
 			hideDetails: true,
-			col: 3
+			width: 200
     },
 		{
       type: 'text',
@@ -144,14 +133,8 @@ const formItems = ref({
       label: '过往工作酒店品牌',
 			clearable: true,
 			hideDetails: true,
-			col: 3
-    },
-		{
-			slotName: 'formBtn',
-			col: 3,
-			noParam: true,
-			flexStyle: 'ml-3'
-		}
+			width: 200
+    }
   ]
 })
 const showDialog = ref(false)
@@ -188,26 +171,19 @@ const handleChangePage = async (e) => {
 }
 
 // 搜索
-const handleSearch = async () => {
+const handleSearch = async (obj) => {
 	await store.getEnterpriseInfo(true)
 	// 没有权限提示联系门墩儿
 	if (!info.value?.entitlement?.newAppointment) {
 		showDialog.value = true
 		return
 	}
-	formItems.value.options.forEach(item => {
-	  if (item.noParam) return
-		query.value[item.key] = item.value
-	})
+	query.value = Object.assign(query.value, obj)
 	getList()
 }
 // 重置
-const handleReset = () => {
-	formItems.value.options.forEach(item => {
-		if (item.noParam) return
-		item.value = ''
-		query.value[item.key] = ''
-	})
+const handleReset = (obj) => {
+	query.value = Object.assign(query.value, obj)
 	getList()
 }