BaseForm.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <template>
  2. <a-modal
  3. :title="modalTitle"
  4. :width="1400"
  5. :visible="visible"
  6. class="ant-modal2"
  7. :confirmLoading="confirmLoading"
  8. @cancel="handleCancel"
  9. >
  10. <a-form :form="form">
  11. <a-form-item v-show="false" >
  12. <a-input v-decorator="['id']" type="hidden"/>
  13. </a-form-item>
  14. <a-form-item
  15. label="标题"
  16. :labelCol="labelCol"
  17. :wrapperCol="wrapperCol"
  18. >
  19. <a-input
  20. v-decorator="['title', {rules: [{required: true, message: '标题不能为空'}]}]" />
  21. </a-form-item>
  22. <a-form-item
  23. label="摘要"
  24. :labelCol="labelCol"
  25. :wrapperCol="wrapperCol"
  26. >
  27. <a-input
  28. v-decorator="['digest']" />
  29. </a-form-item>
  30. <a-form-item
  31. label="关键字"
  32. :labelCol="labelCol"
  33. :wrapperCol="wrapperCol"
  34. >
  35. <a-input
  36. v-decorator="['keywords', {rules: [{required: true, message: '排序不能为空'}]}]" />
  37. </a-form-item>
  38. <a-form-item
  39. label="排序"
  40. :labelCol="labelCol"
  41. :wrapperCol="wrapperCol"
  42. >
  43. <a-input
  44. type="number"
  45. v-decorator="['ord', {rules: [{required: true, message: '排序不能为空'}]}]" />
  46. </a-form-item>
  47. <a-form-item
  48. label="内容"
  49. :labelCol="labelCol"
  50. :wrapperCol="wrapperCol"
  51. >
  52. <wang-editor
  53. :content="descr"
  54. @catchData="catchData"
  55. ></wang-editor>
  56. </a-form-item>
  57. </a-form>
  58. <template slot="footer">
  59. <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
  60. </template>
  61. </a-modal>
  62. </template>
  63. <script>
  64. import pick from 'lodash.pick'
  65. import { addInformationHelp, updateInformationHelp } from '@/api/qykh/informationhelp'
  66. import WangEditor from '@/components/Editor/WangEditor'
  67. import UploadImg from '@/components/Upload/UploadImg'
  68. import UploadArticleFile from '@/components/Upload/UploadArticleFile'
  69. export default {
  70. name: 'BaseArticle',
  71. components: {
  72. WangEditor,
  73. UploadImg,
  74. UploadArticleFile
  75. },
  76. data () {
  77. return {
  78. labelCol: {
  79. xs: { span: 24 },
  80. sm: { span: 4 }
  81. },
  82. wrapperCol: {
  83. xs: { span: 24 },
  84. sm: { span: 20 }
  85. },
  86. topFlag: 0,
  87. status: 1,
  88. confirmLoading: false,
  89. mdl: {},
  90. modalTitle: null,
  91. form: this.$form.createForm(this),
  92. visible: false,
  93. descr: '',
  94. resultContent: '',
  95. type: null
  96. }
  97. },
  98. props: {
  99. },
  100. created () {
  101. },
  102. methods: {
  103. base (record) {
  104. this.visible = true
  105. // 如果是空标识添加
  106. if (this.BaseTool.Object.isBlank(record)) {
  107. this.modalTitle = '添加'
  108. this.descr = ''
  109. return
  110. }
  111. this.modalTitle = '编辑'
  112. this.type = record.type
  113. const { form: { setFieldsValue } } = this
  114. this.$nextTick(() => {
  115. setFieldsValue(Object.assign(pick(record, [
  116. 'id',
  117. 'title',
  118. 'pid',
  119. 'shortdesc',
  120. 'ord',
  121. 'digest',
  122. 'time',
  123. 'keywords'
  124. ])))
  125. this.descr = record.descr
  126. })
  127. },
  128. catchData (content) {
  129. this.resultContent = content
  130. },
  131. save () {
  132. const { form: { validateFieldsAndScroll } } = this
  133. this.confirmLoading = true
  134. validateFieldsAndScroll((errors, values) => {
  135. if (errors) {
  136. this.confirmLoading = false
  137. return
  138. }
  139. values = {
  140. ...values,
  141. descr: this.resultContent ? this.resultContent : this.descr
  142. }
  143. /* if (this.type === 2) {
  144. if (values.parentId == null) {
  145. this.$message.error('请选择父文章')
  146. return
  147. }
  148. } */
  149. if (this.BaseTool.String.isBlank(values.id)) {
  150. addInformationHelp(values)
  151. .then(() => {
  152. this.handleCancel(values)
  153. }).catch(() => {
  154. this.confirmLoading = false
  155. })
  156. } else {
  157. updateInformationHelp(values)
  158. .then(() => {
  159. this.handleCancel(values)
  160. }).catch(() => {
  161. this.confirmLoading = false
  162. })
  163. }
  164. })
  165. },
  166. handleCancel (values) {
  167. this.visible = false
  168. this.confirmLoading = false
  169. this.descr = ''
  170. this.resultContent = ''
  171. this.form.resetFields()
  172. if (this.BaseTool.Object.isNotBlank(values)) {
  173. this.$emit('ok', values)
  174. }
  175. }
  176. }
  177. }
  178. </script>