后台管理模板

//接口域名【只用改这里域名就好了】
let baseUrl = "https://xinjichu.xxxyin.cn";
// 图片上传接口（不用动）
let uploadImg = "base/upload_img";
// 文件上传接口（不用动）
let uploadFile = "base/upload_file";
const defaultRoleStatus = true; // 默认权限
module.exports = {
  //这里是项目名字，改下就行
  title: "基础管理系统",
  //  defaultTheme: '#408EFF',   推荐默认主题
  defaultTheme: "#6959CD",
  defaultRoleStatus,
  /**
   * @type {boolean} true | false
   * @description Whether show the settings right-panel
   */
  showSettings: true,

  /**
   * @type {boolean} true | false
   * @description Whether need tagsView
   */
  tagsView: true,

  /**
   * @type {boolean} true | false
   * @description Whether fix the header
   */
  fixedHeader: false,

  /**
   * @type {boolean} true | false
   * @description Whether show the logo in sidebar
   */
  sidebarLogo: true,

  /**
   * @type {boolean} true | false
   * @description Whether support pinyin search in headerSearch
   * Bundle size minified 47.3kb,minified + gzipped 63kb
   */
  supportPinyinSearch: true,

  /**
   * @type {string | array} 'production' | ['production', 'development']
   * @description Need show err logs component.
   * The default is only used in the production env
   * If you want to also use it in dev, you can pass ['production', 'development']
   */
  errorLog: "production",

  // 文件图片前缀
  baseUrl,
  // 图片上传接口
  uploadImg,
  // 文件上传接口
  uploadFile,
  // 接口前缀
  baseApi: baseUrl + "/admin",
  //是否是手机客户端，如果是这里会限制富文本展示的预览宽度
  isPhone: false,
  // 文件上传全路径接口【富文本用的】
  uploadFileAll: baseUrl + "/admin/" + uploadFile,
  // 图片上传全路径接口【富文本用的】
  uploadImgAll: baseUrl + "/admin/" + uploadImg,
};

//.env.development
# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = 'https://xinjichu.xxxyin.cn/admin'
//修改这个域名，开发环境中有效

//.env.production
# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = 'https://xinjichu.xxxyin.cn/admin'

//修改这个域名，正式环境中有效

export const asyncRoutes = [
  {
    path: "/user", // 一层目录
    component: Layout,
    redirect: "/user/user", // 第一个user是目录 第二个是user.vue
    meta: {
      title: "人员管理",
      icon: "el-icon-user-solid",
    },
    children: [
      {
        path: "user", // 修改为 user
        component: () => import("@/views/user/user"), // @/views/user/xxx  => @/views/user/xxx
        name: "用户列表",
        meta: { title: "用户列表" },
      },
      {
        path: "share-images",
        component: () => import("@/views/operate/share-images"),
        name: "分享图列表",
        meta: { title: "分享图列表" },
      },
    ],
  },
];

import request from "@/utils/request";
// 获取列表
export const getList = (data) => {
  return request({
    url: "/user/get_member_list",
    method: "post",
    data: data,
  });
};
// 删除
export const del = (id) =>
  request({
    url: "/member/del",
    method: "post",
    data: { id: id },
  });
// 添加
export const add = (data) =>
  request({
    url: "/member/add",
    method: "post",
    data: data,
  });
// 修改
export const update = (data) =>
  request({
    url: "/member/edit",
    method: "post",
    data: data,
  });
// 修改单个字段
export const updateStatus = (data) =>
  request({
    url: "/user/modify_field",
    method: "post",
    data: data,
  });

