保存、预览流程

src/views/flowable/model/index.vue

@@ -125,7 +125,7 @@
         :show-overflow-tooltip="true"
       >
         <template #default="{ row }">
-          <el-button link @click="handleProcessView(row)">
+          <el-button type="primary" link @click="handleProcessView(row)">
             <span>{{ row.modelName }}</span>
           </el-button>
         </template>
@@ -159,60 +159,62 @@
         class-name="small-padding fixed-width"
       >
         <template #default="{ row }">
-          <el-button
-            size="small"
-            link
-            icon="edit"
-            @click="handleUpdate(row)"
-            v-hasPermi="['flowable:model:edit']"
-            >修改</el-button
-          >
-          <el-button
-            link
-            size="small"
-            icon="brush"
-            @click="handleDesigner(row)"
-            v-hasPermi="['flowable:model:designer']"
-            >设计</el-button
-          >
-          <el-button
-            link
-            size="small"
-            icon="video-play"
-            v-hasPermi="['flowable:model:deploy']"
-            @click.native="handleDeploy(row)"
-            >部署</el-button
-          >
-          <el-dropdown>
-            <span class="el-dropdown-link">
-              <el-icon>
-                <ArrowDown />
-              </el-icon>
-              更多
-            </span>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <!-- TODO: v-hasPermi="['flowable:model:query']" -->
-                <el-dropdown-item
-                  icon="view"
-                  @click.native="handleProcessView(row)"
-                  >流程图</el-dropdown-item
-                >
-                <!-- TODO: v-hasPermi="['flowable:model:list']" -->
-                <el-dropdown-item
-                  icon="price-tag"
-                  @click.native="handleHistory(row)"
-                  >历史</el-dropdown-item
-                >
-                <!-- TODO: v-hasPermi="['flowable:model:remove']" -->
-                <el-dropdown-item
-                  icon="delete"
-                  @click.native="handleDelete(row)"
-                  >删除</el-dropdown-item
-                >
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
+          <div class="model-operation">
+            <el-button
+              size="small"
+              link
+              icon="edit"
+              @click="handleUpdate(row)"
+              v-hasPermi="['flowable:model:edit']"
+              >修改</el-button
+            >
+            <el-button
+              link
+              size="small"
+              icon="brush"
+              @click="handleDesigner(row)"
+              v-hasPermi="['flowable:model:designer']"
+              >设计</el-button
+            >
+            <el-button
+              link
+              size="small"
+              icon="video-play"
+              v-hasPermi="['flowable:model:deploy']"
+              @click.native="handleDeploy(row)"
+              >部署</el-button
+            >
+            <el-dropdown>
+              <span class="el-dropdown-link">
+                <el-icon>
+                  <ArrowDown />
+                </el-icon>
+                更多
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <!-- TODO: v-hasPermi="['flowable:model:query']" -->
+                  <el-dropdown-item
+                    icon="view"
+                    @click.native="handleProcessView(row)"
+                    >流程图</el-dropdown-item
+                  >
+                  <!-- TODO: v-hasPermi="['flowable:model:list']" -->
+                  <el-dropdown-item
+                    icon="price-tag"
+                    @click.native="handleHistory(row)"
+                    >历史</el-dropdown-item
+                  >
+                  <!-- TODO: v-hasPermi="['flowable:model:remove']" -->
+                  <el-dropdown-item
+                    icon="delete"
+                    @click.native="handleDelete(row)"
+                    >删除</el-dropdown-item
+                  >
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -323,16 +325,16 @@
     <!-- 流程图 -->
     <el-dialog
       :title="processView.title"
-      :visible.sync="processView.open"
+      v-model="processView.open"
       width="70%"
       append-to-body
     >
       <!-- TODO: -->
-      <!-- <process-viewer
+      <process-viewer
         :key="`designer-${processView.index}`"
         :xml="processView.xmlData"
         :style="{ height: '400px' }"
-      /> -->
+      />
     </el-dialog>
 
     <el-dialog title="模型历史" v-model="history.open" width="70%">
