人员管理

package.json

@@ -62,6 +62,7 @@
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
+    "vue-i18n": "7.3.2",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",

src/api/login.js

@@ -1,9 +1,9 @@
 import request from '@/utils/request'
 
 // 登录方法
-export function login(username, password, code, uuid) {
+export function login(account, password, code, uuid) {
   const data = {
-    username,
+    account,
     password,
     code,
     uuid

src/assets/styles/index.scss

@@ -122,6 +122,8 @@ aside {
 //main-container全局样式
 .app-container {
   padding: 20px;
+  margin: 20px;
+  background: rgb(255 255 255);
 }
 
 .components-container {

src/components/LangeSelect/index.vue

@@ -0,0 +1,35 @@
+<template>
+    <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
+      <div>
+        <svg-icon class-name="international-icon" icon-class="language" />
+      </div>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item :disabled="language==='zh'" command="zh">
+          中文
+        </el-dropdown-item>
+        <el-dropdown-item :disabled="language==='en'" command="en">
+          English
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </template>
+  
+  <script>
+  export default {
+    computed: {
+      language() {
+        return this.$store.getters.language
+      }
+    },
+    methods: {
+      handleSetLanguage(lang) {
+        this.$i18n.locale = lang
+        this.$store.dispatch('app/setLanguage', lang)
+        this.$message({
+          message: '设置语言成功',
+          type: 'success'
+        })
+      }
+    }
+  }
+  </script>

src/lang/en.js

@@ -0,0 +1,21 @@
+export default {
+    login: {
+      title: 'RuoYi Login Form',
+      logIn: 'Log in',
+      username: 'Username',
+      password: 'Password'
+    },
+    tagsView: {
+      refresh: 'Refresh',
+      close: 'Close',
+      closeOthers: 'Close Others',
+      closeAll: 'Close All'
+    },
+    settings: {
+      title: 'Page style setting',
+      theme: 'Theme Color',
+      tagsView: 'Open Tags-View',
+      fixedHeader: 'Fixed Header',
+      sidebarLogo: 'Sidebar Logo'
+    }
+  }

src/lang/index.js

@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import Cookies from 'js-cookie'
+import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
+import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
+import enLocale from './en'
+import zhLocale from './zh'
+
+Vue.use(VueI18n)
+
+const messages = {
+  en: {
+    ...enLocale,
+    ...elementEnLocale
+  },
+  zh: {
+    ...zhLocale,
+    ...elementZhLocale
+  }
+}
+
+const i18n = new VueI18n({
+  // 设置语言 选项 en | zh
+  locale: Cookies.get('language') || 'en',
+  // 设置文本内容
+  messages
+})
+
+export default i18n

src/lang/zh.js

@@ -0,0 +1,21 @@
+export default {
+    login: {
+      title: '若依后台管理系统',
+      logIn: '登录',
+      username: '账号',
+      password: '密码'
+    },
+    tagsView: {
+      refresh: '刷新',
+      close: '关闭',
+      closeOthers: '关闭其它',
+      closeAll: '关闭所有'
+    },
+    settings: {
+      title: '系统布局配置',
+      theme: '主题色',
+      tagsView: '开启 Tags-View',
+      fixedHeader: '固定 Header',
+      sidebarLogo: '侧边栏 Logo'
+    }
+  }

src/layout/components/AppMain.vue

@@ -33,6 +33,7 @@ export default {
   width: 100%;
   position: relative;
   overflow: hidden;
+  background-color:rgb(240 242 245) ;
 }
 
 .fixed-header + .app-main {

src/main.js

@@ -39,7 +39,8 @@ import VueMeta from 'vue-meta'
 import DictData from '@/components/DictData'
 
 import Tinymce from '@/components/tinymce/index.vue'
-
+//国际化
+import i18n from './lang/index'
 
 
 
@@ -67,6 +68,10 @@ Vue.component('tinymce', Tinymce)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
+// use添加i18n
+Vue.use(Element, {
+  i18n: (key, value) => i18n.t(key, value)
+})
 DictData.install()
 
 /**
@@ -88,5 +93,6 @@ new Vue({
   el: '#app',
   router,
   store,
+  i18n,
   render: h => h(App)
 })

src/router/index.js

@@ -166,6 +166,23 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/task',
+    component: Layout,
+    redirect: 'noRedirect',
+    hidden: false,
+    alwaysShow: true,
+    meta: { title: '任务管理', icon : "system" },
+    children: [{
+      path: 'index',
+      component: (resolve) => require(['@/views/taskManagement/todo/index'], resolve),
+      name: 'Test',
+      meta: {
+        title: '代办任务',
+        icon: 'user'
+      }
+    }]
+  }
 ]
 
 // 动态路由，基于用户权限动态去加载

src/store/getters.js

@@ -15,5 +15,6 @@ const getters = {
   topbarRouters:state => state.permission.topbarRouters,
   defaultRoutes:state => state.permission.defaultRoutes,
   sidebarRouters:state => state.permission.sidebarRouters,
+  language: state => state.app.language,
 }
 export default getters

src/store/modules/app.js

@@ -7,7 +7,8 @@ const state = {
     hide: false
   },
   device: 'desktop',
-  size: Cookies.get('size') || 'medium'
+  size: Cookies.get('size') || 'medium',
+  language: Cookies.get('language') || 'en'
 }
 
 const mutations = {
@@ -37,6 +38,10 @@ const mutations = {
   },
   SET_SIDEBAR_HIDE: (state, status) => {
     state.sidebar.hide = status
+  },
+  SET_LANGUAGE: (state, language) => {
+    state.language = language
+    Cookies.set('language', language)
   }
 }
 
@@ -55,6 +60,9 @@ const actions = {
   },
   toggleSideBarHide({ commit }, status) {
     commit('SET_SIDEBAR_HIDE', status)
+  },
+  setLanguage({ commit }, language) {
+    commit('SET_LANGUAGE', language)
   }
 }
 

src/store/modules/permission.js

@@ -36,10 +36,24 @@ const permission = {
         getRouters().then(res => {
           const sdata = JSON.parse(JSON.stringify(res.data))
           const rdata = JSON.parse(JSON.stringify(res.data))
+        //   let obj=[{
+        //     "name": "detail",
+        //     "path": "/task/test/detail",
+        //     "hidden": false,
+        //     component:"taskManagement/todo/detail",
+        //     "meta": {
+        //         "title": "任务详情",
+        //         "icon": "user",
+        //         "noCache": false,
+        //         "link": null
+        //     }
+        // }]
+        // rdata[5].children[4].children=obj;
           const sidebarRoutes = filterAsyncRouter(sdata)
           const rewriteRoutes = filterAsyncRouter(rdata, false, true)
           const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
-          rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
+          console.log(rewriteRoutes,1111111);
+          rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true });
           router.addRoutes(asyncRoutes);
           commit('SET_ROUTES', rewriteRoutes)
           commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))

src/store/modules/user.js

@@ -31,12 +31,12 @@ const user = {
   actions: {
     // 登录
     Login({ commit }, userInfo) {
-      const username = userInfo.username.trim()
+      const account = userInfo.account.trim()
       const password = userInfo.password
       const code = userInfo.code
       const uuid = userInfo.uuid
       return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
+        login(account, password, code, uuid).then(res => {
           setToken(res.token)
           commit('SET_TOKEN', res.token)
           resolve()
@@ -58,7 +58,7 @@ const user = {
           } else {
             commit('SET_ROLES', ['ROLE_DEFAULT'])
           }
-          commit('SET_NAME', user.userName)
+          commit('SET_NAME', user.account)
           commit('SET_AVATAR', avatar)
           resolve(res)
         }).catch(error => {

src/views/login.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="login">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">若依后台管理系统</h3>
-      <el-form-item prop="username">
+      <h3 class="title">{{ $t('login.title') }}</h3>
+      <lang-select class="set-language" />
+      <el-form-item prop="account">
         <el-input
-          v-model="loginForm.username"
+          v-model="loginForm.account"
           type="text"
           auto-complete="off"
           placeholder="账号"
@@ -65,21 +66,22 @@
 import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from '@/utils/jsencrypt'
-
+import LangSelect from '@/components/LangeSelect/index.vue'
 export default {
   name: "Login",
+  components: { LangSelect },
   data() {
     return {
       codeUrl: "",
       loginForm: {
-        username: "admin",
+        account: "admin",
         password: "admin123",
         rememberMe: false,
         code: "",
         uuid: ""
       },
       loginRules: {
-        username: [
+        account: [
           { required: true, trigger: "blur", message: "请输入您的账号" }
         ],
         password: [
@@ -118,11 +120,11 @@ export default {
       });
     },
     getCookie() {
-      const username = Cookies.get("username");
+      const account = Cookies.get("account");
       const password = Cookies.get("password");
       const rememberMe = Cookies.get('rememberMe')
       this.loginForm = {
-        username: username === undefined ? this.loginForm.username : username,
+        account: account === undefined ? this.loginForm.account : account,
         password: password === undefined ? this.loginForm.password : decrypt(password),
         rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
       };
@@ -132,11 +134,11 @@ export default {
         if (valid) {
           this.loading = true;
           if (this.loginForm.rememberMe) {
-            Cookies.set("username", this.loginForm.username, { expires: 30 });
+            Cookies.set("account", this.loginForm.account, { expires: 30 });
             Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
             Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
           } else {
-            Cookies.remove("username");
+            Cookies.remove("account");
             Cookies.remove("password");
             Cookies.remove('rememberMe');
           }

src/views/system/personnelManagement/add.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="app-container">
+        <div class="formTitle">基本信息</div>
+        <div></div>
+    </div>
+</template>
+<script>
+export default{
+    data(){
+        return{
+
+        }
+    }
+}
+
+</script>
+<style lang="scss" scoped>
+.formTitle{
+    font-size: 24px;
+}
+</style>

src/views/system/personnelManagement/index.vue

@@ -0,0 +1,242 @@
+<template>
+    <div class="app-container">
+     <el-row :gutter="12" class="mb8" style="margin-top: 10px;margin-bottom: 10px;">
+       <el-col :span="1.5">
+         <el-button
+           type="primary"
+           size="mini"
+           @click="handleDelete"
+         >
+         新增人员
+         </el-button>
+         <el-button  
+           size="mini"
+           @click="handleDelete"
+         >
+         批量删除
+         </el-button>
+       </el-col>
+       <el-col style="float: right;" :span="8.5">
+           <el-input
+           v-model="queryParams.name"
+           placeholder="请输入名称"
+           clearable
+           size="small"
+           @keyup.enter.native="handleQuery"
+         >
+         <el-button slot="append" icon="el-icon-search"></el-button>
+           </el-input>
+       </el-col>
+       <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
+     
+     </el-row>
+     <!-- <el-row :gutter="12"  style="margin-top: 10px;margin-bottom: 10px;">
+     <div  class="table_top">
+      <div>已选择<span >2</span>项</div>
+      <div style="margin: 0 10px;">样品数量累计：<span >4</span>个</div>
+      <div class="table_btn">清空</div>
+     </div>
+     </el-row> -->
+     <el-table v-loading="loading" :data="todoList" border @selection-change="handleSelectionChange">
+       <el-table-column type="selection" width="55" align="center"/>
+       <el-table-column label="人员名称" align="center" prop="taskId" :show-overflow-tooltip="true"/>
+       <el-table-column label="人员工号" align="center" prop="procDefName"/>
+       <el-table-column label="系统角色" align="center" prop="procDefName"/>
+       <el-table-column label="仪器资质" align="center" prop="taskName"/>
+       
+       <!-- <el-table-column label="流程版本" align="center">
+         <template slot-scope="scope">
+           <el-tag size="medium" >v{{scope.row.procDefVersion}}</el-tag>
+         </template>
+       </el-table-column> -->
+       <!-- <el-table-column label="流程发起人" align="center">
+         <template slot-scope="scope">
+           <label>{{scope.row.startUserName}} <el-tag type="info" size="mini">{{scope.row.startDeptName}}</el-tag></label>
+         </template>
+       </el-table-column> -->
+       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+         <template slot-scope="scope">
+           <el-button
+             size="mini"
+             type="text"
+             @click="handleProcess(scope.row)"
+           >查看
+           </el-button>
+           <el-button
+             size="mini"
+             type="text"
+             @click="handleProcess(scope.row)"
+           >编辑
+           </el-button>
+           <el-button
+             size="mini"
+             type="text"
+             @click="handleProcess(scope.row)"
+           >删除
+           </el-button>
+         </template>
+       </el-table-column>
+     </el-table>
+ 
+     <pagination
+       v-show="total>0"
+       :total="total"
+       :page.sync="queryParams.pageNum"
+       :limit.sync="queryParams.pageSize"
+       @pagination="getList"
+     />
+   </div>
+  </template>
+  
+  <script>
+  import {
+    todoList,
+    complete,
+    returnList,
+    returnTask,
+    rejectTask,
+    getDeployment,
+    delDeployment,
+    exportDeployment
+  } from "@/api/flowable/todo";
+  
+  export default {
+    name: "Deploy",
+    components: {},
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 流程待办任务表格数据
+        todoList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          name: null,
+          category: null
+        },
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {}
+      };
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** 查询流程定义列表 */
+      getList() {
+        this.todoList=[]
+        this.loading = false;
+        // this.loading = true;
+        // todoList(this.queryParams).then(response => { 
+        //   this.todoList = response.data.records;
+     
+        //   this.total = response.data.total;
+        //   this.loading = false;
+        // });
+      },
+      // 跳转到处理页面
+      handleProcess(row){
+        this.$router.push({ path: '/flowable/task/todo/detail/index',
+          query: {
+            procInsId: row.procInsId,
+            executionId: row.executionId,
+            deployId: row.deployId,
+            taskId: row.taskId,
+            taskName: row.taskName,
+            startUser: row.startUserName + '-' + row.startDeptName,
+          }})
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          id: null,
+          name: null,
+          category: null,
+          key: null,
+          tenantId: null,
+          deployTime: null,
+          derivedFrom: null,
+          derivedFromRoot: null,
+          parentDeploymentId: null,
+          engineVersion: null
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.taskId)
+        this.single = selection.length !== 1
+        this.multiple = !selection.length
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+    
+        // this.$router.push({ path: '/task/test/detail'});
+        this.$router.push({ path: 'personnel/add'})
+        // const ids = row.taskId || this.ids;
+        // this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
+        //   confirmButtonText: "确定",
+        //   cancelButtonText: "取消",
+        //   type: "warning"
+        // }).then(function () {
+        //   return delDeployment(ids);
+        // }).then(() => {
+        //   this.getList();
+        //  this.$modal.msgSuccess("删除成功");
+        // })
+      },
+    }
+  };
+  </script>
+<style lang="scss" scoped>
+.table_top{
+  display: flex;
+  height: 40px;
+  align-items: center;
+  background-color:rgba(230, 247, 255, 1) ;
+  border-color: rgba(186, 231, 255, 1);
+  padding-left: 10px;
+  margin-left: 5px;
+  span{
+    color: #1890FF;
+  }
+  .table_btn{
+    color: #1890FF;
+  }
+}
+</style>
+  
+  

src/views/taskManagement/missionOverview/index.vue

@@ -0,0 +1,269 @@
+<template>
+
+    <div class="app-container">
+     <el-row :gutter="12" class="mb8" style="margin-top: 10px;margin-bottom: 10px;">
+       <el-col :span="1.5">
+         <el-button
+           type="primary"
+           
+           icon="el-icon-caret-right"
+           size="mini"
+           @click="add"
+         >
+         新建
+         </el-button>
+         <el-button
+           size="mini"
+           @click="handleDelete"
+         >
+         催办
+         </el-button>
+       </el-col>
+       
+       <el-col style="float: right;" :span="8.5">
+           <el-input
+           v-model="queryParams.name"
+           placeholder="请输入名称"
+           clearable
+           size="small"
+           @keyup.enter.native="handleQuery"
+         >
+         <el-button slot="append" icon="el-icon-search"></el-button>
+           </el-input>
+       </el-col>
+       <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
+     
+     </el-row>
+     <el-row :gutter="12"  style="margin-top: 10px;margin-bottom: 10px;">
+     <div  class="table_top">
+      <div>已选择<span >2</span>项</div>
+      <div style="margin: 0 10px;">样品数量累计：<span >4</span>个</div>
+      <div class="table_btn">清空</div>
+     </div>
+     </el-row>
+     <el-table v-loading="loading" :data="todoList" border @selection-change="handleSelectionChange">
+       <el-table-column type="selection" width="55" align="center"/>
+       <el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true"/>
+       <el-table-column label="所属合同" align="center" prop="procDefName"/>
+       <el-table-column label="所属客户" align="center" prop="procDefName"/>
+       <el-table-column label="样品数量" align="center" prop="taskName"/>
+       <el-table-column label="流程状态" align="center" prop="taskName"/>
+       <!-- <el-table-column label="流程版本" align="center">
+         <template slot-scope="scope">
+           <el-tag size="medium" >v{{scope.row.procDefVersion}}</el-tag>
+         </template>
+       </el-table-column> -->
+       <!-- <el-table-column label="流程发起人" align="center">
+         <template slot-scope="scope">
+           <label>{{scope.row.startUserName}} <el-tag type="info" size="mini">{{scope.row.startDeptName}}</el-tag></label>
+         </template>
+       </el-table-column> -->
+       <el-table-column label="进行时间" align="center" prop="createTime" width="180"/>
+       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+         <template slot-scope="scope">
+           <el-button
+             size="mini"
+             type="text"
+             @click="handleProcess(scope.row)"
+           >催办
+           </el-button>
+           <el-button
+             size="mini"
+             type="text"
+             @click="handleProcess(scope.row)"
+           >查看
+           </el-button>
+         </template>
+       </el-table-column>
+     </el-table>
+ 
+     <pagination
+       v-show="total>0"
+       :total="total"
+       :page.sync="queryParams.pageNum"
+       :limit.sync="queryParams.pageSize"
+       @pagination="getList"
+     />
+     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body center>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px" >
+            <el-form-item label="所属客户" prop="configName">
+                <el-input v-model="form.configName" placeholder="请输入参数名称" style="width: 300px;" />
+            </el-form-item>
+            <el-form-item label="所属合同" prop="configKey">
+                <el-input v-model="form.configKey" placeholder="请输入参数键名" style="width: 300px;" />
+            </el-form-item>
+            <el-form-item label="所属流程" prop="configValue">
+                <el-input v-model="form.configValue" placeholder="请输入参数键值" style="width: 300px;"  />
+            </el-form-item>
+            <el-form-item label="报告模板" prop="configValue">
+                <el-input v-model="form.configValue" placeholder="请输入参数键值" style="width: 300px;" />
+            </el-form-item>
+            <el-form-item label="截至日期" prop="configValue">
+                <el-date-picker v-model="form.value1" type="date" placeholder="选择日期" style="width: 300px;"  />
+             
+            </el-form-item>
+        </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">创建</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+   </div>
+  </template>
+  
+  <script>
+  import {
+    todoList,
+    complete,
+    returnList,
+    returnTask,
+    rejectTask,
+    getDeployment,
+    delDeployment,
+    exportDeployment
+  } from "@/api/flowable/todo";
+  
+  export default {
+    name: "Deploy",
+    components: {},
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 流程待办任务表格数据
+        todoList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          name: null,
+          category: null
+        },
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {}
+      };
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** 查询流程定义列表 */
+      getList() {
+        this.todoList=[]
+        this.loading = false;
+        // this.loading = true;
+        // todoList(this.queryParams).then(response => { 
+        //   this.todoList = response.data.records;
+     
+        //   this.total = response.data.total;
+        //   this.loading = false;
+        // });
+      },
+      // 跳转到处理页面
+      handleProcess(row){
+        this.$router.push({ path: '/flowable/task/todo/detail/index',
+          query: {
+            procInsId: row.procInsId,
+            executionId: row.executionId,
+            deployId: row.deployId,
+            taskId: row.taskId,
+            taskName: row.taskName,
+            startUser: row.startUserName + '-' + row.startDeptName,
+          }})
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      //新建
+      add(){
+        this.open = true;
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          id: null,
+          name: null,
+          category: null,
+          key: null,
+          tenantId: null,
+          deployTime: null,
+          derivedFrom: null,
+          derivedFromRoot: null,
+          parentDeploymentId: null,
+          engineVersion: null
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.taskId)
+        this.single = selection.length !== 1
+        this.multiple = !selection.length
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+    
+        this.$router.push({ path: 'missionOverview/add'});
+        // this.$router.push({ path: '/task/todos/detail'})
+        // const ids = row.taskId || this.ids;
+        // this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
+        //   confirmButtonText: "确定",
+        //   cancelButtonText: "取消",
+        //   type: "warning"
+        // }).then(function () {
+        //   return delDeployment(ids);
+        // }).then(() => {
+        //   this.getList();
+        //  this.$modal.msgSuccess("删除成功");
+        // })
+      },
+    }
+  };
+  </script>
+<style lang="scss" scoped>
+.table_top{
+  display: flex;
+  height: 40px;
+  align-items: center;
+  background-color:rgba(230, 247, 255, 1) ;
+  border-color: rgba(186, 231, 255, 1);
+  padding-left: 10px;
+  margin-left: 5px;
+  span{
+    color: #1890FF;
+  }
+  .table_btn{
+    color: #1890FF;
+  }
+}
+</style>
+  
+  

