hac/src/views/system/parameter.vue

<template>
    <div style="height:100%">
        <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick">
            <template #tab-pricetype>
                <HcCard actionSize="lg" >
                
                    <template #action>
                        <HcPages :pages="searchForm" @change="pageChange"></HcPages>
                    </template>
                    <div class="hc-page-layout-box">
                    
                        <HcCardItem ui="hac-card-item"    style="margin-right: 20px;"  scrollbar>
                            <template #header>
                                    <div class="ml-3">
                                            预算分类:
                                    <el-button _icon hc-btn size="small" type="primary" @click="openpriceEdit(1)">
                                        <HcIcon name="add"/>
                                    </el-button>
                             
                                    </div>
                                </template>
                            <div  class="hc-layout-left-box menu">
                        
                            <div class="hc-menu-contents-box">
                                <el-scrollbar>
                                    <HcMenuSimple :datas="menuOptions" :keys="menuKey" :props="menusProps" :menus="contextMenu"  @menuTap="contextMenuClick"
                                                @change="menuChange" />
                                </el-scrollbar>
                            </div>
                            <!--左右拖动-->
                          
                            <HcDialog bgColor="#ffffff" isToBody :show="priceModal" :title="priceTitle" @close="priceModalClose">
                                <el-form
                                :model="priceform"
                                label-position="left" label-width="auto"
                                size="large"
                                 >
                                                <el-form-item label="预算分类名称:">
                                                <el-input v-model="priceform.name" />
                                                </el-form-item>
                                 </el-form>
                            </HcDialog>
                        </div>
                        </HcCardItem>
                
                        <div class="hc-page-content-box">
                            <HcCardItem ui="hac-card-item"    actionSize="lg"  >
                                <template #header>
                                    <div class="ml-3">
                                            任务明细：
                                    <el-button _icon hc-btn size="small" type="primary" @click="openEdit(1)">
                                        <HcIcon name="add"/>
                                    </el-button>
                             
                                    </div>
                                </template>
                            
                                    <HcTable :column="tableColumn" :datas="tableData" >
                                        <template #action="{row, index}">
                                            <el-button size="small" type="primary" @click="openEdit(2)">编辑</el-button>
                                            <el-button size="small" type="primary" @click="delTask">删除</el-button>
                                        </template>
                                    </HcTable>

                                    <HcDialog bgColor="#ffffff" isToBody :show="editTaskModal" :title="taskTitle" @close="testModalClose">
                                        <el-form
                                                label-position="left"
                                                label-width="100px"
                                                :model="formLabelAlign"
                                                style="max-width: 460px"
                                            >
                                                <el-form-item label="任务明细名称:">
                                                <el-input v-model="formLabelAlign.name" />
                                                </el-form-item>
                                                <el-form-item label="任务内容:">
                                                <el-input v-model="formLabelAlign.region" />
                                                </el-form-item>
                                                <el-form-item label="完成指标:">
                                                <el-input v-model="formLabelAlign.type" />
                                                </el-form-item>
                                    </el-form>
                                    </HcDialog>

                            </HcCardItem   >
                        </div>
                    </div>
                </HcCard>
            </template>
            <template #tab-tasktype>
                <HcCard  actionSize="lg" scrollbar>
                                <template #header>

                                    <div class="ml-3">
                                            任务分类：<HcTooltip keys="tentative_device_approach_menu_add">
                                    <el-button _icon hc-btn size="small" type="primary" @click="openTypeEdit(1)">
                                        <HcIcon name="add"/>
                                    </el-button>
                                </HcTooltip>
                                    </div>
                                </template>
                                <!-- <template #extra>
                                    <div style="float: right;">
                                        <el-button size="large" type="primary">
                                            <HcIcon name="save"/>
                                            <span>保存</span>
                                        </el-button>
                                    </div>
                                </template> -->
                                    <HcTable :column="tasktableColumn" :datas="tasktableData">
                                        <template #action="{row, index}">
                                            <el-button size="small" type="primary" @click="openTypeEdit(2)">编辑</el-button>
                                            <el-button size="small" type="primary" @click="delTasktype">删除</el-button>
                                        </template>
                                    </HcTable>
                                    <template #action>
                                        <HcPages :pages="searchForm" @change="pageChange"></HcPages>
                                    </template>
                                    <HcDialog bgColor="#ffffff" isToBody :show="tasktypeModal" :title="taskTypeTitle" @close="taskTypeModalClose" l>
                                        <el-form
                                                label-position="left"
                                                :model="formtaskType"
                                                label-width="auto"
                                                size="large"
                                            >
                                                <el-form-item label="任务类型名称">
                                                <el-input v-model="formtaskType.name" />
                                                </el-form-item>

                                                <el-form-item label="完成指标">
                                                    <el-select v-model="formtaskType.type" class="block" placeholder="请选择" >
                                                        <el-option
                                                        v-for="item in typeoptions"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value"
                                                        />
                                                    </el-select>
                                                </el-form-item>
                                    </el-form>
                                    </HcDialog>

                </HcCard>
            </template>
            <template #tab-indicator>
                测试3
            </template>
            <template #tab-price>
                <HcCard  actionSize="lg" scrollbar>
                                <!-- <template #extra>
                                    <div style="float: right;">
                                        <el-button size="large" type="primary">
                                            <HcIcon name="save"/>
                                            <span>保存</span>
                                        </el-button>
                                    </div>
                                </template> -->
                                <template #header>

                                    <div class="ml-3">
                                            岗位单价：<HcTooltip keys="tentative_device_approach_menu_add">
                                    <el-button _icon hc-btn size="small" type="primary" @click="positionEdit(1)">
                                        <HcIcon name="add"/>
                                    </el-button>
                                </HcTooltip>
                                    </div>
                                </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 :show="positonModal" :title="positonModalTitle" @close="positonModalClose">
                                        <el-form
                                                label-position="left"
                                                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>
        </HcTabsSimple>
    </div>