@@ -452,10 +454,11 @@ import {
 import { listCategory } from "@/api/flowable/category";
 import { ArrowDown } from "@element-plus/icons-vue";
 import ProcessDesigner from "@/components/ProcessDesigner";
-// import ProcessViewer from "@/components/ProcessViewer";
+import ProcessViewer from "@/components/ProcessViewer";
 import { getToken } from "@/utils/auth";
 import { toRefs } from "vue";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
+let bpmnXml;
 // 显示搜索条件
 const showSearch = ref(true);
 // 遮罩层
@@ -598,12 +601,12 @@ function handleSelectionChange(selection) {
 }
 /** 部署流程 */
 function handleDeploy(row) {
-  this.loading = true;
+  loading.value = true;
   deployModel({
     modelId: row.modelId,
   })
     .then((response) => {
-      this.$modal.msgSuccess(response.msg);
+      ElMessage.success(response.msg);
       let obj = { name: "Deploy", path: "/workflow/deploy" };
       return this.$store
         .dispatch("tagsView/delCachedView", obj)
@@ -613,36 +616,36 @@ function handleDeploy(row) {
         });
     })
     .finally(() => {
-      this.loading = false;
+      loading.value = false;
     });
 }
 /** 查看流程图 */
 function handleProcessView(row) {
   let modelId = row.modelId;
-  this.processView.title = "流程图";
-  this.processView.index = modelId;
+  processView.value.title = "流程图";
+  processView.value.index = modelId;
   // 发送请求，获取xml
   getBpmnXml(modelId).then((response) => {
-    this.processView.xmlData = response.data;
+    processView.value.xmlData = response.data;
   });
-  this.processView.open = true;
+  processView.value.open = true;
 }
 function getHistoryList() {
-  this.history.loading = true;
-  historyModel(this.queryHistoryParams).then((response) => {
-    this.historyTotal = response.total;
-    this.historyList = response.rows;
-    this.history.loading = false;
+  history.value.loading = true;
+  historyModel(queryHistoryParams.value).then((response) => {
+    historyTotal.value = response.total;
+    historyList.value = response.rows;
+    history.value.loading = false;
   });
 }
 function handleHistory(row) {
-  this.history.open = true;
-  this.queryHistoryParams.modelKey = row.modelKey;
-  this.getHistoryList();
+  history.value.open = true;
+  queryHistoryParams.value.modelKey = row.modelKey;
+  getHistoryList();
 }
 /** 设为最新版 */
 function handleLatest(row) {
-  this.$modal.confirm("是否确认将此版本设为最新？").then(() => {
+  ElMessageBox.confirm("是否确认将此版本设为最新？").then(() => {
     this.history.loading = true;
     latestModel({
       modelId: row.modelId,
@@ -650,7 +653,7 @@ function handleLatest(row) {
       .then((response) => {
         this.history.open = false;
         this.getList();
-        this.$modal.msgSuccess(response.msg);
+        ElMessage.success(response.msg);
       })
       .finally(() => {
         this.history.loading = false;
@@ -719,59 +722,58 @@ function handleDesigner(row) {
     });
   }
 }
-function onSaveDesigner(bpmnXml) {
-  this.bpmnXml = bpmnXml;
+function onSaveDesigner(bpmnXmlArgv) {
+  // bpmnXml = bpmnXmlArgv;
   let dataBody = {
-    modelId: this.designerData.modelId,
-    bpmnXml: this.bpmnXml,
+    modelId: designerData.value.modelId,
+    bpmnXml: bpmnXmlArgv,
   };
-  this.$confirm("是否将此模型保存为新版本？", "提示", {
+  ElMessageBox.confirm("是否将此模型保存为新版本？", "提示", {
     distinguishCancelAndClose: true,
     confirmButtonText: "是",
     cancelButtonText: "否",
   })
     .then(() => {
-      this.confirmSave(dataBody, true);
+      confirmSave(dataBody, true);
     })
     .catch((action) => {
       if (action === "cancel") {
-        this.confirmSave(dataBody, false);
+        confirmSave(dataBody, false);
       }
     });
 }
 function confirmSave(body, newVersion) {
-  this.designerData.loading = true;
+  designerData.value.loading = true;
   saveModel(
     Object.assign(body, {
       newVersion: newVersion,
     })
   )
     .then((res) => {
-      this.$modal.msgSuccess(res.msg);
-      this.designerOpen = false;
-      this.getList();
+      ElMessage.success(res.msg);
+      designerOpen.value = false;
+      getList();
     })
     .catch((res) => {
-      this.$modal.msgError(res.msg);
-      this.designerData.loading = false;
+      ElMessage.error(res.msg);
+      designerData.value.loading = false;
     });
 }
 /** 删除按钮操作 */
 function handleDelete(row) {
-  const modelIds = row.modelId || this.ids;
-  this.$modal
-    .confirm('是否确认删除模型编号为"' + modelIds + '"的数据项？')
+  const modelIds = row.modelId || ids.value;
+  ElMessageBox.confirm('是否确认删除模型编号为"' + modelIds + '"的数据项？')
     .then(() => {
-      this.loading = true;
+      loading.value = true;
       return delModel(modelIds);
     })
     .then(() => {
-      this.loading = false;
-      this.getList();
-      this.$modal.msgSuccess("删除成功");
+      loading.value = false;
+      getList();
+      ElMessage.success("删除成功");
     })
     .finally(() => {
-      this.loading = false;
+      loading.value = false;
     });
 }
 /** 导出按钮操作 */
@@ -821,6 +823,12 @@ function submitSave() {
 getList();
 getCategoryList();
 </script>
+<style scoped>
+.model-operation {
+  display: flex;
+  align-items: center;
+}
+</style>
 <!--
 
   <script>