vue3封装表单组件（一）之el-select & `${}之接口抽离公共词根

vue3封装表单组件（一）之el-select & `${}之接口抽离公共词根

效果

方式一：常规写法

index.vue

<template>
  <div class="about">
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="120px" class="demo-ruleForm">
      <el-form-item label="审批状态" prop="examineState">
        <el-select v-model="ruleForm.processState" placeholder="请选择">
          <el-option label="通过" value="1" />
          <el-option label="驳回" value="2" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'


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

方式二：封装写法

1、页面

index.vue

<template>
  <div class="about">
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="120px" class="demo-ruleForm">
      <el-form-item label="审批状态" prop="examineState">
        <!-- <el-select v-model="ruleForm.processState" placeholder="请选择">
        <el-option label="通过" value="1" />
        <el-option label="驳回" value="2" />
      </el-select> -->
        <dictSelect v-model="ruleForm.examineState" :dictid="199" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import dictSelect from '@/components/dictSelect'

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

引用组件

2、组件

src\components\dictSelect.vue

<template>
    <!-- class="m-2" -->
    <el-select v-model="dictValue"  placeholder="请选择" @change="selectDictEvent" size="default">
        <el-option v-for="item in dictData" :key="item.paraCode" :label="item.paraDesc" :value="item.paraCode">
        </el-option>
    </el-select>
</template>
<script lang="ts" setup>
// import { queryId } from '@/api/couny'
import { ref, toRef } from 'vue'
const props = defineProps({
    modelValue: {
        default: null,
        type: String
    },
    dictid: {
        default: null,
        type: Number
    }
})
const emit = defineEmits(['update:modelValue'])
const dictData = ref([
    {
        paraDesc: '通过',
        paraCode: '1',
    },
    {
        paraDesc: '驳回',
        paraCode: '2',
    },
])
const queryDictList = () => {
    console.log( props.dictid);
    
    // queryId({ id: props.dictid }).then((res: any) => {
    //     dictData.value = res.data
    // })
}
queryDictList()

const dictValue = toRef(props, 'modelValue')

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

引用接口

3、接口

src\api\couny.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
    })
}