ab测试

admin/src/views/ABtest/ABclass/ABclassApi.js

@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// 查询字典类型列表
+export function abTypeList (params) {
+  return request({
+    url: '/abtest/type-dict/page',
+    method: 'get',
+    params
+  })
+}
+
+// 新增字典类型
+export function createABclass (params) {
+  return request({
+    url: '/abtest/type-dict/create',
+    method: 'post',
+    data: params
+  })
+}
+
+// 删除字典类型
+export function removeABclass (params) {
+  return request({
+    url: '/abtest/type-dict/delete',
+    method: 'delete',
+    params
+  })
+}
+
+// 编辑字典类型
+export function editABclass (params) {
+  return request({
+    url: '/abtest/type-dict/update',
+    method: 'put',
+    data:params
+  })
+}

admin/src/views/ABtest/ABclass/list.vue

@@ -1,236 +1,212 @@
 <template>
-    <div>
-        <el-container>
-            <!--搜索-->
-            <el-header class="searchBox">
-                <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
-                    <el-form-item label="名称">
-                        <el-input v-model="searchForm.typeName" name="searchForm.strategyName" placeholder="名称"/>
-                    </el-form-item>
-                    <el-form-item label="状态">
-                        <el-select v-model="searchForm.state" filterable placeholder="请选择">
-                            <el-option label="有效" :value="1"/>
-                            <el-option label="无效" :value="0"/>
-                        </el-select>
-                    </el-form-item>
+  <div class="abClass">
+    <!-- 搜索 -->
+    <el-form inline :model="searchForm" size="small" ref="searchForm">
+      <el-form-item label="名称">
+        <el-input v-model="searchForm.typeName" name="searchForm.strategyName" placeholder="名称" />
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-select v-model="searchForm.state" filterable placeholder="请选择" clearable>
+          <el-option label="有效" :value="1" />
+          <el-option label="无效" :value="0" />
+        </el-select>
+      </el-form-item>
 
