设备进场管理

src/global/components/hc-counter/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="ui" class="hc-counter-box">
+    <div class="hc-counter-box" :class="[block?'hc-counter-block':'', size, ui]">
         <div class="counter-box">
             <div class="counter-btn first" :disabled="modelVal <= 1" @click="moveBtnClick">-</div>
             <div class='counter-val w-20'>
@@ -26,6 +26,14 @@ const props = defineProps({
         type: String,
         default: ''
     },
+    block: {
+        type: Boolean,
+        default: false
+    },
+    size: {
+        type: String,
+        default: ''
+    },
 })
 
 //转换
@@ -76,7 +84,7 @@ const addBtnClick = () => {
         .counter-btn {
             height: 32px;
             width: 32px;
-            border: 1px solid #eeeeee;
+            border: 1px solid #dddfe6;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -104,12 +112,30 @@ const addBtnClick = () => {
         }
         .counter-val {
             height: inherit;
-            border-top: 1px solid #eeeeee;
-            border-bottom: 1px solid #eeeeee;
+            border-top: 1px solid #dddfe6;
+            border-bottom: 1px solid #dddfe6;
             display: flex;
             align-items: center;
             justify-content: center;
         }
     }
+    &.hc-counter-block {
+        width: 100%;
+        .counter-box {
+            width: 100%;
+            .counter-val {
+                width: auto;
+                flex: 1;
+            }
+        }
+    }
+    &.large {
+        height: 40px;
+        .counter-btn {
+            height: 40px;
+            width: 40px;
+            font-size: 26px;
+        }
+    }
 }
 </style>

src/global/components/hc-dialog/index.vue

@@ -17,7 +17,7 @@
                     <slot name='rightRowFooter'/>
                 </div>
             </div>
-            <div class="dialog-footer" v-else>
+            <div class="dialog-footer" :class="isFooterCenter?'text-center':''" v-else>
                 <el-button size="large" @click="dialogClosed">
                     <HcIcon name="close"/>
                     <span>取消</span>
@@ -82,6 +82,10 @@ const props = defineProps({
         type: Boolean,
         default: true
     },
+    isFooterCenter: {
+        type: Boolean,
+        default: false
+    },
 })
 
 //变量

src/views/tentative/collect/monthly.vue

@@ -53,19 +53,19 @@
                     </div>
                 </template>
                 <template #extra>
-                    <HcTooltip keys="tentative_material_approach_add">
+                    <HcTooltip keys="tentative_collect_monthly_report">
                         <el-button type="primary" hc-btn>
                             <HcIcon name="send-plane-2"/>
                             <span>上报</span>
                         </el-button>
                     </HcTooltip>
-                    <HcTooltip keys="tentative_material_approach_printer">
+                    <HcTooltip keys="tentative_collect_monthly_print">
                         <el-button hc-btn>
                             <HcIcon name="printer"/>
                             <span>打印</span>
                         </el-button>
                     </HcTooltip>
-                    <HcTooltip keys="tentative_material_approach_import">
+                    <HcTooltip keys="tentative_collect_monthly_download">
                         <el-button hc-btn>
                             <HcIcon name="download"/>
                             <span>下载</span>

src/views/tentative/device/approach.vue

@@ -3,9 +3,11 @@
         <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>
+                <HcTooltip keys="tentative_device_approach_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>
@@ -18,32 +20,32 @@
         <div class="hc-page-content-box">
             <HcCard>
                 <template #header>
-                    <HcTooltip keys="tentative_detect_outside_add">
-                        <el-button type="primary" hc-btn>
+                    <HcTooltip keys="tentative_device_approach_add">
+                        <el-button type="primary" hc-btn @click="addFormModalClick">
                             <HcIcon name="add-circle"/>
                             <span>新增</span>
                         </el-button>
                     </HcTooltip>
-                    <HcTooltip keys="tentative_detect_outside_edit">
-                        <el-button hc-btn>
+                    <HcTooltip keys="tentative_device_approach_edit">
+                        <el-button hc-btn @click="editFormModalClick">
                             <HcIcon name="edit"/>
                             <span>编辑</span>
                         </el-button>
                     </HcTooltip>
-                    <HcTooltip keys="tentative_detect_outside_del">
-                        <el-button hc-btn>
+                    <HcTooltip keys="tentative_device_approach_del">
+                        <el-button hc-btn @click="delNodeModalClick">
                             <HcIcon name="delete-bin-2"/>
                             <span>删除</span>
                         </el-button>
                     </HcTooltip>
-                    <HcTooltip keys="tentative_material_approach_printer">
+                    <HcTooltip keys="tentative_device_approach_printer">
                         <el-button hc-btn>
                             <HcIcon name="printer"/>
                             <span>打印</span>
                         </el-button>
                     </HcTooltip>
-                    <HcTooltip keys="tentative_material_approach_import">
-                        <el-button hc-btn>
+                    <HcTooltip keys="tentative_device_approach_import">
+                        <el-button hc-btn @click="importModalClick">
                             <HcIcon name="folder-upload"/>
                             <span>导入</span>
                         </el-button>
