添加营销活动列表

src/views/activityScheduling/activeMarketing.vue

@@ -1,10 +1,11 @@
 <template>
     <div class="m-container">
         <h2>
-            <div class="squrt"></div>营销活动列表
+            <div class="squrt"></div>营销活动
         </h2>
 
         <div class="m-core">
+            <el-button type="primary" class='newBand' @click="() => { operationType = 'create'; marketVisible = true }">添加营销活动</el-button>
             <save-form
                 ref="searchForm"
                 :inline="true"
@@ -21,15 +22,14 @@
                 </el-form-item>
                 <el-form-item prop="search">
                     <el-input
-                        v-model="searchForm.search"
+                        v-model="searchForm.activityIds"
                         clearable
-                        placeholder="活动方案编号"
+                        placeholder="关联活动方案"
                     />
                 </el-form-item>
                 <el-form-item>
                     <el-button native-type="submit" type="primary">搜索</el-button>
                     <el-button native-type="reset" type="danger">重置</el-button>
-                    <!-- <el-button @click="marketVisible = true">新建</el-button> -->
                 </el-form-item>
             </save-form>
 
@@ -38,7 +38,7 @@
                 :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
                 :data="tableList"
             >
-                <el-table-column align="center" prop="id" label="营销活动编号">
+                <el-table-column align="center" prop="id" label="营销活动编号" width="200">
                     <template slot-scope="scope">
                         <div>
                         <copy-text>{{ scope.row.id }}</copy-text>
@@ -50,9 +50,9 @@
                         <copy-text>{{ scope.row.name }}</copy-text>
                     </template>
                 </el-table-column>
-                <el-table-column align="center" prop="type" label="关联活动方案">
+                <el-table-column align="center" prop="activityIds" label="关联活动方案">
                     <template slot-scope="scope">
-                        {{ scope.row.type | songUseTypeFormat }}
+                        {{ scope.row.activityIds }}
                     </template>
                 </el-table-column>
                 <el-table-column
@@ -62,9 +62,7 @@
                     fixed="right"
                 >
                     <template slot-scope="scope">
-                        <el-button
-                            type="text"
-                        >修改</el-button>
+                        <el-button type="text" @click="onUpdate(scope.row)">修改</el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -79,12 +77,14 @@
         </div>
 
         <el-dialog
-            title="修改"
+            :title="(operationType == 'create' ? '添加' : '修改') + '营销活动'"
             :visible.sync="marketVisible"
             width="550px"
             v-if="marketVisible"
         >
             <market-form
+                :marketId="marketId"
+                :operationType="operationType"
                 @submited="FetchList"
                 @close="marketVisible = false"
             />
@@ -96,6 +96,7 @@
 import saveForm from "@/components/save-form";
 import pagination from "@/components/Pagination/index";
 import marketForm from './modals/market'
