添加移动表

src/views/parts/table-1.vue

@@ -18,28 +18,45 @@
         <el-table-column fixed="right" label="操作">
           <template #default="scope">
             <el-button link type="primary" @click.prevent="toEditDir(scope.row)" v-if="scope.row.type == 'dir'">修改</el-button>
-            <el-button link type="primary" @click.prevent="toEdit(scope.row)" v-if="scope.row.type == 'table'">修改</el-button>
             <el-button link type="success" @click.prevent="toAddDir(scope.row)" v-if="scope.row.type == 'dir'">添加下级文件夹</el-button>
             <el-button link type="success" @click.prevent="toAddTab(scope.row)" v-if="scope.row.type == 'dir'">添加下级表</el-button>
+            <el-button link type="danger" @click.prevent="toDelDir(scope.row)" v-if="scope.row.type == 'dir'">删除</el-button>
+            <el-button link type="primary" @click.prevent="toEdit(scope.row)" v-if="scope.row.type == 'table'">修改</el-button>
+            <el-button link type="success" @click.prevent="toMove(scope.row)" v-if="scope.row.type == 'table'">移动到</el-button>
             <el-button link type="warning" @click.prevent="toExport(scope.row)" v-if="scope.row.type == 'table'">导出</el-button>
             <el-button link type="warning" @click.prevent="toExportTs(scope.row)" v-if="scope.row.type == 'table'">导出ts</el-button>
-            <el-button link type="danger" @click.prevent="toDelDir(scope.row)" v-if="scope.row.type == 'dir'">删除</el-button>
             <el-button link type="danger" @click.prevent="toDel(scope.row)" v-if="scope.row.type == 'table'">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
   </el-col>
+  <el-dialog v-model="dialog" title="文件夹" :before-close="handleClose">
+    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize" status-icon>
+      <el-form-item label="名称" prop="dir">
+        <el-cascader v-model="ruleForm.dir" :options="caList" :props="cascader_props" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
+// #region 引入
+import { ref, reactive } from 'vue';
 import _ from 'lodash';
 import type { Ref } from 'vue';
 import { useCounterStore as useStore } from '@/stores/counter';
 import type { IQueryResult } from '@/util/types.util';
 import { ElMessage, ElMessageBox } from 'element-plus';
+import type { FormInstance, FormRules } from 'element-plus';
+const formSize = ref('default');
+const ruleFormRef = ref<FormInstance>();
+// #endregion
 const store = useStore();
 let list: Ref<any[]> = ref([]);
+let caList: Ref<any[]> = ref([]);
 // 查询列表
 const search = async () => {
   const res: IQueryResult = await store.tableQuery({ project: props.id });
@@ -52,8 +69,56 @@ if (props.id) {
   search();
   loading.value = false;
 }
+
 // 暴露table组件search方法
 defineExpose({ search });
+
+let dialog = ref(false);
+let ruleForm: Ref<{ _id: string; dir: string; project: string; super: string; name: String; sort: String; remark: String }> = ref({
+  _id: '',
+  dir: '',
+  project: '',
+  super: '',
+  name: '',
+  sort: '',
+  remark: '',
+});
+// 验证
+const rules = reactive<FormRules>({
+  dir: [{ required: true, message: '请选择', trigger: 'change' }],
+});
+const cascader_props = {
+  expandTrigger: 'hover' as const,
+  multiple: false,
+  emitPath: false,
+  checkStrictly: true,
+  value: '_id',
+  label: 'name',
+  children: 'children',
+};
+const toMove = async (row: { _id: string; dir: string; project: string; super: string; name: String; sort: String; remark: String }) => {
+  ruleForm.value = row;
+  const aee: IQueryResult = await store.dirQuery({ project: props.id });
+  caList.value = aee.data as any[];
+  dialog.value = true;
+};
+// 提交保存
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate(async (valid) => {
+    if (valid) {
+      const res: IQueryResult = await store.tableUpdate(ruleForm.value);
+      if (res.errcode == 0) handleClose();
+    }
+  });
+};
+// 关闭弹窗
+const handleClose = () => {
+  ruleForm.value = { _id: '', dir: '', project: '', super: '', name: '', sort: '', remark: '' };
+  search();
+  dialog.value = false;
+};
+// #region 传到父组件方法
 const emit = defineEmits(['toEdit', 'toEditDir', 'toAddDir', 'toAddTab']);
 // 修改表
 const toEdit = (row: { _id: string }) => {
@@ -103,6 +168,7 @@ const toDelDir = (row: { _id: string }) => {
     }
   });
 };
+// #endregion
 // #region 导出
 function isValidKey(key: string | number | symbol, object: object): key is keyof typeof object {
   return key in object;