feat: 树结构数据

src/components/FormDialog/index.vue

@@ -71,6 +71,7 @@ const handleSubmit = () => {
   const formEl = proFormRef.value?.proFormRef
   const formModel = proFormRef.value?.formModel
   butLoading.value = true
+
   if (!formEl) return
   formEl.validate(valid => {
     if (valid) {

src/components/ProForm/components/Item.vue

@@ -49,7 +49,6 @@ interface FormItem {
 }
 const props = defineProps<FormItem>()
 const _model = computed(() => props.model)
-console.log('_model', _model)
 const elTagNameValue = computed(() => {
   const val = props.item.compOptions.elTagName
   if ('radio-button' == val) return `el-radio-group`

src/components/ProForm/index.vue

@@ -158,7 +158,6 @@ watch(
         ? (formModel.value = props.model)
         : (formModel.value[item.prop] = item.compOptions.value === 0 ? 0 : item.compOptions.value || value)
     })
-    console.log('formModel.value', formModel.value)
   },
   { immediate: true }
 )

src/views/als/product/index.vue

@@ -19,9 +19,7 @@
         <el-button type="primary" link v-auth="['als:product:add']" icon="CirclePlus" @click="openDialog(4, '产品树新增', scope.row)">
           新增
         </el-button>
-        <el-button type="primary" link v-if="scope.row.parentId != 0" icon="Delete" v-auth="['als:product:remove']" @click="deleteProduct(scope.row)">
-          删除
-        </el-button>
+        <el-button type="primary" link icon="Delete" v-auth="['als:product:remove']" @click="deleteProduct(scope.row)"> 删除 </el-button>
       </template>
     </ProTable>
     <FormDialog ref="formDialogRef" :items-options="itemsOptions" :model="model" />
@@ -40,21 +38,22 @@ import { listProductApi, delProductApi, addProductApi, updateProductApi, getProd
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
 // 表单model
-const model = ref({})
+const model = ref()
 // 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
-const initParam = reactive({ type: 1 })
+const initParam = reactive({})
 const productOptions = ref<any[]>([])
 // dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，可以在这里进行处理成这些字段
 const dataCallback = (res: any) => {
   const data = handleTree(res, 'id')
-  productOptions.value = data
+  productOptions.value = Object.assign([], data)
+  productOptions.value.push({ id: 0, name: '顶层', children: null })
   setItemsOptions()
   return data
 }
 
 // 删除产品树信息
 const deleteProduct = async (params: any) => {
-  await useHandleData(delProductApi, params.id, '删除【' + params.id + '】产品树')
+  await useHandleData(delProductApi, params.id, '删除【' + params.name + '】产品树')
   proTable.value?.getTableList()
 }
 
@@ -65,23 +64,23 @@ const openDialog = async (type: number, title: string, row?: any) => {
   if (row?.id) {
     res = await getProductApi(row?.id || null)
   }
-  model.value = type == 1 ? {} : res.data
   // 重置表单项
   setItemsOptions()
   if (row?.parentId == 0 && type == 2) {
     itemsOptions.splice(0, 1)
   }
   // 增加子节点
-  if (type == 4 && row?.parentId) {
+  if (type == 4) {
     res.data = {
-      parentId: row?.parentId
+      parentId: row?.id
     }
   }
+  model.value = type == 1 ? {} : res.data
   const params = {
     title,
     width: 580,
     isEdit: type !== 3,
-    api: type == 1 ? addProductApi : updateProductApi,
+    api: [1, 4].includes(type) ? addProductApi : updateProductApi,
     getTableList: proTable.value?.getTableList
   }
   formDialogRef.value?.openDialog(params)
@@ -89,60 +88,69 @@ const openDialog = async (type: number, title: string, row?: any) => {
 
 // 表格配置项
 const columns = reactive<ColumnProps<any>[]>([
-  { type: 'selection', fixed: 'left', width: 70 },
   {
-    prop: 'parentId',
-    label: '父id',
-    width: 120
+    prop: 'name',
+    label: '产品名称',
+    align: 'left',
+    search: {
+      el: 'input'
+    }
   },
   {
     prop: 'snsCode',
     label: 'SNS编号',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
-    prop: 'name',
-    label: '产品名称',
-    search: {
-      el: 'input'
-    },
-    width: 120
+    prop: 'orderNum',
+    label: '显示顺序'
   },
   {
     prop: 'createBy',
-    label: '创建人',
-    width: 120
+    label: '创建人'
   },
   {
     prop: 'createTime',
-    label: '创建时间',
-    width: 120
+    label: '创建时间'
   },
   {
     prop: 'updateBy',
-    label: '更新人',
-    width: 120
+    label: '更新人'
   },
   {
     prop: 'updateTime',
-    label: '更新时间',
-    width: 120
+    label: '更新时间'
   },
-  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
+  { prop: 'operation', label: '操作' }
 ])
 // 表单配置项
 let itemsOptions = reactive<ProForm.ItemsOptions[]>([])
 const setItemsOptions = () => {
   itemsOptions = [
     {
-      label: '父id',
+      label: '父ID',
       prop: 'parentId',
-      rules: [{ required: true, message: '父id不能为空', trigger: 'blur' }],
+      rules: [{ required: true, message: '父ID不能为空', trigger: 'blur' }],
       compOptions: {
-        placeholder: '请输入父id'
+        elTagName: 'tree-select',
+        enum: productOptions.value,
+        valueKey: 'id',
+        checkStrictly: true,
+        props: {
+          value: 'id',
+          label: 'name'
+        },
+        placeholder: '请选择父ID'
+      }
+    },
+    {
+      label: '产品名称',
+      prop: 'name',
+      rules: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入产品名称'
       }
     },
     {
@@ -154,11 +162,13 @@ const setItemsOptions = () => {
       }
     },
     {
-      label: '产品名称',
-      prop: 'name',
-      rules: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
+      label: '显示顺序',
+      prop: 'orderNum',
+      rules: [{ required: true, message: '显示顺序不能为空', trigger: 'blur' }],
       compOptions: {
-        placeholder: '请输入产品名称'
+        elTagName: 'input-number',
+        value: 0,
+        min: 0
       }
     }
   ]

src/views/system/dept/index.vue

@@ -18,9 +18,7 @@
       <template #operation="scope">
         <el-button type="primary" link icon="EditPen" v-auth="['system:dept:edit']" @click="openDialog(2, '部门编辑', scope.row)"> 编辑 </el-button>
         <el-button type="primary" link icon="CirclePlus" v-auth="['system:dept:add']" @click="openDialog(4, '部门新增', scope.row)"> 新增 </el-button>
-        <el-button v-if="scope.row.parentId != 0" type="primary" link icon="Delete" v-auth="['system:dept:remove']" @click="deleteDept(scope.row)">
-          删除
-        </el-button>
+        <el-button type="primary" link icon="Delete" v-auth="['system:dept:remove']" @click="deleteDept(scope.row)"> 删除 </el-button>
       </template>
     </ProTable>
     <FormDialog :items-options="itemsOptions" :model="model" ref="formDialogRef" />

src/views/system/role/index.vue

@@ -337,7 +337,6 @@ const getMenuAllCheckedKeys = () => {
 }
 // 提交
 const handleSubmit = (proFormRef: any, parameter: any, closeRefVal: any, type?: string) => {
-  debugger
   const formEl = proFormRef.proFormRef
   const data = proFormRef.formModel
   butLoading.value = true