预览界面表单处理

src/assets/styles/yxk-admin.scss

@@ -613,11 +613,7 @@
     .el-select .el-input .el-select__caret{
       color: #fff;
     }
-    .el-select .el-input.is-disabled .el-input__inner,
-    .el-select .el-input.is-disabled .el-input__inner:hover,
-    .el-select .el-input.is-disabled .el-input__inner:focus{
-      border-color: #339cff;
-    }
+
   }
   .dialog-footer{
     margin: 30px auto 0 auto;
@@ -643,6 +639,11 @@
   .el-select {
     height: 36px;
   }
+  .el-select .el-input.is-disabled .el-input__inner,
+  .el-select .el-input.is-disabled .el-input__inner:hover,
+  .el-select .el-input.is-disabled .el-input__inner:focus{
+    border-color: #339cff;
+  }
 }
 
 // el-tree 最终节点不显示箭头

src/views/category/descriptionPreview/form.json

@@ -59,7 +59,7 @@
   "isInputClass": "date",
   "isInputLength": 200,
   "isFullRow": 0,
-  "isRequired": 0
+  "isRequired": 1
 },
 {
   "id": "8",
@@ -77,13 +77,13 @@
   "isInputClass": "textarea",
   "isInputLength": 510,
   "isFullRow": 1,
-  "isRequired": 0
+  "isRequired": 1
 },
 {
   "id": "10",
   "fieldName": "bgqx",
   "fieldCnName": "保管期限",
-  "isInputClass": "select",
+  "isInputClass": "date",
   "isInputLength": 200,
   "isFullRow": 0,
   "isRequired": 0

src/views/category/descriptionPreview/index.vue

@@ -89,7 +89,7 @@ export default {
     handleClose(done) {
       this.settingFormVisible = false
       this.previewFormVisible = false
-      this.editResetForm()
+      // this.editResetForm()
       done()
     },
     // 当前选中的字段

src/views/category/descriptionPreview/module/PreviewForm.vue

@@ -12,13 +12,23 @@
                 placeholder=""
                 :style="{ width: item.isInputLength+'px'}"
                 :disabled="isDisabled"
+                :validate-event="isDisabled"
               >
-                <el-option label="区域二" value="beijing" />
+                <el-option v-for="option in selectData" :key="option.id" :label="option.dicName" :value="option.dicName" />
               </el-select>
-              <!-- text  -->
-              <el-input v-if="item.isInputClass === 'text'" v-model="addOrUpdateForm[item.fieldName]" :style="{ width: item.isInputLength+'px'}" :disabled="isDisabled" />
-              <!-- number  -->
-              <el-input v-if="item.isInputClass === 'number'" v-model="addOrUpdateForm[item.fieldName]" type="number" :style="{ width: item.isInputLength+'px'}" :disabled="isDisabled" />
+              <!-- text / number / textarea / popover -->
+              <el-input
+                v-if="item.isInputClass !== 'select' && item.isInputClass !== 'date'"
+                v-model="addOrUpdateForm[item.fieldName]"
+                :type="item.isInputClass === 'popover'? 'text' : item.isInputClass"
+                :style="{ width: item.isInputLength+'px'}"
+                :rows="item.isInputClass === 'textarea' ? 3 : ''"
+                :class="{'input-popover':(item.isInputClass === 'popover')}"
+                :disabled="isDisabled"
+                :validate-event="isDisabled"
+              >
+                <i v-if="item.isInputClass === 'popover'" slot="suffix" class="el-input__icon iconfont icon-weibiaoti-2" @click="popoverVisible = true" />
+              </el-input>
               <!-- date -->
               <el-date-picker
                 v-if="item.isInputClass === 'date'"
@@ -30,18 +40,27 @@
                 :clearable="false"
                 :style="{ width: item.isInputLength+'px'}"
                 :disabled="isDisabled"
+                :validate-event="isDisabled"
               />
-              <!-- popover  -->
-              <el-input v-if="item.isInputClass === 'popover'" v-model="addOrUpdateForm[item.fieldName]" class="input-popover" :style="{ width: item.isInputLength+'px'}" :disabled="isDisabled">
-                <i slot="suffix" class="el-input__icon iconfont icon-weibiaoti-2" />
-              </el-input>
-              <!-- textarea  -->
-              <el-input v-if="item.isInputClass === 'textarea'" v-model="addOrUpdateForm[item.fieldName]" type="textarea" rows="3" :style="{ width: item.isInputLength+'px'}" :disabled="isDisabled" />
             </el-form-item>
           </el-col>
         </draggable>
       </el-form>
     </el-row>
+
+    <!-- 弹框形式的内容展示 -->
+    <el-dialog class="edit-form-dialog" :visible="popoverVisible" :before-close="handleClose" :close-on-click-modal="false" title="字典列表">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <el-table ref="table" :data="tableData" highlight-current-row style="width: 100%;">
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="dicName" label="字典名称" />
+          <el-table-column prop="dicCode" label="字典代码" />
+          <el-table-column prop="dicExplain" label="内容说明" />
+        </el-table>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -61,18 +80,27 @@ export default {
     return {
       formPreviewData: [],
       addOrUpdateForm: {},
-      rules: {}
+      rules: {},
+      tableData: [],
+      selectData: {},
+      popoverVisible: false
     }
   },
   mounted() {
     this.formPreviewData = formData
-    this.editrow()
+    this.editFormRow()
   },
   methods: {
-    editrow(row) {
+    editFormRow(row) {
       this.rules = {}
-      this.formPreviewData.map(x => {
-        this.rules[x.fieldName] = [{ required: x.isRequired === 1, message: '请输入' + x.fieldCnName, trigger: 'blur' }]
+      this.formPreviewData.map(item => {
+        this.rules[item.fieldName] = [
+          {
+            required: item.isRequired === 1,
+            message: (item.isInputClass === 'text' ? '请输入' : '请选择') + item.fieldCnName,
+            trigger: item.isInputClass === 'text' ? 'blur' : 'change'
+          }
+        ]
       })
       this.addOrUpdateForm = Object.assign({}, row)
     },
@@ -96,6 +124,10 @@ export default {
           return false
         }
       })
+    },
+    handleClose(done) {
+      this.popoverVisible = false
+      done()
     }
   }
 }