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

<template>
    <hc-body split :project-nmae="projectInfo?.projectName">
        <template #tree>
            <TestTree
                :auto-expand-keys="treeAutoExpandKeys" :project-id="projectId" :tenant-id="userInfo?.tenant_id"
                :wbs-temp-id="projectInfo?.referenceWbsTemplateIdTrial" :wbs-type="2" @node-tap="wbsElTreeClick"
            />
        </template>
        <hc-new-card w-to="1919">
            <template #headerToSearch>
                <div class="w-50">
                    <el-select v-model="searchForm.contractId" placeholder="选择合同段" filterable clearable block>
                        <el-option label="测试1" value="1" />
                        <el-option label="测试2" value="2" />
                    </el-select>
                </div>
                <div class="ml-2 w-40">
                    <el-select v-model="searchForm.contractId" placeholder="委托单状态" filterable clearable block>
                        <el-option label="测试1" value="1" />
                        <el-option label="测试2" value="2" />
                    </el-select>
                </div>
                <div class="ml-2 w-250px">
                    <hc-search-input v-model="searchForm.queryValue" @search="searchClick" />
                </div>
            </template>
            <template #extraToHeader>
                <el-button hc-btn type="primary" @click="addFormData">
                    <hc-icon name="add-circle" />
                    <span>新增</span>
                </el-button>
                <el-button v-del-com:[delModalClick] :disabled="tableCheckedKeys.length <= 0" hc-btn type="danger">
                    <hc-icon name="delete-bin-2" />
                    <span>删除</span>
                </el-button>
                <el-button :disabled="tableCheckedKeys.length <= 0" hc-btn color="#567722">
                    <hc-icon name="printer" />
                    <span>批量打印</span>
                </el-button>
                <el-button :disabled="tableCheckedKeys.length <= 0" class="text-white" hc-btn color="#FF976A">
                    <HcIcon name="send-plane-2" />
                    <span>上报</span>
                </el-button>
                <el-button hc-btn color="#567722">
                    <hc-icon name="printer" />
                    <span>打印空表</span>
                </el-button>
            </template>
            <hc-table
                :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check
                :index-style="{ width: 60 }" :check-style="{ width: 29 }" @selection-change="tableSelection"
            >
                <template #key5="{ row }">
                    <el-tag v-if="row.key5 === 1" type="info" effect="dark">未上报</el-tag>
                    <el-tag v-if="row.key5 === 2" type="warning" effect="dark">已上报-待审批</el-tag>
                    <el-tag v-if="row.key5 === 3" type="primary" effect="dark">待试验</el-tag>
                    <el-tag v-if="row.key5 === 4" type="success" effect="dark">委托完成</el-tag>
                </template>
                <template #action="{ row }">
                    <el-link v-if="row.key5 === 1" type="primary" @click="rowEdit(row)">修改</el-link>
                    <el-link v-else type="success" @click="rowView(row)">查看</el-link>
                    <el-link type="danger" :disabled="row.key5 !== 1" @click="rowReports(row)">创建报告</el-link>
                </template>
            </hc-table>
            <template #action>
                <hc-pages :pages="searchForm" @change="pageChange" />
            </template>
        </hc-new-card>

        <!-- 新增委托 -->
        <hc-new-dialog v-model="delegateModal" is-footer-center is-table title="新增委托" widths="60rem" @close="delegateModalClose">
            html表单
            <template #footer>
                <el-button @click="delegateModalClose">取消</el-button>
                <el-button hc-btn type="warning" @click="linkSamplingShow">关联取样材料</el-button>
                <el-button hc-btn type="primary" @click="creatingDelegate">创建</el-button>
            </template>
        </hc-new-dialog>

        <!-- 关联取样材料 -->
        <hc-new-dialog v-model="linkSamplingModal" is-footer-center is-table title="关联取样材料" widths="80%" @close="linkSamplingClose">
            <SamplingPage />
            <template #footer>
                <el-button @click="linkSamplingClose">取消</el-button>
                <el-button hc-btn type="primary" @click="linkSamplingClick">确定</el-button>
            </template>
        </hc-new-dialog>
    </hc-body>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useAppStore } from '~src/store'
import { getStoreValue, setStoreValue } from '~src/utils/storage'
import TestTree from '~src/views/tentative/material/components/TestTree.vue'
import SamplingPage from './commission/sampling.vue'

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

//渲染完成
onMounted(() => {

})

//搜索表单
const searchForm = ref({ current: 1, size: 20, total: 0 })

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

//树被点击
const nodeDataInfo = ref({})
const wbsElTreeClick = ({ data, keys }) => {
    nodeDataInfo.value = data
    //缓存自动展开
    treeAutoExpandKeys.value = keys
    setStoreValue('testTreeExpandKeys', keys)
}

//搜索
const searchClick = () => {
    searchForm.value.current = 1
    getTableData()
}

//分页被点击
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//表格数据
const tableData = ref([
    { key5:1 }, { key5:2 }, { key5:3 }, { key5:4 },
])
const tableColumn = ref([
    { key: 'key1', name: '委托单位' },
    { key: 'key2', name: '委托单编号' },
    { key: 'key3', name: '委托单名称' },
    { key: 'key4', name: '关联材料名称' },
    { key: 'key5', name: '委托单状态', width: 120, align: 'center' },
    { key: 'action', name: '操作', width: 120, align: 'center' },
])

//获取数据
const tableLoading = ref(false)
const getTableData = async () => {

}

//多选
const tableCheckedKeys = ref([])
const tableSelection = (rows) => {
    tableCheckedKeys.value = rows
}

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

//新增
const delegateModal = ref(false)
const addFormData = () => {
    delegateModal.value = true
}

//修改
const rowEdit = (row) => {
    delegateModal.value = true
}

//创建委托
const creatingDelegate = async () => {
    delegateModalClose()
}

//关闭委托
const delegateModalClose = () => {
    delegateModal.value = false
}

//关联取样材料
const linkSamplingModal = ref(false)
const linkSamplingShow = () => {
    linkSamplingModal.value = true
}

//确认关联取样材料
const linkSamplingClick = () => {
    linkSamplingClose()
}

//取消关联取样材料
const linkSamplingClose = () => {
    linkSamplingModal.value = false
}

//查看
const rowView = (row) => {

}

//创建报告
const rowReports = (row) => {

}
</script>

<style scoped lang="scss">

</style>