19 changed files with 2990 additions and 155 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,256 @@
|
||||
<template> |
||||
<div class="pageContent" v-loading="form.Pageloading" element-loading-text="页面正在初始化中..."> |
||||
<!-- 菜单 --> |
||||
<div class="placeholder"> |
||||
<el-tabs |
||||
class="tablemun" |
||||
v-model="form.TabactiveName" |
||||
type="border-card" |
||||
@tab-click="TabactiveClick" |
||||
> |
||||
<el-tab-pane label="订单填写" name="0"></el-tab-pane> |
||||
<el-tab-pane label="零担填写" name="1"> </el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
<!-- 主体内容 --> |
||||
<div class="content"> |
||||
<el-form :model="form" label-width="30%" style="width: 100%" label-position="top"> |
||||
<!-- 头部类型选择 --> |
||||
<div class="tablemunTop"> |
||||
<!-- 异常类型 --> |
||||
<el-form-item label="异常类型"> |
||||
<el-select |
||||
v-model="form.workOrderType" |
||||
placeholder="请选择异常类型" |
||||
style="width: 100%" |
||||
> |
||||
<el-option |
||||
v-for="item in Exceptionoptions" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<!-- 发现节点 --> |
||||
<el-form-item label="发现节点"> |
||||
<el-select |
||||
v-model="form.discoveryNode" |
||||
placeholder="请选择发现节点" |
||||
style="width: 100%" |
||||
> |
||||
<el-option |
||||
v-for="item in Discoveringoptions" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="异常类型"> |
||||
<el-input v-model="form.name" disabled placeholder="异常工单号(自动生成)" /> |
||||
</el-form-item> |
||||
</div> |
||||
|
||||
<!-- 包件信息 --> |
||||
<el-tabs v-model="form.activPackage" class="demo-tabs Packagebox" @tab-click="handleClick"> |
||||
<el-tab-pane label="包件信息" name="0"> |
||||
<el-button type="primary" class="el_addPackage" @click="Addpackages"> |
||||
<el-icon><Plus /></el-icon>新增包件</el-button |
||||
> |
||||
<template v-for="(item, index) in form.PackageList" :key="index + item.packageCode"> |
||||
<div class="el_Package"> |
||||
<div class="Package"> |
||||
<el-form-item label="包条码"> |
||||
<el-input v-model="item.packageCode" placeholder="请输入包条码" /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="运单号"> |
||||
<el-input v-model="item.waybillNumber" placeholder="请输入运单号" /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="订单自编号"> |
||||
<el-input v-model="item.orderCode" placeholder="请输入订单自编号" /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="一级品"> |
||||
<el-input v-model="item.first" placeholder="请输入一级品" /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="二级品"> |
||||
<el-input v-model="item.secondary" placeholder="请输入二级品" /> |
||||
</el-form-item> |
||||
<el-form-item label="品牌"> |
||||
<el-input v-model="item.brandName" placeholder="请输入品牌" /> |
||||
</el-form-item> |
||||
</div> |
||||
<!-- 按钮 --> |
||||
<div class="el_activPackage_btton"> |
||||
<el-button type="primary">查看历史包件</el-button> |
||||
<el-button type="primary" @click="Removepackage(index)">移除</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</el-form> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref } from 'vue'; |
||||
import { getDictionaryBiz } from '@/api/system/dict'; //字典 |
||||
import { |
||||
$_getList, |
||||
$_submit, |
||||
$_getDetail, |
||||
$_remove, |
||||
$_getBusinessDepartmentUser, |
||||
$_getAbnormalPackage, |
||||
$_shippingInformation, |
||||
} from '@/api/aftersales/aftersalesWorkOrder'; |
||||
const form = ref({ |
||||
TabactiveName: '0', //工单类型菜单 |
||||
activPackage: '0', //包件信息菜单 |
||||
Pageloading: false, //页面加载 |
||||
PackageList: [ |
||||
{ |
||||
sequence: 1, //序号 |
||||
packageCode: '', //包条码 |
||||
waybillNumber: '', //运单号 |
||||
orderCode: '', //订单自编号 |
||||
first: '', //一级品 |
||||
secondary: '', //二级品 |
||||
brandName: '', //品牌 |
||||
history: true, //是否有历史包间 |
||||
}, |
||||
], //包件列表 |
||||
}); |
||||
// 异常类型 |
||||
const Exceptionoptions = ref([]); |
||||
// 发现节点 |
||||
const Discoveringoptions = ref([]); |
||||
// 字典公共函数 |
||||
async function updateDictionary(targetArray, dictionaryType) { |
||||
await getDictionaryBiz(dictionaryType).then(res => { |
||||
res.data.data.forEach(item => { |
||||
targetArray.push({ |
||||
value: item.dictKey, |
||||
label: item.dictValue, |
||||
}); |
||||
}); |
||||
}); |
||||
} |
||||
// 页面必要初始化请求 |
||||
const onLoad = async () => { |
||||
form.value.Pageloading = true; //开启页面加载 |
||||
await updateDictionary(Exceptionoptions.value, 'pc_work_order'); //异常类型 |
||||
await updateDictionary(Discoveringoptions.value, 'pc_discovery_node'); //发现环节 |
||||
form.value.Pageloading = false; //关闭页面加载 |
||||
}; |
||||
onLoad(); |
||||
// 新增包件 |
||||
const Addpackages = () => { |
||||
let data = { |
||||
packageCode: '', //包条码 |
||||
waybillNumber: '', //运单号 |
||||
orderCode: '', //订单自编号 |
||||
first: '', //一级品 |
||||
secondary: '', //二级品 |
||||
brandName: '', //品牌 |
||||
}; |
||||
form.value.PackageList.push(data); |
||||
}; |
||||
// 移除包件 |
||||
const Removepackage = async index => { |
||||
console.log(index, 'index'); |
||||
await form.value.PackageList.splice(index, 1); //移除当前点击的按钮 |
||||
ElMessage({ |
||||
message: '移除成功.', |
||||
type: 'success', |
||||
plain: true, |
||||
}); |
||||
}; |
||||
// 菜单切换 |
||||
const handleClick = (tab, event) => { |
||||
console.log(tab, event); |
||||
}; |
||||
// 提交 |
||||
const onSubmit = async () => {}; |
||||
const TabactiveClick = (a, b) => { |
||||
console.log(a, b); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.pageContent { |
||||
padding: 10px; |
||||
width: 100%; |
||||
height: 100%; |
||||
box-sizing: border-box; |
||||
} |
||||
:deep(.tablemun) { |
||||
height: 0; |
||||
padding: 0; |
||||
.el-tabs__nav-scroll { |
||||
// border-left: 1px solid #dcdfe6; |
||||
// border-right: 1px solid #dcdfe6; |
||||
} |
||||
} |
||||
.placeholder { |
||||
width: 100%; |
||||
height: 40px; |
||||
box-sizing: border-box; |
||||
border-left: 1px solid #dcdfe6; |
||||
border-right: 1px solid #dcdfe6; |
||||
} |
||||
|
||||
// 主体内容 |
||||
.content { |
||||
padding: 10px; |
||||
width: 100%; |
||||
border: 1px solid #dcdfe6; |
||||
box-sizing: border-box; |
||||
border-radius: 2px; |
||||
.tablemunTop { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.el-form-item { |
||||
width: 26%; |
||||
display: flex; |
||||
align-items: center; |
||||
:deep(.el-form-item__label) { |
||||
margin-bottom: 0 !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
// 包件列表 |
||||
.Packagebox { |
||||
.el_Package { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
:deep(.is-active) { |
||||
font-weight: bold; |
||||
} |
||||
:deep(.Package) { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
.el-form-item { |
||||
.el-form-item__label { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
.el_addPackage { |
||||
background-color: #409eff; |
||||
border: none; |
||||
color: #ffffff; |
||||
margin-bottom: 11px; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue