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.
361 lines
13 KiB
361 lines
13 KiB
<template> |
|
<div class="box-card"> |
|
<div class="process-left"> |
|
<div class="process-select"> |
|
<!-- 工艺级别：--> |
|
<el-form :model="form" label-width="auto"> |
|
<el-form-item label="工艺级别:"> |
|
<el-select v-model="processLevel" placeholder="请选择" style="width: 220px" @change="leavelChange"> |
|
<el-option label="一级工艺" value="1" /> |
|
<el-option label="二级工艺" value="2" /> |
|
<el-option label="三级工艺" value="3" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<el-tree style="width:240px" :data="data" :props="defaultProps" @node-click="handleNodeClick" |
|
:default-expand-all="true" :expand-on-click-node="false" /> |
|
|
|
</div> |
|
<div class="process-right"> |
|
<el-form :model="form" label-width="auto" :rules="rules"> |
|
<el-row :gutter="24"> |
|
<el-col :span="8"> |
|
<el-form-item label="重要度:" prop="zhongyaodu"> |
|
<el-select v-model="form.zhongyaodu" :placeholder="'请选择'"> |
|
<el-option v-for="item in priorityList" :key="item.value" :label="item.label" |
|
:value="item.value" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="8"> |
|
<el-form-item label="生产标识:" prop="qualityGrade"> |
|
<el-select v-model="form.qualityGrade" :placeholder="'请选择'"> |
|
<el-option v-for="item in rankList" :key="item.value" :label="item.label" |
|
:value="item.value" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="8"> |
|
<el-form-item label="备注:" prop="beizhu"> |
|
<el-input v-model="form.beizhu" placeholder="请输入" /> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
</el-form> |
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> |
|
<el-tab-pane label="工序" name="1" v-if="treeLeave == 2"></el-tab-pane> |
|
<el-tab-pane label="项目" name="2" v-if="treeLeave == 3"></el-tab-pane> |
|
<el-tab-pane label="尺寸、量具" name="3" v-if="treeLeave == 3"></el-tab-pane> |
|
<el-tab-pane label="工装、模具表" name="4" v-if="treeLeave == 3"></el-tab-pane> |
|
</el-tabs> |
|
<div class="table-btn"> |
|
<div class="table-btn-left"> |
|
<el-button type="primary" plain @click="addTable()">插入一行</el-button> |
|
<el-button type="danger" plain @click="delTable()">删除选择行</el-button> |
|
</div> |
|
<div class="table-btn-right" v-if="!(activeName=='3'||activeName=='4')"> |
|
<el-select v-model="processLevel" placeholder="选择工艺模板" style="width: 220px;margin-right: 12px;"> |
|
<el-option label="模板一" value="1" /> |
|
<el-option label="模板二" value="2" /> |
|
<el-option label="模板三" value="3" /> |
|
</el-select> |
|
<el-button type="primary">导入模板</el-button> |
|
</div> |
|
</div> |
|
<el-table :data="tableData1" style="width: 100%" v-if="activeName == '1'"> |
|
<el-table-column type="selection" width="55"></el-table-column> |
|
<el-table-column prop="date" label="工序号"></el-table-column> |
|
<el-table-column prop="name" label="工序"> |
|
<template #header> |
|
<span><i style="color:red">*</i>工序</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="address" label="工艺能力"> |
|
<template #header> |
|
<span><i style="color:red">*</i>工艺能力</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="address" label="工序描述"> |
|
<template #header> |
|
<span><i style="color:red">*</i>工序描述</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="address" label="定额工时(分钟)"> |
|
<template #header> |
|
<span><i style="color:red">*</i>定额工时(分钟)</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="address" label="准备工时(分钟)"> |
|
</el-table-column> |
|
<el-table-column prop="address" label="是否主工序"> |
|
<el-select v-model="value" placeholder="请选择"> |
|
<el-option label="是" value="1"></el-option> |
|
<el-option label="否" value="2"></el-option> |
|
</el-select> |
|
</el-table-column> |
|
</el-table> |
|
<el-table :data="tableData2" style="width: 100%" v-if="activeName == '2'"> |
|
<el-table-column type="selection" width="55"></el-table-column> |
|
<el-table-column prop="date" label="工序号"></el-table-column> |
|
<el-table-column prop="date" label="检验项目"> |
|
<template #header> |
|
<span><i style="color:red">*</i>检验项目</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="date" label="检验标准"> |
|
<template #header> |
|
<span><i style="color:red">*</i>检验标准</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="date" label="标准值"> |
|
|
|
</el-table-column> |
|
<el-table-column prop="date" label="上限"> |
|
|
|
</el-table-column> |
|
<el-table-column prop="date" label="下限"> |
|
|
|
</el-table-column> |
|
<el-table-column prop="date" label="定额工时(分钟)"> |
|
<template #header> |
|
<span><i style="color:red">*</i>定额工时(分钟)</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="date" label="准备工时(分钟)"></el-table-column> |
|
</el-table> |
|
<el-table :data="tableData3" style="width: 100%" v-if="activeName == '3'"> |
|
<el-table-column type="selection" width="55"></el-table-column> |
|
<el-table-column prop="date" label="工序号"></el-table-column> |
|
<el-table-column prop="date" label="镀前镀后"> |
|
<template #header> |
|
<span><i style="color:red">*</i>镀前镀后</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="date" label="量具"> |
|
<template #header> |
|
<span><i style="color:red">*</i>量具</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="date" label="量具尺寸"></el-table-column> |
|
<el-table-column prop="date" label="图纸尺寸"></el-table-column> |
|
</el-table> |
|
<el-table :data="tableData4" style="width: 100%" v-if="activeName == '4'"> |
|
<el-table-column type="selection" width="55"></el-table-column> |
|
<el-table-column prop="date" label="工序号"></el-table-column> |
|
<el-table-column prop="date" label="对应工装"> |
|
<template #header> |
|
<span><i style="color:red">*</i>对应工装</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="date" label="工装名称"></el-table-column> |
|
<el-table-column prop="date" label="是否印字"></el-table-column> |
|
<el-table-column prop="date" label="印字版编号"></el-table-column> |
|
<el-table-column prop="date" label="测试夹具号"></el-table-column> |
|
</el-table> |
|
</div> |
|
</div> |
|
</template> |
|
<script> |
|
export default { |
|
name: 'CraftIndex', |
|
components: {}, |
|
props: { |
|
height: { |
|
type: Number, |
|
default: 600 |
|
}, |
|
partId: { |
|
type: [Number, String], |
|
default: null |
|
}, |
|
dialogType: { |
|
type: String, |
|
default: '', |
|
} |
|
}, |
|
data() { |
|
return { |
|
processLevel: '2', |
|
data: [ |
|
{ |
|
label: 'Level one 1', |
|
disabled: true, |
|
children: [ |
|
{ |
|
label: 'Level two 1-1', |
|
children: [ |
|
{ |
|
label: 'Level three 1-1-1', |
|
}, |
|
], |
|
}, |
|
], |
|
}, |
|
{ |
|
label: 'Level one 2', |
|
disabled: true, |
|
children: [ |
|
{ |
|
label: 'Level two 2-1', |
|
children: [ |
|
{ |
|
label: 'Level three 2-1-1', |
|
}, |
|
], |
|
}, |
|
{ |
|
label: 'Level two 2-2', |
|
children: [ |
|
{ |
|
label: 'Level three 2-2-1', |
|
}, |
|
], |
|
}, |
|
], |
|
}, |
|
], |
|
defaultProps: { |
|
children: 'children', |
|
label: 'label', |
|
}, |
|
form: { |
|
zhongyaodu: '', |
|
qualityGrade: '',//生产标识 |
|
beizhu: '',//备注 |
|
}, |
|
rules: { |
|
zhongyaodu: [ |
|
{ required: true, message: '请选择', trigger: 'blur' }, |
|
] |
|
}, |
|
priorityList: [ |
|
{ |
|
label: '本次使用', |
|
value: 1 |
|
}, |
|
{ |
|
label: '正式工艺', |
|
value: 2 |
|
}, |
|
{ |
|
label: '临时工艺', |
|
value: 3 |
|
} |
|
], |
|
rankList: [ |
|
{ |
|
label: '一级', |
|
value: 1 |
|
}, |
|
{ |
|
label: '二级', |
|
value: 2 |
|
}, |
|
{ |
|
label: '三级', |
|
value: 3 |
|
} |
|
], |
|
activeName: '1', |
|
treeLeave: {},//组织树选中层级 |
|
} |
|
}, |
|
methods: { |
|
// 组织树点击 |
|
handleNodeClick(nodes, node, self) { |
|
if (nodes.disabled) { |
|
// 阻止默认的点击行为 |
|
return false; |
|
} |
|
this.treeLeave = node.level |
|
if (this.treeLeave == 3) { |
|
this.activeName = '2' |
|
} |
|
}, |
|
// 右侧tab切换 |
|
handleClick(value) { |
|
console.log(999999, value) |
|
|
|
|
|
}, |
|
// 切换等级 |
|
leavelChange(){ |
|
this.$message.success('保存成功') |
|
|
|
}, |
|
// 插入一行 |
|
addTable() { |
|
if (this.activeName == '1') { |
|
|
|
} |
|
if (this.activeName == '2') { |
|
|
|
} |
|
if (this.activeName == '3') { |
|
|
|
} |
|
if (this.activeName == '4') { |
|
|
|
} |
|
}, |
|
// 删除选择行 |
|
delTable() { |
|
if (this.activeName == '1') { |
|
|
|
} |
|
if (this.activeName == '2') { |
|
|
|
} |
|
if (this.activeName == '3') { |
|
|
|
} |
|
if (this.activeName == '4') { |
|
|
|
} |
|
}, |
|
} |
|
} |
|
|
|
</script> |
|
<style lang="scss" scoped> |
|
.box-card { |
|
display: flex; |
|
flex-direction: row; |
|
height: calc(100vh - 200px); |
|
|
|
.process-left { |
|
// padding: 20px; |
|
border: 1px solid #ccc; |
|
|
|
.process-select { |
|
padding: 12px; |
|
background: #e4e7ed; |
|
|
|
:deep(.el-form-item) { |
|
margin-bottom: 0px !important; |
|
} |
|
} |
|
} |
|
|
|
.process-right { |
|
padding: 12px; |
|
flex: 1; |
|
border: 1px solid #ccc; |
|
border-left: 0; |
|
|
|
.table-btn { |
|
width: 100%; |
|
height: 50px; |
|
|
|
.table-btn-left { |
|
float: left; |
|
} |
|
|
|
.table-btn-right { |
|
float: right; |
|
} |
|
} |
|
} |
|
} |
|
</style> |