<repo_name>gezi666/tableDesigner<file_sep>/README.md
# tableDesign 表单设计器

## 基于Vue开发的可视化拖拽表单设计器
<file_sep>/src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    canSelect: true,
    currentID: "",
    selectCompList: [],
    screenProps: {
      width: 1920,
      height: 1080,
      bkcolor: "#fff"
    }
  },
  getters: {
    curComp(state) {
      let currentID = state.currentID;
      if (currentID) {
        let currentComp = state.selectCompList.filter(item => {
          return item.uid === currentID
        })[0]
        return currentComp;
      }
      return {}
    },
    curStyle(state) {
      let currentID = state.currentID;
      if (currentID) {
        let currentComp = state.selectCompList.filter(item => {
          return item.uid === currentID
        })[0]
        return currentComp.info.style;
      }
      return {}
    }
  },
  mutations: {
    changeSelectFlag(state, payload) {
      state.canSelect = payload
    },
    addComp(state, payload) {
      state.selectCompList.push(payload)
      state.currentID = payload.uid
    },
    setSelect(state, payload) {
      state.currentID = payload
    },
    changeStyle(state, payload) {
      let newStyle = {}
      for (let item of state.selectCompList) {
        if (item.uid === state.currentID) {
          newStyle = { ...item.info.style, ...payload }
          item.info.style = Object.assign({}, newStyle)
          break
        }
      }
    },
    changeScreenProp(state, payload) {
      state.screenProps = Object.assign(state.screenProps, payload)
    }
  }
})

export default store<file_sep>/src/widgets/mix.js
export default {
  name: "TextComp",
  props: {
    info: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    style() {
      return this.info.style
    }
  },
  methods: {
    selectComp() {
      this.$emit("selectComp");
    }
  }
};<file_sep>/vue.config.js
// 详细配置参数请参考：https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

const webpack = require('webpack')
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, './', dir)
}

// 请求后台地址
let api_url = ""

// 动态获取命令行服务器地址
try {
  let url = JSON.parse(process.env.npm_config_argv).remain[0]
  api_url = url ? url : ""
} catch (e) {
  api_url = ""
  console.log("获取process参数异常")
}

module.exports = {
  publicPath: "./",
  devServer: {
    // easymock模拟接口
    proxy: 'http://10.10.50.190:7300/mock/5cbeb362abf86b3bdc64f106/example'
  },
  productionSourceMap: false,
  // webpack相关
  configureWebpack: config => {
    // 定义全局API请求地址
    config.plugins.push(
      new webpack.DefinePlugin({
        API_URL: JSON.stringify(api_url)
      })
    )

    config.resolve = Object.assign(config.resolve, {
      alias: {
        'vue$': 'vue/dist/vue.runtime.esm.js',
        '@': resolve('src'),
        '@components': resolve('src/components'),
        '@widgets': resolve('src/widgets'),
        '@assets': resolve('src/assets'),
        '@api': resolve('src/api'),
        '@utils': resolve('src/utils')
      }
    })

    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.optimization.splitChunks = {
        chunks: 'all',
        maxInitialRequests: 5,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/](echarts|element-ui)[\\/]/,
            name(module) {
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
              return `vendors~${packageName.replace('@', '')}`
            }
          }
        }
      }
    } else {
      // 为开发环境修改配置...
    }
  }
}