2/19 工位剔除1.0

src/api/inout/code.js

@@ -77,3 +77,39 @@ export function checkTempCode(query) {
 }
 
 
+
+export function getCodeListByRelId(params){
+  return axios({
+    url: "/admin/warehouse/inout/getCodes",
+    method: "get",
+    params: params
+  });
+}
+
+
+
+export function deleteCode(query) {
+  return axios({
+    url: "/udiwms/warehouse/inout/deleteCode",
+    method: "post",
+    data: query
+  });
+}
+
+
+export function deleteCodes(query) {
+  return axios({
+    url: "/udiwms/warehouse/inout/deleteCodes",
+    method: "post",
+    data: query
+  });
+}
+
+export function fallbackCode(query) {
+  return axios({
+    url: "/udiwms/warehouse/inout/fallback",
+    method: "post",
+    data: query
+  });
+}
+

src/views/collect/CollectOrderTabs.vue

@@ -87,6 +87,7 @@
               <!--            <i class="el-icon-upload"></i>-->
               <span slot="title">单据上传</span>
             </el-menu-item>
+
 <!--          </el-submenu>-->
 
 
@@ -120,6 +121,10 @@
             <!--            <i class="el-icon-warning"></i>-->
               <span slot="title">存量预警</span>
             </el-menu-item>
+          <el-menu-item :index=13 @click="clickMenuItem(13)" v-if="workPlaceClass == 2">
+            <!--              <i class="el-icon-edit-outline"></i>-->
+            <span slot="title">工位剔除</span>
+          </el-menu-item>
 
 <!--          </el-submenu>-->
 
@@ -288,6 +293,7 @@ import IoDestroyOrder from '@/views/collect/IoDestroyOrder.vue'
 import IoSplitFifoRemind from '@/views/collect/IoSplitFifoRemind.vue'
 import IocCollectOrderCheckCode from '@/views/collect/IocCollectOrderCheckCode.vue'
 import IocCollectOrderVerify from "@/views/collect/IocCollectOrderVerify.vue"
