fix: 键盘加入

3 days ago · ac9b5d3d64
11 changed files with 76 additions and 57 deletions
--- a/package.json
+++ b/package.json
@ -45,6 +45,8 @@
    "postcss-url": "^10.1.3",
    "postcss-viewport-units": "^0.1.6",
    "postcss-write-svg": "^3.0.1",
+    "simple-keyboard": "^3.8.71",
+    "simple-keyboard-layouts": "^3.4.114",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0",
    "ws": "^8.18.1"
--- a/src/assets/images/solutionSelect.svg
+++ b/src/assets/images/solutionSelect.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="8" height="17" viewBox="0 0 8 17"><g><path d="M5.81818,10.625L2.18182,10.625L2.18182,2.125L1.45455,2.125L1.45455,14.5208C1.45455,15.8879,2.59636,17,4,17C5.40364,17,6.54546,15.8879,6.54546,14.5208L6.54546,2.125L5.81818,2.125L5.81818,10.625ZM6.90909,2.125L1.09091,2.125C0.489454,2.125,0,1.64829,0,1.0625C0,0.476708,0.489454,0,1.09091,0L6.90909,0C7.51055,0,8,0.476708,8,1.0625C8,1.64829,7.51055,2.125,6.90909,2.125ZM1.09091,0.708333C0.890148,0.708429,0.72745,0.866967,0.72745,1.0625C0.72745,1.25803,0.890148,1.41657,1.09091,1.41667L6.90909,1.41667C7.10992,1.41667,7.27273,1.2581,7.27273,1.0625C7.27273,0.866899,7.10992,0.708333,6.90909,0.708333L1.09091,0.708333Z" fill="#FFFFFF" fill-opacity="1"/></g></svg>
--- a/src/components/common/FTInput/index.vue
+++ b/src/components/common/FTInput/index.vue
@ -1,10 +1,9 @@
 <script setup lang="ts">
-import 'simple-keyboard/build/css/index.css'
-
 import Keyboard from 'simple-keyboard'
+
 import layout from 'simple-keyboard-layouts/build/layouts/chinese.js'
-import { useDeviceStore } from 'stores/deviceStore'
-import { computed, onUnmounted, ref } from 'vue'
+import { onUnmounted, ref } from 'vue'
+import 'simple-keyboard/build/css/index.css'

 defineOptions({
  inheritAttrs: false,
@ -21,10 +20,6 @@ const props = defineProps({
  },
 })
 const emits = defineEmits(['onChange', 'enter', 'close', 'focus'])
-const deviceStore = useDeviceStore()
-const deviceType = computed(() => {
-  return __DEVICE_TYPE__
-})

 const model = defineModel()
 const keyboard = ref<any>(null)
@ -69,8 +64,7 @@ const focusInput = (e: any) => {
  }
  if (visible.value)
    return
-  if (deviceType.value !== deviceStore.deviceTypeMap.LargeSpaceDM_B)
-    visible.value = true
+  visible.value = true
 }
 emits('focus')

