for_client/src/views/tentative/detect/outside.vue

<template>
    <div class="hc-page-layout-box">
        <div class="hc-layout-left-box" :style="'width:' + leftWidth + 'px;'">
            <div class="hc-project-box">
                <div class="hc-project-icon-box">
                    <HcIcon name="stack"/>
                </div>
                <div class="ml-2 project-name-box">
                    <span class="text-xl text-cut project-alias">{{projectInfo['projectAlias']}}</span>
                    <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
                </div>
            </div>
            <div class="hc-tree-box">
                <el-scrollbar>
                    <HcTreeData :autoExpandKeys="thirdTreeKeys" :projectId="projectId" :contractId="contractId" type="rightTree" @nodeTap="wbsElTreeClick"  @menuTap="menuTapClick"/>
                </el-scrollbar>
            </div>
            <!--左右拖动-->
            <div class="horizontal-drag-line" @mousedown="onmousedown"/>
        </div>
        <div class="hc-page-content-box">
            <HcCard :scrollbar="false" actionSize="lg">
                <template #header>
                    <HcTooltip keys="tentative_detect_third_add">
                        <el-button type="primary" hc-btn :disabled="!thirdTreeKeys" @click="addFormModalClick">
                            <HcIcon name="add-circle"/>
                            <span>新增</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_detect_third_edit">
                        <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" @click="editFormModalClick">
                            <HcIcon name="edit"/>
                            <span>编辑</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_detect_third_copy">
                        <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" :loading="copyLoading" @click="copyTableModalClick">
                            <HcIcon name="file-copy-2"/>
                            <span>复制</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_detect_third_del">
                        <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" @click="delModalClick">
                            <HcIcon name="delete-bin-2"/>
                            <span>删除</span>
                        </el-button>
                    </HcTooltip>
                </template>
                <template #search>
                    <div class="w-40">
                        <el-input v-model="searchForm.queryName" placeholder="送样人员" clearable/>
                    </div>
                    <div class="w-40 ml-2">
                        <el-select v-model="searchForm.queryStatus" placeholder="请选择是否合格" clearable>
                            <el-option v-for="item in qualifiedData" :key="item.value" :label="item['label']" :value="item['value']"/>
                        </el-select>
                    </div>
                    <div class="w-64 ml-2">
                        <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="formModalTitle + ' 第三方试验信息'" widths="70rem" isRowFooter :isClose="false" @close="addEditFormModalClose">
            <template #extra>
                <HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" @change="tabTypeChange"/>
            </template>
            <el-form ref="addEditFormRef" :model="addEditFormModel" :rules="addEditFormRules" label-width="auto" size="large" v-if="tabTypeKey === 'tab1'">
                <div class="hc-form-item">
                    <el-form-item label="合同段">
                        <el-select v-model="addEditFormModel.contractId" block placeholder="请选择合同段"  popper-class="select-popper" :teleported="false">
                            <el-option v-for="item in projectInfo?.contractInfoList" :key="item.id" :label="item['name']" :value="item['id']"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="合格状态">
                        <el-radio-group v-model="addEditFormModel.status" size="large">
                            <el-radio :label="0">不合格</el-radio>
                            <el-radio :label="1">合格</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="委托编号" prop="entrustNo">
                        <el-input v-model="addEditFormModel.entrustNo"/>
                    </el-form-item>
                    <el-form-item label="样品名称">
                        <el-input v-model="addEditFormModel.materialName"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="委托单位" prop="entrustCompany">
                        <el-input v-model="addEditFormModel.entrustCompany"/>
                    </el-form-item>
                    <el-form-item label="样品编号">
                        <el-input v-model="addEditFormModel.specificationNumber"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="证书编号">
                        <el-input v-model="addEditFormModel.testingAgencyCertificateNo" placeholder="检测机构资质证书编号"/>
                    </el-form-item>
                    <el-form-item label="样品数量">
                        <el-input v-model="addEditFormModel.materialCount"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="取样人">
                        <el-input v-model="addEditFormModel.userName"/>
                    </el-form-item>
                    <el-form-item label="代表数量">
                        <el-input v-model="addEditFormModel.representativeCount"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="见证人">
                        <el-input v-model="addEditFormModel.witness"/>
                    </el-form-item>
                    <el-form-item label="检测机构">
                        <el-input v-model="addEditFormModel.inspectionOrganization"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="送样日期">
                        <el-date-picker type="date" v-model="addEditFormModel.sampleDeliveryDate" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
                    </el-form-item>
                    <el-form-item label="产地">
                        <el-input v-model="addEditFormModel.placeOfOrigin"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="取样日期">
                        <el-date-picker type="date" v-model="addEditFormModel.samplingDate" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
                    </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-date-picker type="date" v-model="addEditFormModel.testDate" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
                    </el-form-item>
                    <el-form-item label="生产厂家">
                        <el-input v-model="addEditFormModel.manufacturer"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="报告日期">
                        <el-date-picker type="date" v-model="addEditFormModel.reportDate" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
                    </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="报告编号" prop="reportNo">
                        <el-input v-model="addEditFormModel.reportNo"/>
                    </el-form-item>
                    <el-form-item label="工程部位">
                        <el-input v-model="addEditFormModel.projectPosition"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="试验类型">
                        <el-input v-model="addEditFormModel.trialType"/>
                    </el-form-item>
                    <el-form-item label="规格型号">
                        <el-input v-model="addEditFormModel.specificationModel"/>
                    </el-form-item>
                </div>
                <el-form-item label="委托单附件">
                    <FormItemUpload v-model="addEditFormModel.delegationOrderUrl" :action="'upload-file2'"/>
                </el-form-item>
                <el-form-item label="记录表附件">
                    <FormItemUpload v-model="addEditFormModel.recordTableUrl" :action="'upload-file2'"/>
                </el-form-item>
                <el-form-item label="报告单附件">
                    <FormItemUpload v-model="addEditFormModel.reportAttachmentUrl" :action="'upload-file2'"/>
                </el-form-item>
            </el-form>
            <el-form  :model="addEditFormModel"  :rules="addEditFormRules" label-position="top" label-width="auto" size="large" v-if="tabTypeKey === 'tab2'">
                <el-form-item label="检测依据">
                    <el-input v-model="addEditFormModel.testBasisText" type="textarea" placeholder="请输入检测依据" :autosize="{ minRows: 3}" show-word-limit  maxlength="1000"/>
                </el-form-item>
                <el-form-item label="评定标准">
                    <el-input v-model="addEditFormModel.evaluationCriteriaText" type="textarea" placeholder="请输入评定标准" :autosize="{ minRows: 3}" show-word-limit  maxlength="1000"/>
                </el-form-item>
                <el-form-item label="检测结论">
                    <el-input v-model="addEditFormModel.testConclusionText" type="textarea" placeholder="请输入检测结论" :autosize="{ minRows: 3}" show-word-limit  maxlength="1000"/>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="addEditFormModel.remarks" type="textarea" placeholder="请输入备注" :autosize="{ minRows: 3}" show-word-limit  maxlength="1000"/>
                </el-form-item>
            </el-form>
            <template #leftRowFooter>
                <el-button type="primary" hc-btn @click="linksSampleModalClick">
                    <HcIcon name="links"/>
                    <span>选择样品信息</span>
                </el-button>
            </template>
            <template #rightRowFooter>
                <el-button size="large" @click="addEditFormModalClose">
                    <HcIcon name="close"/>
                    <span>取消</span>
                </el-button>
                <el-button type="primary" hc-btn :loading="addEditFormLoading" @click="addEditFormClick">
                    <HcIcon name="check"/>
                    <span>确认</span>
                </el-button>
            </template>
        </HcDialog>

        <!--选择样品信息-->
        <HcDialog :show="linksSampleModal" title="选择样品信息" widths="70%" isTable isRowFooter @close="linksSampleModalClose">
            <div class="hc-links-sample-modal-box">
                <div class="hc-links-sample-tree-box">
                    <el-scrollbar>
                        <TestTree :projectId="projectId"
                                  :wbsTempId="projectInfo?.referenceWbsTemplateIdTrial"
                                  :wbsType="2"
                                  :tenantId="userInfo?.tenant_id"
                                  @nodeTap="sampleTreeClick"/>
                    </el-scrollbar>
                </div>
                <div class="hc-links-sample-table-box">
                    <HcTable :column="linksSampleTableColumn" :datas="linksSampleTableData" :loading="linksSampleTableLoading" :isIndex="false">
                        <template #action="{row}">
                            <el-button type="primary" size="small" plain v-if="addEditFormModel.sampleId === row.id">已选择</el-button>
                            <el-button type="primary" size="small" plain @click="linksSampleRow(row)" v-else>选择</el-button>
                        </template>
                    </HcTable>
                </div>
            </div>
            <template #leftRowFooter>
                <el-button size="large" @click="linksSampleModalClose">
                    <HcIcon name="close"/>
                    <span>取消</span>
                </el-button>
            </template>
            <template #rightRowFooter>
                <HcPages :pages="searchSampleForm" @change="pageSampleChange"/>
            </template>
        </HcDialog>

    </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import {useAppStore} from "~src/store";