</template>

<script setup>
import {ref, watch,onMounted} from "vue";
import {useAppStore} from "~src/store";

//渲染完成
onMounted(() => {

    setContextMenu()

})
//类型处理
const tabsKey = ref('pricetype')
const tabsData = ref([
    {icon: 'bar-chart-box', label: '预算分类', key: 'pricetype'},
    {icon: 'tools', label: '任务类型', key: 'tasktype'},
    {icon: 'sun-cloudy', label: '指标依据', key: 'indicator'},
    {icon: 'sun-cloudy', label: '岗位单价', key: 'price'},
])
const searchForm = ref({
    postType: '', name:'',
    current: 1, size: 20, total: 0
})
//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
}
const tabsClick = (key) => {
    tabsKey.value = key
}

const tableColumn = [
    {key: 'name', name: '任务明细'},
    {key: 'text', name: '任务内容'},
    {key: 'color', name: '完成指标'},
    {key: 'action', name: '操作', width: 200}
]
const tableData = ref([
    {name: '名称1', text: '文本1', color: 'red'},
    {name: '名称2', text: '文本2', color: 'blue'},
    {name: '名称3', text: '文本3', color: '无'}
])
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 tasktableColumn = [
    {key: 'name', name: '任务类型名称'},
    {key: 'text', name: '类型'},
    {key: 'action', name: '操作', width: 200}
]
const tasktableData = ref([
    {name: '名称1', text: '文本1', color: 'red'},
    {name: '名称2', text: '文本2', color: 'blue'},
    {name: '名称3', text: '文本3', color: '无'}
])
//左侧菜单
const menuKey = ref('1')
const menuOptions = ref([
    {key: '1', label: '合同洽谈', badge: 0},
    {key: '2', label: '合同洽谈',  badge: 0},
    {key: '3', label: '合同洽谈',  badge: 0},
    {key: '4', label: '合同洽谈',  badge: 0},
    {key: '5', label: '合同洽谈',  badge: 0},
   
    
 


]);

