@leevan/jtui 2.0.32 → 2.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leevan/jtui",
-  "version": "2.0.32",
+  "version": "2.0.34",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/packages/Search-Type/index.js

@@ -0,0 +1,17 @@
+/*
+ * @Author: leevan
+ * @Date: 2024-04-20 17:28:33
+ * @LastEditTime: 2024-04-20 17:28:36
+ * @LastEditors: leevan
+ * @FilePath: /jtui-pc/packages/Search-Type/index.js
+ */
+// 导入组件，组件必须声明 name
+import SearchType from './index.vue';
+
+// 为组件提供 install 安装方法，供按需引入
+SearchType.install = function (Vue) { 
+  Vue.component(SearchType.name, SearchType)
+}
+
+// 导出组件
+export default SearchType

package/packages/Search-Type/index.vue

@@ -0,0 +1,555 @@
+<!--
+ * @Author: leevan
+ * @Date: 2024-04-20 17:23:32
+ * @LastEditTime: 2024-04-22 16:55:50
+ * @LastEditors: leevan
+ * @FilePath: /jt-system-manage/src/packages/Search-Type/index.vue
+-->
+<template>
+    <div class="search-tb" @keydown.enter="enterClick">
+        <div v-for="(im, index) in viewData" :key="index" class="search-tb-row">
+            <div style="display:inline-block">
+                <span v-if="index > 0">分组</span><el-checkbox v-if="index > 0" v-model="im.checked"></el-checkbox>
+                <el-radio-group style="margin-left:12px" v-if="index > 0" v-model="im.radio" size="mini">
+                    <el-radio-button label="and">并且</el-radio-button>
+                    <el-radio-button label="or">或者</el-radio-button>
+                </el-radio-group>
+
+                <span :style="{ marginLeft: index === 0 && viewData.length > 1 ? '189px' : 0 }" @click="getData">查询类型</span>
+                <el-select @change="typeChange(arguments, im)" size="mini" popper-class="max-height-popper search-base-slt"
+                    v-model="im.search_type" placeholder="请选择">
+                    <el-option v-for="(item, index) in options_type"
+                    :key="index" :label="item.srname"
+                        :value="item.rootpath">
+                    </el-option>
+                </el-select>
+            </div>
+
+            <div style="display:inline-block" v-if="im.status == 1 || im.status == 2 || im.status == 8">
+                <jt-form-pc size="mini" id="form_s1" :collapseTags="true" :model="im.model" labelWidth="12"
+                    @casChange="casChange(arguments, im)" :formConfig="im.formConfig">
+                </jt-form-pc>
+            </div>
+
+            <div style="display:inline-block;margin-left:10px;" v-if="im.status == 3 || im.status == 6">
+                <!-- <jt-form-pc size="mini" id="form_s2" :model="im.model_3" 
+                labelWidth="12"
+                :formConfig="im.formConfig_3">
+                </jt-form-pc> -->
+                <el-input size="mini" v-model="im.model_3.input" placeholder="请输入"></el-input>
+            </div>
+
+            <div style="display:inline-block" v-if="im.status == 7">
+                <jt-form-pc size="mini" id="form_s3" :model="im.model_4" labelWidth="12" :formConfig="im.formConfig_4">
+                </jt-form-pc>
+            </div>
+
+            <div style="display:inline-block" v-if="im.status == 5">
+                <el-cascader-multi ref="type5Ref" style="margin-left:15px;width:300px" size="mini" collapse-tags
+                show-leaf-label :is-two-dimension-value="false" v-model="im.model_5.cascader"
+                    :data="im.formConfig_5"> </el-cascader-multi>
+            </div>
+
+            <div style="display:inline-block;margin-left:12px;position:relative;"
+                v-if="im.status == 3 || im.status == 4 || im.status == 7">
+                <el-checkbox-group size="mini" v-model="im.stations">
+                    <el-checkbox-button v-for="(item, index) in im.checkboxData" :key="index"
+                        :label="item.value">{{ item.label }}</el-checkbox-button>
+                </el-checkbox-group>
+            </div>
+
+            <div style="display:inline-block;margin-left:12px;position:relative;"
+            v-if="im.status == 9">
+                <tree-select v-model="im.stations" :activeType="im.active_type" 
+                :baseUrl="listuri"
+                :checked="im.checkboxData"/>
+            </div>
+
+            <div class="st-btns" v-show="options_type.length > 1 && options_type[0].value !== 'All'">
+                <i class="jtIcon iconjianshao" v-if="index > 0" @click="dec_type(index)"></i>
+                <i style="color:#586bd1;margin-left:6px;float: right;" class="jtIcon iconjia1" @click="add_type"></i>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TreeSelect from './tree-select.vue'
+export default {
+    name:'search-type',
+    components:{
+        TreeSelect
+    },
+    props: {
+        options_type: {
+            type: Array,
+            default: () => []
+        },
+        listuri: {
+            type: String,
+            default: '',
+        },
+        selected: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            isInit: true,
+            viewData: [
+                {
+                    active_type: null,
+                    search_type: this.selected,
+                    status: -1,
+                    model: {
+                        cascader: ''
+                    },
+                    model_3: {
+                        input: ''
+                    },
+                    m_cas: [],
+                    checkboxData: [],
+                    stations: [],
+                    formConfig: [
+                        {
+                            label: "",
+                            modelKey: "cascader",
+                            type: "cascader",
+                            width: 300,
+                            path: '',
+                            childPath: '',
+                            checkStrictly: false,
+                            params: {},
+                            placeholder: '',
+                            multiple: true,
+                            isEnd: true,
+                            filterable: false
+                        }
+                    ],
+                    formConfig_3: [
+                        {
+                            label: "",
+                            modelKey: "input",
+                            type: "input",
+                            width: 200,
+                            placeholder: '请输入关键字'
+                        }
+                    ],
+                    model_4: {
+                        select: ''
+                    },
+                    formConfig_4: [
+                        {
+                            label: "",
+                            modelKey: "select",
+                            type: "select_r",
+                            width: 260,
+                            options: [],
+                            multiple: true,
+                            collapse: true,
+                            remoteMethod: () => { }
+                        }
+                    ],
+                    model_5: {
+                        cascader: []
+                    },
+                    formConfig_5: [],
+                }
+            ],
+
+        }
+    },
+    created() {
+        this.typeChange([this.selected], this.viewData[0])
+    },
+    methods: {
+        removeDuplicateObj(arr) {
+            let obj = {};
+            arr = arr.reduce((newArr, next) => {
+                obj[next.value] ? "" : (obj[next.value] = true && newArr.push(next));
+                return newArr;
+            }, []);
+            return arr;
+        },
+        // 监听本页面的回车事件
+        enterClick(e) {
+            if (e.keyCode === 13) {
+                this.$emit('initedData', this.getData());
+            }
+        },
+        add_type() {
+            this.viewData.push({
+                active_type: null,
+                checked: false,
+                search_type: '',
+                status: -1,
+                model: {
+                    cascader: ''
+                },
+                model_3: {
+                    input: ''
+                },
+                m_cas: [],
+                checkboxData: [],
+                stations: [],
+                radio: 'and',
+                formConfig: [
+                    {
+                        label: "",
+                        modelKey: "cascader",
+                        type: "cascader",
+                        width: 300,
+                        path: '',
+                        childPath: '',
+                        checkStrictly: false,
+                        params: {},
+                        placeholder: '',
+                        multiple: true,
+                        isEnd: true,
+                        filterable: false
+                    }
+                ],
+                formConfig_3: [
+                    {
+                        label: "",
+                        modelKey: "input",
+                        type: "input",
+                        width: 200,
+                        placeholder: '请输入关键字'
+                    }
+                ],
+                model_4: {
+                    select: ''
+                },
+                formConfig_4: [
+                    {
+                        label: "",
+                        modelKey: "select",
+                        type: "select_r",
+                        width: 200,
+                        options: [],
+                        multiple: true,
+                        collapse: true,
+                        remoteMethod: () => { }
+                    }
+                ],
+                model_5: {
+                    cascader: []
+                },
+                formConfig_5: []
+            })
+            this.$emit('count', this.viewData.length);
+            this.$parentStore.state.main.JtMessage.emit('searchTypeAdd');
+        },
+        dec_type(index) {
+            this.viewData.splice(index, 1);
+            this.$emit('count', this.viewData.length);
+            this.$parentStore.state.main.JtMessage.emit('searchTypeAdd');
+        },
+        async typeChange(arg, im) {
+            const result = this.options_type.find(item => item.rootpath === arg[0]);
+            im.active_type = result;
+            im.status = -1;
+            im.formConfig[0].path = this.listuri;
+            im.formConfig[0].childPath = result.rootpath;
+            this.$nextTick(() => {
+                im.status = result.invlbz;
+                this.$nextTick(async () => {
+                    if (result.invlbz === '1') {
+                        im.formConfig[0].multiple = false;
+                    } else if (result.invlbz === '2' || result.invlbz === '8') {
+                        im.formConfig[0].multiple = true;
+                    } else if (result.invlbz === '3') {
+                        im.checkboxData = result.srfield;
+                        im.stations = result.selected;
+                    } else if (result.invlbz === '4') {
+                        const { data: res } = await this.$axios.post(this.listuri + result.rootpath);
+                        im.stations = res.filter(item => item.selected == '1').map(i => i.value);
+                        im.checkboxData = res;
+                    } else if (result.invlbz === '5') {
+                        im.formConfig_5 = result.enumlists
+                        if (Array.isArray(result.selected) && result.selected[0].label == '默认分组') {
+                            im.model_5.cascader = result.selected[0].value
+                        } else {
+                            im.model_5.cascader = result.selected;
+                        }
+                    } else if (result.invlbz === '7') {
+                        im.stations = result.selected;
+                        im.formConfig_4[0].remoteMethod = (query) => (this.remoteMethod(query, im, result))
+                        im.checkboxData = result.enumlists;
+                    }else if(result.invlbz === '9') {
+                        if(result.selected){
+                            im.checkboxData = result.selected;
+                            im.stations = result.selected;
+                        }
+                    }
+                    this.$nextTick(() => {
+                        if (this.isInit) {
+                            this.$emit('initedData', this.getData());
+                            this.isInit = false;
+                        }
+                    })
+                })
+
+            })
+        },
+        casChange(arg, im) {
+            const res = arg[0].map(item => item.value)
+            im.m_cas = res;
+        },
+        //获取查询下拉列表
+        getData() {
+            return this.viewData.map(this.handlerData);
+        },
+        handlerData(item, index) {
+            let pubObj = {
+                invlbz: item.status,
+                group: item.checked,
+                relation: item.radio,
+            }
+            switch (item.status) {
+                case '0': {
+                    return Object.assign(pubObj, {
+                        srfield: item.active_type.srfield,
+                        invalue: item.active_type.srfield,
+                    })
+                }
+                case '1': {
+                    if (item.model.cascader.length === 0) {
+                        return false
+                    }
+                    return Object.assign(pubObj, {
+                        srfield: item.active_type.srfield,
+                        invalue: item.model.cascader[0]
+                    })
+                }
+                case '2': {
+                    if (item.m_cas.length === 0) {
+                        return false
+                    }
+                    let casParam;
+                    if (item.active_type.invltp === '1') {
+                        casParam = item.m_cas.map(items => `'${items}'`).join(',')
+                    } else if (item.active_type.invltp === '2') {
+                        casParam = item.m_cas.join(',');
+                    }
+                    return Object.assign(pubObj, {
+                        srfield: item.active_type.srfield,
+                        invalue: casParam
+                    })
+                }
+                case '3': {
+                    if (item.stations.length === 0 || item.model_3.input === '') {
+                        return false
+                    }
+                    return Object.assign(pubObj, {
+                        srfield: item.stations,
+                        invalue: item.model_3.input
+                    })
+                }
+                case '4': {
+                    if (item.stations.length === 0) {
+                        return false
+                    }
+                    return Object.assign(pubObj, {
+                        srfield: item.active_type.srfield,
+                        invalue: item.stations.join(',')
+                    })
+                }
+                case '5': {
+                    if (item.model_5.cascader.length === 0) {
+                        return false
+                    }
+                    return Object.assign(pubObj, {
+                        srfield: item.active_type.srfield,
+                        invalue: item.model_5.cascader.join(',')
+                    })
+                }
+                case '6': {
+                    if (item.model_3.input === '') {
+                        return false
+                    }
+                    return Object.assign(pubObj, {
+                        srfield: item.active_type.srfield,
+                        invalue: item.model_3.input
+                    })
+                }
+                case '7': {
+                    if (item.stations.length === 0 || item.model_4.select.length === 0) {
+                        return false
+                    }
+                    let casParam;
+                    if (item.active_type.invltp === '1') {
+                        casParam = item.model_4.select.map(items => `'${items}'`).join(',')
+                    } else if (item.active_type.invltp === '2') {
+                        casParam = item.model_4.select.join(',');
+                    }
+                    return Object.assign(pubObj, {
+                        srfield: item.active_type.srfield,
+                        invalue: casParam
+                    })
+                }
+                case '8': {
+                    if (item.m_cas.length === 0) {
+                        return false
+                    }
+                    let casParam;
+                    if (item.active_type.invltp === '1') {
+                        casParam = item.m_cas.map(items => `'${items}'`).join(',')
+                    } else if (item.active_type.invltp === '2') {
+                        casParam = item.m_cas.join(',');
+                    }
+                    return Object.assign(pubObj, {
+                        srfield: item.active_type.srfield.replace(/invalue/, casParam),
+                        invalue: casParam,
+                    })
+                }
+                case '9': {
+                    if(item.stations.length === 0){
+                        return false
+                    }
+                    let casParam;
+                    if (item.active_type.invltp === '1') {
+                        casParam = item.stations.map(items => `'${items.id}'`).join(',')
+                    } else if (item.active_type.invltp === '2') {
+                        casParam = item.stations.join(',');
+                    }
+                    console.log(casParam)
+                    return Object.assign(pubObj, {
+                        srfield: item.active_type.srfield,
+                        invalue: casParam
+                    })
+                }
+                case -1: {
+                    return false;
+                }
+            }
+        },
+        async remoteMethod(data, im, result) {
+            if (data == '') { im.formConfig_4[0].options = []; return; }
+            const { data: res1 } = await this.$axios.post(this.listuri + result.rootpath, {
+                searchs: im.stations,
+                invalue: data
+            });
+            im.formConfig_4[0].options = res1;
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+span {
+    padding: 0 12px;
+    color:#666666;
+    font-size:14px;
+}
+
+.st-btns {
+    margin-left: auto;
+    margin-right: 10px;
+    width: 46px;
+    position: relative;
+
+    i {
+        font-size: 20px;
+    }
+}
+
+.search-tb-row {
+    height: 35px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+}
+
+.search-tb-row ::v-deep .el-form-item {
+    margin: 0 !important;
+}
+</style>
+
+<style>
+.search-tb .el-cascader__tags,
+.search-tb .el-select__tags {
+    flex-wrap: nowrap;
+}
+
+.search-tb .el-cascader__tags .el-tag,
+.search-tb .el-select__tags .el-tag {
+    max-width: 75%;
+}
+
+.search-tb .el-tag:nth-child(1) .el-select__tags-text {
+    display: inline-block;
+    width: 120px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.search-tb .el-tag:nth-child(2) {
+    position: relative;
+    left: 20px;
+}
+
+.search-tb .el-select__tags .el-tag .el-icon-close {
+    top: -5px;
+}
+.search-base-slt{
+    z-index:99999 !important;
+}
+</style>
+<style lang="scss">
+.multi-cascader-style{
+    max-height:60vh !important;
+    .elui-select-dropdown__wrap{
+        max-height:60vh !important;
+    }
+    .elui-select-dropdown__item{
+        height:auto !important;
+        .ground{
+            height:auto !important;
+            .floor-item{
+                height:100% !important;
+                &::-webkit-scrollbar {
+                    width: 10px;
+                    height: 10px;
+                    display: none;
+                }
+                &:hover::-webkit-scrollbar{
+                    display: block;
+                }
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 10px;
+                    background:#989ba380;
+                }
+            }
+            ul{
+                &::-webkit-scrollbar {
+                    width: 10px;
+                    height: 10px;
+                    display: none;
+                }
+                &:hover::-webkit-scrollbar{
+                    display: block;
+                }
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 10px;
+                    background:#989ba380;
+                }
+                .active-li{
+                    color: #409EFF !important;
+                    background-color:#f5f7fa !important;
+                }
+                .li-style{
+                    &:hover{
+                        color: #409EFF !important;
+                        background-color:#f5f7fa !important;
+                    }
+                }
+                
+            }
+        }
+    }
+}
+</style>