自定义筛孔类型

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

@@ -0,0 +1,52 @@
+import {httpApi} from "../../../request/httpApi";
+
+export default {
+    //筛孔分类列表查询
+    async queryClassification(form, msg = true) {
+        return httpApi({
+            url: '/api/blade-business/sieve/pore/classification/list',
+            method: 'get',
+            params: form
+        }, msg);
+    },
+    //筛孔分类新增或修改
+    async submitClassification(form, msg = true) {
+        return httpApi({
+            url: '/api/blade-business/sieve/pore/classification/submit',
+            method: 'post',
+            data: form
+        }, msg);
+    },
+    //筛孔分类删除
+    async removeField(form, msg = true) {
+        return httpApi({
+            url: '/api/blade-business/sieve/pore/classification/remove',
+            method: 'post',
+            params: form
+        }, msg);
+    },
+    //筛孔尺寸数据分页查询
+    async queryPage(form, msg = true) {
+        return httpApi({
+            url: '/api/blade-business/sieve/pore/data/page',
+            method: 'get',
+            params: form
+        }, msg);
+    },
+    //筛孔尺寸数据新增或修改
+    async submitForm(form, msg = true) {
+        return httpApi({
+            url: '/api/blade-business/sieve/pore/data/submit',
+            method: 'post',
+            data: form
+        }, msg);
+    },
+    //筛孔尺寸数据删除
+    async removeData(form, msg = true) {
+        return httpApi({
+            url: '/api/blade-business/sieve/pore/data/remove',
+            method: 'post',
+            params: form
+        }, msg);
+    }
+}

src/views/tentative/parameter/sieve.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" :keys="menuKey" :props="menuProps" :menus="contextMenu" @change="menuChange" @menuTap="contextMenuClick"/>
                 </el-scrollbar>
             </div>
             <!--左右拖动-->
@@ -32,19 +32,19 @@
                 </template>
                 <template #extra>
                     <HcTooltip keys="tentative_parameter_sieve_add">
-                        <el-button type="primary" hc-btn @click="addFormModalClick">
+                        <el-button type="primary" hc-btn :disabled="menuKey === ''" @click="addFormModalClick">
                             <HcIcon name="add-circle"/>
                             <span>新增</span>
                         </el-button>
                     </HcTooltip>
                     <HcTooltip keys="tentative_parameter_sieve_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_sieve_del">
-                        <el-button hc-btn @click="delNodeModalClick">
+                        <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" @click="delNodeModalClick">
                             <HcIcon name="delete-bin-2"/>
                             <span>删除</span>
                         </el-button>
@@ -58,41 +58,49 @@
         </div>
 
         <!--新增/编辑 节点-->
-        <HcDialog :show="addEditNodeFormModal" title="新增/编辑 类型" widths="30rem" :loading="addEditNodeFormLoading" @close="addEditNodeFormModalClose" @save="addEditNodeFormModalSave">
-            <el-form :model="addEditNodeFormModel" label-width="auto" label-position="top" size="large">
+        <HcDialog :show="addEditNodeFormModal" :title="`${addEditNodeFormModel.id?'编辑':'新增'}类型`" widths="30rem" :loading="addEditNodeFormLoading" @close="addEditNodeFormModalClose" @save="addEditNodeFormModalSave">
+            <el-form ref="addEditNodeFormRef" :model="addEditNodeFormModel" :rules="addEditNodeFormRules" label-width="auto" label-position="top" size="large">
                 <el-form-item label="类型名称">
-                    <el-input v-model="addEditNodeFormModel.key1" placeholder="请输入类型名称"/>
+                    <el-input v-model="addEditNodeFormModel.name" placeholder="请输入类型名称"/>
                 </el-form-item>
             </el-form>
         </HcDialog>
 
         <!--新增/编辑-->
-        <HcDialog :show="addEditFormModal" title="新增/编辑 筛孔尺寸信息" widths="30rem" :loading="addEditFormLoading" @close="addEditFormModalClose" @save="addEditFormClick">
+        <HcDialog :show="addEditFormModal" :title="`${addEditFormModel.id?'编辑':'新增'}筛孔尺寸信息`" widths="45rem" :loading="addEditFormLoading" @close="addEditFormModalClose" @save="addEditFormClick">
             <el-form ref="addEditFormRef" :model="addEditFormModel" :rules="addEditFormRules" label-width="auto" size="large">
-                <el-form-item label="筛孔尺寸" prop="key1">
-                    <el-input v-model="addEditFormModel.key1"/>
-                </el-form-item>
-                <el-form-item label="下限" prop="key1">
-                    <el-input v-model="addEditFormModel.key2"/>
-                </el-form-item>
-                <el-form-item label="上限" prop="key1">
-                    <el-input v-model="addEditFormModel.key3"/>
-                </el-form-item>
-                <el-form-item label="标准" prop="key1">
-                    <el-input v-model="addEditFormModel.key4"/>
-                </el-form-item>
-                <el-form-item label="限制区界限最大" prop="key1">
-                    <el-input v-model="addEditFormModel.key5"/>
-                </el-form-item>
-                <el-form-item label="限制区界限最小" prop="key1">
-                    <el-input v-model="addEditFormModel.key6"/>
-                </el-form-item>
-                <el-form-item label="控制点界限最大" prop="key1">
-                    <el-input v-model="addEditFormModel.key7"/>
-                </el-form-item>
-                <el-form-item label="控制点界限最小" prop="key1">
-                    <el-input v-model="addEditFormModel.key8"/>
-                </el-form-item>
+                <div class="hc-form-item">
+                    <el-form-item label="筛孔尺寸" prop="sievePoreSize">
+                        <el-input v-model="addEditFormModel.sievePoreSize"/>
+                    </el-form-item>
+                    <el-form-item label="标准" prop="standard">
+                        <el-input v-model="addEditFormModel.standard"/>
+                    </el-form-item>
+                </div>
+                <div class="hc-form-item">
+                    <el-form-item label="下限" prop="lowerLimit">
+                        <el-input v-model="addEditFormModel.lowerLimit"/>
+                    </el-form-item>
+                    <el-form-item label="上限" prop="upperLimit">
+                        <el-input v-model="addEditFormModel.upperLimit"/>
+                    </el-form-item>
+                </div>
+                <div class="hc-form-item">
+                    <el-form-item label="限制区界限最大" prop="maxLimitBoundary">
+                        <el-input v-model="addEditFormModel.maxLimitBoundary"/>
+                    </el-form-item>
+                    <el-form-item label="限制区界限最小" prop="minLimitBoundary">
+                        <el-input v-model="addEditFormModel.minLimitBoundary"/>
+                    </el-form-item>
+                </div>
+                <div class="hc-form-item">
+                    <el-form-item label="控制点界限最大" prop="maxLimitControl">
+                        <el-input v-model="addEditFormModel.maxLimitControl"/>
+                    </el-form-item>
+                    <el-form-item label="控制点界限最小" prop="minLimitControl">
+                        <el-input v-model="addEditFormModel.minLimitControl"/>
+                    </el-form-item>
+                </div>
             </el-form>
         </HcDialog>
     </div>
@@ -102,7 +110,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 dataApi from "~api/tentative/parameter/sieve"
+import {delMessage, rowsToId} from "~uti/tools";
 
 //初始变量
 const useAppState = useAppStore()
@@ -119,22 +129,37 @@ watch(() => [
 
 //渲染完成
 onMounted(() => {
+    queryClassification()
     setContextMenu()
 })
 
 //左侧菜单
-const menuKey = ref('key1')
-const menuItem = ref({})
-const menus = ref([
-    {key: 'key1', label: 'xxx类型名称1'},
-    {key: 'key2', label: 'xxx类型名称2'},
-    {key: 'key3', label: 'xxx类型名称3'},
-    {key: 'key4', label: 'xxx类型名称4'}
-]);
+const menuKey = ref('')
+const menus = ref([]);
+const menuProps = {
+    key: 'id',
+    label: 'name',
+}
+const queryClassification = async () => {
+    const { data } = await dataApi.queryClassification({
+        projectId: projectId.value,
+        contractId: contractId.value
+    })
+    const arr = getArrValue(data)
+    menus.value = arr
+    if (arr.length > 0) {
+        menuChange(arr[0])
+    }
+}
+
 //菜单被点击
+const menuItem = ref({})
 const menuChange = (item) => {
     menuItem.value = item
-    menuKey.value = item?.key
+    menuKey.value = item?.id
+    searchForm.value.current = 1;
+    searchForm.value.classId = item?.id
+    getTableData()
 }
 
 //菜单的右键菜单
@@ -155,24 +180,21 @@ const contextMenuItem = ref({})
 const contextMenuClick = ({key, item}) => {
     contextMenuItem.value = item
     if (key === 'edit') {
+        addEditNodeFormModel.value = item
         addEditNodeFormModal.value = true
     } else if (key === 'del') {
-        delNodeModalClick()
+        delMessage(() => {
+            delClassification(item)
+        })
     }
 }
 
 //搜索表单
 const searchForm = ref({
-    queryValue: null, current: 1, size: 20, total: 0
+    classId: 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") {
@@ -197,70 +219,120 @@ const pageChange = ({current, size}) => {
 //表格数据
 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:'sievePoreSize', name: '筛孔尺寸'},
+    {key:'lowerLimit', name: '下限'},
+    {key:'upperLimit', name: '上限'},
+    {key:'standard', name: '标准'},
+    {key:'maxLimitBoundary', name: '限制区最大'},
+    {key:'minLimitBoundary', name: '限制区最小'},
+    {key:'maxLimitControl', name: '控制点最大'},
+    {key:'minLimitControl', name: '控制点最小'},
 ])
-const tableLoading = ref(false)
 const tableData = ref([])
 
 //获取数据
-const getTableData = () => {
-
+const tableLoading = ref(false)
+const getTableData = async () => {
+    tableLoading.value = true
+    const { error, code, data } = await dataApi.queryPage({
+        projectId: projectId.value,
+        contractId: contractId.value,
+        ...searchForm.value
+    })
+    //处理数据
+    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
+    }
 }
 
 //多选
 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 addEditNodeFormRef = ref(null)
+const addEditNodeFormModel = ref({name: ''})
+const addEditNodeFormRules = {
+    name: {
+        required: true,
+        trigger: 'blur',
+        message: "请输入分类名称"
+    },
+}
+
+//新增分类
 const addEditNodeFormModalClick = () => {
+    addEditNodeFormModel.value = {}
     addEditNodeFormModal.value = true
 }
 
 //保存节点信息
 const addEditNodeFormLoading = ref(false)
-const addEditNodeFormModalSave = () => {
-    addEditNodeFormModal.value = false
+const addEditNodeFormModalSave = async () => {
+    const validate = await formValidate(addEditNodeFormRef.value)
+    if (validate) {
+        addEditNodeFormLoading.value = true
+        //发起请求
+        const { error, code } = await dataApi.submitClassification({
+            ...addEditNodeFormModel.value,
+            projectId: projectId.value,
+            contractId: contractId.value
+        })
+        //处理数据
+        addEditFormLoading.value = false
+        if (!error && code === 200) {
+            window?.$message?.success('操作成功')
+            addEditNodeFormModal.value = false
+            await queryClassification()
+        }
+    }
 }
+
 //关闭分类编辑弹窗
 const addEditNodeFormModalClose = () => {
     addEditNodeFormModal.value = false
 }
 
 //删除分类
-const delNodeModalClick = () => {
-    window?.$messageBox?.alert('请谨慎考虑后，确认是否需要删除？', '删除提醒', {
-        showCancelButton: true,
-        confirmButtonText: '确认删除',
-        cancelButtonText: '取消',
-        type: 'warning',
-        callback: (action) => {
-            if (action === 'confirm') {
-                //removeContractTreeNode()
-            }
-        }
+const delClassification = async (item) => {
+    //删除请求
+    const { error, code } = await dataApi.removeField({
+        projectId: projectId.value,
+        contractId: contractId.value,
+        id: item.id,
     })
+    //处理数据
+    if (!error && code === 200) {
+        window?.$message?.success('操作成功')
+        await queryClassification()
+    }
 }
 
 //新增/编辑
 const addEditFormModal = ref(false)
 const addFormModalClick = () => {
+    const { id } = menuItem.value
+    addEditFormModel.value = {
+        classId: id
+    }
     addEditFormModal.value = true
 }
 const editFormModalClick = () => {
-    addEditFormModal.value = true
+    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
@@ -270,24 +342,95 @@ const addEditFormModalClose = () => {
 const addEditFormRef = ref(null)
 const addEditFormModel = ref({})
 const addEditFormRules = {
-    key1111: {
+    sievePoreSize: {
+        required: true,
+        trigger: 'blur',
+        message: "请输入筛孔尺寸"
+    },
+    standard: {
+        required: true,
+        trigger: 'blur',
+        message: "请输入标准"
+    },
+    upperLimit: {
+        required: true,
+        trigger: 'blur',
+        message: "请输入上限"
+    },
+    lowerLimit: {
+        required: true,
+        trigger: 'blur',
+        message: "请输入下限"
+    },
+    maxLimitBoundary: {
         required: true,
         trigger: 'blur',
-        message: "请输入"
+        message: "请输入限制区界限最大"
     },
-    key2111: {
+    minLimitBoundary: {
         required: true,
         trigger: 'blur',
-        message: "请选择"
+        message: "请输入限制区界限最小"
+    },
+    maxLimitControl: {
+        required: true,
+        trigger: 'blur',
+        message: "请输入控制点界限最小"
+    },
+    minLimitControl: {
+        required: true,
+        trigger: 'blur',
+        message: "请输入标准"
     },
 }
 
 //新增/编辑 保存
 const addEditFormLoading = ref(false)
-const addEditFormClick = () => {
+const addEditFormClick = async () => {
+    const validate = await formValidate(addEditFormRef.value)
+    if (validate) {
+        addEditFormLoading.value = true
+        //发起请求
+        const { error, code } = await dataApi.submitForm({
+            ...addEditFormModel.value,
+            projectId: projectId.value,
+            contractId: contractId.value
+        })
+        //处理数据
+        addEditFormLoading.value = false
+        if (!error && code === 200) {
+            window?.$message?.success('操作成功')
+            addEditFormModal.value = false
+            await getTableData()
+        }
+    }
+}
+
 
+//删除分类
+const delNodeModalClick = () => {
+    delMessage(() => {
+        tableRemoveData()
+    })
 }
 
+//批量删除
+const tableRemoveData = async () => {
+    const rows = tableCheckedKeys.value
+    if (rows.length > 0 ) {
+        const ids = rowsToId(rows)
+        const { error, code } = await dataApi.removeData({
+            projectId: projectId.value,
+            contractId: contractId.value,
+            ids: ids,
+        })
+        //处理数据
+        if (!error && code === 200) {
+            window?.$message?.success('操作成功')
+            searchClick()
+        }
+    }
+}
 
 //左右拖动，改变树形结构宽度
 const leftWidth = ref(240);