后台样式修改

back/src/views/main-content.vue

@@ -5,25 +5,52 @@
       <el-dropdown class="aui-content--tabs-tools">
         <i class="el-icon-arrow-down"></i>
         <el-dropdown-menu slot="dropdown" :show-timeout="0">
-          <el-dropdown-item @click.native="tabRemoveHandle($store.state.contentTabsActiveName)">{{ $t('contentTabs.closeCurrent') }}</el-dropdown-item>
+          <el-dropdown-item
-          <el-dropdown-item @click.native="tabsCloseOtherHandle()">{{ $t('contentTabs.closeOther') }}</el-dropdown-item>
+            @click.native="tabRemoveHandle($store.state.contentTabsActiveName)"
-          <el-dropdown-item @click.native="tabsCloseAllHandle()">{{ $t('contentTabs.closeAll') }}</el-dropdown-item>
+            >{{ $t("contentTabs.closeCurrent") }}</el-dropdown-item
+          >
+          <el-dropdown-item @click.native="tabsCloseOtherHandle()">{{
+            $t("contentTabs.closeOther")
+          }}</el-dropdown-item>
+          <el-dropdown-item @click.native="tabsCloseAllHandle()">{{
+            $t("contentTabs.closeAll")
+          }}</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-      <el-tabs v-model="$store.state.contentTabsActiveName" @tab-click="tabSelectedHandle" @tab-remove="tabRemoveHandle">
+      <el-tabs
+        v-model="$store.state.contentTabsActiveName"
+        @tab-click="tabSelectedHandle"
+        @tab-remove="tabRemoveHandle"
+      >
         <el-tab-pane
           v-for="item in $store.state.contentTabs"
           :key="item.name"
           :name="item.name"
           :label="item.title"
           :closable="item.name !== 'home'"
-          :class="{ 'is-iframe': tabIsIframe(item.iframeURL) }">
+          :class="{ 'is-iframe': tabIsIframe(item.iframeURL) }"
+        >
           <template v-if="item.name === 'home'">
-            <svg slot="label" class="icon-svg aui-content--tabs-icon-nav" aria-hidden="true"><use xlink:href="#icon-home"></use></svg>
+            <svg
+              slot="label"
+              class="icon-svg aui-content--tabs-icon-nav"
+              aria-hidden="true"
+            >
+              <use xlink:href="#icon-home"></use>
+            </svg>
           </template>
-          <iframe v-if="tabIsIframe(item.iframeURL)" :src="item.iframeURL" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
+          <iframe
+            v-if="tabIsIframe(item.iframeURL)"
+            :src="item.iframeURL"
+            width="100%"
+            height="100%"
+            frameborder="0"
+            scrolling="yes"
+          ></iframe>
           <keep-alive v-else>
-            <router-view v-if="item.name === $store.state.contentTabsActiveName" />
+            <router-view
+              v-if="item.name === $store.state.contentTabsActiveName"
+            />
           </keep-alive>
         </el-tab-pane>
       </el-tabs>
@@ -38,59 +65,91 @@
 </template>
 
 <script>
-import { isURL } from '@/utils/validate'
+import { isURL } from "@/utils/validate";
 export default {
   data() {
-    return {
+    return {};
-    }
   },
   methods: {
     // tabs, 是否通过iframe展示
     tabIsIframe(url) {
-      return isURL(url)
+      return isURL(url);
     },
     // tabs, 选中tab
     tabSelectedHandle(tab) {
-      tab = this.$store.state.contentTabs.filter(item => item.name === tab.name)[0]
+      tab = this.$store.state.contentTabs.filter(
+        (item) => item.name === tab.name
+      )[0];
       if (tab) {
         this.$router.push({
-          'name': /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
+          name: /^iframe_.+/.test(tab.name) ? "iframe" : tab.name,
-          'params': { ...tab.params },
+          params: { ...tab.params },
-          'query': { ...tab.query }
+          query: { ...tab.query },
-        })
+        });
       }
     },
     // tabs, 删除tab
     tabRemoveHandle(tabName) {
-      if (tabName === 'home') {
+      if (tabName === "home") {
-        return false
+        return false;
       }
-      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
+        (item) => item.name !== tabName
+      );
       if (this.$store.state.contentTabs.length <= 0) {
-        this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = 'home'
+        this.$store.state.sidebarMenuActiveName =
-        return false
+          this.$store.state.contentTabsActiveName = "home";
+        return false;
       }
       // 当前选中tab被删除
       if (tabName === this.$store.state.contentTabsActiveName) {
-        let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1]
+        let tab =
+          this.$store.state.contentTabs[
+            this.$store.state.contentTabs.length - 1
+          ];
         this.$router.push({
-          name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
+          name: /^iframe_.+/.test(tab.name) ? "iframe" : tab.name,
           params: { ...tab.params },
-          query: { ...tab.query }
+          query: { ...tab.query },
-        })
+        });
       }
     },
     // tabs, 关闭其它
     tabsCloseOtherHandle() {
-      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => {
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-        return item.name === 'home' || item.name === this.$store.state.contentTabsActiveName
+        (item) => {
-      })
+          return (
+            item.name === "home" ||
+            item.name === this.$store.state.contentTabsActiveName
+          );
+        }
+      );
     },
     // tabs, 关闭全部
     tabsCloseAllHandle() {
-      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name === 'home')
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-      this.$router.push({ name: 'home' })
+        (item) => item.name === "home"
-    }
+      );
-  }
+      this.$router.push({ name: "home" });
-}
+    },
+  },
+};
 </script>