--- a/src/components/home/Receive/index.vue
+++ b/src/components/home/Receive/index.vue
@ -80,7 +80,7 @@ const channelMap = {
        el-select(v-model="form.solutionId" placeholder="请选择溶液")
          el-option(v-for="item in solutionList" :key="item.id" :label="item.name" :value="item.id")
      el-form-item(label="溶液浓度" prop="concentration")
-        el-input(v-model="form.concentration" placeholder="请输入溶液浓度")
+        ft-input(v-model="form.concentration" placeholder="请输入溶液浓度" layoutName="number")
          template(#append)
            span %
      el-form-item(label="发放人" prop="issuerId")
@ -89,7 +89,7 @@ const channelMap = {
      el-form-item(label="领取人" prop="receiverId")
        el-tag {{systemStore.systemStatus.currentUser.nickname}}
      el-form-item(label="容量" prop="receivedVolume")
-        el-input(v-model="form.receivedVolume" placeholder="请输入容量")
+        ft-input(v-model="form.receivedVolume" placeholder="请输入容量" layoutName="number")
          template(#append)
            span mL
    template(#footer)
--- a/src/components/solution/Edit/index.vue
+++ b/src/components/solution/Edit/index.vue
@ -44,7 +44,7 @@ const cancel = () => {
  FtDialog(visible :title="data?.id ? '编辑' : '新增'" width="30%" :ok-handle="okHandle" @cancel="cancel")
    el-form(ref="formRef" label-width="auto" :model="form" :rules="rules")
      el-form-item(label="溶液名称" prop="name")
-        el-input(v-model="form.name" placeholder="请输入溶液名称")
+        ft-input(v-model="form.name" placeholder="请输入溶液名称")
 </template>

 <style lang="stylus" scoped>
--- a/src/components/systemConfig/Edit/index.vue
+++ b/src/components/systemConfig/Edit/index.vue
@ -44,7 +44,7 @@ const cancel = () => {
      el-form-item(label="code")
        el-tag {{ form.code }}
      el-form-item(label="值" prop="value")
-        el-input(v-model="form.value" placeholder="请输入值")
+        ft-input(v-model="form.value" placeholder="请输入值")
 </template>

 <style scoped lang="stylus">
--- a/src/components/user/Edit/index.vue
+++ b/src/components/user/Edit/index.vue
@ -126,16 +126,16 @@ const roleList = [
  FtDialog(visible :title="data.id ? '编辑用户' : '新增用户'" width="40%" :ok-handle="okHandle" @cancel="cancel")
    el-form(ref="formRef" :model="form" :rules="rules" label-width="auto")
      el-form-item(label="账号" prop="username")
-        el-input(v-model="form.username" maxlength="10" show-word-limit :disabled="data.id && form.fixedUser === 'ENABLE'" placeholder="请输入账号")
+        ft-input(v-model="form.username" maxlength="10" show-word-limit :disabled="data.id && form.fixedUser === 'ENABLE'" placeholder="请输入账号")
      el-form-item(label="用户名" prop="nickname")
-        el-input(v-model="form.nickname" maxlength="10" show-word-limit :disabled="data.id && form.fixedUser === 'ENABLE'" placeholder="请输入用户名")
+        ft-input(v-model="form.nickname" maxlength="10" show-word-limit :disabled="data.id && form.fixedUser === 'ENABLE'" placeholder="请输入用户名")
      el-form-item(label="角色" prop="role")
        el-select(v-model="form.role" placeholder="请选择角色")
            el-option( v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value")
      el-form-item(label="密码" prop="password" v-if="useSystemStore().systemStatus.currentUser?.fixedUser === 'ENABLE'")
-        el-input(v-model="form.password" maxlength="6" autocomplete="new-password" show-word-limit show-password type="password" placeholder="请输入密码")
+        ft-input(v-model="form.password" maxlength="6" autocomplete="new-password" show-word-limit show-password type="password" placeholder="请输入密码")
      el-form-item(label="再次输入密码" prop="passwordAgain" v-if="useSystemStore().systemStatus.currentUser?.fixedUser === 'ENABLE'")
-        el-input(v-model="form.passwordAgain" maxlength="6" autocomplete="new-password" show-word-limit show-password type="password" placeholder="请输入密码")
+        ft-input(v-model="form.passwordAgain" maxlength="6" autocomplete="new-password" show-word-limit show-password type="password" placeholder="请输入密码")
 </template>

 <style scoped lang="stylus">
--- a/src/main.ts
+++ b/src/main.ts
@ -3,6 +3,7 @@ import FtButton from 'components/common/FTButton/index.vue'
 import FtChart from 'components/common/FTChart/index.vue'
 import FtDatetime from 'components/common/FTDateTime/index.vue'
 import FtDialog from 'components/common/FTDialog/index.vue'
+import FtInput from 'components/common/FTInput/index.vue'
 import FtStream from 'components/common/FTStream/index.vue'
 import FtTable from 'components/common/FTTable/index.vue'
 import ElementPlus from 'element-plus'
@ -25,6 +26,7 @@ app.component('FtDialog', FtDialog)
 app.component('FtStream', FtStream)
 app.component('FtChart', FtChart)
 app.component('FtDatetime', FtDatetime)
+app.component('FtInput', FtInput)
 app
  .use(router)
  .use(ElementPlus, { locale, zIndex: 3000 })
--- a/src/views/craft/index.vue
+++ b/src/views/craft/index.vue
@ -195,15 +195,15 @@ const pumpAddSolution = async () => {
          el-select(v-model="form.solutionId" placeholder="请选择溶液")
            el-option(v-for="item in solutionList" :key="item.id" :label="item.name" :value="item.id")
        el-form-item(label="溶液浓度" prop="concentration")
-          el-input(v-model="form.concentration" placeholder="请输入溶液浓度")
+          ft-input(v-model="form.concentration" placeholder="请输入溶液浓度" layoutName="number")
            template(#append)
              span %
        el-form-item(label="加液量" prop="volume")
-          el-input(v-model="form.volume" placeholder="请输入加液量")
+          ft-input(v-model="form.volume" placeholder="请输入加液量" layoutName="number")
            template(#append)
              span mL
        el-form-item(label="蠕动泵转数" prop="revolutions")
-          el-input(v-model="form.revolutions" placeholder="请输入蠕动泵转数")
+          ft-input(v-model="form.revolutions" placeholder="请输入蠕动泵转数" layoutName="number")
            template(#append)
              span r
      div.statistic-box
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { queryCraftList } from 'apis/crafts'
 import { getSolsList } from 'apis/solution'
+import { sync } from 'apis/system'
 import solutionIcon from 'assets/images/solution.svg'
+import solutionSelectIcon from 'assets/images/solutionSelect.svg'
 import Receive from 'components/home/Receive/index.vue'
 import { useSystemStore } from 'stores/systemStore'
 import { computed, onMounted, ref, watch } from 'vue'
@ -69,11 +71,23 @@ const receiveOkHandle = async (data: Log.LogItem & { channelCode: 'CHANNEL_1' |
    concentration: data.concentration,
  })
 }
+
+const cardClick = async (item: System.ChannelState) => {
+  const channel = systemStore.systemStatus.channelState.find(channel => channel.channelCode === item.channelCode)
+  await sync({
+    channels: [
+      {
+        channelCode: item.channelCode,
+        selected: !channel?.selected,
+      },
+    ],
+  })
+}
 </script>

 <template lang="pug">
  div.home-container(v-loading="loading")
-    el-card(v-for="item in channelList.sort((a,b)=>a.channelCode.localeCompare(b.channelCode))" :key="item.channelCode")
+    el-card(v-for="item in channelList" :key="item.channelCode" :class="{'card-selected': item.selected }" @click.stop="() => cardClick(item)")
      div.top-box
        p.title {{channelMap[item.channelCode]}}
        div.solution-box(@click="() => receiveHandle(item)")
@ -82,7 +96,7 @@ const receiveOkHandle = async (data: Log.LogItem & { channelCode: 'CHANNEL_1' |

      div.input-box
        p.label
-          img(:src="solutionIcon" alt="")
+          img(:src="item.selected ?  solutionSelectIcon: solutionIcon" alt="")
          span 每次加液体积
        div.solution-box
          el-select(v-model="item.targetVolume" placeholder="请选择" no-data-text="无数据, 请添加对应配方" :disabled="!item.solutionName")
@ -107,6 +121,11 @@ const receiveOkHandle = async (data: Log.LogItem & { channelCode: 'CHANNEL_1' |
  display grid
  grid-template-columns 1fr 1fr 1fr 1fr
  gap 20px
+  .el-card
+    transform: all 0.3s;
+  .card-selected
+    background-color #1778D2
+    color #fff
  :deep(.el-card__body)
    height 100%
    display flex
@ -120,41 +139,42 @@ const receiveOkHandle = async (data: Log.LogItem & { channelCode: 'CHANNEL_1' |
        font-size 18px
        font-weight 500
        margin-bottom 30px
-    .solution-box
+  .solution-box
+    width 100%
+    height 50px
+    background: #F8F8F8;
+    box-shadow: inset 1px 2px 6px 0 rgba(210, 210, 210, 0.3);
+    display flex
+    align-items center
+    .el-select
+      width 100%
+      height 100%
+    .unit
+      height 40px
+      line-height 40px
+      font-size 18px
+      font-weight 500
+      color: #3C445C;
+      padding 0 15px
+      border-left 1px solid #D1D1D1;
+    .content
+      width 100%
+      color: #3C445C;
+      text-align center
+      font-weight bold
+      font-size 18px
+  .input-box
+    width 100%
+
+    .label
      width 100%
-      height 50px
-      background: #F8F8F8;
-      box-shadow: inset 1px 2px 6px 0 rgba(210, 210, 210, 0.3);
      display flex
      align-items center
-      .el-select
-        width 100%
-        height 100%
-      .unit
-        height 40px
-        line-height 40px
-        font-size 18px
-        font-weight 500
-        color: #3C445C;
-        padding 0 15px
-        border-left 1px solid #D1D1D1;
-      .content
-        width 100%
-        text-align center
-        font-weight bold
-        font-size 18px
-    .input-box
-      width 100%
-
-      .label
-        width 100%
-        display flex
-        align-items center
-        justify-content flex-start
-        padding 10px
-        img
-          width 10px
-          margin-right 10px
+      justify-content flex-start
+      padding 10px
+      img
+        width 10px
+        margin-right 10px
 :deep(.el-select__wrapper) {
  height 100%
  line-height 100%
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -50,12 +50,12 @@ const loginHandle = async () => {
      el-form(ref="formRef", :model="sys.loginForm", :rules="rules", style="width: 100%")
        .input-title 用户名
        el-form-item
-          el-input(v-model="sys.loginForm.username", size="large", placeholder="请输入用户名")
+          ft-input(v-model="sys.loginForm.username", size="large", placeholder="请输入用户名")
            template(#prepend)
              img.input-icon(:src="user", alt="")
        .input-title 密码
        el-form-item
-          el-input(v-model="sys.loginForm.password", size="large", placeholder="请输入密码", type="password")
+          ft-input(v-model="sys.loginForm.password", size="large", placeholder="请输入密码", type="password")
            template(#prepend)
              img.input-icon(:src="password", alt="")
        el-form-item