vue代码报错的晓情况

import Vue from "vue";
import App from "./App.vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

import axios from "axios";
const request = axios.create({
  // baseURL: 'http://toutiao-app.itheima.net'
  baseURL: "http://192.168.22.94:8000",
  transformResponse: [
    function (data) {
      try {
        return JSON.parse(data);
      } catch (err) {
        return data;
      }
    },
  ],
});
export const getUserChannels = () => {
  return request({
    method: "GET",
    url: "/v1_0/channels",
  });
};
export const addFollow = (target) => {
  return request({
    method: "POST",
    url: "/v1_0/user/followings",
    data: {
      target,
    },
  });
};
export const delFollow = (target) => {
  return request({
    method: "DELETE",
    url: `/v1_0/user/followings/${target}`,
  });
};

<template>
  <div id="app">
    <el-button type="primary" @click="show = true">添加部门</el-button>
    <el-button type="primary" @click="(show = true), (showSon = true)"
      >添加子部门</el-button
    >
    <el-card>
      <el-row type="flex" justify="space-between" slot="header">
        <el-col>
          <el-row type="flex" justify="center"> 部门 </el-row>
        </el-col>
        <el-col>
          <el-row type="flex" justify="center"> 负责人 </el-row>
        </el-col>
        <el-col>
          <el-row type="flex" justify="center"> 备注 </el-row>
        </el-col>
        <el-col>
          <el-row type="flex" justify="center"> 操作 </el-row>
        </el-col>
      </el-row>
      <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
        <el-row
          slot-scope="{ data }"
          type="flex"
          justify="space-between"
          style="width: 100%"
        >
          <el-col>
            <el-row type="flex" justify="begin"> {{ data.name }} </el-row>
          </el-col>
          <el-col>
            <el-row type="flex" justify="begin"> {{ data.manager }} </el-row>
          </el-col>
          <el-col>
            <el-row type="flex" justify="begin"> {{ data.i }} </el-row>
          </el-col>
          <el-col>
            <el-row type="flex" justify="center">
              <el-link type="primary" @click="put(data.id)">修改</el-link>
              <el-link type="success" @click="del(data.id)">删除</el-link>
            </el-row>
          </el-col>
        </el-row>
      </el-tree>
    </el-card>
    <AddDept :showDialog="show" :showSon="showSon" :form1="form1" @ok="ok" />
  </div>
</template>

<script>
import AddDept from "./components/add.vue";
export default {
  name: "App",
  data() {
    return {
      departs: [
        {
          name: "总裁办",
          manager: "曹操",
          i: "这是备注",
          children: [{ name: "董事会", manager: "曹丕", i: "这是备注" }],
        },
        { name: "行政部", manager: "刘备", i: "这是备注" },
        { name: "人事部", manager: "孙权", i: "这是备注" },
      ],
      defaultProps: {
        label: "name", // 表示 从这个属性显示内容
      },
      show: false,
      showSon: false,
      form1: {},
    };
  },
  components: {
    AddDept,
  },
  methods: {
    transListToTreeData(list, rootValue) {
      var arr = [];
      list.forEach((item) => {
        if (item.pid === rootValue) {
          // 找到之后 就要去找 item 下面有没有子节点
          const children = this.transListToTreeData(list, item.id);
          if (children.length) {
            // 如果children的长度大于0 说明找到了子节点
            item.children = children;
          }
          arr.push(item); // 将内容加入到数组中
        }
      });
      return arr;
    },
    del(id) {
      //引入删除接口
      id;
    },
    put(id) {
      this.show = true;
      //引入修改接口
      //在这里命名一个空对象 （没写）获取后，空对象等于获取结果，传入到add中
      id;
    },
    ok() {
      this.form1 = {};
      this.show = false;
      this.showSon = false;
    },
  },
};
</script>

<style></style>

<template>
  <el-dialog title="新增部门" :visible="showDialog" :show-close="false">
    <el-form v-model="form1" label-width="120px">
      <el-form-item label="上级部门编号" v-if="showSon">
        <el-input
          v-model="form1.pid"
          style="width: 80%"
          placeholder="1-50个字符"
        />
      </el-form-item>
      <el-form-item label="部门名称">
        <el-input
          v-model="form1.name"
          style="width: 80%"
          placeholder="1-50个字符"
        />
      </el-form-item>
      <el-form-item label="部门编码">
        <el-input
          v-model="form1.id"
          style="width: 80%"
          placeholder="1-50个字符"
        />
      </el-form-item>
      <el-form-item label="部门负责人">
        <el-input
          v-model="form1.managers"
          style="width: 80%"
          placeholder="1-5个字符"
        />
      </el-form-item>
      <el-form-item label="部门介绍">
        <el-input
          style="width: 80%"
          placeholder="1-300个字符"
          type="textarea"
          v-model="form1.include"
          :rows="3"
        />
      </el-form-item>
    </el-form>
    <el-row slot="footer" type="flex" justify="center">
      <el-col>
        <el-button type="primary" size="small" @click="change">确定</el-button>
        <el-button size="small" @click="ok">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
export default {
  name: "Add",
  components: {},
  props: {
    showDialog: { type: Boolean, default: false },
    showSon: { type: Boolean, default: false },
    form1: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    change() {
      //先完成数据的上传 post
      this.$emit("ok");
    },
    // 现在定义一个函数 这个函数的目的是 去找 同级部门下 是否有重复的部门名称
    // const checkNameRepeat = async(rule, value, callback) => {
    //   // 先要获取最新的组织架构数据
    //   const { depts } = await getDepartments()
    //   // depts是所有的部门数据
    //   // 如何去找技术部所有的子节点
    //   const isRepeat = depts.filter(item => item.pid === this.treeNode.id).some(item => item.name === value)
    //   isRepeat ? callback(new Error(`同级部门下已经有${value}的部门了`)) : callback()
    // }
    ok() {
      this.$emit("ok");
    },
  },
};
</script>

<style scoped></style>