<template> <el-dialog :title="crud.status.title" append-to-body fullscreen :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0 || crud.status.view > 0" width="1200px" @open="open" @close="close" > <el-row v-show="crud.status.cu > 0" :gutter="20"> <el-col :span="20" style="border: 1px solid white"> <span /> </el-col> <el-col :span="4"> <span> <el-button icon="el-icon-check" size="mini" :loading="crud.cu === 2" type="primary" @click="crud.submitCU">保存</el-button> <el-button icon="el-icon-close" size="mini" type="info" @click="crud.cancelCU">关闭</el-button> </span> </el-col> </el-row> <el-form ref="form" style="border: 1px solid #cfe0df;margin-top: 10px;padding-top: 10px;" :inline="true" :model="form" :rules="rules" size="mini" label-width="85px" label-suffix=":"> <el-form-item label="单据号" prop="bill_code"> <label slot="label">单 据 号:</label> <el-input v-model="form.bill_code" disabled placeholder="系统生成" clearable style="width: 210px" /> </el-form-item> <el-form-item label="物料编号" prop="material_code"> <label slot="label">物料编号:</label> <el-input v-model="form.material_code" size="mini" style="width: 210px"> <el-button slot="append" icon="el-icon-plus" @click="queryMater()" /> </el-input> </el-form-item> <el-form-item label="物料名称" prop="material_name"> <label slot="label">物料名称:</label> <el-input v-model="form.material_name" size="mini" style="width: 210px" /> </el-form-item> <el-form-item label="外径" prop="outer_diameter"> <label slot="label">外 径:</label> <el-input v-model="form.outer_diameter" size="mini" style="width: 210px" /> </el-form-item> <el-form-item label="壁厚" prop="wall_thickness"> <label slot="label">壁 厚:</label> <el-input v-model="form.wall_thickness" size="mini" style="width: 210px" /> </el-form-item> <el-form-item label="物料总数" prop="qty"> <label slot="label">物料总数:</label> <el-input v-model="form.qty" size="mini" style="width: 210px" /> </el-form-item> <el-form-item label="明细数" prop="detail_count"> <label slot="label">明 细 数:</label> <el-input v-model="form.detail_count" size="mini" disabled style="width: 210px" /> </el-form-item> <el-form-item label="备注" prop="remark"> <label slot="label">备 注:</label> <el-input v-model="form.remark" style="width: 380px;" rows="2" type="textarea" :disabled="crud.status.view > 0" /> </el-form-item> </el-form> <!--如果想在工具栏加入更多按钮,可以使用插槽方式, slot = 'left' or 'right'--> <div class="crud-opts2" style="margin-bottom: 5px;"> <span class="crud-opts-right2"> <!--左侧插槽--> <slot name="left" /> <el-button slot="left" class="filter-item" type="warning" icon="el-icon-check" size="mini" :disabled="mater_btn" @click="insertdtl()" > 新增一行 </el-button> </span> </div> <!--表格渲染--> <el-table ref="table" :data="form.tableData" style="width: 100%;" border :header-cell-style="{background:'#f5f7fa',color:'#606266'}" > <el-table-column type="index" label="序号" width="55" align="center" /> <el-table-column prop="customer_code" label="客户编码" align="center"> <template scope="scope"> <el-input v-show="!scope.row.edit" v-model="scope.row.cust_code" size="mini"> <el-button slot="append" icon="el-icon-plus" @click="queryCustomer(scope.$index, scope.row)" /> </el-input> <span v-show="!scope.row.edit && mater_btn">{{ scope.row.custcode }}</span> <span v-show="scope.row.edit">{{ scope.row.cust_code }}</span> </template> </el-table-column> <el-table-column prop="customer_name" label="客户名称" align="center"> <template scope="scope"> <el-input v-show="!scope.row.edit" v-model="scope.row.cust_name" size="mini" /> <span v-show="scope.row.edit">{{ scope.row.cust_name }}</span> </template> </el-table-column> <el-table-column prop="detail_qty" label="客户数量" align="center"> <template scope="scope"> <el-input v-show="!scope.row.edit" v-model="scope.row.order_detail_qty" size="mini" /> <span v-show="scope.row.edit">{{ scope.row.order_detail_qty }}</span> </template> </el-table-column> <el-table-column prop="lettering_message" label="图标前刻字信息" align="center"> <template scope="scope"> <el-input v-show="!scope.row.edit" v-model="scope.row.lettering_message" size="mini" /> <span v-show="scope.row.edit">{{ scope.row.lettering_message }}</span> </template> </el-table-column> <el-table-column prop="lettering_icon" label="刻字图标" align="center"> <template scope="scope"> <el-select v-model="scope.row.lettering_icon" clearable class="filter-item" > <el-option v-for="item in iconType" :key="item.id" :label="item.label" :value="item.value" /> </el-select> </template> </el-table-column> <el-table-column prop="lettering_message2" label="图标后刻字信息" align="center"> <template scope="scope"> <el-input v-show="!scope.row.edit" v-model="scope.row.lettering_message2" size="mini" /> <span v-show="scope.row.edit">{{ scope.row.lettering_message2 }}</span> </template> </el-table-column> <el-table-column prop="strap_number" label="捆扎每包数量" align="center"> <template scope="scope"> <el-input v-show="!scope.row.edit" v-model="scope.row.strap_number" size="mini" /> <span v-show="scope.row.edit">{{ scope.row.strap_number }}</span> </template> </el-table-column> <el-table-column prop="labeling_template" label="贴标模板" align="center"> <template scope="scope"> <el-select v-model="scope.row.labeling_template" clearable class="filter-item" > <el-option v-for="item in templateList" :key="item.template_id" :label="item.template_name" :value="item.template_code" /> </el-select> </template> </el-table-column> <el-table-column prop="priority" label="优先级" align="center"> <template scope="scope"> <el-input v-show="!scope.row.edit" v-model="scope.row.priority" size="mini" /> <span v-show="scope.row.edit">{{ scope.row.priority }}</span> </template> </el-table-column> <el-table-column v-if="crud.status.cu > 0" align="center" label="操作" width="170" fixed="right"> <template scope="scope"> <el-button type="danger" class="filter-item" size="mini" icon="el-icon-delete" @click.native.prevent="deleteRow(scope.$index, form.tableData)" /> <el-button v-show="!scope.row.edit" type="primary" class="filter-item" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" >编辑 </el-button> <el-button v-show="scope.row.edit" type="success" class="filter-item" size="mini" icon="el-icon-check" @click="handleEdit(scope.$index, scope.row)" >完成 </el-button> </template> </el-table-column> </el-table> <MaterDtl :dialog-show.sync="materShow" :is-single="true" @tableChanged2="tableChanged2" /> <CustomerDtl :dialog-show.sync="customerShow" :is-single="true" @tableChanged3="tableChanged3" /> </el-dialog> </template> <script> import crudProduceshiftorder from '@/api/acs/order/order' import MaterDtl from '@/views/acs/order/MaterDialog' import CustomerDtl from '@/views/acs/order/CustomerDialog' import CRUD, { crud, form } from '@crud/crud' const defaultForm = { tableData: [], order_code: null, material_code: null, material_spec: null, outer_diameter: null, wall_thickness: null } export default { name: 'AddDialog', components: { MaterDtl, CustomerDtl }, mixins: [crud(), form(defaultForm)], dicts: [], props: { dialogShow: { type: Boolean, default: false }, dialogShow2: { type: Boolean, default: false }, bussConfig: { type: Object }, openParam: { type: Object } }, data() { return { dialogVisible: false, dialogVisible2: false, materShow: false, customerShow: false, dtlShow: false, templateList: [], opendtlParam: null, bill_btn: false, mater_btn: false, materType: '', order_detail_qty: '', storlist: [], iconType: [ { label: '普通', value: '1' }, { label: '香港', value: '2' } ], billtypelist: [], rules: { material_code: [ { required: true, message: '物料编码不能为空', trigger: 'blur' } ], material_name: [ { required: true, message: '物料名称不能为空', trigger: 'blur' } ], material_spec: [ { required: true, message: '物料规格不能为空', trigger: 'blur' } ], qty: [ { required: true, message: '工单数量为空', trigger: 'blur' } ] } } }, watch: { dialogShow: { handler(newValue, oldValue) { this.dialogVisible = newValue } }, dialogShow2: { handler(newValue, oldValue) { this.dialogVisible2 = newValue } } }, created() { debugger crudProduceshiftorder.selectTemplateList().then(data => { this.templateList = data }) }, methods: { open() { }, close() { this.form.material_code = null this.form.material_id = null this.form.material_name = null this.form.material_spec = null this.form.wall_thickness = null this.form.outer_diameter = null this.form.length = null this.form.detail_count = null this.form.qty = null this.$emit('AddChanged') }, tableChanged2(row) { this.form.material_code = row.material_code this.form.material_id = row.material_id this.form.material_name = row.material_name this.form.material_spec = row.material_spec this.form.wall_thickness = row.wall_thickness this.form.outer_diameter = row.outer_diameter this.form.length = row.length }, tableChanged3(row) { debugger this.nowrow.cust_code = row.cust_code this.nowrow.cust_id = row.cust_id this.nowrow.cust_name = row.cust_name this.form.tableData.splice(this.nowindex, 1, this.nowrow) // 通过splice 替换数据 触发视图更新 this.$forceUpdate() }, [CRUD.HOOK.afterToEdit]() { // 编辑时,给按钮的状态赋值 // 获取入库单明细 crudProduceshiftorder.getDtl({ 'order_id': this.form.order_id }).then(res => { this.form.tableData = res // 将明细变成不可编辑 for (let i = 0; i < this.form.tableData.length; i++) { const row = this.form.tableData[i] row.edit = true this.form.tableData.splice(i, 1, row) } }) }, [CRUD.HOOK.afterToView]() { crudProduceshiftorder.getDtl({ 'order_id': this.form.order_id }).then(res => { this.form.tableData = res // 将明细变成不可编辑 for (let i = 0; i < this.form.tableData.length; i++) { const row = this.form.tableData[i] row.edit = true this.form.tableData.splice(i, 1, row) } }) }, async queryMater(index, row) { this.materShow = true this.nowindex = index this.nowrow = row }, async queryCustomer(index, row) { this.customerShow = true this.nowindex = index this.nowrow = row }, async insertdtl() { this.form.tableData.push({ material_code: '', priority: '1' }) this.form.detail_count = this.form.tableData.length }, deleteRow(index, rows) { this.form.total_qty = parseFloat(this.form.total_qty) - parseFloat(rows[index].plan_qty) rows.splice(index, 1) this.form.detail_count = this.form.tableData.length } } } </script> <style> .crud-opts2 { padding: 4px 0; display: -webkit-flex; display: flex; align-items: center; } .crud-opts2 .crud-opts-right2 { margin-left: auto; } </style>