fix #134

src/views/tool/unit.vue

@@ -2,14 +2,10 @@
     <div>
         <option-block style="text-align: center">
             <FormItem>
-                <ButtonGroup>
-                    <Button :type="current.type === v.key ? 'info' : 'primary'"
-                            @click="handle(v.key)"
-                            v-for="v in unitLists"
-                            style="padding: 5px 10px 6px;"
-                            :key="v.key">{{ v.name }}
-                    </Button>
-                </ButtonGroup>
+                <RadioGroup v-model="type" type="button" button-style="solid">
+                    <Radio :style="radioGroupStyle" :label="v.key" v-for="v in categories" :key="v.key">{{ v.name }}
+                    </Radio>
+                </RadioGroup>
             </FormItem>
         </option-block>
         <option-block style="text-align: center">
@@ -18,14 +14,13 @@
             </FormItem>
             <FormItem>
                 <Select v-model="current.from" style="width:200px">
-                    <template v-if="unitGroup.length > 1">
-                        <OptionGroup :label="group.name" v-for="(group,gk) in unitGroup" :key="gk">
-                            <Option v-for="(unit,k) in group.list" :value="unit.name" :key="k">{{ unit.unit }}</Option>
+                    <template v-if="groups.length > 1">
+                        <OptionGroup :label="group.name" v-for="group in groups" :key="group.key">
+                            <Option v-for="unit in group.list" :value="unit" :key="unit">{{ unitName(unit) }}</Option>
                         </OptionGroup>
                     </template>
                     <template v-else>
-                        <Option v-for="(unit,k) in unitGroup[0].list" :value="unit.name" :key="k">{{ unit.unit }}
-                        </Option>
+                        <Option v-for="unit in groups[0].list" :value="unit" :key="unit">{{ unitName(unit) }}</Option>
                     </template>
                 </Select>
             </FormItem>
@@ -34,31 +29,30 @@
             </FormItem>
             <FormItem>
                 <Select v-model="current.to" style="width:200px">
-                    <Option value="all">全部</Option>
-                    <template v-if="unitGroup.length > 1">
-                        <OptionGroup :label="group.name" v-for="(group,gk) in unitGroup" :key="gk">
-                            <Option v-for="(unit,k) in group.list" :value="unit.name" :key="k">{{ unit.unit }}</Option>
+                    <Option value="all">{{ $t('unit_all') }}</Option>
+                    <template v-if="groups.length > 1">
+                        <OptionGroup :label="group.name" v-for="group in groups" :key="group.key">
+                            <Option v-for="unit in group.list" :value="unit" :key="unit">{{ unitName(unit) }}</Option>
                         </OptionGroup>
                     </template>
                     <template v-else>
-                        <Option v-for="(unit,k) in unitGroup[0].list" :value="unit.name" :key="k">{{ unit.unit }}
-                        </Option>
+                        <Option v-for="unit in groups[0].list" :value="unit" :key="unit">{{ unitName(unit) }}</Option>
                     </template>
                 </Select>
             </FormItem>
         </option-block>
-        <div v-if="isShowResult" style="padding: 0 30px">
-            <template v-if="current.to !== 'all' && assignResult">
+        <div style="padding: 0 30px; min-height: 200px">
+            <template v-if="assignResult !== null">
                 <div style="text-align: center;margin-top: 30px;font-size: 18px;font-weight: bold">
-                    <span style="color: red">{{ current.input }}</span> {{ current.from }} = <span
-                    style="color: red">{{ assignResult.num }}</span>
-                    {{ current.to }}
+                    <span style="color: red">{{ current.input }}</span> {{ unitName(current.from) }} = <span
+                    style="color: red">{{ assignResult }}</span>
+                    {{ unitName(current.to) }}
                 </div>
             </template>
             <CellGroup v-if="current.to === 'all'">
                 <Row :gutter="16">
