feat: 增加设计器的预览页面，设计器的设计,删除等

.env

@@ -20,6 +20,8 @@ VITE_NGINX_PROXY = '/base-api'
 VITE_SCREEN_URL = '/plugin/screen/index.html'
 # 组态图前端
 VITE_TOPO_URL = '/plugin/topo/index.html'
+# 设计器前端
+VITE_DESIGN_URL = '/plugin/designer/index.html'
 # modbus服务
 VITE_MODBUS_API = '/modbus'
 # ice104协议网关服务

package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@antv/g2plot": "2.4.20",
     "@element-plus/icons-vue": "2.0.9",
+    "@form-create/element-ui": "^3",
     "axios": "0.26.0",
     "clipboard": "2.0.11",
     "codemirror": "5.65.16",

src/api/modules/designer.ts

@@ -0,0 +1,11 @@
+import { get, post, del, put } from '/@/utils/request';
+
+export default {
+  add: (data: object) => post("/designer/add", data),
+  del: (id: number) => del("/designer/del", { ids: [id] }),
+  edit: (data: object) => put("/designer/edit", data),
+  getList: (data: object) => get("/designer/list", data),
+  publish: (data: object) => put("/designer/publish", data),
+  getAll: (data: object) => get("/designer/getAll", data),
+  get: (id: number) => get("/designer/getInfoById", { id }),
+}

src/main.ts

@@ -22,9 +22,6 @@ import copy from '/@/components/copy/index.vue'
 //引入json数据展示
 import JsonViewer from "vue3-json-viewer"
 
-import VForm3 from 'vform3-builds'  //引入VForm3库
-import 'vform3-builds/dist/designer.style.css'  //引入VForm3样式
-
 const app = createApp(App);
 
 directive(app);
@@ -38,8 +35,6 @@ app.use(router)
   .use(i18n)
   .use(JsonViewer)
   .use(VueGridLayout)
-  .use(VForm3)
-  // .use(BaiduMap, { ak: 'Kp8XHK81HSF6rfRkYP7OxYKtK8IaG51d', type: 'WebGl', v: '2.0' })
   .mount('#app');
 
 // 全局挂载

src/router/index.ts