+import { marketActivityQueryPage } from './api'
 export default {
     components: {
         saveForm,
@@ -104,9 +105,12 @@ export default {
     },
     data() {
         return {
+            operationType: 'create',
             marketVisible: false,
+            marketId: null,
             searchForm: {
-                search: null
+                search: null,
+                activityIds: null
             },
             rules: {
                 // 分页规则
@@ -118,16 +122,36 @@ export default {
             tableList: [],
         }
     },
+    mounted() {
+        this.FetchList()
+    },
     methods: {
         search() {
-
+            this.rules.page = 1
+            this.FetchList()
         },
         onReSet() {
             this.$refs.searchForm.resetFields();
+            this.rules.page = 1
             this.FetchList();
         },
-        FetchList() {
-
+        async FetchList() {
+            try {
+                let res = await marketActivityQueryPage({
+                    ...this.searchForm,
+                    page: this.rules.page,
+                    rows: this.rules.limit
+                })
+                this.tableList = res.data.rows || []
+                this.rules.total = res.data.total
+            } catch {
+                //
+            }
+        },
+        onUpdate(row) {
+            this.marketId = row.id
+            this.operationType = 'update'
+            this.marketVisible = true
         }
     }
 }

src/views/activityScheduling/api.js

@@ -1,9 +1,35 @@
-import request from '@/utils/request'
+import request from '@/utils/request2'
 
-export function getCountCloudTeacherList (data) {
+export function marketActivityAdd (data) {
     return request({
-        url: '/api-web/studentManage/countCloudTeacherActive',
+        url: '/api-web/marketActivity/add',
+        method: 'post',
+        data,
+        requestType: 'form'
+    })
+}
+
+export function marketActivityUpdate (data) {
+    return request({
+        url: '/api-web/marketActivity/update',
+        method: 'post',
+        data,
+        requestType: 'form'
+    })
+}
+
+export function marketActivityGet (data) {
+    return request({
+        url: '/api-web/marketActivity/get',
         method: 'get',
         params: data
     })
 }
+
+export function marketActivityQueryPage (data) {
+    return request({
+        url: '/api-web/marketActivity/queryPage',
+        method: 'get',
+        params: data
+    })
+}

src/views/activityScheduling/modals/market.vue

@@ -1,25 +1,29 @@
 <template>
     <div>
-        <el-form ref="form" :model="form" label-width="100px">
+        <el-form ref="form" :model="form" label-width="120px">
             <el-form-item
                 prop="activeId"
                 label="营销活动编号"
+                v-if="type == 'update'"
             >
                 <el-input placeholder="请输入营销活动编号" disabled v-model="form.activeId"/>
             </el-form-item>
             <el-form-item
-                prop="activeName"
+                prop="name"
                 label="活动名称"
+                :rules="[{required: true, message: '请输入活动名称'}]"
             >
-                <el-input placeholder="请输入活动名称" disabled v-model="form.activeName"/>
+                <!-- :disabled="type == 'update'"  -->
+                <el-input placeholder="请输入活动名称" v-model="form.name"/>
             </el-form-item>
-            <el-form-item label="收费详情" prop="ids" :rules="[{required: true, message: '请输入收费详情'}]">
+            <el-form-item label="关联活动方案" prop="activityIds" :rules="[{required: true, message: '请输入关联活动方案'}]">
                 <el-input
                     type="textarea"
-                    v-model.trim="form.ids"
+                    v-model.trim="form.activityIds"
                     style="width: 100%"
                     maxlength="300"
                     :autosize="{ minRows: 5 }"
+                     placeholder="请输入关联活动方案（多个活动以英文“,”分割）"
                 ></el-input>
             </el-form-item>
 
@@ -32,19 +36,78 @@
 </template>
 
 <script>
+import { validUsername } from '@/utils/validate'
+import { marketActivityAdd, marketActivityUpdate, marketActivityGet } from '../api'
 export default {
+    props: {
+        operationType: {
+            type: String,
+            default: 'create'
+        },
+        marketId: {
+            type: Number || String,
+            default: null
+        }
+    },
     data() {
         return {
             form: {
-                activeId: '00001',
-                activeName: '活动名称',
-                ids: '13132,1445,12345,5643',
+                activeId: null,
+                name: null,
+                activityIds: null,
+            }
+        }
+    },
+    computed: {
+        type() {
+            return this.operationType
+        }
+    },
+    async mounted() {
+        console.log(this.type, this.marketId)
+        if(this.type == 'update' && this.marketId) {
+            try {
+                let res = await marketActivityGet({ id: this.marketId })
+                let result = res.data
+                this.form = {
+                    activeId: result.id,
+                    name: result.name,
+                    activityIds: result.activityIds
+                }
+
+            } catch {
+                //
             }
         }
     },
     methods: {
         submit() {
-            console.log('提交')
+            this.$refs.form.validate(async (valid) => {
+                console.log(valid)
+                if(!valid) return
+                try {
+                    let form = this.form
+                    if(this.type == 'create') {
+                        await marketActivityAdd({
+                            name: form.name,
+                            activityIds: form.activityIds
+                        })
+                        this.$message.success('添加营销活动成功')
+                    } else if(this.type == 'update') {
+                        console.log('join')
+                        await marketActivityUpdate({
+                            id: this.marketId,
+                            name: form.name,
+                            activityIds: form.activityIds
+                        })
+                        this.$message.success('修改营销活动成功')
+                    }
+                    this.$listeners.submited()
+                    this.$listeners.close()
+                } catch {
+                    //
+                }
+            })
         }
     }
 }