wewe

src/views/news/index.vue

@@ -135,23 +135,22 @@ const handleReset = () => {
 const total = ref(0)
 const getNews = () => {
     news(query.value).then(res => {
-        console.log(res)
         tableData.value = res.list
         total.value = res.total
     })
 }
 const handleSearch = () => {
-    query.page = 1
+    query.value.page = 1
     getNews()
 }
 
 const handleSizeChange = (e) => {
-    query.page_size = e
+    query.value.page_size = e
-    query.page = 1
+    query.value.page = 1
     getNews()
 }
 const handleCurrentChange = (e) => {
-    query.page = e
+    query.value.page = e
     getNews()
 }
 onMounted(() => {

src/views/user/index.vue

@@ -1,29 +1,37 @@
 <template>
     <div>
         <div class="user-search">
-            <el-input style="width: 150px;margin-right: 10px;" v-model="query.username" placeholder="请输入患者姓名" />
+            <el-input style="width: 150px;" v-model="query.username" placeholder="请输入患者姓名" />
-            <el-input style="width: 150px;margin-right: 10px;" v-model="query.mobile" placeholder="请输入账号" />
+            <el-input style="width: 150px;" v-model="query.mobile" placeholder="请输入账号" />
-            <!-- 选择胆道闭锁时间 -->
-            <el-date-picker
-                v-model="query.operative_date"
-                type="date"
-                placeholder="选择胆道闭锁时间"
-                style="width: 180px;"
-                value-format="YYYY-MM-DD"
-            />
             <!-- 请选择当前风险 -->
-            <el-select v-model="query.risk_type" placeholder="请选择当前风险" style="width: 150px;margin-right: 10px;margin-left: 10px;">
+            <el-select v-model="query.risk_type" placeholder="请选择当前风险" style="width: 150px;">
                 <el-option label="高风险" value="3" />
                 <el-option label="中风险" value="2" />
                 <el-option label="低风险" value="1" />
             </el-select>
+            <!-- 选择胆道闭锁时间 -->
             <el-date-picker
-                v-model="query.next_follow_date"
+                v-model="operative_date"
-                type="date"
+                type="daterange"
-                placeholder="选择下次随访时间"
+                range-separator="-"
-                style="margin-right: 10px;width: 180px;"
+                start-placeholder="手术开始日期"
+                end-placeholder="结束日期"
                 value-format="YYYY-MM-DD"
+                @change="changeOperative"
+                style="margin-right: 10px;margin-bottom: 20px;"
             />
+            <el-date-picker
+                v-model="next_follow_date"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="下次随访开始日期"
+                end-placeholder="结束日期"
+                value-format="YYYY-MM-DD"
+                @change="changeNextFollow"
+                 style="margin-right: 10px;margin-bottom: 20px;"
+            />
+            
+            
             <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
             <el-button icon="Refresh" @click="handleReset">重置</el-button>
             
@@ -112,17 +120,45 @@ const handleCheck = (row) => {
         }
     })
 }
-
+const operative_date = ref([])
+const next_follow_date = ref([])
 const query = ref({
     username: '',
     mobile: '',
-    operative_date: '',
+    operative_date_start: '',
-    next_follow_date: '',
+    operative_date_end: '',
+    next_follow_date_start: '',
+    next_follow_date_end: '',
     risk_type: '',
     page: 1,
     page_size: 20
 })
 const total = ref(0)
+
+const changeOperative = (val) => {
+    if (!val) {
+        query.value.operative_date_start = ''
+        query.value.operative_date_end = ''
+    } else {
+        query.value.operative_date_start = val[0]
+        query.value.operative_date_end = val[1]
+    }
+    
+    query.value.page = 1
+    getList()
+}
+const changeNextFollow = (val) => { 
+    if (!val) {
+        query.value.next_follow_date_start = ''
+        query.value.next_follow_date_end = ''
+    } else {
+        query.value.next_follow_date_start = val[0]
+        query.value.next_follow_date_end = val[1]
+    }
+    query.value.page = 1
+    getList()
+   
+}
 const getList = () => {
     users(query.value).then(res => {
         total.value = res.total
@@ -133,11 +169,15 @@ const handleSearch = () => {
     getList()
 }
 const handleReset = () => {
+    operative_date.value = []
+    next_follow_date.value = []
     query.value = {
         username: '',
         mobile: '',
-        operative_date: '',
+        operative_date_start: '',
-        next_follow_date: '',
+        operative_date_end: '',
+        next_follow_date_start: '',
+        next_follow_date_end: '',
         risk_type: '',
         page: 1,
         page_size: 20
@@ -161,12 +201,12 @@ const handleExport = () => {
     })
 }
 const handleSizeChange = (e) => {
-    query.page_size = e
+    query.value.page_size = e
-    query.page = 1
+    query.value.page = 1
     getList()
 }
 const handleCurrentChange = (e) => {
-    query.page = e
+    query.value.page = e
     getList()
 }
 onMounted(() => {
@@ -176,7 +216,6 @@ onMounted(() => {
 
 <style scoped>
 .user-search {
-        margin-bottom: 10px;
     }
     .user-pagination {
         margin-top: 20px;
@@ -184,4 +223,19 @@ onMounted(() => {
         display: flex;
         justify-content: right;
     }
+    .el-input{
+        margin-bottom: 20px;
+        margin-right: 10px;
+    }
+    .el-select{
+        margin-bottom: 20px;
+        margin-right: 10px;
+    }
+    .el-range-editor.el-input__wrapper{
+        margin-bottom: 20px;
+        margin-right: 10px;
+    }
+    .el-button{
+        margin-bottom: 20px;
+    }
 </style>