-                    <el-form-item style="float: right">
-                        <el-button type="primary" @click="init()">搜索</el-button>
-                        <el-button @click="reset('searchForm')">重置</el-button>
-                    </el-form-item>
-                </el-form>
-            </el-header>
-            <!--表格-->
-            <el-main class="tableBox">
-                <vxe-toolbar>
-                    <template #buttons>
-                        <vxe-button icon="fa fa-plus" @click="toAdd">新增</vxe-button>
-                        <vxe-button @click="init()">刷新</vxe-button>
-                        <!--                        <vxe-button status="primary" style="float: right" icon="fa fa-plus" @click="value5 = true">历史记录</vxe-button>-->
-                    </template>
-                </vxe-toolbar>
-                <vxe-table
-                        border
-                        resizable
-                        keep-source
-                        show-overflow
-                        highlight-hover-row
-                        ref="xTable"
-                        :data="tableData"
-                        :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, }"
-                        @edit-closed="editClosedEvent"
-                >
-                    <vxe-table-column
-                            field="typeName"
-                            title="名称"
-                    />
-                    <vxe-table-column
-                            field="tagName"
-                            title="标识"
-                    />
-                    <vxe-table-column
-                            field="content"
-                            title="描述"
-                            width="300"
-                    />
-                    <vxe-table-column
-                            field="state"
-                            title="状态"
-                            :edit-render="{name: '$select', options: strategyStatus}"
-                            width="80"
-                    />
-                    <vxe-table-column
-                            field="createTime"
-                            title="开始时间"
-                            width="160"
-                    />
-                    <vxe-table-column
-                            field="createTime"
-                            title="结束时间"
-                            width="160"
-                    />
-                    <vxe-table-column title="操作" width="150">
-                        <template #default="{ row }">
-                            <template v-if="$refs.xTable.isActiveByRow(row)">
-                                <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
-                                <vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
-                            </template>
-                            <template v-else>
-                                <vxe-button @click="toAdd(row)">编辑</vxe-button>
-                                <vxe-button @click="del(row)">删除</vxe-button>
-                            </template>
-                        </template>
-                    </vxe-table-column>
-                </vxe-table>
-                <vxe-pager
-                        :loading="loading"
-                        :current-page="searchForm.pageNum"
-                        :page-size="searchForm.pageSize"
-                        :total="searchForm.totalResult"
-                        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
-                        @page-change="handlePageChange"
-                />
-            </el-main>
-        </el-container>
-    </div>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="init()">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="reset()">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 新增 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="infoShow = true">新增</el-button>
+      </el-col>
+    </el-row>
+    <el-table v-loading="loading" :data="tableData">
+      <el-table-column label="名称" prop="typeName" align="center"></el-table-column>
+      <el-table-column label="标识" prop="tagName" align="center"></el-table-column>
+      <el-table-column label="描述" prop="content" align="center"></el-table-column>
+      <el-table-column label="状态" align="center">
+        <template slot-scope="scope">
+          <el-switch :value="scope.row.state" :active-value="1" :inactive-value="0"></el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center">
+        <template slot-scope="scope">
+          <span>{{getTimeStr(scope.row.createTime)}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="editClick(scope.row)">编辑</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="removeInfo(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination  class="mt10" layout="total, sizes, prev, pager, next, jumper" :total="total" :current-page="searchForm.pageNo" :page-size="searchForm.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
+    <!-- 新增类型 -->
+    <el-dialog :title="edit===0?'新建类型':'编辑类型'" :visible.sync="infoShow" append-to-body lock-scroll :close-on-click-modal="false" @close="dialogClose">
+      <el-form :model="infoForm" :rules="rules" style="width:60%" ref="ruleForm" label-width="100px">
+        <el-form-item label="类型名称" prop="typeName">
+          <el-input v-model="infoForm.typeName" />
+        </el-form-item>
+        <el-form-item label="类型标识" prop="tagName">
+          <el-input v-model="infoForm.tagName" />
+        </el-form-item>
+        <el-form-item label="类型描述" prop="content">
+          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="infoForm.content" />
+        </el-form-item>
+        <el-form-item label="状态" prop="state">
+          <el-switch v-model="infoForm.state" active-text="生效" :active-value="1" inactive-text="无效" :inactive-value="0" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="infoShow = false">取 消</el-button>
+        <el-button type="primary" @click="edit===0?createTest():editTest()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-    import {post, get} from '@/api/common'
-
-    export default {
-        name: 'Index',
-        data() {
-            return {
-                //  搜索相关内容
-                searchForm: {
-                    typeName: '',
-                    state: 1,
-                    pageNum: 1,
-                    pageSize: 10,
-                    totalResult: 0
-                },
-                // 表格数据
-                loading: false,
-                tableData: [],
-                strategyStatus: [
-                    {label: '生效', value: 1},
-                    {label: '无效', value: 0}
-                ],
+import { abTypeList, createABclass, removeABclass, editABclass } from './ABclassApi.js'
+export default {
+  name: 'Index',
+  data () {
+    return {
+      edit: 0,  //是否为编辑状态标识
+      //  搜索相关内容
+      searchForm: {
+        typeName: '',
+        state: null,
+        pageNo: 1,
+        pageSize: 10,
+      },
+      total: 0, //数据总条数
+      // 表格数据
+      loading: true,
+      tableData: [],
+      infoShow: false,
+      infoForm: {
+        content: "",
+        state: 1,
+        tagName: "",
+        typeName: ""
+      },
+      rules: {
+        typeName: [{ required: true, message: "请填写类型名称", trigger: "blur" }],
+        tagName: [{ required: true, message: "请填写类型标识", trigger: "blur" }],
+        content: [{ required: true, message: "请填写类型描述", trigger: "blur" }],
+      },
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+    // 时间格式转换
+    getTimeStr (timeStamp) {
+      var now = new Date(timeStamp),
+        y = now.getFullYear(),
+        m = ("0" + (now.getMonth() + 1)).slice(-2),
+        d = ("0" + now.getDate()).slice(-2);
+      return y + "-" + m + "-" + d + " " + now.toTimeString().substr(0, 8);
+    },
+    // 获取列表
+    init () {
+      this.loading = true
+      abTypeList(this.searchForm).then(res => {
+        console.log(res)
+        this.tableData = res.data.list;
+        this.total = res.data.total;
+        this.loading = false
+      })
+    },
+    // 重置
+    reset () {
+      this.searchForm = {
+        name: null,
+        state: null,
+        pageNo: 1,
+        pageSize: 10,
+      },
+        this.init();
+    },
+    // 编辑数据
+    editClick (item) {
+      this.infoForm = { ...item };
+      this.edit = 1
+      this.infoShow = true
+    },
+    // 编辑保存
+    editTest () {
+      this.$confirm("此操作将修改该数据, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        editABclass(this.infoForm).then(res => {
+          this.infoShow = false
+          this.$message.success('操作成功!')
+          this.init()
+        })
+      })
 
-                schemelog: [],
-                schemelogList: [],
-                filterName1: '',
-                schemelogParam: {
-                    pageNum: 1,
-                    pageSize: 10,
-                    totalResult: 0
-                },
-            }
-        },
-        mounted() {
+    },
+    // 删除数据
+    removeInfo (id) {
+      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        removeABclass({ id: id }).then(res => {
+          this.$message.success('删除成功!')
+          this.init()
+        })
+      })
+    },
+    // 创建字典类型
+    createTest () {
+      this.$refs['ruleForm'].validate((valid) => {
+        if (valid) {
+          createABclass(this.infoForm).then(res => {
+            this.$message.success('创建成功!')
+            this.infoShow = false
             this.init()
-        },
-        methods: {
-            init() {
-                get('/abtest/typedict/list', this.searchForm).then(res => {
-                    this.tableData = res.data.list
-                    console.log(this.tableData)
-                    this.searchForm.totalResult = res.data.total
-                })
-            },
-            editClosedEvent({row, column}) {
-                const $table = this.$refs.xTable
-                const field = column.property
-                const cellValue = row[field]
-                // 判断单元格值是否被修改
-                if ($table.isUpdateByRow(row, field)) {
-                    setTimeout(() => {
-                        let param = {}
-                        param[field] = cellValue
-                        post('/abtest/typedict/update/' + row.id, row).then(res => {
-                            this.$message({
-                                message: res.message,
-                                type: 'success'
-                            });
-                        })
-                        // 局部更新单元格为已保存状态
-                        $table.reloadRow(row, null, field)
-                    }, 300)
-                }
-            },
-            reset(formName) { // 重置
-                this.searchForm = {
-                    typeName: '',
-                    state: 1,
-                    pageNum: 1,
-                    pageSize: 10,
-                    totalResult: 0
-                },
-                this.init()
-            },
-            toAdd(e) {
-                const routeUrl = this.$router.resolve({path: '/ABtest/ABclass/edit', query: {id: e.id}})
-                window.open(routeUrl.href, '_blank')
-            },
-            toCopy(e) {
-                const routeUrl = this.$router.resolve({path: '/ABtest/ABclass/edit', query: {copyId: e.id}})
-                window.open(routeUrl.href, '_blank')
-            },
-            del(row) {
-                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    type: 'warning'
-                }).then(() => {
-                    const $table = this.$refs.xTable
-                    $table.remove(row)
-                    post('/abtest/typedict/delete', {'ids': [row.id]}).then(res => {
-                    })
-                }).catch(() => {
-                    this.$message({
-                        type: 'info',
-                        message: '已取消删除'
-                    });
-                });
-            },
-            handlePageChange({currentPage, pageSize}) {
-                this.searchForm.pageNum = currentPage
-                this.searchForm.pageSize = pageSize
-                this.init()
-            }
+          })
         }
+      });
+    },
+
+    // 列表选择每页数量
+    handleSizeChange (val) {
+      this.searchForm.pageNo = 1
+      this.searchForm.pageSize = val
+      this.init();
+    },
+    // 列表选择当前页
+    handleCurrentChange (val) {
+      this.searchForm.pageNo = val
+      this.init();
+    },
+    // 清除弹窗值
+    dialogClose () {
+      this.edit = 0
+      this.infoForm = {
+        content: "",
+        state: 0,
+        tagName: "",
+        typeName: ""
+      }
     }
