optimize

baiy · Jul 25, 2022 · 6af80cb · 6af80cb
1 parent c3d3620
commit 6af80cb
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 134 deletions.
diff --git a/src/config.js b/src/config.js
@@ -58,7 +58,7 @@ const tool = [
     {'name': 'armConverter', 'cat': ['conversion']},
     {'name': 'bcrypt', 'cat': ['encryption','check']},
     {'name': 'ipcalc', 'cat': ['generate']},
-    {'name': 'sqlFillParameter', 'cat': ['other']}
+    {'name': 'sqlFillParameter', 'cat': ['generate']}
 ]
 
 // 工具类功能配置

diff --git a/src/i18n/locales/en/sqlFillParameter.i18n.json5 b/src/i18n/locales/en/sqlFillParameter.i18n.json5
@@ -1,8 +1,7 @@
 {
-  "invalid_param": "invalid parameter",
-  'parameter': 'parameter',
-  'parameter_too_little': 'no enough parameters ',
-  'fill': 'fill',
-  'clear': 'clear',
-  'out': 'out'
+    "invalid_param": "Invalid Parameter",
+    'parameter': 'Parameter',
+    'parameter_too_little': 'No Enough Parameters',
+    'out': 'Out',
+    'copy': 'Copy'
 }
diff --git a/src/i18n/locales/zh_CN/sqlFillParameter.i18n.json5 b/src/i18n/locales/zh_CN/sqlFillParameter.i18n.json5
@@ -1,8 +1,7 @@
 {
-  "invalid_param": "无效的参数",
-  'parameter': '参数',
-  'parameter_too_little': '参数个数不足',
-  'fill': '填充',
-  'clear': '清空',
-  'out': '输出'
+    "invalid_param": "无效的参数",
+    'parameter': '参数',
+    'parameter_too_little': '参数个数不足',
+    'out': '输出',
+    'copy': '复制'
 }
diff --git a/src/views/tool/binary.vue b/src/views/tool/binary.vue
@@ -1,5 +1,5 @@
 <template>
-    <heightResize @resize="resize">
+    <heightResize :reduce="5" @resize="resize">
         <Row :gutter="10">
             <Col span="8">
                 <input-block top="5px">
