抽奖活动修复完毕 等待接口

1

src/views/luckyDraw/trophyCreate.vue

@@ -1,215 +1,293 @@
 <!--  -->
 <template>
-    <div>
-        <el-form :model="form"
-                :rules="rules"
-                ref="ruleForm">
-            <p style="color: red; padding: 0 0 10px 100px;">注意：活动所有奖品的中奖概率之和必须等于100%; <br />活动奖品必须选择一个默认奖品，该奖品建议设置为谢谢参与;</p>
-            <el-form-item label="所属活动" prop="groupId" label-width="100PX">
-                <el-select v-model.trim="form.groupId"
-                        style="width: 100% !important"
-                        placeholder="请选择所属活动">
-                    <el-option v-for="item in groupList" :key="item.id" :value="item.id" :label="item.name"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-row :gutter="10" v-for="(reword, index) in form.rewordList" :key="index">
-                <el-col :span="10">
-                    <el-form-item :label="`奖品${index + 1}`"
-                            label-width="100PX"
-                            :prop="'rewordList.' + index + '.name'"
-                            :rules="[{required: true, message:'请输入活动名称', trigger: 'blur'}]">
-                        <el-input v-model.trim="reword.name"
-                                autocomplete="off"
-                                placeholder="请输入奖品名称"></el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="5">
-                    <el-form-item :prop="'rewordList.' + index + '.chances'"
-                            :rules="[{required: true, validator: validNumber, trigger: 'blur'}]">
-                        <el-input v-model.trim="reword.chances"
-                                type="number"
-                                autocomplete="off"
-                                placeholder="请输入中奖概率">
-                            <i slot="suffix" class="el-input__icon" style="padding-right: 5px;">%</i>
-                        </el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="4">
-                    <el-form-item :prop="'rewordList.' + index + '.stock'"
-                            :rules="[{required: true, validator: validNumber1, trigger: 'blur'}]">
-                        <el-input v-model.trim="reword.stock"
-                                type="number"
-                                autocomplete="off"
-                                placeholder="请输入库存">
-                        </el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="5">
-                    <el-form-item :prop="'rewordList.' + index + '.isDefault'"
-                            :rules="[{required: true, message:'请输入选择是否默认', trigger: 'blur'}]">
-                        <el-select v-model.trim="reword.isDefault"
-                                style="width: 100% !important"
-                                placeholder="请选择是否默认">
-                            <el-option :value="true" label="是"></el-option>
-                            <el-option :value="false" label="否"></el-option>
-                        </el-select>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-            <div style="text-align: center">
-                <el-button :disabled="form.rewordList.length <= 1" class="add-reword" round icon="el-icon-minus" @click="onRemoveReword">删除奖品</el-button>
-                <el-button class="add-reword" round icon="el-icon-plus" @click="onAddReword">添加奖品</el-button>
-            </div>
-            <el-form-item label="备注" label-width="100PX"
-                        prop="memo">
-                <el-input type="textarea" :rows="2" v-model.trim="form.memo"
-                        autocomplete="off"
-                        placeholder="请输入备注"></el-input>
-            </el-form-item>
-        </el-form>
-        <div class="dialog-footer">
-            <el-button @click="onClose('ruleForm')">取 消</el-button>
-            <el-button type="primary" @click="onSubmit('ruleForm')">确 定</el-button>
-        </div>
+  <div>
+    <el-form :model="form" :rules="rules" ref="ruleForm">
+      <p style="color: red; padding: 0 0 10px 100px">
+        注意：活动所有奖品的中奖概率之和必须等于100%;
+        <br />活动奖品必须选择一个默认奖品，该奖品建议设置为谢谢参与;
+      </p>
+      <el-form-item label="所属活动" prop="groupId" label-width="100PX">
+        <el-select
+          v-model.trim="form.groupId"
+          style="width: 100% !important"
+          placeholder="请选择所属活动"
+          :disabled="true"
+        >
+          <el-option
+            v-for="item in groupList"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-row
+        :gutter="10"
+        v-for="(reword, index) in form.rewordList"
+        :key="index"
+      >
+        <el-col :span="10">
+          <el-form-item
+            :label="`奖品${index + 1}`"
+            label-width="100PX"
+            :prop="'rewordList.' + index + '.name'"
+            :rules="[
+              { required: true, message: '请输入活动名称', trigger: 'blur' },
+            ]"
+          >
+            <el-input
+              v-model.trim="reword.name"
+              autocomplete="off"
+              placeholder="请输入奖品名称"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="5">
+          <el-form-item
+            :prop="'rewordList.' + index + '.chances'"
+            :rules="[
+              { required: true, validator: validNumber, trigger: 'blur' },
+            ]"
+          >
+            <el-input
+              v-model.trim="reword.chances"
+              type="number"
+              autocomplete="off"
+              placeholder="请输入中奖概率"
+            >
+              <i slot="suffix" class="el-input__icon" style="padding-right: 5px"
+                >%</i
+              >
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item
+            :prop="'rewordList.' + index + '.stock'"
+            :rules="[
+              { required: true, validator: validNumber1, trigger: 'blur' },
+            ]"
+          >
+            <el-input
+              v-model.trim="reword.stock"
+              type="number"
+              autocomplete="off"
+              placeholder="请输入库存"
+            >
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="5">
+          <el-form-item
+            :prop="'rewordList.' + index + '.isDefault'"
+            :rules="[
+              {
+                required: true,
+                message: '请输入选择是否默认',
+                trigger: 'blur',
+              },
+            ]"
+          >
+            <el-select
+              v-model.trim="reword.isDefault"
+              style="width: 100% !important"
+              placeholder="请选择是否默认"
+            >
+              <el-option :value="true" label="是"></el-option>
+              <el-option :value="false" label="否"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-form-item
+          label="备注"
+          label-width="100PX"
+          :prop="'rewordList.' + index + '.memo'"
+        >
+          <el-input
+            type="textarea"
+            :rows="2"
+            v-model.trim="reword.memo"
+            autocomplete="off"
+            placeholder="请输入备注"
+          ></el-input>
+        </el-form-item>
+      </el-row>
+      <div style="text-align: center">
+        <el-button
+          :disabled="form.rewordList.length <= 1"
+          class="add-reword"
+          round
+          icon="el-icon-minus"
+          @click="onRemoveReword"
+          >删除奖品</el-button
+        >
+        <el-button
+          class="add-reword"
+          round
+          icon="el-icon-plus"
+          @click="onAddReword"
+          >添加奖品</el-button
+        >
+      </div>
+    </el-form>
+    <div class="dialog-footer">
+      <el-button @click="onClose('ruleForm')">取 消</el-button>
+      <el-button type="primary" @click="onSubmit('ruleForm')">确 定</el-button>
     </div>