+  }
+}
 </script>
 
 <style lang="scss">
-    .searchBox {
-        background-color: #fff;
-        border-radius: 4px;
-        box-shadow: #bfbfbf 0 0 2px;
-        height: unset !important;
-        padding: 10px 10px;
-
-        form {
-            margin: auto;
-
-            .el-form-item {
-                margin: 5px 5px;
-            }
-        }
-    }
-
-    .tableBox {
-        margin-top: 10px;
-        background-color: #fff;
-        border-radius: 4px;
-        box-shadow: #bfbfbf 0 0 2px;
-
-        .block {
-            .el-pagination {
-                margin-top: 30px;
-                float: right;
-            }
-        }
-    }
+.abClass {
+  padding: 20px;
+}
 </style>

admin/src/views/ABtest/ABtestApi.js

@@ -9,6 +9,15 @@ export function abtestList (params) {
   })
 }
 
+// 新增abtest数据
+export function createAbtest (params) {
+  return request({
+    url: '/abtest/test-info/create',
+    method: 'post',
+    data:params
+  })
+}
+
 // 删除abtest数据
 export function removeAbtest (params) {
   return request({
@@ -18,6 +27,15 @@ export function removeAbtest (params) {
   })
 }
 
+// 修改abtest数据
+export function editAbtest (params) {
+  return request({
+    url: '/abtest/test-info/update',
+    method: 'put',
+    data:params
+  })
+}
+
 
 // 获取二级渠道
 export function secondChannel (params) {
@@ -35,4 +53,14 @@ export function typeListApi (params) {
     method: 'get',
     params
   })
-}
+}
+
+
+// ab测试  测试数据
+export function testData (params) {
+  return request({
+    url: '/abtest/test-info/orderdata',
+    method: 'get',
+    params
+  })
+}