+<style scoped lang="scss">
+.aui-content {
+  .el-tabs {
+    ::v-deep .el-tabs__header {
+      left: 266px;
+      .el-tabs__nav-wrap {
+        .el-tabs__nav-scroll {
+          .el-tabs__nav {
+            .el-tabs__item ::after {
+              background-color: #0058e1;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

back/src/views/main-sidebar-sub-menu.vue

@@ -117,6 +117,11 @@ export default {
     font-weight: bold;
   }
   .el-menu-item {
+    &.is-active {
+      color: #ffffff;
+      background-color: #0058e1;
+      border: none;
+    }
     a {
       display: block;
       color: inherit;
@@ -126,10 +131,5 @@ export default {
       font-size: 16px;
     }
   }
-  .is-active {
-    color: #ffffff;
-    background-color: #0058e1;
-    border: none;
-  }
 }
 </style>

back/src/views/main-sidebar.vue

@@ -1,30 +1,56 @@
+<!--
+ * @Author: kongjun qdkongjun@gmail.com
+ * @Date: 2022-06-20 09:29:59
+ * @LastEditors: kongjun qdkongjun@gmail.com
+ * @LastEditTime: 2022-06-21 10:37:47
+ * @FilePath: \back\src\views\main-sidebar.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
-  <aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]">
+  <aside
+    :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]"
+  >
     <div class="aui-sidebar__inner">
       <el-menu
         :default-active="$store.state.sidebarMenuActiveName"
         :collapse="$store.state.sidebarFold"
         :unique-opened="true"
         :collapseTransition="false"
-        class="aui-sidebar__menu">
+        class="aui-sidebar__menu"
-        <sub-menu v-for="menu in $store.state.sidebarMenuList" :key="menu.id" :menu="menu" />
+      >
+        <sub-menu
+          v-for="menu in $store.state.sidebarMenuList"
+          :key="menu.id"
+          :menu="menu"
+        />
       </el-menu>
     </div>
   </aside>
 </template>
 
 <script>
-import SubMenu from './main-sidebar-sub-menu'
+import SubMenu from "./main-sidebar-sub-menu";
 export default {
   data() {
-    return {
+    return {};
-    }
   },
   components: {
-    SubMenu
+    SubMenu,
   },
   created() {
-    this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
+    this.$store.state.sidebarMenuList = window.SITE_CONFIG["menuList"];
-  }
+  },
-}
+};
 </script>
+<style scoped lang="scss">
+.aui-sidebar {
+  width: 266px;
+  .aui-sidebar__inner {
+    width: 260px;
+    overflow-y: hidden;
+    .aui-sidebar__menu {
+      width: 266px;
+    }
+  }
+}
+</style>

back/src/views/main-theme-tools.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Author: kongjun qdkongjun@gmail.com
+ * @Date: 2022-06-20 09:29:59
+ * @LastEditors: kongjun qdkongjun@gmail.com
+ * @LastEditTime: 2022-06-21 11:36:51
+ * @FilePath: \back\src\views\main-theme-tools.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
   <div class="aui-theme-tools" :class="{ 'aui-theme-tools--open': isOpen }">
     <div class="aui-theme-tools__toggle" @click="isOpen = !isOpen">
@@ -41,9 +49,12 @@ export default {
     return {
       isOpen: false,
       themeList: require("@/element-ui/config.js"),
-      themeColor: "turquoise",
+      themeColor: "blue",
     };
   },
+  mounted() {
+    this.themeColorChangeHandle("blue");
+  },
   methods: {
     themeColorChangeHandle(val) {
       var styleList = [

back/src/views/main.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" :class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]">
+  <div
+    v-loading.fullscreen.lock="loading"
+    :element-loading-text="$t('loading')"
+    :class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]"
+  >
     <template v-if="!loading">
       <main-navbar />
       <main-sidebar />
@@ -12,109 +16,128 @@
 </template>
 
 <script>
-import MainNavbar from './main-navbar'
+import MainNavbar from "./main-navbar";
-import MainSidebar from './main-sidebar'
+import MainSidebar from "./main-sidebar";
-import MainContent from './main-content'
+import MainContent from "./main-content";
-import MainThemeTools from './main-theme-tools'
+import MainThemeTools from "./main-theme-tools";
-import debounce from 'lodash/debounce'
+import debounce from "lodash/debounce";
-import { isURL } from '@/utils/validate'
+import { isURL } from "@/utils/validate";
 export default {
   provide() {
     return {
       // 刷新
       refresh() {
-        this.$store.state.contentIsNeedRefresh = true
+        this.$store.state.contentIsNeedRefresh = true;
         this.$nextTick(() => {
-          this.$store.state.contentIsNeedRefresh = false
+          this.$store.state.contentIsNeedRefresh = false;
-        })
+        });
-      }
+      },
-    }
+    };
   },
   data() {
     return {
-      loading: true
+      loading: true,
-    }
+    };
   },
   components: {
     MainNavbar,
     MainSidebar,
     MainContent,
-    MainThemeTools
+    MainThemeTools,
   },
   watch: {
-    $route: 'routeHandle'
+    $route: "routeHandle",
   },
   created() {
-    this.windowResizeHandle()
+    this.windowResizeHandle();
-    this.routeHandle(this.$route)
+    this.routeHandle(this.$route);
-    Promise.all([
+    Promise.all([this.getUserInfo(), this.getPermissions()]).then(() => {
-      this.getUserInfo(),
+      this.loading = false;
-      this.getPermissions()
+    });
-    ]).then(() => {
-      this.loading = false
-    })
   },
   methods: {
     // 窗口改变大小
     windowResizeHandle() {
-      this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
+      this.$store.state.sidebarFold =
-      window.addEventListener('resize', debounce(() => {
+        document.documentElement["clientWidth"] <= 992 || false;
-        this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
+      window.addEventListener(
-      }, 150))
+        "resize",
+        debounce(() => {
+          this.$store.state.sidebarFold =
+            document.documentElement["clientWidth"] <= 992 || false;
+        }, 150)
+      );
     },
     // 路由, 监听
     routeHandle(route) {
       if (!route.meta.isTab) {
-        return false
+        return false;
       }
-      let tab = {}
+      let tab = {};
-      let routeName = route.name
+      let routeName = route.name;
-      let routeMeta = route.meta
+      let routeMeta = route.meta;
-      if (route.name === 'iframe') {
+      if (route.name === "iframe") {
-        let url = route.query.url || ''
+        let url = route.query.url || "";
         if (!isURL(url)) {
-          return false
+          return false;
         }
-        let key = route.query.key || new Date().getTime()
+        let key = route.query.key || new Date().getTime();
-        routeName = `${routeName}_${key}`
+        routeName = `${routeName}_${key}`;
-        routeMeta.title = key.toString()
+        routeMeta.title = key.toString();
-        routeMeta.menuId = route.query.menuId || ''
+        routeMeta.menuId = route.query.menuId || "";
-        routeMeta.iframeURL = url
+        routeMeta.iframeURL = url;
       }
-      tab = this.$store.state.contentTabs.filter(item => item.name === routeName)[0]
+      tab = this.$store.state.contentTabs.filter(
+        (item) => item.name === routeName
+      )[0];
       if (!tab) {
         tab = {
-          ...window.SITE_CONFIG['contentTabDefault'],
+          ...window.SITE_CONFIG["contentTabDefault"],
           ...routeMeta,
-          'name': routeName,
+          name: routeName,
-          'params': { ...route.params },
+          params: { ...route.params },
-          'query': { ...route.query }
+          query: { ...route.query },
+        };
+        this.$store.state.contentTabs =
+          this.$store.state.contentTabs.concat(tab);
       }
-        this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab)
+      this.$store.state.sidebarMenuActiveName = tab.menuId;
-      }
+      this.$store.state.contentTabsActiveName = tab.name;
-      this.$store.state.sidebarMenuActiveName = tab.menuId
-      this.$store.state.contentTabsActiveName = tab.name
     },
     // 获取当前管理员信息
     getUserInfo() {
-      return this.$http.get('/sys/user/info').then(({ data: res }) => {
+      return this.$http
+        .get("/sys/user/info")
+        .then(({ data: res }) => {
           if (res.code !== 0) {
-          return this.$message.error(res.msg)
+            return this.$message.error(res.msg);
           }
-        this.$store.state.user.id = res.data.id
+          this.$store.state.user.id = res.data.id;
-        this.$store.state.user.name = res.data.username
+          this.$store.state.user.name = res.data.username;
-        this.$store.state.user.superAdmin = res.data.superAdmin
+          this.$store.state.user.superAdmin = res.data.superAdmin;
-      }).catch(() => {})
+        })
+        .catch(() => {});
     },
     // 获取权限
     getPermissions() {
-      return this.$http.get('/sys/menu/permissions').then(({ data: res }) => {
+      return this.$http
+        .get("/sys/menu/permissions")
+        .then(({ data: res }) => {
           if (res.code !== 0) {
-          return this.$message.error(res.msg)
+            return this.$message.error(res.msg);
-        }
-        window.SITE_CONFIG['permissions'] = res.data
-      }).catch(() => {})
-    }
-  }
           }
+          window.SITE_CONFIG["permissions"] = res.data;
+        })
+        .catch(() => {});
+    },
+  },
+};
 </script>
