OnChange.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <template>
  2. <div>
  3. <fm-generate-form
  4. :data="jsonData"
  5. :remote="remoteFuncs"
  6. :value="editData"
  7. @on-switch_1606187275240-change="switch_1606187275240Change"
  8. :remote-option="dynamicData"
  9. ref="generateForm"
  10. >
  11. </fm-generate-form>
  12. <el-button type="primary" @click="handleSubmit">Submit</el-button>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. data () {
  18. return {
  19. jsonData: {'list': [{'type': 'switch', 'icon': 'icon-switch', 'options': {'defaultValue': false, 'required': false, 'requiredMessage': '', 'disabled': false, 'customClass': '', 'labelWidth': 100, 'isLabelWidth': false, 'hidden': false, 'dataBind': true, 'remoteFunc': 'func_1606187275240', 'remoteOption': 'option_1606187275240'}, 'name': '开关', 'key': '1606187275240', 'model': 'switch_1606187275240', 'rules': []}, {'type': 'input', 'icon': 'icon-input', 'options': {'width': '100%', 'defaultValue': '', 'required': false, 'requiredMessage': '', 'dataType': '', 'dataTypeCheck': false, 'dataTypeMessage': '', 'pattern': '', 'patternCheck': false, 'patternMessage': '', 'placeholder': '', 'customClass': '', 'disabled': true, 'labelWidth': 100, 'isLabelWidth': false, 'hidden': true, 'dataBind': true, 'showPassword': false, 'remoteFunc': 'func_1606187282404', 'remoteOption': 'option_1606187282404'}, 'name': '单行文本', 'key': '1606187282404', 'model': 'input_1606187282404', 'rules': []}], 'config': {'labelWidth': 100, 'labelPosition': 'right', 'size': 'small'}},
  20. editData: {},
  21. remoteFuncs: {
  22. },
  23. dynamicData: {
  24. }
  25. }
  26. },
  27. methods: {
  28. switch_1606187275240Change (value) {
  29. console.log(value)
  30. setTimeout(() => {
  31. const { generateForm } = this.$refs
  32. generateForm[value ? 'display' : 'hide'](['input_1606187282404'])
  33. value && generateForm.disabled(['input_1606187282404'], false)
  34. }, 2000)
  35. },
  36. handleSubmit () {
  37. this.$refs.generateForm.getData().then(data => {
  38. // Data verification succeeded
  39. alert(JSON.stringify(data))
  40. }).catch(e => {
  41. // Data verification failed
  42. })
  43. }
  44. }
  45. }
  46. </script>