for_client/src/views/tentative/material/sampling.vue

<template>
    <div class="hc-page-layout-box">
        <div :style="`width:${leftWidth}px;`" class="hc-layout-left-box bg-white">
            <div class="hc-project-box">
                <div class="hc-project-icon-box">
                    <HcIcon name="stack" />
                </div>
                <div class="ml-2 project-name-box">
                    <span class="project-alias">{{ projectInfo.projectName }}</span>
                </div>
            </div>
            <div class="hc-tree-box">
                <el-scrollbar>
                    <TestTree
                        :auto-expand-keys="treeAutoExpandKeys"
                        :project-id="projectId"
                        :tenant-id="userInfo?.tenant_id"
                        :wbs-temp-id="projectInfo?.referenceWbsTemplateIdTrial"
                        :wbs-type="2"
                        @node-tap="wbsElTreeClick"
                    />
                </el-scrollbar>
            </div>
            <!-- 左右拖动 -->
            <div class="horizontal-drag-line" @mousedown="onmousedown" />
        </div>
        <div class="hc-page-content-box">
            <HcNewCard :scrollbar="false" action-size="lg">
                <template #header>
                    <HcTooltip keys="tentative_material_sampling_add">
                        <el-button :disabled="!primaryKeyId" hc-btn type="primary" @click="addFormModalClick">
                            <HcIcon name="add-circle" />
                            <span>新增</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_material_sampling_edit">
                        <el-button
                            :disabled="tableCheckedKeys.length <= 0" hc-btn type="primary"
                            color="#12C060" style="color: white;"
                            @click="editFormModalClick"
                        >
                            <HcIcon name="edit" />
                            <span>编辑</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_material_sampling_copy">
                        <el-button :disabled="tableCheckedKeys.length <= 0" hc-btn color="#A16222" @click="copyTableModalClick">
                            <HcIcon name="file-copy-2" />
                            <span>复制</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_material_sampling_del">
                        <el-button v-del-com:[delModalClick] :disabled="tableCheckedKeys.length <= 0" hc-btn color="#e03997">
                            <HcIcon name="delete-bin-2" />
                            <span>删除</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_material_sampling_printer">
                        <el-button
                            :disabled="tableCheckedKeys.length <= 0" :loading="printerLoading" hc-btn color="#567722"
                            @click="printerClick"
                        >
                            <HcIcon name="printer" />
                            <span>打印</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_material_sampling_import">
                        <el-button :disabled="!primaryKeyId" hc-btn color="#567722" @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" clearable
                            placeholder="请输入名称、规格、材料编号进行查询" @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"
                    is-new :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
                    @selection-change="tableSelection"
                >
                    <template #materialCount="{ row }">{{ row.materialCount === -1 ? "" : row.materialCount }}</template>
                    <template #representativeCount="{ row }">
                        {{ row.representativeCount === -1 ? "" : row.representativeCount }}
                    </template>
                </HcTable>
                <template #action>
                    <HcPages :pages="searchForm" @change="pageChange" />
                </template>
            </HcNewCard>
        </div>

        <!-- 新增/编辑 -->
        <hc-new-dialog
            v-model="addEditFormModal" :title="`${addEditFormModel.id ? '编辑' : '新增'}样品信息`" is-row-footer
            widths="50rem" @close="addEditFormModalClose"
        >
            <el-form
                ref="addEditFormRef" :model="addEditFormModel" :rules="addEditFormRules" label-width="auto"
                size="large"
            >
                <div class="hc-form-item">
                    <el-form-item label="样品名称" prop="materialName">
                        <el-input v-model="addEditFormModel.materialName" />
                    </el-form-item>
                    <el-form-item label="进场日期">
                        <el-date-picker
                            v-model="addEditFormModel.mobilizationDate" :clearable="false" class="block"
                            type="date" value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="样品编号" prop="specificationNumber">
                        <el-input v-model="addEditFormModel.specificationNumber" />
                    </el-form-item>
                    <el-form-item label="取样日期">
                        <el-date-picker
                            v-model="addEditFormModel.samplingDate" :clearable="false" class="block"
                            type="date" value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="规格型号">
                        <el-input v-model="addEditFormModel.specificationModel" />
                    </el-form-item>
                    <el-form-item label="取样地点">
                        <el-input v-model="addEditFormModel.samplingLocation" />
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="试样数量">
                        <el-input v-model="addEditFormModel.materialCount" type="number" />
                    </el-form-item>
                    <el-form-item label="是否外委">
                        <el-radio-group v-model="addEditFormModel.isOutsourcing" size="large">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="代表数量">
                        <el-input v-model="addEditFormModel.representativeCount" type="number" />
                    </el-form-item>
                    <el-form-item label="供应商">
                        <el-input v-model="addEditFormModel.supplierUnit" />
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="计算单位">
                        <el-input v-model="addEditFormModel.calculationUnit" />
                    </el-form-item>
                    <el-form-item label="生产批号">
                        <el-input v-model="addEditFormModel.batchNumber" />
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="取样人">
                        <el-select v-model="addEditFormModel.userId" block @change="changeusername">
                            <el-option v-for="item in userListData" :label="item.userName" :value="item.userId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="拟用部位">
                        <el-input v-model="addEditFormModel.proposedPosition" />
                    </el-form-item>
                </div>
                <el-form-item label="样品描述">
                    <el-input v-model="addEditFormModel.sampleDescription" />
                </el-form-item>
            </el-form>
            <template #leftRowFooter>
                <HcTooltip keys="tentative_material_sampling_links">
                    <el-button hc-btn type="primary" @click="linksApproachModalClick(addEditFormModel.mobilizationId)">
                        <HcIcon name="links" />
                        <span>关联进场材料</span>
                    </el-button>
                </HcTooltip>
            </template>
            <template #rightRowFooter>
                <el-button size="large" @click="addEditFormModalClose">
                    <HcIcon name="close" />
                    <span>取消</span>
                </el-button>
                <el-button :loading="addEditFormLoading" hc-btn type="primary" @click="addEditFormClick">
                    <HcIcon name="check" />
                    <span>确认</span>
                </el-button>
            </template>
        </hc-new-dialog>

        <!-- 关联进场材料 -->
        <hc-new-dialog v-model="linksApproachModal" is-row-footer is-table title="关联进场材料信息" widths="60%" @close="linksApproachModalClose">
            <HcTable
                :column="linksApproachTableColumn" :datas="linksApproachTableData"
                :is-index="false" :loading="linksApproachTableLoading" is-new
            >
                <template #materialType="{ row }">{{ getRowTableMaterialType(row.materialType) }}</template>
                <template #action="{ row }">
                    <HcTooltip keys="tentative_material_approach_annex">
                        <el-button
                            v-if="mobilizationId === row.id" plain size="small" type="primary"
                            @click="cancelApproachRow(row)"
                        >
                            取消关联
                        </el-button>
                        <el-button v-else plain size="small" type="primary" @click="linksApproachRow(row)">
                            关联
                        </el-button>
                    </HcTooltip>
                </template>
            </HcTable>
            <template #leftRowFooter>
                <HcPages :pages="ApproachSearchForm" @change="linksApproachPageChange" />
            </template>
            <template #rightRowFooter>
                <el-button size="large" @click="linksApproachModalClose">
                    <HcIcon name="close" />
                    <span>取消</span>
                </el-button>
                <el-button hc-btn type="primary" @click="linksApproachModalSave">
                    <HcIcon name="check" />
                    <span>确定</span>
                </el-button>
            </template>
        </hc-new-dialog>

        <!-- 复制样品登记信息 -->
        <hc-new-dialog
            v-model="copyTableModal" :loading="copyTableLoading" is-table title="复制样品登记信息" widths="60rem"
            @close="copyTableModalClose" @save="copyTableClick"
        >
            <HcTable :column="copyTableColumn" :datas="copyTableData" is-new :index-style="{ width: 60 }">
                <template #specificationNumber="{ row }">
                    <el-input v-model="row.specificationNumber" placeholder="请输入样品编号" />
                </template>
                <template #action="{ index }">
                    <el-button plain size="small" type="danger" @click="specificationNumberDel(index)">删除</el-button>
                </template>
            </HcTable>
        </hc-new-dialog>

        <!-- 导入 -->
        <hc-new-dialog v-model="importModal" is-row-footer title="导入" widths="38rem" @close="importModalClose">
            <HcDragUpload
                ref="uploadRef" api="/api/blade-business/material/" :datas="uploadData"
                action="sample/import"
                @finished="uploadFinished" @progress="uploadprogress"
            />
            <template #leftRowFooter>
                <el-button size="large" @click="downloadImportClick">
                    <HcIcon name="download-2" />
                    <span>下载模板</span>
                </el-button>
            </template>
            <template #rightRowFooter>
                <el-button size="large" @click="importModalClose">
                    <HcIcon name="close" />
                    <span>取消导入</span>
                </el-button>
                <el-button :loading="importModalLoading" hc-btn type="primary" @click="importModalYesClick">
                    <HcIcon name="folder-upload" />
                    <span>确认导入</span>
                </el-button>
            </template>
        </hc-new-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import TestTree from './components/TestTree.vue'