+<style scoped lang="scss">
+.aui-content__wrapper {
+  margin-left: 266px;
+  .aui-content > .el-tabs > .el-tabs__header {
+    left: 230px;
+  }
+}
+</style>

back/src/views/modules/activiti/model-add-or-update.vue

@@ -1,78 +1,117 @@
 <template>
-  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+  <el-dialog
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
+    :visible.sync="visible"
+    :title="!dataForm.id ? $t('add') : $t('update')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      label-width="120px"
+    >
       <el-form-item prop="name" :label="$t('model.name')">
-        <el-input v-model="dataForm.name" :placeholder="$t('model.name')"></el-input>
+        <el-input
+          v-model="dataForm.name"
+          :placeholder="$t('model.name')"
+        ></el-input>
       </el-form-item>
       <el-form-item prop="key" :label="$t('model.key')">
-        <el-input v-model="dataForm.key" :placeholder="$t('model.key')"></el-input>
+        <el-input
+          v-model="dataForm.key"
+          :placeholder="$t('model.key')"
+        ></el-input>
       </el-form-item>
       <el-form-item prop="description" :label="$t('model.description')">
-        <el-input v-model="dataForm.description" :placeholder="$t('model.description')"></el-input>
+        <el-input
+          v-model="dataForm.description"
+          :placeholder="$t('model.description')"
+        ></el-input>
       </el-form-item>
     </el-form>
     <template slot="footer">
-      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
-      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{
+        $t("confirm")
+      }}</el-button>
     </template>
   </el-dialog>
 </template>
 
 <script>
-import debounce from 'lodash/debounce'
+import debounce from "lodash/debounce";
 export default {
   data() {
     return {
       visible: false,
       dataForm: {
-        id: '',
+        id: "",
-        name: '',
+        name: "",
-        key: '',
+        key: "",
-        description: ''
+        description: "",
-      }
+      },
-    }
+    };
   },
   computed: {
     dataRule() {
       return {
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         key: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
-        ]
+            required: true,
-      }
+            message: this.$t("validate.required"),
-    }
+            trigger: "blur",
+          },
+        ],
+      };
+    },
   },
   methods: {
     init() {
-      this.visible = true
+      this.visible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].resetFields()
+        this.$refs["dataForm"].resetFields();
-      })
+      });
     },
     // 表单提交