+  </div>
 </template>
 
 <script>
-import Tooltip from '@/components/Tooltip/index'
+import Tooltip from "@/components/Tooltip/index";
 import pagination from "@/components/Pagination/index";
-import dayjs from 'dayjs';
-import numeral from 'numeral';
-import cleanDeep from 'clean-deep';
-import { luckDrawPrizeBatchAdd } from './api'
+import dayjs from "dayjs";
+import numeral from "numeral";
+import cleanDeep from "clean-deep";
+import { luckDrawPrizeBatchAdd } from "./api";
 const validNumber1 = (rule, value, callback) => {
-    const re = /^[0-9]+$/
-    if (value == '' && typeof value == 'string' || value == null) {
-        callback(new Error('请输入库存'))
-    } else if (!re.test(value) && value < 0) {
-        callback(new Error('输入库存为正整数'))
-    } else {
-        callback()
-    }
-}
+  const re = /^[0-9]+$/;
+  if ((value == "" && typeof value == "string") || value == null) {
+    callback(new Error("请输入库存"));
+  } else if (!re.test(value) && value < 0) {
+    callback(new Error("输入库存为正整数"));
+  } else {
+    callback();
+  }
+};
 const validNumber = (rule, value, callback) => {
-    if (value == '' && typeof value == 'string' || value == null) {
-        callback(new Error('请输入中奖概率'))
-    } else if (value < 0) {
-        callback(new Error('输入值不能小于0'))
-    } else {
-        callback()
-    }
-}
+  if ((value == "" && typeof value == "string") || value == null) {
+    callback(new Error("请输入中奖概率"));
+  } else if (value < 0) {
+    callback(new Error("输入值不能小于0"));
+  } else {
+    callback();
+  }
+};
 export default {
-    components: { pagination, Tooltip, },
-    props: ['groupList', 'close', 'getList'],
-    data () {
-        return {
-            validNumber1: validNumber1,
-            validNumber: validNumber,
-            form: {
-                groupId: null,
-                rewordList: [{
-                    name: null,
-                    chances: null,
-                    stock: null,
-                    isDefault: null
-                }],
-                memo: null
-            },
-            rules: {
-                groupId: [{required: true, message:'请选择所属活动', trigger: 'change'}]
-            },
-            pageInfo: {
-                // 分页规则
-                limit: 10, // 限制显示条数
-                page: 1, // 当前页
-                total: 1, // 总条数
-                page_size: [10, 20, 40, 50] // 选择限制显示条数
-            }
-        };
+  components: { pagination, Tooltip },
+  props: ["groupList", "close", "getList", "list"],
+  data() {
+    return {
+      validNumber1: validNumber1,
+      validNumber: validNumber,
+      form: {
+        groupId:Number(this.$route.query.groupId),
+        rewordList: [
+          {
+            name: null,
+            chances: null,
+            stock: null,
+            isDefault: null,
+            memo: null,
+          },
+        ],
+      },
+      rules: {
+        groupId: [
+          { required: true, message: "请选择所属活动", trigger: "change" },
+        ],
+      },
+      pageInfo: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 1, // 总条数
+        page_size: [10, 20, 40, 50], // 选择限制显示条数
+      },
+    };
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    if (this.list && Array.isArray(this.list)) {
+      let arr = this.list.map((item) => {
+        return { ...item, chances: item.chances * 100 };
+      });
+      console.log(arr)
+      this.$set(this.form, "rewordList", arr);
+    }
+  },
+  methods: {
+    onRemoveReword() {
+      // 删除奖品
+      let form = this.form;
+      if (form.rewordList.length <= 1) {
+        return;
+      }
+      this.form.rewordList.pop();
     },
-    //生命周期 - 挂载完成（可以访问DOM元素）
-    mounted () {
+    onAddReword() {
+      // 添加奖品
+      let form = this.form;
+      form.rewordList.push({
+        name: null,
+        chances: null,
+        stock: null,
+        isDefault: null,
+      });
     },
-    methods: {
-        onRemoveReword() { // 删除奖品
-            let form = this.form
-            if(form.rewordList.length <= 1) {
-                return
-            }
-            this.form.rewordList.pop()
-        },
-        onAddReword() { // 添加奖品
-            let form = this.form
-            form.rewordList.push({
-                name: null,
-                chances: null,
-                stock: null,
-                isDefault: null
-            })
-        },
-        onSubmit(formName) {
-            this.$refs[formName].validate(item => {
-                if(item) {
-                    let form = Object.assign({}, this.form)
-                    const rewordList = form.rewordList ? form.rewordList : []
-                    let params = []
-                    let chanceCount = 0
-                    rewordList.forEach(item => {
-                        chanceCount += Number(item.chances)
-                        params.push({
-                            name: item.name,
-                            groupId: form.groupId,
-                            chances: numeral(item.chances ? item.chances / 100 : 0).format('0.00'),
-                            stock: item.stock,
-                            isDefault: item.isDefault,
-                            memo: form.memo,
-                            enabled: 1
-                        })
-                    })
-                    if(chanceCount != 100) {
-                        this.$message.error('所有奖品的概率之和必须等于100%')
-                        return
-                    }
-                    luckDrawPrizeBatchAdd(params).then(res => {
-                        this.messageTips('添加', res, formName)
-                    })
-                }
-            })
-        },
-        messageTips (title, res, formName) {
-            if (res.code == 200) {
-                this.$message.success(title + '成功')
-                this.onClose(formName)
-                this.getList()
-            } else {
-                this.$message.error(res.msg)
-            }
-        },
-        onClose(formName) {
-            this.$refs[formName].resetFields()
-            this.close()
+    onSubmit(formName) {
+      this.$refs[formName].validate((item) => {
+        if (item) {
+          let form = Object.assign({}, this.form);
+          const rewordList = form.rewordList ? form.rewordList : [];
+          let params = [];
+          let chanceCount = 0;
+          rewordList.forEach((item) => {
+            chanceCount += Number(item.chances);
+            params.push({
+              name: item.name,
+              groupId: form.groupId,
+              chances: numeral(item.chances ? item.chances / 100 : 0).format(
+                "0.00"
+              ),
+              stock: item.stock,
+              isDefault: item.isDefault,
+              memo: form.memo,
+              enabled: 1,
+            });
+          });
+          if (chanceCount != 100) {
+            this.$message.error("所有奖品的概率之和必须等于100%");
+            return;
+          }
+          luckDrawPrizeBatchAdd(params).then((res) => {
+            this.messageTips("添加", res, formName);
+          });
         }
-    }
+      });
+    },
+    messageTips(title, res, formName) {
+      if (res.code == 200) {
+        this.$message.success(title + "成功");
+        this.onClose(formName);
+        this.getList();
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+    onClose(formName) {
+      this.$refs[formName].resetFields();
+      this.close();
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
 .dialog-footer {
-    width: 100%;
-    text-align: right;
+  width: 100%;
+  text-align: right;
 }
 
 .reword-list {
-    display: flex;
-    .el-form-item {
-        flex: 1;
-    }
+  display: flex;
+  .el-form-item {
+    flex: 1;
+  }
 }
 
 .add-reword {
-    margin-bottom: 22px;
-    width: 180px;
-    border-style: dashed;
+  margin-bottom: 22px;
+  width: 180px;
+  border-style: dashed;
 }
-</style>
+</style>

src/views/luckyDraw/trophyManager.vue

@@ -10,7 +10,7 @@
       v-permission="'luckDrawPrize/batchAdd'"
       @click="onOperationTrophy('create')"
     >
-      添加
+      {{tableList.length>0?'修改':'添加'}}
     </div>
     <!-- 搜索标题 -->
     <save-form
@@ -26,7 +26,7 @@
           placeholder="请输入奖品名称"
         ></el-input>
       </el-form-item>
-      <el-form-item>
+      <!-- <el-form-item>
         <el-select
           v-model.trim="searchForm.groupId"
           style="width: 100% !important"
@@ -39,7 +39,7 @@
             :label="item.name"
           ></el-option>
         </el-select>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item>
         <el-button native-type="submit" type="danger">搜索</el-button>
       </el-form-item>
@@ -68,11 +68,11 @@
           prop="stock"
           label="库存"
         ></el-table-column>
-        <el-table-column align="center" prop="enabled" label="是否启用">
+        <!-- <el-table-column align="center" prop="enabled" label="是否启用">
           <template slot-scope="scope">
             {{ scope.row.enabled ? "启用" : "不启用" }}
           </template>
-        </el-table-column>
+        </el-table-column> -->
         <el-table-column align="center" prop="isDefault" label="是否默认">
           <template slot-scope="scope">
             {{ scope.row.isDefault ? "是" : "否" }}
@@ -84,7 +84,7 @@
           </template>
         </el-table-column>
 
-        <el-table-column align="center" label="操作">
+        <!-- <el-table-column align="center" label="操作">
           <template slot-scope="scope">
             <el-button
               @click="onOperationTrophy('update', scope.row)"
@@ -93,16 +93,16 @@
               >修改</el-button
             >
           </template>
-        </el-table-column>
+        </el-table-column> -->
       </el-table>
-      <pagination
+      <!-- <pagination
         sync
         :total.sync="pageInfo.total"
         :page.sync="pageInfo.page"
         :limit.sync="pageInfo.limit"
         :page-sizes="pageInfo.page_size"
         @pagination="getList"
-      />
+      /> -->
     </div>
 
     <el-dialog
@@ -111,9 +111,11 @@
       width="800px"
     >
       <trophy-create
+      v-if="lotteryCreateStatus"
         :groupList="groupList"
         :getList="getList"
         :close="onPopupClose"
+        :list="tableList"
       ></trophy-create>
     </el-dialog>
 
@@ -366,12 +368,12 @@ export default {
     },
     getList() {
       let params = Object.assign({}, this.searchForm);
-      params.rows = this.pageInfo.limit;
-      params.page = this.pageInfo.page;
+      params.rows = 9999;
+      params.page = 1;
       luckDrawPrizeList(cleanDeep(params)).then((res) => {
         if (res.code == 200 && res.data) {
           this.tableList = res.data.rows;
-          this.pageInfo.total = res.data.total;
+          // this.pageInfo.total = res.data.total;
         }
       });
     },