@@ -50,7 +50,7 @@ export default {
     methods: {
         resize(height) {
             this.inputHeight = height
-            this.outputHeight = Math.ceil((height - 20) / 3)
+            this.outputHeight = Math.floor((height - 20) / 3)
         },
         result(type) {
             if (this.current.input.trim() === "") {

diff --git a/src/views/tool/sqlFillParameter.vue b/src/views/tool/sqlFillParameter.vue
@@ -1,37 +1,26 @@
 <template>
-  <div>
-    <Form>
-      <FormItem label="SQL">
-        <Input type="textarea"
-               v-model="current.sqlStr"
-               :rows="3"
-               placeholder="SELECT * FROM T WHERE id=? AND name = ?"></Input>
-      </FormItem>
-      <FormItem :label="$t('sqlFillParameter_parameter')">
-        <Input type="textarea"
-               v-model="current.paramStr"
-               :rows="3"
-               placeholder="1(Integer),zhangshan(String)"></Input>
-      </FormItem>
-      <option-block class="page-option-block">
-        <FormItem>
-          <ButtonGroup>
-            <Button type="primary" @click="fill">{{ $t('sqlFillParameter_fill') }}</Button>
-            <Button type="primary" @click="clear">{{ $t('sqlFillParameter_clear') }}</Button>
-          </ButtonGroup>
-        </FormItem>
-      </option-block>
-      <FormItem :label="$t('sqlFillParameter_out')">
-        <Input type="textarea"
-               v-model="current.outStr"
-               :rows="3"
-               placeholder="SELECT * FROM T WHERE id=1 AND name='zhangshan'"></Input>
-      </FormItem>
-    </Form>
-  </div>
+    <heightResize :reduce="5" @resize="resize">
+        <Row :gutter="10">
+            <Col span="12">
+                <autoHeightTextarea v-model="current.sqlStr" :height="inputHeight"
+                                    placeholder="SQL:SELECT * FROM T WHERE id=? AND name = ?"/>
+                <autoHeightTextarea v-model="current.paramStr" :height="inputHeight" style="margin-top: 10px"
+                                    :placeholder="`${$t('sqlFillParameter_parameter')}:1(Integer),zhangshan(String)`"/>
+            </Col>
+            <Col span="12">
+                <input-block :text="`${outStr ? $t('sqlFillParameter_copy') : ''}`"
+                             @on-default-right-bottom-click="()=>$copy(outStr)">
+                    <autoHeightTextarea v-model="outStr" :height="outputHeight"
+                                        :placeholder="`${$t('sqlFillParameter_out')}:SELECT * FROM T WHERE id=1 AND name='zhangshan'`"/>
+                </input-block>
+            </Col>
+        </Row>
+    </heightResize>
 </template>
 
 <script>
+import heightResize from "./components/heightResize";
+import autoHeightTextarea from "./components/autoHeightTextarea";
 
 // 1-String 2-NUMBER 3-Timestamp
 const TYPE_STR = ['String', 'Integer', 'Long', 'Timestamp']
@@ -40,100 +29,109 @@ const TYPE_STR = ['String', 'Integer', 'Long', 'Timestamp']
  * SQL 参数填充
  */
 export default {
-  data() {
-    return {
-
-      current: {
-        sqlStr: "", // SQL字符串
-        paramStr: "", // 参数字符串
-        outStr: '',// 输出结果
-      },
-    }
-  },
-  created() {
-    this.$initToolData()
-  },
-  methods: {
-    resize(height) {
-      this.inputHeight = Math.min(Math.ceil(height / 2), 160);
-      this.outputHeight = height - this.inputHeight;
+    components: {
+        heightResize,
+        autoHeightTextarea
+    },
+    data() {
+        return {
+            inputHeight: 100,
+            outputHeight: 100,
+            current: {
+                sqlStr: "",
+                paramStr: "",
+            },
+        }
     },
-    clear() {
-      this.current.sqlStr = ''
-      this.current.paramStr = ''
-      this.current.outStr = ''
+    created() {
+        this.$initToolData()
     },
-    fill() {
-      try {
-        // 解析参数
-        let paramList = this.convertParameter()
-        // 按字读取SQL，将?做替换
-        let tempSqlStr = this.current.sqlStr
-        let resultStr = '' // 替换后的字符串
-        let paramIndex = 0 // 参数访问索引
-        let tempParamStr = '' // 用于存放参数字符串
-        for (let i = 0; i < tempSqlStr.length; i++) {
-          // 检查到？就进行参数替换，不考虑SQL本身的合法性，不做SQL的语法和词法分析
-          let c = tempSqlStr.charAt(i)
-          if (c === '?') {
-            // 需要检查参数列表的越界
-            if (paramList.length <= paramIndex) {
-              throw new Error(this.$t('sqlFillParameter_parameter_too_little'))
-            }
-            let param = paramList[paramIndex]
-            switch (param.type) {
-                // String
-              case TYPE_STR[0]:
-                tempParamStr = '\'' + param.value + '\''
-                break
-                // Integer
-                // Long
-              case TYPE_STR[1]:
-              case TYPE_STR[2]:
-                tempParamStr = param.value
-                break
-                // Timestamp
-              case TYPE_STR[3]:
-                tempParamStr = 'timestamp' + param.value
-                break
-                // 其他类型直接拼接原始字符
-              default:
-                tempParamStr = param.value
+    computed: {
+        outStr() {
+            try {
+                if (!this.current.sqlStr || !this.current.paramStr) {
+                    return "";
+                }
+                // 解析参数
+                let paramList = this.convertParameter()
+                // 按字读取SQL，将?做替换
+                let tempSqlStr = this.current.sqlStr
+                let resultStr = '' // 替换后的字符串
+                let paramIndex = 0 // 参数访问索引
+                let tempParamStr = '' // 用于存放参数字符串
+                for (let i = 0; i < tempSqlStr.length; i++) {
+                    // 检查到？就进行参数替换，不考虑SQL本身的合法性，不做SQL的语法和词法分析
+                    let c = tempSqlStr.charAt(i)
+                    if (c === '?') {
+                        // 需要检查参数列表的越界
+                        if (paramList.length <= paramIndex) {
+                            throw new Error(this.$t('sqlFillParameter_parameter_too_little'))
+                        }
+                        let param = paramList[paramIndex]
+                        switch (param.type) {
+                            // String
+                            case TYPE_STR[0]:
+                                tempParamStr = '\'' + param.value + '\''
+                                break
+                            // Integer
+                            // Long
+                            case TYPE_STR[1]:
+                            case TYPE_STR[2]:
+                                tempParamStr = param.value
+                                break
+                            // Timestamp
+                            case TYPE_STR[3]:
+                                tempParamStr = 'timestamp' + param.value
+                                break
+                            // 其他类型直接拼接原始字符
+                            default:
+                                tempParamStr = param.value
+                        }
+                        // 字符拼接
+                        resultStr += tempParamStr
+                        paramIndex++
+                    } else { // 正常拼接
+                        resultStr += c
+                    }
+                }
+                this.$saveToolData(this.current);
+                return resultStr;
+            } catch (e) {
+                return e.message
             }
-            // 字符拼接
-            resultStr += tempParamStr
-            paramIndex++
-          } else { // 正常拼接
-            resultStr += c
-          }
         }
-        this.current.outStr = resultStr;
-        this.$saveToolData(this.current);
-      } catch (error) {
-        this.$Message.error(error.message)
-      }
+
     },
-    convertParameter: function () {
-      if (this.current.paramStr) {
-        let paramStrList = this.current.paramStr.split(',', -1)
-        return paramStrList.map(x => {
-          let valueEndIndex = x.lastIndexOf('(')
-          if (valueEndIndex < 0) {
-            throw new Error(this.$t('sqlFillParameter_invalid_param') + x)
-          }
-          let value = x.substring(0, valueEndIndex)
-          let len = x.length
-          let type = x.substring(valueEndIndex + 1, len - 1)
-          return {value, type}
-        })
-      } else {
-        return []
-      }
+    methods: {
+        resize(height) {
+            this.outputHeight = height
+            this.inputHeight = Math.floor((height - 10) / 2)
+        },
+        clear() {
+            this.current.sqlStr = ''
+            this.current.paramStr = ''
+            this.current.outStr = ''
+        },
+        fill() {
+
+        },
+        convertParameter: function () {
+            if (this.current.paramStr) {
+                let paramStrList = this.current.paramStr.split(',', -1)
+                return paramStrList.map(x => {
+                    let valueEndIndex = x.lastIndexOf('(')
+                    if (valueEndIndex < 0) {
+                        throw new Error(this.$t('sqlFillParameter_invalid_param') + x)
+                    }
+                    let value = x.substring(0, valueEndIndex)
+                    let len = x.length
+                    let type = x.substring(valueEndIndex + 1, len - 1)
+                    return {value, type}
+                })
+            } else {
+                return []
+            }
+        }
     }
-  }
 }
 </script>
-
-<style scoped>
-
-</style>