for_client/src/views/tentative/parameter/sieve.vue

<template>
    <div class="hc-page-layout-box">
        <div class="hc-layout-left-box menu" :style="'width:' + leftWidth + 'px;'">
            <div class="hc-menu-header-box">
                <div class="text-xl name">自定义筛孔类型</div>
                <HcTooltip keys="tentative_parameter_sieve_menu_add">
                    <el-button type="primary" hc-btn _icon size="small" @click="addEditNodeFormModalClick">
                        <HcIcon name="add"/>
                    </el-button>
                </HcTooltip>
            </div>
            <div class="hc-menu-contents-box">
                <el-scrollbar>
                    <HcMenuSimple :datas="menus" :keys="menuKey" :menus="contextMenu" @change="menuChange" @menuTap="contextMenuClick"/>
                </el-scrollbar>
            </div>
            <!--左右拖动-->
            <div class="horizontal-drag-line" @mousedown="onmousedown"/>
        </div>
        <div class="hc-page-content-box">
            <HcCard>
                <template #header>
                    <div class="w-72">
                        <el-input v-model="searchForm.queryValue" placeholder="请输入容器编号查询" clearable @keyup="keyUpEvent" size="large"/>
                    </div>
                    <div class="ml-2">
                        <el-button type="primary" @click="searchClick" size="large">
                            <HcIcon name="search-2"/>
                            <span>搜索</span>
                        </el-button>
                    </div>
                </template>
                <template #extra>
                    <HcTooltip keys="tentative_parameter_sieve_add">
                        <el-button type="primary" hc-btn @click="addFormModalClick">
                            <HcIcon name="add-circle"/>
                            <span>新增</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_parameter_sieve_edit">
                        <el-button hc-btn @click="editFormModalClick">
                            <HcIcon name="edit"/>
                            <span>编辑</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_parameter_sieve_del">
                        <el-button hc-btn @click="delNodeModalClick">
                            <HcIcon name="delete-bin-2"/>
                            <span>删除</span>
                        </el-button>
                    </HcTooltip>
                </template>
                <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelection"/>
                <template #action>
                    <HcPages :pages="searchForm" @change="pageChange"/>
                </template>
            </HcCard>
        </div>

        <!--新增/编辑 节点-->
        <HcDialog :show="addEditNodeFormModal" title="新增/编辑 类型" widths="30rem" :loading="addEditNodeFormLoading" @close="addEditNodeFormModalClose" @save="addEditNodeFormModalSave">
            <el-form :model="addEditNodeFormModel" label-width="auto" label-position="top" size="large">
                <el-form-item label="类型名称">
                    <el-input v-model="addEditNodeFormModel.key1" placeholder="请输入类型名称"/>
                </el-form-item>
            </el-form>
        </HcDialog>

        <!--新增/编辑-->
        <HcDialog :show="addEditFormModal" title="新增/编辑 筛孔尺寸信息" widths="30rem" :loading="addEditFormLoading" @close="addEditFormModalClose" @save="addEditFormClick">
            <el-form ref="addEditFormRef" :model="addEditFormModel" :rules="addEditFormRules" label-width="auto" size="large">
                <el-form-item label="筛孔尺寸" prop="key1">
                    <el-input v-model="addEditFormModel.key1"/>
                </el-form-item>
                <el-form-item label="下限" prop="key1">
                    <el-input v-model="addEditFormModel.key2"/>
                </el-form-item>
                <el-form-item label="上限" prop="key1">
                    <el-input v-model="addEditFormModel.key3"/>
                </el-form-item>
                <el-form-item label="标准" prop="key1">
                    <el-input v-model="addEditFormModel.key4"/>
                </el-form-item>
                <el-form-item label="限制区界限最大" prop="key1">
                    <el-input v-model="addEditFormModel.key5"/>
                </el-form-item>
                <el-form-item label="限制区界限最小" prop="key1">
                    <el-input v-model="addEditFormModel.key6"/>
                </el-form-item>
                <el-form-item label="控制点界限最大" prop="key1">
                    <el-input v-model="addEditFormModel.key7"/>
                </el-form-item>
                <el-form-item label="控制点界限最小" prop="key1">
                    <el-input v-model="addEditFormModel.key8"/>
                </el-form-item>
            </el-form>
        </HcDialog>
    </div>
</template>

<script setup>
import {ref, onMounted, watch} from "vue";
import {useAppStore} from "~src/store";
import {HcIsButton} from "~src/plugins/IsButtons";
import {getArrValue, getIndex} from "vue-utils-plus"

