自定义筛孔类型

src/views/tentative/parameter/container.vue

@@ -21,10 +21,10 @@
             <HcCard>
                 <template #header>
                     <div class="w-72">
-                        <el-input v-model="searchForm.queryValue" placeholder="请输入容器编号查询" clearable @keyup="keyUpEvent"/>
+                        <el-input v-model="searchForm.queryValue" placeholder="请输入容器编号查询" clearable @keyup="keyUpEvent" size="large"/>
                     </div>
                     <div class="ml-2">
-                        <el-button type="primary" @click="searchClick">
+                        <el-button type="primary" @click="searchClick" size="large">
                             <HcIcon name="search-2"/>
                             <span>搜索</span>
                         </el-button>

src/views/tentative/parameter/sieve.vue

@@ -1,30 +1,315 @@
 <template>
-    <div class="hc-layout-box">
-        自定义筛孔类型
+    <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,watch,onMounted} from "vue";
-import {useRouter, useRoute} from 'vue-router'
+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 router = useRouter()
-const useRoutes = useRoute()
 const useAppState = useAppStore()
-//const {getObjValue, getArrValue} = isType()
-
-//全局变量
 const projectId = ref(useAppState.getProjectId);
 const contractId = ref(useAppState.getContractId);
+const isCollapse = ref(useAppState.getCollapse)
 
-</script>
+//监听
+watch(() => [
+    useAppState.getCollapse
+], ([Collapse]) => {
+    isCollapse.value = Collapse
+})
 
-<style lang="scss" scoped>
+//渲染完成
+onMounted(() => {
+    setContextMenu()
+})
 
-</style>
+//左侧菜单
+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([])
 
-<style lang="scss">
+//获取数据
+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>