Merge branch 'master' of https://prodog.leanwo.com:3000/prodog-client-2023/client-base-v4

README.md

@@ -0,0 +1,35 @@
+# client-base-v4
+
+### 项目安装
+```
+npm install
+```
+
+### 项目启动
+```
+npm run serve
+```
+
+### 项目打包
+```
+npm run build
+```
+
+### 项目发布
+```
+npm publish
+```
+
+#### 项目更新后的部署流程
+* 1、进入 package.json 文件中将项目版本 "version" 提升1;
+* 2、进入 bat 目录,在其目录下打开 cmd;
+* 3、首先在 cmd 内执行 build.bat 命令进行打包,即 npm run build;
+* 4、其次在 cmd 内执行 publish.bat 命令进行发布,即 npm publish;
+* 5、最后在 cmd 内执行 debug.bat 命令进行测试(是否成功),即 npm run dev;
+
+#### 注意事项
+* 1、一定要在 bat 目录下执行安装、打包、发布命令;
+* 2、一定不要忘记在项目部署时更改 package.json 里的版本;
+
+### 项目版本详情
+见 [Configuration Reference](http://wuzhixin.vip:4873).

package.json

@@ -1,7 +1,7 @@
 {
   "name": "client-base-v4",
   "description": "Leanwo Prodog Client",
-  "version": "3.0.25",
+  "version": "3.0.60",
   "author": "yangzhijie1488 <yangzhijie1488@163.com>",
   "scripts": {
     "dev": "cross-env webpack serve --config ./webpack.dev.js",
@@ -20,7 +20,7 @@
     "dayjs": "^1.11.6",
     "dingtalk-jsapi": "^2.10.3",
     "moment": "^2.29.4",
-    "pc-component-v3": "^1.0.49",
+    "pc-component-v3": "1.0.64",
     "uuid": "^8.3.2",
     "v-tooltip": "^4.0.0-beta.17",
     "vue-request": "^1.2.4",

src/api/department/index.js

@@ -0,0 +1,198 @@
+import { Common } from 'pc-component-v3';
+
+export const columns = [
+  {
+    title: '部门名称',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '部门编号',
+    dataIndex: 'no',
+    key: 'no',
+    width:'20%',
+  },
+  {
+    title: '公司描述',
+    dataIndex: 'description',
+    key: 'description',
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    fixed: 'right',
+  },
+];
+
+// 创建部门
+export const create = organization => {
+  var requestUrl = 'organizationResourceV2/create';
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiURL(requestUrl),
+      type: 'post',
+      data: JSON.stringify(organization),
+      contentType: 'application/json; charset=utf-8',
+      processData: false,
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};
+
+// 保存更新部门
+export const update = organization => {
+  var requestUrl = 'organizationResourceV2/update';
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiURL(requestUrl),
+      type: 'put',
+      contentType: 'application/json',
+      data: JSON.stringify(organization),
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};
+// 删除部门
+export const deleteDepartment = organization => {
+  var requestUrl = 'organizationResourceV2/delete';
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiURL(requestUrl),
+      type: 'delete',
+      dataType: 'json',
+      data: JSON.stringify(organization),
+      contentType: 'application/json; charset=utf-8',
+      processData: false,
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};
+
+// 获取总公司及下属所有子公司和部门(刷新)
+export const getAllOrganization = id => {
+  var requestUrl = 'organizationResourceV2/listClientOrganizations?clientId=' + id;
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiURL(requestUrl),
+      type: 'get',
+      dataType: 'json',
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};
+// 获取公司
+export const getCompony = () => {
+  var requestUrl = 'clientResourceV2/listClients';
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiURL(requestUrl),
+      type: 'get',
+      dataType: 'json',
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};
+
+// 根据公司id查询公司下所有部门，不包括子公司的部门
+export const loadSubClients = id => {
+  var requestUrl = 'organizationResourceV2/queryOrganizationByClientId';
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiURL(requestUrl),
+      type: 'get',
+      dataType: 'json',
+      data: { rootClientId: id },
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};
+// 根据部门id获取部门的信息
+export const loadOrganization = id => {
+  var requestUrl = 'organizationResourceV2/unique?organizationId=' + id;
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiURL(requestUrl),
+      type: 'get',
+      dataType: 'json',
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      processData: false,
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};
+
+export const getUsersByName = searchQueryParam => {
+  var requestUrl = 'api/userResource/getUsersByName';
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiUrl2(requestUrl),
+      type: 'post',
+      contentType: 'application/json',
+      data: JSON.stringify(searchQueryParam),
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};

src/archive/DataArchive.vue

@@ -0,0 +1,175 @@
+<template>
+  <header>
+    <Navbar title="数据归档" :is-go-back="false" />
+    <label>业务名称：</label>
+    <a-select
+      v-model:value="value1"
+      style="width: 200px"
+      :options="businessNames"
+      @change="nameChange"
+    />
+    <a-divider />
+  </header>
+  <div class="content">
+    <label>开始时间：</label>
+    <a-date-picker
+      show-time
+      :locale="locale"
+      style="width: 200px"
+      placeholder="归档开始日期"
+      @change="startDateChange"
+    />
+    <label class="params">结束时间：</label>
+    <a-date-picker
+      show-time
+      :locale="locale"
+      style="width: 200px"
+      placeholder="归档结束日期"
+      @change="endDateChange"
+    />
+    <label class="params">文件行数：</label>
+    <a-input-number v-model:value="linCount" :min="0" style="width: 200px" />
+    <a-divider />
+    <a-button type="primary" @click="startArchive">执行归档</a-button>
+    <a-result
+      v-if="isShow"
+      status="success"
+      :title="`${businessName}业务归档成功`"
+    >
+      <template #subTitle>
+        <div>共创建了{{ createCount }}个可视数据</div>
+        <div v-for="(item, index) in tableMessages" :key="index">
+          <div>
+            {{ index + 1 }}、{{ item.tableName }}表成功归档{{
+              item.successExporterData
+            }}条，删除{{ item.deleteSuccess }}条
+          </div>
+        </div>
+      </template>
+      <template #extra>
+        <a-button type="primary" @click="isShow = false">关闭</a-button>
+        <a-button @click="checkData">查看归档数据</a-button>
+      </template>
+    </a-result>
+  </div>
+</template>
+
+<script setup>
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import { ref, onMounted } from 'vue';
+import Common from '../common/Common';
+import { message } from 'ant-design-vue';
+import { getBusinessName, execute } from './config';
+import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
+
+dayjs.locale('zh-cn');
+const businessName = ref(''); //业务名
+const startDate = ref(''); // 开始时间
+const endDate = ref(''); // 结束时间
+const linCount = ref(null); // 文件行数
+const filePath = ref(''); //下载路径
+const isShow = ref(false);
+const tableMessages = ref([]); //表
+const createCount = ref(''); //创建的可视数据个数
+const businessNames = ref([]); // 业务名数据
+onMounted(() => {
+  getName();
+});
+// 获取业务名
+const nameChange = (_, { name }) => {
+  businessName.value = name;
+};
+// 获取开始时间
+const startDateChange = (_, dateString) => {
+  startDate.value = dateString;
+};
+// 获取结束时间
+const endDateChange = (_, dateString) => {
+  endDate.value = dateString;
+};
+
+// 获取业务名
+const getName = () => {
+  getBusinessName().then(
+    success => {
+      if (success.errorCode == 0) {
+        if (success.data) {
+          success.data.forEach(item => {
+            item.value = item.id;
+            item.label = item.name;
+          });
+        }
+        businessNames.value = success.data;
+      } else {
+        message.error(success.errorMessage);
+      }
+    },
+    error => {
+      Common.processException(error);
+    },
+  );
+};
+// 开始执行
+const startArchive = () => {
+  const params = {
+    businessName: businessName.value,
+    startTime: startDate.value,
+    endTime: endDate.value,
+    maxLines: linCount.value,
+  };
+  execute(params).then(
+    success => {
+      if (success.errorCode == 0) {
+        if (success.data) {
+          isShow.value = true;
+          filePath.value = success.data.visualizationFilePath;
+          tableMessages.value = success.data.tableMessage;
+          createCount.value = success.data.visualizationFileNames.length;
+        }
+      } else {
+        message.error(success.errorMessage);
+      }
+    },
+    error => {
+      Common.processException(error);
+    },
+  );
+};
+// 查看归档数据
+const checkData = () => {
+  const fileUrl = encodeURIComponent(filePath.value);
+  const xhr = new XMLHttpRequest();
+  xhr.open('get', `api/IArchiveResource/download?xlsxPath=${fileUrl}`, true);
+  const token = localStorage.getItem('#token');
+  xhr.setRequestHeader('token', token);
+  xhr.setRequestHeader('Content-type', 'application/json');
+  xhr.responseType = 'blob';
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4 && xhr.status === 200) {
+      let res = xhr.response;
+      let blob = new Blob([res]);
+      const blobUrl = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.download = '可视数据.zip';
+      link.style.display = 'none';
+      link.href = blobUrl;
+      document.body.appendChild(link);
+      link.click();
+      URL.revokeObjectURL(blobUrl);
+      document.body.removeChild(link);
+      message.success('下载成功');
+    }
+  };
+  xhr.send();
+};
+</script>
+
+<style scoped>
+:deep(.ant-divider) {
+  margin: 8px 0;
+}
+.params {
+  margin-left: 8px;
+}
+</style>

src/archive/config.js

@@ -0,0 +1,47 @@
+import Common from '../common/Common';
+
+// 获取业务名
+export const getBusinessName = () => {
+  var requestUrl = 'IArchiveResource/getBusinessName';
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiURL(requestUrl),
+      type: 'get',
+      contentType: 'application/json',
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};
+
+// 执行数据归档
+export const execute = params => {
+  var requestUrl = 'IArchiveResource/executeData';
+
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiURL(requestUrl),
+      type: 'post',
+      contentType: 'application/json',
+      dataType: 'json',
+      data: JSON.stringify(params),
+
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};

src/client/OrganizationEditPanel.vue

@@ -1,699 +1,501 @@
 <template>
-  <div class="container">
-    <NavBar
-      :title="$t('lang.OrganizationEditPanel.departmentManagement')"
-      :is-go-back="false"
+  <header>
+    <h3 style="margin: 0px; padding: 5px 0px 9px 0px">
+      {{ $t("lang.OrganizationEditPanel.departmentManagement") }}
+    </h3>
+    <a-divider style="margin: 0px" />
+  </header>
+  <div style="margin-top: 8px">
+    <a-button type="primary" @click="editOrganization(true)">
+      {{ $t("lang.OrganizationEditPanel.newDepartment") }}
+    </a-button>
+    <a-button type="dashed" style="margin-left: 8px" @click="getOrganization">
+      {{ $t("lang.OrganizationEditPanel.refresh") }}
+    </a-button>
+    <a-select
+      v-model:value="clientIdStr"
+      show-search
+      option-filter-prop="label"
+      style="width: 50%; margin-left: 16px"
+      placeholder="请选择公司"
+      :options="companies.map((item) => ({ value: item.id, label: item.name }))"
+      @change="getClientId"
     />
+  </div>
 
-    <div class="grid-container">
-      <div class="grid-item-row1-column1">
-        <div>
-          <div>
-            <button
-              class="btn btn-primary"
-              @click="createOrganization()"
-            >
-              {{ $t('lang.OrganizationEditPanel.newDepartment') }}
-            </button>
-            <button
-              class="btn btn-danger"
-              @click="deleteOrganization()"
-            >
-              {{ $t('lang.OrganizationEditPanel.deleteDepartment') }}
-            </button>
-            <button
-              class="btn btn-default"
-              @click="refresh()"
-            >
-              {{ $t('lang.OrganizationEditPanel.refresh') }}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="grid-item-row2-column1">
-        <div
-          v-for="clientOrganization in clientOrganizations"
-          :key="clientOrganization.id"
-        >
-          <TreeViewNode
-            :node="clientOrganization"
-            :is-root="true"
-            :is-show-check="true"
-            @node-expand="nodeExpand"
-            @node-select="nodeSelect"
-          />
-        </div>
-      </div>
-
-      <div class="grid-item-row2-column2">
-        <div>
-          <div v-if="organization">
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.corporateName') }}</label>
-              <input
-                v-if="organization.id"
-                v-model="organization.clientName"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-                readonly
-              />
-              <SearchWidget
-                v-else
-                info-window-no="286633"
-                :field-value="clientFieldValue"
-                :title-name="$t('lang.OrganizationEditPanel.departmentInquiry')"
-                display-name="ct.name"
-                :where-clause-source="clientAdditionHql"
-                @value-changed="clientValueChanged"
-              />
-            </div>
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.departmentNumber') }}</label>
-              <input
-                v-model="organization.no"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-              />
-            </div>
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.departmentName') }}</label>
-              <input
-                v-model="organization.name"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-              />
-            </div>
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.superiorDepartment') }}</label>
-              <SearchWidget
-                info-window-no="20220420_233656"
-                :field-value="parentOrganizationFieldValue"
-                :title-name="$t('lang.OrganizationEditPanel.departmentInquiry')"
-                display-name="name"
-                :where-clause-source="parentOrganizationAdditionHql"
-                @value-changed="parentOrganizationValueChanged"
-              />
-            </div>
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.departmentProfile') }}</label>
-              <textarea
-                v-model="organization.description"
-                class="form-control"
-                rows="3"
-              />
-            </div>
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.departmentManager') }}</label>
-              <div>
-                <v-select
-                  id="departmentManagerSelect"
-                  v-model="organization.managerUsers"
-                  multiple
-                  label="name"
-                  :options="userList"
-                  @search="fetchUserList"
-                />
-              </div>
-            </div>
-
-            <button
-              type="button"
-              class="btn btn-primary"
-              @click="saveOrUpdate()"
-            >
-              {{ $t('lang.OrganizationEditPanel.save') }}
-            </button>
-          </div>
-        </div>
-        <div>
-          <div v-if="selectedClient && selectedClient.selected">
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.corporateName') }}</label>
-              <div v-if="isInput">
-                <input
-                  v-model="selectedClient.name"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control"
-                  readonly
-                />
-              </div>
-              <div v-else>
-                <input
-                  v-model="companyName"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control"
-                />
-              </div>
-            </div>
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.companyNumber') }}</label>
-              <input
-                v-model="selectedClient.no"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-                readonly
-              />
-            </div>
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.companyManger') }}</label>
-              <div>
-                <v-select
-                  id="companyMangerSelect"
-                  v-model="selectedClient.managerUsers"
-                  multiple
-                  label="name"
-                  :options="userList"
-                  @search="fetchUserList"
-                />
-              </div>
-            </div>
-            <button
-              type="button"
-              class="btn btn-default"
-              @click="edit()"
-            >
-              {{ isInput ? $t('lang.OrganizationEditPanel.edit') : $t('lang.OrganizationEditPanel.cancelEditing') }}
-            </button>
-            <button
-              type="button"
-              class="btn btn-primary"
-              @click="updateCompany"
-            >
-              {{ $t('lang.OrganizationEditPanel.save') }}
-            </button>
-          </div>
+  <a-table
+    style="margin-top: 6px"
+    :columns="columns"
+    :data-source="dataSource"
+    :pagination="false"
+    :scroll="{ y: 440 }"
+    filter-search
+  >
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.dataIndex === 'operation'">
+        <div class="editable-row-operations">
+          <span>
+            <a @click="editOrganization(false, record.key)">{{
+              $t("lang.OrganizationEditPanel.edit")
+            }}</a>
+          </span>
+          <span>
+            <a style="color: red" @click="deleteOrganization(record.key)">删除</a>
+          </span>
         </div>
+      </template>
+    </template>
+  </a-table>
+
+  <a-drawer
+    v-model:visible="editVisible"
+    :title="drawerTitle"
+    :width="500"
+    placement="right"
+  >
+    <div class="form-group">
+      <label>{{ $t("lang.OrganizationEditPanel.corporateName") }}</label>
+      <!-- v-if="organization.id" -->
+      <a-input v-model:value="organization.clientName" disabled />
+      <!-- <SearchWidget
+        v-else
+        info-window-no="286633"
+        :field-value="clientFieldValue"
+        :title-name="$t('lang.OrganizationEditPanel.departmentInquiry')"
+        display-name="ct.name"
+        :where-clause-source="clientAdditionHql"
+        @value-changed="clientValueChanged"
+      /> -->
+    </div>
+    <div class="form-group">
+      <label>{{ $t("lang.OrganizationEditPanel.departmentNumber") }}</label>
+      <a-input v-model:value="organization.no" />
+    </div>
+    <div class="form-group">
+      <label>{{ $t("lang.OrganizationEditPanel.departmentName") }}</label>
+      <a-input v-model:value="organization.name" />
+    </div>
+    <div class="form-group">
+      <label>{{ $t("lang.OrganizationEditPanel.superiorDepartment") }}</label>
+      <SearchWidget
+        info-window-no="20220420_233656"
+        :field-value="parentOrganizationFieldValue"
+        :title-name="$t('lang.OrganizationEditPanel.departmentInquiry')"
+        display-name="name"
+        :where-clause-source="parentOrganizationAdditionHql"
+        @value-changed="parentOrganizationValueChanged"
+      />
+    </div>
+    <div class="form-group">
+      <label>{{ $t("lang.OrganizationEditPanel.departmentProfile") }}</label>
+      <textarea
+        v-model="organization.description"
+        class="form-control"
+        rows="3"
+      />
+    </div>
+    <div class="form-group">
+      <label>{{ $t("lang.OrganizationEditPanel.departmentManager") }}</label>
+      <div>
+        <v-select
+          id="departmentManagerSelect"
+          v-model="organization.managerUsers"
+          multiple
+          label="name"
+          :options="userList"
+          @search="fetchUserList"
+        />
       </div>
     </div>
-  </div>
+    <template #footer>
+      <a-button v-if="isCreate" type="primary" @click="createNew(organization)">
+        创建
+      </a-button>
+      <a-button
+        v-else
+        type="primary"
+        @click="updateOrganization(organization.id)"
+      >
+        {{ $t("lang.OrganizationEditPanel.save") }}
+      </a-button>
+    </template>
+  </a-drawer>
 </template>
 
-<script>
-import Common from '../common/Common.js';
-
-
-import TreeViewNode from '../widget/TreeViewNode.vue';
-
+<script setup>
 import vSelect from 'vue-select';
-import OrganizationResource from '../api/base/OrganizationResource';
-import UserResource from '../api/base/UserResource.js';
-
 import 'vue-select/dist/vue-select.css';
-import { Notify, Uuid } from 'pc-component-v3';
-
-export default {
-
-  components: {
-    TreeViewNode,
-    vSelect,
-  },
-  data: function () {
-    return {
-      isInput: true,
-      companyName: ' ',
-      clientId: null,
-      clientName: '',
-      selectedClient: undefined, // 选择的公司
-      selectedOrganization: undefined,
-      organization: undefined,
-      clientFieldValue: {
-        displayValue: [],
-        fieldType: 'Key',
-        id: null,
-      },
-      parentOrganizationFieldValue: {
-        displayValue: [],
-        fieldType: 'Key',
-        id: null,
-      },
-      //clientAdditionHql: "id IN (SELECT client.id FROM com.leanwo.prodog.model.base.Organization WHERE id IN (:EnvOrganizationIdList))",
-      //parentOrganizationAdditionHql: "id IN (:EnvOrganizationIdList)",
-      clientAdditionHql: '',
-      parentOrganizationAdditionHql: '',
-      // 其是树形结构
-      clientOrganizations: [],
-      subClienIds: [],
-      // 用户清单
-      userList: [],
-      expandClientIds: [],        // 展开的公司节点id
-      expandOrganizationIds: [],  // 展开的部门节点id
-    };
-  },
-
-  mounted: function () {
-    this.getClientOrganization();
-  },
+import Common from '../common/Common.js';
+import { Notify } from 'pc-component-v3';
+import { ref, onMounted, getCurrentInstance } from 'vue';
+
+import {
+  columns,
+  create,
+  update,
+  getCompony,
+  getUsersByName,
+  loadOrganization,
+  deleteDepartment,
+  getAllOrganization,
+} from '../api/department/index';
+import { message } from 'ant-design-vue';
+
+const clientId = ref(''); //公司id
+const id = ref(''); //公司id
+const companies = ref([]); //所有公司
+const clientIdStr = ref(undefined);
+const userList = ref([]); // 用户清单
+const isCreate = ref(false); // 是否新建
+const dataSource = ref([]); // 表格部门
+const drawerTitle = ref(''); //抽屉标题
+const organization = ref({}); // 部门详情
+const editVisible = ref(false); // 抽屉开关
+// const clientAdditionHql = ref({});
+const clientNameStr = ref('');
+const { proxy } = getCurrentInstance(); //访问this
+const parentOrganizationAdditionHql = ref('');
+const parentOrganizationFieldValue = ref({
+  displayValue: [],
+  fieldType: 'Key',
+  id: null,
+});
+const clientFieldValue = ref({
+  displayValue: [],
+  fieldType: 'Key',
+  id: null,
+});
+onMounted(() => {
+  getCompony().then(
+    success => {
+      if (success.errorCode == 0) {
+        companies.value = success.datas;
+      } else {
+        message.error(success.errorMessage);
+      }
+    },
+    err => {
+      Common.processException(err);
+    },
+  );
+});
+
+// 获取所选公司id 名字
+const getClientId = (value, client) => {
+  id.value = value;
+  clientId.value = value;
+  clientNameStr.value = client.label;
+  getOrganization();
+};
 
-  methods: {
-    createOrganization: function () {
-      var _self = this;
-      this.organization = {};
-      (this.clientFieldValue = {
-        displayValue: [],
-        fieldType: 'Key',
-        id: null,
-      }),
-      (this.parentOrganizationFieldValue = {
-        displayValue: [],
-        fieldType: 'Key',
-        id: null,
-      });
+// 新建部门
+const createOrganization = () => {
+  console.log(clientNameStr.value, '6666');
+  organization.value = {};
+  organization.value.clientName = clientNameStr.value;
+  organization.value.clientName = clientNameStr.value;
+  (clientFieldValue.value = {
+    displayValue: [],
+    fieldType: 'Key',
+    id: null,
+  }),
+  (parentOrganizationFieldValue.value = {
+    displayValue: [],
+    fieldType: 'Key',
+    id: null,
+  });
+  parentOrganizationAdditionHql.value = '';
+};
 
-      // 新建的时候取消已经勾选的单位或部门
-      if (this.selectedClient != undefined) {
-        this.selectedClient.selected = false;
-      }
-      if (this.selectedOrganization != undefined) {
-        this.selectedOrganization.selected = false;
+// 创建按钮
+const createNew = organization => {
+  organization.parentName = parentOrganizationFieldValue.value.displayValue[0];
+  organization.clientId = id.value;
+  create(organization).then(
+    success => {
+      if (success.errorCode == 0) {
+        message.success('新建部门成功');
+        getOrganization();
+        editVisible.value = false;
+      } else {
+        message.error(success.errorMessage);
       }
-
-      this.parentOrganizationAdditionHql = '';
     },
+    err => {
+      Common.processException(err);
+    },
+  );
+};
 
-    saveOrUpdate: function () {
-      var _self = this;
-      if (
-        _self.organization.clientId == undefined ||
-                _self.organization.clientId == '' ||
-                _self.organization.name == undefined ||
-                _self.organization.name == '' ||
-                _self.organization.no == undefined ||
-                _self.organization.no == ''
-      ) {
-        Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.OrganizationEditPanel.describe5'), true);
-        return;
+// 获取所有部门
+const getOrganization = () => {
+  dataSource.value = [];
+  const datas = [];
+  const id = clientId.value;
+  getAllOrganization(id).then(
+    success => {
+      if (success.errorCode == 0) {
+        success.datas.forEach(item => {
+          datas.push(item.childrenOrganizations);
+        });
+        traversalTree(datas.flat(1), dataSource.value);
       }
+      // loadAllSubClients();
+    },
+    err => {
+      Common.processException(err);
+    },
+  );
+};
 
-      $.ajax({
-        url: Common.getApiURL('organizationResource/saveOrUpdate'),
-        type: 'post',
-        beforeSend: function (request) {
-          Common.addTokenToRequest(request);
-        },
-        data: JSON.stringify(_self.organization),
-        contentType: 'application/json; charset=utf-8',
-        processData: false,
-        success: function (data) {
-          Notify.success(_self.$t('lang.Notify.success'), _self.$t('lang.OrganizationEditPanel.describe6'), true);
-          _self.organization = {};
+// 编辑部门
+const editOrganization = (flag, id) => {
+  if (flag) {
+    if (clientNameStr.value !== '') {
+      editVisible.value = true;
+      drawerTitle.value = '新建部门';
+      createOrganization();
+      fetchUserList();
+      isCreate.value = true;
+    } else {
+      message.warning('请选择公司');
+    }
+  } else {
+    editVisible.value = true;
+    drawerTitle.value = '编辑部门';
+    loadOrganization(id).then(
+      success => {
+        if (success.errorCode == 0) {
+          organization.value = success.data;
+          parentOrganizationFieldValue.value = {
+            displayValue: [success.data.parentName],
+            fieldType: 'Key',
+            id: success.data.parentId,
+          };
+          clientFieldValue.value = {
+            displayValue: [success.data.clientName],
+            fieldType: 'Key',
+            id: success.data.clientId,
+          };
+          fetchUserList();
+        } else {
+          message.error(success.errorMessage);
+        }
+      },
+      err => {
+        Common.processException(err);
+      },
+      (isCreate.value = false),
+    );
+  }
+};
 
-          _self.organization.clientId = _self.clientFieldValue.id;
-          _self.parentOrganizationFieldValue = {
+//保存事件
+const updateOrganization = () => {
+  const organizationValue = JSON.parse(JSON.stringify(organization.value));
+  const { clientId, name, no } = organizationValue;
+  if (
+    clientId == undefined ||
+    clientId == '' ||
+    name == undefined ||
+    name == '' ||
+    no == undefined ||
+    no == ''
+  ) {
+    Notify.error(
+      proxy.$t('lang.Notify.error'),
+      proxy.$t('lang.OrganizationEditPanel.describe5'),
+      true,
+    );
+    return;
+  }
+  update(organizationValue).then(
+    success => {
+      if (success.errorCode == 0) {
+        if (success.data) {
+          Notify.success(
+            proxy.$t('lang.Notify.success'),
+            proxy.$t('lang.OrganizationEditPanel.describe6'),
+            true,
+          );
+          organization.value = {};
+
+          organization.value.clientId = clientFieldValue.value.id;
+          parentOrganizationFieldValue.value = {
             displayValue: [],
             fieldType: 'Key',
             id: null,
           };
-
-          if(data.parentId != null){
-            _self.expandOrganizationIds.push(data.parentId);
-          }
-                    
-          _self.expandOrganizationIds.push(data.id);
-
-          _self.refresh();
-        },
-        error: function (XMLHttpRequest, textStatus, errorThrown) {
-          Common.processException(XMLHttpRequest, textStatus, errorThrown);
-        },
-      });
+          getOrganization();
+        }
+      } else {
+        message.error(success.errorMessage);
+      }
+      editVisible.value = false;
     },
+    err => {
+      Common.processException(err);
+    },
+  );
+};
 
-    deleteOrganization: function () {
-      var _self = this;
-      if (_self.organization == undefined) {
-        Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.OrganizationEditPanel.describe4'), true);
+// 删除部门
+const deleteOrganization = id => {
+  loadOrganization(id).then(
+    success => {
+      const organization = success.data;
+      if (organization == undefined) {
+        Notify.error(
+          proxy.$t('lang.Notify.error'),
+          proxy.$t('lang.OrganizationEditPanel.describe4'),
+          true,
+        );
         return;
       }
-      $.ajax({
-        url: Common.getApiURL('organizationResource/delete'),
-        type: 'post',
-        beforeSend: function (request) {
-          Common.addTokenToRequest(request);
-        },
-        data: JSON.stringify(_self.organization),
-        contentType: 'application/json; charset=utf-8',
-        processData: false,
-        success: function (data) {
-          Notify.success(_self.$t('lang.Notify.success'), _self.$t('lang.OrganizationEditPanel.describe3'), true);
-          _self.organization = undefined;
-          _self.refresh();
+      const params = {
+        id: organization.id,
+        no: organization.no,
+        name: organization.name,
+      };
+      deleteDepartment(params).then(
+        success => {
+          if (success.errorCode == 0) {
+            Notify.success(
+              proxy.$t('lang.Notify.success'),
+              proxy.$t('lang.OrganizationEditPanel.describe3'),
+              true,
+            );
+            organization.value = undefined;
+            getOrganization();
+          }else{
+            message.error(success.errorMessage);
+          }
         },
-        error: function (XMLHttpRequest, textStatus, errorThrown) {
-          Common.processException(XMLHttpRequest, textStatus, errorThrown);
+        err => {
+          Common.processException(err);
         },
-      });
-    },
-
-    /**
-         * 刷新
-         */
-    refresh: function () {
-      this.getClientOrganization();
+      );
     },
-
-    /**
-         * 单位发生修改
-         */
-    clientValueChanged: function (newFieldValue) {
-      var _self = this;
-      _self.clientFieldValue = newFieldValue;
-      _self.organization.clientId = newFieldValue.id;
-
-      // 添加部门约束
-      _self.parentOrganizationAdditionHql = ' client.id = ' + newFieldValue.id;
+    err => {
+      Common.processException(err);
     },
+  );
+};
 
-    /**
-     * 上级部门发生修改
-     */
-    parentOrganizationValueChanged: function (newFieldValue) {
-      var _self = this;
-      _self.parentOrganizationFieldValue = newFieldValue;
-      _self.organization.parentId = newFieldValue.id;
+// 部门管理员输入的过滤条件发生改变
+const fetchUserList = (search, loading) => {
+  if (loading != null) {
+    loading(true);
+  }
+  let searchQueryParam = {
+    conditional: search,
+    range: {
+      start: 0,
+      length: 100,
     },
-
-    // 节点打开事件
-    nodeExpand: function (node) {
-      var _self = this;
-      console.log(node);
-      if (node.open === true) {
-        if (node.isClient) {
-          _self.expandClientIds.push(node.id);
-        } else {
-          _self.expandOrganizationIds.push(node.id);
-        }
-      } else {
-        if (node.isClient) {
-          let index = _self.expandClientIds.indexOf(node.id);
-          if(index >= 0){
-            _self.expandClientIds.splice(index, 1);
-          }
-        } else {
-          let index = _self.expandOrganizationIds.indexOf(node.id);
-          if(index >= 0){
-            _self.expandOrganizationIds.splice(index, 1);
-          }
-        }
+  };
+  getUsersByName(searchQueryParam).then(
+    successData => {
+      if (loading != null) {
+        loading(false);
       }
-
+      userList.value = successData.resultList;
     },
-
-    // 节点选择事件
-    nodeSelect: function (node) {
-      var _self = this;
-
-      var nodeSelectStatus = node.selected;
-
-      if (_self.selectedClient != undefined) {
-        _self.selectedClient.selected = false;
-      }
-
-      if (_self.selectedOrganization != undefined) {
-        _self.selectedOrganization.selected = false;
-      }
-
-      // 如果选择的是单位
-      if (node.isClient == true) {
-        console.log(node);
-        _self.selectedClient = node;
-        _self.selectedOrganization = undefined;
-        _self.organization = undefined;
-        _self.parentOrganizationFieldValue = undefined;
-        _self.clientFieldValue = undefined;
-      } else {
-        // 如果选择的是部门
-        _self.selectedClient = undefined;
-        _self.organization = undefined;
-        _self.parentOrganizationFieldValue = undefined;
-        _self.clientFieldValue = undefined;
-        _self.selectedOrganization = node;
-        _self.loadOrganization(node.id);
-
+    errorData => {
+      if (loading != null) {
+        loading(false);
       }
 
-      node.selected = !nodeSelectStatus;
-
-
+      Common.processException(errorData);
     },
+  );
+};
+// 公司change事件
+const clientValueChanged = newFieldValue => {
+  clientFieldValue.value = newFieldValue;
+  organization.value.clientId = newFieldValue.id;
+  parentOrganizationAdditionHql.value = ' client.id = ' + newFieldValue.id; // 添加部门约束
+};
 
-    // 获取单位部门
-    getClientOrganization: function () {
-      var _self = this;
-      $.ajax({
-        type: 'get',
-        dataType: 'json',
-        url: Common.getApiURL('organizationResource/findByClientId'),
-        beforeSend: function (request) {
-          Common.addTokenToRequest(request);
-        },
-        success: function (data) {
-          // console.log(data);
-          if(data.errorCode != 0){
-            Notify.error(_self.$t('lang.OrganizationEditPanel.describe2'), data.errorCode, false);
-            return;
-          }
-          function setOpen(node) {
-            node.open = false;
-            node.selected = false;
-            node.isShowCheck = true;
-            node.text = node.no + ' ' + node.name;
-            if (node.isClient) {
-              if (_self.expandClientIds.indexOf(node.id) >= 0) {
-                node.open = true;
-              };
-            } else {
-              if (_self.expandOrganizationIds.indexOf(node.id) >= 0) {
-                node.open = true;
-              };
-            }
-            if (
-              node.childrenDatas != undefined &&
-                            node.childrenDatas.length > 0
-            ) {
-              node.childrenDatas.forEach(function (item) {
-                setOpen(item);
-              });
-            }
-          }
-          data.datas.forEach(function (item) {
-            setOpen(item);
-          });
-          _self.clientOrganizations = data.datas;
-          // 查询所有子部门
-          _self.loadSubClients();
-        },
-        error: function (XMLHttpRequest, textStatus, errorThrown) {
-          Common.processException(XMLHttpRequest, textStatus, errorThrown);
-        },
-      });
-    },
-
-    // 从服务器加载Organization
-    loadOrganization: function (id) {
-      var _self = this;
-      $.ajax({
-        url: Common.getApiURL('organizationResource/unique') +
-                    '?organizationId=' +
-                    id,
-        type: 'get',
-        beforeSend: function (request) {
-          Common.addTokenToRequest(request);
-        },
-        processData: false,
-        success: function (data) {
-          _self.organization = data;
-          _self.parentOrganizationFieldValue = {
-            displayValue: [data.parentName],
-            fieldType: 'Key',
-            id: data.parentId,
-          };
-          _self.clientFieldValue = {
-            displayValue: [data.clientName],
-            fieldType: 'Key',
-            id: data.clientId,
-          };
-
+// 上级部门change事件
+const parentOrganizationValueChanged = newFieldValue => {
+  console.log(newFieldValue, '555555555555555555');
+  parentOrganizationFieldValue.value = newFieldValue;
+  organization.value.parentId = newFieldValue.id;
+  organization.value.parentName = newFieldValue.displayValue[0];
+};
 
-          //_self.userList.splice(0, _self.userList.length);
-          _self.fetchUserList();
-          // 添加到下拉菜单中
-          // if(_self.organization != null && _self.organization.managerUsers != null){
-          //     _self.organization.managerUsers.forEach(item => {
-          //         _self.$set(_self.userList, _self.userList.length, item);
-          //     });                    
-          // }
-        },
-        error: function (XMLHttpRequest, textStatus, errorThrown) {
-          Common.processException(XMLHttpRequest, textStatus, errorThrown);
-        },
-      });
-    },
+// 递归将childrenOrganizations赋值给children
+const traversalTree = (array, target) => {
+  array.map((item, index) => {
+    target.push({
+      id: item.id,
+      no: item.no,
+      key: item.id,
+      children: [],
+      type: item.type,
+      name: item.name,
+      description: item.description,
+    });
+    if (
+      item.childrenOrganizations !== null &&
+      item.childrenOrganizations.length !== 0
+    ) {
+      traversalTree(item.childrenOrganizations, target[index].children);
+    } else {
+      delete target[index].children;
+    }
+  });
+};
 
-    loadSubClients: function () {
-      var _self = this;
-      var rootClientId = null;
-      for (let index = 0; index < _self.clientOrganizations.length; index++) {
-        var clientOrganization = _self.clientOrganizations[index];
-        if (clientOrganization.childrenDatas == null) {
-          rootClientId = clientOrganization.id;
-        }
-      }
-      $.ajax({
-        url: Common.getApiURL('ClientResource/getSubClientIds'),
-        type: 'get',
-        beforeSend: function (request) {
-          Common.addTokenToRequest(request);
-        },
-        data: {
-          rootClientId: rootClientId,
-        },
-        success: function (data) {
-          if (data) {
-            data.push(rootClientId);
-            _self.subClienIds = data;
-            _self.clientAdditionHql = ' ct.id in (' + data.join(',') + ')';
-          } else {
-            // buy find by jack
-            _self.clientAdditionHql = {
-              customerDataDimensions:[{
+// 获取所有子部门
+/** 
+const loadAllSubClients = () => {
+  var rootClientId = null;
+  for (let i = 0; i < dataSource.value.length; i++) {
+    var clientOrganization = dataSource.value[i];
+    if (clientOrganization.children == null) {
+      rootClientId = clientOrganization.key;
+    }
+  }
+  loadSubClients(rootClientId).then(
+    success => {
+      if (success.errorCode == 0) {
+        if (success.datas) {
+          clientAdditionHql.value = ' ct.id in (' + success.join(',') + ')';
+        } else {
+          clientAdditionHql.value = {
+            customerDataDimensions: [
+              {
                 fieldName: 'ct.id',
                 dataDimensionTypeNo: '202201191757',
                 defaultDataDimensionTypeValueNo: '1',
-              }],
-            };
-            // 'id IN (SELECT client.id FROM com.leanwo.prodog.model.base.Organization WHERE id IN (:EnvOrganizationIdList))';
-            _self.parentOrganizationAdditionHql = {
-              customerDataDimensions:[{
+              },
+            ],
+          };
+          parentOrganizationAdditionHql.value = {
+            customerDataDimensions: [
+              {
                 fieldName: 'organization.id',
                 dataDimensionTypeNo: '202201191700',
                 defaultDataDimensionTypeValueNo: '1',
-              }],
-            };
-          }
-        },
-        error: function (XMLHttpRequest, textStatus, errorThrown) {
-          Common.processException(XMLHttpRequest, textStatus, errorThrown);
-        },
-      });
-    },
-    /**
-         * 修改公司
-         */
-    updateCompany: function () {
-      var _self = this;
-      if (
-        _self.selectedClient != null &&
-                _self.companyName != null &&
-                _self.companyName.length != 0
-      ) {
-        _self.selectedClient.name = _self.companyName;
+              },
+            ],
+          };
+        }
       } else {
-        Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.OrganizationEditPanel.describe1'));
-        return;
+        message.error(success.errorMessage);
       }
-      OrganizationResource.update(_self.selectedClient).then(
-        successData => {
-          _self.isInput = true;
-          _self.refresh();
-          Notify.success(_self.$t('lang.Notify.prompt'), successData.message);
-        },
-        errorData => { },
-      );
     },
-    /**
-         * 编辑/取消编辑
-         */
-    edit: function () {
-      var _self = this;
-      if (_self.isInput) {
-        _self.companyName = _self.selectedClient.name;
-      } else {
-        _self.companyName = null;
-      }
-      _self.isInput = !_self.isInput;
+    err => {
+      Common.processException(err);
     },
-
-    /**
-         * 输入的过滤条件发生改变
-         * Triggered when the search text changes.
-        *
-        * @param search  {String}    Current search text
-        * @param loading {Function}	Toggle loading class
-         */
-    fetchUserList: function (search, loading) {
-      let _self = this;
-      if (loading != null) {
-        loading(true);
-      }
-
-      let searchQueryParam = {
-        conditional: search,
-        range: {
-          start: 0,
-          length: 100,
-        },
-      };
-
-      UserResource.getUsersByName(searchQueryParam).then(successData => {
-        if (loading != null) {
-          loading(false);
-        }
-
-        _self.userList = successData.resultList;
-      }, errorData => {
-        if (loading != null) {
-          loading(false);
-        }
-
-        Common.processException(errorData);
-      });
-    },
-  },
-};
+  );
+};*/
 </script>
 
 <style scoped>
-.grid-container {
-    margin-top: 10px;
-    display: grid;
-    grid-template-columns: 400px auto;
-    grid-template-rows: 35px auto;
-    gap: 10px;
-    justify-items: stretch;
-    align-items: stretch;
-    height: calc(100vh - 170px);
-    overflow: auto;
-}
-
-.grid-item-row1-column1 {
-    grid-row-start: 1;
-    grid-row-end: 2;
-    grid-column-start: 1;
-    grid-column-end: 3;
-}
-
-.grid-item-row2-column1 {
-    grid-row-start: 2;
-    grid-row-end: 3;
-    grid-column-start: 1;
-    grid-column-end: 2;
-    overflow: auto;
-    border: 1px solid #e1e1e8;
-    padding: 0px 10px 0px 10px;
-}
-
-.grid-item-row2-column2 {
-    grid-row-start: 2;
-    grid-row-end: 3;
-    grid-column-start: 2;
-    grid-column-end: 3;
-    overflow: auto;
+.editable-row-operations a {
+  margin-right: 8px;
 }
-</style>
+</style>

src/client/TopNavigation.vue

@@ -100,7 +100,9 @@ export default {
 </script>
 
 <style scoped>
+@media (max-width: 768px) {
 .navBack{
   z-index: 9999999;
 }
+}
 </style>

src/common/X6.js

@@ -66,15 +66,13 @@ export default function CreateJPEG(dom) {
         graph.toJPEG(dataUri => {
           // dataUri就是base64的图片地址
           res(dataUri);
-          DataUri.downloadDataUri(dataUri, assetNo);
+          // DataUri.downloadDataUri(dataUri, assetNo);
         }, {
           serializeImages: true,
           quality: 1,
         });
       }, 500);
     });
-
-
   };
 }
 export const base64toFile = (url, imageName) => {
@@ -90,23 +88,4 @@ export const base64toFile = (url, imageName) => {
   return new File([u8arr], `${imageName}.${suffix}`, {
     type: 'image/jpeg',
   });
-};
-
-export const downloadImages = (imageUrl, name) => {
-  const image = new Image();
-  image.setAttribute('crossOrigin', 'anonymous');
-  image.onload = function () {
-    const canvas = document.createElement('canvas');
-    canvas.width = image.width;
-    canvas.height = image.height;
-    const context = canvas.getContext('2d');
-    context.drawImage(image, 0, 0, image.width, image.height);
-    const url = canvas.toDataURL('image/png');
-    const a = document.createElement('a');
-    const event = new MouseEvent('click');
-    a.download = name;
-    a.href = url;
-    a.dispatchEvent(event);
-  };
-  image.src = imageUrl;
 };

src/customer/DataImportPanel.vue

@@ -89,23 +89,23 @@
                 <button
                   type="button"
                   class="btn btn-primary btn-primary-1"
-                  @click="runProcessClear(selectedDataTemplateNo)"
+                  @click="testImportButton(true)"
                 >
-                  1.{{ $t("lang.DataImportPanel.emptyImport") }}
+                  1.{{ $t("lang.DataImportPanel.testImport") }}
                 </button>
                 <button
                   type="button"
                   class="btn btn-primary btn-primary-1 btn-primary-import"
-                  @click="testImportButton(true)"
+                  @click="runProcessImport(selectedDataTemplateNo)"
                 >
-                  2.{{ $t("lang.DataImportPanel.testImport") }}
+                  2.{{ $t("lang.DataImportPanel.formalImport") }}
                 </button>
                 <button
                   type="button"
                   class="btn btn-primary btn-primary-1 btn-primary-import"
-                  @click="runProcessImport(selectedDataTemplateNo)"
+                  @click="runProcessClear(selectedDataTemplateNo,false)"
                 >
-                  3.{{ $t("lang.DataImportPanel.formalImport") }}
+                  3.{{ $t("lang.DataImportPanel.emptyImport") }}
                 </button>
                 <button
                   v-if="taskId != null && taskId.length > 0"
@@ -253,6 +253,9 @@ export default {
       } else{
         this.current++;
       }
+      if(this.current == 2){
+        this.runProcessClear(this.selectedDataTemplateNo,true);
+      }
     },
     prev() {
       this.current--;
@@ -693,7 +696,7 @@ export default {
     /**
      * 运行清空流程
      */
-    runProcessClear: function (selectedDataTemplateNo) {
+    runProcessClear: function (selectedDataTemplateNo,flag) {
       var _self = this;
       var no = selectedDataTemplateNo;
       _self.loading = true;
@@ -707,12 +710,17 @@ export default {
         },
         success: function (data) {
           _self.loading = false;
-          Notify.success(
-            _self.$t('lang.DataImportPanel.describe9'),
-            data.processResult.result,
-            false,
-          );
-          return;
+          if(flag) {
+            message.success(_self.$t('lang.DataImportPanel.describe9')+'!'+ data.processResult.result);
+          } else {
+            message.success(_self.$t('lang.DataImportPanel.describe9')+'!'+ data.processResult.result,10);
+          }
+          // Notify.success(
+          //   _self.$t('lang.DataImportPanel.describe9'),
+          //   data.processResult.result,
+          //   false,
+          // );
+          // return;
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
           _self.loading = false;

src/customer/printTemp/index.vue

@@ -1,9 +1,5 @@
 <template>
-  <a-page-header
-    title="打印模板编辑"
-    @back="goBack"
-  />
-  <a-divider />
+  <Navbar title="模板编辑" :is-go-back="true" />
   <a-steps :current="step">
     <a-step title="选择模版" />
     <a-step title="编辑模版" />
@@ -29,14 +25,9 @@ import CreateJPEG from '../../common/X6.js';
 const router =  useRouter();
 const store = useStore();
 const step = computed(()=>store.state.downloadStore.step);
-
-
-const goBack = () =>{
-  router.go(-1);
-};
-
-onMounted(() =>{
-  console.log(CreateJPEG);
+onMounted(() => {
+  store.commit('changeStep',0);
 });
+
 </script>
 <style scoped></style>

src/customer/printTemp/step1.vue

@@ -70,7 +70,7 @@ const delVisible = ref(false);
 // const visible = ref(false);
 
 const handleChange = (_,val) =>{
-  console.log(val);
+  // console.log(val);
   store.commit('changeTempText',val.value);
   store.commit('changeTemplate',val.x6);
   store.commit('changeTemplateId',val.key);
@@ -79,7 +79,7 @@ const handleChange = (_,val) =>{
 };
 
 const delChange = (_,val) =>{
-  console.log(val);
+  // console.log(val);
   tempId.value = val.key;
 };
 const getTem = () =>{
@@ -95,15 +95,14 @@ const next = () =>{
   if (value.value == 'a') {
     store.commit('changeTemplateId','');
     store.commit('changeTemplate','');
-    store.commit('changeTempText','新建模版');
-    
+    store.commit('changeTempText','新建模板');
   }
   if ((value.value == 'b' && temVal.value == undefined || null) || value.value == 'c') {
     Modal.info({
       title: '提示',
       content: h('div', {}, [h('p', '请先选择模版或新建模板！')]),
       onOk() {
-        console.log('ok');
+        // console.log('ok');
       },
     });
     return;
@@ -132,7 +131,7 @@ const delOk = () =>{
         title: '提示',
         content: h('div', {}, [h('p', '删除成功！')]),
         onOk() {
-          console.log('ok');
+          // console.log('ok');
           delTemVal.value = undefined;
           temVal.value = undefined;
           getTemp();
@@ -160,14 +159,14 @@ const getTemp = () =>{
       loadingshow.value = false;
       if (errorCode == 0) {
         TempList.value = datas;
-        console.log(datas);
+        // console.log(datas);
       }else{
         TempList.value = [];
         Modal.info({
           title: '提示',
           content: h('div', {}, [h('p', '没有基础模版，请新建模版数据！')]),
           onOk() {
-            console.log('ok');
+            // console.log('ok');
             delTemVal.value = undefined;
             temVal.value = undefined;
             TempList.value = [];

src/dashboard/Dashboard.vue

@@ -3,33 +3,25 @@
     <template v-for="(item, index) in dashboardArray" :key="item.no">
       <component
         :is="item.componentName == undefined ? '' : item.componentName"
-        :dashboard="item" @collapse="collapse($event)" @remove="remove(index)"
+        :dashboard="item"
+        @collapse="collapse($event)"
+        @remove="remove(index)"
       />
     </template>
   </div>
 </template>
 
 <script>
-
 import { defineComponent } from 'vue';
 
-
-
 import Common from '../common/Common.js';
-
-
-import { CssUtil } from 'pc-component-v3';
-import { JsUtil } from 'pc-component-v3';
-
-
+import { CssUtil,Notify } from 'pc-component-v3';
+import JsUtil from '../common/JsUtil';
 
 export default defineComponent({
-	
   name: 'DashboardPage',
-	
-  components: {
-    
-  },
+
+  components: {},
   data() {
     return {
       dashboardArray: [],
@@ -37,12 +29,12 @@ export default defineComponent({
     };
   },
 
-  mounted: function() {
+  mounted: function () {
     this.loadData();
   },
 
-  beforeUnmount: function(){
-    if(this.dashboardArray != null && this.dashboardArray.length > 0){
+  beforeUnmount: function () {
+    if (this.dashboardArray != null && this.dashboardArray.length > 0) {
       this.dashboardArray.forEach(item => {
         CssUtil.dynamicUnloadCss(item.componentName);
       });
@@ -50,99 +42,102 @@ export default defineComponent({
   },
 
   methods: {
-
     loadData() {
       var _self = this;
       $.ajax({
         url: Common.getApiURL('dashboardResource/listDashBoard'),
         type: 'get',
         dataType: 'json',
-        beforeSend: function(request) {
+        beforeSend: function (request) {
           Common.addTokenToRequest(request);
         },
-        success: function(data) {
+        success: function (data) {
           _self.dynamicInit(data);
         },
-        error: function(XMLHttpRequest, textStatus, errorThrown) {
+        error: function (XMLHttpRequest, textStatus, errorThrown) {
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
     },
 
-    collapse: function(params) {
+    collapse: function (params) {
       var contentElement = params[0];
       contentElement.slideToggle();
     },
 
-    remove: function(index) {
+    remove: function (index) {
       var _self = this;
       _self.dashboardArray.splice(index, 1);
     },
 
     /**
-		 * 动态初始化仪表盘
-		 */
-    dynamicInit: function(dashboards) {
+     * 动态初始化仪表盘
+     */
+    dynamicInit: function (dashboards) {
       let _self = this;
 
-      if(dashboards != null && dashboards.length > 0) {
-        dashboards.forEach(function(item) {
+      if (dashboards != null && dashboards.length > 0) {
+        dashboards.forEach(function (item) {
           console.log(item);
           // const jsUrl = '' + '/DictionaryBase/Dashboard/BASE/2020080401.js';
           //const jsUrl = '/DictionaryAsset/Dashboard/EAM/20220309_095250.js';
           const componentName = item.componentName;
 
-          if(item.cssUrl != null && item.cssUrl != undefined) {
+          if (item.cssUrl != null && item.cssUrl != undefined) {
             CssUtil.dynamicLoadCss(item.cssUrl, componentName);
           }
 
           let jsUrl = null;
-          if(item.jsUrl != null && item.jsUrl != undefined) {
+          if (item.jsUrl != null && item.jsUrl != undefined) {
             jsUrl = item.jsUrl;
             let promise = JsUtil.dynamicLoadJsModule(jsUrl);
-            promise.then(remoteComponent => {
-              console.log('remoteComponent：' + remoteComponent.default.name);
-              if(componentName !== remoteComponent.default.name){
-                let errorMessage = '数据字典-仪表盘中部件名称定义的是' + componentName + '，但是程序中name定义的是' + remoteComponent.default.name + '，两者必须相同。';
-                console.error(errorMessage);
-                Notify.error('仪表盘定义错误', errorMessage, false);
-              }
-
-
-              window.app.component(componentName, remoteComponent.default);
-              var item1 = {
-                no: componentName,
-                componentName: componentName,
-              };
-              
-              console.log(_self.dashboardArray);
-              _self.dashboardArray.push(item1);
-            }, errorData => {
-              console.error(errorData);
-            });
+            promise.then(
+              remoteComponent => {
+                console.log('remoteComponent：' + remoteComponent.default.name);
+                if (componentName !== remoteComponent.default.name) {
+                  let errorMessage =
+                    '数据字典-仪表盘中部件名称定义的是' +
+                    componentName +
+                    '，但是程序中name定义的是' +
+                    remoteComponent.default.name +
+                    '，两者必须相同。';
+                  console.error(errorMessage);
+                  Notify.error('仪表盘定义错误', errorMessage, false);
+                }
+
+                window.app.component(componentName, remoteComponent.default);
+                var item1 = {
+                  no: componentName,
+                  componentName: componentName,
+                };
+
+                console.log(_self.dashboardArray);
+                _self.dashboardArray.push(item1);
+              },
+              errorData => {
+                console.error(errorData);
+              },
+            );
           }
         });
       }
     },
-
   },
 });
-
 </script>
 
 <style scoped>
-	
-ul.dropdown-menu>li {
-	padding-left: 1em;
+ul.dropdown-menu > li {
+  padding-left: 1em;
 }
 
-ul.dropdown-menu>li:hover {
-	background-color: gray;
-	cursor: pointer;
-	color: white;
+ul.dropdown-menu > li:hover {
+  background-color: gray;
+  cursor: pointer;
+  color: white;
 }
 
 div.dropdown {
-	margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 </style>

src/index.js

@@ -66,6 +66,8 @@ import ReportApprove from './workflow/ReportApprove.vue';
 import ExcelReport from './client/ExcelReport.vue';
 import DateExcelReport from './client/DateExcelReport.vue';
 import DelegationReport from './client/DelegationReport.vue';
+import PrintTemp from '../src/customer/printTemp/index.vue';
+import PrintCard from '../src/print/PrintCard.vue';
 
 
 
@@ -125,4 +127,6 @@ export {
   ExcelReport,
   DateExcelReport,
   DelegationReport,
+  PrintTemp,
+  PrintCard,
 };

src/print/CommonTable.vue

@@ -9,7 +9,7 @@
         :loading="isLoading"
         :data-source="dataSource"
         :columns="columns"
-        :scroll="{ y: 360 }"
+        :scroll="{ y: 350 }"
         :pagination="pagination"
         :row-key="(record) => record.id"
         :row-selection="
@@ -152,7 +152,12 @@ const clear = () => {
   state.selectedRows = [];
   emit('selectColumn', state.selectedRows);
 };
-defineExpose({ clear });
+// 回到第一页
+const backFirstPage = () => {
+  pagination.current = 1;
+  emit('pageParams', pagination.current,pagination.pageSize);
+};
+defineExpose({ clear,backFirstPage });
 
 // 监听total变化
 watch(

src/print/PrintCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-show="printing">
-      <Navbar title="卡片打印" :is-go-back="true" />
+      <Navbar title="标签打印" :is-go-back="true" />
       <div class="printDiv">
         <div>
           <span style="color: red"> * </span>
@@ -11,7 +11,7 @@
             show-search
             class="commonStyle"
             :options="batchNos.map((item) => ({ value: item.label }))"
-            @change="searchPrintInfo"
+            @change="batchNoChange"
           />
           <label>保管人员：</label>
           <a-select
@@ -19,20 +19,20 @@
             show-search
             class="commonStyle"
             :options="depositoryUsers.map((item) => ({ value: item.label }))"
-            @change="searchPrintInfo"
+            @change="searchDatas"
           />
           <label>打印状态：</label>
           <a-select
-            v-model:value="status"
+            v-model:value="queryParams.labelPrintType"
             show-search
             class="commonStyle"
             :options="
               statusOptions.map((item) => ({
-                value: `${item.value}-${item.label}`,
+                value: item.value,
                 label: item.label,
               }))
             "
-            @change="searchPrintInfo"
+            @change="searchDatas"
           />
         </div>
         <div style="margin: 8px 0 0 9px">
@@ -42,7 +42,7 @@
             show-search
             class="commonStyle"
             :options="clientNames.map((item) => ({ value: item.label }))"
-            @change="searchPrintInfo"
+            @change="searchDatas"
           />
           <label>所属部门：</label>
           <a-select
@@ -50,7 +50,7 @@
             show-search
             class="commonStyle"
             :options="organizationNames.map((item) => ({ value: item.label }))"
-            @change="searchPrintInfo"
+            @change="searchDatas"
           />
           <label>成本中心：</label>
           <a-select
@@ -58,11 +58,12 @@
             show-search
             class="commonStyle"
             :options="costCenterNames.map((item) => ({ value: item.label }))"
-            @change="searchPrintInfo"
+            @change="searchDatas"
           />
-          <a-button type="primary" @click="searchPrintInfo">查询</a-button>
+          <a-button type="primary" @click="searchDatas">查询</a-button>
         </div>
-        <div style="margin: 8px 0 0 9px">
+        <div style="margin-top: 8px">
+          <span style="color: red"> * </span>
           <label>打印模板：</label>
           <a-select
             v-model:value="printTemplate"
@@ -81,7 +82,7 @@
             style="margin-right: 16px"
             @click="printPreview"
           >
-            打印预览
+            效果预览
           </a-button>
           <a-button
             type="dashed"
@@ -90,11 +91,16 @@
           >
             打印
           </a-button>
-          <a-button type="dashed" @click="downloadImage"> 下载全部 </a-button>
+          <a-button type="dashed" style="margin-right: 16px" @click="printAll">
+            打印全部
+          </a-button>
+          <a-button type="dashed" @click="downloadImageZip">
+            下载全部
+          </a-button>
         </div>
         <a-divider />
         <CommonTable
-          ref="tables"
+          ref="table"
           :total="total"
           :columns="columns"
           :is-loading="isLoading"
@@ -118,7 +124,11 @@
           title="包装信息"
           ok-text="确认"
           cancel-text="取消"
-          @ok="printCard"
+          @ok="
+            all === false
+              ? printCard(select.selectedRows)
+              : printCard(select.allData)
+          "
         >
           <label>包装批号：</label>
           <a-input
@@ -127,11 +137,7 @@
             :disabled="true"
           />
           <label>上次的批号：</label>
-          <a-input
-            id="displayName"
-            v-model:value="lastPackageBatchNo"
-            :disabled="true"
-          />
+          <a-input v-model:value="lastPackageBatchNo" :disabled="true" />
           <label>包装名称：</label>
           <a-input
             id="displayName"
@@ -139,11 +145,7 @@
             :disabled="true"
           />
           <label>上次的名称：</label>
-          <a-input
-            id="displayName"
-            v-model:value="lastPackageName"
-            :disabled="true"
-          />
+          <a-input v-model:value="lastPackageName" :disabled="true" />
           <div class="operationBtn">
             <a-button type="dashed" style="width: 240px" @click="lastTime">
               同上一次
@@ -159,76 +161,56 @@
         </a-modal>
         <a-modal
           v-model:visible="imageVisible"
-          title="打印预览"
-          ok-text="确认"
-          cancel-text="取消"
+          title="效果预览"
+          :mask-closable="false"
           :body-style="bodyStyle"
-          @ok="imageVisible = false"
         >
-          <a-image
-            :preview="{ visible: false }"
-            :width="200"
-            class="image"
-            :src="imageUrls[0]"
-            @click="visible = true"
-          />
-          <div style="display: none">
-            <a-image-preview-group
-              :preview="{ visible, onVisibleChange: (vis) => (visible = vis) }"
-            >
-              <a-image v-for="item in imageUrls" :key="item" :src="item" />
-            </a-image-preview-group>
-          </div>
+          <a-image :src="imageUrls[0]" />
           <template #footer />
         </a-modal>
-        <Loading v-if="globalLoading" />
+        <Loading v-if="globalLoading" :text="propText" />
       </div>
     </div>
     <div ref="hua" style="float: left; z-index: -999" />
-    <a-modal v-model:visible="modelVisible" title="正在打印中">
-      <p>正在打印中，请稍等....</p>
-      <template #footer />
-    </a-modal>
   </div>
 </template>
 
 <script setup>
-import AuthImage from '../widget/AuthImage.vue';
-import CommonTable from './CommonTable.vue';
 import Common from '../common/Common';
-import { message } from 'ant-design-vue';
-import { ref, reactive, onMounted, watch } from 'vue';
 import CreateJPEG from '../common/X6';
-import { base64toFile, downloadImages } from '../common/X6';
+import { message } from 'ant-design-vue';
+import { base64toFile } from '../common/X6';
+import CommonTable from './CommonTable.vue';
 import { SqlApi, Notify } from 'pc-component-v3';
 import { getImageSrc } from '../common/image-src';
-import Download from '../resource/file/DownloadService';
+import { ref, reactive, onMounted, watch } from 'vue';
 import {
   columns,
   dateConvert,
   multipleImageUpload,
   getTemplate,
+  downloadZip,
 } from './config';
 
 const className = ref('com.leanwo.prodog.print.model.LabelPrintLine');
-const tables = ref(null);
+const table = ref(null);
 const imageUrls = reactive([]);
-const modelVisible = ref(false);
 const printing = ref(true);
 const total = ref(0);
 const isSelect = ref(true);
 const isLoading = ref(false);
-const select = reactive({ selectedRows: [] });
+const select = reactive({ selectedRows: [], allData: [] });
 const dataSource = ref([]);
 const printVisible = ref(false);
 const imageVisible = ref(false);
 const visible = ref(false);
 const globalLoading = ref(false);
+const all = ref(false);
+const propText = ref('');
 const bodyStyle = {
   display: 'flex',
   justifyContent: 'center',
 };
-const status = ref('');
 const batchNos = ref([]);
 const clientNames = ref([]);
 const depositoryUsers = ref([]);
@@ -237,7 +219,7 @@ const organizationNames = ref([]);
 const statusOptions = ref([
   {
     value: '',
-    label: ' ',
+    label: '',
   },
   {
     value: 'To_Be_Printed',
@@ -276,6 +258,7 @@ const packageName = ref('');
 const lastPackageName = ref('');
 const newPackageName = ref('');
 const hua = ref(null);
+const clientId = ref('');
 let getBase64;
 // 获取分页
 const getPageParams = (start, length) => {
@@ -283,16 +266,29 @@ const getPageParams = (start, length) => {
   pager.length = length;
   searchPrintInfo();
 };
+// 批次号切换
+const batchNoChange = () => {
+  queryParams.clientName = '';
+  queryParams.depositoryUser = '';
+  queryParams.costCenterName = '';
+  queryParams.organizationName = '';
+  queryParams.labelPrintType = '';
+  commonSqlApi('20230613_192444', depositoryUsers); // 查询保管人
+  commonSqlApi('20230613_193808', clientNames); // 查询公司
+  commonSqlApi('20230613_194108', organizationNames); // 查询部门
+  commonSqlApi('20230613_194557', costCenterNames); // 查询成本中心
+  table.value.clear(); // 清空选择
+  table.value.backFirstPage(); // 回到第一页
+};
+// 查询回到第一页
+const searchDatas = () => {
+  table.value.backFirstPage();
+};
 // 查询信息
 const searchPrintInfo = () => {
   isLoading.value = true;
-  if (status.value !== undefined) {
-    queryParams.labelPrintType = status.value.slice(
-      0,
-      status.value.indexOf('-'),
-    );
-  }
-  let params = { ...queryParams, ...pager };
+  clientId.value = JSON.parse(localStorage.getItem('#LoginInfo')).loginClientId;
+  let params = { ...queryParams, ...pager, clientId: clientId.value };
   if (queryParams.batchNo !== '') {
     SqlApi.execute('20230613_140456', params).then(
       successData => {
@@ -300,6 +296,7 @@ const searchPrintInfo = () => {
         if (errorCode == 0) {
           total.value = successData.total;
           dataSource.value = lines;
+          select.allData = lines;
           isLoading.value = false;
         } else {
           Notify.error('查询异常', errorMessage, true);
@@ -312,24 +309,17 @@ const searchPrintInfo = () => {
       },
     );
   } else {
-    message.error('请选择导入批次');
-    status.value = '';
-    dataSource.value = [];
-    queryParams.clientName = '';
-    queryParams.costCenterName = '';
-    queryParams.depositoryUser = '';
-    queryParams.organizationName = '';
     isLoading.value = false;
   }
 };
 // 获取所选项的数据
 const selectColumn = rows => {
   select.selectedRows = rows;
-  console.log('onSelectChange', select.selectedRows);
+  // console.log('onSelectChange', select.selectedRows);
 };
 // 展开打印框
 const showPrintInfo = () => {
-  if (printTemplate.value !== '') {
+  if (printTemplate.value !== '' && queryParams.batchNo !== '') {
     printVisible.value = true;
     const nameArr = [];
     const obj = JSON.parse(JSON.stringify(queryParams));
@@ -341,7 +331,7 @@ const showPrintInfo = () => {
     newPackageName.value = nameArr.join('-');
     packageBatchNo.value = dateConvert(new Date());
   } else {
-    message.error('请选择打印模板');
+    message.warning('请检查是否已选择导入批次或模板！');
   }
 };
 // 同上一次包装信息
@@ -375,124 +365,127 @@ const getTemplateInfo = async () => {
 
 // 打印预览
 const printPreview = async () => {
-  imageVisible.value = true;
-  printing.value = false;
-  imageUrls.length = 0;
-  let tempStr = JSON.stringify(templateData.value);
-  const rows = JSON.parse(JSON.stringify(select.selectedRows));
-  for (let key in rows) {
-    let base64 = await getBase64(rows[key], tempStr);
+  if (printTemplate.value !== '' && queryParams.batchNo !== '') {
+    imageVisible.value = true;
+    printing.value = false;
+    imageUrls.length = 0;
+    let tempStr = JSON.stringify(templateData.value);
+    const rows = JSON.parse(JSON.stringify(dataSource.value[0]));
+    let base64 = await getBase64(rows, tempStr);
     imageUrls.push(base64);
+    printing.value = true;
+  } else {
+    message.warning('请检查是否已选择导入批次或模板！');
   }
-  printing.value = true;
 };
 
 // 确认打印
-const printCard = async () => {
-  printVisible.value = false;
-  modelVisible.value = true;
-  printing.value = false;
-  const formData = new FormData();
-  formData.append('customerPrintTemplateId', templateId.value);
-  formData.append('packageBatchNo', packageBatchNo.value);
-  formData.append('packageName', packageName.value);
-
-  let tempStr = JSON.stringify(templateData.value);
-  const rows = JSON.parse(JSON.stringify(select.selectedRows));
-  for (let key in rows) {
-    let base64 = await getBase64(rows[key], tempStr,rows[key].assetNo);
-    let file = base64toFile(base64, rows[key].id);
-    formData.append('file', file);
-  }
-
-  multipleImageUpload(formData).then(
-    successData => {
-      if (successData.success === true) {
-        message.success('资产生产图片成功');
-      } else {
-        message.error('资产生产图片失败');
-      }
-      modelVisible.value = false;
-      printing.value = true;
-      searchPrintInfo();
-      clearSelect();
-    },
-    errorData => {
-      Common.processException(errorData);
-      modelVisible.value = false;
-      printing.value = true;
-      clearSelect();
-    },
-  );
-};
+const printCard = async data => {
+  if (data.length !== 0) {
+    printVisible.value = false;
+    globalLoading.value = true;
+    printing.value = false;
+    const formData = new FormData();
+    formData.append('customerPrintTemplateId', templateId.value);
+    formData.append('packageBatchNo', packageBatchNo.value);
+    formData.append('packageName', packageName.value);
 
-const downloadImage = () => {
-  globalLoading.value = true;
-  if (status.value !== undefined) {
-    queryParams.labelPrintType = status.value.slice(
-      0,
-      status.value.indexOf('-'),
-    );
-  }
-  pager.start = 0;
-  pager.length = 10000;
-  let params = { ...queryParams, ...pager };
-  if (queryParams.batchNo !== '') {
-    SqlApi.execute('20230613_140456', params).then(
+    let tempStr = JSON.stringify(templateData.value);
+    const rows = JSON.parse(JSON.stringify(data));
+    let amount = 0;
+    for (let key in rows) {
+      amount = amount + 1;
+      let base64 = await getBase64(rows[key], tempStr, rows[key].assetNo);
+      let file = base64toFile(base64, rows[key].id);
+      formData.append('file', file);
+      propText.value = `生成中,已生成${amount}张`;
+    }
+    multipleImageUpload(formData).then(
       successData => {
-        const { lines, errorMessage, errorCode } = successData;
-        if (errorCode == 0) {
-          total.value = successData.total;
-          console.log(lines,'-----------------');
-          lines.forEach(item => {
-            let url = getImageSrc(className.value, item.imageUrl);
-            downloadImages(url, item.id);
-          });
-          globalLoading.value = false;
+        if (successData.success === true) {
+          message.success('资产生产图片成功');
         } else {
-          Notify.error('查询异常', errorMessage, true);
+          message.error('资产生产图片失败');
         }
         globalLoading.value = false;
+        printing.value = true;
+        all.value = false;
+        searchPrintInfo();
+        clearSelect();
       },
       errorData => {
         Common.processException(errorData);
         globalLoading.value = false;
+
+        printing.value = true;
+        all.value = false;
+        clearSelect();
       },
     );
   } else {
-    message.error('请选择导入批次');
-    status.value = '';
-    dataSource.value = [];
-    queryParams.clientName = '';
-    queryParams.costCenterName = '';
-    queryParams.depositoryUser = '';
-    queryParams.organizationName = '';
-    globalLoading.value = false;
+    all.value = false;
+    printVisible.value = false;
+    message.warning('请选择打印数据');
+  }
+};
+// 全部生成图片
+const printAll = () => {
+  all.value = true;
+  pager.start = 0;
+  pager.length = 10000;
+  searchPrintInfo();
+  showPrintInfo();
+};
+
+//下载全部图片(zip)
+const downloadImageZip = () => {
+  if (queryParams.batchNo === '') {
+    message.warning('请选择导入批次');
+  } else {
+    globalLoading.value = true;
+    var xhr = new XMLHttpRequest();
+    xhr.open('get', `api/LabelPrintResource/batchImageDownload?batchNo=${queryParams.batchNo}`, true);
+    const token = localStorage.getItem('#token');
+    xhr.setRequestHeader('token', token);
+    xhr.setRequestHeader('Content-type', 'application/json');
+    xhr.responseType = 'blob';
+    xhr.onreadystatechange = function(){
+      if(xhr.readyState === 4 && xhr.status === 200){
+        let res = xhr.response;
+        let blob = new Blob([res]);   
+        const blobUrl = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.download = '图片.zip';
+        link.style.display = 'none';
+        link.href = blobUrl;
+        document.body.appendChild(link);
+        link.click();
+        URL.revokeObjectURL(blobUrl);
+        document.body.removeChild(link);  
+        globalLoading.value = false;
+        message.success('下载成功');
+      }
+    };
+    xhr.send();
   }
 };
 
 // 打印后清除所有选择
 const clearSelect = () => {
-  tables.value.clear();
+  table.value.clear();
 };
 
-// 监听当批次切换后清空选择
-watch(
-  () => queryParams.batchNo,
-  (newVal, oldVal) => {
-    if (newVal !== oldVal) {
-      tables.value.clear();
-    }
-  },
-);
 onMounted(() => {
   init();
   getBase64 = CreateJPEG(hua.value);
+  clientId.value = JSON.parse(localStorage.getItem('#LoginInfo')).loginClientId;
 });
 
 // 封装通用sqlApi请求函数
 const commonSqlApi = (url, data) => {
-  SqlApi.execute(url).then(
+  clientId.value = JSON.parse(localStorage.getItem('#LoginInfo')).loginClientId;
+  let params = { clientId: clientId.value, batchNo: queryParams.batchNo };
+  SqlApi.execute(url, params).then(
     successData => {
       if (successData.errorCode == 0) {
         if (successData.lines !== null) {
@@ -500,6 +493,8 @@ const commonSqlApi = (url, data) => {
             return (item = { label: item });
           });
           data.value.unshift({ label: '' });
+        } else {
+          data.value = [];
         }
       } else {
         Notify.error('查询信息异常', successData.errorMessage, true);
@@ -513,21 +508,20 @@ const commonSqlApi = (url, data) => {
 
 // 初始化数据
 const init = () => {
+  clientId.value = JSON.parse(localStorage.getItem('#LoginInfo')).loginClientId;
+  let params = { clientId: clientId.value };
   getTemplate().then(res => {
     allTemplate.value = res.datas;
   });
-  commonSqlApi('20230613_192444', depositoryUsers); // 查询保管人
-  commonSqlApi('20230613_193808', clientNames); // 查询公司
-  commonSqlApi('20230613_194108', organizationNames); // 查询部门
-  commonSqlApi('20230613_194557', costCenterNames); // 查询成本中心
   // 查询批次号
-  SqlApi.execute('20230613_134214').then(
+  SqlApi.execute('20230613_134214', params).then(
     successData => {
       if (successData.errorCode == 0) {
         if (successData.lines !== null) {
-          batchNos.value = successData.lines.map(item => {
+          let datas = successData.lines.map(item => {
             return (item = { label: item });
           });
+          batchNos.value = datas.reverse();
         }
       } else {
         Notify.error('查询导入批次异常', successData.errorMessage, true);
@@ -538,14 +532,14 @@ const init = () => {
     },
   );
   // 查询模板
-  SqlApi.execute('20230613_135541').then(
+  SqlApi.execute('20230613_135541', params).then(
     successData => {
       if (successData.errorCode == 0) {
         if (successData.label !== null) {
           templateNames.value = successData.lines;
         }
       } else {
-        Notify.error('获取包装信息异常', successData.errorMessage, true);
+        Notify.error('查询模板信息异常', successData.errorMessage, true);
       }
     },
     errorData => {
@@ -553,10 +547,10 @@ const init = () => {
     },
   );
   // 获取上一次的包装信息
-  SqlApi.execute('20230613_194855').then(
+  SqlApi.execute('20230613_194855', params).then(
     successData => {
       if (successData.errorCode == 0) {
-        const { packageName, packageBatchNo } = successData.lines;
+        const { packageName, packageBatchNo } = successData.lines[0];
         lastPackageName.value = packageName;
         lastPackageBatchNo.value = packageBatchNo;
       } else {
@@ -571,9 +565,6 @@ const init = () => {
 </script>
 
 <style scoped>
-.printDiv {
-  padding: 24px;
-}
 .commonStyle {
   margin-right: 16px;
   width: 160px;

src/print/config.js

@@ -96,7 +96,7 @@ export const columns = [
   },
 ].map(item => ({ ...item, align: 'center' }));
 
-
+// 图片上传
 export const multipleImageUpload = params => {
   var requestUrl = 'LabelPrintResource/multipleImageUpload';
 
@@ -120,6 +120,8 @@ export const multipleImageUpload = params => {
     });
   });
 };
+
+// 获取模板信息
 export const getTemplate = () => {
   var requestUrl = 'printPageResource/loadCustomerTemplateX6';
 
@@ -141,6 +143,31 @@ export const getTemplate = () => {
     });
   });
 };
+
+// 图片下载 zip
+export const downloadZip = params => {
+  var requestUrl = 'LabelPrintResource/batchImageDownload';
+
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiURL(requestUrl),
+      type: 'get',
+      data: params,
+      // dataType: 'octet-stream',
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};
+
+
 const plusZero = n => {
   return n > 10 ? n : '0' + n;
 };

src/routes/main_routes.js

@@ -59,6 +59,7 @@ const PrintTemp = () => import(/* webpackChunkName: "component-test-6" */ '../cu
 // const PrintTempStep2 = () => import(/* webpackChunkName: "component-test-5" */ '../customer/printTemp/step2.vue');
 
 const PrintCard = () => import('../print/PrintCard.vue');
+const DataArchive = () => import('../archive/DataArchive.vue');
 import { ProcessReport } from 'pc-component-v3';
 
 export default [
@@ -342,7 +343,7 @@ export default [
   // 打印页面
   { path: '/single/PrintPage', component: PrintPage },
   // 卡片打印
-  { path: '/single/PrintCard', component: PrintCard },
+  { path: '/desktop/PrintCard', component: PrintCard },
 
 
   //钉钉待办任务审批跳转
@@ -369,4 +370,5 @@ export default [
   { path: '/excelReport/:processReportNo', component: ExcelReport },
   { path: '/dateExcelReport/:processReportNo', component: DateExcelReport },
   { path: '/desktop/delegationReport', component: DelegationReport },
+  { path: '/desktop/dataArchive', component: DataArchive },//数据归档
 ];

src/window/attachment/AttachmentPanel.vue

@@ -3,12 +3,10 @@
     <div>
       <h4 class="m-h4">
         {{ $t("lang.attachmentPanel.attachment") }}
-        <a
-          role="button"
-          class="btn btn-primary"
-          @click="addAttachment()"
-        >
-          <i class="fa fa-upload" />&nbsp;{{ $t("lang.attachmentPanel.addAttachment") }}
+        <a role="button" class="btn btn-primary" @click="addAttachment()">
+          <i class="fa fa-upload" />&nbsp;{{
+            $t("lang.attachmentPanel.addAttachment")
+          }}
         </a>
       </h4>
     </div>
@@ -16,10 +14,10 @@
       v-model:show="attachmentUploadModal"
       :show-ok-button="false"
       full="true"
-      @cancel="showAttachmentUpload=false"
+      @cancel="showAttachmentUpload = false"
     >
       <template #header>
-        {{ $t('lang.attachmentPanel.uploadAttachment') }}
+        {{ $t("lang.attachmentPanel.uploadAttachment") }}
       </template>
       <AttachmentUpload
         v-if="showAttachmentUpload"
@@ -29,26 +27,26 @@
         :is-show-edit="isShowEdit"
         :file-type="fileType"
         @upload-success="refresh"
+        @get-file="getFile"
       />
     </Modal>
     <div class="row">
       <div
-        v-for="(fileProperty,index) in fileProperties"
+        v-for="(fileProperty, index) in fileProperties"
         :key="'attachment' + index"
         style="display: table-cell"
         class="col-xs-3 col-sm-3 col-md-2 col-lg-2"
       >
-        <FileImage
-          :file-property="fileProperty"
-          :show-image="true"
-        />
-        <div>
+        <FileImage :file-property="fileProperty" :show-image="true" />
+        <div style="display: flex">
           <a
             role="button"
             class="btn btn-link btn-sm"
             @click="downloadAttachment(fileProperty.fileName)"
           >
-            <i class="fa fa-download" /> &nbsp;{{ $t("lang.attachmentPanel.download") }}
+            <i class="fa fa-download" /> &nbsp;{{
+              $t("lang.attachmentPanel.download")
+            }}
           </a>
           <a
             v-if="isShowEdit == undefined || isShowEdit"
@@ -56,10 +54,29 @@
             class="btn btn-link btn-sm"
             @click="deleteAttachment(fileProperty.fileName)"
           >
-            <i class="fa fa-trash-o" /> &nbsp;{{ $t("lang.attachmentPanel.remove") }}
+            <i class="fa fa-trash-o" /> &nbsp;{{
+              $t("lang.attachmentPanel.remove")
+            }}
+          </a>
+          <a
+            role="button"
+            class="btn btn-link btn-sm"
+            @click="previewFile(fileProperty.fileName)"
+          >
+            预览
           </a>
         </div>
         <div class="clearfix" />
+        <a-modal
+          v-model:visible="visible"
+          style="text-align:center"
+          title="预览"
+          ok-text="确认"
+          cancel-text="取消"
+          @ok="handleOk"
+        >
+          <a-image :width="200" :src="imgUrl" />
+        </a-modal>
       </div>
     </div>
     <Loading v-if="loading" />
@@ -68,29 +85,26 @@
 
 <script>
 import Common from '../../common/Common.js';
-
 import AttachmentService from '../../resource/file/AttachmentService.js';
 import DownloadService from '../../resource/file/DownloadService.js';
-
+import { getImageSrc } from '../../common/image-src';
 import FileImage from '../../widget/FileImage.vue';
-
 import AttachmentUpload from './AttachmentUpload.vue';
 import { Notify, Uuid } from 'pc-component-v3';
 
 export default {
-
   components: {
-    FileImage, AttachmentUpload, 
+    FileImage,
+    AttachmentUpload,
   },
   /**
-	 * className: 类名称
-	 * recordId: 记录Id
-	 * tabId: 页签Id
-	 * fileType: 附件类型,eg:".xls,.doc,.txt,.pdf"
-	 * isShowEdit: 显示上传控件(true:显示上传控件，false：不显示上传控件)
-	 */
+   * className: 类名称
+   * recordId: 记录Id
+   * tabId: 页签Id
+   * fileType: 附件类型,eg:".xls,.doc,.txt,.pdf"
+   * isShowEdit: 显示上传控件(true:显示上传控件，false：不显示上传控件)
+   */
   props: {
-   
     className: {
       type: String,
       default: null,
@@ -117,7 +131,7 @@ export default {
     },
     curdWindowFunctionAccess: {
       type: Object,
-      default: function(){
+      default: function () {
         return null;
       },
     },
@@ -125,24 +139,26 @@ export default {
 
   data: function () {
     return {
-      'fileProperties': [],
+      fileProperties: [],
       type: 1,
-      'showAttachmentUpload': false,
+      showAttachmentUpload: false,
       loading: false,
       attachmentUploadModal: false,
+      imgUrl: '',
+      visible: false,
     };
   },
 
   watch: {
-    'recordId': function () {
+    recordId: function () {
       this.refresh();
     },
 
-    'className': function () {
+    className: function () {
       this.refresh();
     },
 
-    'tabId': function () {
+    tabId: function () {
       this.refresh();
     },
   },
@@ -152,15 +168,23 @@ export default {
   },
 
   methods: {
+    getImageName: function (name) {
+      const _self = this;
+      return getImageSrc(_self.className, name);
+    },
     /**
-		 * 刷新(获取文件属性)
-		 */
+     * 刷新(获取文件属性)
+     */
     refresh: function () {
       var _self = this;
       this.type = 1;
       this.attachmentUploadModal = false;
       this.showAttachmentUpload = false;
-      if (this.className == undefined || this.recordId == undefined || this.windowNo == undefined) {
+      if (
+        this.className == undefined ||
+        this.recordId == undefined ||
+        this.windowNo == undefined
+      ) {
         this.fileProperties.splice(0, this.fileProperties.length);
         return;
       }
@@ -169,39 +193,46 @@ export default {
         className: _self.className,
         recordId: _self.recordId,
       };
-      
 
-      AttachmentService.getFileProperties(data).then(successData => {
-        console.log(successData);
-        _self.fileProperties.splice(0, _self.fileProperties.length);
-        if (successData == undefined || successData.length == 0) {
-          return;
-        }
-
-        for (var i = 0, len = successData.length; i < len; i++) {
-          _self.fileProperties.push(successData[i]);
-        }
-      }, error => {
+      AttachmentService.getFileProperties(data).then(
+        successData => {
+          _self.fileProperties.splice(0, _self.fileProperties.length);
+          if (successData == undefined || successData.length == 0) {
+            return;
+          }
 
-      });
+          for (var i = 0, len = successData.length; i < len; i++) {
+            _self.fileProperties.push(successData[i]);
+          }
+        },
+        error => {},
+      );
     },
 
-
     /**
-		 * 下载附件
-		 */
+     * 下载附件
+     */
     downloadAttachment: function (fileName) {
       var _self = this;
       var className = _self.className;
       var recordId = _self.recordId;
       var windowNo = _self.windowNo;
-      var url = Common.getApiURL('file/attachmentDownload') + '?className=' + className + '&windowNo=' + windowNo + '&recordId=' + recordId + '&fileName=' + fileName;
+      var url =
+        Common.getApiURL('file/attachmentDownload') +
+        '?className=' +
+        className +
+        '&windowNo=' +
+        windowNo +
+        '&recordId=' +
+        recordId +
+        '&fileName=' +
+        fileName;
       DownloadService.downloadFile(url, fileName);
     },
 
     /**
-		 * 删除附件
-		 */
+     * 删除附件
+     */
     deleteAttachment: function (fileName) {
       var _self = this;
       var data = {
@@ -213,15 +244,89 @@ export default {
       };
       AttachmentService.deleteAttachment(data).then(successData => {
         if (data.errorCode != 0) {
-          Notify.error(_self.$t('lang.Notify.warning'), successData.errorMessage, false);
+          // Notify.error(
+          //   _self.$t('lang.Notify.warning'),
+          //   successData.errorMessage,
+          //   false,
+          // );
         }
         _self.refresh();
       });
     },
 
+    // 预览文件
+    previewFile: function (name) {
+      let flag = this.isPhotoPdf(name);
+      let pdf = this.isPdf(name);
+      var _self = this;
+      var className = _self.className;
+      var recordId = _self.recordId;
+      var windowNo = _self.windowNo;
+      let url =
+        Common.getApiURL('file/attachmentDownload') +
+        '?className=' +
+        className +
+        '&windowNo=' +
+        windowNo +
+        '&recordId=' +
+        recordId +
+        '&fileName=' +
+        name;
+      const xhr = new XMLHttpRequest();
+      xhr.responseType = 'blob'; // 返回类型blob
+      xhr.open('get', url, true);
+      const token = localStorage.getItem('#token');
+      xhr.setRequestHeader('token', token);
+      xhr.onload = function () {
+        if (this.status === 200) {
+          if (flag) {
+            // 图片
+            _self.visible = true;
+            _self.imgUrl = window.URL.createObjectURL(this.response);
+          } else if (pdf) {
+            // pdf文件
+            let type = xhr.getResponseHeader('Content-Type');
+            let blob = new Blob([this.response], {
+              type: type,
+            });
+            let href =window.URL.createObjectURL(blob);
+            window.open(href,'_blank');
+          } else {
+            // 其他文件
+            _self.$message.error('仅支持预览图片和pdf文件');
+          }
+
+        }
+      };
+      xhr.send();
+    },
+    handleOk:function(){
+      this.visible = false;
+    },
+    isPdf: function (name) {
+      if (name.endsWith('.pdf')) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    isPhotoPdf: function (name) {
+      var fileName = name;
+      if (
+        fileName.endsWith('.jpg') || //图片
+        fileName.endsWith('.jpeg') ||
+        fileName.endsWith('.bmp') ||
+        fileName.endsWith('.gif') ||
+        fileName.endsWith('.png')
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    },
     /**
-		 * 显示附件面板
-		 */
+     * 显示附件面板
+     */
     addAttachment: function () {
       this.attachmentUploadModal = true;
       this.showAttachmentUpload = true;
@@ -232,10 +337,10 @@ export default {
 
 <style scoped>
 .m-h4 {
-    border: 1px solid #eee;
-    border-top: none;
-    border-left: none;
-    border-right: none;
-    padding-bottom: 10px;
+  border: 1px solid #eee;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  padding-bottom: 10px;
 }
 </style>

src/window/attachment/AttachmentUpload.vue

@@ -127,6 +127,7 @@ export default {
     uploadAttachment: function (files) {
       var _self = this;
       var selectedFile = files[0];
+      _self.$emit('getFile',selectedFile);
       if (selectedFile == undefined) {
         Notify.error(_self.$t('lang.Notify.prompt'), _self.$t('lang.attachmentUpload.mustSelectFile'), false);
         return;

src/window/tabFormView/TabFormEdit.vue

@@ -1034,7 +1034,11 @@ export default {
                 processReportResult.reportResults.length > 0
             ) {
               processReportResult.reportResults.forEach(function (item, index) {
-                item.previewIndex = 1;
+                if (item.reportDefinitionType!=='ExcelReport') {
+                  item.previewIndex=1;
+                } else {
+                  item.previewIndex=2;
+                }
                 if (index == 0) {
                   item['showPreview'] = true;
                 } else {

src/window/tabFormView/TabFormView.vue

@@ -791,7 +791,11 @@ export default {
                 processReportResult.reportResults.length > 0
             ) {
               processReportResult.reportResults.forEach(function (item, index) {
-                item.previewIndex = 1;
+                if (item.reportDefinitionType!=='ExcelReport') {
+                  item.previewIndex=1;
+                } else {
+                  item.previewIndex=2;
+                }
                 if (index == 0) {
                   item.showPreview = true;
                 } else {

src/window/tabView/TabButton.vue

@@ -767,7 +767,11 @@ export default {
             _self.processReportResult.reportResults.length > 0
           ) {
             _self.processReportResult.reportResults.forEach(function (item, index) {
-              item.previewIndex=1;
+              if(item.reportDefinitionType!=='ExcelReport'){
+                item.previewIndex=1;
+              }else{
+                item.previewIndex=2;
+              }
               if (index == 0) {
                 item.showPreview=true;
               } else {

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>