admin/src/views/ABtest/index.vue

@@ -17,7 +17,7 @@
     </el-form>
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="toAdd">新增</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="infoShow = true">新增</el-button>
       </el-col>
     </el-row>
     <el-table v-loading="loading" :data="tableData">
@@ -40,15 +40,15 @@
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit">编辑</el-button>
-          <el-button size="mini" type="text" icon="el-icon-set-up">复制</el-button>
+          <el-button v-if="returnTime(scope.row.beginTime)===0" size="mini" type="text" icon="el-icon-edit" @click="editClick(scope.row)">编辑</el-button>
+          <el-button size="mini" type="text" icon="el-icon-set-up" @click="copy(scope.row)">复制</el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="removeInfo(scope.row.id)">删除</el-button>
         </template>
       </el-table-column>
-      <pagination v-show="total>0" background layout="total, sizes, prev, pager, next, jumper" :total="total" :current-page="searchForm.pageNo" :page-size="searchForm.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
     </el-table>
+    <el-pagination class="mt10" v-show="total>0" background layout="total, sizes, prev, pager, next, jumper" :total="total" :current-page="searchForm.pageNo" :page-size="searchForm.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
     <!-- 新增编辑弹窗 -->
-    <el-dialog title="新建测试" :visible.sync="infoShow" append-to-body>
+    <el-dialog @close="dialogClose" class="dialog" :title="editNum ===0?'新建测试':'编辑测试'" :visible.sync="infoShow" append-to-body lock-scroll :close-on-click-modal="false">
       <el-form :model="infoForm" :rules="rules" style="width:60%" ref="ruleForm" label-width="100px">
         <el-form-item label="测试名称" prop="name">
           <el-input v-model="infoForm.name" />
