超过字符省略

src/views/system/MaterialRegistration.vue

@@ -97,6 +97,7 @@
   import {JeecgListMixin} from '@/mixins/JeecgListMixin'
   import AddMaterialRegistration from './modules/AddMaterialRegistration'
   import DetailMaterialRegistration from './modules/DetailMaterialRegistration'
+  import JEllipsis from '@/components/jeecg/JEllipsis'
   import {
     managementList,
     managementAdd,
@@ -115,9 +116,11 @@ import moment from 'moment'
     components: {
     AddMaterialRegistration,
     DetailMaterialRegistration,
-    moment
+    moment,
+    JEllipsis
     },
     data() {
+       let ellipsis = (v, l = 10) => <j-ellipsis value={v} length={l} />
       return {
           queryParam:{   //查询条件
 
@@ -190,7 +193,8 @@ import moment from 'moment'
             title: '备注',
             align: "center",
             dataIndex: 'remarks',
-            width: 120
+            width: 120,
+            customRender: (t) => ellipsis(t),
           },
           {
             title: '来源',

src/views/system/modules/AddMaterialRegistration.vue

@@ -116,7 +116,7 @@
                  <a-input v-else placeholder="请输入" v-model="record.cost" @blur="changeCost(record)"/>
               </span>
               <span slot="remarks" slot-scope="text, record">
-                 <span v-if="record.state=='0'">{{record.remarks}}</span>
+                 <span v-if="record.state=='0'">{{record.remarks | ellipsis1}}</span>
                  <a-input v-else placeholder="请输入" v-model="record.remarks"/>
               </span>
                <span slot="operation" slot-scope="text, record,index">
@@ -171,7 +171,7 @@
                    />
               </span>
               <span slot="remarks" slot-scope="text, record">
-                 <span v-if="record.state=='0'">{{record.remarks}}</span>
+                 <span v-if="record.state=='0'">{{record.remarks | ellipsis1}}</span>
                  <a-input v-else placeholder="请输入" v-model="record.remarks"/>
               </span>
               <span slot="operation" slot-scope="text, record,index">
@@ -199,13 +199,17 @@ import {
     enterpriseEDelete
 } from '@api/oa/cd-material-registration'
 import moment from 'moment'
+  import JEllipsis from '@/components/jeecg/JEllipsis'
+
 
 export default {
     name: 'AddMaterialRegistration',
     components: {
-        moment
+        moment,
+        JEllipsis
     },
     data () {
+      let ellipsis = (v, l = 10) => <j-ellipsis value={v} length={l} />
         return {
             visible:false,
             defult:'add',
@@ -214,7 +218,7 @@ export default {
               code:''
             },
             confirmLoading: false,
-             Columns:[
+            Columns:[
             
             {
             title: '主要信息编号',
@@ -328,6 +332,16 @@ export default {
     created () {
         
     },
+      filters: {
+                //文字数超出时，超出部分使用...
+                ellipsis1(value) {
+                    if (!value) return ''
+                    if (value.length > 20) {
+                        return value.slice(0, 20) + '...'
+                    }
+                    return value
+                }
+            },
     computed: {
        
     },

src/views/system/modules/DetailMaterialRegistration.vue

@@ -1,55 +1,81 @@
 <template>
 <a-modal
     title="详情"
-    width="55%"
+    width="85%"
     :closable="true"
     @cancel="close"
     @ok="handelOk"
     :visible="visible"
   >
    <a-card :bordered="false">
-     <a-spin :spinning="confirmLoading">
-      <a-form :model="formState"  >
-        <a-form-item label="编号" >
-          {{formState.code}}
-        </a-form-item>
-
-        <a-form-item label="设备名称"  >
-            {{formState.name}}
-        </a-form-item>
-        <a-form-item label="型号"  >
-            {{formState.model}}
-        </a-form-item>
-        <a-form-item label="购买日期"  >
-            {{formState.buyTime}}
-        </a-form-item>
-        <a-form-item label="购买数量"  >
-            {{formState.buyNum}}
-        </a-form-item>
-        <a-form-item label="单位"  >
-            {{formState.unit}}
-        </a-form-item>
-        <a-form-item label="购买金额"  >
-            {{formState.amount}}
-        </a-form-item>
-        <a-form-item label="使用者"  >
-            {{formState.useId}}
-        </a-form-item>
-        <a-form-item label="状态"  >
-            {{formState.type}}
-        </a-form-item>
-        <a-form-item label="供货方"  >
-            {{formState.supply}}
-        </a-form-item>
-        <a-form-item label="备注"  >
-            {{formState.remarks}}
-        </a-form-item>
-        <a-form-item label="来源"  >
-            {{formState.source}}
-        </a-form-item>
-      </a-form>
-    </a-spin>
-
+     <div class="table-page-search-wrapper">
+      <a-form-model layout="inline" ref="formRef" :model="formState" :rules="validatorRules">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="编号"  prop="code">
+                {{formState.code}}
+              </a-form-model-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="设备名称"  prop="name">
+                {{formState.name}}
+              </a-form-model-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="型号"  prop="model" >
+                {{formState.model}}
+              </a-form-model-item>
+            </a-col>
+            <a-col :md="6" :sm="8" >
+              <a-form-model-item label="购买日期" prop="buyTime" >
+                {{formState.buyTime}}
+              </a-form-model-item>
+            </a-col>
+            <a-col :md="6" :sm="8" >
+              <a-form-model-item label="购买数量"  prop="buyNum" >
+                {{formState.buyNum}}
+              </a-form-model-item>
+            </a-col>
+            <a-col :md="6" :sm="8"  >
+              <a-form-model-item label="单位"  prop="unit">
+                {{formState.unit}}
+              </a-form-model-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="购买金额" prop="amount" >
+                {{formState.amount}}
+              </a-form-model-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="使用者" prop="useId">
+                {{formState.useId}}
+               </a-form-model-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="状态"   prop="type">
+                {{formState.type}}
+              </a-form-model-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="供货方"   prop="supply">
+                {{formState.supply}}
+              </a-form-model-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="来源"  prop="source">
+                {{formState.source}}
+              </a-form-model-item>
+            </a-col>
+            </a-row>
+            <a-row :gutter="24">
+              <a-col :md="24" :sm="8"> 
+               <a-form-model-item label="备注信息" :labelCol="labelCol" :wrapperCol="wrapperCol" class="nresume" style="height:100px !important">
+                 {{formState.remarks}}
+               </a-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
     </a-card>
     <a-divider style="height: 1px; background-color: balck" />
 
@@ -86,15 +112,14 @@
 </template>
 
 <script>
-
-
-
+  import JEllipsis from '@/components/jeecg/JEllipsis'
 export default {
   name: 'DetailMaterialRegistration', 
   mixins: [],
   computed: {},
-  components: {  }, 
+  components: { JEllipsis}, 
   data() {
+    let ellipsis = (v, l = 10) => <j-ellipsis value={v} length={l} />
     return{
         visible:false,
          formState:{
@@ -137,7 +162,8 @@ export default {
             align: "center",
             dataIndex: 'remarks',
             width: 120,
-            scopedSlots: { customRender: 'remarks' },
+            // scopedSlots: { customRender: 'remarks' },
+            customRender: (t) => ellipsis(t),
           },
         ],
          Columns1:[
@@ -174,7 +200,8 @@ export default {
             align: "center",
             dataIndex: 'remarks',
             width: 120,
-            scopedSlots: { customRender: 'remarks' },
+            // scopedSlots: { customRender: 'remarks' },
+            customRender: (t) => ellipsis(t),
           },
         ],
         List:[],
@@ -264,24 +291,22 @@ export default {
 </script>
 
 <style lang="less" scoped>
-/deep/.ant-form{
-    display: flex !important;
-    width: 100%;
-    flex-wrap: wrap;
-    justify-content: center;
-}
+// /deep/.ant-form{
+//     display: flex !important;
+//     width: 100%;
+//     flex-wrap: wrap;
+//     justify-content: start;
+// }
 
-/deep/ .ant-form-item{
-    display: flex;
-    width: 24%;
-    justify-content: center;
-}
-/deep/ .ant-form-item-label{
-  width: 35%;
-}
-/deep/.ant-modal{
-    background-color: red !important;
-}
+// /deep/ .ant-form-item{
+//     display: flex;
+//     width: 24%;
+//     justify-content: start;
+//     margin-right: 1%;
+// }
+// /deep/ .ant-form-item-label{
+//   width: 21%;
+// }
 .table-title {
   margin: 0;
   border: 1px solid #e8e8e8;
@@ -295,7 +320,7 @@ export default {
   text-align: center;
 }
 .purchase-order-table{
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 }
 
 /deep/ .ant-card-body{
@@ -304,6 +329,44 @@ export default {
 /deep/ .ant-divider-horizontal{
   margin: 13px 0;
 }
+/deep/ .ant-card-body{
+      padding: 16px 32px !important;
+      margin-bottom: 1%;
+
+}
+/deep/ .ant-divider-horizontal{
+  margin: 13px 0;
+  margin-bottom: 30px;
+}
+// /deep/ .ant-form-item-control-wrapper{
+//   width: 80%;
+// }
+// .nresume{
+//   width: 100% !important;
+// }
+// /deep/ .nresume .ant-form-item-label{
+//   width: 5% !important;
+// }
+// /deep/ .nresume .ant-form-item-control-wrapper{
+//   width: 91% !important;
+// }
+/deep/ .nresume .ant-input{
+  height: 100px !important;
+}
+/deep/ .ant-modal-content {
+  background-color: #f0f2f5 !important;
+}
+/deep/ .ant-modal-footer {
+  background-color: #fff !important;
+}
+/deep/ .ant-modal-body{
+  margin: 0px !important;
+  padding: 0px 10px;
+  margin-top: 1% !important;
+}
+/deep/ .ant-card{
+  border-radius: 10px;
+}
 
 
 </style>