admin/src/views/app/basic/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="one">
          <c-search></c-search>
        </el-col>
        <el-col :span="24" class="two">
          <data-form :fields="fields" :form="form" :rules="{}" @save="toSave" :span="24">
            <template #logo_url="{ item }">
              <c-upload v-model="form[item.model]" url="/files/projectadmin/imgurl/upload" :limit="1"></c-upload>
            </template>
            <template #foot_menus="{ item }">
              <el-button type="primary" size="small" @click="menusAdd()">添加</el-button>
              <data-table :fields="mfields" :opera="mopera" :data="form[item.model]" :usePage="false" @edit="menusEdit" @del="menusDel">
                <template #normal="{ row, item }">
                  <el-image
                    class="image"
                    @click="imgView(row[item.model])"
                    :src="row[item.model] && row[item.model].length > 0 ? row[item.model][0].uri : ''"
                  ></el-image>
                </template>
                <template #active="{ row, item }">
                  <el-image
                    class="image"
                    @click="imgView(row[item.model])"
                    :src="row[item.model] && row[item.model].length > 0 ? row[item.model][0].uri : ''"
                  ></el-image>
                </template>
              </data-table>
            </template>
            <template #account_btn="{ item }">
              <el-button type="primary" size="small" @click="abtnAdd()">添加</el-button>
              <data-table :fields="acfields" :opera="acopera" :data="form[item.model]" :usePage="false" @edit="acbtnEdit" @del="acbtnDel">
                <template #img_url="{ row, item }">
                  <el-image
                    class="image"
                    @click="imgView(row[item.model])"
                    :src="row[item.model] && row[item.model].length > 0 ? row[item.model][0].uri : ''"
                  ></el-image>
                </template>
              </data-table>
            </template>
          </data-form>
        </el-col>
      </el-col>
    </el-row>
    <c-dialog :dialog="dialog" @toClose="toClose">
      <template v-slot:info>
        <el-col :span="24" class="dialog_one" v-if="dialog.type == '1'">
          <data-form :fields="otherFields" :form="otherForm" :rules="{}" @save="dialogSave" :span="24">
            <template #normal="{ item }">
              <c-upload v-model="otherForm[item.model]" url="/files/projectadmin/imgurl/upload" :limit="1"></c-upload>
            </template>
            <template #active="{ item }">
              <c-upload v-model="otherForm[item.model]" url="/files/projectadmin/imgurl/upload" :limit="1"></c-upload>
            </template>
            <template #type>
              <el-option v-for="i in jumptypeLsit" :key="i._id" :label="i.label" :value="i.value"></el-option>
            </template>
            <template #is_use>
              <el-option v-for="i in isuseList" :key="i._id" :label="i.label" :value="i.value"></el-option>
            </template>
          </data-form>
        </el-col>
        <el-col :span="24" class="dialog_two" v-else-if="dialog.type == '2'">
          <data-form :fields="acbtnFields" :form="acbtnForm" :rules="{}" @save="acbtnSave" :span="24" @dataChange="dataChange">
            <template #img_url="{ item }">
              <c-upload v-model="acbtnForm[item.model]" url="/files/projectadmin/imgurl/upload" :limit="1"></c-upload>
            </template>
            <template #is_jump>
              <el-option v-for="i in isnoList" :key="i._id" :label="i.label" :value="i.value"></el-option>
            </template>
            <template #type>
              <el-option v-for="i in jumptypeLsit" :key="i._id" :label="i.label" :value="i.value"></el-option>
            </template>
            <template #is_use>
              <el-option v-for="i in isuseList" :key="i._id" :label="i.label" :value="i.value"></el-option>
            </template>
          </data-form>
        </el-col>
      </template>
    </c-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('appbasic');
const { mapActions: dictdata } = createNamespacedHelpers('dictdata');
const moment = require('moment');

