add InputsArea
This commit is contained in:
parent
ea46739942
commit
0f85de5943
@ -16,6 +16,74 @@
|
||||
|
||||
<!-- form -->
|
||||
<el-form ref="dataForm" :model="dataForm" v-loading="loadingStatus" size="small">
|
||||
<InputsArea v-for="field in configs.form.field" :key="field.title" :title="field.title">
|
||||
<el-row v-for="(row, rowIndex) in field.rows" :key="'row_' + rowIndex" :gutter="20">
|
||||
<el-col v-for="(col, colIndex) in row" :key="colIndex" :span="24 / row.length" :class="{ h0: col.hidden }">
|
||||
<!-- 通过多个 col === null 可以控制更灵活的 span 大小 -->
|
||||
<el-form-item v-if="col !== null" :label="col.label" :prop="col.prop" :rules="col.rules || null">
|
||||
<el-input
|
||||
v-if="col.input"
|
||||
v-model="dataForm[col.prop]"
|
||||
clearable
|
||||
:disabled="detailMode"
|
||||
v-bind="col.elparams" />
|
||||
<el-cascader
|
||||
v-if="col.cascader"
|
||||
v-model="dataForm[col.prop]"
|
||||
:options="col.options"
|
||||
:disabled="detailMode"
|
||||
v-bind="col.elparams"></el-cascader>
|
||||
<el-select
|
||||
v-if="col.select"
|
||||
v-model="dataForm[col.prop]"
|
||||
clearable
|
||||
:disabled="detailMode"
|
||||
v-bind="col.elparams"
|
||||
@change="handleSelectChange(col, $event)">
|
||||
<el-option
|
||||
v-for="(opt, optIdx) in col.options"
|
||||
:key="'option_' + optIdx"
|
||||
:label="opt.label"
|
||||
:value="opt.value" />
|
||||
</el-select>
|
||||
<el-switch
|
||||
v-if="col.switch"
|
||||
v-model="dataForm[col.prop]"
|
||||
:active-value="col.activeValue ?? 1"
|
||||
:inactive-value="col.activeValue ?? 0"
|
||||
@change="handleSwitchChange"
|
||||
:disabled="detailMode" />
|
||||
<el-input
|
||||
v-if="col.textarea"
|
||||
type="textarea"
|
||||
v-model="dataForm[col.prop]"
|
||||
:disabled="detailMode"
|
||||
v-bind="col.elparams" />
|
||||
<el-date-picker
|
||||
v-if="col.datetime"
|
||||
v-model="dataForm[col.prop]"
|
||||
:disabled="detailMode"
|
||||
v-bind="col.elparams" />
|
||||
|
||||
<div class="" v-if="col.component" style="margin: 42px 0 0">
|
||||
<!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO：后续可能会根据业务需求创建新的版本 -->
|
||||
<component
|
||||
:is="col.component"
|
||||
:key="'component_' + col.prop"
|
||||
@update:modelValue="handleComponentModelUpdate(col.prop, $event)"
|
||||
:modelValue="dataForm[col.prop] ?? ''"
|
||||
:mode="detailMode ? 'detail' : dataForm.id ? 'edit' : 'create'"
|
||||
v-bind="col.bind" />
|
||||
</div>
|
||||
<!-- add more... -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</InputsArea>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<el-row v-for="(row, rowIndex) in configs.form.rows" :key="'row_' + rowIndex" :gutter="20">
|
||||
<el-col v-for="(col, colIndex) in row" :key="colIndex" :span="24 / row.length" :class="{ h0: col.hidden }">
|
||||
<!-- 通过多个 col === null 可以控制更灵活的 span 大小 -->
|
||||
@ -100,12 +168,14 @@
|
||||
import { pick as __pick } from "@/utils/filters";
|
||||
import Cookies from "js-cookie";
|
||||
import moment from "moment";
|
||||
import InputsArea from "./InputsArea.vue";
|
||||
|
||||
export default {
|
||||
name: "DialogJustForm",
|
||||
components: {},
|
||||
components: { InputsArea },
|
||||
props: {
|
||||
configs: { type: Object,
|
||||
configs: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
clickModalToClose: true,
|
||||
forms: null,
|
||||
|
||||
44
src/views/modules/pms/order/components/InputsArea.vue
Normal file
44
src/views/modules/pms/order/components/InputsArea.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="inputs-area">
|
||||
<div class="inputs-area__title">{{ title }}</div>
|
||||
<div class="inputs-area__main">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "InputsArea",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.inputs-area {
|
||||
/* background: #ccc3; */
|
||||
position: relative;
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.inputs-area__title {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 20px;
|
||||
padding: 0 12px;
|
||||
line-height: 24px;
|
||||
min-width: 12px;
|
||||
background: white;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.inputs-area__main {
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -223,37 +223,81 @@ export default function () {
|
||||
const dictList = JSON.parse(localStorage.getItem("dictList"));
|
||||
const dialogConfigs = {
|
||||
form: {
|
||||
field: [
|
||||
{
|
||||
title: '订单',
|
||||
rows: [
|
||||
[
|
||||
{
|
||||
label: "订单状态",
|
||||
prop: "statusDictValue",
|
||||
component: textOnlyComponent,
|
||||
},
|
||||
{
|
||||
input: true,
|
||||
label: "订单号",
|
||||
prop: "code",
|
||||
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
|
||||
elparams: { placeholder: "请输入订单号" },
|
||||
},
|
||||
{
|
||||
input: true,
|
||||
label: "订单子号",
|
||||
prop: "cate",
|
||||
rules: [
|
||||
{ required: true, message: "必填项不能为空", trigger: "blur" },
|
||||
{ type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
|
||||
],
|
||||
elparams: { placeholder: "请输入订单子号" },
|
||||
},
|
||||
{
|
||||
input: true,
|
||||
label: "生产订单类型",
|
||||
prop: "specifications",
|
||||
// rules: { required: true, message: "必填项不能为空", trigger: "blur" },
|
||||
elparams: { placeholder: "请输入生产订单类型" },
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '设备',
|
||||
rows: [
|
||||
{
|
||||
select: true,
|
||||
label: "压机",
|
||||
prop: "press",
|
||||
options: [],
|
||||
optionLabel: "code",
|
||||
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
|
||||
fetchData: () => this.$http.get("/pms/equipment/search", { params: { equipmentTypeCode: 'Press' } }),
|
||||
elparams: { placeholder: "请选择压机号", filterable: true },
|
||||
},
|
||||
{
|
||||
select: true,
|
||||
label: "混料机号",
|
||||
prop: "blender",
|
||||
options: [],
|
||||
optionLabel: "code",
|
||||
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
|
||||
fetchData: () => this.$http.get("/pms/equipment/search", { params: { equipmentTypeCode: 'Mix' } }),
|
||||
elparams: { placeholder: "请选择混料机号", filterable: true },
|
||||
},
|
||||
{
|
||||
select: true,
|
||||
label: "隧道窑号",
|
||||
prop: "kiln",
|
||||
options: [],
|
||||
optionLabel: "code",
|
||||
fetchData: () => this.$http.get("/pms/equipment/search", { params: { equipmentTypeCode: 'Kiln' } }),
|
||||
elparams: { placeholder: "请选择隧道窑号", filterable: true },
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
rows: [
|
||||
[
|
||||
{
|
||||
label: "订单状态",
|
||||
prop: "statusDictValue",
|
||||
component: textOnlyComponent,
|
||||
},
|
||||
{
|
||||
input: true,
|
||||
label: "订单号",
|
||||
prop: "code",
|
||||
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
|
||||
elparams: { placeholder: "请输入订单号" },
|
||||
},
|
||||
{
|
||||
input: true,
|
||||
label: "订单子号",
|
||||
prop: "cate",
|
||||
rules: [
|
||||
{ required: true, message: "必填项不能为空", trigger: "blur" },
|
||||
{ type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
|
||||
],
|
||||
elparams: { placeholder: "请输入订单子号" },
|
||||
},
|
||||
{
|
||||
input: true,
|
||||
label: "生产订单类型",
|
||||
prop: "specifications",
|
||||
// rules: { required: true, message: "必填项不能为空", trigger: "blur" },
|
||||
elparams: { placeholder: "请输入生产订单类型" },
|
||||
},
|
||||
|
||||
{
|
||||
select: true,
|
||||
label: "物料编号",
|
||||
@ -333,16 +377,7 @@ export default function () {
|
||||
// options: dictList["unit"].map((u) => ({ label: u.dictLabel, value: u.dictValue })),
|
||||
elparams: { placeholder: "请选择砖型", filterable: true },
|
||||
},
|
||||
{
|
||||
select: true,
|
||||
label: "压机",
|
||||
prop: "press",
|
||||
options: [],
|
||||
optionLabel: "code",
|
||||
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
|
||||
fetchData: () => this.$http.get("/pms/equipment/search", { params: { equipmentTypeCode: 'Press' } }),
|
||||
elparams: { placeholder: "请选择压机号", filterable: true },
|
||||
},
|
||||
|
||||
],
|
||||
[
|
||||
{
|
||||
@ -382,25 +417,7 @@ export default function () {
|
||||
useBuiltin: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
select: true,
|
||||
label: "混料机号",
|
||||
prop: "blender",
|
||||
options: [],
|
||||
optionLabel: "code",
|
||||
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
|
||||
fetchData: () => this.$http.get("/pms/equipment/search", { params: { equipmentTypeCode: 'Mix' } }),
|
||||
elparams: { placeholder: "请选择混料机号", filterable: true },
|
||||
},
|
||||
{
|
||||
select: true,
|
||||
label: "隧道窑号",
|
||||
prop: "kiln",
|
||||
options: [],
|
||||
optionLabel: "code",
|
||||
fetchData: () => this.$http.get("/pms/equipment/search", { params: { equipmentTypeCode: 'Kiln' } }),
|
||||
elparams: { placeholder: "请选择隧道窑号", filterable: true },
|
||||
},
|
||||
|
||||
{
|
||||
input: true,
|
||||
label: "烧成温度 ℃",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user