import HcTreeData from "./components/HcTreeData.vue"
import FormItemUpload from "./components/FormItemUpload.vue"
import TestTree from "../material/components/TestTree.vue"
import {getStoreData, setStoreData} from '~src/utils/storage'
import dataApi from "~api/tentative/detect/third";
import samplingApi from "~api/tentative/material/sampling"
import {formValidate, getArrValue} from "vue-utils-plus";
import {delMessage, rowsToId} from "~uti/tools";

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

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

//自动展开缓存
const thirdTreeKeys = ref(getStoreData('outsideTreeKeys'))

//渲染完成
onMounted(() => {
    const keys = thirdTreeKeys.value
    if (keys) {
        searchForm.value.nodeId = keys
        getTableData()
    }
})

//是否合格
const qualifiedData = ref([
    {label: '不合格', value: 0},
    {label: '合格', value: 1}
])

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

//树被点击
const nodeItemInfo = ref({})
const wbsElTreeClick = ({node, keys}) => {
    nodeItemInfo.value = node
    //缓存自动展开
    thirdTreeKeys.value = keys
    setStoreData('outsideTreeKeys',keys)
    //改变搜索表单数据
    searchForm.value.nodeId = keys
    searchForm.value.current = 1;
    getTableData()
}
const menuTapClick=({data })=>{
    if(data?.isData===1){
         window.$message.warning('当前节点下已有数据，不允许新增节点')
    }
}
//日期时间被选择
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:'entrustNo', name: '委托编号', width: 150},
    {key:'reportNo', name: '报告编号', width: 150},
    {key:'specificationNumber', name: '样品编号', width: 150},
    {key:'trialType', name: '试验类型', width: 150},
    {key:'materialName', name: '样品名称', width: 150},
    {key:'specificationModel', name: '规格型号', width: 150},
    {key:'entrustCompany', name: '委托单位', width: 150},
    {key:'inspectionOrganization', name: '检测机构', width: 150},
    {key:'projectPosition', name: '工程部位', width: 150},
    {key:'userName', name: '送样人', width: 100},
    {key:'sampleDeliveryDate', name: '送样日期', width: 150},
    {key:'reportDate', name: '报告日期', width: 150},
    {key:'testConclusionText', name: '检测结果', width: 150},
    {key:'remarks', name: '备注', width: 180},
])
const tableData = ref([])

