vue2-client 1.8.417 → 1.8.418

package/docs//345/207/275/346/225/260/344/275/277/347/224/250/347/233/270/345/205/263.md

@@ -0,0 +1,59 @@
+# function总体说明
+- function的参数，与具体事件有关系。可以在函数里，通过console.log('>>>参数', arguments)显示参数内容。
+- 如果function的参数里没有需要的数据，用this.函数/属性，可以取需要的内容，具体内容，与组件类型有关。
+- 用this.函数函数调用方式调用相应功能。
+
+# 通过this可以调用的函数
+- openDialog(configName, selectedId, mixinData)：打开一个对话框，例如：this.openDialog('xxx', 5, {})
+- runLogic(logicName, parameter): 运行业务逻辑, 例如: this.runLogic('xxx', {})
+
+# 如何调用珊格中组件的数据及函数
+- 先给组件起名字，命名规范：main，left，right，top，bottom
+- 用 this.getComponentByName('main') 拿到组件。
+
+# x-form-table 可以使用的函数/数据
+```js
+假如组件名称叫 xtable
+// 所有选中的id
+const allid =  this.$refs.xtable.table_selectedRowKeys
+// 所有选中的行 table_selectedRowKeys
+const allrecord =  this.$refs.xtable.table_selectedRows
+- 获取selectedid getSelectedId()
+- 重新查询 refreshTable()
+
+// xtable 所调用事件
+// 新增修改后调用事件
+afterSubmit( type(新增/修改/擦和讯), id: (所操作的主键id), form: (请求的表单内容))
+// 查询后
+afterQuery( res (查询后数据), querparams (查询参数))
+// 删除后
+afterDelete( res (删除接口返回数据))
+// 操作按钮
+action(record (当前记录), id （当前记录主键）, actionType （操作类型）)
+```
+
+
+# form 简易表单
+```js
+假如组件名称叫 xform
+// 主动调用提交函数
+this.$refs.xform.asyncSubmit((res )=>{}) res 为表单内容
+// 设置 表单内容
+this.$refs.xform.setForm(obj)  obj 用于合并到 form 对象中
+
+// xform 所调用事件 点击自带提交按钮后调用
+onSubmit( form: (请求的表单内容))
+```
+
+# 每种事件处理，传递给function的参数
+- 添加处理：空
+- action：（操作行数据)
+- 自定义按钮：（选中的所有行)
+
+# 例子
+function() {
+  // 获取主formtable组件
+  main = this.$refs.main.getComponentByName('main')
+  // 把组件当前选中的项及select_id传给后台业务逻辑
+  this.runLogic('logic', {select_id: main.getSelectedId(), rows: main.refreshTable()})
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.8.417",
+  "version": "1.8.418",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XAddReport/XAddReport.vue

@@ -100,6 +100,9 @@ export default {
         this.visible = false
         this.$emit('close')
       },
+      getComponentByName (name) {
+        return this.$refs.main.getComponentByName(name)
+      },
       onSubmit () {
         if (this.$refs.main?.config?.confirmFunction) {
           console.info('执行自定义确认逻辑')

package/src/base-client/components/common/XLicensePlate/XLicensePlate.vue

@@ -1,46 +1,193 @@
 <template>
   <div>
-    <a-input :placeholder="placeholder" v-model="value" readonly @click="openSelectLicensePlate"/>
-    <a-modal v-model="licensePlateShow">
-      <x-license-plate @change="change" v-model="licensePlate"/>
+    <div @click="openSelectLicensePlate" class="clickable-input">
+      <a-input :placeholder="placeholder" v-model="licensePlate" readonly class="clickable-input"/>
+    </div>
+    <a-modal v-model="licensePlateShow" title="选择车牌号" :bodyStyle="{height:'auto'}" @ok="okHandle">
+      <div class="license-plate_container">
+        <!-- 输入框 -->
+        <div @click="onSlotClick">
+          <div class="input_container">
+            <a-space>
+              <div style="margin: 0;padding: 0" v-for="(item, index) in 2" :key="`${item}_${inputValue[index]}`">
+                <a-input
+                  v-model="inputValue[index]"
+                  @click.stop="inputClick(index)"
+                  style="width: 2.3rem"
+                  :maxLength="1">
+                </a-input>
+              </div>
+              <b>·</b>
+              <div style="margin: 0;padding: 0" v-for="(item, index) in 6" :key="`${item}_${inputValue[index]}`">
+                <a-input
+                  v-model="inputValue[index+2]"
+                  @click.stop="inputClick(index+2)"
+                  style="width: 2.3rem"
+                  :maxLength="1">
+                </a-input>
+              </div>
+            </a-space>
+          </div>
+        </div>
+        <!-- 键盘 -->
+        <div class="keyboard_container">
+          <a-row type="flex">
+            <a-col v-if="activeIndex === 0" span="3" v-for="item in provinceList" :key="item">
+              <a-button
+                class="button"
+                @click="btnClick(item)"> {{ item }}
+              </a-button>
+            </a-col>
+            <a-col span="3" v-if="activeIndex !== 0" v-for="(item, index) of numberList" :key="item">
+              <a-button
+                class="button"
+                @click="btnClick(item, activeIndex === 1)"
+                :disabled="activeIndex === 1 && index < 10"> {{ item }}
+              </a-button>
+            </a-col>
+            <a-col span="3" v-if="activeIndex !== 0" v-for="item of letterList" :key="item">
+              <a-button
+                class="button"
+                @click="btnClick(item, item === 'O' && activeIndex > 1)"
+                :disabled="item === 'O' && activeIndex > 1"> {{ item }}
+              </a-button>
+            </a-col>
+            <a-col span="3" v-if="activeIndex !== 0" v-for="item of charList" :key="item">
+              <a-button
+                class="button"
+                @click="btnClick(item, activeIndex < 5)"
+                :disabled="activeIndex < 7"> {{ item }}
+              </a-button>
+            </a-col>
+            <a-button type="dashed" v-if="activeIndex !== 0" @click="delClick" class="button last-button">
+              <a-icon type="swap-left"/>
+              删除
+            </a-button>
+          </a-row>
+        </div>
+      </div>
     </a-modal>
   </div>
 </template>
 
 <script>
+const LICENSE_PLATE_RULE = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳使领]$/
 export default {
   name: 'XLicensePlate',
   props: {
+    value: {
+      type: String,
+      default: ''
+    },
     placeholder: {
       type: String,
       default: '请输入车牌号'
-    }
-  },
-  components: {
+    },
   },
   data () {
     return {
-      licensePlate: '',
-      licensePlateShow: false,
-      value: ''
+      provinceList: ['京', '津', '渝', '沪', '冀', '晋', '辽', '吉', '黑', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '琼', '川', '贵', '云', '陕', '甘', '青', '蒙', '桂', '宁', '新', '藏', '临'],
+      numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      letterList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
+      charList: ['警', '领', '港', '澳', '挂', '学'],
+      activeIndex: -1,
+      inputValue: ['', '', '', '', '', '', '', ''],
+      licensePlateShow: false
     }
   },
-  filters: {
-  },
-  created () {
+  computed: {
+    licensePlate () {
+      return this.inputValue.join('')
+    }
   },
   watch: {
+    value () {
+      this.initLicensePlate()
+    }
+  },
+  mounted () {
+    this.initLicensePlate()
+    this.activeIndex = 0
   },
   methods: {
+    okHandle () {
+      this.licensePlateShow = false
+      this.change()
+    },
     openSelectLicensePlate () {
-      this.licensePlate = this.value
+      this.licensePlateShow = true
+    },
+    initLicensePlate () {
+      if (this.value && LICENSE_PLATE_RULE.test(this.value)) {
+        this.inputValue = this.value.split('')
+      }
+    },
+    onSlotClick (event) {
+      const length = this.inputValue.filter(it => it).length
+      this.activeIndex = length == 0 ? 0 : length - 1
+    },
+    inputClick (index, event) {
+      this.activeIndex = index
     },
-    change (a, b) {
-      console.log(a, b)
-      console.log(a.array)	// 数组形式
-      console.log(a.value)	// 字符串形式
-      console.log(a.pass) // 是否验证通过
+    btnClick (val, disabled) {
+      if (disabled) {
+        return false
+      }
+      this.$set(this.inputValue, this.activeIndex, `${val}`)
+      this.activeIndex++
+      this.change()
+    },
+    delClick () {
+      if (this.inputValue[this.activeIndex]) {
+        this.$set(this.inputValue, this.activeIndex, ``)
+      } else {
+        this.$set(this.inputValue, this.activeIndex - 1, ``)
+        this.activeIndex--
+      }
+      this.change()
+    },
+    change () {
+      const value = this.inputValue.join('')
+      const pass = LICENSE_PLATE_RULE.test(value)
+      this.$emit('change', {
+        array: this.inputValue.filter(it => it !== ''),
+        value: value,
+        pass: pass,
+      })
+      this.$emit('input', value)
     }
   }
 }
 </script>
+
+<style lang='less' scoped>
+.license-plate_container {
+  box-sizing: border-box;
+
+  .input_container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 10px;
+  }
+
+  .keyboard_container {
+    width: 100%;
+    height: auto;
+    background-color: #e2e3e7;
+    padding: 10px 10px calc(env(safe-area-inset-bottom) + 10px) 5px;
+    box-sizing: border-box;
+    text-align: center;
+
+    .button {
+      margin: 2px;
+      width: 2.8rem;
+    }
+
+    .last-button {
+      width: auto;
+      margin-left: 7px;
+    }
+  }
+}
+</style>

package/src/base-client/components/common/XLicensePlate/XLicensePlateDemo.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <x-license-plate @change="change" v-model="licensePlate" :autoShow="false"/>
+  </div>
+</template>
+
+<script>
+import XLicensePlate from './XLicensePlate.vue'
+export default {
+  name: 'XLicensePlateDemo',
+  components: {
+    XLicensePlate
+  },
+  props: {
+    placeholder: {
+      type: String,
+      default: '请输入车牌号'
+    }
+  },
+  data () {
+    return {
+      licensePlate: '陕A1G78D',
+    }
+  },
+  filters: {},
+  created () {
+  },
+  watch: {
+    licensePlate (vale) {
+      console.log('监听model变化', vale)
+    }
+  },
+  methods: {
+    change (a) {
+      console.log(a, this.licensePlate)
+      console.log('数组形式:' + a.array)
+      console.log('字符串形式:' + a.value)
+      console.log('是否验证通过:' + a.pass)
+    }
+  }
+}
+</script>
+<style scoped>
+.clickable-input input {
+  pointer-events: none;
+  cursor: pointer;
+}
+</style>

package/src/main.js

@@ -5,14 +5,12 @@ import Vuex from 'vuex'
 import { routerOptions, modules, i18n, message, bootstrap } from '../index'
 import eventLogPlugin from '@/plugins/EventLogPlugin'
 import findParentData from '@/plugins/FindParentsData'
-import LicensePlate from 'vue-license-plate'
-import 'vue-license-plate/lib/licensePlate.css'
 
 Vue.use(Router)
 Vue.use(Vuex)
 Vue.use(eventLogPlugin)
 Vue.use(findParentData)
-Vue.use(LicensePlate)
+
 // 创建router store
 const store = new Vuex.Store({ modules })
 const router = new Router(routerOptions)

package/src/router/async/router.map.js

@@ -78,7 +78,7 @@ routerResource.example = {
       {
           path: 'default',
           name: '示例页面',
-          component: () => import('@vue2-client/base-client/components/common/XTab/XTabDemo.vue'),
+          component: () => import('@vue2-client/base-client/components/common/XLicensePlate/XLicensePlateDemo.vue'),
           meta: {
               // 菜单中不显示
               invisible: true,