src/views/taskManagement/todo/component/tableCol.vue

@@ -0,0 +1,233 @@
+<template>
+    <div class="app-container">
+     <el-row :gutter="12" class="mb8" style="margin-top: 10px;margin-bottom: 10px;">
+       <el-col :span="1.5">
+         <el-button
+           type="primary"
+           
+           icon="el-icon-caret-right"
+           size="mini"
+           @click="handleDelete"
+         >
+         开始
+         </el-button>
+       </el-col>
+       <el-col style="float: right;" :span="8.5">
+           <el-input
+           v-model="queryParams.name"
+           placeholder="请输入名称"
+           clearable
+           size="small"
+           @keyup.enter.native="handleQuery"
+         >
+         <el-button slot="append" icon="el-icon-search"></el-button>
+           </el-input>
+       </el-col>
+       <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
+     
+     </el-row>
+     <el-row :gutter="12"  style="margin-top: 10px;margin-bottom: 10px;">
+     <div  class="table_top">
+      <div>已选择<span >2</span>项</div>
+      <div style="margin: 0 10px;">样品数量累计：<span >4</span>个</div>
+      <div class="table_btn">清空</div>
+     </div>
+     </el-row>
+     <el-table v-loading="loading" :data="todoList" border @selection-change="handleSelectionChange">
+       <el-table-column type="selection" width="55" align="center"/>
+       <el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true"/>
+       <el-table-column label="流程名称" align="center" prop="procDefName"/>
+       <el-table-column label="样品数量" align="center" prop="procDefName"/>
+       <el-table-column label="当前节点" align="center" prop="taskName"/>
+       <el-table-column label="流程状态" align="center" prop="taskName"/>
+       <!-- <el-table-column label="流程版本" align="center">
+         <template slot-scope="scope">
+           <el-tag size="medium" >v{{scope.row.procDefVersion}}</el-tag>
+         </template>
+       </el-table-column> -->
+       <!-- <el-table-column label="流程发起人" align="center">
+         <template slot-scope="scope">
+           <label>{{scope.row.startUserName}} <el-tag type="info" size="mini">{{scope.row.startDeptName}}</el-tag></label>
+         </template>
+       </el-table-column> -->
+       <el-table-column label="到达节点时间" align="center" prop="createTime" width="180"/>
+       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+         <template slot-scope="scope">
+           <el-button
+             size="mini"
+             type="text"
+             @click="handleProcess(scope.row)"
+           >返回
+           </el-button>
+           <el-button
+             size="mini"
+             type="text"
+             @click="handleProcess(scope.row)"
+           >查看
+           </el-button>
+         </template>
+       </el-table-column>
+     </el-table>
+ 
+     <pagination
+       v-show="total>0"
+       :total="total"
+       :page.sync="queryParams.pageNum"
+       :limit.sync="queryParams.pageSize"
+       @pagination="getList"
+     />
+   </div>
+  </template>
+  
+  <script>
+  import {
+    todoList,
+    complete,
+    returnList,
+    returnTask,
+    rejectTask,
+    getDeployment,
+    delDeployment,
+    exportDeployment
+  } from "@/api/flowable/todo";
+  
+  export default {
+    name: "Deploy",
+    components: {},
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 流程待办任务表格数据
+        todoList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          name: null,
+          category: null
+        },
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {}
+      };
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** 查询流程定义列表 */
+      getList() {
+        this.todoList=[]
+        this.loading = false;
+        // this.loading = true;
+        // todoList(this.queryParams).then(response => { 
+        //   this.todoList = response.data.records;
+     
+        //   this.total = response.data.total;
+        //   this.loading = false;
+        // });
+      },
+      // 跳转到处理页面
+      handleProcess(row){
+        this.$router.push({ path: '/flowable/task/todo/detail/index',
+          query: {
+            procInsId: row.procInsId,
+            executionId: row.executionId,
+            deployId: row.deployId,
+            taskId: row.taskId,
+            taskName: row.taskName,
+            startUser: row.startUserName + '-' + row.startDeptName,
+          }})
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          id: null,
+          name: null,
+          category: null,
+          key: null,
+          tenantId: null,
+          deployTime: null,
+          derivedFrom: null,
+          derivedFromRoot: null,
+          parentDeploymentId: null,
+          engineVersion: null
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.taskId)
+        this.single = selection.length !== 1
+        this.multiple = !selection.length
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+    
+        // this.$router.push({ path: '/task/test/detail'});
+        this.$router.push({ path: '/task/detail'})
+        // const ids = row.taskId || this.ids;
+        // this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
+        //   confirmButtonText: "确定",
+        //   cancelButtonText: "取消",
+        //   type: "warning"
+        // }).then(function () {
+        //   return delDeployment(ids);
+        // }).then(() => {
+        //   this.getList();
+        //  this.$modal.msgSuccess("删除成功");
+        // })
+      },
+    }
+  };
+  </script>
+<style lang="scss" scoped>
+.table_top{
+  display: flex;
+  height: 40px;
+  align-items: center;
+  background-color:rgba(230, 247, 255, 1) ;
+  border-color: rgba(186, 231, 255, 1);
+  padding-left: 10px;
+  margin-left: 5px;
+  span{
+    color: #1890FF;
+  }
+  .table_btn{
+    color: #1890FF;
+  }
+}
+</style>
+  
+  

