Template1.vue 11.7 KB
Newer Older
zhangsan's avatar
zhangsan committed
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 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332
<template>
  <a-card :bordered="false">
    <a-row :gutter="8">
      <!-- 这里是父级节点 -->
      <a-col :span="24" style="margin-bottom: 4px">
        <JVxeTable
          toolbar
          rowNumber
          rowSelection
          clickSelectRow
          highlightCurrentRow
          :radioConfig="{ highlight: false }"
          :checkboxConfig="{ highlight: false }"
          :height="340"
          :loading="table1.loading"
          :columns="table1.columns"
          :dataSource="table1.dataSource"
          :pagination="table1.pagination"
          @pageChange="handleTable1PageChange"
          @selectRowChange="handleTable1SelectRowChange"
        />
      </a-col>
      <!-- 这里是子级节点 -->
      <a-col :span="12">
        <JVxeTable
          toolbar
          rowNumber
          rowSelection
          clickSelectRow
          highlightCurrentRow
          :radioConfig="{ highlight: false }"
          :checkboxConfig="{ highlight: false }"
          :height="340"
          :loading="table2.loading"
          :columns="table2.columns"
          :dataSource="table2.dataSource"
          :pagination="table2.pagination"
          @pageChange="handleTable2PageChange"
          @selectRowChange="handleTable2SelectRowChange"
        >
        </JVxeTable>
      </a-col>
      <!-- 这里是孙级节点 -->
      <a-col :span="12">
        <JVxeTable
          toolbar
          rowNumber
          rowSelection
          :height="340"
          :loading="table3.loading"
          :columns="table3.columns"
          :dataSource="table3.dataSource"
          :pagination="table3.pagination"
          @pageChange="handleTable3PageChange"
        >
        </JVxeTable>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
  import { defHttp } from '/@/utils/http/axios';
  import { JVxeTypes } from '/@/components/jeecg/JVxeTable/types';

  // 【多种布局模板】上面父、左下子、右下孙
  export default {
    name: 'Template1',
    data() {
      return {
        table1: {
          // 是否正在加载
          loading: false,
          // 分页器参数
          pagination: {
            // 当前页码
            current: 1,
            // 每页的条数
            pageSize: 200,
            // 可切换的条数
            pageSizeOptions: ['10', '20', '30', '100', '200'],
            // 数据总数(目前并不知道真实的总数,所以先填写0,在后台查出来后再赋值)
            total: 0,
          },
          // 最后选中的行
          lastRow: null,
          // 选择的行
          selectedRows: [],
          // 数据源,控制表格的数据
          dataSource: [],
          // 列配置,控制表格显示的列
          columns: [
            { key: 'num', title: '序号', width: '80px' },
            {
              // 字段key,跟后台数据的字段名匹配
              key: 'ship_name',
              // 列的标题
              title: '船名',
              // 列的宽度
              width: '180px',
              // 如果加上了该属性,就代表当前单元格是可编辑的,type就是表单的类型,input就是简单的输入框
              type: JVxeTypes.input,
              formatter({ cellValue, row, column }) {
                let foo = '';
                if (row.company === '佧伒侾佯有限公司') {
                  foo += '-233';
                }
                return cellValue + foo;
              },
            },
            { key: 'call', title: '呼叫', width: '80px', type: JVxeTypes.input },
            { key: 'len', title: '', width: '80px', type: JVxeTypes.inputNumber },
            { key: 'ton', title: '', width: '120px', type: JVxeTypes.inputNumber },
            { key: 'payer', title: '付款方', width: '120px', type: JVxeTypes.input },
            { key: 'count', title: '', width: '40px' },
            {
              key: 'company',
              title: '公司',
              // 最小宽度,与宽度不同的是,这个不是固定的宽度,如果表格有多余的空间,会平均分配给设置了 minWidth 的列
              // 如果要做占满表格的列可以这么写
              minWidth: '180px',
              type: JVxeTypes.input,
            },
            { key: 'trend', title: '动向', width: '120px', type: JVxeTypes.input },
          ],
        },
        // 子级表的配置信息 (配置和主表的完全一致,就不写冗余的注释了)
        table2: {
          loading: false,
          pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
          // 最后选中的行
          lastRow: null,
          selectedRows: [],
          dataSource: [],
          columns: [
            { key: 'dd_num', title: '调度序号', width: '120px' },
            { key: 'tug', title: '拖轮', width: '180px', type: JVxeTypes.input },
            { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVxeTypes.input },
            { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVxeTypes.input },
            { key: 'type', title: '船舶分类', width: '120px', type: JVxeTypes.input },
            { key: 'port_area', title: '所属港区', width: '120px', type: JVxeTypes.input },
          ],
        },
        // 孙级表的配置信息 (配置和主表的完全一致,就不写冗余的注释了)
        table3: {
          loading: false,
          pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
          selectedRows: [],
          dataSource: [],
          columns: [
            { key: 'dd_num', title: '调度序号', width: '120px' },
            { key: 'tug', title: '拖轮', width: '120px', type: JVxeTypes.input },
            { key: 'power', title: '马力', width: '120px', type: JVxeTypes.input },
            { key: 'nature', title: '性质', width: '120px', type: JVxeTypes.input },
            { key: 'departure_time', title: '发船时间', width: '180px', type: JVxeTypes.input },
          ],
        },
        // 查询url地址
        url: {
          getData: '/mock/vxe/getData',
        },
      };
    },
    // 监听器
    watch: {
      // 监听table1 【主表】选择的数据发生了变化
      ['table1.lastRow'](row) {
        this.loadTable2Data();
      },
      // 监听table2 【子表】选择的数据发生了变化
      ['table2.lastRow']() {
        this.loadTable3Data();
      },
    },
    created() {
      this.loadTable1Data();
    },
    methods: {
      // 加载table1【主表】的数据
      loadTable1Data() {
        // 封装查询条件
        let formData = {
          pageNo: this.table1.pagination.current,
          pageSize: this.table1.pagination.pageSize,
        };
        // 调用查询数据接口
        this.table1.loading = true;
        defHttp
          .get({
            url: this.url.getData,
            params: formData,
          })
          .then((result) => {
            // 后台查询回来的 total,数据总数量
            this.table1.pagination.total = result.total;
            // 将查询的数据赋值给 dataSource
            this.table1.dataSource = result.records;
            // 重置选择
            this.table1.selectedRows = [];
          })
          .finally(() => {
            // 这里是无论成功或失败都会执行的方法,在这里关闭loading
            this.table1.loading = false;
          });
      },

      // 当table1【主表】分页参数变化时触发的事件
      handleTable1PageChange(event) {
        // 重新赋值
        this.table1.pagination.current = event.current;
        this.table1.pagination.pageSize = event.pageSize;
        // 查询数据
        this.loadTable1Data();
      },

      // table1【主表】当选择的行变化时触发的事件
      handleTable1SelectRowChange(event) {
        this.handleTableSelectRowChange(this.table1, event);
      },

      // 加载table2【子表】的数据,根据主表的id进行查询
      loadTable2Data() {
        // 如果主表没有选择,则不查询
        let selectedRows = this.table1.selectedRows;
        if (!selectedRows || selectedRows.length === 0) {
          this.table2.pagination.total = 0;
          this.table2.dataSource = [];
          this.table2.selectedRows = [];
          return;
        } else if (this.table1.lastRow == null) {
          this.table1.lastRow = selectedRows[selectedRows.length - 1];
        }
        let formData = {
          parentId: this.table1.lastRow.id,
          pageNo: this.table2.pagination.current,
          pageSize: this.table2.pagination.pageSize,
        };
        this.table2.loading = true;
        defHttp
          .get({
            url: this.url.getData,
            params: formData,
          })
          .then((result) => {
            this.table2.pagination.total = result.total;
            this.table2.dataSource = result.records;
            this.table2.selectedRows = [];
          })
          .finally(() => {
            this.table2.loading = false;
          });
      },

      // table2【子表】当选择的行变化时触发的事件
      handleTable2SelectRowChange(event) {
        this.handleTableSelectRowChange(this.table2, event);
      },

      // 当table2【子表】分页参数变化时触发的事件
      handleTable2PageChange(event) {
        // 重新赋值
        this.table2.pagination.current = event.current;
        this.table2.pagination.pageSize = event.pageSize;
        // 查询数据
        this.loadTable2Data();
      },

      // 加载table3【孙表】的数据,根据子表的id进行查询
      loadTable3Data() {
        // 如果主表没有选择,则不查询
        let selectedRows = this.table2.selectedRows;
        if (!selectedRows || selectedRows.length === 0) {
          this.table3.pagination.total = 0;
          this.table3.dataSource = [];
          this.table3.selectedRows = [];
          return;
        } else if (this.table2.lastRow == null) {
          this.table2.lastRow = selectedRows[selectedRows.length - 1];
        }
        let formData = {
          parentId: this.table2.lastRow.id,
          pageNo: this.table3.pagination.current,
          pageSize: this.table3.pagination.pageSize,
        };
        this.table3.loading = true;
        defHttp
          .get({
            url: this.url.getData,
            params: formData,
          })
          .then((result) => {
            this.table3.pagination.total = result.total;
            this.table3.dataSource = result.records;
          })
          .finally(() => {
            this.table3.loading = false;
          });
      },
      // 当table3【孙表】分页参数变化时触发的事件
      handleTable3PageChange(event) {
        // 重新赋值
        this.table3.pagination.current = event.current;
        this.table3.pagination.pageSize = event.pageSize;
        // 查询数据
        this.loadTable3Data();
      },

      /** 公共方法:处理表格选中变化事件 */
      handleTableSelectRowChange(table, event) {
        let { row, action, selectedRows, $table } = event;
        // 获取最后一个选中的
        let lastSelected = selectedRows[selectedRows.length - 1];
        if (action === 'selected') {
          table.lastRow = row;
        } else if (action === 'selected-all') {
          // 取消全选
          if (selectedRows.length === 0) {
            table.lastRow = null;
          } else if (!table.lastRow) {
            table.lastRow = lastSelected;
          }
        } else if (action === 'unselected' && row === table.lastRow) {
          table.lastRow = lastSelected;
        }
        $table.setCurrentRow(table.lastRow);
        table.selectedRows = selectedRows;
      },
    },
  };
</script>

<style lang="less"></style>