试验容器

src/api/modules/tentative/parameter/container.js

@@ -0,0 +1,68 @@
+import {httpApi} from "../../../request/httpApi";
+
+export default {
+    //查询容器分类集合
+    async queryClassification(form, msg = true) {
+        return httpApi({
+            url: '/api/blade-business/container/classification/list',
+            method: 'get',
+            params: form
+        }, msg);
+    },
+    //试验容器新增或修改
+    async submitClassification(form, msg = true) {
+        return httpApi({
+            url: '/api/blade-business/container/classification/submit',
+            method: 'post',
+            data: form
+        }, msg);
+    },
+    //删除容器中的字段
+    async removeField(form, msg = true) {
+        return httpApi({
+            url: '/api/blade-business/container/data/field/remove',
+            method: 'post',
+            params: form
+        }, msg);
+    },
+    //删除容器
+    async removeClassification(form, msg = true) {
+        return httpApi({
+            url: '/api/blade-business/container/classification/remove',
+            method: 'post',
+            params: form
+        }, msg);
+    },
+    //根据容器类型条件分页查询
+    async queryPage(form, msg = true) {
+        return httpApi({
+            url: '/api/blade-business/container/data/page',
+            method: 'post',
+            data: form
+        }, msg);
+    },
+    //容器数据新增或修改
+    async submitForm(form, msg = true) {
+        return httpApi({
+            url: '/api/blade-business/container/data/submit',
+            method: 'post',
+            data: form
+        }, msg);
+    },
+    //容器数据删除
+    async removeData(form, msg = true) {
+        return httpApi({
+            url: '/api/blade-business/container/data/remove',
+            method: 'post',
+            params: form
+        }, msg);
+    },
+    //校验容器数据编号是否唯一
+    async verification(form, msg = true) {
+        return httpApi({
+            url: '/api/blade-business/container/data/verification-no',
+            method: 'post',
+            data: form
+        }, msg);
+    },
+}

src/styles/app/element.scss