-                    <Col span="12" v-for="(item,k) in result" :key="k">
-                        <Cell :title="item.num" :extra="item.unit"/>
+                    <Col span="12" v-for="(result,unitKey) in output" :key="unitKey">
+                        <Cell :title="result" :extra="unitName(unitKey)"/>
                     </Col>
                 </Row>
             </CellGroup>
@@ -67,58 +61,61 @@
 </template>
 <script>
 import U from './library/unit'
+import {getCurrentLocale} from "../../i18n";
 
 export default {
     created() {
         let history = this.$getToolData()
-        this.current.type = history['type'] ? history['type'] : 'temperature'
-        this.getToolData()
+        this.type = this.current.type = history['type'] ? history['type'] : 'temperature'
+        this.getToolData(this.type)
     },
     computed: {
-        unitGroup() {
-            return U.getData(this.current.type)
+        radioGroupStyle() {
+            return getCurrentLocale() === "en" ? "padding: 0 5px" : "padding: 0 10px";
+        },
+        categories() {
+            return U.CONFIG.map((category) => {
+                return {name: category.name, key: category.key}
+            })
+        },
+        groups() {
+            return U.getCategory(this.current.type).group
         },
         isShowResult() {
             return this.current.from && this.current.type && this.current.input
         },
-        result() {
-            let r = []
+        output() {
+            let result = {}
             if (this.isShowResult) {
                 this.saveToolData()
-                this.unitGroup.forEach((Group) => {
-                    Group.list.forEach((unit) => {
-                        let temp = U.calc(
-                            this.current.type,
-                            this.current.input,
-                            this.current.from,
-                            unit.name
-                        )
-                        r.push({
-                            unit: unit.name,
-                            num: temp.num,
-                        })
-                    })
-                })
+                for (let unit of U.getCategory(this.current.type).unit) {
+                    result[unit.key] = U.calculate(
+                        this.current.type,
+                        this.current.input,
+                        this.current.from,
+                        unit.key
+                    )
+                }
             }
-            return r
+            return result
         },
         assignResult() {
-            if (this.current.to === 'all') {
-                return {}
-            }
-            let unit = this.current.to
-            for (let i = 0; i < this.result.length; i++) {
-                if (this.result[i].unit === unit) {
-                    return this.result[i]
+            if (this.current.to !== 'all') {
+                if (this.current.to in this.output) {
+                    return this.output[this.current.to]
                 }
             }
             return null
         }
     },
+    watch:{
+        type(value){
+            this.handle(value)
+        }
+    },
     methods: {
         handle(v) {
-            this.current.type = v
-            this.getToolData()
+            this.getToolData(v)
         },
         saveToolData() {
             let history = this.$getToolData()
@@ -131,13 +128,15 @@ export default {
             }
             this.$saveToolData(history)
         },
-        getToolData() {
-            let type = this.current.type
+        getToolData(type) {
             let history = this.$getToolData()
             let unitHistory = history['data'] && history['data'][type] ? history['data'][type] : null
-            this.current.from = unitHistory ? unitHistory.from : U.getMain(this.current.type)
-            this.current.to = unitHistory ? unitHistory.to : 'all'
-            this.current.input = unitHistory ? unitHistory.input : ''
+            this.current = Object.assign(this.current, {
+                from : unitHistory ? unitHistory.from : U.getCategory(type).main,
+                to : unitHistory ? unitHistory.to : 'all',
+                input : unitHistory ? unitHistory.input : '',
+                type : type
+            })
         },
         exchange() {
             if (this.current.to === 'all') {
@@ -146,10 +145,11 @@ export default {
             if (!this.current.from || !this.current.to) {
                 return
             }
-
-            let temp = this.current.from
-            this.current.from = this.current.to
-            this.current.to = temp
+            [this.current.from, this.current.to] = [this.current.to, this.current.from]
+        },
+        unitName(unitKey) {
+            let unit = U.getUnit(this.current.type, unitKey)
+            return `${unit.name} (${unit['unit']})`
         }
     },
     data() {
@@ -160,7 +160,7 @@ export default {
                 to: '',
                 input: '',
             },
-            unitLists: U.list(),
+            type:"",
         }
     },
 }