组件.搜索

12003

普通搜索

<jh-toast />
<v-app>
    <v-row class="mt-3 ml-3">
        <v-col cols="12" xs="12" sm="6" md="4" xl="3" class="pa-0 pr-0 pr-sm-2">
        <v-select v-model="serverSearchInput.level" color="success" prefix="年级：" class="jh-v-input bg-white" :items="constantObj.level" dense filled single-line hide-details></v-select>
        </v-col>
        <v-col cols="12" xs="12" sm="6" md="4" xl="3" class="pa-0 pr-0 pr-md-2 pt-2 pt-sm-0">
            <v-select v-model="serverSearchInput.gender" color="success" prefix="性别：" class="jh-v-input bg-white" :items="constantObj.gender" dense filled single-line hide-details></v-select>
        </v-col>
        <div class="jh-backend-search-btn">
            <v-btn class="elevation-0 float-right mt-2 mt-md-0" color="success" small @click="() => { window.vtoast.success(`年级:${serverSearchInput.level} 性别:${serverSearchInput.gender}`) }">
            查询
            </v-btn>
        </div>
    </v-row>
</v-app>
<script type="module">
new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
         constantObj: {
            level: [{"value": "01", "text": "一年级"}, {"value": "02", "text": "二年级"}, {"value": "03", "text": "三年级"}],
            gender: [{"value": "male", "text": "男"}, {"value": "female", "text": "女"}],
         },
        serverSearchInput: {
         level: null,
         gender: null
        },
     }),
 })
</script>

场景搜索

<jh-toast />
<jh-mask />
<jh-confirm-dialog />
<v-app>
    <div class="jh-page-second-bar px-8">
        <v-row class="align-center" dense>
            <v-col cols="12" xs="12" sm="4" md="4" xl="3">
                <div class="py-4 text-body-1 font-weight-bold d-flex align-center">场景搜索</div>
            </v-col>
            <!-- 搜索条件表单 >>>>>>>> -->
            <v-col cols="12" xs="12" sm="8" md="8" xl="9">
                <v-row class="jh-backend-form-container justify-end ma-0 py-3">
                    <v-btn-toggle :value="0" mandatory dense color="success" @change="doUiAction('useScene', sceneList[$event])" >
                        <v-btn small v-for="scene, index in sceneList" :key="index"> {{scene.name}} </v-btn> 
                    </v-btn-toggle>
                    <div class="jh-backend-search-btn">
                        <v-btn class="elevation-0 float-right mt-2 mt-md-0" color="success" small
                            @click="doUiAction('getTableData')">
                            查询
                        </v-btn>
                    </div>
                </v-row>
            </v-col>
            <!-- <<<<<<<< 搜索条件表单 -->
        </v-row>
    </div>
</v-app>
<script type="module">
new Vue({
    el: '#app',
    template: '#app-template',
    vuetify: new Vuetify(),
    data: () => ({
        sceneList: [
            {"form": {}, "name": "全部", "id": "scene-fixed-all"},
            {"form": {"level": "01", "gender": "male"}, "name": "一年级的男生", "id": "scene-fixed-1"},
            {"form": {"level": "02", "gender": "female"}, "name": "二年级的女生", "id": "scene-fixed-2"},
        ],
        currentSceneId: 'scene-fixed-all',
        serverSearchInput: {
            level: null,
            gender: null
        },
    }),
    methods: {
        async doUiAction(uiActionId, uiActionData) {
            try {
                switch (uiActionId) {
                    case 'useScene':
                        await this.useScene(uiActionData);
                        break;
                    case 'getTableData':
                        await this.getTableData();
                        break;
                    default:
                        console.error("[doUiAction] uiActionId not find", { uiActionId });
                        break;
                }
            } catch (error) {
                throw error;
            } finally {
                window.jhMask && window.jhMask.hide();
            }
        },
        async getTableData() {
            window.vtoast.show({ message: `${JSON.stringify(this.serverSearchInput)}`, icon: 'mdi-help-circle' })
        },
        // ---------- 场景 uiAction >>>>>>>>>> --------
        useScene(funObj) {
            this.currentSceneId = funObj.id;
            this.serverSearchInput = _.cloneDeep(funObj.form);
        },
        // ---------- <<<<<<<<<<< 场景 uiAction --------
    }
})
</script>

