更正登录 keyup 报错， 自定义表单回显完成

dsk-operate-ui/src/components/DskCustomItemRender/index.vue

 <template>
-  <div class="dsk-custom-item-render">
+  <div class="dsk-custom-item-render" :class="classCreate(comCustomItem.comType)">
+    <!-- 编辑模式 -->
     <el-form-item class="dsk-custom-form-render-item" :prop="validatorTarget" :rules="validatorRules(comCustomItem)">
-      <!-- 单行文本类型 -->
-      <el-input v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder" clearable
-        v-if="comCustomItem.comType == 'text'"></el-input>
-      <!-- 多行文本类型 -->
-      <el-input type="textarea" v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder"
-        :show-word-limit="false" clearable v-if="comCustomItem.comType == 'textarea'"></el-input>
-      <!-- 下拉框类型 -->
-      <el-select v-model="comCustomItem.componentAttribute.value" :multiple="comCustomItem.formAttribute.isMultiple"
-        :collapse-tags="comCustomItem.formAttribute.isMultiple" :placeholder="comCustomItem.componentAttribute.placeholder"
-        v-if="comCustomItem.comType == 'select'">
-        <el-option v-for="(item,index) in comCustomItem.formAttribute.selectOptions" :key="item.id" :label="item.value" :value="item.value">
-        </el-option>
-      </el-select>
-      <!-- 时间类型 -->
-      <el-date-picker v-model="comCustomItem.componentAttribute.value" type="datetime" :value-format="'yyyy-MM-dd HH:mm:ss'"
-        :placeholder="comCustomItem.componentAttribute.placeholder" v-if="comCustomItem.comType == 'date'">
-      </el-date-picker>
-      <!-- 电话类型 -->
-      <el-input v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder" clearable
-        v-if="comCustomItem.comType == 'phone'"></el-input>
-      <!-- 电子邮箱类型 -->
-      <dsk-email-input v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder" :clearable="true"
-        v-if="comCustomItem.comType == 'email'"></dsk-email-input>
+      <template v-if="isModify">
+        <!-- 单行文本类型 -->
+        <el-input v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder" clearable
+          v-if="comCustomItem.comType == 'text'"></el-input>
+        <!-- 多行文本类型 -->
+        <el-input type="textarea" v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder"
+          :show-word-limit="false" clearable v-if="comCustomItem.comType == 'textarea'"></el-input>
+        <!-- 下拉框类型 -->
+        <el-select v-model="comCustomItem.componentAttribute.value" :multiple="comCustomItem.formAttribute.isMultiple"
+          :collapse-tags="comCustomItem.formAttribute.isMultiple" :placeholder="comCustomItem.componentAttribute.placeholder"
+          v-if="comCustomItem.comType == 'select'">
+          <el-option v-for="(item,index) in comCustomItem.formAttribute.selectOptions" :key="item.id" :label="item.value" :value="item.value">
+          </el-option>
+        </el-select>
+        <!-- 时间类型 -->
+        <el-date-picker v-model="comCustomItem.componentAttribute.value" type="datetime" :value-format="'yyyy-MM-dd HH:mm:ss'"
+          :placeholder="comCustomItem.componentAttribute.placeholder" v-if="comCustomItem.comType == 'date'">
+        </el-date-picker>
+        <!-- 电话类型 -->
+        <el-input v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder" clearable
+          v-if="comCustomItem.comType == 'phone'"></el-input>
+        <!-- 电子邮箱类型 -->
+        <dsk-email-input v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder"
+          :clearable="true" v-if="comCustomItem.comType == 'email'"></dsk-email-input>
+      </template>
       <!-- 图片类型 -->
       <dsk-photo-input v-model="comCustomItem.componentAttribute.value" v-if="comCustomItem.comType == 'photo'"
-        :limit="comCustomItem.formAttribute.limit"></dsk-photo-input>
+        :limit="comCustomItem.formAttribute.limit" :disabled="!isModify"></dsk-photo-input>
       <!-- 文件类型 -->
       <dsk-file-input v-model="comCustomItem.componentAttribute.value" v-if="comCustomItem.comType == 'file'"
-        :limit="comCustomItem.formAttribute.limit"></dsk-file-input>
+        :limit="comCustomItem.formAttribute.limit" :disabled="!isModify"></dsk-file-input>
+
+      <!-- 详情模式下 -->
+      <template v-if="!isModify && detailTypes.includes(comCustomItem.comType)">
+        <div class="dsk-cutom-form-render-detail-item">
+          {{detailRender(comCustomItem)}}
+        </div>
+      </template>
     </el-form-item>
