更新预售

src/api/market/presale.js

@@ -3,6 +3,9 @@ import { axios } from '@/utils/request'
 // api接口列表
 const api = {
   list: '/presale/list',
+  add: '/presale/add',
+  edit: '/presale/edit',
+  delete: '/presale/del',
   log: '/presale/log'
 }
 
@@ -15,6 +18,42 @@ export function list (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 log (params) {
   return axios({
     url: api.log,

src/views/market/presale/Index.vue

@@ -1,9 +1,9 @@
 <template>
   <a-card :bordered="false">
     <div class="card-title">{{ $route.meta.title }}</div>
-    <!-- <div class="table-operator">
+    <div class="table-operator">
       <a-button v-action:add type="primary" icon="plus" @click="handleAdd">新增</a-button>
-    </div> -->
+    </div>
     <s-table
       ref="table"
       rowKey="id"
@@ -12,18 +12,6 @@
       :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>
@@ -31,24 +19,28 @@
 
       <!-- 操作 -->
       <span slot="action" slot-scope="text, item">
-        <a @click="handleDetail(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>
 
-    <Log ref="Log" />
+    <AddForm ref="AddForm" @handleSubmit="handleRefresh" />
+    <EditForm ref="EditForm" @handleSubmit="handleRefresh" />
+
   </a-card>
 </template>
 
 <script>
 import * as Api from '@/api/market/presale'
 import { STable } from '@/components'
-import Log from './modules/Log.vue'
+import { AddForm, EditForm } from './modules'
 
 export default {
   name: 'Index',
   components: {
     STable,
-    Log
+    AddForm,
+    EditForm
   },
   data () {
     return {
@@ -101,8 +93,31 @@ export default {
 
   },
   methods: {
-    handleDetail (item) {
-      this.$refs.Log.visibleLog(item.id)
+    // 新增记录
+    handleAdd () {
+      this.$refs.AddForm.add()
+    },
+
+    // 编辑记录
+    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())
+        }
+      })
     },
 
     /**

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

@@ -0,0 +1,105 @@
+<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" required>
+          <div style="width: 100%; overflow-x: auto;">
+            <SelectGoods
+              :multiple="true"
+              v-decorator="['goods_list', { rules: [{ required: true, message: '请选择预售商品' }] }]"
+            />
+          </div>
+        </a-form-item>
+
+        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <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/presale'
+import { SelectImage, SelectGoods } from '@/components'
+
+export default {
+  components: {
+    SelectImage,
+    SelectGoods
+  },
+  data () {
+    return {
+      // 对话框标题
+      title: '新增预售',
+      // 标签布局属性
+      labelCol: { span: 3 },
+      // 输入框布局属性
+      wrapperCol: { span: 19 },
+      // 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, goods_list: values.goods_list.join(',') } })
+        .then(result => {
+          // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally(() => this.confirmLoading = false)
+    }
+
+  }
+}
+</script>

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

@@ -0,0 +1,125 @@
+<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" required>
+          <div style="width: 100%; overflow-x: auto;">
+            <SelectGoods
+              :defaultList="selectGoodsList"
+              :multiple="true"
+              v-decorator="['goods_list', { rules: [{ required: true, message: '请选择预售商品' }] }]"
+            />
+          </div>
+        </a-form-item>
+
+        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <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/presale'
+import { SelectImage, SelectGoods } from '@/components'
+
+export default {
+  components: {
+    SelectImage,
+    SelectGoods
+  },
+  data () {
+    return {
+      // 对话框标题
+      title: '编辑预售',
+      // 标签布局属性
+      labelCol: { span: 3 },
+      // 输入框布局属性
+      wrapperCol: { span: 19 },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      confirmLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this),
+      // 当前记录
+      record: {},
+      // 关联商品列表
+      selectGoodsList: []
+    }
+  },
+  methods: {
+
+    // 显示对话框
+    edit (record) {
+      // 显示窗口
+      this.visible = true
+      // 当前记录
+      this.record = record
+
+      this.selectGoodsList = record.goods_list || []
+
+      // 设置默认值
+      this.setFieldsValue()
+    },
+
+    // 设置默认值
+    setFieldsValue () {
+      const { record, form: { setFieldsValue } } = this
+      this.$nextTick(() => {
+        setFieldsValue(pick(record, ['name', 'goods_list', '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({ id: this.record.id, form: { ...values, goods_list: values.goods_list.join(',') } })
+        .then(result => {
+          // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally(() => this.confirmLoading = false)
+    }
+
+  }
+}
+</script>

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

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