Files
hl_one/mes/qd/src/views/wms/pdm/device/CopyDialog.vue
2022-06-27 19:25:41 +08:00

258 lines
7.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<el-dialog
title="复制新增"
append-to-body
fullscreen
:visible.sync="dialogVisible"
@open="open"
@close="close"
>
<el-row :gutter="20">
<el-col :span="18" style="border: 1px solid white">
<span />
</el-col>
<el-col :span="6" style="margin-bottom: 20px">
<span style="float: right">
<el-button icon="el-icon-close" size="mini" type="info" @click="dialogVisible = false"> </el-button>
<el-button icon="el-icon-check" size="mini" type="primary" @click="saveCheck('form')">保存</el-button>
</span>
</el-col>
</el-row>
<el-card class="box-card" shadow="never">
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="mini" label-width="80px">
<el-form-item label="设备编码" prop="device_code">
<el-input v-model="form.device_code" placeholder="" style="width: 200px;" />
</el-form-item>
<el-form-item label="设备名称" prop="device_name">
<el-input v-model="form.device_name" style="width: 200px;" />
</el-form-item>
<el-form-item label="设备型号">
<el-input v-model="form.device_model" style="width: 370px;" />
</el-form-item>
<el-form-item label="所属工序">
<el-select v-model="form.workprocedure_id" filterable clearable class="filter-item" style="width: 200px">
<el-option
v-for="item in workList"
:key="item.workprocedure_id"
:label="item.workprocedure_name"
:value="item.workprocedure_id"
/>
</el-select>
</el-form-item>
<el-form-item label="外部编码">
<el-input v-model="form.extend_code" style="width: 200px;" />
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" :rows="2" type="textarea" style="width: 370px;" />
</el-form-item>
</el-form>
</el-card>
<div class="crud-opts2" style="margin-top: 30px">
<span class="role-span">扩展项明细</span>
<span class="crud-opts-right2">
<!--左侧插槽-->
<slot name="left" />
<el-button
slot="left"
class="filter-item"
type="warning"
icon="el-icon-plus"
size="mini"
@click="addrow"
>
新增扩展项
</el-button>
</span>
</div>
<!--表格渲染-->
<el-table
ref="table"
:data="tableData"
style="width: 100%;"
border
size="mini"
:highlight-current-row="true"
:header-cell-style="{background:'#f5f7fa',color:'#606266'}"
@current-change="handleCurrentChange"
>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="item_code" label="项点编码" align="center" />
<el-table-column prop="item_name" label="项点名称" align="center" />
<el-table-column prop="default_value" label="默认值" align="center">
<template slot-scope="scope">
{{ is_or_no(scope.row.default_value, scope.row.data_type) }}
</template>
</el-table-column>
<el-table-column prop="data_type" label="默认值数据类型">
<template slot-scope="scope">
{{ dict.label.ITEM_VALUE_TYPE[scope.row.data_type] }}
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" align="center" />
<el-table-column align="center" label="操作" width="160" fixed="right">
<template scope="scope">
<el-button type="danger" class="filter-item" size="mini" icon="el-icon-delete" @click.native.prevent="deleteRow(scope.$index, tableData)" />
</template>
</el-table-column>
</el-table>
<AddDtl :dialog-show.sync="dtlShow" @tableChanged="tableChanged" />
</el-dialog>
</template>
<script>
import CRUD, { crud } from '@crud/crud'
import crudDevice from '@/api/wms/pdm/device'
import AddDtl from '@/views/wms/pdm/device/AddDtl'
export default {
name: 'CopyDialog',
components: { AddDtl },
dicts: ['ITEM_VALUE_TYPE'],
mixins: [crud()],
props: {
dialogShow: {
type: Boolean,
default: false
},
openParam: {
type: Object
}
},
data() {
return {
dialogVisible: false,
nowindex: '',
nowrow: null,
dtlShow: false,
materShow: false,
workList: [],
form: {
device_id: '',
device_code: '',
device_name: '',
device_model: '',
workprocedure_id: '',
extend_code: '',
remark: '',
is_active: ''
},
tableData: [],
rules: {
device_code: [
{ required: true, message: '设备编码不能为空', trigger: 'blur' }
],
device_name: [
{ required: true, message: '设备名称不能为空', trigger: 'blur' }
]
}
}
},
watch: {
dialogShow: {
handler(newValue) {
this.dialogVisible = newValue
}
}
},
methods: {
is_or_no(val, type) {
if (type === '01' && val === '1') {
return '是'
} else if (type === '01' && val === '0') {
return '否'
} else {
return val
}
},
handleCurrentChange(current) {
if (current !== null) {
this.nowrow = current
} else {
this.nowrow = null
}
},
async queryMater(index, row) {
this.materShow = true
this.nowindex = index
this.nowrow = row
},
getWorkprocedure() {
crudDevice.getWorkprocedure().then(res => {
this.workList = res
})
},
open() {
this.getWorkprocedure()
crudDevice.getItemByDevice({ device_id: this.form.device_id }).then(res => {
this.tableData = res
// 将明细变成不可编辑
for (let i = 0; i < this.tableData.length; i++) {
const row = this.tableData[i]
this.tableData.splice(i, 1, row)
}
})
},
close() {
this.$emit('AddChanged')
},
tableChanged(rows) {
var array = ([...this.tableData, ...rows])
this.tableData = this.unique(array)
},
unique(arr) {
// 根据唯一标识item_code来对数组进行过滤
// 定义常量 res,值为一个Map对象实例
const res = new Map()
// 返回arr数组过滤后的结果结果为一个数组 过滤条件是如果res中没有某个键就设置这个键的值为1
return arr.filter((arr) => !res.has(arr.item_code) && res.set(arr.item_code, 1))
},
setForm(row) {
this.dialogVisible = true
this.form = row
this.form.device_code = ''
this.form.device_name = ''
},
addrow() {
this.dtlShow = true
},
deleteRow(index, rows) {
rows.splice(index, 1)
this.nowindex = ''
this.nowrow = null
},
saveCheck(form) {
if (this.tableData.length === 0) {
this.crud.notify('请至少选择一条明细', CRUD.NOTIFICATION_TYPE.INFO)
return false
}
this.$refs[form].validate((valid) => {
if (valid) {
crudDevice.copyAdd({ 'row': this.form, 'rows': this.tableData }).then(res => {
this.crud.notify('操作成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
this.dialogVisible = false
})
}
})
}
}
}
</script>
<style>
.crud-opts2 {
padding: 0 0;
display: -webkit-flex;
display: flex;
align-items: center;
}
.crud-opts2 .crud-opts-right2 {
margin-left: auto;
padding: 4px 4px;
}
.input-with-select {
background-color: #fff;
}
</style>