表单预览和修改

2022-12-20 16:32:39 +08:00
parent a0c3e7bd00
commit 9b33e7e846
14 changed files with 743 additions and 223 deletions
--- a/src/views/flowable/deploy/index.vue
+++ b/src/views/flowable/deploy/index.vue
@ -0,0 +1,429 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="流程标识" prop="processKey">
+        <el-input
+          v-model="queryParams.processKey"
+          placeholder="请输入流程标识"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="流程名称" prop="processName">
+        <el-input
+          v-model="queryParams.processName"
+          placeholder="请输入流程名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="流程分类" prop="category">
+        <el-select
+          v-model="queryParams.category"
+          clearable
+          placeholder="请选择"
+          size="small"
+        >
+          <el-option
+            v-for="item in categoryOptions"
+            :key="item.categoryId"
+            :label="item.categoryName"
+            :value="item.code"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态" prop="state">
+        <el-select
+          v-model="queryParams.state"
+          size="small"
+          clearable
+          placeholder="请选择状态"
+        >
+          <el-option :key="1" label="激活" value="active" />
+          <el-option :key="2" label="挂起" value="suspended" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="search"
+          size="small"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="refresh" size="small" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="small"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['workflow:deploy:remove']"
+          >删除</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-row :gutter="10" class="mb8">
+      <el-table
+        v-loading="loading"
+        fit
+        :data="deployList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column
+          label="流程标识"
+          align="center"
+          prop="processKey"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="流程名称"
+          align="center"
+          :show-overflow-tooltip="true"
+        >
+          <template slot-scope="scope">
+            <el-button type="text" @click="handleProcessView(scope.row)">
+              <span>{{ scope.row.processName }}</span>
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="流程分类"
+          align="center"
+          prop="categoryName"
+          :formatter="categoryFormat"
+        />
+        <el-table-column label="流程版本" align="center">
+          <template slot-scope="scope">
+            <el-tag size="default">v{{ scope.row.version }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center">
+          <template slot-scope="scope">
+            <el-tag type="success" v-if="!scope.row.suspended">激活</el-tag>
+            <el-tag type="warning" v-if="scope.row.suspended">挂起</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="部署时间"
+          align="center"
+          prop="deploymentTime"
+          width="180"
+        />
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="small"
+              icon="el-icon-price-tag"
+              @click.native="handlePublish(scope.row)"
+              v-hasPermi="['workflow:deploy:list']"
+              >版本管理</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['workflow:deploy:remove']"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-row>
+
+    <!-- 流程图 -->
+    <el-dialog
+      :title="processView.title"
+      v-model="processView.open"
+      width="70%"
+      append-to-body
+    >
+      <process-viewer
+        :key="`designer-${processView.index}`"
+        :xml="processView.xmlData"
+        :style="{ height: '400px' }"
+      />
+    </el-dialog>
+
+    <!-- 版本管理 -->
+    <el-dialog
+      title="版本管理"
+      v-model="publish.open"
+      width="50%"
+      append-to-body
+    >
+      <el-table v-loading="publish.loading" :data="publish.dataList">
+        <el-table-column
+          label="流程标识"
+          align="center"
+          prop="processKey"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="流程名称"
+          align="center"
+          :show-overflow-tooltip="true"
+        >
+          <template slot-scope="scope">
+            <el-button type="text" @click="handleProcessView(scope.row)">
+              <span>{{ scope.row.processName }}</span>
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="流程版本" align="center">
+          <template slot-scope="scope">
+            <el-tag size="default">v{{ scope.row.version }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center">
+          <template slot-scope="scope">
+            <el-tag type="success" v-if="!scope.row.suspended">激活</el-tag>
+            <el-tag type="warning" v-if="scope.row.suspended">挂起</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="small"
+              icon="video-pause"
+              v-if="!scope.row.suspended"
+              @click.native="handleChangeState(scope.row, 'suspended')"
+              v-hasPermi="['workflow:deploy:status']"
+              >挂起</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              icon="video-play"
+              v-if="scope.row.suspended"
+              @click.native="handleChangeState(scope.row, 'active')"
+              v-hasPermi="['workflow:deploy:status']"
+              >激活</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['workflow:deploy:remove']"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="publishTotal > 0"
+        :total="publishTotal"
+        v-model:page="publishQueryParams.pageNum"
+        v-model:limit="publishQueryParams.pageSize"
+        @pagination="getPublishList"
+      />
+    </el-dialog>
+  </div>
+</template>
+<script setup name="Deploy">
+import { listAllCategory } from "@/api/flowable/category";
+import {
+  listDeploy,
+  listPublish,
+  getBpmnXml,
+  changeState,
+  delDeploy,
+} from "@/api/flowable/deploy";
+import ProcessViewer from "@/components/ProcessViewer";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { ref } from "vue";
+
+// 遮罩层
+const loading = ref(true);
+// 选中数组
+const ids = ref([]);
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 总条数
+const total = ref(0);
+
+const deployList = ref([]);
+const categoryOptions = ref([]);
+
+const publishTotal = ref(0);
+
+const data = reactive({
+  // 查询参数
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    processKey: null,
+    processName: null,
+    category: null,
+    state: null,
+  },
+  processView: {
+    title: "",
+    open: false,
+    index: undefined,
+    xmlData: "",
+  },
+  publish: {
+    open: false,
+    loading: false,
+    dataList: [],
+  },
+  publishQueryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    processKey: "",
+  },
+});
+
+const { queryParams, processView, publish, publishQueryParams } = toRefs(data);
+
+getCategoryList();
+getList();
+
+/** 查询流程分类列表 */
+function getCategoryList() {
+  listAllCategory().then((response) => (categoryOptions.value = response.data));
+}
+/** 查询流程部署列表 */
+function getList() {
+  loading.value = true;
+  listDeploy(queryParams.value).then((response) => {
+    deployList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    processKey: null,
+    processName: null,
+    category: null,
+    state: null,
+  };
+  resetForm("form");
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  resetForm("queryForm");
+  handleQuery();
+}
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.deploymentId);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+}
+/** 查看流程图 */
+function handleProcessView(row) {
+  let definitionId = row.definitionId;
+  processView.value.title = "流程图";
+  processView.value.index = definitionId;
+  // 发送请求，获取xml
+  getBpmnXml(definitionId).then((response) => {
+    processView.value.xmlData = response.data;
+  });
+  processView.value.open = true;
+}
+function getPublishList() {
+  publish.value.loading = true;
+  listPublish(publishQueryParams.value).then((response) => {
+    publish.value.dataList = response.rows;
+    publishTotal.value = response.total;
+    publish.value.loading = false;
+  });
+}
+function handlePublish(row) {
+  publishQueryParams.value.processKey = row.processKey;
+  publish.value.open = true;
+  getPublishList();
+}
+/** 挂起/激活流程 */
+function handleChangeState(row, state) {
+  const params = {
+    definitionId: row.definitionId,
+    state: state,
+  };
+  changeState(params).then((res) => {
+    ElMessage.success(res.msg);
+    getPublishList();
+  });
+}
+function handleDelete(row) {
+  const deploymentIds = row.deploymentId || ids.value;
+  ElMessageBox.confirm("是否确认删除选中的数据项？")
+    .then(() => {
+      loading.value = true;
+      return delDeploy(deploymentIds);
+    })
+    .then(() => {
+      loading.value = false;
+      getList();
+      ElMessage.success("删除成功");
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function categoryFormat(row, column) {
+  return (
+    categoryOptions.value.find((k) => k.code === row.category)?.categoryName ??
+    ""
+  );
+}
+</script>
+
+<style scoped></style>