@leevan/jtui 2.0.33 → 2.0.35

package/packages/Search-Type/index.vue

@@ -0,0 +1,508 @@
+<!--
+ * @Author: leevan
+ * @Date: 2024-04-20 17:23:32
+ * @LastEditTime: 2024-05-27 17:18:15
+ * @LastEditors: leevan
+ * @FilePath: /jtui-pc/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'
+import ElCascaderMulti from './el-cascader-multi/src/multi-cascader/multi-cascader.vue'
+export default {
+    name:'search-type',
+    components:{
+        TreeSelect,
+        ElCascaderMulti
+    },
+    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">
+.max-height-popper .el-select-dropdown__wrap {
+  max-height: 540px;
+}
+</style>

package/packages/Search-Type/tree-select.vue

@@ -0,0 +1,134 @@
+<template>
+    <el-popover
+    placement="bottom"
+    width="400"
+    popper-class="tree-select"
+    trigger="click">
+    <div class="tree-box">
+        <el-tree
+        ref="treeRef"
+        :props="props"
+        :load="loadNode"
+        node-key="id"
+        lazy
+        :check-strictly="isStrictly"
+        @check="onTreecheck"
+        show-checkbox>
+        </el-tree>
+    </div>
+    
+    <div class="label-input" slot="reference">
+        <div class="tag-box">
+            <span v-if="value.length == 0" style="color:#b1b1b1">请选择</span>
+            <el-tag size="mini" type="info" v-for="(tag,index) in value.slice(0,1)" :key="index">{{ tag.name }}</el-tag>
+            <el-tag size="mini" type="info" v-if="value.length > 1">+ {{ value.length - 1 }}</el-tag>
+            <span v-if="value.length > 0" class="jtIcon iconguanbi1 guanbi-icon" @click="clearTree"></span>
+        </div>
+    </div>
+    </el-popover>
+</template>
+
+<script>
+export default {
+    props:['activeType','value','checked','baseUrl'],
+    created(){
+        console.log(this.activeType.rootpath)
+    },
+    data(){
+        return {
+            props: {
+                label: 'name',
+                children: 'id',
+                isLeaf: 'leaf'
+            },
+            isStrictly: this.activeType.config.isStrictly || false
+        }
+    },
+    methods:{
+        async loadNode(node, resolve) {
+            console.log(node)
+            let childPath
+            if(node.level == 0){
+                childPath = this.activeType.rootpath
+            }else{
+                childPath = node.data.path
+            }    
+            const {data} = await this.$axios.post(this.baseUrl + childPath,this.activeType.params);
+            for(let i of this.checked){
+                for(let c of data){
+                    if(i.id == c.id){
+                        setTimeout(() => {
+                            this.$refs.treeRef.setChecked(i.id,true)
+                        },100)
+                        break;
+                    }
+                }
+            }
+            resolve(data.map(item => {
+                item.leaf = item.path === '-' || !item.path
+                item.disabled = this.activeType.config.parentDisabled ? false : (item.path === '-' || !item.path ? false : true) 
+                return item
+            }));                
+        },
+        onTreecheck(data,treeInfo){
+            if(this.activeType.config.mode == 'radio'){
+                this.$refs.treeRef.setCheckedKeys([data.id]);
+                this.$emit('input',[data])
+            }else{
+                const checkNodes = this.$refs.treeRef.getCheckedNodes()
+                this.$emit('input',checkNodes)
+            }
+        },
+        clearTree(){ 
+            this.$emit('input',[])
+            this.$refs.treeRef.setCheckedKeys([]);
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.label-input{
+    min-height: 28px;
+    width:200px ;
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    background-color: #FFF;
+    display: flex;
+    align-items: center;
+    padding-left:15px;
+    position: relative;
+}
+.tag-box{
+    .guanbi-icon{
+        position: absolute;
+        right:10px;
+        top:6px;
+        color:#d0d0d0;
+        cursor: pointer;
+    }
+}
+.tree-box{
+    max-height:70vh;
+    overflow: auto;
+    padding:10px;
+    &::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+        display: none;
+    }
+    &:hover::-webkit-scrollbar{
+        display: block;
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background: #d0d0d0;
+    }
+}
+</style>
+
+<style lang="scss">
+.tree-select{
+    padding:0;
+}
+</style>

package/packages/index.js

@@ -4,6 +4,7 @@ import JtFormPc from './jt-form-pc';
 import JtUploadPc from './jt-upload-pc';
 import JtEchartsPc from './jt-echarts-pc';
 import JtOrgtreePc from './jt-orgtree-pc'
+import SearchType from './Search-Type/index.js';
 
 //vex-table样式
 import 'vxe-table/lib/index.css';
@@ -30,7 +31,8 @@ const components = [
   JtFormPc,
   JtUploadPc,
   JtEchartsPc,
-  JtOrgtreePc
+  JtOrgtreePc,
+  SearchType
 ]
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
@@ -54,5 +56,6 @@ export default {
   JtFormPc,
   JtUploadPc,
   JtEchartsPc,
-  JtOrgtreePc
+  JtOrgtreePc,
+  SearchType
 }

package/packages/jtaxios.js

@@ -1,3 +1,10 @@
+/*
+ * @Author: leevan
+ * @Date: 2022-01-15 17:02:55
+ * @LastEditTime: 2024-04-21 14:31:38
+ * @LastEditors: leevan
+ * @FilePath: /jtui-pc/packages/jtaxios.js
+ */
 import axios from 'axios';
 import { Message } from 'element-ui';
 import { promises } from 'fs';
@@ -20,7 +27,6 @@ newAxios.interceptors.request.use(config=>{
 newAxios.interceptors.response.use(data=>{
     return data;
 },error=>{
-    Nprogress.done();
     Message.error({
         message:'加载失败'
     })

package/vue.config.js

@@ -1,7 +1,7 @@
 /*
  * @Author: leevan
  * @Date: 2022-01-15 17:02:55
- * @LastEditTime: 2023-10-12 16:04:14
+ * @LastEditTime: 2024-04-21 13:27:28
  * @LastEditors: leevan
  * @FilePath: /jtui-pc/vue.config.js
  */