widget.qw 1.0.24 → 1.0.25

package/src/components/Sheet.vue

@@ -1,93 +1,93 @@
-<template>
-    <van-field :label="props.label" v-if="!isGone" :disabled="isDisabled" :required="isRequired"
-        :placeholder="props.placeholder">
-
-        <template #input>
-            <div class="actionbar" v-if="!isGone && !isDisabled && !isReadonly">
-                <van-button icon="plus" type="primary" size="mini" @click="onAdd(0)" />
-            </div>
-            <div class="item-box" v-for="(item, i) in modelValue" :key="i">
-                <slot name="item" :item="item" :auth="props.auth"></slot>
-                <div class="actionbar" v-if="!isGone && !isDisabled && !isReadonly">
-                    <van-button icon="plus" type="primary" size="mini" @click="onAdd(i+1)" />
-                    <van-button icon="cross" type="primary" size="mini" @click="onDelete(i)" />
-                </div>
-            </div>
-        </template>
-
-    </van-field>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
-import { useVModel } from '@vueuse/core'
-import util from '../util'
-
-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: ''
-    }
-})
-const emit = defineEmits(['update:modelValue'])
-const modelValue = useVModel(props, 'modelValue', emit)
-const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
-
-onMounted(() => {
-})
-
-const onAdd = (idx) => {
-    modelValue.value.splice(idx, 0, {})
-}
-
-const onDelete = (idx) => {
-    modelValue.value.splice(idx, 1)
-}
-
-watch(() => props.modelValue, (o, n) => {
-    if (!props.modelValue)
-        modelValue.value = []
-}, { immediate: true })
-</script>
-
-<style lang="scss" scoped>
-.item-box {
-    position: relative;
-    padding-bottom: 5px;
-    border-bottom: 1px solid #e1e1e1;
-}
-
-.actionbar {
-    display: flex;
-    justify-content: center;
-    margin-top: 5px;
-}
-
-:deep(.label) {
-    color: #000 !important;
-}
-
-:deep(.van-field__control--custom) {
-    display: block;
-}
+<template>
+    <van-field :label="props.label" v-if="!isGone" :disabled="isDisabled" :required="isRequired"
+        :placeholder="props.placeholder">
+
+        <template #input>
+            <div class="actionbar" v-if="!isGone && !isDisabled && !isReadonly">
+                <van-button icon="plus" type="primary" size="mini" @click="onAdd(0)" />
+            </div>
+            <div class="item-box" v-for="(item, i) in modelValue" :key="i">
+                <slot name="item" :item="item" :auth="props.auth"></slot>
+                <div class="actionbar" v-if="!isGone && !isDisabled && !isReadonly">
+                    <van-button icon="plus" type="primary" size="mini" @click="onAdd(i+1)" />
+                    <van-button icon="cross" type="primary" size="mini" @click="onDelete(i)" />
+                </div>
+            </div>
+        </template>
+
+    </van-field>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
+import { useVModel } from '@vueuse/core'
+import util from '../util'
+
+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: ''
+    }
+})
+const emit = defineEmits(['update:modelValue'])
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
+
+onMounted(() => {
+})
+
+const onAdd = (idx) => {
+    modelValue.value.splice(idx, 0, {})
+}
+
+const onDelete = (idx) => {
+    modelValue.value.splice(idx, 1)
+}
+
+watch(() => props.modelValue, (o, n) => {
+    if (!props.modelValue)
+        modelValue.value = []
+}, { immediate: true })
+</script>
+
+<style lang="scss" scoped>
+.item-box {
+    position: relative;
+    padding-bottom: 5px;
+    border-bottom: 1px solid #e1e1e1;
+}
+
+.actionbar {
+    display: flex;
+    justify-content: center;
+    margin-top: 5px;
+}
+
+:deep(.label) {
+    color: #000 !important;
+}
+
+:deep(.van-field__control--custom) {
+    display: block;
+}
 </style>

package/src/components/SingleApiPicker.vue

