add.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <div id="add">
  3. <el-row>
  4. <el-col :span="24" class="main animate__animated animate__backInRight">
  5. <el-col :span="24" class="one">
  6. <c-search :is_title="true" :is_back="true" @toBack="toBack"></c-search>
  7. </el-col>
  8. <el-col :span="24" class="two">
  9. <data-form :fields="fields" :form="form" :rules="{}" @save="toSave" :span="24">
  10. <template #is_vip>
  11. <el-option v-for="i in isnoList" :key="i._id" :label="i.label" :value="i.value"></el-option>
  12. </template>
  13. <template #gender>
  14. <el-option v-for="i in genderList" :key="i._id" :label="i.label" :value="i.value"></el-option>
  15. </template>
  16. <template #logo_url="{ item }">
  17. <c-upload v-model="form[item.model]" url="/files/projectadmin/imgurl/upload" :limit="1"></c-upload>
  18. </template>
  19. </data-form>
  20. </el-col>
  21. </el-col>
  22. </el-row>
  23. </div>
  24. </template>
  25. <script>
  26. import { mapState, createNamespacedHelpers } from 'vuex';
  27. const { mapActions } = createNamespacedHelpers('users');
  28. const { mapActions: dictdata } = createNamespacedHelpers('dictdata');
  29. export default {
  30. name: 'add',
  31. props: {},
  32. components: {},
  33. data: function () {
  34. return {
  35. fields: [
  36. { label: '账号', model: 'account', options: { readonly: true } },
  37. { label: '昵称', model: 'nick_name' },
  38. { label: '联系电话', model: 'phone' },
  39. { label: '性别', model: 'gender', type: 'select' },
  40. { label: '头像', model: 'logo_url', custom: true },
  41. { label: '是否为vip', model: 'is_vip', type: 'select' },
  42. { label: 'vip开始时间', model: 'vip_start_time', type: 'datetime' },
  43. { label: 'vip结束时间', model: 'vip_end_time', type: 'datetime' },
  44. ],
  45. form: {},
  46. // 字典
  47. // 性别
  48. genderList: [],
  49. // 是否
  50. isnoList: [],
  51. };
  52. },
  53. async created() {
  54. await this.searchOther();
  55. await this.search();
  56. },
  57. methods: {
  58. ...mapActions(['fetch', 'create', 'update']),
  59. ...dictdata({ dQuery: 'query' }),
  60. async search() {
  61. if (this.id) {
  62. let res = await this.fetch(this.id);
  63. if (this.$checkRes(res)) {
  64. this.$set(this, `form`, res.data);
  65. }
  66. }
  67. },
  68. // 保存信息
  69. async toSave({ data }) {
  70. let res;
  71. if (data.id) res = await this.update(data);
  72. else res = await this.create(data);
  73. if (this.$checkRes(res, `维护信息成功`, res.errmsg)) this.toBack();
  74. },
  75. // 字典
  76. async searchOther() {
  77. let res;
  78. // 性别
  79. res = await this.dQuery({ type: 'gender' });
  80. if (this.$checkRes(res)) {
  81. this.$set(this, `genderList`, res.data);
  82. }
  83. // 是否
  84. res = await this.dQuery({ type: 'is_no' });
  85. if (this.$checkRes(res)) {
  86. this.$set(this, `isnoList`, res.data);
  87. }
  88. },
  89. // 返回
  90. toBack() {
  91. window.history.go('-1');
  92. },
  93. },
  94. computed: {
  95. ...mapState(['user']),
  96. id() {
  97. return this.$route.query.id;
  98. },
  99. },
  100. metaInfo() {
  101. return { title: this.$route.meta.title };
  102. },
  103. watch: {
  104. test: {
  105. deep: true,
  106. immediate: true,
  107. handler(val) {},
  108. },
  109. },
  110. };
  111. </script>
  112. <style lang="less" scoped></style>