# HtCascadeQuery 级联

HtCascadeQuery 级联、用于级联查询时使用
Author yangmeng@expservice.com.cn&qinpeng@expservice.com.cn

# 示例

<template>
  <div>
    <ht-form ref="htCascadeQueryFm" 
    ref-form="htCascadeQueryFm" 
    divider="基础信息" 
    :form-list="htCascadeQuerySearchList" />
  </div>
</template>
<script>
export default {
  name: 'HtCascadeQuery', // 要与菜单表中字段component_name一致
  data() {
    return {
      htCascadeQuerySearchList: [
        {
          // dicType:E#是本地实现的字典,多个字典用:分割 例如 KEY1=VALUE1:KEY2=VALUE2……
          // dicType:T#是调用后台的字典
          type: 'dic',
          format: [0, 'isDic', 50],
          dicType: 'E#220000=吉林省', 
          // dicType:  'T#FUNC-PROVINCE',
          label: '省份',
          field: 'obs@province',
          filtercode: '0000$',//字典过滤值
          // dicRemote: (dicType, query) => findDictFromTable(dicType, query),//调用后台字典的方法
          cb: (row, field, dicType) => this.handleDicCallBack(row, field, dicType), // 字典返回方法
          clear: (row, field, dicType) => this.handleDictClearCB(row, field, dicType)// 字典清理方法
        },
        {
          type: 'dic',
          format: [0, 'isDic', 50],
          dicType: 'E#220100=长春市',
          // dicType: 't#FUNC-CITY',
          label: '城市',
          field: 'obs@city',
          filtercode: '^[1-9][1-9][0-9][1-9]00$',
          //dicRemote: (dicType, query) => findDictFromTable(dicType, query),
          cb: (row, field, dicType) => this.handleDicCallBack(row, field, dicType),
          clear: (row, field, dicType) => this.handleDictClearCB(row, field, dicType)
        },
        {
          type: 'dic',
          format: [0, 'isDic', 50],
          dicType: 'E#220102=南关区',
          // dicType: 't#FUNC-DIVISION',
          label: '区县',
          field: 'obs@county',
          filtercode: '^[1-9][1-9][0-9][1-9][0-9][1-9]$',
          //dicRemote: (dicType, query) => findDictFromTable(dicType, query),
        }
        // 调用后台省市县联动方法,dictType固定为【xzqh】
        // {
        //   type: 'dic',
        //   format: [0, 'isDic', 50],
        //   dicType: 'xzqh',
        //   label: '省份',
        //   field: 'obs@province',
        //   filtercode: '0000$',
        //   cb: (row, field, dicType) => this.handleDicCallBack(row, field, dicType),
        //   clear: (row, field, dicType) => this.handleDictClearCB(row, field, dicType)
        // },
        // {
        //   type: 'dic',
        //   format: [0, 'isDic', 50],
        //   dicType: 'xzqh',
        //   label: '城市',
        //   field: 'obs@city',
        //   filtercode: '^[1-9][1-9][0-9][1-9]00$',
        //   cb: (row, field, dicType) => this.handleDicCallBack(row, field, dicType),
        //   clear: (row, field, dicType) => this.handleDictClearCB(row, field, dicType)
        // },
        // {
        //   type: 'dic',
        //   format: [0, 'isDic', 50],
        //   dicType: 'xzqh',
        //   label: '区县',
        //   field: 'obs@county',
        //   filtercode: '^[1-9][1-9][0-9][1-9][0-9][1-9]$'
        // },
      ]
    };
  },
  methods: {
    /**
     * @todo: 字典回调方法
     * @author: yangmeng@expservice.com.cn
     * @Date: 2023-05-30 10:55:03
     */
    handleDicCallBack(res, field, dicType) {
      let city, county;
      // 多个字典回调
      switch (field) {
        case 'obs@province':
          // 选择省后设置市过滤
          this.$refs['htCascadeQueryFm'].model['obs@city'] = '';
          this.$refs['htCascadeQueryFm'].model['obs@county'] = '';
          // 过滤CITY
          city = this.htCascadeQuerySearchList.filter((x) => {
            return x.field === 'obs@city';
          });
          if (city.length === 1)
            city[0].filtercode = '^' + res.value.slice(0, 2) + '[0-9][1-9]' + '00$';
          break;
        case 'obs@city':
          // 选择市后设置区/县过滤
          this.$refs['htCascadeQueryFm'].model['obs@county'] = '';
          county = this.htCascadeQuerySearchList.filter((x) => {
            return x.field === 'obs@county';
          });
          if (county.length === 1)
            county[0].filtercode = '^' + res.value.slice(0, 4) + '[0-9][1-9]';
          break;
      }
    },
     /**
     * @todo: 字典回调清理
     * @author: yangmeng@expservice.com.cn
     * @Date: 2023-05-30 10:55:03
     */
    handleDictClearCB(row, field, dicType) {
      let city, county;
      switch (field) {
        case 'province':
          // 选择省后设置市
          //获取htCascadeQueryFm表单下的CITY属性等于''
          this.$refs['htCascadeQueryFm'].model['city'] = '';
          this.$refs['htCascadeQueryFm'].model['county'] = '';
          //设置过滤
          city = this.htCascadeQuerySearchList.filter((x) => {
            return x.field === 'city';
          });
          city[0].filtercode = '^[1-9][1-9][0-9][1-9]00$';
          break;
        case 'city':
          // 选择市后设置区
          this.$refs['htCascadeQueryFm'].model['county'] = '';
          county = this.htCascadeQuerySearchList.filter((x) => {
            return x.field === 'county';
          });
          county[0].filtercode = '^[1-9][1-9][0-9][1-9][0-9][1-9]$';
          break;
      }
    }
  }
};
</script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
Expand Copy