-    dataFormSubmitHandle: debounce(function () {
+    dataFormSubmitHandle: debounce(
-      this.$refs['dataForm'].validate((valid) => {
+      function () {
+        this.$refs["dataForm"].validate((valid) => {
           if (!valid) {
-          return false
+            return false;
           }
-        this.$http[!this.dataForm.id ? 'post' : 'put']('/act/model', this.dataForm).then(({ data: res }) => {
+          this.$http[!this.dataForm.id ? "post" : "put"](
+            "/act/model",
+            this.dataForm
+          )
+            .then(({ data: res }) => {
               if (res.code !== 0) {
-            return this.$message.error(res.msg)
+                return this.$message.error(res.msg);
               }
               this.$message({
-            message: this.$t('prompt.success'),
+                message: this.$t("prompt.success"),
-            type: 'success',
+                type: "success",
                 duration: 500,
                 onClose: () => {
-              this.visible = false
+                  this.visible = false;
-              this.$emit('refreshDataList')
+                  this.$emit("refreshDataList");
-            }
+                },
+              });
             })
-        }).catch(() => {})
+            .catch(() => {});
-      })
+        });
-    }, 1000, { 'leading': true, 'trailing': false })
+      },
-  }
+      1000,
-}
+      { leading: true, trailing: false }
+    ),
+  },
+};
 </script>

back/src/views/modules/activiti/model.vue

@@ -1,21 +1,39 @@
 <template>
   <el-card shadow="never" class="aui-card--fill">
     <div class="mod-activiti__model">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
         <el-form-item>
-          <el-input v-model="dataForm.name" :placeholder="$t('model.name')" clearable></el-input>
+          <el-input
+            v-model="dataForm.name"
+            :placeholder="$t('model.name')"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-input v-model="dataForm.key" :placeholder="$t('model.key')" clearable></el-input>
+          <el-input
+            v-model="dataForm.key"
+            :placeholder="$t('model.key')"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+          <el-button type="primary" @click="getDataList()">{{
+            $t("query")
+          }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+          <el-button type="primary" @click="addOrUpdateHandle()">{{
+            $t("add")
+          }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+          <el-button type="danger" @click="deleteHandle()">{{
+            $t("deleteBatch")
+          }}</el-button>
         </el-form-item>
       </el-form>
       <el-table
@@ -24,19 +42,78 @@
         border
         @selection-change="dataListSelectionChangeHandle"
         @sort-change="dataListSortChangeHandle"
-        style="width: 100%;">
+        style="width: 100%"
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+      >
-        <el-table-column prop="name" :label="$t('model.name')" header-align="center" align="center"></el-table-column>
+        <el-table-column
-        <el-table-column prop="key" :label="$t('model.key')" header-align="center" align="center"></el-table-column>
+          type="selection"
-        <el-table-column prop="version" :label="$t('model.version')" header-align="center" align="center"></el-table-column>
+          header-align="center"
-        <el-table-column prop="createTime" :label="$t('model.createTime')" header-align="center" align="center" width="180"></el-table-column>
+          align="center"
-        <el-table-column prop="lastUpdateTime" :label="$t('model.lastUpdateTime')" header-align="center" align="center" width="180"></el-table-column>
+          width="50"
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+        ></el-table-column>
+        <el-table-column
+          prop="name"
+          :label="$t('model.name')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="key"
+          :label="$t('model.key')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="version"
+          :label="$t('model.version')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createTime"
+          :label="$t('model.createTime')"
+          header-align="center"
+          align="center"
+          width="180"
+        ></el-table-column>
+        <el-table-column
+          prop="lastUpdateTime"
+          :label="$t('model.lastUpdateTime')"
+          header-align="center"
+          align="center"
+          width="180"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
           <template slot-scope="scope">
-            <a :href="getModelerURL(scope.row.id)" target="_blank" class="el-button el-button--text el-button--small">{{ $t('model.design') }}</a>
+            <a
-            <el-button type="text" size="small" @click="deployHandle(scope.row.id)">{{ $t('model.deploy') }}</el-button>
+              :href="getModelerURL(scope.row.id)"
-            <a :href="getExportURL(scope.row.id)" target="_blank" class="el-button el-button--text el-button--small">{{ $t('export') }}</a>
+              target="_blank"
-            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+              class="el-button el-button--text el-button--small"
+              >{{ $t("model.design") }}</a
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="deployHandle(scope.row.id)"
+              >{{ $t("model.deploy") }}</el-button
+            >
+            <a
+              :href="getExportURL(scope.row.id)"
+              target="_blank"
+              class="el-button el-button--text el-button--small"
+              >{{ $t("export") }}</a
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="deleteHandle(scope.row.id)"
+              >{{ $t("delete") }}</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -47,76 +124,90 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
       </el-pagination>
       <!-- 弹窗, 新增 / 修改 -->
-      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      <add-or-update
+        v-if="addOrUpdateVisible"
+        ref="addOrUpdate"
+        @refreshDataList="getDataList"
+      ></add-or-update>
     </div>
   </el-card>
 </template>
 
 <script>
-import mixinViewModule from '@/mixins/view-module'
+import mixinViewModule from "@/mixins/view-module";
-import AddOrUpdate from './model-add-or-update'
+import AddOrUpdate from "./model-add-or-update";
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
-import qs from 'qs'
+import qs from "qs";
 export default {
   mixins: [mixinViewModule],
   data() {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/act/model/page',
+        getDataListURL: "/act/model/page",
         getDataListIsPage: true,
-        deleteURL: '/act/model',
+        deleteURL: "/act/model",
-        deleteIsBatch: true
+        deleteIsBatch: true,
       },
       dataForm: {
-        name: '',
+        name: "",
-        key: ''
+        key: "",
-      }
+      },
-    }
+    };
   },
   components: {
-    AddOrUpdate
+    AddOrUpdate,
   },
   methods: {
     // 获取在线设计url地址
     getModelerURL(id) {
       var params = qs.stringify({
-        'token': Cookies.get('ucsToken'),
+        token: Cookies.get("ucsToken"),
-        'modelId': id
+        modelId: id,
-      })
+      });
-      return `${window.SITE_CONFIG['apiURL']}/modeler.html?${params}`
+      return `${window.SITE_CONFIG["apiURL"]}/modeler.html?${params}`;
     },
     // 获取导出url地址
     getExportURL(id) {
       var params = qs.stringify({
-        'token': Cookies.get('ucsToken')
+        token: Cookies.get("ucsToken"),
-      })
+      });
-      return `${window.SITE_CONFIG['apiURL']}/act/model/export/${id}?${params}`
+      return `${window.SITE_CONFIG["apiURL"]}/act/model/export/${id}?${params}`;
     },
     // 部署
     deployHandle(id) {
-      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('model.deploy') }), this.$t('prompt.title'), {
+      this.$confirm(
-        confirmButtonText: this.$t('confirm'),
+        this.$t("prompt.info", { handle: this.$t("model.deploy") }),
-        cancelButtonText: this.$t('cancel'),
+        this.$t("prompt.title"),
-        type: 'warning'
+        {
-      }).then(() => {
+          confirmButtonText: this.$t("confirm"),
-        this.$http.post(`/act/model/deploy/${id}`).then(({ data: res }) => {
+          cancelButtonText: this.$t("cancel"),
+          type: "warning",
+        }
+      )
+        .then(() => {
+          this.$http
+            .post(`/act/model/deploy/${id}`)
+            .then(({ data: res }) => {
               if (res.code !== 0) {
-            return this.$message.error(res.msg)
+                return this.$message.error(res.msg);
               }
               this.$message({
-            message: this.$t('prompt.success'),
+                message: this.$t("prompt.success"),
-            type: 'success',
+                type: "success",
                 duration: 500,
                 onClose: () => {
-              this.getDataList()
+                  this.getDataList();
-            }
+                },
+              });
             })
-        }).catch(() => {})
+            .catch(() => {});
-      }).catch(() => {})
+        })
-    }
+        .catch(() => {});
-  }
+    },
-}
+  },
+};
 </script>

