【前端】智能库房综合管理系统前端项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

201 lines
6.4 KiB

<template>
<div class="app-container container-wrap">
<span class="right-top-line" />
<span class="left-bottom-line" />
<div class="head-container">
<el-button size="mini" @click="handleAdd">
<svg-icon icon-class="xinzengpandian-fanbai" class-name="svg-style" />新增盘点</el-button>
<el-button
icon="el-icon-delete"
size="mini"
style="margin:0 7px 0 7px"
:disabled="selections.length ? false : true "
@click="deleteVisible = true"
>删除</el-button>
<el-input
v-model="keyWord"
size="small"
clearable
placeholder="请输入关键词"
style="width: 300px;margin-right:10px"
class="input-prepend filter-item"
@keyup.enter.native="crud.toQuery"
>
<el-select slot="prepend" v-model="cateSearch" style="width: 80px">
<el-option
v-for="item in cateSearchOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-input>
<rrOperation />
<!-- <crudOperation :permission="permission" /> -->
</div>
<!--表格渲染-->
<el-table
ref="table"
:data="tableData"
:cell-class-name="cell"
style="min-width: 100%"
height="calc(100vh - 315px)"
@selection-change="selectionChangeHandler"
@row-click="clickRowHandler"
@row-dblclick="handleDbClick"
>
<el-table-column type="selection" width="55" />
<el-table-column type="index" align="center" label="序号" width="55" />
<el-table-column prop="checkNum" align="center" label="盘点单号" min-width="100" />
<el-table-column prop="containPath" align="center" label="包含位置" min-width="140" />
<el-table-column prop="checkState" align="center" label="盘点状态" min-width="60">
<template slot-scope="scope">
<!-- 已执行 / 待执行/执行中 -->
<span class="clear">{{ scope.row.checkState }}</span>
</template>
</el-table-column>
<el-table-column prop="storeNum" align="center" label="在库档案" min-width="60" />
<el-table-column prop="CheckedNum" align="center" label="已盘档案" min-width="60" />
<el-table-column prop="noCheckNum" align="center" label="未盘档案" min-width="60" />
<el-table-column prop="haveLendNum" align="center" label="已借档案" min-width="60" />
<el-table-column prop="misplaceNum" align="center" label="错位档案" min-width="60" />
<el-table-column prop="CreateTime" align="center" label="创建时间" min-width="100" />
</el-table>
<!-- 删除模态框 -->
<el-dialog title="确认删除" :visible.sync="deleteVisible" :before-close="handleClose">
<span class="dialog-right-top" />
<span class="dialog-left-bottom" />
<div class="setting-dialog">
<div class="dialog-delt">
<p><span>确定删除当前盘点任务?</span></p>
<p class="delt-tip"><span>提示:确定删除后,该数据将无法找回!</span></p>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click.native="handleConfirm">确定</el-button>
</div>
</div>
</el-dialog>
<!-- 新增模态框 -->
<addCheck ref="addCheckDom" />
<!-- 盘点详情 -->
<checkDetail ref="checkDetailDom" />
<!--分页组件-->
<pagination />
</div>
</template>
<script>
import rrOperation from '@crud/RR.operation'
import CRUD, { presenter } from '@crud/crud'
// import crudJob from '@/api/system/job'
// import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import data1 from './data1.json'
import addCheck from './module/addCheck.vue'
import checkDetail from './module/checkDetail.vue'
export default {
name: 'ArchivesCheck',
components: { pagination, rrOperation, addCheck, checkDetail },
mixins: [presenter()],
cruds() {
return CRUD({
url: 'api/case/initCaseList',
// crudMethod: caseCrudMethod,
title: '档案盒',
optShow: {
add: false,
edit: false,
del: false,
download: false,
group: false
}
})
},
// dicts: ['job_status'],
data() {
return {
tableData: [],
selections: [],
keyWord: '',
cateSearch: '区域',
cateSearchOptions: [
{ value: '选项1', label: '区域' }
],
deleteVisible: false
}
},
created() {
this.getData()
},
methods: {
getData() {
this.tableData = data1.rows
},
handleConfirm() {
this.deleteVisible = false
},
handleAdd() {
this.$refs.addCheckDom.addFormVisible = true
},
handleClose() {
this.deleteVisible = false
},
cell({ row, columnIndex }) {
if (row.checkState === '已执行' && columnIndex === 4) {
return 'have-clear'
} else if (row.checkState === '待执行' && columnIndex === 4) {
return 'fail-clear'
} else if (row.checkState === '执行中' && columnIndex === 4) {
return 'no-clear'
}
},
selectionChangeHandler(val) {
this.selections = val
},
clickRowHandler(row) {
this.$refs.table.toggleRowSelection(row)
},
handleDbClick(row) {
// this.$refs.table.clearSelection()
const checkDetailDom = this.$refs.checkDetailDom
checkDetailDom.detailVisible = true
checkDetailDom.rowData = row
const arr = data1.rows.filter(item => item.checkNum === row.checkNum)
checkDetailDom.tableData = arr
// 状态类名
if (row.checkState === '已执行') {
checkDetailDom.classLend = 'have-clear'
} else if (row.checkState === '待执行') {
checkDetailDom.classLend = 'fail-clear'
} else if (row.checkState === '执行中') {
checkDetailDom.classLend = 'no-clear'
}
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';
@import "~@/assets/styles/archives-manage.scss";
.head-container {
color: #fff;
}
::v-deep .el-dialog__footer {
background-color: #031435;
}
.el-dialog .dialog-footer {
padding: 0;
margin: 0;
}
.svg-style{
margin-right: 5px;
}
</style>