lcw

src/views/backOfficeSystem/ces/components/QueryFormPanel.vue

@@ -4,34 +4,95 @@
     <div class="query-grid">
       <div v-for="field in renderFields" :key="field.key" class="query-cell">
         <div class="cell-label">{{ field.label }}</div>
-        <div class="cell-control" :class="{ 'is-checkbox': field.type === 'checkbox' }">
-          <el-input clearable v-if="field.type === 'input'" v-model="formState[field.key]" class="control-input"
-            :placeholder="field.placeholder || ''" />
-          <el-input clearable v-else-if="field.type === 'number'" v-model="formState[field.key]" class="control-input"
-            type="number" :placeholder="field.placeholder || ''" />
-          <el-select clearable v-else-if="field.type === 'select'" v-model="formState[field.key]" class="control-select"
-            :placeholder="field.placeholder || '请选择'" :multiple="field.multiple || false" collapse-tags
-            collapse-tags-tooltip>
-            <el-option v-for="item in field.options || []" :key="item.value ?? item" :label="item.label ?? item"
-              :value="item.value ?? item" />
+        <div
+          class="cell-control"
+          :class="{ 'is-checkbox': field.type === 'checkbox' }"
+        >
+          <el-input
+            clearable
+            v-if="field.type === 'input'"
+            v-model="formState[field.key]"
+            class="control-input"
+            :placeholder="field.placeholder || ''"
+          />
+          <el-input
+            clearable
+            v-else-if="field.type === 'number'"
+            v-model="formState[field.key]"
+            class="control-input"
+            type="number"
+            :placeholder="field.placeholder || ''"
+          />
+          <el-select
+            clearable
+            v-else-if="field.type === 'select'"
+            v-model="formState[field.key]"
+            class="control-select"
+            :placeholder="field.placeholder || '请选择'"
+            :multiple="field.multiple || false"
+            collapse-tags
+            collapse-tags-tooltip
+          >
+            <el-option
+              v-for="item in field.options || []"
+              :key="item.value ?? item"
+              :label="item.label ?? item"
+              :value="item.value ?? item"
+            />
           </el-select>
-          <el-date-picker clearable v-else-if="field.type === 'date'" v-model="formState[field.key]"
-            class="control-date" type="date" :placeholder="field.placeholder || '请选择日期'" value-format="YYYY-MM-DD" />
-          <el-date-picker clearable v-else-if="field.type === 'datetime'" v-model="formState[field.key]"
-            class="control-date" type="datetime" :placeholder="field.placeholder || '请选择时间'"
-            value-format="YYYY-MM-DD HH:mm:ss" />
-          <el-date-picker clearable v-else-if="field.type === 'daterange'" v-model="formState[field.key]"
-            class="control-date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
-            value-format="YYYY-MM-DD" />
-          <el-date-picker clearable v-else-if="field.type === 'datetimerange'" v-model="formState[field.key]"
-            class="control-date" type="datetimerange" range-separator="至" start-placeholder="开始时间"
-            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
+          <el-date-picker
+            clearable
+            v-else-if="field.type === 'date'"
+            v-model="formState[field.key]"
+            class="control-date"
+            type="date"
+            :placeholder="field.placeholder || '请选择日期'"
+            value-format="YYYY-MM-DD"
+          />
+          <el-date-picker
+            clearable
+            v-else-if="field.type === 'datetime'"
+            v-model="formState[field.key]"
+            class="control-date"
+            type="datetime"
+            :placeholder="field.placeholder || '请选择时间'"
+            value-format="YYYY-MM-DD HH:mm:ss"
+          />
+          <el-date-picker
+            clearable
+            v-else-if="field.type === 'daterange'"
+            v-model="formState[field.key]"
+            class="control-date"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+          />
+          <el-date-picker
+            clearable
+            v-else-if="field.type === 'datetimerange'"
+            v-model="formState[field.key]"
+            class="control-date"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            value-format="YYYY-MM-DD HH:mm:ss"
+          />
           <template v-else-if="field.type === 'department'">
-            <MOSTY.Department clearable v-model="formState[field.key]" class="control-select" />
+            <MOSTY.Department
+              clearable
+              v-model="formState[field.key]"
+              class="control-select"
+            />
           </template>
-          <div v-else-if="field.type === 'checkbox'" class=" checkbox-wrap">
+          <div v-else-if="field.type === 'checkbox'" class="checkbox-wrap">
             <el-checkbox v-model="formState[field.key]" />
           </div>
+          <div v-else-if="field.type === 'slot'" class="checkbox-wrap">
+            <slot :name="field.key" />
+          </div>
         </div>
       </div>
     </div>
@@ -40,24 +101,28 @@
         <slot name="but"></slot>
       </div>
       <div>