const menuChange = (item) => {
    console.log(item)
    menuKey.value = item?.key
}
const menusProps = ref({
    key: 'key',
    label: 'label'
})
//左右拖动，改变树形结构宽度
const leftWidth = ref(240);
const onmousedown = () => {
    const leftNum = isCollapse.value ? 142 : 272
    document.onmousemove = (ve) => {
        let diffVal = ve.clientX - leftNum;
        if (diffVal >= 220 && diffVal <= 400) {
            leftWidth.value = diffVal;
        }
    }
    document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}
//菜单的右键菜单
const contextMenu = ref([])
const setContextMenu = () => {
    let newArr = [];
        newArr.push({icon: 'draft', label: '编辑分类', key: "edit"})
        newArr.push({icon: 'delete-bin', label: '删除分类', key: "del"})

    contextMenu.value = newArr
}

//菜单的右键菜单被点击
const contextMenuClick = ({key, item}) => {
    if (key === 'edit') {
        openpriceEdit(2)
        menuKey.value=item?.key
    } else if (key === 'del') {
        window?.$messageBox?.alert('您确定要删除该预算分类信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
            showCancelButton: true,
            confirmButtonText: '确认注销',
            cancelButtonText: '取消',
            type: 'warning',
            callback: (action) => {
                if (action === 'confirm') {
                    console.log(11111);
                }
            }
        })
    }
}
const editTaskModal=ref(false)
const testModalClose=()=>{
    editTaskModal.value=false
}
const priceTitle=ref('')
const priceModal=ref(false)
const openpriceEdit=(type)=>{
    if(type===1){
       priceTitle.value='新增分类'
    }else{
        priceTitle.value='编辑分类'
    }

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

const priceform=ref({})
const priceModalClose=()=>{
    priceModal.value=false
}
const openEdit=(type)=>{
    if(type===1){
        taskTitle.value='新增任务明细'
    }else{
        taskTitle.value='编辑任务明细'
    }

    editTaskModal.value=true
}

const formLabelAlign = ref({
  name: '',
  region: '',
  type: '',
})

const taskTitle=ref('')
const taskTypeTitle=ref('')
const formtaskType=ref({})
const tasktypeModal=ref(false)
const taskTypeModalClose=()=>{
    tasktypeModal.value=false
}
const openTypeEdit=(type)=>{
    if(type===1){
        taskTypeTitle.value='新增任务'
    }else{
        taskTypeTitle.value='编辑任务'
    }
    tasktypeModal.value=true
}
const typeoptions=ref([
{
    value: '1',
    label: '固定任务',
  },
  {
    value: '2',
    label: '临时任务',
  },
])
const positonModal=ref(false)
const positonModalTitle=ref('')
const positonModalClose=()=>{
    positonModal.value=false
}
const formposition=ref({})
const positionEdit=(type)=>{
    if(type===1){
        positonModalTitle.value='新增岗位类型'
    }else{
        positonModalTitle.value='编辑岗位类型'
    }
    positonModal.value=true
}
</script>

<style lang="scss" scoped>

</style>

<style lang="scss">
.hc-page-layout-box {
    display: flex;
    position: relative;
    // height: calc(100vh - 228px);

    .hc-layout-left-box {

        width: 382px;

        position: relative;
        // background: #f1f5f8;
        // background: transparent;
        border-radius: 10px;
        // margin-right: 24px;
        box-shadow: none;
        .horizontal-drag-line {
            position: absolute;
            right: 0;
            top: 0;
            width: 4px;
            height: 100%;
            user-select: none;
            cursor: col-resize;
            background-color: #00000000;
        }
  
        &.menu {
            width: 100%;
            .hc-menu-header-box {
                position: relative;
                padding: 15px 18px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #E9E9E9;
                .name {
                    flex: auto;
                    position: relative;
                }
            }
            .hc-menu-contents-box {
                position: relative;
                padding: 15px 18px;
                // height: calc(100% - 60px);
            }
        }
    }
    .hc-page-content-box {
        flex: 1;
        position: relative;
    }
}

</style>