ChildrenTable 通用子表组件，该组件主要用于被主表嵌套使用

可能使用的业务场景

  1. 主表一条数据，挂载了子表的多条数据，这样的模式就可以在一个界面编辑，在业务逻辑关系上思路非常紧凑.
  2. 如下的一个主表和子表同时操作的示例界面.

通用子表组件 - 图1

使用指南

  2.     // 1.引用组件
  3.     import ChildrenTable from '@/components/common/children_table.vue'
  5.     // 2.子表组件相关的配置参数一览
  7.     // 2.1 在页面使用子表组件
  8.        <ChildrenTable :propChildrenTable="childrenTable"/>
  10.      // 2.2 子表组件属性（配置）介绍  
  11.       childrenTable: {
  12.         action: propCreateEdit.value.curdFormData.action,  // 子表组件使用的场景动作参数：insert、update.
  13.         allRows: [], // 结果存储数组
  14.         deletedButtonIds: '', // 子表 被删除的id文本格式，例如：1,2,3,4
  15.         //定义一行(条)记录所需要的字段
  16.         rowField: {
  17.           id: 0,
  18.           fr_auth_system_menu_id: 0,
  19.           fr_auth_button_cn_en_id: 0,
  20.           button_name: '',
  21.           request_url: '/',
  22.           request_method: "*",
  23.           short_path: "",
  24.           remark: ''
  25.         },
  26.         // 定义表的一行需要展示的全部字段格式
  27.         rowFieldFormat: [
  28.           {
  29.             name: '按钮名称',//表单名称
  30.             type: "dialog",//类型{弹出框}
  31.             field: 'button_name',//字段名
  33.              // 1.被选择的公共组件必须放置在 ChildrenTable 组件同目录
  34.              // 2.命名必须是以 select开头，否则子表找不到组件。
  35.             componentPath: './select_button.vue', 
  37.             width: 3,//宽度,参考 elementPlus 的row、col布局，一个  row 由24个column构成，但是系统会使用一个 col，作为删除按钮列，内容区域最多只能配置23个col
  38.             //  modalWidth: '900px', // 弹出框宽度
  39.             //字段与弹出框组件字段的映射
  40.             map: {
  41.               fr_auth_button_cn_en_id: 'id',
  42.               button_name: 'cn_name',
  43.               request_method: 'allow_method'
  44.             }
  45.           },
  46.           {
  47.             name: '接口地址',
  48.             type: "string",
  49.             field: 'request_url',
  50.             width: 6,
  51.           },
  52.           {
  53.             name: '接口允许请求方式',
  54.             type: "selectOption",
  55.             field: 'request_method',
  56.             width: 4,
  57.             options: [
  58.               {
  59.                 label: "*",
  60.                 value: "*",
  61.               },
  62.               {
  63.                 label: "GET",
  64.                 value: "GET",
  65.               },
  66.               {
  67.                 label: "POST",
  68.                 value: "POST",
  69.               },
  70.             ]
  71.           },
  72.           {
  73.             name: '备注',
  74.             type: "string",
  75.             field: 'remark',
  76.             width: 4,
  77.           },
  78.           {
  79.             name: '上传文件',
  80.             type: "upload",
  81.             field: 'short_path',
  82.             width: 5,
  83.           },
  84.           {
  85.             name: '删除',
  86.             type: "action",
  87.             field: 'action',
  88.             width: 2,
  89.           },
  90.         ],
  91.         // 新增界面可以设置默认填充的值
  92.         defaultListForCreate: [
  93.           {
  94.             id: 0,
  95.             fr_auth_system_menu_id: 0,
  96.             fr_auth_button_cn_en_id: 1,
  97.             button_name: '新增',
  98.             request_url: '/',
  99.             request_method: "POST",
  100.             remark: '',
  101.             short_path: "",
  102.           },
  103.           {
  104.             id: 0,
  105.             fr_auth_system_menu_id: 0,
  106.             fr_auth_button_cn_en_id: 2,
  107.             button_name: '删除',
  108.             request_url: '/',
  109.             request_method: "POST",
  110.             remark: '',
  111.             short_path: "",
  112.           },
  113.           {
  114.             id: 0,
  115.             fr_auth_system_menu_id: 0,
  116.             fr_auth_button_cn_en_id: 3,
  117.             button_name: '修改',
  118.             request_url: '/',
  119.             request_method: "POST",
  120.             remark: '',
  121.             short_path: "",
  122.           },
  123.           {
  124.             id: 0,
  125.             fr_auth_system_menu_id: 0,
  126.             fr_auth_button_cn_en_id: 4,
  127.             button_name: '查询',
  128.             request_url: '/',
  129.             request_method: "GET",
  130.             remark: '',
  131.             short_path: "",
  132.           }
  133.         ]
  134.       }

最终主表、子表提交的数据格式

  1. # 主表数据
  2. {
  3.     "action": "insert",
  4.     "fid": 41,
  5.     "ftitle": "基础数据",
  6.     "title": "测试菜单",
  7.     "status": 1,
  8.     "sort": 102,
  9.     "remark": "测试菜单",
  10.     "button_array": [
  11.         {
  12.             "id": 0,
  13.             "fr_auth_system_menu_id": 0,
  14.             "fr_auth_button_cn_en_id": 1,
  15.             "button_name": "新增",
  16.             "request_url": "/test/insert",
  17.             "request_method": "POST",
  18.             "remark": "",
  19.             "short_path": "/public/storage/uploaded/2022_06/9d2e958044648753cb6373b458b1dcfe.jpg"
  20.         },
  21.         {
  22.             "id": 0,
  23.             "fr_auth_system_menu_id": 0,
  24.             "fr_auth_button_cn_en_id": 2,
  25.             "button_name": "删除",
  26.             "request_url": "/test/del",
  27.             "request_method": "POST",
  28.             "remark": "",
  29.             "short_path": "/public/storage/uploaded/2022_06/9ab7e0a6743c906a19d4a4e4e915c628.png"
  30.         },
  31.         {
  32.             "id": 0,
  33.             "fr_auth_system_menu_id": 0,
  34.             "fr_auth_button_cn_en_id": 3,
  35.             "button_name": "修改",
  36.             "request_url": "/test/edit",
  37.             "request_method": "POST",
  38.             "remark": "",
  39.             "short_path": ""
  40.         },
  41.         {
  42.             "id": 0,
  43.             "fr_auth_system_menu_id": 0,
  44.             "fr_auth_button_cn_en_id": 4,
  45.             "button_name": "查询",
  46.             "request_url": "/test/seletc",
  47.             "request_method": "GET",
  48.             "remark": "",
  49.             "short_path": "/public/storage/uploaded/2022_06/daf6fce92b1b2331225655c85988d24a.png"
  50.         }
  51.     ],
  52.     "button_delete": "",
  53.     "name": "test_menu"
  54. }

其他说明

  • 主表、子表模式提交的数据比较复杂，需要以json方式提交, 红色标注在提交数据时需要格外关注。

通用子表组件 - 图2