mod:查询条件折叠展开

CMS1.0/src/base-ui/form/src/form.vue

@@ -9,11 +9,13 @@
       ref="ruleFormRef"
       :model="modelValue"
     >
+
       <el-row>
-        <template v-for="item in formItems" :key="item.label">
+       
+        <template v-for="(item, index) in formItems" :key="item.label">
           <el-col v-bind="colLayout">
             <el-form-item
-              v-if="!item.isHidden"
+              v-if="!item.isHidden && !(showArrowDown && ((index + 1) > (24 / spanNum)) && arrowDown)"
               :label="item.label"
               :style="itemStyle"
               :prop="item.field"
@@ -149,6 +151,18 @@ import type { FormInstance, FormRules } from 'element-plus'
 
 export default defineComponent({
   props: {
+    arrowDown: {
+      type: Boolean,
+      required: true
+    },
+    showArrowDown: {
+      type: Boolean,
+      required: true
+    },
+    spanNum: {
+      type: Number,
+      required: true
+    },
     modelValue: {
       type: Object,
       required: true
@@ -222,7 +236,10 @@ export default defineComponent({
       }
     }
 
+
+
     return {
+
       rules,
       ruleFormRef,
       handleValueChange

CMS1.0/src/components/page-search/src/page-search.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-search">
-    <hy-form v-bind="formConfig" v-model="formData">
+    <hy-form v-bind="formConfig" v-model="formData" :showArrowDown="showArrowDown" :arrowDown="arrowDown" :spanNum="spanNum">
       <!-- <template #header>
         <h1 class="header">高级检索</h1>
       </template>-->
@@ -10,6 +10,8 @@
           <el-button type="primary" icon="Search" @click="handleQueryClick"
             >搜索</el-button
           >
+          <el-button v-if="showArrowDown && arrowDown" type="primary" link @click="changeArrowDown">展开  <el-icon><ArrowDown /></el-icon></el-button>
+          <el-button v-if="showArrowDown && !arrowDown" type="primary" link @click="changeArrowDown">收起  <el-icon><ArrowUp /></el-icon></el-button>
         </div>
       </template>
     </hy-form>
@@ -66,6 +68,21 @@ export default defineComponent({
       }
     })
 
+
+    let showArrowDown = ref(false)
+    
+    let spanNum = ref(6)
+    if (formConfig.colLayout && formConfig.colLayout.span) spanNum.value = formConfig.colLayout.span
+
+    if (formConfig.formItems.length > (24 / spanNum.value)) showArrowDown.value = true
+
+    let arrowDown = ref(true)
+
+
+    const changeArrowDown = () => {
+      arrowDown.value = !arrowDown.value 
+    }
+
     watch(
       () => props.deptId,
       (newValue) => {
@@ -111,29 +128,17 @@ export default defineComponent({
         }
       }
 
-      // console.log(formItems)
-      // console.log(formOriginData)
-      // for (const key in formOriginData) {
-      //   if (key === 'params') {
-      //     if (Array.isArray(formData.value.params)) {
-      //       const queryData = {}
-      //       queryData['beginTime'] = formData.value.params[0]
-      //       queryData['endTime'] = formData.value.params[1]
-      //       formData.value[`${key}`] = queryData
-      //     }
-      //     // formData.value[key]['beginTime'] = formData.value.params[0]
-      //     // formData.value[key]['endTime'] = formData.value.params[1]
-      //   }
-      // }
-      // console.log(formData.value)
-      // delete formData.value.params
-      console.log(formData, 'formData')
-
       emit('queryBtnClick', formData.value)
       emit('queryDataInfo', formData.value)
     }
 
+
+
     return {
+      spanNum,
+      arrowDown,
+      changeArrowDown,
+      showArrowDown,
       formConfig,
       formData,
       handleResetClick,

CMS1.0/src/hooks/use-page-search.js

@@ -8,6 +8,7 @@ export function usePageSearch() {
     
   }
   const handleQueryClick = (queryInfo) => {
+    console.log(queryInfo, 'queryInfo')
     pageContentRef.value?.getPageData(queryInfo)
     return queryInfo
   }

CMS1.0/src/views/main/patientFile/patientFileList/config/search.config.js

@@ -1,3 +1,4 @@
+import { nations, patientStatus, sex, patientSource } from "@/utils/commonDic.js";
 export const searchFormConfig = {
   labelWidth: '120px',
   itemStyle: {
@@ -8,26 +9,36 @@ export const searchFormConfig = {
   },
   formItems: [
     {
-      field: 'postCode',
+      field: 'name',
       type: 'input',
-      label: '岗位编码',
-      placeholder: '请输入岗位编码'
+      label: '患者姓名',
+      placeholder: '请输入患者姓名'
     },
     {
-      field: 'postName',
+      field: 'phoneNumber',
       type: 'input',
-      label: '岗位名称',
-      placeholder: '请输入岗位名称'
+      label: '患者手机号',
+      placeholder: '请输入患者手机号'
     },
     {
-      field: 'status',
+      field: 'label',
+      type: 'input',
+      label: '标签',
+      placeholder: '请输入标签'
+    },
+    {
+      field: 'sex',
+      type: 'select',
+      label: '性别',
+      placeholder: '请输入标签',
+      options: sex,
+    },
+    {
+      field: 'patientStatus',
       type: 'select',
       label: '状态',
-      placeholder: '请选择岗位状态',
-      options: [
-        { title: '启用', value: 1 },
-        { title: '禁用', value: 0 }
-      ]
+      placeholder: '请选择状态',
+      options: patientStatus,
     }
   ]
 }

CMS1.0/src/views/main/patientFile/patientFileList/patientFileList.vue

@@ -1,89 +1,10 @@
 <template>
   <div class="app-container">
-    <div class="page-search">
-      <div class="pos-icon">
-        <el-icon v-if="iconFlag" @click="iconHandle">
-          <ArrowRight />
-        </el-icon>
-        <el-icon v-if="!iconFlag" @click="iconHandle">
-          <ArrowDown />
-        </el-icon>
-      </div>
-      <div class="search-header">
-        <el-row :gutter="20">
-          <el-col :span="6">
-            <el-form-item label="患者姓名">
-              <el-input v-model="form.name" placeholder="请输入患者姓名" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="患者手机号">
-              <el-input v-model="form.name" placeholder="请输入患者手机号" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="计划">
-              <el-select v-model="form.region" placeholder="请选择计划">
-                <el-option label="Zone one" value="shanghai" />
-                <el-option label="Zone two" value="beijing" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-button type="primary">重置</el-button>
-            <el-button type="primary">搜索</el-button>
-          </el-col>
-        </el-row>
-      </div>
-      <div class="serach-bottom" v-if="!iconFlag">
-        <el-row :gutter="20">
-          <el-col :span="6">
-            <el-form-item label="计划">
-              <el-select v-model="form.region" placeholder="请选择计划">
-                <el-option label="Zone one" value="shanghai" />
-                <el-option label="Zone two" value="beijing" />
-              </el-select>
-            </el-form-item>
-
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="任务时间">
-              <el-date-picker v-model="form.date1" type="daterange" range-separator="至" start-placeholder="开始时间"
-                end-placeholder="结束时间" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="要求时间">
-              <el-date-picker v-model="form.date2" type="daterange" range-separator="至" start-placeholder="开始时间"
-                end-placeholder="结束时间" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="随访方式">
-              <el-select v-model="form.delivery" placeholder="请选择随访方式">
-                <el-option label="Zone one" value="shanghai" />
-                <el-option label="Zone two" value="beijing" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="状态">
-              <el-select v-model="form.resource" placeholder="请选择状态">
-                <el-option label="Zone one" value="shanghai" />
-                <el-option label="Zone two" value="beijing" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-
-      </div>
-      <div class="btn-handle">
-        <el-button type="primary">批量导入</el-button>
-        <el-button type="primary" @click="batchLabels">批量打标</el-button>
-        <el-button type="primary">批量取消标签</el-button>
-      </div>
-    </div>
+    <page-search
+      :searchFormConfig="searchFormConfig"
+      @resetBtnClick="handleResetClick"
+      @queryBtnClick="handleQueryClick"
+    />
     <page-content ref="pageContentRef" :contentTableConfig="contentTableConfig" pageName="/patient/patient"
       :isExport="false" @newBtnClick="handleNewData" @editBtnClick="handleEditData">
       <template #patientId="{ row }">
@@ -112,7 +33,7 @@
 <script>
 import { defineComponent } from 'vue'
 import { useRouter } from 'vue-router';
-
+import PageSearch from '@/components/page-search'
 import PageContent from '@/components/page-content'
 import PageModal from '@/components/page-modal'
 import { setLabel } from '@/api/patient/patient';
@@ -131,13 +52,14 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 export default defineComponent({
   name: 'PatientFileList',
   components: {
+    PageSearch,
     PageContent,
     PageModal
   },
   setup() {
     const router = useRouter();
 
-    const [pageContentRef] = usePageSearch()
+    const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()
     const activeNames = ref(['1'])
     const input2 = ref('')
     const iconFlag = ref(true)
@@ -240,6 +162,8 @@ export default defineComponent({
     const [pageModalRef, defaultInfo, handleNewData, handleEditData] =
       usePageModal(newCallback, editCallback)
     return {
+      handleQueryClick,
+      handleResetClick,
       batchLabels,
       statusMap: ArrayToMap(patientStatus, 'value'),
       sourceMap: ArrayToMap(patientSource, 'value'),
@@ -250,6 +174,7 @@ export default defineComponent({
       activeNames,
       form,
       iconHandle,
+      searchFormConfig,
       contentTableConfig,
       pageContentRef,
       modalConfigRef,