//初始变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const isCollapse = ref(useAppState.getCollapse)

//监听
watch(() => [
    useAppState.getCollapse
], ([Collapse]) => {
    isCollapse.value = Collapse
})

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

//左侧菜单
const menuKey = ref('key1')
const menuItem = ref({})
const menus = ref([
    {key: 'key1', label: 'xxx类型名称1'},
    {key: 'key2', label: 'xxx类型名称2'},
    {key: 'key3', label: 'xxx类型名称3'},
    {key: 'key4', label: 'xxx类型名称4'}
]);
//菜单被点击
const menuChange = (item) => {
    menuItem.value = item
    menuKey.value = item?.key
}

//菜单的右键菜单
const contextMenu = ref([])
const setContextMenu = () => {
    let newArr = [];
    if (HcIsButton('tentative_parameter_sieve_menu_edit')) {
        newArr.push({icon: 'draft', label: '编辑分类', key: "edit"})
    }
    if (HcIsButton('tentative_parameter_sieve_menu_del')) {
        newArr.push({icon: 'delete-bin', label: '删除分类', key: "del"})
    }
    contextMenu.value = newArr
}

//菜单的右键菜单被点击
const contextMenuItem = ref({})
const contextMenuClick = ({key, item}) => {
    contextMenuItem.value = item
    if (key === 'edit') {
        addEditNodeFormModal.value = true
    } else if (key === 'del') {
        delNodeModalClick()
    }
}

//搜索表单
const searchForm = ref({
    queryValue: null, current: 1, size: 20, total: 0
})

//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({arr,query}) => {
    betweenTime.value = arr
    searchForm.value.betweenTime = query
}

//回车搜索
const keyUpEvent = (e) => {
    if (e.key === "Enter") {
        searchForm.value.current = 1;
        getTableData()
    }
}

//搜索
const searchClick = () => {
    searchForm.value.current = 1;
    getTableData()
}

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//表格数据
const tableRef = ref(null)
const tableColumn = ref([
    {key:'key1', name: '筛孔尺寸'},
    {key:'key2', name: '下限'},
    {key:'key3', name: '上限'},
    {key:'key4', name: '标准'},
    {key:'key5', name: '限制区最大'},
    {key:'key6', name: '限制区最小'},
    {key:'key7', name: '控制点最大'},
    {key:'key8', name: '控制点最小'},
])
const tableLoading = ref(false)
const tableData = ref([])

//获取数据
const getTableData = () => {

}

//多选
const tableCheckedKeys = ref([]);
const tableSelection = (rows) => {
    tableCheckedKeys.value = rows.filter((item) => {
        return (item??'') !== '';
    })
}

//新增/编辑 分类
const addEditNodeFormModal = ref(false)
const addEditNodeFormModel = ref({key1: ''})
const addEditNodeFormModalClick = () => {
    addEditNodeFormModal.value = true
}

//保存节点信息
const addEditNodeFormLoading = ref(false)
const addEditNodeFormModalSave = () => {
    addEditNodeFormModal.value = false
}
//关闭分类编辑弹窗
const addEditNodeFormModalClose = () => {
    addEditNodeFormModal.value = false
}

//删除分类
const delNodeModalClick = () => {
    window?.$messageBox?.alert('请谨慎考虑后，确认是否需要删除？', '删除提醒', {
        showCancelButton: true,
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning',
        callback: (action) => {
            if (action === 'confirm') {
                //removeContractTreeNode()
            }
        }
    })
}

//新增/编辑
const addEditFormModal = ref(false)
const addFormModalClick = () => {
    addEditFormModal.value = true
}
const editFormModalClick = () => {
    addEditFormModal.value = true
}
const addEditFormModalClose = () => {
    addEditFormModal.value = false
}

//新增/编辑 表单
const addEditFormRef = ref(null)
const addEditFormModel = ref({})
const addEditFormRules = {
    key1111: {
        required: true,
        trigger: 'blur',
        message: "请输入"
    },
    key2111: {
        required: true,
        trigger: 'blur',
        message: "请选择"
    },
}

//新增/编辑 保存
const addEditFormLoading = ref(false)
const addEditFormClick = () => {

}


//左右拖动，改变树形结构宽度
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;
    }
}
</script>

<style lang="scss" scoped>
.hc-import-modal-table-box {
    position: relative;
    height: calc(100% - 228px);
    margin-top: 25px;
}
</style>