@@ -1,113 +1,113 @@
-<template>
-  <div class="widget">
-    <van-field v-model="formatLabel" is-link :label="props.label" :placeholder="props.placeholder" 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>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, watch, reactive, computed } from 'vue'
-import util from '../util'
-import { useVModel } from '@vueuse/core'
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: null
-  },
-  label: {
-    type: String,
-    default: ''
-  },
-  placeholder: {
-    type: String,
-    default: ''
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  readonly: {
-    type: Boolean,
-    default: true,
-  },
-  auth: {
-    type: String,
-    default: "",
-  },
-  options: {
-    type:Array,
-    default: []
-  }
-})
-
-const emit = defineEmits(['update:modelValue', 'select'])
-const modelValue = useVModel(props, 'modelValue', emit)
-const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props);
-const data = reactive({
-  isShow: false
-})
-const formatLabel = computed(() => {
-  let one = props.options.find(item => item.value == modelValue.value)
-  return one ? one.text : ''
-})
-
-onMounted(async () => {
-})
-
-const onShow=()=>{
-  if(isReadonly.value || isDisabled.value || isGone.value)
-    return
-
-  data.isShow = true
-}
-
-const onConfirm = ({ selectedOptions }) => {
-  console.log("selectedOptions: " + selectedOptions)
-  let selectOption = selectedOptions[selectedOptions.length - 1]
-  modelValue.value = selectOption.value
-  emit('select', selectOption)
-  data.isShow = false
-}
-
-const onCancel = () => {
-  data.isShow = false
-}
-
-</script>
-
-<style lang="scss" scoped>
-.widget {
-  :deep(.van-cell) {
-    align-items: center;
-  }
-
-  :deep(.van-field__label) {
-    width: 90px;
-    flex: none;
-  }
-
-  .readonly-field {
-    :deep(.van-field__control) {
-      color: #323233;
-      /* 修改文字颜色与普通字段一致 */
-      padding-right: 16px;
-    }
-
-    /* 添加必填星号对齐 */
-    &.van-field--required {
-      :deep(.van-field__label::before) {
-        margin-right: 4px;
-      }
-    }
-  }
-
-  /* 统一字段间距 */
-  .readonly-field {
-    margin: 4px 0;
-  }
-}
+<template>
+  <div class="widget">
+    <van-field v-model="formatLabel" is-link :label="props.label" :placeholder="props.placeholder" 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>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, reactive, computed } from 'vue'
+import util from '../util'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: null
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: true,
+  },
+  auth: {
+    type: String,
+    default: "",
+  },
+  options: {
+    type:Array,
+    default: []
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'select'])
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props);
+const data = reactive({
+  isShow: false
+})
+const formatLabel = computed(() => {
+  let one = props.options.find(item => item.value == modelValue.value)
+  return one ? one.text : ''
+})
+
+onMounted(async () => {
+})
+
+const onShow=()=>{
+  if(isReadonly.value || isDisabled.value || isGone.value)
+    return
+
+  data.isShow = true
+}
+
+const onConfirm = ({ selectedOptions }) => {
+  console.log("selectedOptions: " + selectedOptions)
+  let selectOption = selectedOptions[selectedOptions.length - 1]
+  modelValue.value = selectOption.value
+  emit('select', selectOption)
+  data.isShow = false
+}
+
+const onCancel = () => {
+  data.isShow = false
+}
+
+</script>
+
+<style lang="scss" scoped>
+.widget {
+  :deep(.van-cell) {
+    align-items: center;
+  }
+
+  :deep(.van-field__label) {
+    width: 90px;
+    flex: none;
+  }
+
+  .readonly-field {
+    :deep(.van-field__control) {
+      color: #323233;
+      /* 修改文字颜色与普通字段一致 */
+      padding-right: 16px;
+    }
+
+    /* 添加必填星号对齐 */
+    &.van-field--required {
+      :deep(.van-field__label::before) {
+        margin-right: 4px;
+      }
+    }
+  }
+
+  /* 统一字段间距 */
+  .readonly-field {
+    margin: 4px 0;
+  }
+}
 </style>

package/src/components/SinglePicker.vue

