拉取

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;
     }
   }
 }

back/src/views/modules/project/contribute.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-pay__order">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-input v-model="dataForm.orderId" :placeholder="$t('order.orderId')" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="dataForm.userId" :placeholder="$t('order.userId')" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <ren-select v-model="dataForm.status" dict-type="order_status" :placeholder="$t('order.status')"></ren-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
+        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column prop="orderId" :label="$t('order.orderId')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="productName" :label="$t('order.productName')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="payAmount" :label="$t('order.payAmount')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="status" :label="$t('order.status')" header-align="center" align="center">
+          <template slot-scope="scope">
+            {{ $getDictLabel("order_status", scope.row.status) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="payAt" :label="$t('order.payAt')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="createDate" :label="$t('order.createDate')" 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 v-if="scope.row.status === 0" type="text" size="small" @click="payHandle(scope.row.orderId)">{{ $t('order.pay') }}</el-button>
+            <el-button v-if="scope.row.status === 0" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <!-- <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 AddOrUpdate from './order-add-or-update'
+import {addDynamicRoute} from "@/router";
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/pay/order/page',
+        getDataListIsPage: true,
+        deleteURL: '/pay/order',
+        deleteIsBatch: true
+      },
+      dataForm: {
+        orderId: '',
+        status: '',
+        userId: ''
+      }
+    }
+  },
+  components: {
+    // AddOrUpdate
+  },
+  methods: {
+    payHandle (orderId) {
+      window.open(`${window.SITE_CONFIG['apiURL']}/pay/alipay/webPay?orderId=` + orderId);
+    }
+  }
+}
+</script>

back/src/views/modules/project/list.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-pay__order">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-input v-model="dataForm.orderId" :placeholder="$t('order.orderId')" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="dataForm.userId" :placeholder="$t('order.userId')" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <ren-select v-model="dataForm.status" dict-type="order_status" :placeholder="$t('order.status')"></ren-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
+        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column prop="orderId" :label="$t('order.orderId')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="productName" :label="$t('order.productName')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="payAmount" :label="$t('order.payAmount')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="status" :label="$t('order.status')" header-align="center" align="center">
+          <template slot-scope="scope">
+            {{ $getDictLabel("order_status", scope.row.status) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="payAt" :label="$t('order.payAt')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="createDate" :label="$t('order.createDate')" 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 v-if="scope.row.status === 0" type="text" size="small" @click="payHandle(scope.row.orderId)">{{ $t('order.pay') }}</el-button>
+            <el-button v-if="scope.row.status === 0" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <!-- <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 AddOrUpdate from './order-add-or-update'
+import {addDynamicRoute} from "@/router";
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/pay/order/page',
+        getDataListIsPage: true,
+        deleteURL: '/pay/order',
+        deleteIsBatch: true
+      },
+      dataForm: {
+        orderId: '',
+        status: '',
+        userId: ''
+      }
+    }
+  },
+  components: {
+    // AddOrUpdate
+  },
+  methods: {
+    payHandle (orderId) {
+      window.open(`${window.SITE_CONFIG['apiURL']}/pay/alipay/webPay?orderId=` + orderId);
+    }
+  }
+}
+</script>

back/src/views/modules/project/use.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-pay__order">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-input v-model="dataForm.orderId" :placeholder="$t('order.orderId')" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="dataForm.userId" :placeholder="$t('order.userId')" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <ren-select v-model="dataForm.status" dict-type="order_status" :placeholder="$t('order.status')"></ren-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
+        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column prop="orderId" :label="$t('order.orderId')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="productName" :label="$t('order.productName')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="payAmount" :label="$t('order.payAmount')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="status" :label="$t('order.status')" header-align="center" align="center">
+          <template slot-scope="scope">
+            {{ $getDictLabel("order_status", scope.row.status) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="payAt" :label="$t('order.payAt')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="createDate" :label="$t('order.createDate')" 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 v-if="scope.row.status === 0" type="text" size="small" @click="payHandle(scope.row.orderId)">{{ $t('order.pay') }}</el-button>
+            <el-button v-if="scope.row.status === 0" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <!-- <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 AddOrUpdate from './order-add-or-update'
+import {addDynamicRoute} from "@/router";
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/pay/order/page',
+        getDataListIsPage: true,
+        deleteURL: '/pay/order',
+        deleteIsBatch: true
+      },
+      dataForm: {
+        orderId: '',
+        status: '',
+        userId: ''
+      }
+    }
+  },
+  components: {
+    // AddOrUpdate
+  },
+  methods: {
+    payHandle (orderId) {
+      window.open(`${window.SITE_CONFIG['apiURL']}/pay/alipay/webPay?orderId=` + orderId);
+    }
+  }
+}
+</script>

front/public/static/config/location.js

