wewe

src/views/news/index.vue

@@ -47,15 +47,17 @@
                     </template>
                 </el-table-column>
             </el-table>
-            <el-pagination
-                background
-                layout="prev, pager, next"
-                :total="total"
-                :page-size="query.page_size"
-                :current-page="query.page"
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-            />
+            <div class="user-pagination">
+                <el-pagination
+                    background
+                    layout="total, sizes, prev, pager, next, jumper"
+                    :total="total"
+                    :page-size="query.page_size"
+                    :current-page="query.page"
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                />
+            </div>
         </div>
     </div>
 </template>
@@ -117,27 +119,38 @@ const query = ref({
     start_time: '',
     end_time: '',
 })
-
+const handleReset = () => {
+    dateTime.value = []
+    query.value = {
+        username: '',
+        mobile: '',
+        operative_date: '',
+        next_follow_date: '',
+        risk_type: '',
+        page: 1,
+        page_size: 20
+    }
+    getNews()
+}
 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.page = 1
+    query.value.page_size = e
+    query.value.page = 1
     getNews()
 }
 const handleCurrentChange = (e) => {
-    query.page = e
+    query.value.page = e
     getNews()
 }
 onMounted(() => {
@@ -160,4 +173,10 @@ onMounted(() => {
     .el-link+ .el-link {
         margin-left: 10px;
     }
+    .user-pagination {
+        margin-top: 20px;
+        text-align: right;
+        display: flex;
+        justify-content: right;
+    }
 </style>

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;margin-right: 10px;" 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-input style="width: 150px;" v-model="query.username" placeholder="请输入患者姓名" />
+            <el-input style="width: 150px;" v-model="query.mobile" placeholder="请输入账号" />
             <!-- 请选择当前风险 -->
-            <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"
-                type="date"
-                placeholder="选择下次随访时间"
-                style="margin-right: 10px;width: 180px;"
+                v-model="operative_date"
+                type="daterange"
+                range-separator="-"
+                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>
             
@@ -32,7 +40,7 @@
             <el-button type="primary" @click="handleExport">导出</el-button>
         </div>
         <div class="user-table">
-            <el-table :data="tableData" style="width: 100%">
+            <el-table :data="tableData" style="width: 100%" max-height="calc(100vh - 240px)">
                 <el-table-column prop="username" label="姓名" />
                 <el-table-column label="性别">
                     <template #default="scope">
@@ -75,15 +83,17 @@
                     </template>
                 </el-table-column>
             </el-table>
-            <el-pagination
-                background
-                layout="prev, pager, next"
-                :total="total"
-                :page-size="query.page_size"
-                :current-page="query.page"
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-            />
+            <div class="user-pagination">
+                <el-pagination
+                    background
+                    layout="total, sizes, prev, pager, next, jumper"
+                    :total="total"
+                    :page-size="query.page_size"
+                    :current-page="query.page"
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                />
+            </div>
         </div>
     </div>
 </template>
@@ -110,17 +120,45 @@ const handleCheck = (row) => {
         }
     })
 }
-
+const operative_date = ref([])
+const next_follow_date = ref([])
 const query = ref({
     username: '',
     mobile: '',
-    operative_date: '',
-    next_follow_date: '',
+    operative_date_start: '',
+    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
@@ -131,11 +169,15 @@ const handleSearch = () => {
     getList()
 }
 const handleReset = () => {
+    operative_date.value = []
+    next_follow_date.value = []
     query.value = {
         username: '',
         mobile: '',
-        operative_date: '',
-        next_follow_date: '',
+        operative_date_start: '',
+        operative_date_end: '',
+        next_follow_date_start: '',
+        next_follow_date_end: '',
         risk_type: '',
         page: 1,
         page_size: 20
@@ -159,12 +201,12 @@ const handleExport = () => {
     })
 }
 const handleSizeChange = (e) => {
-    query.page_size = e
-    query.page = 1
+    query.value.page_size = e
+    query.value.page = 1
     getList()
 }
 const handleCurrentChange = (e) => {
-    query.page = e
+    query.value.page = e
     getList()
 }
 onMounted(() => {
@@ -174,6 +216,26 @@ onMounted(() => {
 
 <style scoped>
 .user-search {
-        margin-bottom: 10px;
+    }
+    .user-pagination {
+        margin-top: 20px;
+        text-align: right;
+        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>

src/views/user/userDetail.vue

@@ -35,7 +35,7 @@
             <el-descriptions-item label="产次：">{{ userInfo.birth_number }} </el-descriptions-item>
             <el-descriptions-item label="受孕方式：">
                 <el-tag v-if="userInfo.conception_type == 0" type="info">未知</el-tag>
-                <el-tag v-if="userInfo.conception_type == 1" type="success">自认受孕</el-tag>
+                <el-tag v-if="userInfo.conception_type == 1" type="success">自然受孕</el-tag>
                 <el-tag v-if="userInfo.conception_type == 2" type="warning">辅助生殖技术</el-tag>
             
             </el-descriptions-item>