参数设置，试验容器

src/views/tentative/device/approach.vue

@@ -2,7 +2,7 @@
     <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 font-bold name">设备分类</div>
+                <div class="text-xl name">设备分类</div>
                 <HcTooltip keys="tentative_device_approach_menu_add">
                     <el-button type="primary" hc-btn _icon size="small" @click="addEditNodeFormModalClick">
                         <HcIcon name="add"/>

src/views/tentative/parameter/components/HcDragUpload.vue

@@ -0,0 +1,152 @@
+<template>
+    <el-upload ref="uploadRef" class="hc-upload-border approach" drag :action="action" :headers="getTokenHeader()" :data="uploadData" :accept="accept" :disabled="uploadDisabled" :limit="1" :show-file-list="false"
+               :before-upload="beforeUpload" :on-exceed="uploadExceed" :on-progress="uploadprogress" :on-success="uploadSuccess" :on-error="uploadError" :on-change="uploadChange" :auto-upload="false">
+
+        <div class="hc-upload-loading upload-file-info" v-loading="uploadDisabled" element-loading-text="上传中...">
+            <template v-if="uploadFileInfo?.name">
+                <HcIcon name="file-text" class="upload-file-icon"/>
+                <div class="upload-file-name">{{uploadFileInfo?.name}}</div>
+            </template>
+            <template v-else>
+                <HcIcon name="upload-cloud" class="upload-icon"/>
+                <div class="el-upload__text">拖动文件到这里 或 <em>点击这里选择文件</em> 并上传</div>
+            </template>
+        </div>
+
+        <template #tip>
+            <div class="el-upload__tip">允许格式：excel， 文件大小 小于 60MB</div>
+        </template>
+    </el-upload>
+</template>
+
+<script setup>
+import {ref,watch,onMounted} from "vue";
+import {getTokenHeader} from '~src/api/request/header';
+import {getObjValue, isSize} from "vue-utils-plus"
+import {genFileId} from "element-plus";
+const props = defineProps({
+    datas: {
+        type: Object,
+        default: () => ({})
+    },
+})
+
+//变量
+const uploadRef = ref(null)
+const uploadData = ref(props.datas)
+const uploadFileInfo = ref({})
+const uploadDisabled = ref(false)
+
+const action = '/api/blade-manager/exceltab/add-buss-file';
+const accept = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel';
+
+//监听
+watch(() => [
+    props.datas,
+], ([datas]) => {
+    uploadData.value = datas
+})
+
+
+//事件
+const emit = defineEmits(['progress', 'finished', 'change'])
+
+//上传前
+const beforeUpload = async (file) => {
+    if (isSize(file?.size,60)) {
+        return true;
+    } else {
+        window?.$message?.warning('文件大小, 不能过60M!');
+        return false;
+    }
+}
+
+//超出限制时
+const uploadExceed = (files) => {
+    uploadRef.value?.clearFiles()
+    const file = files[0]
+    file.uid = genFileId()
+    uploadRef.value?.handleStart(file)
+}
+
+//上传中
+const uploadprogress = () => {
+    uploadDisabled.value = true
+    emit('progress', true)
+}
+
+//上传完成
+const uploadSuccess = (res) => {
+    uploadDisabled.value = false
+    emit('progress', false)
+    emit('finished', {
+        type: 'success',
+        data: getObjValue(res?.data)
+    })
+}
+
+//上传失败
+const uploadError = (res) => {
+    uploadDisabled.value = false
+    emit('progress', false)
+    emit('finished', {
+        type: 'error',
+        data: getObjValue(res?.data)
+    })
+    window?.$message?.error('导入失败');
+}
+
+//文件改变时
+const uploadChange = (file) => {
+    console.log(file)
+    uploadFileInfo.value = file
+    emit('change', file)
+}
+
+const submit = () => {
+    uploadRef.value?.submit()
+}
+
+const clearFiles = () => {
+    uploadRef.value?.clearFiles()
+}
+
+// 暴露出去
+defineExpose({
+    submit,
+    clearFiles
+})
+</script>
+
+<style lang="scss">
+.hc-upload-border.approach {
+    .el-upload-dragger {
+        padding: 24px;
+    }
+    .hc-upload-loading.upload-file-info {
+        .hc-icon-i {
+            font-size: 40px;
+        }
+        .upload-icon {
+            color: var(--el-text-color-placeholder);
+        }
+        .upload-file-icon {
+            color: var(--el-color-primary-light-5);
+        }
+        .el-upload__text {
+            margin-top: 10px;
+        }
+        .upload-file-name {
+            margin-top: 10px;
+            font-size: 14px;
+            text-align: center;
+            color: var(--el-color-primary);
+        }
+    }
+    .el-upload__tip {
+        font-size: 14px;
+        margin-top: 16px;
+        color: var(--el-text-color-placeholder);
+    }
+}
+</style>

