cleardata

src/assets/style/base.scss

@@ -32,6 +32,7 @@ input {
 }
 body {
   overflow: hidden;
+  padding: 0 !important;
 }
 .el-form-item {
   margin-bottom: 5px !important;
@@ -46,3 +47,8 @@ body {
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
 }
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  background-color: #ccc;
+}

src/components/LotteryConfig.vue

@@ -3,7 +3,6 @@
     :visible="visible"
     :append-to-body="true"
     width="400px"
-    :lock-scroll="true"
     @close="$emit('update:visible', false)"
     class="c-LotteryConfig"
   >
@@ -19,30 +18,66 @@
         >取消</el-button
       >
     </div>
-    <el-form ref="form" :model="form" label-width="100px" size="mini">
+    <div class="container">
+      <el-form ref="form" :model="form" label-width="90px" size="mini">
         <el-form-item label="抽奖标题">
           <el-input v-model="form.name"></el-input>
         </el-form-item>
         <el-form-item label="抽奖总人数">
-        <el-input type="number" v-model="form.number"></el-input>
+          <el-input
+            type="number"
+            v-model="form.number"
+            :min="1"
+            :step="1"
+          ></el-input>
         </el-form-item>
-      <el-form-item label="特等奖人数">
-        <el-input type="number" v-model="form.specialAward"></el-input>
+        <el-form-item label="特等奖">
+          <el-input
+            type="number"
+            v-model="form.specialAward"
+            :min="0"
+            :step="1"
+          ></el-input>
         </el-form-item>
-      <el-form-item label="一等奖人数">
-        <el-input type="number" v-model="form.firstPrize"></el-input>
+        <el-form-item label="一等奖">
+          <el-input
+            type="number"
+            v-model="form.firstPrize"
+            :min="0"
+            :step="1"
+          ></el-input>
         </el-form-item>
-      <el-form-item label="二等奖人数">
-        <el-input type="number" v-model="form.secondPrize"></el-input>
+        <el-form-item label="二等奖">
+          <el-input
+            type="number"
+            v-model="form.secondPrize"
+            :min="0"
+            :step="1"
+          ></el-input>
         </el-form-item>
-      <el-form-item label="三等奖人数">
-        <el-input type="number" v-model="form.thirdPrize"></el-input>
+        <el-form-item label="三等奖">
+          <el-input
+            type="number"
+            v-model="form.thirdPrize"
+            :min="0"
+            :step="1"
+          ></el-input>
         </el-form-item>
-      <el-form-item label="四等奖人数">
-        <el-input type="number" v-model="form.fourthPrize"></el-input>
+        <el-form-item label="四等奖">
+          <el-input
+            type="number"
+            v-model="form.fourthPrize"
+            :min="0"
+            :step="1"
+          ></el-input>
         </el-form-item>
-      <el-form-item label="五等奖人数">
-        <el-input type="number" v-model="form.fifthPrize"></el-input>
+        <el-form-item label="五等奖">
+          <el-input
+            type="number"
+            v-model="form.fifthPrize"
+            :min="0"
+            :step="1"
+          ></el-input>
         </el-form-item>
 
         <el-form-item
@@ -52,6 +87,8 @@
         >
           <el-input
             type="number"
+            :min="0"
+            :step="1"
             v-model="form[newitem.key]"
             @change="
               val => {
@@ -61,6 +98,7 @@
           ></el-input>
         </el-form-item>
       </el-form>
+    </div>
 
     <el-dialog
       :visible.sync="showAddLottery"
@@ -146,7 +184,11 @@ export default {
 .c-LotteryConfig {
   .el-dialog__body {
     height: 340px;
+    .container {
+      height: 100%;
       overflow-y: auto;
+      padding: 0 10px;
+    }
   }
 }
 .dialog-showAddLottery {

src/components/Tool.vue

@@ -26,12 +26,14 @@
 
         <el-form-item label=" " v-if="form.category">
           <span>
-            共<span class="colorred">{{ config[form.category] }}</span
-            >名
+            共&nbsp;
+            <span class="colorred">{{ config[form.category] }}</span>
+            &nbsp;名
           </span>
           <span :style="{ marginLeft: '20px' }">
-            剩余<span class="colorred">{{ remain }}</span
-            >名
+            剩余&nbsp;
+            <span class="colorred">{{ remain }}</span>
+            &nbsp;名
           </span>
         </el-form-item>
 
@@ -133,13 +135,11 @@ export default {
       })
         .then(() => {
           clearData();
+          this.$store.commit('setClearStore');
           this.$message({
             type: 'success',
             message: '重置成功!'
           });
-          setTimeout(() => {
-            window.location.reload();
-          }, 3000);
         })
         .catch(() => {
           this.$message({

src/helper/index.js

@@ -58,21 +58,6 @@ export function conversionCategoryName(key) {
     case 'fifthPrize':
       name = '五等奖';
       break;
-    case 'additionalPrize1':
-      name = '追加奖(1)';
-      break;
-    case 'additionalPrize2':
-      name = '追加奖(2)';
-      break;
-    case 'additionalPrize3':
-      name = '追加奖(3)';
-      break;
-    case 'additionalPrize4':
-      name = '追加奖(4)';
-      break;
-    case 'additionalPrize5':
-      name = '追加奖(5)';
-      break;
 
     default:
       break;

src/store/index.js

@@ -27,6 +27,27 @@ export default new Vuex.Store({
     newLottery: []
   },
   mutations: {
+    setClearStore(state) {
+      state.config = {
+        name: '年会抽奖',
+        number: 70,
+        specialAward: 0,
+        firstPrize: 1,
+        secondPrize: 5,
+        thirdPrize: 8,
+        fourthPrize: 10,
+        fifthPrize: 20
+      };
+      state.result = {
+        specialAward: [],
+        firstPrize: [],
+        secondPrize: [],
+        thirdPrize: [],
+        fourthPrize: [],
+        fifthPrize: []
+      };
+      state.newLottery = [];
+    },
     setConfig(state, config) {
       state.config = config;
     },