档案管理 页面编辑对话框显示

src/views/archivesManage/archivesList/archivesDetail.vue

@@ -27,15 +27,22 @@
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
         <el-form ref="form" :model="form" rules="rules" size="small" label-width="80px">
-          <!-- <el-form-item label="字典名称" prop="dicName">
-            <el-input v-model="form.dicName" style="width: 370px;" />
-          </el-form-item>
-          <el-form-item label="字典代码" prop="dicCode">
-            <el-input v-model="form.dicCode" style="width: 370px;" />
-          </el-form-item>
-          <el-form-item label="内容说明" prop="dicExplain">
-            <el-input v-model="form.dicExplain" style="width: 370px;" type="textarea" :rows="4" />
-          </el-form-item> -->
+          <el-col v-for="(item) in formPreviewData" :key="item.id" class="dragg-item" :span="item.isLine ? 24 : 12">
+            <el-form-item :label="item.fieldCnName" :prop="item.fieldName">
+              <!-- select  -->
+              <!--  :disabled="isDisabled":validate-event="isDisabled" -->
+              <el-select v-if="item.displayformatType === 'select'" v-model="form[item.fieldName]" placeholder="" :style="{ width: item.displayformatWidth+'px'}">
+                <el-option v-for="option in selectData" :key="option.id" :label="option.dicName" :value="option.dicName" />
+              </el-select>
+              <!-- text / number / textarea / popover -->
+              <!--  :disabled="isDisabled":validate-event="isDisabled" -->
+              <el-input v-if="item.displayformatType !== 'select' && item.displayformatType !== 'date'" v-model="form[item.fieldName]" :type="item.displayformatType === 'popover'? 'text' : item.displayformatType" :rows="item.displayformatType === 'textarea' ? 3 : ''" :class="{'input-popover':(item.displayformatType === 'popover')}" :style="{ width: item.displayformatWidth+'px'}">
+                <i v-if="item.displayformatType === 'popover'" slot="suffix" class="el-input__icon iconfont icon-weibiaoti-2" @click="popoverVisible = true" />
+              </el-input>
+              <!-- date -->
+              <el-date-picker v-if="item.displayformatType === 'date'" v-model="form[item.fieldName]" type="date" align="right" format="yyyy-MM-dd" placeholder="" :clearable="false" :style="{ width: item.displayformatWidth+'px'}" />
+            </el-form-item>
+          </el-col>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button type="text" @click="crud.cancelCU">取消</el-button>
@@ -43,6 +50,19 @@
         </div>
       </div>
     </el-dialog>
+    <!-- 弹框形式的内容展示 -->
+    <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>
     <el-dialog title="删除字典内容" :visible.sync="deleteVisible" :before-close="handleClose">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
@@ -128,7 +148,8 @@ export default {
       tableDisplayFields: [],
       getTableDisplayFieldsLoading: false,
       formPreviewData: [],
-      rules: {}
+      rules: {},
+      popoverVisible: false
     }
   },
   methods: {
@@ -143,13 +164,13 @@ export default {
     },
     [CRUD.HOOK.beforeToCU]() {
       getFormDisplayFields({ categoryId: 'FFAFBB1647D459C82080A' }).then(data => {
-        this.formPreviewData = data.showFiled
+        this.formPreviewData = data.showFiled.filter((fields) => { return fields.isDisplay })
         this.formPreviewData.map(item => {
           this.rules[item.fieldName] = [
             {
-              required: item.isRequired === 1,
-              message: (item.isInputClass === 'text' ? '请输入' : '请选择') + item.fieldCnName,
-              trigger: item.isInputClass === 'text' ? 'blur' : 'change'
+              required: item.isRequired,
+              message: (item.displayformatType === 'text' ? '请输入' : '请选择') + item.fieldCnName,
+              trigger: item.displayformatType === 'text' ? 'blur' : 'change'
             }
           ]
           if (item.isDefaultValue) {
@@ -189,7 +210,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-::v-deep .filter-item input{
+::v-deep .filter-item input {
   margin-left: 10px;
 }
 </style>