356 lines
11 KiB
Vue
356 lines
11 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 搜索部分 -->
|
||
<div>
|
||
<el-form :model="search" inline v-show="search.showSearch">
|
||
<el-form-item label="产品编码 ">
|
||
<el-input v-model="search.productCode" placeholder="输入产品编号"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="产品名称 ">
|
||
<el-input v-model="search.productName" placeholder="输入产品名称"></el-input>
|
||
</el-form-item>
|
||
<el-button icon="el-icon-search" circle @click="getList"></el-button>
|
||
</el-form>
|
||
</div>
|
||
<div>
|
||
<el-row :gutter="2">
|
||
<el-col :span="1.5">
|
||
<el-button type="primary" size="small" @click="addItem">新增</el-button>
|
||
</el-col>
|
||
<right-toolbar :showSearch.sync="search.showSearch" @queryTable="getList"></right-toolbar>
|
||
</el-row>
|
||
<el-table
|
||
:data="table.bomList"
|
||
style="width: 100%; margin-bottom: 20px"
|
||
row-key="id"
|
||
border
|
||
default-expand-all
|
||
:tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
|
||
>
|
||
<el-table-column prop="productCode" label="产品编码" sortable width="180"> </el-table-column>
|
||
<el-table-column prop="productName" label="产品名称" sortable> </el-table-column>
|
||
<el-table-column prop="productType" label="零件类型"> </el-table-column>
|
||
<el-table-column prop="productPosition" label="来源"> </el-table-column>
|
||
<el-table-column prop="requireNum" label="需求数量"> </el-table-column>
|
||
<el-table-column prop="unitId" label="单位"> </el-table-column>
|
||
|
||
<el-table-column label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" @click="updataItem(scope.$index, scope.row)">编辑</el-button>
|
||
<el-button size="mini" type="danger" @click="deleteItem(scope.$index, scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<vxe-pager
|
||
background
|
||
:current-page.sync="pagination.pageNum"
|
||
:page-size.sync="pagination.pageSize"
|
||
:total="pagination.total"
|
||
:layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
|
||
@page-change="getList"
|
||
>
|
||
</vxe-pager>
|
||
</div>
|
||
|
||
<!-- 弹窗-- 修改和删除 -->
|
||
<el-dialog :title="DMLdialog.title" :visible.sync="DMLdialog.visiable" width="600px" append-to-body>
|
||
<el-form ref="DMLdialog" :model="DMLdialog.form" label-width="150px" label-position="left" :rules="DMLdialog.rules">
|
||
<el-form-item label="父级产品code " prop="parentProductId" id="test">
|
||
<el-select
|
||
id="autocomplete"
|
||
v-model="DMLdialog.form.parentProductId"
|
||
filterable
|
||
remote
|
||
clear
|
||
placeholder="请输入父级产品"
|
||
:remote-method="ParentProduct_querySearchAsync"
|
||
:loading="DMLdialog.loading"
|
||
>
|
||
<el-option label="无" :value="0"></el-option>
|
||
<el-option
|
||
v-for="item in DMLdialog.ParentProductOptions"
|
||
:key="item.id"
|
||
:label="item.productCode + '|' + item.productName"
|
||
:value="item.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="产品编码 " prop="productCode">
|
||
<el-input v-model="DMLdialog.form.productCode" placeholder="输入产品编码" :disabled="DMLdialog.isUpdate"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="产品名称 " prop="productName">
|
||
<el-input v-model="DMLdialog.form.productName" placeholder="输入产品名称"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="安全库存 " prop="safetyStock">
|
||
<el-input v-model="DMLdialog.form.safetyStock" placeholder="输入产品安全库存" type="Number"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="位置 " prop="productPosition">
|
||
<el-input v-model="DMLdialog.form.productPosition" placeholder="输入安全位置"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="需求数量 " prop="requireNum">
|
||
<el-input v-model="DMLdialog.form.requireNum" placeholder="输入需求数量" type="Number"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="数量单位 " prop="unitId">
|
||
<el-select v-model="DMLdialog.form.unitId" placeholder="选择需求数量单位">
|
||
<el-option v-for="item in DMLdialog.unitList" :key="item.id" :label="item.measureCode" :value="item.measureId"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getBomList, getBOMQuery, insertbom, updatebom, delbom, getunitList } from '@/api/basisManagement/bom.js'
|
||
export default {
|
||
name: 'bom',
|
||
data() {
|
||
return {
|
||
//搜索框配置
|
||
search: {
|
||
productCode: '',
|
||
productName: '',
|
||
showSearch: true,
|
||
},
|
||
//表格
|
||
table: {
|
||
loading: true,
|
||
bomList: [],
|
||
},
|
||
//分页
|
||
pagination: {
|
||
total: 0,
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
},
|
||
//新增修改数据项配置
|
||
DMLdialog: {
|
||
title: '',
|
||
visiable: false,
|
||
form: {
|
||
productCode: '',
|
||
productName: '',
|
||
productType: '',
|
||
safetyStock: 1000,
|
||
productPosition: '',
|
||
requireNum: 1000,
|
||
unitId: null,
|
||
parentProductId: '',
|
||
},
|
||
unitList: [],
|
||
rules: {
|
||
productCode: [{ required: true, message: '产品编码不能为空', trigger: 'blur' }],
|
||
productName: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
|
||
},
|
||
loading: false,
|
||
ParentProductOptions: [], //父产品列表
|
||
isUpdate: false, // 更新时，产品code不可修改
|
||
},
|
||
//修改按钮
|
||
updateDisable: true,
|
||
//删除按钮
|
||
delDisable: true,
|
||
flag: 'update', //区分修改和删除
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getList()
|
||
this.getUnitOptionList()
|
||
this.ParentProduct_querySearchAsync('')
|
||
},
|
||
methods: {
|
||
//获取表格数据
|
||
getList() {
|
||
const query = { ...this.search, ...this.pagination }
|
||
delete query.showSearch
|
||
getBomList(query).then((res) => {
|
||
if (res.code == 200) {
|
||
this.table.loading = false
|
||
this.pagination.total = res.data.item1
|
||
this.table.bomList = res.data.item2
|
||
}
|
||
})
|
||
},
|
||
//获取车间
|
||
getWorkshopOption() {
|
||
getWorkshopList().then((res) => {
|
||
if (res.code == 200) this.DMLdialog.workshopOption = res.data
|
||
})
|
||
},
|
||
|
||
//行更新
|
||
handleUpdate(row) {},
|
||
//行删除
|
||
handleDelete(row) {},
|
||
selectChangeEvent({ checked }) {
|
||
const records = this.$refs.xTable1.getCheckboxRecords()
|
||
if (records.length == 1) {
|
||
this.updateDisable = false
|
||
} else {
|
||
this.updateDisable = true
|
||
}
|
||
if (records.length > 0) {
|
||
this.delDisable = false
|
||
} else {
|
||
this.delDisable = true
|
||
}
|
||
},
|
||
//新增按钮
|
||
addItem() {
|
||
this.DMLdialog.title = '新增'
|
||
this.DMLdialog.visiable = true
|
||
this.flag = 'add'
|
||
},
|
||
//新增确认
|
||
submitForm() {
|
||
if (this.flag == 'update') {
|
||
updatebom(this.DMLdialog.form).then((res) => {
|
||
if (res.code == 200 && res.data == 1) {
|
||
this.$notify.success('修改成功')
|
||
|
||
this.DMLdialog.visiable = false
|
||
} else {
|
||
this.$notify.error('修改失败')
|
||
}
|
||
this.getList()
|
||
this.reset()
|
||
this.DMLdialog.isUpdate = false
|
||
})
|
||
} else if (this.flag == 'add') {
|
||
this.$refs['DMLdialog'].validate((valid) => {
|
||
if (valid) {
|
||
insertbom(this.DMLdialog.form).then((res) => {
|
||
if (res.code == 200 && res.data == 1) {
|
||
this.$notify.success('新增成功')
|
||
} else {
|
||
this.$notify.error('新增失败')
|
||
}
|
||
this.getList()
|
||
this.DMLdialog.visiable = false
|
||
this.reset()
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
cancel() {
|
||
this.DMLdialog.visiable = false
|
||
this.reset()
|
||
this.DMLdialog.isUpdate = false
|
||
},
|
||
reset() {
|
||
this.DMLdialog.form = {
|
||
productCode: '',
|
||
productName: '',
|
||
productType: '',
|
||
safetyStock: 1000,
|
||
productPosition: '',
|
||
requireNum: 1000,
|
||
unitId: null,
|
||
parentProductId: '',
|
||
}
|
||
|
||
this.resetForm('DMLdialog')
|
||
},
|
||
//修改事件
|
||
updataItem(index, row) {
|
||
console.log(row)
|
||
this.DMLdialog.title = '修改'
|
||
this.DMLdialog.visiable = true
|
||
this.flag = 'update'
|
||
this.DMLdialog.isUpdate = true
|
||
this.DMLdialog.form.productCode = row.productCode
|
||
this.DMLdialog.form.productName = row.productName
|
||
this.DMLdialog.form.productType = row.productType
|
||
this.DMLdialog.form.safetyStock = row.safetyStock
|
||
this.DMLdialog.form.productPosition = row.productPosition
|
||
this.DMLdialog.form.requireNum = row.requireNum
|
||
this.DMLdialog.form.unitId = row.unitId
|
||
this.DMLdialog.form.parentProductId = row.parentProductId
|
||
},
|
||
//删除事件
|
||
deleteItem(index, row) {
|
||
this.$modal
|
||
.confirm('是否确认删除产品名称为"' + row.productName + '"的数据项？')
|
||
.then(function () {
|
||
const array = []
|
||
array.push(row.id)
|
||
return delbom(array)
|
||
})
|
||
.then(() => {
|
||
this.getList()
|
||
this.$modal.msgSuccess('删除成功')
|
||
})
|
||
.catch(() => {})
|
||
},
|
||
// 父级产品远程搜索
|
||
ParentProduct_querySearchAsync(queryString) {
|
||
|
||
if (queryString != '') this.DMLdialog.loading = true
|
||
getBOMQuery({ queryString: queryString }).then((res) => {
|
||
if (res.code == 200) {
|
||
this.DMLdialog.loading = false
|
||
const result = []
|
||
if (res.data.length > 0) {
|
||
res.data.forEach((element) => {
|
||
result.push({ id: element.id, productCode: element.productCode, productName: element.productName })
|
||
})
|
||
}
|
||
this.DMLdialog.ParentProductOptions = result
|
||
}
|
||
})
|
||
},
|
||
|
||
// 获取 unit
|
||
getUnitOptionList() {
|
||
getunitList().then((res) => {
|
||
if (res.code == 200) {
|
||
const result = []
|
||
res.data.forEach((item, index) => {
|
||
result.push({
|
||
id: index,
|
||
measureId: item.measureId,
|
||
measureCode: item.measureCode,
|
||
})
|
||
})
|
||
this.DMLdialog.unitList = result
|
||
} else {
|
||
this.$notify.warning('code:' + res.code)
|
||
}
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.delred {
|
||
::v-deep .el-icon-delete {
|
||
color: #f56c6c;
|
||
}
|
||
|
||
::v-deep span {
|
||
color: #f56c6c;
|
||
}
|
||
}
|
||
#test {
|
||
::v-deep .el-autocomplete {
|
||
width: 100%;
|
||
}
|
||
}
|
||
::v-deep .el-select {
|
||
width: 100%;
|
||
}
|
||
</style>
|