background

The project encountered a large number of forms, as well as pages to search for forms. The designer’s pages and interactions are almost the same, which is consistent with the design. When we develop, the total feeling every day in the repeated manual brick, then we can push a car to move the brick? In the spirit of being lazy, the following happened…

you-want

As for why it is called you-want, it is inspired by “I Want You” from The Voice of China. You can tell me what you want, and I’ll do my best to give it to you. (A bit of an exaggeration, but also a direction of efforts 💪…)

“Forms/forms” out of the box solution. The component library was redeveloped on the basis of Vue2 + Ant Design Vue, so the project must be Vue2 + ANTD architecture (other versions stay tuned…). . As for why the wheel had to be built? I also looked at a lot of similar solutions provided in the market, feeling that the scene and use are complicated, there is a certain learning cost, I just want to make things simple, do not want to let the user have a learning burden, how simple, that is to say, as long as everyone knows Vue2 + Ant Design Vue it is ok. Mainly included a few commonly used components. If you have any other component requirements, please send them to me and I will try my best to complete them.

Quick learning

First, install the component library

npm install you-want
# or
yarn add you-want
# or
pnpm install you-want
Copy the code

Next, register the component in the project entry file main.js

import YouWant from 'you-want'

Vue.use(YouWant.YFormList)
Vue.use(YouWant.YSearchTable)
Vue.use(YouWant.YSearchForm)
Copy the code

Finally, it can be used directly within a page or component

<template> <div class=""> <! <y-search-table :FormProps="FormProps" :FormListColumns="FormListColumns" :TableColumns="columns" :TableData="data" :TableProps="TableProps" ></y-search-table> <! <y-form-list ref="formListRef" :FormListColumns="FormListColumns" > </y-form-list> </div> </template>Copy the code

Directions for use

  • YFormList – Keep the form simple by configuring it

  • YSearchTable – let the table fixed, do their own business

  • YSearchForm – make search adaptation, large and small screen for all

You can see the documentation below:

The FormList component uses documentation

Make forms easy to configure! No more piling up a lot of HTML tags, code hierarchy logic is clear! JSON configuration is simple and easy to use!

Attributes

FormListColumns

The FormListColumns parameter is an object and must be passed.

parameter instructions type An optional value The default value
key Key value, corresponding to the interface field string – –
tag Label, uppercase string seetag –
options Form component Configuration object – {}
formItemProps FormItem configuration items object {label: “name “} {}
nodeProps Attributes corresponding to the built-in tag node object – {}
hidden Configure the display/hide of nodes (intelligent linkage can be configured by using configuration expressions) Boolean expression / true/false/”{{formData.key === value}}” false
afterProps Nodes may be followed by units, buttons, or instructions… object – {}
colSpan Grid layout placeholder number 1 to 24 24
otherNode Other special nodes object[array] – –
tag

The tag parameter is a string that describes the tag and starts with an uppercase letter. Now support tags:

tag instructions The configuration document
Input The Input fields The document
Badge The Badge logo for The document
RadioGroup RadioGroup radio buttons The document
DatePicker DatePicker Date selection box The document
Textarea Textarea fields The document
Select Select the selector The document
InputNumber InputNumber Indicates the number input box The document
Switch The Switch Switch The document
Slider Slider Sliders input bar The document
Rate Rate Scoring Component The document
Upload The Upload to Upload The document
RangePicker RangePicker Date range The document
TimePicker TimePicker Time selection box The document
AutoComplete AutoComplete completes automatically The document
Cascader Cascader cascade selection The document
Span Span show The value is: options.initialValue or DetailData[key]
InputNumberSelect InputNumberSelect Indicates a number with a unit referenceInputNumber 和 Selectconfiguration
RangeTimePicker RangeTimePicker Time range seeRangeTimePicker
InputSelect InputSelect Text with a selection box referenceInput 和 Selectconfiguration
Slot Slot rendering, customizable complex forms Additional individual configuration

RangeTimePicker

The configuration of other nodes remains the same. The configuration of only nodeProps is as follows:

parameter instructions type An optional value The default value
format Display time format string – “HH:mm:ss”
disabled Disable all operations boolean – false
hourStep Hour option interval number – 1
minuteStep Minute option interval number – 1
secondStep Second option interval number – 1
disabledStartTime Disable the start time string Example: “09:10” –
disabledEndTime Disable end time string Example: “and” –
FormProps

The FormProps parameter is object, which is not mandatory, and the Form attribute is used for configuration reference

parameter instructions type An optional value The default value
labelCol Label Label layout object – {span: 6}
wrapperCol Node label Layout object – {span: 18}
. . . . .
DetailData

The DetailData parameter is the object. It is not mandatory. This parameter is passed only when you need to echo data (details/editing).

Use case

Text expression feeling is not clear, not intuitive, directly on the case code, simple and rough clear, lang Lang start!

::: Example of overall code configuration.

<template>
  <form-list 
    ref="formListRef"
    :FormProps="FormProps"
    :FormListColumns="FormListColumns"
  >
  </form-list>
  <a-button type="primary" @click="getData">Get form data</a-button>
</template>

<script>
// It can be ignored without configuration and has built-in default values
const FormProps =  {
  labelCol: { span: 5 },
  wrapperCol: { span: 13}};// Generate form configuration, mandatory
const FormListColumns = {
  key0: {
    tag: "Input".formItemProps: { label: "Input" },
    options: {
      rules: [{ required: true.message: "Choose!"}],},nodeProps: {
      disabled: false,},afterProps: {
      tag: "Button".label: "Choice".click: () = >{},},hidden: false,},key1: {
    tag: 'Badge'.formItemProps: {
      label: "Badge",},nodeProps: {
      text: 'Settled'}},key2: {
    tag: "Select".formItemProps: {
      label: "Select",},options: {
      initialValue: ' ',},nodeProps: {
      options: [{label: "All".value: ' ' },
        { label: "Yes".value: 1 },
        { label: "No." ".value: 2},],}},key3: {
    type: "RadioGroup".formItemProps: { label: "RadioGroup" },
    options: {
      initialValue: 1,},nodeProps: {
      options: [{label: "Time interval".value: 1 },
        { label: "Interval interval".value: 2},],}},key4: {
    type: "DatePicker".formItemProps: { label: "DatePicker" },
    options: {
      rules: [{ required: true.message: "Choose!"}],},nodeProps: {},},key5: {
    tag: "Textarea".formItemProps: { label: "Textarea" },
    options: {
      rules: [{ required: true.message: "Required!"}],},nodeProps: {},},key6: {
    tag: "InputNumber".formItemProps: { label: "InputNumber" },
    options: {
      rules: [{required: true.message: "Choose!" },
        { pattern: /^[1-9]\d*$/, message: "Please enter a positive integer!"},],},nodeProps: {
      placeholder: Please enter a positive integer.min: 1}},key7: {
    tag: "RangePicker".formItemProps: { label: "RangePicker" },
    options: {
      rules: [{ required: true.message: "Choose!"}],},nodeProps: {
      format: "YYYY-MM-DD HH:mm:ss".disabledDate(current) {
        return current && current < moment().add(-1."days"); }},},key8: {
    type: "TimePicker".formItemProps: { label: "TimePicker" },
    options: {
      rules: [{required: true.message: "Choose!"},],},nodeProps: {},},key9: {
    tag: "Span".formItemProps: {
      label: "Span",},options: {
      initialValue: 'I am Span',},nodeProps: {},},key10: {
    type: "InputNumberSelect".formItemProps: { label: "InputNumberSelect" },
    options: {
      initialValue: { number: 0.unit: 'points' },
      rules: [{required: true.message: "Required!"},],},nodeProps: {
      options: [{label: "Seconds".value: "s" },
        { label: "Points".value: "m"},],}},key11: {
    tag: "RangeTimePicker".formItemProps: {
      label: "RangeTimePicker",},options: {
      initialValue: [moment("Get"."HH:mm:ss"), moment("Selves"."HH:mm:ss")].rules: [{ required: true.message: "Choose!"}],},nodeProps: {
      format: "HH:mm:ss".disabled: false.disabledStartTime: '09:10'.disabledEndTime: 'cause it'.hourStep: 1.minuteStep: 1.secondStep: 1,,}}}export default {
  name: "Demo".data() {
    return {
      FormProps,
      FormListColumns
    };
  },
  computed: {},methods: {
    getData() {
      this.$refs.formListRef? .getFromValue((values) = > {
        // values are the form values
        console.log(values); }); ,}}};</script>  
Copy the code

: : :

rendering

The SearchTable component is documented

The design of this component is only UI component encapsulation, unified method of processing, unified page adaptation, does not cause redundant learning costs, mainly learning the use of UI component library.

The characteristics of

  • The filter section of the SearchForm header supports screen adaptation, showing different numbers in a row depending on the window size

  • Table Table at the bottom of the Table fixed UI design style, support pager, a variety of common modes support configuration

Attributes

FormListColumns

The FormListColumns parameter is an object and must be passed.

parameter instructions type An optional value The default value
key Key value, corresponding to the interface field string – –
tag Label, uppercase string seetag –
options Form component Configuration object – {}
formItemProps FormItem configuration items object {label: “name “} {}
nodeProps Attributes corresponding to the built-in tag node object – {}
tag

The tag parameter is a string that describes the tag and starts with an uppercase letter. Now support tags:

tag instructions The configuration document
Input The Input fields The document
RadioGroup RadioGroup radio buttons The document
DatePicker DatePicker Date selection box The document
Textarea Textarea fields The document
Select Select the selector The document
InputNumber InputNumber Indicates the number input box The document
Switch The Switch Switch The document
Slider Slider Sliders input bar The document
Rate Rate Scoring Component The document
Upload The Upload to Upload The document
RangePicker RangePicker Date range The document
TimePicker TimePicker Time selection box The document
AutoComplete AutoComplete completes automatically The document
InputNumberSelect InputNumberSelect Indicates a number with a unit referenceInputNumber 和 Selectconfiguration
RangeTimePicker RangeTimePicker Time range seeRangeTimePicker

RangeTimePicker

The configuration of other nodes remains the same. The configuration of only nodeProps is as follows:

parameter instructions type An optional value The default value
format Display time format string – “HH:mm:ss”
disabled Disable all operations boolean – false
hourStep Hour option interval number – 1
minuteStep Minute option interval number – 1
secondStep Second option interval number – 1
disabledStartTime Disable the start time string Example: “09:10” –
disabledEndTime Disable end time string Example: “and” –
FormProps

The FormProps parameter is object, which is not mandatory, and the Form attribute is used for configuration reference

parameter instructions type An optional value The default value
labelCol Label Label layout object – {span: 6}
wrapperCol Node label Layout object – {span: 18}
. . . . .
TableColumns

This parameter is array Object [array], which is the API for configuring tables. See document Table# Column

TableData

The parameter is array array. The data in the table below is generally the data requested by the interface.

TableProps

This parameter is the object and is about the configuration of table properties. The document see Table

Use case

Text expression feeling is not clear, not intuitive, directly on the case code, simple and rough clear, lang Lang start!

::: Example of overall code configuration.

<template>
  <div>
    <search-table
      ref="searchTableRef"
      :FormProps="FormProps"
      :FormListColumns="FormListColumns"
      :TableColumns="columns"
      :TableData="tableData"
      :TableProps="TableProps"
      @onValuesChange="onValuesChange"
      @change="searchTableChange"
    >
      <template slot="extra">
        <a-button type="primary" @click="createClick">new</a-button>
      </template>
      <span slot="source" slot-scope="{ record }">{{ record.tbSource === "1" ? "Hive" : "other"}}</span>
      <span slot="tbSource" slot-scope="{ record }">{{ record.tbSource === "1" ? "Hive" : "other"}}</span>
      <span slot="monitorSwitch" slot-scope="{ record }">{{ record.monitorSwitch === "1" ? Yes: No}}</span>
      <span slot="tbDegree" slot-scope="{ record }">
        {{ `P${record.tbDegree}` }}
      </span>
      <div slot="action" slot-scope="{ record }">
        <a
          v-if="record.monitorSwitch === '1'"
          style="margin-right: 8px"
          @click="tableItemsClick(record)"
        >Table monitoring items</a>
        <a v-else style="margin-right: 8px" @click="createClick(record)">A new monitoring</a>
      </div>
    </search-table>
  </div> 
</template>

<script>
// This is the default value, you can not upload, if you need to customize, optional upload
const FormPropsIndex = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18}};// No transmission is empty
const FormListColumnsIndex = {
  monitor: {
    tag: "Select".formItemProps: {
      label: "Monitor or not",},options: {
      initialValue: ' ',},nodeProps: {
      options: [{label: "All".value: ' ' },
        { label: "Yes".value: 1 },
        { label: "No." ".value: 2},],}},tableType: {
    tag: "Select".formItemProps: { label: "Table type" },
    options: {
      initialValue: 1,},nodeProps: {
      options: [{label: "Off-line table".value: 1 },
        { label: "Real-time table".value: 2},],}},tableImportance: {
    tag: "Select".formItemProps: { label: "Level of importance" },
    options: {
      initialValue: "",},nodeProps: {
      options: [{label: "All".value: "" },
        { label: "P0".value: 0 },
        { label: "P1".value: 1 },
        { label: "P2".value: 2 },
        { label: "P3".value: 3},],}},source: {
    tag: "Select".formItemProps: { label: "Data source" },
    options: {
      initialValue: "hive",},nodeProps: {
      options: [{label: "All".value: "" },
        { label: "hive".value: "hive"},],}},database: {
    tag: "Select".formItemProps: { label: "Database" },
    options: {},
    nodeProps: {
      options: [].}},tableName: {
    tag: "Select".formItemProps: { label: "Data sheet" },
    options: {},
    nodeProps: {
      options: [].placeholder: "Fuzzy searchable".showSearch: true.search: () = >{}}},userName: {
    tag: "Select".formItemProps: { label: "In charge" },
    options: {},nodeProps: {
      options: [].placeholder: "Please select database first.",}}};const columnsIndex = [
  {
    title: "Data source".dataIndex: "source".width: 100.scopedSlots: { customRender: "source"}, {},title: "Library".dataIndex: "db" },
  { title: "Data table name".dataIndex: "tb" },
  { title: "Data sheet Remarks".dataIndex: "tbComment" },
  {
    title: "Monitor or not".dataIndex: "monitorSwitch".width: 100.scopedSlots: { customRender: "monitorSwitch"}, {},title: "Table type".dataIndex: "tbSource".width: 100.scopedSlots: { customRender: "tbSource"}, {},title: "How important is the watch?".dataIndex: "tbDegree".width: 150.scopedSlots: { customRender: "tbDegree"}, {},title: "Number of Configured Rules".dataIndex: "ruleCnt".width: 150 },
  { title: "In charge".dataIndex: "tbOwner".width: 150 },
  {
    title: "Operation".dataIndex: "action".fixed: "right".width: 150.scopedSlots: { customRender: "action"}},];export default {
  name: "PageName".data(){
    return {
      FormProps: FormPropsIndex, // This parameter can be omitted and has a default value
      FormListColumns: FormListColumnsIndex,
      columns: columnsIndex,
      tableData: [].TableProps: {
        title: "".loading: false.rowKey: (record) = > `${record.db}${record.tb}`.pagination: {
          current: 1.pageSize: 10.total: 0}},feildValue: {},
      formData: {}}}.mounted(){},methods: {
    // Listen to brush options change event
    onValuesChange(props, values) {
      this.formData = Object.assign(this.formData, values); // Cache data for comparison
      // Todo
    },
    // table event, which is also the callback event of query, values query parameter, pagination page number change parameter
    searchTableChange(values = {}, pagination) {
      this.TableProps.pagination = Object.assign(this.TableProps.pagination, pagination)
      this.getFromData(Object.assign(this.feildValue, values));
    },
    // Request table list data
    getFromData(values){
      console.log(values)
      this.feildValue = values // Save the query parameters, which are required when switching page numbers
      // Todo}}},</script>
Copy the code

: : :

rendering