for_client/src/views/tentative/detect/test-form.vue

<template>
    <div class="hc-page-box">
        <HcCard actionUi="text-center">
            <template #header>
                <el-button :type="authBtnTabKey === '1'?'primary':''" hc-btn @click="authBtnTabClick('1')">
                    <HcIcon name="folder-user"/>
                    <span>施工质检</span>
                </el-button>
                <el-button :type="authBtnTabKey === '2'?'primary':''" hc-btn @click="authBtnTabClick('2')">
                    <HcIcon name="folder-shield"/>
                    <span>监理质检</span>
                </el-button>
            </template>
            <template #extra>
                <el-button type="primary" hc-btn @click="linksRelateModalClick">关联工程用途及部位</el-button>
                <el-button type="primary" hc-btn @click="linksRawModalClick">关联原材检测报告</el-button>
                <el-button type="primary" hc-btn @click="linksSampleModalClick">关联取样</el-button>
            </template>
            <template #search>
                <div class="flex-1">
                    <HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" @change="tabTypeChange" size="default" :round="false"/>
                </div>
                <div class="hc-search-top-form">
                    <div class="w-36" v-if="tabTypeKey === 'tab2'">
                        <el-date-picker type="date" v-model="topFormModel.key1" class="block" value-format="YYYY-MM-DD" :clearable="false" placeholder="请选择报告日期"/>
                    </div>
                    <div class="w-28 ml-2" v-if="tabTypeKey === 'tab2'">
                        <el-select v-model="topFormModel.key2" placeholder="是否合格" block>
                            <el-option label="合格" value="1" />
                            <el-option label="不合格" value="2" />
                        </el-select>
                    </div>
                    <div class="w-36 ml-2">
                        <el-select v-model="topFormModel.key3" placeholder="选择检测类型" block>
                            <el-option label="自检" value="1" />
                            <el-option label="抽检" value="2" />
                            <el-option label="平行试验" value="3" />
                            <el-option label="验证试验" value="4" />
                            <el-option label="中心实验室抽检" value="5" />
                        </el-select>
                    </div>
                </div>
            </template>
            <!--清表列表-->
            清表列表(等待接口，然后把资料填报的组件，搬过来改一下即可。目前没数据，搞起来麻烦。)
            <!--el-scrollbar ref="ListItemScrollRef" v-loading="ListItemLoading" v-if="ListItemDatas.length > 0">
                <ListItem ref="ListItemRef" :datas="ListItemDatas" :status="NodeStatus" :classify="authBtnTabKey" @offsetTop="ListItemOffsetTop" :primaryKeyId="primaryKeyId" :contractId="contractId" @renew="getTableDataAll"/>
            </el-scrollbar-->
            <template #action>
                <el-button type="primary" hc-btn>
                    <HcIcon name="save"/>
                    <span>保存</span>
                </el-button>
                <el-button hc-btn>
                    <HcIcon name="send-plane-2"/>
                    <span>上报</span>
                </el-button>
                <el-button hc-btn>
                    <HcIcon name="eye"/>
                    <span>预览</span>
                </el-button>
                <el-button hc-btn>
                    <HcIcon name="arrow-go-back"/>
                    <span>撤回上报流程</span>
                </el-button>
                <el-button hc-btn @click="toBackClick">
                    <HcIcon name="delete-back"/>
                    <span>返回</span>
                </el-button>
            </template>
        </HcCard>

        <!--关联工程用途及部位-->
        <HcDialog :show="linksRelateModal" title="关联工程用途及部位" widths="50rem" isTable saveText="确认关联" @close="linksRelateModalClose" @save="linksRelateModalSave">
            <div class="hc-links-relate-tree-box">
                <div class="hc-search-tree-val">
                    <el-input v-model="linksRelateSearchTreeVal" block size="large" placeholder="请输入名称关键词检索" clearable>
                        <template #suffix>
                            <HcIcon name="search-2" ui="text-xl"/>
                        </template>
                    </el-input>
                </div>
                <div class="hc-tree-scrollbar" v-loading="linksRelateTreeLoading" element-loading-text="获取数据中...">
                    <el-scrollbar>
                        <WbsTree :projectId="projectId" :contractId="contractId"/>
                    </el-scrollbar>
                </div>
            </div>
        </HcDialog>

        <!--关联原材检测报告-->
        <HcDialog :show="linksRawModal" title="关联原材检测报告" widths="75rem" isTable saveText="确认关联" @close="linksRawModalClose" @save="linksRawModalSave">
            <div class="hc-links-sample-modal-box">
                <div class="hc-links-sample-tree-box">
                    <el-scrollbar>
                        <WbsTree :projectId="projectId" :contractId="contractId"/>
                    </el-scrollbar>
                </div>
                <div class="hc-links-sample-table-box">
                    <HcTable ref="tableRawRef" :column="linksRawTableColumn" :datas="linksRawTableData" :loading="linksRawTableLoading" :isIndex="false" isCheck @selection-change="linksRawTableSelection"/>
                </div>
            </div>
        </HcDialog>

        <!--关联取样-->
        <HcDialog :show="linksSampleModal" title="关联取样信息" widths="75rem" isTable saveText="确认" @close="linksSampleModalClose" @save="linksSampleModalSave">
            <div class="hc-links-sample-modal-box">
                <div class="hc-links-sample-tree-box">
                    <el-scrollbar>
                        <WbsTree :projectId="projectId" :contractId="contractId"/>
                    </el-scrollbar>
                </div>
                <div class="hc-links-sample-table-box">
                    <HcTable ref="tableSampleRef" :column="linksSampleTableColumn" :datas="linksSampleTableData" :loading="linksSampleTableLoading" :isIndex="false" isCheck @selection-change="linksSampleTableSelection"/>
                </div>
            </div>
        </HcDialog>

    </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import {useAppStore} from "~src/store";