@@ -161,7 +161,7 @@
         position: relative;
         .solt-label {
             position: relative;
-            width: calc(100% - 100px);
+            width: calc(100% - 50px);
         }
         .solt-extra {
             position: absolute;
@@ -176,10 +176,10 @@
 .el-scrollbar {
     overflow: initial;
     .el-scrollbar__bar.is-vertical {
-        right: -16px;
+        //right: -16px;
     }
     .el-scrollbar__bar.is-horizontal {
-        bottom: -20px;
+        //bottom: -20px;
     }
 }
 

src/views/tentative/parameter/container.vue

@@ -11,7 +11,7 @@
             </div>
             <div class="hc-menu-contents-box">
                 <el-scrollbar>
-                    <HcMenuSimple :datas="menus" :keys="menuKey" :menus="contextMenu" @change="menuChange" @menuTap="contextMenuClick"/>
+                    <HcMenuSimple :datas="menus" :props="menuProps" :keys="menuKey" :menus="contextMenu" @change="menuChange" @menuTap="contextMenuClick"/>
                 </el-scrollbar>
             </div>
             <!--左右拖动-->
@@ -38,19 +38,19 @@
                         </el-button>
                     </HcTooltip>
                     <HcTooltip keys="tentative_parameter_container_edit">
-                        <el-button hc-btn @click="editFormModalClick">
+                        <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" @click="editFormModalClick">
                             <HcIcon name="edit"/>
                             <span>编辑</span>
                         </el-button>
                     </HcTooltip>
                     <HcTooltip keys="tentative_parameter_container_del">
-                        <el-button hc-btn @click="delNodeModalClick">
+                        <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" @click="delTableModalClick">
                             <HcIcon name="delete-bin-2"/>
                             <span>删除</span>
                         </el-button>
                     </HcTooltip>
                     <HcTooltip keys="tentative_parameter_container_printer">
-                        <el-button hc-btn>
+                        <el-button hc-btn :disabled="tableCheckedKeys.length <= 0">
                             <HcIcon name="printer"/>
                             <span>打印</span>
                         </el-button>
@@ -70,27 +70,30 @@
         </div>
 
         <!--新增/编辑 节点-->
-        <HcDialog :show="addEditNodeFormModal" title="新增/编辑 试验容器" widths="30rem" isRowFooter @close="addEditNodeFormModalClose">
+        <HcDialog :show="addEditNodeFormModal" :title="`${addEditNodeFormModel.id?'编辑':'新增'}试验容器`" widths="30rem" isRowFooter @close="addEditNodeFormModalClose">
             <el-form :model="addEditNodeFormModel" label-width="auto" label-position="top" size="large">
                 <el-form-item label="试验容器名称">
-                    <el-input v-model="addEditNodeFormModel.key1" placeholder="请输入试验容器名称"/>
+                    <el-input v-model="addEditNodeFormModel.containerName" placeholder="请输入试验容器名称"/>
                 </el-form-item>
-                <template v-for="(item, index) in addEditNodeData">
+                <template v-for="(item, index) in addEditNodeFormModel.fieldList">
                     <div class="hc-form-item">
                         <el-form-item class="w-32" label="数据类型" style="flex: initial;">
-                            <el-select v-model="item.type" block>
+                            <el-select v-model="item.fieldType" block>
                                 <el-option label="文本" :value="1"/>
                                 <el-option label="日期框" :value="2"/>
                             </el-select>
                         </el-form-item>
                         <el-form-item label="字段名">
                             <template #label>
-                                <div class="solt-label">字段名</div>
+                                <div class="solt-label">
+                                    <span class="mr-1">字段名</span>
+                                    <span class="text-xs text-slate-400" v-if="index === 0">第一个作为编号,是唯一的</span>
+                                </div>
                                 <div class="solt-extra">
-                                    <el-button type="primary" plain size="small" @click="addEditNodeDataDel(index)">删除当前行</el-button>
+                                    <el-button type="primary" plain size="small" @click="addEditNodeDataDel(item,index)">删除</el-button>
                                 </div>
                             </template>
-                            <el-input v-model="item.name" block/>
+                            <el-input v-model="item.fieldName" block/>
                         </el-form-item>
                     </div>
                 </template>
@@ -114,56 +117,12 @@
         </HcDialog>
 
         <!--新增/编辑-->
-        <HcDialog :show="addEditFormModal" title="新增/编辑 数据" widths="30rem" :loading="addEditFormLoading" @close="addEditFormModalClose" @save="addEditFormClick">
+        <HcDialog :show="addEditFormModal" :title="`${addEditFormModel.id?'编辑':'新增'}数据`" 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"/>
+                <template v-for="(item, index) in tableColumn">
+                    <el-form-item :label="item.name" :prop="item.key">
+                        <el-input v-model="addEditFormModel[item.key]" :placeholder="`${index===0?'作为编号，是唯一的':'请输入' + item.name}`" v-if="item.type === 1"/>
+                        <el-date-picker type="date" v-model="addEditFormModel[item.key]" class="block" value-format="YYYY-MM-DD" :clearable="false" v-if="item.type === 2"/>
                     </el-form-item>
                 </template>
             </el-form>
@@ -197,8 +156,9 @@
 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 {formValidate, getArrValue} from "vue-utils-plus"
 import HcDragUpload from "./components/HcDragUpload.vue"
+import dataApi from "~api/tentative/parameter/container"
 
 //初始变量
 const useAppState = useAppStore()
@@ -215,54 +175,59 @@ watch(() => [
 
 //渲染完成
 onMounted(() => {
+    getMenusData()
     setContextMenu()
-    setMenuTableColumn(menuKey.value)
 })
 
 //左侧菜单
-const menuKey = ref('key1')
-const menuItem = ref({})
-const menus = ref([
-    {key: 'key1', label: '铝盒'},
-    {key: 'key2', label: '试筒'},
-    {key: 'key3', label: '环刀'},
-    {key: 'key4', label: '比重瓶'}
-]);
+const menuProps = {
+    key: 'id',
+    label: 'containerName',
+}
+const menus = ref([]);
+const getMenusData = async () => {
+    const { data } = await dataApi.queryClassification({
+        projectId: projectId.value,
+        contractId: contractId.value
+    })
+    const arr = getArrValue(data)
+    menus.value = arr
+    if (arr.length > 0) {
+        const item = arr[0]
+        menuItem.value = item
+        menuKey.value = item?.id
+        setMenuTableColumn(item?.fieldList)
+    }
+}
+
 //菜单被点击
+const menuKey = ref('')
+const menuItem = ref({})
 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: '校准日期'}
-        ]
+    menuKey.value = item?.id
+    setMenuTableColumn(item?.fieldList)
+}
+
+//设置表格头
+const setMenuTableColumn = (data) => {
+    let newArr = [];
+    for (let i = 0; i < data.length; i++) {
+        newArr.push({
+            key: data[i].fieldKey,
+            name: data[i].fieldName,
+            type: data[i].fieldType
+        })
     }
+    newArr.push({
+        key: 'field_calibration_time',
+        name: '校准日期',
+        type: 2
+    })
+    tableColumn.value = newArr
+    //取列表数据
+    searchClick()
+    setAddEditFormRules(newArr)
 }
 
 //菜单的右键菜单