+
   </div>
 </template>
 <script>
@@ -93,7 +104,8 @@ export default {
       comCustomModuleIndex: this.customModuleIndex,
       comCustomRowIndex: this.customRowIndex,
       comCustomItemIndex: this.customItemIndex,
-      comIsModify: this.isModify
+      comIsModify: this.isModify,
+      detailTypes: ["text", "textarea", "select", "date", "phone", "email"]
     };
   },
   //可访问data属性
@@ -112,7 +124,19 @@ export default {
     // 验证规则
     validatorRules(item) {
       if (!item.formAttribute) return {};
-      return item.formAttribute.required ? item.formAttribute.requiredRules ? item.formAttribute.requiredRules : { required: true } : item.formAttribute.rules;
+      return item.formAttribute.required ? item.formAttribute.requiredRules ? item.formAttribute.requiredRules : { required: true, message: `${item.formAttribute.label}不能为空` } : item.formAttribute.rules;
+    },
+    classCreate(comType) {
+      const classParams = {
+        [`custom-render-item-${comType}`]: true
+      };
+      return classParams;
+    },
+    detailRender(item) {
+      const value = item.componentAttribute.value;
+      const valueType = Object.prototype.toString.call(value);
+      if (valueType === "[object String]") return value || value == "0" ? value : "-";
+      if (valueType === "[object Array]") return value?.length ? value.join(",") : "-";
     }
   },
 }
@@ -122,5 +146,32 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
+
+  &.custom-render-item-file,
+  &.custom-render-item-photo {
+    ::v-deep .dsk-photo-input-container,
+    .dsk-file-input-container {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      padding-left: 12px;
+      box-sizing: border-box;
+    }
+  }
+
+  ::v-deep &.custom-render-item-textarea {
+  }
+
+  ::v-deep .dsk-custom-form-render-item {
+    .dsk-cutom-form-render-detail-item {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      height: 40px;
+      line-height: 40px;
+      padding: 9px 12px;
+      box-sizing: border-box;
+    }
+  }
 }
 </style>

dsk-operate-ui/src/components/DskFileInput/index.vue

 <template>
   <div class="dsk-file-input-container" :class="{'upload-is-disabled' : disabled}">
-    <div class="dsk-photo-input-inner" @click.stop="uploadFile" v-if="!comFileList.length">
+    <div class="dsk-file-input-inner" @click.stop="uploadFile" v-if="!comFileList.length">
       <i class="el-icon-plus"></i>
       <span>上传文件</span>
     </div>
     <el-badge :value="comFileList.length" class="item" type="primary" v-if="comFileList.length" @click.native="showFileListDialog">
-      <div class="dsk-photo-input-inner" @click.stop="uploadFile">
+      <div class="dsk-file-input-inner" @click.stop="uploadFile">
         <i class="el-icon-plus"></i>
         <span>上传文件</span>
       </div>
@@ -14,7 +14,7 @@
       ref="elUploadDskUploadIns" class="el-upload-dsk-upload-ins"></el-upload>
 
     <el-dialog title="已上传文件" :visible.sync="fileListDialog" width="800px" @close="fileListDialogClose" :close-on-click-modal="false"
-      class="dsk-upload-dialog">
+      class="dsk-upload-file-dialog" append-to-body>
       <el-table :data="comFileList.slice((pageInfo.currentPage -1) * pageInfo.pageSize, pageInfo.pageSize * pageInfo.currentPage)" border stripe>
         <el-table-column prop="fileName" label="文件名称"></el-table-column>
         <el-table-column prop="type" label="文件类型"></el-table-column>
@@ -166,7 +166,7 @@ export default {
   height: 32px;
 
   &.upload-is-disabled {
-    .dsk-photo-input-inner {
+    .dsk-file-input-inner {
       cursor: not-allowed;
       &:hover {
         color: rgba(35, 35, 35, 0.8);
@@ -175,7 +175,7 @@ export default {
     }
   }
 
-  .dsk-photo-input-inner {
+  .dsk-file-input-inner {
     width: 106px;
     height: 32px;
     background: #ffffff;
@@ -210,9 +210,10 @@ export default {
     cursor: pointer;
     border-color: #0081ff;
   }
-
-  ::v-deep .dsk-upload-dialog {
-    @import "@/assets/styles/dsk-upload-dialog.scss";
-  }
+}
+</style>
+<style lang="scss">
+.dsk-upload-file-dialog {
+  @import "@/assets/styles/dsk-upload-dialog.scss";
 }
 </style>

dsk-operate-ui/src/components/DskPhotoInput/index.vue

@@ -14,7 +14,7 @@
       ref="elUploadDskUploadIns" class="el-upload-dsk-upload-ins"></el-upload>
 
     <el-dialog title="已上传图片" :visible.sync="fileListDialog" width="800px" @close="fileListDialogClose" :close-on-click-modal="false"
-      class="dsk-upload-dialog">
+      class="dsk-upload-photo-dialog" append-to-body>
       <el-table :data="comFileList.slice((pageInfo.currentPage -1) * pageInfo.pageSize, pageInfo.pageSize * pageInfo.currentPage)" border stripe>
         <el-table-column prop="fileName" label="图片名称"></el-table-column>
         <el-table-column prop="type" label="图片类型"></el-table-column>
@@ -34,7 +34,7 @@
     </el-dialog>
 
     <el-dialog title="图片预览" :visible.sync="photoViewDialog" width="800px" @close="photoViewDialogClose" :close-on-click-modal="false"
-      class="dsk-upload-dialog">
+      class="dsk-upload-view-dialog" append-to-body>
       <el-image :src="viewTemp.url" fit="fill"></el-image>
     </el-dialog>
 
@@ -230,9 +230,11 @@ export default {
     cursor: pointer;
     border-color: #0081ff;
   }
-
-  ::v-deep .dsk-upload-dialog {
-    @import "@/assets/styles/dsk-upload-dialog.scss";
-  }
+}
+</style>
+<style lang="scss">
+.dsk-upload-photo-dialog,
+.dsk-upload-view-dialog {
+  @import "@/assets/styles/dsk-upload-dialog.scss";
 }
 </style>

dsk-operate-ui/src/views/consultingOrgManagement/components/EnterpriseList/detail/consultingAgency.vue

@@ -225,7 +225,8 @@ export default {
       formTemplateData: {},
       form: {
         subfieldModuleList: []
-      }
+      },
+      oldSubfieldModuleList: []
     };
   },
   //可访问data属性
@@ -290,6 +291,7 @@ export default {
         if (template) {
           console.log(template);
           const table = this.createTemplateTable(template.subfieldModuleList);
+          this.oldSubfieldModuleList = cloneDeep(table);
           this.$set(this.form, "subfieldModuleList", table);
         }
       } catch (error) {
@@ -353,6 +355,7 @@ export default {
 
     cancelModify() {
       this.comProjectDetailInfo = JSON.parse(JSON.stringify(this.oldComProjectDetailInfo));
+      this.$set(this.form, "subfieldModuleList", cloneDeep(this.oldSubfieldModuleList));
     },
     async searchConsulting(keywords) {
       try {

dsk-operate-ui/src/views/login.vue

@@ -77,7 +77,7 @@
             type="text"
             auto-complete="off"
             placeholder="请输入登录账号"
-            :onkeyup="loginForm.username = loginForm.username.replace(/\s+/g,'')"
+           @keyup="loginForm.username = loginForm.username.replace(/\s+/g,'')"
           >
             <img class="img" slot="prefix" src="../assets/images/user.png"/>
           </el-input>
@@ -89,7 +89,7 @@
             auto-complete="off"
             placeholder="请输入账号密码"
             @keyup.enter.native="handleLogin"
-            :onkeyup="loginForm.password = loginForm.password.replace(/\s+/g,'')"
+            @keyup="loginForm.password = loginForm.password.replace(/\s+/g,'')"
           >
             <img class="img" slot="prefix" src="../assets/images/password.png"/>
           </el-input>
@@ -101,7 +101,7 @@
             placeholder="请输入图形验证码"
             style="width: 290px;float: left;"
             @keyup.enter.native="handleLogin"
-            :onkeyup="loginForm.code = loginForm.code.replace(/\s+/g,'')"
+            @keyup="loginForm.code = loginForm.code.replace(/\s+/g,'')"
           >
             <img class="img" slot="prefix" src="../assets/images/txyzm.png"/>
           </el-input>