# 后端示例

  • TableDicConstant
/**
 * @Copyright: Copyright (c) 2023 scisoft
 * @remark: 字典通用类
 * @author:yangmeng
 * @date:2023/5/30 10:57
 * @version v1.0.1
 */
public class TableDicConstant
{
    /**
      * @remark:调用后台字典方法
      * @param user:
      * @param vparam:
      * @return: java.lang.String
      * @author: yangmeng
      * @date: 2023/5/30 10:56
      * @version: 1.0.1
      * Modification History:
      * Date       Author          Version            Description
      * ----------------------------------------------------------
      * 2023/5/30     yangmeng        v1.0.1             init
      */
    public static String getTableDic(Map<String, Object> user, String vparam)
    {
      String ret = "";
      String[] arr = {};
      String type;

      //存放参数
      String param = "";

      // 额外的参数,可以用多个逗号分开
      String[] paramsArr;
      if (vparam.contains(":"))
      {
        paramsArr = vparam.split(":");
        type = paramsArr[0];
      } else
        type = vparam;

      //新增截取参数
      if (vparam.indexOf(",") != -1)
      {
        int index = vparam.indexOf(",");
        String[] params = vparam.split(",");
        if (params.length >= 2)
        {
          type = params[0];
          param = vparam.substring(index + 1);
        }
      }

      switch (type)
      {
        //省份
        //调用字典的名称
        //字典查询的格式【每个都用:来分割】EP;
        //ret【json】的第一个冒号前表示 表名【多表可用逗号分隔并用别名】:
        //ret【json】的第二个冒号前表示 字典KEY值【表的列名】:
        //ret【json】的第三个冒号前表示 字典VALUE值【表的列名】{字典可选值}:
        //ret【json】的第三个冒号后表示 SQL查询条件
        case "FUNC-PROVINCE":
          ret = "sys_division:code:sname{code,dname,sname}:type = 20 and code = 130000 " + param;
          break;
        //根据省份过滤城市
        case "FUNC-CITY":
          ret = "sys_division:code:sname{code,dname,sname}:type = 30 and parent = 130000 " + param;
          break;
        //县
        case "FUNC-DIVISION":
          ret = "sys_division a:a.code:a.sname{a.code,a.dname,a.sname}:type = 40 " + param;
          break;
      }
      return ret;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

# 版本

  • v1.0.1