传阅者逻辑更新

src/api/system/borrower.js

@@ -33,4 +33,12 @@ export function FetchInitBorrowerList(params) {
   })
 }
 
-export default { add, edit, del, FetchInitBorrowerList }
+export function FetchInitBorrowerListOrderNo(params) {
+  return request({
+    url: 'api/documentArchives/initBorrowerListOrderNo',
+    method: 'get',
+    params
+  })
+}
+
+export default { add, edit, del, FetchInitBorrowerList, FetchInitBorrowerListOrderNo }

src/api/system/documentArchives.js

@@ -149,6 +149,13 @@ export function FetchInitDistributorByDocumentId(params) {
   })
 }
 
+export function FetchInitDistributorAllByDocumentId(params) {
+  return request({
+    url: 'api/documentArchives/initDistributorAllByDocumentId' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get'
+  })
+}
+
 // 查看操作记录
 export function FetchInitOperate(params) {
   return request({
@@ -371,6 +378,7 @@ export default {
   FetchAddDocumentDetails,
   FetchDeleteDocumentDetails,
   FetchInitDistributorByDocumentId,
+  FetchInitDistributorAllByDocumentId,
   FetchInitOperate,
   FetchBingdingLabel,
   FetchUnbindTag,

src/views/archivesMIOD/miodLibrary/index.vue

@@ -145,7 +145,7 @@
 <script>
 import CRUD, { presenter, header } from '@crud/crud'
 import { miodLibraryCrud } from './mixins/index'
-import crudDocumentArchives, { FetchDelArchives, FetchCompleteDelArchives, FetchRestoreArchives, FetchInitDistributorByDocumentId } from '@/api/system/documentArchives'
+import crudDocumentArchives, { FetchDelArchives, FetchCompleteDelArchives, FetchRestoreArchives, FetchInitDistributorAllByDocumentId } from '@/api/system/documentArchives'
 import crudOperation from '@crud/CRUD.operation'
 import pagination from '@crud/Pagination'
 import TreeList from './treeList'
@@ -375,7 +375,7 @@ export default {
                 this.$refs.previewForm.fileJsonString = ''
               }
               // 获取借阅者
-              FetchInitDistributorByDocumentId(params).then(res => {
+              FetchInitDistributorAllByDocumentId(params).then(res => {
                 if (res && res.length !== 0) {
                   this.$refs.previewForm.miodDeptsTags = res
                   const ids = res.map(item => item.id)

src/views/archivesMIOD/miodLibrary/module/detail.vue

@@ -28,8 +28,20 @@
               </el-col>
             </el-row>
             <div>
-              <div v-if="borrowerList.length !== 0" class="childDevice-info">
-                <p><i style="font-style:normal; font-weight: bold;">待传阅者：</i><span>{{ borrowerList | formatBorrowerList }}</span></p>
+              <!-- v-if="borrowerList.length !== 0" -->
+              <div class="childDevice-info">
+                <!-- <span>{{ borrowerList | formatBorrowerList }}</span> -->
+                <p>
+                  <i style="font-style:normal; font-weight: bold;">传阅者：</i>
+                  <el-tag
+                    v-for="tag in borrowerList"
+                    :key="tag.id"
+                    :class="tag.readType === 0 ? 'no-depts' : tag.readType === 1 ? 'lending-depts' : ''"
+                    :disable-transitions="false"
+                  >
+                    {{ tag.borrowName }}
+                  </el-tag>
+                </p>
               </div>
               <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px; margin-bottom: 10px; padding: 0 20px 0 10px;">
                 <h4 style="font-size: 16px; color: #1c1c1c;">文件列表</h4>
@@ -246,7 +258,7 @@
 
 <script>
 // import { crud } from '@crud/crud'
-import { FetchArchivesDetails, FetchInitDocumentDetailsList, FetchAddDocumentDetails, FetchDeleteDocumentDetails, FetchInitDistributorByDocumentId, FetchInitOperate, FetchReadGW, FetchBingdingLabel, FetchUnbindTag, FetchArchivesDetailsBorrowLog, FetchLend } from '@/api/system/documentArchives'
+import { FetchArchivesDetails, FetchInitDocumentDetailsList, FetchAddDocumentDetails, FetchDeleteDocumentDetails, FetchInitDistributorAllByDocumentId, FetchInitOperate, FetchReadGW, FetchBingdingLabel, FetchUnbindTag, FetchArchivesDetailsBorrowLog, FetchLend } from '@/api/system/documentArchives'
 import { FetchInitBorrowerList } from '@/api/system/borrower'
 import { mapGetters } from 'vuex'
 
@@ -410,8 +422,8 @@ export default {
           : this.parentInfo.id
       }
       const distributorParams = {
-        ...commonParams,
-        readType: 0
+        ...commonParams
+        // readType: 0
       }
 
       Promise.all([
@@ -425,7 +437,7 @@ export default {
           }
         }),
         // 获取传阅人列表
-        FetchInitDistributorByDocumentId(distributorParams).then(data => {
+        FetchInitDistributorAllByDocumentId(distributorParams).then(data => {
           this.borrowerList = data
         })
       ]).catch(error => {
@@ -870,13 +882,34 @@ export default {
   display: flex;
   justify-content: flex-start;
   padding: 9px 12px 11px 12px;
-  background: rgb(255, 243, 229);
-  border-radius: 3px;
-  border: 1px solid rgb(254, 189, 152);
+  // background: rgb(255, 243, 229);
+  // border-radius: 3px;
+  // border: 1px solid rgb(254, 189, 152);
   color: #0C0E1E;
-  span{
-    color: #545B65;
+  // span{
+  //   color: #545B65;
+  // }
+
+  .el-tag{
+    margin-right: 10px;
+    &.no-depts{
+      border-color: #e6e8ed;
+      color: #a6adb6;
+      background-color: #f3f5f9;
+      ::v-deep .el-icon-close{
+        color: #a6adb6 !important;
+      }
+    }
+    &.lending-depts{
+      border-color: #07A35A;
+      color: #07A35A;
+      background-color: #e0fcef;
+      ::v-deep .el-icon-close{
+        color: #07A35A !important;
+      }
+    }
   }
+
 }
 
 </style>

src/views/components/category/PreviewForm.vue

@@ -86,11 +86,12 @@
           >
             <!-- :class="{'miod-depts-input null-input': miodDeptsTags.length === 0 && deptsValid, 'miod-depts-input': !deptsValid || miodDeptsTags.length !== 0}" 暂时先不必填 -->
             <div class="miod-depts-input" @click="showDeptsDialog">
+              <!-- :class="tag.readType === 0 ? 'no-depts' : tag.readType === 1 ? 'lending-depts' : ''" -->
               <el-tag
                 v-for="tag in miodDeptsTags"
                 :key="tag.id"
                 v-model="addOrUpdateForm.miodDepts"
-                :class="{'no-depts':(tag.borrowType === 2)}"
+                :class="(!tag.readType && tag.readType!==0) ? 'no-depts' : tag.readType === 0 ? 'no-depts' : tag.readType === 1 ? 'lending-depts' : ''"
                 closable
                 :disable-transitions="false"
                 @close="handleCloseDeptsTag(tag, $event)"
@@ -178,44 +179,20 @@
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
-        <el-table ref="deptsMiodTable" :data="deptsMiodTable" highlight-current-row row-key="id" height="400" style="width: 100%;" @row-click="clickRowHandlerDepts" @selection-change="selectionChangeHandlerDepts">
-          <el-table-column type="selection" width="55" />
-          <el-table-column prop="borrowName" label="借阅者名称" />
-          <el-table-column prop="borrowType" label="借阅者类型">
-            <template slot-scope="scope">
-              <div>
-                <span v-if="scope.row.borrowType === 1">部门</span>
-                <span v-if="scope.row.borrowType === 2">个人</span>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column prop="borrowNo" label="借阅证绑定">
-            <template slot-scope="scope">
+        <ul class="checkbox-list-depts">
+          <li v-for="(item, index) in deptsMiodTable" :key="index" :class="item.readType === null ? '' : item.readType === 0 ? '' : item.readType === 1 ? 'lending-depts' : item.readType === 2 ? 'blue-depts' : ''">
+            <el-checkbox v-model="item.checked" @change="handleCheckChange(item)">
               <div>
-                <span v-if="scope.row.borrowNo && (scope.row.borrowNo !== null || scope.row.borrowNo !== '')" class="row-state end-state">已绑定</span>
-                <span v-else class="row-state cancel-state">未绑定</span>
+                <el-tooltip class="item" effect="dark" :content="item.borrowName" placement="top-start">
+                  <p> {{ item.borrowName }}</p>
+                </el-tooltip>
+                <p> {{ item.borrowNo }}</p>
               </div>
-            </template>
-          </el-table-column>
-          <el-table-column prop="create_time" label="创建日期" width="200px">
-            <template slot-scope="scope">
-              <div>{{ scope.row.create_time | parseTime }}</div>
-            </template>
-          </el-table-column>
-        </el-table>
-        <!--分页组件-->
-        <el-pagination
-          v-if="deptsMiodTable.length !== 0"
-          :current-page="pageDepts.page"
-          :total="pageDepts.total"
-          :page-size="pageDepts.size"
-          :pager-count="5"
-          layout="total, prev, pager, next, sizes"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentPage"
-        />
+            </el-checkbox>
+          </li>
+        </ul>
       </div>
-      <div slot="footer" class="dialog-footer">
+      <div slot="footer" class="dialog-footer" style="margin-top: 0;">
         <el-button type="text" @click="handleClose">取消</el-button>
         <!-- :loading="btnLoading" -->
         <el-button type="primary" @click.native="handleComfireDepts">确定</el-button>
@@ -232,7 +209,7 @@ import { collectAdd, collectEdit, FetchIsRepeatByArchivesNo, FetchIsRepeatAllByA
 import { prearchEdit, FetchMergeToFile, FetchReDoeditIsRepeat } from '@/api/prearchiveLibrary/prearchiveLibrary'
 import { miodEditDocument, FetchRegNoByDocumentIdAndDocDepartment } from '@/api/system/documentArchives'
 import { getNoFormatField } from '@/api/system/category/fileNoFormat'
-import { FetchInitBorrowerList } from '@/api/system/borrower'
+import { FetchInitBorrowerListOrderNo } from '@/api/system/borrower'
 import draggable from 'vuedraggable'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
@@ -356,7 +333,8 @@ export default {
       miodDeptsTags: [],
       deptsValid: false,
       // 待选中的ID列表
-      pendingSelectionIds: []
+      pendingSelectionIds: [],
+      allTagStates: {}
     }
   },
   computed: {
@@ -411,7 +389,14 @@ export default {
   },
   methods: {
     onDialogOpen() {
-      this.pendingSelectionIds = this.miodDeptsTags.map(tag => tag.id)
+      // this.pendingSelectionIds = this.miodDeptsTags.map(tag => tag.id)
+      // 初始化时保存所有标签的状态到allTagStates
+      this.miodDeptsTags.forEach(tag => {
+        this.allTagStates[tag.id] = {
+          readType: tag.readType
+        }
+      })
+      this.pendingSelectionIds = this.miodDeptsTags
     },
     showDeptsDialog() {
       this.deptsVisible = true
@@ -420,11 +405,13 @@ export default {
     // 获取部门/人员列表
     fetchDeptsList() {
       // this.btnLoading = true
-
-      FetchInitBorrowerList(this.filterParams)
+      FetchInitBorrowerListOrderNo()
         .then(res => {
-          this.deptsMiodTable = res.content || []
-          this.pageDepts.total = res.totalElements || 0
+          this.deptsMiodTable = res || []
+          // this.pageDepts.total = res.totalElements || 0
+
+          // 在恢复选中状态之前，先恢复所有项的readType
+          this.restoreAllReadTypes()
 
           // 数据加载完成后恢复选中状态
           this.restoreSelectionState()
@@ -437,28 +424,68 @@ export default {
           // this.btnLoading = false
         })
     },
-    // 恢复选中状态
+    handleCheckChange(item) {
+      if (item.checked) {
+        this.miodDeptsSelections.push(item)
+      } else {
+      // 取消选中时从已选数组移除
+        this.miodDeptsSelections = this.miodDeptsSelections.filter(
+          dept => dept.id !== item.id
+        )
+      }
+    },
+    restoreAllReadTypes() {
+      if (this.deptsMiodTable.length > 0) {
+        this.deptsMiodTable.forEach(item => {
+          // 优先从allTagStates中获取状态
+          const tagState = this.allTagStates[item.id]
+          if (tagState && tagState.readType !== undefined) {
+            this.$set(item, 'readType', tagState.readType)
+          } else {
+            // 没有历史状态，设置默认值
+            this.$set(item, 'readType', null)
+          }
+        })
+      }
+    },
+
     restoreSelectionState() {
       this.$nextTick(() => {
+        console.log('this.pendingSelectionIds', this.pendingSelectionIds)
+
         if (this.deptsMiodTable.length > 0 && this.pendingSelectionIds.length > 0) {
-          // 清空当前选中状态
-          this.$refs.deptsMiodTable.clearSelection()
+          // 初始化表格项的状态
+          this.deptsMiodTable.forEach(item => {
+            this.$set(item, 'checked', false)
+          })
 
-          // 恢复之前的选中状态
-          this.deptsMiodTable.forEach(row => {
-            if (this.pendingSelectionIds.includes(row.id)) {
-              this.$refs.deptsMiodTable.toggleRowSelection(row, true)
+          // 恢复选中状态
+          this.miodDeptsSelections = []
+          this.pendingSelectionIds.forEach(selection => {
+            const tableItem = this.deptsMiodTable.find(item => String(item.id) === String(selection.id))
+            if (tableItem) {
+              this.$set(tableItem, 'checked', true)
+              this.miodDeptsSelections.push(tableItem)
             }
           })
-
-          // 清空待选中ID列表
+          console.log('this.deptsMiodTable', this.deptsMiodTable)
           this.pendingSelectionIds = []
+        } else {
+          this.deptsMiodTable.forEach(item => {
+            this.$set(item, 'checked', false)
+          })
+          this.miodDeptsSelections = []
         }
       })
     },
-
     handleCloseDeptsTag(tag, event) {
-      event.stopPropagation() // 阻止事件冒泡到父元素
+      event.stopPropagation()
+      // 在删除标签前，保存其状态
+      this.allTagStates[tag.id] = {
+        readType: tag.readType
+        // 可以保存其他需要的状态
+      }
+
       this.miodDeptsTags.splice(this.miodDeptsTags.indexOf(tag), 1)
       if (this.miodDeptsTags.length === 0) {
         this.$set(this.addOrUpdateForm, 'miodDepts', null)
@@ -470,23 +497,9 @@ export default {
         return
       }
       this.miodDeptsTags = [...this.miodDeptsSelections]
+      console.log('this.miodDeptsTags', this.miodDeptsTags)
       this.deptsVisible = false
     },
-    clickRowHandlerDepts(row) {
-      this.$refs.deptsMiodTable.toggleRowSelection(row)
-    },
-    selectionChangeHandlerDepts(val) {
-      this.miodDeptsSelections = val
-    },
-    handleSizeChange(size) {
-      this.pageDepts.size = size
-      this.pageDepts.page = 0
-      this.fetchDeptsList()
-    },
-    handleCurrentPage(pageVal) {
-      this.pageDepts.page = pageVal - 1
-      this.fetchDeptsList()
-    },
     refreshTreeList() {
       this.$emit('refreshTree')
     },
@@ -1526,6 +1539,7 @@ export default {
       this.popoverTableDataClassify = []
       this.popoverTableDataFonds = []
       this.deptsVisible = false
+      this.allTagStates = {}
       // done()
     },
     // 选择附件
@@ -1848,6 +1862,14 @@ export default {
   .el-tag{
     margin-right: 10px;
     &.no-depts{
+      border-color: #e6e8ed;
+      color: #a6adb6;
+      background-color: #f3f5f9;
+      ::v-deep .el-icon-close{
+        color: #a6adb6 !important;
+      }
+    }
+    &.lending-depts{
       border-color: #07A35A;
       color: #07A35A;
       background-color: #e0fcef;
@@ -1855,6 +1877,14 @@ export default {
         color: #07A35A !important;
       }
     }
+    &.new-depts{
+      border-color: #FEBD98;
+      color: #FF8329;
+      background-color: #FFF3E5;
+      ::v-deep .el-icon-close{
+        color: #FF8329 !important;
+      }
+    }
   }
 }
 .mulit-input{
@@ -1888,4 +1918,59 @@ export default {
 ::v-deep .vue-treeselect__value-remove{
   display: none;
 }
+
+.checkbox-list-depts{
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  max-height: 480px;
+  overflow: hidden;
+  overflow-y: scroll;
+  li{
+    width: calc(100% / 5 - 10px);
+    height: 40px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    overflow: hidden;
+    &:hover{
+      background-color: #EAF3FB;
+    }
+    &.no-depts{
+      // border-color: #e6e8ed;
+      color: #a6adb6;
+      background-color: #f3f5f9;
+    }
+    &.lending-depts{
+      // border-color: #07A35A;
+      color: #07A35A;
+      background-color: #e0fcef;
+    }
+    &.blue-depts{
+      // border-color: #e6e8ed;
+      color: #0348f3;
+      background-color: #eef5fe;
+    }
+    ::v-deep .el-checkbox {
+      .el-checkbox__input{
+        vertical-align: top;
+      }
+      .el-checkbox__label{
+        & div{
+          margin-top: -2px;
+
+          & p:first-child{
+            color: #0c0e1e;
+            max-width: 120px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & p:last-child{
+            color: #a5a5a5;
+          }
+        }
+      }
+    }
+  }
+}
 </style>