//获取数据
const tableLoading = ref(false)
const getTableData = async () => {
    tableLoading.value = true
    const { error, code, data } = await dataApi.queryPage({
        ...searchForm.value,
        projectId: projectId.value,
        contractId: contractId.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
}

//新增/编辑
const addEditFormModal = ref(false)
const formModalTitle = ref('新增')
const addFormModalClick = () => {
    const { data } = nodeItemInfo.value
    if (data?.id) {
        addEditFormModel.value = {
            nodeId: data.id, trialType: data.nodeName, status: 1
        }
        formModalTitle.value = '新增'
        addEditFormModal.value = true
    } else {
        window.$message.warning('请先选择一个树节点')
    }
}

//编辑
const editFormModalClick = () => {
    const keys = tableCheckedKeys.value
    if (keys.length === 1) {
        addEditFormModel.value = keys[0]
        formModalTitle.value = '编辑'
        addEditFormModal.value = true
    } else if (keys.length > 1) {
        window?.$message?.warning('只能选择一条数据编辑')
    }
}

//关闭
const addEditFormModalClose = () => {
    addEditFormModal.value = false
    addEditFormModel.value = {}
}

//类型tab数据和相关处理
const tabTypeKey = ref('tab1')
const tabTypeTab = ref([
    {key:'tab1',  name: '基础信息'},
    {key:'tab2', name: '检查结论'},
]);
const tabTypeChange = (item) => {
    tabTypeKey.value = item?.key
}

//新增/编辑 表单
const addEditFormRef = ref(null)
const addEditFormModel = ref({})
const addEditFormRules = {
    entrustNo: {
        required: true,
        trigger: 'blur',
        message: "请输入编号"
    },
    reportNo: {
        required: true,
        trigger: 'blur',
        message: "请输入报告编号"
    },
     entrustCompany: {
        required: true,
        trigger: 'blur',
        message: "请输入委托单位"
    }
}
const addEditFormRules2 = {

}
//新增/编辑/复制弹窗 保存
const addEditFormLoading = ref(false)
const addEditFormClick = async () => {
         let validate
    if(addEditFormRef.value!==null){
          validate= await formValidate(addEditFormRef.value)
    }
   
    if (validate) {
        if (formModalTitle.value === '复制') {
            await copyFormApi()
        } else {
            await submitFormApi()
        }
    }else if(validate===undefined){
         window?.$message?.warning('请输入表单所需必填项')
    }
}

//新增、编辑 提交保存
const submitFormApi = async () => {
    addEditFormLoading.value = true
    const { error, code } = await dataApi.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()
    }
     addEditFormLoading.value = false
}

//复制
const copyTableModalClick = () => {
    const rows = tableCheckedKeys.value
    if (rows.length === 1) {
        addEditFormModel.value = rows[0]
        formModalTitle.value = '复制'
        addEditFormModal.value = true
    } else if (rows.length > 1) {
        const ids = rowsToId(rows)
        batchCopyFormApi(ids)
    }
}

//复制提交保存
const copyFormApi = async () => {
    addEditFormLoading.value = true
    const { error, code } = await dataApi.copyData({
        ...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()
    }
     addEditFormLoading.value = false
}

//批量复制 提交保存
const copyLoading = ref(false)
const batchCopyFormApi = async (ids) => {
    copyLoading.value = true
    const { error, code } = await dataApi.copyData({
        projectId: projectId.value,
        contractId: contractId.value,
        ids: ids,
    })
    //处理数据
    copyLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success('操作成功')
        await getTableData()
    }
}

//删除
const delModalClick = () => {
    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 searchSampleForm = ref({
    current: 1, size: 20, total: 0
})

//关联进场材料
const linksSampleModal = ref(false)
const linksSampleModalClick = () => {
    searchSampleForm.value.current = 1;
    linksSampleTableData.value = []
    linksSampleModal.value = true
}

//树被点击
const sampleTreeClick = ({data}) => {
    searchSampleForm.value.nodeId = data['primaryKeyId'] || ''
    searchSampleForm.value.current = 1;
    getLinksSampleTable()
}

//分页被点击
const pageSampleChange = ({current, size}) => {
    searchSampleForm.value.current = current
    searchSampleForm.value.size = size
    getLinksSampleTable()
}

//关联进场材料数据
const linksSampleTableColumn = 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: '取样人'},
    {key:'action', name: '操作'},
    
])
const linksSampleTableData = ref([])

