widget.qw 1.0.76 → 1.0.77

package/src/components/ObjsEditor.vue

@@ -1,335 +1,335 @@
-<template>
-    <van-field :label="props.label" v-if="!isGone" :disabled="isDisabled" :required="isRequired"
-        :placeholder="props.placeholder">
-        <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;">
-                            <div v-for="(k, j) in visiableKeys" :key="j" style="padding:2px 2px;font-size: 12px;">
-                                <div v-if="props.schema[k].type != 'Images'">
-                                    {{ `${key2name(k)}:${key2value(k, item)}` }}
-                                </div>
-                                <div v-else>
-                                    <ImagesPicker v-model="item[k]" readonly />
-                                </div>
-                            </div>
-                        </div>
-
-                        <div style="display: flex;flex-direction:column;cursor: pointer;">
-                            <van-icon name="edit"
-                                v-if="props.schema.auth != 'readonly' && props.auth != 'readonly' && props.auth != 'disabled'"
-                                @click.stop="onEdit(index)" />
-
-                            <van-icon name="arrow" @click.stop="onBack(index)" style="margin:8px 0" />
-
-                            <van-icon name="cross"
-                                v-if="props.schema.auth != 'readonly' && props.auth != 'readonly' && props.auth != 'disabled'"
-                                @click.stop="onDelete(index)" />
-                        </div>
-                    </div>
-
-                    <van-form v-if="data.isShowInput && index == data.selectIndex" :model="data.inputValue">
-                        <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)}`"
-                                    type="number" />
-
-                                <van-switch v-if="props.schema[key].type == 'Boolean'"
-                                    :disabled="props.schema[key].auth === 'readonly'" v-model="data.inputValue[key]" />
-
-                                <DatetimePicker v-if="props.schema[key].type == 'Datetime'"
-                                    :auth="props.schema[key].auth" v-model="data.inputValue[key]" placeholder="选择时间" />
-
-                                <ImagesPicker v-if="props.schema[key].type == 'Images'" :auth="props.schema[key].auth"
-                                    v-model="data.inputValue[key]" />
-
-                                <DateSelector v-if="props.schema[key]?.schema?.options" v-model="data.inputValue[key]"
-                                    :auth="props.schema[key].auth" :options="props.schema[key]?.schema?.options"
-                                    :placeholder="`请输入${key2name(key)}`" :columnsFieldNames="{
-                                        text: (props.schema[key]?.schema?.options || []).length > 0 ? Object.keys(props.schema[key].schema.options[0])[0] : '',
-                                        value: (props.schema[key]?.schema?.options || []).length > 0 ? Object.keys(props.schema[key].schema.options[0])[1] : ''
-                                    }" @select="onChangeOption(key)" />
-
-                                <ObjsEditor v-if="props.schema[key].type == 'Array' && props.schema[key].auth != 'gone'"
-                                    :auth="props.schema[key].auth" v-model="data.inputValue[key]"
-                                    :schema="props.schema[key].schema" />
-                            </template>
-                        </van-field>
-
-                        <div style="margin: 16px; display: flex;align-items: center;justify-content: center;">
-                            <van-button v-if="data.isShowInput" @click="onInputConfirm" size="mini">保存</van-button>
-                            <van-button v-if="data.isShowInput" @click="onInputCancel" size="mini">取消</van-button>
-                        </div>
-                    </van-form>
-                </div>
-
-                <van-icon name="plus" v-if="!data.isShowInput && props.auth != 'readonly' && props.auth != 'disabled'"
-                    @click="onNewOption" />
-            </div>
-        </template>
-    </van-field>
-</template>
-
-<script setup>
-import { nextTick, ref, onMounted, defineProps, defineEmits, reactive, computed, watch } from 'vue'
-import { useVModel } from '@vueuse/core'
-import util from '@/util'
-import DatetimePicker from './DatetimePicker/index.vue'
-import DateSelector from './data_selector.vue'
-import ImagesPicker from './images_picker.vue'
-
-const props = defineProps({
-    modelValue: {
-        type: Array,
-        default: []
-    },
-    label: {
-        type: String,
-        default: ''
-    },
-    placeholder: {
-        type: String,
-        default: ''
-    },
-    readonly: {
-        type: Boolean,
-        default: true
-    },
-    required: {
-        type: Boolean,
-        default: false
-    },
-    auth: {
-        type: String,
-        default: 'option'
-    },
-    schema: {
-        type: Object,
-        default: {
-            type: "String",
-            label: '名称',
-            default: '',
-            //权限取值范围: required 必填 option 选填 readonly 只读 gone 隐藏
-            auth: 'option'
-        }
-    }
-})
-
-const emit = defineEmits(['update:modelValue'])
-const modelValue = useVModel(props, 'modelValue', emit)
-const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
-
-const data = reactive({
-    inputValue: {},
-    isShowInput: false,
-    selectIndex: -1,
-    oldModelValue: []
-})
-const keys = Object.keys(props.schema)
-const visiableKeys = keys.filter(k => props.schema[k].auth != 'gone')
-
-watch(() => JSON.stringify(modelValue.value), (n, o) => {
-    if (!modelValue.value)
-        modelValue.value = []
-
-    data.oldModelValue = JSON.parse(JSON.stringify(modelValue.value))
-}, {
-    immediate: true
-}, {
-    deep: true
-})
-
-onMounted(() => {
-})
-
-const makeDefaultValue = () => {
-    let res = {}
-
-    keys.forEach(key => {
-        // 复制默认值，防止对象类型的默认值被修改
-        if (props.schema[key].default === 'uuid')
-            res[key] = util.uuid8()
-        else
-            res[key] = JSON.parse(JSON.stringify(props.schema[key].default))
-    })
-
-    return res
-}
-
-const onForward = (index) => {
-    util.arySwapPrev(modelValue.value, index)
-}
-
-const onBack = (index) => {
-    util.arySwapNext(modelValue.value, index)
-}
-
-const onDelete = (index) => {
-    modelValue.value.splice(index, 1)
-}
-
-const key2name = (key) => {
-    return props.schema[key].label
-}
-
-const key2value = (key, item) => {
-    console.log('key2value', key, item[key], item)
-
-    let v = item[key]
-    if (props.schema[key].type === 'Images') {
-        return (v || []).join(',')
-    }
-    else if (Array.isArray(v)) {
-        let formatValues = v.map(e => {
-            let kvs = Object.keys(e).map(k => {
-                console.log(props.schema[key])
-                console.log(key)
-                console.log(v)
-                console.log(k)
-
-                let label = props.schema[key].schema[k].label
-                let formatValue = e[k]
-
-                //下拉框选项，用选项的第二个属性value找选中的选项
-                //再取选项的第一个属性name作为标题
-                if (props.schema[key].schema[k]?.schema?.options) {
-                    let one = props.schema[key].schema[k]?.schema?.options.find(item => item[Object.keys(item)[1]] === formatValue)
-                    if (one)
-                        formatValue = one[Object.keys(one)[0]]
-                    else
-                        formatValue = ''
-                }
-
-                return `${label}:${formatValue}`
-            })
-            return kvs.join(',')
-        })
-
-        return formatValues.join(' > ')
-    }
-    //下拉框选项，用选项的第二个属性value找选中的选项
-    //再取选项的第一个属性name作为标题
-    else if (props.schema[key]?.schema?.options) {
-        let one = props.schema[key]?.schema?.options.find(item => item[Object.keys(item)[1]] === v)
-        return one ? one[Object.keys(one)[0]] : ''
-    }
-    else {
-        if (props.schema[key].type === 'Boolean')
-            v = v ? '是' : '否'
-
-        return v
-    }
-}
-
-const onEdit = (index) => {
-    data.selectIndex = index
-    data.inputValue = JSON.parse(JSON.stringify(modelValue.value[data.selectIndex]))
-    data.isShowInput = true
-}
-
-const onNewOption = () => {
-    let oldModelValue = JSON.parse(JSON.stringify(modelValue.value))
-    modelValue.value = [...(modelValue.value || []), makeDefaultValue()]
-    nextTick(() => {
-        data.oldModelValue = oldModelValue
-        onEdit(modelValue.value.length - 1)
-    })
-}
-
-const onInputConfirm = () => {
-    let idx = modelValue.value.indexOf(item => JSON.stringify(item) === JSON.stringify(data.inputValue))
-    if (idx > -1 && idx != data.selectIndex) {
-        util.warnToast('重复添加')
-        return
-    }
-
-    if (!data.inputValue) {
-        data.isShowInput = false
-        data.inputValue = makeDefaultValue()
-        data.selectIndex = -1
-        modelValue.value = data.oldModelValue
-        return
-    }
-
-    modelValue.value[data.selectIndex] = data.inputValue
-
-    data.isShowInput = false
-    data.inputValue = makeDefaultValue()
-    data.selectIndex = -1
-}
-
-const onInputCancel = () => {
-    data.isShowInput = false
-    data.inputValue = makeDefaultValue()
-    data.selectIndex = -1
-    modelValue.value = data.oldModelValue
-}
-
-const onChangeOption = (key) => {
-    console.log('onChangeOption', key, data.inputValue[key], props.schema[key]?.schema?.options)
-    let val = data.inputValue[key]
-    let options = props.schema[key].schema.options
-
-    //用选中对象给输入项的同名属性值赋值
-    let option = options.find(item => item[Object.keys(item)[1]] === val)
-    Object.keys(option).forEach(k => {
-        if (props.schema[k])
-            data.inputValue[k] = option[k]
-    })
-}
-</script>
-
-<style lang="scss" scoped>
-.widget {
-    background: #fff;
-    box-sizing: border-box;
-    height: 100%;
-    text-align: left;
-    font-size: 12px;
-}
-
-.option {
-    margin: 0 8px 8px 0;
-    padding: 5px 10px;
-    border-radius: 6px;
-    border: 2px solid #e1e1e1;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    color: #666;
-    display: inline-block;
-    position: relative;
-}
-
-:deep(.van-field__label) {
-    margin: auto;
-
-}
-
-:deep(.van-cell) {
-    font-size: 12px;
-    padding: 5px 5px;
-
-}
-
-:deep(.van-icon) {
-    font-size: 12px;
-}
-
-:deep(.van-popup) {
-    .van-cell {
-        padding: 5px 25px;
-    }
-}
+<template>
+    <van-field :label="props.label" v-if="!isGone" :disabled="isDisabled" :required="isRequired"
+        :placeholder="props.placeholder">
+        <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;">
+                            <div v-for="(k, j) in visiableKeys" :key="j" style="padding:2px 2px;font-size: 12px;">
+                                <div v-if="props.schema[k].type != 'Images'">
+                                    {{ `${key2name(k)}:${key2value(k, item)}` }}
+                                </div>
+                                <div v-else>
+                                    <ImagesPicker v-model="item[k]" readonly />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div style="display: flex;flex-direction:column;cursor: pointer;">
+                            <van-icon name="edit"
+                                v-if="props.schema.auth != 'readonly' && props.auth != 'readonly' && props.auth != 'disabled'"
+                                @click.stop="onEdit(index)" />
+
+                            <van-icon name="arrow" @click.stop="onBack(index)" style="margin:8px 0" />
+
+                            <van-icon name="cross"
+                                v-if="props.schema.auth != 'readonly' && props.auth != 'readonly' && props.auth != 'disabled'"
+                                @click.stop="onDelete(index)" />
+                        </div>
+                    </div>
+
+                    <van-form v-if="data.isShowInput && index == data.selectIndex" :model="data.inputValue">
+                        <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)}`"
+                                    type="number" />
+
+                                <van-switch v-if="props.schema[key].type == 'Boolean'"
+                                    :disabled="props.schema[key].auth === 'readonly'" v-model="data.inputValue[key]" />
+
+                                <DatetimePicker v-if="props.schema[key].type == 'Datetime'"
+                                    :auth="props.schema[key].auth" v-model="data.inputValue[key]" placeholder="选择时间" />
+
+                                <ImagesPicker v-if="props.schema[key].type == 'Images'" :auth="props.schema[key].auth"
+                                    v-model="data.inputValue[key]" />
+
+                                <DateSelector v-if="props.schema[key]?.schema?.options" v-model="data.inputValue[key]"
+                                    :auth="props.schema[key].auth" :options="props.schema[key]?.schema?.options"
+                                    :placeholder="`请输入${key2name(key)}`" :columnsFieldNames="{
+                                        text: (props.schema[key]?.schema?.options || []).length > 0 ? Object.keys(props.schema[key].schema.options[0])[0] : '',
+                                        value: (props.schema[key]?.schema?.options || []).length > 0 ? Object.keys(props.schema[key].schema.options[0])[1] : ''
+                                    }" @select="onChangeOption(key)" />
+
+                                <ObjsEditor v-if="props.schema[key].type == 'Array' && props.schema[key].auth != 'gone'"
+                                    :auth="props.schema[key].auth" v-model="data.inputValue[key]"
+                                    :schema="props.schema[key].schema" />
+                            </template>
+                        </van-field>
+
+                        <div style="margin: 16px; display: flex;align-items: center;justify-content: center;">
+                            <van-button v-if="data.isShowInput" @click="onInputConfirm" size="mini">保存</van-button>
+                            <van-button v-if="data.isShowInput" @click="onInputCancel" size="mini">取消</van-button>
+                        </div>
+                    </van-form>
+                </div>
+
+                <van-icon name="plus" v-if="!data.isShowInput && props.auth != 'readonly' && props.auth != 'disabled'"
+                    @click="onNewOption" />
+            </div>
+        </template>
+    </van-field>
+</template>
+
+<script setup>
+import { nextTick, ref, onMounted, defineProps, defineEmits, reactive, computed, watch } from 'vue'
+import { useVModel } from '@vueuse/core'
+import util from '@/util'
+import DatetimePicker from './DatetimePicker/index.vue'
+import DateSelector from './data_selector.vue'
+import ImagesPicker from './images_picker.vue'
+
+const props = defineProps({
+    modelValue: {
+        type: Array,
+        default: []
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    readonly: {
+        type: Boolean,
+        default: true
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    auth: {
+        type: String,
+        default: 'option'
+    },
+    schema: {
+        type: Object,
+        default: {
+            type: "String",
+            label: '名称',
+            default: '',
+            //权限取值范围: required 必填 option 选填 readonly 只读 gone 隐藏
+            auth: 'option'
+        }
+    }
+})
+
+const emit = defineEmits(['update:modelValue'])
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
+
+const data = reactive({
+    inputValue: {},
+    isShowInput: false,
+    selectIndex: -1,
+    oldModelValue: []
+})
+const keys = Object.keys(props.schema)
+const visiableKeys = keys.filter(k => props.schema[k].auth != 'gone')
+
+watch(() => JSON.stringify(modelValue.value), (n, o) => {
+    if (!modelValue.value)
+        modelValue.value = []
+
+    data.oldModelValue = JSON.parse(JSON.stringify(modelValue.value))
+}, {
+    immediate: true
+}, {
+    deep: true
+})
+
+onMounted(() => {
+})
+
+const makeDefaultValue = () => {
+    let res = {}
+
+    keys.forEach(key => {
+        // 复制默认值，防止对象类型的默认值被修改
+        if (props.schema[key].default === 'uuid')
+            res[key] = util.uuid8()
+        else
+            res[key] = JSON.parse(JSON.stringify(props.schema[key].default))
+    })
+
+    return res
+}
+
+const onForward = (index) => {
+    util.arySwapPrev(modelValue.value, index)
+}
+
+const onBack = (index) => {
+    util.arySwapNext(modelValue.value, index)
+}
+
+const onDelete = (index) => {
+    modelValue.value.splice(index, 1)
+}
+
+const key2name = (key) => {
+    return props.schema[key].label
+}
+
+const key2value = (key, item) => {
+    console.log('key2value', key, item[key], item)
+
+    let v = item[key]
+    if (props.schema[key].type === 'Images') {
+        return (v || []).join(',')
+    }
+    else if (Array.isArray(v)) {
+        let formatValues = v.map(e => {
+            let kvs = Object.keys(e).map(k => {
+                console.log(props.schema[key])
+                console.log(key)
+                console.log(v)
+                console.log(k)
+
+                let label = props.schema[key].schema[k].label
+                let formatValue = e[k]
+
+                //下拉框选项，用选项的第二个属性value找选中的选项
+                //再取选项的第一个属性name作为标题
+                if (props.schema[key].schema[k]?.schema?.options) {
+                    let one = props.schema[key].schema[k]?.schema?.options.find(item => item[Object.keys(item)[1]] === formatValue)
+                    if (one)
+                        formatValue = one[Object.keys(one)[0]]
+                    else
+                        formatValue = ''
+                }
+
+                return `${label}:${formatValue}`
+            })
+            return kvs.join(',')
+        })
+
+        return formatValues.join(' > ')
+    }
+    //下拉框选项，用选项的第二个属性value找选中的选项
+    //再取选项的第一个属性name作为标题
+    else if (props.schema[key]?.schema?.options) {
+        let one = props.schema[key]?.schema?.options.find(item => item[Object.keys(item)[1]] === v)
+        return one ? one[Object.keys(one)[0]] : ''
+    }
+    else {
+        if (props.schema[key].type === 'Boolean')
+            v = v ? '是' : '否'
+
+        return v
+    }
+}
+
+const onEdit = (index) => {
+    data.selectIndex = index
+    data.inputValue = JSON.parse(JSON.stringify(modelValue.value[data.selectIndex]))
+    data.isShowInput = true
+}
+
+const onNewOption = () => {
+    let oldModelValue = JSON.parse(JSON.stringify(modelValue.value))
+    modelValue.value = [...(modelValue.value || []), makeDefaultValue()]
+    nextTick(() => {
+        data.oldModelValue = oldModelValue
+        onEdit(modelValue.value.length - 1)
+    })
+}
+
+const onInputConfirm = () => {
+    let idx = modelValue.value.indexOf(item => JSON.stringify(item) === JSON.stringify(data.inputValue))
+    if (idx > -1 && idx != data.selectIndex) {
+        util.warnToast('重复添加')
+        return
+    }
+
+    if (!data.inputValue) {
+        data.isShowInput = false
+        data.inputValue = makeDefaultValue()
+        data.selectIndex = -1
+        modelValue.value = data.oldModelValue
+        return
+    }
+
+    modelValue.value[data.selectIndex] = data.inputValue
+
+    data.isShowInput = false
+    data.inputValue = makeDefaultValue()
+    data.selectIndex = -1
+}
+
+const onInputCancel = () => {
+    data.isShowInput = false
+    data.inputValue = makeDefaultValue()
+    data.selectIndex = -1
+    modelValue.value = data.oldModelValue
+}
+
+const onChangeOption = (key) => {
+    console.log('onChangeOption', key, data.inputValue[key], props.schema[key]?.schema?.options)
+    let val = data.inputValue[key]
+    let options = props.schema[key].schema.options
+
+    //用选中对象给输入项的同名属性值赋值
+    let option = options.find(item => item[Object.keys(item)[1]] === val)
+    Object.keys(option).forEach(k => {
+        if (props.schema[k])
+            data.inputValue[k] = option[k]
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+.widget {
+    background: #fff;
+    box-sizing: border-box;
+    height: 100%;
+    text-align: left;
+    font-size: 12px;
+}
+
+.option {
+    margin: 0 8px 8px 0;
+    padding: 5px 10px;
+    border-radius: 6px;
+    border: 2px solid #e1e1e1;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    color: #666;
+    display: inline-block;
+    position: relative;
+}
+
+:deep(.van-field__label) {
+    margin: auto;
+
+}
+
+:deep(.van-cell) {
+    font-size: 12px;
+    padding: 5px 5px;
+
+}
+
+:deep(.van-icon) {
+    font-size: 12px;
+}
+
+:deep(.van-popup) {
+    .van-cell {
+        padding: 5px 25px;
+    }
+}
 </style>