add.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>添加字段</title>
  6. </head>
  7. <body>
  8. <script type="text/html" id="form">
  9. <div class="mainBox">
  10. <div class="main-container">
  11. <div class="layui-tab layui-tab-brief">
  12. <ul class="layui-tab-title">
  13. <li class="layui-this">基础设置</li>
  14. <li>表单元素</li>
  15. <li>关联模型</li>
  16. </ul>
  17. <div class="layui-tab-content">
  18. <div class="layui-tab-item layui-show">
  19. <div class="layui-form-item">
  20. <div class="layui-form-item" style="margin-bottom:5px;">
  21. <label class="layui-form-label">
  22. <text style="color:red;">*</text>
  23. 所属表</label>
  24. <div class="layui-input-block">
  25. <div class="xmSelect"
  26. data-name="table_id"
  27. data-sourceType="route"
  28. data-source="/plugin/curd/curd.table/index"
  29. data-paging="true"
  30. data-radio="true"
  31. data-textField="table"
  32. data-subTextField="comment"
  33. data-valueField="id"
  34. data-selected="{{d.table_id}}"
  35. data-onchange="setTableId"
  36. ></div>
  37. </div>
  38. </div>
  39. <div class="layui-form-item" style="margin-bottom:5px;">
  40. <div class="layui-row">
  41. <div class="layui-col-lg6 layui-col-md6 layui-col-sm6">
  42. <label class="layui-form-label">
  43. <text style="color:red;">*</text>
  44. 字段名称</label>
  45. <div class="layui-input-block">
  46. <input type="text" name="field" placeholder="请输入字段名称" class="layui-input"
  47. lay-verify="required"
  48. autocomplete="off">
  49. </div>
  50. </div>
  51. <div class="layui-col-lg6 layui-col-md6 layui-col-sm6">
  52. <label class="layui-form-label">
  53. <text style="color:red;">*</text>
  54. 字段注释</label>
  55. <div class="layui-input-block">
  56. <input type="text" name="comment" placeholder="请输入字段注释" class="layui-input"
  57. lay-verify="required"
  58. autocomplete="off">
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. <div class="layui-form-item">
  64. <div class="layui-form-item layui-inline">
  65. <label class="layui-form-label">
  66. <text style="color:red;">*</text>
  67. 存储类型</label>
  68. <div class="layui-input-block">
  69. <select name="data_type" class="layui-select" lay-verify="required"
  70. lay-filter="select-data-type" lay-search="true">
  71. <option value="">请选择存储类型</option>
  72. <option value="integer">integer</option>
  73. <option value="biginteger">biginteger</option>
  74. <option value="binary">binary</option>
  75. <option value="boolean">boolean(tinyint)</option>
  76. <option value="date">date</option>
  77. <option value="datetime">datetime</option>
  78. <option value="decimal">decimal</option>
  79. <option value="float">float</option>
  80. <option value="string">string</option>
  81. <option value="text">text</option>
  82. <option value="time">time</option>
  83. <option value="timestamp">timestamp</option>
  84. <option value="uuid">uuid</option>
  85. </select>
  86. </div>
  87. </div>
  88. <div class="layui-form-item layui-inline" id="lengthDiv">
  89. <label class="layui-form-label">
  90. <text style="color:red;">*</text>
  91. 存储长度</label>
  92. <div class="layui-input-block">
  93. <input type="text" name="limit" placeholder="请输入字段长度" class="layui-input"
  94. lay-verify="required"
  95. autocomplete="off">
  96. </div>
  97. </div>
  98. <div class="layui-form-item layui-inline" id="precisionDiv" style="display:none;">
  99. <label class="layui-form-label">
  100. <text style="color:red;">*</text>
  101. 整数长度</label>
  102. <div class="layui-input-block">
  103. <input type="text" name="precision" placeholder="请输入整数部分长度" value="11"
  104. class="layui-input"
  105. lay-verify="required"
  106. autocomplete="off">
  107. </div>
  108. </div>
  109. <div class="layui-form-item layui-inline" id="scaleDiv" style="display:none;">
  110. <label class="layui-form-label">
  111. 保留小数位</label>
  112. <div class="layui-input-block">
  113. <input type="text" name="scale" placeholder="请输入保留小数位" value="2"
  114. class="layui-input"
  115. autocomplete="off">
  116. </div>
  117. </div>
  118. </div>
  119. <div class="layui-form-item" style="margin-bottom:5px;" id="defaultVal">
  120. <label class="layui-form-label">
  121. 默认值</label>
  122. <div class="layui-input-block">
  123. <input type="text" name="default" placeholder="请输入字段默认值"
  124. class="layui-input"
  125. autocomplete="off">
  126. </div>
  127. </div>
  128. <div class="layui-form-item layui-inline">
  129. <label class="layui-form-label" title="允许为空">
  130. 允许为空</label>
  131. <div class="layui-input-block">
  132. <input type="hidden" name="is_empty" value="2" />
  133. <input type="checkbox" checked="checked" name="is_empty" id="is_empty" value="1"
  134. title="允许"/>
  135. </div>
  136. </div>
  137. <div class="layui-form-item layui-inline">
  138. <label class="layui-form-label" title="表头排序">
  139. 表头排序</label>
  140. <div class="layui-input-block">
  141. <input type="hidden" name="is_thead_sort" value="2" />
  142. <input type="checkbox" name="is_thead_sort"
  143. id="is_thead_sort"
  144. value="1"
  145. title="表头排序"/>
  146. </div>
  147. </div>
  148. <div class="layui-form-item layui-inline">
  149. <label class="layui-form-label" title="默认排序">
  150. 默认排序</label>
  151. <div class="layui-input-block">
  152. <select class="layui-select" name="default_select_sort">
  153. <option value="">不设置</option>
  154. <option value="asc">ASC</option>
  155. <option value="desc">DESC</option>
  156. </select>
  157. </div>
  158. </div>
  159. <div class="layui-form-item layui-inline">
  160. <label class="layui-form-label" title="显示位置">
  161. 显示位置</label>
  162. <div class="layui-input-block">
  163. <input type="hidden" name="search_show" value="2" />
  164. <input type="checkbox" checked="checked" name="search_show" id="search_show" value="1"
  165. title="搜索表单"/>
  166. <input type="hidden" name="table_show" value="2" />
  167. <input type="checkbox" checked="checked" name="table_show" id="table_show" value="1"
  168. title="数据列表"/>
  169. <input type="hidden" name="add_show" value="2" />
  170. <input type="checkbox" checked="checked" name="add_show" id="add_show" value="1"
  171. title="添加表单"/>
  172. <input type="hidden" name="edit_show" value="2" />
  173. <input type="checkbox" checked="checked" name="edit_show" id="edit_show" value="1"
  174. title="编辑表单"/>
  175. </div>
  176. </div>
  177. <div class="layui-form-item" style="margin-bottom:5px;">
  178. <label class="layui-form-label" title="搜索表单,数据列表,添加表单,编辑表单等显示排序">
  179. 显示排序</label>
  180. <div class="layui-input-block">
  181. <input type="text" name="show_sort" placeholder="请输入数字,倒序生成字段在数据库和表单中的位置" class="layui-input">
  182. </div>
  183. </div>
  184. <div class="layui-form-item">
  185. <label class="layui-form-label" title="数据表格,当前字段的宽度,单位px,默认80,此处输入整数即可">
  186. 列宽</label>
  187. <div class="layui-input-block">
  188. <input type="text" name="cell_width" placeholder="数据表格,当前字段的宽度,单位px,默认80,此处输入整数即可"
  189. class="layui-input">
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. <div class="layui-tab-item">
  195. <div class="layui-form-item">
  196. <label class="layui-form-label">
  197. <text style="color:red;">*</text>
  198. 表单元素</label>
  199. <div class="layui-input-block">
  200. <div class="xmSelect"
  201. data-name="form_type"
  202. data-source='[{"name":"单行文本输入框","value":"input"},{"name":"密码输入框","value":"password"},{"name":"当前后台管理员ID","value":"admin_user_id"},{"name":"普通文本域","value":"textarea"},{"name":"单选按钮","value":"radio"},{"name":"开关单选","value":"switch"},{"name":"复选框","value":"checkbox"},{"name":"普通单选下拉框","value":"select"},{"name":"xm-select下拉框","value":"xm_select"},{"name":"xm-select联动下拉框","value":"linkage_xm_select"},{"name":"时间选择器","value":"laydate"},{"name":"颜色选择器","value":"color_picker"},{"name":"上传控件","value":"upload"},{"name":"富文本编辑器","value":"editor"}]'
  203. data-subTextField="value"
  204. data-valueField="value"
  205. data-layVerify="required"
  206. data-radio="true"
  207. data-placeholder="请选择表单元素"
  208. data-onchange="formTypeChange"
  209. ></div>
  210. </div>
  211. </div>
  212. <div class="layui-form-item">
  213. <label class="layui-form-label" title="附加设置">
  214. <text style="color:red;">*</text>
  215. 附加设置</label>
  216. <div class="layui-input-block" id="addition">
  217. <div style="padding: 9px 5px;">请先选择表单元素</div>
  218. </div>
  219. </div>
  220. </div>
  221. <div class="layui-tab-item">
  222. <div class="layui-form-item">
  223. <label class="layui-form-label">
  224. 关联表</label>
  225. <div class="layui-input-block">
  226. <div class="xmSelect"
  227. data-name="relation[table]"
  228. data-sourceType="route"
  229. data-source="/plugin/curd/curd/getTableList"
  230. data-textField="title"
  231. data-valueField="title"
  232. data-radio="true"
  233. data-placeholder="请选择关联表"
  234. data-onchange="relationTableChange"
  235. ></div>
  236. </div>
  237. </div>
  238. <div class="layui-form-item">
  239. <label class="layui-form-label">
  240. <text style="color:red;">*</text>
  241. 关联方式</label>
  242. <div class="layui-input-block">
  243. <select class="layui-select" name="relation[type]">
  244. <option value="belongsTo">belongsTo</option>
  245. <option value="hasOne">hasOne</option>
  246. </select>
  247. </div>
  248. </div>
  249. <div class="layui-form-item">
  250. <label class="layui-form-label">
  251. <text style="color:red;">*</text>
  252. 关联字段</label>
  253. <div class="layui-input-block">
  254. <select class="layui-select" name="relation[field]" id="relationField">
  255. <option value="">请先选择关联表</option>
  256. </select>
  257. </div>
  258. </div>
  259. <div class="layui-form-item">
  260. <label class="layui-form-label">
  261. 显示字段</label>
  262. <div class="layui-input-block">
  263. <select class="layui-select" name="relation[show_field]" id="relationShowField">
  264. <option value="">请先选择关联表</option>
  265. </select>
  266. </div>
  267. </div>
  268. <div class="layui-form-item">
  269. <label class="layui-form-label">
  270. <text style="color:red;">*</text>
  271. 关联函数名</label>
  272. <div class="layui-input-block">
  273. <input type="text" name="relation[fun_name]" placeholder="请先选择关联表" class="layui-input"/>
  274. </div>
  275. </div>
  276. </div>
  277. </div>
  278. </div>
  279. </div>
  280. </div>
  281. <div class="bottom">
  282. <div class="button-container">
  283. <button type="submit" class="laytp-btn laytp-btn-primary laytp-btn-sm" lay-submit="" lay-filter="add">
  284. <i class="layui-icon layui-icon-ok"></i>
  285. 提交
  286. </button>
  287. <button type="reset" class="laytp-btn laytp-btn-sm">
  288. <i class="layui-icon layui-icon-refresh"></i>
  289. 重置
  290. </button>
  291. </div>
  292. </div>
  293. </script>
  294. <form class="layui-form" lay-filter="layui-form"></form>
  295. <script>
  296. if(localStorage.getItem("staticDomain")){
  297. document.write("<link rel='stylesheet' href='" + localStorage.getItem("staticDomain") + "/component/layui/css/layui.css?v=" + localStorage.getItem("version") + "'>");
  298. document.write("<script src='" + localStorage.getItem("staticDomain") + "/component/layui/layui.js?v="+localStorage.getItem("version")+"'><\/script>");
  299. document.write("<script src='" + localStorage.getItem("staticDomain") + "/component/laytp/layuiConfig.js?v="+localStorage.getItem("version")+"'><\/script>");
  300. }else{
  301. document.write("<link rel='stylesheet' href='/static/component/layui/css/layui.css?v=" + localStorage.getItem("version") + "'>");
  302. document.write("<script src='/static/component/layui/layui.js?v="+localStorage.getItem("version")+"'><\/script>");
  303. document.write("<script src='/static/component/laytp/layuiConfig.js?v="+localStorage.getItem("version")+"'><\/script>");
  304. }
  305. </script>
  306. <script>
  307. var filedModulePath = '';
  308. if(localStorage.getItem("staticDomain")){
  309. filedModulePath = '../../../plugin/curd/js/field';
  310. }else{
  311. filedModulePath = '../../../../../static/plugin/curd/js/field';
  312. }
  313. layui.extend({
  314. field: filedModulePath
  315. }).use(['laytp','field'],function(){
  316. layui.laytpl($("#form").html()).render({table_id:layui.context.get("laytpDevtoolCurdTableId")},function(string){
  317. $("form").html(string);
  318. layui.laytpForm.render();
  319. layui.form.render();
  320. });
  321. layui.form.on('submit(add)', function(data){
  322. facade.ajax({
  323. route:'/plugin/curd/curd.field/add',
  324. data : data.field,
  325. contentType: "application/x-www-form-urlencoded"
  326. }).done(function(res){
  327. if(res.code === 0){
  328. parent.layui.layer.close(parent.layui.layer.getFrameIndex(window.name));//关闭当前页
  329. parent.layui.table.reload("field-table");
  330. }
  331. });
  332. return false;
  333. });
  334. })
  335. </script>
  336. </body>
  337. </html>