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.
251 lines
8.3 KiB
251 lines
8.3 KiB
<template>
|
|
<div>
|
|
<el-dialog ref="dialogTable" title="新增盘点" :visible.sync="addFormVisible" class="dialog-table">
|
|
<span class="dialog-right-top" />
|
|
<span class="dialog-left-bottom" />
|
|
<div class="setting-dialog">
|
|
<el-form
|
|
ref="form"
|
|
:model="checkForm"
|
|
size="small"
|
|
label-width="80px"
|
|
>
|
|
<el-form-item label="选择区域" prop="selectArea" class="down-select" style="padding-top:1px">
|
|
<treeselect
|
|
v-model="selectAreaValue"
|
|
:options="selectArea"
|
|
multiple
|
|
placeholder="请选择"
|
|
style="width:280px;height:30px"
|
|
:limit="1"
|
|
:limit-text="count => `+${count}`"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="选择门类" prop="category" class="down-select">
|
|
<el-select
|
|
v-model="categoryValue"
|
|
style="width: 280px;"
|
|
multiple
|
|
filterable
|
|
clearable
|
|
placeholder="请选择"
|
|
:collapse-tags="showTags"
|
|
@change="selectChange"
|
|
>
|
|
<el-option
|
|
v-for="item in category"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-button type="primary" size="mini" style="margin:0 0 0 10px;height:30px" @click="handleBuild">生成盘点单</el-button>
|
|
</el-form>
|
|
<el-table :data="tableData" height="calc(100vh - 595px)" :cell-class-name="cell">
|
|
<el-table-column type="index" align="center" label="序号" width="80" />
|
|
<el-table-column prop="checkState" align="center" label="状态" width="120">
|
|
<template slot-scope="scope">
|
|
<!-- 未盘点 -->
|
|
<span class="clear">{{ scope.row.checkState }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="" align="center" label="子条数目" width="100" />
|
|
<el-table-column prop="" align="center" label="门类级别" width="100" />
|
|
<el-table-column prop="" align="center" label="门类名称" width="120" />
|
|
<el-table-column prop="" align="center" label="全宗号" width="100" />
|
|
<el-table-column prop="" align="center" label="档号" width="180" />
|
|
<el-table-column prop="" align="center" label="归档年度" width="100" />
|
|
<el-table-column prop="" label="题名" align="center" width="180" />
|
|
<el-table-column prop="" label="保密程度" align="center" width="85" />
|
|
<el-table-column prop="" label="部门" align="center" width="120" />
|
|
<el-table-column prop="" label="盒名称" align="center" width="85" />
|
|
<el-table-column prop="" label="所在位置" align="center" width="150" />
|
|
<el-table-column prop="" label="创建时间" align="center" width="150" />
|
|
</el-table>
|
|
<!-- 分页器 记得加上!!!!!!!!!!!!!!!!!!!!!! -->
|
|
<!-- !!!!!!!!!!!!!!!!!!!!!!!! -->
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="handleSave">保存</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Treeselect from '@riophae/vue-treeselect'
|
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
import { menu } from '@/api/storeManage/levelManage/level'
|
|
import { getCategoryTree } from '@/api/category/category'
|
|
export default {
|
|
name: 'AddCheck',
|
|
components: { Treeselect },
|
|
data() {
|
|
return {
|
|
menusIds: [],
|
|
tableData: [],
|
|
checkForm: {},
|
|
addFormVisible: false,
|
|
selectAreaValue: [],
|
|
selectArea: [],
|
|
// deviceTree:[],
|
|
defaultProps: { children: 'children', label: 'label' },
|
|
nodeKey: 'id',
|
|
defaultCheckedKeys: [],
|
|
categoryValue: [],
|
|
oldCategory: [],
|
|
allCategory: [],
|
|
category: [],
|
|
showTags: true
|
|
|
|
}
|
|
},
|
|
created() {
|
|
this.getTreeMenu()
|
|
this.getCateMenu()
|
|
},
|
|
methods: {
|
|
getTreeMenu() {
|
|
menu().then(data => {
|
|
const deviceTree = []
|
|
let storeroom = {}
|
|
let devices = []
|
|
// deviceTree.splice(0, deviceTree.length)
|
|
data.forEach((item, i) => {
|
|
if (!storeroom.id) {
|
|
item.storeroomId.label = item.storeroomId.name
|
|
storeroom = item.storeroomId
|
|
item.label = item.deviceName
|
|
devices.push(item)
|
|
} else if (storeroom.id !== item.storeroomId.id) {
|
|
item.storeroomId.label = item.storeroomId.name
|
|
storeroom.children = devices
|
|
deviceTree.push(storeroom)
|
|
devices = []
|
|
item.label = item.deviceName
|
|
devices.push(item)
|
|
storeroom = item.storeroomId
|
|
} else {
|
|
item.storeroomId.label = item.storeroomId.name
|
|
item.label = item.deviceName
|
|
devices.push(item)
|
|
}
|
|
if (i === data.length - 1) {
|
|
item.storeroomId.label = item.storeroomId.name
|
|
storeroom.children = devices
|
|
deviceTree.push(storeroom)
|
|
}
|
|
this.selectArea = deviceTree
|
|
})
|
|
})
|
|
},
|
|
getCateMenu() {
|
|
getCategoryTree().then(res => {
|
|
this.category = res[0].children
|
|
this.category.forEach(item => {
|
|
item.value = item.id
|
|
item.label = item.cnName
|
|
})
|
|
this.category.unshift({ value: 0, label: '全选' })
|
|
this.allCategory = this.category.map(item => { return item.value })
|
|
this.categoryValue = JSON.parse(JSON.stringify(this.allCategory))
|
|
this.oldCategory = JSON.parse(JSON.stringify(this.allCategory))
|
|
})
|
|
},
|
|
handleBuild() {
|
|
console.log(this.selectArea, this.category)
|
|
console.log(this.selectAreaValue, this.categoryValue)
|
|
},
|
|
handleSave() {
|
|
this.addFormVisible = false
|
|
},
|
|
// 选择门类
|
|
selectChange(val) {
|
|
// console.log(val)
|
|
const allCategory = JSON.parse(JSON.stringify(this.allCategory))
|
|
if (val[val.length - 1] === 0) { // 选择全选
|
|
this.categoryValue = allCategory
|
|
} else {
|
|
const arr1 = this.oldCategory.filter(item => item !== 0)
|
|
const arr2 = val.filter(item => item !== 0)
|
|
if (arr1.length === arr2.length) { // 取消全选
|
|
this.categoryValue = []
|
|
} else if (arr1.length < arr2.length && arr2.length === this.category.length - 1) {
|
|
this.categoryValue.unshift(0) // 除全选时都选中 此时加入全选
|
|
} else {
|
|
this.categoryValue = this.categoryValue.filter(item => item !== 0) // 取消其他选项时 去除全选
|
|
}
|
|
}
|
|
this.oldCategory = this.categoryValue
|
|
},
|
|
// 单元格样式
|
|
cell({ row, columnIndex }) {
|
|
if (columnIndex === 1) {
|
|
return 'fail-clear'
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '~@/assets/styles/lend-manage.scss';
|
|
|
|
.el-form{
|
|
display: flex;
|
|
padding-left: 12px;
|
|
}
|
|
::v-deep .el-dialog{
|
|
width: 950px;
|
|
height: 520px;
|
|
}
|
|
::v-deep .el-dialog .el-dialog__header .el-dialog__close::before{
|
|
position: absolute;
|
|
right: -160px;
|
|
bottom: -12px;
|
|
}
|
|
::v-deep .el-dialog__body{
|
|
padding: 30px 0;
|
|
}
|
|
::v-deep .el-tag.el-tag--info{
|
|
height: 26px;
|
|
line-height: 26px;
|
|
background-color: #13439E;
|
|
border: none;
|
|
color: #fff;
|
|
}
|
|
::v-deep .el-tag.el-tag--info .el-tag__close{
|
|
background-color: #fff;
|
|
}
|
|
::v-deep .el-input__inner{
|
|
height: 30px !important;
|
|
}
|
|
//滚动条
|
|
::v-deep ::-webkit-scrollbar-corner{
|
|
background: transparent;
|
|
}
|
|
// 树形选择器
|
|
::v-deep .vue-treeselect--has-value .vue-treeselect__multi-value{
|
|
margin-bottom: 0;
|
|
}
|
|
::v-deep .vue-treeselect__multi-value-item-container{
|
|
padding-top: 2px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
::v-deep .el-dialog .el-form .vue-treeselect__control{
|
|
line-height: 18px;
|
|
}
|
|
::v-deep .vue-treeselect__limit-tip{
|
|
background: #13439E;
|
|
border-radius: 3px;
|
|
margin: 2px;
|
|
padding: 0 3px;
|
|
.vue-treeselect__limit-tip-text{
|
|
padding: 2px 2px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style>
|