@@ -1,103 +1,103 @@
-<template>
-    <van-field v-if="!isGone" v-model="modelValue" :is-link="!isDisabled" :disabled="isDisabled" readonly name="picker"
-        :label="label" label-class="label" :placeholder="props.placeholder" @click-input="onClick" :required="isRequired"
-        :rules="props.rules" />
-    <van-popup v-model:show="isShowPicker" position="bottom">
-        <van-picker :columns="totalOptions" @confirm="onConfirm" @cancel="isShowPicker = false" />
-    </van-popup>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
-import util from "../util"
-import { useVModel } from '@vueuse/core'
-
-const props = defineProps({
-    id: String,
-    modelValue: String,
-    label: String,
-    placeholder:String,
-    readonly: {
-        type: Boolean,
-        default: true
-    },
-    required: {
-        type: Boolean,
-        default: false
-    },
-    auth: {
-        type: String,
-        default: ''
-    },
-    rules: {
-        type: Array,
-        default: null
-    }
-})
-const emit = defineEmits(['update:modelValue'])
-const modelValue = useVModel(props, 'modelValue', emit)
-const totalOptions = computed(() => {
-    if (!modelValue.value)
-        return columns.value
-
-    let ary = columns.value.filter(item => item.value == modelValue.value)
-    if (ary.length < 1)
-        ary = [{ text: modelValue.value, value: modelValue.value }, ...columns.value]
-    else
-        ary = [...columns.value]
-    return ary
-})
-const { isRequired, isGone, isDisabled,isReadonly } = util.props2auth(props)
-
-const isShowPicker = ref(false)
-const columns = ref([])
-
-onMounted(() => {
-    query()
-})
-
-const query = async () => {
-    let params = {
-        id: props.id,
-    }
-    const res = await util.dictionary_dict(params)
-    console.log(res.data)
-    if (!res.data.parseValue) {
-        columns.value = []
-        return
-    }
-
-    columns.value = res.data.parseValue.map(item => {
-        return {
-            text: item.title,
-            value: item.code
-        }
-    })
-}
-
-const onClick = () => {
-    if (isDisabled.value)
-        return
-
-    isShowPicker.value = true
-}
-
-const onConfirm = ({ selectedOptions }) => {
-    console.log("selectedOptions: " + selectedOptions)
-    modelValue.value = selectedOptions[selectedOptions.length - 1].value
-    isShowPicker.value = false
-}
-</script>
-
-<style lang="scss" scoped>
-:deep(.label) {
-    color: #000 !important;
-}
-
-:deep(.van-field__control:disabled) {
-    color: #000 !important;
-    cursor: not-allowed;
-    opacity: 1;
-    -webkit-text-fill-color: #000;
-}
+<template>
+    <van-field v-if="!isGone" v-model="modelValue" :is-link="!isDisabled" :disabled="isDisabled" readonly name="picker"
+        :label="label" label-class="label" :placeholder="props.placeholder" @click-input="onClick" :required="isRequired"
+        :rules="props.rules" />
+    <van-popup v-model:show="isShowPicker" position="bottom">
+        <van-picker :columns="totalOptions" @confirm="onConfirm" @cancel="isShowPicker = false" />
+    </van-popup>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
+import util from "../util"
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps({
+    id: String,
+    modelValue: String,
+    label: String,
+    placeholder:String,
+    readonly: {
+        type: Boolean,
+        default: true
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    auth: {
+        type: String,
+        default: ''
+    },
+    rules: {
+        type: Array,
+        default: null
+    }
+})
+const emit = defineEmits(['update:modelValue'])
+const modelValue = useVModel(props, 'modelValue', emit)
+const totalOptions = computed(() => {
+    if (!modelValue.value)
+        return columns.value
+
+    let ary = columns.value.filter(item => item.value == modelValue.value)
+    if (ary.length < 1)
+        ary = [{ text: modelValue.value, value: modelValue.value }, ...columns.value]
+    else
+        ary = [...columns.value]
+    return ary
+})
+const { isRequired, isGone, isDisabled,isReadonly } = util.props2auth(props)
+
+const isShowPicker = ref(false)
+const columns = ref([])
+
+onMounted(() => {
+    query()
+})
+
+const query = async () => {
+    let params = {
+        id: props.id,
+    }
+    const res = await util.dictionary_dict(params)
+    console.log(res.data)
+    if (!res.data.parseValue) {
+        columns.value = []
+        return
+    }
+
+    columns.value = res.data.parseValue.map(item => {
+        return {
+            text: item.title,
+            value: item.code
+        }
+    })
+}
+
+const onClick = () => {
+    if (isDisabled.value)
+        return
+
+    isShowPicker.value = true
+}
+
+const onConfirm = ({ selectedOptions }) => {
+    console.log("selectedOptions: " + selectedOptions)
+    modelValue.value = selectedOptions[selectedOptions.length - 1].value
+    isShowPicker.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.label) {
+    color: #000 !important;
+}
+
+:deep(.van-field__control:disabled) {
+    color: #000 !important;
+    cursor: not-allowed;
+    opacity: 1;
+    -webkit-text-fill-color: #000;
+}
 </style>