@@ -0,0 +1,99 @@
+/*
+ * @Author: hisense.wuhongjian
+ * @Date: 2020-07-07 16:03:23
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-04-01 10:51:45
+ * @Description: 数据资源参数配置
+ */
+// const newLocation = 'qingdao'
+const newLocation = 'baotou'
+// const newLocation = 'xihaian'
+
+// 数据资源数据
+const launchedDataNumObject = {}
+// 导航数据
+const navListManagement = {}
+// qingdao
+if (newLocation === 'qingdao') {
+  // 数据资源数据
+  launchedDataNumObject.launchedDataNum = [
+    {
+      num: 10374,
+    },
+    {
+      num: 1080,
+    },
+    {
+      num: 976,
+    },
+  ]
+  // 导航数据
+  navListManagement.navList = [
+    { name: '共享门户', key: 'home' },
+    { name: '能力集市', key: 'DetailsPageconetent' },
+    { name: '能力云图', key: 'capabilityCloud' },
+    { name: '能力统计', key: 'abilityStatistics' },
+    { name: '开发指南', key: 'developmentGuide' },
+    { name: '需求中心', key: 'demandCenter' },
+    // { name: '个人中心', key: 'personalCenter' },
+    { name: '区市站点', key: 'mapTest' },
+    // { name: '后台管理', key: 'houtaiguanli' },
+    { name: '赋能案例', key: 'assignCase' },
+  ]
+}
+// baotou
+else if (newLocation === 'baotou') {
+  // 数据资源数据
+  launchedDataNumObject.launchedDataNum = [
+    {
+      num: 10373,
+    },
+    {
+      num: 1080,
+    },
+    {
+      num: 976,
+    },
+  ]
+  // 导航数据
+  navListManagement.navList = [
+    { name: '共享门户', key: 'home' },
+    { name: '能力集市', key: 'DetailsPageconetent' },
+    { name: '能力云图', key: 'capabilityCloud' },
+    { name: '能力统计', key: 'abilityStatistics' },
+    { name: '开发指南', key: 'developmentGuide' },
+    { name: '需求中心', key: 'demandCenter' },
+    // { name: '个人中心', key: 'personalCenter' },
+    // { name: '区市站点', key: 'mapTest' },
+    // { name: '后台管理', key: 'houtaiguanli' },
+    { name: '赋能案例', key: 'assignCase' },
+  ]
+}
+// xihaian
+else if (newLocation === 'xihaian') {
+  // 数据资源数据
+  launchedDataNumObject.launchedDataNum = [
+    {
+      num: 10372,
+    },
+    {
+      num: 1080,
+    },
+    {
+      num: 976,
+    },
+  ]
+  // 导航数据
+  navListManagement.navList = [
+    { name: '共享门户', key: 'home' },
+    { name: '能力集市', key: 'DetailsPageconetent' },
+    { name: '能力云图', key: 'capabilityCloud' },
+    { name: '能力统计', key: 'abilityStatistics' },
+    { name: '开发指南', key: 'developmentGuide' },
+    { name: '需求中心', key: 'demandCenter' },
+    // { name: '个人中心', key: 'personalCenter' },
+    // { name: '区市站点', key: 'mapTest' },
+    // { name: '后台管理', key: 'houtaiguanli' },
+    { name: '赋能案例', key: 'assignCase' },
+  ]
+}

front/src/router/index.js

@@ -138,6 +138,16 @@ export const constantRoutes = [
       icon: 'error-warning-line',
     },
   },
+  {
+    path: '/mynoticeView',
+    name: 'mynoticeView',
+    hidden: true,
+    component: () => import('@/views/mynoticeView'),
+    meta: {
+      title: '我的消息',
+      icon: 'error-warning-line',
+    },
+  },
   {
     path: '/WorkDynDetails',
     name: 'WorkDynDetails',

front/src/views/capabilityCloud/components/DataResources.vue

@@ -143,7 +143,7 @@
       //
       assignRankings.value[i - 1].name =
         contentData.value.resourceTop5[i - 1].service_name || ''
-      assignRankings.value[i - 1].opacity =
+      assignRankings.value[i - 1].operation =
         contentData.value.resourceTop5[i - 1].count || ' '
     }
   })

front/src/views/detailsAll/components/Business/BusinessApplicationCase.vue

@@ -215,6 +215,7 @@
           flex-direction: column;
           align-items: center;
           margin-right: 1rem;
