From fe84976a091af79dccbd3916ca92cb30036b3076 Mon Sep 17 00:00:00 2001
From: miaojiale <1123971748@qq.com>
Date: Fri, 25 Nov 2022 17:28:40 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9A=8F=E8=AE=BF=E8=B0=83=E6=9F=A5=20?=
 =?UTF-8?q?=E9=9A=8F=E8=AE=BF=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomTable/index.vue    |   3 +
 src/components/FormComponents/index.vue | 537 ++++++++++++++++--------
 src/layouts/components/NavBar/index.vue |   2 +
 src/views/followupquery/index.vue       | 124 ++++--
 src/views/followupresearch/index.vue    | 255 +++++++++++
 5 files changed, 704 insertions(+), 217 deletions(-)
 create mode 100644 src/views/followupresearch/index.vue

diff --git a/src/components/CustomTable/index.vue b/src/components/CustomTable/index.vue
index 1d614db..b6ed112 100644
--- a/src/components/CustomTable/index.vue
+++ b/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,
diff --git a/src/components/FormComponents/index.vue b/src/components/FormComponents/index.vue
index 9eb5b26..5cc4ab9 100644
--- a/src/components/FormComponents/index.vue
+++ b/src/components/FormComponents/index.vue
@@ -1,189 +1,382 @@
 <template>
