mt-ck-00a/mt-ck-wms-ui
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

init

Browse Source
This commit is contained in:
gtz217
2021-09-13 14:56:28 +08:00
commit ac0d6e9083
777 changed files with 90286 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/views/art/process/list.vue Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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>