互联网电视（版权事件备案，频道上线审批）列表显示、输入校验

src/pages/main/iptv/index.vue

@@ -51,18 +51,19 @@
                 <div v-loading="loading">
                     <el-form :model="infolist" ref="infolist" :rules="rules" style="height: 60vh;overflow-y: scroll;" >
                         <div class="info-line">
-                            <el-form-item prop="recordName">
-                                <span><i>*</i>备案名称</span>
+                            <span><i>*</i>备案名称</span>
+                            <el-form-item prop="recordName" class="form-item">
+
                                 <el-input v-if="!disableStatus"  v-model.trim="infolist.recordName" placeholder="请输入备案名称"
-                                          :disabled="disableStatus" >
+                                          :disabled="disableStatus"  maxlength="60" >
                                 </el-input>
                                 <div v-if="disableStatus" class="el-descriptions">{{infolist.recordName}}</div>
                             </el-form-item>
                         </div>
 
                         <div class="info-line">
-                            <el-form-item prop="eventType">
-                                <span><i>*</i>事件类型</span>
+                            <span><i>*</i>事件类型</span>
+                            <el-form-item prop="eventType" class="form-item">
                                 <el-select
                                     v-if="!disableStatus"
                                     v-model="infolist.eventType" :disabled="disableStatus"
@@ -76,55 +77,61 @@
                         </div>
 
                         <div class="info-line">
-                            <el-form-item prop="fileFrom">
-                                <span>来文公司</span>
+                            <span>来文公司</span>
+                            <el-form-item prop="fileFrom" class="form-item">
+
                                 <el-input  v-model="infolist.fileFrom"
-                                v-if="!disableStatus" placeholder="请输入来文公司" ></el-input>
+                                v-if="!disableStatus" placeholder="请输入来文公司" maxlength="60"></el-input>
                                 <div v-if="disableStatus" class="el-descriptions">{{infolist.fileFrom}}</div>
                             </el-form-item>
                         </div>
 
                         <div class="info-line">
-                            <el-form-item prop="fileTime">
-                                <span>来函时间以及形式</span>
+                            <span>来函时间以及形式</span>
+                            <el-form-item prop="fileTime" class="form-item">
+
                                 <el-input v-if="!disableStatus" v-model="infolist.fileTime"
-                                :disabled="disableStatus" placeholder="请输入来函时间以及形式" ></el-input>
+                                :disabled="disableStatus" placeholder="请输入来函时间以及形式"  maxlength="120"></el-input>
                                 <div v-if="disableStatus" class="el-descriptions">{{infolist.fileTime}}</div>
                             </el-form-item>
                         </div>
 
                         <div class="info-line">
-                            <el-form-item prop="fileAppeal">
-                                <span>来函诉求</span>
+                            <span>来函诉求</span>
+                            <el-form-item prop="fileAppeal" class="form-item">
+
                                 <el-input v-if="!disableStatus" v-model="infolist.fileAppeal"
-                                :disabled="disableStatus" placeholder="请输入来函诉求" ></el-input>
+                                :disabled="disableStatus" placeholder="请输入来函诉求" maxlength="500"></el-input>
                                 <div v-if="disableStatus" class="el-descriptions">{{infolist.fileAppeal}}</div>
                             </el-form-item>
                         </div>
 
                         <div class="info-line">
-                            <el-form-item prop="contentProvider">
-                                <span>涉及内容提供方</span>
+                            <span>涉及内容提供方</span>
+                            <el-form-item prop="contentProvider" class="form-item">
+
                                 <el-input v-if="!disableStatus" v-model="infolist.contentProvider"
-                                :disabled="disableStatus" placeholder="请输入涉及内容提供方"  ></el-input>
+                                :disabled="disableStatus" placeholder="请输入涉及内容提供方"  maxlength="120" ></el-input>
                                 <div v-if="disableStatus" class="el-descriptions">{{infolist.contentProvider}}</div>
                             </el-form-item>
                         </div>
 
                         <div class="info-line">
-                            <el-form-item prop="docNumber">
-                                <span>转派文件编号</span>
+                            <span>转派文件编号</span>
+                            <el-form-item prop="docNumber" class="form-item">
+
                                 <el-input v-if="!disableStatus" v-model="infolist.docNumber"
-                                :disabled="disableStatus" placeholder="请输入转派文件编号" ></el-input>
+                                :disabled="disableStatus" placeholder="请输入转派文件编号"  maxlength="60"></el-input>
                                 <div v-if="disableStatus" class="el-descriptions">{{infolist.docNumber}}</div>
                             </el-form-item>
                         </div>
 
                         <div class="info-line">
-                            <el-form-item prop="providerReplytime" >
-                                <span>内容方处理情况<br/>以及回复的时间</span>
+                            <span>内容方处理情况<br/>以及回复的时间</span>
+                            <el-form-item prop="providerReplytime" class="form-item">
+
                                 <el-input  v-if="!disableStatus" v-model="infolist.providerReplytime"
-                                :disabled="disableStatus" placeholder="请输入内容方处理情况以及回复时间"  ></el-input>
+                                :disabled="disableStatus" placeholder="请输入内容方处理情况以及回复时间"   maxlength="500"></el-input>
                                 <div v-if="disableStatus" class="el-descriptions">{{infolist.providerReplytime}}</div>
                             </el-form-item>
                         </div>