import {useRouter, useRoute} from 'vue-router'
import ListItem from "./components/ListItem.vue"
import WbsTree from "../../data-fill/components/WbsTree.vue"
import dayjs from "dayjs"

//变量
const router = useRouter()
const useRoutes = useRoute()
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const contractInfo = ref(useAppState.getContractInfo);

//路由参数
const routerQuery = useRoutes?.query;
//存储目录格式 1按部位存储，2按日期存储
const dataId = routerQuery?.id || '';
const dataType = parseInt(routerQuery?.type + '') || 1;
const fileType = parseInt(routerQuery?.fileType + '') || 2;

const dayDate = dayjs().format('YYYY-MM-DD')

//渲染完成
onMounted(() => {
    setContractType(contractInfo.value?.contractType)
    topFormModel.value.key1 = dayDate
})

//身份按钮切换数据
const authBtnTabKey = ref('1')
const authBtnTabClick = (val) => {
    if (val !== authBtnTabKey.value) {
        authBtnTabKey.value = val
        //getTableDataAll()
    }
}

//contractType,  1施工，2监理
const setContractType = (contractType) => {
    if (contractType <= 0) {
        authBtnTabKey.value = '1'
        authBtnTabKey.value = '1'
        topFormModel.value.key3 = '1'
    } else {
        authBtnTabKey.value = contractType + ''
        if (contractType < 3) {
            topFormModel.value.key3 = contractType + ''
        } else {
            topFormModel.value.key3 = '1'
        }
    }
}

//类型tab数据和相关处理
const tabTypeKey = ref('tab1')
const tabTypeTab = ref([
    {key:'tab1',  name: '记录表'},
    {key:'tab2', name: '报告单'},
]);
const tabTypeChange = (item) => {
    tabTypeKey.value = item?.key
}

//顶部表单
const topFormModel = ref({})

const searchForm = ref({})

//关联工程用途及部位 树
const linksRelateModal = ref(false)
const linksRelateModalClick = () => {
    linksRelateModal.value = true
}

const linksRelateSearchTreeVal = ref('')
const linksRelateTreeLoading = ref(false)

//确认关联
const linksRelateModalSave = () => {
    linksRelateModal.value = false
}
const linksRelateModalClose = () => {
    linksRelateModal.value = false
}


//关联原材检测报告
const linksRawModal = ref(false)
const linksRawModalClick = () => {
    linksRawModal.value = true
}

//原材检测报告数据
const tableRawRef = ref(null)
const linksRawTableColumn = ref([
    {key:'key1', name: '报告编号'},
    {key:'key2', name: '试验项目名称'},
    {key:'key3', name: '工程部位及用途'},
    {key:'key4', name: '报告日期'}
])
const linksRawTableData = ref([])
const linksRawTableLoading = ref(false)

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

const linksRawModalSave = () => {

}

//关闭原材检测报告
const linksRawModalClose = () => {
    linksRawModal.value = false
}



//关联进场材料
const linksSampleModal = ref(false)
const linksSampleModalClick = () => {
    linksSampleModal.value = true
}

//关联进场材料数据
const tableSampleRef = ref(null)
const linksSampleTableColumn = ref([
    {key:'key1', name: '样品名称'},
    {key:'key2', name: '取样日期'},
    {key:'key4', name: '规格型号'},
    {key:'key7', name: '拟用部位'},
    {key:'key9', name: '取样人'},
])
const linksSampleTableData = ref([])
const linksSampleTableLoading = ref(false)

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

const linksSampleModalSave = () => {

}

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

//返回
const toBackClick = () => {
    router.push({
        path: '/tentative/detect/test',
        query: {}
    })
}
</script>

<style lang="scss" scoped>
@import "../../../styles/tentative/detect/test-form.scss";
</style>