back/src/views/modules/activiti/my-apply.vue

@@ -1,12 +1,22 @@
 <template>
   <el-card shadow="never" class="aui-card--fill">
     <div class="mod-activiti__process">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
         <el-form-item>
-          <el-input v-model="dataForm.processDefinitionName" :placeholder="$t('process.name')" clearable></el-input>
+          <el-input
+            v-model="dataForm.processDefinitionName"
+            :placeholder="$t('process.name')"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+          <el-button type="primary" @click="getDataList()">{{
+            $t("query")
+          }}</el-button>
         </el-form-item>
       </el-form>
       <el-table
@@ -15,25 +25,86 @@
         border
         @selection-change="dataListSelectionChangeHandle"
         @sort-change="dataListSortChangeHandle"
-        style="width: 100%;">
+        style="width: 100%"
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+      >
-        <el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column>
+        <el-table-column
-        <el-table-column prop="processInstanceId" :label="$t('running.id')" header-align="center" align="center"></el-table-column>
+          type="selection"
-        <el-table-column prop="processDefinitionName" :label="$t('process.processDefinitionName')" header-align="center" align="center"></el-table-column>
+          header-align="center"
-        <el-table-column prop="startTime" :label="$t('process.startTime')" header-align="center" align="center"></el-table-column>
+          align="center"
-        <el-table-column prop="ended" :label="$t('process.ended')" header-align="center" align="center">
+          width="50"
+        ></el-table-column>
+        <el-table-column
+          prop="businessKey"
+          :label="$t('process.businessKey')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="processInstanceId"
+          :label="$t('running.id')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="processDefinitionName"
+          :label="$t('process.processDefinitionName')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="startTime"
+          :label="$t('process.startTime')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="ended"
+          :label="$t('process.ended')"
+          header-align="center"
+          align="center"
+        >
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.ended" size="small" type="success">{{ $t('process.ended0') }}</el-tag>
+            <el-tag v-if="scope.row.ended" size="small" type="success">{{
-            <el-tag v-else size="small" type="danger">{{ $t('process.ended1') }}</el-tag>
+              $t("process.ended0")
+            }}</el-tag>
+            <el-tag v-else size="small" type="danger">{{
+              $t("process.ended1")
+            }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="currentTaskList[0].taskName" :label="$t('process.taskName')" header-align="center" align="center"></el-table-column>
+        <el-table-column
+          prop="currentTaskList[0].taskName"
+          :label="$t('process.taskName')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
         <!-- <el-table-column prop="currentTaskList[0].createTime" :label="$t('process.createTime')" header-align="center" align="center"></el-table-column> -->
-        <el-table-column prop="startTime" :label="$t('process.createTime')" header-align="center" align="center"></el-table-column>
+        <el-table-column
-        <el-table-column prop="currentTaskList[0].assigneeName" :label="$t('process.assignee')" header-align="center" align="center"></el-table-column>
+          prop="startTime"
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          :label="$t('process.createTime')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="currentTaskList[0].assigneeName"
+          :label="$t('process.assignee')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
           <template slot-scope="scope">
-            <el-button type="text" size="small" @click="showDetail(scope.row)">{{ $t('process.viewFlowImage') }}</el-button>
+            <el-button
+              type="text"
+              size="small"
+              @click="showDetail(scope.row)"
+              >{{ $t("process.viewFlowImage") }}</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -44,39 +115,39 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
       </el-pagination>
     </div>
   </el-card>
 </template>
 
 <script>
-import mixinViewModule from '@/mixins/view-module'
+import mixinViewModule from "@/mixins/view-module";
-import processModule from '@/mixins/process-module'
+import processModule from "@/mixins/process-module";
 export default {
   mixins: [mixinViewModule, processModule],
   data() {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/act/his/getMyProcessInstancePage',
+        getDataListURL: "/act/his/getMyProcessInstancePage",
         getDataListIsPage: true,
         deleteIsBatch: true,
-        deleteIsBatchKey: 'deploymentId'
+        deleteIsBatchKey: "deploymentId",
       },
       dataForm: {
-        processDefinitionName: ''
+        processDefinitionName: "",
-      }
-    }
       },
