vue-fastapi-admin/vue-fastapi-frontend/src/views/datastd/main/components/AssetMoveDialog.vue

<template>
  <el-dialog width="800px" append-to-body :title="title" v-model="open">
    <el-form label-width="100px" ref="formRef" :model="form" :rules="rules">
      <el-row :gutter="16">
        <el-col :span="11">
          <el-form-item label="当前资产" prop="dataAstCnName">
            <el-input :disabled="true" v-model="form.dataAstCnName" />
          </el-form-item>
          <el-form-item label="当前资产简介" prop="dataAstDesc">
            <el-input
              placeholder="自动带入"
              type="textarea"
              :disabled="true"
              :rows="8"
              v-model="form.dataAstDesc"
            />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <div class="arrow">
            <span>········</span>
            <el-icon><Right /></el-icon>
          </div>
        </el-col>
        <el-col :span="11">
          <el-form-item label="目标分类" prop="contentOnumAfter">
            <el-tree-select
              check-strictly
              value-key="contentOnum"
              placeholder="选择目标分类"
              :default-expand-all="true"
              :disabled="disabled"
              :clearable="true"
              :data="localDirectoryTree"
              :props="{
                value: 'contentOnum',
                label: 'contentName',
                children: 'children',
              }"
              v-model="form.contentOnumAfter"
              @node-click="handleTargetCatalogNodeClick"
            />
          </el-form-item>
          <el-form-item label="目标分类简介" prop="contentIntrAfter">
            <el-input
              placeholder="自动带入"
              type="textarea"
              :disabled="true"
              :rows="8"
              v-model="form.contentIntrAfter"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" :disabled="disabled" @click="submitForm"
          >确定</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { nextTick } from 'vue'
import { moveDirectoryAsset } from '@/api/datastd/directory'

const props = defineProps({
  directoryTree: {
    type: Array,
    required: true,
  },
})

const filterTree = (tree, conditionFn) => {
  return tree
    .map((node) => {
      // 递归处理每个节点的子节点
      const filteredChildren = node.children
        ? filterTree(node.children, conditionFn)
        : []
      // 根据条件判断是否保留当前节点
      if (conditionFn(node)) {
        // 返回新的节点结构，保留符合条件的子节点
        return {
          ...node,
          children: filteredChildren,
        }
      }
      // 如果不符合条件，返回 null，不加入到最终结果中
      return null
    })
    .filter(Boolean) // 移除值为 null 的项
}

const localDirectoryTree = computed(() => {
  const tree = props.directoryTree
  return filterTree(tree, (node) => node.contentOnum && !node.astOnum) // 过滤资产子节点
})

const title = ref('')
const open = ref(false)
const disabled = ref(false)
const { proxy } = getCurrentInstance()
const form = ref({})
const rules = ref({
  targetContentOnum: [
    { required: true, message: '目标分类不能为空', trigger: 'blur' },
  ],
})

const formRef = ref(null)
const openDialog = (row) => {
  open.value = true
  form.value = {
    relaOnum: undefined,
    contentOnum: undefined,
    contentOnumAfter: undefined,
  }
  if (row.relaOnum) {
    form.value = {
      ...form.value,
      ...row,
    }
  }
  nextTick(() => {
    formRef.value.clearValidate()
  })
}

const handleTargetCatalogNodeClick = (data) => {
  form.value = {
    ...form.value,
    contentIntrAfter: data.contentIntr,
  }
}

const emit = defineEmits(['onSuccess'])
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      moveDirectoryAsset(form.value).then((response) => {
        proxy.$modal.msgSuccess('移动成功')
        open.value = false
        emit('onSuccess')
      })
    }
  })
}

const cancel = () => {
  open.value = false
}

defineExpose({ title, disabled, openDialog })
</script>

<style lang="scss" scoped>
.arrow {
  display: flex;
  font-size: 18px;
  text-align: center;
  margin: 8px auto;
  span {
    line-height: 18px;
  }
}
</style>