web-admin/src/views/platSettings/config/index.vue

<template>
  <div id="index">
    <el-col :span="24" class="main" v-loading="loadings" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
      <data-form :span="24" :fields="fields" :rules="rules" v-model="form" labelWidth="150px" @save="toSave">
        <template #buyPoint>
          <el-input v-model="form.buyPoint" type="number" placeholder="请输入购物赠送积分"></el-input>
          <p style="color: #999">金额：积分=10：1</p>
        </template>
        <template #autoCloseOrder>
          <el-input v-model="form.autoCloseOrder" type="number" placeholder="请输入自动关闭订单时间"></el-input>
          <p style="color: #999">关闭订单时间小于等于0时不自动关闭</p>
        </template>
        <template #agree>
          <editor v-model="form.agree" url="/files/point/config/upload" />
        </template>
        <template #bottom_menu>
          <data-form :span="24" :fields="testfields" v-model="form.bottom_menu" labelWidth="auto" :isSave="false">
            <template #list>
              <el-col :span="24" style="margin: 0 0 10px 0">
                <el-button type="primary" size="mini" @click="toAdd()">添加</el-button>
              </el-col>
              <data-table :usePage="false" :fields="fieldsList" :opera="opera" :data="list" @edit="toEdit" @del="toDel"> </data-table>
            </template>
          </data-form>
        </template>
      </data-form>
    </el-col>
    <e-dialog :dialog="dialog" @toClose="toClose">
      <template v-slot:info>
        <data-form :span="24" :fields="fieldsForm" :rules="fieldRules" v-model="fieldform" labelWidth="150px" @save="onSubmit">
          <template #is_use>
            <el-option v-for="i in useList" :key="i.model" :label="i.label" :value="i.value"></el-option>
          </template>
          <template #type>
            <el-option v-for="i in typeList" :key="i.model" :label="i.label" :value="i.value"></el-option>
          </template>
        </data-form>
      </template>
    </e-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: config } = createNamespacedHelpers('config');
const { mapActions: dictData } = createNamespacedHelpers('dictData');
export default {
  name: 'index',
  props: {},
  components: { editor: () => import('@/components/editor.vue') },
  data: function () {
    return {
      loadings: true,
      fields: [
        { label: '系统名称', model: 'title' },
        { label: 'logo', model: 'logo', type: 'upload', limit: 1, url: '/files/point/config/upload' },
        { label: '购物赠送积分', model: 'buyPoint', custom: true },
        { label: '自动关闭订单时间', model: 'autoCloseOrder', custom: true },
        { label: '提现日期', model: 'reward_day', type: 'Number' },
        { label: '底部文字', model: 'bottom_title' },
        { label: '底部菜单', model: 'bottom_menu', custom: true },
        { label: '分享图片', model: 'share', type: 'upload', limit: 1, url: '/files/point/config/upload' },
        { label: '用户协议', model: 'agree', custom: true },
      ],
      rules: {},
      form: { bottom_menu: {} },
      testfields: [{ label: '菜单列表', model: 'list', custom: true }],
      // 底部菜单
      opera: [
        { label: '修改', method: 'edit' },
        { label: '删除', method: 'del', confirm: true, type: 'danger' },
      ],
      list: [],
      fieldsList: [
        { label: '名称', model: 'name' },
        { label: '跳转路径', model: 'route' },
        { label: '未选中', model: 'normal[0].name' },
        { label: '选中', model: 'active[0].name' },
        {
          label: '跳转类型',
          model: 'type',
          format: (i) => {
            let data = this.typeList.find((f) => f.value == i);
            if (data) return data.label;
            else return '暂无';
          },
        },
        {
          label: '是否正在使用',
          model: 'is_use',
          format: (i) => {
            let data = this.useList.find((f) => f.value == i);
            if (data) return data.label;
            else return '暂无';
          },
        },
        { label: '排序', model: 'sort' },
      ],
      // 底部菜单表单
      fieldRules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        route: [{ required: true, message: '请输入跳转路径', trigger: 'blur' }],
        normal: [{ required: true, message: '请选择未选中', trigger: 'change' }],
        active: [{ required: true, message: '请选择选中', trigger: 'change' }],
        type: [{ required: true, message: '请选择跳转类型', trigger: 'change' }],
        is_use: [{ required: true, message: '请选择是否使用', trigger: 'change' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
      },
      fieldform: {},
      fieldsForm: [
        { label: '名称', model: 'name' },
        { label: '跳转路径', model: 'route' },
        { label: '未选中', model: 'normal', type: 'upload', limit: 1, url: '/files/point/config/upload' },
        { label: '选中', model: 'active', type: 'upload', limit: 1, url: '/files/point/config/upload' },
        { label: '跳转类型', model: 'type', type: 'select' },
        { label: '是否使用', model: 'is_use', type: 'select' },
        { label: '排序', model: 'sort', type: 'number' },
      ],
      // 是否使用
      useList: [],
      // 跳转类型
      typeList: [
        { label: 'redirectTo', value: '0' },
        { label: 'navigateTo', value: '1' },
      ],
      // 弹框
      dialog: { title: '信息管理', show: false, type: '1' },
    };
  },
  computed: {
    ...mapState(['user']),
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...config(['query', 'fetch', 'update']),
    ...dictData({ dictQuery: 'query' }),
    //执行查询
    async search() {
      const res = await this.fetch();
      if (this.$checkRes(res)) {
        let data = res.data;
        if (data.config) {
          data = {
            ...data,
            logo: data.config.logo,
            buyPoint: Number(data.config.buyPoint),
            pointPlan: data.config.pointPlan,
            share: data.config.share,
            autoCloseOrder: data.config.autoCloseOrder,
          };
        }
        if (!data.bottom_menu) data.bottom_menu = {};
        else {
          let list = _.sortBy(data.bottom_menu.list, function (item) {
            return item.sort;
          });
          this.$set(this, `list`, list);
        }
        this.$set(this, `form`, data);
      }
      this.loadings = false;
    },
    async toAdd() {
      this.dialog = { title: '信息管理', show: true, type: '1' };
    },
    // 关闭
    toClose() {
      this.fieldform = {};
      this.dialog = { title: '信息管理', show: false, type: '1' };
    },
    // 修改
    toEdit(index, data) {
      this.$set(this, `fieldform`, index.data);
      this.dialog = { title: '信息管理', show: true, type: '1' };
    },
    // 删除
    toDel(index, data) {
      let list = this.list;
      let num = index.index;
      list.splice(num, 1);
    },
    // 底部菜单提交
    onSubmit({ data }) {
      let info = this.list.find((f) => f.route == data.route);
      if (info == '' || info == undefined) this.list.push(data);
      this.toClose();
    },
    // 保存
    async toSave({ data }) {
      data.bottom_menu.list = this.list;
      let config = { logo: data.logo, buyPoint: Number(data.buyPoint), pointPlan: data.pointPlan, share: data.share, autoCloseOrder: data.autoCloseOrder };
      data.config = config;
      const res = await this.update(data);
      this.$checkRes(res, '操作成功', '操作失败');
    },
    // 查询其他信息
    async searchOther() {
      let res;
      // 是否使用
      res = await this.dictQuery({ code: 'use' });
      if (this.$checkRes(res)) this.$set(this, `useList`, res.data);
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>