自己封装的全局数据管理 model.ts

mcxue · May 22, 2020 · 7491976 · 7491976
1 parent 3c646d0
commit 7491976
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 57 deletions.
diff --git a/src/components/Account/Choice.vue b/src/components/Account/Choice.vue
@@ -2,26 +2,37 @@
   <div class="choice-wrapper">
     <div>类别</div>
     <ul>
-      <li class="selected">默认</li>
+      <li v-for="value in data" :key="value"
+          :class="{selected:selected===value}"
+          @click="toggle(value)">{{value}}</li>
     </ul>
+    <button @click="createLabel">新增标签</button>
   </div>
 
 </template>
 
 <script lang="ts">
   import Vue from 'vue';
-  import {Component} from 'vue-property-decorator';
-  import store from '@/store';
-  
-  @Component({
-    computed:{
-      labelList(){
-        return store.state.labelList
+  import {Component, Prop} from 'vue-property-decorator';
+
+  @Component
+  export default class Choice extends Vue {
+    @Prop() readonly data!: string[];
+    @Prop() readonly selected!: string;
+    toggle(label: string){
+      this.$emit('update:selected',label)
+    }
+
+    createLabel(){
+      const name = window.prompt("请输入标签名");
+      if(name ===''){
+        window.alert('标签名不能为空')
+      }else{
+        if(this.data){
+          this.$emit('update:data',[...this.data,name])
+        }
       }
     }
-  })
-  export default class Choice extends Vue {
-    
   }
 </script>
 

diff --git a/src/components/Account/Note.vue b/src/components/Account/Note.vue
@@ -1,6 +1,5 @@
 <template>
     <label>
-      {{value}}
       <span>备注</span>
       <input type="text" v-model="value"
              placeholder="在这里添加备注">
@@ -9,10 +8,14 @@
 
 <script lang="ts">
   import Vue from 'vue';
-  import {Component} from 'vue-property-decorator';
+  import {Component, Watch} from 'vue-property-decorator';
   
   @Component
   export default class Note extends Vue {
+    @Watch('value')
+    onNoteChanged(){
+      this.$emit('update:note',this.value);
+    }
     value = '';
   }
 </script>

diff --git a/src/components/Account/Show.vue b/src/components/Account/Show.vue
@@ -1,23 +1,15 @@
 <template>
   <div class="show">
     <div class="text">金额</div>
-    <div class="number">{{output}}</div>
+    <div class="number"></div>
   </div>
 </template>
 
 <script lang="ts">
   import Vue from 'vue';
   import {Component} from 'vue-property-decorator';
-  import personStore from '@/store/personStore'
-  
-  @Component({
-    // todo
-    computed:{
-      output(){
-        return personStore.output;
-      }
-    }
-  })
+
+  @Component
   export default class Show extends Vue {
   }
 </script>

diff --git a/src/components/Account/Write.vue b/src/components/Account/Write.vue
@@ -11,7 +11,7 @@
     <button @click="inputContent">7</button>
     <button @click="inputContent">8</button>
     <button @click="inputContent">9</button>
-    <button class="ok">确认</button>
+    <button @click="ok" class="ok">确认</button>
     <button @click="inputContent" class="zero">0</button>
     <button @click="inputContent">.</button>
   </div>
@@ -27,16 +27,17 @@
     remove(){
       // todo
       personStore.remove();
-      console.log(personStore.output)
     }
     empty(){
       personStore.empty();
-      console.log(personStore.output)
 
     }
     inputContent(event: MouseEvent){
       personStore.inputContent(event);
-      console.log(personStore.output)
+    }
+    ok(){
+      this.$emit('update:amount',personStore.output);
+      this.$emit('submit',personStore.output);
     }
   }
 </script>

diff --git a/src/components/Type.vue b/src/components/Type.vue
@@ -1,34 +1,32 @@
 <template>
   <ul>
-    <li :class="{selected: type==='+'}" @click="selectA">支出</li>
-    <li :class="{selected: type==='-'}" @click="selectB">收入</li>
+    <li :class="{selected: type==='+'}" @click="toggle('+')">支出</li>
+    <li :class="{selected: type==='-'}" @click="toggle('-')">收入</li>
   </ul>
 </template>
 
 <script lang="ts">
   import Vue from 'vue';
-  import {Component} from 'vue-property-decorator';
+  import {Component, Prop} from 'vue-property-decorator';
 
   @Component
   export default class Type extends Vue {
-    typeList=['+','-'];
-    type='+';
-    selectA(){
-      this.type=this.typeList[0]
-    }
-    selectB(){
-      this.type=this.typeList[1]
+    @Prop({default:'-'}) readonly type!: string;
+    toggle(value: string) {
+      this.$emit('update:type',value)
     }
   }
 </script>
 
 <style lang="scss" scoped>
   @import "~@/assets/helper.scss";
+
   ul {
     background: $color-sky-blue;
     display: flex;
     padding-left: 0;
-    padding-right:0;
+    padding-right: 0;
+
     > li {
       text-align: center;
       width: 50%;
@@ -37,15 +35,16 @@
 
       &.selected {
         position: relative;
-        &::after{
-          $width:32px;
-          content:'';
+
+        &::after {
+          $width: 32px;
+          content: '';
           position: absolute;
-          left:50%;
+          left: 50%;
           bottom: 5px;
           background: #ffffff;
-          height:3px;
-          width:$width;
+          height: 3px;
+          width: $width;
           margin-left: -$width/2;
         }
       }

diff --git a/src/custom.d.ts b/src/custom.d.ts
@@ -1,4 +1,12 @@
 declare module "*.svg" {
   const content: string;
   export default content;
+}
+
+type RecordList = {
+  type: string;
+  choice: string;
+  note: string;
+  amount: number;
+  createdAt?: Date;
 }
diff --git a/src/views/Account.vue b/src/views/Account.vue
@@ -1,30 +1,50 @@
 <template>
-    <Layout name="记账" class-prefix="layout">
-      <Type/>
-      <Choice/>
-      <Note/>
-      <Show @ok="onOutputChange"/>
-      <Write/>
-    </Layout>
+  <Layout name="记账" class-prefix="layout">
+    <Type :type.sync="record.type"/>
+    <Choice :selected.sync="record.choice" :data.sync="labelList"/>
+    <Note :value="record.note" @update:note="onUpdateNote"/>
+    <Show @ok="onOutputChange"/>
+    <Write @update:amount="onUpdateAmount" @submit="saveRecord"/>
+  </Layout>
 </template>
 
 <script lang="ts">
   import Vue from 'vue';
-  import {Component} from 'vue-property-decorator';
+  import {Component, Watch} from 'vue-property-decorator';
   import Type from '@/components/Type.vue';
   import Choice from '@/components/Account/Choice.vue';
   import Note from '@/components/Account/Note.vue';
   import Write from '@/components/Account/Write.vue';
   import Show from '@/components/Account/Show.vue';
+  import { model } from './model';
 
+  const records = model.fetch();
 
   @Component({
     components: {Show, Write, Note, Choice, Type},
-  },)
+  })
   export default class Account extends Vue {
-    output='0';
-    onOutputChange(){
-      console.log("检测到 output 变化啦")
+    labelList = ['默认', '衣', '食', '住', '行'];
+    record: RecordList = {type: '+',choice:'默认',note: '',amount: 123};
+    output = '0';
+
+    onOutputChange() {
+      console.log('检测到 output 变化啦');
+    }
+
+    onUpdateNote(note: string) {
+      this.record.note = note;
+    }
+
+    onUpdateAmount(amount: string) {
+      this.record.amount = parseFloat(amount);
+    }
+    saveRecord(){
+      this.record.createdAt = new Date;
+      records.push(model.clone(this.record));
+      model.save(records);
+      console.log(records);
+
     }
   }
 </script>

diff --git a/src/views/model.ts b/src/views/model.ts
@@ -0,0 +1,15 @@
+const localStorageKeyName = 'recordList';
+
+const model = {
+  clone(data: RecordList[] | RecordList){
+    return JSON.parse(JSON.stringify(data))
+  },
+  fetch() {
+    return JSON.parse(window.localStorage.getItem(localStorageKeyName) || '[]') as RecordList[];
+  },
+  save(data: RecordList[]) {
+    window.localStorage.setItem(localStorageKeyName, JSON.stringify(data));
+  }
+};
+
+export {model};