import { getStoreValue, setStoreValue } from '~src/utils/storage'
import HcDragUpload from './components/HcDragUpload.vue'
import samplingApi from '~api/tentative/material/sampling'
import approachApi from '~api/tentative/material/approach'
import { getContractUserList, getDictionary } from '~api/other'
import { arrIndex, arrToId, deepClone, formValidate, getArrValue } from 'js-fast-way'
import { HcDelMsg } from 'hc-vue3-ui'
import { toPdfPage } from '~uti/btn-auth'

//变量
const useAppState = useAppStore()
const userInfo = ref(useAppState.getUserInfo)
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)
const projectInfo = ref(useAppState.getProjectInfo)
const isCollapse = ref(useAppState.getCollapse)

//监听
watch(() => [
    useAppState.getCollapse,
], ([Collapse]) => {
    isCollapse.value = Collapse
})

//自动展开缓存
const treeAutoExpandKeys = ref(getStoreValue('testTreeExpandKeys') || [])

//渲染完成
onMounted(() => {
    getUserListData()
    getMaterialType()
})

//获取材料类型
const typeData = ref([])
const getMaterialType = async () => {
    const { data } = await getDictionary({
        code: 'material_type',
    })
    typeData.value = getArrValue(data)
}

//获取材料类型
const getRowTableMaterialType = (type) => {
    if (type > 0) {
        const nodeData = typeData.value
        const index = arrIndex(nodeData, 'dictKey', type)
        return nodeData[index]?.dictValue ?? type
    } else {
        return ''
    }
}


//获取用户列表
const userListData = ref([])
const getUserListData = async () => {
    const { data } = await getContractUserList({
        contractId: contractId.value,
    })
    userListData.value = getArrValue(data)
}

//搜索表单
const searchForm = ref({
    startTime: null, endTime: null, queryValue: null, nodeId: '',
    current: 1, size: 20, total: 0,
})

//树相关的变量
const primaryKeyId = ref('')
const nodeItemInfo = ref({})
const nodeDataInfo = ref({})

//树被点击
const wbsElTreeClick = ({ node, data, keys }) => {
    nodeItemInfo.value = node
    nodeDataInfo.value = data
    primaryKeyId.value = data['primaryKeyId'] || ''
    //缓存自动展开
    treeAutoExpandKeys.value = keys
    setStoreValue('testTreeExpandKeys', keys)
    //改变搜索表单数据
    searchForm.value.nodeId = data['primaryKeyId'] || ''
    searchForm.value.current = 1
    getTableData()
}

//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({ arr }) => {
    betweenTime.value = arr
    if (arr.length > 0) {
        searchForm.value.startTime = arr[0]
        searchForm.value.endTime = arr[1]
    } else {
        searchForm.value.startTime = ''
        searchForm.value.endTime = ''
    }
}

//回车搜索
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: 'materialName', name: '取样名称' },
    { key: 'samplingDate', name: '取样日期' },
    { key: 'specificationNumber', name: '样品编号' },
    { key: 'specificationModel', name: '规格型号' },
    { key: 'materialCount', name: '试样数量' },
    { key: 'calculationUnit', name: '计算单位' },
    { key: 'proposedPosition', name: '拟用部位' },
    { key: 'representativeCount', name: '代表数量' },
    { key: 'userName', name: '取样人' },
])

//获取数据
const tableLoading = ref(false)
const tableData = ref([])
const getTableData = async () => {
    const nodeId = primaryKeyId.value
    if (nodeId) {
        tableLoading.value = true
        const { error, code, data } = await samplingApi.queryPage({
            projectId: projectId.value,
            contractId: contractId.value,
            nodeId,
            ...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
        }
    } else {
        window?.$message?.warning('请先选择一个树节点')
    }
}

//多选
const tableCheckedKeys = ref([])
const tableSelection = (rows) => {
    tableCheckedKeys.value = rows.filter((item) => {
        return (item ?? '') !== ''
    })
}

//新增
const addEditFormModal = ref(false)
const addFormModalClick = () => {
    addEditFormModel.value = {
        isOutsourcing: 0,
        mobilizationId: '',
        nodeId: primaryKeyId.value,
        userId: userInfo.value.user_id,
    }
    addEditFormModal.value = true
}
//编辑
const editFormModalClick = () => {
    const keys = tableCheckedKeys.value
    if (keys.length === 1) {
        addEditFormModel.value = keys[0]
        addEditFormModel.value.representativeCount = addEditFormModel.value.representativeCount === -1 ? '' : addEditFormModel.value.representativeCount
        addEditFormModel.value.materialCount = addEditFormModel.value.materialCount === -1 ? '' : addEditFormModel.value.materialCount
        addEditFormModal.value = true
    } else if (keys.length > 1) {
        window?.$message?.warning('只能选择一条数据编辑')
    }
}
const addEditFormModalClose = () => {
    addEditFormModal.value = false
    addEditFormModel.value = {}
}

//新增/编辑 表单
const addEditFormRef = ref(null)
const addEditFormModel = ref({})
const addEditFormRules = {
    materialName: {
        required: true,
        trigger: 'blur',
        message: '请输入样品名称',
    },
    specificationNumber: {
        required: false,
        validator: async (rule, value, callback) => {
            if (!value) {
                // callback(new Error('请输入样品编号'))
            } else {
                const ver = await verification(value)
                if (!ver) {
                    callback(new Error('样品编号必须是惟一的'))
                } else {
                    callback()
                }
            }
        },
        trigger: 'blur',
    },
}

//校验材料编号是否唯一
const verification = async (val) => {
    const { error, code, data } = await samplingApi.verification({
        projectId: projectId.value,
        contractId: contractId.value,
        specificationNumber: val,
        id: addEditFormModel.value.id ?? '',
        nodeId: primaryKeyId.value,
    })
    if (!error && code === 200) {
        return !data
    } else {
        return false
    }
}

//新增/编辑 保存
const addEditFormLoading = ref(false)
const addEditFormClick = async () => {
    const validate = await formValidate(addEditFormRef.value)
    if (validate) {
        addEditFormLoading.value = true
        const { error, code } = await samplingApi.submitForm({
            ...addEditFormModel.value,
            projectId: projectId.value,
            contractId: contractId.value,
        })
        //处理数据

        if (!error && code === 200) {
            window?.$message?.success('操作成功')
            addEditFormModal.value = false
            setTimeout(() => {
                addEditFormLoading.value = false
            }, 1000)
            await getTableData()
        }
    }
}


//复制表格
const copyTableColumn = ref([
    { key: 'materialName', name: '样品名称' },
    { key: 'specificationNumber', name: '样品编号' },
    { key: 'action', name: '操作', width: 100 },
])
const copyTableData = ref([])

//复制
const copyTableModal = ref(false)
const copyTableModalClick = () => {
    copyTableModal.value = true
    copyTableData.value = deepClone(tableCheckedKeys.value)
}

//删除
const specificationNumberDel = (index) => {
    copyTableData.value.splice(index, 1)
    const rows = copyTableData.value
    if (rows.length <= 0) {
        copyTableModal.value = false
    }
}

const copyTableModalClose = () => {
    copyTableModal.value = false
}

//复制 保存
const copyTableLoading = ref(false)
const copyTableClick = () => {
    copyTableModal.value = false
    const rows = copyTableData.value
    if (rows.length > 0) {
        for (let i = 0; i < rows.length; i++) {
            rows[i].dataNumber = i
        }
        tableCopyData(rows)
    } else {
        window.$message?.warning('请先在列表勾选要复制的数据')
        copyTableModal.value = false
    }
}

//复制数据请求
const tableCopyData = async (rows) => {
    copyTableLoading.value = true
    const { error, code } = await samplingApi.copyData(rows)
    //处理数据
    copyTableLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success('操作成功')
        copyTableModal.value = false
        await getTableData()
    }
}

//删除
const delModalClick = async (_, resolve) => {
    await tableRemoveData()
    resolve()
}

//批量删除
const tableRemoveData = async () => {
    const rows = tableCheckedKeys.value
    if (rows.length > 0) {
        const ids = arrToId(rows)
        //删除请求
        const { error, code } = await samplingApi.removeData({
            projectId: projectId.value,
            contractId: contractId.value,
            ids: ids,
        })
        //处理数据
        if (!error && code === 200) {
            window?.$message?.success('操作成功')
            searchClick()
        }
    }
}

//打印
const printerLoading = ref(false)
const printerClick = async () => {
    const rows = tableCheckedKeys.value
    if (rows.length > 0) {
        printerLoading.value = true
        const ids = arrToId(rows)
        //删除请求
        const { error, code, data } = await samplingApi.exportPdf({
            projectId: projectId.value,
            contractId: contractId.value,
            ids: ids,
        })
        //处理数据
        printerLoading.value = false
        if (!error && code === 200) {
            toPdfPage(data)
            //window.open(data, '_blank')
        }
    }
}

//导入
const uploadRef = ref(null)
const uploadData = ref({})

