更新活动相关配置页面

src/api/market/active.js

@@ -0,0 +1,114 @@
+import { axios } from '@/utils/request'
+
+// api接口列表
+const api = {
+  list: '/market.active/list',
+  detail: '/market.active/detail',
+  add: '/market.active/add',
+  edit: '/market.active/edit',
+  delete: '/market.active/delete',
+  colList: '/market.active/colList',
+  colAdd: '/market.active/colAdd',
+  colEdit: '/market.active/colEdit',
+  colDelete: '/market.active/colDelete',
+  goodsList: '/market.active/goodsList'
+}
+
+// 列表记录
+export function list (params) {
+  return axios({
+    url: api.list,
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 新增记录
+ * @param {*} data
+ */
+export function add (data) {
+  return axios({
+    url: api.add,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 编辑记录
+ * @param {*} data
+ */
+export function edit (data) {
+  return axios({
+    url: api.edit,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 删除记录
+ * @param {*} data
+ */
+export function deleted (data) {
+  return axios({
+    url: api.delete,
+    method: 'post',
+    data: data
+  })
+}
+
+// 模块列表记录
+export function colList (params) {
+  return axios({
+    url: api.colList,
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 新增模块记录
+ * @param {*} data
+ */
+export function colAdd (data) {
+  return axios({
+    url: api.colAdd,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 编辑模块记录
+ * @param {*} data
+ */
+export function colEdit (data) {
+  return axios({
+    url: api.colEdit,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 删除模块记录
+ * @param {*} data
+ */
+export function colDelete (data) {
+  return axios({
+    url: api.colDelete,
+    method: 'post',
+    data: data
+  })
+}
+
+// 商品列表记录
+export function goodsList (params) {
+  return axios({
+    url: api.goodsList,
+    method: 'get',
+    params
+  })
+}

src/config/router.config.js

@@ -600,6 +600,11 @@ export const asyncRouterMap = [
             meta: { title: '满额包邮', keepAlive: false, permission: ['/market/full-free'] },
             moduleKey: 'market-fullFree',
           },
+          {
+            path: '/market/active',
+            component: () => import(/* webpackChunkName: "market" */ '@/views/market/active/Index'),
+            meta: { title: '活动管理', keepAlive: false },
+          },
         ],
       },
 

src/views/content/banner/modules/EditForm.vue

@@ -24,7 +24,7 @@
           <a-input v-decorator="['redirect_url', { rules: [{ required: false, message: '请输入跳转地址' }] }]" placeholder="请输入跳转地址" />
         </a-form-item>
         <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示">
-          <a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]">
+          <a-radio-group v-decorator="['status', { initialValue: 10, rules: [{ required: true }] }]">
             <a-radio :value="10">显示</a-radio>
             <a-radio :value="20">隐藏</a-radio>
           </a-radio-group>

src/views/market/active/Index.vue

@@ -0,0 +1,176 @@
+<template>
+  <a-card :bordered="false">
+    <div class="card-title">{{ $route.meta.title }}</div>
+    <div class="table-operator">
+      <a-button v-action:add type="primary" icon="plus" @click="handleAdd">新增</a-button>
+    </div>
+    <s-table
+      ref="table"
+      rowKey="id"
+      :loading="isLoading"
+      :columns="columns"
+      :data="loadData"
+      :pageSize="15"
+    >
+      <!-- 活动入口图片 -->
+      <span slot="index_image_url" slot-scope="text">
+        <a title="点击查看原图" :href="text" target="_blank">
+          <img height="50" :src="text" alt="活动入口图片" />
+        </a>
+      </span>
+      <!-- Banner图 -->
+      <span slot="theme_image_url" slot-scope="text">
+        <a title="点击查看原图" :href="text" target="_blank">
+          <img height="50" :src="text" alt="活动主题图" />
+        </a>
+      </span>
+      <!-- 状态 -->
+      <span slot="status" slot-scope="text">
+        <a-tag :color="text == 1 ? 'green' : ''">{{ text ? '开启' : '关闭' }}</a-tag>
+      </span>
+
+      <!-- 操作 -->
+      <span slot="action" slot-scope="text, item">
+        <a style="margin-right: 8px;" @click="handleCol(item)">配置栏目</a>
+        <a v-action:edit style="margin-right: 8px;" @click="handleEdit(item)">编辑</a>
+        <a v-action:delete @click="handleDelete(item)">删除</a>
+      </span>
+    </s-table>
+    <AddForm ref="AddForm" @handleSubmit="handleRefresh" />
+    <EditForm ref="EditForm" @handleSubmit="handleRefresh" />
+
+    <ColList ref="ColList" />
+  </a-card>
+</template>
+
+<script>
+import * as Api from '@/api/market/active'
+import { STable } from '@/components'
+import { AddForm, EditForm, ColList } from './modules'
+
+export default {
+  name: 'Index',
+  components: {
+    STable,
+    AddForm,
+    EditForm,
+    ColList
+  },
+  data () {
+    return {
+      // 查询参数
+      queryParam: {},
+      // 正在加载
+      isLoading: false,
+      // 表头
+      columns: [
+        {
+          title: '活动ID',
+          dataIndex: 'id'
+        },
+        {
+          title: '活动名称',
+          dataIndex: 'name'
+        },
+        {
+          title: '活动标题',
+          dataIndex: 'title'
+        },
+        {
+          title: '活动入口图片',
+          dataIndex: 'index_image_url',
+          scopedSlots: { customRender: 'index_image_url' }
+        },
+        {
+          title: '活动主题标题',
+          dataIndex: 'theme_title'
+        },
+        {
+          title: '活动主题图',
+          dataIndex: 'theme_image_url',
+          scopedSlots: { customRender: 'theme_image_url' }
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' }
+        },
+        {
+          title: '创建时间',
+          width: '180px',
+          dataIndex: 'create_time'
+        },
+        {
+          title: '更新时间',
+          width: '180px',
+          dataIndex: 'update_time'
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: '180px',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: param => {
+        return Api.list({ ...param, ...this.queryParam })
+          .then(response => {
+            return response.data.list
+          })
+      }
+    }
+  },
+  created () {
+
+  },
+  methods: {
+
+    // 新增记录
+    handleAdd () {
+      this.$refs.AddForm.add()
+    },
+
+    // 配置栏目
+    handleCol (item) {
+      this.$refs.ColList.visibleCol(item.id)
+    },
+
+    // 编辑记录
+    handleEdit (item) {
+      this.$refs.EditForm.edit(item)
+    },
+
+    // 删除记录
+    handleDelete (item) {
+      const app = this
+      const modal = this.$confirm({
+        title: '您确定要删除该记录吗?',
+        content: '删除后不可恢复',
+        onOk () {
+          return Api.deleted({ activeId: item.id })
+            .then(result => {
+              app.$message.success(result.message, 1.5)
+              app.handleRefresh()
+            })
+            .finally(result => modal.destroy())
+        }
+      })
+    },
+
+    /**
+     * 刷新列表
+     * @param Boolean bool 强制刷新到第一页
+     */
+    handleRefresh (bool = false) {
+      this.$refs.table.refresh(bool)
+    },
+
+    // 检索查询
+    onSearch () {
+      this.handleRefresh(true)
+    }
+
+  }
+}
+</script>

src/views/market/active/modules/AddForm.vue

@@ -0,0 +1,111 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="780"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    :destroyOnClose="true"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="活动名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入活动名称' }] }]" placeholder="请输入活动名称" />
+        </a-form-item>
+        <a-form-item label="活动标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input v-decorator="['title', { rules: [{ required: true, message: '请输入活动标题' }] }]" placeholder="请输入活动标题" />
+        </a-form-item>
+        <a-form-item label="活动入口图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <SelectImage
+            v-decorator="['index_image_id', { rules: [{ required: true, message: '请选择1个活动入口图片' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="活动主题标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input v-decorator="['theme_title', { rules: [{ required: true, message: '请输入活动主题标题' }] }]" placeholder="请输入活动主题标题" />
+        </a-form-item>
+        <a-form-item label="活动主题图" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <SelectImage
+            v-decorator="['theme_image_id', { rules: [{ required: true, message: '请选择1个活动主题图' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示">
+          <a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]">
+            <a-radio :value="1">显示</a-radio>
+            <a-radio :value="0">隐藏</a-radio>
+          </a-radio-group>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import * as Api from '@/api/market/active'
+import { SelectImage } from '@/components'
+
+export default {
+  components: {
+    SelectImage
+  },
+  data () {
+    return {
+      // 对话框标题
+      title: '新增活动',
+      // 标签布局属性
+      labelCol: { span: 7 },
+      // 输入框布局属性
+      wrapperCol: { span: 13 },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      confirmLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this)
+    }
+  },
+  methods: {
+
+    // 显示对话框
+    add () {
+      // 显示窗口
+      this.visible = true
+    },
+
+    // 确认按钮
+    handleSubmit (e) {
+      e.preventDefault()
+      // 表单验证
+      const { form: { validateFields } } = this
+      validateFields((errors, values) => {
+        // 提交到后端api
+        !errors && this.onFormSubmit(values)
+      })
+    },
+
+    // 关闭对话框事件
+    handleCancel () {
+      this.visible = false
+      this.form.resetFields()
+    },
+
+    // 提交到后端api
+    onFormSubmit (values) {
+      this.confirmLoading = true
+      Api.add({ form: values })
+        .then(result => {
+          // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally(() => this.confirmLoading = false)
+    }
+
+  }
+}
+</script>

src/views/market/active/modules/ColAddForm.vue

@@ -0,0 +1,118 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="780"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    :destroyOnClose="true"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="栏目类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input v-decorator="['col_type', { rules: [{ required: false, message: '请输入栏目类型' }] }]" placeholder="请输入栏目类型" />
+        </a-form-item>
+        <a-form-item label="栏目名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input v-decorator="['col_name', { rules: [{ required: true, message: '请输入栏目名称' }] }]" placeholder="请输入栏目名称" />
+        </a-form-item>
+        <a-form-item label="栏目背景图" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <SelectImage
+            v-decorator="['col_image_id', { rules: [{ required: true, message: '请选择1个栏目背景图' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="栏目关联商品" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
+          <div style="width: 100%; overflow-x: auto;">
+            <SelectGoods
+              :multiple="true"
+              v-decorator="['col_goods_ids', { rules: [{ required: true, message: '请选择关联商品' }] }]"
+            />
+          </div>
+        </a-form-item>
+
+        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示">
+          <a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]">
+            <a-radio :value="1">显示</a-radio>
+            <a-radio :value="0">隐藏</a-radio>
+          </a-radio-group>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import * as Api from '@/api/market/active'
+import { SelectImage, SelectGoods } from '@/components'
+
+export default {
+  components: {
+    SelectImage,
+    SelectGoods
+  },
+  data () {
+    return {
+      // 对话框标题
+      title: '新增栏目',
+      // 标签布局属性
+      labelCol: { span: 7 },
+      // 输入框布局属性
+      wrapperCol: { span: 13 },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      confirmLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this),
+
+      activeId: null
+    }
+  },
+  methods: {
+
+    // 显示对话框
+    add (activeId) {
+      // 显示窗口
+      this.visible = true
+
+      // 活动 Id
+      this.activeId = activeId
+    },
+
+    // 确认按钮
+    handleSubmit (e) {
+      e.preventDefault()
+      // 表单验证
+      const { form: { validateFields } } = this
+      validateFields((errors, values) => {
+        // 提交到后端api
+        !errors && this.onFormSubmit(values)
+      })
+    },
+
+    // 关闭对话框事件
+    handleCancel () {
+      this.visible = false
+      this.form.resetFields()
+    },
+
+    // 提交到后端api
+    onFormSubmit (values) {
+      this.confirmLoading = true
+      Api.colAdd({ form: { ...values, active_id: this.activeId, col_goods_ids: values.col_goods_ids.join(',') } })
+        .then(result => {
+          // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally(() => this.confirmLoading = false)
+    }
+
+  }
+}
+</script>

src/views/market/active/modules/ColEditForm.vue

@@ -0,0 +1,146 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="780"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    :destroyOnClose="true"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="栏目类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input v-decorator="['col_type', { rules: [{ required: false, message: '请输入栏目类型' }] }]" placeholder="请输入栏目类型" />
+        </a-form-item>
+        <a-form-item label="栏目名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input v-decorator="['col_name', { rules: [{ required: true, message: '请输入栏目名称' }] }]" placeholder="请输入栏目名称" />
+        </a-form-item>
+        <a-form-item label="栏目背景图" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <SelectImage
+            :defaultList="record.colImage ? [record.colImage] : []"
+            v-decorator="['col_image_id', { rules: [{ required: true, message: '请选择1个栏目背景图' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="栏目关联商品" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
+          <div style="width: 100%; overflow-x: auto;">
+            <SelectGoods
+              :defaultList="selectGoodsList"
+              :multiple="true"
+              v-decorator="['col_goods_ids', { rules: [{ required: true, message: '请选择关联商品' }] }]"
+            />
+          </div>
+        </a-form-item>
+
+        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示">
+          <a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]">
+            <a-radio :value="1">显示</a-radio>
+            <a-radio :value="0">隐藏</a-radio>
+          </a-radio-group>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import * as Api from '@/api/market/active'
+import { SelectImage, SelectGoods } from '@/components'
+
+export default {
+  components: {
+    SelectImage,
+    SelectGoods
+  },
+  data () {
+    return {
+      // 对话框标题
+      title: '编辑活动',
+      // 标签布局属性
+      labelCol: { span: 7 },
+      // 输入框布局属性
+      wrapperCol: { span: 13 },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      confirmLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this),
+      // 当前记录
+      record: {},
+      // 关联商品列表
+      selectGoodsList: []
+    }
+  },
+  methods: {
+
+    // 显示对话框
+    async edit (record) {
+      // 显示窗口
+      this.visible = true
+      // 当前记录
+      this.record = record
+      // 设置默认值
+      this.setFieldsValue()
+
+      await this.getSelectGoodsList()
+    },
+
+    async getSelectGoodsList () {
+      const goodsIds = this.record.col_goods_ids
+      if (goodsIds.length > 0) {
+        await Api.goodsList({ goodsIds })
+          .then(result => {
+            this.selectGoodsList = result.data.list
+          })
+      }
+    },
+
+    // 设置默认值
+    setFieldsValue () {
+      const { record, form: { setFieldsValue } } = this
+      this.$nextTick(() => {
+        setFieldsValue(pick(record, ['col_type', 'col_name', 'col_image', 'col_goods_ids', 'status']))
+      })
+    },
+
+    // 确认按钮
+    handleSubmit (e) {
+      e.preventDefault()
+      // 表单验证
+      const { form: { validateFields } } = this
+      validateFields((errors, values) => {
+        // 提交到后端api
+        !errors && this.onFormSubmit(values)
+      })
+    },
+
+    // 关闭对话框事件
+    handleCancel () {
+      this.visible = false
+      this.form.resetFields()
+      
+      this.selectGoodsList = []
+      this.record = {}
+    },
+
+    // 提交到后端api
+    onFormSubmit (values) {
+      this.confirmLoading = true
+      Api.colEdit({ activeColId: this.record.id, form: { ...values, col_goods_ids: values.col_goods_ids.join(',') } })
+        .then(result => {
+          // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally(() => this.confirmLoading = false)
+    }
+
+  }
+}
+</script>

src/views/market/active/modules/ColList.vue

@@ -0,0 +1,186 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="900"
+    :visible="visible"
+    :maskClosable="false"
+    :destroyOnClose="true"
+    :footer="null"
+    @cancel="handleCancel"
+  >
+    <div class="table-operator">
+      <a-button v-action:add type="primary" icon="plus" @click="handleAdd">新增</a-button>
+    </div>
+    <div class="table-wrapper">
+      <s-table
+        ref="table"
+        rowKey="id"
+        :loading="isLoading"
+        :columns="columns"
+        :data="loadData"
+        :pageSize="15"
+      >
+        <!-- 活动入口图片 -->
+        <span slot="col_image_url" slot-scope="text">
+          <a title="点击查看原图" :href="text" target="_blank">
+            <img height="50" :src="text" alt="栏目背景图" />
+          </a>
+        </span>
+        <!-- Banner图 -->
+        <span slot="theme_pic" slot-scope="text">
+          <a title="点击查看原图" :href="text" target="_blank">
+            <img height="50" :src="text" alt="活动主题图" />
+          </a>
+        </span>
+        <!-- 状态 -->
+        <span slot="status" slot-scope="text">
+          <a-tag :color="text == 1 ? 'green' : ''">{{ text ? '开启' : '关闭' }}</a-tag>
+        </span>
+
+        <!-- 操作 -->
+        <span slot="action" slot-scope="text, item">
+          <a v-action:edit style="margin-right: 8px;" @click="handleEdit(item)">编辑</a>
+          <a v-action:delete @click="handleDelete(item)">删除</a>
+        </span>
+      </s-table>
+    </div>
+    <ColAddForm ref="ColAddForm" @handleSubmit="handleRefresh" />
+    <ColEditForm ref="ColEditForm" @handleSubmit="handleRefresh" />
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import * as Api from '@/api/market/active'
+import { STable } from '@/components'
+import ColAddForm from './ColAddForm'
+import ColEditForm from './ColEditForm'
+
+export default {
+  components: {
+    STable,
+    ColAddForm,
+    ColEditForm
+  },
+  data () {
+    return {
+      // 对话框标题
+      title: '栏目管理',
+      // modal(对话框)是否可见
+      visible: false,
+      // 当前记录ID
+      activeId: null,
+      // 查询参数
+      queryParam: {},
+      // 正在加载
+      isLoading: false,
+      // 表头
+      columns: [
+        {
+          title: '栏目ID',
+          dataIndex: 'id'
+        },
+        {
+          title: '栏目类型',
+          dataIndex: 'col_type'
+        },
+        {
+          title: '栏目名称',
+          dataIndex: 'col_name'
+        },
+        {
+          title: '栏目背景图',
+          dataIndex: 'col_image_url',
+          scopedSlots: { customRender: 'col_image_url' }
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' }
+        },
+        {
+          title: '创建时间',
+          width: '180px',
+          dataIndex: 'create_time'
+        },
+        {
+          title: '更新时间',
+          width: '180px',
+          dataIndex: 'update_time'
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: '120px',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: param => {
+        return Api.colList({ ...param, ...this.queryParam })
+          .then(response => {
+            return response.data.list
+          })
+      }
+    }
+  },
+  methods: {
+    // 新增记录
+    handleAdd () {
+      this.$refs.ColAddForm.add(this.activeId)
+    },
+
+    // 编辑记录
+    handleEdit (item) {
+      this.$refs.ColEditForm.edit(item)
+    },
+
+    // 删除记录
+    handleDelete (item) {
+      const app = this
+      const modal = this.$confirm({
+        title: '您确定要删除该记录吗?',
+        content: '删除后不可恢复',
+        onOk () {
+          return Api.colDelete({ activeColId: item.id })
+            .then(result => {
+              app.$message.success(result.message, 1.5)
+              app.handleRefresh()
+            })
+            .finally(result => modal.destroy())
+        }
+      })
+    },
+
+    visibleCol (activeId) {
+      // 显示窗口
+      this.visible = true
+      // 当前记录ID
+      this.activeId = activeId
+
+      this.queryParam = { activeId }
+    },
+
+    // 关闭对话框事件
+    handleCancel () {
+      this.visible = false
+    },
+
+    /**
+     * 刷新列表
+     * @param Boolean bool 强制刷新到第一页
+     */
+    handleRefresh (bool = false) {
+      this.$refs.table.refresh(bool)
+    }
+  }
+}
+</script>
+
+<style>
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  padding-bottom: 20px;
+}
+</style>

src/views/market/active/modules/EditForm.vue

@@ -0,0 +1,127 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="720"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    :destroyOnClose="true"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="活动名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入活动名称' }] }]" placeholder="请输入活动名称" />
+        </a-form-item>
+        <a-form-item label="活动标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input v-decorator="['title', { rules: [{ required: true, message: '请输入活动标题' }] }]" placeholder="请输入活动标题" />
+        </a-form-item>
+        <a-form-item label="活动入口图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <SelectImage
+            :defaultList="record.indexImage ? [record.indexImage] : []"
+            v-decorator="['index_image_id', { rules: [{ required: true, message: '请选择1个活动入口图片' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="活动主题标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input v-decorator="['theme_title', { rules: [{ required: true, message: '请输入活动主题标题' }] }]" placeholder="请输入活动主题标题" />
+        </a-form-item>
+        <a-form-item label="活动主题图" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <SelectImage
+            :defaultList="record.themeImage ? [record.themeImage] : []"
+            v-decorator="['theme_image_id', { rules: [{ required: true, message: '请选择1个活动主题图' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示">
+          <a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]">
+            <a-radio :value="1">显示</a-radio>
+            <a-radio :value="0">隐藏</a-radio>
+          </a-radio-group>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import * as Api from '@/api/market/active'
+import { SelectImage } from '@/components'
+
+export default {
+  components: {
+    SelectImage
+  },
+  data () {
+    return {
+      // 对话框标题
+      title: '编辑活动',
+      // 标签布局属性
+      labelCol: { span: 7 },
+      // 输入框布局属性
+      wrapperCol: { span: 13 },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      confirmLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this),
+      // 当前记录
+      record: {}
+    }
+  },
+  methods: {
+
+    // 显示对话框
+    edit (record) {
+      // 显示窗口
+      this.visible = true
+      // 当前记录
+      this.record = record
+      // 设置默认值
+      this.setFieldsValue()
+    },
+
+    // 设置默认值
+    setFieldsValue () {
+      const { record, form: { setFieldsValue } } = this
+      this.$nextTick(() => {
+        setFieldsValue(pick(record, ['name', 'title', 'index_icon', 'theme_title', 'theme_pic', 'status']))
+      })
+    },
+
+    // 确认按钮
+    handleSubmit (e) {
+      e.preventDefault()
+      // 表单验证
+      const { form: { validateFields } } = this
+      validateFields((errors, values) => {
+        // 提交到后端api
+        !errors && this.onFormSubmit(values)
+      })
+    },
+
+    // 关闭对话框事件
+    handleCancel () {
+      this.visible = false
+      this.form.resetFields()
+    },
+
+    // 提交到后端api
+    onFormSubmit (values) {
+      this.confirmLoading = true
+      Api.edit({ activeId: this.record.id, form: values })
+        .then(result => {
+          // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally(() => this.confirmLoading = false)
+    }
+
+  }
+}
+</script>

src/views/market/active/modules/index.js

@@ -0,0 +1,5 @@
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import ColList from './ColList'
+
+export { AddForm, EditForm, ColList }