src/views/tentative/parameter/container.vue

@@ -1,30 +1,435 @@
 <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_container_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"/>
+                    </div>
+                    <div class="ml-2">
+                        <el-button type="primary" @click="searchClick">
+                            <HcIcon name="search-2"/>
+                            <span>搜索</span>
+                        </el-button>
+                    </div>
+                </template>
+                <template #extra>
+                    <HcTooltip keys="tentative_parameter_container_add">
+                        <el-button type="primary" hc-btn @click="addFormModalClick">
+                            <HcIcon name="add-circle"/>
+                            <span>新增</span>
+                        </el-button>
+                    </HcTooltip>
+                    <HcTooltip keys="tentative_parameter_container_edit">
+                        <el-button hc-btn @click="editFormModalClick">
+                            <HcIcon name="edit"/>
+                            <span>编辑</span>
+                        </el-button>
+                    </HcTooltip>
+                    <HcTooltip keys="tentative_parameter_container_del">
+                        <el-button hc-btn @click="delNodeModalClick">
+                            <HcIcon name="delete-bin-2"/>
+                            <span>删除</span>
+                        </el-button>
+                    </HcTooltip>
+                    <HcTooltip keys="tentative_parameter_container_printer">
+                        <el-button hc-btn>
+                            <HcIcon name="printer"/>
+                            <span>打印</span>
+                        </el-button>
+                    </HcTooltip>
+                    <HcTooltip keys="tentative_parameter_container_import">
+                        <el-button hc-btn @click="importModalClick">
+                            <HcIcon name="folder-upload"/>
+                            <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" @save="addEditNodeFormModalSave" @close="addEditNodeFormModalClose">
+            <el-form :model="addEditNodeFormModel" label-width="auto" label-position="top" size="large">
+                <el-form-item class="mb-0" 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">
+                <template v-if="menuKey === 'key1'">
+                    <el-form-item label="盒号" prop="key1">
+                        <el-input v-model="addEditFormModel.key1"/>
+                    </el-form-item>
+                    <el-form-item label="盒重" prop="key2">
+                        <el-input v-model="addEditFormModel.key2"/>
+                    </el-form-item>
+                    <el-form-item label="校准日期">
+                        <el-date-picker type="date" v-model="addEditFormModel.key3" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                    </el-form-item>
+                </template>
+                <template v-if="menuKey === 'key2'">
+                    <el-form-item label="筒号" prop="key1">
+                        <el-input v-model="addEditFormModel.key1"/>
+                    </el-form-item>
+                    <el-form-item label="筒质量(g)" prop="key2">
+                        <el-input v-model="addEditFormModel.key2"/>
+                    </el-form-item>
+                    <el-form-item label="筒体积(m³)" prop="key4">
+                        <el-input v-model="addEditFormModel.key4"/>
+                    </el-form-item>
+                    <el-form-item label="校准日期">
+                        <el-date-picker type="date" v-model="addEditFormModel.key3" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                    </el-form-item>
+                </template>
+                <template v-if="menuKey === 'key3'">
+                    <el-form-item label="环刀号" prop="key1">
+                        <el-input v-model="addEditFormModel.key1"/>
+                    </el-form-item>
+                    <el-form-item label="环刀质量(g)" prop="key2">
+                        <el-input v-model="addEditFormModel.key2"/>
+                    </el-form-item>
+                    <el-form-item label="环刀容积(m³)" prop="key4">
+                        <el-input v-model="addEditFormModel.key4"/>
+                    </el-form-item>
+                    <el-form-item label="校准日期">
+                        <el-date-picker type="date" v-model="addEditFormModel.key3" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                    </el-form-item>
+                </template>
+                <template v-if="menuKey === 'key4'">
+                    <el-form-item label="瓶号" prop="key1">
+                        <el-input v-model="addEditFormModel.key1"/>
+                    </el-form-item>
+                    <el-form-item label="瓶质量(g)" prop="key2">
+                        <el-input v-model="addEditFormModel.key2"/>
+                    </el-form-item>
+                    <el-form-item label="校准日期">
+                        <el-date-picker type="date" v-model="addEditFormModel.key3" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                    </el-form-item>
+                </template>
+            </el-form>
+        </HcDialog>
+
+        <!--导入-->
+        <HcDialog :show="importModal" title="导入" widths="38rem" isRowFooter @close="importModalClose">
+            <HcDragUpload/>
+            <template #leftRowFooter>
+                <el-button size="large">
+                    <HcIcon name="download-2"/>
+                    <span>下载模板</span>
+                </el-button>
+            </template>
+            <template #rightRowFooter>
+                <el-button size="large" @click="importModalClose">
+                    <HcIcon name="close"/>
+                    <span>取消导入</span>
+                </el-button>
+                <el-button type="primary" hc-btn :loading="importModalLoading" @click="importModalYesClick">
+                    <HcIcon name="folder-upload"/>
+                    <span>确认导入</span>
+                </el-button>
+            </template>
+        </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"
+import HcDragUpload from "./components/HcDragUpload.vue"
 
 //初始变量
