vue3 カプセル化フォームコンポーネント (2) 01 el-tree-select & vue3 カプセル化コンポーネントの書き方

vue3 カプセル化フォームコンポーネント (2) 01 el-tree-select & vue3 カプセル化コンポーネントの書き方

効果

方法１：従来の書き込み方法

インデックス.vue

<template>
  <div class="about">
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="120px" class="demo-ruleForm">
      <el-form-item label="牵头单位" prop="leadUnit">
        <el-tree-select v-model="ruleForm.leadUnit" :data="companyData" :props="{ value: 'unitCode', label: 'unitName' }"
          value-key="unitCode" @change="(val: any) => handleUnitChange(val)" placeholder="请选择"  />
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import unitSelect from '@/components/unitSelect'

const ruleFormRef = ref(null)
const ruleForm = reactive({
  leadUnit: ''
})

const companyData = ref([
  {
    id: 0,
    unitCode: '0',
    unitName: '集团总部',
    children: [
      {
        id: 1,
        unitCode: '1',
        unitName: '北京总部',
        children: [
          {
            id: 2,
            unitCode: '2',
            unitName: '朝阳分公司',
          },
          {
            id: 3,
            unitCode: '3',
            unitName: '海淀分公司',
          },
          {
            id: 4,
            unitCode: '4',
            unitName: '昌平分公司',
          }
        ]
      }
    ]
  }
])

// const findField = (data: any, val: any, res = []){
//   if (!Array.isArray(data)) {
//     return []
//   }
//   data.forEach(item => {
//     if (item.unitCode === val) {
//       res.push(item)
//     }
//     if (item.children && item.children.length) {
//       findField(item.children, val, res)
//     }
//   })
//   return res
// }

const handleUnitChange = (val: any) => {
  console.log(val );
  
  // const obj = findField(companyData.value, val)
  // ruleForm.leadUnit = obj[0]
}
</script>
<style scoped>
.about {
  width: 500px;
}
</style>

方法2：カプセル化書き込み方法

1. ページ

インデックス.vue

<template>
  <div class="about">
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="120px" class="demo-ruleForm">
      <el-form-item label="牵头单位" prop="leadUnit">
          <unitSelect v-model="ruleForm.leadUnit"/>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import unitSelect from '@/components/unitSelect'

const ruleFormRef = ref(null)
const ruleForm = reactive({
  leadUnit: ''
})
</script>
<style scoped>
.about {
  width: 500px;
}
</style>

参照コンポーネント

2. コンポーネント

src\components\unitSelect.vue

<template>
    <el-tree-select v-model="unitValue" :data="companyData" :props="{ value: 'unitCode', label: 'unitName' }"
        value-key="unitCode" @change="selectUnitEvent" placeholder="请选择"/>
</template>
    <!--  @change="(val: any) => handleUnitChange(val)"    等价于 @change="selectUnitEvent" -->
<script lang="ts" setup>
// import { getUnits } from '@/api/couny'
import { emitChangeFn } from 'element-plus';
import { ref, toRef } from 'vue'
const props = defineProps({
    modelValue: {
        defult: null,
        type: String
    }
})
const emit = defineEmits(['update:modelValue'])
const unitValue = toRef(props, 'modelValue')
const companyData = ref([
    {
        id: 0,
        unitCode: '0',
        unitName: '集团总部',
        children: [
            {
                id: 1,
                unitCode: '1',
                unitName: '北京总部',
                children: [
                    {
                        id: 2,
                        unitCode: '2',
                        unitName: '朝阳分公司',
                    },
                    {
                        id: 3,
                        unitCode: '3',
                        unitName: '海淀分公司',
                    },
                    {
                        id: 4,
                        unitCode: '4',
                        unitName: '昌平分公司',
                    }
                ]
            }
        ]
    }
])

// const getUnitsList = async()=>{
//     await getUnitsList().then((res:any)=>{
//         companyData.value = res.data
//     })
// }
// getUnitsList()

const selectUnitEvent = (val: any) => {
    emit('update:modelValue', val)
}
</script>

リファレンスインターフェース

3. インターフェース

src\api\coony.js

import request from '@/utils/request'
const url = '/thingsgrid-science'

//枚举值查询--写法一
export const queryId = (id)=>{
    
    
    return request({
    
    
        url:`${
      
      url}/dict/queryDictById`,
        method:'post',
        data
    })
}

// 获取表格数据 -- 写法二
export function getList(params){
    
    
    return request({
    
    
        url:'api/thingsgrid-system/dept/lazy-list',
        method:'get',
        params,
    })
}

// 删除数据  -- 写法三
export function remove (params){
    
    
    return request({
    
    
        url:'api/thingsgrid-system/dept/remove',
        method:'post',
        params,
    })
}

// 牵头单位组织树列表
export const getUnits = (data)=>{
    
    
    return request({
    
    
        url:`${
      
      url}/unit/getUnits`,
        method:'post',
        data
    })
}