-  components: {
+    };
   },
+  components: {},
   methods: {
     showDetail(row) {
       if (!row.businessKey) {
-        return this.$message.error(this.$t('task.detailError'))
+        return this.$message.error(this.$t("task.detailError"));
-      }
-      this.getProcDefRouteSet(row, this.forwardDetail)
-    }
-  }
       }
+      this.getProcDefRouteSet(row, this.forwardDetail);
+    },
+  },
+};
 </script>

back/src/views/modules/activiti/my-join-task.vue

@@ -1,12 +1,22 @@
 <template>
   <el-card shadow="never" class="aui-card--fill">
     <div class="mod-activiti__process">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
         <el-form-item>
-          <el-input v-model="dataForm.processDefinitionId" :placeholder="$t('process.name')" clearable></el-input>
+          <el-input
+            v-model="dataForm.processDefinitionId"
+            :placeholder="$t('process.name')"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+          <el-button type="primary" @click="getDataList()">{{
+            $t("query")
+          }}</el-button>
         </el-form-item>
       </el-form>
       <el-table
@@ -15,24 +25,72 @@
         border
         @selection-change="dataListSelectionChangeHandle"
         @sort-change="dataListSortChangeHandle"
-        style="width: 100%;">
+        style="width: 100%"
+      >
         <!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
         <el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column> -->
-        <el-table-column prop="startUserName" :label="$t('process.user')" header-align="center" align="center"></el-table-column>
+        <el-table-column
+          prop="startUserName"
+          :label="$t('process.user')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
         <!-- <el-table-column :label="$t('process.system')" header-align="center" align="center">
           <template slot-scope="scope">
             <span>{{scope.row && scope.row.resourceName||scope.row.params && scope.row.params.undercarriageReason}}</span>
           </template>
         </el-table-column> -->
-        <el-table-column prop="resourceName" :label="$t('process.system')" header-align="center" align="center"></el-table-column>
+        <el-table-column
-        <el-table-column prop="processInstanceId" :label="$t('running.id')" header-align="center" align="center"></el-table-column>
+          prop="resourceName"
-        <el-table-column prop="processDefinitionName" :label="$t('process.processDefinitionName')" header-align="center" align="center"></el-table-column>
+          :label="$t('process.system')"
-        <el-table-column prop="processDefinitionVersion" :label="$t('process.processDefinitionVersion')" header-align="center" align="center" width="100"></el-table-column>
+          header-align="center"
-        <el-table-column prop="startTime" :label="$t('process.startTime')" header-align="center" align="center"></el-table-column>
+          align="center"
-        <el-table-column prop="endTime" :label="$t('process.endTime')" header-align="center" align="center"></el-table-column>
+        ></el-table-column>
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+        <el-table-column
+          prop="processInstanceId"
+          :label="$t('running.id')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="processDefinitionName"
+          :label="$t('process.processDefinitionName')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="processDefinitionVersion"
+          :label="$t('process.processDefinitionVersion')"
+          header-align="center"
+          align="center"
+          width="100"
+        ></el-table-column>
+        <el-table-column
+          prop="startTime"
+          :label="$t('process.startTime')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="endTime"
+          :label="$t('process.endTime')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
           <template slot-scope="scope">
-            <el-button type="text" size="small" @click="showDetail(scope.row)">{{ $t('process.viewFlowImage') }}</el-button>
+            <el-button
+              type="text"
+              size="small"
+              @click="showDetail(scope.row)"
+              >{{ $t("process.viewFlowImage") }}</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -43,39 +101,39 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
       </el-pagination>
     </div>
   </el-card>
 </template>
 
 <script>
-import mixinViewModule from '@/mixins/view-module'
+import mixinViewModule from "@/mixins/view-module";
-import processModule from '@/mixins/process-module'
+import processModule from "@/mixins/process-module";
 export default {
   mixins: [mixinViewModule, processModule],
   data() {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/act/his/getMyHandledInstancePage',
+        getDataListURL: "/act/his/getMyHandledInstancePage",
         getDataListIsPage: true,
         deleteIsBatch: true,
-        deleteIsBatchKey: 'deploymentId'
+        deleteIsBatchKey: "deploymentId",
       },
       dataForm: {
-        processDefinitionId: ''
+        processDefinitionId: "",
-      }
-    }
       },
-  components: {
+    };
   },
+  components: {},
   methods: {
     showDetail(row) {
       if (!row.businessKey) {
-        return this.$message.error(this.$t('task.detailError'))
+        return this.$message.error(this.$t("task.detailError"));
-      }
-      this.getProcDefRouteSet(row, this.forwardDetail)
-    }
-  }
       }
+      this.getProcDefRouteSet(row, this.forwardDetail);
+    },
+  },
+};
 </script>

back/src/views/modules/activiti/my-todo-task-pool.vue

@@ -1,12 +1,22 @@
 <template>
   <el-card shadow="never" class="aui-card--fill">
     <div class="mod-activiti__process">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
         <el-form-item>
-          <el-input v-model="dataForm.taskName" :placeholder="$t('process.name')" clearable></el-input>
+          <el-input
+            v-model="dataForm.taskName"
+            :placeholder="$t('process.name')"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+          <el-button type="primary" @click="getDataList()">{{
+            $t("query")
+          }}</el-button>
         </el-form-item>
       </el-form>
       <el-table
@@ -15,18 +25,76 @@
         border
         @selection-change="dataListSelectionChangeHandle"
         @sort-change="dataListSortChangeHandle"
