增加跳转页面选择组件

Tevin

2022-07-12 49f99bdd4b08fbbe692efdfe52ae3ca29f4e8c6c

增加跳转页面选择组件

 forms/form/CForm.vue

@@ -92,6 +92,9 @@
                callback && callback(true);
            });
        },
        $submit() {
            this.handleSubmit();
        },
    },
    mounted() {
        // 当表单项变化时

 forms/select/CJumpSelect.vue

New file
@@ -0,0 +1,79 @@
/**
 * CJumpSelect
 * @author Tevin
 */

<template>
    <view
        class="c-select"
        :class="readOnly ? 'read-only':''"
    >
        <view @tap="evt => handleGoSelect()">
            <AtInput
                :name="itemRes.name"
                :title="itemRes.label"
                :required="itemRes.required"
                :disabled="itemRes.disabled"
                :error="itemRes.error"
                :placeholder="placeholder"
                :value="choose.name"
            >
                <view
                    v-show="!readOnly"
                    class="at-icon at-icon-chevron-right"
                />
            </AtInput>
        </view>
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { AtInput } from 'taro-ui-vue';
import './cSelect.scss';

export default {
    name: 'CJumpSelect',
    components: {
        AtInput,
    },
    props: {
        // 表单数据资源（表单组件内部机制专用）
        itemRes: Object,
        // 占位提示
        placeholder: String,
        // 跨页选择模式
        onPageSelectCall: Function,
        // 只读模式
        readOnly: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            choose: {
                name: '',
                value: null,
            },
        };
    },
    computed: {},
    methods: {
        handleChange(evt) {
            const item = this.options[evt.value];
            this.itemRes.onChange(item[this.optionKey]);
        },
        handleGoSelect() {
            this.onPageSelectCall(selected => {
                this.choose.name = selected.name;
                this.choose.value = selected.value;
                this.itemRes.onChange(selected.value);
            });
        },
    },
    beforeDestroy() {
        this.onPageSelectCall(null);
    },
};
</script>

 forms/select/index.js

@@ -4,7 +4,9 @@
 */

import CSelect from '@components/forms/select/CSelect.vue';
import CJumpSelect from '@components/forms/select/CJumpSelect.vue';

export {
    CSelect,
    CJumpSelect,
}