//导入
const importModal = ref(false)
const importModalClick = () => {
    importModal.value = true
    uploadData.value = {
        contractId: contractId.value,
        nodeId: primaryKeyId.value,
        isCovered: 1,
    }
}

//上传进度
const uploadprogress = (res) => {
    importModalLoading.value = res
}

//确认导入
const importModalLoading = ref(false)
const importModalYesClick = () => {
    uploadRef.value?.submit()
}

//上传完成
const uploadFinished = () => {
    importModal.value = false
    getTableData()
}

//关闭导入
const importModalClose = () => {
    importModal.value = false
}
//更改取样人名称changeusername
const changeusername = (item) => {
    userListData.value.forEach((ele) => {
        if (item == ele.userId) {
            addEditFormModel.value.userName = ele.userName

        }
    })
}
//关联进场材料
const linksApproachModal = ref(false)
const ApproachSearchForm = ref({
    current: 1, size: 20, total: 0,
})
const mobilizationId = ref('')
const linksApproachModalClick = (mId) => {
    mobilizationId.value = mId ?? ''
    ApproachSearchForm.value.current = 1
    linksApproachModal.value = true
    getApproachTableData()
}

//分页被点击
const linksApproachPageChange = ({ current, size }) => {
    ApproachSearchForm.value.current = current
    ApproachSearchForm.value.size = size
    getApproachTableData()
}

//关联进场材料数据
const linksApproachTableColumn = ref([
    { key: 'materialNumber', name: '材料编号' },
    { key: 'mobilizationDate', name: '进场日期' },
    { key: 'materialName', name: '材料名称' },
    { key: 'materialType', name: '材料类型' },
    { key: 'specificationModel', name: '规格型号' },
    { key: 'supplierUnit', name: '供应商单位' },
    { key: 'proposedPosition', name: '拟用部位' },
    { key: 'userName', name: '记录人' },
    { key: 'action', name: '操作', width: 100, fixed: 'right', align: 'center' },
])
const linksApproachTableData = ref([])

//获取进场材料数据
const linksApproachTableLoading = ref(false)
const getApproachTableData = async () => {
    linksApproachTableLoading.value = true
    const { error, code, data } = await approachApi.queryPage({
        projectId: projectId.value,
        contractId: contractId.value,
        ...ApproachSearchForm.value,
    })
    //处理数据
    linksApproachTableLoading.value = false
    if (!error && code === 200) {
        linksApproachTableData.value = getArrValue(data['records'])
        ApproachSearchForm.value.total = data.total || 0
    } else {
        linksApproachTableData.value = []
        ApproachSearchForm.value.total = 0
    }
}

//关联
const linksApproachRow = (row) => {
    const form = addEditFormModel.value
    form.materialName = row.materialName ?? '' //样品名称
    form.mobilizationDate = row.mobilizationDate ?? null //进场日期
    form.specificationNumber = row.materialNumber ?? '' //样品编号
    form.specificationModel = row.specificationModel ?? '' //规格型号
    form.supplierUnit = row.supplierUnit ?? '' //供应商
    form.calculationUnit = row.calculationUnit ?? '' //计算单位
    form.batchNumber = row.batchNumber ?? '' //生产批号
    form.proposedPosition = row.proposedPosition ?? '' //拟用部位
    form.mobilizationId = row.id //关联ID
    //更新数据
    addEditFormModel.value = form
    mobilizationId.value = row.id //关联ID
}
//取消关联
const cancelApproachRow = (row) => {
    if (row.id === mobilizationId.value) {
        addEditFormModel.value.mobilizationId = ''
        mobilizationId.value = ''
    }
}

const linksApproachModalSave = () => {
    linksApproachModal.value = false
}

//关闭关联进场材料
const linksApproachModalClose = () => {
    linksApproachModal.value = false
}


//下载导入模板
const downloadImportClick = () => {
    window.open('https://bladex-test-info.oss-cn-chengdu.aliyuncs.com//upload/20221109/1f1cc15e4e4918d8c793fa6ec0a2ae2a.xlsx', '_blank')
}

//左右拖动，改变树形结构宽度
const leftWidth = ref(382)
const onmousedown = () => {
    const leftNum = isCollapse.value ? 142 : 272
    document.onmousemove = (ve) => {
        let diffVal = ve.clientX - leftNum
        if (diffVal >= 310 && diffVal <= 900) {
            leftWidth.value = diffVal
        }
    }
    document.onmouseup = () => {
        document.onmousemove = null
        document.onmouseup = null
    }
}
</script>

<style lang="scss" scoped>
@import "../../../styles/tentative/material/sampling.scss";
</style>