@@ -56,12 +56,20 @@
         <el-form-item label="测试描述" prop="content">
           <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="infoForm.content" />
         </el-form-item>
-        <el-form-item label="生效时间" prop="timeBox">
-          <el-date-picker v-model="channelDateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
-          </el-date-picker>
+        <el-form-item label="生效时间" required>
+          <el-col :span="11">
+            <el-form-item prop="beginTime">
+              <el-date-picker type="datetime" placeholder="开始日期" v-model="infoForm.beginTime" style="width:100%"></el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="11">
+            <el-form-item prop="endTime">
+              <el-date-picker type="datetime" placeholder="结束日期" v-model="infoForm.endTime" style="width:100%"></el-date-picker>
+            </el-form-item>
+          </el-col>
         </el-form-item>
         <el-form-item label="渠道选择" prop="channelKey">
-          <el-select v-model="channelVal" multiple clearable filterable placeholder="请选择">
+          <el-select v-model="channelVal" multiple clearable filterable placeholder="请选择" @change="channelChange">
             <el-option v-for="item in channelList" :key="item.channelKey" :label="item.channelName" :value="item.channelKey">
             </el-option>
           </el-select>
@@ -81,13 +89,13 @@
         <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
           <el-tab-pane v-for="(item, index) in infoForm.groupData" :key="item.groupName" :label="item.groupName" :name="item.groupName">
             <div>
-              <el-form-item label="组别名称" prop="name">
+              <el-form-item label="组别名称">
                 <el-input v-model="item.name" />
               </el-form-item>
-              <el-form-item label="组别描述" prop="content">
+              <el-form-item label="组别描述">
                 <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="item.content" />
               </el-form-item>
-              <el-form-item label="分流占比" prop="flowPercent">
+              <el-form-item label="分流占比">
                 <el-input v-model="item.flowPercent" placeholder="请输入小数" />
                 <div style="color: red">请输入小数如0.5，各组占比之和为1</div>
               </el-form-item>
@@ -97,14 +105,14 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="infoShow = false">取 消</el-button>
-        <el-button type="primary" @click="createTest">确 定</el-button>
+        <el-button type="primary" @click="editNum===0?createTest():editTest()">确 定</el-button>
       </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { secondChannel, abtestList, removeAbtest, typeListApi } from './ABtestApi'