-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()
+    setMenuTableColumn(menuKey.value)
+})
 
-</style>
+//左侧菜单
+const menuKey = ref('key1')
+const menuItem = ref({})
+const menus = ref([
+    {key: 'key1', label: '铝盒'},
+    {key: 'key2', label: '试筒'},
+    {key: 'key3', label: '环刀'},
+    {key: 'key4', label: '比重瓶'}
+]);
+//菜单被点击
+const menuChange = (item) => {
+    menuItem.value = item
+    menuKey.value = item?.key
+    setMenuTableColumn(item?.key)
+}
+
+const setMenuTableColumn = (key) => {
+    if (key === 'key1') {
+        tableColumn.value = [
+            {key:'key1', name: '盒号'},
+            {key:'key2', name: '盒重'},
+            {key:'key3', name: '校准日期'}
+        ]
+    } else if (key === 'key2') {
+        tableColumn.value = [
+            {key:'key1', name: '筒号'},
+            {key:'key2', name: '筒质量(g)'},
+            {key:'key4', name: '筒体积(m³)'},
+            {key:'key3', name: '校准日期'}
+        ]
+    } else if (key === 'key3') {
+        tableColumn.value = [
+            {key:'key1', name: '环刀号'},
+            {key:'key2', name: '环刀质量(g)'},
+            {key:'key4', name: '环刀容积(m³)'},
+            {key:'key3', name: '校准日期'}
+        ]
+    } else if (key === 'key4') {
+        tableColumn.value = [
+            {key:'key1', name: '瓶号'},
+            {key:'key2', name: '瓶质量(g)'},
+            {key:'key3', name: '校准日期'}
+        ]
+    }
+}
+
+
+//菜单的右键菜单
+const contextMenu = ref([])
+const setContextMenu = () => {
+    let newArr = [];
+    if (HcIsButton('tentative_parameter_container_menu_edit')) {
+        newArr.push({icon: 'draft', label: '编辑容器', key: "edit"})
+    }
+    if (HcIsButton('tentative_parameter_container_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({
+    type: null, state: null, betweenTime: null, 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([])
+const tableLoading = ref(false)
+const tableData = ref([])
+
+//获取数据
+const getTableData = () => {
+
+}
 
-<style lang="scss">
+//多选
+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 importModal = ref(false)
+const importModalClick = () => {
+    importModal.value = true
+}
+
+//确认导入
+const importModalLoading = ref(false)
+const importModalYesClick = () => {
+    importModal.value = false
+}
+
+//关闭导入
+const importModalClose = () => {
+    importModal.value = false
+}
+
+//表格数据
+const tableImportRef = ref(null)
+const tableImportLoading = ref(false)
+const tableImportData = ref([])
+
+//多选
+const tableImportKeys = ref([]);
+const tableImportSelection = (rows) => {
+    tableImportKeys.value = rows.filter((item) => {
+        return (item??'') !== '';
+    })
+}
+
+
+
+//新增/编辑
+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>