<template>
|
<div>
|
<div class="body" style="background-color: #ffffff; padding: 20px 10px 0 20px;">
|
<div style="margin-bottom: 20px;">
|
<el-form
|
ref="form"
|
:model="form"
|
label-width="80px"
|
inline
|
style="display: flex;justify-content: space-between"
|
>
|
<div style="display: flex;justify-content: space-around;width: 85%">
|
<el-form-item label="公益路线">
|
<el-input v-model="form.gylx" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="物料编码">
|
<el-input v-model="form.wlbm" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="物料名称">
|
<el-input v-model="form.wlmc" placeholder="请输入" />
|
</el-form-item>
|
</div>
|
<div style="display: flex;">
|
<el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
|
<el-button type="text" style="display: flex;align-items: start;padding-top: 10px;" @click="reset">重置</el-button>
|
</div>
|
</el-form>
|
<div style="display: flex;justify-content: space-between">
|
|
<div style="display:flex;">
|
<el-button type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
|
<el-button type="primary" icon="el-icon-delete">修改</el-button>
|
<el-button type="primary" icon="el-icon-delete">删除</el-button>
|
<el-button type="primary" icon="el-icon-upload2" @click="upLoad">导入</el-button>
|
<el-button type="primary" icon="el-icon-download" @click="downLoad">导出</el-button>
|
</div>
|
|
<div style="display: flex;justify-content: end;margin-right: 20px">
|
<el-button type="text" icon="el-icon-document">查看我的工作日志</el-button>
|
</div>
|
|
</div>
|
</div>
|
<div style="display: flex;width: 100%;">
|
<div>
|
<el-table
|
:data="tableData1"
|
style="width: 100%;border: 1px solid #eee"
|
:header-cell-style="headerCellStyle"
|
:header-row-style="headerRowStyle"
|
:cell-style="cellStyle"
|
>
|
<el-table-column type="selection">
|
<!-- <template slot-scope="{row}">-->
|
|
<!-- <!– {{ row.isSelect }}–>-->
|
|
<!-- <!– <el-radio :key="row.id" v-model="row.id" @change="radioValueChange($event)" />–>-->
|
<!-- </template>-->
|
</el-table-column>
|
<el-table-column label="工艺路线" prop="gylx" />
|
<el-table-column label="物料编码" prop="wlbm" />
|
<el-table-column label="物料名称" prop="wlmc" />
|
<el-table-column label="物料规格" prop="wlgg" />
|
<el-table-column label="结束装箱" prop="jszx">
|
<template slot-scope="{row}">
|
<div v-if="row.jszx==='1'">是</div>
|
<div v-if="row.jszx==='0'">否</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!--分页-->
|
<pagination
|
v-show="total>0"
|
:total="total"
|
:page.sync="form.pageNum"
|
:limit.sync="form.pageSize"
|
align="right"
|
layout="prev, pager, next,sizes"
|
popper-class="select_bottom"
|
style="padding: 0;margin-top: 10px;"
|
/>
|
</div>
|
<div style="margin:0 20px;width: 71%;">
|
<el-table
|
:data="tableData2"
|
border
|
height="500px"
|
style="width: 100%;"
|
:header-cell-style="headerCellStyle"
|
:cell-style="cellStyle"
|
>
|
<el-table-column label="" prop="" type="index" />
|
<el-table-column label="工序编码" prop="gxbm" />
|
<el-table-column label="工序名称" prop="gxmc" />
|
<el-table-column label="工序检验" prop="gxjy" />
|
<el-table-column label="初始节拍" prop="csjp" />
|
<el-table-column label="初始型腔数" prop="csxqs" />
|
<el-table-column label="初始工价" prop="csgj">
|
<template slot-scope="{row}">
|
<div>{{ row.csgj }}元</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="编辑操作">
|
<template slot-scope="{row}">
|
<el-tooltip content="新增" placement="top">
|
<el-button type="text" icon="el-icon-circle-plus-outline" />
|
</el-tooltip>
|
<el-tooltip content="修改" placement="top">
|
<el-button type="text" icon="el-icon-edit" />
|
</el-tooltip>
|
<el-tooltip content="删除" placement="top">
|
<el-button type="text" icon="el-icon-delete" />
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column label="关联工作站">
|
<template slot-scope="{row}">
|
<el-tooltip content="工作站" placement="top">
|
<el-button type="text" icon="el-icon-share" @click="shareClick(row)" />
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div style="height: 100px;border: 1px solid #eee; margin-top: 20px">
|
<div style="margin: 20px;color:#42b983;">工艺路线</div>
|
<div>
|
<el-steps
|
style="display:flex;
|
margin-top: -25px;
|
justify-content: center;"
|
:space="400"
|
:active="3"
|
align-center
|
>
|
|
<el-step title="下料" />
|
<el-step title="电化学" />
|
<el-step title="清洗烘干" />
|
</el-steps>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-dialog
|
title="关联工作站"
|
:visible.sync="dialogVisible"
|
width="50%"
|
top="5vh"
|
@closed="handleClose"
|
>
|
<el-divider />
|
<div style="margin-bottom: 10px;">
|
<i class="el-icon-s-comment" style="color:#42b983;" /> 工序名称：{{ dialogGxmc }}
|
</div>
|
<div>
|
<!-- <template>-->
|
<el-radio-group v-model="dialogRadioValue" @change="dialogRadioChange($event)">
|
<el-radio
|
v-for="item in dialogContentArr"
|
:key="item.id"
|
|
:label="item.name"
|
border
|
size="medium"
|
/>
|
<!-- v-model="item.id"-->
|
</el-radio-group>
|
<!-- </template>-->
|
</div>
|
<div style="height: 350px;border: 1px solid #eee; margin-top: 20px;overflow-y:scroll">
|
<el-tree
|
ref="tree"
|
style="margin-left: 10px;"
|
:data="treeData"
|
show-checkbox
|
default-expand-all
|
node-key="id"
|
highlight-current
|
@node-click="nodeClick"
|
>
|
<!-- :props="defaultProps"-->
|
|
<div slot-scope="{node,data}" style="display: flex;justify-content: space-between;width: 80%;">
|
<div>{{ node.label.split('&')[0] }}</div>
|
<div>{{ node.label.split('&')[1] }}</div>
|
</div>
|
|
</el-tree>
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisibleCancel">取 消</el-button>
|
<el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
|
import Pagination from '@/components/Pagination'
|
|
export default {
|
name: 'Gylx',
|
components: {
|
Pagination
|
},
|
data() {
|
return {
|
form: {
|
pageNum: 1, // 第几页
|
pageSize: 10, // 每页多少条
|
gylx: '', // 公益路线
|
wlbm: '', // 物料编码
|
wlmc: ''// 物料名称
|
},
|
total: 10,
|
tableData1: [
|
{ id: 1, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '圆钢F45MnVS20', wlgg: '20', jszx: '1' },
|
{ id: 2, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '圆钢F45MnVS20', wlgg: '20', jszx: '1' },
|
{ id: 3, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '圆钢F45MnVS20', wlgg: '20', jszx: '1' },
|
{ id: 4, isSelect: true, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '676端件', wlgg: '676', jszx: '1' },
|
{ id: 5, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '676端件', wlgg: '676', jszx: '1' },
|
{ id: 6, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
|
{ id: 7, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
|
{ id: 8, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
|
{ id: 9, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
|
{ id: 10, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' }
|
],
|
radioValue: '',
|
radioValueId: 0,
|
tableData2: [
|
{ id: 1, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
|
{ id: 2, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
|
{ id: 3, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
|
{ id: 4, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
|
{ id: 5, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
|
{ id: 6, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' }
|
],
|
dialogVisible: false,
|
dialogGxmc: '',
|
dialogContentArr: [
|
{ id: 1, name: '机加C41' },
|
{ id: 2, name: '机加C42' },
|
{ id: 3, name: '机加C43' },
|
{ id: 4, name: '机加C44' },
|
{ id: 5, name: '机加C45' },
|
{ id: 6, name: '机加C46' },
|
{ id: 8, name: '机加C47' },
|
{ id: 9, name: '机加C48' },
|
{ id: 10, name: '机加C49' },
|
{ id: 11, name: '机加C50' },
|
{ id: 12, name: '机加C51' },
|
{ id: 13, name: 'GP12外观包装C39' },
|
{ id: 14, name: 'Gp12外观检清洗烘干包装C40' },
|
{ id: 15, name: 'GP12外观包装C38' },
|
{ id: 16, name: 'GP12外观包装C37' },
|
{ id: 17, name: 'GP12外观包装C36' },
|
{ id: 18, name: '返回返修车间' },
|
{ id: 19, name: '设置休闲区' },
|
{ id: 20, name: '空压机房' }
|
],
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
treeData: [
|
{
|
id: 1,
|
label: '选择全部',
|
children: [
|
{
|
id: 2,
|
label: '二级 1-1',
|
children: [{
|
id: 3,
|
label: '三级 1-1-1&LKFDL_SC-PC028'
|
}, {
|
id: 4,
|
label: '三级 1-1-2&LKFDL_SC-PC029'
|
|
}, {
|
id: 5,
|
label: '三级 1-1-1&LKFDL_SC-PC030'
|
}, {
|
id: 6,
|
label: '三级 1-1-2&LKFDL_SC-PC031'
|
|
}]
|
},
|
{
|
id: 7,
|
label: '二级 1-1',
|
children: [{
|
id: 8,
|
label: '三级 2-1-1&LKFDL_SC-PC028'
|
}, {
|
id: 9,
|
label: '三级 2-1-1&LKFDL_SC-PC029'
|
|
}, {
|
id: 10,
|
label: '三级 2-1-1&LKFDL_SC-PC027'
|
}, {
|
id: 11,
|
label: '三级 2-1-1&LKFDL_SC-PC026'
|
|
}
|
]
|
},
|
{
|
id: 12,
|
label: '二级 1-1',
|
children: [{
|
id: 13,
|
label: '三级 3-1-1&LKFDL_SC-PC023'
|
}, {
|
id: 14,
|
label: '三级 3-1-1&LKFDL_SC-PC024'
|
|
}, {
|
id: 15,
|
label: '三级 3-1-1&LKFDL_SC-PC025'
|
}, {
|
id: 16,
|
label: '三级 3-1-1&LKFDL_SC-PC026'
|
}
|
]
|
}
|
]
|
}
|
|
],
|
dialogRadioValue: '',
|
dialogRadioValueId: 0
|
}
|
},
|
created() {
|
},
|
methods: {
|
// 导入
|
upLoad() {
|
// const isLt100M = param.file.size / 1024 / 1024 < 50
|
// if (!isLt100M) {
|
// this.$message('请检查，上传文件大小不能超过50MB!')
|
// return
|
// }
|
// const formData = new FormData()
|
// formData.append('file', param.file)
|
// formData.append('formId', this.formId)
|
//
|
// this.loading = true
|
// const _self = this
|
// uploadTable(formData).then(res => {
|
// this.$message(res.data.message)
|
// param.data.fbsl = res.data.data.total
|
// _self.loading = false
|
// this.dataList = JSON.parse(JSON.stringify(this.dataList))
|
// }).catch(() => {
|
// _self.loading = false
|
// })
|
},
|
// 导出
|
async downLoad() {
|
// const res = await downFile(row.id)
|
// if (res) {
|
// // console.log(res)
|
// const fileName = row.filename
|
// // const fileName = '杭州市检察工作绩效评价（表一）' + '.xls'
|
// // let blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}) // xlsx
|
// // const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // xls
|
// const blob = new Blob([res.data], { type: res.data.type }) // xls
|
// if ('download' in document.createElement('a')) { // 非IE下载
|
// const elink = document.createElement('a')
|
// elink.download = fileName
|
// elink.style.display = 'none'
|
// elink.href = URL.createObjectURL(blob)
|
// document.body.appendChild(elink)
|
// elink.click()
|
// URL.revokeObjectURL(elink.href) // 释放URL 对象
|
// document.body.removeChild(elink)
|
// } else { // IE10+下载
|
// navigator.msSaveBlob(blob, fileName)
|
// }
|
// }
|
},
|
radioValueChange(val) {
|
console.log(val)
|
},
|
|
// 对话框中查询id
|
dialogRadioChange(val) {
|
this.dialogContentArr.forEach(item => {
|
if (item.name === val) {
|
this.dialogRadioValueId = item.id
|
}
|
})
|
},
|
nodeClick(obj, node, data) {
|
// console.log(obj, node, data)
|
},
|
// 对话框确认按钮
|
dialogVisibleConfirm() {
|
// 得到的树形节点
|
const treeIdArr = this.$refs.tree.getCheckedKeys()
|
// 单选框id
|
// this.dialogRadioValueId
|
|
this.dialogVisible = false
|
},
|
// 关联工作站点击事件
|
shareClick(row) {
|
this.dialogVisible = true
|
this.dialogGxmc = row.gxmc
|
},
|
// 对话框关闭之前处理
|
handleClose() {
|
this.dialogRadioValue = ''
|
this.$refs.tree.setCheckedKeys([])
|
},
|
dialogVisibleCancel() {
|
this.dialogVisible = false
|
this.dialogRadioValue = ''
|
this.$refs.tree.setCheckedKeys([])
|
},
|
// 重置事件
|
reset() {
|
this.form.gylx = ''
|
this.form.wlbm = ''
|
this.form.wlmc = ''
|
},
|
// 处理表头单元格样式
|
headerCellStyle() {
|
const option = {
|
background: '#eee', padding: '5px 0'
|
// border: '1px solid #fff'
|
}
|
return option
|
},
|
// 处理表头行样式
|
headerRowStyle() {
|
|
},
|
// 处理表格单元格样式
|
cellStyle() {
|
return { padding: '5px 0' }
|
},
|
// 查询事件
|
async search() {
|
const data = this.form
|
console.log(data)
|
// const res=await xxx(data)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
::v-deep .el-button--primary {
|
background-color: #42b983 !important;
|
height: 30px;
|
display: flex;
|
align-items: center;
|
}
|
|
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
|
background-color: #42b983 !important;
|
}
|
|
::v-deep .el-button--text {
|
color: #42b983;
|
font-size: 14px;
|
}
|
|
::v-deep .el-step__head.is-finish {
|
color: #42b983;
|
border-color: #42b983;;
|
}
|
|
::v-deep .el-step__title.is-finish {
|
color: #42b983;
|
}
|
|
::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
|
margin: 10px 30px 0px 0;
|
|
}
|
|
::v-deep .el-icon-caret-right:before {
|
content: '' !important;
|
}
|
|
::v-deep .el-radio__input.is-checked+.el-radio__label{
|
color: #42b983;
|
}
|
|
::v-deep .el-radio.is-bordered.is-checked{
|
border-color: #42b983;
|
}
|
|
::v-deep .el-radio__input.is-checked .el-radio__inner{
|
border-color: #42b983;
|
background: #42b983;
|
}
|
|
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
|
border-color: #42b983;
|
background-color: #42b983;
|
}
|
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
|
border-color: #42b983;
|
background-color: #42b983;
|
}
|
/*::v-deep .el-divider--horizontal{*/
|
/* margin:0 0 10px 0;*/
|
/*}*/
|
</style>
|
