随访调查随访查询

fe84976a · miaojiale · 68dc061f · fe84976a · fe84976a · fe84976a
Commit fe84976a authored Nov 25, 2022 by miaojiale
5 changed files
--- 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,

--- a/src/components/FormComponents/index.vue
+++ b/src/components/FormComponents/index.vue
 <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-form
-        <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">
+    ref="form"
-            <el-form-item :label="item.label?item.label+(item.hiddenColon?'':'：'):''" :prop="item.prop" :rules="item.rules" :label-width="item.labelWidth || '110px'">
+    :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):{}">
+        <el-input
-                    <span :slot="item.slot?item.slot:'append'" v-if="item.unit">{{item.unit}}</span>
+          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 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>
+          <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 :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>
+        <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>
@@ -20,51 +74,162 @@
        </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-select
-                    <el-option v-for="(opt,optIndex) in item.opts" :key="optIndex" :label="opt.label" :value="item.isSelect?opt.selectValue:opt.value">
+          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
+          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
+          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-select
-                    <el-option v-for="(opt,optIndex) in item.opts" :key="optIndex" :label="opt.label" :value="item.isSelect?opt.selectValue:opt.value">
+          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 :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
+          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>
+        <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]}}
+          {{ 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" />
+        <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" @click.native="clickSvg(item.func)" class="form-svg"></svg-icon>
+          <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 :xs="24" :sm="24" :lg="24" v-if="lists" style="padding-left:120px;">
+    <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" @click="btn.func" :style="btn.style">
+      <el-button
-                {{btn.btnText}}
+        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>
@@ -72,41 +237,41 @@
 <script>
 export default {
+  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 => {
+    forms.forEach((item) => {
      if (!item.prop || item.hidden) return false
      if (
-                item.type === 'daterange' ||
+        item.type === "daterange" ||
-                item.type === 'checkboxList' ||
+        item.type === "checkboxList" ||
-                item.type === 'checkbox' ||
+        item.type === "checkbox" ||
-                item.type === 'cascader' ||
+        item.type === "cascader" ||
-                (item.type === 'select' && item.multiple)
+        (item.type === "select" && item.multiple)
      ) {
        form[item.prop] = []
      } else {
-                form[item.prop] = ''
+        form[item.prop] = ""
      }
    })
    return {
-            form
+      form,
+      modifiedFlag: false,
    }
  },
-    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 } // 按钮组
-    },
  methods: {
    // 查询
    handleSearch() {
-            this.$emit('handleSearch', this.form)
+      this.$emit("handleSearch", this.form)
    },
    // 重置
@@ -117,9 +282,9 @@ export default {
    handleConfirm() {
      this.loading = true
-            this.$refs.form.validate(valid => {
+      this.$refs.form.validate((valid) => {
        if (valid) {
-                    this.$emit('handleConfirm', this.form)
+          this.$emit("handleConfirm", this.form)
        } else {
          this.loading = false
        }
@@ -130,18 +295,18 @@ export default {
    initforms(formEdit) {
      this.$nextTick(() => {
        const form = {}
-                this.forms.forEach(item => {
+        this.forms.forEach((item) => {
          if (!item.prop || item.hidden) return false
          if (
-                        item.type === 'daterange' ||
+            item.type === "daterange" ||
-                        item.type === 'checkboxList' ||
+            item.type === "checkboxList" ||
-                        item.type === 'checkbox' ||
+            item.type === "checkbox" ||
-                        item.type === 'cascader' ||
+            item.type === "cascader" ||
-                        (item.type === 'select' && item.multiple)
+            (item.type === "select" && item.multiple)
          ) {
            form[item.prop] = []
          } else {
-                        form[item.prop] = ''
+            form[item.prop] = ""
          }
        })
        if (formEdit) {
@@ -164,13 +329,19 @@ export default {
    // 点击图标
    clickSvg(str) {
      this.$emit(str)
-        }
+    },
-    }
+    // 修改
+    changeModified() {
+      this.modifiedFlag = !this.modifiedFlag
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>
 .el-form-self {
+  width: 100%;
  margin: 20px 0;
  overflow: hidden;
  zoom: 1;
@@ -183,7 +354,29 @@ export default {
  .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>
--- 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;

--- a/src/views/followupquery/index.vue
+++ b/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;

--- a/src/views/followupresearch/index.vue
+++ b/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>