我得利用

src/views/archiveUtilize/utillizeRecord/myUtilizeList.vue

@@ -0,0 +1,343 @@
+<template>
+  <div class="recordList-main user-record">
+    <div class="head-container">
+      <div class="head-search">
+        <date-range-picker v-model="blurryTime" class="date-item" />
+        <el-select v-model="status" clearable size="small" placeholder="状态" class="filter-item" style="width: 130px" @change="crud.toQuery">
+          <i slot="prefix" class="iconfont icon-zhuangtai" />
+          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+        <el-select v-model="isEntity" clearable size="small" class="filter-item" style="width: 100px" @change="crud.toQuery">
+          <el-option v-for="item in isEntityOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+        <el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
+        <el-button class="filter-item  filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button>
+      </div>
+    </div>
+    <el-table
+      ref="table"
+      v-loading="crud.loading"
+      :data="crud.data"
+      style="width: 100%;"
+      height="calc(100% - 100px)"
+      @cell-dblclick="tableDoubleClick"
+      @selection-change="crud.selectionChangeHandler"
+    >
+      <el-table-column prop="giveStartTime" label="利用开始时间" width="200">
+        <template slot-scope="scope">
+          <div>{{ scope.row.giveStartTime }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="giveEndTime" label="利用结束时间" width="200">
+        <template slot-scope="scope">
+          <div>{{ scope.row.giveEndTime }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="borrowReason" label="利用事由" />
+      <el-table-column prop="isEntityBorrow" label="包含实体借阅" align="center" width="110">
+        <template slot-scope="scope">
+          <div>
+            <span v-if="scope.row.isEntityBorrow === 0" class="iconfont icon-fou" />
+            <span v-else class="iconfont icon-shi" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="browser" label="是否已归还" align="center" width="110">
+        <template slot-scope="scope">
+          <div>
+            <span v-if="scope.row.isEntityBorrow === 0" class="iconfont icon-fou" />
+            <span v-if="scope.row.isEntityBorrow > 0 && scope.row.isLend === 0" class="iconfont icon-shi" />
+            <!-- <span class="iconfont icon-dengdai" /> -->
+            <span v-if="scope.row.isEntityBorrow > 0 && scope.row.isLend > 0" class="iconfont icon-cuowu1" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="borrowType" label="状态" align="center" width="110">
+        <template slot-scope="scope">
+          <div>
+            <!-- 已完成：
+            1.borrowCount = isEntityBorrow   isLend = 0
+            2.borrowCount  != isEntityBorrow  isLend = 0 and giveEndTime < now()
+            borrowCount 借阅档案总数
+            isEntityBorrow  实体档案数量
+            isLend   实体档案未归还数量
+            giveEndTime  利用结束时间 -->
+            <span v-if="scope.row.borrowCount===scope.row.isEntityBorrow && scope.row.isLend===0" class="row-state end-state">已完成</span>
+            <span v-else-if="scope.row.borrowCount!==scope.row.isEntityBorrow && scope.row.isLend===0 && new Date(scope.row.giveEndTime) < new Date()" class="row-state end-state">已完成</span>
+            <span v-else-if="scope.row.borrowType===1" class="row-state ing-state">利用中</span>
+            <span v-else-if="scope.row.borrowType===2" class="row-state soon-state">即将到期</span>
+            <span v-else-if="scope.row.borrowType===3" class="row-state cancel-state">已过期</span>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-if="crud.data.length !== 0" />
+
+    <el-dialog title="利用详情" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="lendDetail" :before-close="handleCloseDialog">
+      <div class="setting-dialog">
+        <ul class="hitch-info">
+          <li><span>标题：</span>{{ rowCurrent && rowCurrent.title }}</li>
+          <li><span>申请时间：</span>{{ rowCurrent && rowCurrent.createTime }}</li>
+          <li><span>利用人：</span>{{ rowCurrent && rowCurrent.applicant }}</li>
+          <li><span>申请部门：</span>{{ rowCurrent && rowCurrent.deptsName }}</li>
+          <li><span>申请理由：</span>{{ rowCurrent && rowCurrent.borrowReason }}</li>
+          <li><span>开始时间：</span>{{ rowCurrent && rowCurrent.giveStartTime | parseTime }}</li>
+          <li><span>结束时间：</span>{{ rowCurrent && rowCurrent.giveEndTime | parseTime }}</li>
+          <!-- <li><span>审批意见：</span>{{ rowCurrent && rowCurrent.opinion }}</li> -->
+          <li class="state-list">
+            <span v-if="useRowStatus && useRowStatus.borrowCount===useRowStatus.isEntityBorrow && useRowStatus.isLend===0" class="row-state end-state">已完成</span>
+            <span v-else-if="useRowStatus && useRowStatus.borrowCount!==useRowStatus.isEntityBorrow && useRowStatus.isLend===0 && new Date(useRowStatus.giveEndTime) < new Date()" class="row-state end-state">已完成</span>
+            <span v-else-if="useRowStatus && useRowStatus.borrowType===1" class="row-state ing-state">利用中</span>
+            <span v-else-if="useRowStatus && useRowStatus.borrowType===2" class="row-state soon-state">即将到期</span>
+            <span v-else-if="useRowStatus && useRowStatus.borrowType===3" class="row-state cancel-state">已过期</span>
+          </li>
+        </ul>
+        <el-table
+          ref="table"
+          :data="detailArcData"
+          style="width: 100%;"
+          height="calc(100vh - 560px)"
+        >
+          <el-table-column type="index" label="序号" align="center" width="55" />
+          <el-table-column prop="title" label="档案文件">
+            <template slot-scope="scope">
+              <div class="title-style"><span>文件</span>【{{ scope.row.archiveNo }}】{{ scope.row.maintitle }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="utilizeType" label="利用方式" width="340">
+            <template slot-scope="scope">
+              <el-checkbox-group v-model="scope.row.utilizeType" class="checkbox-style">
+                <el-checkbox v-for="item in uselist" :key="item.value" :label="item.value" disabled>{{ item.label }}</el-checkbox>
+              </el-checkbox-group>
+            </template>
+          </el-table-column>
+          <el-table-column prop="utilizeState" label="实体借阅状态" align="center" width="110">
+            <template slot-scope="scope">
+              <div>
+                <!-- 实体利用状态 -1.未确认流程(未审批) 0.无需借阅 1.同意借阅 2.不允许借阅 3.已归还 -->
+                <span v-if="scope.row.utilizeState === -1" class="row-state soon-state">审批中</span>
+                <!-- <span v-if="scope.row.utilizeState === 0" class="row-state end-state">无需借阅</span> -->
+                <span v-if="scope.row.utilizeState === 1" class="row-state end-state">同意借阅</span>
+                <span v-if="scope.row.utilizeState === 2" class="row-state cancel-state">不允许借阅</span>
+                <span v-if="scope.row.utilizeState === 3" class="row-state end-state">已归还</span>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click.native="handleCloseDialog">关闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import CRUD, { presenter, crud } from '@crud/crud'
+import pagination from '@crud/Pagination'
+import DateRangePicker from '@/components/DateRangePicker'
+import { FetchBusinessFlowDetails } from '@/api/archivesManage/library'
+
+export default {
+  name: 'RecordList',
+  components: { pagination, DateRangePicker },
+  mixins: [presenter(), crud()],
+  cruds() {
+    return CRUD({
+      url: 'api/archivesUtilize/myUtilize',
+      title: '我的利用',
+      optShow: {
+        add: false,
+        edit: false,
+        del: false,
+        download: false,
+        reset: false,
+        group: false
+      }
+    })
+  },
+  data() {
+    return {
+      blurryTime: null,
+      lendDetail: false,
+      useRowStatus: null, // 为了详情内获取利用状态
+      rowCurrent: null,
+      detailArcData: [],
+      uselist: [
+        {
+          value: 1,
+          label: '电子查看'
+        },
+        {
+          value: 2,
+          label: '下载'
+        },
+        {
+          value: 3,
+          label: '打印'
+        },
+        {
+          value: 4,
+          label: '实体借阅'
+        }
+      ],
+      statusOptions: [
+        { value: null, label: '全部' },
+        { value: 1, label: '利用中' },
+        { value: 2, label: '即将到期' },
+        { value: 3, label: '逾期' },
+        { value: 4, label: '已完成' }
+      ],
+      status: null,
+      isEntity: null,
+      isEntityOptions: [
+        { value: null, label: '全部' },
+        { value: true, label: '包含实体' },
+        { value: false, label: '不包含实体' }
+      ]
+    }
+  },
+  watch: {
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    [CRUD.HOOK.beforeRefresh]() {
+      if (this.blurryTime) {
+        this.crud.query.startTime = this.blurryTime[0]
+        this.crud.query.endTime = this.blurryTime[1]
+      } else {
+        this.crud.query.startTime = null
+        this.crud.query.endTime = null
+      }
+      this.crud.query.status = this.status
+      this.crud.query.isEntity = this.isEntity
+    },
+    resetQuery() {
+      this.blurryTime = []
+      this.crud.query.startTime = null
+      this.crud.query.endTime = null
+      this.status = null
+      this.isEntity = null
+      // this.crud.query.status = null
+      // this.crud.query.isEntity = 1
+      this.crud.toQuery()
+    },
+    getBusinessFlowDetails(row) {
+      this.useRowStatus = row
+      const params = {
+        'businessId': row.businessFlowId,
+        'page': 0,
+        'size': '999'
+      }
+      FetchBusinessFlowDetails(params).then((res) => {
+        if (res.code !== 500) {
+          this.rowCurrent = res.businessFlow
+          res.details.content.forEach(item => {
+            item.utilizeType = item.utilizeType.split(',').map(Number)
+          })
+          this.detailArcData = res.details.content
+          console.log(this.detailArcData)
+        } else {
+          this.$message({ message: '获取数据失败', type: 'error', offset: 8 })
+        }
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    tableDoubleClick(row) {
+      this.getBusinessFlowDetails(row)
+      this.lendDetail = true
+    },
+    handleCloseDialog(done) {
+      this.lendDetail = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/collect-reorganizi.scss";
+
+.recordList-main{
+  height: calc(100vh - 236px);
+  .start-date,
+  .end-date{
+    display: flex;
+    justify-content: flex-start;
+    padding-left: 8px;
+    font-size: 14px;
+    line-height: 30px;
+    color: #0C0E1E;
+    span{
+      display: block;
+      margin-right: 8px;
+    }
+  }
+  .iconfont{
+    font-size: 14px;
+  }
+  .icon-fou{
+    color: #A6ADB6;
+  }
+  .icon-shi{
+    color: #12C37A;
+  }
+  .icon-dengdai{
+    color: #FF8329;
+  }
+  .icon-cuowu1{
+    color: #ED4A41;
+  }
+  .row-state{
+    width: 56px;
+    padding: 0;
+    text-align: center;
+  }
+}
+.user-record{
+  padding: 0 0 0 20px;
+  height: calc(100vh - 320px);
+}
+.title-style{
+  span{
+    display: inline-block;
+    width: 42px;
+    height: 22px;
+    line-height: 22px;
+    text-align: center;
+    font-size: 12px;
+    color: #0348F3;
+    background-color: #CAE1FF;
+    border-radius: 3px;
+  }
+}
+::v-deep .el-dialog{
+  width: 860px !important;
+  .el-form-item .el-form-item__content{
+    width: 280px;
+  }
+  .dialog-footer{
+    margin-top: 15px !important;
+  }
+}
+::v-deep .el-checkbox-group{
+  .el-checkbox{
+    margin-right: 10px !important;
+  }
+}
+::v-deep .el-pagination{
+  margin: 24px 0 10px 0 !important
+}
+
+::v-deep .input-prepend .el-input__inner{
+  padding-left: 100px;
+}
+
+.row-state{
+  font-style: normal;
+  padding: 0 8px;
+}
+</style>

src/views/archiveUtilize/utillizeRecord/recordList.vue

@@ -78,7 +78,7 @@
         <template slot-scope="scope">
           <div>
             <span v-if="scope.row.borrowType==='即将到期'" class="row-state soon-state">{{ scope.row.borrowType }}</span>
-            <span v-if="scope.row.borrowType==='利用中'" class="row-state end-state">{{ scope.row.borrowType }}</span>
+            <span v-if="scope.row.borrowType==='利用中'" class="row-state ing-state">{{ scope.row.borrowType }}</span>
             <span v-if="scope.row.borrowType==='已到期'" class="row-state cancel-state">{{ scope.row.borrowType }}</span>
           </div>
         </template>
@@ -98,10 +98,9 @@
           <li><span>结束时间：</span>{{ rowCurrent && rowCurrent.giveEndTime | parseTime }}</li>
           <!-- <li><span>审批意见：</span>{{ rowCurrent && rowCurrent.opinion }}</li> -->
           <li class="state-list">
-            <span v-if="rowCurrent && rowCurrent.status === 1" class="row-state ing-state">进行中</span>
-            <span v-if="rowCurrent && rowCurrent.status === 2" class="row-state case-cancel">已取消</span>
-            <span v-if="rowCurrent && rowCurrent.status === 3" class="row-state end-state">已完成</span>
-            <span v-if="rowCurrent && rowCurrent.status === 4" class="row-state cancel-state">不通过</span>
+            <span v-if="useRowStatus && useRowStatus.borrowType==='即将到期'" class="row-state soon-state">{{ useRowStatus.borrowType }}</span>
+            <span v-if="useRowStatus && useRowStatus.borrowType==='利用中'" class="row-state ing-state">{{ useRowStatus.borrowType }}</span>
+            <span v-if="useRowStatus && useRowStatus.borrowType==='已到期'" class="row-state cancel-state">{{ useRowStatus.borrowType }}</span>
           </li>
         </ul>
         <el-table
@@ -188,6 +187,7 @@ export default {
       inputSelect: '',
       blurryTime: null,
       lendDetail: false,
+      useRowStatus: null,
       rowCurrent: null,
       detailArcData: [],
       uselist: [
@@ -300,6 +300,7 @@ export default {
       this.crud.toQuery()
     },
     getBusinessFlowDetails(row) {
+      this.useRowStatus = row
       const params = {
         'businessId': row.businessFlowId,
         'page': 0,

src/views/system/user/center.vue

@@ -76,7 +76,7 @@
           <!-- 流程中心 -->
           <processCenter v-if="activeIndex == 2" />
           <!-- 利用中心 -->
-          <utillizeList v-if="activeIndex == 3" :is-user-center="true" />
+          <utillizeList v-if="activeIndex == 3" />
           <!-- 操作日志 -->
           <div v-if="activeIndex == 4" class="tab-item" style="padding-left: 20px;">
             <OperateLog :is-center="isCenter" />
@@ -102,7 +102,7 @@ import { editUser } from '@/api/system/user'
 import Avatar from '@/assets/images/avatar.png'
 import messageCenter from './messageCenter/index'
 import processCenter from './processCenter/index'
-import utillizeList from '@/views/archiveUtilize/utillizeRecord/recordList'
+import utillizeList from '@/views/archiveUtilize/utillizeRecord/myUtilizeList'
 import OperateLog from '@/views/system/log/operateLog/index'
 export default {
   name: 'Center',

src/views/system/user/messageCenter/index.vue

@@ -84,8 +84,8 @@ export default {
       items: [],
       page: {
         total: 0,
-        size: 10,
-        page: 1,
+        size: 2,
+        page: 10,
         totalPages: 0
       },
       loading: false,
@@ -114,27 +114,33 @@ export default {
       }
       return params
     },
-    getTableData() {
+    getListMessage() {
       this.loading = true
       FetchMySystemNotice(this.getParams()).then(res => {
-        this.page.total = res.totalElements
-        this.page.totalPages = res.totalPages
-        const table = res.content
+        const listData = res.content
         // table.forEach(item => {
         //   item.pushUserName = item.noticeUsers[0].pushUserName
         //   item.isRead = item.noticeUsers[0].isRead
         // })
-        this.items = table.concat(table)
+        if (listData.length === 0) {
+          this.loading = false
+        } else {
+          this.loading = true
+        }
+        this.page.total = res.totalElements
+        this.page.totalPages = res.totalPages
+        // this.items = this.items.concat(table)
+        this.items = [...listData, ...this.items]
         this.loading = false
       })
     },
     loadData() {
       this.loading = true
       setTimeout(() => {
-        this.getTableData()
+        this.getListMessage()
         this.page.page++
         this.loading = false
-        if (this.page.page >= this.page.totalPages) {
+        if (this.page.page > this.page.totalPages) {
           this.hasMore = false
         }
       }, 1000)
@@ -193,7 +199,7 @@ export default {
     handleRead() {
       isread(this.getUserMsgId(this.selections)).then(res => {
         if (res) {
-          // this.getTableData()
+          // this.getListMessage()
           this.reload()
         }
       })
@@ -210,7 +216,7 @@ export default {
       isread(this.getUserMsgId(allList)).then(res => {
         if (res) {
           this.reload()
-          // this.getTableData()
+          // this.getListMessage()
         }
       })
     },

src/views/system/user/processCenter/index.vue

@@ -195,6 +195,7 @@ export default {
       this.$refs.eForm.formVisible = true
       this.$refs.eForm.selectRow = row
       this.$refs.eForm.activeIndex = 0
+      this.$refs.eForm.form.opinion = null
       this.$refs.eForm.setPage.page = 0
       this.$refs.eForm.getBusinessFlowDetails()
     },