添加删格布局下表单样式调整

src/assets/styles/index.scss

@@ -4,6 +4,7 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './btn.scss';
+@import './page-form.scss';
 
 body {
   height: 100%;

src/assets/styles/page-form.scss

+.page-form.el-form--inline {
+  .el-form-item {
+    display: flex;
+    .el-form-item__content {
+      flex: 1;
+      .el-date-editor {
+        width: 100%;
+      }
+    }
+  }
+}

src/components/TipLabel/index.vue

+<template>
+  <el-tooltip :content="tip || title">
+    <div class="form-label-tip">{{ title }}</div>
+  </el-tooltip>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String,
+    tip: String,
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style scoped>
+.form-label-tip {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

src/main.js

@@ -21,6 +21,7 @@ import { getConfigKey } from "@/api/system/config";
 import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree, formatMoney } from "@/utils/ruoyi";
 
 
+import TipLabel from '@/components/TipLabel/index.vue'
 import PageTitle from '@/components/Page/PageTitle.vue'
 import PageWrapper from '@/components/Page/PageWrapper.vue'
 // 分页组件
@@ -75,6 +76,7 @@ Vue.component('SapPropertyData', SapPropertyData)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
+Vue.component('TipLabel', TipLabel)
 
 Vue.use(directive)
 Vue.use(plugins)

src/views/mes/proofing/proofingInfo.vue

@@ -16,15 +16,17 @@
 
     <PageWrapper>
       <el-form
+        class="page-form"
         :model="form"
         ref="form"
         size="small"
         :inline="true"
-        label-width="8em"
+        label-width="100px"
       >
         <el-row>
-          <el-col :md="8" :xs="12">
-            <el-form-item label="申请单编码" prop="prototypeRequestCode">
+          <el-col :md="6" :sm="12" :xs="12">
+            <el-form-item prop="prototypeRequestCode">
+              <template slot="label"> 申请单编码 </template>
               <el-input
                 disabled
                 v-model="form.prototypeRequestCode"
@@ -33,7 +35,7 @@
             </el-form-item>
           </el-col>
 
-          <el-col :md="8" :xs="12" style="height: 50.5px">
+          <el-col :md="6" :sm="12" :xs="12">
             <el-form-item label="产品" prop="itemId">
               <el-input
                 v-model="form.itemName"
@@ -49,7 +51,7 @@
               <ItemSelect ref="ItemSelectRef" @onSelected="onItemSelect" />
             </el-form-item>
           </el-col>
-          <el-col :md="8" :xs="12" style="height: 50.5px">
+          <el-col :md="6" :sm="12" :xs="12">
             <el-form-item label="工艺路线" prop="routeId">
               <el-input
                 v-model="form.routeName"
@@ -68,9 +70,7 @@
               />
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
-          <el-col :md="8" :xs="12">
+          <el-col :md="6" :sm="12" :xs="12">
             <el-form-item label="简称" prop="abbreviation">
               <el-input
                 v-model="form.abbreviation"
@@ -78,7 +78,9 @@
               ></el-input>
             </el-form-item>
           </el-col>
-          <el-col :md="8" :xs="12">
+        </el-row>
+        <el-row>
+          <el-col :md="6" :sm="12" :xs="12">
             <el-form-item label="样品英文名" prop="enName">
               <el-input
                 v-model="form.enName"
@@ -86,14 +88,14 @@
               ></el-input>
             </el-form-item>
           </el-col>
-          <el-col :md="8" :xs="12">
+          <el-col :md="6" :sm="12" :xs="12">
             <el-form-item label="样品数量" prop="num">
               <el-input v-model="form.num" placeholder="请输入样品数量">
                 <template slot="suffix">{{ form.unit }}</template>
               </el-input>
             </el-form-item>
           </el-col>
-          <el-col :md="8" :xs="12">
+          <el-col :md="6" :sm="12" :xs="12">
             <el-form-item label="打样形式" prop="type">
               <el-input
                 v-model="form.type"
@@ -101,7 +103,7 @@
               ></el-input>
             </el-form-item>
           </el-col>
-          <el-col :md="8" :xs="12">
+          <el-col :md="6" :sm="12" :xs="12">
             <el-form-item label="分配方式" prop="modality">
               <el-input
                 v-model="form.modality"
@@ -109,7 +111,7 @@
               ></el-input>
             </el-form-item>
           </el-col>
-          <el-col :md="8" :xs="12">
+          <el-col :md="6" :sm="12" :xs="12">
             <el-form-item label="表面处理" prop="surfaceTreatment">
               <el-input
                 v-model="form.surfaceTreatment"
@@ -117,7 +119,7 @@
               ></el-input>
             </el-form-item>
           </el-col>
-          <el-col :md="8" :xs="12">
+          <el-col :md="6" :sm="12" :xs="12">
             <el-form-item label="NG原因" prop="ngReason">
               <el-input
                 v-model="form.ngReason"
@@ -125,8 +127,11 @@
               ></el-input>
             </el-form-item>
           </el-col>
-          <el-col :md="8" :xs="12">
-            <el-form-item label="计划完成日期" prop="plannedFinishDate">
+          <el-col :md="6" :sm="12" :xs="12">
+            <el-form-item prop="plannedFinishDate">
+              <template slot="label">
+                <TipLabel title="完成日期" tip="计划完成日期" />
+              </template>
               <el-date-picker
                 value-format="yyyy-MM-dd"
                 v-model="form.plannedFinishDate"
@@ -134,8 +139,11 @@
               ></el-date-picker>
             </el-form-item>
           </el-col>
-          <el-col :md="8" :xs="12">
-            <el-form-item label="版面需求时间" prop="plannedLayoutDate">
+          <el-col :md="6" :sm="12" :xs="12">
+            <el-form-item prop="plannedLayoutDate">
+              <template slot="label">
+                <TipLabel title="版面时间" tip="版面需求时间" />
+              </template>
               <el-date-picker
                 value-format="yyyy-MM-dd"
                 v-model="form.plannedLayoutDate"
@@ -143,7 +151,7 @@
               ></el-date-picker>
             </el-form-item>
           </el-col>
-          <el-col :md="8" :xs="12">
+          <el-col :md="6" :sm="12" :xs="12">
             <el-form-item label="测试标准" prop="testStandard">
               <el-input
                 v-model="form.testStandard"
@@ -153,7 +161,7 @@
           </el-col>
         </el-row>
         <el-row>
-          <el-col :md="8" :xs="12">
+          <el-col :md="6" :sm="12" :xs="12">
             <el-form-item label="备注" prop="remark">
               <el-input
                 type="textarea"
@@ -360,4 +368,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss"></style>