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