<script>
  import { mapGetters } from "vuex";
  import {
    getList,
    update,
    add,
    del,
    updateStatus,
  } from "@/api/admin/{{name}}.js";
  import option from "./{{name}}-options.js";

  export default {
    name: "name",
    data() {
      return {
        permission: {
          addBtn: false,
          editBtn: false,
          delBtn: false,
          excelBtn: false,
        }, //权限
        page: {
          currentPage: 1,
          pageSize: 10,
        },
        form: {},
        params: {},
        loading: false,
        data: [],
        option: {},
      };
    },
    created() {
      const role = this.$defaultRoleStatus;
      this.permission.addBtn = this.zcbtn[this.$options.name + "_add"] || role;
      this.permission.editBtn = this.zcbtn[this.$options.name + "_edit"] || role;
      this.permission.delBtn = this.zcbtn[this.$options.name + "_del"] || role;
      this.permission.excelBtn =
        this.zcbtn[this.$options.name + "_excel"] || role;
      this.option = option(this);
    },
    mounted() {

    },
    computed: {
      ...mapGetters(["zcbtn"]),
    },
    methods: {
      // switch切换 启动禁用
      switchChange(e, id) {
        if (e == 1) {
          updateStatus({ field: "state", value: 1, id }).then((res) => {
            this.$notify({
              title: "成功",
              message: "修改状态成功",
              type: "success",
            });
          });
        }
        if (e == 2) {
          updateStatus({ field: "state", value: 2, id }).then((res) => {
            this.$notify({
              title: "成功",
              message: "修改状态成功",
              type: "success",
            });
          });
        }
      },
      // 上传前
      uploadError(error,column){
        console.error(error)
        console.error(column)
      },
      uploadBefore(file, done, loading) {
      done()
        // 文件处理

        // if (
        //   suffix == "pdf" ||
        //   suffix == "doc" ||
        //   suffix == "docx" ||
        //   suffix == "xlsx"
        // ) {
        //   this.form.info_files_name.push(fileName);
        //   this.form.info_files_suffix.push(suffix);
        //   done();
        //   return;
        // }

        // 什么都不是

        // if (suffix) {
        //   loading();
        //   this.$message.error("请上传正确的格式");
        // }
      },
      // 自定义删除
      handleDel(row, index) {
        this.$refs.crud.rowDel(row, index);
      },
      // 自定义编辑
      handleEdit(row, index) {
        this.$refs.crud.rowEdit(row, index);
      },
      uploadAfter(res, done) {
        done();
      },
      // 获取列表
      getList() {
        this.loading = true;
        const data = Object.assign(
          {
            page: this.page.currentPage,
            limit: this.page.pageSize,
          },
          this.params
        );
        this.data = [];
        return getList(data).then((res) => {
          this.loading = false;
          this.page.total = res.num;
          this.data = res.data;
          return Promise.resolve(true)
        });
      },
      // 新增
      rowSave(row, done, loading) {
        add(row)
          .then(() => {
            this.$message.success("新增成功");
            done();
            this.getList();
          })
          .catch(() => {
            loading();
          });
      },
      // 修改数据
      rowUpdate(row, index, done, loading) {
        update(row)
          .then(() => {
            this.$message.success("修改成功");
            done();
            this.getList();
          })
          .catch(() => {
            loading();
          });
      },
      // 删除
      rowDel(row) {
        this.$confirm("此操作将永久删除, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            return del(row.id);
          })
          .then(() => {
            this.$message.success("删除成功");
            this.getList();
          });
      },
      async searchChange(params, done) {
        // console.log(params);
        if (params.add_time && params.add_time.length > 0) {
          params.start_time = params.add_time[0].getTime() / 1000;
          params.end_time = params.add_time[1].getTime() / 1000;
        }
        if (done) done();
        this.params = params;
        this.page.currentPage = 1;
        await this.getList();
        this.$message.success("搜索成功");
      },
      async searchChange2(params, done) {
        console.log(params);
        if (done) done();
        this.params = {};
        this.page.currentPage = 1;
        await this.getList();
        this.$message.success("搜索成功");
      },
      async refreshChange() {
        await this.getList();
        this.$message.success("刷新成功");
      },
    },
  };
</script>

import { getToken } from '@/utils/auth'
const defaultSettings = require('../../settings.js')
export default (_self) => {  // _self  页面实例
    return {
        editBtn: true, // 编辑按钮
        delBtn: true, // 删除按钮
        addBtn: true, // 添加按钮
        labelWidth: 140, // 弹窗 labelWidth的宽度
        index: true,  // 是否显示序号
        indexLabel: '序号',
        align: 'center',  // 表格对齐方式
        headerAlign: 'center', // 表头对齐
        border: true,           // 边框
        dialogWidth: '50%',    // 弹窗宽度
        stripe: false,
        size: 'mini',
        excelBtn: true,     // 导出
        selection: true,    // 多选
        searchMenuSpan: 4,
        props: {
            label: 'label',
            value: 'value'
        },
        column: [
           import { getToken } from '@/utils/auth'
const defaultSettings = require('../../settings.js')
export default (_self) => {
    return {
        editBtn: true,
        delBtn: true,
        addBtn: true,
        labelWidth: 140,
        index: true,
        indexLabel: '序号',
        align: 'center',
        headerAlign: 'center',
        border: true,
        dialogWidth: '50%',
        stripe: false,
        size: 'mini',
        // excelBtn: true,
        // selection: true,
        searchMenuSpan: 4,
        props: {
            label: 'label',
            value: 'value'
        },
        column: [
            // 普通字段
            {
                width:80,
                label: "普通字段",
                prop: "pt",
                span: 12,
                rules: [{
                    required: true,
                    message: "请输入",
                    trigger: "blur"
                }]
            },
               // 价格 数量 手机 正则 身份证号
            {
                width:100,
                sortable: true,
                label: "价格",
                prop: "price",
                rules: [{
                        required: true,
                        message: "请输入价格",
                        trigger: "blur"
                    },
                    { pattern: /(^[1-9][0-9]{0,7}$)|(^((0\.0[1-9]$)|(^0\.[1-9]\d?)$)|(^[1-9][0-9]{0,7}\.\d{1,2})$)/, message: '请输入正确的价格', trigger: 'blur' },
                  { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号码', trigger: 'blur' },
                    { pattern: /^[0-9]\d*$/, message: 'XXX必须是正整数', trigger: 'blur' },
                    { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入正确的手机', trigger: 'blur' }
                ]
            },
            // 图片上传
            {
                width:100,
                data: {
                    key: getToken()
                },
                tip: '只能上传jpg/png文件，且不超过2m',
                accept: 'image/jpeg,image/png',
                label: '头像',
                prop: 'avatar',
                type: 'upload',
                listType: 'picture-img',
                span: 24,
                propsHttp: {
                    res: 'datas',
                    url:'url'
                },
                action: defaultSettings.uploadImg
            },
            // 图片组
            {
                width:160,
                label: '图片组',
                prop: 'imgs',
                dataType: 'string',
                type: 'upload',
                data: {
                    key: getToken(),
                    file_type: 1,
                },
                span: 24,
                listType: 'picture-card',
                accept: 'image/jpeg,image/png',
                tip: '只能上传jpg/png文件，且不超过2m',
                propsHttp: {
                    res: 'datas',
                     url:'url'
                },
                action: defaultSettings.uploadImg
            },

            {
                 showColumn: false,
                 hide:true,
                width: 120,
                accept: "application/msword,application/vnd.ms-works,application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
                label: '附件组',
                prop: 'info_files',
                type: 'upload',
                dataType: 'string',
                loadText: '附件上传中，请稍等',
                span: 24,
                tip: '只能上传pdf/doc/docx/xlsx文件，且不超过10m',
                propsHttp: {
                    res: 'datas',
                     url:'url'
                },
                action: defaultSettings.uploadFile,
            },
            {
                width: 160,
                sortable: true,
                label: "添加时间",
                prop: "add_time",
                row: true,
                span: 12,
                display: false,
                type: 'datetime',
                searchSpan: 12,
                searchRange: true,
                searchSpan: 6,
                search: true,
            },
            // 网络字典  remote远程搜索 multiple多选  typeformate 自定义选框内容 分页长度过多导致弹窗卡顿
            {
                width:100,
                label: "商品名",
                prop: "goods_id",
                type: "select",
                props: {
                    res: "datas.data",
                    label: "WLMC",
                    value: "WLBM",
                },
                // multiple:true,
                // remote: true,
                // typeslot: true,
                // typeformat(item, label, value) {
                //     return `${"编码"}:${item.WLBM}-${item.WLMC}`;
                // },
                span: 12,
                dicUrl: `${
                    defaultSettings.baseUrl
                  }/admin/goods/get_goods_list?key=${getToken()}` +
                    "&api_path=/goods/get_goods_list&WLMC={{key}}&limit=20&page=1",
                rules: [{
                    required: true,
                    message: "请输入商品名",
                    trigger: "blur",
                }, ],
            },
             // 本地字典
            {
                width:80,
                span: 12,
                label: "修改类型",
                prop: "change",
                type: 'select',

                dicData: [{
                        label: '增加',
                        value: 1
                    }, {
                        label: '减少',
                        value: 2
                    },

                ],
                rules: [{
                    required: true,
                    message: '请选择状态',
                    trigger: 'change'
                }],
            },
            {
                width: 80,
                editDisplay: false,
                row: true,
                span: 12,
                label: "是否启用",
                prop: "state",
                search: true,
                searchSpan: 4,
                type: 'select',
                slot: true,
                dicData: [{
                    label: '启用',
                    value: 1
                }, {
                    label: '禁用',
                    value: 2
                }, ],
                rules: [{
                    required: true,
                    message: '请选择状态',
                    trigger: 'change'
                }],
            },
        ],
    }
}

 {
  path: '/meeting',
  component: Layout,
  redirect: '/meeting/meeting',
  meta: {
    title: '会议管理',
    icon: 'el-icon-user-solid'
  },
  children: [

    {
      path: 'meeting',
      component: () =>
        import('@/views/meeting/meeting'),
      name: '会议列表',
      meta: { title: '会议列表' }
    },
    {
      path: 'order-meeting_subject_list/:id(\\d+)',//正则id，必须是数字
      component: () =>
          import ('@/views/meeting/meeting_subject_list'),//与会议列表在同一目录
      name: '表决详情',
      meta: { title: '表决详情', icon: 'user', noCache: false, activeMenu: '/meeting/meeting' },
      hidden: true//在侧边菜单不可见
  },
  ]
}

 methods: {
      tosubject(row, index) {//表决详情题目列表
        this.$router.push("/meeting/order-meeting_subject_list/" + row.id);//跳转并加上对应ID
      },
      }

  {
      path: 'join-list/:id(\\name+)',
      path: 'sub-user/:id(\\d+)',
      component: () =>
        import('@/views/user/sub-user'),
      name: 'sub-user',
      meta: { title: '下级用户', activeMenu: '/user/sub-user', noCache: false },
      hidden: true
    },

this.$router.push({
  path: "/user/sub-user/" + row.id + "?name=" + row.nickname,
});
//上面就是放到事件中执行跳转的，你可以跟多个参数，跟url带参数一样

  created() {
this.$route.query.name
  }

this.$confirm("此操作将永久删除, 是否继续?", "提示", {
  confirmButtonText: "确定",
  cancelButtonText: "取消",
  type: "warning",
})
  .then(() => {
    return del(row.id);
  })
  .then(() => {
    this.$message.success("删除成功");
    this.getList();
  });

const defaultRoleStatus = false; // 默认权限

...
  created() {
    // console.log("添加", this.$route.params.id);
    this.params.p_id=  this.$route.params.id
    this.permission.addBtn = this.zcbtn.client_user_add || false;
    this.permission.editBtn = this.zcbtn.client_user_edit || false;
    this.permission.delBtn = this.zcbtn.client_user_del || false;
    this.permission.excelBtn = this.zcbtn.client_user_excel || false;
    this.option = option(this);
  },
  ...

...
// 请求拦截
service.interceptors.request.use(
    config => {
        // do something before request is sent
        let params = (config.params !== undefined ? config.params : config.data)
            // console.log('请求拦截', config)
        params['key'] = getToken()
            // console.log('请求拦截', params)
        params.api_path = config.url
            // 重新赋值
        if (config.params !== undefined) {
            config.params = params
        } else {
            config.data = params
        }
        if (store.getters.token) {
            // let each request carry token
            // ['X-Token'] is a custom headers key
            // please modify it according to the actual situation
            // config.headers['X-Token'] = getToken()
        }
        return config
    },
    error => {
        // do something with request error
        console.log(error) // for debug
        return Promise.reject(error)
    }
)

// 响应拦截器
service.interceptors.response.use(
    response => {
        // console.log('拦截器', response)
        const res = response.data
        if (res.code !== 200) { // 自定义返回
            console.log('致命错误', response)
            switch (res.code) {
                case 999:
                    MessageBox.confirm('登录过期，您可以关闭当前页面，或重新登录', '确认注销', {
                        confirmButtonText: '重新登录',
                        cancelButtonText: '关闭当前页面',
                        type: 'warning'
                    }).then(() => {
                        store.dispatch('user/resetToken').then(() => {
                            location.reload()
                        })
                    }).catch(() => {
                        console.log('关闭页面')
                        closePage()
                    })
                    break
                case 400:
                    Message.error(res.datas.error);
                    break
                default:
                    Message.error('未知错误，请联系超级管理员');
            }
            return Promise.reject(res)
        } else {
            return res.datas
        }
    },
    error => {
        console.log('致命错误2', error)
        if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    error.message = '错误请求'
                    break
                case 401:
                    error.message = '未授权，请重新登录'
                    break
                case 403:
                    error.message = '拒绝访问'
                    break
                case 404:
                    error.message = '请求错误,未找到该资源'
                    break
                case 405:
                    error.message = '请求方法未允许'
                    break
                case 408:
                    error.message = '请求超时'
                    break
                case 500:
                    error.message = '服务器端出错'
                    break
                case 501:
                    error.message = '网络未实现'
                    break
                case 502:
                    error.message = '网络错误'
                    break
                case 503:
                    error.message = '服务不可用'
                    break
                case 504:
                    error.message = '网络超时'
                    break
                case 505:
                    error.message = 'http版本不支持该请求'
                    break
                default:
                    error.message = `未知错误${error.response.status}`
            }
        } else {
            error.message = '服务器繁忙,请稍后重试'
        }
        Message({
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

...
    params['key'] = getToken()
    if(!params[`test_id`]){//这里是为了防止跟搜索冲突
      params[`test_id`]=gettestID()//从缓存中取值
    }

import Cookies from "js-cookie";

const TokenKey = "Admin-Token";

export function getToken() {
  return Cookies.get(TokenKey);
}

export function setToken(token) {
  return Cookies.set(TokenKey, token);
}

export function removeToken() {
  return Cookies.remove(TokenKey);
}

export function setUserId(userId) {
  return Cookies.set("userId", userId);
}
export function getUserId() {
  return Cookies.get("userId");
}
export function removeUserId() {
  return Cookies.remove("userId");
}

export function settestID(test_id) {
  return Cookies.set("test_id", test_id);
}
export function gettestID() {
  return Cookies.get("test_id");
}

...
// 登录
    login({ commit }, userInfo) {
        const { username, password } = userInfo
        return new Promise((resolve, reject) => {
            login({ username: username.trim(), password: password }).then(data => {
                // 登录返回的数据
                commit('SET_TOKEN', data.key)
                commit('SET_USER_ID', data.id)
                setToken(data.key)//存入请求凭证
                setUserId(data.id)//存入用户id

                resolve()
            }).catch(error => {
                reject(error)
            })
        })
    },
...

...
// 登录
    login({ commit }, userInfo) {
        const { username, password } = userInfo
        return new Promise((resolve, reject) => {
            login({ username: username.trim(), password: password }).then(data => {
                // 登录返回的数据
                commit('SET_TOKEN', data.key)
                commit('SET_USER_ID', data.id)
                setToken(data.key)//存入请求凭证
                setUserId(data.id)//存入用户id
settestID(data.test_id)//这里存入test_id
                resolve()
            }).catch(error => {
                reject(error)
            })
        })
    },
...

 data() {
    return {
     ...
      formtype: 1, //表单类型
      demand_id: 0, //需求id
      formData: {}, //关联的表单存储，
      formOption: {}, //表单配置
      model_show: false, //组件显示
    };
  },

 //签约
    ondemand_signing(row) {
      this.formtype = 4;//多个配置表单用type区分，只有一个可以不用
      this.demand_id = row.id;
      this.formData = {};
      this.formOption = {//赋值配置
        emptyBtn: false,
        submitBtn: false,
        title: "签约",
        column: [
          {
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "timestamp",
            label: "签约时间",
            span: 24,
            display: true,
            prop: "signing_day",
          },
          {
            type: "number",
            label: "签约金额",
            span: 24,
            display: true,
            prop: "signing_price",
          },
        ],
      };
      let coshow = setTimeout(() => {//延时配置表单
        this.model_show = true;
        clearTimeout(coshow);
      }, 200);
    },
    //转出需求
    ondemand_transfer(row) {
      this.formtype = 3;//多个配置表单用type区分，只有一个可以不用
      this.demand_id = row.id;
      this.formData = {
        turn_admin_id: row.admin_info.id,
      };
      this.formOption = {//赋值配置
        emptyBtn: false,
        submitBtn: false,
        title: "转给同事",
        column: [
          {
            type: "select",
            label: "商务",
            span: 24,

            display: true,
            prop: "turn_admin_id",
            dicUrl: `${
              defaultSettings.baseApi
            }/ywgl_admin/all_list?key=${getToken()}&type=1`,

            props: {
              label: "realname",
              value: "id",
              res: "datas.data",
            },
            rules: [
              {
                required: true,
                message: "请选择商务",
              },
            ],
          },
        ],
      };
      console.log(this.formOption);
      let coshow = setTimeout(() => {//延时配置表单
        this.model_show = true;
        clearTimeout(coshow);
      }, 200);
    },

  changeform(value, downe) {
      value.demand_id = this.demand_id;

      switch (this.formtype) {//根据不同的表单请求不同的接口
        case 1: //跟进
          value.make_time = value.make_time / 1000;

          demand_up(value).then((res) => {
            this.getList();
            downe();
          });
          break;
        case 2: //跟进
          up_programme(value).then((res) => {
            this.getList();
            downe();
          });
          break;
        case 3: //转出
          demand_transfer(value).then((res) => {
            this.getList();
            downe();
          });
          break;
        case 4: //签约
          value.signing_day = value.signing_day / 1000;
          demand_signing(value).then((res) => {
            this.getList();
            downe();
          });
          break;
        case 5: //舍弃
          demand_abandon(value).then((res) => {
            this.getList();
            downe();
          });
          break;
      }
    },

//下面是一个子表单中根据填写的值改变另外一个子表单的内容的范例
{
            type: "dynamic",
            label: "功能",
            span: 24,
            row: true,
            display: true,
            children: {
              align: "center",
              headerAlign: "center",
              index: false,
              addBtn: true,
              delBtn: true,
              column: [
                {
                  type: "input",
                  label: "功能",
                  span: 24,
                  display: true,
                  prop: "name",
                },
                {
                  type: "input",
                  label: "工时",
                  span: 24,
                  type: "number",
                  display: true,
                  change: ({ column, index, row, value }) => {
                    if(!row.price){
                    row.price = value * this.unit_price;
                    }
                  },
                  prop: "day",
                },
                {
                  type: "input",
                  label: "价格",
                  type: "number",
                  span: 24,
                  display: true,
                  prop: "price",
                },
                {
                  type: "textarea",
                  label: "功能内容",
                  span: 24,
                  display: true,
                  prop: "content",
                },
              ],
            },
            prop: "info",
          },