-    <el-form ref="form" :model="form" :label-position="labelPosition" :inline="inlineFlag" :label-width="labelWidth" :size="size" @submit.native.prevent="handleSearch()" class="el-form-self" :style="formStyle">
-        <el-col :xs="item.xs?item.xs:24" :sm="item.sm?item.sm:12" :md="item.md?item.md:8" :lg="item.lg?item.lg:8" :xl="item.xl?item.xl:6"  v-for="(item,index) in forms" :key="index" v-if="!item.hidden">
-            <el-form-item :label="item.label?item.label+(item.hiddenColon?'':'：'):''" :prop="item.prop" :rules="item.rules" :label-width="item.labelWidth || '110px'">
-                <!-- 输入框 -->
-                <el-input v-if="item.type === 'input'" :id="item.id?item.id:''" v-model="form[item.prop]" :readonly="item.readonly" :disabled="item.disabled" :placeholder="item.placeholder" @focus="item.focusFunc?item.focusFunc($event):{}" @change="item.func?item.func($event):{}">
-                    <span :slot="item.slot?item.slot:'append'" v-if="item.unit">{{item.unit}}</span>
-                </el-input>
-
-                <template v-if="item.type === 'textarea'">
-                    <el-input type="textarea" :placeholder="item.placeholder" :rows="item.rows" :autosize="item.autosize" v-model="form[item.prop]" :minlength="item.minlength" :maxlength="item.maxlength" :show-word-limit="item.showLimit"></el-input>
-                </template>
-
-                <!-- 模糊查询输入 -->
-                <el-autocomplete :popper-class="item.popperClass" style="width:100%;" v-else-if="item.type === 'autocomplete'" v-model="form[item.prop]" :fetch-suggestions="item.func" :placeholder="item.placeholder" @select="item.selectfun?item.selectfun($event):{}" clearable>
-                    <template slot-scope="{ item }">
-                        <div class="name">{{ item.value }}</div>
-                        <span class="description">{{ item.description }}</span>
-                    </template>
-                </el-autocomplete>
-
-                <!-- 模糊查询选择 -->
-                <el-select v-else-if="item.type === 'remote'" v-model="form[item.prop]" filterable remote reserve-keyword :placeholder="item.placeholder" :remote-method="item.remoteFunc">
-                    <el-option v-for="(opt,optIndex) in item.opts" :key="optIndex" :label="opt.label" :value="item.isSelect?opt.selectValue:opt.value">
-                    </el-option>
-                </el-select>
-
-                <!-- 日期区间 -->
-                <el-date-picker v-else-if="item.type === 'daterange'" v-model="form[item.prop]" type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="item.options" :format="item.format" :value-format="item.valueFormat">
-                </el-date-picker>
-
-                <!-- 日期 -->
-                <el-date-picker v-else-if="item.type === 'date'" v-model="form[item.prop]" :type="item.dateType?item.dateType:'date'" :placeholder="item.placeholder" :picker-options="item.options" :format="item.format" :value-format="item.valueFormat">
-                </el-date-picker>
-
-                <!-- 下拉框 -->
-                <el-select v-else-if="item.type === 'select'" clearable filterable :disabled="item.disabled" v-model="form[item.prop]" :placeholder="item.placeholder?item.placeholder:'请选择'" @change="item.func?item.func($event):{}">
-                    <el-option v-for="(opt,optIndex) in item.opts" :key="optIndex" :label="opt.label" :value="item.isSelect?opt.selectValue:opt.value">
-                    </el-option>
-                </el-select>
-
-                 <!-- 单选框 -->
-                <el-radio :class="item.class" v-else-if="item.type === 'radio'" v-model="form[item.prop]" v-for="(opt,optIndex) in item.opts" :key="optIndex" :label="opt.value" @change="item.func?item.func($event):{}">{{opt.label}}
-                </el-radio>
-
-                <!-- 级联 -->
-                <el-cascader v-else-if="item.type === 'cascader'" v-model="form[item.prop]" :style="'width:'+item.width" :options="item.list" :change-on-select="item.changeSelect" :show-all-levels="item.showLevel"></el-cascader>
-
-                <!-- 文字 -->
-                <span v-else-if="item.type === 'text'">
-                    {{item.text?item.text:form[item.prop]}}
-                </span>
-
-                <!-- 数字输入框 -->
-                <el-input-number v-else-if="item.type === 'number'" :controls="false" :min="item.min || 0" :precision="item.precision" v-model="form[item.prop]" :disabled="item.disabled || disabled" />
-
-                <!-- 图标 -->
-                <span v-else-if="item.type === 'svg'">
-                    <svg-icon :style="item.style" :icon-class="item.iconClass" @click.native="clickSvg(item.func)" class="form-svg"></svg-icon>
-                </span>
-
-            </el-form-item>
-        </el-col>
-
-        <el-col :xs="24" :sm="24" :lg="24" v-if="lists" style="padding-left:120px;">
-            <el-button v-for="(btn,index) in lists" :key="index" :type="btn.type" :size="size" :icon="btn.icon" @click="btn.func" :style="btn.style">
-                {{btn.btnText}}
-            </el-button>
-        </el-col>
-    </el-form>
+  <el-form
+    ref="form"
+    :model="form"
+    :label-position="labelPosition"
+    :inline="inlineFlag"
+    :label-width="labelWidth"
+    :size="size"
+    class="el-form-self"
+    :style="formStyle"
+    @submit.native.prevent="handleSearch()"
+  >
+    <el-col
+      v-for="(item, index) in forms"
+      v-if="!item.hidden"
+      :key="index"
+      :xs="item.xs ? item.xs : 24"
+      :sm="item.sm ? item.sm : 12"
+      :md="item.md ? item.md : 8"
+      :lg="item.lg ? item.lg : 8"
+      :xl="item.xl ? item.xl : 6"
+    >
+      <el-form-item
+        v-if="item.type != 'btn'"
+        :label="item.label ? item.label + (item.hiddenColon ? '' : '：') : ''"
+        :prop="item.prop"
+        :rules="item.rules"
+        :label-width="item.labelWidth || '110px'"
+      >
+        <!-- 输入框 -->
+        <el-input
+          v-if="item.type === 'input'"
+          :id="item.id ? item.id : ''"
+          v-model="form[item.prop]"
+          :readonly="item.readonly"
+          :disabled="item.disabled"
+          :placeholder="item.placeholder"
+          @focus="item.focusFunc ? item.focusFunc($event) : {}"
+          @change="item.func ? item.func($event) : {}"
+        >
+          <span v-if="item.unit" :slot="item.slot ? item.slot : 'append'">{{
+            item.unit
+          }}</span>
+        </el-input>
+
+        <template v-if="item.type === 'textarea'">
+          <el-input
+            v-model="form[item.prop]"
+            type="textarea"
+            :placeholder="item.placeholder"
+            :rows="item.rows"
+            :autosize="item.autosize"
+            :minlength="item.minlength"
+            :maxlength="item.maxlength"
+            :show-word-limit="item.showLimit"
+          ></el-input>
+        </template>
+
+        <!-- 模糊查询输入 -->
+        <el-autocomplete
+          v-else-if="item.type === 'autocomplete'"
+          v-model="form[item.prop]"
+          :popper-class="item.popperClass"
+          style="width: 100%"
+          :fetch-suggestions="item.func"
+          :placeholder="item.placeholder"
+          clearable
+          @select="item.selectfun ? item.selectfun($event) : {}"
+        >
+          <template slot-scope="{ item }">
+            <div class="name">{{ item.value }}</div>
+            <span class="description">{{ item.description }}</span>
+          </template>
+        </el-autocomplete>
+
+        <!-- 模糊查询选择 -->
+        <el-select
+          v-else-if="item.type === 'remote'"
+          v-model="form[item.prop]"
+          filterable
+          remote
+          reserve-keyword
+          :placeholder="item.placeholder"
+          :remote-method="item.remoteFunc"
+        >
+          <el-option
+            v-for="(opt, optIndex) in item.opts"
+            :key="optIndex"
+            :label="opt.label"
+            :value="item.isSelect ? opt.selectValue : opt.value"
+          >
+          </el-option>
+        </el-select>
+
+        <!-- 日期区间 -->
+        <el-date-picker
+          v-else-if="item.type === 'daterange'"
+          v-model="form[item.prop]"
+          type="daterange"
+          align="right"
+          unlink-panels
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="item.options"
+          :format="item.format"
+          :value-format="item.valueFormat"
+        >
+        </el-date-picker>
+
+        <!-- 日期 -->
+        <el-date-picker
+          v-else-if="item.type === 'date'"
+          v-model="form[item.prop]"
+          :type="item.dateType ? item.dateType : 'date'"
+          :placeholder="item.placeholder"
+          :picker-options="item.options"
+          :format="item.format"
+          :value-format="item.valueFormat"
+        >
+        </el-date-picker>
+
+        <!-- 下拉框 -->
+        <el-select
+          v-else-if="item.type === 'select'"
+          v-model="form[item.prop]"
+          clearable
+          filterable
+          :disabled="item.disabled"
+          :placeholder="item.placeholder ? item.placeholder : '请选择'"
+          @change="item.func ? item.func($event) : {}"
+        >
+          <el-option
+            v-for="(opt, optIndex) in item.opts"
+            :key="optIndex"
+            :label="opt.label"
+            :value="item.isSelect ? opt.selectValue : opt.value"
+          >
+          </el-option>
+        </el-select>
+
+        <!-- 单选框 -->
+        <el-radio
+          v-for="(opt, optIndex) in item.opts"
+          v-else-if="item.type === 'radio'"
+          :key="optIndex"
+          v-model="form[item.prop]"
+          :class="item.class"
+          :label="opt.value"
+          @change="item.func ? item.func($event) : {}"
+          >{{ opt.label }}
+        </el-radio>
+
+        <!-- 级联 -->
+        <el-cascader
+          v-else-if="item.type === 'cascader'"
+          v-model="form[item.prop]"
+          :style="'width:' + item.width"
+          :options="item.list"
+          :change-on-select="item.changeSelect"
+          :show-all-levels="item.showLevel"
+        ></el-cascader>
+
+        <!-- 文字 -->
+        <span v-else-if="item.type === 'text'">
+          {{ item.text ? item.text : form[item.prop] }}
+        </span>
+
+        <!-- 数字输入框 -->
+        <el-input-number
+          v-else-if="item.type === 'number'"
+          v-model="form[item.prop]"
+          :controls="false"
+          :min="item.min || 0"
+          :precision="item.precision"
+          :disabled="item.disabled || disabled"
+        />
+
+        <!-- 图标 -->
+        <span v-else-if="item.type === 'svg'">
+          <svg-icon
+            :style="item.style"
+            :icon-class="item.iconClass"
+            class="form-svg"
+            @click.native="clickSvg(item.func)"
+          ></svg-icon>
+        </span>
+      </el-form-item>
+      <div v-if="item.type == 'btn'" class="flex">
+        <template v-for="(btn, index) in item.list">
+          <el-button
+            v-if="btn.btnType == 'button'"
+            :key="index"
+            :type="btn.type"
+            :size="size"
+            :icon="btn.icon"
+            :style="btn.style"
+            @click="btn.func"
+          >
+            {{ btn.btnText }}
+          </el-button>
+          <div
+            v-if="btn.btnType == 'tobeModified'"
+            :key="index"
+            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' }"
+              >待修改（{{ btn.tobeModified }}）</span
+            >
+          </div>
+        </template>
+      </div>
+    </el-col>
+
+    <el-col v-if="lists" :xs="24" :sm="24" :lg="24" style="padding-left: 120px">
+      <el-button
+        v-for="(btn, index) in lists"
+        :key="index"
+        :type="btn.type"
+        :size="size"
+        :icon="btn.icon"
+        :style="btn.style"
+        @click="btn.func"
+      >
+        {{ btn.btnText }}
+      </el-button>
+    </el-col>
+  </el-form>
 </template>
 
 <script>
 export default {
-    data() {
+  props: {
+    size: { type: String, default: "small" },
+    labelPosition: { type: String, default: "right" },
+    labelWidth: { type: String },
+    formStyle: { type: Object },
+    inlineFlag: { type: Boolean, default: false },
+    forms: { type: Array }, // 表单组,
+    lists: { type: Array }, // 按钮组
+  },
+  data() {
+    const form = {}
+    const { forms } = this.$props
+    forms.forEach((item) => {
+      if (!item.prop || item.hidden) return false
+      if (
+        item.type === "daterange" ||
+        item.type === "checkboxList" ||
+        item.type === "checkbox" ||
+        item.type === "cascader" ||
+        (item.type === "select" && item.multiple)
+      ) {
+        form[item.prop] = []
+      } else {
+        form[item.prop] = ""
+      }
+    })
+    return {
+      form,
+      modifiedFlag: false,
+    }
+  },
+  methods: {
+    // 查询
+    handleSearch() {
+      this.$emit("handleSearch", this.form)
+    },
+
+    // 重置
+    handleReset() {
+      this.$refs.form.resetFields()
+      this.handleSearch()
+    },
+
+    handleConfirm() {
+      this.loading = true
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$emit("handleConfirm", this.form)
+        } else {
+          this.loading = false
+        }
+      })
+    },
+
+    // 表单赋值
+    initforms(formEdit) {
+      this.$nextTick(() => {
         const form = {}
-        const { forms } = this.$props
-        forms.forEach(item => {
-            if (!item.prop || item.hidden) return false
-            if (
-                item.type === 'daterange' ||
-                item.type === 'checkboxList' ||
-                item.type === 'checkbox' ||
-                item.type === 'cascader' ||
-                (item.type === 'select' && item.multiple)
-            ) {
-                form[item.prop] = []
-            } else {
-                form[item.prop] = ''
-            }
+        this.forms.forEach((item) => {
+          if (!item.prop || item.hidden) return false
+          if (
+            item.type === "daterange" ||
+            item.type === "checkboxList" ||
+            item.type === "checkbox" ||
+            item.type === "cascader" ||
+            (item.type === "select" && item.multiple)
+          ) {
+            form[item.prop] = []
+          } else {
+            form[item.prop] = ""
+          }
         })
-        return {
-            form
+        if (formEdit) {
+          this.form = Object.assign(form, formEdit)
+        } else {
+          this.form = Object.assign({}, form)
+        }
+        this.loading = false
+        if (this.$refs.form && this.$refs.form.clearValidate) {
+          this.$refs.form.clearValidate()
         }
+      })
     },
-    props: {
-        size: { type: String, default: 'small' },
-        labelPosition: { type: String, default: 'right' },
-        labelWidth: { type: String },
-        formStyle: { type: Object },
-        inlineFlag: { type: Boolean, default: false },
-        forms: { type: Array }, // 表单组,
-        lists: { type: Array } // 按钮组
+
+    // 绑定部分值(此时表单已渲染)
+    initfields(obj) {
+      this.form = Object.assign(this.form, obj)
     },
-    methods: {
-
-        // 查询
-        handleSearch() {
-            this.$emit('handleSearch', this.form)
-        },
-
-        // 重置
-        handleReset() {
-            this.$refs.form.resetFields()
-            this.handleSearch()
-        },
-
-        handleConfirm() {
-            this.loading = true
-            this.$refs.form.validate(valid => {
-                if (valid) {
-                    this.$emit('handleConfirm', this.form)
-                } else {
-                    this.loading = false
-                }
-            })
-        },
-
-        // 表单赋值
-        initforms(formEdit) {
-            this.$nextTick(() => {
-                const form = {}
-                this.forms.forEach(item => {
-                    if (!item.prop || item.hidden) return false
-                    if (
-                        item.type === 'daterange' ||
-                        item.type === 'checkboxList' ||
-                        item.type === 'checkbox' ||
-                        item.type === 'cascader' ||
-                        (item.type === 'select' && item.multiple)
-                    ) {
-                        form[item.prop] = []
-                    } else {
-                        form[item.prop] = ''
-                    }
-                })
-                if (formEdit) {
-                    this.form = Object.assign(form, formEdit)
-                } else {
-                    this.form = Object.assign({}, form)
-                }
-                this.loading = false
-                if (this.$refs.form && this.$refs.form.clearValidate) {
-                    this.$refs.form.clearValidate()
-                }
-            })
-        },
-
-        // 绑定部分值(此时表单已渲染)
-        initfields(obj) {
-            this.form = Object.assign(this.form, obj)
-        },
-
-        // 点击图标
-        clickSvg(str) {
-            this.$emit(str)
-        }
-    }
+
+    // 点击图标
+    clickSvg(str) {
+      this.$emit(str)
+    },
+
+    // 修改
+    changeModified() {
+      this.modifiedFlag = !this.modifiedFlag
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 .el-form-self {
-    margin: 20px 0;
-    overflow: hidden;
-    zoom: 1;
-    .el-input,
-    .el-select,
-    .el-cascader,
-    .el-date-editor {
-        width: 100%;
-    }
-    .form-svg {
-        cursor: pointer;
-    }
+  width: 100%;
+  margin: 20px 0;
+  overflow: hidden;
+  zoom: 1;
+  .el-input,
+  .el-select,
+  .el-cascader,
+  .el-date-editor {
+    width: 100%;
+  }
+  .form-svg {
+    cursor: pointer;
+  }
+  .el-form-item {
+    margin-right: 20px;
+  }
+}
+.tobeModified {
+  // width: 134px;
+  height: 31px;
+  margin-left: 20px;
+  background: #ffffff;
+  border-radius: 4px;
+  padding: 0px 8px;
+  border: 1px solid #d9d9d9;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .check {
+    font-size: 18px;
+    margin-right: 8px;
+  }
+  span {
+    font-size: 14px;
+    font-family: AlibabaPuHuiTiR;
+    color: #333333;
+  }
 }
 </style>
-
-
diff --git a/src/layouts/components/NavBar/index.vue b/src/layouts/components/NavBar/index.vue
index e4e3d67..d90be16 100644
--- a/src/layouts/components/NavBar/index.vue
+++ b/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;
diff --git a/src/views/followupquery/index.vue b/src/views/followupquery/index.vue
index f009df0..263e5e9 100644
--- a/src/views/followupquery/index.vue
+++ b/src/views/followupquery/index.vue
@@ -1,7 +1,8 @@
 <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;
diff --git a/src/views/followupresearch/index.vue b/src/views/followupresearch/index.vue
new file mode 100644
index 0000000..73f89ed
--- /dev/null
+++ b/src/views/followupresearch/index.vue
@@ -0,0 +1,255 @@
+<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>
-- 
2.22.0