add InputsArea

src/views/modules/pms/order/components/DialogJustForm.vue

@@ -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,

src/views/modules/pms/order/components/InputsArea.vue

@@ -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>

src/views/modules/pms/order/config.js

@@ -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: "烧成温度 ℃",