hac/src/views/system/components/tab-invoice.vue

<template>
    <HcCard>
        <template #header>
            <span class="mr-2">发票类型:</span>
            <el-button _icon hc-btn size="small" type="primary" @click="positionEdit(1)">
                <HcIcon name="add"/>
            </el-button>
        </template>
        <HcTable :column="positiontableColumn" :datas="positiontableData" :loading="tableLoaing">
            <template #action="{row, index}">
                <el-button size="small" type="primary" @click="positionEdit(2,row)">编辑</el-button>
                <el-button size="small" type="primary" @click="delTaskposition(row)">删除</el-button>
            </template>
        </HcTable>
   
        <HcDialog bgColor="#ffffff" isToBody widths="24rem" :show="positonModal" :title="positonModalTitle" @close="positonModalClose" @save="savepositionClick">
            <el-form label-position="top" label-width="auto" :model="formposition" size="large">
                <el-form-item label="发票类型名称:">
                    <el-input v-model="formposition.dictName"/>
                </el-form-item>
        
            </el-form>
        </HcDialog>
    </HcCard>
</template>

<script setup>
import {ref, watch,onMounted} from "vue";
import {submitDictionary,removeDictionary,getParentList,getChildList} from '~api/system/parameter.js';
import {getArrValue} from "js-fast-way"
const props = defineProps({
    cur: {
        type: [String,Number],
        default: ''
    },
    type:{
        type: [String,Number],
        default: ''
    }
})

const tabsKey = ref(props.cur)
const tabsType = ref(props.type)

//监听
watch(() => [
    props.cur,
    props.type,
], ([key,type]) => {
    tabsKey.value = key
    tabsType.value = type
})

onMounted(() => {
    getParentListData()
   
})
const tableLoaing=ref(false)
const getParentListData=async()=>{
    tableLoaing.value=true
    const { error, code, data,msg } = await getParentList({
        type:tabsType.value,
    })
    tableLoaing.value=false
    if (!error && code === 200) {
        positiontableData.value = getArrValue(data['records'])
       
    } 
    else {
        positiontableData.value=[]
        window.$message?.warning(msg)
    }
}




const positiontableColumn = [
    {key: 'dictName', name: '报销类型名称'},
    {key: 'action', name: '操作', width: 200}
]


const positiontableData = ref([
   
])

const positonModal = ref(false)
const positonModalTitle = ref('')
const editItem=ref({})
const positionEdit = (type,row) => {
    if (type === 1) {
        positonModalTitle.value = '新增报销类型'
        formposition.value={}
        editItem.value={}
    } else {
        positonModalTitle.value = '编辑报销类型'
        editItem.value=row
        formposition.value=row
    }
    positonModal.value = true
}


const positonModalClose = () => {
    positonModal.value = false
}

const formposition = ref({})

//新增编辑提交
const savepositionClick=async()=>{
    const { error, code, data,msg } = await submitDictionary({
        type:tabsType.value,
        dictValue:formposition.value?.dictValue,
        dictName:formposition.value?.dictName,
        id:editItem.value.id||null
      
    })
    positonModal.value=false
    if (!error && code === 200) {
        window.$message?.success(msg)
        getParentListData()
    } 
    else {
        window.$message?.warning(msg)
    }
}
const delTaskposition = (row) => {
    window?.$messageBox?.alert('您确定要删除该信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
            showCancelButton: true,
            confirmButtonText: '确认注销',
            cancelButtonText: '取消',
            type: 'warning',
            callback: async(action) => {
                if (action === 'confirm') {
                        const {error, code, msg} = await removeDictionary({
                            ids: row?.id,
                        })
                        if (!error && code === 200) {
                            window?.$message?.success('删除成功')
                            getParentListData()
                        } else {
                            window?.$message?.warning(msg)
                        }
                }
            }
    })
}
</script>

<style scoped lang="scss">

</style>