编写时候注意的东西

喵喵酱仔__

已于 2024-09-11 10:24:34 修改

阅读量580

点赞数 24

分类专栏：写法文章标签： java android 数据库

于 2024-09-11 10:23:54 首次发布

本文链接：https://blog.csdn.net/qq_38210427/article/details/142129714

版权

写法专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1 父组件通过props传递异步数据，子组件接收

https://blog.csdn.net/shsyzhzhgn/article/details/138124529

2 点1有邮箱，点2 没有邮箱返回

在这里插入图片描述

props接收不到数据，不会变化

用watch接的话，如果没有发生变化（同一个邮箱），不会更新下一个数据

在这里插入图片描述

加定时器，获取到在props

在这里插入图片描述

3 计算属性

props拿到就可以用计算属性吗

在这里插入图片描述

4 什么时机下用computed

在这里插入图片描述

计算属性，只能监听基本数据类型，不能监听引用数据类型，

监听引用数据类型用watch

5 清零

点启动的时候，没有吧taskForm.value.estimateConsumeUse 清空

下次进入的时候taskForm.value.estimateConsumeUse = 2 。再调一遍变成4

======》取消，上一步，启动都要清除！！！

在这里插入图片描述

响应式数据多会一直存在吗？

6 想修改props 数据，怎么修改

props里边是个form. 用v-model = “form” 会报错

用watch也不对

编辑

后改成：打开弹框传进去

在这里插入图片描述

错误思路：

1 dept不能修改，用watch监听一下：赋值给新的变量进行修改，

问题： currentDept 发生改变， depth也发生了改变，因为是浅拷贝，用了json.pase(json.stringify(value))

还有问题：修改后，取消，再点进去，发现currentpet 还是变化后的值，

因为watch监听dept，你在进入编辑弹框，还是没有变化，不会重新赋值给currentDept。导致currentDept还是变化后的值

解决：

发生改变的值(currentDept)，不用watch,

如果不改变，可以用computed

在这里插入图片描述

<template>
  <div class="selectDrawer">
    <Drawer title="编辑部门" ref="drawer" size="40%">
      <!-- 内容 -->
      <template #content>
        <!-- 条件 -->
        <el-form :model="currentDept" label-position="top" :rule="deptRules" ref="deptRef">
          <el-form-item label="部门名称" prop="name">
            <el-input v-model="currentDept.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="部门主管" @click="openPerson">
            <div class="leader">
              <div class="leader_name" v-if="Object.keys(choosePerson).length === 0">请选择</div>
              <el-tag v-else closable @close="deletePerson">{{ choosePerson[0].userName }}</el-tag>
              <div class="leader_icon"
                ><el-icon color="#A8ABB2"><ArrowDown /></el-icon>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="上级部门">
            <el-select v-model="currentDept.parentId" placeholder="请选择">
              <el-option
                v-for="item in parentDept"
                :key="item.deptId"
                :label="item.name"
                :value="item.deptId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="部门描述">
            <el-input
              v-model="currentDept.description"
              maxlength="300"
              :rows="5"
              type="textarea"
              show-word-limit
              placeholder="请输入描述信息"
            />
          </el-form-item>
        </el-form>
      </template>
      <!-- 按钮 -->
      <template #foot_button>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="editDept($parent)">保存</el-button>
      </template>
    </Drawer>
  </div>

  <!-- 选人框 -->
  <ChoosePersonDraw
    ref="chosePersonDrawer"
    @select_person="selectPerson"
    :defaultSelected="choosePerson"
  />
</template>

<script lang="ts" setup>
import { ref } from "vue"
import DeptAPI from "@/api/dept/index.ts"
import Drawer from "@/components/common/Drawer.vue"
import ChoosePersonDraw from "@/components/common/ChoosePersonDraw.vue"
import { ArrowDown } from "@element-plus/icons-vue"

const props = defineProps({
  dept: {
    type: Object,
    default: () => {}
  }
})

const currentDept = ref<any>([])
watch(
  () => props.dept,
  (value) => {
    currentDept.value = JSON.parse(JSON.stringify(value))
  },
  { deep: true }
)

/** 删除人员 */
const deletePerson = () => {
  choosePerson.value = {}
}

/** 打开选人框 */
const chosePersonDrawer = ref<InstanceType<typeof ChoosePersonDraw> | null>(null)
const openPerson = () => {
  chosePersonDrawer.value?.selectOpen()
}

/** 查询上级部门 */
const parentDept = ref<any>([])
const selectParentDept = async () => {
  try {
    const res = await DeptAPI.queryParentDept()
    parentDept.value = res.data
  } catch (error: any) {
    console.log(error)
    if (!error.msg || error.msg != "") {
      ElMessage.error(error.msg)
    }
  }
}

/** 获取人员 */
const choosePerson = ref<any>([])
const selectPerson = (singlePerson: any) => {
  choosePerson.value = []
  choosePerson.value.push({ userName: singlePerson[0].name, id: singlePerson[0].userId })
  console.log(choosePerson.value)
  currentDept.value.leaderId = singlePerson.id
}

/** 校验 */
const deptRules = {
  name: [{ required: true, message: "部门名称不能为空", trigger: "change" }]
}

/** 编辑 */
const deptRef = ref()
const editDept = async (parent: any) => {
  try {
    await deptRef.value.validate()
    await DeptAPI.editDept(currentDept.value)
    drawer.value?.isClose()
    ElMessage({
      message: "添加角色成功",
      type: "success"
    })
    parent.getDeptList()
  } catch (error: any) {
    if (!error.msg || error.msg != "") {
      ElMessage.error(error.msg)
    }
  }
}

/** el-drawer 展开关闭 */
// 关闭
const drawer = ref<InstanceType<typeof Drawer> | null>(null)
const handleClose = () => {
  drawer.value?.isClose()
}

// 打开
const selectOpen = () => {
  //查询部门列表
  selectParentDept()
  drawer.value?.isOpen()
}
defineExpose({
  selectOpen
})
</script>

<style lang="scss" scoped>
// 主管
.leader {
  width: 100%;
  height: 32px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 12px;
  .leader_name {
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 14px;
    color: #a8abb2;
  }
}

// 修改el-form-item 字体
:deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
  font-family: PingFangSC-SNaNpxibold;
  font-weight: 600;
  font-size: 14px;
  color: #333333;
}
:deep(.el-textarea .el-input__count) {
  color: #a8abb2;
}
</style>