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

<template>
    <HcCard>
        <!-- <template #extra>
            <div style="float: right;">
                <el-button size="large" type="primary">
                    <HcIcon name="save"/>
                    <span>保存</span>
                </el-button>
            </div>
        </template> -->
        <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">
            <template #action="{row, index}">
                <el-button size="small" type="primary" @click="positionEdit(2)">编辑</el-button>
                <el-button size="small" type="primary" @click="delTaskposition">删除</el-button>
            </template>
        </HcTable>
        <template #action>
            <HcPages :pages="searchForm" @change="pageChange"></HcPages>
        </template>
        <HcDialog bgColor="#ffffff" isToBody widths="24rem" :show="positonModal" :title="positonModalTitle" @close="positonModalClose">
            <el-form label-position="top" label-width="auto" :model="formposition" size="large">
                <el-form-item label="岗位类型名称:">
                    <el-input v-model="formposition.name"/>
                </el-form-item>
                <el-form-item label="日单价:">
                    <el-input v-model="formposition.price"/>
                </el-form-item>
            </el-form>
        </HcDialog>
    </HcCard>
</template>

<script setup>
import {ref, watch} from "vue";

const props = defineProps({
    cur: {
        type: [String,Number],
        default: ''
    },
})

const tabsKey = ref(props.cur)

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


const searchForm = ref({
    postType: '', name: '',
    current: 1, size: 20, total: 0
})
//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
}

const positiontableColumn = [
    {key: 'name', name: '岗位类型名称'},
    {key: 'text', name: '日单价'},
    {key: 'action', name: '操作', width: 200}
]


const positiontableData = ref([
    {name: '名称1', text: '文本1', color: 'red'},
    {name: '名称2', text: '文本2', color: 'blue'},
    {name: '名称3', text: '文本3', color: '无'}
])

const positonModal = ref(false)
const positonModalTitle = ref('')

const positionEdit = (type) => {
    if (type === 1) {
        positonModalTitle.value = '新增岗位类型'
    } else {
        positonModalTitle.value = '编辑岗位类型'
    }
    positonModal.value = true
}

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

const formposition = ref({})

const delTaskposition = () => {
    window?.$messageBox?.alert('您确定要删除该岗位单价吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
        showCancelButton: true,
        confirmButtonText: '确认注销',
        cancelButtonText: '取消',
        type: 'warning',
        callback: (action) => {
            if (action === 'confirm') {
                console.log(11111);
            }
        }
    })
}
</script>

<style scoped lang="scss">

</style>