Prechádzať zdrojové kódy

组态图列表增加新增图纸的名称输入,编辑等操作

yanglzh 2 rokov pred
rodič
commit
60e34bcb43

+ 1 - 0
package.json

@@ -29,6 +29,7 @@
     "jsplumb": "^2.15.6",
     "mitt": "^3.0.0",
     "nprogress": "^0.2.0",
+    "pako": "^1.0.11",
     "print-js": "^1.6.0",
     "qrcodejs2-fixes": "^0.0.2",
     "screenfull": "^6.0.1",

+ 3 - 1
src/api/configuration/index.ts

@@ -2,7 +2,9 @@ import { get, del, post } from '/@/utils/request';
 
 export default {
   getFolder: () => get('/configure/folder/list'),
+  addFolder: (data: any) => post('/configure/folder/add', data),
   getList: (data: any) => get('/configure/diagram/getList', data),
   del: (id: number) => del('/configure/diagram/del', { id }),
-  add: (data: any) => post('/screen/project/add', data),
+  add: (data: any) => post('/configure/diagram/add', data),
+  edit: (data: any) => post('/configure/diagram/edit', data),
 }

+ 0 - 86
src/views/iot/configuration/list.vue

@@ -1,86 +0,0 @@
-<template>
-	<el-card shadow="hover">
-		<div class="search">
-			<el-form :inline="true">
-				<el-form-item>
-					<el-input size="default" v-model="params.keyWord" style="width: 200px; margin-left: 20px" class="search-input" placeholder="请输入搜索关键字" @keyup.enter.native="getList(1)" clearable>
-					</el-input>
-					<el-button size="default" type="primary" class="ml10" @click="getList(1)">
-						<el-icon>
-							<ele-Search />
-						</el-icon>
-						查询
-					</el-button>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="success" @click="add()">
-						<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 type="index" label="序号" width="60" align="center" /> -->
-			<el-table-column prop="id" label="ID" width="60" 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 label="操作" width="160" 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" @click="edit(scope.row)">编辑</el-button>
-					<el-button size="small" text type="danger" @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()" />
-	</el-card>
-</template>
-
-<script lang="ts" setup>
-import api from '/@/api/configuration';
-import { Session } from '/@/utils/storage';
-import { useSearch } from '/@/hooks/useCommon';
-import { ElMessageBox, ElMessage } from 'element-plus';
-import getOrigin from '/@/utils/origin'
-
-const { params, tableData, getList, loading } = useSearch<any[]>(api.getList, 'data', { keyWord: '' });
-
-getList();
-
-function getTokenUrl(url: string) {
-	const tokenUrl = import.meta.env.VITE_TOPO_URL + '/?token=' + encodeURIComponent(Session.get('token'))
-	return getOrigin(tokenUrl + url)
-};
-
-const view = (row: any) => {
-	const url = getTokenUrl('#/show/' + row.id);
-	// const url = import.meta.env.VITE_TOPO_URL + '/?token=' + encodeURIComponent(Session.get('token')) + `&bgColor=FF9900` + '#/show/' + row.id;
-	window.open(url);
-};
-
-const add = () => {
-	const url = getTokenUrl('#/editor/new');
-	window.open(url);
-};
-
-const edit = (row: any) => {
-	const url = getTokenUrl('#/editor/' + 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>

+ 99 - 0
src/views/iot/configuration/list/edit.vue

@@ -0,0 +1,99 @@
+<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="80px">
+      <el-form-item label="图纸名称" prop="name">
+        <el-input v-model="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'
+
+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: '默认分类' }).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>

+ 98 - 0
src/views/iot/configuration/list/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-card shadow="hover">
+    <div class="search">
+      <el-form :inline="true">
+        <el-form-item>
+          <el-input size="default" v-model="params.keyWord" style="width: 200px; margin-left: 20px" class="search-input" placeholder="请输入搜索关键字" @keyup.enter.native="getList(1)" clearable>
+          </el-input>
+          <el-button size="default" type="primary" class="ml10" @click="getList(1)">
+            <el-icon>
+              <ele-Search />
+            </el-icon>
+            查询
+          </el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" @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 type="index" label="序号" width="60" align="center" /> -->
+      <el-table-column prop="id" label="ID" width="60" 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 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" @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="danger" @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()"></EditForm>
+  </el-card>
+</template>
+
+<script lang="ts" setup>
+import api from '/@/api/configuration';
+import { Session } from '/@/utils/storage';
+import { useSearch } from '/@/hooks/useCommon';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import getOrigin from '/@/utils/origin'
+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_TOPO_URL + '/?token=' + encodeURIComponent(Session.get('token'))
+  return getOrigin(tokenUrl + url)
+};
+
+const view = (row: any) => {
+  const url = getTokenUrl('#/show/' + row.id);
+  // const url = import.meta.env.VITE_TOPO_URL + '/?token=' + encodeURIComponent(Session.get('token')) + `&bgColor=FF9900` + '#/show/' + row.id;
+  window.open(url);
+};
+
+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('#/editor/' + 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>