'线索管理'

src/config/router.config.js

@@ -287,13 +287,19 @@ export const asyncRouterMap = [
             name: 'ActiveInfo',
             hidden: true,
             component: () => import('@/views/markting/active/info'),
-            meta: { title: '活动详情',  hideHeader: true, permission: [ 'user' ] },
+            meta: { title: '活动详情', keepAlive: true, hideHeader: true, permission: [ 'user' ] },
           },
           {
             path: '/markting/seas',
             name: 'Seas',
             component: () => import('@/views/markting/seas/list'),
             meta: { title: '公海池', hideHeader: true, permission: [ 'user' ] },
+          },
+          {
+            path: '/markting/leads',
+            name: 'Leads',
+            component: () => import('@/views/markting/leads/list'),
+            meta: { title: '线索管理', hideHeader: true, permission: [ 'user' ] },
           }
         ],
       }

src/views/markting/active/info.vue

@@ -2,79 +2,17 @@
   <a-card :bordered="false">
     <a-tabs :default-active-key="1" @change="callback">
       <a-tab-pane :key="item.id" :tab="item.tab" v-for="(item, index) in tabs" >
-        <div v-if="item.id == 1" >
-          <a-row>
-            <a-col :span="6">
-              <span>市场活动名称：</span>
-              <span>地推</span>
-              <a-divider />
-            </a-col>
-            <a-col :span="6" offset="1">
-              <span>开始日期：</span>
-              <span>2020-10-10</span>
-              <a-divider />
-            </a-col>
-          </a-row>
-          <a-row>
-            <a-col :span="6">
-              <span>结束日期：</span>
-              <span>2020-11-11</span>
-              <a-divider />
-            </a-col>
-            <a-col :span="6" offset="1">
-              <span>采单人：</span>
-              <span>逻辑狗</span>
-              <a-divider />
-            </a-col>
-          </a-row>
-          <a-row>
-            <a-col :span="6">
-              <span>负责人主属部门：</span>
-              <span>未填写</span>
-              <a-divider />
-            </a-col>
-            <a-col :span="6" offset="1">
-              <span>活动类型：</span>
-              <span>品牌活动</span>
-              <a-divider />
-            </a-col>
-          </a-row>
-          <a-row>
-            <a-col :span="6">
-              <span>描述：</span>
-              <span>未填写</span>
-              <a-divider />
-            </a-col>
-            <a-col :span="6" offset="1">
-              <span>归属部门：</span>
-              <span>销售部</span>
-              <a-divider />
-            </a-col>
-          </a-row>
-        </div>
-        <div v-else>
-          <div>
-            <a-input-search placeholder="搜索姓名" style="width: 300px" @search="onSearch" />
-            <a-button type="primary" style="margin-left:10px" @click="handleAdd">添加名单</a-button>
-          </div>
-        </div>
+        <base-form v-if="item.id == 1"></base-form>
+        <sales-leads v-else></sales-leads>
       </a-tab-pane>
     </a-tabs>
 
-    <!-- 分配 -->
-    <active-form
-      ref="createModal"
-      :visible="visible"
-      :loading="confirmLoading"
-      :model="mdl"
-      @cancel="handleCancel"
-      @ok="handleOk"></active-form>
-
   </a-card>
 </template>
 
 <script>
-import ActiveForm from '../modules/ActiveForm';
+import BaseForm from '../components/BaseForm';
+import SalesLeads from '../components/SalesLeads';
 
 export default {
   data() {
@@ -99,7 +37,8 @@ export default {
 
   },
   components: {
-    ActiveForm
+    BaseForm,
+    SalesLeads
   },
   mounted() {
 
@@ -108,62 +47,6 @@ export default {
     callback(key) {
       console.log(key);
     },
-    handleAdd() {
-      this.visible = true;
-    },
-    handleCancel () {
-      this.visible = false
-      const ruleForm = this.$refs.createModal.$refs.ruleForm
-      ruleForm.resetFields() // 清理表单数据（可不做）
-    },
-    handleOk () {
-      const form = this.$refs.createModal.form;
-      const ruleForm = this.$refs.createModal.$refs.ruleForm
-      this.confirmLoading = true
-      ruleForm.validate(valid  => {
-        if (valid) {
-          if (form.id > 0) {
-            // 修改 e.g.
-            new Promise((resolve, reject) => {
-              setTimeout(() => {
-                resolve()
-                console.log(form)
-              }, 1000)
-            }).then(res => {
-              this.visible = false
-              this.confirmLoading = false
-              // 重置表单数据
-              ruleForm.resetFields()
-              // 刷新表格
-              this.$refs.table.refresh()
-              this.$message.info('修改成功')
-            })
-          } else {
-            // 新增
-            new Promise((resolve, reject) => {
-              setTimeout(() => {
-                resolve()
-                console.log(form)
-              }, 1000)
-            }).then(res => {
-              this.visible = false
-              this.confirmLoading = false
-              // 重置表单数据
-              ruleForm.resetFields()
-              // 刷新表格
-              this.$refs.table.refresh()
-
-              this.$message.info('新增成功')
-            })
-          }
-        } else {
-          this.confirmLoading = false
-        }
-      })
-    },
-    onSearch() {
-
-    }
   }
 }
 </script>

src/views/markting/active/list.vue

@@ -1,60 +1,61 @@
 <template>
-  <a-card :bordered="false">
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline">
-        <a-row :gutter="48">
-          <a-col :md="6" :sm="24">
-            <a-form-item label="市场活动名称">
-              <a-input allowClear v-model="queryParam.name" placeholder="请输入市场活动名称"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="6" :sm="24">
-            <a-form-item label="创建时间">
-              <a-range-picker allowClear v-model="createTime" :format="dateFormat" @change="handleTimeChange" />
-            </a-form-item>
-          </a-col>
-          <a-col :md="!advanced && 4 || 24" :sm="24">
-            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
-              <a-button @click="handleAdd">新建</a-button>
-              <a-button style="margin-left: 8px" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-              <!-- <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button> -->
-            </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-    
-    <s-table
-      ref="table"
-      size="default"
-      :rowKey="record => record.id"
-      :columns="columns"
-      :data="loadData"
-      :alert="false"
-      :rowSelection="rowSelection"
-      showPagination="auto">
-      <span @click="handleInfo(record)" slot="serial" slot-scope="text, record, index">
-        {{ index + 1 }}
-      </span>
-      <span slot="status" slot-scope="text">
-        <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
-      </span>
-      <span slot="description" slot-scope="text">
-        <ellipsis :length="4" tooltip>{{ text }}</ellipsis>
-      </span>
-    </s-table>
+  <page-header-wrapper>
+    <a-card :bordered="false">
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline">
+          <a-row :gutter="48">
+            <a-col :md="6" :sm="24">
+              <a-form-item label="市场活动名称">
+                <a-input allowClear v-model="queryParam.name" placeholder="请输入市场活动名称"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-item label="创建时间">
+                <a-range-picker allowClear v-model="createTime" :format="dateFormat" @change="handleTimeChange" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="!advanced && 4 || 24" :sm="24">
+              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
+                <a-button @click="handleAdd">新建</a-button>
+                <a-button style="margin-left: 8px" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+                <!-- <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button> -->
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      
+      <s-table
+        ref="table"
+        size="default"
+        :rowKey="record => record.id"
+        :columns="columns"
+        :data="loadData"
+        :alert="false"
+        :rowSelection="rowSelection"
+        showPagination="auto">
+        <span @click="handleInfo(record)" slot="serial" slot-scope="text, record, index">
+          {{ index + 1 }}
+        </span>
+        <span slot="status" slot-scope="text">
+          <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
+        </span>
+        <span slot="description" slot-scope="text">
+          <ellipsis :length="4" tooltip>{{ text }}</ellipsis>
+        </span>
+      </s-table>
 
-    <!-- 分配 -->
-    <active-form
-      ref="createModal"
-      :visible="visible"
-      :loading="confirmLoading"
-      :model="mdl"
-      @cancel="handleCancel"
-      @ok="handleOk"
-      ></active-form>
-  
-  </a-card>
+      <!-- 分配 -->
+      <active-form
+        ref="createModal"
+        :visible="visible"
+        :loading="confirmLoading"
+        :model="mdl"
+        @cancel="handleCancel"
+        @ok="handleOk"
+        ></active-form>
+    </a-card>
+  </page-header-wrapper>
 </template>
 
 <script>

src/views/markting/components/BaseForm.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="base-info">
+    <a-row>
+      <a-col :span="6">
+        <span>市场活动名称：</span>
+        <span>地推</span>
+        <a-divider />
+      </a-col>
+      <a-col :span="6" offset="1">
+        <span>开始日期：</span>
+        <span>2020-10-10</span>
+        <a-divider />
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="6">
+        <span>结束日期：</span>
+        <span>2020-11-11</span>
+        <a-divider />
+      </a-col>
+      <a-col :span="6" offset="1">
+        <span>采单人：</span>
+        <span>逻辑狗</span>
+        <a-divider />
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="6">
+        <span>负责人主属部门：</span>
+        <span>未填写</span>
+        <a-divider />
+      </a-col>
+      <a-col :span="6" offset="1">
+        <span>活动类型：</span>
+        <span>品牌活动</span>
+        <a-divider />
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="6">
+        <span>描述：</span>
+        <span>未填写</span>
+        <a-divider />
+      </a-col>
+      <a-col :span="6" offset="1">
+        <span>归属部门：</span>
+        <span>销售部</span>
+        <a-divider />
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/markting/components/Info.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="header-info">
+    <p>{{ value }}</p>
+    <span>{{ title }}</span>
+    <em v-if="bordered" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Info',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    bordered: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~ant-design-vue/es/style/themes/default.less";
+
+.header-info {
+  position: relative;
+  text-align: center;
+  & > span {
+    display: inline-block;
+    margin-bottom: 4px;
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+    line-height: 22px;
+  }
+  & > p {
+    margin: 0;
+    color: @heading-color;
+    font-size: 24px;
+    line-height: 32px;
+  }
+  & > em {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 1px;
+    height: 56px;
+    background-color: @border-color-split;
+  }
+}
+</style>

src/views/markting/components/SalesLeads.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="sales-leads">
+    <a-input-search placeholder="搜索姓名" style="width: 300px" @search="onSearch" />
+    <a-button type="primary" style="margin-left:10px" @click="handleAdd">添加名单</a-button>
+
+    <!-- 表格 -->
+    <s-table
+      style="margin-top:20px"
+      ref="table"
+      size="default"
+      :rowKey="record => record.id"
+      :columns="columns"
+      :data="loadData"
+      :alert="false"
+      :rowSelection="rowSelection"
+      showPagination="auto">
+      <span slot="serial" slot-scope="text, record, index">
+        {{ index + 1 }}
+      </span>
+      <span slot="status" slot-scope="text">
+        <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
+      </span>
+      <span slot="description" slot-scope="text">
+        <ellipsis :length="4" tooltip>{{ text }}</ellipsis>
+      </span>
+    </s-table>
+
+    <!-- 添加名单 -->
+    <member-form
+      ref="createModal"
+      :visible="visible"
+      :loading="confirmLoading"
+      :model="mdl"
+      @cancel="handleCancel"
+      @ok="handleOk"></member-form>
+
+    
+  </div>  
+</template>
+
+<script>
+import moment from 'moment'
+import { STable, Ellipsis } from '@/components';
+import MemberForm from '../modules/MemberForm';
+import { getRoleList, getServiceList } from '@/api/manage';
+
+
+const columns = [
+  {
+    title: '#',
+    scopedSlots: { customRender: 'serial' }
+  },
+  {
+    title: '规则编号',
+    dataIndex: 'no'
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    scopedSlots: { customRender: 'description' }
+  },
+  {
+    title: '服务调用次数',
+    dataIndex: 'callNo',
+    sorter: true,
+    needTotal: true,
+    customRender: (text) => text + ' 次'
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    scopedSlots: { customRender: 'status' }
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updatedAt',
+    sorter: true
+  }
+]
+
+const statusMap = {
+  0: {
+    status: 'default',
+    text: '关闭'
+  },
+  1: {
+    status: 'processing',
+    text: '运行中'
+  },
+  2: {
+    status: 'success',
+    text: '已上线'
+  },
+  3: {
+    status: 'error',
+    text: '异常'
+  }
+}
+
+export default {
+  data() {
+    this.columns = columns
+    return {
+      visible: false,
+      confirmLoading: false,
+      mdl: null,
+      // 查询参数
+      queryParam: {},
+      loadData: parameter => {
+        const requestParameters = Object.assign({}, parameter, this.queryParam)
+        console.log('loadData request parameters:', requestParameters)
+        return getServiceList(requestParameters)
+          .then(res => {
+            return res.result
+          })
+      },
+      selectedRowKeys: [],
+      selectedRows: []
+    }
+  },
+  components: {
+    STable,
+    Ellipsis,
+    MemberForm
+  },
+  filters: {
+    statusFilter (type) {
+      return statusMap[type].text
+    },
+    statusTypeFilter (type) {
+      return statusMap[type].status
+    }
+  },
+  created() {
+
+  },
+  computed: {
+    rowSelection () {
+      return {
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: this.onSelectChange
+      }
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    onSearch() {
+
+    },
+    handleAdd() {
+      this.visible = true;
+    },
+    handleCancel () {
+      this.visible = false
+      const ruleForm = this.$refs.createModal.$refs.ruleForm
+      ruleForm.resetFields() // 清理表单数据（可不做）
+    },
+    handleOk () {
+      const form = this.$refs.createModal.form;
+      const ruleForm = this.$refs.createModal.$refs.ruleForm
+      this.confirmLoading = true
+      ruleForm.validate(valid  => {
+        if (valid) {
+          if (form.id > 0) {
+            // 修改 e.g.
+            new Promise((resolve, reject) => {
+              setTimeout(() => {
+                resolve()
+                console.log(form)
+              }, 1000)
+            }).then(res => {
+              this.visible = false
+              this.confirmLoading = false
+              // 重置表单数据
+              ruleForm.resetFields()
+              // 刷新表格
+              this.$refs.table.refresh()
+              this.$message.info('修改成功')
+            })
+          } else {
+            // 新增
+            new Promise((resolve, reject) => {
+              setTimeout(() => {
+                resolve()
+                console.log(form)
+              }, 1000)
+            }).then(res => {
+              this.visible = false
+              this.confirmLoading = false
+              // 重置表单数据
+              ruleForm.resetFields()
+              // 刷新表格
+              this.$refs.table.refresh()
+
+              this.$message.info('新增成功')
+            })
+          }
+        } else {
+          this.confirmLoading = false
+        }
+      })
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      console.log(selectedRowKeys);
+      console.log(selectedRows);
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/markting/leads/list.vue

@@ -0,0 +1,545 @@
+<template>
+  <page-header-wrapper>
+    <a-card style="margin-bottom:20px">
+      <a-row>
+        今日统计
+      </a-row>
+      <a-row>
+        <a-col :sm="8" :xs="24">
+          <info title="今日待跟进线索数" value="0" :bordered="true" />
+        </a-col>
+        <a-col :sm="8" :xs="24">
+          <info title="今日已跟进线索数" value="1" :bordered="true" />
+        </a-col>
+        <a-col :sm="8" :xs="24">
+          <info title="今日签约数" value="2" />
+        </a-col>
+      </a-row>
+    </a-card>
+
+    <a-card>
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline">
+          <a-row :gutter="20">
+            <a-col :md="5" :sm="24">
+              <a-form-item label="搜索线索">
+                <a-input v-model="queryParam.id" placeholder="请输入线索姓名或手机号"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="24">
+              <a-form-item label="跟进人">
+                <a-select v-model="queryParam.status" placeholder="请选择跟进人" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="24">
+              <a-form-item label="添加时间">
+                <a-range-picker allowClear v-model="createTime" :format="dateFormat" @change="handleTimeChange" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="24">
+              <a-form-item label="跟进添加">
+                <a-range-picker allowClear v-model="createTime" :format="dateFormat" @change="handleTimeChange" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="4" :sm="24">
+              <a-form-item label="最后跟进">
+                <a-range-picker allowClear v-model="createTime" :format="dateFormat" @change="handleTimeChange" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="24">
+              <a-form-item label="待回访日期">
+                <a-range-picker allowClear v-model="createTime" :format="dateFormat" @change="handleTimeChange" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="24">
+              <a-form-item label="来源渠道">
+                <a-select v-model="queryParam.status" placeholder="请选择来源渠道" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="24">
+              <a-form-item label="意向度">
+                <a-select v-model="queryParam.status" placeholder="请选择意向度" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="24">
+              <a-form-item label="意向课程">
+                <a-select v-model="queryParam.status" placeholder="请选择意向课程" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="4" :sm="24">
+              <a-form-item label="采单员">
+                <a-select v-model="queryParam.status" placeholder="请选择采单员" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="24">
+              <a-form-item label="线索状态">
+                <a-select v-model="queryParam.status" placeholder="请选择线索状态" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="24">
+              <a-form-item label="跟进状态">
+                <a-select v-model="queryParam.status" placeholder="请选择跟进状态" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="24">
+              <a-form-item label="就读年级">
+                <a-select v-model="queryParam.status" placeholder="请选择就读年级" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col span="22">
+              <a-button type="primary" @click="handleAdd">添加线索</a-button>
+              <a-button style="margin-left: 8px" type="primary" @click="handleAssign">分配线索</a-button>
+              <a-button style="margin-left: 8px" type="danger" @click="handleCancelLeads">标为无效</a-button>
+              <a-button style="margin-left: 8px" type="danger" @click="handleMiss">标为流失</a-button>
+              <a-button style="margin-left: 8px" type="danger" @click="handleDel">删除线索</a-button>
+              <a-button style="margin-left: 8px" type="danger" @click="handleReback">退回公海池</a-button>
+            </a-col>
+            <a-col :md="!advanced && 2 || 24" :sm="24">
+              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
+                <a-button @click="() => this.queryParam = {}">重置</a-button>
+                <a-button style="margin-left: 8px" type="primary" @click="$refs.table.refresh(true)">导出</a-button>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <s-table
+        ref="table"
+        size="default"
+        :rowKey="record => record.id"
+        :columns="columns"
+        :data="loadData"
+        :alert="false"
+        :rowSelection="rowSelection"
+        showPagination="auto">
+        <span slot="serial" slot-scope="text, record, index">
+          {{ index + 1 }}
+        </span>
+        <span slot="status" slot-scope="text">
+          <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
+        </span>
+        <span slot="description" slot-scope="text">
+          <ellipsis :length="4" tooltip>{{ text }}</ellipsis>
+        </span>
+        <span slot="action" slot-scope="text, record">
+          <template>
+            <a @click="handleAddLeads(record)">添加记录</a>
+            <a-divider type="vertical" />
+            <a @click="handlePre(record)">转为试听</a>
+            <a-divider type="vertical" />
+            <a @click="handleSub(record)">购课</a>
+          </template>
+        </span>
+      </s-table>
+    </a-card>
+
+    <!-- 添加线索 -->
+    <member-form
+      ref="createModal"
+      :visible="visible"
+      :loading="confirmLoading"
+      :model="mdl"
+      @cancel="handleCancel"
+      @ok="handleOk">
+    </member-form>
+    <!-- /添加线索 -->
+
+    <!-- 分配线索 -->
+    <assign-sales
+      ref="assignModal"
+      :visible="visibleAssign"
+      :loading="confirmLoading"
+      :model="mdl"
+      @cancel="handleCancel"
+      @ok="handleOk">
+    </assign-sales>
+    <!-- /分配线索 -->
+
+    <!-- 标为无效 -->
+    <cancel-leads
+      ref="assignModal"
+      :visible="visibleCancel"
+      :loading="confirmLoading"
+      :model="mdl"
+      @cancel="handleCancel"
+      @ok="handleOk">
+    </cancel-leads>
+    <!-- /标为无效 -->
+
+    <!-- 添加记录 -->
+    <add-leads
+      ref="assignModal"
+      :visible="visibleAddLeads"
+      :loading="confirmLoading"
+      :model="mdl"
+      @cancel="handleCancel"
+      @ok="handleOk">
+    </add-leads>
+    <!-- /添加记录 -->
+
+
+  </page-header-wrapper>
+</template>
+
+<script>
+import moment from 'moment'
+import { STable, Ellipsis } from '@/components';
+import { getRoleList, getServiceList } from '@/api/manage'
+import MemberForm from '../modules/MemberForm'   // 添加线索
+import AssignSales from '../modules/AssignSales' // 分配线索
+import CancelLeads from '../modules/CancelLeads' // 标为无效
+import AddLeads from '../modules/AddLeads' // 添加记录
+import Info from '../components/Info'
+
+const columns = [
+  {
+    title: '#',
+    scopedSlots: { customRender: 'serial' }
+  },
+  {
+    title: '规则编号',
+    dataIndex: 'no'
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    scopedSlots: { customRender: 'description' }
+  },
+  {
+    title: '服务调用次数',
+    dataIndex: 'callNo',
+    sorter: true,
+    needTotal: true,
+    customRender: (text) => text + ' 次'
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    scopedSlots: { customRender: 'status' }
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updatedAt',
+    sorter: true
+  },
+  {
+    title: '操作',
+    scopedSlots: { customRender: 'action' },
+  }
+]
+
+const statusMap = {
+  0: {
+    status: 'default',
+    text: '关闭'
+  },
+  1: {
+    status: 'processing',
+    text: '运行中'
+  },
+  2: {
+    status: 'success',
+    text: '已上线'
+  },
+  3: {
+    status: 'error',
+    text: '异常'
+  }
+}
+
+export default {
+  name: 'SeasList',
+  components: {
+    STable,
+    Ellipsis,
+    MemberForm,
+    AssignSales,
+    CancelLeads,
+    AddLeads,
+    Info
+  },
+  data() {
+    this.columns = columns
+    return {
+      // create model
+      visible: false,
+      visibleAssign: false,
+      visibleCancel: false,
+      visibleAddLeads: false,
+      confirmLoading: false,
+      dateFormat: 'YYYY/MM/DD',
+      createTime: [],
+      mdl: null,
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      loadData: parameter => {
+        const requestParameters = Object.assign({}, parameter, this.queryParam)
+        console.log('loadData request parameters:', requestParameters)
+        return getServiceList(requestParameters)
+          .then(res => {
+            return res.result
+          })
+      },
+      selectedRowKeys: [],
+      selectedRows: []
+    }
+  },
+  filters: {
+    statusFilter (type) {
+      return statusMap[type].text
+    },
+    statusTypeFilter (type) {
+      return statusMap[type].status
+    }
+  },
+  created() {
+
+  },
+  computed: {
+    rowSelection () {
+      return {
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: this.onSelectChange
+      }
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+    handleAddLeads(record) {
+      this.visibleAddLeads = true;
+      this.mdl = { ...record }
+    },
+    handlePre(record) {
+      this.$confirm({
+        title: '提示',
+        content: `确定将${record.id}转为试听学员?`,
+        okText: '确定',
+        cancelText: '取消',
+        onOk () {
+          console.log('OK')
+          // 在这里调用删除接口
+          return new Promise((resolve, reject) => {
+            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
+          }).catch(() => console.log('Oops errors!'))
+        },
+        onCancel () {
+          console.log('Cancel')
+        }
+      })
+    },
+    handleEdit (record) {
+      this.visible = true;
+      this.mdl = { ...record }
+    },
+    handleSub (record) {
+      if (record.status !== 0) {
+        this.$message.info(`${record.no} 订阅成功`)
+      } else {
+        this.$message.error(`${record.no} 订阅失败，规则已关闭`)
+      }
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      console.log(selectedRowKeys);
+      console.log(selectedRows);
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    // 分配
+    handleAssign() {
+      const canVisible = this.beforeVisible();
+      if(canVisible) {
+        this.visibleAssign = true;
+      }
+    },
+    // 标为无效
+    handleCancelLeads() {
+      const canVisible = this.beforeVisible();
+      if(canVisible) {
+        this.visibleCancel = true;
+      }
+    },
+    handleMiss() {
+      const canVisible = this.beforeVisible();
+      if(canVisible) {
+        this.$confirm({
+          title: '警告',
+          content: `确定要将选择的线索标为流失吗?`,
+          okText: '确定',
+          cancelText: '取消',
+          onOk () {
+            console.log('OK')
+            // 在这里调用删除接口
+            return new Promise((resolve, reject) => {
+              setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
+            }).catch(() => console.log('Oops errors!'))
+          },
+          onCancel () {
+            console.log('Cancel')
+          }
+        })
+      }
+    },
+    handleDel() {
+      const canVisible = this.beforeVisible();
+      if(canVisible) {
+        this.$confirm({
+          title: '警告',
+          content: `确定要将选择的线索删除吗?`,
+          okType: 'danger',
+          okText: '删除',
+          cancelText: '取消',
+          onOk () {
+            console.log('OK')
+            // 在这里调用删除接口
+            return new Promise((resolve, reject) => {
+              setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
+            }).catch(() => console.log('Oops errors!'))
+          },
+          onCancel () {
+            console.log('Cancel')
+          }
+        })
+      }
+    },
+    handleReback() {
+      const canVisible = this.beforeVisible();
+      if(canVisible) {
+        this.$confirm({
+          title: '警告',
+          content: `确定要将选择的线索退回公海池?`,
+          okText: '确定',
+          cancelText: '取消',
+          onOk () {
+            console.log('OK')
+            // 在这里调用删除接口
+            return new Promise((resolve, reject) => {
+              setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
+            }).catch(() => console.log('Oops errors!'))
+          },
+          onCancel () {
+            console.log('Cancel')
+          }
+        })
+      }
+    },
+    beforeVisible() {
+      if(this.selectedRows.length <= 0) {
+        this.$message.error('请至少选择一个线索');
+        return false;
+      }
+      return true;
+    },
+    handleOk () {
+      const form = this.$refs.createModal.form;
+      const ruleForm = this.$refs.createModal.$refs.ruleForm
+      this.confirmLoading = true
+      ruleForm.validate(valid  => {
+        if (valid) {
+          if (form.id > 0) {
+            // 修改 e.g.
+            new Promise((resolve, reject) => {
+              setTimeout(() => {
+                resolve()
+                console.log(form)
+              }, 1000)
+            }).then(res => {
+              this.visible = false
+              this.confirmLoading = false
+              // 重置表单数据
+              ruleForm.resetFields()
+              // 刷新表格
+              this.$refs.table.refresh()
+              this.$message.info('修改成功')
+            })
+          } else {
+            // 新增
+            new Promise((resolve, reject) => {
+              setTimeout(() => {
+                resolve()
+                console.log(form)
+              }, 1000)
+            }).then(res => {
+              this.visible = false
+              this.confirmLoading = false
+              // 重置表单数据
+              ruleForm.resetFields()
+              // 刷新表格
+              this.$refs.table.refresh()
+
+              this.$message.info('新增成功')
+            })
+          }
+        } else {
+          this.confirmLoading = false
+        }
+      })
+    },
+    handleGainOk() {
+      this.gainVisible = false;
+      this.$refs.table.refresh();
+      this.$message.info('修改成功');
+    },
+    handleCancel () {
+      this.visible = false;
+      this.visibleAddLeads = false;
+      this.visibleCancel = false;
+    },
+    handleGainCancel() {
+      this.gainVisible = false;
+    },
+    handleTimeChange (value, dateString) {
+      this.queryParam.startTime = dateString[0];
+      this.queryParam.endTime = dateString[1];
+    },
+    handleAdd() {
+      this.visible = true;
+    },
+    
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/markting/modules/AddLeads.vue

@@ -0,0 +1,116 @@
+<template>
+  <a-modal
+    title="添加记录"
+    :width="640"
+    :visible="visible"
+    :confirmLoading="loading"
+    @ok="() => { $emit('ok') }"
+    @cancel="() => { $emit('cancel') }"
+  >
+    <a-spin :spinning="loading">
+      <a-form-model ref="ruleForm" :model="form" :rules="rules" v-bind="formLayout">
+        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
+        <a-form-model-item prop="id" label="跟进方式">
+          <a-select v-model="form.name" placeholder="请选择跟进方式" default-value="0">
+            <a-select-option value="0">全部</a-select-option>
+            <a-select-option value="1">关闭</a-select-option>
+            <a-select-option value="2">运行中</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item prop="name" label="跟进状态">
+          <a-select v-model="form.name" placeholder="请选择跟进状态" default-value="0">
+            <a-select-option value="0">全部</a-select-option>
+            <a-select-option value="1">关闭</a-select-option>
+            <a-select-option value="2">运行中</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item prop="name" label="意向度">
+          <a-select v-model="form.name" placeholder="请选择意向度" default-value="0">
+            <a-select-option value="0">全部</a-select-option>
+            <a-select-option value="1">关闭</a-select-option>
+            <a-select-option value="2">运行中</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item prop="name" label="跟进内容">
+          <a-textarea placeholder="请输入内容" :rows="4" />
+        </a-form-model-item>
+        <a-form-model-item prop="name" label="开启回访">
+          <a-radio-group v-model="form.back" >
+            <a-radio :value="1">开</a-radio>
+            <a-radio :value="0">关</a-radio>
+          </a-radio-group>
+        </a-form-model-item>
+        <a-form-model-item prop="name" label="回访日期">
+          <a-date-picker v-model="form.date" style="width: 100%" placeholder="请选择回访日期"/>
+        </a-form-model-item>
+        <a-form-model-item prop="name" label="回访时间">
+          <a-date-picker v-model="form.date" style="width: 100%" placeholder="请选择回访日期"/>
+        </a-form-model-item>
+        <a-form-model-item prop="name" label="回访方式">
+          <a-select v-model="form.name" placeholder="请选择回访方式" default-value="0">
+            <a-select-option value="0">全部</a-select-option>
+            <a-select-option value="1">关闭</a-select-option>
+            <a-select-option value="2">运行中</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item prop="name" label="回访主题">
+          <a-textarea placeholder="请输入回访主题" :rows="4" />
+        </a-form-model-item>
+      </a-form-model>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: () => false
+    },
+    model: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data () {
+    this.formLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 13 }
+      }
+    }
+    return {
+      form: {
+        id: '',
+        name: undefined
+      },
+      rules: {
+        name: [
+          { required: true, message: '请选择销售人员' },
+        ],
+      },
+    }
+  },
+  created () {
+    console.log('custom modal created')
+
+    // // 防止表单未注册
+    // fields.forEach(v => this.form.getFieldDecorator(v))
+
+    // // 当 model 发生改变时，为表单设置值
+    // this.$watch('model', () => {
+    //   this.model && this.form.setFieldsValue(pick(this.model, fields))
+    // })
+  }
+}
+</script>

src/views/markting/modules/AssignSales.vue

@@ -0,0 +1,77 @@
+<template>
+  <a-modal
+    title="分配线索"
+    :width="640"
+    :visible="visible"
+    :confirmLoading="loading"
+    @ok="() => { $emit('ok') }"
+    @cancel="() => { $emit('cancel') }"
+  >
+    <a-spin :spinning="loading">
+      <a-input-search placeholder="请输入跟进人名称或手机号" style="width: 300px" @search="onSearch" />
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+
+// 表单字段
+const fields = ['description', 'id']
+
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: () => false
+    },
+    model: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data () {
+    this.formLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 13 }
+      }
+    }
+    return {
+      form: {
+        id: '',
+        name: undefined
+      },
+      rules: {
+        name: [
+          { required: true, message: '请选择销售人员' },
+        ],
+      },
+    }
+  },
+  created () {
+    console.log('custom modal created')
+
+    // // 防止表单未注册
+    // fields.forEach(v => this.form.getFieldDecorator(v))
+
+    // // 当 model 发生改变时，为表单设置值
+    // this.$watch('model', () => {
+    //   this.model && this.form.setFieldsValue(pick(this.model, fields))
+    // })
+  },
+  methods: {
+    onSearch() {
+  
+    }
+  }
+}
+</script>

src/views/markting/modules/CancelLeads.vue

@@ -0,0 +1,104 @@
+<template>
+  <a-modal
+    title="标为无效"
+    :width="640"
+    :visible="visible"
+    :confirmLoading="loading"
+    @ok="() => { $emit('ok') }"
+    @cancel="() => { $emit('cancel') }"
+  >
+    <a-spin :spinning="loading">
+      <p>请选择无效原因</p>
+      <a-checkbox-group @change="onChange">
+        <a-row>
+          <a-col :span="24" v-for="(item, index) in reseanList" :key="index">
+            <a-checkbox :value="item.id">
+              {{ item.name }}
+            </a-checkbox>
+          </a-col>
+        </a-row>
+      </a-checkbox-group>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+const reseanList = [
+  {
+    id: 1,
+    name: '号码无法接通'
+  },
+  {
+    id: 2,
+    name: '线索重复'
+  },
+  {
+    id: 3,
+    name: '无付费意愿'
+  },
+  {
+    id: 4,
+    name: '其它'
+  }
+]
+
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: () => false
+    },
+    model: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data () {
+    this.formLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 13 }
+      }
+    }
+    return {
+      reseanList,
+      form: {
+        id: '',
+        name: undefined
+      },
+      rules: {
+        name: [
+          { required: true, message: '请选择销售人员' },
+        ],
+      },
+    }
+  },
+  created () {
+    console.log('custom modal created')
+
+    // // 防止表单未注册
+    // fields.forEach(v => this.form.getFieldDecorator(v))
+
+    // // 当 model 发生改变时，为表单设置值
+    // this.$watch('model', () => {
+    //   this.model && this.form.setFieldsValue(pick(this.model, fields))
+    // })
+  },
+  methods: {
+    onSearch() {
+  
+    },
+    onChange(checkedValues) {
+      console.log('checked = ', checkedValues);
+    },
+  }
+}
+</script>

