随访调查 随访查询

src/components/CustomTable/index.vue

@@ -91,6 +91,9 @@ export default {
   flex: 1;
 }
 ::v-deep {
+  th .ivu-table-cell {
+    white-space: nowrap;
+  }
   .ivu-table-wrapper {
     border-color: #eff0f3;
     .ivu-table-header,

src/layouts/components/NavBar/index.vue

@@ -205,6 +205,7 @@ export default {
     .community {
       width: 106px;
       height: 30px;
+      white-space: nowrap;
       background: rgba(255, 255, 255, 0.1);
       color: #fff;
       display: flex;
@@ -218,6 +219,7 @@ export default {
       }
     }
     .user {
+      white-space: nowrap;
       margin-left: 40px;
       height: 30px;
       display: flex;

src/views/followupquery/index.vue

 <template>
   <div class="screeningSearch">
     <div class="top">
-      <div class="keyword">
+      <form-components :forms="formList"></form-components>
+      <!-- <div class="keyword">
         <div class="label">关键词：</div>
         <Input
           v-model="keyword"
@@ -10,8 +11,8 @@
           style="width: 224px"
         />
         <Button class="btn">搜索</Button>
-      </div>
-      <div
+      </div> -->
+      <!-- <div
         class="tobeModified"
         :style="{ backgroundColor: modifiedFlag ? '#4E68FF' : '#fff' }"
         @click="changeModified"
@@ -24,7 +25,7 @@
         <span :style="{ color: modifiedFlag ? '#fff' : '#000' }"
           >待修改（{{ tobeModified }}）</span
         >
-      </div>
+      </div> -->
     </div>
     <div class="bot">
       <custom-table
@@ -39,15 +40,16 @@
 </template>
 <script>
 import CustomTable from "@/components/CustomTable"
+import FormComponents from "@/components/FormComponents"
 export default {
   components: {
     CustomTable,
+    FormComponents,
   },
   data() {
     return {
       keyword: "",
       modifiedFlag: false,
-      tobeModified: 20,
       tableHeader: [
         {
           title: "医联体",
@@ -63,7 +65,7 @@ export default {
         },
         {
           title: "性别",
-          width: 100,
+          minWidth: 60,
           key: "2",
           align: "center",
         },
@@ -75,7 +77,7 @@ export default {
         },
         {
           title: "年龄",
-          width: 100,
+          minWidth: 60,
           align: "center",
         },
         {
@@ -98,8 +100,8 @@ export default {
         },
         {
           title: "筛查审核状态",
-          width: 180,
           key: "8",
+          minWidth: 140,
           align: "center",
         },
         {
@@ -107,7 +109,6 @@ export default {
           width: 140,
           key: "action",
           fixed: "right",
-          ellipsis: true,
           align: "center",
           render: (h, params) => {
             return h(
@@ -130,6 +131,71 @@ export default {
           1: 2,
         },
       ],
+      formList: [
+        {
+          type: "select",
+          label: "筛查时间",
+          prop: "screeningTime",
+          placeholder: "请选择时间",
+          rules: [],
+          opts: [{ label: "123", value: "1" }],
+        },
+        {
+          type: "select",
+          label: "随访审核状态",
+          prop: "screeningStatus",
+          placeholder: "请选择随访状态",
+          rules: [],
+          opts: [{ label: "123", value: "1" }],
+        },
+        {
+          type: "select",
+          label: "随访进度",
+          prop: "screeningProgress",
+          placeholder: "请选择随访进度",
+          rules: [],
+          opts: [{ label: "123", value: "1" }],
+        },
+        {
+          type: "select",
+          label: "计划随访时间",
+          prop: "planScreeningTime",
+          placeholder: "请选择计划随访时间",
+          rules: [],
+          opts: [{ label: "123", value: "1" }],
+        },
+        {
+          type: "input",
+          label: "关键词",
+          prop: "keyWord",
+          placeholder: "请输入医联体/姓名/身份证",
+          rules: [],
+        },
+        {
+          type: "btn",
+          list: [
+            {
+              btnType: "button",
+              type: "",
+              style: {
+                width: "80px",
+                height: "32px",
+                borderRadius: "4px",
+                fontSize: "14px",
+                marginLeft: "40px",
+              },
+              btnText: "查询",
+              func: () => {
+                this.onSearch()
+              },
+            },
+            {
+              btnType: "tobeModified",
+              tobeModified: 20,
+            },
+          ],
+        },
+      ],
       page: {
         current: 1,
         size: 10,
@@ -153,6 +219,9 @@ export default {
       console.log(this.page)
       this.$refs.customTable.loading = false
     },
+    onSearch() {
+      console.log(123456)
+    },
   },
 }
 </script>
@@ -160,46 +229,11 @@ export default {
 .screeningSearch {
   .top {
     width: 100%;
-    height: 72px;
+    // height: 72px;
     padding: 0 116px 0 44px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 2px solid #f6f6f6;
-    .keyword {
-      display: flex;
-      align-items: center;
-      .btn {
-        width: 80px;
-        height: 32px;
-        background: #ffffff;
-        border-radius: 4px;
-        border: 1px solid #4e68ff;
-        font-size: 14px;
-        color: #4e68ff;
-        margin-left: 40px;
-      }
-    }
-    .tobeModified {
-      // width: 134px;
-      height: 32px;
-      background: #ffffff;
-      border-radius: 4px;
-      padding: 16px 8px;
-      border: 1px solid #d9d9d9;
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      .check {
-        font-size: 18px;
-        margin-right: 8px;
-      }
-      span {
-        font-size: 16px;
-        font-family: AlibabaPuHuiTiR;
-        color: #333333;
-      }
-    }
   }
   .bot {
     padding: 0 24px;

src/views/followupresearch/index.vue

+<template>
+  <div class="screeningSearch">
+    <div class="top">
+      <form-components :forms="formList"></form-components>
+      <!-- <div class="keyword">
+        <div class="label">关键词：</div>
+        <Input
+          v-model="keyword"
+          placeholder="请输入医联体/姓名/身份证"
+          clearable
+          style="width: 224px"
+        />
+        <Button class="btn">搜索</Button>
+      </div> -->
+      <!-- <div
+        class="tobeModified"
+        :style="{ backgroundColor: modifiedFlag ? '#4E68FF' : '#fff' }"
+        @click="changeModified"
+      >
+        <Icon
+          :style="{ color: modifiedFlag ? '#fff' : '#d9d9d9' }"
+          type="md-checkmark"
+          class="check"
+        />
+        <span :style="{ color: modifiedFlag ? '#fff' : '#000' }"
+          >待修改（{{ tobeModified }}）</span
+        >
+      </div> -->
+    </div>
+    <div class="bot">
+      <custom-table
+        ref="customTable"
+        :table-header="tableHeader"
+        :table-data="tableData"
+        :page="page"
+        @changePage="changePage"
+      ></custom-table>
+    </div>
+  </div>
+</template>
+<script>
+import CustomTable from "@/components/CustomTable"
+import FormComponents from "@/components/FormComponents"
+export default {
+  components: {
+    CustomTable,
+    FormComponents,
+  },
+  data() {
+    return {
+      keyword: "",
+      modifiedFlag: false,
+      tableHeader: [
+        {
+          title: "医联体",
+          key: "name",
+          align: "center",
+          width: 100,
+        },
+        {
+          title: "姓名",
+          width: 100,
+          key: "1",
+          align: "center",
+        },
+        {
+          title: "性别",
+          minWidth: 60,
+          ellipsis: true,
+          key: "2",
+          align: "center",
+        },
+        {
+          title: "身份证",
+          width: 160,
+          key: "3",
+          align: "center",
+        },
+        {
+          title: "年龄",
+          minWidth: 60,
+          align: "center",
+        },
+        {
+          title: "筛查时间",
+          width: 100,
+          key: "5",
+          align: "center",
+        },
+        {
+          title: "风险评估结果",
+          width: 180,
+          key: "6",
+          align: "center",
+        },
+        {
+          title: "上次随访时间",
+          width: 180,
+          key: "7",
+          align: "center",
+        },
+        {
+          title: "随访进度",
+          width: 100,
+          key: "8",
+          align: "center",
+        },
+        {
+          title: "计划随访时间",
+          width: 140,
+          key: "9",
+          ellipsis: true,
+          align: "center",
+        },
+        {
+          title: "操作",
+          width: 80,
+          key: "action",
+          // fixed: "right",
+          ellipsis: true,
+          align: "center",
+          render: (h, params) => {
+            return h(
+              "a",
+              {
+                on: {
+                  click: () => {
+                    console.log(params.row)
+                  },
+                },
+              },
+              "修改"
+            )
+          },
+        },
+      ],
+      tableData: [
+        {
+          name: "1",
+          1: 2,
+        },
+      ],
+      formList: [
+        {
+          xs: 24,
+          sm: 12,
+          md: 12,
+          lg: 7,
+          xl: 7,
+          type: "select",
+          label: "计划随访时间",
+          prop: "planScreeningTime",
+          placeholder: "请选择计划随访时间",
+          rules: [],
+          opts: [{ label: "123", value: "1" }],
+        },
+        {
+          xs: 24,
+          sm: 12,
+          md: 12,
+          lg: 7,
+          xl: 7,
+          type: "input",
+          label: "关键词",
+          prop: "keyWord",
+          placeholder: "请输入医联体/姓名/身份证",
+          rules: [],
+        },
+        {
+          xs: 24,
+          sm: 12,
+          md: 12,
+          lg: 7,
+          xl: 7,
+          type: "select",
+          label: "随访进度",
+          prop: "screeningProgress",
+          placeholder: "请选择随访进度",
+          rules: [],
+          opts: [{ label: "123", value: "1" }],
+        },
+        {
+          xs: 1,
+          sm: 2,
+          md: 2,
+          lg: 2,
+          xl: 2,
+          type: "btn",
+          list: [
+            {
+              btnType: "button",
+              type: "",
+              style: {
+                width: "80px",
+                height: "32px",
+                borderRadius: "4px",
+                fontSize: "14px",
+                marginLeft: "40px",
+              },
+              btnText: "查询",
+              func: () => {
+                this.onSearch()
+              },
+            },
+            // {
+            //   btnType: "tobeModified",
+            //   tobeModified: 20,
+            // },
+          ],
+        },
+      ],
+      page: {
+        current: 1,
+        size: 10,
+        total: 20,
+      },
+    }
+  },
+  watch: {},
+  mounted() {},
+  methods: {
+    changeModified() {
+      this.modifiedFlag = !this.modifiedFlag
+    },
+    setSelectedIndex(i) {
+      console.log(this.selectedIndex)
+      this.selectedIndex = i
+      sessionStorage.setItem("homeSelectedIndex", this.selectedIndex)
+    },
+    changePage(v) {
+      this.page[v.type] = v.value
+      console.log(this.page)
+      this.$refs.customTable.loading = false
+    },
+    onSearch() {
+      console.log(123456)
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.screeningSearch {
+  .top {
+    width: 100%;
+    // height: 72px;
+    padding: 0 116px 0 44px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .bot {
+    padding: 0 24px;
+  }
+}
+</style>