列表界面浏览设置 接口对接

src/views/category/listBrowsing/index.vue

@@ -45,7 +45,7 @@
       <!--表单渲染-->
       <eForm ref="cuform" @refresh="initData" />
       <!--排序对话框组件-->
-      <sortDialog ref="sort" @doSort="doSort" />
+      <sortDialog ref="sort" @refresh="initData" />
       <!--删除对话框组件-->
       <el-dialog title="移除字段" :visible.sync="deleteVisible">
         <span class="dialog-right-top" />
@@ -75,8 +75,10 @@
 <script>
 import { FetchArchivesTypeManage } from '@/api/category/category'
 import { initArchivesView } from '@/api/archivesManage/archivesList'
+import { edit } from '@/api/category/listBrowsing'
 import eForm from './module/form'
 import sortDialog from './module/sortDialog'
+import Vue from 'vue'
 
 export default {
   components: { eForm, sortDialog },
@@ -97,12 +99,6 @@ export default {
         sort: ['admin', 'listBrowsing:sort']
       },
       deleteVisible: false,
-      // form: {
-      //   verifyCode: ''
-      // },
-      // formLabelWidth: '110px',
-      // btn: '',
-      // showVerifyDialog: true,
       sortLoading: false,
       delAllLoading: false,
       table: {
@@ -141,7 +137,7 @@ export default {
       FetchArchivesTypeManage({ categoryId: this.selectedCategory.id, isDataType: 2 }).then((res) => {
         this.table.right.data.splice(0, this.table.right.data.length)
         this.table.left.data.splice(0, this.table.left.data.length)
-        res.forEach((item) => {
+        res.sort((item) => { return item.displayOrder - item.displayOrder }).forEach((item) => {
           if (item.isInput) {
             if (item.isDisplay) {
               this.table.right.data.push(item)
@@ -169,20 +165,18 @@ export default {
       this.table[tableName].selections = val
     },
     toAdd() {
-      this.$refs.cuform.formData = this.table.left.selections.map((item) => {
-        const field = {
-          id: item.id,
-          fieldCnName: item.fieldCnName,
-          displayLength: 100,
-          displayformatType: 'center',
-          isDisplay: true
-        }
-        return field
+      this.table.left.selections.forEach((item, index) => {
+        Vue.set(item, 'displayLength', 100)
+        Vue.set(item, 'displayformatType', 'center')
+        item.isDisplay = true
       })
+      this.$refs.cuform.title = '新增字段'
+      this.$refs.cuform.formData.fields = this.table.left.selections
       this.$refs.cuform.cuDialogVisible = true
     },
     toEdit() {
-      this.$refs.cuform.formData = this.table.right.selections
+      this.$refs.cuform.title = '编辑字段'
+      this.$refs.cuform.formData.fields = this.table.right.selections
       this.$refs.cuform.cuDialogVisible = true
     },
     toDelete() {
@@ -191,34 +185,26 @@ export default {
     handleDelConfirm() {
       this.deleteVisible = false
       this.delAllLoading = true
-      // sort(encrypt(this.form.verifyCode)).then((res) => {
-      this.delAllLoading = false
-      this.$notify({
-        title: '删除成功',
-        type: 'success',
-        duration: 2500
+      const deleteData = this.table.right.selections.map((item) => {
+        item.isDisplay = false
+        item.displayformatType = null
+        item.displayLength = null
+        item.sort = null
+        return item
+      })
+      edit(deleteData).then((res) => {
+        this.delAllLoading = false
+        this.$notify({
+          title: '删除成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.getDisplayFieldData()
       })
-      this.getDisplayFieldData()
     },
     toSort() {
-      // findSubsetById(data[0].id).then(res => {
       this.$refs.sort.sortTableData = this.table.right.data
       this.$refs.sort.sortVisible = true
-      // })
-    },
-    doSort(data) {
-      this.sortLoading = true
-      // sort(encrypt(this.form.verifyCode)).then((res) => {
-      this.sortLoading = false
-      this.$notify({
-        title: '保存成功',
-        type: 'success',
-        duration: 2500
-      })
-      this.getDisplayFieldData()
-      // }).catch(() => {
-      //   this.sortLoading = false
-      // })
     }
   }
 }

src/views/category/listBrowsing/module/form.vue

@@ -1,25 +1,24 @@
 <template>
-  <el-dialog :close-on-click-modal="false" :visible.sync="cuDialogVisible" title="修改字段">
+  <el-dialog :close-on-click-modal="false" :visible.sync="cuDialogVisible" :title="title">
     <span class="dialog-right-top" />
     <span class="dialog-left-bottom" />
     <div class="setting-dialog">
       <div class="fields-list">
-        <el-form ref="form" :model="formData" :rules="rules" size="small" label-width="75px">
-          <el-row v-for="(item) in formData" :key="item.id" :gutter="10">
-            <el-input v-model="item.id" type="hidden" />
-            <el-input v-model="item.isDisplay" type="hidden" />
-            <el-col :span="7">
+        <el-form ref="formData" :model="formData" size="small" label-width="75px">
+          <el-row v-for="(item, index) in formData.fields" :key="item.id" :gutter="10">
+            <el-col :span="9">
               <el-form-item label="字段名称">
                 <el-input v-model="item.fieldCnName" :disabled="true" />
               </el-form-item>
             </el-col>
-            <el-col :span="7">
-              <el-form-item label="显示长度" prop="displayLength">
+            <el-col :span="8">
+              <!--   -->
+              <el-form-item label="显示长度" label-width="90px" :prop="'fields.' + index + '.displayLength'" :rules="{required: true, message: '显示长度不能为空', trigger: 'blur'}" :model="item">
                 <el-input v-model.number="item.displayLength" />
               </el-form-item>
             </el-col>
-            <el-col :span="9">
-              <el-form-item label="显示格式">
+            <el-col :span="7">
+              <el-form-item label="显示格式" :prop="'fields.' + index + '.displayformatType'">
                 <el-select v-model="item.displayformatType" placeholder="请选择">
                   <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" />
                 </el-select>
@@ -42,6 +41,7 @@ export default {
     return {
       cuDialogVisible: false,
       formData: {},
+      title: '新增字段',
       options: [
         {
           label: '居中',
@@ -55,24 +55,25 @@ export default {
           label: '靠右',
           value: 'right'
         }
-      ],
-      rules: {
-        // displayLength: [
-        //   { required: true, message: '请输入显示长度', trigger: 'blur' }
-        // ]
-      }
+      ]
     }
   },
   methods: {
     save() {
-      edit(this.formData.map((item) => { item.isDisplay = true })).then((res) => {
-        this.$notify({
-          title: '保存成功',
-          type: 'success',
-          duration: 2500
-        })
-        this.cuDialogVisible = false
-        this.$emit('refresh')
+      this.$refs['formData'].validate((valid) => {
+        if (valid) {
+          edit(this.formData.fields).then((res) => {
+            this.$notify({
+              title: '保存成功',
+              type: 'success',
+              duration: 2500
+            })
+            this.cuDialogVisible = false
+            this.$emit('refresh')
+          })
+        } else {
+          return false
+        }
       })
     }
   }

src/views/category/listBrowsing/module/sortDialog.vue

@@ -18,6 +18,7 @@
 
 <script>
 import Sortable from 'sortablejs'
+import { edit } from '@/api/category/listBrowsing'
 
 export default {
   data() {
@@ -45,7 +46,13 @@ export default {
       this.rowDrop('list-browsing-sort', 'sortTableData')
     },
     handleSort() {
-
+      this.sortTableData.forEach((item, index) => {
+        item.sort = index + 1
+      })
+      edit(this.sortTableData).then(() => {
+        this.sortVisible = false
+        this.$emit('refresh')
+      })
     }
   }
 }