src/views/markting/modules/MemberForm.vue

@@ -0,0 +1,280 @@
+<template>
+  <a-modal
+    title="新建名单"
+    width="50%"
+    :visible="visible"
+    :confirmLoading="loading"
+    @ok="() => { $emit('ok') }"
+    @cancel="() => { $emit('cancel') }"
+  >
+    <a-spin :spinning="loading">
+      <a-form-model ref="ruleForm" :model="form" :rules="rules" v-bind="formLayout">
+        
+        <!-- 基础信息 -->
+        <a-row>
+          <a-col span="24">
+            <div class="form-title">
+              <div class="title-line"></div>
+              <div class="title-text">基础信息</div>
+            </div>
+          </a-col>
+          <a-col span="12">
+            <a-form-model-item prop="name" label="跟进状态">
+              <a-select v-model="form.name" placeholder="请选择跟进状态" default-value="0">
+                <a-select-option value="0">全部</a-select-option>
+                <a-select-option value="1">关闭</a-select-option>
+                <a-select-option value="2">运行中</a-select-option>
+              </a-select>
+              <!-- <a-input v-decorator="['description', {rules: [{required: true, min: 5, message: '请输入至少五个字符的规则描述！'}]}]" /> -->
+            </a-form-model-item>
+          </a-col>
+          <a-col span="12">
+            <a-form-model-item prop="id" label="销售负责人">
+              <a-select v-model="form.name" placeholder="请选择销售负责人" default-value="0">
+                <a-select-option value="0">全部</a-select-option>
+                <a-select-option value="1">关闭</a-select-option>
+                <a-select-option value="2">运行中</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col span="12">
+            <a-form-model-item prop="name" label="意向度">
+              <a-select v-model="form.name" placeholder="请选择意向度" default-value="0">
+                <a-select-option value="0">全部</a-select-option>
+                <a-select-option value="1">关闭</a-select-option>
+                <a-select-option value="2">运行中</a-select-option>
+              </a-select>
+              <!-- <a-input v-decorator="['description', {rules: [{required: true, min: 5, message: '请输入至少五个字符的规则描述！'}]}]" /> -->
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+
+        <!-- 孩子信息 -->
+        <a-row>
+          <a-col span="24">
+            <div class="form-title">
+              <div class="title-line"></div>
+              <div class="title-text">孩子信息</div>
+            </div>
+          </a-col>
+          <a-col span="12">
+            <a-form-model-item prop="name" label="姓名">
+              <a-input placeholder="请输入孩子姓名" v-model="form.name" />
+            </a-form-model-item>
+          </a-col>
+          <a-col span="12">
+            <a-form-model-item prop="id" label="性别">
+              <a-radio-group v-model="form.id">
+                <a-radio :value="1">男</a-radio>
+                <a-radio :value="2">女</a-radio>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col span="12">
+            <a-form-model-item prop="name" label="生日">
+              <a-date-picker v-model="form.id" format="YYYY-MM-DD"/>
+            </a-form-model-item>
+          </a-col>
+          <a-col span="12">
+            <a-form-model-item prop="id" label="民族">
+              <a-input v-model="form.id" placeholder="请输入民族" />
+            </a-form-model-item>
+          </a-col>
+          <a-col span="12">
+            <a-form-model-item prop="id" label="昵称">
+              <a-input v-model="form.id" placeholder="请输入昵称" />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+
+        <!-- 家长信息 -->
+        <a-row>
+          <a-col span="24">
+            <div class="form-title">
+              <div class="title-line"></div>
+              <div class="title-text">家长信息</div>
+            </div>
+          </a-col>
+          <a-col span="12">
+            <a-form-model-item prop="name" label="姓名">
+              <a-input placeholder="请输入姓名" v-model="form.name" />
+            </a-form-model-item>
+          </a-col>
+          <a-col span="12">
+            <a-form-model-item prop="id" label="手机号码">
+              <a-input placeholder="请输入家长手机号" v-model="form.name" />
+            </a-form-model-item>
+          </a-col>
+          <a-col span="12">
+            <a-form-model-item prop="name" label="家长关系">
+              <a-select v-model="form.name" placeholder="请选择家长关系" default-value="0">
+                <a-select-option value="0">全部</a-select-option>
+                <a-select-option value="1">关闭</a-select-option>
+                <a-select-option value="2">运行中</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col span="12">
+            <a-form-model-item prop="id" label="QQ">
+              <a-input v-model="form.id" placeholder="请输入QQ号码" />
+            </a-form-model-item>
+          </a-col>
+          <a-col span="12">
+            <a-form-model-item prop="id" label="行业">
+              <a-input v-model="form.id" placeholder="请输入行业" />
+            </a-form-model-item>
+          </a-col>
+          <a-col span="12">
+            <a-form-model-item prop="id" label="邮箱">
+              <a-input v-model="form.id" placeholder="请输入邮箱" />
+            </a-form-model-item>
+          </a-col>
+          <a-col span="12">
+            <a-form-model-item prop="id" label="固定电话">
+              <a-input v-model="form.id" placeholder="请输入固定电话" />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+
+        <!-- 来源 -->
+        <a-row>
+          <a-col span="24">
+            <div class="form-title">
+              <div class="title-line"></div>
+              <div class="title-text">来源</div>
+            </div>
+          </a-col>
+          <a-row>
+            <a-col span="12">
+              <a-form-model-item prop="name" label="转介绍人">
+                <a-radio-group default-value="0">
+                  <a-radio :value="0">老师</a-radio>
+                  <a-radio :value="1">学员</a-radio>
+                </a-radio-group>
+                <a-select v-model="form.name" size="small" placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+                <!-- <a-input v-decorator="['description', {rules: [{required: true, min: 5, message: '请输入至少五个字符的规则描述！'}]}]" /> -->
+              </a-form-model-item>
+            </a-col>
+            <a-col span="12">
+              <a-form-model-item prop="id" label="采单人">
+                <a-select v-model="form.name" placeholder="请选择采单人" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col span="12">
+              <a-form-model-item prop="name" label="市场活动名称">
+                <a-select v-model="form.name" placeholder="请选择市场活动名称" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col span="12">
+              <a-form-model-item prop="name" label="推广渠道">
+                <a-select v-model="form.name" placeholder="请选择推广渠道" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+        </a-row>
+
+      </a-form-model>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+
+// 表单字段
+const fields = ['description', 'id']
+
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: () => false
+    },
+    model: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data () {
+    this.formLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 13 }
+      }
+    }
+    return {
+      form: {
+        id: '',
+        name: undefined
+      },
+      rules: {
+        // name: [
+        //   { required: true, message: '请选择销售人员' },
+        // ],
+      },
+    }
+  },
+  created () {
+    console.log('custom modal created')
+
+    // // 防止表单未注册
+    // fields.forEach(v => this.form.getFieldDecorator(v))
+
+    // // 当 model 发生改变时，为表单设置值
+    // this.$watch('model', () => {
+    //   this.model && this.form.setFieldsValue(pick(this.model, fields))
+    // })
+  }
+}
+</script>
+
+<style lang="less" scope>
+@import '~ant-design-vue/es/style/themes/default.less';
+.form-title {
+  display: flex;
+  margin-bottom: 10px;
+  .title-line {
+    width: 3px;
+    height: 14px;
+    margin-right: 8px;
+    margin-top: 4px;
+    border-radius: 100px;
+    background: @primary-color;
+  }
+  .title-text {
+    font-weight: 600;
+    font-size: 16px;
+    color: #353535;
+  }
+}
+.ant-form-item {
+  margin-bottom: 10px;
+}
+</style>
+

