java-mall-admin/src/views/product/addProduct/index.vue

<template>
  <div class="department-management-container">
    <el-table
      v-if="false"
      ref="dataTreeList"
      v-loading="listLoading"
      border
      :data="list"
      height="685"
      row-key="category_id"
      :tree-props="{ children: 'sub' }"
    >
      <el-table-column label="" prop="" width="100" />
      <el-table-column
        align="center"
        :label="__('商品分类名称')"
        prop="category_name"
      />
      <el-table-column align="center" :label="__('操作')" width="600">
        <template #default="{ row }">
          <el-button
            v-if="showEdit(row)"
            class="el-icon-edit"
            type="text"
            @click="handleEdit(row)"
          >
            {{ __('添加此分类下商品') }}
          </el-button>
          <el-button
            v-if="false && showEdit(row)"
            class="el-icon-edit"
            type="text"
            @click="handleEdit(row)"
          >
            {{ __('天猫淘宝导入到此分类') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="container" style="">
      <div class="centered">
        <!-- 这里是你的内容 -->
        <div style="width: 700px;height: 300px;">
          <el-cascader
            v-model="categoryId"
            clearable
            filterable
            :options="list"
            :props="{ label: 'category_name', value: 'category_id', children:'sub' }"
            :placeholder="__('请选择需要发布商品的所属分类')"
            ref="cascader"
            :style="{ width: '490px' }"
            @change="onCategoryChange"
            size="medium"
          />
          <el-button size="medium"
                     type="primary"
                     :style="{ width: '200px' }" style="margin-left: 10px;" @click="submit">确认发布</el-button>
        </div>
      </div>
    </div>


    <edit ref="edit" />
  </div>
</template>

<script>
  import { categoryTree } from '@/api/base/product/category'
  import { translateTitle as __ } from '@/utils/i18n'
  import Edit from './components/addProductEdit'

  export default {
    name: 'AddProduct',
    components: { Edit },
    data() {
      return {
        tableConfig: {
          height: window.innerHeight - 220,
        },
        categoryId: [],
        category_id: null,
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
      }
    },
    created() {
      this.fetchData()
    },
    mounted() {
      // 在组件挂载后立即获取焦点
      this.$nextTick(() => {
        // 获取 el-cascader 的输入框元素
        const inputEl = this.$refs.cascader.$el.querySelector('.el-input__inner');
        // 设置焦点
        if (inputEl) {
          inputEl.click();
        }
      });
    },
    methods: {
      showEdit(row) {
        const sub = row.sub
        if (sub && sub.length > 0) return false
        return true
      },
      __,
      handleEdit(row) {
        this.$refs['edit'].showEdit(row)
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await categoryTree()

        this.list = this.tree(data);

        this.listLoading = false
      },

      async onCategoryChange(row) {
        if (row.length > 0) {
          this.category_id = row[row.length-1];
        } else {
          this.category_id = null;
        }
      },

      tree(data) {
        for (let i = 0; i < data.length; i++) {
          let item = data[i];

          // item.sub 不等于 undefined && item.sub.length 大于 0 时
          if (item.sub && item.sub.length > 0) {
            item.sub = this.tree(item.sub);
          } else {
            delete item.sub;
          }
        }

        return data
      },
      findTree(data, idx) {
        for (let i = 0; i < data.length; i++) {
          let item = data[i];

          if (item.category_id == idx) {
            return item
          }

          // item.sub 不等于 undefined && item.sub.length 大于 0 时
          if (item.sub && item.sub.length > 0) {
            const tmp =  this.findTree(item.sub, idx);
            if (tmp != null) {
              return tmp;
            }
          }
        }

        return null
      },
      submit() {
        const category = this.findTree(this.list, this.category_id)

        if (category != null) {
          this.handleEdit(category)
        } else {
          this.$baseMessage("请选择商品分类", 'error')
        }
      },
    },
  }
</script>

<style>
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 80vh; /* 100%视窗高度 */
}

.centered {
  /* 可以添加其他样式 */
}

</style>