+import IoSplitFifoRemove from "@/views/collect/IoSplitFifoRemove.vue"
 import {listPage, switchWorkplaceStatus} from "@/api/basic/workPlace/sysWorkplaceManage";
 import {
   filterListByWorkplace,
@@ -308,7 +314,8 @@ export default {
     IoDestroyOrder,
     IocCollectOrderCheckCode,
     IoCreateOrderOutRecord,
-    IocCollectOrderVerify
+    IocCollectOrderVerify,
+    IoSplitFifoRemove
   },
   name: 'CollectOrderTabs',
   data() {
@@ -457,7 +464,15 @@ export default {
           component: IoCreateOrderOutRecord,
           // 假设你需要传递的参数
           componentProps: {}
-        }
+        },
+        {
+          number: 13,
+          title: '工位剔除',
+          name: 'IoSplitFifoRemove',
+          component: IoSplitFifoRemove,
+          // 假设你需要传递的参数
+          componentProps: {}
+        },
         ],
       editableTabs: [{
         number: 0,

src/views/collect/IoSplitFifoRemove.vue

@@ -0,0 +1,793 @@
+<template>
+
+  <div>
+    <el-form
+      :model="formData"
+      :rules="formRules"
+      ref="dataForm"
+      @submit.native.prevent
+      label-width="110px"
+    >
+      <el-card>
+        <el-row style="margin-bottom: 8px">
+          <!--<div v-if="scanReCount > 0">-->
+          <!--  <span style="font-size: 18px;font-weight: bold;color: red" >扫码总数量:</span>-->
+          <!--  <span style="font-size: 18px;font-weight: bold;color: red">{{ scanReCount }}</span>-->
+          <!--</div>-->
+          <span style="font-size: 18px;font-weight: bold;color: red" v-if="redMeg"
+          >请先扫取货槽编码</span>
+          <span style="font-size: 18px;font-weight: bold">{{ curQueueName }}</span>
+          <!--<span style="font-size: 18px;font-weight: bold">{{ curQueueName }}</span>-->
+          <el-button-group
+            style="display: flex; margin-top: 5px; float: right"
+          >
+            <el-button size="mini" type="primary" @click.native="fallbackCode()"
+            >回退
+            </el-button>
+            <el-button size="mini" type="primary"
+            >放弃
+            </el-button>
+
+          </el-button-group>
+        </el-row>
+        <el-divider></el-divider>
+        <el-row>
+          <el-col :span="18">
+            <el-form-item prop="code" label="扫码录入">
+              <el-input
+                id="inputer"
+                @focus="getInputFocus($event)"
+                @keypress.enter.native="enterKey($event)"
+                ref="inputRef"
+                style="ime-mode: disabled"
+                type="tel"
+                placeholder="请点击输入框进行扫码设置或者扫码录入"
+                v-model="scanCode"
+
+              ></el-input>
+              <!--                  :disabled="scanDisabled"-->
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-button-group>
+              <el-button
+                type="primary"
+                size="mini"
+                @click.native.stop="enterKey($event)"
+                style="margin-left: 15px"
+              >添加
+              </el-button>
+              <!--              <el-button icon="el-icon-view" @click="hideSearch">显示/隐藏快捷设置</el-button>-->
+            </el-button-group>
+
+          </el-col>
+        </el-row>
+
+        <el-alert
+          title="扫码结果:"
+          :type="scanResultType"
+          :closable="false"
+          :description="result"
+          v-if="successVisible"
+        >
+        </el-alert>
+        <el-alert
+          v-if="warnVisible"
+          title="警告信息:"
+          type="warning"
+          :closable="true"
+          :dangerouslyUseHTMLString="true"
+          :description="warnResult"
+        >
+        </el-alert>
+        <el-alert
+          v-if="errVisible"
+          title="错误信息:"
+          type="warning"
+          :closable="true"
+          :dangerouslyUseHTMLString="true"
+          :description="errResult"
+        >
+        </el-alert>
+
+        <el-row :gutter="24" style="margin-top: 10px">
+          <el-col :span="12" style="border: 1px solid #e3dfe1; padding:15px; height: 700px; margin-left: 15px;">
+            <h2 style="font-weight: bold;">当前上药队列</h2>
+            <el-table
+              :data="queueCodes"
+              :span-method="objectSpanMethod"
+              border
+              style="width: 100%; margin-top: 20px"
+            >
+              <el-table-column label="序号" width="80">
+                <template #default="{ $index }">
+                  {{ getDisplayIndex($index) }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="code"
+                label="追溯码"
+                width="180"
+
+              >
+                <!--show-overflow-tooltip-->
+                <!--<template slot-scope="scope">-->
+                <!--  <div style="font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">-->
+                <!--    {{ scope.row.code }}-->
+                <!--  </div>-->
+                <!--</template>-->
+              </el-table-column>
+              <el-table-column
+                prop="productName"
+                label="药品名称"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="nameCode"
+                label="药品标识"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="bzgg"
+                label="包装规格"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="serialNo"
+                label="序列号"
+              >
+              </el-table-column>
+              <!-- 添加 id 列，设置为隐藏 -->
+              <!--<el-table-column prop="id" label="ID" width="0" v-show="true"></el-table-column>-->
+            </el-table>
+            <pagination
+              v-show="queueCodeTotal>0"
+              :total="queueCodeTotal"
+              :limit.sync="queueQuery.limit"
+              :page.sync="queueQuery.page"
+              @pagination="getCodes()"
+            >
+            </pagination>
+
+          </el-col>
+          <el-col :span="11" style="border: 1px solid #e3dfe1; margin-left: 27px; padding: 15px;height: 700px;">
+            <h2 style="font-weight: bold;">工位库存队列</h2>
+            <!--<el-divider></el-divider>-->
+            <!--<div style=" border-top: 1px solid #ccc;">-->
+            <el-table v-loading="loading" :data="splitCodes" style="width: 100%;margin-top: 20px" max-height="350"
+                      ref="multipleTable"
+            >
+              <!--      <el-table-column-->
+              <!--        type="selection"-->
+              <!--        width="55">-->
+              <!--      </el-table-column>-->
+              <el-table-column label="序号" type="index" width="55">
+
+              </el-table-column>
+              <!--<el-table-column-->
+              <!--  label="追溯码"-->
+              <!--  prop="code"-->
+              <!--  show-overflow-tooltip-->
+              <!--  width="180"-->
+              <!--&gt;-->
+              <!--  <template slot-scope="scope">-->
+              <!--    <div style="font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">-->
+              <!--      {{ scope.row.code }}-->
+              <!--    </div>-->
+              <!--  </template>-->
+              <!--</el-table-column>-->
+
+              <el-table-column
+                prop="code"
+                label="追溯码"
+                width="180"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="cpmctymc"
+                label="药品名称"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="nameCode"
+                label="药品标识"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="bzgg"
+                label="包装规格"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="serialNo"
+                label="序列号"
+              >
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="splitCodeTotal>0"
+              :total="splitCodeTotal"
+              :limit.sync="splitCodeQuery.limit"
+              :page.sync="splitCodeQuery.page"
+              @pagination="getSplitCodes()"
+            >
+            </pagination>
+
+            <!--</div>-->
+
+          </el-col>
+        </el-row>
+
+      </el-card>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getByCode } from '@/api/basic/workPlace/SysWorkplaceQueue'
+import { isBlank } from '@/utils/strUtil'
+import { deleteCode, deleteCodes, fallbackCode, getCodeListByRelId } from '@/api/inout/code'
+import { splitFifoDetail } from '@/api/inout/splitCode'
+import { batchAddCode, batchVailCode, enterCodeWeb } from '@/api/inout/order'
+import { getSet } from '@/api/collect/collectSet'
+
+const SLOT_CODE_PREFIX = 'DMQ'
+
+export default {
+  name: 'IoSplitFifoRemove',
+  props: {
+    resetKey: {
+      type: Function,
+      required: true
+    }
+  },
+  watch: {
+    resetKey(newVal, oldVal) {
+      this.$refs.inputRef.focus()
+    }
+  },
+  data() {
+    return {
+      labelName: 1,
+      labels: {
+        1: '扫码录入',
+        2: '扫码剔除'
+      },
+      formData: {},
+      scanCode: '',
+      originCode: '',
+      redMeg: true,
+      detailList: [],
+      codeCount: 0,
+      loading: false,
+      codeArray: [],
+      workplaceId: null,
+      curQueue: null,
+      productName: null,
+      curQueueName: '',
+      queueCodeTotal: 0,
+      splitCodeTotal: 0,
+      //是否录入槽位
+      isCheckQueue: false,
+      //组号 用来回退
+      firstGroupNumber: null,
+      //队列codes
+      queueCodes: [],
+      queueQuery: {
+        page: 1,
+        limit: 10,
+        relId: '',
+        action: ''
+      },
+      //库存队列
+      splitCodes: [],
+      splitCodeQuery: {
+        page: 1,
+        limit: 10,
+        relId: ''
+      },
+      //提示信息
+      scanResultType: 'success',
+      result: '',
+      successVisible: true,
+      warnVisible: false,
+      warnResult: '',
+      errVisible: false,
+      errResult: '',
+      isSuccess: false,
+      //自动设置
+      collectSet: {},
+      valiCodes: []
+    }
+  },
+  methods: {
+    getInputFocus(event) {
+      event.currentTarget.select()
+    },
+    // 检查是否已扫槽位码
+    checkSlotCodeScanned() {
+      if (this.redMeg && !this.scanCode.includes(SLOT_CODE_PREFIX)) {
+        this.init()
+        this.isCheckQueue = false
+        return this.$message.error('请先扫取货槽编码')
+      }
+      //查找槽位码
+      this.handleSlotCodeScan()
+    },
+    enterKey(event) {
+      //alert初始化
+      this.alertInit()
+      // 检查是否已扫槽位码
+      if (!this.isCheckQueue) {
+        this.checkSlotCodeScanned()
+        return
+      }
+      //扫码校验
+
+      //多码校验
+      if (this.scanCode.includes(';')) {
+        const codeArray = this.scanCode.split(';')
+        const verify = this.verifyScanCount(codeArray)
+        if (verify) {
+          let params = {
+            codeList: codeArray
+          }
+          this.batchVailCode(params)
+        }
+        return
+      }
+
+      //单码校验
+      let tQuery = {
+        originCode: this.originCode,
+        code: this.scanCode.trim()
+      }
+      enterCodeWeb(tQuery).then((response) => {
+        if (response.code === 20000) {
+          this.$refs.inputRef.focus()
+          this.$refs.inputRef.select()
+          this.isSuccess = true
+          this.deleteCode()
+          this.init()
+        } else {
+          if (response.code == 502) {
+            this.checkSuccess = false
+            this.isSuccess = false
+            // this.scanCode = ''
+            this.printCodeResult(response.data)
+            this.codeFormData.code = response.data.code
+            this.originCode = this.codeFormData.code
+            // this.originCode = ""
+          } else if (response.code == 501) {
+            this.checkSuccess = false
+            this.scanCode = ''
+            this.originCode = ''
+            this.$message.error(response.message)
+          } else if (response.code == 503) {
+            this.checkSuccess = false
+            this.isSuccess = false
+            this.scanCode = ''
+            this.printCodeResult(response.data)
+            this.codeFormData.code = response.data.code
+            this.$confirm(response.message, '提示', {
+              type: 'warning'
+            })
+              .then(() => {
+                this.codeFormData.code = response.data.code
+                this.addCode()
+              })
+              .catch(() => {
+                this.codeFormData.code = response.data.code
+              })
+          } else if (response.code == 508) {
+            this.scanCode = ''
+            this.originCode = ''
+            this.codeFormData.code = '01' + response.data.nameCode
+            this.originCode = this.codeFormData.code
+          } else {
+            this.$alert(response.message, '提示', {
+              confirmButtonText: '确定',
+              type: 'warning',
+              closeOnClickModal: true,
+              callback: (action) => {
+                this.scanCode = ''
+                this.$refs.inputRef.focus()
+                this.$refs.inputRef.select()
+              }
+            })
+          }
+        }
+        this.loading = false
+      })
+    },
+    deleteCode() {
+      let query = {
+        code: this.scanCode.trim(),
+        queueCode: this.curQueue.code,
+        workPlaceCode: this.workplaceId
+      }
+      deleteCode(query).then(res => {
+        if (res.code == 20000) {
+          //删除码成功
+          //刷新列表
+          this.printCodeResult(res.data)
+          this.getCodes()
+          this.getSplitCodes()
+          this.init()
+          //扫码结果
+        } else {
+          //追溯码不存在
+          let printData = [
+            {
+              status: 2,
+              code: query.code,
+              errMsg: res.message
+            }
+          ]
+          this.printMutiCodeResult(printData)
+          this.init()
+        }
+      })
+    },
+    batchVailCode(params) {
+      batchVailCode(params).then((response) => {
+        if (response.code === 20000) {
+          console.log('==滴码接收==', response.data)
+          this.valiCodes = []
+          let list = response.data
+          list.forEach(item => {
+            if (item.status === 1) {
+              this.valiCodes.push(item.code)
+            }
+          })
+          this.printMutiCodeResult(list)
+          if (this.valiCodes != null && this.valiCodes.length > 0) {
+            //多码删除
+            let query = {
+              codeList: this.valiCodes,
+              queueCode: this.curQueue.code,
+              workPlaceCode: this.workplaceId
+            }
+            deleteCodes(query).then(res => {
+              if (res.code == 20000) {
+                this.getCodes()
+                this.getSplitCodes()
+                this.printMutiCodeResult(res.data.vailCodeResultResponses)
+              } else {
+                return this.$message.error('删除错误')
+              }
+            })
+          }
+          this.init()
+        }
+        // this.scanCode = this.valiCodes.join(";");
+      })
+    },
+    printCodeResult(data, isSuccess) {
+      this.successVisible = true
+      const resultParts = ['扫码解析结果：' + data.code]
+
+      if (data.udi) {
+        resultParts.push('层级标识: ' + data.udi)
+      }
+      if (data.batchNo) {
+        resultParts.push('批次号: ' + data.batchNo)
+      }
+      if (data.produceDate) {
+        resultParts.push('生产日期: ' + data.produceDate)
+      }
+      if (data.expireDate) {
+        resultParts.push('失效日期: ' + data.expireDate)
+      }
+      if (data.serialNo) {
+        resultParts.push('序列号: ' + data.serialNo)
+      }
+      this.result = resultParts.join(' , ')
+    },
+    async printMutiCodeResult(vailCodeResultResponses) {
+      this.alertInit()
+      for (let i = 0; i < vailCodeResultResponses.length; i++) {
+        let data = vailCodeResultResponses[i]
+        if (data.status == 1) {
+          this.successVisible = true
+          this.result = this.result + ';' + vailCodeResultResponses[i].code
+        } else if (data.status == 2) {
+          if (this.result == '') {
+            this.successVisible = false
+          }
+          this.warnResult = this.warnResult + '\n' + vailCodeResultResponses[i].code + ':' + vailCodeResultResponses[i].errMsg
+        } else if (data.status == 3) {
+          this.result = this.result + '\n' + vailCodeResultResponses[i].code
+          // this.warnResult = this.warnResult + "\n" + vailCodeResultResponses[i].code + ":" + vailCodeResultResponses[i].errMsg;
+          await this.popupTip(data)
+        }
+        // else
+        //   this.errResult = this.errResult + "\n" + vailCodeResultResponses[i].code + ":" + vailCodeResultResponses[i].errMsg;
+      }
+      if (!isBlank(this.warnResult)) {
+        this.warnVisible = true
+      }
+      if (!isBlank(this.errResult)) {
+        this.errVisible = true
+      }
+    },
+    //多码校验扫码次数
+    verifyScanCount(codeArray) {
+      //判断扫码数量是否超出或少于设置扫码数量
+      if (this.collectSet.scanMaxCount != null && this.collectSet.scanMaxCount != 0) {
+        if (this.collectSet.scanMaxCount > codeArray.length) {
+          this.scanCode = ''
+          this.$message.error('扫码数量少于设置扫码数量')
+          return false
+        } else if (this.collectSet.scanMaxCount < codeArray.length) {
+          this.scanCode = ''
+          this.$message.error('扫码数量超出')
+          return false
+        }
+      }
+      return true
+    },
+    alertInit() {
+      this.warnResult = ''
+      this.errResult = ''
+      this.result = ''
+      this.warnVisible = false
+      this.errVisible = false
+    },
+    // 处理槽位码扫描结果
+    handleSlotCodeScan() {
+      const query = {
+        code: this.scanCode,
+        workPlaceIdFk: this.workplaceId
+      }
+      getByCode(query)
+        .then((response) => {
+          this.loading = false
+          if (response.code == 20000) {
+            this.curQueue = response.data
+            this.productName = this.curQueue.cpmctymc
+            this.curQueueName = this.getQueueName()
+            this.redMeg = false
+            this.isCheckQueue = true
+            this.init()
+            this.queueQuery.relId = this.curQueue.relId
+            this.splitCodeQuery.relId = this.curQueue.relId
+            this.getCodes()
+            this.getSplitCodes()
+          } else {
+            this.init()
+            this.$message.error(response.message)
+          }
+        })
+        .catch((error) => {
+          // 打印错误信息，方便调试
+          console.error('获取槽位信息失败:', error)
+          this.scanCode = ''
+          this.$message.error('获取槽位码信息时发生错误')
+        })
+    },
+    // 获取当前取货槽名称
+    getQueueName() {
+      if (isBlank(this.productName)) {
+        return `当前取货槽: ${this.curQueue.code}`
+      }
+      return `当前取货槽: ${this.productName} (${this.curQueue.code})`
+    },
+    getCodes() {
+      this.queueQuery.action = 'SC72197936495755'
+      this.queueQuery.queueCode = this.curQueue.code
+      getCodeListByRelId(this.queueQuery).then(res => {
+        if (res.code == 20000) {
+          this.queueCodes = res.data.list
+          this.queueCodeTotal = res.data.total
+        } else {
+          this.queueCodes = []
+          this.queueCodeTotal = 0
+          return this.$message.error('获取错误')
+        }
+      })
+    },
+    getSplitCodes() {
+      this.splitCodeQuery.workPlaceQueueCode = this.curQueue.code
+      splitFifoDetail(this.splitCodeQuery).then(res => {
+        if (res.code == 20000) {
+          this.splitCodes = res.data.list
+          this.splitCodeTotal = res.data.total
+        } else {
+          this.splitCodes = []
+          this.splitCodeTotal = 0
+          return this.$message.error('获取错误')
+        }
+      })
+    },
+    fallbackCode() {
+      // fallbackCode()
+      // this.firstGroupNumber
+      if (this.queueCodes.length == 0){
+        return this.$message.error("当前上货队列不足")
+      }
+      this.$confirm('是否确定回退上药队列?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log('组号:', this.firstGroupNumber)
+        let query = {
+          groupNumber: this.firstGroupNumber
+        }
+        fallbackCode(query).then(res => {
+          if (res.code == 20000) {
+            this.getCodes()
+            this.getSplitCodes()
+            this.init()
+            this.alertInit()
+            return this.$message.success('回退成功')
+          } else {
+            this.getCodes()
+            this.getSplitCodes()
+            this.init()
+            this.alertInit()
+            return this.$message.error('回退失败')
+          }
+        }).catch(() => {
+        })
+      })
+    },
+    init() {
+      this.scanCode = ''
+      this.$refs.inputRef.focus()
+      this.$refs.inputRef.select()
+    },
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        // 返回对应行的合并信息
+        return this.spanInfo[rowIndex]
+      }
+    },
+    getDisplayIndex(index) {
+      let displayIndex = 1
+      for (let i = 0; i < index; i++) {
+        if (this.spanInfo[i].rowspan > 0) {
+          displayIndex++
+        }
+      }
+      return displayIndex
+    },
+    selectSysParam() {
+      getSet().then((response) => {
+        if (response.code == 20000) {
+          this.collectSet = response.data
+        }
+      })
+    }
+  },
+  computed: {
+    // 计算每个分组的合并信息
+    spanInfo() {
+      const info = []
+      let count = 1
+      for (let i = 0; i < this.queueCodes.length; i++) {
+        if (i === 0) {
+          // 记录第一组的组号
+          this.firstGroupNumber = this.queueCodes[i].groupNumber
+        }
+        if (i === this.queueCodes.length - 1 || this.queueCodes[i].groupNumber !== this.queueCodes[i + 1].groupNumber) {
+          for (let j = 0; j < count; j++) {
+            if (j === 0) {
+              info.push({ rowspan: count, colspan: 1 })
+            } else {
+              // 分组的其他单元格不显示
+              info.push({ rowspan: 0, colspan: 0 })
+            }
+          }
+          count = 1
+        } else {
+          // 分组未结束，继续计数
+          count++
+        }
+      }
+      return info
+    }
+  },
+  mounted() {
+    this.$refs.inputRef.focus()
+    this.$refs.inputRef.select()
+  },
+  created() {
+    this.workplaceId = this.$route.query.workplaceId
+    this.selectSysParam()
+  }
+}
+</script>
+
+<style scoped>
+.scroll-alert {
+  width: 100%; /* 或者你需要的宽度 */
+  overflow: hidden;
+  white-space: nowrap;
+  box-sizing: border-box;
+  /*border: 1px solid #f56c6c; !* 类似于 Element UI 警告框的边框 *!*/
+  background-color: rgba(255, 235, 59, 0.1); /* 类似于 Element UI 警告框的背景色 */
+  padding: 10px;
+  position: relative;
+}
+
+.scroll-text {
+  display: inline-block;
+  padding-left: 100%; /* 初始位置在容器右侧 */
+  animation: scroll 10s linear infinite; /* 滚动动画 */
+}
+
+@keyframes scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+.query-form-item {
+  margin-right: 5px;
+  margin-bottom: 6px;
+}
+
+#inputer {
+  width: 100%;
+  min-height: 30px;
+  background-color: white;
+  border: #d0d0d0;
+  border-style: solid;
+  border-width: 0.1px;
+  color: #4a4a4a;
+}
+
+#inputer:focus {
+  width: 100%;
+  min-height: 30px;
+  background-color: white;
+  border: #0080ff;
+  border-style: solid;
+  border-width: 0.1px;
+  color: #4a4a4a;
+}
+
+.ime-disabled {
+  ime-mode: disabled;
+}
+
+.result-display {
+  border: 2px solid #ccc; /* 默认外框颜色 */
+  border-radius: 10px;
+  margin-top: 5px;
+  margin-left: 15px;
+  margin-right: 25px;
+  padding-left: 25px;
+  /* 不设置背景颜色 */
+}
+
+.result-success {
+  border-color: #4CAF50; /* 成功时外框颜色 */
+}
+
+.result-failure {
+  border-color: #0080ff; /* 失败时外框颜色 */
+}
+
+.result-text {
+  height: 18px;
+  /* 你可以在这里设置默认的文本颜色或其他样式 */
+}
+
+.result-text-success {
+  color: #4CAF50; /* 成功时文本颜色 */
+  font-size: 14px;
+}
+
+.result-text-failure {
+  color: #0080ff; /* 失败时文本颜色 */
+  font-size: 14px;
+}
+
+
+</style>