src/views/markting/seas/list.vue

@@ -1,99 +1,94 @@
 <template>
-  <a-card :bordered="false">
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline">
-        <a-row :gutter="48">
-          <a-col :md="5" :sm="24">
-            <a-form-item>
-              <a-input v-model="queryParam.id" placeholder="名单姓名/家长手机号"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="5" :sm="24">
-            <a-form-item>
-              <a-select v-model="queryParam.status" placeholder="一级来源" default-value="0">
-                <a-select-option value="0">全部</a-select-option>
-                <a-select-option value="1">关闭</a-select-option>
-                <a-select-option value="2">运行中</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :md="5" :sm="24">
-            <a-form-item>
-              <a-select v-model="queryParam.status" placeholder="跟进状态" default-value="0">
-                <a-select-option value="0">全部</a-select-option>
-                <a-select-option value="1">关闭</a-select-option>
-                <a-select-option value="2">运行中</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :md="5" :sm="24">
-            <a-form-item>
-              <a-input v-model="queryParam.id" placeholder="请选择采单人姓名"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="!advanced && 4 || 24" :sm="24">
-            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
-              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-              <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
-            </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-    
-    <a-row style="margin-bottom:15px">
-      已选<a-button size="small" type="link">{{ selectedRows.length }}</a-button>条数据 <a-button size="small" @click="handleAssign">分配</a-button> <a-button size="small" @click="handleGain">捞取</a-button>
-    </a-row>
-    <s-table
-      ref="table"
-      size="default"
-      :rowKey="record => record.id"
-      :columns="columns"
-      :data="loadData"
-      :alert="false"
-      :rowSelection="rowSelection"
-      showPagination="auto">
-      <span slot="serial" slot-scope="text, record, index">
-        {{ index + 1 }}
-      </span>
-      <span slot="status" slot-scope="text">
-        <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
-      </span>
-      <span slot="description" slot-scope="text">
-        <ellipsis :length="4" tooltip>{{ text }}</ellipsis>
-      </span>
-      <span slot="action" slot-scope="text, record">
-        <template>
-          <a @click="handleEdit(record)">配置</a>
-          <a-divider type="vertical" />
-          <a @click="handleSub(record)">订阅报警</a>
-        </template>
-      </span>
-    </s-table>
+  <page-header-wrapper>
+    <a-card :bordered="false">
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline">
+          <a-row :gutter="48">
+            <a-col :md="5" :sm="24">
+              <a-form-item>
+                <a-input v-model="queryParam.id" placeholder="名单姓名/家长手机号"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="24">
+              <a-form-item>
+                <a-select v-model="queryParam.status" placeholder="一级来源" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="24">
+              <a-form-item>
+                <a-select v-model="queryParam.status" placeholder="跟进状态" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="24">
+              <a-form-item>
+                <a-input v-model="queryParam.id" placeholder="请选择采单人姓名"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="!advanced && 4 || 24" :sm="24">
+              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
+                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+                <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      
+      <a-row style="margin-bottom:15px">
+        已选<a-button size="small" type="link">{{ selectedRows.length }}</a-button>条数据 <a-button size="small" @click="handleAssign">分配</a-button> <a-button size="small" @click="handleGain">捞取</a-button>
+      </a-row>
+      <s-table
+        ref="table"
+        size="default"
+        :rowKey="record => record.id"
+        :columns="columns"
+        :data="loadData"
+        :alert="false"
+        :rowSelection="rowSelection"
+        showPagination="auto">
+        <span slot="serial" slot-scope="text, record, index">
+          {{ index + 1 }}
+        </span>
+        <span slot="status" slot-scope="text">
+          <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
+        </span>
+        <span slot="description" slot-scope="text">
+          <ellipsis :length="4" tooltip>{{ text }}</ellipsis>
+        </span>
+      </s-table>
 