@@ -233,6 +233,11 @@ router.beforeEach(async (to, from, next) => {
 			next('/');
 			NProgress.done();
 		} else {
+			if (to.matched?.[0]?.path === '/designer/:id') {
+				next();
+				NProgress.done();
+				return
+			}
 			if (store.state.routesList.routesList.length === 0) {
 				if (isRequestRoutes) {
 					// 后端控制路由：路由数据初始化，防止刷新时丢失

src/router/route.ts

@@ -114,6 +114,14 @@ export const staticRoutes: Array<RouteRecordRaw> = [
 		},
 	},
 	{
+		path: '/designer/:id',
+		name: 'designer',
+		component: () => import('/@/views/designer/view.vue'),
+		meta: {
+			title: 'Desigenr预览',
+		},
+	},
+	{
 		path: '/ssoBack',
 		name: 'sso',
 		component: () => import('/@/views/sso/index.vue'),

src/views/designer/edit.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id ? '编辑组态图' : '新增组态图'}`" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="100px">
+      <el-form-item label="组态图名称" prop="name">
+        <el-input v-model.trim="formData.name" placeholder="输入组态图名称" />
+      </el-form-item>
+      <!-- <el-form-item label="说明" prop="remarks">
+        <el-input v-model="formData.remarks" type="textarea" :rows="3" />
+      </el-form-item> -->
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="showDialog = false">取消</el-button>
+        <el-button type="primary" @click="onSubmit">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, nextTick } from 'vue';
+import api from '/@/api/configuration';
+import { ruleRequired } from '/@/utils/validator';
+import { ElMessage } from 'element-plus';
+import pako from 'pako'
+import { Session } from '/@/utils/storage';
+
+const emit = defineEmits(['getList']);
+
+const showDialog = ref(false);
+const formRef = ref();
+
+const jsonData = pako.deflate('{"x":0,"y":0,"scale":1,"pens":[],"origin":{"x":0,"y":0},"center":{"x":0,"y":0},"paths":{},"version":"1.2.13"}', { to: 'string' })
+
+const baseForm = {
+  "id": undefined,
+  "folderId": 1,
+  "types": "topology",
+  "jsonData": jsonData,
+  "name": "",
+  "pointIds": "",
+  "images": "https://dummyimage.com/100x100?text=no%20data",
+  "status": 1
+}
+
+const formData = reactive({
+  ...baseForm,
+});
+
+const ruleForm = {
+  name: [ruleRequired('图纸名称不能为空')],
+};
+
+const onSubmit = async () => {
+  await formRef.value.validate();
+
+  const theApi = formData.id ? api.edit : api.add;
+
+  if (!formData.id) {
+    formData.folderId = 1;
+    api.getFolder().then((res: any) => {
+      if (res.topology && res.topology.length > 0) {
+        formData.folderId = res.topology[0].id;
+        toSend(theApi, formData)
+      } else {
+        api.addFolder({ types: 'topology', name: '默认分类-' + Session.get('userInfo')?.dept?.deptName }).then(({ folderId }: any) => {
+          formData.folderId = folderId
+          toSend(theApi, formData)
+        })
+      }
+    })
+  } else {
+    toSend(theApi, formData)
+  }
+};
+
+const toSend = async (theApi: any, formData: any) => {
+  await theApi(formData);
+
+  ElMessage.success('操作成功');
+  resetForm();
+  showDialog.value = false;
+  emit('getList');
+};
+
+const resetForm = async () => {
+  Object.assign(formData, { ...baseForm });
+  formRef.value && formRef.value.resetFields();
+};
+
+const open = async (row: any) => {
+  resetForm();
+  showDialog.value = true;
+  nextTick(() => {
+    Object.assign(formData, { ...row });
+  });
+};
+
+defineExpose({ open });
+</script>

src/views/designer/index.vue

@@ -0,0 +1,103 @@
+<template>
+	<div class="page">
+		<el-card shadow="nover">
+			<div class="search">
+				<el-form inline>
+					<el-form-item>
+						<el-input
+							v-model="params.keyWord"
+							style="width: 200px; margin-left: 20px"
+							class="search-input"
+							placeholder="请输入搜索关键字"
+							@keyup.enter.native="getList(1)"
+							clearable
+						>
+						</el-input>
+						<el-button type="primary" class="ml10" @click="getList(1)">
+							<el-icon>
+								<ele-Search />
+							</el-icon>
+							查询
+						</el-button>
+					</el-form-item>
+					<el-form-item>
+						<el-button type="primary" v-auth="'add'" @click="addOrEdit()">
+							<el-icon>
+								<ele-FolderAdd />
+							</el-icon>
+							新增
+						</el-button>
+					</el-form-item>
+				</el-form>
+			</div>
+			<el-table :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
+				<el-table-column prop="id" label="ID" width="100" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="createdAt" label="创建时间" min-width="100" align="center"></el-table-column>
+				<el-table-column prop="updatedAt" label="更新时间" min-width="100" align="center"></el-table-column>
+				<el-table-column prop="status" label="状态" min-width="100" align="center"></el-table-column>
+				<el-table-column label="操作" width="200" align="center">
+					<template #default="scope">
+						<el-button size="small" text type="primary" v-if="!scope.row.folderName" @click="view(scope.row)">预览</el-button>
+						<!-- <el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(scope.row)">编辑</el-button> -->
+						<el-button size="small" text type="warning" @click="edit(scope.row)">设计</el-button>
+						<el-button size="small" text type="info" v-auth="'del'" @click="del(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
+			<EditForm ref="editFormRef" @getList="getList(1)"></EditForm>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import api from '/@/api/modules/designer'
+import { useSearch } from '/@/hooks/useCommon'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import EditForm from './edit.vue'
+import { ref } from 'vue'
+
+const editFormRef = ref()
+
+const { params, tableData, getList, loading } = useSearch<any[]>(api.getList, 'Data', { keyWord: '' })
+
+getList()
+
+function getTokenUrl(url: string) {
+	const tokenUrl = import.meta.env.VITE_DESIGN_URL
+	return tokenUrl + url
+}
+
+const view = (row: any) => {
+	window.open('/designer/' + row.id)
+}
+
+const addOrEdit = async (row?: any) => {
+	// const url = getTokenUrl('#/editor/new');
+	// window.open(url);
+	// if (row) {
+	// 	editFormRef.value.open(row)
+	// 	return
+	// } else {
+	// 	editFormRef.value.open()
+	// }
+}
+
+const edit = (row: any) => {
+	const url = getTokenUrl('#' + row.id)
+	window.open(url)
+}
+
+const del = (row: any) => {
+	ElMessageBox.confirm(`此操作将删除：“${row.name}”，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(async () => {
+		await api.del(row.id)
+		ElMessage.success('删除成功')
+		getList(1)
+	})
+}
+</script>

src/views/designer/view.vue

@@ -0,0 +1,33 @@
+<template>
+	<div class="page padding bg page-full">
+		<form-create v-model="formData" v-model:api="fapi" :rule="rule" :option="option" @submit="onSubmit"></form-create>
+	</div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import formCreate from '@form-create/element-ui'
+import api from '/@/api/modules/designer'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const id = route.params?.id
+
+const option = ref({})
+const rule = ref([])
+const fapi = ref(null)
+const formData = ref({})
+
+api.get(id).then((res) => {
+  if (res.content) {
+    const data = JSON.parse(res.content)?.[0]
+    option.value = formCreate.parseJson(data?.options)
+    rule.value = formCreate.parseJson(data?.rule)
+  }
+})
+
+const onSubmit = (formData) => {
+	//todo 提交表单
+}
+</script>

writeEnv.mjs

@@ -23,6 +23,9 @@ const configJson = {
 		server: VITE_RULE_SERVER_URL,
 		iotServer: baseUrl,
 	},
+	designer: {
+		server: baseUrl,
+	},
 	media: VITE_MEDIA_SERVER_URL,
 }
 

yarn.lock

@@ -294,6 +294,88 @@
   resolved "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.7.tgz"
   integrity sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==
 
+"@form-create/component-elm-checkbox@^3.2.18":
+  version "3.2.18"
+  resolved "https://registry.npmmirror.com/@form-create/component-elm-checkbox/-/component-elm-checkbox-3.2.18.tgz#c5cec943c91da64fd5c7bbc7e4886f97f78ce3df"
+  integrity sha512-W8v4o+MZWPEJmIIWojKmnn87tFWpxyTbaIhWJU4Ca0S99YoXR7RdHKLt06HYwJixVLZqytNRj9BMxR4UZQ6JNg==
+  dependencies:
+    "@form-create/utils" "^3.2.18"
+
+"@form-create/component-elm-frame@^3.2.18":
+  version "3.2.18"
+  resolved "https://registry.npmmirror.com/@form-create/component-elm-frame/-/component-elm-frame-3.2.18.tgz#6dc4bf6315d4a7e28c864c7fc0e83130764a1f62"
+  integrity sha512-yob3jmO1xBbKfVfFNeO/xh80o1E2IbVx8NsnpTaaK9X0ARJFvhPvW53qX6TgJxdvzCGTsm/W6P6a4SaebQJtVQ==
+  dependencies:
+    "@form-create/utils" "^3.2.18"
+
+"@form-create/component-elm-group@^3.2.19":
+  version "3.2.19"
+  resolved "https://registry.npmmirror.com/@form-create/component-elm-group/-/component-elm-group-3.2.19.tgz#81db957e7321bae2d158c39e12863a6353d04661"
+  integrity sha512-lnNG+6BzbA5Jl5kY5C5957u4GyAjOCZ4S6TFII+Jb80PKs9MFoZUEEWF0uMhh5Ew5W19fhimUhyEZNF1fii/dw==
+  dependencies:
+    "@form-create/utils" "^3.2.18"
+
+"@form-create/component-elm-radio@^3.2.18":
+  version "3.2.18"
+  resolved "https://registry.npmmirror.com/@form-create/component-elm-radio/-/component-elm-radio-3.2.18.tgz#658cd7eb3712b31083cdf0e442255184bc48c2bb"
+  integrity sha512-kkb6xFOviqgoBRRLzsoZTnqKX9GSw2jaLCWWRPkwqEwA/aLNHRX0MuBdGNvpaaLaD1ph5g+N86GekHvvanbJlQ==
+  dependencies:
+    "@form-create/utils" "^3.2.18"
+
+"@form-create/component-elm-select@^3.2.18":
+  version "3.2.18"
+  resolved "https://registry.npmmirror.com/@form-create/component-elm-select/-/component-elm-select-3.2.18.tgz#0c16ceff19cd402457c6cb41d05ad94e43156156"
+  integrity sha512-gqBzPgNGJ6GwQ/pK/qCuoxQeM/fflNv7IqibETt2IFgutsGVM1lXYic8QJ/51YkuI0afkDKF+wAEbfB6zqaKIA==
+  dependencies:
+    "@form-create/utils" "^3.2.18"
+
+"@form-create/component-elm-tree@^3.2.18":
+  version "3.2.18"
+  resolved "https://registry.npmmirror.com/@form-create/component-elm-tree/-/component-elm-tree-3.2.18.tgz#dbcb7009792619b010a975c9fe68e3e9e6f47619"
+  integrity sha512-s+0+NPh2t500pv4CA51dtwuWWlY2wW0qbL7ZE3steTBh8Z++7s+n/6y6joGPxTeP+7FkpfruA1TfJ7+5Ntpe1Q==
+  dependencies:
+    "@form-create/utils" "^3.2.18"
+
+"@form-create/component-elm-upload@^3.2.18":
+  version "3.2.18"
+  resolved "https://registry.npmmirror.com/@form-create/component-elm-upload/-/component-elm-upload-3.2.18.tgz#51d1149f202f91e6fe0157aa477dbf9203e0a6c7"
+  integrity sha512-FVFJYarlk5+/Kjg9kJ9ElwyP8bt+DR0m/pPUMqmkEoUtv0Sr6nkk596THLjfyXV1WRFeoZMjzIS6qCyTnqWksQ==
+  dependencies:
+    "@form-create/utils" "^3.2.18"
+
+"@form-create/component-subform@^3.1.34":
+  version "3.1.34"
+  resolved "https://registry.npmmirror.com/@form-create/component-subform/-/component-subform-3.1.34.tgz#d394ab3eed5e69c5b5e969effd617b83496b4002"
+  integrity sha512-OJcFH/7MTHx7JLEjDK/weS27qfuFWAI+OK+gXTJ2jIt9aZkGWF/EWkjetiJLt5a0KMw4Z15wOS2XCY9pVK9vlA==
+
+"@form-create/core@^3.2.20":
+  version "3.2.20"
+  resolved "https://registry.npmmirror.com/@form-create/core/-/core-3.2.20.tgz#fc47adf89f72695b682b5e55ad99fd536b4a5c70"
+  integrity sha512-Zd6rwsb9eKO/YiUKg+TJ9k6opuTBIaaNryQZkLy+461mE0nByUCVliXl2p07MZRhPktWMKwU4lJKyM0+9NfpnQ==
+  dependencies:
+    "@form-create/utils" "^3.2.18"
+
+"@form-create/element-ui@^3":
+  version "3.2.20"
+  resolved "https://registry.npmmirror.com/@form-create/element-ui/-/element-ui-3.2.20.tgz#609b09822c832ebc5c436cc960aebcf8bd570905"
+  integrity sha512-ilNlt/b8MrT2NTt9MB1tInSB3I/PtOXNSs3kMAeelNf2o4s8fbBLjWcX7HxnsXwLE+4viTV6Y12xLgk9gruCLg==
+  dependencies:
+    "@form-create/component-elm-checkbox" "^3.2.18"
+    "@form-create/component-elm-frame" "^3.2.18"
+    "@form-create/component-elm-group" "^3.2.19"
+    "@form-create/component-elm-radio" "^3.2.18"
+    "@form-create/component-elm-select" "^3.2.18"
+    "@form-create/component-elm-tree" "^3.2.18"
+    "@form-create/component-elm-upload" "^3.2.18"
+    "@form-create/component-subform" "^3.1.34"
+    "@form-create/core" "^3.2.20"
+    "@form-create/utils" "^3.2.18"
+
+"@form-create/utils@^3.2.18":
+  version "3.2.18"
+  resolved "https://registry.npmmirror.com/@form-create/utils/-/utils-3.2.18.tgz#8c28141ab755cec4dbb17d37e51d92103308e54a"
+  integrity sha512-C98bFPdFVMltiHQvEZqv4rVdhcqthJgvxMbWDlniL03HS5oyusnUvxUE8jf0I9zk5dZRDGmxKOUtzE3JDWP9nQ==
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.5"
   resolved "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz"