feat: back-end service

examples/router.js

@@ -1,5 +1,7 @@
 import * as VueRouter from 'vue-router'
 import FormEditorView from './views/formEditor.vue'
+import FormEditorObjListView from './views/formEditor/objList.vue'
+import FormEditorObjEditView from './views/formEditor/objEdit.vue'
 const routes = [
   {
     path: '/',
@@ -8,6 +10,24 @@ const routes = [
   {
     path: '/formEditor',
     component: FormEditorView
+  },
+  {
+    path: '/formEditor/object',
+    component: {
+      template: '<router-view></router-view>'
+    },
+    children: [
+      {
+        name: 'objList',
+        path: 'objList',
+        component: FormEditorObjListView
+      },
+      {
+        name: 'objEdit',
+        path: 'objEdit/:objid?',
+        component: FormEditorObjEditView
+      }
+    ]
   }
 ]
 export default VueRouter.createRouter({

examples/uri.js

@@ -0,0 +1,4 @@
+const host = 'http://192.168.31.181:8000'
+export default {
+  obj: `${host}/Everright-api/lowCode/obj`
+}

examples/views/formEditor.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { ref, onMounted, getCurrentInstance } from 'vue'
 import { EverrightEditor } from '@ER/formEditor'
-const erEditor = ref(null)
+const EReditorRef = ref(null)
 </script>
 <template>
   <EverrightEditor
-    ref="erEditor"/>
+    ref="EReditorRef"/>
 </template>

examples/views/formEditor/objEdit.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { ref, onMounted, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import hooks from '@ER/hooks'
+import { EverrightEditor } from '@ER/formEditor'
+import uri from '@ER-examples/uri.js'
+const route = useRoute()
+const loading = ref(true)
+const EReditorRef = ref(null)
+const state = reactive({
+  name: ''
+})
+const getObjData = async () => {
+  try {
+    const {
+      data: {
+        content,
+        name
+      }
+    } = await hooks.useFetch(`${uri.obj}/${route.params.objid}`, {
+      method: 'get'
+    })
+    state.name = name
+    EReditorRef.value.setData(content)
+  } finally {
+    loading.value = false
+  }
+}
+const handleListener = async ({ type, data }) => {
+  if (type === 'getJson') {
+    // console.log(data)
+    // return false
+    loading.value = true
+    try {
+      const postData = {
+        name: state.name,
+        content: data
+      }
+      await hooks.useFetch(`${uri.obj}/${route.params.objid}`, {
+        method: 'put',
+        data: postData
+      })
+    } finally {
+      loading.value = false
+    }
+  }
+}
+onMounted(() => {
+  getObjData()
+})
+</script>
+<template>
+  <EverrightEditor
+    @listener="handleListener"
+    v-loading="loading"
+    ref="EReditorRef"/>
+</template>

examples/views/formEditor/objList.vue

@@ -0,0 +1,167 @@
+<script setup>
+import { ref, onMounted, getCurrentInstance, reactive, computed, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import dayjs from 'dayjs'
+import hooks from '@ER/hooks'
+import _ from 'lodash-es'
+import uri from '@ER-examples/uri.js'
+const router = useRouter()
+const loading = ref(true)
+const oldData = ref({})
+const centerDialogVisible = ref(false)
+const options = ref([])
+const ruleFormRef = ref()
+const rules = reactive({
+  name: [
+    { required: true, message: 'Please input name', trigger: 'blur' },
+    { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' }
+  ]
+})
+const ruleForm = reactive({
+  name: ''
+})
+const isCollapse = ref(false)
+const isEdit = computed(() => !_.isEmpty(oldData.value))
+const getAllobjs = async () => {
+  loading.value = true
+  try {
+    const {
+      data
+    } = await hooks.useFetch(`${uri.obj}`, {
+      method: 'get'
+    })
+    options.value = data.map(e => {
+      e.create_timestamp = dayjs.unix(e.create_timestamp).format('YYYY/MM/DD - HH:mm:ss')
+      e.update_timestamp = dayjs.unix(e.update_timestamp).format('YYYY/MM/DD - HH:mm:ss')
+      return e
+    })
+  } finally {
+    loading.value = false
+  }
+}
+const changeName = (data) => {
+  centerDialogVisible.value = true
+  oldData.value = data
+  ruleForm.name = data.name
+}
+const handleDel = async (id) => {
+  loading.value = true
+  try {
+    await hooks.useFetch(`${uri.obj}/${id}`, {
+      method: 'delete'
+    })
+    getAllobjs()
+  } finally {
+    loading.value = false
+  }
+}
+const handleEvent = async (type) => {
+  if (type === 2) {
+    loading.value = true
+    try {
+      const data = {
+        name: ruleForm.name,
+        content: isEdit.value ? oldData.value.content : {}
+      }
+      if (isEdit.value) {
+        const {
+          data: {
+            id
+          }
+        } = await hooks.useFetch(`${uri.obj}/${oldData.value.id}`, {
+          method: 'put',
+          data
+        })
+        getAllobjs()
+      } else {
+        const {
+          data: {
+            id
+          }
+        } = await hooks.useFetch(`${uri.obj}`, {
+          method: 'post',
+          data
+        })
+        router.push({
+          name: 'objEdit',
+          params: {
+            objid: id
+          }
+        })
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+  centerDialogVisible.value = false
+  oldData.value = {}
+  nextTick(() => {
+    ruleFormRef.value.resetFields()
+  })
+}
+onMounted(() => {
+  getAllobjs()
+})
+</script>
+<template>
+  <div>
+    <div>
+      <el-button type="primary" @click="centerDialogVisible = true">Create</el-button>
+    </div>
+    <el-table v-loading="loading" :data="options" style="width: 100%">
+      <el-table-column prop="name" label="Name" width="180">
+        <template #default="scope">
+          <el-popover
+            :width="250"
+            trigger="hover"
+          >
+            <el-button @click="() => changeName(scope.row)">Click Me to change the name</el-button
+            >
+            <template #reference>
+              <span>{{ scope.row.name }}</span>
+<!--              <router-link :to="{ name: 'dataList', params: { objid: scope.row.id}}">{{ scope.row.name }}</router-link>-->
+            </template>
+          </el-popover>
+        </template>
+      </el-table-column>
+      <el-table-column prop="create_timestamp" label="Create time" />
+      <el-table-column prop="update_timestamp" label="Update time" />
+      <el-table-column fixed="right" label="Operations" width="120">
+        <template #default="scope">
+          <el-row align="middle">
+            <el-col :span="10">
+              <router-link :to="{ name: 'objEdit', params: { objid: scope.row.id}}">Edit</router-link>
+            </el-col>
+            <el-col :span="10">
+              <el-button @click="() => handleDel(scope.row.id)" link type="primary">Delete</el-button>
+            </el-col>
+          </el-row>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+  <el-dialog
+    v-model="centerDialogVisible"
+    :title="`${isEdit ? 'Edit' : 'New' }object`"
+    width="30%"
+    align-center
+  >
+    <el-form
+      @submit.prevent
+      ref="ruleFormRef"
+      :model="ruleForm"
+      :rules="rules">
+      <el-form-item label="Name" prop="name">
+        <el-input v-model="ruleForm.name" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="() => handleEvent(1)">Cancel</el-button>
+        <el-button type="primary" @click="() => handleEvent(2)">
+          Confirm
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>

index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/Everright-logo.svg" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"

package.json

@@ -18,6 +18,7 @@
     }
   },
   "scripts": {
+    "dev:server": "nodemon server --watch server",
     "dev:ckeditor5": "pnpm -C external/ckeditor5 dev",
     "build:ckeditor5": "pnpm -C external/ckeditor5 build",
     "dev": "vite --host 0.0.0.0",
@@ -37,6 +38,7 @@
     "axios": "^1.2.2",
     "dayjs": "^1.11.7",
     "element-plus": "^2.2.28",
+    "express": "^4.18.2",
     "jss": "^10.9.2",
     "jss-preset-default": "^10.9.2",
     "lodash-es": "^4.17.21",
@@ -62,7 +64,9 @@
     "@element-plus/icons-vue": "^2.0.10",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitejs/plugin-vue-jsx": "^2.1.1",
+    "better-sqlite3": "^8.2.0",
     "clipboard": "^2.0.11",
+    "connect-multiparty": "^2.2.0",
     "cz-git": "^1.5.3",
     "eslint": "^8.32.0",
     "eslint-config-standard": "^17.0.0",
@@ -72,7 +76,7 @@
     "eslint-plugin-vue": "^9.9.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.2",
-    "nodemon": "^2.0.20",
+    "nodemon": "^2.0.21",
     "sass": "^1.58.3",
     "vite": "^3.2.5",
     "vite-plugin-eslint": "^1.8.1"

packages/hooks/use-i18n/index.js

@@ -0,0 +1,2 @@
+export const useI18n = (source) => {
+}