-        style="width: 100%;">
+        style="width: 100%"
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+      >
-        <el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column>
+        <el-table-column
-        <el-table-column prop="processInstanceId" :label="$t('running.id')" header-align="center" align="center"></el-table-column>
+          type="selection"
-        <el-table-column prop="processDefinitionName" :label="$t('process.processDefinitionName')" header-align="center" align="center"></el-table-column>
+          header-align="center"
-        <el-table-column prop="startTime" :label="$t('process.startTime')" header-align="center" align="center"></el-table-column>
+          align="center"
-        <el-table-column prop="taskName" :label="$t('process.taskName')" header-align="center" align="center"></el-table-column>
+          width="50"
-        <el-table-column prop="createTime" :label="$t('process.createTime')" header-align="center" align="center"></el-table-column>
+        ></el-table-column>
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+        <el-table-column
+          prop="businessKey"
+          :label="$t('process.businessKey')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="processInstanceId"
+          :label="$t('running.id')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="processDefinitionName"
+          :label="$t('process.processDefinitionName')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="startTime"
+          :label="$t('process.startTime')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="taskName"
+          :label="$t('process.taskName')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createTime"
+          :label="$t('process.createTime')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
           <template slot-scope="scope">
-            <el-button type="text" size="small" @click="claimTask(scope.row.taskId, scope.row.processDefinitionKey, scope.row.businessKey)">{{ $t('process.claim') }}</el-button>
+            <el-button
-            <el-button type="text" size="small" @click="showDetail(scope.row)">{{ $t('process.viewFlowImage') }}</el-button>
+              type="text"
+              size="small"
+              @click="
+                claimTask(
+                  scope.row.taskId,
+                  scope.row.processDefinitionKey,
+                  scope.row.businessKey
+                )
+              "
+              >{{ $t("process.claim") }}</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="showDetail(scope.row)"
+              >{{ $t("process.viewFlowImage") }}</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -37,59 +105,62 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
       </el-pagination>
     </div>
   </el-card>
 </template>
 
 <script>
-import mixinViewModule from '@/mixins/view-module'
+import mixinViewModule from "@/mixins/view-module";
-import processModule from '@/mixins/process-module'
+import processModule from "@/mixins/process-module";
-import qs from 'qs'
+import qs from "qs";
 export default {
   mixins: [mixinViewModule, processModule],
   data() {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/act/task/page',
+        getDataListURL: "/act/task/page",
         getDataListIsPage: true,
         deleteIsBatch: true,
-        deleteIsBatchKey: 'deploymentId'
+        deleteIsBatchKey: "deploymentId",
       },
       dataForm: {
-        isRoleGroup: '1',
+        isRoleGroup: "1",
-        taskName: ''
+        taskName: "",
-      }
-    }
       },
-  components: {
+    };
   },
+  components: {},
   methods: {
     claimTask(taskId, processDefinitionKey, businessKey) {
       var params = qs.stringify({
-        'taskId': taskId
+        taskId: taskId,
-      })
+      });
-      this.$http.post(`/act/task/claim`, params).then(({ data: res }) => {
+      this.$http
+        .post(`/act/task/claim`, params)
+        .then(({ data: res }) => {
           if (res.code !== 0) {
-          return this.$message.error(res.msg)
+            return this.$message.error(res.msg);
           }
           this.$message({
-          message: this.$t('prompt.success'),
+            message: this.$t("prompt.success"),
-          type: 'success',
+            type: "success",
             duration: 500,
             onClose: () => {
-            this.getDataList()
+              this.getDataList();
-          }
+            },
+          });
         })
-      }).catch(() => {})
+        .catch(() => {});
     },
     showDetail(row) {
       if (!row.businessKey) {
-        return this.$message.error(this.$t('task.detailError'))
+        return this.$message.error(this.$t("task.detailError"));
-      }
-      this.getProcDefRouteSet(row, this.forwardDetail)
-    }
-  }
       }
+      this.getProcDefRouteSet(row, this.forwardDetail);
+    },
+  },
+};
 </script>

back/src/views/modules/activiti/my-todo-task.vue

@@ -8,12 +8,22 @@
 <template>
   <el-card shadow="never" class="aui-card--fill">
     <div class="mod-activiti__process">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
         <el-form-item>
-          <el-input v-model="dataForm.taskName" :placeholder="$t('process.name')" clearable></el-input>
+          <el-input
+            v-model="dataForm.taskName"
+            :placeholder="$t('process.name')"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+          <el-button type="primary" @click="getDataList()">{{
+            $t("query")
+          }}</el-button>
         </el-form-item>
       </el-form>
       <el-table
@@ -22,28 +32,82 @@
         border
         @selection-change="dataListSelectionChangeHandle"
         @sort-change="dataListSortChangeHandle"
-        style="width: 100%;">
+        style="width: 100%"
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+      >
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50"
+        ></el-table-column>
         <el-table-column label="申请人" header-align="center" align="center">
           <template slot-scope="scope">
-            <span>{{scope.row.params && scope.row.params.user||scope.row.params && scope.row.params.applyUserName||scope.row.params && scope.row.params.userName||scope.row.params && scope.row.params.undercarriageUserName}}</span>
+            <span>{{
+              (scope.row.params && scope.row.params.user) ||
+              (scope.row.params && scope.row.params.applyUserName) ||
+              (scope.row.params && scope.row.params.userName) ||
+              (scope.row.params && scope.row.params.undercarriageUserName)
+            }}</span>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('process.system')" header-align="center" align="center">
+        <el-table-column
+          :label="$t('process.system')"
+          header-align="center"
+          align="center"
+        >
           <template slot-scope="scope">