-        <el-button size="small" type="primary" @click="handleSearch">{{ searchText }}</el-button>
-        <el-button size="small" type="button" @click="handleReset">重置 </el-button>
+        <el-button size="small" type="primary" @click="handleSearch">{{
+          searchText
+        }}</el-button>
+        <el-button size="small" type="button" @click="handleReset"
+          >重置
+        </el-button>
       </div>
     </div>
   </section>
 </template>
 
 <script setup>
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, watch } from "vue";
 import * as MOSTY from "@/components/MyComponents/index";
 const props = defineProps({
   title: {
     type: String,
-    default: '查询条件'
+    default: "查询条件"
   },
   searchText: {
     type: String,
-    default: '查询'
+    default: "查询"
   },
   fields: {
     type: Array,
@@ -67,100 +132,106 @@ const props = defineProps({
     type: Array,
     default: () => []
   }
-})
+});
 
-const emit = defineEmits(['search', 'submit', 'reset'])
-const formState = reactive({})
+const emit = defineEmits(["search", "submit", "reset"]);
+const formState = reactive({});
 
 const renderFields = computed(() => {
-  const source = props.searchArr.length ? props.searchArr : props.fields
-  return source.map((field) => ({
-    ...field,
-    key: field.key || field.prop,
-    type: field.type || field.showType || 'input'
-  })).filter((field) => field.key)
-})
+  const source = props.searchArr.length ? props.searchArr : props.fields;
+  return source
+    .map((field) => ({
+      ...field,
+      key: field.key || field.prop,
+      type: field.type || field.showType || "input"
+    }))
+    .filter((field) => field.key);
+});
 
 const getResetValue = (field) => {
   if (field.defaultVal !== undefined) {
-    return Array.isArray(field.defaultVal) ? [...field.defaultVal] : field.defaultVal
+    return Array.isArray(field.defaultVal)
+      ? [...field.defaultVal]
+      : field.defaultVal;
   }
-  if (field.type === 'checkbox') {
-    return false
+  if (field.type === "checkbox") {
+    return false;
   }
-  if (field.type === 'daterange' || field.type === 'datetimerange') {
-    return []
+  if (field.type === "daterange" || field.type === "datetimerange") {
+    return [];
   }
-  if (field.type === 'select') {
+  if (field.type === "select") {
     if (field.multiple) {
-      return []
+      return [];
     }
-    return null
+    return null;
   }
-  return ''
-}
+  return "";
+};
 
 const buildResetPayload = () => {
-  const payload = {}
+  const payload = {};
   renderFields.value.forEach((field) => {
-    payload[field.key] = getResetValue(field)
-  })
-  return payload
-}
+    payload[field.key] = getResetValue(field);
+  });
+  return payload;
+};
 
 const setFormState = (value = {}) => {
   Object.keys(formState).forEach((key) => {
-    delete formState[key]
-  })
+    delete formState[key];
+  });
   renderFields.value.forEach((field) => {
     if (value[field.key] !== undefined) {
-      formState[field.key] = Array.isArray(value[field.key]) ? [...value[field.key]] : value[field.key]
-      return
+      formState[field.key] = Array.isArray(value[field.key])
+        ? [...value[field.key]]
+        : value[field.key];
+      return;
     }
-    formState[field.key] = getResetValue(field)
-  })
-}
+    formState[field.key] = getResetValue(field);
+  });
+};
 
 const getFormSnapshot = () => {
-  const snapshot = {}
+  const snapshot = {};
   renderFields.value.forEach((field) => {
-    const value = formState[field.key]
+    const value = formState[field.key];
     if (Array.isArray(value)) {
-      snapshot[field.key] = [...value]
-      return
+      snapshot[field.key] = [...value];
+      return;
     }
-    snapshot[field.key] = value
-  })
-  return snapshot
-}
+    snapshot[field.key] = value;
+  });
+  return snapshot;
+};
 
 const handleSearch = () => {
-  const payload = getFormSnapshot()
-  emit('search', payload)
-  emit('submit', payload)
-}
+  const payload = getFormSnapshot();
+  emit("search", payload);
+  emit("submit", payload);
+};
 
 const handleReset = () => {
-  const payload = buildResetPayload()
-  setFormState(payload)
-  emit('reset', true)
-  emit('search', payload)
-  emit('submit', payload)
-}
+  const payload = buildResetPayload();
+  setFormState(payload);
+  emit("reset", true);
+  emit("search", payload);
+  emit("submit", payload);
+};
 
 watch(
   renderFields,
   () => {
-    setFormState(buildResetPayload())
+    setFormState(buildResetPayload());
   },
   { immediate: true }
-)
+);
 
 defineExpose({
   formState,
   handleSearch,
   handleReset
-})
+});
 </script>
 
 <style scoped lang="scss">