设备进场管理

src/views/tentative/device/approach.vue

@@ -199,7 +199,7 @@
             </div>
             <HcDragUpload/>
             <div class="hc-import-modal-table-box">
-                <HcTable ref="tableImportRef" :column="tableImportColumn" :datas="tableImportData" :loading="tableImportLoading" isCheck @selection-change="tableImportSelection"/>
+                <HcTable ref="tableImportRef" :column="tableColumn" :datas="tableImportData" :loading="tableImportLoading" isCheck @selection-change="tableImportSelection"/>
             </div>
         </HcDialog>
 
@@ -395,25 +395,6 @@ const importModalClose = () => {
 
 //表格数据
 const tableImportRef = ref(null)
-const tableImportColumn = 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 tableImportLoading = ref(false)
 const tableImportData = ref([])
 

src/views/tentative/device/employ.vue

@@ -1,30 +1,377 @@
 <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>
+            </div>
+            <div class="hc-menu-contents-box">
+                <el-scrollbar>
+                    <HcMenuSimple :datas="menus" :keys="menuKey" @change="menuChange"/>
+                </el-scrollbar>
+            </div>
+            <!--左右拖动-->
+            <div class="horizontal-drag-line" @mousedown="onmousedown"/>
+        </div>
+        <div class="hc-page-content-box">
+            <HcCard>
+                <template #header>
+                    <HcTooltip keys="tentative_device_employ_add">
+                        <el-button type="primary" hc-btn @click="addFormModalClick">
+                            <HcIcon name="add-circle"/>
+                            <span>新增</span>
+                        </el-button>
+                    </HcTooltip>
+                    <HcTooltip keys="tentative_device_employ_edit">
+                        <el-button hc-btn @click="editFormModalClick">
+                            <HcIcon name="edit"/>
+                            <span>编辑</span>
+                        </el-button>
+                    </HcTooltip>
+                    <HcTooltip keys="tentative_device_employ_del">
+                        <el-button hc-btn @click="delNodeModalClick">
+                            <HcIcon name="delete-bin-2"/>
+                            <span>删除</span>
+                        </el-button>
+                    </HcTooltip>
+                    <HcTooltip keys="tentative_device_employ_printer">
+                        <el-button hc-btn>
+                            <HcIcon name="printer"/>
+                            <span>打印</span>
+                        </el-button>
+                    </HcTooltip>
+                    <HcTooltip keys="tentative_device_employ_import">
+                        <el-button hc-btn @click="importModalClick">
+                            <HcIcon name="folder-upload"/>
+                            <span>导入</span>
+                        </el-button>
+                    </HcTooltip>
+                </template>
+                <template #search>
+                    <div class="w-64">
+                        <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>
+
+        <!--新增/编辑-->
+        <HcDialog :show="addEditFormModal" title="新增/编辑 设备使用信息" widths="50rem" :loading="addEditFormLoading" @close="addEditFormModalClose" @save="addEditFormClick">
+            <el-form ref="addEditFormRef" :model="addEditFormModel" :rules="addEditFormRules" label-width="auto" size="large">
+                <div class="hc-form-item">
+                    <el-form-item label="设备分类">
+                        <el-select v-model="addEditFormModel.key1" block>
+                            <el-option v-for="item in menus" :label="item.label" :value="item.key"/>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="检测项目">
+                        <el-select v-model="addEditFormModel.key2" block>
+                            <el-option label="土工" value="1"/>
+                            <el-option label="水泥" value="2"/>
+                        </el-select>
+                    </el-form-item>
+                </div>
+                <div class="hc-form-item">
+                    <el-form-item class="flex-1" label="设备编号" style="margin-right: 24px;">
+                        <el-select v-model="addEditFormModel.key3" block>
+                            <el-option label="1" value="1"/>
+                            <el-option label="2" value="2"/>
+                        </el-select>
+                    </el-form-item>
+                    <div class="flex flex-1">
+                        <el-form-item class="flex-1" label="样品名称" style="margin-right: 0;">
+                            <el-select v-model="addEditFormModel.key4" block>
+                                <el-option label="名称1" value="1"/>
+                                <el-option label="名称2" value="2"/>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item class="w-32" no-label style="margin-left: 10px; flex: initial;">
+                            <el-input v-model="addEditFormModel.key5" block/>
+                        </el-form-item>
+                    </div>
+                </div>
+                <div class="hc-form-item">
+                    <el-form-item class="flex-1" label="设备名称" style="margin-right: 24px;">
+                        <el-select v-model="addEditFormModel.key6" block>
+                            <el-option label="名称1" value="1"/>
+                            <el-option label="名称2" value="2"/>
+                        </el-select>
+                    </el-form-item>
+                    <div class="flex flex-1">
+                        <el-form-item class="flex-1" label="样品编号" style="margin-right: 0;">
+                            <el-select v-model="addEditFormModel.ke7" block>
+                                <el-option label="编号1" value="1"/>
+                                <el-option label="编号2" value="2"/>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item class="w-32" no-label style="margin-left: 10px; flex: initial;">
+                            <el-input v-model="addEditFormModel.key8" block/>
+                        </el-form-item>
+                    </div>
+                </div>
+                <div class="hc-form-item">
+                    <el-form-item label="使用日期(起)">
+                        <el-date-picker type="date" v-model="addEditFormModel.key9" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                    </el-form-item>
+                    <el-form-item label="使用日期(止)" prop="key10">
+                        <el-date-picker type="date" v-model="addEditFormModel.key10" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                    </el-form-item>
+                </div>
+                <div class="flex">
+                    <el-form-item class="flex-1" label="使用人员" style="margin-right: 16px;">
+                        <el-select v-model="addEditFormModel.ke11" block>
+                            <el-option label="人员1" value="1"/>
+                            <el-option label="人员2" value="2"/>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item class="flex-1" no-label style="margin-left: 5px;">
+                        <el-input v-model="addEditFormModel.key12" block/>
+                    </el-form-item>
+                </div>
+                <el-form-item label="备注">
+                    <el-input v-model="addEditFormModel.desc" type="textarea" placeholder="备注" :autosize="{ minRows: 3}"/>
+                </el-form-item>
+            </el-form>
+        </HcDialog>
+
+        <!--导入-->
+        <HcDialog :show="importModal" title="导入设备使用数据" widths="70rem" isTable isFooterCenter :loading="importModalLoading" @save="importModalYesClick" @close="importModalClose">
+            <div class="text-orange mb-6">
+                <span>请先下载模板模板表格 (</span>
+                <span class="text-link">范例试验设备文件</span>
+                <span>) ,按模板样式编辑试验容器后，在点击“选择文件”按钮选择编辑好的文件，点击确认即可导入成功！</span>
+            </div>
+            <HcDragUpload/>
+            <div class="hc-import-modal-table-box">
+                <HcTable ref="tableImportRef" :column="tableColumn" :datas="tableImportData" :loading="tableImportLoading" isCheck @selection-change="tableImportSelection"/>
+            </div>
+        </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 {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(() => {
 
-</style>
+})
+
+//左侧菜单
+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 searchForm = ref({
+    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: '备注'},
+])
+const tableLoading = ref(false)
+const tableData = ref([])
+
+//获取数据
+const getTableData = () => {
+
+}
+
+//多选
+const tableCheckedKeys = ref([]);
+const tableSelection = (rows) => {
+    tableCheckedKeys.value = rows.filter((item) => {
+        return (item??'') !== '';
+    })
+}
 
-<style lang="scss">
+//删除分类
+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 = {
+    key1: {
+        required: true,
+        trigger: 'blur',
+        message: "请输入"
+    },
+    key2: {
+        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>