+import { secondChannel, abtestList, removeAbtest, typeListApi, createAbtest, editAbtest } from './ABtestApi'
 export default {
   name: "abtestIndex",
   data () {
@@ -120,7 +128,7 @@ export default {
       loading: true,
       tableData: [],
       total: 0,
-      infoShow: true,
+      infoShow: false,
       infoForm: {
         name: "",
         content: "",
@@ -132,43 +140,43 @@ export default {
         groupData: [
           {
             "content": "",
-            "flowPercent": null,
+            "flowPercent": 0,
             "groupName": "对照组",
             "name": "对照组",
             "state": 1,
-            "strategyId": null,
+            "strategyId": 0,
             "type": 0
           },
           {
             "content": "",
-            "flowPercent": null,
+            "flowPercent": 0,
             "groupName": "控制组1",
             "name": "控制组1",
             "state": 1,
-            "strategyId": null,
+            "strategyId": 0,
             "type": 1
           }
         ]
       },
-      channelDateTime: [], //新增编辑选择时间
       channelList: [],   //渠道列表
-      channelVal: null,  //渠道key
+      channelVal: [],  //渠道key
       typeList: [],  // 类型列表
       // 表单规则
       rules: {
         name: [{ required: true, message: "请填写名称", trigger: "blur" }],
         content: [{ required: true, message: "请填写描述", trigger: "blur" }],
-        timeBox: [{ type: 'date', required: true, message: '请选择生效时间', trigger: 'change' }],
-        channelKey: [{ required: true, message: "请绑定渠道", trigger: "change" }],
-        typeDictId: [{ required: true, message: "请选择测试类型", trigger: "change" }],
-        state: [{ required: true, message: "请选择状态", trigger: "change" }],
-        flowPercent: [{ required: true, message: "请输入占比", trigger: "blur" }],
+        beginTime: [{ type: 'date', required: true, message: '请选择开始时间', trigger: 'change' }],
+        endTime: [{ type: 'date', required: true, message: '请选择结束日期', trigger: 'change' }],
+        channelKey: [{ required: true, message: "请绑定渠道", trigger: 'change' }],
+        typeDictId: [{ required: true, message: "请选择测试类型", trigger: 'change' }],
       },
       // 标签页
       editableTabsValue: "对照组",
       tabIndex: 1,
       thisIndex: 0,
       isEdit: true,
+      // 修改新增/编辑标识
+      editNum: 0
     };
   },
   mounted () {
@@ -177,6 +185,12 @@ export default {
     this.getTypeList()    //获取类型选择
   },
   methods: {
+
+    channelChange (e) {
+      if (e) {
+        this.infoForm.channelKey = this.channelVal.join(',')
+      }
+    },
     // 时间格式转换
     getTimeStr (timeStamp) {
       var now = new Date(timeStamp),
@@ -185,6 +199,16 @@ export default {
         d = ("0" + now.getDate()).slice(-2);
       return y + "-" + m + "-" + d + " " + now.toTimeString().substr(0, 8);
     },
+    // 判定当前时间是否大于测试开始时间  大于等于返回1  小于返回0
+    returnTime (date) {
+      let nowTime = new Date().getTime();
+      let dateTime = new Date(date).getTime();
+      if (nowTime >= dateTime) {
+        return 1
+      } else {
+        return 0
+      }
+    },
     // 获取列表
     init () {
       this.loading = true
@@ -204,22 +228,6 @@ export default {
       },
         this.init();
     },
-    // 新增数据
-    toAdd () {
-      this.infoShow = true
-    },
-    // 删除数据
-    removeInfo (id) {
-      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      }).then(() => {
-        removeAbtest({ ids: id }).then(res => {
-          this.init()
-        })
-      })
-    },
     // 列表选择每页数量
     handleSizeChange (val) {
       this.searchForm.pageNo = 1
@@ -287,20 +295,109 @@ export default {
     },
     // 新建abtest
     createTest () {
+      console.log(this.infoForm)
       this.$refs['ruleForm'].validate((valid) => {
         if (valid) {
-          alert(123)
+          createAbtest(this.infoForm).then(res => {
+            this.$message.success('新增成功!')
+            this.infoShow = false
+            this.init()
+          })
         }
       });
+    },
+    // 删除数据
+    removeInfo (id) {
+      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        removeAbtest({ ids: id }).then(res => {
+          this.init()
+        })
+      })
+    },
+    // 编辑数据
+    editClick (item) {
+      this.channelVal = item.channelKey.split(',')
+      this.editNum = 1
+      this.infoShow = true
+      let { beginTime, channelKey, content, endTime, groupData, id, name, state, typeDictId } = item
+      this.infoForm = { beginTime, channelKey, content, endTime, groupData, id, name, state, typeDictId }
+    },
+    editTest () {
+      this.$confirm("此操作将修改该数据, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.infoForm.beginTime = new Date(this.infoForm.beginTime).getTime()
+        this.infoForm.endTime = new Date(this.infoForm.endTime).getTime()
+        editAbtest(this.infoForm).then(res => {
+          this.$message.success('修改成功!')
+          this.infoShow = false
+          this.init()
+        })
+      })
+    },
+    //复制数据
+    copy (item) {
+      this.channelVal = item.channelKey.split(',')
+      this.infoShow = true
+      let { beginTime, channelKey, content, endTime, groupData, name, state, typeDictId } = item
+      name = name + '副本'
+      this.infoForm = { beginTime, channelKey, content, endTime, groupData, name, state, typeDictId }
+
+    },
+    // 弹窗关闭清空值
+    dialogClose () {
+      this.channelVal = [];
+      this.editNum = 0
+      this.infoForm = {
+        name: "",
+        content: "",
+        beginTime: "",
+        endTime: "",
+        channelKey: "",
+        typeDictId: "",
+        state: 0,
+        groupData: [
+          {
+            "content": "",
+            "flowPercent": 0,
+            "groupName": "对照组",
+            "name": "对照组",
+            "state": 1,
+            "strategyId": 0,
+            "type": 0
+          },
+          {
+            "content": "",
+            "flowPercent": 0,
+            "groupName": "控制组1",
+            "name": "控制组1",
+            "state": 1,
+            "strategyId": 0,
+            "type": 1
+          }
+        ]
+      }
     }
   },
 };
 </script>
