update: ecm搜索

src/views/ecm/list.vue

 <template>
   <section class="dm-wrap" v-loading="loading">
     <div class="pb22 clearfix">
-      <el-select class="dm-select" clearable="" v-model="listParams.effectType" placeholder="选择时效" @change="search">
+      <!-- <el-select class="dm-select" clearable="" v-model="listParams.effectType" placeholder="选择时效" @change="search">
         <el-option v-for="(v, i) in effectTypeOption" :key="i" :label="v.label" :value="v.value"></el-option>
-      </el-select>
-      <el-select class="dm-select" clearable v-model="listParams.marketingType" placeholder="选择营销方式" @change="search">
+      </el-select> -->
+      <!-- <el-select class="dm-select" clearable v-model="listParams.marketingType" placeholder="选择营销方式" @change="search">
         <el-option v-for="(v, i) in showMarketingTypeOptions" :key="i" :label="v.label" :value="v.value"></el-option>
-      </el-select>
-      <dm-activity-select class="vertical-middle" onlySelect width="130" :actId.sync="listParams.marketingActivityId" @actUpdate="search"></dm-activity-select>
-      <el-select class="dm-select" clearable v-model="listParams.onlineStatus" placeholder="选择状态" @change="search">
+      </el-select> -->
+      <!-- <dm-activity-select class="vertical-middle" onlySelect width="130" :actId.sync="listParams.marketingActivityId" @actUpdate="search"></dm-activity-select> -->
+      <!-- <el-select class="dm-select" clearable v-model="listParams.onlineStatus" placeholder="选择状态" @change="search">
         <el-option v-for="(v, i) in onlineOptions" :key="i" :label="v.label" :value="v.value"></el-option>
-      </el-select>
-      <el-input v-model="listParams.searchName" class="w150" placeholder="输入计划名称" clearable @change="search"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
-      <el-checkbox class="vertical-middle" v-if="$store.state.marketing.isShowSelf" v-model="listParams.showSelfFlag" :true-label="1" :false-label="0" label="仅看本人" border @change="search" />
-      <el-date-picker v-model="dateTime" style="width:250px" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="search"></el-date-picker>
+      </el-select> -->
+      <el-input v-model="listParams.searchName" class="w250" placeholder="输入计划名称" clearable @change="search"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
+      <el-button type="text" @click="showSearch = !showSearch" class="senior-search">高级搜索<i :class="showSearch ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"></i></el-button>
+      <!-- <el-checkbox class="vertical-middle" v-if="$store.state.marketing.isShowSelf" v-model="listParams.showSelfFlag" :true-label="1" :false-label="0" label="仅看本人" border @change="search" /> -->
+      <!-- <el-date-picker v-model="dateTime" style="width:250px" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="search"></el-date-picker> -->
       <el-button class="fr" type="primary" @click="$router.push('/ecm/add')">新建计划</el-button>
       <el-tooltip class="fr" content="只记录删除计划或编辑“进行中”计划的操作日志" placement="top" open-delay="200">
         <el-button style="margin-right:10px" @click="$router.push('/ecm/log')">操作日志</el-button>
       </el-tooltip>
     </div>
+    <div v-show="showSearch" class="senior-search-content">
+      <el-form label-width="100px">
+        <el-form-item label="创建时间" class="inline-item">
+          <el-date-picker style="width:350px" v-model="dateTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="search"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="选择时效" class="inline-item">
+          <el-select style="width:350px" clearable="" v-model="listParams.effectType" placeholder="选择时效" @change="search">
+            <el-option v-for="(v, i) in effectTypeOption" :key="i" :label="v.label" :value="v.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="选择营销方式" class="inline-item">
+          <el-select style="width:350px" clearable v-model="listParams.marketingType" placeholder="选择营销方式" @change="search">
+            <el-option v-for="(v, i) in showMarketingTypeOptions" :key="i" :label="v.label" :value="v.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="选择状态" class="inline-item">
+          <el-select style="width:350px" clearable v-model="listParams.onlineStatus" placeholder="选择状态" @change="search">
+            <el-option v-for="(v, i) in onlineOptions" :key="i" :label="v.label" :value="v.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="$store.state.marketing.isShowSelf" class="inline-item">
+          <el-checkbox class="vertical-middle" v-model="listParams.showSelfFlag" :true-label="1" :false-label="0" label="仅看本人" border @change="search" />
+        </el-form-item>
+      </el-form>
+    </div>
     <el-table tooltipEffect="light" :data="tableList" style="width: 100%" element-loading-text="拼命加载中">
       <el-table-column align="left" fixed="left" :min-width="200" show-overflow-tooltip label="计划名称">
         <template slot-scope="scope">
@@ -91,6 +117,7 @@ export default {
   name: 'ecm',
   data() {
     return {
+      showSearch: false,
       dateTime: null,
       formatDateTimeByType,
       effectTypeOption: [
@@ -397,4 +424,29 @@ export default {
     color: #606266;
   }
 }
+.senior-search {
+  margin-left: 10px;
+  font-size: 14px;
+}
+.senior-search .el-icon-d-arrow-right {
+  display: inline-block;
+  transform: rotate(90deg);
+  margin-left: 5px;
+}
+.senior-search .el-icon-d-arrow-left {
+  display: inline-block;
+  transform: rotate(90deg);
+  margin-left: 5px;
+}
+.senior-search-content {
+  border: 1px solid #dcdfe6;
+  border-radius: 2px;
+  padding: 15px 24px;
+  margin-bottom: 20px;
+}
+.inline-item {
+  display: inline-block;
+  width: 500px;
+  vertical-align: top;
+}
 </style>