页面vue扩展(如gridHeader,modelHeader等)
1.vue表单(volForm)(必填不生效注意formOptions配置要是text vol-form支持的类型)
<template>
<vol-box
:lazy="true"
v-model="model"
title="产品装箱规则设定"
:height="600"
:width="700"
:padding="20"
>
<vol-form
ref="form"
:labelWidth="150"
:load-key="true"
:formFields="fields"
:formRules="formOptions"
>
</vol-form>
<div class="form-btns">
<el-button type="primary" @click="submit">提交</el-button>
<el-button type="primary" @click="reset" plain>重置</el-button>
</div>
</vol-box>
</template>
<script>
import VolForm from "@/components/basic/VolForm.vue";
import VolBox from "@/components/basic/VolBox.vue";
export default {
components: {
"vol-form": VolForm, "vol-box": VolBox },
data() {
return {
model: false,
tabsModel: "0",
fields: {
WorkOrderCode: null,
computerNum: null,
startNo: null,
packNum: null,
eachPackNum: null,
outBoxNum: null,
},
formOptions: [
[
{
field: "WorkOrderCode",
title: "生产工单",
type: "select",
required: true,
readonly: false,
data: [],
dataKey: "boxWorkOrderCode",
onChange: (val, formData) => {
console.log(val);
this.getBackEndStartNoByWo(val);
this.getBackEndOutBoxNumByWo(val);
},
},
],
[
{
field: "computerNum",
title: "计算末位数值位数",
type: "text",
required: true,
readonly: false,
},
],
[
{
field: "startNo",
title: "资产编码起始",
type: "text",
required: true,
readonly: false,
},
],
[
{
field: "packNum",
title: "产品数量",
type: "text",
required: true,
readonly: false,
extra: {
icon: "el-icon-chat-dot-round",
style: "color:#03A9F4",
text: "已绑产品数量",
},
},
],
[
{
field: "eachPackNum",
title: "每箱产品数量",
type: "text",
required: true,
readonly: false,
},
],
[
{
field: "outBoxNum",
title: "外包装箱标贴批号",
type: "text",
required: true,
readonly: false,
},
],
],
tables: [],
tabs: [],
};
},
methods: {
getBackEndStartNoByWo(val) {
let Url = "api/Production_BoxList/getBackEndStartNoByWo?wo="+val;
this.http.post(Url, {
}, true).then((result) => {
var packNumOption = this.$refs.form.formRules[3][0];
if (result.status == true) {
this.fields.startNo = result.data.maxSnNo;
packNumOption.extra.text = `已绑数量 (${
result.data.totalBoxQty})`;
} else {
this.fields.startNo = result.message;
if (packNumOption) {
packNumOption.extra.text = result.message;
}
}
});
},
getBackEndOutBoxNumByWo(val) {
let Url = "api/Production_BoxList/getBackEndOutBoxNumByWo?wo="+val;
this.http.post(Url, {
}, true).then((result) => {
if (result.status == true) {
this.fields.outBoxNum = result.data;
} else {
this.fields.outBoxNum = result.message;
}
});
},
openDemo() {
this.fields.computerNum = 21;
this.fields.eachPackNum = 20;
this.fields.WorkOrderCode = null;
this.fields.startNo = null;
this.fields.packNum = null;
this.fields.outBoxNum = null;
this.$Message.success("请先选择工单");
this.model = true;
},
submit() {
if (this.fields.WorkOrderCode == null) {
this.$Message.error("请先选择工单");
this.fields.startNo = null;
this.fields.outBoxNum = null;
} else {
var Url = "api/Production_BoxList/generateBoxBandSnno";
this.$refs.form.validate((valid) => {
if (valid) {
this.http.post(Url, this.fields, true).then((result) => {
if (result.success) {
this.$Message.success("生成成功");
} else {
this.$Message.error("失败" + result.msgContent);
}
});
} else {
console.log("校验未通过");
return false;
}
});
}
},
reset() {
console.log(this.$refs.form);
this.$refs.form.reset();
},
download() {
this.$Message.info("111");
},
},</