src/views/taskManagement/todo/detail.vue

@@ -0,0 +1,236 @@
+<template>
+    <div class="app-container">
+        <!-- <router-view></router-view> -->
+        <div class="detail_content">
+            <div class="detail_topBox">
+                <div class="icons">
+                    <i class="el-icon-picture"></i>
+                </div>
+                <div>
+                    <div class="detail_title">
+                        铜-分光分度法
+                    </div>
+                    <div class="copper">
+                        <div class="copper_left">
+                            <div>执行人:李天问</div>
+                            <div>开始时间:2023-10-27 11:00</div>
+                            <div>异常原因:<span style="color: red;">错误显示</span></div>
+                        </div>
+                        <div class="copper_right">
+                            <div>关联流程:<span style="color: #1890FF;">铜-SPEC (TP-SPEC-Cu)</span></div>
+                            <div>方法节点:<span style="color: #1890FF;">测定 (TM-SPEC-03)</span></div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="btn_box">
+                    <el-button size="mini">
+                        返回上个节点
+                    </el-button>
+                    <el-button type="primary" size="mini">
+                        流程重启
+                    </el-button>
+                </div>
+            </div>
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+                <el-tab-pane label="详情" name="1">
+                    <div class="mt_box">
+                        <div class="mt_tit">方法描述：</div>
+                        <div>1.将反应后的样品放入分光分度计的比色皿中</div>
+                        <div>2.将选择适当的波长</div>
+                    </div>
+                    <el-collapse v-model="activeNames" @change="handleChange">
+                        <el-collapse-item name="1" class="tabs">
+                            <template slot="title">
+                                <div style="font-weight: bold;padding-left: 20px;">前序步骤 - 制样（TM-SPEC-02） 李天问 2023-11-01
+                                    13:00</div>
+                            </template>
+                            <div style="padding-left: 20px;">
+                                <div style="margin:20px 0">设备类型：<span>电子天平(EQ-EPMT23001)</span></div>
+                                <div style="margin:20px 0">样品数量： <el-input style="width: 100px;text-align: center;"
+                                        v-model="input" disabled size="small" />个</div>
+                                <el-table :data="tableData" border style="width: 100%">
+                                    <el-table-column prop="date" label="样品编号">
+                                    </el-table-column>
+                                    <el-table-column prop="name" label="制作类型" width="200">
+                                    </el-table-column>
+                                    <el-table-column prop="address" label="制作规格" width="180">
+                                    </el-table-column>
+                                    <el-table-column prop="address" label="使用试剂">
+                                    </el-table-column>
+                                    <el-table-column prop="address" label="状态">
+                                    </el-table-column>
+                                    <el-table-column prop="address" label="异常原因">
+                                    </el-table-column>
+                                </el-table>
+                            </div>
+                        </el-collapse-item>
+                        <el-collapse-item class="tabs" name="2">
+                            <template slot="title">
+                                <div style="font-weight: bold;padding-left: 20px;">当前步骤 - 测定（TM-SPEC-03）</div>
+                            </template>
+                            <div style="padding-left: 20px;">
+                                <div style="display: flex;margin: 20px 0;">
+                                    <div>设备类型：<el-select v-model="values" placeholder="请选择" disabled>
+                                            <el-option v-for="item in options" :key="item.value" :label="item.label"
+                                                :value="item.value">
+                                            </el-option>
+                                        </el-select>
+                                    </div>
+                                    <div style="margin-left: 20px;">设备编号： <el-input style="width: 100px;text-align: center;"
+                                            v-model="input" disabled size="small" /></div>
+                                </div>
+                                <div style="margin: 20px 0;">样品数量： <el-input style="width: 100px;text-align: center;"
+                                        v-model="input" disabled size="small" />个</div>
+                                <el-table :data="tableData" border style="width: 100%">
+                                    <el-table-column prop="date" label="样品编号">
+                                        <template slot-scope="{ row }">
+                                            <span v-show="!row.date">{{ row.date }}</span>
+                                            <el-input v-show="row.date" v-model="row.date"></el-input>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column prop="name" label="吸光度" width="200">
+                                        <template slot-scope="{ row }">
+                                            <span v-show="!row.name">{{ row.name }}</span>
+                                            <el-input v-show="row.name" v-model="row.name"></el-input>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column prop="address" label="反射率" width="180">
+                                        <template slot-scope="{ row }">
+                                            <span v-show="!row.address">{{ row.address }}</span>
+                                            <el-input v-show="row.address" v-model="row.address"></el-input>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column prop="address" label="散射率">
+                                        <template slot-scope="{ row }">
+                                            <span v-show="!row.address">{{ row.address }}</span>
+                                            <el-input v-show="row.address" v-model="row.address"></el-input>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column prop="address" label="备注">
+                                        <template slot-scope="{ row }">
+                                            <span v-show="!row.address">{{ row.address }}</span>
+                                            <el-input v-show="row.address" v-model="row.address"></el-input>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column prop="scope" label="操作">
+                                        <template slot-scope="scope">
+                                            <el-button size="mini"
+                                                @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
+                                            <el-button size="mini" type="danger"
+                                                @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
+                                        </template>
+                                    </el-table-column>
+                                </el-table>
+                            
+                            </div>
+                        </el-collapse-item>
+
+                    </el-collapse>
+                </el-tab-pane>
+                <el-tab-pane label="节点" name="2">节点</el-tab-pane>
+            </el-tabs>
+        </div>
+    </div>
+</template>
+<script>
+
+
+export default {
+    data() {
+        return {
+            activeName: '1',
+            input: 4,
+            activeNames: ['1'],
+            tableData: [],
+            options: [{
+                value: '选项1',
+                label: '分光分度计'
+            }],
+            values: '选项1',
+        };
+    },
+    methods: {
+        handleChange(val) {
+            console.log(val);
+        }
+    }
+}
+
+</script>
+<style lang="scss" scoped>
+.detail_content {
+    .detail_topBox {
+        display: flex;
+        margin-bottom: 20px;
+
+        .icons {
+            width: 35px;
+            background: #1890FF;
+            height: 35px;
+            border-radius: 50%;
+            margin-right: 20px;
+            text-align: center;
+            line-height: 35px;
+            font-size: 18px;
+            color: #fff;
+        }
+
+        .detail_title {
+            font-size: 24px;
+            font-weight: bold;
+            display: flex;
+        }
+
+        .copper {
+            display: flex;
+            font-size: 16px;
+            margin-top: 20px;
+            display: flex;
+
+            .copper_left {
+                margin-right: 100px;
+
+                div {
+                    padding: 5px 0px;
+                }
+            }
+
+            .copper_right {
+                div {
+                    padding: 5px 0px;
+                }
+            }
+        }
+
+        .btn_box {
+            width: 60%;
+            text-align: right;
+        }
+    }
+
+    .mt_box {
+        font-weight: bold;
+        padding-left: 10px;
+
+        .mt_tit {
+            font-size: 24px;
+
+        }
+
+        div {
+            margin-bottom: 10px;
+        }
+    }
+
+    .tabs {
+        ::v-deep .el-collapse-item__header {
+            background-color: rgba(250, 250, 250, 1) !important;
+        }
+    }
+
+
+
+
+}
+</style>

src/views/taskManagement/todo/index.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="app-container">
+        <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
+            <el-tab-pane label="全部(120)" name="all" />
+            <el-tab-pane label="称样(20)" name="1" />
+            <el-tab-pane label="制样(30)" name="2" />
+            <el-tab-pane label="测定(20)" name="3" />
+            <el-tab-pane label="曲线校准(30)" name="4" />
+            <el-tab-pane label="溶液制备(20)" name="5" />
+        </el-tabs>
+        <TabCol />
+    </div>
+</template>
+<script>
+import TabCol from './component/tableCol.vue'
+export default {
+    data() {
+        return {
+            activeName: 'all'
+        };
+    },
+    components: { TabCol },
+    methods: {
+        handleClick(tab, event) {
+            console.log(tab, event);
+        }
+    }
+};
+</script>