3.0.41更新工作流类

package.json

@@ -1,7 +1,7 @@
 {
   "name": "client-base-v4",
   "description": "Leanwo Prodog Client",
-  "version": "3.0.40",
+  "version": "3.0.41",
   "author": "yangzhijie1488 <yangzhijie1488@163.com>",
   "scripts": {
     "dev": "cross-env webpack serve --config ./webpack.dev.js",

src/workflow/CommonTable.vue

@@ -0,0 +1,106 @@
+<template>
+  <!-- 表格 + 分页 -->
+  <div class="tablePaganations">
+    <a-config-provider :locale="locale">
+      <a-table
+        class="ant-table-striped"
+        bordered
+        size="small"
+        height="1000px"
+        :loading="isLoading"
+        :data-source="dataSource"
+        :columns="columns"
+        :scroll="{ y: 1000}"
+        :pagination="pagination"
+        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
+      >
+        <template v-for="(item,index) in renderArr" #[item]="scope" :key="index">
+          <slot :name="item" :scope="scope" v-bind="scope || {}" />
+        </template>
+      </a-table>
+    </a-config-provider>
+  </div>
+</template>
+  
+<script setup>
+import { useSlots, ref, reactive, defineProps, defineEmits, defineExpose, watch } from 'vue';
+import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
+const locale = ref(zhCN);
+const props = defineProps({
+  dataSource: {
+    type: Object,
+    required: true,
+  },
+  columns: {
+    type: Object,
+    required: true,
+  },
+  isSelect: {
+    type: Boolean,
+  },
+  isLoading: {
+    type: Boolean,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+});
+
+// 分页配置
+const pagination = reactive({
+  showQuickJumper: true,
+  current: 1,
+  pageSize: 20, // 默认每页显示数量
+  showSizeChanger: true, // 显示可改变每页数量
+  pageSizeOptions: ['10', '20', '50', '100','200','500'], // 每页数量选项值
+  showTotal: (total, range) => range[0] + '-' + range[1] + '条' + ' 共' + total + '条', // 显示总数
+  onShowSizeChange: (current, pageSize) => showSizeChange(current, pageSize),
+  onChange: (current, pageSize) => changePage(current, pageSize), //点击页码事件
+  total: props.total,
+});
+
+const emit = defineEmits(['getPage']);
+// 改变每页数量时更新显示
+const showSizeChange = (current, pageSize) => {
+  setTimeout(() => {
+    pagination.current = 1;
+    emit('getPage', pagination.current, pageSize);
+  });
+  pagination.pageSize = pageSize;
+};
+//点击页码事件
+const changePage = (current, size) => {
+  pagination.current = current;
+  emit('getPage', pagination.current, size);
+};
+// 回到第一页
+const backFirstPage = () => {
+  pagination.current = 1;
+  emit('getPage', pagination.current,pagination.pageSize);
+};
+defineExpose({ backFirstPage });
+
+// 监听total变化
+watch(
+  props,
+  newData => {
+    pagination.total = newData.total;
+  },
+  { immediate: true, deep: true },
+);
+// 插槽的实例
+const slots = useSlots();
+const renderArr = Object.keys(slots);
+</script>
+<style scoped>
+.tablePaganations {
+  width: 100%;
+  margin-top: 20px;
+}
+.ant-table-striped :deep(.table-striped) td {
+  background-color:  #fafafa;
+}
+</style>
+  
+  

src/workflow/ExecutionList.vue

@@ -15,7 +15,7 @@
       <div>
         <div class="form-inline">
           <div class="form-group">
-            <label>选择任务</label>
+            <label>选择任务：</label>
             <select
               v-model="selectedTaskDefineId"
               class="form-control"
@@ -31,7 +31,7 @@
             </select>
           </div>
           <div class="form-group">
-            <label>选择运行状态</label>
+            <label>选择运行状态：</label>
             <select
               v-model="selectedTaskInstanceStatus"
               class="form-control"
@@ -47,84 +47,73 @@
             </select>
           </div>
           <div class="form-group">
-            <label>开始时间</label>
+            <label>开始时间：</label>
             <DateTime v-model="startDate" />
           </div>
           <div class="form-group">
-            <label>结束时间</label>
+            <label>结束时间：</label>
             <DateTime v-model="endDate" />
           </div>
           <div class="form-group">
-            <button class="btn btn-info" @click="getDatas">查询</button>
+            <button class="btn btn-info" @click="changeFilterData">查询</button>
           </div>
         </div>
         <ul />
         <div class="flex-content">
-          <table class="fixed-table table table-striped table-bordered">
-            <thead>
-              <tr>
-                <th style="width: 50px">序号</th>
-                <th style="width: 100px">任务名</th>
-                <th style="width: 100px">任务类型</th>
-                <th style="width: 100px">
+          <CommonTable
+            ref="table"
+            :columns="columns"
+            :data-source="taskInstanceDtos"
+            :total="pagination.total"
+            @get-page="getPageParams"
+          >
+            <template #headerCell="{ column }">
+              <template v-if="column.key == 'httpRequestType'">
+                <span>
                   {{ taskType == "HTTP" ? "HTTP请求类型" : "流程报表文件编码" }}
-                </th>
-                <th style="width: 100px">
+                </span>
+              </template>
+              <template v-if="column.key == 'httpRequestUrl'">
+                <span>
                   {{ taskType == "HTTP" ? "HTTP请求路径" : "流程报表名称" }}
-                </th>
-                <th style="width: 150px">开始时间</th>
-                <th style="width: 150px">结束时间</th>
-                <th style="width: 100px">运行状态</th>
-                <th style="width: 200px">运行结果</th>
-              </tr>
-            </thead>
-            <tbody class="table1">
-              <template v-for="(data, index) in taskInstanceDtos" :key="index">
-                <tr>
-                  <td>
-                    {{ index + (pagination.current_page - 1) * pagination.per_page + 1 }}
-                  </td>
-                  <td>{{ data.taskName }}</td>
-                  <td>
-                    {{
-                      data.taskType == null
-                        ? ""
-                        : data.taskType == "HTTP"
-                          ? "HTTP请求"
-                          : "流程报表"
-                    }}
-                  </td>
-                  <td v-if="taskType == 'HTTP'">{{ data.httpRequestType }}</td>
-                  <td v-else>{{ data.processReportNo }}</td>
-                  <td v-if="taskType == 'HTTP'">{{ data.httpRequestUrl }}</td>
-                  <td v-else>{{ data.processReportName }}</td>
-                  <td>{{ data.startDate }}</td>
-                  <td>{{ data.endDate }}</td>
-                  <td>
-                    {{
-                      data.taskInstanceStatus == "SUCCESS"
-                        ? "成功"
-                        : data.taskInstanceStatus == "IN_OPERATION"
-                          ? "运行中"
-                          : "失败"
-                    }}
-                  </td>
-                  <td>{{ data.operationResult }}</td>
-                </tr>
+                </span>
               </template>
-            </tbody>
-          </table>
-        </div>
-        <div>
-          <div class="form-group">
-            <div class="pull-right">
-              <VueBootstrapPagination
-                v-if="pagination.last_page > 0"
-                :pagination="pagination"
-                :callback="getDatas"
-              />
-            </div>
-          </div>
+            </template>
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key == 'taskType'">
+                {{
+                  record.taskType == null
+                    ? ""
+                    : record.taskType == "HTTP"
+                      ? "HTTP请求"
+                      : "流程报表"
+                }}
+              </template>
+              <template v-if="column.key == 'httpRequestType'">
+                {{
+                  record.taskType == "HTTP"
+                    ? record.httpRequestType
+                    : record.processReportNo
+                }}
+              </template>
+              <template v-if="column.key == 'httpRequestUrl'">
+                {{
+                  record.taskType == "HTTP"
+                    ? record.httpRequestUrl
+                    : record.processReportName
+                }}
+              </template>
+              <template v-if="column.key == 'taskInstanceStatus'">
+                {{
+                  record.taskInstanceStatus == "SUCCESS"
+                    ? "成功"
+                    : record.taskInstanceStatus == "IN_OPERATION"
+                      ? "运行中"
+                      : "失败"
+                }}
+              </template>
+            </template>
+          </CommonTable>
         </div>
       </div>
     </div>
@@ -138,12 +127,78 @@ import TaskInstanceResource from '../api/base/TaskInstanceResource.js';
 import TaskDefineResource from '../api/task/TaskDefineResource.js';
 import vSelect from 'vue-select';
 import 'vue-select/dist/vue-select.css';
+import CommonTable from './CommonTable.vue';
 export default {
   components: {
     vSelect,
+    CommonTable,
   },
   data: function () {
     return {
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'index',
+          key: 'index',
+          customRender: ({ text, record, index }) => `${index + 1}`,
+        },
+        {
+          title: '任务名',
+          dataIndex: 'taskName',
+          key: 'taskName',
+        },
+        {
+          title: '任务类型',
+          dataIndex: 'taskType',
+          key: 'taskType',
+        },
+        {
+          title: 'HTTP请求类型',
+          dataIndex: 'httpRequestType',
+          key: 'httpRequestType',
+          width: 180,
+        },
+        {
+          title: 'HTTP请求路径',
+          dataIndex: 'httpRequestUrl',
+          key: 'httpRequestUrl',
+          width: 180,
+        },
+        {
+          title: '开始时间',
+          dataIndex: 'startDate',
+          key: 'startDate',
+        },
+        {
+          title: '结束时间',
+          dataIndex: 'endDate',
+          key: 'endDate',
+        },
+        {
+          title: '运行状态',
+          dataIndex: 'taskInstanceStatus',
+          key: 'taskInstanceStatus',
+        },
+        {
+          title: '运行结果',
+          dataIndex: 'operationResult',
+          key: 'operationResult',
+          width: 180,
+          fixed: 'right',
+          customCell : () => {
+            return {
+              style: {
+                width: '180px',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow:'ellipsis',
+                cursor:'pointer',
+              },
+            };
+          },
+        },
+      ].map(item => ({ ...item, align: 'center' })),
+
       pagination: {
         total: 0,
         per_page: Common.pageSize, // required
@@ -183,18 +238,23 @@ export default {
     var _self = this;
     _self.getAllTaskDefineDtos();
     _self.getDatas();
-    $('.fixed-table').tableFixer({
-      left: 3,
-      head: true,
-    });
+    // $('.fixed-table').tableFixer({
+    //   left: 3,
+    //   head: true,
+    // });
 
-    $('.fixed-table').colResizable({
-      resizeMode: 'overflow',
-      partialRefresh: true,
-    });
+    // $('.fixed-table').colResizable({
+    //   resizeMode: 'overflow',
+    //   partialRefresh: true,
+    // });
   },
 
   methods: {
+    getPageParams: function (start, length) {
+      this.pagination.current_page = start;
+      this.pagination.per_page = length;
+      this.getDatas();
+    },
     changeSelectTab: function (value) {
       var _self = this;
       _self.taskType = value;
@@ -204,7 +264,8 @@ export default {
     },
     changeFilterData: function () {
       var _self = this;
-      _self.getDatas();
+      // _self.getDatas();
+      _self.$refs.table.backFirstPage();
     },
     getAllTaskDefineDtos: function () {
       var _self = this;
@@ -219,8 +280,10 @@ export default {
       _self.taskDefineDtos.splice(0, _self.taskDefineDtos.length);
       TaskDefineResource.getAllTaskDefine(taskDefineSelectRequest).then(
         successData => {
+          // console.log(successData, 'getAllTaskDefine');
           if (successData && successData.errorCode == 0) {
             _self.taskDefineDtos = successData.datas;
+            // _self.pagination.total = successData.total;
           }
         },
         errorData => {
@@ -245,10 +308,10 @@ export default {
         start: (this.pagination.current_page - 1) * this.pagination.per_page,
         length: this.pagination.per_page,
       };
-
       _self.loading = true;
       TaskInstanceResource.list(taskInstanceQueryDto).then(
         successData => {
+          // console.log(successData, 'list');
           _self.loading = false;
           if (successData && successData.errorCode == 0) {
             _self.taskInstanceDtos = successData.datas;
@@ -283,7 +346,6 @@ export default {
 </script>
 
 <style scoped>
-
 .flex-content {
   width: 100%;
   /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
@@ -300,6 +362,12 @@ table.fixed-table tr {
   height: 40px;
 }
 
+#myTabContent {
+  margin-top: 8px;
+}
+.form-group {
+  margin-right: 8px;
+}
 table.fixed-table th,
 table.fixed-table td {
   overflow: hidden;

src/workflow/TaskProcessManagement.vue

@@ -1,46 +1,25 @@
 <template>
   <div class="container-fluid">
-    <Navbar
-      title="任务管理"
-      :is-go-back="false"
-    />
-    <a-button
-      type="primary"
-      @click="showDrawer"
-    >
-      创建任务
-    </a-button>
+    <Navbar title="任务管理" :is-go-back="false" />
+    <a-button type="primary" @click="showDrawer"> 创建任务 </a-button>
     <a-drawer
       v-model:visible="visible"
       class="custom-class"
       :title="taskDefineDto.id == null ? '创建任务' : '编辑任务'"
       placement="right"
-      width="850"
-      @after-visible-change="afterVisibleChange"
+      width="650"
     >
-      <div
-        id="myTabContent"
-        class="tab-content"
-      >
-        <div
-          v-if="step == 1"
-          class="panel panel-default"
-        >
+      <div id="myTabContent" class="tab-content">
+        <div v-if="step == 1" class="panel panel-default">
           <div class="panel-heading">
             <h3 class="panel-title">
               <b>1.基本配置</b>
             </h3>
           </div>
           <div class="panel-body">
-            <form
-              class="form-horizontal"
-              role="form"
-            >
+            <form class="form-horizontal" role="form">
               <div class="form-group">
-                <label
-                  for="firstname"
-                  class="col-sm-2 control-label"
-                >
+                <label for="firstname" class="col-sm-2 control-label">
                   <font color="red">*</font>名称
                 </label>
                 <div class="col-sm-10">
@@ -55,10 +34,7 @@
                 </div>
               </div>
               <div class="form-group">
-                <label
-                  for="lastname"
-                  class="col-sm-2 control-label"
-                >
+                <label for="lastname" class="col-sm-2 control-label">
                   <font color="red">*</font>描述
                 </label>
                 <div class="col-sm-10">
@@ -73,10 +49,7 @@
                 </div>
               </div>
               <div class="form-group">
-                <label
-                  for="lastname"
-                  class="col-sm-2 control-label"
-                >
+                <label for="lastname" class="col-sm-2 control-label">
                   <font color="red">*</font>任务类型
                 </label>
                 <div class="col-sm-10">
@@ -95,10 +68,7 @@
                 "
                 class="form-group"
               >
-                <label
-                  for="lastname"
-                  class="col-sm-2 control-label"
-                >
+                <label for="lastname" class="col-sm-2 control-label">
                   <font color="red">*</font>流程报表文件编码
                 </label>
                 <div class="col-sm-10">
@@ -119,10 +89,7 @@
                 "
                 class="form-group"
               >
-                <label
-                  for="lastname"
-                  class="col-sm-2 control-label"
-                >
+                <label for="lastname" class="col-sm-2 control-label">
                   <font color="red">*</font>流程报表名称
                 </label>
                 <div class="col-sm-10">
@@ -143,10 +110,7 @@
                 "
                 class="form-group"
               >
-                <label
-                  for="lastname"
-                  class="col-sm-2 control-label"
-                >
+                <label for="lastname" class="col-sm-2 control-label">
                   <font color="red">*</font>HTTP请求类型
                 </label>
                 <div class="col-sm-10">
@@ -165,10 +129,7 @@
                 "
                 class="form-group"
               >
-                <label
-                  for="lastname"
-                  class="col-sm-2 control-label"
-                >
+                <label for="lastname" class="col-sm-2 control-label">
                   <font color="red">*</font>HTTP请求地址
                 </label>
                 <div class="col-sm-10">
@@ -189,10 +150,7 @@
                 "
                 class="form-group"
               >
-                <label
-                  for="lastname"
-                  class="col-sm-2 control-label"
-                >HTTP参数（json）</label>
+                <label for="lastname" class="col-sm-2 control-label">HTTP参数（json）</label>
                 <div class="col-sm-10">
                   <input
                     id="lastname"
@@ -205,10 +163,7 @@
                 </div>
               </div>
               <div class="form-group">
-                <label
-                  for="lastname"
-                  class="col-sm-2 control-label"
-                >接收人</label>
+                <label for="lastname" class="col-sm-2 control-label">接收人</label>
                 <div class="col-sm-10">
                   <v-select
                     v-model="taskDefineDto.selectedUser"
@@ -220,10 +175,7 @@
                 </div>
               </div>
               <div class="form-group">
-                <label
-                  for="lastname"
-                  class="col-sm-2 control-label"
-                >接收用户组</label>
+                <label for="lastname" class="col-sm-2 control-label">接收用户组</label>
                 <div class="col-sm-10">
                   <v-select
                     v-model="taskDefineDto.selectedGroup"
@@ -238,39 +190,23 @@
           </div>
 
           <div class="panel-footer">
-            <ul
-              class="pager"
-              style="margin: 5px 0"
-            >
+            <ul class="pager" style="margin: 5px 0">
               <li>
-                <a
-                  
-                  class="pull-right"
-                  @click="saveCheck"
-                >下一步</a>
+                <a class="pull-right" @click="saveCheck">下一步</a>
               </li>
             </ul>
           </div>
         </div>
-        <div
-          v-if="step == 2"
-          class="panel panel-default"
-        >
+        <div v-if="step == 2" class="panel panel-default">
           <div class="panel-heading">
             <h3 class="panel-title">
               <b>2.定时配置</b>
             </h3>
           </div>
           <div class="panel-body">
-            <form
-              class="form-horizontal"
-              role="form"
-            >
+            <form class="form-horizontal" role="form">
               <div class="form-group">
-                <label
-                  for="lastname"
-                  class="col-sm-2 control-label"
-                >
+                <label for="lastname" class="col-sm-2 control-label">
                   <font color="red">*</font>时间类型
                 </label>
                 <div class="col-sm-10">
@@ -289,10 +225,7 @@
                 "
                 class="form-group"
               >
-                <label
-                  for="cron"
-                  class="col-sm-2 control-label"
-                >
+                <label for="cron" class="col-sm-2 control-label">
                   <font color="red">*</font>cron表达式
                 </label>
                 <div class="col-sm-10">
@@ -308,46 +241,26 @@
             </form>
           </div>
           <div class="panel-footer">
-            <ul
-              class="pager"
-              style="margin: 5px 0"
-            >
+            <ul class="pager" style="margin: 5px 0">
               <li>
-                <a
-                  
-                  class="pull-left"
-                  @click="step = step - 1"
-                >上一步</a>
+                <a class="pull-left" @click="step = step - 1">上一步</a>
               </li>
               <li>
-                <a
-                  
-                  class="pull-right"
-                  @click="saveCheck"
-                >下一步</a>
+                <a class="pull-right" @click="saveCheck">下一步</a>
               </li>
             </ul>
           </div>
         </div>
-        <div
-          v-if="step == 3"
-          class="panel panel-default"
-        >
+        <div v-if="step == 3" class="panel panel-default">
           <div class="panel-heading">
             <h3 class="panel-title">
               <b>3.报警配置</b>
             </h3>
           </div>
           <div class="panel-body">
-            <form
-              class="form-horizontal"
-              role="form"
-            >
+            <form class="form-horizontal" role="form">
               <div class="form-group">
-                <label
-                  for="firstname"
-                  class="col-sm-2 control-label"
-                >
+                <label for="firstname" class="col-sm-2 control-label">
                   <font color="red">*</font>超时报警
                 </label>
                 <div class="col-sm-10">
@@ -362,10 +275,7 @@
                 </div>
               </div>
               <div class="form-group">
-                <label
-                  for="lastname"
-                  class="col-sm-2 control-label"
-                >超时时间</label>
+                <label for="lastname" class="col-sm-2 control-label">超时时间</label>
                 <div class="col-sm-10">
                   <input
                     id="lastname"
@@ -378,10 +288,7 @@
                 </div>
               </div>
               <div class="form-group">
-                <label
-                  for="lastname"
-                  class="col-sm-2 control-label"
-                >
+                <label for="lastname" class="col-sm-2 control-label">
                   <font color="red">*</font>超时终止
                 </label>
                 <div class="col-sm-10">
@@ -396,10 +303,7 @@
                 </div>
               </div>
               <div class="form-group">
-                <label
-                  for="firstname"
-                  class="col-sm-2 control-label"
-                >
+                <label for="firstname" class="col-sm-2 control-label">
                   <font color="red">*</font>失败报警
                 </label>
                 <div class="col-sm-10">
@@ -414,10 +318,7 @@
                 </div>
               </div>
               <div class="form-group">
-                <label
-                  for="lastname"
-                  class="col-sm-2 control-label"
-                >报警联系人</label>
+                <label for="lastname" class="col-sm-2 control-label">报警联系人</label>
                 <div class="col-sm-10">
                   <v-select
                     v-model="taskDefineDto.selectedAlarmUser"
@@ -431,46 +332,26 @@
             </form>
           </div>
           <div class="panel-footer">
-            <ul
-              class="pager"
-              style="margin: 5px 0"
-            >
+            <ul class="pager" style="margin: 5px 0">
               <li>
-                <a
-                  
-                  class="pull-left"
-                  @click="step = step - 1"
-                >上一步</a>
+                <a class="pull-left" @click="step = step - 1">上一步</a>
               </li>
               <li>
-                <a
-                  
-                  class="pull-right"
-                  @click="saveCheck"
-                >下一步</a>
+                <a class="pull-right" @click="saveCheck">下一步</a>
               </li>
             </ul>
           </div>
         </div>
-        <div
-          v-if="step == 4"
-          class="panel panel-default"
-        >
+        <div v-if="step == 4" class="panel panel-default">
           <div class="panel-heading">
             <h3 class="panel-title">
               <b>4.其他配置</b>
             </h3>
           </div>
           <div class="panel-body">
-            <form
-              class="form-horizontal"
-              role="form"
-            >
+            <form class="form-horizontal" role="form">
               <div class="form-group">
-                <label
-                  for="firstname"
-                  class="col-sm-2 control-label"
-                >状态</label>
+                <label for="firstname" class="col-sm-2 control-label">状态</label>
                 <div class="col-sm-10">
                   <v-select
                     v-model="taskDefineDto.selectedStatus"
@@ -483,158 +364,92 @@
             </form>
           </div>
           <div class="panel-footer">
-            <ul
-              class="pager"
-              style="margin: 5px 0"
-            >
+            <ul class="pager" style="margin: 5px 0">
               <li>
-                <a
-                  
-                  class="pull-left"
-                  @click="step = step - 1"
-                >上一步</a>
+                <a class="pull-left" @click="step = step - 1">上一步</a>
               </li>
               <li>
-                <a
-                  
-                  class="pull-right"
-                  @click="saveCheck"
-                >保存</a>
+                <a class="pull-right" @click="saveCheck">保存</a>
               </li>
             </ul>
           </div>
         </div>
       </div>
     </a-drawer>
-    <div
-      id="myTabContent"
-      class="tab-content"
-    >
-      <ul />
-      <div>
-        <table class="fixed-table table-striped table-bordered">
-          <thead>
-            <tr>
-              <th style="width: 50px">序号</th>
-              <th style="width: 100px">任务名</th>
-              <th style="width: 100px">任务描述</th>
-              <th style="width: 100px">任务类型</th>
-              <th style="width: 100px">生效开始时间</th>
-              <th style="width: 100px">生效结束时间</th>
-              <th style="width: 100px">接收人</th>
-              <th style="width: 100px">接收用户组</th>
-              <th style="width: 100px">状态</th>
-              <th style="width: 300px">操作</th>
-            </tr>
-          </thead>
-          <tbody class="table1">
-            <template
-              v-for="(data, index) in taskDefineDtos"
-              :key="index"
-            >
-              <tr>
-                <td>
-                  {{ index + (pagination.current_page - 1) * pagination.per_page + 1 }}
-                </td>
-                <td>{{ data.taskName }}</td>
-                <td>{{ data.taskDescription }}</td>
-                <td>
-                  {{
-                    data.taskType == null
-                      ? ""
-                      : data.taskType == "HTTP"
-                        ? "HTTP请求"
-                        : "流程报表"
-                  }}
-                </td>
-                <td>{{ data.startDate }}</td>
-                <td>{{ data.endDate }}</td>
-                <td>
-                  {{
-                    data.receiveUserNames != null && data.receiveUserNames.length > 0
-                      ? data.receiveUserNames.join(",")
-                      : ""
-                  }}
-                </td>
-                <td>
-                  {{
-                    data.receiveGroupNames != null && data.receiveGroupNames.length > 0
-                      ? data.receiveGroupNames.join(",")
-                      : ""
-                  }}
-                </td>
-                <td>
-                  {{ data.taskStatus == "ENABLE" ? "启用" : "禁用" }}
-                </td>
-                <td>
-                  <div class="btn-group">
-                    <button
-                      v-if="data.taskStatus == 'DISABLE'"
-                      type="button"
-                      class="btn btn-success"
-                      @click="updateStatus(data, 'ENABLE')"
-                    >
-                      启用
-                    </button>
-                    <button
-                      v-if="data.taskStatus == 'ENABLE'"
-                      type="button"
-                      class="btn btn-warning"
-                      @click="updateStatus(data, 'DISABLE')"
-                    >
-                      禁用
-                    </button>
-                    <button
-                      type="button"
-                      class="btn btn-info"
-                      @click="edit(data)"
-                    >
-                      编辑
-                    </button>
-                    <button
-                      v-if="data.taskType != 'HTTP'"
-                      type="button"
-                      class="btn btn-default"
-                      @click="manualExecutionProcess(data.id)"
-                    >
-                      手动执行
-                    </button>
-                    <button
-                      type="button"
-                      class="btn btn-danger"
-                      @click="deleteTaskBefore(data)"
-                    >
-                      删除
-                    </button>
-                  </div>
-                </td>
-              </tr>
-            </template>
-          </tbody>
-        </table>
-      </div>
-      <div>
-        <div class="form-group">
-          <div class="pull-right">
-            <VueBootstrapPagination
-              v-if="pagination.last_page > 0"
-              :pagination="pagination"
-              :callback="getAllTaskDefineDtos"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <Modal
-      v-model:show="modal"
-      small="true"
-      @ok="deleteTask"
+    <CommonTable
+      :total="pagination.total"
+      :columns="columns"
+      :data-source="taskDefineDtos"
+      @get-page="getPageParams"
     >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key == 'taskType'">
+          {{
+            record.taskType == null
+              ? ""
+              : record.taskType == "HTTP"
+                ? "HTTP"
+                : "流程报表"
+          }}
+        </template>
+        <template v-if="column.key == 'receiveUserNames'">
+          {{
+            record.receiveUserNames != null &&
+              record.receiveUserNames.length > 0
+              ? record.receiveUserNames.join(",")
+              : ""
+          }}
+        </template>
+        <template v-if="column.key == 'receiveGroupNames'">
+          {{
+            record.receiveGroupNames != null &&
+              record.receiveUserNames.length > 0
+              ? record.receiveGroupNames.join(",")
+              : ""
+          }}
+        </template>
+        <template v-if="column.key == 'taskStatus'">
+          {{ record.taskStatus == "ENABLE" ? "启用" : "禁用" }}
+        </template>
+        <template v-if="column.key == 'operation'">
+          <a-button
+            v-if="record.taskStatus == 'DISABLE'"
+            :size="size"
+            @click="updateStatus(record, 'ENABLE')"
+          >
+            启用
+          </a-button>
+          <a-button
+            v-if="record.taskStatus == 'ENABLE'"
+            :size="size"
+            @click="updateStatus(record, 'DISABLE')"
+          >
+            禁用
+          </a-button>
+          <a-button type="primary" :size="size" @click="edit(record)">
+            编辑
+          </a-button>
+          <a-button
+            type="danger"
+            :size="size"
+            @click="deleteTaskBefore(record)"
+          >
+            删除
+          </a-button>
+          <a-button
+            v-if="record.taskType != 'HTTP'"
+            type="dashed"
+            :size="size"
+            @click="manualExecutionProcess(record.id)"
+          >
+            执行
+          </a-button>
+        </template>
+      </template>
+    </CommonTable>
+    <Modal v-model:show="modal" small="true" @ok="deleteTask">
       <template #header> 删除任务提醒 </template>
-      <div
-        class="container row"
-        style="text-align: center"
-      >
+      <div class="container row" style="text-align: center">
         您确认要删除该任务吗？
       </div>
     </Modal>
@@ -650,13 +465,70 @@ import UserResource from '../api/base/UserResource.js';
 import GroupResource from '../api/base/GroupResource.js';
 import 'vue-select/dist/vue-select.css';
 import { Notify, Uuid } from 'pc-component-v3';
-
+import CommonTable from './CommonTable.vue';
 export default {
   components: {
     vSelect,
+    CommonTable,
   },
   data: function () {
     return {
+      size: 'small',
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'index',
+          key: 'index',
+          customRender: ({ text, record, index }) => `${index + 1}`,
+        },
+        {
+          title: '任务名',
+          dataIndex: 'taskName',
+          key: 'taskName',
+        },
+        {
+          title: '任务描述',
+          dataIndex: 'taskDescription',
+          key: 'taskDescription',
+        },
+        {
+          title: '任务类型',
+          dataIndex: 'taskType',
+          key: 'taskType',
+        },
+        {
+          title: '生效开始时间',
+          dataIndex: 'startDate',
+          key: 'startDate',
+        },
+        {
+          title: '生效结束时间',
+          dataIndex: 'endDate',
+          key: 'endDate',
+        },
+        {
+          title: '接收人',
+          dataIndex: 'receiveUserNames',
+          key: 'receiveUserNames',
+        },
+        {
+          title: '接收用户组',
+          dataIndex: 'receiveGroupNames',
+          key: 'receiveGroupNames',
+        },
+        {
+          title: '状态',
+          dataIndex: 'taskStatus',
+          key: 'taskStatus',
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          key: 'operation',
+          width: 210,
+          fixed: 'right',
+        },
+      ].map(item => ({ ...item, align: 'center' })),
       pagination: {
         total: 0,
         per_page: Common.pageSize, // required
@@ -724,7 +596,7 @@ export default {
         },
       ],
       groups: [],
-      taskDefineDtos: [],
+      taskDefineDtos: [], //表格数据
       visible: false,
     };
   },
@@ -746,21 +618,23 @@ export default {
   },
 
   methods: {
+    getPageParams: function (start, length) {
+      this.pagination.current_page = start;
+      this.pagination.per_page = length;
+      this.getAllTaskDefineDtos();
+    },
     showDrawer: function () {
       var _self = this;
       _self.visible = true;
       _self.restore();
     },
-    afterVisibleChange: function () { },
-    test: function () {
-      console.log('aaa');
-    },
-    changeCron: function (value) {
-      var _self = this;
-      _self.taskDefineDto.cronExpression = value;
-    },
+    // changeCron: function (value) {
+    //   var _self = this;
+    //   _self.taskDefineDto.cronExpression = value;
+    // },
     manualExecutionProcess: function (taskDefineId) {
-      var _self = this; _self.loading = true;
+      var _self = this;
+      _self.loading = true;
       TaskDefineResource.manualExecutionProcess(taskDefineId).then(
         successData => {
           _self.loading = false;
@@ -779,14 +653,12 @@ export default {
       );
     },
     updateStatus: function (item, status) {
-      var _self = this;
       TaskDefineResource.updateStatus(item.id, status).then(
         successData => {
           if (successData) {
             if (successData.errorCode == 0) {
               Notify.success('成功', successData.errorMessage, false);
               item.taskStatus = status;
-              console.log(item);
             } else {
               Notify.error('失败', successData.errorMessage, false);
             }
@@ -831,6 +703,7 @@ export default {
         Notify.error('错误', '启用状态下不能对任务进行编辑', false);
         return;
       }
+      // console.log(item);
       _self.taskDefineDto.id = item.id;
       _self.taskDefineDto.taskName = item.taskName;
       _self.taskDefineDto.taskDescription = item.taskDescription;
@@ -851,7 +724,9 @@ export default {
       if (item.taskTimeType == 'NONE') {
         _self.taskDefineDto.selectedTimeType = {
           value: 'none',
+          cron: null,
         };
+        item.cronExpression = null;
       } else if (item.taskTimeType == 'CRON') {
         _self.taskDefineDto.selectedTimeType = {
           value: 'cron',
@@ -990,14 +865,15 @@ export default {
       _self.taskDefineDtos.splice(0, _self.taskDefineDtos.length);
       TaskDefineResource.getAllTaskDefine(taskDefineSelectRequest).then(
         successData => {
+          // console.log(successData);
           if (successData && successData.errorCode == 0) {
             _self.taskDefineDtos = successData.datas;
             _self.pagination.total = successData.total;
-            _self.pagination.last_page = Math.ceil(
-              successData.total / _self.pagination.per_page,
-            );
+            // _self.pagination.last_page = Math.ceil(
+            //   successData.total / _self.pagination.per_page,
+            // );
           }
-          _self.fixedTableHeader();
+          // _self.fixedTableHeader();
         },
         errorData => {
           Common.processException(errorData);
@@ -1005,8 +881,8 @@ export default {
       );
     },
     /**
-                     * 保存任务流程
-                     */
+     * 保存任务流程
+     */
     saveTaskProcess: function () {
       var _self = this;
       if (_self.taskDefineDto.selectedTaskType.value == 'HTTP任务') {
@@ -1020,7 +896,7 @@ export default {
       var receiveUserIds = [];
       if (
         _self.taskDefineDto.selectedUser != null &&
-                _self.taskDefineDto.selectedUser.length > 0
+        _self.taskDefineDto.selectedUser.length > 0
       ) {
         _self.taskDefineDto.selectedUser.forEach(function (item) {
           receiveUserIds.push(item.id);
@@ -1029,7 +905,7 @@ export default {
       var receiveGroupIds = [];
       if (
         _self.taskDefineDto.selectedGroup != null &&
-                _self.taskDefineDto.selectedGroup.length > 0
+        _self.taskDefineDto.selectedGroup.length > 0
       ) {
         _self.taskDefineDto.selectedGroup.forEach(function (item) {
           receiveGroupIds.push(item.id);
@@ -1038,7 +914,7 @@ export default {
       var alarmUserIds = [];
       if (
         _self.taskDefineDto.selectedAlarmUser != null &&
-                _self.taskDefineDto.selectedAlarmUser.length > 0
+        _self.taskDefineDto.selectedAlarmUser.length > 0
       ) {
         _self.taskDefineDto.selectedAlarmUser.forEach(function (item) {
           alarmUserIds.push(item.id);
@@ -1096,7 +972,7 @@ export default {
       };
       if (
         _self.taskDefineDto.taskName == null ||
-                _self.taskDefineDto.taskName.trim().length == 0
+        _self.taskDefineDto.taskName.trim().length == 0
       ) {
         response.errorCode = 1;
         response.errorMessage = '请填写任务名称';
@@ -1104,7 +980,7 @@ export default {
       }
       if (
         _self.taskDefineDto.taskDescription == null ||
-                _self.taskDefineDto.taskDescription.trim().length == 0
+        _self.taskDefineDto.taskDescription.trim().length == 0
       ) {
         response.errorCode = 2;
         response.errorMessage = '请填写任务描述';
@@ -1123,7 +999,7 @@ export default {
           }
           if (
             _self.taskDefineDto.httpRequestUrl == null ||
-                        _self.taskDefineDto.httpRequestUrl.trim().length == 0
+            _self.taskDefineDto.httpRequestUrl.trim().length == 0
           ) {
             response.errorCode = 5;
             response.errorMessage = '请填写HTTP请求地址';
@@ -1132,7 +1008,7 @@ export default {
         } else if (_self.taskDefineDto.selectedTaskType.value == '流程报表') {
           if (
             _self.taskDefineDto.processReportNo == null ||
-                        _self.taskDefineDto.processReportNo.trim().length == 0
+            _self.taskDefineDto.processReportNo.trim().length == 0
           ) {
             response.errorCode = 6;
             response.errorMessage = '请填写流程报表文件编码';
@@ -1140,7 +1016,7 @@ export default {
           }
           if (
             _self.taskDefineDto.processReportName == null ||
-                        _self.taskDefineDto.processReportName.trim().length == 0
+            _self.taskDefineDto.processReportName.trim().length == 0
           ) {
             response.errorCode = 7;
             response.errorMessage = '请填写流程报表名称';
@@ -1165,7 +1041,7 @@ export default {
         if (_self.taskDefineDto.selectedTimeType.value == 'cron') {
           if (
             _self.taskDefineDto.cron == null ||
-                        _self.taskDefineDto.cron.trim().length == 0
+            _self.taskDefineDto.cron.trim().length == 0
           ) {
             response.errorCode = 2;
             response.errorMessage = '请填写cron表达式';
@@ -1206,8 +1082,8 @@ export default {
       return response;
     },
     /**
-                     * 保存校验
-                     */
+     * 保存校验
+     */
     saveCheck: function () {
       var _self = this;
       var response = null;
@@ -1232,20 +1108,20 @@ export default {
       }
     },
     /**
-                     * 冻结表头
-                     */
-    fixedTableHeader: function () {
-      const _self = this;
-      _self.$nextTick(function () {
-        $('.fixed-table').tableFixer({
-          left: 3,
-          head: true,
-        });
-      });
-    },
+     * 冻结表头
+     */
+    // fixedTableHeader: function () {
+    //   const _self = this;
+    //   _self.$nextTick(function () {
+    //     $('.fixed-table').tableFixer({
+    //       left: 3,
+    //       head: true,
+    //     });
+    //   });
+    // },
     /**
-                     * 查询所有用户
-                     */
+     * 查询所有用户
+     */
     getAllUsers: function () {
       var _self = this;
       _self.users.splice(0, _self.users.length);
@@ -1267,8 +1143,8 @@ export default {
       );
     },
     /**
-                     * 查询所有用户组
-                     */
+     * 查询所有用户组
+     */
     getAllGroups: function () {
       var _self = this;
       _self.groups.splice(0, _self.groups.length);
@@ -1295,11 +1171,11 @@ export default {
 
 <style scoped>
 .fixed-table {
-    table-layout: fixed;
-    width: 1150px !important;
-    min-width: 1150px !important;
+  table-layout: fixed;
+  width: 1150px !important;
+  min-width: 1150px !important;
 }
 #create {
-    width: 65%;
+  width: 65%;
 }
-</style>
+</style>

src/workflow/WorkflowEdit.vue

@@ -1,15 +1,13 @@
 <template>
   <div class="container-fluid">
-    <NavBar
+    <Navbar
       :title="$t('lang.WorkflowEdit.workflowManagement')"
       :is-go-back="false"
     />
 
     <div class="form-inline" style="margin-top: 10px">
       <div class="form-group">
-        <label for="condition">{{
-          $t("lang.WorkflowEdit.queryCondition")
-        }}</label>
+        <label for="condition">{{ $t("lang.WorkflowEdit.queryCondition") }}：</label>
         <input
           id="condition"
           v-model="condition"
@@ -20,246 +18,191 @@
         />
       </div>
 
-      <button class="btn btn-default" type="button" @click="requeryWorkflows">
+      <a-button class="btn btn-default" @click="requeryWorkflows">
         {{ $t("lang.WorkflowEdit.query") }}
-      </button>
+      </a-button>
 
-      <button class="btn btn-default" type="button" @click="addition">
+      <a-button class="btn btn-default" @click="addition">
         {{ $t("lang.WorkflowEdit.newlyBuild") }}
-      </button>
+      </a-button>
 
-      <button class="btn btn-default" type="button" @click="exportJsonFile">
+      <a-button class="btn btn-default" @click="exportJsonFile">
         {{ $t("lang.WorkflowEdit.export") }}
-      </button>
+      </a-button>
 
-      <button class="btn btn-default" type="button" @click="importJsonFile">
+      <a-button class="btn btn-default" @click="importJsonFile">
         {{ $t("lang.WorkflowEdit.import") }}
-      </button>
+      </a-button>
     </div>
 
     <div class="table-responsive" style="margin-top: 10px">
-      <table class="table table-hover table-bordered table-condensed">
-        <thead>
-          <tr style="height: 40px;">
-            <th style="text-align: center;">
-              <input
-                v-model="checked"
-                autocomplete="off"
-                type="checkbox"
-                :checked="checked"
-                
-                @change="selectAll()"
-              />
-            </th>
-            <th>{{ $t("lang.WorkflowEdit.serialNumber") }}</th>
-            <th>{{ $t("lang.WorkflowEdit.corporateName") }}</th>
-            <th>{{ $t("lang.WorkflowEdit.workflowName") }}</th>
-            <th>{{ $t("lang.WorkflowEdit.filePath") }}</th>
-            <th>{{ $t("lang.WorkflowEdit.window") }}</th>
-            <th>{{ $t("lang.WorkflowEdit.workflowType") }}</th>
-            <th>{{ $t("lang.WorkflowEdit.deploymentStatus") }}</th>
-          </tr>
-        </thead>
-        <tbody id="workflowEditTab">
-          <tr
-            v-for="(workflow, index) in workflowDatas"
-            :key="workflow.id"
-            :class="{ active: selectedWorkflow === workflow }"
-            @dblclick="selectWorkflow(workflow, true)"
-          >
-            <td style="text-align: center; line-height: 34px;">
-              <input
-                autocomplete="off"
-                type="checkbox"
-                name="checkboxinput"
-                :checked="workflow.checked"
-                @click="workflow.checked = !workflow.checked"
-              />
-            </td>
-            <td>
-              <label class="form-control-static">{{
-                (pagination.current_page - 1) * pagination.per_page + index + 1
-              }}</label>
-            </td>
-
-            <td>
-              <label class="form-control-static">{{
-                workflow.clientName
-              }}</label>
-            </td>
-
-            <td>
-              <label class="form-control-static">{{ workflow.name }}</label>
-            </td>
-
-            <td>
-              <label class="form-control-static">{{
-                workflow.bpmnFileName
-              }}</label>
-            </td>
-
-            <td>
-              <label class="form-control-static">{{ workflow.windowNo }}.{{ workflow.windowName }}</label>
-            </td>
-
-            <td>
-              <label class="form-control-static">{{
-                workflow.workflowTypeName
-              }}</label>
-            </td>
-
-            <td>
-              <label class="form-control-static">{{
-                workflow.deploymentId != undefined &&
-                  workflow.deploymentId.length > 0
-                  ? "已部署"
-                  : "未部署"
-              }}</label>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div>
-        <VueBootstrapPagination
-          v-if="pagination.last_page > 0"
-          :pagination="pagination"
-          :callback="refreshWorkflows"
-        />
-      </div>
+      <template v-if="hasSelected">
+        {{ `Selected ${selectedRowKeys.length} items` }}
+      </template>
+      <CommonTable
+        ref="table"
+        :columns="columns"
+        :data-source="workflowDatas"
+        :total="pagination.total"
+        :row-selection="rowSelection"
+        @get-page="getPageParams"
+      >
+        <template #headerCell="{ column }">
+          <template v-if="column.dataIndex == 'check'">
+            <input
+              v-model="checked"
+              autocomplete="off"
+              type="checkbox"
+              :checked="checked"
+              @change="selectAll()"
+            />
+          </template>
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.dataIndex === 'check'">
+            <input
+              autocomplete="off"
+              type="checkbox"
+              name="checkboxinput"
+              :checked="record.checked"
+              @click="record.checked = !record.checked"
+            />
+          </template>
+          <template v-if="column.dataIndex === 'operation'">
+            <a-button type="dashed" @click="selectWorkflow(record, true)">
+              编辑
+            </a-button>
+          </template>
+          <template v-if="column.dataIndex === 'window'">
+            <span>{{ record.windowNo }}.{{ record.windowName }}</span>
+          </template>
+          <template v-if="column.dataIndex === 'deploymentId'">
+            <span>{{
+              record.deploymentId != undefined &&
+                record.deploymentId.length > 0
+                ? "已部署"
+                : "未部署"
+            }}
+            </span>
+          </template>
+        </template>
+      </CommonTable>
     </div>
     <Loading v-if="loading" />
-
-    <Modal
-      v-model:show="modal"
-      small="true"
-      :show-canel-button="false"
-      :show-ok-button="false"
+    <a-drawer
+      v-model:visible="modal"
+      :width="640"
+      class="custom-class"
+      title="工作流定义"
+      placement="right"
     >
-      <template #header>
-        {{ $t("lang.WorkflowEdit.workflowDefinition") }}
-      </template>
-      <div>
-        <div class="form-group">
-          <label>{{ $t("lang.WorkflowEdit.corporateName") }}</label>
-          <v-select
-            v-model="selectedWorkflow.client"
-            :options="clientOptions"
-            :label="'name'"
-          />
-        </div>
-        <div class="form-group">
-          <label>{{ $t("lang.WorkflowEdit.windowName") }}</label>
-          <v-select
-            v-model="selectedWorkflow.window"
-            :options="windowOptions"
-            :label="'value'"
-          />
-        </div>
-        <div class="form-group">
-          <label>{{ $t("lang.WorkflowEdit.workflowName") }}</label>
-          <input
-            v-model="selectedWorkflow.name"
-            autocomplete="off"
-            class="form-control"
-            type="text"
-          />
-        </div>
-        <div class="form-group">
-          <label>{{ $t("lang.WorkflowEdit.workflowFilePath") }}</label>
-          <v-select
-            v-model="selectedWorkflow.bpmnFileName"
-            :options="bpmns"
-            :label="'value'"
-          />
-        </div>
-        <div class="form-group">
-          <label>{{ $t("lang.WorkflowEdit.workflowType") }}</label>
-          <select v-model="selectedWorkflow.workflowType" class="form-control">
-            <option
-              v-for="workflowType in workflowTypes"
-              :key="workflowType.keyStr"
-              :value="workflowType.keyStr"
-            >
-              {{ workflowType.value }}
-            </option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label>{{ $t("lang.WorkflowEdit.deploymentStatus")
-          }}{{
-            selectedWorkflow.deploymentId != undefined &&
-              selectedWorkflow.deploymentId.length > 0
-              ? $t("lang.WorkflowEdit.deployed")
-              : $t("lang.WorkflowEdit.notDeployed")
-          }}</label>
-          <input
-            v-model="selectedWorkflow.deploymentId"
-            autocomplete="off"
-            class="form-control"
-            type="text"
-          />
-        </div>
-        <div class="form-group">
-          <label>{{
-            $t("lang.WorkflowEdit.deleteProcessVerificationPassword")
-          }}</label>
-          <input
-            v-model="selectedWorkflow.deletePassword"
-            autocomplete="off"
-            onfocus="this.type='password'"
-            class="form-control"
-            type="text"
-          />
-        </div>
+      <div class="form-group">
+        <label>{{ $t("lang.WorkflowEdit.corporateName") }}</label>
+        <v-select
+          v-model="selectedWorkflow.client"
+          :options="clientOptions"
+          :label="'name'"
+        />
+      </div>
+      <div class="form-group">
+        <label>{{ $t("lang.WorkflowEdit.windowName") }}</label>
+        <v-select
+          v-model="selectedWorkflow.window"
+          :options="windowOptions"
+          :label="'value'"
+        />
+      </div>
+      <div class="form-group">
+        <label>{{ $t("lang.WorkflowEdit.workflowName") }}</label>
+        <input
+          v-model="selectedWorkflow.name"
+          autocomplete="off"
+          class="form-control"
+          type="text"
+        />
+      </div>
+      <div class="form-group">
+        <label>{{ $t("lang.WorkflowEdit.workflowFilePath") }}</label>
+        <v-select
+          v-model="selectedWorkflow.bpmnFileName"
+          :options="bpmns"
+          :label="'value'"
+        />
+      </div>
+      <div class="form-group">
+        <label>{{ $t("lang.WorkflowEdit.workflowType") }}</label>
+        <select v-model="selectedWorkflow.workflowType" class="form-control">
+          <option
+            v-for="workflowType in workflowTypes"
+            :key="workflowType.keyStr"
+            :value="workflowType.keyStr"
+          >
+            {{ workflowType.value }}
+          </option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label>{{ $t("lang.WorkflowEdit.deploymentStatus")
+        }}{{
+          selectedWorkflow.deploymentId != undefined &&
+            selectedWorkflow.deploymentId.length > 0
+            ? $t("lang.WorkflowEdit.deployed")
+            : $t("lang.WorkflowEdit.notDeployed")
+        }}</label>
+        <input
+          v-model="selectedWorkflow.deploymentId"
+          autocomplete="off"
+          class="form-control"
+          type="text"
+        />
+      </div>
+      <div class="form-group">
+        <label>{{
+          $t("lang.WorkflowEdit.deleteProcessVerificationPassword")
+        }}</label>
+        <input
+          v-model="selectedWorkflow.deletePassword"
+          autocomplete="off"
+          onfocus="this.type='password'"
+          class="form-control"
+          type="text"
+        />
       </div>
-
       <template #footer>
-        <div>
-          <button class="btn btn-default" type="button" @click="approvalFlow">
+        <div class="footerStyle">
+          <a-button class="btn btn-default" @click="approvalFlow">
             {{ $t("lang.WorkflowEdit.editor") }}
-          </button>
-          <button
-            class="btn btn-default"
-            type="button"
-            @click="deleteWorkflow"
-          >
-            {{ $t('lang.WorkflowEdit.delete') }}
-          </button>
-          <button class="btn btn-default" type="button" @click="save">
+          </a-button>
+          <a-button class="btn btn-default" @click="deleteWorkflow">
+            {{ $t("lang.WorkflowEdit.delete") }}
+          </a-button>
+          <a-button class="btn btn-default" @click="save">
             {{ $t("lang.WorkflowEdit.save") }}
-          </button>
-          <button class="btn btn-default" type="button" @click="sync">
+          </a-button>
+          <a-button class="btn btn-default" @click="sync">
             {{ $t("lang.WorkflowEdit.synchronization") }}
-          </button>
-          <button
-            class="btn btn-default"
-            type="button"
-            @click="deleteInstance"
-          >
-            {{ $t('lang.WorkflowEdit.deleteInstance') }}
-          </button>
-          <button
-            class="btn btn-default"
-            type="button"
-            @click="processInstanceCount"
-          >
+          </a-button>
+          <a-button class="btn btn-default" @click="deleteInstance">
+            {{ $t("lang.WorkflowEdit.deleteInstance") }}
+          </a-button>
+          <a-button class="btn btn-default" @click="processInstanceCount">
             {{ $t("lang.WorkflowEdit.numberOfProcessInstances") }}
-          </button>
-          <button
+          </a-button>
+
+          <a-button
             v-if="
               selectedWorkflow.workflowType == 'Timer' ||
-                selectedWorkflow.workflowType == 'OTHER'||
+                selectedWorkflow.workflowType == 'OTHER' ||
                 selectedWorkflow.workflowType == 'NoticeOnLogin'
             "
             class="btn btn-default"
-            type="button"
             @click="manualStartWorkflow"
           >
             {{ $t("lang.WorkflowEdit.manualStartProcess") }}
-          </button>
+          </a-button>
         </div>
       </template>
-    </Modal>
+    </a-drawer>
 
     <Modal v-model:show="modal1" small="true">
       <template #header>
@@ -274,9 +217,9 @@
     </Modal>
     <Modal
       v-model:show="modal2"
-      small="true"
-      :show-canel-button="false"
       :show-ok-button="false"
+      :show-canel-button="false"
+      small="true"
     >
       <template #header>
         {{ $t("lang.WorkflowEdit.workflowDefinition") }}
@@ -284,7 +227,7 @@
       <div>
         <div class="form-group">
           <label>{{ $t("lang.WorkflowEdit.workflowJsonFile") }}</label>
-          <textarea v-model="jsonFlie" class="form-control" rows="20" />
+          <textarea v-model="jsonFile" class="form-control" rows="20" />
         </div>
       </div>
       <template #footer>
@@ -307,24 +250,83 @@
 
 <script>
 import Common from '../common/Common.js';
-
-
 import vSelect from 'vue-select';
-
-
-
 import WorkflowEditResource from './WorkflowEditResource.js';
 import 'vue-select/dist/vue-select.css';
 import { Notify, Uuid } from 'pc-component-v3';
-
+import CommonTable from './CommonTable.vue';
 export default {
-
   components: {
     'v-select': vSelect,
-    
+    CommonTable,
   },
   data: function () {
     return {
+      isSelect: true,
+      columns: [
+        {
+          title: '',
+          dataIndex: 'check',
+          key: 'check',
+          width: 48,
+        },
+        {
+          title: '序号',
+          dataIndex: 'index',
+          key: 'index',
+          width: 75,
+          customRender: ({ text, record, index }) => `${index + 1}`,
+        },
+        {
+          title: '公司名称',
+          dataIndex: 'clientName',
+          key: 'clientName',
+        },
+        {
+          title: '工作流名称',
+          dataIndex: 'name',
+          key: 'name',
+        },
+        {
+          title: '文件路径',
+          dataIndex: 'bpmnFileName',
+          key: 'bpmnFileName',
+        },
+        {
+          title: '窗口',
+          dataIndex: 'window',
+          key: 'window',
+          width: '250px',
+        },
+        {
+          title: '工作流类型',
+          dataIndex: 'workflowTypeName',
+          key: 'workflowTypeName',
+        },
+        {
+          title: '部署状态',
+          dataIndex: 'deploymentId',
+          key: 'deploymentId',
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          key: 'operation',
+          width: '100px',
+          fixed: 'right',
+        },
+      ].map(item => ({ ...item, align: 'center' })),
+      // dataSource: [
+      //   {
+      //     key: '1',
+      //     corporateName: '测试公司',
+      //     workflowName: '资产申购单',
+      //     fileUrl: '',
+      //     window: '040601.资产申购单',
+      //     workflowType: '用户自定义',
+      //     deploymentStatus: '已部署',
+      //   },
+      // ],
       clientOptions: [],
       workflowDatas: [],
       windowOptions: [],
@@ -355,7 +357,7 @@ export default {
         last_page: 0, // required
       },
       selectWorkflowDatas: undefined,
-      jsonFlie: undefined,
+      jsonFile: undefined,
       loading: false,
       modal: false,
       modal1: false,
@@ -375,22 +377,37 @@ export default {
   },
 
   methods: {
+    rowSelection: function () {
+      const onChange = (selectedRowKeys, selectedRows) => {
+        //第一个参数控制选不选中，第二个参数是选中列表的数据的集合
+        console.log(selectedRows);
+      };
+      const getCheckboxProps = record => ({
+        disabled: record.releaseState === 'ONLINE', //控制禁用那个按钮
+        releaseState: record.releaseState,
+      });
+      return onChange, getCheckboxProps;
+    },
+
     /**
      * 导入json文件
      * @author GuoZhiBo 20210318
      */
     saveWorkflowDto: function () {
       var _self = this;
-      var jsonFlie = JSON.parse(_self.jsonFlie);
-      WorkflowEditResource.saveListWorkflowDto(jsonFlie).then(
+      var jsonFile = JSON.parse(_self.jsonFile);
+      WorkflowEditResource.saveListWorkflowDto(jsonFile).then(
         successData => {
           if (successData) {
             Notify.success('导入成功', '导入成功', 1500);
             _self.refreshWorkflows();
           }
+          _self.modal2 = false;
+          _self.jsonFile = undefined;
         },
         errorData => {
           Common.processException(errorData);
+          _self.modal2 = false;
         },
       );
     },
@@ -483,7 +500,7 @@ export default {
      */
     approvalFlow: function () {
       var _self = this;
-      
+
       var url =
         '/workflow.html#/?windowNo=' +
         _self.selectedWorkflow.window.keyStr +
@@ -499,7 +516,7 @@ export default {
      */
     loadWindows: function () {
       var _self = this;
-      _self.loading=true;
+      _self.loading = true;
       $.ajax({
         url: Common.getApiURL('CurdWindowResource/getWindowKeyValues'),
         type: 'get',
@@ -508,7 +525,7 @@ export default {
           Common.addTokenToRequest(request);
         },
         success: function (data) {
-          _self.loading=false;
+          _self.loading = false;
           _self.windowOptions.splice(0, _self.windowOptions.length);
           // 清空数据
           if (data == undefined || data.length == 0) {
@@ -522,7 +539,7 @@ export default {
           _self.refreshWorkflows();
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -554,7 +571,7 @@ export default {
      */
     loadProcessReports: function () {
       var _self = this;
-      _self.loading=true;
+      _self.loading = true;
       $.ajax({
         url: Common.getApiURL(
           'ProcessReportResource/getProcessReportKeyValues',
@@ -565,14 +582,14 @@ export default {
           Common.addTokenToRequest(request);
         },
         success: function (data) {
-          _self.loading=false;
+          _self.loading = false;
           _self.processReports.splice(0, _self.processReports.length);
           for (var i = 0, len = data.length; i < len; i++) {
             _self.processReports.push(data[i]);
           }
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -583,7 +600,7 @@ export default {
      */
     loadWorkflowTypes: function () {
       var _self = this;
-      _self.loading=true;
+      _self.loading = true;
       $.ajax({
         url: Common.getApiURL('workflowEditResource/getWorkflowTypes'),
         type: 'get',
@@ -592,7 +609,7 @@ export default {
           Common.addTokenToRequest(request);
         },
         success: function (data) {
-          _self.loading=false;
+          _self.loading = false;
           _self.workflowTypes.splice(0, _self.workflowTypes.length);
           if (data == undefined || data.length == 0) {
             return;
@@ -605,7 +622,7 @@ export default {
           _self.loadWindows();
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -618,6 +635,13 @@ export default {
       this.initSelectedWorkflow();
       this.pagination.current_page = 1;
       this.pagination.last_page = 0;
+      this.$refs.table.backFirstPage();
+    },
+
+    // 从子组件获取的分页参数
+    getPageParams: function (start, length) {
+      this.pagination.current_page = start;
+      this.pagination.per_page = length;
       this.refreshWorkflows();
     },
 
@@ -627,7 +651,7 @@ export default {
      */
     refreshWorkflows: function () {
       var _self = this;
-      _self.loading=true;
+      _self.loading = true;
       var workflowDto = {
         range: {
           start:
@@ -646,7 +670,8 @@ export default {
           Common.addTokenToRequest(request);
         },
         success: function (data) {
-          _self.loading=false;
+          _self.loading = false;
+          _self.pagination.total = data.totalSize;
           // 清空数据
           _self.workflowDatas.splice(0, _self.workflowDatas.length);
           if (data == undefined || data.dataList.length == 0) {
@@ -661,7 +686,7 @@ export default {
               _self.selectedWorkflow != null &&
               _self.selectedWorkflow.id == data.dataList[i].id
             ) {
-              _self.selectWorkflow(data.dataList[i], true);
+              _self.selectWorkflow(data.dataList[i], false);
             }
           }
           _self.pagination.last_page = Math.ceil(
@@ -669,7 +694,7 @@ export default {
           );
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -724,7 +749,7 @@ export default {
       if (_self.selectedWorkflow.id == 0) {
         _self.modal = false;
       } else {
-        _self.loading=true;
+        _self.loading = true;
 
         $.ajax({
           url: Common.getApiURL('workflowEditResource/deleteWorkflowDto'),
@@ -736,13 +761,13 @@ export default {
           contentType: 'application/json',
           data: JSON.stringify(_self.selectedWorkflow),
           success: function (data) {
-            _self.loading=false;
+            _self.loading = false;
             _self.modal = false;
             Notify.success('删除成功', '数据删除成功', 1500);
             _self.refreshWorkflows();
           },
           error: function (XMLHttpRequest, textStatus, errorThrown) {
-            _self.loading=false;
+            _self.loading = false;
             Common.processException(XMLHttpRequest, textStatus, errorThrown);
           },
         });
@@ -754,7 +779,7 @@ export default {
         */
     query: function () {
       var _self = this;
-      _self.refreshWorkflows();
+      _self.$refs.table.backFirstPage();
     },
 
     /**
@@ -771,7 +796,7 @@ export default {
       _self.windowChange(_self.selectedWorkflow.window);
       _self.clientChange(_self.selectedWorkflow.client);
       _self.bpmnChange(_self.selectedWorkflow.bpmnFileName);
-      _self.loading=true;
+      _self.loading = true;
       $.ajax({
         url: Common.getApiURL('workflowEditResource/saveWorkflowDto'),
         type: 'post',
@@ -782,13 +807,13 @@ export default {
         contentType: 'application/json',
         data: JSON.stringify(_self.selectedWorkflow),
         success: function (data) {
-          _self.loading=false;
+          _self.loading = false;
           _self.setSelectedWorkflow(data);
           Notify.success('保存成功', '数据保存成功', 1500);
           _self.refreshWorkflows();
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -804,7 +829,7 @@ export default {
         Notify.error('提示', '请选择数据', false);
         return;
       }
-      _self.loading=true;
+      _self.loading = true;
       $.ajax({
         url: Common.getApiURL('workflowEditResource/syncWorkflowDto'),
         type: 'post',
@@ -815,13 +840,13 @@ export default {
         contentType: 'application/json',
         data: JSON.stringify(_self.selectedWorkflow),
         success: function (data) {
-          _self.loading=false;
+          _self.loading = false;
           _self.setSelectedWorkflow(data);
           Notify.success('同步成功', '数据同步成功', 1500);
           _self.refreshWorkflows();
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -836,7 +861,7 @@ export default {
         Notify.error('提示', '请选择数据', false);
         return;
       }
-      _self.loading=true;
+      _self.loading = true;
       $.ajax({
         url: Common.getApiURL('workflowEditResource/deleteWorkflowResource'),
         type: 'post',
@@ -847,12 +872,12 @@ export default {
         contentType: 'application/json',
         data: JSON.stringify(_self.selectedWorkflow),
         success: function (data) {
-          _self.loading=false;
+          _self.loading = false;
           Notify.success('删除实例成功', '数据删除成功', 1500);
           _self.refreshWorkflows();
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -868,7 +893,7 @@ export default {
         Notify.error('提示', '请选择数据', false);
         return;
       }
-      _self.loading=true;
+      _self.loading = true;
       $.ajax({
         url: Common.getApiURL('workflowEditResource/getProcessInstanceCount'),
         type: 'post',
@@ -879,11 +904,11 @@ export default {
         contentType: 'application/json',
         data: JSON.stringify(_self.selectedWorkflow),
         success: function (data) {
-          _self.loading=false;
+          _self.loading = false;
           Notify.success('流程实例数量：' + data, '', 1500);
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -895,7 +920,7 @@ export default {
         Notify.error('提示', '请选择数据', false);
         return;
       }
-      _self.loading=true;
+      _self.loading = true;
       $.ajax({
         url: Common.getApiURL('workflowEditResource/start'),
         type: 'post',
@@ -906,12 +931,12 @@ export default {
         contentType: 'application/json',
         data: JSON.stringify(_self.selectedWorkflow),
         success: function (data) {
-          _self.loading=false;
+          _self.loading = false;
           Notify.success('提示', '手工启动流程成功', 1500);
           _self.refreshWorkflows();
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -1032,4 +1057,10 @@ export default {
 .row {
   margin: 10px 0px;
 }
+.form-inline > .btn {
+  margin-left: 8px;
+}
+.footerStyle {
+  float: right;
+}
 </style>