<template>
|
<div class="add-sales-details">
|
<el-dialog
|
:close-on-click-modal="false"
|
:visible.sync="editRow.visible"
|
width="54rem"
|
:before-close="handleClose"
|
append-to-body
|
custom-class="apply-materials-dialog"
|
>
|
<div slot="title" class="tac drawerHeader">
|
{{ editCommonConfig.title }}
|
<div v-if="editCommonConfig.infomation.status == 4" class="noPass-view">
|
审核不通过理由：{{ editCommonConfig.infomation.reson }}
|
</div>
|
</div>
|
<el-form ref="form" class="form-box" :model="form" :rules="rules" label-position="right" label-width="115px">
|
<!-- 信息 -->
|
<div class="basic-info">
|
<!-- 产品管理 -->
|
<div class="basic-info-title" style="display: flex">产品信息</div>
|
<div class="product-view">
|
<TableCommonView
|
element-loading-text="数据加载中，请耐心等待~"
|
:table-list="productTableList"
|
@selTableCol="selTableCol"
|
v-if="tableShow"
|
:colOpenShow="false"
|
>
|
<template slot="tableLeft">
|
<el-table-column prop="materialNumber" min-width="180" label="产品编号">
|
<template slot-scope="scope">
|
<span class="common-sel-box" v-if="!isView">
|
<el-input
|
style="width: calc(100% - 60px)"
|
size="small"
|
readonly
|
@focus="selClientTableClick(scope.row, scope)"
|
v-model="scope.row.materialNumber"
|
placeholder="请选择"
|
></el-input>
|
<span
|
v-if="scope.row.materialNumber"
|
class="common-select-btn margin_left_5px"
|
@click="selClientTableClick(scope.row, scope)"
|
>
|
<i class="el-icon-edit" title="编辑"></i>
|
</span>
|
<span
|
v-else
|
class="common-sel-icon color_blue cursor_pointer margin_left_5px"
|
@click.stop="addProductClick(scope)"
|
>
|
<i class="el-icon-circle-plus-outline" title="选择"></i>
|
</span>
|
<span
|
v-if="scope.row.materialNumber"
|
class="common-select-btn color_red cursor_pointer margin_left_5px"
|
@click.stop="deleteTableRow(scope.row, scope)"
|
>
|
<i class="el-icon-remove-outline" title="清除"></i>
|
</span>
|
</span>
|
<span v-else>{{ scope.row.materialNumber }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="materialName" show-overflow-tooltip label="产品名称"> </el-table-column>
|
</template>
|
<template slot="tableButton">
|
<el-table-column prop="amount" label="数量">
|
<template slot-scope="scope">
|
<el-input
|
style="width: 100%"
|
v-if="!isView"
|
size="small"
|
v-model="scope.row.amount"
|
placeholder="请输入数量"
|
></el-input>
|
<span v-else>{{ scope.row.amount }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="60" fixed="right" v-if="editRow.title != '查看'">
|
<template slot-scope="scope">
|
<el-button
|
@click.stop="deleteTableClick(scope.row, scope)"
|
type="text"
|
:disabled="productTableList.tableInfomation.length == 1 ? true : false"
|
size="small"
|
>刪除</el-button
|
>
|
</template>
|
</el-table-column>
|
</template>
|
</TableCommonView>
|
</div>
|
</div>
|
<div class="table-btn" v-if="!isView">
|
<el-button size="small" type="primary" @click="addProductClick('新增')">新增</el-button>
|
<!-- <el-button size="small" type="primary" disabled>导入明细</el-button> -->
|
<el-button size="small" type="primary" @click="emptyProductClick">清空</el-button>
|
</div>
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
<template v-if="isView">
|
<el-button @click="editRow.visible = false">关闭</el-button>
|
</template>
|
<template v-else>
|
<el-button @click="editRow.visible = false">取消</el-button>
|
<el-button type="primary" :loading="isAddloading" @click="saveClick()">确定</el-button>
|
</template>
|
</div>
|
|
<!-- 产品 -->
|
<SelectCommonDialog
|
v-if="editSelCommonConfig.editVisible"
|
:edit-common-config="editSelCommonConfig"
|
@selClient="addClient"
|
@getSelectArray="getSelectArray"
|
/>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { saveMaterialApply } from "@/api/orderManageModule/orderManage"
|
import SelectCommonDialog from "@/views/other/commonDialog/SelectCommonDialog"
|
export default {
|
name: "AddSalesDetailsDialog",
|
props: {
|
editCommonConfig: {
|
type: Object,
|
default: () => {
|
return {
|
visible: false,
|
title: "物料申请",
|
infomation: {}
|
}
|
}
|
}
|
},
|
components: { SelectCommonDialog },
|
data() {
|
return {
|
editRow: this.editCommonConfig,
|
form: {},
|
rules: {},
|
productTableList: {},
|
showcol: ["规格", "型号"],
|
isView: this.editCommonConfig.title === "查看",
|
pickerOptions: {
|
disabledDate(time) {
|
return time.getTime() < Date.now() - 8.64e7
|
}
|
},
|
pickerOptionsBefore: {
|
disabledDate(time) {
|
return time.getTime() > Date.now()
|
}
|
},
|
editSelCommonConfig: {
|
editVisible: false,
|
isSelectBox: false,
|
title: "",
|
infomation: {}
|
},
|
scopeRow: {},
|
tableShow: true,
|
isAddloading: false,
|
productIndex: 0
|
}
|
},
|
created() {
|
this.setTable()
|
this.setTableForm()
|
},
|
watch: {
|
"editClientManageConfig.visible"(val) {
|
if (val) {
|
this.setTableForm()
|
}
|
}
|
},
|
methods: {
|
setTable() {
|
this.productTableList = {
|
tableInfomation: [],
|
selectIndex: true,
|
showcol: this.showcol,
|
allcol: [],
|
tableColumn: this.setTableColumn(this.showcol)
|
}
|
let allcol = []
|
for (let i = 0; i < this.productTableList.tableColumn.length; i++) {
|
if (!this.productTableList.tableColumn[i].default) {
|
const label = this.productTableList.tableColumn[i].label
|
allcol.push(label)
|
}
|
}
|
this.productTableList.allcol = allcol
|
},
|
setTableColumn(showcol) {
|
console.log(showcol)
|
let tableColumn = [
|
{
|
label: "计量单位",
|
prop: "unit",
|
isShowColumn: true,
|
default: true
|
},
|
{
|
label: "产品规格",
|
prop: "specs",
|
isShowColumn: true,
|
default: true
|
},
|
{
|
label: "型号",
|
prop: "type",
|
isShowColumn: true,
|
default: true
|
}
|
]
|
return tableColumn
|
},
|
selTableCol(val) {
|
this.showcol = val
|
this.productTableList.tableColumn = this.setTableColumn(val)
|
},
|
addProductClick(scope) {
|
if (scope !== "新增") {
|
console.log("111")
|
this.productTableList.tableInfomation.splice(scope.$index, 1)
|
}
|
this.editSelCommonConfig.title = "产品名称"
|
this.editSelCommonConfig.isSelectBox = true
|
this.editSelCommonConfig.editVisible = true
|
},
|
deleteTableRow(row, scope) {
|
let item = {
|
outsourcingOrderNumber: "",
|
materialNumber: "",
|
materialName: "",
|
amount: row.amount ? row.amount : 1,
|
specs: "",
|
type: "",
|
unit: ""
|
}
|
this.productTableList.tableInfomation.splice(Number(scope.$index), 1, item)
|
},
|
deleteTableClick(row, scope) {
|
this.productTableList.tableInfomation.splice(scope.$index, 1)
|
},
|
addClient(row) {
|
let item = {
|
outsourcingOrderNumber: this.editRow.infomation.outsourcingOrderNumber,
|
materialNumber: row.id,
|
materialName: row.name,
|
amount: 1,
|
unit: "",
|
type: row.type ? row.type : "",
|
specs: row.specs ? row.specs : ""
|
}
|
this.productTableList.tableInfomation.splice(Number(this.scopeRow.$index), 1, item)
|
},
|
selClientTableClick(row, scope) {
|
this.scopeRow = scope
|
this.editSelCommonConfig.title = "产品名称"
|
this.editSelCommonConfig.isSelectBox = false
|
this.editSelCommonConfig.editVisible = true
|
},
|
setTableForm() {
|
if (this.editCommonConfig.title === "添加") {
|
this.productTableList.tableInfomation = [
|
{
|
outsourcingOrderNumber: this.editRow.infomation.outsourcingOrderNumber,
|
materialNumber: "",
|
materialName: "",
|
amount: 1,
|
specs: "",
|
type: "",
|
unit: ""
|
}
|
]
|
} else {
|
this.productTableList.tableInfomation = this.editCommonConfig.infomation.products
|
}
|
},
|
// 判断是否是数字
|
isNumber(value) {
|
if (value == undefined || value == null || (!value && value != 0)) {
|
this.$message.error("请输入有效数字")
|
return false
|
} else {
|
let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,5})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
|
if (!reg.test(value) || value == 0) {
|
this.$message.error("请填写大于0的5位小数")
|
return false
|
}
|
}
|
return true
|
},
|
// 保存
|
saveClick() {
|
let tableData = this.productTableList.tableInfomation
|
if (tableData.length == 0) {
|
this.$message.error("请至少选择一个产品")
|
return true
|
}
|
for (let i = 0; i < tableData.length; i++) {
|
if (!tableData[i].materialNumber) {
|
this.$message({
|
message: "请填写完成！",
|
type: "warning"
|
})
|
return true
|
} else if (!this.isNumber(tableData[i].amount)) {
|
return true
|
}
|
}
|
const params = this.saveParams()
|
console.log(params)
|
this.isAddloading = true
|
saveMaterialApply(params).then((res) => {
|
if (res.code === 200) {
|
this.editRow.visible = false
|
this.$message.success(this.editRow.title + "成功！")
|
this.$emit("reRreshData")
|
}
|
this.isAddloading = false
|
})
|
},
|
saveParams() {
|
let commonParam = {
|
applyList: this.productTableList.tableInfomation
|
}
|
let params = {}
|
params = { ...commonParam }
|
return params
|
},
|
|
handleClose() {
|
this.editRow.visible = false
|
},
|
getIsPush(data, productId) {
|
let isPush = true
|
if (data.length > 0) {
|
for (let j in data) {
|
if (productId == data[j].productId) {
|
isPush = false
|
}
|
}
|
}
|
return isPush
|
},
|
// 新增方式修改
|
getSelectArray(arr) {
|
let isPush = true
|
if (arr.length > 0) {
|
for (let i in arr) {
|
let item = {
|
outsourcingOrderNumber: this.editRow.infomation.outsourcingOrderNumber,
|
materialNumber: arr[i].number,
|
materialName: arr[i].name,
|
amount: 1,
|
unit: arr[i].unit ? arr[i].unit : 1,
|
type: arr[i].type ? arr[i].type : "",
|
specs: arr[i].specs ? arr[i].specs : ""
|
}
|
console.log(arr, "8989")
|
isPush = this.getIsPush(this.productTableList.tableInfomation, arr[i].number)
|
if (isPush) {
|
this.productTableList.tableInfomation.splice(this.productTableList.tableInfomation.length, 0, item)
|
}
|
}
|
}
|
if (!isPush) {
|
this.$message({
|
message: "不能添加相同的产品！",
|
type: "warning"
|
})
|
}
|
},
|
// 产品清空
|
emptyProductClick() {
|
this.productTableList.tableInfomation = [
|
{
|
outsourcingOrderNumber: this.editRow.infomation.outsourcingOrderNumber,
|
materialNumber: "",
|
materialName: "",
|
amount: 1,
|
specs: "",
|
type: "",
|
unit: ""
|
}
|
]
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
::v-deep {
|
.apply-materials-dialog .el-dialog__header {
|
background: #fff;
|
position: relative;
|
.noPass-view {
|
position: absolute;
|
top: 13px;
|
left: 50%;
|
font-size: 14px;
|
color: #ff0000;
|
}
|
}
|
.apply-materials-dialog .el-dialog__body {
|
padding: 0px 0 0 0 !important;
|
.form-box {
|
height: 54vh;
|
padding-bottom: 45px;
|
position: relative;
|
overflow: hidden;
|
.el-form-item {
|
width: 50%;
|
float: left;
|
}
|
}
|
.table-btn {
|
position: absolute;
|
bottom: 0px;
|
left: 10px;
|
}
|
.basic-info {
|
height: 100%;
|
overflow: auto;
|
.product-view {
|
width: calc(100% - 20px);
|
height: calc(100% - 42px);
|
margin: 0 auto;
|
}
|
|
.basic-info-title {
|
background-color: #f4f8fe;
|
padding-left: 10px;
|
font-size: 15px;
|
font-weight: bold;
|
color: #666;
|
height: 42px;
|
line-height: 42px;
|
}
|
.basic-info-view {
|
width: calc(100% - 30px);
|
margin-top: 10px;
|
padding-right: 30px;
|
overflow: hidden;
|
.common-select-btn {
|
margin-left: 5px;
|
font-size: 16px;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
.el-dialog__footer {
|
width: 100%;
|
height: 55px;
|
line-height: 55px;
|
background-color: #fff;
|
padding: 0px 20px 0;
|
text-align: right;
|
box-sizing: border-box;
|
border-top: 0px solid #dadee5;
|
position: relative;
|
.footer-left {
|
position: absolute;
|
top: 0px;
|
left: 20px;
|
}
|
}
|
}
|
</style>
|
