会员管理搜索条件增加点击提醒

flossom-ui/src/views/system/member/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-descriptions size="medium">
+    <el-descriptions class="margin-top" style="font-size: 1.5em;">
       <el-descriptions-item label="用户总数">{{ count.userNum }}</el-descriptions-item>
       <el-descriptions-item label="已注册用户">{{ count.userRegisterNum }}</el-descriptions-item>
       <el-descriptions-item label="已绑定仪器用户数">{{ count.userDeviceNum }}</el-descriptions-item>
@@ -21,22 +21,28 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="手机号码" prop="mobile">
+      <el-popover placement="top-start" width="200" trigger="click"
-        <el-input
+                  content="手机号码和用户编号，满足其中之一内容即可">
-          v-model="queryParams.mobile"
+        <el-form-item label="手机号码" prop="mobile" slot="reference">
-          placeholder="搜索多个请用英文逗号隔开"
+          <el-input
-          clearable
+            v-model="queryParams.mobile"
-          @keyup.enter.native="handleQuery"
+            placeholder="搜索多个请用英文逗号隔开"
-        />
+            clearable
-      </el-form-item>
+            @keyup.enter.native="handleQuery"
-      <el-form-item label="用户编号" prop="id">
+          />
-        <el-input
+        </el-form-item>
-          v-model="queryParams.id"
+      </el-popover>
-          placeholder="搜索多个请用英文逗号隔开"
+      <el-popover placement="top-start" width="200" trigger="click"
-          clearable
+                  content="手机号码和用户编号，满足其中之一内容即可">
-          @keyup.enter.native="handleQuery"
+        <el-form-item label="用户编号" prop="id" slot="reference">
-        />
+          <el-input
-      </el-form-item>
+            v-model="queryParams.id"
+            placeholder="搜索多个请用英文逗号隔开"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+      </el-popover>
       <el-form-item label="生日" prop="birthday">
         <el-date-picker
           clearable
@@ -119,26 +125,32 @@
       <!--          </el-option>-->
       <!--        </el-select>-->
       <!--      </el-form-item>-->
-      <el-form-item label="企微标签" prop="wecomTags">
+      <el-popover placement="top-start" width="200" trigger="click"
-        <el-select v-model="queryParams.wecomTags" multiple placeholder="请选择">
+                  content="企微标签和小程序标签，同时满足所选内容">
-          <el-option
+        <el-form-item label="企微标签" prop="wecomTags" slot="reference">
-            v-for="item in wecomTags"
+          <el-select v-model="queryParams.wecomTags" multiple placeholder="请选择">
-            :key="item.value"
+            <el-option
-            :label="item.label"
+              v-for="item in wecomTags"
-            :value="item.value">
+              :key="item.value"
-          </el-option>
+              :label="item.label"
-        </el-select>
+              :value="item.value">
-      </el-form-item>
+            </el-option>
-      <el-form-item label="小程序标签" prop="miniProgramTags">
+          </el-select>
-        <el-select v-model="queryParams.miniProgramTags" multiple placeholder="请选择">
+        </el-form-item>
-          <el-option
+      </el-popover>
-            v-for="item in miniProgramTags"
+      <el-popover placement="top-start" width="200" trigger="click"
-            :key="item.value"
+                  content="企微标签和小程序标签，同时满足所选内容">
-            :label="item.label"
+        <el-form-item label="小程序标签" prop="miniProgramTags" slot="reference">
-            :value="item.value">
+          <el-select v-model="queryParams.miniProgramTags" multiple placeholder="请选择">
-          </el-option>
+            <el-option
-        </el-select>
+              v-for="item in miniProgramTags"
-      </el-form-item>
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-popover>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>