detail.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <template>
  2. <div id="form-1">
  3. <el-row>
  4. <el-col :span="24" class="main animate__animated animate__backInRight">
  5. <el-col class="top-btn">
  6. <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
  7. </el-col>
  8. <el-col :span="12" class="one">
  9. <data-form :span="24" :fields="fields" v-model="form" :rules="rules" @save="onSubmit">
  10. <template #type>
  11. <el-option v-for="i in typeList" :key="i.model" :label="i.label" :value="i.value"></el-option>
  12. </template>
  13. <template #status>
  14. <el-option v-for="i in statusList" :key="i.model" :label="i.label" :value="i.value"></el-option>
  15. </template>
  16. <template #content>
  17. <editor v-model="form.content" />
  18. </template>
  19. </data-form>
  20. </el-col>
  21. </el-col>
  22. </el-row>
  23. </div>
  24. </template>
  25. <script>
  26. const _ = require('lodash');
  27. const moment = require('moment');
  28. import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
  29. const { mapActions } = createNamespacedHelpers('banner');
  30. const { mapActions: dictData } = createNamespacedHelpers('dictData');
  31. export default {
  32. name: 'form-1',
  33. props: {},
  34. components: {
  35. editor: () => import('@/components/editor.vue'),
  36. },
  37. data: function () {
  38. return {
  39. form: {},
  40. rules: {
  41. name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  42. type: [{ required: false, message: '请选择类型', trigger: 'change' }],
  43. to: [{ required: false, message: '请输入跳转至', trigger: 'blur' }],
  44. status: [{ required: true, message: '请选择是否正在使用', trigger: 'change' }],
  45. url: [{ required: true, message: '请选择图片', trigger: 'change' }],
  46. },
  47. fields: [
  48. { label: '名称', model: 'name' },
  49. { label: '类型', model: 'type', type: 'select' },
  50. { label: '跳转至', model: 'to' },
  51. { label: '是否正在使用', model: 'status', type: 'select' },
  52. {
  53. label: '图片',
  54. model: 'url',
  55. type: 'upload',
  56. url: '/files/point/banner/upload',
  57. },
  58. { label: '内容', model: 'content', type: '' },
  59. ],
  60. // 类型
  61. typeList: [],
  62. // 是否使用
  63. statusList: [],
  64. };
  65. },
  66. async created() {
  67. await this.searchOther();
  68. await this.search();
  69. },
  70. methods: {
  71. ...dictData({ dictQuery: 'query' }),
  72. ...mapActions(['fetch', 'create', 'update']),
  73. // 查询
  74. async search() {
  75. if (this.id) {
  76. let res = await this.fetch(this.id);
  77. if (this.$checkRes(res)) {
  78. this.$set(this, `form`, res.data);
  79. }
  80. } else {
  81. this.$set(this, `form`, {});
  82. this.$set(this.form, `status`, this.status);
  83. }
  84. },
  85. // 提交
  86. async onSubmit({ data }) {
  87. let res;
  88. if (data.id) res = await this.update(data);
  89. else res = await this.create(data);
  90. if (this.$checkRes(res)) {
  91. this.$message({ type: `success`, message: `维护信息成功` });
  92. this.toBack();
  93. }
  94. },
  95. // 查询其他信息
  96. async searchOther() {
  97. let res;
  98. // 类型
  99. res = await this.dictQuery({ code: 'banner_type' });
  100. if (this.$checkRes(res)) {
  101. this.$set(this, `typeList`, res.data);
  102. }
  103. // 是否使用
  104. res = await this.dictQuery({ code: 'status' });
  105. if (this.$checkRes(res)) {
  106. this.$set(this, `statusList`, res.data);
  107. }
  108. },
  109. // 返回
  110. toBack() {
  111. window.history.go('-1');
  112. },
  113. },
  114. computed: {
  115. id() {
  116. return this.$route.query.id;
  117. },
  118. status() {
  119. return this.$route.query.status;
  120. },
  121. },
  122. metaInfo() {
  123. return { title: this.$route.meta.title };
  124. },
  125. watch: {
  126. test: {
  127. deep: true,
  128. immediate: true,
  129. handler(val) {},
  130. },
  131. },
  132. };
  133. </script>
  134. <style lang="less" scoped></style>