提交表格基本样式

src/components/FormComponents/CustomForm/FormContent.vue

 <template>
-  <el-row
-    :gutter="options.gutter"
-    class="form-content"
-    :style="{
-      paddingLeft,
-    }"
-  >
+  <el-row :gutter="options.gutter" class="form-content">
     <template
       v-for="(item, columnIndex) in columns.column || columns.children.column"
     >
       <div
         v-if="item.type === 'dynamic'"
+        v-show="item.display"
         :key="columnIndex"
         style="width: 100%"
-        v-show="item.display"
         class="dynamic-form-container"
       >
         <el-form-item
@@ -24,18 +18,18 @@
         </el-form-item>
         <div class="dynamic-form-container_lable">{{ item.label }}</div>
         <form-dynamic
+          v-model="form[item.prop]"
           :options="item.children"
           :dynamic-data="item.dynamicData"
           :is-show-important="isShowImportant"
-          v-model="form[item.prop]"
         ></form-dynamic>
       </div>
 
       <div
         v-else-if="item.type === 'group'"
+        v-show="item.display"
         :key="columnIndex"
         style="width: 100%"
-        v-show="item.display"
       >
         <el-collapse :value="item.collapse ? item.prop : ''">
           <el-collapse-item
@@ -56,9 +50,9 @@
 
       <div
         v-else-if="item.type === 'dental-tab'"
+        v-show="item.display && isShowIm(item.importantField)"
         :key="columnIndex"
         style="width: 100%"
-        v-show="item.display && isShowIm(item.importantField)"
       >
         <el-form-item
           :prop="item.prop"
@@ -68,8 +62,8 @@
         </el-form-item>
         <dental-tab-form
           ref="dental"
-          :item="item"
           v-model="form[item.prop]"
+          :item="item"
           :disabled="options.disabled"
           @change="handleChange"
         ></dental-tab-form>
@@ -77,9 +71,9 @@
 
       <div
         v-else-if="item.type === 'dental-tab-tj'"
+        v-show="item.display && isShowIm(item.importantField)"
         :key="columnIndex"
         style="width: 100%"
-        v-show="item.display && isShowIm(item.importantField)"
       >
         <el-form-item
           :prop="item.prop"
@@ -89,20 +83,21 @@
         </el-form-item>
         <dental-tab-tj-form
           ref="dental"
-          :item="item"
           v-model="form[item.prop]"
+          :item="item"
           :disabled="options.disabled"
         ></dental-tab-tj-form>
       </div>
 
       <el-col
         v-else-if="item.type === 'title'"
+        v-show="item.display"
+        :key="columnIndex"
+        class="row12"
         :xs="item.xs || 24"
         :sm="item.sm || 24"
         :md="item.md || 24"
         :lg="item.span || 12"
-        :key="columnIndex"
-        v-show="item.display"
       >
         <div class="form_title" :style="item.styles">
           <span>{{ item.value }}</span>
@@ -111,16 +106,18 @@
 
       <el-col
         v-else
+        v-show="item.display && isShowIm(item.importantField)"
+        :key="columnIndex"
+        class="row24"
         :xs="item.xs || 24"
         :sm="item.sm || 24"
         :md="item.md || 24"
         :lg="item.lg || item.span || 12"
         :xl="item.span || 12"
-        :key="columnIndex"
-        v-show="item.display && isShowIm(item.importantField)"
       >
         <form-item-self
           :form="form"
+          :column-index="columnIndex"
           :item="item"
           :columns="columns.column || columns.children.column"
           :group="options.group"
