'销售管理'

src/config/router.config.js

@@ -276,6 +276,19 @@ export const asyncRouterMap = [
         name: 'Markting',
         meta: { title: '销售管理', icon: 'user', keepAlive: true, permission: [ 'user' ] },
         children: [
+          {
+            path: '/markting/active',
+            name: 'Active',
+            component: () => import('@/views/markting/active/list'),
+            meta: { title: '市场活动', hideHeader: true, permission: [ 'user' ] },
+          },
+          {
+            path: '/markting/active/info',
+            name: 'ActiveInfo',
+            hidden: true,
+            component: () => import('@/views/markting/active/info'),
+            meta: { title: '活动详情',  hideHeader: true, permission: [ 'user' ] },
+          },
           {
             path: '/markting/seas',
             name: 'Seas',

src/views/markting/active/info.vue

@@ -0,0 +1,173 @@
+<template>
+  <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>
+      </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';
+
+export default {
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+      mdl: null,
+
+      tabs: [
+        {
+          id: 1,
+          tab: '详细信息'
+        },
+        {
+          id: 2,
+          tab: '销售线索'
+        },
+      ]
+    }
+  },
+  created() {
+
+  },
+  components: {
+    ActiveForm
+  },
+  mounted() {
+
+  },
+  methods: {
+    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>
+
+<style lang="less" scoped>
+
+</style>

src/views/markting/active/list.vue

@@ -0,0 +1,293 @@
+<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>
+
+    <!-- 分配 -->
+    <active-form
+      ref="createModal"
+      :visible="visible"
+      :loading="confirmLoading"
+      :model="mdl"
+      @cancel="handleCancel"
+      @ok="handleOk"
+      ></active-form>
+  
+  </a-card>
+</template>
+
+<script>
+import moment from 'moment'
+import { STable, Ellipsis } from '@/components';
+import { getRoleList, getServiceList } from '@/api/manage';
+import ActiveForm from '../modules/ActiveForm';
+
+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 {
+  name: 'SeasList',
+  components: {
+    STable,
+    Ellipsis,
+    ActiveForm
+  },
+  data() {
+    this.columns = columns
+    return {
+      // create model
+      createTime: [],
+      visible: false,
+      gainVisible: false,
+      confirmLoading: false,
+      dateFormat: 'YYYY/MM/DD',
+      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: {
+    handleAdd() {
+      this.visible = true;
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+    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() {
+      if(this.selectedRows.length <= 0) {
+        this.$message.error('请至少选择一个学员');
+        return;
+      }
+      this.visible = true;
+    },
+    // 捞取
+    handleGain() {
+      if(this.selectedRows.length <= 0) {
+        this.$message.error('请至少选择一个学员');
+        return;
+      }
+      this.gainVisible = true
+    },
+    beforeOpen() {
+
+    },
+    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
+      const ruleForm = this.$refs.createModal.$refs.ruleForm
+      ruleForm.resetFields() // 清理表单数据（可不做）
+    },
+    handleGainCancel() {
+      this.gainVisible = false;
+    },
+    handleTimeChange (value, dateString) {
+      this.queryParam.startTime = dateString[0];
+      this.queryParam.endTime = dateString[1];
+    },
+    handleInfo(record) {
+      this.$router.push({
+        path: '/markting/active/info',
+        query: {
+          id: record.id
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/markting/modules/ActiveForm.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/modules/AssignForm.vue

@@ -0,0 +1,94 @@
+<template>
+  <a-modal
+    title="分配名单"
+    :width="640"
+    :visible="visible"
+    :confirmLoading="loading"
+    @ok="() => { $emit('ok') }"
+    @cancel="() => { $emit('cancel') }"
+  >
+    <a-spin :spinning="loading">
+      <a-row style="margin-bottom:10px">
+        <a-col offset="2" >
+          请为已选中的{{ length }}个名单分配负责销售
+        </a-col>
+      </a-row>
+      <a-form-model ref="ruleForm" :model="form" :rules="rules" v-bind="formLayout">
+        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
+        <a-form-model-item prop="id" label="主键ID">
+          <a-input v-model="form.id" />
+        </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-input v-decorator="['description', {rules: [{required: true, min: 5, message: '请输入至少五个字符的规则描述！'}]}]" /> -->
+        </a-form-model-item>
+      </a-form-model>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+
+// 表单字段
+const fields = ['description', 'id']
+
+export default {
+  props: {
+    length: {
+      type: Number,
+      required: true
+    },
+    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/GainForm.vue

@@ -0,0 +1,68 @@
+<template>
+  <a-modal
+    title="捞取名单"
+    :width="640"
+    :visible="visible"
+    :confirmLoading="loading"
+    @ok="() => { $emit('ok') }"
+    @cancel="() => { $emit('cancel') }"
+  >
+    <a-spin :spinning="loading">
+      <p>已选中的{{ length }}个名单捞取给自己</p>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+
+// 表单字段
+const fields = ['description', 'id']
+
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    length: {
+      type: Number,
+      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: {},
+    }
+  },
+  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/seas/list.vue

@@ -1,22 +1,319 @@
 <template>
-  <div>公海池</div>
+  <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>
+
+    <!-- 分配 -->
+    <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>
 </template>
 
 <script>
+import moment from 'moment'
+import { STable, Ellipsis } from '@/components';
+import { getRoleList, getServiceList } from '@/api/manage'
+import AssignForm from '../modules/AssignForm'
+import GainForm from '../modules/GainForm'
+
+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: '操作',
+    dataIndex: 'action',
+    width: '150px',
+    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,
+    AssignForm,
+    GainForm
+  },
   data() {
+    this.columns = columns
     return {
-
+      // create model
+      visible: false,
+      gainVisible: false,
+      confirmLoading: false,
+      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
+    },
+    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() {
+      if(this.selectedRows.length <= 0) {
+        this.$message.error('请至少选择一个学员');
+        return;
+      }
+      this.visible = true;
+    },
+    // 捞取
+    handleGain() {
+      if(this.selectedRows.length <= 0) {
+        this.$message.error('请至少选择一个学员');
+        return;
+      }
+      this.gainVisible = true
+    },
+    beforeOpen() {
+
+    },
+    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
+      const ruleForm = this.$refs.createModal.$refs.ruleForm
+      ruleForm.resetFields() // 清理表单数据（可不做）
+    },
+    handleGainCancel() {
+      this.gainVisible = false;
+    }
   }
 }
 </script>