设备进场管理

src/views/tentative/collect/monthly.vue

@@ -322,6 +322,7 @@ const onmousedown = () => {
 <style lang="scss">
 .hc-table-ref-box {
     height: 100%;
+    border: 0;
     .el-table.hc-table-diy-box {
         --el-table-bg-color: initial;
         --el-table-header-bg-color: #DAE8F3;

src/views/tentative/device/approach.vue

@@ -1,24 +1,236 @@
 <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 font-bold name">设备分类</div>
+                <el-button type="primary" hc-btn _icon size="small">
+                    <HcIcon name="add"/>
+                </el-button>
+            </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>
+                    <HcTooltip keys="tentative_detect_outside_add">
+                        <el-button type="primary" hc-btn>
+                            <HcIcon name="add-circle"/>
+                            <span>新增</span>
+                        </el-button>
+                    </HcTooltip>
+                    <HcTooltip keys="tentative_detect_outside_edit">
+                        <el-button hc-btn>
+                            <HcIcon name="edit"/>
+                            <span>编辑</span>
+                        </el-button>
+                    </HcTooltip>
+                    <HcTooltip keys="tentative_detect_outside_del">
+                        <el-button hc-btn>
+                            <HcIcon name="delete-bin-2"/>
+                            <span>删除</span>
+                        </el-button>
+                    </HcTooltip>
+                    <HcTooltip keys="tentative_material_approach_printer">
+                        <el-button hc-btn>
+                            <HcIcon name="printer"/>
+                            <span>打印</span>
+                        </el-button>
+                    </HcTooltip>
+                    <HcTooltip keys="tentative_material_approach_import">
+                        <el-button hc-btn>
+                            <HcIcon name="folder-upload"/>
+                            <span>导入</span>
+                        </el-button>
+                    </HcTooltip>
+                </template>
+                <template #search>
+                    <div class="w-32">
+                        <el-select v-model="searchForm.type" placeholder="是否需要效验" clearable>
+                            <el-option label="是" value="1"/>
+                            <el-option label="否" value="2"/>
+                        </el-select>
+                    </div>
+                    <div class="w-32 ml-2">
+                        <el-select v-model="searchForm.state" placeholder="状态" clearable>
+                            <el-option label="启用中" value="1"/>
+                            <el-option label="已停用" value="2"/>
+                        </el-select>
+                    </div>
+                    <div class="w-64 ml-2">
+                        <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate"/>
+                    </div>
+                    <div class="w-72 ml-2">
+                        <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>
+                <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelection"/>
+                <template #action>
+                    <HcPages :pages="searchForm" @change="pageChange"/>
+                </template>
+            </HcCard>
+        </div>
     </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)
+
+//监听
+watch(() => [
+    useAppState.getCollapse
+], ([Collapse]) => {
+    isCollapse.value = Collapse
+})
+
+//渲染完成
+onMounted(() => {
+    setContextMenu()
+})
+
+//左侧菜单
+const menuKey = ref('all')
+const menuItem = ref({})
+const menus = ref([
+    {key: 'all', label: '全部'},
+    {key: 'key1', label: '力学室'},
+    {key: 'key2', label: '集料室'},
+    {key: 'key3', label: '水土室'},
+    {key: 'key4', label: '水泥室'},
+]);
+//菜单被点击
+const menuChange = (item) => {
+    menuItem.value = item
+    menuKey.value = item?.key
+}
+
+//菜单的右键菜单
+const contextMenu = ref([])
+const setContextMenu = () => {
+    let newArr = [];
+    if (HcIsButton('wbs_tree_edit')) {
+        newArr.push({icon: 'draft', label: '编辑分类', key: "edit"})
+    }
+    if (HcIsButton('wbs_tree_del')) {
+        newArr.push({icon: 'delete-bin', label: '删除分类', key: "del"})
+    }
+    contextMenu.value = newArr
+}
+
+//菜单的右键菜单被点击
+const contextMenuClick = () => {
+
+}
+
+
+//搜索表单
+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([
+    {key:'key1', name: '设备名称'},
+    {key:'key2', name: '设备分类'},
+    {key:'key3', name: '设备编号'},
+    {key:'key4', name: '设备型号'},
+    {key:'key5', name: '生产厂家'},
+    {key:'key6', name: '出厂日期'},
+    {key:'key7', name: '出厂编号'},
+    {key:'key8', name: '进场日期'},
+    {key:'key9', name: '测量范围'},
+    {key:'key10', name: '精准度'},
+    {key:'key11', name: '校准周期(月)'},
+    {key:'key12', name: '最近效验时间'},
+    {key:'key13', name: '状态'},
+    {key:'key14', name: '是否需要效验'},
+    {key:'key15', name: '设备采集编号'},
+    {key:'key16', name: '设备管理人员'},
+    {key:'key17', name: '备注'},
+])
+const tableLoading = ref(false)
+const tableData = ref([])
+
+//获取数据
+const getTableData = () => {
+
+}
+
+//多选
+const tableCheckedKeys = ref([]);
+const tableSelection = (rows) => {
+    tableCheckedKeys.value = rows.filter((item) => {
+        return (item??'') !== '';
+    })
+}
+
+
 
+//左右拖动，改变树形结构宽度
+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>