From b5807481815e3a5728ff6b57383c4ebc4ab6c13f Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Thu, 11 May 2023 17:30:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/mixin.scss                  |  38 ++
 src/components/Crud/RR.operation.vue          |  38 +-
 src/views/system/user/center.vue              |  62 +++-
 src/views/system/user/processCenter/index.vue | 324 ++++++++++++++++++
 .../user/processCenter/module/detail.vue      | 122 +++++++
 5 files changed, 529 insertions(+), 55 deletions(-)
 create mode 100644 src/views/system/user/processCenter/index.vue
 create mode 100644 src/views/system/user/processCenter/module/detail.vue

diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss
index 184752e..cae1197 100644
--- a/src/assets/styles/mixin.scss
+++ b/src/assets/styles/mixin.scss
@@ -27,6 +27,44 @@
   
 // }
 
+@mixin btn_blue_style{
+  [data-theme="light"] & {
+    background-color: #0348F3;
+    border-color: #0348F3;
+    color: #fff !important;
+  }
+}
+
+@mixin btn_blue_hover{
+  [data-theme="light"] & {
+    background-color: #4579FA;
+    border-color: #4579FA;
+  }
+}
+
+@mixin btn_white_style{
+  [data-theme="light"] & {
+    background-color: #fff;
+    border-color: #E3E7EE;
+    color: #545B65 !important;
+  }
+}
+
+@mixin btn_white_hover{
+  [data-theme="light"] & {
+    background-color: #F7F9FA;
+  }
+}
+
+@mixin btn_hover{
+  [data-theme="dark"] & {
+    background-color: #02255F;
+  }
+  [data-theme="light"] & {
+    background-color: #0348F3;
+  }
+}
+
 @mixin scrollBar-bg{
   [data-theme="dark"] & {
     background-color:  #13439E;
diff --git a/src/components/Crud/RR.operation.vue b/src/components/Crud/RR.operation.vue
index 4c6ec9a..c8177f6 100644
--- a/src/components/Crud/RR.operation.vue
+++ b/src/components/Crud/RR.operation.vue
@@ -19,43 +19,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-@mixin btn_blue_style{
-  [data-theme="light"] & {
-    background-color: #0348F3;
-    border-color: #0348F3;
-    color: #fff !important;
-  }
-}
-
-@mixin btn_blue_hover{
-  [data-theme="light"] & {
-    background-color: #4579FA;
-    border-color: #4579FA;
-  }
-}
-
-@mixin btn_white_style{
-  [data-theme="light"] & {
-    background-color: #fff;
-    border-color: #E3E7EE;
-    color: #545B65 !important;
-  }
-}
-
-@mixin btn_white_hover{
-  [data-theme="light"] & {
-    background-color: #F7F9FA;
-  }
-}
-
-@mixin btn_hover{
-  [data-theme="dark"] & {
-    background-color: #02255F;
-  }
-  [data-theme="light"] & {
-    background-color: #0348F3;
-  }
-}
+@import "~@/assets/styles/mixin.scss";
 .search-btn-box{
   display: flex;
   justify-content: flex-start;
diff --git a/src/views/system/user/center.vue b/src/views/system/user/center.vue
index 2cbd2d8..e7ce96b 100644
--- a/src/views/system/user/center.vue
+++ b/src/views/system/user/center.vue
@@ -74,20 +74,23 @@
             <messageCenter />
           </div>
           <!-- 流程中心 -->
-          <div v-if="activeIndex == 2" class="tab-item">
-            流程中心
-          </div>
+          <processCenter v-if="activeIndex == 2" />
           <!-- 操作日志 -->
-          <div v-if="activeIndex == 3" class="tab-item">
-            <!-- <div class="head-container">
-              <div class="head-search">
-
-                <el-input v-model="deptName" clearable size="small" placeholder="输入全宗名称搜索" prefix-icon="el-icon-search" class="filter-item" />
+          <div v-if="activeIndex == 3" class="tab-item" style="padding-left: 20px;">
+            <div class="head-container">
+              <div class="user-header-search">
+                <el-input v-model="query.keyword" clearable size="small" placeholder="输入关键字搜索" prefix-icon="el-icon-search" class="filter-item" style="width: 225px;" />
                 <date-range-picker v-model="query.createTime" class="date-item" />
-                <rrOperation />
+                <!-- @click="crud.toQuery" -->
+                <el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search">搜索</el-button>
+                <!-- @click="crud.resetQuery()" -->
+                <el-button class="filter-item  filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left">重置</el-button>
               </div>
-              <el-button :loading="crud.downloadLoading" size="mini" icon="el-icon-download" @click="handleDownload">导出</el-button>
-            </div> -->
+              <el-button size="mini">
+                <i class="iconfont icon-daochu" />
+                导出
+              </el-button>
+            </div>
             <el-table v-loading="loading" :data="data" style="width: 100%;">
               <el-table-column prop="description" label="行为描述" />
               <el-table-column prop="requestIp" label="IP" />
@@ -129,8 +132,7 @@
 </template>
 
 <script>
-// import rrOperation from '@crud/RR.operation'
-// import DateRangePicker from '@/components/DateRangePicker'
+import DateRangePicker from '@/components/DateRangePicker'
 import myUpload from 'vue-image-crop-upload'
 import { mapGetters } from 'vuex'
 import updatePass from './center/updatePass'
@@ -142,10 +144,10 @@ import crud from '@/mixins/crud'
 import { editUser } from '@/api/system/user'
 import Avatar from '@/assets/images/avatar.png'
 import messageCenter from './messageCenter/index.vue'
+import processCenter from './processCenter/index.vue'
 export default {
-  // rrOperation, DateRangePicker,
   name: 'Center',
-  components: { updatePass, updateEmail, myUpload, messageCenter },
+  components: { updatePass, updateEmail, myUpload, messageCenter, DateRangePicker, processCenter },
   mixins: [crud],
   data() {
     // 自定义验证
@@ -168,6 +170,10 @@ export default {
         'Authorization': getToken()
       },
       form: {},
+      query: {
+        keyword: null,
+        createTime: []
+      },
       rules: {
         nickName: [
           { required: true, message: '请输入用户昵称', trigger: 'blur' },
@@ -242,8 +248,6 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/assets/styles/mixin.scss";
-@import "~@/assets/styles/variables.scss";
-
 .app-container{
   margin: 0 20px !important;
 }
@@ -281,6 +285,9 @@ export default {
 // [data-theme=dark] .elect-cont-right .container-right {
 //     min-height: calc(100vh - 158px) !important;
 // }
+[data-theme=light] .elect-cont-right {
+  padding: 20px 20px 0 0  !important;
+}
 [data-theme=light] .elect-cont-left .container-left{
   min-height: calc(100vh - 138px) !important;
 }
@@ -361,7 +368,11 @@ export default {
     }
   }
 }
+// [data-theme=dark] .tab-item {
+//   height: calc(100vh - 232px);
+// }
 [data-theme=light] .tab-item {
+  // height: calc(100vh - 193px);
   ::v-deep .el-form{
     margin-top: 40px;
   }
@@ -370,7 +381,6 @@ export default {
     background-color: #0348F3;
   }
 }
-
 .tab-item{
   ::v-deep .el-form{
     .el-form-item__label.el-form-item__label{
@@ -386,6 +396,22 @@ export default {
     }
   }
 }
+.user-header-search{
+  margin-bottom: 20px;
+  .filter-search{
+    margin-right: 0;
+    @include btn_blue_style;
+    &:hover{
+      @include btn_blue_hover;
+    }
+  }
+  .filter-refresh{
+    @include btn_white_style;
+    &:hover{
+      @include btn_white_hover;
+    }
+  }
+}
 
 input:-webkit-autofill,
 textarea:-webkit-autofill,
diff --git a/src/views/system/user/processCenter/index.vue b/src/views/system/user/processCenter/index.vue
new file mode 100644
index 0000000..d05f3e3
--- /dev/null
+++ b/src/views/system/user/processCenter/index.vue
@@ -0,0 +1,324 @@
+<template>
+  <div class="process-center">
+    <ul class="process-left">
+      <li class="active-li">全部流程</li>
+      <li>归档审批流程</li>
+      <li>归档退回流程</li>
+      <li>赋权审批流程</li>
+      <li>内部移交流程</li>
+      <li>外部移交流程</li>
+      <li>外部接受流程</li>
+      <li>开放鉴定流程</li>
+      <li>销毁鉴定流程</li>
+    </ul>
+    <div class="process-right">
+      <div class="head-container" style="display: flex; justify-content: space-between;">
+        <div>
+          <el-input v-model="query.keyword" clearable size="small" placeholder="输入关键字搜索" prefix-icon="el-icon-search" class="filter-item" style="width: 225px;" />
+          <date-range-picker v-model="query.createTime" class="date-item" />
+          <el-button icon="el-icon-search" size="mini" @click="getTableData">搜索</el-button>
+        </div>
+        <el-select v-model="value" placeholder="请选择" style="width: 97px;">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <el-table
+        ref="table"
+        v-loading="isLoading"
+        :data="tableData"
+        :row-class-name="cell"
+        @row-click="clickRowHandler"
+        @selection-change="selectionChangeHandler"
+      >
+        <el-table-column type="isHandle" label="处理" width="100" align="center">
+          <!--  slot-scope="scope" -->
+          <template>
+            <span class="deal-state" @click="dealWithCont">处理</span>
+            <!-- <span class="deal-off">处理</span> -->
+          </template>
+        </el-table-column>
+        <el-table-column prop="create_time" label="创建时间" align="center" min-width="180">
+          <template slot-scope="scope">
+            <div>{{ scope.row.create_time | parseTime }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="pushUserName" label="创建人" align="center" min-width="100" />
+        <el-table-column prop="noticeContent" :show-overflow-tooltip="true" label="所属流程" min-width="200" />
+        <el-table-column prop="nodes" label="当前节点" align="center" min-width="150" />
+        <el-table-column prop="operable" label="可操作者" align="center" min-width="150" />
+        <el-table-column prop="approver" label="审批者" align="center" min-width="150" />
+        <el-table-column prop="states" label="状态" align="center" min-width="150" />
+        <el-table-column prop="end_time" label="完成时间" align="center" min-width="180">
+          <template slot-scope="scope">
+            <div>{{ scope.row.end_time | parseTime }}</div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :page-size.sync="page.size"
+        :total="page.total"
+        :current-page.sync="page.page"
+        style="margin-top: 8px;"
+        layout="total, prev, pager, next, sizes"
+        @size-change="sizeChangeHandler($event)"
+        @current-change="pageChangeHandler"
+      />
+    </div>
+    <detail ref="detail" />
+  </div>
+</template>
+
+<script>
+import DateRangePicker from '@/components/DateRangePicker'
+import { getUserNotice, isread } from '@/api/system/logs'
+import CRUD, { presenter, header, crud } from '@crud/crud'
+import detail from './module/detail.vue'
+export default {
+  name: 'MessageCenter',
+  inject: ['reload'],
+  components: { DateRangePicker, detail },
+  mixins: [presenter(), crud(), header()],
+  cruds() {
+    return CRUD({
+      url: 'api/users/notice',
+      sort: ['createTime,desc'],
+      optShow: {}
+    })
+  },
+  data() {
+    return {
+      tableData: [],
+      selections: [],
+      query: {
+        createTime: [],
+        keyword: null
+      },
+      page: {
+        total: 0,
+        size: 10,
+        page: 1
+      },
+      isLoading: false,
+      options: [{
+        value: '选项1',
+        label: '待处理'
+      }, {
+        value: '选项2',
+        label: '已处理'
+      }, {
+        value: '选项3',
+        label: '全部'
+      }],
+      value: ''
+    }
+  },
+  created() {
+    this.getTableData()
+  },
+  methods: {
+    dealWithCont() {
+      this.$refs.detail.detailVisible = true
+    },
+    getTableData() {
+      this.isLoading = true
+      getUserNotice(this.getParams()).then(res => {
+        this.page.total = res.totalElements
+        const table = res.content
+        table.forEach(item => {
+          item.pushUserName = item.noticeUsers[0].pushUserName
+          item.isRead = item.noticeUsers[0].isRead
+        })
+        this.tableData = table
+        this.isLoading = false
+      })
+    },
+    getParams() {
+      const params = {
+        page: this.page.page - 1,
+        size: this.page.size,
+        createTime: this.query.createTime,
+        sort: 'createTime,desc'
+      }
+      return params
+    },
+    getUserMsgId(list) {
+      const ids = []
+      list.forEach(item => {
+        item.noticeUsers.forEach(i => {
+          ids.push(i.id)
+        })
+      })
+      return ids
+    },
+    // 标记已读
+    handleRead() {
+      isread(this.getUserMsgId(this.selections)).then(res => {
+        if (res) {
+          // this.getTableData()
+          this.reload()
+        }
+      })
+    },
+    // 全部标记已读
+    async handleAllRead() {
+      const params = {
+        page: 0,
+        size: 10,
+        // createTime: [],
+        sort: 'createTime,desc'
+      }
+      const list = []
+      const allList = await this.getAllNoRead(params, list)
+      isread(this.getUserMsgId(allList)).then(res => {
+        if (res) {
+          this.reload()
+          // this.getTableData()
+        }
+      })
+    },
+    // 递归获取所有列表
+    async getAllNoRead(params, list) {
+      const allList = await getUserNotice(params).then(res => {
+        list = list.concat(res.content)
+        if ((list.length) < res.totalElements) {
+          params.page++
+          return this.getAllNoRead(params, list)
+        } else {
+          return list
+        }
+      })
+      return allList
+    },
+    clickRowHandler(row) {
+      // this.$refs.table.clearSelection()
+      this.$refs.table.toggleRowSelection(row) // 单选选中
+    },
+    selectionChangeHandler(val) {
+      this.selections = val
+    },
+    cell({ row }) {
+      if (row.isRead) { // 已读
+        return 'read-color'
+      }
+    },
+    // 每页条数改变
+    sizeChangeHandler(e) {
+      this.loading = true
+      this.page.size = e
+      this.page.page = 1
+      this.getTableData()
+      this.loading = false
+    },
+    // 当前页改变
+    pageChangeHandler(e) {
+      this.loading = true
+      this.page.page = e
+      this.getTableData()
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/mixin.scss";
+
+@mixin process-left-style{
+  [data-theme="dark"] & {
+    box-shadow: 5px 2px 10px 1px rgba(15,164,222,.16);
+    color: #339cff;
+    li{
+      &.active-li,
+      &:hover{
+        color: #fff;
+        &::before{
+          background-color: #fff;
+        }
+      }
+    }
+  }
+  [data-theme="light"] & {
+    color: #0C0E1E;
+    box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.04);
+    li{
+      &.active-li,
+      &:hover{
+        color: #0348F3;
+        &::before{
+          background-color: #0348F3;
+        }
+      }
+    }
+  }
+}
+
+[data-theme=dark] .process-center {
+  height: calc(100vh - 202px);
+  margin-top: -30px;
+  .process-right{
+    padding-right: 20px;
+    width: calc(100vw - 944px);
+  }
+}
+[data-theme=light] .process-center {
+  height: calc(100vh - 193px);
+  .process-right{
+    width: calc(100vw - 964px);
+  }
+}
+.process-center{
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  overflow: hidden;
+  .process-left{
+    width: 240px;
+    padding: 26px 0;
+    @include process-left-style;
+    li{
+      height: 28px;
+      line-height: 28px;
+      padding-left: 40px;
+      margin-bottom: 20px;
+      cursor: pointer;
+      &.active-li,
+      &:hover{
+        position: relative;
+        &::before{
+          position: absolute;
+          left: 0;
+          top: 0;
+          content: "";
+          width: 3px;
+          height: 28px;
+        }
+      }
+    }
+  }
+  .head-container{
+    margin: 20px 0 !important;
+  }
+}
+.deal-state,
+.deal-off{
+  display: block;
+  width: 50px;
+  height: 24px;
+  border-radius: 3px;
+}
+.deal-state{
+  color: #0348F3;
+  border: 1px solid #0348F3;
+  cursor: pointer;
+}
+.deal-off{
+  opacity: 0.4;
+  color: #0348F3;
+  border: 1px solid #0348F3;
+}
+</style>
diff --git a/src/views/system/user/processCenter/module/detail.vue b/src/views/system/user/processCenter/module/detail.vue
new file mode 100644
index 0000000..296b3ee
--- /dev/null
+++ b/src/views/system/user/processCenter/module/detail.vue
@@ -0,0 +1,122 @@
+<template>
+  <el-dialog class="detail-dialog" :visible.sync="detailVisible" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body title="流程处理">
+    <div class="setting-dialog">
+      <div class="detail-tab tab-content">
+        <ul class="tab-nav">
+          <li :class="{'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">流程表单</li>
+          <li :class="{'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">流程图</li>
+          <li :class="{'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">业务详情</li>
+        </ul>
+        <!-- <component :is="comName" class="component-cont" /> -->
+      </div>
+      <div v-if="activeIndex == 0">
+        <div class="detail-info">
+          <p><span>流程名称：</span>01-归档审批流程</p>
+          <p><span>启动时间：</span>2016-09-21 08:50:08</p>
+          <p><span>实例ID：</span>9af7f46a-ea52- 4aa3-b8c3-9fd484c2af12</p>
+          <p><span>发起人：</span>admin</p>
+        </div>
+        <div class="opinion">
+          <h5>归档审批</h5>
+          <div>
+            <span>审批意见</span>
+            <el-input v-model="opinionTxt" type="textarea" :rows="4" />
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="detailVisible=false">确定</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+// import processImg from './processImg/index.vue'
+// import businessDetails from './businessDetails/index.vue'
+// import taskList from './taskList/index.vue'
+// import approvalList from './approvalList/index.vue'
+export default {
+  name: 'Detail',
+  components: {
+    // processImg,
+    // businessDetails,
+    // taskList,
+    // approvalList
+  },
+  data() {
+    return {
+      detailVisible: false,
+      activeIndex: 0,
+      opinionTxt: null
+    }
+  },
+  computed: {
+    // comName: function() {
+    //   if (this.activeIndex === 0) {
+    //     return 'processImg'
+    //   } else if (this.activeIndex === 1) {
+    //     return 'businessDetails'
+    //   } else if (this.activeIndex === 2) {
+    //     return 'taskList'
+    //   }
+    //   return 'processImg'
+    // }
+  },
+  methods: {
+    changeActiveTab(data) {
+      this.activeIndex = data
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.detail-dialog{
+  .detail-info,
+  .detail-list{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 10px 18px;
+    font-size: 14px;
+    line-height: 30px;
+    color: #545B65;
+    background-color: #F6F8FC;
+    p{
+      width: 50%;
+      span{
+        display: inline-block;
+        width: 75px;
+        text-align: right;
+        color: #0C0E1E;
+      }
+    }
+  }
+  .service-detail{
+    padding: 8px 12px;
+    background-color: #F6F8FC;
+    font-size: 14px;
+    h4{
+      position: relative;
+      padding-left: 10px;
+      color: #0C0E1E;
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 50%;
+        width: 3px;
+        height: 14px;
+        background-color: #0348F3;
+        transform: translateY(-50%);
+      }
+    }
+    .detail-list{
+      p{
+        width: 33%;
+      }
+    }
+  }
+}
+</style>