门类管理 字段对话框完成

src/views/category/descriptionPreview/index.vue

@@ -68,6 +68,7 @@
 import PreviewForm from '@/views/components/category/PreviewForm'
 import SettingForm from '@/views/components/category/SettingForm'
 import { FetchArchivesTypeManage } from '@/api/category/category'
+import { edit } from '@/api/category/fieldManage'
 export default {
   name: 'DescriptionPreview',
   components: { PreviewForm, SettingForm },
@@ -86,12 +87,12 @@ export default {
       settingFormVisible: false, // 修改编辑字段 - dialog
       previewFormVisible: false, // 界面预览form - dialog
       fieldsActive: 0, // 当前字段index
-      thisFields: {} // 当前项字段内容
+      thisFields: { dictionaryConfigId: { dicName: null, id: null }} // 当前项字段内容
     }
   },
   watch: {
     selectedCategory: function(newValue, oldValue) {
-      this.crud.refresh()
+      this.getArchivesType()
     }
   },
   mounted() {
@@ -100,20 +101,15 @@ export default {
   methods: {
     getArchivesType() {
       FetchArchivesTypeManage({ categoryId: this.selectedCategory.id }).then(res => {
-        this.allFieldsData = res
-        console.log(this.allFieldsData)
-        this.allFieldsData.forEach((item, index) => {
+        res.forEach((item, index) => {
           // 防止对应字典是null时报错
-          item.dictionaryConfigId = item.dictionaryConfigId || { dicName: '', id: null }
-          // if (item.isInput) {
-          // console.log(item)
-          // this.fieldsActive = index
-          // this.thisFields = arr[this.fieldsActive]
-          // return
-          // }
+          item.dictionaryConfigId = item.dictionaryConfigId || { dicName: null, id: null }
+          this.allFieldsData.push(item)
+          if (item.isInput && !this.thisFields.id) {
+            this.fieldsActive = index
+            this.thisFields = item
+          }
         })
-        this.thisFields = this.allFieldsData.find((item) => { return item.isInput })
-        this.fieldsActive = this.allFieldsData.findIndex((item) => { return item.isInput })
       })
     },
     handleClose(done) {
@@ -133,10 +129,18 @@ export default {
     },
     // 修改字段"保存"提交
     editSubmit() {
-      this.$refs.editForm.submitForm('form')
-    },
-    editResetForm() {
-      this.$refs.editForm.resetForm('form')
+      this.$refs['editForm'].$refs['form'].validate(valid => {
+        if (!valid) {
+          return
+        }
+        edit(this.thisFields).then(() => {
+          this.settingFormVisible = false
+          // 清空数组数据
+          this.allFieldsData.splice(0, this.allFieldsData.length)
+          this.getArchivesType()
+        })
+      })
+      return false
     }
   }
 }

src/views/components/category/PreviewForm.vue

@@ -5,44 +5,14 @@
         <draggable v-bind="{draggable:'.drag-item',animation:500}" :disabled="!isDisabled" @update="datadragEnd">
           <el-col v-for="(item,index) in formPreviewData" :key="index" class="drag-item" :span="item.isLine ? 24 : 12">
             <el-form-item :label="item.fieldCnName" :prop="item.fieldName">
-              <!-- select  -->
-              <treeselect
-                v-if="item.isInputClass === 'select'"
-                v-model="addOrUpdateForm[item.fieldName]"
-                :load-options="loadOptions"
-                :options="item.options"
-                :normalizer="normalizer"
-                placeholder=""
-                :style="{ width: item.editLength+'px'}"
-                :disabled="isDisabled"
-                :validate-event="isDisabled"
-              />
+              <!-- select  :load-options="loadOptions"-->
+              <treeselect v-if="item.isInputClass === 'select'" v-model="addOrUpdateForm[item.fieldName]" :options="item.options" :normalizer="normalizer" placeholder="" :style="{ width: item.editLength+'px'}" :disabled="isDisabled" :validate-event="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"
-                :rows="item.isInputClass === 'textarea' ? 3 : ''"
-                :class="{'input-popover':(item.isInputClass === 'popover')}"
-                :style="{ width: item.editLength+'px'}"
-                :disabled="isDisabled"
-                :validate-event="isDisabled"
-              >
+              <el-input v-if="item.isInputClass !== 'select' && item.isInputClass !== 'date'" v-model="addOrUpdateForm[item.fieldName]" :type="item.isInputClass === 'popover'? 'text' : item.isInputClass" :rows="item.isInputClass === 'textarea' ? 3 : ''" :class="{'input-popover':(item.isInputClass === 'popover')}" :style="{ width: item.editLength+'px'}" :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'"
-                v-model="addOrUpdateForm[item.fieldName]"
-                type="date"
-                align="right"
-                format="yyyy-MM-dd"
-                placeholder=""
-                :clearable="false"
-                :style="{ width: item.editLength+'px'}"
-                :disabled="isDisabled"
-                :validate-event="isDisabled"
-              />
+              <el-date-picker v-if="item.isInputClass === 'date'" v-model="addOrUpdateForm[item.fieldName]" type="date" align="right" format="yyyy-MM-dd" placeholder="" :clearable="false" :style="{ width: item.editLength+'px'}" :disabled="isDisabled" :validate-event="isDisabled" />
             </el-form-item>
           </el-col>
         </draggable>
@@ -54,16 +24,7 @@
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
-        <el-table
-          ref="table"
-          :data="tableData"
-          highlight-current-row
-          row-key="id"
-          :tree-props="{children: 'childMenus', hasChildren: 'hasChildren'}"
-          style="width: 100%;"
-          @selection-change="handleSelectionChange"
-          @row-click="clickRowHandler"
-        >
+        <el-table ref="table" :data="tableData" highlight-current-row row-key="id" :tree-props="{children: 'childMenus', hasChildren: 'hasChildren'}" style="width: 100%;" @selection-change="handleSelectionChange" @row-click="clickRowHandler">
           <el-table-column type="selection" width="55" />
           <el-table-column prop="dicName" label="字典名称" />
           <el-table-column prop="dicCode" label="字典代码" />
@@ -126,16 +87,19 @@ export default {
     }
   },
   mounted() {
+    this.getAllSubset()
   },
   methods: {
     // 获取对应字典子集数据
     getAllSubset() {
       this.formPreviewData.map(item => {
         if (item.dictionaryConfigId) {
-          // item.options = []
+          item.options = []
+          console.log(item.options)
           FetchFindAllSubsetById({ id: item.dictionaryConfigId.id }).then(res => {
             if (item.isInputClass === 'select') {
-              item.options = res
+              // Vue.set(item, "options", res)
+              console.log(item.options)
             } else if (item.isInputClass === 'popover') {
               this.tableData = res
             }
@@ -228,7 +192,7 @@ export default {
   padding: 20px 15px 20px 0 !important;
   margin-top: 0 !important;
   border-radius: 4px;
-  border: 1px solid #3A99FD;
+  border: 1px solid #3a99fd;
   ::v-deep .el-input__inner {
     width: 100%;
   }

src/views/components/category/SettingForm.vue

@@ -332,7 +332,7 @@ export default {
         this.$message.error('著录形式必须为文本框才可操作！')
       }
     },
-    submitForm(formName) {
+    // submitForm(formName) {
     // // 对应字典必填判断
     // if (this.form.isInputClass === 'select' || this.form.isInputClass === 'popover') {
     //   if (!this.form.dictionaryConfigId.id) {
@@ -354,15 +354,15 @@ export default {
     //     return
     //   }
     // }
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          alert('submit!')
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    },
+    //   this.$refs[formName].validate((valid) => {
+    //     if (valid) {
+    //       alert('submit!')
+    //     } else {
+    //       console.log('error submit!!')
+    //       return false
+    //     }
+    //   })
+    // },
     resetForm(formName) {
       // this.$refs[formName].resetFields()
       // console.log(this.thisFields)