@@ -81,6 +83,126 @@
                 </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="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="设备名称" prop="key1">
+                        <el-input v-model="addEditFormModel.key1"/>
+                    </el-form-item>
+                    <el-form-item label="进场日期">
+                        <el-date-picker type="date" v-model="addEditFormModel.key2" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                    </el-form-item>
+                </div>
+                <div class="hc-form-item">
+                    <el-form-item label="设备分类" prop="key3">
+                        <el-select v-model="addEditFormModel.key3" block>
+                            <el-option v-for="item in menus" :label="item.label" :value="item.key"/>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="测量范围">
+                        <el-input v-model="addEditFormModel.key4"/>
+                    </el-form-item>
+                </div>
+                <div class="hc-form-item">
+                    <el-form-item label="设备编号" prop="key5">
+                        <el-input v-model="addEditFormModel.key5"/>
+                    </el-form-item>
+                    <el-form-item label="精准度" prop="key6">
+                        <el-input v-model="addEditFormModel.key6"/>
+                    </el-form-item>
+                </div>
+                <div class="hc-form-item">
+                    <el-form-item label="设备型号" prop="key7">
+                        <el-input v-model="addEditFormModel.key7"/>
+                    </el-form-item>
+                    <el-form-item label="效验周期" prop="key8">
+                        <HcCounter v-model:value="addEditFormModel.key8" text="(月)" size="large" block/>
+                    </el-form-item>
+                </div>
+                <div class="hc-form-item">
+                    <el-form-item label="生产厂家" prop="key9">
+                        <el-input v-model="addEditFormModel.key9"/>
+                    </el-form-item>
+                    <el-form-item label="拟用部位" prop="key10">
+                        <el-input v-model="addEditFormModel.key10"/>
+                    </el-form-item>
+                </div>
+                <div class="hc-form-item">
+                    <el-form-item label="供应商单位" prop="key11">
+                        <el-input v-model="addEditFormModel.key11"/>
+                    </el-form-item>
+                    <el-form-item label="最近效验时间">
+                        <el-date-picker type="date" v-model="addEditFormModel.key12" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                    </el-form-item>
+                </div>
+                <div class="hc-form-item">
+                    <el-form-item label="出厂日期">
+                        <el-date-picker type="date" v-model="addEditFormModel.key13" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                    </el-form-item>
+                    <el-form-item label="状态">
+                        <el-select v-model="addEditFormModel.key14" placeholder="状态" 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-input v-model="addEditFormModel.key15"/>
+                    </el-form-item>
+                    <div class="flex flex-1">
+                        <el-form-item class="flex-1" label="管理人员" style="margin-right: 0;">
+                            <el-select v-model="addEditFormModel.key16" placeholder="试验人员名称" block>
+                                <el-option label="启用中" value="1"/>
+                                <el-option label="已停用" 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.key17" block/>
+                        </el-form-item>
+                    </div>
+                </div>
+                <div class="hc-form-item">
+                    <el-form-item label="设备采集编号">
+                        <el-input v-model="addEditFormModel.key18"/>
+                    </el-form-item>
+                    <el-form-item label="是否需要效验">
+                        <el-select v-model="addEditFormModel.key19" block disabled>
+                            <el-option label="是" value="1"/>
+                            <el-option label="否" value="2"/>
+                        </el-select>
+                    </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="tableImportColumn" :datas="tableImportData" :loading="tableImportLoading" isCheck @selection-change="tableImportSelection"/>
+            </div>
+        </HcDialog>
+
     </div>
 </template>
 
@@ -89,6 +211,7 @@ 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 useAppState = useAppStore()
@@ -128,21 +251,26 @@ const menuChange = (item) => {
 const contextMenu = ref([])
 const setContextMenu = () => {
     let newArr = [];
-    if (HcIsButton('wbs_tree_edit')) {
+    if (HcIsButton('tentative_device_approach_menu_edit')) {
         newArr.push({icon: 'draft', label: '编辑分类', key: "edit"})
     }
-    if (HcIsButton('wbs_tree_del')) {
+    if (HcIsButton('tentative_device_approach_menu_del')) {
         newArr.push({icon: 'delete-bin', label: '删除分类', key: "del"})
     }
     contextMenu.value = newArr
 }
 
 //菜单的右键菜单被点击
-const contextMenuClick = () => {
-
+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,
@@ -215,6 +343,124 @@ const tableSelection = (rows) => {
 }
 
 
+//新增/编辑 分类
+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 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([])
+
+//多选
+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);
@@ -234,9 +480,9 @@ const onmousedown = () => {
 </script>
 
 <style lang="scss" scoped>
-
-</style>
-
-<style lang="scss">
-
+.hc-import-modal-table-box {
+    position: relative;
+    height: calc(100% - 228px);
+    margin-top: 25px;
+}
 </style>

src/views/tentative/device/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>