update order--edit
This commit is contained in:
bovenliggende
5961000f53
commit
7f7e9d3b85
@ -37,17 +37,7 @@
|
||||
ref="order-dialog"
|
||||
v-if="renderDialog"
|
||||
fullscreen
|
||||
:configs="dialogConfig"
|
||||
@destroy-dialog="renderDialog = false"
|
||||
@refreshDataList="getAList(Object.assign({}, listQuery, extraSearchConditions, params))" />
|
||||
|
||||
<DialogWithMenu
|
||||
modal-append-to-body
|
||||
ref="menu-dialog"
|
||||
v-if="renderMenuDialog"
|
||||
fullscreen
|
||||
:configs="dialogConfig"
|
||||
@destroy-dialog="renderMenuDialog = false"
|
||||
@destroy="renderDialog = false"
|
||||
@refreshDataList="getAList(Object.assign({}, listQuery, extraSearchConditions, params))" />
|
||||
|
||||
<DialogUpload
|
||||
@ -69,16 +59,15 @@
|
||||
import BaseListTable from "./BaseListTable.vue";
|
||||
import BaseSearchForm from "./BaseSearchForm.vue";
|
||||
import DialogJustForm from "./DialogJustForm.vue";
|
||||
import DialogWithMenu from "./DialogWithMenu.vue";
|
||||
import DialogUpload from "@/components/DialogUpload.vue";
|
||||
import moment from "moment";
|
||||
import Overlay from "@/components/Overlay.vue";
|
||||
import OrderEditDialog from './order--edit.vue'
|
||||
import OrderEditDialog from "./order--edit.vue";
|
||||
|
||||
// const dictList = JSON.parse(localStorage.getItem("dictList"));
|
||||
export default {
|
||||
name: "ListSectionWithHead",
|
||||
components: { OrderEditDialog, BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm, DialogUpload, Overlay },
|
||||
components: { OrderEditDialog, BaseSearchForm, BaseListTable, DialogJustForm, DialogUpload, Overlay },
|
||||
props: {
|
||||
headConfig: {
|
||||
type: Object,
|
||||
@ -94,10 +83,6 @@ export default {
|
||||
column: null,
|
||||
}),
|
||||
},
|
||||
dialogConfig: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
pageUrl: {
|
||||
type: String,
|
||||
default: "#",
|
||||
@ -112,11 +97,6 @@ export default {
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
dialogType() {
|
||||
return this.dialogConfigs.menu ? DIALOG_WITH_MENU : DIALOG_JUST_FORM;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
refreshKey(newVal) {
|
||||
// 外部触发更新列表
|
||||
|
@ -4,23 +4,23 @@
|
||||
:fullscreen="fullscreen"
|
||||
:visible="visible"
|
||||
@close="handleClose"
|
||||
:destroy-on-close="false"
|
||||
:close-on-click-modal="false">
|
||||
<!-- title -->
|
||||
@closed="$emit('destroy')"
|
||||
:close-on-click-modal="false"
|
||||
v-loading="optionsLoading || formLoading">
|
||||
<div slot="title" class="dialog-title">
|
||||
<h2 class="">
|
||||
{{ detailMode ? "查看详情" : dataForm.id ? "修改订单" : "新增订单" }}
|
||||
{{ mode.includes("detail") ? "查看详情" : dataForm.id ? "修改订单" : "新增订单" }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- form -->
|
||||
|
||||
<el-form ref="dataForm" :model="dataForm" v-loading="formLoading" size="small">
|
||||
<el-form ref="dataForm" :model="dataForm" size="small">
|
||||
<InputsArea title="生产订单">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="订单状态" prop="statusDictValue" :rules="null">
|
||||
<span style="display: block; margin-top: 0">{{ dataForm.statusDictValue }}</span>
|
||||
<span style="display: block; margin-top: 32px">{{ dataForm.statusDictValue }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
@ -41,7 +41,7 @@
|
||||
type: 'number',
|
||||
message: '输入正确的数字类型',
|
||||
trigger: 'blur',
|
||||
transform: '<<(val) => Number(val)>>',
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
]">
|
||||
<el-input v-model="dataForm.cate" v-bind="{ placeholder: '输入订单子号' }"></el-input>
|
||||
@ -76,9 +76,15 @@
|
||||
filterable
|
||||
clearable
|
||||
v-bind="{ placeholder: '选择压机', filterable: true }">
|
||||
<el-option v-for="opt in options" :key="opt.label" :label="opt.label" :value="opt.value">
|
||||
<el-option
|
||||
v-for="opt in pressOptions"
|
||||
:key="opt.label + opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value">
|
||||
<span>{{ opt.label }}</span>
|
||||
<span v-if="col.extraLabel" style="display: inline-block; margin-left: 12px; font-size: 0.9em">
|
||||
<span
|
||||
v-if="requestList[0].extraLabel"
|
||||
style="display: inline-block; margin-left: 12px; font-size: 0.9em">
|
||||
{{ opt.code }}
|
||||
</span>
|
||||
</el-option>
|
||||
@ -95,9 +101,15 @@
|
||||
filterable
|
||||
clearable
|
||||
v-bind="{ placeholder: '选择混料机', filterable: true }">
|
||||
<el-option v-for="opt in options" :key="opt.label" :label="opt.label" :value="opt.value">
|
||||
<el-option
|
||||
v-for="opt in blenderOptions"
|
||||
:key="opt.label + opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value">
|
||||
<span>{{ opt.label }}</span>
|
||||
<span v-if="col.extraLabel" style="display: inline-block; margin-left: 12px; font-size: 0.9em">
|
||||
<span
|
||||
v-if="requestList[1].extraLabel"
|
||||
style="display: inline-block; margin-left: 12px; font-size: 0.9em">
|
||||
{{ opt.code }}
|
||||
</span>
|
||||
</el-option>
|
||||
@ -111,9 +123,15 @@
|
||||
filterable
|
||||
clearable
|
||||
v-bind="{ placeholder: '选择隧道窑', filterable: true }">
|
||||
<el-option v-for="opt in options" :key="opt.label" :label="opt.label" :value="opt.value">
|
||||
<el-option
|
||||
v-for="opt in kilnOptions"
|
||||
:key="opt.label + opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value">
|
||||
<span>{{ opt.label }}</span>
|
||||
<span v-if="col.extraLabel" style="display: inline-block; margin-left: 12px; font-size: 0.9em">
|
||||
<span
|
||||
v-if="requestList[2].extraLabel"
|
||||
style="display: inline-block; margin-left: 12px; font-size: 0.9em">
|
||||
{{ opt.code }}
|
||||
</span>
|
||||
</el-option>
|
||||
@ -128,29 +146,51 @@
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="牌号" prop="bomId" :rules="null">
|
||||
<el-form-item label="配方号" prop="bomId" :rules="null">
|
||||
<el-select
|
||||
v-model="dataForm.bomId"
|
||||
filterable
|
||||
clearable
|
||||
v-bind="{ placeholder: '选择牌号', filterable: true }">
|
||||
<el-option v-for="opt in options" :key="opt.label" :label="opt.label" :value="opt.value">
|
||||
<span>{{ opt.label }}</span>
|
||||
<span v-if="col.extraLabel" style="display: inline-block; margin-left: 12px; font-size: 0.9em">
|
||||
{{ opt.undefined }}
|
||||
@change="handleBomChange"
|
||||
v-bind="{ placeholder: '选择配方号', filterable: true }">
|
||||
<el-option
|
||||
v-for="opt in bomOptions"
|
||||
:key="opt.label + opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
style="display: flex; align-items: center">
|
||||
<span style="display: inline-block; width: 128px; text-overflow: ellipsis">{{ opt.label }}</span>
|
||||
<span
|
||||
v-if="requestList[3].extraLabel"
|
||||
style="display: inline-block; margin-left: 12px; font-size: 0.9em">
|
||||
{{ opt.name }}
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="配方号" prop="bomCode" :rules="null">
|
||||
<span style="display: block; margin-top: 0">{{ dataForm.bomCode }}</span>
|
||||
<el-form-item label="牌号" prop="brand" :rules="null">
|
||||
<span style="display: block; margin-top: 32px">{{ dataForm.brand }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="版本号" prop="ai" :rules="null">
|
||||
<span style="display: block; margin-top: 0">{{ dataForm.ai }}</span>
|
||||
<!-- <span style="display: block; margin-top: 32px">{{ dataForm.ai }}</span> -->
|
||||
<el-select
|
||||
v-model="dataForm.ai"
|
||||
filterable
|
||||
clearable
|
||||
v-bind="{ placeholder: '请选择版本' }"
|
||||
@change="handleVersionChange">
|
||||
<el-option
|
||||
v-for="opt in versionList"
|
||||
:key="opt.label + opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value">
|
||||
<span>{{ opt.label }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
@ -160,9 +200,15 @@
|
||||
filterable
|
||||
clearable
|
||||
v-bind="{ placeholder: '选择包装代码', filterable: true }">
|
||||
<el-option v-for="opt in options" :key="opt.label" :label="opt.label" :value="opt.value">
|
||||
<el-option
|
||||
v-for="opt in packOptions"
|
||||
:key="opt.label + opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value">
|
||||
<span>{{ opt.label }}</span>
|
||||
<span v-if="col.extraLabel" style="display: inline-block; margin-left: 12px; font-size: 0.9em">
|
||||
<span
|
||||
v-if="requestList[4].extraLabel"
|
||||
style="display: inline-block; margin-left: 12px; font-size: 0.9em">
|
||||
{{ opt.code }}
|
||||
</span>
|
||||
</el-option>
|
||||
@ -178,9 +224,15 @@
|
||||
filterable
|
||||
clearable
|
||||
v-bind="{ placeholder: '选择物料', filterable: true }">
|
||||
<el-option v-for="opt in options" :key="opt.label" :label="opt.label" :value="opt.value">
|
||||
<el-option
|
||||
v-for="opt in productOptions"
|
||||
:key="opt.label + opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value">
|
||||
<span>{{ opt.label }}</span>
|
||||
<span v-if="col.extraLabel" style="display: inline-block; margin-left: 12px; font-size: 0.9em">
|
||||
<span
|
||||
v-if="requestList[5].extraLabel"
|
||||
style="display: inline-block; margin-left: 12px; font-size: 0.9em">
|
||||
{{ opt.code }}
|
||||
</span>
|
||||
</el-option>
|
||||
@ -194,9 +246,15 @@
|
||||
filterable
|
||||
clearable
|
||||
v-bind="{ placeholder: '选择砖型', filterable: true }">
|
||||
<el-option v-for="opt in options" :key="opt.label" :label="opt.label" :value="opt.value">
|
||||
<el-option
|
||||
v-for="opt in shapeOptions"
|
||||
:key="opt.label + opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value">
|
||||
<span>{{ opt.label }}</span>
|
||||
<span v-if="col.extraLabel" style="display: inline-block; margin-left: 12px; font-size: 0.9em">
|
||||
<span
|
||||
v-if="requestList[6].extraLabel"
|
||||
style="display: inline-block; margin-left: 12px; font-size: 0.9em">
|
||||
{{ opt.code }}
|
||||
</span>
|
||||
</el-option>
|
||||
@ -213,7 +271,7 @@
|
||||
type: 'number',
|
||||
message: '输入正确的数字类型',
|
||||
trigger: 'blur',
|
||||
transform: '<<(val) => Number(val)>>',
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
]">
|
||||
<el-input v-model="dataForm.sapParam6" v-bind="{ placeholder: '输入烧成温度' }"></el-input>
|
||||
@ -229,7 +287,7 @@
|
||||
type: 'number',
|
||||
message: '输入正确的数字类型',
|
||||
trigger: 'blur',
|
||||
transform: '<<(val) => Number(val)>>',
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
]">
|
||||
<el-input v-model="dataForm.sapParam7" v-bind="{ placeholder: '输入烧成时间' }"></el-input>
|
||||
@ -255,7 +313,7 @@
|
||||
type: 'number',
|
||||
message: '输入正确的数字类型',
|
||||
trigger: 'blur',
|
||||
transform: '<<(val) => Number(val)>>',
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
]">
|
||||
<el-input v-model="dataForm.prodqty" v-bind="{ placeholder: '输入要求生产的数量' }"></el-input>
|
||||
@ -270,7 +328,7 @@
|
||||
type: 'number',
|
||||
message: '输入正确的数字类型',
|
||||
trigger: 'blur',
|
||||
transform: '<<(val) => Number(val)>>',
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
]">
|
||||
<el-input v-model="dataForm.yieldqty" v-bind="{ placeholder: '输入已经生产的数量' }"></el-input>
|
||||
@ -286,7 +344,7 @@
|
||||
type: 'number',
|
||||
message: '输入正确的数字类型',
|
||||
trigger: 'blur',
|
||||
transform: '<<(val) => Number(val)>>',
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
]">
|
||||
<el-input v-model="dataForm.pcsKilnCar" v-bind="{ placeholder: '输入托盘码放砖数' }"></el-input>
|
||||
@ -317,7 +375,7 @@
|
||||
type: 'number',
|
||||
message: '输入正确的数字类型',
|
||||
trigger: 'blur',
|
||||
transform: '<<(val) => Number(val)>>',
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
]">
|
||||
<el-input v-model="dataForm.soqty" v-bind="{ placeholder: '输入销售订单砖数' }"></el-input>
|
||||
@ -339,9 +397,15 @@
|
||||
prop="customerId"
|
||||
:rules="{ required: true, message: '必填项不能为空', trigger: 'blur' }">
|
||||
<el-select v-model="dataForm.customerId" filterable clearable v-bind="{ placeholder: '选择客户' }">
|
||||
<el-option v-for="opt in options" :key="opt.label" :label="opt.label" :value="opt.value">
|
||||
<el-option
|
||||
v-for="opt in clientOptions"
|
||||
:key="opt.label + opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value">
|
||||
<span>{{ opt.label }}</span>
|
||||
<span v-if="col.extraLabel" style="display: inline-block; margin-left: 12px; font-size: 0.9em">
|
||||
<span
|
||||
v-if="requestList[7].extraLabel"
|
||||
style="display: inline-block; margin-left: 12px; font-size: 0.9em">
|
||||
{{ opt.name }}
|
||||
</span>
|
||||
</el-option>
|
||||
@ -350,7 +414,7 @@
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="物料号销售文本" prop="shortDesc" :rules="null">
|
||||
<span style="display: block; margin-top: 0">{{ dataForm.shortDesc }}</span>
|
||||
<span style="display: block; margin-top: 32px">{{ dataForm.shortDesc }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6"></el-col>
|
||||
@ -368,23 +432,17 @@
|
||||
|
||||
<!-- footer -->
|
||||
<div slot="footer">
|
||||
<!-- <template v-for="(operate, index) in configs.form.operations">
|
||||
<el-button
|
||||
v-if="showButton(operate)"
|
||||
:key="'operation_' + index"
|
||||
:type="operate.type"
|
||||
@click="handleBtnClick(operate)">
|
||||
{{ operate.label }}
|
||||
</el-button>
|
||||
</template> -->
|
||||
<el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
|
||||
<!-- TODO: permission 相关内容 未添加 -->
|
||||
<el-button v-if="mode.includes('create')" type="primary" @click="handleSave">保存</el-button>
|
||||
<el-button v-if="mode.includes('edit')" type="primary" @click="handleUpdate">更新</el-button>
|
||||
<el-button v-if="mode.includes('reset')" type="warning" @click="handleReset">重置</el-button>
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { pick as __pick } from "@/utils/filters";
|
||||
import Cookies from "js-cookie";
|
||||
import moment from "moment";
|
||||
import InputsArea from "./InputsArea.vue";
|
||||
|
||||
@ -392,13 +450,6 @@ export default {
|
||||
name: "DialogJustForm",
|
||||
components: { InputsArea },
|
||||
props: {
|
||||
configs: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
clickModalToClose: false,
|
||||
forms: null,
|
||||
}),
|
||||
},
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@ -406,172 +457,257 @@ export default {
|
||||
},
|
||||
inject: ["urls"],
|
||||
data() {
|
||||
const dataForm = {};
|
||||
const watchList = [];
|
||||
const cachedList = {};
|
||||
|
||||
this.configs.form.field.forEach((field) => {
|
||||
field.rows.forEach((row) => {
|
||||
row.forEach((col) => {
|
||||
if (!col.prop) return;
|
||||
|
||||
dataForm[col.prop] = col.default ?? null;
|
||||
|
||||
if (col.fetchData)
|
||||
col.fetchData().then(({ data: res }) => {
|
||||
if (res.code === 0) {
|
||||
if (typeof res.data === "object" && "list" in res.data) {
|
||||
if ("injectTo" in col) {
|
||||
// 保存完整的数据列表,用于自动更新关联字段
|
||||
cachedList[col.prop] = res.data.list;
|
||||
}
|
||||
this.$set(
|
||||
col,
|
||||
"options",
|
||||
res.data.list.map((i) => ({
|
||||
label: col.optionLabel ? i[col.optionLabel] : i.name,
|
||||
value: col.optionValue ? i[col.optionValue] : i.id,
|
||||
}))
|
||||
);
|
||||
} else if (Array.isArray(res.data)) {
|
||||
this.$set(
|
||||
col,
|
||||
"options",
|
||||
res.data.map((i) => ({
|
||||
label: col.optionLabel ? i[col.optionLabel] : i.name,
|
||||
value: col.optionValue ? i[col.optionValue] : i.id,
|
||||
}))
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// error 静默失败
|
||||
col.options.splice(0);
|
||||
}
|
||||
});
|
||||
else if (col.fetchTreeData) {
|
||||
// 获取设备类型时触发的,用于前端构建属性结构,约定,parentId 为0时是顶级节点
|
||||
col.fetchTreeData().then(({ data: res }) => {
|
||||
// console.log("[DialogJustForm fetchTreeData -->]", res.data);
|
||||
if (res.code === 0 && res.data) {
|
||||
if ("list" in res.data) {
|
||||
this.$set(col, "options", res.data.list);
|
||||
} else if (Array.isArray(res.data)) {
|
||||
this.$set(col, "options", res.data);
|
||||
}
|
||||
} else {
|
||||
col.options.splice(0);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
mode: "#edit#reset",
|
||||
formLoading: false,
|
||||
dataForm,
|
||||
watchList,
|
||||
cachedList,
|
||||
detailMode: false,
|
||||
baseDialogConfig: null,
|
||||
optionsLoading: false,
|
||||
pressOptions: [], // 压机列表
|
||||
blenderOptions: [], // 混料机列表
|
||||
kilnOptions: [], // 窑炉列表
|
||||
bomOptions: [], // 牌号列表
|
||||
packOptions: [], // 包装代码列表
|
||||
productOptions: [], // 物料代码
|
||||
shapeOptions: [], // 砖型代码
|
||||
clientOptions: [], // 客户礼拜
|
||||
versionList: [], // 版本列表
|
||||
cachedList: {}, // 用来缓存请求回来的原始列表数据
|
||||
dataForm: {
|
||||
statusDictValue: null,
|
||||
code: null,
|
||||
cate: null,
|
||||
planStartTime: null,
|
||||
press: null,
|
||||
blender: null,
|
||||
kiln: null,
|
||||
sapParam1: null,
|
||||
bomId: null,
|
||||
brand: null, // 牌号
|
||||
ai: null, // 版本号
|
||||
packTech: null,
|
||||
productId: null,
|
||||
shape: null,
|
||||
sapParam6: null,
|
||||
sapParam7: null,
|
||||
specifications: null,
|
||||
prodqty: null,
|
||||
yieldqty: null,
|
||||
pcsKilnCar: null,
|
||||
saleNo: null,
|
||||
saleOrderItem: null,
|
||||
soqty: null,
|
||||
deliveryTime: null,
|
||||
customerId: null,
|
||||
shortDesc: null,
|
||||
remark: null,
|
||||
},
|
||||
visible: false,
|
||||
requestList: [
|
||||
{
|
||||
url: "/pms/equipment/search",
|
||||
params: {
|
||||
equipmentTypeCode: "Press",
|
||||
},
|
||||
method: "get",
|
||||
target: "pressOptions",
|
||||
label: "code",
|
||||
},
|
||||
{
|
||||
url: "/pms/equipment/search",
|
||||
params: {
|
||||
equipmentTypeCode: "Mix",
|
||||
},
|
||||
method: "get",
|
||||
target: "blenderOptions",
|
||||
label: "code",
|
||||
},
|
||||
{
|
||||
url: "/pms/equipment/search",
|
||||
params: {
|
||||
equipmentTypeCode: "Kiln",
|
||||
},
|
||||
method: "get",
|
||||
target: "kilnOptions",
|
||||
label: "code",
|
||||
},
|
||||
{
|
||||
url: "/pms/bom/page",
|
||||
params: {
|
||||
limit: 999,
|
||||
page: 1,
|
||||
key: "",
|
||||
externalCode: "",
|
||||
},
|
||||
method: "get",
|
||||
target: "bomOptions",
|
||||
label: "code",
|
||||
extraLabel: "name",
|
||||
cache: true,
|
||||
},
|
||||
{
|
||||
url: "/pms/equipmentTech/pageView",
|
||||
params: {
|
||||
limit: 999,
|
||||
page: 1,
|
||||
key: "",
|
||||
shape: "",
|
||||
wsId: 5,
|
||||
},
|
||||
method: "post",
|
||||
target: "packOptions",
|
||||
label: "code",
|
||||
},
|
||||
{
|
||||
url: "/pms/product/page",
|
||||
params: {
|
||||
limit: 999,
|
||||
page: 1,
|
||||
key: "",
|
||||
},
|
||||
method: "get",
|
||||
target: "productOptions",
|
||||
label: "code",
|
||||
},
|
||||
{
|
||||
url: "/pms/shape/page",
|
||||
params: {
|
||||
limit: 999,
|
||||
page: 1,
|
||||
key: "",
|
||||
},
|
||||
method: "get",
|
||||
target: "shapeOptions",
|
||||
label: "code",
|
||||
},
|
||||
{
|
||||
url: "/pms/customer/page",
|
||||
params: {
|
||||
limit: 999,
|
||||
page: 1,
|
||||
name: "",
|
||||
},
|
||||
method: "get",
|
||||
target: "clientOptions",
|
||||
label: "name",
|
||||
},
|
||||
],
|
||||
promiseList: [],
|
||||
bomId: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
/** 处理 injectTo 选项 */
|
||||
this.configs.form.field.forEach((field) => {
|
||||
field.rows.forEach((row) => {
|
||||
row.forEach((col) => {
|
||||
if (!col.prop) return;
|
||||
if ("injectTo" in col && Array.isArray(col.injectTo)) {
|
||||
// console.log("watching options ..... ", col);
|
||||
col.injectTo.map((item) => {
|
||||
const unwatch = this.$watch(
|
||||
() => this.dataForm[col.prop],
|
||||
(newVal) => {
|
||||
const chosenObject = this.cachedList[col.prop].find((i) => i.id === newVal);
|
||||
if (chosenObject) {
|
||||
// 如果找到了
|
||||
this.$set(this.dataForm, item[0], chosenObject[item[1]]);
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: false,
|
||||
}
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 打开弹窗后,准备下拉选项数据
|
||||
* 复用方式:
|
||||
* 1. 在 data 里定义 requestList
|
||||
* 2. 复制本方法到组件中去
|
||||
* 3. requestList 参考上面的 data
|
||||
*/
|
||||
async prepareSelectOptions() {
|
||||
this.optionsLoading = true;
|
||||
|
||||
this.requestList.forEach((req) => {
|
||||
this.promiseList.push(async () => {
|
||||
const { data: res } = await this.$http[req.method](
|
||||
req.url,
|
||||
req.method.toLowerCase() == "post" ? req.params : { params: req.params }
|
||||
);
|
||||
if (res.code == 0) {
|
||||
if ("list" in res.data) {
|
||||
// 从 target 中抽取缓存名称
|
||||
if (req.cache) this.cachedList[req.target.replace(/options/i, "")] = res.data.list;
|
||||
this[req.target] = res.data.list.map((item) =>
|
||||
req.extraLabel
|
||||
? {
|
||||
[req.extraLabel]: item[req.extraLabel],
|
||||
label: item[req.label],
|
||||
value: item.id,
|
||||
}
|
||||
: {
|
||||
label: item[req.label],
|
||||
value: item.id,
|
||||
}
|
||||
);
|
||||
this.watchList.push(unwatch);
|
||||
});
|
||||
} else if (Array.isArray(res.data)) {
|
||||
if (req.cache) this.cachedList[req.target.replace(/options/i, "")] = res.data;
|
||||
this[req.target] = res.data.map((item) =>
|
||||
req.extraLabel
|
||||
? {
|
||||
[req.extraLabel]: item[req.extraLabel],
|
||||
label: item[req.label],
|
||||
value: item.id,
|
||||
}
|
||||
: {
|
||||
label: item[req.label],
|
||||
value: item.id,
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
uploadHeaders() {
|
||||
return {
|
||||
token: Cookies.get("token") || "",
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleFilelistUpdate(newFilelist) {
|
||||
// TODO: 直接访问 .files 可能不太合适
|
||||
this.dataForm.files = newFilelist.map((file) => ({
|
||||
id: file.id,
|
||||
name: file.name,
|
||||
url: file.url,
|
||||
typeCode: file.typeCode,
|
||||
}));
|
||||
// 更新请求
|
||||
if ("id" in this.dataForm && this.dataForm.id !== null && this.dataForm.id !== undefined) this.addOrUpdate("PUT");
|
||||
else
|
||||
this.$notify({
|
||||
title: "等待保存",
|
||||
message: "已添加文件,请手动点击保存!",
|
||||
type: "warning",
|
||||
duration: 2500,
|
||||
});
|
||||
|
||||
try {
|
||||
await Promise.all(this.promiseList.map((fn) => fn()));
|
||||
} catch (err) {
|
||||
this.$message.error("获取数据失败,请刷新页面重试");
|
||||
this.optionsLoading = false;
|
||||
}
|
||||
|
||||
this.optionsLoading = false;
|
||||
},
|
||||
|
||||
/** utitilities */
|
||||
showButton(operate) {
|
||||
const notDetailMode = !this.detailMode;
|
||||
const showAlways = operate.showAlways ?? false;
|
||||
const editMode = operate.showOnEdit && this.dataForm.id;
|
||||
const addMode = !operate.showOnEdit && !this.dataForm.id;
|
||||
const permission = operate.permission ? this.$hasPermission(operate.permission) : true;
|
||||
return notDetailMode && (showAlways || ((editMode || addMode) && permission));
|
||||
/**
|
||||
* 向这种select上的监听事件
|
||||
* 不自动生成
|
||||
* 因为每个页面也许有独立的需求链
|
||||
*/
|
||||
handleBomChange(bomID) {
|
||||
console.log("[handleBomChange] val is: ", bomID);
|
||||
const target = this.cachedList.bom.find((item) => item.id === bomID);
|
||||
// 这个单独的 bomId 是个极其特殊的需求,所以不放在 dataForm 里
|
||||
this.bomId = bomID;
|
||||
this.getBomVersionList(target);
|
||||
this.$set(this.dataForm, "brand", target.name);
|
||||
this.$set(this.dataForm, "ai", target.version);
|
||||
},
|
||||
|
||||
resetForm(excludeId = false, immediate = false) {
|
||||
setTimeout(
|
||||
() => {
|
||||
Object.keys(this.dataForm).forEach((key) => {
|
||||
if (excludeId && key === "id") return;
|
||||
this.dataForm[key] = null;
|
||||
});
|
||||
// console.log("[DialogJustForm resetForm()] clearing form...");
|
||||
this.$refs.dataForm.clearValidate();
|
||||
this.$emit("dialog-closed"); // 触发父组件销毁自己
|
||||
this.watchList.map((unwatch) => unwatch());
|
||||
this.cachedList = {};
|
||||
},
|
||||
immediate ? 0 : 200
|
||||
);
|
||||
async getBomVersionList(bom) {
|
||||
try {
|
||||
const { data: res } = await this.$http.get("/pms/bom/pageVersion", { params: { key: bom.code } });
|
||||
console.log("[bom version list]", res.data.list);
|
||||
this.versionList = res.data.list.map((item) => ({
|
||||
label: item.version,
|
||||
value: item.version,
|
||||
id: item.id,
|
||||
}));
|
||||
} catch (err) {
|
||||
this.$message.error("获取数据失败,请刷新页面重试");
|
||||
}
|
||||
},
|
||||
|
||||
/** init **/
|
||||
init(id, detailMode) {
|
||||
/**
|
||||
* 版本 变化,更新 bomList
|
||||
* @param {*} v
|
||||
*/
|
||||
handleVersionChange(v) {
|
||||
const targetBom = this.versionList.find((item) => item.value === v);
|
||||
// this.bomId 用于在提交的时候置换 this.dataForm.bomId
|
||||
this.bomId = targetBom.id;
|
||||
},
|
||||
|
||||
async init(id) {
|
||||
this.visible = true;
|
||||
return;
|
||||
// console.log("[DialogJustForm] init", this.dataForm, id, detailMode);
|
||||
await this.prepareSelectOptions();
|
||||
|
||||
if (this.$refs.dataForm) {
|
||||
// console.log("[DialogJustForm] clearing form validation...");
|
||||
// 当不是首次渲染dialog的时候,一开始就清空验证信息,本组件的循环里只有一个 dataForm 所以只用取 [0] 即可
|
||||
this.$refs.dataForm.clearValidate();
|
||||
}
|
||||
|
||||
this.detailMode = detailMode ?? false;
|
||||
if (id) this.mode = "#edit#reset";
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.dataForm.id = id || null;
|
||||
if (this.dataForm.id) {
|
||||
@ -584,16 +720,6 @@ export default {
|
||||
.then(({ data: res }) => {
|
||||
if (res && res.code === 0) {
|
||||
this.dataForm = __pick(res.data, Object.keys(this.dataForm));
|
||||
/** 格式化文件上传列表 */
|
||||
if (Array.isArray(this.dataForm.files)) {
|
||||
this.dataForm.files = this.dataForm.files.map((file) => ({
|
||||
id: file.id,
|
||||
name: file.fileUrl.split("/").pop(),
|
||||
typeCode: file.typeCode,
|
||||
url: file.fileUrl,
|
||||
}));
|
||||
}
|
||||
// console.log("[DialogJustForm] init():", this.dataForm);
|
||||
} else {
|
||||
this.$message({
|
||||
message: `${res.code}: ${res.msg}`,
|
||||
@ -620,19 +746,9 @@ export default {
|
||||
|
||||
/** handlers */
|
||||
handleSelectChange(col, eventValue) {
|
||||
// console.log("[dialog] select change: ", col, eventValue);
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
handleSwitchChange(val) {
|
||||
// console.log("[dialog] switch change: ", val, this.dataForm);
|
||||
},
|
||||
|
||||
handleComponentModelUpdate(propName, { subject, payload: { data } }) {
|
||||
this.dataForm[propName] = JSON.stringify(data);
|
||||
// console.log("[DialogJustForm] handleComponentModelUpdate", this.dataForm[propName]);
|
||||
},
|
||||
|
||||
addOrUpdate(method = "POST") {
|
||||
if ("parentId" in this.dataForm) {
|
||||
// console.log("[DialogJustForm parentId]", this.dataForm.parentId);
|
||||
@ -724,39 +840,14 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
handleBtnClick(payload) {
|
||||
// console.log("btn click payload: ", payload);
|
||||
handleSave() {},
|
||||
|
||||
if ("name" in payload) {
|
||||
switch (payload.name) {
|
||||
case "cancel":
|
||||
this.handleClose();
|
||||
break;
|
||||
case "reset":
|
||||
this.resetForm(true, true); // true means exclude id, immediate execution
|
||||
break;
|
||||
case "add":
|
||||
case "update":
|
||||
this.addOrUpdate(payload.name === "add" ? "POST" : "PUT");
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
console.log("[x] 不是这么用的! 缺少name属性");
|
||||
}
|
||||
},
|
||||
handleUpdate() {},
|
||||
|
||||
handleUploadChange(file, fileList) {
|
||||
// console.log("[Upload] handleUploadChange...", file, fileList);
|
||||
},
|
||||
handleReset() {},
|
||||
|
||||
handleClose() {
|
||||
this.visible = false;
|
||||
|
||||
setTimeout(() => {
|
||||
this.$emit("destroy-dialog");
|
||||
// this.resetForm();
|
||||
// this.$emit("update:dialogVisible", false);
|
||||
}, 200);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
Laden…
Verwijs in nieuw issue
Block a user