From a4563d338b4df06d3fe6ca9123dcd1ec9c23a81b Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Fri, 17 Nov 2023 11:40:37 +0800
Subject: [PATCH] 表单体验升级，支持设定错误集，支持错误自动滚动

---
 forms/select/CSelect.vue |  126 ++++++++++++++++++++++++++++++++++-------
 1 files changed, 104 insertions(+), 22 deletions(-)

diff --git a/forms/select/CSelect.vue b/forms/select/CSelect.vue
index c7f0381..3b32ef1 100644
--- a/forms/select/CSelect.vue
+++ b/forms/select/CSelect.vue
@@ -4,31 +4,70 @@
  */
 
 <template>
-    <view class="c-select">
-        <picker
-            mode="selector"
-            :range="options"
-            :value="current"
-            range-key="name"
-            @change="evt=>handleChange(evt.detail)"
+    <view
+        class="c-select"
+        :class="readOnly ? 'read-only':''"
+    >
+        <!-- 下拉选择模式 -->
+        <view
+            v-if="!selectByPage"
+            class="c-select-slot-mode"
+        >
+            <picker
+                class="c-select-input"
+                mode="selector"
+                :range="options"
+                :value="current"
+                range-key="name"
+                @change="evt=>handleChange(evt.detail)"
+            >
+                <AtInput
+                    ref="input"
+                    :name="itemRes.name"
+                    :title="itemRes.label"
+                    :required="itemRes.required"
+                    :disabled="itemRes.disabled"
+                    :error="itemRes.error"
+                    :placeholder="placeholder"
+                    :value="selected"
+                >
+                    <view
+                        v-show="!readOnly"
+                        class="at-icon at-icon-chevron-right"
+                    />
+                </AtInput>
+            </picker>
+            <view class="c-select-slot">
+                <slot />
+            </view>
+        </view>
+        <!-- 跳转页面模式 -->
+        <view
+            v-else-if="selectByPage.length > 5"
+            @tap="evt => onGoToSelectorPage()"
         >
             <AtInput
-                ref="input"
-                :name="itemData.name"
-                :title="itemData.label"
-                :required="itemData.required"
-                :error="itemData.error"
+                :name="itemRes.name"
+                :title="itemRes.label"
+                :required="itemRes.required"
+                :disabled="itemRes.disabled"
+                :error="itemRes.error"
                 :placeholder="placeholder"
-                :value="selected"
+                :value="choose.name"
             >
-                <view class="at-icon at-icon-chevron-right" />
+                <view
+                    v-show="!readOnly"
+                    class="at-icon at-icon-chevron-right"
+                />
             </AtInput>
-        </picker>
+        </view>
     </view>
 </template>
 
 <script>
+import Taro from '@tarojs/taro';
 import { AtInput } from 'taro-ui-vue';
+import { $pagePoster } from '@components/common/PagePoster';
 import './cSelect.scss';
 
 export default {
@@ -37,19 +76,36 @@
         AtInput,
     },
     props: {
+        // 表单数据资源（表单组件内部机制专用）
+        itemRes: Object,
+        // 选择菜单选项（浮窗模式）
         options: Array,
+        // 占位提示
         placeholder: String,
-        itemData: Object,
+        // 开启选择菜单跳转选择页面模式，并指定功能页面
+        selectByPage: String,
+        // 页面模式下，选择完成后的回调
+        onSelectFromPage: Function,
+        // 只读模式
+        readOnly: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
-        return {};
+        return {
+            choose: {
+                name: '',
+                value: null,
+            },
+        };
     },
     computed: {
         optionKey() {
             return typeof (this.options[0] || {}).value === 'undefined' ? 'id' : 'value';
         },
         current() {
-            const curVal = this.itemData.formData[this.itemData.name];
+            const curVal = this.itemRes.formData[this.itemRes.name];
             for (let i = 0, item; (item = this.options[i]); i++) {
                 if (curVal === item[this.optionKey]) {
                     return i;
@@ -58,7 +114,7 @@
             return -1;
         },
         selected() {
-            const curVal = this.itemData.formData[this.itemData.name];
+            const curVal = this.itemRes.formData[this.itemRes.name];
             for (let i = 0, item; (item = this.options[i]); i++) {
                 if (curVal === item[this.optionKey]) {
                     return item.name;
@@ -69,10 +125,36 @@
     },
     methods: {
         handleChange(evt) {
-            const item = this.options[evt.value];
-            this.itemData.onChange(item[this.optionKey]);
+            if (typeof this.optionKey === 'undefined') {
+                this.itemRes.onChange();
+            } else {
+                const item = this.options[evt.value];
+                this.itemRes.onChange(item[this.optionKey]);
+            }
+        },
+        onGoToSelectorPage() {
+            let url = this.selectByPage;
+            if (this.selectByPage.indexOf('?') > 0) {
+                url += '&mode=CSelect';
+            } else {
+                url += '?mode=CSelect';
+            }
+            if (this._eventor) {
+                // 销毁上次事件收发器
+                this._eventor.destroy();
+            }
+            this._eventor = $pagePoster.createEventor();
+            this._eventor.on('@linked', () => {
+                this._eventor.emit('lastValue', this.choose.value);
+            });
+            this._eventor.on('selected', data => {
+                this.choose.name = data.name;
+                this.choose.value = data.value;
+                this.itemRes.onChange(data.value);
+                this.onSelectFromPage && this.onSelectFromPage(data.value);
+            });
+            Taro.navigateTo({ url: url + '&eventorId=' + this._eventor.id });
         },
     },
-    mounted() {},
 };
 </script>
\ No newline at end of file

--
Gitblit v1.9.1