新增五项重置数据的选项，可选择单独重置

zhangyongfeng
Showing 4 changed files with 117 additions and 9 deletions
README.md
src/components/Result.vue
src/components/Tool.vue
src/store/index.js
--- a/README.md
View file @f145b91
+++ b/README.md
View file @f145b91
@@ -20,7 +20,9 @@
 ### 重置
- 重置所有数据恢复到初始状态
+- 重置数据恢复到初始状态
+- 可选的重置选项：
+  `1.重置全部数据 2.重置抽奖配置 3.重置名单 4.重置照片 5.重置抽奖结果`
 ### 导入名单
@@ -34,7 +36,7 @@
 ## 温馨提示
 - 本抽奖程序无暗箱操作，无后台，无后门。
- 名单和照片显示只需导入一种即可。
+- 名单和照片显示只需导入一种即可,无导入数据则使用抽奖号码。
 - 建议使用最新的 Chrome 浏览器打开体验最佳。
 ## License
--- a/src/components/Result.vue
View file @f145b91
+++ b/src/components/Result.vue
View file @f145b91
@@ -4,6 +4,7 @@
    @close="$emit('update:visible', false)"
    width="600px"
    class="c-Result"
+    :append-to-body="true"
  >
    <div class="dialog-title" slot="title">
      <span :style="{ fontSize: '18px' }">
@@ -132,7 +133,7 @@ export default {
      border: 1px solid #ccc;
      background-color: #f2f2f2;
      margin-left: 5px;
-      margin-top: 5px;
+      margin-bottom: 5px;
      position: relative;
      cursor: pointer;
      &:hover {
--- a/src/components/Tool.vue
View file @f145b91
+++ b/src/components/Tool.vue
View file @f145b91
@@ -3,7 +3,7 @@
    <el-button @click="startHandler" type="primary" size="mini">{{
      running ? '停止' : '开始'
    }}</el-button>
-    <el-button size="mini" @click="resetConfig">
+    <el-button size="mini" @click="showRemoveoptions = true">
      重置
    </el-button>
    <el-button size="mini" @click="showImport = true">
@@ -104,11 +104,41 @@
      :visible.sync="showImportphoto"
      @getPhoto="$emit('getPhoto')"
    ></Importphoto>
+    <el-dialog
+      :visible.sync="showRemoveoptions"
+      width="300px"
+      class="c-removeoptions"
+      :append-to-body="true"
+    >
+      <el-form ref="form" :model="removeInfo" label-width="80px" size="mini">
+        <el-form-item label="重置选项">
+          <el-radio-group v-model="removeInfo.type">
+            <el-radio border :label="0">重置全部数据</el-radio>
+            <el-radio border :label="1">重置抽奖配置</el-radio>
+            <el-radio border :label="2">重置名单</el-radio>
+            <el-radio border :label="3">重置照片</el-radio>
+            <el-radio border :label="4">重置抽奖结果</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="resetConfig">确定重置</el-button>
+          <el-button @click="showRemoveoptions = false">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
  </div>
 </template>
 <script>
-import { clearData, conversionCategoryName } from '@/helper/index';
+import {
+  clearData,
+  removeData,
+  configField,
+  listField,
+  resultField,
+  conversionCategoryName
+} from '@/helper/index';
 import Importphoto from './Importphoto';
 import { database, DB_STORE_NAME } from '@/helper/db';
@@ -158,6 +188,8 @@ export default {
      showSetwat: false,
      showImport: false,
      showImportphoto: false,
+      showRemoveoptions: false,
+      removeInfo: { type: 0 },
      form: {
        category: '',
        mode: 1,
@@ -167,18 +199,51 @@ export default {
      listStr: ''
    };
  },
+  watch: {
+    showRemoveoptions(v) {
+      if (!v) {
+        this.removeInfo.type = 0;
+      }
+    }
+  },
  methods: {
    resetConfig() {
-      this.$confirm('此操作将重置所有数据，是否继续?', '提示', {
+      const type = this.removeInfo.type;
+      this.$confirm('此操作将重置所选数据，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
-          clearData();
+          switch (type) {
-          this.$store.commit('setClearStore');
+            case 0:
-          database.clear(DB_STORE_NAME);
+              clearData();
+              this.$store.commit('setClearStore');
+              database.clear(DB_STORE_NAME);
+              break;
+            case 1:
+              removeData(configField);
+              this.$store.commit('setClearConfig');
+              break;
+            case 2:
+              removeData(listField);
+              this.$store.commit('setClearList');
+              break;
+            case 3:
+              database.clear(DB_STORE_NAME);
+              this.$store.commit('setClearPhotos');
+              break;
+            case 4:
+              removeData(resultField);
+              this.$store.commit('setClearResult');
+              break;
+            default:
+              break;
+          }
          this.closeRes && this.closeRes();
+          this.showRemoveoptions = false;
          this.$message({
            type: 'success',
            message: '重置成功!'
@@ -293,4 +358,15 @@ export default {
    text-align: center;
  }
 }
+.c-removeoptions {
+  .el-dialog {
+    height: 290px;
+  }
+  .el-radio.is-bordered + .el-radio.is-bordered {
+    margin-left: 0px;
+  }
+  .el-radio.is-bordered {
+    margin-bottom: 10px;
+  }
+}
 </style>
--- a/src/store/index.js
View file @f145b91
+++ b/src/store/index.js
View file @f145b91
@@ -34,6 +34,35 @@ export default new Vuex.Store({
    photos: []
  },
  mutations: {
+    setClearConfig(state) {
+      state.config = {
+        name: '年会抽奖',
+        number: 70,
+        specialAward: 0,
+        firstPrize: 1,
+        secondPrize: 5,
+        thirdPrize: 8,
+        fourthPrize: 10,
+        fifthPrize: 20
+      };
+      state.newLottery = [];
+    },
+    setClearList(state) {
+      state.list = [];
+    },
+    setClearPhotos(state) {
+      state.photos = [];
+    },
+    setClearResult(state) {
+      state.result = {
+        specialAward: [],
+        firstPrize: [],
+        secondPrize: [],
+        thirdPrize: [],
+        fourthPrize: [],
+        fifthPrize: []
+      };
+    },
    setClearStore(state) {
      state.config = {
        name: '年会抽奖',