-    <!-- 分配 -->
-    <assign-form
-      ref="createModal"
-      :visible="visible"
-      :loading="confirmLoading"
-      :model="mdl"
-      :length="selectedRows.length"
-      @cancel="handleCancel"
-      @ok="handleOk"
-      ></assign-form>
+      <!-- 分配 -->
+      <assign-form
+        ref="createModal"
+        :visible="visible"
+        :loading="confirmLoading"
+        :model="mdl"
+        :length="selectedRows.length"
+        @cancel="handleCancel"
+        @ok="handleOk"
+        ></assign-form>
+
+      <!-- 分配 -->
+      <gain-form
+        ref="gainModal"
+        :visible="gainVisible"
+        :length="selectedRows.length"
+        :loading="confirmLoading"
+        :model="mdl"
+        @cancel="handleGainCancel"
+        @ok="handleGainOk"
+        ></gain-form>
+    </a-card>
+  </page-header-wrapper>
 
-    <!-- 分配 -->
-    <gain-form
-      ref="gainModal"
-      :visible="gainVisible"
-      :length="selectedRows.length"
-      :loading="confirmLoading"
-      :model="mdl"
-      @cancel="handleGainCancel"
-      @ok="handleGainOk"
-      ></gain-form>
-  
-  </a-card>
 </template>
 
 <script>
@@ -133,12 +128,6 @@ const columns = [
     title: '更新时间',
     dataIndex: 'updatedAt',
     sorter: true
-  },
-  {
-    title: '操作',
-    dataIndex: 'action',
-    width: '150px',
-    scopedSlots: { customRender: 'action' }
   }
 ]