{
  "version": "1.1",
  "componentName": "Page",
  "fileName": "FormTable",
  "css": ".overflow-container .card {\n    padding-bottom: 8px;\n}\n.main-body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    margin: 20px 20px 9px 20px;\n}\n.card {\n    padding: 20px 20px;\n    background-color: #ffffff;\n    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 6%);\n    border-radius: 2px;\n}\n.manage-list {\n    margin-bottom: 60px !important;\n} .crm-title-wrapper{\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  margin-bottom: 20px;\n  gap: 20px;\n}\n .crm-import-button:not(:last-child) {\n  margin-right: 10px;\n}",
  "props": {},
  "children": [
    {
      "componentName": "Text",
      "props": {
        "style": "background: url(\"**/public/logo.png\");",
        "className": "page-header",
        "text": "标题区"
      }
    },
    {
      "componentName": "Text",
      "props": {
        "style": "background: url('**/public/background.png');",
        "text": "副标题区"
      }
    },
    {
      "componentName": "Template",
      "props": {
        "text": "空插槽，出码会跳过此节点"
      },
      "children": []
    },
    {
      "componentName": "ImageTitle",
      "fileName": "ImageTitle",
      "props": {
        "className": {
          "type": "JSExpression",
          "value": "['basic-info', {'form-fixed-layout': this.props.isFixed}, {'form-auto-layout': this.props.isAuto}]"
        },
        "text": "配置报价",
        "hasSplitLine": false,
        "onClickLogo": {
          "type": "JSExpression",
          "value": "this.handleReset",
          "params": ["state.flag"]
        }
      }
    },
    {
      "componentName": "TinyForm",
      "props": {
        "inline": true,
        "style": {
          "margin": "12px"
        },
        "className": "form"
      },
      "children": [
        {
          "componentName": "TinyFormItem",
          "props": {
            "label": {
              "type": "i18n",
              "key": "company.name"
            }
          },
          "children": [
            {
              "componentName": "TinyInput",
              "props": {
                "disabled": false,
                "value": {
                  "type": "JSExpression",
                  "value": "state.companyName"
                }
              }
            }
          ]
        },
        {
          "componentName": "TinyFormItem",
          "condition": {
            "type": "JSExpression",
            "value": "state.cityOptions.length"
          },
          "children": [
            {
              "componentName": "Template",
              "props": {
                "slot": "label"
              },
              "children": "城市"
            },
            {
              "componentName": "TinySelect",
              "props": {
                "value": {
                  "type": "JSExpression",
                  "value": "state.companyCity"
                },
                "options": [
                  {
                    "label": {
                      "type": "i18n",
                      "key": "city.foochow",
                      "zh_CN": "福州",
                      "en_US": "Foochow"
                    },
                    "value": 0
                  },
                  {
                    "label": "深'i'圳",
                    "value": 1
                  },
                  {
                    "label": "中山",
                    "value": 2
                  },
                  {
                    "label": "龙岩",
                    "value": 3
                  },
                  {
                    "label": "韶关",
                    "value": 4
                  },
                  {
                    "label": "黄冈",
                    "value": 5
                  },
                  {
                    "label": "赤壁",
                    "value": 6
                  },
                  {
                    "label": "厦门",
                    "value": 7
                  }
                ]
              }
            }
          ]
        },
        {
          "componentName": "TinyFormItem",
          "props": {},
          "children": [
            {
              "componentName": "Text",
              "props": {
                "className": "form-footer",
                "text": "表单提交区"
              }
            },
            {
              "componentName": "TinyButton",
              "props": {
                "type": "primary",
                "icon": {
                  "componentName": "Icon",
                  "props": {
                    "name": "IconSearch"
                  }
                },
                "onClick": {
                  "type": "JSExpression",
                  "value": "this.handleSearch"
                }
              },
              "children": "搜索"
            },
            {
              "componentName": "TinyButton",
              "props": {
                "onClick": {
                  "type": "JSExpression",
                  "value": "this.handleReset"
                }
              },
              "children": {
                "type": "i18n",
                "key": "operation.reset"
              }
            }
          ]
        }
      ]
    },
    {
      "componentName": "Collection",
      "props": {
        "dataSource": "a5f6ef4f"
      },
      "children": [
        {
          "componentName": "TinyGrid",
          "props": {
            "columns": {
              "type": "JSExpression",
              "value": "state.columns"
            },
            "data": {
              "type": "JSExpression",
              "value": "state.tableData"
            },
            "fetchData": {
              "type": "JSExpression",
              "value": "{ api: getTableData }"
            }
          }
        }
      ]
    },
    {
      "componentName": "Collection",
      "props": {
        "dataSource": "a5f6ef4f"
      },
      "children": [
        {
          "componentName": "TinyGrid",
          "props": {
            "columns": [
              { "type": "index", "width": 60, "title": "" },
              { "type": "selection", "width": 60 },
              {
                "field": "employees",
                "title": "员工数",
                "slots": {
                  "default": {
                    "type": "JSSlot",
                    "params": ["row", "rowIndex"],
                    "value": [{ "componentName": "TinyInput", "props": {}, "id": "49e232ce" }]
                  }
                }
              },
              { "field": "city", "title": "城市" },
              {
                "title": "产品",
                "slots": {
                  "default": {
                    "type": "JSSlot",
                    "params": ["row"],
                    "value": [
                      {
                        "componentName": "div",
                        "id": "592fbc05",
                        "children": [{ "componentName": "TinySwitch", "props": { "modelValue": "" }, "id": "46a60c6f" }]
                      }
                    ]
                  }
                }
              },
              {
                "title": "操作",
                "slots": {
                  "default": {
                    "type": "JSSlot",
                    "value": [
                      {
                        "componentName": "TinyButton",
                        "props": {
                          "text": "删除",
                          "icon": {
                            "componentName": "Icon",
                            "props": {
                              "name": "IconDel"
                            }
                          },
                          "onClick": {
                            "type": "JSExpression",
                            "value": "this.emit",
                            "params": ["row"]
                          }
                        }
                      }
                    ]
                  }
                }
              }
            ],
            "data": {
              "type": "JSExpression",
              "value": "state.tableData"
            },
            "fetchData": {
              "type": "JSExpression",
              "value": "{ api: getTableData }"
            }
          }
        }
      ]
    },
    {
      "componentName": "div",
      "props": {
        "style": {
          "width": {
            "type": "JSExpression",
            "value": "this.props.quotePopWidth"
          }
        }
      },
      "children": "循环渲染："
    },
    {
      "componentName": "Icon",
      "condition": false,
      "props": {
        "name": "TinyIconHelpCircle"
      }
    },
    {
      "children": [
        {
          "componentName": "TinyButton",
          "loop": {
            "type": "JSExpression",
            "value": "state.buttons"
          },
          "loopArgs": ["item", "index"],
          "props": {
            "key": {
              "type": "JSExpression",
              "value": "item.text"
            },
            "type": {
              "type": "JSExpression",
              "value": "item.type"
            },
            "text": {
              "type": "JSExpression",
              "value": "index + item.text"
            }
          }
        }
      ]
    },
    {
      "componentName": "br"
    },
    {
      "children": [
        {
          "componentName": "TinyButton",
          "loop": [
            {
              "type": "primary",
              "text": "字面量"
            },
            {
              "type": "success",
              "text": "字面量"
            },
            {
              "type": "danger",
              "text": "危险操作"
            }
          ],
          "loopArgs": ["item"],
          "props": {
            "key": {
              "type": "JSExpression",
              "value": "item.text"
            },
            "type": {
              "type": "JSExpression",
              "value": "item.type"
            },
            "text": {
              "type": "JSExpression",
              "value": "item.text"
            }
          }
        }
      ]
    }
  ],
  "state": {
    "IconPlusSquare": {
      "type": "JSResource",
      "value": "this.utils.IconPlusSquare()"
    },
    "theme": "{   \"id\": 22,   \"name\": \"@cloud/tinybuilder-theme-dark\",   \"description\": \"黑暗主题\" }",
    "companyName": "",
    "companyOptions": null,
    "companyCity": "",
    "cityOptions": [
      {
        "label": "福州",
        "value": 0
      },
      {
        "label": "深圳",
        "value": 1
      },
      {
        "label": "中山",
        "value": 2
      },
      {
        "label": "龙岩",
        "value": 3
      },
      {
        "label": "韶关",
        "value": 4
      },
      {
        "label": "黄冈",
        "value": 5
      },
      {
        "label": "赤壁",
        "value": 6
      },
      {
        "label": "厦门",
        "value": 7
      }
    ],
    "editConfig": {
      "trigger": "click",
      "mode": "cell",
      "showStatus": true,
      "activeMethod": {
        "type": "JSFunction",
        "value": "function() { return this.props.isEdit }"
      }
    },
    "columns": [
      {
        "type": {
          "type": "JSExpression",
          "value": "this.props.isEdit ? 'selection' : 'index'"
        },
        "width": "60",
        "title": {
          "type": "JSExpression",
          "value": "this.props.isEdit ? '' : '序号'"
        }
      },
      {
        "field": "status",
        "title": "状态",
        "filter": {
          "layout": "input,enum,default,extends,base",
          "inputFilter": {
            "component": {
              "type": "JSResource",
              "value": "this.utils.Numeric"
            },
            "attrs": { "format": "yyyy/MM/dd hh:mm:ss" },
            "relation": "A",
            "relations": [
              {
                "label": "小于",
                "value": "A",
                "method": {
                  "type": "JSFunction",
                  "value": "function({ value, input }) { return value < input }"
                }
              },
              { "label": "等于", "value": "equals" },
              { "label": "大于", "value": "greaterThan" }
            ]
          },
          "extends": [
            {
              "label": "我要过滤大于800的数",
              "method": {
                "type": "JSFunction",
                "value": "function({ value }) { return value > 800 }"
              }
            },
            {
              "label": "我要过滤全部的数",
              "method": {
                "type": "JSFunction",
                "value": "function() { return true }"
              }
            }
          ]
        },
        "slots": {
          "default": {
            "type": "JSSlot",
            "params": ["row"],
            "value": [
              {
                "componentName": "div",
                "children": [
                  {
                    "componentName": "Icon",
                    "props": {
                      "name": "IconEdit"
                    }
                  },
                  {
                    "componentName": "Block",
                    "fileName": "CrmQuoteListGridStatus",
                    "condition": {
                      "type": "JSExpression",
                      "value": "this.props.isEdit"
                    },
                    "props": {
                      "isEdit": {
                        "type": "JSExpression",
                        "value": "this.props.isEdit"
                      },
                      "status": {
                        "type": "JSExpression",
                        "value": "row.status"
                      }
                    }
                  }
                ]
              }
            ]
          }
        }
      },
      {
        "type": "index",
        "width": 60
      },
      {
        "type": "selection",
        "width": 60
      },
      {
        "field": "name",
        "title": "公司名称"
      },
      {
        "field": "employees",
        "title": "员工数"
      },
      {
        "field": "city",
        "title": "城市"
      },
      {
        "title": "操作",
        "slots": {
          "default": {
            "type": "JSSlot",
            "value": [
              {
                "component": "div",
                "props": {
                  "style": "color: rgb(94,124, 224);cursor:pointer;",
                  "text": {
                    "type": "i18n",
                    "key": "operation.delete"
                  },
                  "prop1": {
                    "a": 123
                  },
                  "visible": true,
                  "onClick": {
                    "type": "JSExpression",
                    "value": "this.emit"
                  }
                },
                "children": [
                  {
                    "componentName": "TinyInput",
                    "props": {
                      "value": {
                        "type": "JSExpression",
                        "value": "row.giveamount",
                        "model": {
                          "prop": ""
                        }
                      }
                    }
                  },
                  {
                    "component": "span",
                    "condition": {
                      "type": "JSExpression",
                      "value": "state.cityOptions.length"
                    },
                    "children": {
                      "type": "i18n",
                      "key": "operation.hello"
                    }
                  },
                  {
                    "componentName": "Icon",
                    "props": {
                      "name": "TinyIconHelpCircle",
                      "style": "margin-left: 6px; cursor: pointer;vertical-align: top;"
                    }
                  }
                ]
              }
            ]
          }
        }
      }
    ],
    "tableData": [
      {
        "id": "1",
        "name": "GFD科技有限公司",
        "city": "福州",
        "employees": 800,
        "boole": false
      },
      {
        "id": "2",
        "name": "WWW科技有限公司",
        "city": "深圳",
        "employees": 300,
        "boole": true
      },
      {
        "id": "3",
        "name": "RFV有限责任公司",
        "city": "中山",
        "employees": 1300,
        "boole": false
      },
      {
        "id": "4",
        "name": "TGB科技有限公司",
        "city": "龙岩",
        "employees": 360,
        "boole": true
      },
      {
        "id": "5",
        "name": "YHN科技有限公司",
        "city": "韶关",
        "employees": 810,
        "boole": true
      },
      {
        "id": "6",
        "name": "WSX科技有限公司",
        "city": "黄冈",
        "employees": 800,
        "boole": true
      },
      {
        "id": "7",
        "name": "KBG物业有限公司",
        "city": "赤壁",
        "employees": 400,
        "boole": false
      },
      {
        "id": "8",
        "name": "深圳市福德宝网络技术有限公司",
        "boole": true,
        "city": "厦门",
        "employees": 540
      }
    ],
    "status": {
      "type": "JSExpression",
      "value": "this.statusData",
      "computed": true
    },
    "buttons": [
      {
        "type": "primary",
        "text": "主要操作"
      },
      {
        "type": "success",
        "text": "成功操作"
      },
      {
        "type": "danger",
        "text": {
          "type": "i18n",
          "key": "operation.danger"
        }
      }
    ]
  },
  "lifeCycles": {
    "setup": {
      "type": "JSFunction",
      "value": "function({ props, watch, onMounted }) {\r\n  onMounted(() => {\r\n    this.getTableDta()\r\n  })\r\n  watch(\r\n    () => props.load,\r\n    (load) => {\r\n      if (load.isLoad) {\r\n        this.getTableDta()\r\n      }\r\n    },\r\n    {\r\n      deep: true\r\n    }\r\n  )\r\n}"
    },
    "onBeforeMount": {
      "type": "JSFunction",
      "value": "function() { return '生命周期：onBeforeMount'; }"
    },
    "onMounted": {
      "type": "JSFunction",
      "value": "function onMounted() { return '生命周期：onMounted'; }"
    }
  },
  "methods": {
    "getTableData": {
      "type": "JSFunction",
      "value": "function getData({ page, filterArgs }) {\n  const { curPage, pageSize } = page;\n  const offset = (curPage - 1) * pageSize;\n\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      const { tableData } = this.state;\n      let result = [...tableData];\n\n      if (filterArgs) {\n        result = result.filter((item) => item.city === filterArgs);\n      }\n\n      const total = result.length;\n      result = result.slice(offset, offset + pageSize);\n\n      resolve({ result, page: { total } });\n    }, 500);\n  });\n}"
    },
    "handleSearch": {
      "type": "JSFunction",
      "value": "function(e) { return ['搜索:', this.i18n('operation.search'), e]; }"
    },
    "handleReset": {
      "type": "JSFunction",
      "value": "function handleReset(e) { return ['重置:', e]; }"
    },
    "statusData": {
      "type": "JSFunction",
      "value": "function () {\r\n return [\r\n { name: this.i18n('quotes.common.configure_basic_information'), status: 'ready' },\r\n   { name: this.i18n('quotes.quote_list.quote'), status: 'wait' },\r\n  { name: this.i18n('quotes.common.complete_configuration_quote'), status: 'wait' }\r\n ]\r\n}"
    }
  }
}