@@ -174,6 +181,9 @@ export default {
             if (!this.infolist.recordName) {
                 callback(new Error('不能为空'))
             } else {
+                if (value.length>=60){
+                    callback(new Error('不能超过60个字'))
+                }
                 callback()
             }
         }
@@ -184,6 +194,66 @@ export default {
                 callback()
             }
         }
+        const fileFromRule = (rule, value, callback) => {
+            if (!this.infolist.fileFrom) {
+                callback(new Error('不能为空'))
+            } else {
+                if (value.length>=60){
+                    callback(new Error('不能超过60个字'))
+                }
+                callback()
+            }
+        }
+        const fileTimeRule = (rule, value, callback) => {
+            if (!this.infolist.fileTime) {
+                callback(new Error('不能为空'))
+            } else {
+                if (value.length>=120){
+                    callback(new Error('不能超过120个字'))
+                }
+                callback()
+            }
+        }
+        const fileAppealRule = (rule, value, callback) => {
+            if (!this.infolist.fileAppeal) {
+                callback(new Error('不能为空'))
+            } else {
+                if (value.length>=500){
+                    callback(new Error('不能超过500个字'))
+                }
+                callback()
+            }
+        }
+        const contentProviderRule = (rule, value, callback) => {
+            if (!this.infolist.contentProvider) {
+                callback(new Error('不能为空'))
+            } else {
+                if (value.length>=120){
+                    callback(new Error('不能超过120个字'))
+                }
+                callback()
+            }
+        }
+        const docNumberRule = (rule, value, callback) => {
+            if (!this.infolist.docNumber) {
+                callback(new Error('不能为空'))
+            } else {
+                if (value.length>=60){
+                    callback(new Error('不能超过60个字'))
+                }
+                callback()
+            }
+        }
+        const providerReplytimeRule = (rule, value, callback) => {
+            if (!this.infolist.providerReplytime) {
+                callback(new Error('不能为空'))
+            } else {
+                if (value.length>=500){
+                    callback(new Error('不能超过500个字'))
+                }
+                callback()
+            }
+        }
         const urls = {
             uploadUrl:'/market/iptv/upload',
             downfileUrl:'/market/iptv/downfile'
@@ -234,6 +304,36 @@ export default {
                     required: true,
                     trigger: 'change',
                     validator: eventTypeRule
+                }],
+                fileFrom: [{
+                    required: true,
+                    trigger: 'change',
+                    validator: fileFromRule
+                }],
+                fileTime: [{
+                    required: true,
+                    trigger: 'change',
+                    validator: fileTimeRule
+                }],
+                fileAppeal: [{
+                    required: true,
+                    trigger: 'change',
+                    validator: fileAppealRule
+                }],
+                contentProvider: [{
+                    required: true,
+                    trigger: 'change',
+                    validator: contentProviderRule
+                }],
+                docNumber: [{
+                    required: true,
+                    trigger: 'change',
+                    validator: docNumberRule
+                }],
+                providerReplytime: [{
+                    required: true,
+                    trigger: 'change',
+                    validator: providerReplytimeRule
                 }]
             },
             fileInfo: {
@@ -579,20 +679,6 @@ export default {
 <style scoped lang="scss">
 @import "../../../assets/style";
 
-.tab-long {
-    height: 22px;
-    float: left;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    /* 将对象作为弹性伸缩盒子模型显示 */
-    -webkit-line-clamp: 1;
-    /* 控制最多显示几行 */
-    -webkit-box-orient: vertical;
-    /* 设置或检索伸缩盒对象的子元素的排列方式 */
-}
-
-
 .titbox {
     div {
         float: right;
@@ -605,6 +691,14 @@ export default {
     }
 }
 
+.el-table__row.to-do {
+    background: rgb(248, 207, 133);
+}
+
+.el-table .success-row {
+    background: #f0f9eb;
+}
+
 .tabbox {
     margin-top: 16px;
 }
@@ -619,7 +713,6 @@ export default {
     display: block;
     padding-left: 20px;
 
-
     div {
         width: 100%;
         display: inline-block;
@@ -628,21 +721,29 @@ export default {
     span {
         width: 120px;
         display: inline-block;
+        padding-top: 10px;
         text-align: left;
         line-height:15px;
+        vertical-align: top;
 
         i {
             color: red;
             display: inline-block;
             padding-right: 5px;
+
         }
     }
 
-    .el-select,
-    .el-input {
+    .form-item{
         width: calc(100% - 140px);
     }
 
+    .el-select,.el-textarea,
+    .el-input {
+        width: 100%;
+    }
+
+
     .tree
     {
         width: calc(100% - 100px);
@@ -656,11 +757,21 @@ export default {
         padding-left: 10px;
         height: 100%;
         line-height:30px;
-        width: calc(100% - 140px);
+        width: 100%;
         border-radius: 5px;
         min-height:35px;
+
     }
 
+    .el-radio-group{
+        border: 1px solid #ddd;
+        padding-top: 12px;
+        padding-left: 20px;
+        height: 100%;
+        line-height:30px;
+        width: 100%;
+        border-radius: 5px;
+    }
 
 }
 
@@ -680,5 +791,9 @@ export default {
     }
 }
 
+pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
 
 </style>

src/pages/main/iptv/planApproval.vue

@@ -829,6 +829,9 @@ export default {
     }
 }
 
-
+pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
 
 </style>