noticeEdit.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <template>
  2. <el-dialog :title="title" :visible.sync="open" width="960px">
  3. <el-form :model="form" ref="form" label-width="100px" :rules="rules">
  4. <el-form-item label="标题" prop="title">
  5. <el-input v-model="form.title" />
  6. </el-form-item>
  7. <el-form-item label="内容" prop="body">
  8. <el-input type="textarea" :autosize="{minRows: 3}" v-model="form.body"/>
  9. </el-form-item>
  10. </el-form>
  11. <hr>
  12. <p>1. 使用 <code>{</code> 和 <code>}</code> 把重要的内容包裹起来</p>
  13. <p>2. 链接后面如果紧跟内容,请用空格把连接和内容分隔开</p>
  14. <span slot="footer">
  15. <el-button @click="open = false">取 消</el-button>
  16. <el-button v-if="isedit" type="primary" @click="update">更 新</el-button>
  17. <el-button v-else type="primary" @click="save">提 交</el-button>
  18. </span>
  19. </el-dialog>
  20. </template>
  21. <script>
  22. export default {
  23. data () {
  24. return {
  25. title: '',
  26. open: false,
  27. isedit: false,
  28. form: {
  29. title: '',
  30. body: ''
  31. },
  32. rules: {
  33. title: {required: true, message: '请输入标题'},
  34. body: {required: true, message: '请输入内容'}
  35. }
  36. }
  37. },
  38. methods: {
  39. save () {
  40. this.$refs.form.validate(r => {
  41. if (r) {
  42. this.$http.post('notice', this.form).then(msg => {
  43. this.open = false
  44. this.$emit('reload')
  45. })
  46. }
  47. })
  48. },
  49. update () {
  50. this.$refs.form.validate(r => {
  51. if (r) {
  52. this.$http.put('notice/' + this.form.id, this.form).then(data => {
  53. this.open = false
  54. this.$emit('reload')
  55. }, err => {})
  56. }
  57. })
  58. },
  59. show (title, editData) {
  60. this.title = title
  61. if (this.$refs.form) {
  62. this.$refs.form.resetFields()
  63. }
  64. this.open = true
  65. this.isedit = Boolean(editData)
  66. this.form = editData || this.$options.data().form
  67. }
  68. }
  69. }
  70. </script>
  71. <style scoped>
  72. hr{height: 0;border: 0;border-top: 1px dashed #ddd;}
  73. </style>