初始化

frontend/packages/BizComponent/config/defaultBizConfig.js

@@ -0,0 +1,165 @@
+/*
+ * @description: 此处是业务组件的代码案例
+ * @Date: 2023-06-06 15:45:07
+ */
+
+// vue 组件片段
+export const defaultVueContent = `
+
+<!-- 这是一个代码案例 -->
+<template>
+  <div class="div-test-container" @click="testClick">
+    <p>点击测试下点击事件</p>
+    <br />
+    {{ customize.text }}
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'TestA',
+  components: {
+  },
+  // 业务组件提供的props
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  // 计算属性
+  computed: {
+    option () {
+      return this.config.option
+    },
+    optionData () {
+      return this.option.data
+    },
+    customize () {
+      return this.option.customize
+    }
+  },
+  methods: {
+    // 联动需要调用次接口
+    linkage (row) {
+      this.$emit('linkage', row)
+    },
+    // 自己随便写的方法
+    testClick () {
+      this.$message.success('点击了边框')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+// 此处书写样式，支持scss
+.div-test-container {
+  width: 200px;
+  height: 200px;
+  border: 4px solid #f00;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  flex-direction: column;
+
+  .item {
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+  }
+}
+</style>
+`
+
+// 配置 片段
+export const defaultSettingContent = `
+// 这是一个配置案例
+//  组件备注名称
+const title = '边框案例'
+// 右侧配置项
+const setting = [
+  {
+    label: '维度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'select',
+    // 字段
+    field: 'xField',
+    optionField: 'xField', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+    // tab页。 data: 数据， custom: 自定义
+    tabName: 'data'
+  },
+  {
+    label: '指标',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'yField',
+    // 对应options中的字段
+    optionField: 'yField',
+    // 是否多选
+    multiple: false,
+    value: '',
+    tabName: 'data'
+  },
+  {
+    label: '用户名',
+    // 设置组件类型， select / input / colorPicker
+    type: 'input',
+    // 字段
+    field: 'customize_username',
+    optionField: 'customize.username', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+    // tab页。 data: 数据， custom: 自定义
+    tabName: 'custom'
+  },
+  {
+    label: '手机号',
+    // 设置组件类型， select / input / colorPicker
+    type: 'input',
+    // 字段
+    field: 'customize_phone',
+    optionField: 'customize.phone', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+    // tab页。 data: 数据， custom: 自定义
+    tabName: 'custom'
+  }
+]
+
+// 模拟数据
+const data = []
+
+const option = {
+  // 数据
+  data: data,
+  // 数据的字段相关属性
+  xField: '',
+  yField: '',
+  seriesField: '',
+  // 自定义组件其他属性
+  customize: {
+    text: '这是一个边框'
+  }
+}
+
+export default {
+  title,
+  option,
+  setting
+}
+`