export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      form: { logo_url: [], foot_menus: [], account_btn: [] },
      fields: [
        { label: '公司名称', model: 'name' },
        { label: '公司logo', model: 'logo_url', custom: true },
        { label: '底部菜单', model: 'foot_menus', custom: true },
        { label: '账号功能按钮', model: 'account_btn', custom: true },
      ],
      // 底部菜单
      mfields: [
        { label: '名称', model: 'name' },
        { label: '跳转路径', model: 'route' },
        {
          label: '跳转类型',
          model: 'type',
          format: (i) => {
            let data = this.jumptypeLsit.find((r) => r.value == i);
            if (data) return data.label;
            else return '暂无';
          },
        },
        { label: '排序', model: 'sort' },
        {
          label: '是否启用',
          model: 'is_use',
          format: (i) => {
            let data = this.isuseList.find((r) => r.value == i);
            if (data) return data.label;
            else return '暂无';
          },
        },
        { label: '未选中', model: 'normal', custom: true },
        { label: '选中', model: 'active', custom: true },
      ],
      mopera: [
        { label: '修改', method: 'edit' },
        { label: '删除', method: 'del', confirm: true, type: 'danger' },
      ],
      otherFields: [
        { label: '名称', model: 'name' },
        { label: '跳转路径', model: 'route' },
        { label: '跳转类型', model: 'type', type: 'select' },
        { label: '排序', model: 'sort', type: 'number' },
        { label: '是否启用', model: 'is_use', type: 'select' },
        { label: '未选中', model: 'normal', custom: true },
        { label: '选中', model: 'active', custom: true },
      ],
      otherForm: { normal: [], active: [] },
      // 账号功能按钮
      acfields: [
        { label: '名称', model: 'name' },
        { label: '图片', model: 'img_url', custom: true },
        {
          label: '是否跳转',
          model: 'is_jump',
          format: (i) => {
            let data = this.isnoList.find((r) => r.value == i);
            if (data) return data.label;
            else return '暂无';
          },
        },
        {
          label: '跳转类型',
          model: 'type',
          format: (i) => {
            let data = this.jumptypeLsit.find((r) => r.value == i);
            if (data) return data.label;
            else return '暂无';
          },
        },
        { label: '跳转路径', model: 'route' },
        { label: '按钮属性', model: 'nature' },
        { label: '排序', model: 'sort' },
        {
          label: '是否启用',
          model: 'is_use',
          format: (i) => {
            let data = this.isuseList.find((r) => r.value == i);
            if (data) return data.label;
            else return '暂无';
          },
        },
      ],
      acopera: [
        { label: '修改', method: 'edit' },
        { label: '删除', method: 'del', confirm: true, type: 'danger' },
      ],
      acbtnFields: [
        { label: '名称', model: 'name' },
        { label: '图片', model: 'img_url', custom: true },
        { label: '是否跳转', model: 'is_jump', type: 'select' },
        { label: '排序', model: 'sort', type: 'number' },
        { label: '是否启用', model: 'is_use', type: 'select' },
      ],
      acbtnForm: { img_url: [] },
      // 弹框
      dialog: { title: '底部菜单', show: false, type: '1' },
      // 字典
      isuseList: [],
      // 跳转类型
      jumptypeLsit: [],
      // 是否
      isnoList: [],
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...mapActions(['query', 'create', 'update']),
    ...dictdata({ dQuery: 'query' }),
    async search() {
      let res = await this.query();
      if (this.$checkRes(res)) {
        let data = res.data;
        if (!data.logo_url) data.logo_url = [];
        if (!data.foot_menus) data.foot_menus = [];
        if (data.foot_menus.length > 0) {
          data.foot_menus = data.foot_menus.sort((a, b) => {
            return a.sort - b.sort;
          });
        }
        if (!data.account_btn) data.account_btn = [];
        if (data.account_btn.length > 0) {
          data.account_btn = data.account_btn.sort((a, b) => {
            return a.sort - b.sort;
          });
        }
        this.$set(this, `form`, data);
      }
    },
    // 保存信息
    async toSave({ data }) {
      let res;
      if (data.id) res = await this.update(data);
      else res = await this.create(data);
      if (this.$checkRes(res, '维护信息成功', res.errmsg)) this.search();
    },
    // 菜单添加
    menusAdd() {
      this.dialog = { title: '底部菜单', show: true, type: '1' };
    },
    // 修改
    menusEdit({ data }) {
      this.$set(this, `otherForm`, data);
      this.dialog = { title: '底部菜单', show: true, type: '1' };
    },
    // 删除
    menusDel({ data }) {
      let foot_menus = this.form.foot_menus.filter((i) => i.id != data.id);
      this.$set(this.form, `foot_menus`, foot_menus);
    },
    // 保存
    dialogSave({ data }) {
      if (!data.id) {
        data.id = moment().valueOf();
        this.form.foot_menus = [...this.form.foot_menus, data];
      } else {
      }
      this.toClose();
    },
    // 账号功能按钮
    abtnAdd() {
      this.dialog = { title: '账号功能按钮', show: true, type: '2' };
    },
    // 修改
    acbtnEdit({ data }) {
      this.$set(this, `acbtnForm`, data);
      if (data.is_jump) this.dataChange({ model: 'is_jump', value: data.is_jump });
      this.dialog = { title: '账号功能按钮', show: true, type: '2' };
    },
    // 删除
    acbtnDel({ data }) {
      let account_btn = this.form.account_btn.filter((i) => i.id != data.id);
      this.$set(this.form, `account_btn`, account_btn);
    },
    dataChange({ model, value }) {
      if (model == 'is_jump') {
        if (value == '0') {
          let other = [{ label: '按钮属性', model: 'nature' }];
          this.acbtnFields.splice(3, 0, ...other);
        } else if (value == '1') {
          let other = [
            { label: '跳转类型', model: 'type', type: 'select' },
            { label: '跳转路径', model: 'route' },
          ];
          this.acbtnFields.splice(3, 0, ...other);
        }
      }
    },
    acbtnSave({ data }) {
      if (!data.id) {
        data.id = moment().valueOf();
        this.form.account_btn = [...this.form.account_btn, data];
      } else {
      }
      this.toClose();
    },
    // 关闭弹框
    toClose() {
      this.otherForm = {};
      this.acbtnForm = {};
      this.dialog = { title: '底部菜单', show: false, type: '1' };
    },
    // 字典
    async searchOther() {
      let res;
      // 是否启用
      res = await this.dQuery({ type: 'is_use' });
      if (this.$checkRes(res)) {
        this.$set(this, `isuseList`, res.data);
      }
      // 跳转类型
      res = await this.dQuery({ type: 'jump_type' });
      if (this.$checkRes(res)) {
        this.$set(this, `jumptypeLsit`, res.data);
      }
      // 是否
      res = await this.dQuery({ type: 'is_no' });
      if (this.$checkRes(res)) {
        this.$set(this, `isnoList`, res.data);
      }
    },
    // 预览图片
    imgView(e) {
      if (e && e.length > 0) {
        window.open(e[0].uri);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.image {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
</style>