<template>
|
<div class="base-order-type-manage-page">
|
<div class="divider"></div>
|
<div class="management-card main-management-card">
|
<div class="top-head">
|
<span>主类型</span>
|
<a @click="onMainAdd"><a-icon type="plus" /></a>
|
</div>
|
<div class="content" ref="content">
|
<a-table v-if="th" :data-source="list1" :columns="columns1" rowKey="id" :pagination="false" :scroll="{x:580,y:th}">
|
<template slot="linkSlot" slot-scope="text,record">
|
<a @click="onActiveMain(record)">{{text}}</a>
|
</template>
|
<template slot="action" slot-scope="text,record,index">
|
<a style="margin-right:8px;" @click="onEdit(record)"><a-icon type="edit" /></a>
|
<a @click="onDelete(record)"><a-icon type="delete" /></a>
|
</template>
|
</a-table>
|
</div>
|
</div>
|
<div class="divider"></div>
|
<div class="management-card sub-management-card">
|
<div class="top-head">
|
<span><span style="margin-right:8px;" v-if="activeMainObj.name">{{activeMainObj.name}}</span>子类型明细</span>
|
<a @click="onDetailAdd" v-if="activeMainObj.id"><a-icon type="plus" /></a>
|
</div>
|
<div class="content" ref="content">
|
<a-table v-if="th" :data-source="list2" :columns="columns2" rowKey="id" :pagination="false" :scroll="{x:580,y:th}">
|
<template slot="lesWorkShopTypeSlot" slot-scope="text">
|
{{ 'les_workshop_type' | dictType(text) }}
|
</template>
|
<template slot="action" slot-scope="text,record,index">
|
<a style="margin-right:8px;" @click="onEdit(record)"><a-icon type="edit" /></a>
|
<a @click="onDelete(record)"><a-icon type="delete" /></a>
|
</template>
|
</a-table>
|
</div>
|
</div>
|
<div class="divider"></div>
|
|
<edit-form :visible.sync="formVisible" :type="formType" :obj="formObj" :p-obj="formParentObj" @callback="editBack" />
|
</div>
|
</template>
|
<script>
|
import { WareOrderTypePage, WareOrderTypeDelete } from '@/api/modular/main/WmsOrderTypeManage'
|
import editForm from './editForm.vue'
|
let interval = null
|
export default {
|
components: {editForm},
|
data () {
|
return {
|
list1:[],
|
list2:[],
|
th:0,
|
columns1:[
|
{ title: '类型编码', dataIndex: 'code', scopedSlots: { customRender: 'linkSlot' } },
|
{ title: '类型名称', dataIndex: 'name', scopedSlots: { customRender: 'linkSlot' } },
|
{ title: '排序', dataIndex: 'sort', key: 'sort' },
|
{ title: '操作', key: 'action', width: 70, align:'center', fixed:"right", scopedSlots: { customRender: 'action' }}
|
],
|
columns2:[
|
{ title: '类型编码', dataIndex: 'code', key: 'code' },
|
{ title: '类型名称', dataIndex: 'name', key: 'name' },
|
{ title: '排序', dataIndex: 'sort', key: 'sort' },
|
{ title: '所属车间', dataIndex: 'lesWorkShopType', scopedSlots: { customRender: 'lesWorkShopTypeSlot' } },
|
{ title: '操作', key: 'action', width: 70, align:'center', fixed:"right", scopedSlots: { customRender: 'action' }}
|
],
|
formVisible:false,
|
formType:'',
|
formObj:{},
|
formParentObj:{},
|
activeMainObj:{}
|
}
|
},
|
mounted () {
|
this.calTh()
|
this.getMainList()
|
},
|
methods: {
|
calTh(){
|
interval = window.setInterval(()=>{
|
if (this.th) {
|
window.clearInterval(interval)
|
interval = null
|
} else {
|
this.th = this.$refs.content.clientHeight - 55
|
}
|
},100)
|
},
|
getMainList(){
|
this.getList(0)
|
this.list2 = []
|
this.activeMainObj = {}
|
},
|
getList(pid){
|
this.$loading.show()
|
WareOrderTypePage(pid).then(d=>{
|
let arr = (d.data || []).map((item)=>{
|
item.lesWorkShopType = String(item.lesWorkShopType)
|
return item
|
})
|
if (pid===0){
|
this.list1=arr
|
} else {
|
this.list2=arr
|
}
|
this.$loading.hide()
|
}).catch(()=>{
|
this.$loading.hide()
|
})
|
},
|
onMainAdd(){
|
this.formType = 'add'
|
this.formObj = {}
|
this.formParentObj = {}
|
this.formVisible = true
|
},
|
onDetailAdd(){
|
this.formType = 'add'
|
this.formObj = {}
|
this.formParentObj = this.activeMainObj
|
this.formVisible = true
|
},
|
onEdit(obj){
|
this.formType = 'edit'
|
this.formObj = obj
|
if (obj.pid===0) {
|
this.formParentObj = {}
|
} else {
|
this.formParentObj = this.activeMainObj
|
}
|
this.formVisible = true
|
},
|
editBack(){
|
if (!this.formParentObj.id) {
|
this.getMainList()
|
} else {
|
this.getList(this.formParentObj.id)
|
}
|
},
|
onDelete(obj){
|
this.$confirm({
|
title: '确定要进行删除操作吗？',
|
okText: '确定',
|
okType: 'danger',
|
cancelText: '取消',
|
onOk:()=>{
|
this.handleDelete(obj.id,(f)=>{
|
if (f) {
|
if (obj.pid===0) {
|
this.getMainList()
|
} else {
|
this.getList(this.activeMainObj.id)
|
}
|
}
|
})
|
}
|
});
|
},
|
handleDelete(id,callback){
|
this.$loading.show()
|
let params = {id}
|
WareOrderTypeDelete(params).then(()=>{
|
this.$loading.hide()
|
callback(true)
|
}).catch(()=>{
|
this.$loading.hide()
|
callback(false)
|
})
|
},
|
onActiveMain(obj){
|
this.activeMainObj = obj
|
this.getList(obj.id)
|
}
|
},
|
beforeDestroy(){
|
try{
|
window.clearInterval(interval)
|
interval = null
|
}catch(e){
|
//TODO handle the exception
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.base-order-type-manage-page{
|
height: 100%;
|
background-color: #fff;
|
border-radius: 2px;
|
display: flex;
|
@dividerSize:16px;
|
padding: @dividerSize 0;
|
.divider {
|
width: @dividerSize;
|
flex-shrink: 0;
|
}
|
.management-card{
|
width: 1px;
|
flex-grow: 1;
|
box-sizing: border-box;
|
border: 1px solid #d9d9d9;
|
border-radius: 4px;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
&.main-management-card{
|
flex-grow: 2;
|
}
|
&.sub-management-card{
|
flex-grow: 3;
|
}
|
&>.top-head {
|
flex-shrink: 0;
|
border-bottom: 1px solid #d9d9d9;
|
padding: 8px 16px;
|
font-size: 1.2em;
|
font-weight: bold;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
&>.content {
|
height: 1px;
|
flex-grow: 1;
|
}
|
}
|
}
|
</style>
|