-
+<style scoped>
+.dialog /deep/ .el-dialog {
+  height: 85vh;
+  overflow: auto;
+}
+</style>
 <style lang="scss">
 .abtestIndex {
   padding: 20px;
   box-sizing: border-box;
+
   // .searchBox {
   //   background-color: #fff;
   //   border-radius: 4px;

admin/src/views/ABtest/testData.vue

@@ -1,172 +1,83 @@
 <template>
-  <div>
-    <el-container>
-      <!--搜索-->
-      <el-header class="searchBox">
-        <el-form
-          :inline="true"
-          :model="searchForm"
-          ref="searchForm"
-          class="demo-form-inline"
-        >
-          <el-form-item label="测试名称">
-            <el-input
-              v-model="searchForm.name"
-              name="searchForm.name"
-              placeholder="请输入关键字"
-            />
-          </el-form-item>
-
-          <el-form-item style="float: right">
-            <el-button type="primary" @click="init">搜索</el-button>
-            <el-button @click="reset">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </el-header>
-      <!--表格-->
-      <el-main class="tableBox">
-        <vxe-toolbar>
-          <template #buttons>
-            <vxe-button @click="init()">刷新</vxe-button>
-          </template>
-        </vxe-toolbar>
-        <vxe-table
-          border
-          resizable
-          keep-source
-          show-overflow
-          highlight-hover-row
-          stripe
-          ref="xTable"
-          :data="tableData"
-          :span-method="mergeRowMethod"
-        >
-          <vxe-table-column field="infoName" title="测试名称" width="180" />
-          <vxe-table-column field="orderInfo" title="测试订购" width="100" />
-          <vxe-table-column field="name" title="分组名称" width="180" />
-          <vxe-table-column field="content" title="分组描述" />
-          <vxe-table-column field="flowPercent" title="分流比例" width="100" />
-          <vxe-table-column field="orderGroup" title="分组订购" width="100" />
-        </vxe-table>
-        <vxe-pager
-          :loading="loading"
-          :current-page="searchForm.pageNum"
-          :page-size="searchForm.pageSize"
-          :total="searchForm.totalResult"
-          :layouts="[
-            'PrevPage',
-            'JumpNumber',
-            'NextPage',
-            'FullJump',
-            'Sizes',
-            'Total',
-          ]"
-          @page-change="handlePageChange"
-        />
-      </el-main>
-    </el-container>
+  <div class="testData">
+    <el-form :inline="true" size="small" :model="searchForm" ref="searchForm" class="demo-form-inline">
+      <el-form-item label="测试名称">
+        <el-input v-model="searchForm.name" name="searchForm.name" placeholder="请输入测试名称" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="init">搜索</el-button>
+        <el-button @click="reset">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="tableData">
+      <el-table-column label="测试名称" prop="infoName" align="center"></el-table-column>
+      <el-table-column label="测试订购" prop="orderInfo" align="center"></el-table-column>
+      <el-table-column label="分组名称" prop="name" align="center"></el-table-column>
+      <el-table-column label="分组描述" prop="content" align="center"></el-table-column>
+      <el-table-column label="分流比例" prop="flowPercent" align="center"></el-table-column>
+      <el-table-column label="分组订购" prop="orderGroup" align="center"></el-table-column>
+    </el-table>
+    <el-pagination class="mt10" v-show="total>0" background layout="total, sizes, prev, pager, next, jumper" :total="total" :current-page="searchForm.pageNo" :page-size="searchForm.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
   </div>
 </template>
 
 <script>
