index.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. <template>
  2. <div id="index">
  3. <el-col :span="24" class="main" v-loading="loadings" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
  4. <data-form :span="24" :fields="fields" :rules="rules" v-model="form" labelWidth="150px" @save="toSave">
  5. <template #buyPoint>
  6. <el-input v-model="form.buyPoint" type="number" placeholder="请输入购物赠送积分"></el-input>
  7. <p style="color: #999">金额:积分=10:1</p>
  8. </template>
  9. <template #autoCloseOrder>
  10. <el-input v-model="form.autoCloseOrder" type="number" placeholder="请输入自动关闭订单时间"></el-input>
  11. <p style="color: #999">关闭订单时间小于等于0时不自动关闭</p>
  12. </template>
  13. <template #agree>
  14. <editor v-model="form.agree" url="/files/point/config/upload" />
  15. </template>
  16. <template #bottom_menu>
  17. <data-form :span="24" :fields="testfields" v-model="form.bottom_menu" labelWidth="auto" :isSave="false">
  18. <template #list>
  19. <el-col :span="24" style="margin: 0 0 10px 0">
  20. <el-button type="primary" size="mini" @click="toAdd()">添加</el-button>
  21. </el-col>
  22. <data-table :usePage="false" :fields="fieldsList" :opera="opera" :data="list" @edit="toEdit" @del="toDel"> </data-table>
  23. </template>
  24. </data-form>
  25. </template>
  26. </data-form>
  27. </el-col>
  28. <e-dialog :dialog="dialog" @toClose="toClose">
  29. <template v-slot:info>
  30. <data-form :span="24" :fields="fieldsForm" :rules="fieldRules" v-model="fieldform" labelWidth="150px" @save="onSubmit">
  31. <template #is_use>
  32. <el-option v-for="i in useList" :key="i.model" :label="i.label" :value="i.value"></el-option>
  33. </template>
  34. <template #type>
  35. <el-option v-for="i in typeList" :key="i.model" :label="i.label" :value="i.value"></el-option>
  36. </template>
  37. </data-form>
  38. </template>
  39. </e-dialog>
  40. </div>
  41. </template>
  42. <script>
  43. import { mapState, createNamespacedHelpers } from 'vuex';
  44. const { mapActions: config } = createNamespacedHelpers('config');
  45. const { mapActions: dictData } = createNamespacedHelpers('dictData');
  46. export default {
  47. name: 'index',
  48. props: {},
  49. components: { editor: () => import('@/components/editor.vue') },
  50. data: function () {
  51. return {
  52. loadings: true,
  53. fields: [
  54. { label: '系统名称', model: 'title' },
  55. { label: 'logo', model: 'logo', type: 'upload', limit: 1, url: '/files/point/config/upload' },
  56. { label: '购物赠送积分', model: 'buyPoint', custom: true },
  57. { label: '自动关闭订单时间', model: 'autoCloseOrder', custom: true },
  58. { label: '提现日期', model: 'reward_day', type: 'Number' },
  59. { label: '底部文字', model: 'bottom_title' },
  60. { label: '底部菜单', model: 'bottom_menu', custom: true },
  61. { label: '分享图片', model: 'share', type: 'upload', limit: 1, url: '/files/point/config/upload' },
  62. { label: '用户协议', model: 'agree', custom: true },
  63. ],
  64. rules: {},
  65. form: { bottom_menu: {} },
  66. testfields: [{ label: '菜单列表', model: 'list', custom: true }],
  67. // 底部菜单
  68. opera: [
  69. { label: '修改', method: 'edit' },
  70. { label: '删除', method: 'del', confirm: true, type: 'danger' },
  71. ],
  72. list: [],
  73. fieldsList: [
  74. { label: '名称', model: 'name' },
  75. { label: '跳转路径', model: 'route' },
  76. { label: '未选中', model: 'normal[0].name' },
  77. { label: '选中', model: 'active[0].name' },
  78. {
  79. label: '跳转类型',
  80. model: 'type',
  81. format: (i) => {
  82. let data = this.typeList.find((f) => f.value == i);
  83. if (data) return data.label;
  84. else return '暂无';
  85. },
  86. },
  87. {
  88. label: '是否正在使用',
  89. model: 'is_use',
  90. format: (i) => {
  91. let data = this.useList.find((f) => f.value == i);
  92. if (data) return data.label;
  93. else return '暂无';
  94. },
  95. },
  96. { label: '排序', model: 'sort' },
  97. ],
  98. // 底部菜单表单
  99. fieldRules: {
  100. name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  101. route: [{ required: true, message: '请输入跳转路径', trigger: 'blur' }],
  102. normal: [{ required: true, message: '请选择未选中', trigger: 'change' }],
  103. active: [{ required: true, message: '请选择选中', trigger: 'change' }],
  104. type: [{ required: true, message: '请选择跳转类型', trigger: 'change' }],
  105. is_use: [{ required: true, message: '请选择是否使用', trigger: 'change' }],
  106. sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
  107. },
  108. fieldform: {},
  109. fieldsForm: [
  110. { label: '名称', model: 'name' },
  111. { label: '跳转路径', model: 'route' },
  112. { label: '未选中', model: 'normal', type: 'upload', limit: 1, url: '/files/point/config/upload' },
  113. { label: '选中', model: 'active', type: 'upload', limit: 1, url: '/files/point/config/upload' },
  114. { label: '跳转类型', model: 'type', type: 'select' },
  115. { label: '是否使用', model: 'is_use', type: 'select' },
  116. { label: '排序', model: 'sort', type: 'number' },
  117. ],
  118. // 是否使用
  119. useList: [],
  120. // 跳转类型
  121. typeList: [
  122. { label: 'redirectTo', value: '0' },
  123. { label: 'navigateTo', value: '1' },
  124. ],
  125. // 弹框
  126. dialog: { title: '信息管理', show: false, type: '1' },
  127. };
  128. },
  129. computed: {
  130. ...mapState(['user']),
  131. },
  132. async created() {
  133. await this.searchOther();
  134. await this.search();
  135. },
  136. methods: {
  137. ...config(['query', 'fetch', 'update']),
  138. ...dictData({ dictQuery: 'query' }),
  139. //执行查询
  140. async search() {
  141. const res = await this.fetch();
  142. if (this.$checkRes(res)) {
  143. let data = res.data;
  144. if (data.config) {
  145. data = {
  146. ...data,
  147. logo: data.config.logo,
  148. buyPoint: Number(data.config.buyPoint),
  149. pointPlan: data.config.pointPlan,
  150. share: data.config.share,
  151. autoCloseOrder: data.config.autoCloseOrder,
  152. };
  153. }
  154. if (!data.bottom_menu) data.bottom_menu = {};
  155. else {
  156. let list = _.sortBy(data.bottom_menu.list, function (item) {
  157. return item.sort;
  158. });
  159. this.$set(this, `list`, list);
  160. }
  161. this.$set(this, `form`, data);
  162. }
  163. this.loadings = false;
  164. },
  165. async toAdd() {
  166. this.dialog = { title: '信息管理', show: true, type: '1' };
  167. },
  168. // 关闭
  169. toClose() {
  170. this.fieldform = {};
  171. this.dialog = { title: '信息管理', show: false, type: '1' };
  172. },
  173. // 修改
  174. toEdit(index, data) {
  175. this.$set(this, `fieldform`, index.data);
  176. this.dialog = { title: '信息管理', show: true, type: '1' };
  177. },
  178. // 删除
  179. toDel(index, data) {
  180. let list = this.list;
  181. let num = index.index;
  182. list.splice(num, 1);
  183. },
  184. // 底部菜单提交
  185. onSubmit({ data }) {
  186. let info = this.list.find((f) => f.route == data.route);
  187. if (info == '' || info == undefined) this.list.push(data);
  188. this.toClose();
  189. },
  190. // 保存
  191. async toSave({ data }) {
  192. data.bottom_menu.list = this.list;
  193. let config = { logo: data.logo, buyPoint: Number(data.buyPoint), pointPlan: data.pointPlan, share: data.share, autoCloseOrder: data.autoCloseOrder };
  194. data.config = config;
  195. const res = await this.update(data);
  196. this.$checkRes(res, '操作成功', '操作失败');
  197. },
  198. // 查询其他信息
  199. async searchOther() {
  200. let res;
  201. // 是否使用
  202. res = await this.dictQuery({ code: 'use' });
  203. if (this.$checkRes(res)) this.$set(this, `useList`, res.data);
  204. },
  205. },
  206. metaInfo() {
  207. return { title: this.$route.meta.title };
  208. },
  209. };
  210. </script>
  211. <style lang="less" scoped></style>