//获取关联数据
const linksSampleTableLoading = ref(false)
const getLinksSampleTable = async () => {
    const { nodeId } = searchSampleForm.value
    if (nodeId) {
        linksSampleTableLoading.value = true
        const { error, code, data } = await samplingApi.queryPage({
            ...searchSampleForm.value,
            projectId: projectId.value,
            contractId: contractId.value
        })
        //处理数据
        linksSampleTableLoading.value = false
        if (!error && code === 200) {
            linksSampleTableData.value = getArrValue(data['records'])
            searchSampleForm.value.total = data.total || 0
        } else {
            linksSampleTableData.value = []
            searchSampleForm.value.total = 0
        }
    } else {
        window?.$message?.warning('请先选择一个树节点')
    }
}

//确认关联
const linksSampleRow = (row) => {
    const form = addEditFormModel.value;
    form.materialName = row.materialName ?? ''                  //样品名称
    form.specificationNumber = row.specificationNumber ?? ''    //样品编号
    form.materialCount = row.materialCount ?? ''                //试样数量
    form.userName = row.userName ?? ''                          //取样人
    form.representativeCount = row.representativeCount ?? ''    //代表数量
    form.samplingDate = row.samplingDate ?? ''                  //取样日期
    form.samplingLocation = row.samplingLocation ?? ''          //取样地点
    form.batchNumber = row.batchNumber ?? ''                    //生产批号
    form.specificationModel = row.specificationModel ?? ''      //规格型号
    form.sampleId = row.id                                      //关联ID
    //更新数据
    addEditFormModel.value = form
}

//关闭关联进场材料
const linksSampleModalClose = () => {
    linksSampleModal.value = false
    linksSampleTableData.value = []
    searchSampleForm.value.current = 1;
}

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

<style lang="scss" scoped>
@import "../../../styles/tentative/detect/third.scss";
// :deep.dialog .select-popper{
//     position: fixed;
//     // top: 100px !important;
//     // left: 133px !important;
// }
</style>