liu_li
/
yxk-storeroom-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

借阅管理 状态style 排序 按钮功能补全

master
x_ying 3 years ago
parent
1a2aa73cf8
commit
28279a3c41
10 changed files with 193 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 55
      src/assets/styles/lend-manage.scss
  2. 3
      src/views/archivesManage/archivesCheck/index.vue
  3. 40
      src/views/archivesManage/lendManage/borrowerManage/index.vue
  4. 15
      src/views/archivesManage/lendManage/components/archiveDetail.vue
  5. 38
      src/views/archivesManage/lendManage/data1.json
  6. 3
      src/views/archivesManage/lendManage/index.vue
  7. 44
      src/views/archivesManage/lendManage/lendConfirm/index.vue
  8. 19
      src/views/archivesManage/lendManage/lendQuery/index.vue
  9. 30
      src/views/archivesManage/lendManage/returnArchives/index.vue
  10. 29
      src/views/archivesManage/lendManage/toLend/index.vue

55
src/assets/styles/lend-manage.scss
View File

@ -0,0 +1,55 @@
.no-lend .cell-lend{
color:#F65163;
border: 1px solid #F65163;
padding: 2px 8px;
border-radius: 11px;
}
.have-lend .cell-lend{
color: #fff;
padding: 2px 8px;
border-radius: 11px;
background-color: #F65163;
}
.other-lend .cell-lend{
color:#F65163;
border: 1px solid #F65163;
padding: 2px 8px;
border-radius: 11px;
position: relative;
display: inline-block;
width: 46px;
height: 22px;
&::after{
content: '';
display: block;
height: 2px;
width: 20px;
background-color: #F65163;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}
.clear{
border-radius: 13px;
width: 80px;
height: 26px;
line-height: 26px;
display: inline-block;
text-align: center;
}
.no-clear .clear{
color: #FD8042;
border: 1px solid #FD8042;
}
.have-clear .clear{
color: #1AAE93;
border: 1px solid #1AAE93;
}
.fail-clear .clear{
color: #F65163;
border: 1px solid #F65163;
}

3
src/views/archivesManage/archivesCheck/index.vue
View File

@ -262,9 +262,6 @@ export default {
padding: 0;
margin: 0;
}
// ::v-deep .el-dialog{
// width: 1340px;
// }
.el-form{
display: flex;

40
src/views/archivesManage/lendManage/borrowerManage/index.vue
View File

@ -3,8 +3,8 @@
<head-slot>
<!-- <crudOperation :permission="permission" /> -->
<el-button icon="el-icon-plus" size="mini" @click="addFormVisible = true">新增</el-button>
<el-button icon="el-icon-edit" size="mini" @click="editFormVisible = true">修改</el-button>
<el-button icon="el-icon-delete" size="mini" @click="deleteVisible = true">删除</el-button>
<el-button icon="el-icon-edit" size="mini" :disabled="selections.length ? false : true " @click="handelEdit">修改</el-button>
<el-button icon="el-icon-delete" size="mini" :disabled="selections.length ? false : true " @click="deleteVisible = true">删除</el-button>
<!-- 搜索 -->
<el-input
@ -138,10 +138,10 @@
style="width: 420px"
/>
</el-form-item>
<el-form-item label="电话号码" prop="tel">
<el-input v-model="borrowerForm.tel" style="width: 420px" />
<el-form-item label="电话号码" prop="borrowerTel">
<el-input v-model="borrowerForm.borrowerTel" style="width: 420px" />
</el-form-item>
<el-form-item label="所属部门" prop="department" class="down-select">
<el-form-item label="所属部门" prop="borrowerDepartment" class="down-select">
<el-select
v-model="borrowerForm.departmentDatas"
style="width: 420px"
@ -157,7 +157,7 @@
/>
</el-select>
</el-form-item>
<el-form-item label="证件类型" prop="idType" class="down-select">
<el-form-item label="证件类型" prop="borrowerIdType" class="down-select">
<el-select
v-model="borrowerForm.idType"
style="width: 420px"
@ -173,8 +173,8 @@
/>
</el-select>
</el-form-item>
<el-form-item label="证件号码" prop="idNumber">
<el-input v-model="borrowerForm.idNumber" style="width: 420px" />
<el-form-item label="证件号码" prop="borrowerIdNum">
<el-input v-model="borrowerForm.borrowerIdNum" style="width: 420px" />
</el-form-item>
<!-- <el-form-item label="借阅时间" prop="lendDate">
<date-range-picker style="width: 420px" />
@ -232,16 +232,11 @@ export default {
data() {
return {
tableData: [],
selections: [],
addFormVisible: false,
editFormVisible: false,
deleteVisible: false,
borrowerForm: {
borrowerName: '',
tel: '',
department: '',
idType: [],
idNumber: ''
},
borrowerForm: {},
permission: {
add: ['admin', 'lend:add'],
edit: ['admin', 'lend:edit'],
@ -256,8 +251,8 @@ export default {
getData() {
this.tableData = data1.rows
},
selectionChangeHandler() {
console.log('selectionChangeHandler')
selectionChangeHandler(val) {
this.selections = val
},
clickRowHandler(row) {
this.$refs.table.toggleRowSelection(row)
@ -267,6 +262,17 @@ export default {
},
handleConfirm() {
this.deleteVisible = false
},
handelEdit() {
if (this.selections.length === 1) {
this.borrowerForm = this.selections[0]
this.editFormVisible = true
} else {
this.$message({
message: '只可以选中1条数据进行修改',
type: 'warning'
})
}
}
}
}

15
src/views/archivesManage/lendManage/components/archiveDetail.vue
View File

@ -1,15 +0,0 @@
<template>
<div>
档案详情
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>

38
src/views/archivesManage/lendManage/data1.json
View File

@ -9,15 +9,16 @@
"isTitleName":"这是一份文件的标题标题...",
"isFieldName":"文书-文件-2022",
"isStoragePath":"库房A-库区A-01列-1节1层-左",
"isLendStatus":"待借",
"isOperationTime":"2022-05-25 14:02",
"borrowerName":"张三",
"isLendStatus":"",
"isOperationTime":"2022-05-26 14:02",
"borrowerName":"李四",
"borrowDays":"2022-5-25至2022-6-25",
"borrowGoal":"工作考察",
"borrowerDepartment":"办公室",
"borrowerIdType":"身份证",
"borrowerIdNum":"420880190011115636",
"borrowerTel":"027-5955 7085"
"borrowerTel":"027-5955 7085",
"isWarnState":"已解除"
},
{
"id":"3d6d548d30db426ea3d95d63f589b294",
@ -35,7 +36,8 @@
"borrowerDepartment":"办公室",
"borrowerIdType":"身份证",
"borrowerIdNum":"420880190011115636",
"borrowerTel":"027-5955 7085"
"borrowerTel":"027-5955 7085",
"isWarnState":"已解除"
},
{
"id":"45ff597e7cc64d11803ac422816b1e23",
@ -46,14 +48,15 @@
"isFieldName":"文书-文件-2022",
"isStoragePath":"库房A-库区A-01列-1节1层-左",
"isLendStatus":"待借",
"isOperationTime":"2022-05-25 14:02",
"isOperationTime":"2022-05-27 14:02",
"borrowerName":"张三",
"borrowDays":"2022-5-25至2022-6-25",
"borrowGoal":"工作考察",
"borrowerDepartment":"办公室",
"borrowerIdType":"身份证",
"borrowerIdNum":"420880190011115636",
"borrowerTel":"027-5955 7085"
"borrowerTel":"027-5955 7085",
"isWarnState":"未解除"
},
{
"id":"49106aa0d1534a7a900843d0c4531840",
@ -64,14 +67,15 @@
"isFieldName":"文书-文件-2022",
"isStoragePath":"库房A-库区A-01列-1节1层-左",
"isLendStatus":"待借",
"isOperationTime":"2022-05-25 14:02",
"isOperationTime":"2022-05-28 14:02",
"borrowerName":"张三",
"borrowDays":"2022-5-25至2022-6-25",
"borrowGoal":"工作考察",
"borrowerDepartment":"办公室",
"borrowerIdType":"身份证",
"borrowerIdNum":"420880190011115636",
"borrowerTel":"027-5955 7085"
"borrowerTel":"027-5955 7085",
"isWarnState":"未解除"
},
{
"id":"6e604355ff1e47e8b48117dca36420c7",
@ -89,7 +93,8 @@
"borrowerDepartment":"办公室",
"borrowerIdType":"身份证",
"borrowerIdNum":"420880190011115636",
"borrowerTel":"027-5955 7085"
"borrowerTel":"027-5955 7085",
"isWarnState":"解除失败"
},
{
"id":"6f4a6631d9d3424b960793704f3757b3",
@ -107,7 +112,8 @@
"borrowerDepartment":"办公室",
"borrowerIdType":"身份证",
"borrowerIdNum":"420880190011115636",
"borrowerTel":"027-5955 7085"
"borrowerTel":"027-5955 7085",
"isWarnState":"解除失败"
},
{
"id":"76e29d5c0a0541bfb1ee9da432183b15",
@ -136,8 +142,8 @@
"isFieldName":"文书-文件-2022",
"isStoragePath":"库房A-库区A-01列-1节1层-左",
"isLendStatus":"已借",
"isOperationTime":"2022-05-25 14:02",
"borrowerName":"张三",
"isOperationTime":"2022-07-25 14:02",
"borrowerName":"王五",
"borrowDays":"2022-5-25至2022-6-25",
"borrowGoal":"工作考察",
"borrowerDepartment":"办公室",
@ -171,7 +177,7 @@
"isTitleName":"这是一份文件的标题标题...",
"isFieldName":"文书-文件-2022",
"isStoragePath":"库房A-库区A-01列-1节1层-左",
"isLendStatus":"待借",
"isLendStatus":"",
"isOperationTime":"2022-05-25 14:02",
"borrowerName":"张三",
"borrowDays":"2022-5-25至2022-6-25",
@ -189,7 +195,7 @@
"isTitleName":"这是一份文件的标题标题...",
"isFieldName":"文书-文件-2022",
"isStoragePath":"库房A-库区A-01列-1节1层-左",
"isLendStatus":"待借",
"isLendStatus":"",
"isOperationTime":"2022-05-25 14:02",
"borrowerName":"张三",
"borrowDays":"2022-5-25至2022-6-25",
@ -208,7 +214,7 @@
"isFieldName":"文书-文件-2022",
"isStoragePath":"库房A-库区A-01列-1节1层-左",
"isLendStatus":"待借",
"isOperationTime":"2022-05-25 14:02",
"isOperationTime":"2022-06-25 14:02",
"borrowerName":"张三",
"borrowDays":"2022-5-25至2022-6-25",
"borrowGoal":"工作考察",

3
src/views/archivesManage/lendManage/index.vue
View File

@ -40,7 +40,7 @@
<span class="tab-right-img" />
</ul>
<!-- <component :is="comName" :record-form-visible="recordFormVisible" /> -->
<component :is="comName" />
<component :is="comName" @callBack="callBack" />
</div>
</div>
@ -90,7 +90,6 @@ export default {
},
// 重新登记
callBack(val) {
console.log(val, '-------------------')
this.activeIndex = val.index
}
}

44
src/views/archivesManage/lendManage/lendConfirm/index.vue
View File

@ -3,7 +3,7 @@
<headSlot>
<el-button icon="el-icon-plus" size="mini" :disabled="selections.length ? false : true " @click="lendFormVisible = true">借出</el-button>
<el-button icon="el-icon-edit" size="mini" @click="handelReRecord">重新登记</el-button>
<el-button icon="el-icon-minus" size="mini" @click="handleRemove">移出</el-button>
<el-button icon="el-icon-minus" size="mini" :disabled="selections.length ? false : true " @click="handleRemove">移出</el-button>
<crudOperation style="margin-left:10px" />
</headSlot>
<!--表格渲染-->
@ -12,6 +12,8 @@
:data="tableData"
style="min-width: 100%"
height="calc(100vh - 355px)"
:cell-class-name="cell"
:default-sort="{ prop: 'isOperationTime', order: 'descending' }"
@selection-change="selectionChangeHandler"
@row-click="clickRowHandler"
@row-dblclick="handleDbClick"
@ -26,19 +28,29 @@
<el-table-column prop="borrowerName" label="借阅人" min-width="60" />
<el-table-column prop="borrowDays" label="借阅时间" min-width="115" />
<el-table-column prop="borrowGoal" label="借阅目的" min-width="60" />
<el-table-column prop="isLendStatus" label="借阅状态" min-width="60" />
<el-table-column prop="isOperationTime" label="操作时间" min-width="85" />
<el-table-column prop="isLendStatus" label="借阅状态" min-width="60">
<template slot-scope="scope">
<!-- 已借 / 待借 -->
<span class="cell-lend">{{ scope.row.isLendStatus }}</span>
</template>
</el-table-column>
<el-table-column sortable prop="isOperationTime" label="操作时间" min-width="85" />
</el-table>
<!--借出弹框-->
<el-dialog ref="dialogTable" title="借出" :visible.sync="lendFormVisible">
<span class="dialog-right-top" />
<span class="dialog-left-bottom" />
<el-table :data="selections">
<el-table :data="selections" :cell-class-name="cellWarn">
<el-table-column type="index" label="序号" width="55" />
<el-table-column prop="isCategoryName" label="所属门类" />
<el-table-column prop="isArchivesID" label="档号" min-width="140" />
<el-table-column prop="isTitleName" label="题名" min-width="140" />
<el-table-column prop="" label="状态" min-width="85" />
<el-table-column prop="isWarnState" label="状态" min-width="85">
<template slot-scope="scope">
<!-- 已解除 / 未解除/解除失败 -->
<span class="clear">{{ scope.row.isWarnState }}</span>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button disabled>解除警报</el-button>
@ -110,6 +122,7 @@ export default {
},
// 重新登记返回上一级
handelReRecord() {
console.log(11)
this.$emit('callBack', { index: 0 })
},
// 移出
@ -120,13 +133,31 @@ export default {
const dialogTableDom = this.$refs.dialogTable
const targetDialog = dialogTableDom.$refs.dialog
targetDialog.style.width = '800px'
},
cell({ row, columnIndex }) {
if (row.isLendStatus === '待借' && columnIndex === 10) {
return 'no-lend'
} else if (row.isLendStatus === '已借' && columnIndex === 10) {
return 'have-lend'
} else if (row.isLendStatus === '' && columnIndex === 10) {
return 'other-lend'
}
},
cellWarn({ row, columnIndex }) {
if (row.isWarnState === '已解除' && columnIndex === 4) {
return 'no-clear'
} else if (row.isWarnState === '未解除' && columnIndex === 4) {
return 'have-clear'
} else if (row.isWarnState === '解除失败' && columnIndex === 4) {
return 'fail-clear'
}
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';
::v-deep .el-dialog__footer {
background-color: #031435;
}
@ -135,4 +166,5 @@ export default {
padding: 0;
margin: 0;
}
</style>

19
src/views/archivesManage/lendManage/lendQuery/index.vue
View File

@ -45,12 +45,18 @@
style="min-width: 100%"
height="calc(100vh - 355px)"
:data="tableData"
:cell-class-name="cell"
@selection-change="selectionChangeHandler"
@row-click="clickRowHandler"
>
<el-table-column type="selection" width="55" />
<el-table-column type="index" label="序号" width="55" />
<el-table-column prop="isLendStatus" label="借阅状态" min-width="60" />
<el-table-column prop="isLendStatus" label="借阅状态" min-width="60">
<template slot-scope="scope">
<!-- 已借 / 待借 -->
<span class="cell-lend">{{ scope.row.isLendStatus }}</span>
</template>
</el-table-column>
<el-table-column prop="isFieldName" label="所属门类" min-width="85" />
<el-table-column prop="isArchivesID" label="档号" min-width="130" />
<el-table-column prop="isTitleName" label="题名" min-width="130" />
@ -59,6 +65,7 @@
<el-table-column prop="borrowerName" label="借阅人" min-width="60" />
<el-table-column prop="borrowDays" label="借阅时间" min-width="130" />
<el-table-column prop="borrowGoal" label="借阅目的" min-width="85" />
<el-table-column v-if="false" sortable prop="isOperationTime" label="操作时间" min-width="85" />
</el-table>
<!-- 分页 -->
<pagination />
@ -126,12 +133,22 @@ export default {
},
clickRowHandler(row) {
this.$refs.table.toggleRowSelection(row)
},
cell({ row, columnIndex }) {
if (row.isLendStatus === '待借' && columnIndex === 2) {
return 'no-lend'
} else if (row.isLendStatus === '已借' && columnIndex === 2) {
return 'have-lend'
} else if (row.isLendStatus === '' && columnIndex === 2) {
return 'other-lend'
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';
::v-deep.input-prepend {
margin: 0 10px 0 -10px;
background-color: #021941;

30
src/views/archivesManage/lendManage/returnArchives/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="to-lend">
<head-slot>
<el-button icon="el-icon-plus" size="mini" @click="returnVisible=true">归还</el-button>
<el-button icon="el-icon-plus" size="mini" :disabled="selections.length ? false : true " @click="returnVisible=true">归还</el-button>
<crudOperation style="margin-left:10px" />
</head-slot>
<!--表格渲染-->
@ -10,6 +10,8 @@
style="min-width: 100%"
height="calc(100vh - 355px)"
:data="tableData"
:cell-class-name="cell"
:default-sort="{ prop: 'isOperationTime', order: 'descending' }"
@selection-change="selectionChangeHandler"
@row-click="clickRowHandler"
>
@ -23,8 +25,13 @@
<el-table-column prop="borrowerName" label="借阅人" min-width="60" />
<el-table-column prop="borrowDays" label="借阅时间" min-width="115" />
<el-table-column prop="borrowGoal" label="借阅目的" min-width="60" />
<el-table-column prop="isLendStatus" label="借阅状态" min-width="60" />
<el-table-column prop="isOperationTime" label="操作时间" min-width="85" />
<el-table-column prop="isLendStatus" label="借阅状态" min-width="60">
<template slot-scope="scope">
<!-- 已借 / 待借 -->
<span class="cell-lend">{{ scope.row.isLendStatus }}</span>
</template>
</el-table-column>
<el-table-column sortable prop="isOperationTime" label="操作时间" min-width="85" />
</el-table>
<!-- 归还确认 -->
<el-dialog title="归还确认" :visible.sync="returnVisible" :before-close="handleClose">
@ -41,6 +48,7 @@
<span class="dialog-right-top" />
<span class="dialog-left-bottom" />
<div class="setting-dialog">
<!-- 判断 "归还成功" "当前标签已损坏...." -->
<p><span style="color:#fff;">当前标签已损坏，请先解除该档案的电子标签绑定</span></p>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click.native="handleConfirmAgain">确定</el-button>
@ -78,6 +86,7 @@ export default {
data() {
return {
tableData: [],
selections: [],
returnVisible: false,
returnAgainVisible: false
}
@ -89,8 +98,8 @@ export default {
getData() {
this.tableData = data1.rows
},
selectionChangeHandler() {
console.log('selectionChangeHandler')
selectionChangeHandler(val) {
this.selections = val
},
clickRowHandler(row) {
this.$refs.table.toggleRowSelection(row)
@ -102,11 +111,20 @@ export default {
},
handleConfirmAgain() {
this.returnAgainVisible = false
},
cell({ row, columnIndex }) {
if (row.isLendStatus === '待借' && columnIndex === 10) {
return 'no-lend'
} else if (row.isLendStatus === '已借' && columnIndex === 10) {
return 'have-lend'
} else if (row.isLendStatus === '' && columnIndex === 10) {
return 'other-lend'
}
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';
</style>

29
src/views/archivesManage/lendManage/toLend/index.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="to-lend">
<headSlot>
<el-button icon="el-icon-plus" size="mini" @click="handleRecord">登记</el-button>
<el-button icon="el-icon-minus" size="mini" :disabled="selections.length ? false : true " @click="handleRemove">移出</el-button>
<el-button icon="el-icon-document-add" size="mini" @click="handleRecord">登记</el-button>
<el-button icon="el-icon-document-remove" size="mini" :disabled="selections.length ? false : true " @click="handleRemove">移出</el-button>
<!-- <button @click="getTableData">测试按钮</button> -->
</headSlot>
@ -12,7 +12,8 @@
style="min-width: 100%"
height="calc(100vh - 355px)"
:data="tableData"
:cell-style="cellStyle"
:cell-class-name="cell"
:default-sort="{ prop: 'isOperationTime', order: 'descending' }"
@selection-change="selectionChangeHandler"
@row-click="clickRowHandler"
@row-dblclick="handleDbClick"
@ -27,10 +28,10 @@
<el-table-column prop="isLendStatus" label="借阅状态" min-width="60">
<template slot-scope="scope">
<!-- 已借 / 待借 -->
<span class="lend-state">{{ scope.row.isLendStatus }}</span>
<span class="cell-lend">{{ scope.row.isLendStatus }}</span>
</template>
</el-table-column>
<el-table-column prop="isOperationTime" label="操作时间" min-width="85" />
<el-table-column sortable prop="isOperationTime" label="操作时间" min-width="85" />
</el-table>
<!-- 借阅登记模态框 -->
<el-dialog
@ -207,19 +208,13 @@ export default {
handleRecordConfirm() {
this.recordFormVisible = false
},
cellStyle({ row, column, rowIndex, columnIndex }) {
// console.log(column)
cell({ row, columnIndex }) {
if (row.isLendStatus === '待借' && columnIndex === 7) {
console.log(column, '------------')
return {
color: '#F65163'
// border: '1px solid #F65163'
}
return 'no-lend'
} else if (row.isLendStatus === '已借' && columnIndex === 7) {
return {
// background: '#F65163',
color: '#fff'
}
return 'have-lend'
} else if (row.isLendStatus === '' && columnIndex === 7) {
return 'other-lend'
}
}
}
@ -227,5 +222,5 @@ export default {
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';
</style>
Write Preview
Loading…
Cancel
Save