+          text-align: center;
           .tab-top {
             min-width: 1.2rem;
             font-size: 0.24rem;

front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue

@@ -145,6 +145,7 @@
           display: flex;
           flex-direction: column;
           align-items: center;
+          text-align: center;
           margin-right: 1rem;
           .tab-top {
             min-width: 1.2rem;

front/src/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue

@@ -146,6 +146,7 @@
           flex-direction: column;
           align-items: center;
           margin-right: 1rem;
+          text-align: center;
           .tab-top {
             min-width: 1.2rem;
             font-size: 0.24rem;

front/src/views/detailsAll/components/Business/BusinessNavigation.vue

@@ -121,7 +121,7 @@
         // 排序
         // eslint-disable-next-line vue/no-mutating-props
         props.dataList.infoList.sort((a, b) => {
-          console.log('排序==============>', a, b)
+          // console.log('排序==============>', a, b)
           return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
         })
         val.infoList.map((item) => {

front/src/views/detailsAll/components/Business/BusinessPresentation.vue

@@ -3,15 +3,17 @@
  * @Date: 2022-06-08 15:25:33
  * @LastEditors: hisense.liangjunhua
  * @LastEditTime: 2022-06-14 11:30:52
- * @Description: 组件展示  视频播放
+ * @Description: 应用展示  视频播放
 -->
 <template>
-  <div class="business-presentation" v-if="flag">
+  <div class="application-presentation" v-if="flag">
     <detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
-    <div class="main">
+    <div
-      <img :src="leftImg" />
+      class="main"
+      :style="`${img}background-position:center;background-size:cover;`"
+    >
+      <!-- <a-image :src="img"></a-image> -->
       <div class="play" @click="showModal"></div>
-      <img :src="rightImg" />
     </div>
     <a-modal
       v-model:visible="visible"
@@ -31,8 +33,6 @@
 <script setup>
   import { ref, reactive, defineProps, watch } from 'vue'
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
-  const leftImg = require('@/assets/detailsAll/business/business_previous.png')
-  const rightImg = require('@/assets/detailsAll/business/business_next.png')
   const visible = ref(false)
   const options = reactive({
     width: '7.00rem', //播放器宽度
@@ -67,6 +67,7 @@
     dataList: { type: Object, default: null },
   })
   const flag = ref(true)
+  const img = ref({})
   console.log('111111111111111111111,', props.dataList)
   if (props.dataList.infoList) {
     let obj = props.dataList.infoList.filter(
@@ -76,7 +77,13 @@
     if (!obj) {
       flag.value = false
     } else {
+      let imgindex = props.dataList.infoList.filter(
+        (item) => item.attrType === '组件图片'
+      )[0]
       options.src = obj.attrValue
+      if (imgindex) {
+        img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+      }
     }
   }
   watch(
@@ -90,29 +97,31 @@
         if (!obj) {
           flag.value = false
         } else {
+          let imgindex = props.dataList.infoList.filter(
+            (item) => item.attrType === '组件图片'
+          )[0]
           options.src = obj.attrValue
+          if (imgindex) {
+            img.value =
+              'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+          }
         }
       }
     }
   )
 </script>
 <style lang="less" scoped>
-  .business-presentation {
+  .application-presentation {
-    padding: 0.8rem 3rem 0.8rem;
+    padding: 0.8rem 3rem 0;
-    background: url('~@/assets/detailsAll/business/business_module_bg.png')
-      no-repeat;
-    background-size: 100% 100%;
     .main {
       height: 3.4rem;
       border-radius: 0.1rem;
-      background: url('~@/assets/detailsAll/business/business_element_content.png')
+      background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
-        no-repeat center;
+      background-size: 100%;
-      background-size: 50% 100%;
       margin-top: 0.4rem;
       display: flex;
       justify-content: center;
       align-items: center;
-      position: relative;
       .play {
         width: 0.96rem;
         height: 0.96rem;
@@ -120,18 +129,6 @@
         background-size: 100%;
         cursor: pointer;
       }
-      img {
-        position: absolute;
-        top: 1.3rem;
-        left: 0.4rem;
-        cursor: pointer;
-      }
-      img:last-of-type {
-        position: absolute;
-        top: 1.3rem;
-        left: unset;
-        right: 0.4rem;
-      }
     }
   }
 </style>

front/src/views/detailsAll/components/Business/BusinessUsageMode.vue

@@ -12,22 +12,17 @@
         <div class="left">
           <div class="content-left-title">
             <span>{{ item.title }}</span>
-            <span>{{ item.titleSon }}</span>
           </div>
           <div class="content-left-content">
             <p>
               <span>{{ item.link.name }}</span>
-              <span>{{ item.link.value }}</span>
+              <span>{{ item.linkValue }}</span>
-            </p>
-            <p>
-              <span>{{ item.postMethod.name }}</span>
-              <span>{{ item.postMethod.value }}</span>
             </p>
           </div>
         </div>
         <div class="right">
           <div @click="technical()">技术文档</div>
-          <div>新手指引</div>
+          <div @click="technicalNew()">新手指引</div>
         </div>
       </div>
       <div class="content-right">
@@ -51,20 +46,20 @@
           </div>
         </div>
         <div class="content-right-right">
-          <div class="content-right-title">{{ item.contact }}</div>
+          <div class="content-right-title">{{ item.contact2 }}</div>
           <div class="content-right-content">
             <p>
-              <span>{{ item.people.name }}</span>
+              <span>{{ item.people2.name }}</span>
               <a-tooltip>
-                <template #title>{{ item.people.value }}</template>
+                <template #title>{{ item.people2.value }}</template>
-                <span>{{ item.people.value }}</span>
+                <span>{{ item.people2.value }}</span>
               </a-tooltip>
             </p>
             <p>
-              <span>{{ item.phone.name }}</span>
+              <span>{{ item.phone2.name }}</span>
               <a-tooltip>
-                <template #title>{{ item.phone.value }}</template>
+                <template #title>{{ item.phone2.value }}</template>
-                <span>{{ item.phone.value }}</span>
+                <span>{{ item.phone2.value }}</span>
               </a-tooltip>
             </p>
           </div>
@@ -83,26 +78,27 @@
     englishTitle: 'USAGE',
     content: [
       {
-        title: '技术对接',
+        title: '组件地址',
-        titleSon: '调用接口',
         link: {
           name: '接口地址：',
-          value: 'http://localhost:9999/#/details?id=1532278256619307010',
         },
-        postMethod: {
+        linkValue: '',
-          name: '请求方式：',
+        contact: '归属部门',
-          value: 'POST',
+        facilitator: { name: '归属部门：', value: '讯飞科大' },
-        },
+        people: { name: '部门联系人：', value: '李四' },
-        contact: '联系厂商：',
-        facilitator: { name: '服务商：', value: '科大讯飞' },
-        people: { name: '联系人：', value: '李四' },
         phone: {
-          name: '联系电话：',
+          name: '联系人电话：',
           value: '12345678901',
         },
+        contact2: '服务商',
+        facilitator2: { name: '服务商：', value: '科大讯飞' },
+        people2: { name: '服务商联系人：', value: '李四' },
+        phone2: {
+          name: '联系人电话：',
+          value: '1234567890',
+        },
       },
     ],
-    link: '',
   })
   //数据初始化
   const props = defineProps({
@@ -118,20 +114,17 @@
     } else {
       // eslint-disable-next-line vue/no-setup-props-destructure
       dataFrom.value.content[0].link.value = props.dataList.apiUrl
-      // eslint-disable-next-line vue/no-setup-props-destructure
+      dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
-      dataFrom.value.content[0].postMethod.value = props.dataList.apiMethodType
       console.log('dataList', props.dataList)
       props.dataList.infoList.map((item) => {
-        if (item.attrType === '使用方式') {
+        if (item.attrType === '组件地址') {
-          dataFrom.value.content[0].titleSon = item.attrValue
+          dataFrom.value.content[0].linkValue = item.attrValue || '--'
         } else if (item.attrType === '服务商') {
           dataFrom.value.content[0].facilitator.value = item.attrValue || '--'
         } else if (item.attrType === '服务商联系人') {
           dataFrom.value.content[0].people.value = item.attrValue || '--'
         } else if (item.attrType === '服务商联系电话') {
           dataFrom.value.content[0].phone.value = item.attrValue || '--'
-        } else if (item.attrType === '技术文档') {
-          dataFrom.value.link = item.attrValue || '--'
         }
       })
     }
@@ -145,11 +138,11 @@
           flag.value = false
         } else {
           dataFrom.value.content[0].link.value = val.apiUrl
-          dataFrom.value.content[0].postMethod.value = val.apiMethodType
+          dataFrom.value.content[0].facilitator.value = val.deptContacts
           console.log('dataList', val)
           val.infoList.map((item) => {
-            if (item.attrType === '使用方式') {
+            if (item.attrType === '组件地址') {
-              dataFrom.value.content[0].titleSon = item.attrValue
+              dataFrom.value.content[0].linkValue = item.attrValue || '--'
             } else if (item.attrType === '服务商') {
               dataFrom.value.content[0].facilitator.value =
                 item.attrValue || '--'
@@ -157,8 +150,6 @@
               dataFrom.value.content[0].people.value = item.attrValue || '--'
             } else if (item.attrType === '服务商联系电话') {
               dataFrom.value.content[0].phone.value = item.attrValue || '--'
-            } else if (item.attrType === '技术文档') {
-              dataFrom.value.link = item.attrValue || '--'
             }
           })
         }
@@ -180,6 +171,21 @@
     //     btoa(encodeURI(dataFrom.value.link))
     // )
   }
+  function technicalNew() {
+    // 拼接路径
+    // const type = pinyin(props.dataList.type, {
+    //   pattern: 'initial',
+    // }).replace(/\s*/g, '')
+    // // 打开文档
+    // const id = props.dataList.id
+    // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
+    console.log('dataFrom.value.link', dataFrom.value.link)
+    window.open(
+      window.SITE_CONFIG.previewUrl +
+        'hisense_office/onlinePreview?url=' +
+        btoa(encodeURI(dataFrom.value.link))
+    )
+  }
 </script>
 
 <style lang="less" scoped>

front/src/views/home/DetailsPageconetent.vue

@@ -4,7 +4,7 @@
     <div class="details-pageconetent-left">
       <detailsPageconetentTree />
     </div>
-    <div class="top" v-if="Cardsname != '知识库'">
+    <div class="top" v-if="Cardsname != '知识库' && Cardsname != '数据资源'">
       <div class="top-title">
         <div
           v-for="item in titleName"
@@ -257,7 +257,7 @@
         </div> -->
         <VideoSurveillance></VideoSurveillance>
       </div>
-      <div class="shujuziyuan" v-if="Cardsname == '数据资源'">
+      <!-- <div class="shujuziyuan" v-if="Cardsname == '数据资源'">
         <div class="yunziyuan">
           <div class="yunziyuan-title">
             <div class="tupian"></div>
@@ -279,13 +279,33 @@
             说明：数据资源目前通过青岛市政务信息网进行申请
           </div>
         </div>
-      </div>
+      </div> -->
       <div v-if="resourceList.data?.length <= 0" style="margin-top: 2rem">
         <a-empty
           v-if="!(Cardsname == '基础设施') && !(Cardsname == '数据资源')"
         />
       </div>
     </div>
+    <div class="top" v-else-if="Cardsname == '数据资源'">
+      <div class="top-title">
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
+          <span>{{ item.name }}</span>
+        </div>
+      </div>
+      <details-page-resource></details-page-resource>
+    </div>
     <div class="top" v-else>
       <div class="top-title">
         <div
@@ -359,6 +379,8 @@
   import searchResultList from '@/views/home/components/searchResultList.vue'
   import KnowledgeBase from '@/views/home/components/KnowledgeBase.vue'
   import VideoSurveillance from '@/views/home/videoSurveillance'
+  // 数据资源引用
+  import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
   export default defineComponent({
     setup() {
       // const store = useStore()
@@ -950,6 +972,7 @@
       KnowledgeBase,
       // VideoCameraOutlined,
       VideoSurveillance,
+      DetailsPageResource,
     },
     beforeUnmount() {
       mybus.off('selectCardsitem')

front/src/views/home/components/DetailsPageResource.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="pageResource">
+    <div class="left">
+      <img :src="leftImg" alt="" />
+    </div>
+    <div class="right">
+      <div class="launchedList">
+        <div v-for="(item, index) in launchedData" :key="index">
+          <img :src="item.img" alt="" />
+          <h3>{{ item.title }}</h3>
+          <p>
+            {{ item.num }}
+            <span>条</span>
+          </p>
+        </div>
+      </div>
+      <p>
+        政府机构内不同部门间系统的数据存在“信息孤岛”、“数据烟囱”等现象，以数据应用为抓手，通过政务数据共享交换平台，进一步打通数据流，实现信息资源跨部门、跨层级、跨区域互联互通、业务协同和综合应用，满足政府企业部门多方位、多层次的数据需求。
+      </p>
+      <div class="application" @click="OnApplication">
+        <span>在线申请</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  // import { useRouter } from 'vue-router'
+  // import { useStore } from 'vuex'
+  const leftImg = require('@/assets/home/pageResource/left.png')
+  const launchedData = ref([
+    {
+      title: '已上线目录',
+      num: launchedDataNumObject.launchedDataNum[0].num,
+      img: require('@/assets/home/pageResource/catalogue-icon.png'),
+    },
+    {
+      title: '已发布服务',
+      num: launchedDataNumObject.launchedDataNum[1].num,
+      img: require('@/assets/home/pageResource/service-icon.png'),
+    },
+    {
+      title: '已发布接口',
+      num: launchedDataNumObject.launchedDataNum[2].num,
+      img: require('@/assets/home/pageResource/port-icon.png'),
+    },
+  ])
+  const OnApplication = () => {
+    window.open('https://10.110.205.1:18199/portal/#/home')
+  }
+</script>
+
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'Medium';
+    src: url('~@/assets/home/font/Alibaba-PuHuiTi-Medium.otf');
+  }
+  // @font-face {
+  //   font-family: 'text-typeface';
+  //   src: url('~@/assets/home/font/text-typeface.otf');
+  // }
+  .pageResource {
+    position: absolute;
+    top: 0.68rem;
+    left: -5.37rem;
+    width: 176%;
+    height: 90.5%;
+    background: url(../../../assets/home/pageResource/bg.png) no-repeat center;
+    background-size: 100% 100%;
+    .left {
+      position: absolute;
+      top: 1.16rem;
+      left: 1.25rem;
+      width: 4.7rem;
+      height: 3rem;
+      img {
+        width: 100%;
+      }
+    }
+    .right {
+      position: absolute;
+      top: 0.5rem;
+      left: 7.6rem;
+      width: 60%;
+      .launchedList {
+        display: flex;
+        div {
+          width: 2.6rem;
+          height: 2.7rem;
+          margin-right: 0.4rem;
+          background: url(../../../assets/home/pageResource/catalogue-bg.png)
+            no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          img {
+            width: 0.8rem;
+            height: 0.8rem;
+          }
+          h3 {
+            margin: 0;
+            margin-top: 0.25rem;
+            font-size: 0.22rem;
+            color: #213162;
+            opacity: 0.8;
+          }
+          p {
+            margin: 0;
+            margin-top: 0.1rem;
+            font-size: 0.35rem;
+            font-weight: bold;
+            color: #0d165b;
+            span {
+              font-size: 0.2rem;
+              color: #213162;
+              font-weight: normal;
+            }
+          }
+        }
+        div:nth-of-type(2) {
+          background: url(../../../assets/home/pageResource/service-bg.png)
+            no-repeat;
+          background-size: 100% 100%;
+        }
+        div:nth-of-type(3) {
+          background: url(../../../assets/home/pageResource/port-bg.png)
+            no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+
+      .application {
+        width: 14%;
+        height: 0.6rem;
+        line-height: 0.6rem;
+        text-align: center;
+        border-radius: 0.1rem;
+        margin-top: 0.5rem;
+        background-image: linear-gradient(to right, #336cf6, #1cadfd);
+        box-shadow: 0.08rem 0.08rem 0.2rem 0 rgba(40, 140, 249, 0.4);
+        cursor: pointer;
+        span {
+          font-size: 0.22rem;
+          color: #ffffff;
+          font-family: 'Medium';
+        }
+      }
+    }
+    .right > p {
+      margin-top: 0.5rem;
+      font-size: 0.18rem;
+      width: 75%;
+      color: #4e586b;
+    }
+  }
+</style>

front/src/views/home/components/header.vue

@@ -59,20 +59,15 @@
       <a-list item-layout="horizontal" :data-source="mynoticeData">
         <template #renderItem="{ item }">
           <a-list-item>
-            <a-list-item-meta description="">
+            <a-list-item-meta :description="item.senderDate">
               <template #title>
-                <a-tooltip placement="left">
+                <a>{{ item.content }}</a>
-                  <template #title>{{ item.content }}</template>
-                  <a>{{ item.title }}</a>
-                </a-tooltip>
-                <a-button type="primary" ghost @click="read(item)">
-                  设为已读
-                </a-button>
               </template>
             </a-list-item-meta>
           </a-list-item>
         </template>
       </a-list>
+      <div class="bottom" @click="goToView()">查看更多</div>
     </div>
     <div class="info">
       <i class="img"></i>
@@ -113,29 +108,30 @@
   import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue'
   import { recordRoute } from '@/config'
   import { useRoute, useRouter } from 'vue-router'
-  import { getUser, mynotice, mynoticeRead } from '@/api/home'
+  import { getUser, mynotice } from '@/api/home'
   import { useStore } from 'vuex'
   import { getSgcTotal } from '@/api/home'
   import mybus from '@/myplugins/mybus'
   const store = useStore()
   const router = useRouter()
   const route = useRoute()
-  const navList = ref([
+  // const navListManagement = ref([
-    { name: '共享门户', key: 'home' },
+  //   { name: '共享门户', key: 'home' },
-    { name: '能力集市', key: 'DetailsPageconetent' },
+  //   { name: '能力集市', key: 'DetailsPageconetent' },
-    { name: '能力云图', key: 'capabilityCloud' },
+  //   { name: '能力云图', key: 'capabilityCloud' },
-    { name: '能力统计', key: 'abilityStatistics' },
+  //   { name: '能力统计', key: 'abilityStatistics' },
-    { name: '开发指南', key: 'developmentGuide' },
+  //   { name: '开发指南', key: 'developmentGuide' },
-    { name: '需求中心', key: 'demandCenter' },
+  //   { name: '需求中心', key: 'demandCenter' },
-    // { name: '个人中心', key: 'personalCenter' },
+  //   // { name: '个人中心', key: 'personalCenter' },
-    { name: '区市站点', key: 'mapTest' },
+  //   { name: '区市站点', key: 'mapTest' },
-    // { name: '后台管理', key: 'houtaiguanli' },
+  //   // { name: '后台管理', key: 'houtaiguanli' },
-    { name: '赋能案例', key: 'assignCase' },
+  //   { name: '赋能案例', key: 'assignCase' },
-  ])
+  // ])
   const user = ref({})
   const select = ref(router.currentRoute.value.name)
   const mynoticeFlag = ref(false)
   const mynoticeData = ref([])
+  const navList = ref(navListManagement.navList)
   const props = defineProps({
     showView: { type: String, default: '' },
   })
@@ -243,15 +239,20 @@
     mynotice({ page: 1, limit: 999, readStatus: 0 }).then((res) => {
       console.log('我的消息', res.data.data)
       mynoticeNum.value = res.data.data.total
-      mynoticeData.value = res.data.data.list
+      mynoticeData.value = res.data.data.list.splice(0, 3)
     })
   }
-  const read = (item) => {
+  const goToView = () => {
-    mynoticeRead(item.id).then((res) => {
+    router.push({
-      console.log('已读', res)
+      path: '/mynoticeView',
-      getMynotice()
     })
   }
+  // const read = (item) => {
+  //   mynoticeRead(item.id).then((res) => {
+  //     console.log('已读', res)
+  //     getMynotice()
+  //   })
+  // }
   onMounted(() => {
     getSgcTotal().then((res) => {
       console.log('初始化========================>', res.data.data.count)
@@ -397,7 +398,7 @@
     }
   }
   .mynotice {
-    width: 2.5rem;
+    width: 4rem;
     height: 3rem;
     background: #eee;
     border-radius: 0.05rem;
@@ -405,24 +406,33 @@
     top: 0.45rem;
     right: 3.1rem;
     overflow-y: scroll;
+    .bottom {
+      cursor: pointer;
+      width: 100%;
+      text-align: center;
+      color: #000;
+      font-size: 0.16rem;
+    }
   }
   .mynotice::-webkit-scrollbar {
     display: none;
   }
   :deep(.ant-list-item) {
     border-bottom: 0.01rem solid #ccc;
+    padding: 0.1rem;
   }
   :deep(.ant-list-item-meta-title) {
-    display: flex;
+    // display: flex;
-    justify-content: space-around;
+    // justify-content: space-around;
-    align-items: center;
+    // align-items: center;
-    padding: 0 0.05rem;
+    // padding: 0 0.05rem;
     a {
-      width: 1.5rem;
+      width: 3.8rem;
-      // 超出显示...
       overflow: hidden;
       text-overflow: ellipsis;
-      white-space: nowrap;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
     }
     button {
       width: 0.7rem;

front/src/views/mynoticeView/components/NoticeList.vue

@@ -0,0 +1,260 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-21 11:55:07
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-21 16:52:02
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div class="notice-list">
+    <div class="top">
+      <div class="left">
+        <div
+          class="item"
+          :class="{ select: selectNav == nav.key }"
+          v-for="nav in navList"
+          :key="nav.key"
+        >
+          <i :class="nav.key" @click="changeNav(nav)"></i>
+          <div>{{ nav.title + '(' + nav.num + ')' }}</div>
+        </div>
+      </div>
+      <div class="right">
+        <div style="margin-right: 0.1rem">搜索</div>
+        <a-input
+          v-model:value="userName"
+          placeholder="请输入关键字"
+          style="margin-right: 0.1rem"
+        >
+          <template #suffix>
+            <search-outlined style="color: rgba(0, 0, 0, 0.45)" />
+          </template>
+        </a-input>
+        <a-button type="primary" style="margin-right: 0.1rem">搜索</a-button>
+        <div class="reset">重置</div>
+      </div>
+    </div>
+    <div class="btn">
+      <div class="left">
+        <a-select
+          ref="select"
+          v-model:value="value1"
+          style="width: 120px"
+          @focus="focus"
+          @change="handleChange"
+        >
+          <a-select-option value="全部消息">全部消息</a-select-option>
+          <a-select-option value="已读消息">已读消息</a-select-option>
+          <a-select-option value="未读消息">未读消息</a-select-option>
+        </a-select>
+        <div class="check">
+          <a-checkbox
+            v-model:checked="checked"
+            stlye="margin-right:0.3rem;"
+          ></a-checkbox>
+          <div>全选</div>
+          <div>
+            共
+            <span>2</span>
+            条消息
+          </div>
+        </div>
+      </div>
+      <div class="right">标记为已读</div>
+    </div>
+    <div class="main">
+      <a-list item-layout="horizontal" :data-source="data">
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <a-list-item-meta description="">
+              <template #title>
+                <div class="left">
+                  {{ item.title }}
+                </div>
+                <div class="right">{{ '发布时间：' + item.time }}</div>
+              </template>
+              <template #avatar>
+                <a-checkbox v-model:checked="checked"></a-checkbox>
+                <a-badge dot :offset="[-30, 5]">
+                  <a-avatar :src="item.src" />
+                </a-badge>
+                <!-- <a-avatar :src="item.src" /> -->
+              </template>
+            </a-list-item-meta>
+          </a-list-item>
+        </template>
+      </a-list>
+    </div>
+    <a-pagination v-model:current="current" :total="50" show-less-items />
+  </div>
+</template>
+<script setup>
+  import { SearchOutlined } from '@ant-design/icons-vue'
+  import { ref, reactive } from 'vue'
+  const navList = reactive([
+    {
+      title: '全部',
+      key: 'all',
+      num: 0,
+    },
+    {
+      title: '通知',
+      key: 'notice',
+      num: 0,
+    },
+    {
+      title: '评论',
+      key: 'comment',
+      num: 0,
+    },
+  ])
+  const selectNav = ref('all')
+  const data = ref([
+    {
+      title: 'Ant Design Title 1',
+      src: require('@/assets/mynoticeView/notice.png'),
+      time: '2020-06-21',
+    },
+    {
+      title: 'Ant Design Title 2',
+      src: require('@/assets/mynoticeView/notice.png'),
+      time: '2020-06-21',
+    },
+    {
+      title: 'Ant Design Title 3',
+      src: require('@/assets/mynoticeView/notice.png'),
+      time: '2020-06-21',
+    },
+    {
+      title: 'Ant Design Title 4',
+      src: require('@/assets/mynoticeView/notice.png'),
+      time: '2020-06-21',
+    },
+  ])
+  const changeNav = (nav) => {
+    selectNav.value = nav.key
+  }
+</script>
+<style lang="less" scoped>
+  .notice-list {
+    padding: 0.64rem 3.1rem 0.2rem;
+    .top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .left {
+        display: flex;
+        .item {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          margin-left: 1.28rem;
+          margin-bottom: 0.16rem;
+          border-bottom: 3px solid #fff;
+          i {
+            display: inline-block;
+            width: 0.48rem;
+            height: 0.48rem;
+            margin-bottom: 0.15rem;
+            cursor: pointer;
+          }
+          .all {
+            background: url('~@/assets/mynoticeView/all.png') no-repeat;
+            background-size: 100%;
+          }
+          .notice {
+            background: url('~@/assets/mynoticeView/notice.png') no-repeat;
+            background-size: 100%;
+          }
+          .comment {
+            background: url('~@/assets/mynoticeView/comment.png') no-repeat;
+            background-size: 100%;
+          }
+        }
+        .item:nth-of-type(1) {
+          margin-left: 0;
+        }
+        .select {
+          border-bottom: 3px solid #0058e1;
+          color: #0058e1;
+        }
+      }
+      .right {
+        display: flex;
+        align-items: center;
+        height: 0.32rem;
+        div {
+          width: 0.5rem;
+        }
+        .reset {
+          color: #0058e1;
+          cursor: pointer;
+        }
+      }
+    }
+    .btn {
+      display: flex;
+      justify-content: space-between;
+      .left {
+        display: flex;
+        align-items: center;
+        .ant-select {
+          margin-right: 0.24rem;
+        }
+        .check {
+          display: flex;
+          align-items: center;
+          div {
+            margin-left: 0.24rem;
+            span {
+              font-size: 18px;
+              color: #0058e1;
+            }
+          }
+          div:nth-of-type(1) {
+            margin-left: 0.12rem;
+          }
+        }
+      }
+      .right {
+        cursor: pointer;
+        color: #0058e1;
+        text-align: center;
+        align-self: center;
+        padding: 0.05rem 0.1rem;
+      }
+      .right:hover {
+        background: rgba(0, 88, 225, 0.1);
+      }
+    }
+    .main {
+      height: 5.67rem;
+      :deep(.ant-list-item-meta) {
+        display: flex;
+        align-items: center;
+        .ant-checkbox-wrapper {
+          margin-right: 0.3rem;
+        }
+        .ant-list-item-meta-title {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .left {
+            cursor: pointer;
+            width: 9.2rem;
+            max-height: 0.43rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+          }
+          .left:hover {
+            color: #0058e1;
+          }
+        }
+      }
+    }
+  }
+</style>

front/src/views/mynoticeView/index.vue

@@ -0,0 +1,18 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-21 11:50:28
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-21 11:56:37
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <new-home-header></new-home-header>
+  <notice-list></notice-list>
+  <home-footer></home-footer>
+</template>
+<script setup>
+  import NewHomeHeader from '@/views/home/components/header'
+  import NoticeList from '@/views/mynoticeView/components/NoticeList'
+  import HomeFooter from '@/views/newHome/components/Footer'
+</script>
+<style lang="less" scoped></style>

front/src/views/newHome/components/WorkDynList.vue

@@ -125,7 +125,6 @@
         .total-num-content {
           font-size: 14px;
           color: #212121;
-          margin: 18px 0 10px;
           border-bottom: 1px solid #dddee1;
           height: 35px;
           display: flex;
@@ -141,16 +140,11 @@
       }
       :deep(.ant-list-item) {
         width: 1300px;
-        padding: 16px 0;
+        padding: 30px 0;
         position: relative;
         border-bottom: #dddee1 solid 1px;
-        .ant-list-item-main {
+        .ant-list-item-meta {
-          height: 140px;
+          margin: 0;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 4;
         }
         .ant-list-item-meta-title {
           white-space: nowrap;
@@ -167,17 +161,18 @@
           overflow: hidden;
           text-overflow: ellipsis;
           display: -webkit-box;
-          -webkit-line-clamp: 4;
+          -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
         }
         .pulish-time {
           position: absolute;
           left: 196px;
-          bottom: 50px;
+          bottom: 35px;
           color: #212121;
         }
         .ant-image-img {
           width: 180px;
+          min-height: 120px;
         }
 
         &:hover {