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>