# HtSearchTableView 明细table查询

明细table查询 查询明细和其附属的子表
Author yangmeng@expservice.com.cn

# 示例

<template>
  <div>
    <!-- 主表table -->
    <ht-table
      ref="HtSearchTableViewTableList"
      ref-table="HtSearchTableViewTableList"
      :table-head="HtSearchTableViewHead"
      :table-data="HtSearchTableViewData"
    />
    <!-- 明细页table -->
    <ht-drawer :title="title" :visible.sync="dialogVisible">
      <ht-form
        ref="HtSearchTableViewFm"
        ref-form="HtSearchTableViewFm"
        divider="信息" :form-list="HtSearchTableViewFmList"
      />
      <!-- 明细页table -->
      <ht-table
        ref="childTableList"
        ref-table="childTableList"
        :table-head="childTableHead"
        :table-data="childTableData"
      />
    </ht-drawer>
  </div>
</template>

<script>
export default {
  name: 'HtSearchTableView',
  data() {
    return {
      title: '标题',
      dialogVisible: false, // 隐藏抽屉对象
      rowData: {},
      HtSearchTableViewFmList: [
        {
          type: 'text',
          format: [0, 'isAny', 300],
          label: '接口名称',
          field: 'name',
          colspan: 1,
          disabled: true
        },
        {
          type: 'text',
          format: [0, 'isAny', 300],
          label: '接口编号',
          field: 'code',
          colspan: 1,
          disabled: true
        },
        {
          type: 'text',
          format: [0, 'isAny', 300],
          label: '金额',
          field: 'amount',
          colspan: 1,
          disabled: true
        }
      ],
      childTableData: {},
      childTableHead: [
        {
          label: '父类ID',
          prop: 'parentId',
          width: '110px',
          align: 'center'
        },
        {
          label: '变动日期',
          prop: 'checkTime',
          align: 'center'
        },
        {
          label: '变动类型',
          prop: 'checkType',
          align: 'center'
        },

        {
          label: '变动原因',
          prop: 'checkRemark',
          width: '320px',
          align: 'center'
        },
        {
          label: '操作人',
          prop: 'checkBy'
        },
        {
          label: '电话',
          prop: 'phone'
        },
        {
          label: '邮箱',
          prop: 'email'
        }
      ],
      HtSearchTableViewHead: [
        {
          type: 'action',
          label: '操作',
          content: ['编辑查看'],
          action: [
            (row, index) => this.handleEdit(row, index)
          ]
        },
        {
          label: 'id',
          prop: 'u@id',
          width: 'auto',
          hidden: true
        },
        {
          label: '接口编号',
          prop: 'u@code',
          query: true,
          width: '135px',
          fixed: true,
          render: (scope) => { // scope为当前行的对象
            return <span>接口编号:{scope.row.code}<br/>接口名称:{scope.row.name}</span>;
          }
        },
        {
          label: '接口名称',
          prop: 'u@name',
          query: true,
          fixed: 'left',
          width: '135px'
        },
        {
          type: 'tag',
          label: '入参',
          prop: 'u@indata',
          query: false
        },
        {
          label: '出参',
          prop: 'u@outdata',
          query: false
        },
        {
          label: '接口状态',
          prop: 'status',
          type: 'dic',
          dicType: 'yxzt',
          query: false,
          width: '135px'
        }
      ],
      HtSearchTableViewData: {}
    };
  },
  created() {
    // 注意：此处为初始化时加载并传入rowData参数，是正式的写法
    // this.rowData = row;
    // this.$crud.setEditValue(this.HtSearchTableViewFmList, this.rowData);
    // this.$nextTick(() => {
    //   获取行对象的主键ID执行查询
    //   this.handleSearchMain(row.id)
    // });

  },
  mounted() {
    this.handleSearch();
  },
  methods: {
    /**
     * @todo: 列表查询方法
     * @author: yangmeng@expservice.com.cn
     * @Date: 2023-05-26 10:25:41
     */
    async handleSearch(event) {
      // 模拟返回的后端数据
      this.HtSearchTableViewData =
        { 'current': 1,
          'pages': 3,
          'size': 10,
          'total': 7,
          'hitCount': true,
          'searchCount': true,
          'orders': [], 'optimizeCountSql': true,
          'records':
                 [
                   { 'transHash': {}},
                   { 'id': '1',
                     'code': '1011',
                     'name': '范例1',
                     'amount': 55059.69,
                     'storeCode': '1012',
                     'storeName': '测试1',
                     'indata': '入参1',
                     'outdata': '出参1',
                     'status': { 'c': 100201, 'v': '有效' },
                     'rownums': 1 },
                   { 'id': '2',
                     'code': '1011',
                     'name': '范例2',
                     'storeCode': '1012',
                     'storeName': '测试2',
                     'indata': '入参2',
                     'outdata': '出参2',
                     'status': { 'c': 100202, 'v': '无效' },
                     'rownums': 2 },
                   { 'id': '3',
                     'code': '1011',
                     'name': '范例3',
                     'storeCode': '1012',
                     'storeName': '测试3',
                     'indata': '入参3',
                     'outdata': '出参3',
                     'status': { 'c': 100202, 'v': '无效' },
                     'rownums': 3 }
                 ]
        };
    },    
    /**
      * @todo: 打开抽屉,显示明细页面
      * @author: yangmeng@expservice.com.cn
      * @Date: 2023-05-26 10:45:44
      */
    handleEdit(row, index) {
      // 隐藏抽屉对象
      this.dialogVisible = !this.dialogVisible;
      //注意：以下代码应写入到created()方法处
      this.rowData = row;
      //获取将列表上的行对象，并赋值在明细表单上
      this.$crud.setEditValue(this.HtSearchTableViewFmList, this.rowData);
      this.$nextTick(() => {
        //获取行对象的主键ID执行查询
        this.handleSearchTableView(row.id);
      });
    }
  },
    /**
      * @todo: 根据主表的ID查询子表的信息
      * @author: yangmeng@expservice.com.cn
      * @Date: 2023-05-26 10:01:32
      */
  async handleSearchTableView(row) {
    try {
      // 模拟返回的后端数据
      this.childTableData =
            { 'current': 1,
              'pages': 3,
              'size': 10,
              'total': 10,
              'hitCount': true,
              'searchCount': true,
              'orders': [],
              'optimizeCountSql': true,
              'records':
                [
                  { 'transHash': {}},
                  { 'parentId': row,
                    'checkTime': '2023-01-31',
                    'checkType': 'OA',
                    'checkRemark': '因5与23日公司大楼灯光维修,临时停电',
                    'checkBy': '张亮',
                    'rownums': 1,
                    'phone': '17600000000',
                    'email': '1999999999@qq.com' },
                  { 'parentId': row,
                    'checkTime': '2023-02-01',
                    'checkType': 'SAP',
                    'checkRemark': '因5与25日疫情复阳无法工作',
                    'checkBy': '王伟',
                    'rownums': 1,
                    'phone': '17600000000',
                    'email': '1999999999@qq.com' }
                ]
            };
      // 后台实际执行的查询方法
      // this.childTableData =
      // await this.$crud.fetchTable(this.$refs['childTableList'], findChildTableData, { 'pid': row });
    } catch (e) {
      this.$notify.message(e, 'error');
    }
  }
};
</script>

