widget.qw 1.0.92 → 1.0.96

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "widget.qw",
   "private": false,
-  "version": "1.0.92",
+  "version": "1.0.96",
   "description": "marqstree Vue3组件库",
   "main": "build/widget.qw.es.js",
   "keywords": [

package/src/components/FilePicker.vue

@@ -1,5 +1,5 @@
 <template>
-    <van-field v-if="!isGone" name="image" :label="props.label" :required="isRequired" :rules="rules"
+    <van-field v-if="!isGone" name="image" :label="props.label" :required="isRequired" :rules="rules" :modelValue="modelValue"
         label-class="label" :placeholder="props.placeholder">
         <template #input>
             <div class="file-box">

package/src/components/Input.vue

@@ -1,17 +1,32 @@
 <template>
-    <van-field 
-        :label="props.label" 
-        v-model.number="modelValue" 
-        v-if="!isGone && props.type === 'number'"
+    <!-- 数字类型 -->
+    <van-field :label="props.label" v-model.number="modelValue" v-if="!isGone && props.type === 'number'"
         :disabled="isDisabled" :required="isRequired" :placeholder="props.placeholder" :type="props.type"
-        :rows="props.rows" :autosize="props.autosize" :rules="rules" />
+        :rows="props.rows" :autosize="props.autosize" :rules="rules">
+        <!-- 右侧插槽按钮 -->
+        <template #button>
+            <van-button size="small" @click="onCalc">
+                +
+            </van-button>
+        </template>
+    </van-field>
+    <van-popup v-model:show="data.isShowPop" position="bottom" round>
+        <van-field v-model="data.express" placeholder="请输入+/-数字" type="text">
+            <template #button>
+                <van-button size="small" @click="onSubmit">
+                    确定
+                </van-button>
+            </template>
+        </van-field>
+    </van-popup>
+    <!-- 文本类型 -->
     <van-field :label="props.label" v-model="modelValue" v-if="!isGone && props.type != 'number'" :disabled="isDisabled"
         :required="isRequired" :placeholder="props.placeholder" :type="props.type" :rows="props.rows"
         :autosize="props.autosize" :rules="rules" />
 </template>
 
 <script setup>
-import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
+import { ref, computed, onMounted, defineProps, defineEmits, watch, reactive } from "vue"
 import { useVModel } from '@vueuse/core'
 import util from '../util'
 
@@ -65,6 +80,29 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 const modelValue = useVModel(props, 'modelValue', emit)
 const { isRequired, isReadonly, isGone, isDisabled, rules } = util.props2auth(props)
+const data = reactive({
+    isShowPop: false,
+    express: ''
+})
+
+const onCalc = () => {
+    data.isShowPop = true
+    data.express = '+'
+}
+
+const onSubmit = () => {
+    // 简单校验只允许数字 +- .
+    if (!/^[\d\.+-]+$/.test(data.express)) {
+        throw new Error("非法表达式");
+    }
+
+    let fullExpress = modelValue.value+''+data.express
+
+    modelValue.value = eval(fullExpress)
+
+    data.isShowPop = false
+    data.express = ''
+}
 
 onMounted(() => {
 })

package/src/components/MultiPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <van-field v-if="!isGone" :label="props.label" :required="isRequired" :rules="rules" :disabled="isDisabled"
+  <van-field v-if="!isGone" :label="props.label" :required="isRequired" :rules="rules" :disabled="isDisabled" :modelValue="modelValue"
     :placeholder="props.placeholder" :is-link="isReadonly ? false : true" @click="data.isShowPop = !isReadonly"
     label-class="label">
     <template #input v-if="selectOptions.length>0">

package/src/components/ObjsEditor.vue

@@ -1,9 +1,10 @@
 <template>
     <van-field :label="props.label" v-if="!isGone" :disabled="isDisabled" :required="isRequired"
-        :placeholder="props.placeholder" :rules="rules">
+        :modelValue="modelValue" :placeholder="props.placeholder" :rules="rules">
         <template #input>
             <div class="widget-box">
                 <div class="option" v-for="(item, index) in modelValue" :key="index">
+                    <!-- 浏览状态的元素，显示元素的值 -->
                     <div v-if="index != data.selectIndex" style=" display: flex;align-items: center;">
                         <van-icon name="arrow-left" @click.stop="onForward(index)" />
                         <div style="padding: 5px 5px;">
@@ -30,21 +31,25 @@
                         </div>
                     </div>
 
+                    <!-- 编辑状态的元素，显示编辑输入框 -->
                     <van-form v-if="data.isShowInput && index == data.selectIndex" :model="data.inputValue">
+                        <!-- 列出schema中定义的字段的输入框 -->
                         <van-field v-for="(key, i) in keys" :key="i" :label="props.schema[key].label"
                             v-show="props.schema[key].auth != 'gone'" :required="props.schema[key].auth === 'required'"
                             :disabled="props.schema[key].auth === 'readonly'">
 
                             <template #input>
-                                <van-field
-                                    v-if="props.schema[key].type == 'String' && !props.schema[key]?.schema?.options"
-                                    :disabled="props.schema[key].auth === 'readonly'" v-model="data.inputValue[key]"
-                                    :placeholder="`请输入${key2name(key)}`" type="text" />
-
-                                <van-field
-                                    v-if="props.schema[key].type == 'Number' && !props.schema[key]?.schema?.options"
-                                    :disabled="props.schema[key].auth === 'readonly'"
-                                    v-model.number="data.inputValue[key]" :placeholder="`请输入${key2name(key)}`"
+                                <!-- 根据字段的类型，显示对应的输入框 -->
+                                <Input v-if="props.schema[key].type == 'String' && !props.schema[key]?.schema?.options"
+                                    :auth="props.schema[key].auth" 
+                                    v-model="data.inputValue[key]"
+                                    :placeholder="`请输入${key2name(key)}`" 
+                                    type="text" />
+
+                                <Input v-if="props.schema[key].type == 'Number' && !props.schema[key]?.schema?.options"
+                                    :auth="props.schema[key].auth"
+                                    v-model.number="data.inputValue[key]" 
+                                    :placeholder="`请输入${key2name(key)}`"
                                     type="number" />
 
                                 <van-switch v-if="props.schema[key].type == 'Boolean'"
@@ -90,6 +95,7 @@ import util from '@/util'
 import DatetimePicker from './DatetimePicker.vue'
 import DateSelector from './data_selector.vue'
 import ImagesPicker from './images_picker.vue'
+import Input from './Input.vue'
 
 const props = defineProps({
     modelValue: {
@@ -119,16 +125,19 @@ const props = defineProps({
     schema: {
         type: Object,
         default: {
-            type: "String",
-            label: '名称',
-            default: '',
-            //权限取值范围: required 必填 option 选填 readonly 只读 gone 隐藏
-            auth: 'option'
+            title: {
+                type: "String",
+                label: '标题',
+                default: '',
+                //权限取值范围: required 必填 option 选填 readonly 只读 gone 隐藏
+                auth: 'option',
+                submit: null
+            }
         }
     }
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue','submitItem'])
 const modelValue = useVModel(props, 'modelValue', emit)
 const { isRequired, isReadonly, isGone, isDisabled, rules } = util.props2auth(props)
 
@@ -138,7 +147,9 @@ const data = reactive({
     selectIndex: -1,
     oldModelValue: []
 })
-const keys = Object.keys(props.schema)
+
+//过滤掉提交添加/修改/删除的元素回调函数
+const keys = Object.keys(props.schema).filter(k=> k != 'submitItem' && k!='deleteItem')
 const visiableKeys = keys.filter(k => props.schema[k].auth != 'gone')
 
 watch(() => JSON.stringify(modelValue.value), (n, o) => {
@@ -179,6 +190,11 @@ const onBack = (index) => {
 
 const onDelete = (index) => {
     modelValue.value.splice(index, 1)
+
+    //执行删除数组元素回调
+    if(props.schema.deleteItem){
+        props.schema.deleteItem(index)
+    }
 }
 
 const key2name = (key) => {
@@ -249,7 +265,7 @@ const onNewOption = () => {
     })
 }
 
-const onInputConfirm = () => {
+const onInputConfirm = (selectIndex, key, label) => {
     let idx = modelValue.value.indexOf(item => JSON.stringify(item) === JSON.stringify(data.inputValue))
     if (idx > -1 && idx != data.selectIndex) {
         util.warnToast('重复添加')
@@ -264,8 +280,22 @@ const onInputConfirm = () => {
         return
     }
 
+    //更新v-model的值
     modelValue.value[data.selectIndex] = data.inputValue
 
+    //执行每个输入框值提交回调
+    keys.forEach(key => {
+        if (props.schema[key].submitValue) {
+            props.schema[key].submitValue(data.inputValue[key])
+        }
+    })
+
+    //执行每个数组元素提交回调
+    if(props.schema.submitItem){
+        props.schema.submitItem(data.inputValue)
+    }
+
+    //输入框恢复到默认值
     data.isShowInput = false
     data.inputValue = makeDefaultValue()
     data.selectIndex = -1

package/src/components/Sheet.vue

@@ -1,5 +1,5 @@
 <template>
-    <van-field :label="props.label" v-if="!isGone" :disabled="isDisabled" :required="isRequired" :rules="rules"
+    <van-field :label="props.label" v-if="!isGone" :disabled="isDisabled" :required="isRequired" :rules="rules" :modelValue="modelValue"
         :placeholder="props.placeholder">
 
         <template #input>

package/src/components/SingleApiPicker.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="widget">
-    <van-field v-if="!isGone" v-model="formatLabel" 
-      :is-link="!isReadonly && !isDisabled" 
-      :label="props.label" 
-      :placeholder="props.placeholder" 
-      :rules="rules"
-      readonly
-      :required="isRequired" :disabled="isDisabled" @click="onShow" />
+    <van-field v-if="!isGone" v-model="formatLabel" :is-link="!isReadonly && !isDisabled" :label="props.label"
+      :placeholder="props.placeholder" :rules="rules" readonly :required="isRequired" :disabled="isDisabled"
+       @click="onShow" />
     <van-popup v-model:show="data.isShow" destroy-on-close round position="bottom">
       <van-picker :columns="props.options" @cancel="onCancel" @confirm="onConfirm" />
     </van-popup>
@@ -19,6 +15,10 @@ import util from '../util'
 import { useVModel } from '@vueuse/core'
 
 const props = defineProps({
+  modelValue: {
+    type: String,
+    default: null
+  },
   label: {
     type: String,
     default: ''
@@ -40,7 +40,7 @@ const props = defineProps({
     default: "",
   },
   options: {
-    type:Array,
+    type: Array,
     default: []
   }
 })
@@ -59,8 +59,8 @@ const formatLabel = computed(() => {
 onMounted(() => {
 })
 
-const onShow=()=>{
-  if(isReadonly.value || isDisabled.value || isGone.value)
+const onShow = () => {
+  if (isReadonly.value || isDisabled.value || isGone.value)
     return
 
   data.isShow = true

package/src/components/TreePicker.vue

@@ -1,6 +1,6 @@
 <template>
   <van-field v-if="!isGone"
-    :label="props.label" :required="isRequired" :rules="rules" :disabled="isDisabled"
+    :label="props.label" :required="isRequired" :rules="rules" :disabled="isDisabled" :modelValue="modelValue"
     :placeholder="props.placeholder" :is-link="isReadonly ? false : true" @click="data.isShowPop = !isReadonly"
     label-class="label">
     <template #input>

package/src/components/UserPicker.vue

@@ -1,7 +1,7 @@
 <template>
     <van-field v-if="!isGone" :label="props.label" :required="isRequired" :rules="rules" :disabled="isDisabled"
         :placeholder="props.placeholder" :is-link="isReadonly ? false : true" @click="data.isShowPop = !isReadonly"
-        label-class="label">
+        label-class="label" :modelValue="modelValue">
         <template #input>
         <van-tag class="user" v-if="modelValue" :closeable="!isDisabled" type="primary" plain
           @close.stop="onDelete">

package/src/components/UsersPicker.vue

@@ -1,6 +1,6 @@
 <template>
   <van-field v-if="!isGone"
-    :label="props.label" :required="isRequired" :rules="rules" :disabled="isDisabled"
+    :label="props.label" :required="isRequired" :rules="rules" :disabled="isDisabled" :modelValue="modelValue"
     :placeholder="props.placeholder" :is-link="isReadonly ? false : true" @click="data.isShowPop = !isReadonly"
     label-class="label">
     <template #input>

package/src/components/image_picker.vue

@@ -1,5 +1,5 @@
 <template>
-    <van-field v-if="!isGone" name="image" :label="props.label" :required="isRequired" :rules="rules"
+    <van-field v-if="!isGone" name="image" :label="props.label" :required="isRequired" :rules="rules" :modelValue="modelValue"
         label-class="label" :placeholder="props.placeholder">
         <template #input>
             <div class="image-box">

package/src/components/images_picker.vue

@@ -4,7 +4,8 @@
         :required="isRequired" 
         :rules="rules" 
         label-class="label"
-        :placeholder="props.placeholder">
+        :placeholder="props.placeholder"
+        :modelValue="modelValue">
         <template #input>
             <div class="image-box">
                 <van-uploader v-if="props.capture && (!isReadonly && !isDisabled)" v-model="files" multiple

package/src/views/objseditor/index.vue

@@ -9,91 +9,130 @@ import { onMounted, reactive, watch } from "vue";
 
 const data = reactive({
     schema: {
+        // name: {
+        //     label: '房型',
+        //     type: 'String',
+        //     default: '',
+        //     auth: 'required',
+        //     schema: {
+        //         options: [
+        //             {
+        //                 label: "a",
+        //                 value: "a",
+        //                 materials: [
+        //                     {
+        //                         materialId: "jiFdBeVT",
+        //                         quantity: 1,
+        //                     },
+        //                     {
+        //                         materialId: "v6tjBw4R",
+        //                         quantity: 2,
+        //                     }
+        //                 ]
+        //             },
+        //             {
+        //                 label: "b",
+        //                 value: "b",
+        //                 materials: [
+        //                     {
+        //                         materialId: "jiFdBeVT",
+        //                         quantity: 1,
+        //                     },
+        //                     {
+        //                         materialId: "v6tjBw4R",
+        //                         quantity: 2,
+        //                     }
+        //                 ]
+        //             }
+        //         ]
+        //     }
+        // },
+        // quantity: {
+        //     label: '金额',
+        //     type: 'Number',
+        //     default: 0,
+        //     auth: 'required',
+        // },
+        // images: {
+        //     label: '图片',
+        //     type: 'Images',
+        //     default: [],
+        //     auth: 'required',
+        // },
         name: {
-            label: '房型',
+            label: '名称',
             type: 'String',
             default: '',
             auth: 'required',
-            schema: {
-                options: [
-                    {
-                        label: "a",
-                        value: "a",
-                        materials: [
-                            {
-                                materialId: "jiFdBeVT",
-                                quantity: 1,
-                            },
-                            {
-                                materialId: "v6tjBw4R",
-                                quantity: 2,
-                            }
-                        ]
-                    },
-                    {
-                        label: "b",
-                        value: "b",
-                        materials: [
-                            {
-                                materialId: "jiFdBeVT",
-                                quantity: 1,
-                            },
-                            {
-                                materialId: "v6tjBw4R",
-                                quantity: 2,
-                            }
-                        ]
-                    }
-                ]
-            }
-        },
-        quantity: {
-            label: '数量',
-            type: 'Number',
-            default: 1,
-            auth: 'readonly',
-        },
-        images: {
-            label: '图片',
-            type: 'Images',
-            default: [],
-            auth: 'required',
         },
         materials: {
-            label: '材料表',
-            type: 'Array',
+            type: "Array",
+            label: "金额",
             default: [],
             auth: 'required',
             schema: {
-                materialId: {
-                    label: '材料id',
+                title: {
+                    label: '标题',
                     type: 'String',
                     default: '',
                     auth: 'required',
-                    schema: {
-                        options: [
-                            {
-                                "name": "保温棉",
-                                "materialId": "jiFdBeVT",
-                                "specification": "6mm",
-                                "unit": "m"
-                            },
-                            {
-                                "name": "保温棉",
-                                "materialId": "v6tjBw4R",
-                                "specification": "8mm",
-                                "unit": "m"
-                            }]
-                    }
                 },
-                quantity: {
-                    label: '数量',
+                price: {
+                    label: '金额(元)',
                     type: 'Number',
                     default: 0,
-                    auth: 'required'
+                    auth: 'required',
+                    submitValue: (value) => {
+                        console.log('++++++submit value price')
+                        console.log(value)
+                    },
+                },
+                submitItem: (value) => {
+                    console.log('++++++submit item materials')
+                    console.log(value)
+                },
+                deleteItem: (index) => {
+                    console.log('++++++delete item materials')
+                    console.log(index)
                 }
-            }
-        },
+            },
+        }
+
+        // materials: {
+        //     label: '材料表',
+        //     type: 'Array',
+        //     default: [],
+        //     auth: 'required',
+        //     schema: {
+        //         materialId: {
+        //             label: '材料id',
+        //             type: 'String',
+        //             default: '',
+        //             auth: 'required',
+        //             schema: {
+        //                 options: [
+        //                     {
+        //                         "name": "保温棉",
+        //                         "materialId": "jiFdBeVT",
+        //                         "specification": "6mm",
+        //                         "unit": "m"
+        //                     },
+        //                     {
+        //                         "name": "保温棉",
+        //                         "materialId": "v6tjBw4R",
+        //                         "specification": "8mm",
+        //                         "unit": "m"
+        //                     }]
+        //             }
+        //         },
+        //         quantity: {
+        //             label: '数量',
+        //             type: 'Number',
+        //             default: 0,
+        //             auth: 'required'
+        //         }
+        //     }
+        // },
     },
     // schema: {
     //     id:{
@@ -256,6 +295,11 @@ const data = reactive({
     datas: null,
 })
 
+const onSubmit = (params) => {
+    console.log('+++onSubmit+++++++')
+    console.log(params)
+}
+
 watch(() => data.datas, (n, o) => {
     console.log('>>>>', n)
 }, {