init
This commit is contained in:
144
src/views/art/components/Process-add.vue
Normal file
144
src/views/art/components/Process-add.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2021-07-26 14:39:36
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
>
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="190px" @keyup.enter.native="dataFormSubmit()">
|
||||
<el-form-item :label="$t('module.art.processList.processName')" prop="name">
|
||||
<el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.art.processList.processName')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.art.processList.processEq')" prop="equipmentIds">
|
||||
<el-select v-model="dataForm.equipmentIds" clearable filterable multiple>
|
||||
<el-option v-for="item in eqList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.art.processList.type')" prop="type">
|
||||
<el-select v-model="dataForm.type" clearable filterable>
|
||||
<el-option v-for="item in typeList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.art.processList.description')" prop="address">
|
||||
<el-input v-model="dataForm.description" :placeholder="$i18nForm(['placeholder.input', $t('module.art.processList.description')])" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getInfo, add, update } from '@/api/art-manage/process'
|
||||
import i18n from '@/lang'
|
||||
|
||||
const typeList = [
|
||||
{ id: 0, name: i18n.t('module.art.processList.equipment') },
|
||||
{ id: 1, name: i18n.t('module.art.processList.buffer') }
|
||||
]
|
||||
|
||||
export default {
|
||||
props: {
|
||||
eqList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
type: null,
|
||||
equipmentIds: [],
|
||||
description: ''
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.art.processList.processName')]),
|
||||
trigger: 'blur' }
|
||||
],
|
||||
equipmentIds: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.select', this.$t('module.art.processList.processEq')]),
|
||||
trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
typeList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || null
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
getInfo({ id: this.dataForm.id }).then(res => {
|
||||
this.dataForm.id = res.data.id
|
||||
this.dataForm.name = res.data.name
|
||||
this.dataForm.type = res.data.type
|
||||
this.dataForm.description = res.data.description
|
||||
this.dataForm.equipmentIds = res.data.equipments.map(item => {
|
||||
return item.id
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
console.log(!this.dataForm.id)
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
'name': this.dataForm.name,
|
||||
'type': this.dataForm.type,
|
||||
'equipmentIds': this.dataForm.equipmentIds,
|
||||
'description': this.dataForm.description,
|
||||
'id': this.dataForm.id
|
||||
}
|
||||
if (this.dataForm.id) {
|
||||
update(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
add(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
189
src/views/art/components/add-dialog.vue
Normal file
189
src/views/art/components/add-dialog.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
width="25%"
|
||||
:visible="visible"
|
||||
:destroy-on-close="true"
|
||||
:before-close="() => $emit('on-close')"
|
||||
:title="id ? 'btn.edit' : 'btn.add' | i18nFilter"
|
||||
:class="$style.dialog"
|
||||
>
|
||||
<el-form ref="obj" :model="obj" :rules="rules" label-width="140px">
|
||||
<el-form-item :label="$t('module.art.artName')" prop="name">
|
||||
<el-input v-model="obj.name" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.art.externalCode')" prop="externalCode">
|
||||
<el-input v-model="obj.code" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item :label="$t('module.art.substrateType')" prop="substrateId">
|
||||
<el-select
|
||||
v-model="obj.substrateId"
|
||||
:class="$style.select"
|
||||
filterable
|
||||
clearable
|
||||
:placeholder="'placeholder.select' | i18nFilter"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in substrateList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item v-if="false" :label="$t('module.art.artBOM')" prop="bomId">
|
||||
<el-select
|
||||
v-model="obj.bomId"
|
||||
:class="$style.select"
|
||||
filterable
|
||||
clearable
|
||||
:placeholder="'placeholder.select' | i18nFilter"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in bomList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.art.description')" prop="description">
|
||||
<el-input v-model="obj.description" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.art.remark')" prop="remark">
|
||||
<el-input v-model="obj.remark" />
|
||||
</el-form-item>
|
||||
<SubmitBar
|
||||
@on-cancle="$emit('on-close')"
|
||||
@on-submit="handleSubmit('obj')"
|
||||
/>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, update, getInfo, listSubstrate, listBom, getCode } from '@/api/art-manage/art.js'
|
||||
import SubmitBar from '@/views/art/components/submit-bar'
|
||||
|
||||
export default {
|
||||
name: 'AddDialog',
|
||||
components: {
|
||||
SubmitBar
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
obj: {
|
||||
name: '',
|
||||
code: '',
|
||||
remark: '',
|
||||
description: '',
|
||||
substrateId: '',
|
||||
bomId: ''
|
||||
},
|
||||
substrateList: [],
|
||||
bomList: [],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: this.$t('module.art.artName') + this.$t('module.art.notNull'), trigger: 'blur' },
|
||||
{ min: 3, message: this.$t('module.art.lengthRule'), trigger: 'blur' }
|
||||
],
|
||||
// externalCode: [
|
||||
// { required: true, message: this.$t('module.art.externalCode') + this.$t('module.art.notNull'), trigger: 'blur' },
|
||||
// { min: 3, message: this.$t('module.art.lengthRule'), trigger: 'blur' }
|
||||
// ],
|
||||
// substrateId: [
|
||||
// {
|
||||
// required: true,
|
||||
// message: this.$t('module.art.selectNotNull') + this.$t('module.art.substrateType'),
|
||||
// trigger: 'change'
|
||||
// }
|
||||
// ],
|
||||
bomId: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('module.art.selectNotNull') + this.$t('module.art.artBOM'),
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
id(val) {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init: async function() {
|
||||
if (this.substrateList.length === 0) {
|
||||
const substrateRes = await listSubstrate()
|
||||
this.substrateList = substrateRes.data
|
||||
}
|
||||
if (this.bomList.length === 0) {
|
||||
const bomRes = await listBom()
|
||||
this.bomList = bomRes.data
|
||||
}
|
||||
if (this.id) {
|
||||
const res = await getInfo({ id: this.id })
|
||||
this.obj = res.data
|
||||
} else {
|
||||
const result = await getCode()
|
||||
this.obj = {
|
||||
name: '',
|
||||
code: result.data,
|
||||
remark: '',
|
||||
description: '',
|
||||
substrateId: '',
|
||||
bomId: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
handleSubmit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
console.log(this.obj)
|
||||
if (this.id) {
|
||||
update(this.obj).then(res => {
|
||||
this.$emit('on-success')
|
||||
})
|
||||
} else {
|
||||
add(this.obj).then(res => {
|
||||
this.$emit('on-success')
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.dialog {
|
||||
.input {
|
||||
display: flex;
|
||||
margin: 8px 16px 8px 4px;
|
||||
align-items: center;
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
39
src/views/art/components/demo.vue
Normal file
39
src/views/art/components/demo.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div :class="$style.container">demo</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Demo',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
.input {
|
||||
display: flex;
|
||||
margin: 8px 16px 8px 4px;
|
||||
align-items: center;
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
40
src/views/art/components/process-chart.vue
Normal file
40
src/views/art/components/process-chart.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<VueScrollbar :class="$style.c" @click="$emit('on-detail')">
|
||||
<div :class="$style.chart">
|
||||
sssss
|
||||
</div>
|
||||
</VueScrollbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueScrollbar from 'vue-perfect-scrollbar'
|
||||
export default {
|
||||
name: 'ProcessChart',
|
||||
components: { VueScrollbar },
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.c {
|
||||
margin: 16px;
|
||||
height: 300px;
|
||||
width: 10%;
|
||||
position: relative;
|
||||
.chart {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
width: 120%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
74
src/views/art/components/process-drawer.vue
Normal file
74
src/views/art/components/process-drawer.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
title="工艺流程图"
|
||||
size="85%"
|
||||
:append-to-body="true"
|
||||
:visible.sync="visible"
|
||||
:wrapper-closable="false"
|
||||
:before-close="() => $emit('on-close')"
|
||||
>
|
||||
<ProcessEditBar :is-edit="isEdit" @on-edit="isEdit=true" @on-cancel="isEdit=false" @on-submit="handleSubmit()" />
|
||||
<ProcessChart v-show="!isEdit" @on-detail="handleDetail" />
|
||||
<ProcessTable v-if="isEdit" :process-flow-id="processFlowId" @on-detail="handleDetail" />
|
||||
<el-drawer
|
||||
title="节点详情"
|
||||
size="20%"
|
||||
:append-to-body="true"
|
||||
:before-close="()=>innerDrawer=false"
|
||||
:visible.sync="innerDrawer"
|
||||
>
|
||||
<ProcessNodePanel />
|
||||
</el-drawer>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProcessChart from '@/views/art/components/process-chart'
|
||||
import ProcessTable from '@/views/art/components/process-table'
|
||||
import ProcessNodePanel from '@/views/art/components/process-node-panel'
|
||||
import ProcessEditBar from '@/views/art/components/process-edit-bar'
|
||||
export default {
|
||||
name: 'ProcessDrawer',
|
||||
components: { ProcessChart, ProcessTable, ProcessNodePanel, ProcessEditBar },
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
processFlowId: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
innerDrawer: false,
|
||||
isEdit: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDetail() {
|
||||
this.innerDrawer = true
|
||||
},
|
||||
handleSubmit() {
|
||||
console.log('保存成功')
|
||||
this.isEdit = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.dialog {
|
||||
.input {
|
||||
display: flex;
|
||||
margin: 8px 16px 8px 4px;
|
||||
align-items: center;
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
62
src/views/art/components/process-edit-bar.vue
Normal file
62
src/views/art/components/process-edit-bar.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2021-01-27 10:07:42
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-02-01 11:28:16
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<el-button
|
||||
v-show="!isEdit"
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="$emit('on-edit')"
|
||||
>
|
||||
{{ 'btn.edit' | i18nFilter }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-show="isEdit"
|
||||
type="success"
|
||||
size="mini"
|
||||
icon="el-icon-s-promotion"
|
||||
@click="$bus.emit('on-process-save')"
|
||||
>
|
||||
{{ 'btn.save' | i18nFilter }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-show="isEdit"
|
||||
icon="el-icon-close"
|
||||
size="mini"
|
||||
@click="$emit('on-cancel')"
|
||||
>
|
||||
{{ 'btn.cancel' | i18nFilter }}
|
||||
</el-button>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
background-color: #eee;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 4px 16px;
|
||||
margin: -16px 16px 16px 16px;
|
||||
width: 98%;
|
||||
}
|
||||
</style>
|
||||
90
src/views/art/components/process-node-panel.vue
Normal file
90
src/views/art/components/process-node-panel.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<div :class="$style.content">
|
||||
<el-divider>
|
||||
<span>设备信息</span>
|
||||
</el-divider>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.content">
|
||||
<el-divider><span>配方清单</span></el-divider>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.content">
|
||||
<el-divider><span>物料清单</span></el-divider>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Demo',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
margin: 0px 16px;
|
||||
.content {
|
||||
padding:0 16px;
|
||||
font-size: 14px;
|
||||
div{
|
||||
margin-bottom: 8px;
|
||||
span:nth-of-type(odd){
|
||||
color:#999;
|
||||
}
|
||||
span:nth-of-type(even){
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
325
src/views/art/components/process-table.vue
Normal file
325
src/views/art/components/process-table.vue
Normal file
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<VueScrollbar :class="$style.content">
|
||||
<div :class="$style['flaw-detail']">
|
||||
<div :class="$style['flaw-title']">
|
||||
设备名称
|
||||
</div>
|
||||
<div :class="$style['flaw-title']">
|
||||
配方名称
|
||||
</div>
|
||||
<div :class="$style['flaw-title']">
|
||||
物料bom
|
||||
</div>
|
||||
<div :class="$style['flaw-title']">
|
||||
工艺类型
|
||||
</div>
|
||||
<div :class="$style['flaw-title']">
|
||||
描述
|
||||
</div>
|
||||
<div :class="$style['flaw-title']">
|
||||
备注
|
||||
</div>
|
||||
<div :class="$style['flaw-btns']">
|
||||
<el-button
|
||||
type="success"
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
@click="flawAdd()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in process.processFlowEquipmentParams"
|
||||
:key="index"
|
||||
:class="$style['flaw-detail']"
|
||||
>
|
||||
<el-select
|
||||
v-model="item.equipmentId"
|
||||
:class="$style['flaw-select']"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
@change="equipmentChange($event, item)"
|
||||
>
|
||||
<el-option
|
||||
v-for="equipment in equipmentList"
|
||||
:key="equipment.id"
|
||||
:label="equipment.name"
|
||||
:value="equipment.id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="item.equipmentRecipeId"
|
||||
:class="$style['flaw-select']"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="param in item.params"
|
||||
:key="param.id"
|
||||
:label="param.name"
|
||||
:value="param.id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="item.equipmentBomId"
|
||||
:class="$style['flaw-select']"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="bom in item.boms"
|
||||
:key="bom.id"
|
||||
:label="bom.name"
|
||||
:value="bom.id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="item.nodeType"
|
||||
:class="$style['flaw-select']"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="nodeType in nodeTypes"
|
||||
:key="nodeType.value"
|
||||
:label="nodeType.label"
|
||||
:value="nodeType.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input v-model="item.description" :class="$style['flaw-select']" />
|
||||
<el-input v-model="item.remark" :class="$style['flaw-select']" />
|
||||
<el-button
|
||||
type="success"
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
@click="flawAdd(item)"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
circle
|
||||
@click="flawDel(item)"
|
||||
/>
|
||||
<el-button
|
||||
type="info"
|
||||
icon="el-icon-document"
|
||||
circle
|
||||
@click="$emit('on-detail', item)"
|
||||
/>
|
||||
</div>
|
||||
</VueScrollbar>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
listAllEquipmentBom,
|
||||
listAllEquipmentRecipe,
|
||||
addProcessFlows,
|
||||
listProcessFlowNode
|
||||
} from '@/api/art-manage/art.js'
|
||||
import { listEquipment } from '@/api/material-manage/material'
|
||||
import remove from 'lodash/remove.js'
|
||||
import findIndex from 'lodash/findIndex.js'
|
||||
import VueScrollbar from 'vue-perfect-scrollbar'
|
||||
export default {
|
||||
name: 'ProcessTable',
|
||||
components: { VueScrollbar },
|
||||
props: {
|
||||
processFlowId: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultFlaws: [],
|
||||
process: {
|
||||
processFlowId: this.processFlowId,
|
||||
processFlowEquipmentParams: [
|
||||
{
|
||||
equipmentId: null,
|
||||
equipmentRecipeId: null,
|
||||
equipmentBomId: null,
|
||||
nodeType: null,
|
||||
processFlowId: this.processFlowId,
|
||||
remark: null,
|
||||
description: null,
|
||||
boms: [],
|
||||
params: []
|
||||
}
|
||||
]
|
||||
},
|
||||
currentFlawRow: {},
|
||||
productDetBarcode: '',
|
||||
warehouseBarcode: '',
|
||||
equipmentList: [],
|
||||
equipmentBomList: [],
|
||||
equipmentParamList: [],
|
||||
// 1、上片设备，2、加工设备，3、下片设备
|
||||
nodeTypes: [
|
||||
{
|
||||
value: '1',
|
||||
label: '上片设备'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '加工设备'
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '下片设备'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
this.$bus.on('on-process-save', this.save)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$bus.off('on-process-save', this.save)
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
flawAdd(item) {
|
||||
const mid = [
|
||||
{
|
||||
equipmentId: null,
|
||||
equipmentRecipeId: null,
|
||||
equipmentBomId: null,
|
||||
nodeType: null,
|
||||
processFlowId: this.processFlowId,
|
||||
remark: null,
|
||||
description: null,
|
||||
boms: [],
|
||||
params: []
|
||||
}
|
||||
]
|
||||
if (!item) {
|
||||
this.process.processFlowEquipmentParams = mid.concat(
|
||||
this.process.processFlowEquipmentParams
|
||||
)
|
||||
return
|
||||
}
|
||||
const index = findIndex(
|
||||
this.process.processFlowEquipmentParams,
|
||||
f => f === item
|
||||
)
|
||||
console.log(index)
|
||||
const { length } = this.process.processFlowEquipmentParams
|
||||
const beg = this.process.processFlowEquipmentParams.slice(0, index + 1)
|
||||
const end = this.process.processFlowEquipmentParams.slice(
|
||||
index + 1,
|
||||
length
|
||||
)
|
||||
|
||||
this.process.processFlowEquipmentParams = [].concat(beg, mid, end)
|
||||
},
|
||||
flawDel(item) {
|
||||
console.log(item)
|
||||
remove(this.process.processFlowEquipmentParams, f => f === item)
|
||||
console.log(this.process.processFlowEquipmentParams)
|
||||
this.process.processFlowEquipmentParams = this.process.processFlowEquipmentParams.concat(
|
||||
[]
|
||||
)
|
||||
},
|
||||
focusFlaw(item) {
|
||||
console.log(item)
|
||||
this.currentFlawRow = item
|
||||
},
|
||||
setFlaw(flaw) {
|
||||
console.log(flaw)
|
||||
this.currentFlawRow.description = flaw.defectName
|
||||
this.currentFlawRow.fabricId = flaw.id
|
||||
},
|
||||
reset() {
|
||||
console.log(this.defaultFlaws)
|
||||
this.process.processFlowEquipmentParams = JSON.parse(
|
||||
JSON.stringify(this.defaultFlaws)
|
||||
)
|
||||
},
|
||||
save() {
|
||||
const vm = this
|
||||
console.log(JSON.stringify(vm.process))
|
||||
if (vm.process.processFlowEquipmentParams.length === 0) {
|
||||
vm.$alert('工艺节点为空，您确定要保存吗？', '[温馨提示]', {
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
console.log('保存')
|
||||
addProcessFlows(vm.process)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
addProcessFlows(vm.process)
|
||||
}
|
||||
},
|
||||
async init() {
|
||||
const allBomRes = await listAllEquipmentBom()
|
||||
this.equipmentBomList = allBomRes.data
|
||||
const allRecipeRes = await listAllEquipmentRecipe()
|
||||
this.equipmentParamList = allRecipeRes.data
|
||||
const allEquipmentRes = await listEquipment()
|
||||
this.equipmentList = allEquipmentRes.data
|
||||
const allNodeRes = await listProcessFlowNode({ processFlowId: this.processFlowId })
|
||||
console.log(allNodeRes)
|
||||
const allNodes = allNodeRes.data
|
||||
console.log(allNodes)
|
||||
if (allNodes && allNodes.length === 0) {
|
||||
return
|
||||
}
|
||||
this.process.processFlowEquipmentParams = allNodes.map(m => {
|
||||
return {
|
||||
...m,
|
||||
nodeType: null,
|
||||
processFlowId: this.processFlowId,
|
||||
boms: this.equipmentBomList.filter(f => f.equipmentId === m.equipmentId),
|
||||
params: this.equipmentParamList.filter(f => f.equipmentId === m.equipmentId),
|
||||
id: null
|
||||
}
|
||||
})
|
||||
console.log(this.process.processFlowEquipmentParams)
|
||||
},
|
||||
equipmentChange(val, item) {
|
||||
console.log(val, item)
|
||||
item.boms = this.equipmentBomList.filter(f => f.equipmentId === val)
|
||||
item.params = this.equipmentParamList.filter(f => f.equipmentId === val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
$colWidth: 200px;
|
||||
.content {
|
||||
padding: 16px;
|
||||
margin: 16px;
|
||||
position: relative;
|
||||
height: calc(100vh - 150px);
|
||||
.flaw-detail {
|
||||
width: 1400px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.flaw-title {
|
||||
position: relative;
|
||||
width: $colWidth;
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #eee;
|
||||
padding: 8px;
|
||||
}
|
||||
.flaw-btns {
|
||||
position: relative;
|
||||
width: $colWidth;
|
||||
text-align: left;
|
||||
}
|
||||
.flaw-select {
|
||||
position: relative;
|
||||
width: $colWidth;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
src/views/art/components/search-bar.vue
Normal file
124
src/views/art/components/search-bar.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<span class="label-name">{{ $t('module.teamManager.Handover.Keyword') }}</span>
|
||||
<el-input
|
||||
v-model="keywords"
|
||||
:placeholder="placeholder"
|
||||
:clearable="true"
|
||||
:style="{
|
||||
width: inputWidth + 'px',
|
||||
maxWidth: '100%',
|
||||
marginRight: '16px'
|
||||
}"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-if="showTime"
|
||||
v-model="dts"
|
||||
style="margin-right:16px;"
|
||||
type="daterange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
:range-separator="'formItem.to' | i18nFilter"
|
||||
:start-placeholder="'formItem.beginTime' | i18nFilter"
|
||||
:end-placeholder="'formItem.endTime' | i18nFilter"
|
||||
:picker-options="pickerOptions"
|
||||
/>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleSearch()">
|
||||
{{ "btn.search" | i18nFilter }}
|
||||
</el-button>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import i18n from '@/lang'
|
||||
|
||||
const pickerOptions = {
|
||||
shortcuts: [
|
||||
{
|
||||
text: i18n.t('datePickerOption.lastWeek'),
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: i18n.t('datePickerOption.lastMonth'),
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: i18n.t('datePickerOption.lastThreeMonths'),
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
showTime: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
lableName: {
|
||||
type: String,
|
||||
default: '关键字'
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入'
|
||||
},
|
||||
inputWidth: {
|
||||
type: Number,
|
||||
default: 180
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keywords: '',
|
||||
dts: ['', ''],
|
||||
pickerOptions
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSearch() {
|
||||
const param = {
|
||||
keywords: this.keywords,
|
||||
key: this.keywords,
|
||||
begDate: this.dts[0]
|
||||
? moment(this.dts[0]).format('YYYY-MM-DD')
|
||||
: this.dts[0],
|
||||
endDate: this.dts[1]
|
||||
? moment(this.dts[1]).format('YYYY-MM-DD')
|
||||
: this.dts[1]
|
||||
}
|
||||
this.$emit('on-search', param)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding: 4px 40px;
|
||||
background-color: #eee;
|
||||
.label-name {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
38
src/views/art/components/submit-bar.vue
Normal file
38
src/views/art/components/submit-bar.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2021-01-27 10:07:42
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-02-01 11:26:16
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<el-button type="primary" icon="el-icon-success" @click="$emit('on-submit')">
|
||||
{{ 'btn.confirm' | i18nFilter }}
|
||||
</el-button>
|
||||
<el-button icon="el-icon-close" @click="$emit('on-cancle')">
|
||||
{{ 'btn.cancel' | i18nFilter }}
|
||||
</el-button>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
},
|
||||
data() {
|
||||
return { }
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top:28px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
21
src/views/art/filters/index.js
Normal file
21
src/views/art/filters/index.js
Normal file
@@ -0,0 +1,21 @@
|
||||
/*
|
||||
* @Date: 2020-12-29 16:49:28
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-04-13 13:49:51
|
||||
* @FilePath: \basic-admin\src\filters\DataDict\index.js
|
||||
* @Description: 部分常量的数据字典定义
|
||||
*/
|
||||
import i18n from '@/lang'
|
||||
|
||||
const table = {
|
||||
typeFilter: {
|
||||
0: i18n.t('module.art.processList.equipment'),
|
||||
1: i18n.t('module.art.processList.buffer')
|
||||
}
|
||||
}
|
||||
|
||||
export default function(dictTable) {
|
||||
return function(val) {
|
||||
return table?.[dictTable]?.[val]
|
||||
}
|
||||
}
|
||||
217
src/views/art/list.vue
Normal file
217
src/views/art/list.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<SearchBar :lable-name="$t('module.art.key')" :placeholder="$t('module.art.artName') + $t('module.art.or') + $t('module.art.artCode')" @on-search="handleSearch">
|
||||
<el-button type="success" icon="el-icon-plus" @click="handleAdd()">
|
||||
{{ 'btn.add' | i18nFilter }}
|
||||
</el-button>
|
||||
</SearchBar>
|
||||
<el-table
|
||||
:data="tableDataList"
|
||||
:class="$style.table"
|
||||
:stripe="true"
|
||||
:header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
size="medium"
|
||||
>
|
||||
<el-table-column prop="index" :label="'tableHeader.index' | i18nFilter" width="80" />
|
||||
<el-table-column prop="name" :label="$t('module.art.artName')" width="180" />
|
||||
<el-table-column :label="$t('module.art.status')" width="80">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.enabled === "1" ? $t('module.art.on') : $t('module.art.off') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" :label="$t('module.art.createTime')" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="code" :label="$t('module.art.artCode')" width="180" />
|
||||
<el-table-column prop="remark" :label="$t('module.art.remark')" />
|
||||
<el-table-column prop="description" :label="$t('module.art.description')" />
|
||||
<el-table-column :label="$t('module.art.process')">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleProcessFlowDetail(scope.row.id)"
|
||||
>{{ 'btn.detail' | i18nFilter }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('module.art.operation')" width="280">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="info"
|
||||
icon="el-icon-edit"
|
||||
@click="handleEdit(scope.row.id)"
|
||||
>
|
||||
{{ 'btn.edit' | i18nFilter }}
|
||||
</el-button>
|
||||
<span style="margin:0 3px">|</span>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
>
|
||||
{{ 'btn.delete' | i18nFilter }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('module.art.IsDisabled')">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.isValid"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
@change="handleChange($event, scope.row.id)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
:hide-on-single-page="false"
|
||||
:class="$style.table"
|
||||
:current-page="page.current"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="page.size"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="page.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
<AddDialog
|
||||
v-if="addDialogVisible"
|
||||
:id="id"
|
||||
:class="$style.dialog"
|
||||
:visible="addDialogVisible"
|
||||
@on-close="addDialogVisible = false"
|
||||
@on-success="handleAddSuccess()"
|
||||
/>
|
||||
<ProcessDrawer
|
||||
:class="$style.dialog"
|
||||
:visible="processDrawerVisible"
|
||||
:process-flow-id="id"
|
||||
@on-close="processDrawerVisible = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { list, del, enabled } from '@/api/art-manage/art.js'
|
||||
import SearchBar from '@/views/art/components/search-bar'
|
||||
import AddDialog from '@/views/art/components/add-dialog'
|
||||
import ProcessDrawer from '@/views/art/components/process-drawer'
|
||||
export default {
|
||||
components: { SearchBar, AddDialog, ProcessDrawer },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
moment,
|
||||
id: null,
|
||||
tableDataList: [],
|
||||
page: {
|
||||
total: 0,
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
addDialogVisible: false,
|
||||
processDrawerVisible: false,
|
||||
param: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.handleSearch()
|
||||
},
|
||||
methods: {
|
||||
handleSearch(param) {
|
||||
this.param = param
|
||||
console.log(param)
|
||||
list({ ...param, ...this.page }).then(res => {
|
||||
console.log(res)
|
||||
this.page.total = res.data.total
|
||||
if (!res.data.records) {
|
||||
this.tableDataList = []
|
||||
return
|
||||
}
|
||||
this.tableDataList = res.data.records.map((m, index) => ({
|
||||
...m,
|
||||
index: this.page.size * (this.page.current - 1) + index + 1,
|
||||
isValid: m.enabled === '1'
|
||||
}))
|
||||
})
|
||||
},
|
||||
handleAdd() {
|
||||
console.log('handleAdd')
|
||||
this.addDialogVisible = true
|
||||
this.id = null
|
||||
},
|
||||
handleAddSuccess() {
|
||||
this.addDialogVisible = false
|
||||
this.page.current = 1
|
||||
this.handleSearch(this.param)
|
||||
},
|
||||
handleChange(val, id) {
|
||||
console.log(val, id)
|
||||
const param = {
|
||||
enabled: val ? '1' : '0',
|
||||
id
|
||||
}
|
||||
enabled(param).then(res => {
|
||||
this.handleSearch(this.param)
|
||||
})
|
||||
},
|
||||
handleProcessFlowDetail(id) {
|
||||
this.processDrawerVisible = true
|
||||
this.id = id
|
||||
this.$router.push({
|
||||
path: '/art/process',
|
||||
query: {
|
||||
redirect: '/art/list',
|
||||
title: '工艺流程',
|
||||
id
|
||||
}
|
||||
})
|
||||
},
|
||||
handleEdit(id) {
|
||||
this.addDialogVisible = true
|
||||
this.id = id
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`)
|
||||
this.page.size = val
|
||||
this.handleSearch(this.param)
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`)
|
||||
this.page.current = val
|
||||
this.handleSearch(this.param)
|
||||
},
|
||||
handleDelete(id) {
|
||||
this.$confirm(this.$t('module.art.delTip'), this.$t('module.art.tip'), {
|
||||
confirmButtonText: this.$t('module.art.confirm'),
|
||||
cancelButtonText: this.$t('module.art.cancel'),
|
||||
type: 'warning'
|
||||
}).then(async() => {
|
||||
del({ id }).then(res => {
|
||||
this.page.current = 1
|
||||
this.handleSearch(this.param)
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: this.$t('module.art.delSucc')
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
.table {
|
||||
margin: 16px;
|
||||
width: 98.5%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
69
src/views/art/process/list.vue
Normal file
69
src/views/art/process/list.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<ProcessEditBar :is-edit="isEdit" @on-back="goback" @on-edit="isEdit=true" @on-cancel="isEdit=false" @on-submit="handleSubmit()" />
|
||||
<ProcessChart v-if="!isEdit" :process-flow-id="processFlowId" @on-detail="handleDetail" />
|
||||
<ProcessTable v-else :process-flow-id="processFlowId" @on-detail="handleDetail" @on-save-success="handleSuccess" />
|
||||
<el-drawer
|
||||
title="节点详情"
|
||||
size="20%"
|
||||
:append-to-body="true"
|
||||
:before-close="()=>innerDrawer=false"
|
||||
:visible.sync="innerDrawer"
|
||||
>
|
||||
<ProcessNodePanel />
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProcessChart from '@/views/art/process/process-chart'
|
||||
import ProcessTable from '@/views/art/process/process-table'
|
||||
import ProcessNodePanel from '@/views/art/process/process-node-panel'
|
||||
import ProcessEditBar from '@/views/art/process/process-edit-bar'
|
||||
export default {
|
||||
name: 'ProcessDrawer',
|
||||
components: { ProcessChart, ProcessTable, ProcessNodePanel, ProcessEditBar },
|
||||
props: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
innerDrawer: false,
|
||||
isEdit: false,
|
||||
processFlowId: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.processFlowId = this.$route.query.id
|
||||
},
|
||||
methods: {
|
||||
handleDetail() {
|
||||
this.innerDrawer = true
|
||||
},
|
||||
handleSubmit() {
|
||||
console.log('保存成功')
|
||||
this.isEdit = false
|
||||
},
|
||||
handleSuccess() {
|
||||
this.isEdit = false
|
||||
},
|
||||
goback() {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
.input {
|
||||
display: flex;
|
||||
margin: 8px 16px 8px 4px;
|
||||
align-items: center;
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
350
src/views/art/process/process-chart-old.vue
Normal file
350
src/views/art/process/process-chart-old.vue
Normal file
@@ -0,0 +1,350 @@
|
||||
<template>
|
||||
<VueScrollbar :class="$style.content">
|
||||
<div :class="$style['flaw-detail']">
|
||||
<div :class="$style['flaw-title']">
|
||||
{{ $t('module.art.processName') }}
|
||||
</div>
|
||||
<div :class="$style['flaw-title']">
|
||||
{{ $t('module.art.eqName') }}
|
||||
</div>
|
||||
<div :class="$style['flaw-title']">
|
||||
{{ $t('module.art.recipeName') }}
|
||||
</div>
|
||||
<!-- <div :class="$style['flaw-title']">
|
||||
{{ $t('module.art.materialBOM') }}
|
||||
</div> -->
|
||||
<div :class="$style['flaw-title']">
|
||||
{{ $t('module.art.artType') }}
|
||||
</div>
|
||||
<div :class="$style['flaw-title']">
|
||||
{{ $t('module.art.description') }}
|
||||
</div>
|
||||
<div :class="$style['flaw-title']">
|
||||
{{ $t('module.art.remark') }}
|
||||
</div>
|
||||
<div :class="$style['flaw-btns']">
|
||||
<el-button
|
||||
v-if="false"
|
||||
type="success"
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
@click="flawAdd()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in process.processFlowEquipmentParams"
|
||||
:key="index"
|
||||
:class="$style['flaw-detail']"
|
||||
>
|
||||
<el-select
|
||||
v-model="item.equipmentId"
|
||||
:class="$style['flaw-select']"
|
||||
filterable
|
||||
clearable
|
||||
:placeholder="'placeholder.select' | i18nFilter"
|
||||
:disabled="true"
|
||||
@change="equipmentChange($event, item)"
|
||||
>
|
||||
<el-option
|
||||
v-for="equipment in equipmentList"
|
||||
:key="equipment.id"
|
||||
:label="equipment.name"
|
||||
:value="equipment.id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="item.equipmentId"
|
||||
:class="$style['flaw-select']"
|
||||
filterable
|
||||
clearable
|
||||
:placeholder="'placeholder.select' | i18nFilter"
|
||||
:disabled="true"
|
||||
@change="equipmentChange($event, item)"
|
||||
>
|
||||
<el-option
|
||||
v-for="equipment in equipmentList"
|
||||
:key="equipment.id"
|
||||
:label="equipment.name"
|
||||
:value="equipment.id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="item.equipmentRecipeId"
|
||||
:class="$style['flaw-select']"
|
||||
filterable
|
||||
clearable
|
||||
:placeholder="'placeholder.select' | i18nFilter"
|
||||
:disabled="true"
|
||||
>
|
||||
<el-option
|
||||
v-for="param in equipmentParamList"
|
||||
:key="param.id"
|
||||
:label="param.name"
|
||||
:value="param.id"
|
||||
/>
|
||||
</el-select>
|
||||
<!-- <el-select
|
||||
v-model="item.equipmentBomId"
|
||||
:class="$style['flaw-select']"
|
||||
filterable
|
||||
clearable
|
||||
:placeholder="'placeholder.select' | i18nFilter"
|
||||
:disabled="true"
|
||||
>
|
||||
<el-option
|
||||
v-for="bom in item.boms"
|
||||
:key="bom.id"
|
||||
:label="bom.name"
|
||||
:value="bom.id"
|
||||
/>
|
||||
</el-select> -->
|
||||
<el-select
|
||||
v-model="item.nodeType"
|
||||
:class="$style['flaw-select']"
|
||||
filterable
|
||||
clearable
|
||||
:placeholder="'placeholder.select' | i18nFilter"
|
||||
:disabled="true"
|
||||
>
|
||||
<el-option
|
||||
v-for="nodeType in nodeTypes"
|
||||
:key="nodeType.value"
|
||||
:label="nodeType.label"
|
||||
:value="nodeType.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input
|
||||
v-model="item.description"
|
||||
:class="$style['flaw-select']"
|
||||
:disabled="true"
|
||||
/>
|
||||
<el-input
|
||||
v-model="item.remark"
|
||||
:class="$style['flaw-select']"
|
||||
:disabled="true"
|
||||
/>
|
||||
<el-button
|
||||
v-if="false"
|
||||
type="info"
|
||||
icon="el-icon-document"
|
||||
circle
|
||||
@click="$emit('on-detail', item)"
|
||||
/>
|
||||
</div>
|
||||
</VueScrollbar>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
listAllEquipmentBom,
|
||||
listAllEquipmentRecipe,
|
||||
addProcessFlows,
|
||||
listProcessFlowNode
|
||||
} from '@/api/art-manage/art.js'
|
||||
import { listEquipment } from '@/api/material-manage/material'
|
||||
import remove from 'lodash/remove.js'
|
||||
import findIndex from 'lodash/findIndex.js'
|
||||
import VueScrollbar from 'vue-perfect-scrollbar'
|
||||
export default {
|
||||
name: 'ProcessTable',
|
||||
components: { VueScrollbar },
|
||||
props: {
|
||||
processFlowId: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultFlaws: [],
|
||||
process: {
|
||||
processFlowId: this.processFlowId,
|
||||
processFlowEquipmentParams: [
|
||||
{
|
||||
equipmentId: null,
|
||||
equipmentType: null,
|
||||
equipmentRecipeId: null,
|
||||
equipmentBomId: null,
|
||||
nodeType: null,
|
||||
processFlowId: this.processFlowId,
|
||||
remark: null,
|
||||
description: null,
|
||||
boms: [],
|
||||
params: []
|
||||
}
|
||||
]
|
||||
},
|
||||
currentFlawRow: {},
|
||||
productDetBarcode: '',
|
||||
warehouseBarcode: '',
|
||||
equipmentList: [],
|
||||
equipmentBomList: [],
|
||||
equipmentParamList: [],
|
||||
// 1、上片设备，2、加工设备，3、下片设备
|
||||
nodeTypes: [
|
||||
{
|
||||
value: 1,
|
||||
label: '上片设备'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '加工设备'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '下片设备'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
this.$bus.on('on-process-save', this.save)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$bus.off('on-process-save', this.save)
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
flawAdd(item) {
|
||||
const mid = [
|
||||
{
|
||||
equipmentId: null,
|
||||
equipmentRecipeId: null,
|
||||
equipmentBomId: null,
|
||||
nodeType: null,
|
||||
processFlowId: this.processFlowId,
|
||||
remark: null,
|
||||
description: null,
|
||||
boms: [],
|
||||
params: []
|
||||
}
|
||||
]
|
||||
if (!item) {
|
||||
this.process.processFlowEquipmentParams = mid.concat(
|
||||
this.process.processFlowEquipmentParams
|
||||
)
|
||||
return
|
||||
}
|
||||
const index = findIndex(
|
||||
this.process.processFlowEquipmentParams,
|
||||
f => f === item
|
||||
)
|
||||
console.log(index)
|
||||
const { length } = this.process.processFlowEquipmentParams
|
||||
const beg = this.process.processFlowEquipmentParams.slice(0, index + 1)
|
||||
const end = this.process.processFlowEquipmentParams.slice(
|
||||
index + 1,
|
||||
length
|
||||
)
|
||||
|
||||
this.process.processFlowEquipmentParams = [].concat(beg, mid, end)
|
||||
},
|
||||
flawDel(item) {
|
||||
console.log(item)
|
||||
remove(this.process.processFlowEquipmentParams, f => f === item)
|
||||
console.log(this.process.processFlowEquipmentParams)
|
||||
this.process.processFlowEquipmentParams = this.process.processFlowEquipmentParams.concat(
|
||||
[]
|
||||
)
|
||||
},
|
||||
focusFlaw(item) {
|
||||
console.log(item)
|
||||
this.currentFlawRow = item
|
||||
},
|
||||
setFlaw(flaw) {
|
||||
console.log(flaw)
|
||||
this.currentFlawRow.description = flaw.defectName
|
||||
this.currentFlawRow.fabricId = flaw.id
|
||||
},
|
||||
reset() {
|
||||
console.log(this.defaultFlaws)
|
||||
this.process.processFlowEquipmentParams = JSON.parse(
|
||||
JSON.stringify(this.defaultFlaws)
|
||||
)
|
||||
},
|
||||
save() {
|
||||
const vm = this
|
||||
console.log(JSON.stringify(vm.process))
|
||||
if (vm.process.processFlowEquipmentParams.length === 0) {
|
||||
vm.$alert(this.$t('module.art.nodeNull'), this.$t('module.art.tip'), {
|
||||
confirmButtonText: this.$t('module.art.confirm'),
|
||||
callback: action => {
|
||||
console.log('保存')
|
||||
addProcessFlows(vm.process)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
addProcessFlows(vm.process)
|
||||
}
|
||||
},
|
||||
async init() {
|
||||
const allBomRes = await listAllEquipmentBom()
|
||||
this.equipmentBomList = allBomRes.data
|
||||
const allRecipeRes = await listAllEquipmentRecipe()
|
||||
this.equipmentParamList = allRecipeRes.data
|
||||
const allEquipmentRes = await listEquipment()
|
||||
this.equipmentList = allEquipmentRes.data
|
||||
const allNodeRes = await listProcessFlowNode({ processFlowId: this.processFlowId })
|
||||
console.log(allNodeRes)
|
||||
const allNodes = allNodeRes.data
|
||||
console.log(allNodes)
|
||||
if (allNodes && allNodes.length === 0) {
|
||||
return
|
||||
}
|
||||
this.process.processFlowEquipmentParams = allNodes.map(m => {
|
||||
return {
|
||||
...m,
|
||||
processFlowId: this.processFlowId,
|
||||
boms: this.equipmentBomList.filter(f => f.equipmentId === m.equipmentId),
|
||||
params: this.equipmentParamList.filter(f => f.equipmentType === m.equipmentType),
|
||||
id: null
|
||||
}
|
||||
})
|
||||
console.log(this.process.processFlowEquipmentParams)
|
||||
},
|
||||
equipmentChange(val, item) {
|
||||
console.log(val, item)
|
||||
for (let i = 0; i < this.equipmentList.length; i++) {
|
||||
if (this.equipmentList[i].id === val) {
|
||||
item.boms = this.equipmentBomList.filter(f => f.equipmentId === val)
|
||||
item.params = this.equipmentParamList.filter(f => f.equipmentType === this.equipmentList[i].equipmentType)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
$colWidth: 200px;
|
||||
.content {
|
||||
padding: 16px;
|
||||
margin: 16px;
|
||||
position: relative;
|
||||
height: calc(100vh - 160px);
|
||||
.flaw-detail {
|
||||
width: 1400px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.flaw-title {
|
||||
position: relative;
|
||||
width: $colWidth;
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #eee;
|
||||
padding: 8px;
|
||||
}
|
||||
.flaw-btns {
|
||||
position: relative;
|
||||
width: $colWidth;
|
||||
text-align: left;
|
||||
}
|
||||
.flaw-select {
|
||||
position: relative;
|
||||
width: $colWidth;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
168
src/views/art/process/process-chart.vue
Normal file
168
src/views/art/process/process-chart.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="process-table">
|
||||
<el-collapse class="process-table-main">
|
||||
<el-collapse-item v-for="(item, index) in dataList" :key="index" :name="index">
|
||||
<template slot="title">
|
||||
<div class="process-table-main-title">
|
||||
<span>{{ processObj[item.workSequenceId].name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row v-for="(i, idx) in item.processFlowEquipmentParams" :key="'item' + index + idx" class="process-table-main-item" :gutter="20">
|
||||
<el-col :span="4" class="process-table-main-item-item">
|
||||
<el-button disabled>
|
||||
{{ i.equipmentId ? equipmentObj[i.equipmentId] : $t('module.art.eqName') }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="4" class="process-table-main-item-item">
|
||||
<el-button v-if="!processPortObj[item.workSequenceId]" disabled>
|
||||
{{ i.equipmentRecipeId ? equipmentRecipeObj[i.equipmentRecipeId] : $t('module.art.recipeName') }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
<!-- <el-col :span="4" class="process-table-main-item-item">
|
||||
<el-button v-if="!processPortObj[item.workSequenceId]" disabled>
|
||||
{{ i.nodeType ? nodeTypesObj[i.nodeType] : $t('module.art.artType') }}
|
||||
</el-button>
|
||||
</el-col> -->
|
||||
<el-col :span="4" class="process-table-main-item-item">
|
||||
<el-input v-model="i.description" disabled :placeholder="$t('module.art.processList.description')" @change="changeDescription(index, idx)" />
|
||||
</el-col>
|
||||
<el-col :span="4" class="process-table-main-item-item">
|
||||
<el-input v-model="i.remark" disabled :placeholder="$t('module.art.remark')" @change="changeRemark(index, idx)" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
listAllEquipmentRecipe,
|
||||
listProcessFlowNode,
|
||||
listProcess
|
||||
} from '@/api/art-manage/art.js'
|
||||
import { listEquipment } from '@/api/material-manage/material'
|
||||
|
||||
export default {
|
||||
name: 'ProcessChart',
|
||||
props: {
|
||||
processFlowId: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
processList: [],
|
||||
processObj: {},
|
||||
processPortObj: {},
|
||||
equipmentRecipeList: [],
|
||||
equipmentRecipeObj: [],
|
||||
equipmentList: [],
|
||||
equipmentObj: {},
|
||||
showAddList: [],
|
||||
// 1、上片设备，2、加工设备，3、下片设备
|
||||
nodeTypes: [
|
||||
{
|
||||
id: 1,
|
||||
name: '上片设备'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '加工设备'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '下片设备'
|
||||
}
|
||||
],
|
||||
nodeTypesObj: {
|
||||
1: '上片设备',
|
||||
2: '加工设备',
|
||||
3: '下片设备'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 初始化
|
||||
async init() {
|
||||
// 获取工序列表
|
||||
const allProcessRes = await listProcess({})
|
||||
this.processList = allProcessRes.data
|
||||
allProcessRes.data.map(item => {
|
||||
this.processObj[item.id] = item
|
||||
if (item.type === 1) {
|
||||
this.processPortObj[item.id] = item.name
|
||||
}
|
||||
})
|
||||
console.log(this.processList)
|
||||
console.log(this.processObj)
|
||||
// 获取配方列表
|
||||
const allRecipeRes = await listAllEquipmentRecipe()
|
||||
this.equipmentRecipeList = allRecipeRes.data
|
||||
allRecipeRes.data.map(item => {
|
||||
this.equipmentRecipeObj[item.id] = item.name
|
||||
})
|
||||
console.log(this.equipmentRecipeList)
|
||||
// 获取设备列表
|
||||
const allEquipmentRes = await listEquipment()
|
||||
this.equipmentList = allEquipmentRes.data
|
||||
allEquipmentRes.data.map(item => {
|
||||
this.equipmentObj[item.id] = item.name
|
||||
})
|
||||
console.log(this.equipmentList)
|
||||
// 获取列表
|
||||
const allNodeRes = await listProcessFlowNode({
|
||||
processFlowId: this.processFlowId
|
||||
})
|
||||
console.log(allNodeRes)
|
||||
this.dataList = allNodeRes.data.map(item => {
|
||||
delete item.id
|
||||
item.processFlowEquipmentParams.map(i => {
|
||||
delete i.id
|
||||
i.workSequenceId = item.workSequenceId
|
||||
i.processFlowId = item.processFlowId
|
||||
return i
|
||||
})
|
||||
return item
|
||||
})
|
||||
console.log(this.dataList)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.process-table{
|
||||
.process-table-addprocess{
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.process-table-main{
|
||||
width: calc(100% - 40px);
|
||||
margin: 20px;
|
||||
border: 1px solid #e6ebf5;
|
||||
border-radius: 5px;
|
||||
min-width: 1000px;
|
||||
.process-table-main-title{
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.process-table-main-title-delbtn{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.process-table-main-item{
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 10px !important;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
68
src/views/art/process/process-edit-bar.vue
Normal file
68
src/views/art/process/process-edit-bar.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2021-01-27 10:07:42
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-02-01 11:28:52
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-arrow-left"
|
||||
@click="$emit('on-back')"
|
||||
>
|
||||
{{ 'btn.back' | i18nFilter }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-show="!isEdit"
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="$emit('on-edit')"
|
||||
>
|
||||
{{ 'btn.edit' | i18nFilter }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-show="isEdit"
|
||||
type="success"
|
||||
size="mini"
|
||||
icon="el-icon-s-promotion"
|
||||
@click="$bus.emit('on-process-save')"
|
||||
>
|
||||
{{ 'btn.save' | i18nFilter }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-show="isEdit"
|
||||
icon="el-icon-close"
|
||||
size="mini"
|
||||
@click="$emit('on-cancel')"
|
||||
>
|
||||
{{ 'btn.cancel' | i18nFilter }}
|
||||
</el-button>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
background-color: #eee;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 4px 16px;
|
||||
}
|
||||
</style>
|
||||
90
src/views/art/process/process-node-panel.vue
Normal file
90
src/views/art/process/process-node-panel.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<div :class="$style.content">
|
||||
<el-divider>
|
||||
<span>设备信息</span>
|
||||
</el-divider>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.content">
|
||||
<el-divider><span>配方清单</span></el-divider>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.content">
|
||||
<el-divider><span>物料清单</span></el-divider>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>设备名称：</span>
|
||||
<span>设备A</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Demo',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
margin: 0px 16px;
|
||||
.content {
|
||||
padding:0 16px;
|
||||
font-size: 14px;
|
||||
div{
|
||||
margin-bottom: 8px;
|
||||
span:nth-of-type(odd){
|
||||
color:#999;
|
||||
}
|
||||
span:nth-of-type(even){
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
src/views/art/process/process-table-add.vue
Normal file
63
src/views/art/process/process-table-add.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<!--
|
||||
* @Date: 2021-01-07 20:09:37
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-04-16 15:00:51
|
||||
* @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
width="60%"
|
||||
top="50px"
|
||||
:title="$t('module.art.processName')"
|
||||
:visible.sync="visible"
|
||||
@close="process = null"
|
||||
>
|
||||
<el-row>
|
||||
{{ $t('module.art.processName') }}：
|
||||
<el-select v-model="process" filterable>
|
||||
<el-option v-for="item in processList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-row>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="handleConfirm()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
processList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
process: null
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
init() {
|
||||
this.visible = true
|
||||
},
|
||||
handleConfirm() {
|
||||
this.$emit('handleProcess', this.process)
|
||||
},
|
||||
closeDialog() {
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
451
src/views/art/process/process-table-old.vue
Normal file
451
src/views/art/process/process-table-old.vue
Normal file
@@ -0,0 +1,451 @@
|
||||
<template>
|
||||
<VueScrollbar :class="$style.content">
|
||||
<div :class="$style['flaw-detail']">
|
||||
<div :class="$style['flaw-title']">
|
||||
{{ $t('module.art.processName') }}
|
||||
</div>
|
||||
<div :class="$style['flaw-title']">
|
||||
{{ $t('module.art.eqName') }}
|
||||
</div>
|
||||
<div :class="$style['flaw-title']">
|
||||
{{ $t('module.art.recipeName') }}
|
||||
</div>
|
||||
<!-- <div :class="$style['flaw-title']">
|
||||
{{ $t('module.art.materialBOM') }}
|
||||
</div> -->
|
||||
<div :class="$style['flaw-title']">
|
||||
{{ $t('module.art.artType') }}
|
||||
</div>
|
||||
<div :class="$style['flaw-title']">
|
||||
{{ $t('module.art.description') }}
|
||||
</div>
|
||||
<div :class="$style['flaw-title']">
|
||||
{{ $t('module.art.remark') }}
|
||||
</div>
|
||||
<div :class="$style['flaw-btns']">
|
||||
<el-button
|
||||
type="success"
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
@click="flawAdd()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in process"
|
||||
:key="index"
|
||||
:class="$style['flaw-detail']"
|
||||
>
|
||||
<el-select
|
||||
v-model="item.workSequenceId"
|
||||
:class="$style['flaw-select']"
|
||||
filterable
|
||||
clearable
|
||||
:placeholder="'placeholder.select' | i18nFilter"
|
||||
@change="processChange($event, item)"
|
||||
>
|
||||
<el-option
|
||||
v-for="processItem in processList"
|
||||
:key="processItem.id"
|
||||
:label="processItem.name"
|
||||
:value="processItem.id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="item.equipmentIdArr"
|
||||
:class="$style['flaw-select']"
|
||||
clearable
|
||||
collapse-tags
|
||||
:placeholder="'placeholder.select' | i18nFilter"
|
||||
@change="equipmentChange(item.id, item)"
|
||||
>
|
||||
<el-option
|
||||
v-for="equipment in item.processFlowEquipmentParams"
|
||||
:key="equipment.id"
|
||||
:label="equipment.name"
|
||||
:value="equipment.id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="item.repices"
|
||||
:class="$style['flaw-select']"
|
||||
filterable
|
||||
clearable
|
||||
:placeholder="'placeholder.select' | i18nFilter"
|
||||
>
|
||||
<el-option
|
||||
v-for="param in item.params"
|
||||
:key="param.id"
|
||||
:label="param.name"
|
||||
:value="param.id"
|
||||
/>
|
||||
</el-select>
|
||||
<!-- <el-select
|
||||
v-model="item.boms"
|
||||
:class="$style['flaw-select']"
|
||||
filterable
|
||||
clearable
|
||||
:placeholder="'placeholder.select' | i18nFilter"
|
||||
>
|
||||
<el-option
|
||||
v-for="bom in item.equipmentList[0].boms"
|
||||
:key="bom.id"
|
||||
:label="bom.name"
|
||||
:value="bom.id"
|
||||
/>
|
||||
</el-select> -->
|
||||
<el-select
|
||||
v-model="item.nodeTypes"
|
||||
:class="$style['flaw-select']"
|
||||
filterable
|
||||
clearable
|
||||
:placeholder="'placeholder.select' | i18nFilter"
|
||||
>
|
||||
<el-option
|
||||
v-for="nodeType in nodeTypes"
|
||||
:key="nodeType.value"
|
||||
:label="nodeType.label"
|
||||
:value="nodeType.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input v-model="item.descriptions" :class="$style['flaw-select']" />
|
||||
<el-input v-model="item.remarks" :class="$style['flaw-select']" />
|
||||
<el-button
|
||||
type="success"
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
@click="flawAdd(item)"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
circle
|
||||
@click="flawDel(item)"
|
||||
/>
|
||||
<el-button
|
||||
v-if="false"
|
||||
type="info"
|
||||
icon="el-icon-document"
|
||||
circle
|
||||
@click="$emit('on-detail', item)"
|
||||
/>
|
||||
</div>
|
||||
</VueScrollbar>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
listAllEquipmentBom,
|
||||
listAllEquipmentRecipe,
|
||||
addProcessFlows,
|
||||
listProcessFlowNode,
|
||||
listProcess
|
||||
} from '@/api/art-manage/art.js'
|
||||
import { getInfo } from '@/api/art-manage/process'
|
||||
import { listEquipment } from '@/api/material-manage/material'
|
||||
import remove from 'lodash/remove.js'
|
||||
import findIndex from 'lodash/findIndex.js'
|
||||
import VueScrollbar from 'vue-perfect-scrollbar'
|
||||
export default {
|
||||
name: 'ProcessTable',
|
||||
components: { VueScrollbar },
|
||||
props: {
|
||||
processFlowId: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultFlaws: [],
|
||||
// process: {
|
||||
// processFlowId: this.processFlowId,
|
||||
// workSequenceIds: [],
|
||||
// processFlowEquipmentParams: [
|
||||
// {
|
||||
// equipmentId: null,
|
||||
// equipmentType: null,
|
||||
// equipmentRecipeId: null,
|
||||
// equipmentBomId: null,
|
||||
// nodeType: null,
|
||||
// processFlowId: this.processFlowId,
|
||||
// remark: null,
|
||||
// description: null,
|
||||
// boms: [],
|
||||
// params: [],
|
||||
// workSequenceId: null,
|
||||
// enabled: null
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// equipmentId: null,
|
||||
// equipmentType: null,
|
||||
// equipmentRecipeId: null,
|
||||
// equipmentBomId: null,
|
||||
// nodeType: null,
|
||||
// processFlowId: this.processFlowId,
|
||||
// remark: null,
|
||||
// description: null,
|
||||
// boms: [],
|
||||
// params: [],
|
||||
// workSequenceId: null,
|
||||
// enabled: null
|
||||
// }
|
||||
process: [],
|
||||
currentFlawRow: {},
|
||||
productDetBarcode: '',
|
||||
warehouseBarcode: '',
|
||||
equipmentList: [],
|
||||
equipmentBomList: [],
|
||||
equipmentParamList: [],
|
||||
processList: [],
|
||||
// 1、上片设备，2、加工设备，3、下片设备
|
||||
nodeTypes: [
|
||||
{
|
||||
value: 1,
|
||||
label: '上片设备'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '加工设备'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '下片设备'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
this.$bus.on('on-process-save', this.save)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$bus.off('on-process-save', this.save)
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
flawAdd(item) {
|
||||
const mid = [
|
||||
{
|
||||
processFlowId: this.processFlowId,
|
||||
workSequenceId: null,
|
||||
workSequenceName: null,
|
||||
equipmentIdArr: [],
|
||||
repices: null,
|
||||
nodeTypes: null,
|
||||
descriptions: null,
|
||||
remarks: null,
|
||||
boms: [],
|
||||
params: [],
|
||||
processFlowEquipmentParams: []
|
||||
}
|
||||
]
|
||||
if (!item) {
|
||||
this.process = mid.concat(
|
||||
this.process
|
||||
)
|
||||
return
|
||||
}
|
||||
const index = findIndex(
|
||||
this.process,
|
||||
f => f === item
|
||||
)
|
||||
console.log(index)
|
||||
const { length } = this.process
|
||||
const beg = this.process.slice(0, index + 1)
|
||||
const end = this.process.slice(
|
||||
index + 1,
|
||||
length
|
||||
)
|
||||
|
||||
this.process = [].concat(beg, mid, end)
|
||||
},
|
||||
flawDel(item) {
|
||||
console.log(item)
|
||||
remove(this.process, f => f === item)
|
||||
console.log(this.process)
|
||||
this.process = this.process.concat(
|
||||
[]
|
||||
)
|
||||
},
|
||||
focusFlaw(item) {
|
||||
console.log(item)
|
||||
this.currentFlawRow = item
|
||||
},
|
||||
setFlaw(flaw) {
|
||||
console.log(flaw)
|
||||
this.currentFlawRow.description = flaw.defectName
|
||||
this.currentFlawRow.fabricId = flaw.id
|
||||
},
|
||||
reset() {
|
||||
console.log(this.defaultFlaws)
|
||||
this.process.processFlowSequenceEquipmentParams = JSON.parse(
|
||||
JSON.stringify(this.defaultFlaws)
|
||||
)
|
||||
},
|
||||
save() {
|
||||
const vm = this
|
||||
let hasNull = false
|
||||
this.process.map(item => {
|
||||
if (!item.equipmentIdArr || !item.repices) {
|
||||
hasNull = true
|
||||
}
|
||||
})
|
||||
console.log(JSON.stringify(vm.process))
|
||||
if (vm.process.length === 0) {
|
||||
vm.$alert(this.$t('module.art.nodeNull'), this.$t('module.art.tip'), {
|
||||
confirmButtonText: this.$t('module.art.confirm'),
|
||||
callback: action => {
|
||||
console.log('保存')
|
||||
vm.handleSave(vm)
|
||||
}
|
||||
})
|
||||
} else if (hasNull) {
|
||||
vm.$message.error(this.$t('module.art.hasNull'))
|
||||
} else {
|
||||
vm.handleSave(vm)
|
||||
}
|
||||
},
|
||||
handleSave(vm) {
|
||||
console.log(vm.process)
|
||||
vm.process.map(item => {
|
||||
item.processFlowEquipmentParams.map((i, index) => {
|
||||
i.equipmentRecipeId = item.repices
|
||||
// i.equipmentBomId = item.boms
|
||||
i.equipmentId = i.id
|
||||
i.nodeType = item.nodeTypes
|
||||
i.processFlowId = this.processFlowId
|
||||
i.remark = item.remarks
|
||||
i.description = item.descriptions
|
||||
i.enabled = item.equipmentIdArr === i.id ? 1 : 0
|
||||
return i
|
||||
})
|
||||
return item
|
||||
})
|
||||
const processFlowParamObj = {
|
||||
processFlowSequenceEquipmentParams: vm.process
|
||||
}
|
||||
console.log(JSON.stringify(processFlowParamObj))
|
||||
addProcessFlows(processFlowParamObj).then(res => {
|
||||
this.$emit('on-save-success')
|
||||
})
|
||||
},
|
||||
async init() {
|
||||
const allBomRes = await listAllEquipmentBom()
|
||||
this.equipmentBomList = allBomRes.data
|
||||
const allRecipeRes = await listAllEquipmentRecipe()
|
||||
this.equipmentParamList = allRecipeRes.data
|
||||
const allEquipmentRes = await listEquipment()
|
||||
this.equipmentList = allEquipmentRes.data
|
||||
const allProcessRes = await listProcess({
|
||||
current: 1,
|
||||
size: 999
|
||||
})
|
||||
this.processList = allProcessRes.data.records
|
||||
const allNodeRes = await listProcessFlowNode({
|
||||
processFlowId: this.processFlowId
|
||||
})
|
||||
console.log(allNodeRes)
|
||||
const allNodes = allNodeRes.data
|
||||
console.log(allNodes)
|
||||
if (allNodes && allNodes.length === 0) {
|
||||
this.process = [{
|
||||
processFlowId: this.processFlowId,
|
||||
equipmentIdArr: [],
|
||||
equipmentList: [],
|
||||
repices: null,
|
||||
nodeTypes: null,
|
||||
descriptions: null,
|
||||
remarks: null,
|
||||
boms: [],
|
||||
params: [],
|
||||
processFlowEquipmentParams: []
|
||||
}]
|
||||
return
|
||||
}
|
||||
this.process = allNodes
|
||||
allNodes.map((item, index) => {
|
||||
this.process[index].processFlowId = this.processFlowId
|
||||
item.processFlowEquipmentVoList.map(i => {
|
||||
if (i.enabled) {
|
||||
this.process[index].equipmentIdArr = i.equipmentId
|
||||
this.process[index].params = this.equipmentParamList.filter(f => f.equipmentId === i.equipmentId)
|
||||
this.process[index].boms = this.equipmentBomList.filter(f => f.equipmentId === i.equipmentId)
|
||||
this.process[index].repices = i.equipmentRecipeId
|
||||
this.process[index].nodeTypes = i.nodeType
|
||||
this.process[index].descriptions = i.description
|
||||
this.process[index].remarks = i.remark
|
||||
}
|
||||
})
|
||||
// this.process[index].repices = item.processFlowEquipmentVoList.map(item => { return item.equipmentRecipeId }).filter(f => f)
|
||||
// this.process[index].nodeTypes = item.processFlowEquipmentVoList.map(item => { return item.nodeType }).filter(f => f)
|
||||
this.process[index].processFlowEquipmentParams = item.processFlowEquipmentVoList.map(m => {
|
||||
return {
|
||||
...m,
|
||||
processFlowId: this.processFlowId,
|
||||
workSequenceId: item.workSequenceId,
|
||||
name: m.equipmentName
|
||||
}
|
||||
})
|
||||
})
|
||||
console.log(this.process)
|
||||
},
|
||||
equipmentChange(val, item) {
|
||||
console.log(val, item)
|
||||
item.repices = null
|
||||
item.boms = this.equipmentBomList.filter(f => f.equipmentId === item.processFlowEquipmentParams[0].id)
|
||||
item.params = this.equipmentParamList.filter(f => f.equipmentId === item.equipmentIdArr)
|
||||
},
|
||||
processChange(id, item) {
|
||||
console.log(id, item)
|
||||
item.equipmentList = []
|
||||
getInfo({ id }).then(res => {
|
||||
item.processFlowEquipmentParams = []
|
||||
for (let i = 0; i < this.equipmentList.length; i++) {
|
||||
for (let z = 0; z < res.data.equipmentIds.length; z++) {
|
||||
if (this.equipmentList[i].id === res.data.equipmentIds[z]) {
|
||||
item.processFlowEquipmentParams.push(this.equipmentList[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(item.processFlowEquipmentParams)
|
||||
this.equipmentChange(id, item)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
$colWidth: 200px;
|
||||
.content {
|
||||
padding: 16px;
|
||||
margin: 16px;
|
||||
position: relative;
|
||||
height: calc(100vh - 160px);
|
||||
.flaw-detail {
|
||||
width: 1400px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.flaw-title {
|
||||
position: relative;
|
||||
width: $colWidth;
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #eee;
|
||||
padding: 8px;
|
||||
}
|
||||
.flaw-btns {
|
||||
position: relative;
|
||||
width: $colWidth;
|
||||
text-align: left;
|
||||
}
|
||||
.flaw-select {
|
||||
position: relative;
|
||||
width: $colWidth;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
71
src/views/art/process/process-table-select.vue
Normal file
71
src/views/art/process/process-table-select.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<!--
|
||||
* @Date: 2021-01-07 20:09:37
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-04-16 15:00:51
|
||||
* @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
width="60%"
|
||||
top="50px"
|
||||
:title="$t('module.art.processName')"
|
||||
:visible.sync="visible"
|
||||
@close="value = null"
|
||||
>
|
||||
<el-row>
|
||||
{{ $t(typeList[stype]) }}：
|
||||
<el-select v-model="value" filterable>
|
||||
<el-option v-for="item in list" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-row>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="handleConfirm()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
value: null,
|
||||
first: 0,
|
||||
second: 0,
|
||||
stype: null,
|
||||
list: [],
|
||||
typeList: {
|
||||
equipmentId: 'module.art.eqName',
|
||||
equipmentRecipeId: 'module.art.recipeName',
|
||||
nodeType: 'module.art.artType'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
init(stype, first, second, id, list) {
|
||||
this.visible = true
|
||||
this.stype = stype
|
||||
this.list = list
|
||||
this.first = first
|
||||
this.second = second
|
||||
this.value = id
|
||||
},
|
||||
handleConfirm() {
|
||||
this.$emit('handleSelect', this.stype, this.first, this.second, this.value)
|
||||
},
|
||||
closed() {
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
376
src/views/art/process/process-table.vue
Normal file
376
src/views/art/process/process-table.vue
Normal file
@@ -0,0 +1,376 @@
|
||||
<template>
|
||||
<div class="process-table">
|
||||
<el-button class="process-table-addprocess" type="primary" @click="addProcess">{{ $t('module.art.processList.addProcess') }}</el-button>
|
||||
<el-collapse class="process-table-main" @change="handleChange">
|
||||
<vuedraggable v-model="dataList" group="process">
|
||||
<el-collapse-item v-for="(item, index) in dataList" :key="index" :name="index">
|
||||
<template slot="title">
|
||||
<div class="process-table-main-title">
|
||||
<span>{{ processObj[item.workSequenceId].name }}</span>
|
||||
<div class="process-table-main-title-delbtn">
|
||||
<el-button v-if="showAddList.indexOf(index) >= 0" type="primary" size="mini" icon="el-icon-plus" @click="addProcessItem($event, index)">{{ 'btn.add' | i18nFilter }}</el-button>
|
||||
<el-button type="danger" size="mini" icon="el-icon-delete" @click="delProcess($event, index)">{{ 'btn.delete' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-row v-for="(i, idx) in item.processFlowEquipmentParams" :key="'item' + index + idx" class="process-table-main-item" :gutter="20">
|
||||
<el-col :span="4" class="process-table-main-item-item">
|
||||
<el-button icon="el-icon-edit" @click="choiceEquipment(index, idx, i.equipmentId, item.workSequenceId)">
|
||||
{{ i.equipmentId ? equipmentObj[i.equipmentId] : $t('module.art.eqName') }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="4" class="process-table-main-item-item">
|
||||
<el-button v-if="!processPortObj[item.workSequenceId]" icon="el-icon-edit" @click="choiceRecipe(index, idx, i.equipmentRecipeId)">
|
||||
{{ i.equipmentRecipeId ? equipmentRecipeObj[i.equipmentRecipeId] : $t('module.art.recipeName') }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
<!-- <el-col :span="4" class="process-table-main-item-item">
|
||||
<el-button v-if="!processPortObj[item.workSequenceId]" icon="el-icon-edit" @click="choiceArtType(index, idx, i.nodeType)">
|
||||
{{ i.nodeType ? nodeTypesObj[i.nodeType] : $t('module.art.artType') }}
|
||||
</el-button>
|
||||
</el-col> -->
|
||||
<el-col :span="4" class="process-table-main-item-item">
|
||||
<el-input v-model="i.description" :placeholder="$t('module.art.processList.description')" @change="changeDescription(index, idx)" />
|
||||
</el-col>
|
||||
<el-col :span="4" class="process-table-main-item-item">
|
||||
<el-input v-model="i.remark" :placeholder="$t('module.art.remark')" @change="changeRemark(index, idx)" />
|
||||
</el-col>
|
||||
<el-col :span="3" class="process-table-main-item-item">
|
||||
<el-button type="danger" icon="el-icon-delete" @click="delProcessItem(index, idx)">
|
||||
{{ 'btn.delete' | i18nFilter }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
</vuedraggable>
|
||||
</el-collapse>
|
||||
<!-- 添加工序 -->
|
||||
<process-table-add ref="processtableadd" :process-list="processList" @handleProcess="handleProcess" />
|
||||
<process-table-select ref="processtableselect" @handleSelect="handleSelect" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import processTableSelect from './process-table-select.vue'
|
||||
import processTableAdd from './process-table-add.vue'
|
||||
import vuedraggable from 'vuedraggable'
|
||||
import {
|
||||
listAllEquipmentRecipe,
|
||||
addProcessFlows,
|
||||
listProcessFlowNode,
|
||||
listProcess
|
||||
} from '@/api/art-manage/art.js'
|
||||
import { listEquipment } from '@/api/material-manage/material'
|
||||
|
||||
export default {
|
||||
name: 'ProcessTable',
|
||||
components: {
|
||||
vuedraggable,
|
||||
processTableAdd,
|
||||
processTableSelect
|
||||
},
|
||||
props: {
|
||||
processFlowId: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
processList: [],
|
||||
processObj: {},
|
||||
processPortObj: {},
|
||||
equipmentRecipeList: [],
|
||||
equipmentRecipeObj: [],
|
||||
equipmentList: [],
|
||||
equipmentObj: {},
|
||||
showAddList: [],
|
||||
// 1、上片设备，2、加工设备，3、下片设备
|
||||
nodeTypes: [
|
||||
{
|
||||
id: 1,
|
||||
name: '上片设备'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '加工设备'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '下片设备'
|
||||
}
|
||||
],
|
||||
nodeTypesObj: {
|
||||
1: '上片设备',
|
||||
2: '加工设备',
|
||||
3: '下片设备'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
this.$bus.on('on-process-save', this.save)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$bus.off('on-process-save', this.save)
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 初始化
|
||||
async init() {
|
||||
// 获取工序列表
|
||||
const allProcessRes = await listProcess({})
|
||||
this.processList = allProcessRes.data
|
||||
allProcessRes.data.map(item => {
|
||||
this.processObj[item.id] = item
|
||||
if (item.type === 1) {
|
||||
this.processPortObj[item.id] = item.name
|
||||
}
|
||||
})
|
||||
console.log(this.processList)
|
||||
console.log(this.processObj)
|
||||
// 获取配方列表
|
||||
const allRecipeRes = await listAllEquipmentRecipe()
|
||||
this.equipmentRecipeList = allRecipeRes.data
|
||||
allRecipeRes.data.map(item => {
|
||||
this.equipmentRecipeObj[item.id] = item.name
|
||||
})
|
||||
console.log(this.equipmentRecipeList)
|
||||
// 获取设备列表
|
||||
const allEquipmentRes = await listEquipment()
|
||||
this.equipmentList = allEquipmentRes.data
|
||||
allEquipmentRes.data.map(item => {
|
||||
this.equipmentObj[item.id] = item.name
|
||||
})
|
||||
console.log(this.equipmentList)
|
||||
// 获取列表
|
||||
const allNodeRes = await listProcessFlowNode({
|
||||
processFlowId: this.processFlowId
|
||||
})
|
||||
console.log(allNodeRes)
|
||||
this.dataList = allNodeRes.data.map(item => {
|
||||
delete item.id
|
||||
item.processFlowEquipmentParams.map(i => {
|
||||
delete i.id
|
||||
i.workSequenceId = item.workSequenceId
|
||||
i.processFlowId = item.processFlowId
|
||||
return i
|
||||
})
|
||||
return item
|
||||
})
|
||||
console.log(this.dataList)
|
||||
},
|
||||
// 添加工序
|
||||
addProcess() {
|
||||
this.$refs.processtableadd.init()
|
||||
},
|
||||
handleProcess(process) {
|
||||
// for (let i = 0; i < this.dataList.length; i++) {
|
||||
// if (this.dataList[i].workSequenceId === process) {
|
||||
// this.$message.warning(this.$t('module.art.NotSameProcess'))
|
||||
// return
|
||||
// }
|
||||
// }
|
||||
this.dataList.push({
|
||||
processFlowId: this.processFlowId,
|
||||
workSequenceId: process,
|
||||
processFlowEquipmentParams: [
|
||||
{
|
||||
equipmentId: '',
|
||||
equipmentRecipeId: '',
|
||||
nodeType: '',
|
||||
processFlowId: this.processFlowId,
|
||||
workSequenceId: process,
|
||||
description: '',
|
||||
remark: ''
|
||||
}
|
||||
]
|
||||
})
|
||||
this.$refs.processtableadd.closeDialog()
|
||||
},
|
||||
// 添加工序下设备
|
||||
addProcessItem(e, index) {
|
||||
this.dataList[index].processFlowEquipmentParams.push({
|
||||
equipmentId: '',
|
||||
equipmentRecipeId: '',
|
||||
nodeType: '',
|
||||
processFlowId: this.processFlowId,
|
||||
workSequenceId: this.dataList[index].workSequenceId,
|
||||
description: this.dataList[index].processFlowEquipmentParams[0]?.description ? this.dataList[index].processFlowEquipmentParams[0].description : '',
|
||||
remark: this.dataList[index].processFlowEquipmentParams[0]?.remark ? this.dataList[index].processFlowEquipmentParams[0].remark : ''
|
||||
})
|
||||
e.stopPropagation()
|
||||
},
|
||||
// 删除工序
|
||||
delProcess(e, index) {
|
||||
this.$confirm(`${this.$t('deleteTip.header')}${this.processObj[this.dataList[index].workSequenceId].name}${this.$t('deleteTip.footer')}`, this.$t('deleteTip.tip'), {
|
||||
confirmButtonText: this.$t('deleteTip.confirm'),
|
||||
cancelButtonText: this.$t('deleteTip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.dataList.splice(index, 1)
|
||||
}).catch(() => {})
|
||||
e.stopPropagation()
|
||||
},
|
||||
// 删除工序下设备
|
||||
delProcessItem(first, sec) {
|
||||
this.$confirm(`${this.$t('deleteTip.header')}${this.dataList[first].processFlowEquipmentParams[sec].equipmentId ? this.equipmentObj[this.dataList[first].processFlowEquipmentParams[sec].equipmentId] : this.$t('deleteTip.this')}${this.$t('deleteTip.footer')}`, this.$t('deleteTip.tip'), {
|
||||
confirmButtonText: this.$t('deleteTip.confirm'),
|
||||
cancelButtonText: this.$t('deleteTip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.dataList[first].processFlowEquipmentParams.splice(sec, 1)
|
||||
}).catch(() => {})
|
||||
},
|
||||
// 折叠菜单状态改变事件
|
||||
handleChange(list) {
|
||||
this.showAddList = list
|
||||
},
|
||||
// 选择设备
|
||||
choiceEquipment(first, sec, id, processId) {
|
||||
this.$refs.processtableselect.init('equipmentId', first, sec, id, this.processObj[processId].equipments)
|
||||
},
|
||||
// 选择配方
|
||||
choiceRecipe(first, sec, id) {
|
||||
if (this.dataList[first].processFlowEquipmentParams[sec]?.equipmentId) {
|
||||
this.$refs.processtableselect.init('equipmentRecipeId', first, sec, id, this.equipmentRecipeList.filter(f => f.equipmentId === this.dataList[first].processFlowEquipmentParams[sec].equipmentId))
|
||||
} else {
|
||||
this.$message.error(this.$t('module.art.choiceEqError'))
|
||||
}
|
||||
},
|
||||
// 选择工艺类型
|
||||
choiceArtType(first, sec, id) {
|
||||
if (this.dataList[first].processFlowEquipmentParams[sec]?.equipmentId) {
|
||||
this.$refs.processtableselect.init('nodeType', first, sec, id, this.nodeTypes)
|
||||
} else {
|
||||
this.$message.error(this.$t('module.art.choiceEqError'))
|
||||
}
|
||||
},
|
||||
// 选择设备配方工艺类型
|
||||
handleSelect(type, first, sec, val) {
|
||||
let change = true
|
||||
if (type === 'equipmentId') {
|
||||
this.dataList[first].processFlowEquipmentParams.map((item, index) => {
|
||||
if (val === item.equipmentId && index !== sec) {
|
||||
change = false
|
||||
}
|
||||
})
|
||||
}
|
||||
if (change) {
|
||||
Vue.set(this.dataList[first].processFlowEquipmentParams[sec], type, val)
|
||||
this.$refs.processtableselect.closed()
|
||||
} else {
|
||||
this.$message.error(this.$t('module.art.sameEqError'))
|
||||
}
|
||||
console.log(this.dataList)
|
||||
},
|
||||
// 描述变更
|
||||
changeDescription(first, sec) {
|
||||
if (sec === 0 && this.dataList[first].processFlowEquipmentParams.length > 1) {
|
||||
this.$confirm(`${this.$t('module.art.changeTipHeaderDes')}${this.processObj[this.dataList[first].workSequenceId].name}${this.$t('module.art.changeTipFooter')}`, this.$t('deleteTip.tip'), {
|
||||
confirmButtonText: this.$t('deleteTip.confirm'),
|
||||
cancelButtonText: this.$t('deleteTip.cancel'),
|
||||
type: 'info'
|
||||
}).then(() => {
|
||||
this.dataList[first].processFlowEquipmentParams.map(item => {
|
||||
Vue.set(item, 'description', this.dataList[first].processFlowEquipmentParams[0].description)
|
||||
})
|
||||
}).catch(() => {})
|
||||
}
|
||||
},
|
||||
// 备注变更
|
||||
changeRemark(first, sec) {
|
||||
if (sec === 0 && this.dataList[first].processFlowEquipmentParams.length > 1) {
|
||||
this.$confirm(`${this.$t('module.art.changeTipHeaderRemark')}${this.processObj[this.dataList[first].workSequenceId].name}${this.$t('module.art.changeTipFooter')}`, this.$t('deleteTip.tip'), {
|
||||
confirmButtonText: this.$t('deleteTip.confirm'),
|
||||
cancelButtonText: this.$t('deleteTip.cancel'),
|
||||
type: 'info'
|
||||
}).then(() => {
|
||||
this.dataList[first].processFlowEquipmentParams.map(item => {
|
||||
Vue.set(item, 'remark', this.dataList[first].processFlowEquipmentParams[0].remark)
|
||||
})
|
||||
}).catch(() => {})
|
||||
}
|
||||
},
|
||||
// 保存
|
||||
save() {
|
||||
const vm = this
|
||||
let hasNull = false
|
||||
this.dataList.map(item => {
|
||||
if (item.processFlowEquipmentParams.length === 0) {
|
||||
hasNull = true
|
||||
}
|
||||
if (this.processPortObj[item.workSequenceId]) {
|
||||
item.processFlowEquipmentParams.map(i => {
|
||||
if (!i.equipmentId) {
|
||||
hasNull = true
|
||||
}
|
||||
})
|
||||
} else {
|
||||
item.processFlowEquipmentParams.map(i => {
|
||||
if (!i.equipmentId || !i.equipmentRecipeId) {
|
||||
hasNull = true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
// console.log(JSON.stringify(vm.dataList))
|
||||
// if (vm.dataList.length === 0) {
|
||||
// vm.$alert(this.$t('module.art.nodeNull'), this.$t('module.art.tip'), {
|
||||
// confirmButtonText: this.$t('module.art.confirm'),
|
||||
// callback: action => {
|
||||
// console.log('保存')
|
||||
// vm.handleSave(vm)
|
||||
// }
|
||||
// })
|
||||
// } else
|
||||
if (hasNull) {
|
||||
vm.$message.error(this.$t('module.art.hasNull'))
|
||||
} else {
|
||||
vm.handleSave(vm)
|
||||
}
|
||||
},
|
||||
handleSave(vm) {
|
||||
const processFlowParamObj = {
|
||||
processFlowSequenceEquipmentParams: vm.dataList
|
||||
}
|
||||
console.log(JSON.stringify(processFlowParamObj))
|
||||
addProcessFlows(processFlowParamObj).then(res => {
|
||||
this.$emit('on-save-success')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.process-table{
|
||||
.process-table-addprocess{
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.process-table-main{
|
||||
width: calc(100% - 40px);
|
||||
margin: 20px;
|
||||
border: 1px solid #e6ebf5;
|
||||
border-radius: 5px;
|
||||
min-width: 1000px;
|
||||
.process-table-main-title{
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.process-table-main-title-delbtn{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.process-table-main-item{
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 10px !important;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
183
src/views/art/processList.vue
Normal file
183
src/views/art/processList.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2021-04-06 20:07:22
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-06-23 16:22:06
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<div class="usermanager-container">
|
||||
<head-form
|
||||
:placeholder-name="placeholderName"
|
||||
:key-name="keyName"
|
||||
@getDataList="getList"
|
||||
@add="addNew"
|
||||
/>
|
||||
<base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
|
||||
<method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
|
||||
<Process-add v-if="addOrUpdateVisible" ref="addOrUpdate" :eq-list="eqList" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// edit here
|
||||
import DataDict from './filters'
|
||||
const tableBtn = [{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
}, {
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}]
|
||||
const tableProps = [{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.art.processList.processName'),
|
||||
align: 'center'
|
||||
}, {
|
||||
prop: 'type',
|
||||
label: i18n.t('module.art.processList.type'),
|
||||
align: 'center',
|
||||
filter: DataDict('typeFilter')
|
||||
}, {
|
||||
prop: 'description',
|
||||
label: i18n.t('module.art.processList.description'),
|
||||
align: 'center'
|
||||
}]
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
// edit here
|
||||
import { list, del } from '@/api/art-manage/process'
|
||||
import { equipmentInfoList } from '@/api/basicData/Equipment/equipmentInfo'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import ProcessAdd from './components/Process-add'
|
||||
import Pagination from '@/components/Pagination'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import i18n from '@/lang'
|
||||
export default {
|
||||
name: 'OrgManager',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, ProcessAdd },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
keyName: i18n.t('module.art.processList.processName'),
|
||||
placeholderName: this.$t('module.art.processList.processName'),
|
||||
tableBtn,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
showDialog: false,
|
||||
curEditId: null,
|
||||
showEditDialog: false,
|
||||
addOrUpdateVisible: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
key: ''
|
||||
},
|
||||
date: null,
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
eqList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
orderId() {
|
||||
return this.$route.query.orderId
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getEqList()
|
||||
// this.listLoading = false
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
switch (raw.type) {
|
||||
case 'delete':
|
||||
this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
|
||||
confirmButtonText: i18n.t('btn.confirm'),
|
||||
cancelButtonText: i18n.t('btn.cancel'),
|
||||
type: 'warning'
|
||||
}).then(async() => {
|
||||
// 走接口
|
||||
const result = await del({
|
||||
id: raw.data.id
|
||||
})
|
||||
if (result.code === 0) {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: i18n.t('deleteMsgBox.doneMsg')
|
||||
})
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
break
|
||||
case 'edit':
|
||||
this.addNew(raw.data.id)
|
||||
break
|
||||
}
|
||||
},
|
||||
async getEqList(key) {
|
||||
// edit here
|
||||
const res = await equipmentInfoList({
|
||||
current: 1,
|
||||
size: 999
|
||||
})
|
||||
if (res.code === 0) {
|
||||
this.eqList = res.data.records
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
async getList(key) {
|
||||
this.listLoading = true
|
||||
if (typeof (key) === 'string') {
|
||||
this.listQuery.key = key
|
||||
}
|
||||
// edit here
|
||||
const res = await list(this.listQuery)
|
||||
console.log(res)
|
||||
if (res.code === 0) {
|
||||
this.list = res.data.records ? res.data.records : []
|
||||
this.total = res.data.total
|
||||
this.listLoading = false
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.usermanager-container {
|
||||
padding: 20px;
|
||||
.method-btn-area {
|
||||
padding: 15px 30px;
|
||||
margin: 10px 0 20px 0;
|
||||
border: 1px solid #dfe6ec;
|
||||
}
|
||||
.tree-select-container {
|
||||
border: 1px solid #dfe6ec;
|
||||
min-height: 400px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user