feat(X-Pack): 数据填报表单支持移动文件夹

core/backend/src/main/java/io/dataease/controller/datafill/DataFillController.java

@@ -50,7 +50,13 @@ public class DataFillController {
     @ApiIgnore
     @PostMapping("/form/update")
     public ResultHolder updateForm(@RequestBody DataFillFormWithBLOBs dataFillForm) throws Exception {
-        return dataFillService.updateForm(dataFillForm);
+        return dataFillService.updateForm(dataFillForm, null);
+    }
+
+    @ApiIgnore
+    @PostMapping("/form/move")
+    public ResultHolder moveForm(@RequestBody DataFillFormWithBLOBs dataFillForm) throws Exception {
+        return dataFillService.updateForm(dataFillForm, "move");
     }
 
     @PostMapping("/manage/form/{id}")

core/backend/src/main/java/io/dataease/service/datafill/DataFillService.java

@@ -83,7 +83,7 @@ public class DataFillService {
 
         dataFillForm.setId(uuid);
 
-        checkName(uuid, dataFillForm.getName(), dataFillForm.getPid(), dataFillForm.getLevel(), dataFillForm.getNodeType(), DataFillConstants.OPT_TYPE_INSERT);
+        checkName(uuid, dataFillForm.getName(), dataFillForm.getPid(), dataFillForm.getNodeType(), DataFillConstants.OPT_TYPE_INSERT);
 
         if (!StringUtils.equals(dataFillForm.getNodeType(), "folder")) {
             List<ExtTableField> fields = gson.fromJson(dataFillForm.getForms(), new TypeToken<List<ExtTableField>>() {
@@ -152,7 +152,7 @@ public class DataFillService {
     }
 
     @DeCleaner(value = DePermissionType.DATA_FILL, key = "pid")
-    public ResultHolder updateForm(DataFillFormWithBLOBs dataFillForm) {
+    public ResultHolder updateForm(DataFillFormWithBLOBs dataFillForm, String type) {
 
         if (!CommonBeanFactory.getBean(AuthUserService.class).pluginLoaded()) {
             DataEaseException.throwException("invalid");
@@ -161,8 +161,15 @@ public class DataFillService {
         Assert.notNull(dataFillForm.getId(), "id cannot be null");
 
         DataFillFormWithBLOBs form = dataFillFormMapper.selectByPrimaryKey(dataFillForm.getId());
-        //todo 改变文件夹位置
+
-        checkName(dataFillForm.getId(), dataFillForm.getName(), form.getPid(), form.getLevel(), form.getNodeType(), DataFillConstants.OPT_TYPE_UPDATE);
+        if (StringUtils.equals("move", type)) {
+            //改变文件夹位置
+            checkName(dataFillForm.getId(), form.getName(), dataFillForm.getPid(), form.getNodeType(), DataFillConstants.OPT_TYPE_UPDATE);
+            dataFillForm.setName(null);
+            dataFillForm.setNodeType(null);
+        } else {
+            checkName(dataFillForm.getId(), dataFillForm.getName(), form.getPid(), form.getNodeType(), DataFillConstants.OPT_TYPE_UPDATE);
+        }
 
         dataFillForm.setUpdateTime(new Date());
         dataFillFormMapper.updateByPrimaryKeySelective(dataFillForm);
@@ -172,7 +179,7 @@ public class DataFillService {
         return ResultHolder.success(dataFillForm.getId());
     }
 
-    private void checkName(String id, String name, String pid, int level, String nodeType, String optType) {
+    private void checkName(String id, String name, String pid, String nodeType, String optType) {
         DataFillFormExample example = new DataFillFormExample();
         if (DataFillConstants.OPT_TYPE_INSERT.equalsIgnoreCase(optType)) {
             example.createCriteria().andPidEqualTo(pid).andNameEqualTo(name).andNodeTypeEqualTo(nodeType);

core/frontend/src/views/dataFilling/form/MoveSelector.vue

@@ -0,0 +1,136 @@
+<template>
+  <el-container>
+    <el-main>
+      <el-col style="height: 400px;overflow-y: auto;margin-bottom: 10px;">
+        <el-tree
+          :data="tData"
+          node-key="id"
+          :expand-on-click-node="false"
+          highlight-current
+          @node-click="nodeClick"
+        >
+          <span
+            slot-scope="{ node, data }"
+            :class="treeClass(data,node)"
+          >
+            <span style="display: flex;flex: 1;width: 0;">
+              <span
+                style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+                :title="data.name"
+              >{{ data.name }}</span>
+            </span>
+          </span>
+        </el-tree>
+      </el-col>
+    </el-main>
+    <el-footer class="de-footer">
+      <el-button @click="closeSave">{{ $t("commons.cancel") }}</el-button>
+      <el-button
+        type="primary"
+        @click="doSave"
+      >{{ $t("commons.confirm") }}
+      </el-button>
+    </el-footer>
+  </el-container>
+</template>
+
+<script>
+import { listForm, moveForm } from '@/views/dataFilling/form/dataFilling'
+
+export default {
+  name: 'DataFillingFormMoveSelector',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    showSelector: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      tData: [],
+      currGroup: '',
+      groupForm: {
+        name: '',
+        pid: '0',
+        level: 0,
+        type: 'group',
+        children: [],
+        sort: 'type desc,name asc'
+      },
+      targetGroup: {}
+    }
+  },
+  watch: {
+    'item': function() {
+      this.tree(this.groupForm)
+    }
+  },
+  mounted() {
+    this.tree(this.groupForm)
+  },
+  methods: {
+    tree(group) {
+      listForm({ nodeType: 'folder' }).then(res => {
+        const formList = res.data || []
+        if (this.item.nodeType === 'folder') {
+          this.tData = [
+            {
+              id: '0',
+              name: this.$t('data_fill.form.form_list_name'),
+              label: this.$t('data_fill.form.form_list_name'),
+              level: -1,
+              children: formList
+            }
+          ]
+        } else {
+          this.tData = formList
+        }
+      })
+    },
+    nodeClick(data, node) {
+      this.targetGroup = data
+    },
+    treeClass(data, node) {
+      if (data.id === this.item.id) {
+        node.visible = false
+      }
+      return 'custom-tree-node'
+    },
+    closeSave() {
+      this.$emit('update:showSelector', false)
+    },
+    doSave() {
+      if (this.targetGroup.id) {
+        const data = {
+          pid: this.targetGroup.id,
+          id: this.item.id
+        }
+        moveForm(data).then(res => {
+          this.$emit('moveSuccess')
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right:8px;
+  }
+  .de-footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end
+  }
+</style>

core/frontend/src/views/dataFilling/form/dataFilling.js

@@ -16,6 +16,14 @@ export function updateForm(data) {
     data
   })
 }
+export function moveForm(data) {
+  return request({
+    url: 'dataFilling/form/move',
+    method: 'post',
+    loading: true,
+    data
+  })
+}
 
 export function listForm(data) {
   return request({

core/frontend/src/views/dataFilling/form/index.vue

@@ -6,12 +6,16 @@ import ViewTable from './ViewTable.vue'
 import { listForm, saveForm, updateForm, deleteForm, getWithPrivileges } from '@/views/dataFilling/form/dataFilling'
 import { cloneDeep } from 'lodash-es'
 import { hasPermission } from '@/directive/Permission'
+import DataFillingFormMoveSelector from './MoveSelector.vue'
 
 export default {
   name: 'DataFillingForm',
-  components: { DeAsideContainer, DeContainer, NoSelect, ViewTable },
+  components: { DataFillingFormMoveSelector, DeAsideContainer, DeContainer, NoSelect, ViewTable },
   data() {
     return {
+      selectedItem: undefined,
+      moveDialogTitle: '',
+      moveGroup: false,
       treeLoading: false,
       requiredRule: { required: true, message: this.$t('commons.required'), trigger: ['blur', 'change'] },
       activeName: 'forms',
@@ -86,8 +90,16 @@ export default {
         case 'delete':
           this.delete(param.data)
           break
+        case 'move':
+          this.moveTo(param.data)
+          break
       }
     },
+    moveTo(data) {
+      this.selectedItem = data
+      this.moveGroup = true
+      this.moveDialogTitle = this.$t('dataset.m1') + (data.name.length > 10 ? (data.name.substr(0, 10) + '...') : data.name) + this.$t('dataset.m2')
+    },
     openUpdateForm(param) {
       this.updateFormData = cloneDeep(param.data)
       this.showUpdateName = true
@@ -137,6 +149,12 @@ export default {
       }).catch(() => {
       })
     },
+    onMoveSuccess() {
+      this.moveGroup = false
+      listForm({}).then(res => {
+        this.formList = res.data || []
+      })
+    },
     beforeClickMore(optType, data, node) {
       return {
         type: data.nodeType,
@@ -346,6 +364,12 @@ export default {
                           >
                             {{ $t('panel.rename') }}
                           </el-dropdown-item>
+                          <el-dropdown-item
+                            icon="el-icon-right"
+                            :command="beforeClickMore('move',data,node)"
+                          >
+                            {{ $t('dataset.move_to') }}
+                          </el-dropdown-item>
                           <el-dropdown-item
                             icon="el-icon-delete"
                             :command="beforeClickMore('delete', data, node)"
@@ -483,6 +507,22 @@ export default {
       </el-container>
     </el-dialog>
 
+    <el-dialog
+      v-dialogDrag
+      :title="moveDialogTitle"
+      :visible="moveGroup"
+      :show-close="false"
+      width="30%"
+      class="dialog-css"
+    >
+      <data-filling-form-move-selector
+        v-if="moveGroup"
+        :show-selector.sync="moveGroup"
+        :item.sync="selectedItem"
+        @moveSuccess="onMoveSuccess"
+      />
+    </el-dialog>
+
   </de-container>
 </template>