-import { post, get } from "@/api/common";
-
+import { testData } from './ABtestApi'
 export default {
-  name: "Index",
-  data() {
+  name: "testData",
+  data () {
     return {
       //  搜索相关内容
       searchForm: {
         name: "",
-        // id: '1463041030558453760',
-        pageNum: 1,
+        pageNo: 1,
         pageSize: 10,
-        totalResult: 0,
       },
+      total: 0,
       // 表格数据
-      loading: false,
+      loading: true,
       tableData: [],
     };
   },
-  mounted() {
+  mounted () {
     this.init();
   },
   methods: {
-    init() {
-      get("/abtest/info/orderdata", this.searchForm).then((res) => {
-        this.tableData = res.data.list;
+    init () {
+      this.loading = true
+      testData(this.searchForm).then((res) => {
+        console.log(res)
+        this.loading = false
+        this.tableData = res.data;
         this.searchForm.totalResult = res.data.total;
       });
     },
     // 重置
-    reset() {
+    reset () {
       this.searchForm = {
         name: "",
-        state: 1,
-        pageNum: 1,
+        pageNo: 1,
         pageSize: 10,
-        totalResult: 0,
       };
       this.init();
     },
-    // 翻页
-    handlePageChange({ currentPage, pageSize }) {
-      this.searchForm.pageNum = currentPage;
-      this.searchForm.pageSize = pageSize;
+    // 列表选择每页数量
+    handleSizeChange (val) {
+      this.searchForm.pageNo = 1
+      this.searchForm.pageSize = val
       this.init();
     },
-    // 合并函数
-    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
-      const fields = ["infoName", "orderInfo"];
-      const cellValue = row[column.property];
-      if (cellValue && fields.includes(column.property)) {
-        const prevRow = visibleData[_rowIndex - 1];
-        let nextRow = visibleData[_rowIndex + 1];
-        if (prevRow && prevRow[column.property] === cellValue) {
-          return { rowspan: 0, colspan: 0 };
-        } else {
-          let countRowspan = 1;
-          while (nextRow && nextRow[column.property] === cellValue) {
-            nextRow = visibleData[++countRowspan + _rowIndex];
-          }
-          if (countRowspan > 1) {
-            return { rowspan: countRowspan, colspan: 1 };
-          }
-        }
-      }
+    // 列表选择当前页
+    handleCurrentChange (val) {
+      this.searchForm.pageNo = val
+      this.init();
     },
-  },
-};
-</script>
-
-<style lang="scss">
-.searchBox {
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow: #bfbfbf 0 0 2px;
-  height: unset !important;
-  padding: 10px 10px;
-
-  form {
-    margin: auto;
-
-    .el-form-item {
-      margin: 5px 5px;
-    }
   }
 }
+</script>
 
-.tableBox {
-  margin-top: 10px;
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow: #bfbfbf 0 0 2px;
-
-  .block {
-    .el-pagination {
-      margin-top: 30px;
-      float: right;
-    }
-  }
+<style lang="scss">
+.testData {
+  padding: 20px;
 }
 </style>