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.
253 lines
7.2 KiB
253 lines
7.2 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:245px;height:30px"
|
|
:limit="2"
|
|
:limit-text="count => `+${count}`"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="选择门类" prop="category" class="down-select">
|
|
<el-select
|
|
v-model="categoryValue"
|
|
style="width: 245px;"
|
|
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="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'
|
|
var menus = [
|
|
{
|
|
id: 1,
|
|
label: '父区域',
|
|
children: [
|
|
// {
|
|
// id: 100,
|
|
// label: '子区域1',
|
|
// children: [
|
|
{
|
|
id: 1000,
|
|
label: '设备1.1'
|
|
},
|
|
{
|
|
id: 1001,
|
|
label: '设备1.2'
|
|
},
|
|
{
|
|
id: 1002,
|
|
label: '设备1.3'
|
|
},
|
|
{
|
|
id: 1003,
|
|
label: '设备1.4'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 101,
|
|
label: '子区域2',
|
|
children: [
|
|
{
|
|
id: 1006,
|
|
label: '设备2.1'
|
|
},
|
|
{
|
|
id: 1007,
|
|
label: '设备2.2'
|
|
},
|
|
{
|
|
id: 1008,
|
|
label: '设备2.3'
|
|
},
|
|
{
|
|
id: 1011,
|
|
label: '设备2.4'
|
|
}
|
|
]
|
|
}
|
|
// ]
|
|
// }
|
|
]
|
|
export default {
|
|
components: { Treeselect },
|
|
data() {
|
|
return {
|
|
menusIds: [],
|
|
tableData: [],
|
|
checkForm: {},
|
|
addFormVisible: false,
|
|
selectAreaValue: [],
|
|
selectArea: menus,
|
|
defaultProps: { children: 'children', label: 'label' },
|
|
nodeKey: 'id',
|
|
defaultCheckedKeys: [],
|
|
categoryValue: [0, 1, 2, 3],
|
|
oldCategory: [0, 1, 2, 3],
|
|
category: [
|
|
{ value: 0, label: '全部' },
|
|
{ value: 1, label: '档号' },
|
|
{ value: 2, label: '题名' },
|
|
{ value: 3, label: '位置' }
|
|
],
|
|
showTags: true
|
|
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
handleBuild() {
|
|
console.log(this.$refs.dialogTable.$refs)
|
|
},
|
|
handleSave() {
|
|
this.addFormVisible = false
|
|
},
|
|
// 选择门类
|
|
selectChange(val) {
|
|
// console.log(val)
|
|
if (val[val.length - 1] === 0) { // 选择全选
|
|
this.categoryValue = [0, 1, 2, 3]
|
|
this.showTags = true
|
|
} 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) // 除全选时都选中 此时加入全选
|
|
this.showTags = true
|
|
} else {
|
|
this.categoryValue = this.categoryValue.filter(item => item !== 0) // 取消其他选项时 去除全选
|
|
this.showTags = false
|
|
}
|
|
}
|
|
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>
|