@@ -173,11 +170,6 @@ export default {
   data() {
     return {}
   },
-  methods: {
-    handleChange(key, val) {
-      if (this.form.hasOwnProperty(key)) this.form[key] = val
-    },
-  },
 
   computed: {
     isShowIm() {
@@ -190,10 +182,22 @@ export default {
       return columns.labelWidth ? `${columns.labelWidth}px` : ""
     },
   },
+  methods: {
+    handleChange(key, val) {
+      if (this.form.hasOwnProperty(key)) this.form[key] = val
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
+::v-deep {
+  .row24.el-col-lg-12 {
+    &:nth-child(2n) {
+      border-left: 1px solid #ccc;
+    }
+  }
+}
 .form-content ::v-deep {
   display: flex;
   flex-wrap: wrap;

src/components/FormComponents/CustomForm/FormItemSelf.vue

 <template>
   <el-row
-    class="custom-form-item"
     :ref="item.prop"
+    class="custom-form-item"
     :style="item.styles"
     :class="{ isDefects: defectsSet.includes(item.prop) }"
   >
     <el-col :lg="item.width">
+      <div v-if="showIndex" class="formIndex">
+        {{ columnIndex + 1 }}
+      </div>
       <el-form-item
         :label="
           !hiddenLabel && item.label
-            ? `${item.label}${item.labelSuffix || '：'}`
+            ? `${item.label}${item.labelSuffix || ''}`
             : ''
         "
         :label-width="item.labelWidth ? `${item.labelWidth}px` : ''"
@@ -21,9 +24,9 @@
           <div>
             <el-upload-self
               v-if="item.type === 'upload'"
+              v-model="form[item.prop]"
               v-bind="item"
               :upload-query="{ formId, patientId, prefix: item.prop }"
-              v-model="form[item.prop]"
               :disabled="item.disabled"
             ></el-upload-self>
             <!-- 表单改文本 -->
@@ -33,16 +36,15 @@
             <template v-else>
               <!-- 输入框 -->
               <el-input
-                :class="item.toothBit ? 'toothBit' : ''"
                 v-if="item.type === 'input'"
                 v-model="form[item.prop]"
+                :class="item.toothBit ? 'toothBit' : ''"
                 :readonly="item.readonly"
                 :disabled="item.disabled"
                 :placeholder="
                   item.placeholder ||
                   ` ${item.label ? '请输入' + item.label : ''}`
                 "
-                @blur="handleBlur"
                 :clearable="item.notClearable ? false : true"
                 :maxlength="
                   item.maxlength
@@ -51,19 +53,20 @@
                     ? ''
                     : item.fieldLength
                 "
+                @blur="handleBlur"
               >
                 <!-- 牙位按钮 -->
                 <el-button
-                  slot="append"
                   v-if="item.toothBit"
-                  @click="openToothBit"
+                  slot="append"
                   class="toothBit"
+                  @click="openToothBit"
                   >{{ item.append || "牙位" }}</el-button
                 >
-                <template slot="append" v-else-if="item.append">{{
+                <template v-else-if="item.append" slot="append">{{
                   item.append
                 }}</template>
-                <template slot="prepend" v-if="item.prepend">{{
+                <template v-if="item.prepend" slot="prepend">{{
                   item.prepend
                 }}</template>
               </el-input>
@@ -77,7 +80,6 @@
                 :placeholder="item.placeholder || `请输入 ${item.label || ''}`"
                 :readonly="item.readonly"
                 :disabled="item.disabled"
-                @blur="handleBlur"
                 :show-password="item.showPassword"
                 clearable
                 :maxlength="
@@ -87,11 +89,12 @@
                     ? ''
                     : item.fieldLength
                 "
+                @blur="handleBlur"
               >
-                <template slot="append" v-if="item.append">{{
+                <template v-if="item.append" slot="append">{{
                   item.append
                 }}</template>
-                <template slot="prepend" v-if="item.prepend">{{
+                <template v-if="item.prepend" slot="prepend">{{
                   item.prepend
                 }}</template>
               </el-input>
@@ -99,13 +102,12 @@
               <!-- 文本域 -->
               <template v-if="item.type === 'textarea'">
                 <el-input
+                  v-model="form[item.prop]"
                   type="textarea"
                   :placeholder="
                     item.placeholder || `请输入 ${item.label || ''}`
                   "
-                  @blur="handleBlur"
                   :autosize="{ minRows: item.minRows, maxRows: item.maxRows }"
-                  v-model="form[item.prop]"
                   :minlength="item.minlength"
                   :disabled="item.disabled"
                   :maxlength="
@@ -116,6 +118,7 @@
                       : item.fieldLength
                   "
                   :show-word-limit="item.showWordLimit"
+                  @blur="handleBlur"
                 ></el-input>
               </template>
 
@@ -132,8 +135,8 @@
                   :precision="item.precision"
                   :min="item.minRows"
                   :max="item.maxRows"
-                  @blur="handleBlur"
                   style="display: table-cell"
+                  @blur="handleBlur"
                 >
                 </el-input-number>
                 <span
@@ -147,9 +150,9 @@
               <!-- 单选框 -->
               <el-radio-group
                 v-if="item.type === 'radio'"
-                @change="handleChange"
                 v-model="form[item.prop]"
                 :disabled="item.disabled"
+                @change="handleChange"
               >
                 <el-radio
                   v-for="(opt, optIndex) in item.dicData"
@@ -178,10 +181,10 @@
               <!-- 下拉框 -->
               <template v-if="item.type === 'select'">
                 <el-select
+                  v-model="form[item.prop]"
                   :clearable="item.clearable"
                   :filterable="item.filterable"
                   :disabled="item.disabled"
-                  v-model="form[item.prop]"
                   :placeholder="
                     item.placeholder
                       ? item.placeholder
@@ -212,8 +215,8 @@
                 :options="item.dicData"
                 :show-all-levels="item.showAllLevels"
                 :separator="item.separator"
-                @change="handleChange"
                 style="width: 100%"
+                @change="handleChange"
               ></el-cascader>
 
               <!-- 时间 -->
@@ -225,15 +228,15 @@
                 :format="item.format"
                 :disabled="item.disabled"
                 style="width: 100%"
-                @change="handleChange"
                 clearable
+                @change="handleChange"
               >
               </el-time-picker>
               <!-- 时间范围 -->
               <el-time-picker
                 v-else-if="item.type === 'timerange'"
-                is-range
                 v-model="form[item.prop]"
+                is-range
                 range-separator="至"
                 :start-placeholder="item.startPlaceholder"
                 :end-placeholder="item.endPlaceholder"
@@ -241,8 +244,8 @@
                 :value-format="item.valueFormat"
                 :format="item.format"
                 :disabled="item.disabled"
-                @change="handleChange"
                 clearable
+                @change="handleChange"
               >
               </el-time-picker>
               <!-- 日期 -->
@@ -253,73 +256,73 @@
                 :value-format="item.valueFormat"
                 :format="item.format"
                 :disabled="item.disabled"
-                @change="handleChange"
                 clearable
+                @change="handleChange"
               >
               </el-date-picker>
               <!-- 年 -->
               <el-date-picker
                 v-else-if="item.type === 'year'"
-                type="year"
                 v-model="form[item.prop]"
+                type="year"
                 :placeholder="item.placeholder ? item.placeholder : '请选择'"
                 :value-format="item.valueFormat"
                 :format="item.format"
                 :disabled="item.disabled"
-                @change="handleChange"
                 clearable
+                @change="handleChange"
               >
               </el-date-picker>
               <!-- 月 -->
 
               <el-date-picker
-                type="month"
                 v-else-if="item.type === 'month'"
                 v-model="form[item.prop]"
+                type="month"
                 :placeholder="item.placeholder ? item.placeholder : '请选择'"
                 :value-format="item.valueFormat"
                 :format="item.format"
                 :disabled="item.disabled"
-                @change="handleChange"
                 clearable
+                @change="handleChange"
               >
               </el-date-picker>
               <!-- 周 -->
 
               <el-date-picker
-                type="week"
                 v-else-if="item.type === 'week'"
                 v-model="form[item.prop]"
+                type="week"
                 :placeholder="item.placeholder ? item.placeholder : '请选择'"
                 :value-format="item.valueFormat || 'yyyy-ww'"
                 :format="item.format || 'yyyy 第 WW 周'"
                 :disabled="item.disabled"
-                @change="handleChange"
                 clearable
+                @change="handleChange"
               >
               </el-date-picker>
               <!-- 日期范围 -->
 
               <el-date-picker
                 v-else-if="item.type === 'daterange'"
+                v-model="form[item.prop]"
                 type="daterange"
                 range-separator="至"
                 :start-placeholder="item.startPlaceholder"
                 :end-placeholder="item.endPlaceholder"
                 :unlink-panels="item.unlinkPanels"
-                v-model="form[item.prop]"
                 :value-format="item.valueFormat"
                 :format="item.format"
                 :disabled="item.disabled"
-                @change="handleChange"
                 clearable
+                @change="handleChange"
               >
               </el-date-picker>
 
               <!-- 日期时间 -->
               <el-date-picker
-                v-model="form[item.prop]"
                 v-else-if="item.type === 'datetime'"
+                v-model="form[item.prop]"
                 type="datetime"
                 :placeholder="item.placeholder ? item.placeholder : '请选择'"
                 clearable
@@ -351,8 +354,8 @@
             </template>
           </div>
           <span
-            class="important_field"
             v-if="item.importantField && !vwForm.detail"
+            class="important_field"
             >{{ item.importantFieldDesc || "*" }}</span
           >
         </div>
@@ -361,9 +364,9 @@
     <dialog-tooth-bit
       v-if="item.toothBit"
       ref="dialog"
+      v-model="form[item.prop]"
       append-to-body
       title="牙位选择"
-      v-model="form[item.prop]"
     ></dialog-tooth-bit>
   </el-row>
 </template>
@@ -383,6 +386,9 @@ export default {
   name: "FormItemSelf",
   components: { ElUploadSelf, FormItemText, DialogToothBit },
   inject: {
+    showIndex: {
+      default: false,
+    },
     vwForm: {
       default: {},
     },
@@ -408,6 +414,7 @@ export default {
       default: false,
     },
     columns: Array,
+    columnIndex: Number,
     group: Array,
     type: String,
   },
@@ -438,6 +445,14 @@ export default {
       return this.getPatientId ? this.getPatientId() : ""
     },
   },
+  created() {
+    this.timerangeReset()
+    this.numberReset()
+    this.checkboxReset()
+  },
+  mounted() {
+    this.showFormItem()
+  },
   methods: {
     scrollToView() {
       if (this.$refs["JY_LCYY"]) {
@@ -655,26 +670,36 @@ export default {
       this.handleAlgorithm()
     },
   },
-  created() {
-    this.timerangeReset()
-    this.numberReset()
-    this.checkboxReset()
-  },
-  mounted() {
-    this.showFormItem()
-  },
 }
 </script>
 
 <style lang="scss" scoped>
 .custom-form-item {
   background: white;
-  margin: 3px;
+  border-bottom: 1px solid #ccc;
+  // margin: 3px;
+
+  .el-col {
+    height: 100%;
+    height: 53px;
+    display: flex;
+    align-items: center;
+  }
+  .formIndex {
+    min-width: 53px;
+    height: 100%;
+    background: #fafafa;
+    border-right: 1px solid #ccc;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    // margin-right: 20px;
+  }
   &.isDefects {
     border: 1px solid red;
   }
   ::v-deep .el-form-item {
-    padding: 10px 2px;
+    padding: 10px 0 10px 20px;
     margin-bottom: 0px;
   }
   .toothBit {
@@ -764,7 +789,7 @@ export default {
 
   .empty-tip {
     ::v-deep .el-form-item__label {
-      color: red;
+      color: #333333;
     }
   }
 

src/components/FormComponents/CustomForm/index.vue

@@ -109,7 +109,8 @@ export default {
   name: "CustomForm",
   components: { FormContent },
   props: {
-    options: {  //配置 数据
+    options: {
+      //配置 数据
       type: Object,
       default: () => {
         return {}
@@ -318,19 +319,36 @@ export default {
 <style lang="scss" scoped>
 .avue-form-self {
   padding: 0 11px;
-
   ::v-deep .el-collapse {
     border: none;
-
-    .el-collapse-item__header.is-active {
-      border-bottom-color: #ebeef5;
+    .el-collapse-item {
+      &:nth-child(1) {
+        border-top: 1px solid #e5e5e5;
+      }
+    }
+    .el-collapse-item__content {
+      padding-bottom: 0px;
+    }
+    .el-collapse-item__header {
+      background: #fafafa;
+      text-indent: 20px;
+      border: 1px solid #e5e5e5;
+      border-bottom-color: #ccc;
+      border-top: 0px;
+      font-size: 14px;
+      font-family: AlibabaPuHuiTiM;
+      color: #333333;
     }
     .el-collapse-item__wrap {
       border: none;
       padding: 10px;
+      border-left: 1px solid #e5e5e5;
+      border-right: 1px solid #e5e5e5;
+      // border-bottom: 1px solid #e5e5e5 !important;
+      padding: 0px;
       &:hover {
-        background-color: #ecf8ff;
-        outline: 1px dashed #ccc;
+        // background-color: #ecf8ff;
+        // outline: 1px dashed #ccc;
       }
     }
     .el-collapse-item__header {

src/views/screening/ScreeningAdd.vue

@@ -9,11 +9,18 @@ export default {
   components: {
     ConfigForms,
   },
+  provide() {
+    const showIndex = true
+
+    return {
+      showIndex,
+    }
+  },
   data() {
     return {}
   },
-  methods: {},
   created() {},
+  methods: {},
 }
 </script>
 

src/views/screening/components/FormTab.vue

@@ -306,6 +306,7 @@ export default {
 .el-main {
   position: relative;
   padding: 0;
+
   .arrow {
     position: absolute;
     right: 0;