定制场景搜索

<jh-toast />
<jh-mask />
<jh-confirm-dialog />
<v-app>
    <div class="jh-page-second-bar px-8">
        <v-row class="align-center" dense>
            <v-col cols="12" xs="12" sm="4" md="4" xl="3">
                <div class="py-4 text-body-1 font-weight-bold d-flex align-center">场景搜索</div>
            </v-col>
            <!-- 搜索条件表单 >>>>>>>> -->
            <v-col cols="12" xs="12" sm="8" md="8" xl="9">
                <v-row class="jh-backend-form-container justify-end ma-0 py-3">
                    <jh-scene
                        :initFormData="serverSearchInput" :sceneListKey="localSceneListKey"
                        :currentSceneId="currentSceneId" @useScene="doUiAction('useScene', $event)">
                        <template v-slot:form="{form}">
                            <v-select class="jh-v-input mb-2" dense single-line filled clearable prefix="年级：" v-model="form.level" :items="constantObj.level"></v-select>
                            <v-select class="jh-v-input" dense single-line filled clearable prefix="性别：" v-model="form.gender" :items="constantObj.gender"></v-select>
                        </template>
                    </jh-scene>
                    <div class="jh-backend-search-btn">
                        <v-btn class="elevation-0 float-right mt-2 mt-md-0" color="success" small
                            @click="doUiAction('getTableData')">
                            查询
                        </v-btn>
                    </div>
                </v-row>
            </v-col>
            <!-- <<<<<<<< 搜索条件表单 -->
        </v-row>
    </div>
</v-app>
{% include 'component/jianghuJs/jhSceneV4.html' %}
<script type="module">
new Vue({
    el: '#app',
    template: '#app-template',
    vuetify: new Vuetify(),
    data: () => ({
        constantObj: {
            gender: [{"value": "male", "text": "男"}, {"value": "female", "text": "女"}],
            level: [{"value": "01", "text": "一年级"}, {"value": "02", "text": "二年级"}, {"value": "03", "text": "三年级"}],
        },
        currentSceneId: 'scene-fixed-all',
        localSceneListKey: `${window.appInfo.appId}_${window.appInfo.pageId}_${window.userInfo.userId}`,
        serverSearchInput: {
            level: null,
            gender: null
        },
    }),
    async created() {
        this.doUiAction("setDefaultSceneData");
    },
    methods: {
        async doUiAction(uiActionId, uiActionData) {
            try {
                switch (uiActionId) {
                    case 'setDefaultSceneData':
                        await this.setDefaultSceneData();
                        break;
                    case 'useScene':
                        await this.useScene(uiActionData);
                        break;
                    case 'getTableData':
                        await this.getTableData();
                        break;
                    default:
                        console.error("[doUiAction] uiActionId not find", { uiActionId });
                        break;
                }
            } catch (error) {
                throw error;
            } finally {
                window.jhMask && window.jhMask.hide();
            }
        },
        async getTableData() {
            window.vtoast.show({ message: `${JSON.stringify(this.serverSearchInput)}`, icon: 'mdi-help-circle' })
        },
        // ---------- 场景 uiAction >>>>>>>>>> --------
        setDefaultSceneData() {
            let localSceneList = localStorage.getItem(this.localSceneListKey);
            if (localSceneList == null) localSceneList = '[]';
            localSceneList = JSON.parse(localSceneList);
            localSceneList = _.filter(localSceneList, function (sceneItem) {
                return !sceneItem.system;
            });
            localSceneList = [
                {"form": {}, "name": "全部", "default": true, "id": "scene-custom-all", 'system': true},
                {"form": {"level": "02", "gender": "male"}, "name": "二年级的男生", "default": null, "id": "scene-custom-1", 'system': true},
                {"form": {"level": "02", "gender": "female"}, "name": "二年级的女生", "default": null, "id": "scene-custom-2", 'system': true},
                ...localSceneList
            ];
            this.currentSceneId = 'scene-custom-all';
            localStorage.setItem(this.localSceneListKey, JSON.stringify(localSceneList))
        },
        useScene(funObj) {
            this.currentSceneId = funObj.id;
            this.serverSearchInput = _.cloneDeep(funObj.form);
        },
        // ---------- <<<<<<<<<<< 场景 uiAction --------
    }
})
</script>