@@ -279,20 +244,18 @@ const setContextMenu = () => {
 }
 
 //菜单的右键菜单被点击
-const contextMenuItem = ref({})
 const contextMenuClick = ({key, item}) => {
-    contextMenuItem.value = item
     if (key === 'edit') {
+        addEditNodeFormModel.value = item
         addEditNodeFormModal.value = true
     } else if (key === 'del') {
-        delNodeModalClick()
+        delNodeModalClick(item.id)
     }
 }
 
 //搜索表单
 const searchForm = ref({
-    type: null, state: null, betweenTime: null, queryValue: null,
-    current: 1, size: 20, total: 0
+    queryValue: null, current: 1, size: 20, total: 0
 })
 
 //日期时间被选择
@@ -326,58 +289,276 @@ const pageChange = ({current, size}) => {
 //表格数据
 const tableRef = ref(null)
 const tableColumn = ref([])
-const tableLoading = ref(false)
 const tableData = ref([])
 
 //获取数据
-const getTableData = () => {
-
+const tableLoading = ref(false)
+const getTableData = async () => {
+    const {id, fieldList} = menuItem.value
+    const fieldLists = getArrValue(fieldList)
+    if (fieldLists.length > 0) {
+        tableLoading.value = true
+        const { error, code, data } = await dataApi.queryPage({
+            projectId: projectId.value,
+            contractId: contractId.value,
+            ...searchForm.value,
+            fieldKey: fieldList[0].fieldKey,
+            id: id
+        })
+        //处理数据
+        tableLoading.value = false
+        if (!error && code === 200) {
+            tableData.value = getArrValue(data['records'])
+            searchForm.value.total = data.total || 0
+        } else {
+            tableData.value = []
+            searchForm.value.total = 0
+        }
+    } else {
+        window.$message.warning('请先设置容器字段')
+    }
 }
 
 //多选
 const tableCheckedKeys = ref([]);
 const tableSelection = (rows) => {
-    tableCheckedKeys.value = rows.filter((item) => {
-        return (item??'') !== '';
-    })
+    tableCheckedKeys.value = rows
 }
 
 //新增/编辑 分类
 const addEditNodeFormModal = ref(false)
-const addEditNodeFormModel = ref({key1: ''})
+const addEditNodeFormModel = ref({
+    containerName: '', fieldList: [{
+        fieldType: 1,
+        fieldName: ''
+    }]
+})
 const addEditNodeFormModalClick = () => {
+    addEditNodeFormModel.value = {
+        containerName: '', fieldList: [{
+            fieldType: 1,
+            fieldName: ''
+        }]
+    }
     addEditNodeFormModal.value = true
 }
 
+//加字段
+const addEditNodeDataAdd = () => {
+    addEditNodeFormModel.value.fieldList.push({
+        fieldType: 1,
+        fieldName: ''
+    })
+}
+//删除当前行
+const addEditNodeDataDel = async ({fieldId}, index) => {
+    if (!fieldId) {
+        addEditNodeFormModel.value.fieldList.splice(index, 1);
+    } else {
+        const { error, code } = await dataApi.removeField({fieldId})
+        if (!error && code === 200) {
+            addEditNodeFormModel.value.fieldList.splice(index, 1);
+        }
+    }
+}
+
 //保存节点信息
 const addEditNodeFormLoading = ref(false)
 const addEditNodeFormModalSave = () => {
-    addEditNodeFormModal.value = false
+    const form = addEditNodeFormModel.value
+    if (!form.containerName) {
+        window.$message.warning('请输入容器名称')
+    } else if (form.fieldList.length <= 0) {
+        window.$message.warning('请添加容器字段')
+    } else {
+        //判断是否满足条件
+        const result = form.fieldList.every(({fieldName})=> {
+            return fieldName !== ''
+        })
+        if (!result) {
+            window.$message.warning('请先完善字段数据')
+        } else {
+            form.projectId = projectId.value
+            form.contractId = contractId.value
+            submitClassification(form)
+        }
+    }
 }
+
+//提交保存分类
+const submitClassification = async (form) => {
+    addEditNodeFormLoading.value = true
+    const { error, code } = await dataApi.submitClassification(form)
+    //处理数据
+    addEditNodeFormLoading.value = false
+    if (!error && code === 200) {
+        window?.$message?.success('操作成功')
+        addEditNodeFormModal.value = false
+        await getMenusData()
+    }
+}
+
 //关闭分类编辑弹窗
 const addEditNodeFormModalClose = () => {
     addEditNodeFormModal.value = false
 }
 
-//字段数据
-const addEditNodeData = ref([
-    {type: 1, name: ''},
-    {type: 2, name: ''},
-])
+//删除分类
+const delNodeModalClick = (id) => {
+    window?.$messageBox?.alert('请谨慎考虑后，确认是否需要删除？', '删除提醒', {
+        showCancelButton: true,
+        confirmButtonText: '确认删除',
+        cancelButtonText: '取消',
+        type: 'warning',
+        callback: (action) => {
+            if (action === 'confirm') {
+                removeClassification(id)
+            }
+        }
+    })
+}
+
+//删除容器
+const removeClassification = async (id) => {
+    //删除请求
+    const { error, code } = await dataApi.removeClassification({
+        projectId: projectId.value,
+        contractId: contractId.value,
+        id: id,
+    })
+    //处理数据
+    if (!error && code === 200) {
+        window?.$message?.success('操作成功')
+        getMenusData()
+    }
+}
 
-//加字段
-const addEditNodeDataAdd = () => {
-    addEditNodeData.value.push({type: 1, name: ''})
+//新增/编辑 表单
+const addEditFormRef = ref(null)
+const addEditFormModel = ref({})
+const addEditFormRules = ref({})
+
+//处理表单校验
+const setAddEditFormRules = (fieldList) => {
+    let newArr = {};
+    for (let i = 0; i < fieldList.length; i++) {
+        const item = fieldList[i];
+        if (i === 0) {
+            newArr[item.key] = {
+                required: true,
+                validator: async (rule, value, callback) => {
+                    if (!value) {
+                        callback(new Error("请输入" + item.name))
+                    } else {
+                        const ver = await verification(item.key, value)
+                        if (!ver) {
+                            callback(new Error(item.name + '必须是惟一的'))
+                        } else {
+                            callback()
+                        }
+                    }
+                },
+                trigger: 'blur'
+            }
+        } else if (item.type === 1) {
+            newArr[item.key] = {
+                required: true,
+                trigger: 'blur',
+                message: "请输入" + item.name
+            }
+        } else if (item.type === 2) {
+            newArr[item.key] = {
+                required: true,
+                trigger: 'blur',
+                message: "请选择" + item.name
+            }
+        }
+    }
+    addEditFormRules.value = newArr
 }
-//删除当前行
-const addEditNodeDataDel = (index) => {
-    addEditNodeData.value.splice(index, 1);
+
+//校验材料编号是否唯一
+const verification = async (key, val) => {
+    const { containerInitTabName } = menuItem.value
+    const { error, code, data } = await dataApi.verification({
+        projectId: projectId.value,
+        contractId: contractId.value,
+        bean: {
+            fieldKey: key,
+            fieldValue: val
+        },
+        containerInitTabName: containerInitTabName
+    })
+    if (!error && code === 200) {
+        return data === '编号可以使用';
+    } else {
+        return false
+    }
+}
+
+//新增/编辑
+const addEditFormModal = ref(false)
+const addFormModalClick = () => {
+    addEditFormModel.value = {}
+    addEditFormModal.value = true
 }
 
+//编辑表单
+const editFormModalClick = () => {
+    const keys = tableCheckedKeys.value
+    if (keys.length === 1) {
+        addEditFormModel.value = keys[0]
+        addEditFormModal.value = true
+    } else if (keys.length > 1) {
+        window?.$message?.warning('只能选择一条数据编辑')
+    }
+}
 
+//关闭表单
+const addEditFormModalClose = () => {
+    addEditFormModal.value = false
+}
 
-//删除分类
-const delNodeModalClick = () => {
+//新增/编辑 保存
+const addEditFormLoading = ref(false)
+const addEditFormClick = async () => {
+    const validate = await formValidate(addEditFormRef.value)
+    if (validate) {
+        const { containerInitTabName } = menuItem.value
+        const form = addEditFormModel.value
+        addEditFormLoading.value = true
+        //处理数据格式
+        let beanList = [];
+        Object.keys(form).forEach(key => {
+            if (key !== 'field_calibration_time') {
+                beanList.push({
+                    fieldKey: key,
+                    fieldValue: form[key]
+                })
+            }
+        })
+        //发起请求
+        const { error, code } = await dataApi.submitForm({
+            projectId: projectId.value,
+            contractId: contractId.value,
+            beanList,
+            containerInitTabName,
+            fieldCalibrationTime: form['field_calibration_time'],
+            id: form['id'] ?? ''
+        })
+        //处理数据
+        addEditFormLoading.value = false
+        if (!error && code === 200) {
+            window?.$message?.success('操作成功')
+            addEditFormModal.value = false
+            await getTableData()
+        }
+    }
+}
+
+
+//删除数据
+const delTableModalClick = () => {
     window?.$messageBox?.alert('请谨慎考虑后，确认是否需要删除？', '删除提醒', {
         showCancelButton: true,
         confirmButtonText: '确认删除',
@@ -385,12 +566,33 @@ const delNodeModalClick = () => {
         type: 'warning',
         callback: (action) => {
             if (action === 'confirm') {
-                //removeContractTreeNode()
+                tableRemoveData()
             }
         }
     })
 }
 
+//批量删除
+const tableRemoveData = async () => {
+    const rows = tableCheckedKeys.value
+    if (rows.length > 0 ) {
+        const ids = rowsToId(rows)
+        const { containerInitTabName } = menuItem.value
+        //删除请求
+        const { error, code } = await dataApi.removeData({
+            projectId: projectId.value,
+            contractId: contractId.value,
+            containerInitTabName: containerInitTabName,
+            id: ids,
+        })
+        //处理数据
+        if (!error && code === 200) {
+            window?.$message?.success('操作成功')
+            searchClick()
+        }
+    }
+}
+
 
 //导入
 const importModal = ref(false)
@@ -409,41 +611,13 @@ const importModalClose = () => {
     importModal.value = false
 }
 
-//新增/编辑
-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 = () => {
-
+//拼接ID
+const rowsToId = (rows) => {
+    return rows.map((obj) => {
+        return obj.id;
+    }).join(",")
 }
 
-
 //左右拖动，改变树形结构宽度
 const leftWidth = ref(240);
 const onmousedown = () => {