Copy

# 后端示例

Controller


  /** 
  * @remark:明细页查询Controller层
  * @param params: 
  * @return: IPage<java.util.Map<java.lang.String,java.lang.Object>>
  * @author: yangmeng
  * @date: 2023/5/30 10:41 
  * @version: 1.0.1
  * Modification History: 
  * Date       Author          Version            Description 
  * ----------------------------------------------------------
  * 2023/5/30     yangmeng        v1.0.1             init
  */
  @ApiOperation(value = "查询->信息", notes = "查询信息服务 带分页")
  @ApiImplicitParams({
      @ApiImplicitParam(name = "params", value = "查询条件参数", dataTypeClass = String.class)
  })
  @PostMapping(value = "/findChildTableData")
  public IPage<Map<String, Object>> find(@RequestBody String params)
  {
    Page<Map<String, Object>> page = new Page<>();
    String conditions = MyUtil.getConditionsWhere(params, page);
    return csStarSetManService.find(page, conditions);
  }

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

Service

    /** 
    * @remark:明细页查询Service层
    * @param page: 
    * @param qc: 
    * @return: IPage<java.util.Map<java.lang.String,java.lang.Object>>
    * @author: yangmeng
    * @date: 2023/5/30 10:44 
    * @version: 1.0.1
    * Modification History: 
    * Date       Author          Version            Description 
    * ----------------------------------------------------------
    * 2023/5/30     yangmeng        v1.0.1             init
    */
  IPage<Map<String, Object>> find(Page<Map<String, Object>> page, String qc);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Impl

    /** 
    * @remark:明细页查询Impl层
    * @param page: 
    * @param conditions: 
    * @return: IPage<java.util.Map<java.lang.String,java.lang.Object>>
    * @author: yangmeng
    * @date: 2023/5/30 10:44 
    * @version: 1.0.1
    * Modification History: 
    * Date       Author          Version            Description 
    * ----------------------------------------------------------
    * 2023/5/30     yangmeng        v1.0.1             init
    */
@Override
  public IPage<Map<String, Object>> find(Page<Map<String, Object>> page, String conditions)
  {
    // 设置排序
    OrderItem oi = new OrderItem();
    oi.setColumn("cu.create_time");
    oi.setAsc(true);
    List<OrderItem> al = page.getOrders();
    al.add(oi);
    page.setOrders(al);
    return transResultService.transResult(csStarSetManMapper.find(page, conditions), getTransDic());
  }

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

Mapper

    /** 
    * @remark:明细页查询Mapper层 
    * @param page: 
    * @param conditions: 
    * @return: com.baomidou.mybatisplus.core.metadata.IPage<java.util.Map<java.lang.String,java.lang.Object>>
    * @author: yangmeng
    * @date: 2023/5/30 10:46 
    * @version: 1.0.1
    * Modification History: 
    * Date       Author          Version            Description 
    * ----------------------------------------------------------
    * 2023/5/30     yangmeng        v1.0.1             init
    */
  @SelectProvider(CcsStarSetManSqlProvider.class)
  IPage<Map<String, Object>> find(Page<Map<String, Object>> page, String qc);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Provide

    /** 
    * @remark:明细页查询Provide层
    * @param conditions: 
    * @return: java.lang.String
    * @author: yangmeng
    * @date: 2023/5/30 10:47 
    * @version: 1.0.1
    * Modification History: 
    * Date       Author          Version            Description 
    * ----------------------------------------------------------
    * 2023/5/30     yangmeng        v1.0.1             init
    */
  public static String find(Page<Map<String, Object>> page, String qc)
  {
    StringBuffer sql = new StringBuffer();
    sql.append(" select \n");
    sql.append(" u.id id, \n");
    sql.append(" from sc_star_set_man u\n");
    sql.append(" WHERE \n");
    sql.append(qc);
    return sql.toString();
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 版本

v1.0.2

← 超链接查询表单保存 →