45f98efa07110f4761ce0877da61a189bc4014a5.svn-base 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <template>
  2. <a-drawer
  3. :title="title"
  4. :width="800"
  5. placement="right"
  6. :closable="false"
  7. @close="close"
  8. :visible="visible"
  9. >
  10. <a-spin :spinning="confirmLoading">
  11. <a-form :form="form">
  12. <#list columns as po><#rt/>
  13. <#if po.fieldName !='id'><#rt/>
  14. <a-form-item
  15. :labelCol="labelCol"
  16. :wrapperCol="wrapperCol"
  17. label="${po.filedComment}">
  18. <#if po.fieldType =='date'>
  19. <a-date-picker v-decorator="[ '${po.fieldName}', <#if po.nullable =='N'>validatorRules.${po.fieldName} <#else>{}</#if>]" />
  20. <#elseif po.fieldType =='datetime'>
  21. <a-date-picker showTime format='YYYY-MM-DD HH:mm:ss' v-decorator="[ '${po.fieldName}', <#if po.nullable =='N'>validatorRules.${po.fieldName} <#else>{}</#if>]" />
  22. <#elseif "int,decimal,double,"?contains(po.fieldType)>
  23. <a-input-number v-decorator="[ '${po.fieldName}', <#if po.nullable =='N'>validatorRules.${po.fieldName} <#else>{}</#if>]" />
  24. <#else>
  25. <a-input placeholder="请输入${po.filedComment}" v-decorator="['${po.fieldName}', <#if po.nullable =='N'>validatorRules.${po.fieldName} <#else>{}</#if>]" />
  26. </#if>
  27. </a-form-item>
  28. </#if>
  29. </#list>
  30. </a-form>
  31. </a-spin>
  32. <a-button type="primary" @click="handleOk">确定</a-button>
  33. <a-button type="primary" @click="handleCancel">取消</a-button>
  34. </a-drawer>
  35. </template>
  36. <script>
  37. import { httpAction } from '@/api/manage'
  38. import pick from 'lodash.pick'
  39. import moment from "moment"
  40. export default {
  41. name: "${entityName}Modal",
  42. data () {
  43. return {
  44. title:"操作",
  45. visible: false,
  46. model: {},
  47. labelCol: {
  48. xs: { span: 24 },
  49. sm: { span: 5 },
  50. },
  51. wrapperCol: {
  52. xs: { span: 24 },
  53. sm: { span: 16 },
  54. },
  55. confirmLoading: false,
  56. form: this.$form.createForm(this),
  57. validatorRules:{
  58. <#list columns as po>
  59. <#if po.fieldName !='id'>
  60. <#if po.nullable =='N'>
  61. ${po.fieldName}:{rules: [{ required: true, message: '请输入${po.filedComment}!' }]},
  62. </#if>
  63. </#if>
  64. </#list>
  65. },
  66. url: {
  67. add: "/${entityPackage}/${entityName?uncap_first}/add",
  68. edit: "/${entityPackage}/${entityName?uncap_first}/edit",
  69. },
  70. }
  71. },
  72. created () {
  73. },
  74. methods: {
  75. add () {
  76. this.edit({});
  77. },
  78. edit (record) {
  79. this.form.resetFields();
  80. this.model = Object.assign({}, record);
  81. this.visible = true;
  82. this.$nextTick(() => {
  83. this.form.setFieldsValue(pick(this.model<#list columns as po><#if po.fieldName !='id' && po.fieldType?index_of("date")==-1>,'${po.fieldName}'</#if></#list>))
  84. //时间格式化
  85. <#list columns as po>
  86. <#if po.fieldName !='id' && po.fieldType?index_of("date")!=-1>
  87. this.form.setFieldsValue({${po.fieldName}:this.model.${po.fieldName}?moment(this.model.${po.fieldName}):null})
  88. </#if>
  89. </#list>
  90. });
  91. },
  92. close () {
  93. this.$emit('close');
  94. this.visible = false;
  95. },
  96. handleOk () {
  97. const that = this;
  98. // 触发表单验证
  99. this.form.validateFields((err, values) => {
  100. if (!err) {
  101. that.confirmLoading = true;
  102. let httpurl = '';
  103. let method = '';
  104. if(!this.model.id){
  105. httpurl+=this.url.add;
  106. method = 'post';
  107. }else{
  108. httpurl+=this.url.edit;
  109. method = 'post';
  110. }
  111. let formData = Object.assign(this.model, values);
  112. //时间格式化
  113. <#list columns as po>
  114. <#if po.fieldName !='id' && po.fieldType =='date'>
  115. formData.${po.fieldName} = formData.${po.fieldName}?formData.${po.fieldName}.format():null;
  116. <#elseif po.fieldName !='id' && po.fieldType =='datetime'>
  117. formData.${po.fieldName} = formData.${po.fieldName}?formData.${po.fieldName}.format('YYYY-MM-DD HH:mm:ss'):null;
  118. </#if>
  119. </#list>
  120. console.log(formData)
  121. httpAction(httpurl,formData,method).then((res)=>{
  122. if(res.success){
  123. that.$message.success(res.message);
  124. that.$emit('ok');
  125. }else{
  126. that.$message.warning(res.message);
  127. }
  128. }).finally(() => {
  129. that.confirmLoading = false;
  130. that.close();
  131. })
  132. }
  133. })
  134. },
  135. handleCancel () {
  136. this.close()
  137. },
  138. }
  139. }
  140. </script>
  141. <style lang="less" scoped>
  142. /** Button按钮间距 */
  143. .ant-btn {
  144. margin-left: 30px;
  145. margin-bottom: 30px;
  146. float: right;
  147. }
  148. </style>