create.php 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. {include file="public/head"}
  5. <title>{$title}</title>
  6. </head>
  7. <body>
  8. <div id="form-add" class="mp-form" v-cloak="">
  9. <i-Form :model="formData" :label-width="80" >
  10. <Form-Item label="数据组名称">
  11. <i-input v-model="formData.name" placeholder="请输入数据组名称"></i-input>
  12. </Form-Item>
  13. <Form-Item label="数据字段">
  14. <i-input v-model="formData.config_name" placeholder="请输入数据字段例如:site_url"></i-input>
  15. </Form-Item>
  16. <Form-Item label="数据组简介">
  17. <i-input v-model="formData.info" placeholder="请输入数据组简介"></i-input>
  18. </Form-Item>
  19. <Form-Item v-for="(item, index) in formData.typelist" :label="'字段' + (index+1)">
  20. <row type="flex" ref="typelist" align="middle">
  21. <i-col span="10">
  22. <row>
  23. <i-col span="23">
  24. <Form-Item>
  25. <i-input :placeholder="item.name.placeholder" v-model="item.name.value"></i-input>
  26. </Form-Item>
  27. </i-col>
  28. </row>
  29. <row>
  30. <i-col span="23">
  31. <Form-Item>
  32. <i-input :placeholder="item.title.placeholder" v-model="item.title.value"></i-input>
  33. </Form-Item>
  34. </i-col>
  35. </row>
  36. <row>
  37. <i-col span="23">
  38. <Form-Item>
  39. <i-select :placeholder="item.type.placeholder" v-model="item.type.value">
  40. <i-option value="input">文本框</i-option>
  41. <i-option value="textarea">多行文本框</i-option>
  42. <i-option value="radio">单选框</i-option>
  43. <i-option value="checkbox">多选框</i-option>
  44. <i-option value="select">下拉选择</i-option>
  45. <i-option value="upload">单图</i-option>
  46. <i-option value="uploads">多图</i-option>
  47. </i-select>
  48. </Form-Item>
  49. </i-col>
  50. </row>
  51. </i-col>
  52. <i-col span="12">
  53. <Form-Item>
  54. <i-input type="textarea" rows="4" :placeholder="item.param.placeholder" v-model="item.param.value"></i-input>
  55. </Form-Item>
  56. </i-col>
  57. <i-col span="2" style="display:inline-block; text-align:right;">
  58. <i-button type="primary" icon="close-round" @click="removeType(index)"></i-button>
  59. </i-col>
  60. </row>
  61. </row>
  62. </Form-Item>
  63. <Form-Item><i-button type="primary" @click="addType">添加字段</i-button></Form-Item>
  64. <Form-Item :class="'add-submit-item'">
  65. <i-Button :type="'primary'" :html-type="'submit'" :size="'large'" :long="true" @click.prevent="submit">提交</i-Button>
  66. </Form-Item>
  67. </i-Form>
  68. </div>
  69. <script>
  70. $eb = parent._mpApi;
  71. mpFrame.start(function(Vue){
  72. new Vue({
  73. el:"#form-add",
  74. data:{
  75. formData:{
  76. name: '',
  77. config_name: '',
  78. typelist: [],
  79. info:''
  80. }
  81. },
  82. methods:{
  83. addType: function(){
  84. this.formData.typelist.push({
  85. name: {
  86. placeholder: "字段名称:姓名",
  87. value: ''
  88. },
  89. title: {
  90. placeholder: "字段配置名:name",
  91. value: ''
  92. },
  93. type: {
  94. placeholder: "字段类型",
  95. value: ''
  96. },
  97. param: {
  98. placeholder: "参数方式例如:\n1=白色\n2=红色\n3=黑色",
  99. value: ''
  100. }
  101. })
  102. },
  103. removeType: function(index){
  104. this.formData.typelist.splice(index,1);
  105. },
  106. submit: function(){
  107. $eb.axios.post("{$save}",this.formData).then((res)=>{
  108. if(res.status && res.data.code == 200)
  109. return Promise.resolve(res.data);
  110. else
  111. return Promise.reject(res.data.msg || '添加失败,请稍候再试!');
  112. }).then((res)=>{
  113. $eb.message('success',res.msg || '操作成功!');
  114. $eb.closeModalFrame(window.name);
  115. }).catch((err)=>{
  116. this.loading=false;
  117. $eb.message('error',err);
  118. });
  119. }
  120. }
  121. });
  122. });
  123. </script>
  124. </body>