-            <span>{{scope.row.params && scope.row.params.system||scope.row.params && scope.row.params.demandSubject||scope.row.params && scope.row.params.resourceDTO && scope.row.params.resourceDTO.name||scope.row.params && scope.row.params.undercarriageReason}}</span>
+            <span>{{
+              (scope.row.params && scope.row.params.system) ||
+              (scope.row.params && scope.row.params.demandSubject) ||
+              (scope.row.params &&
+                scope.row.params.resourceDTO &&
+                scope.row.params.resourceDTO.name) ||
+              (scope.row.params && scope.row.params.undercarriageReason)
+            }}</span>
           </template>
         </el-table-column>
         <!-- <el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column>
         <el-table-column prop="processInstanceId" :label="$t('running.id')" header-align="center" align="center"></el-table-column> -->
-        <el-table-column prop="processDefinitionName" :label="$t('process.processDefinitionName')" header-align="center" align="center"></el-table-column>
+        <el-table-column
-        <el-table-column prop="taskName" :label="$t('process.taskName')" header-align="center" align="center"></el-table-column>
+          prop="processDefinitionName"
+          :label="$t('process.processDefinitionName')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="taskName"
+          :label="$t('process.taskName')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
         <!-- <el-table-column prop="startTime" :label="$t('process.startTime')" header-align="center" align="center"></el-table-column> -->
-        <el-table-column prop="createTime" :label="$t('process.createTime')" header-align="center" align="center"></el-table-column>
+        <el-table-column
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          prop="createTime"
+          :label="$t('process.createTime')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
           <template slot-scope="scope">
-            <el-button type="text" size="small" :processInstanceId="processInstanceId" @click="taskHandle(scope.row ) ">{{ $t('manage') }}</el-button>
+            <el-button
-            <el-button type="text" size="small" @click="taskDetail(scope.row)">{{ $t('process.viewFlowImage') }}</el-button>
+              type="text"
+              size="small"
+              :processInstanceId="processInstanceId"
+              @click="taskHandle(scope.row)"
+              >{{ $t("manage") }}</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="taskDetail(scope.row)"
+              >{{ $t("process.viewFlowImage") }}</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -54,49 +118,49 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
       </el-pagination>
     </div>
   </el-card>
 </template>
 
 <script>
-import mixinViewModule from '@/mixins/view-module'
+import mixinViewModule from "@/mixins/view-module";
-import processModule from '@/mixins/process-module'
+import processModule from "@/mixins/process-module";
 export default {
   mixins: [mixinViewModule, processModule],
   data() {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/act/task/myToDoTaskPage',
+        getDataListURL: "/act/task/myToDoTaskPage",
         getDataListIsPage: true,
         activatedIsNeed: true,
         deleteIsBatch: true,
-        deleteIsBatchKey: 'deploymentId'
+        deleteIsBatchKey: "deploymentId",
       },
       dataForm: {
-        taskName: '',
+        taskName: "",
-        taskId: ''
+        taskId: "",
       },
-      processInstanceId: ''
+      processInstanceId: "",
-    }
+    };
-  },
-  components: {
   },
+  components: {},
   methods: {
     // 处理
     taskHandle(row) {
       if (!row.businessKey) {
-        return this.$message.error(this.$t('task.businessKeyError'))
+        return this.$message.error(this.$t("task.businessKeyError"));
       }
-      this.getProcDefRouteSet(row, this.forwardHandleUrl)
+      this.getProcDefRouteSet(row, this.forwardHandleUrl);
     },
     taskDetail(row) {
       if (!row.businessKey) {
-        return this.$message.error(this.$t('task.detailError'))
+        return this.$message.error(this.$t("task.detailError"));
-      }
-      this.getProcDefRouteSet(row, this.forwardTaskDetail)
-    }
-  }
       }
+      this.getProcDefRouteSet(row, this.forwardTaskDetail);
+    },
+  },
+};
 </script>

back/src/views/modules/activiti/my-work-dynamics.vue

@@ -664,6 +664,11 @@ export default {
 };
 </script>
 <style scoped lang="scss">
+::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #0058e1; //#3E8EF7
+  border-color: #0058e1;
+}
 .avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;
@@ -707,25 +712,25 @@ export default {
 }
 .preview-dialog {
   width: 100%;
-  height: 723px;
+  height: 700px;
   overflow: auto;
-  /* 滚动条凹槽的颜色，还可以设置边框属性 */
+  padding: 10px 10px;
-  ::-webkit-scrollbar-track-piece {
+  /*滚动条样式*/
-    background-color: #f8f8f8;
+  &::-webkit-scrollbar {
-    -webkit-border-radius: 2em;
+    width: 6px;
-    -moz-border-radius: 2em;
-    border-radius: 2em;
   }
-
+  &::-webkit-scrollbar-thumb {
-  /* 滚动条的宽度 */
+    border-radius: 5;
-  ::-webkit-scrollbar {
+    background: rgba(0, 0, 0, 0.25);
-    width: 7px;
+  }
-    height: 7px;
+  &::-webkit-scrollbar-track {
+    border-radius: 0;
+    background: #f2f2f2;
   }
 
   .preview-title {
     width: 100%;
-    height: 100px;
+    height: 90px;
     //margin-top: -40px;
     border-bottom: solid #c6c6c6 1px;
     .title-text {
@@ -743,7 +748,7 @@ export default {
       line-height: 30px;
       span {
         font-size: 16px;
-        color: #212121;
+        color: #606266;
       }
     }
   }
@@ -753,11 +758,20 @@ export default {
     text-align: left;
     margin-top: 24px;
     text-indent: 2em;
+    span:first-child {
+      font-size: 16px;
+      color: #606266;
+    }
+    span:last-child {
+      font-size: 16px;
+      color: #212121;
+      line-height: 30px;
+    }
   }
   .preview-image {
     width: 900px;
     //height: 100%;
-    margin-top: 16px;
+    //margin-top: 16px;
     padding-top: 5px;
     text-align: center;
     padding-left: 300px;
@@ -769,10 +783,6 @@ export default {
     span {
       font-size: 16px;
       color: #212121;
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-line-clamp: 5;
-      -webkit-box-orient: vertical;
     }
   }
 }