jingNing_H5_Mobile/src/pages/equipmentPurchaseApply/equipmentItemLibrary/projectLibrary/detail/index.vue

<script setup>
import { closeToast, showConfirmDialog, showLoadingToast, showToast } from 'vant'
import { userInfo } from '~/store/user'

const { user_id } = userInfo
const { currentRoute } = useRouter()
const route = currentRoute.value
const xm_id = route.query.xm_id
const detailData = ref({})

showLoadingToast({
    message: '加载中...',
    forbidClick: true,
})
let finishTime = $ref('')
function initData() {
    request({
        url: '/jdbg/sbcg_cgxm/detail',
        data: {
            xm_id,
        },
    }).then((res) => {
        closeToast()
        detailData.value = res.data.one_info;
        finishTime = res.data.one_info.shjl[res.data.one_info.shjl.length - 1].modify_dateline
    })
}
initData();

// 处理树结构数据
function dealData(item) {
    item.forEach(element => {
        if (element.children && element.children.length > 0) {
            dealData(element.children)
        } else if (element.tag === 'org') {
            element.disabled = true;
        }
    });
}
//组织机构数树形
let treeData = $ref([]);
function getOrgTree() {
    let transObj = {
        show_all: 1
    }
    request({
        url: '/user/org/org_member_tree',
        data: transObj
    }).then(res => {
        if (res.code == "1") {
            treeData = res.data.one_info;
            dealData(treeData);
        }
    })
}
const fieldNames = {
    text: 'label',
    value: 'tree_id',
    children: 'children',
};
// 分配人员
let allotShow = $ref(false);
let id = $ref('');//项目id
function handleAllot() {
    getOrgTree()
    allotShow = true;
    id = xm_id;
}
const onFinish = ({ selectedOptions }) => {
    let fp_user = selectedOptions[selectedOptions.length - 1].tree_id;
    let fp_name = selectedOptions[selectedOptions.length - 1].label;
    showConfirmDialog({
        message:
            `确定将此任务分配给${fp_name}?`,
    })
        .then(() => {
            request({
                url: '/jdbg/sbcg_cgxm/edit',
                data: {
                    xm_id: id,
                    jdbg_sbcg_cgxm: {
                        xm_fp_user: fp_user,
                    },
                },
            }).then(res => {
                if (res.code == '1') {
                    allotShow = false;
                    initData();
                    showToast(res.msg);
                }
            })
        })
        .catch(() => {
            // on cancel
        });
};

// #region 已分配详情
let allocatedShow = $ref(false);
function handleAllocated() {
    allocatedShow = true;
}
// #endregion
</script>

<template>
    <div>
        <div class="tableContainer">
            <div id="printBox" class="relative min-h-40 text-black text-14px">
                <div class="title px-10px leading-30px text-gray-600">
                    <p> 申报日期: {{ detailData.create_dateline }}</p>
                    <p>审核通过日期: {{ finishTime }}</p>
                </div>
                <h3 class="font-bold text-center my-15px text-18px">教育局采购项目申报表</h3>
                <table cellspacing="0" align="center" valign="middle" class="fileShow Tb">
                    <tr>
                        <td class="titleOpt">申报科室</td>
                        <td class="w-1/3">{{ detailData.department_name }}</td>
                        <td>申请人</td>
                        <td>{{ detailData.xm_user_name }}</td>
                    </tr>
                    <tr>
                        <td class="titleOpt">项目名称</td>
                        <td colspan="3">{{ detailData.xm_name }}</td>
                    </tr>
                    <tr style="height: 50px">
                        <td class="titleOpt">采购的主要理由及依据</td>
                        <td colspan="3">{{ detailData.xm_lyyj }}</td>
                    </tr>
                    <tr>
                        <td class="titleOpt">采购类型</td>
                        <td>{{ detailData.lb_name }}</td>
                        <td>采购金额</td>
                        <td>{{ detailData.xm_price }}元</td>
                    </tr>
                    <tr style="min-height: 80px">
                        <td class="titleOpt">项目清单</td>
                        <td colspan="3" class="text-left">
                            <div class="xmqd" v-html="detailData.xm_qd"></div>
                        </td>
                    </tr>
                    <tr v-for="sp in detailData.shjl" :key="sp.sh_id" style="height: 50px">
                        <td class="py-5 titleOpt">
                            <div>
                                {{ sp.sh_dept_name }}
                            </div>
                            <div>{{ sp.position }}审批</div>
                        </td>
                        <td colspan="3">
                            同意&emsp;&emsp;{{ sp.sh_user_name }}&emsp;&emsp;
                            {{ sp.modify_dateline.split(" ")[0] }}
                        </td>
                    </tr>
                </table>
                <!-- <img class="pa z-100 top-14 right-8 w-42mm h-42mm" src="@/assets/images/officialSeal.png" alt="" /> -->
                <div v-if="detailData.xm_fp_user == '0'" class="flex justify-between items-center my-5px">
                    <p>任务分配: 未分配</p>
                    <van-button v-if="detailData.create_user_id === user_id" class="w-60px" type="primary" size="small"
                        @click="handleAllot">分配</van-button>
                </div>
                <div class="flex items-center justify-between my-5px" v-else>
                    <div class="flex items-center">
                        <span class="mr-10px">任务分配: 已分配</span>
                        <div class="mr-10px">
                            <span>{{ detailData.xm_fp_user_name }}</span>
                        </div>
                        {{ detailData.xm_is_wc_option_k === "2" ? "未完成" : "已完成" }}
                    </div>

                    <van-button class="w-60px bg-hex-BDBDBD border-hex-BDBDBD audited float-right" type="primary"
                        size="small" @click="allocatedShow = true">已分配</van-button>
                </div>
            </div>
        </div>
        <!-- 分配级联 -->
        <van-popup v-model:show="allotShow" round position="bottom">
            <van-cascader v-model="cascaderValue" title="请选择分配人员" :options="treeData" @close="allotShow = false"
                @finish="onFinish" :field-names="fieldNames" />
        </van-popup>
        <!-- 已分配详情 -->
        <van-dialog v-model:show="allocatedShow" title="分配详情" :show-cancel-button="false" class="">
            <div class="w-4/5 center text-18px text-gray-600 leading-loose">
                <p v-if="detailData.xm_fp_user_name">{{ detailData?.xm_fp_user_name }} <span class="ml-5px">{{
                    detailData.modify_dateline
                }}</span></p>
                <p>状态: <span class="ml-10px">{{ detailData.xm_is_wc == '1' ? '完成' : '未完成' }}</span> </p>
            </div>
        </van-dialog>
    </div>
</template>

<style lang="scss" scoped>
@import "~/styles/table.scss";

.titleOpt {
    width: 25%;
}

.border_bottom {
    border-bottom: 2px solid #666;
    border-top: 2px solid #666;
}

.center {
    margin: 10px auto;
}

.text-red {
    color: red;
}

:deep(.specialTd table tbody tr td) {
    border: 1px #CCCCCC solid !important;
}

::v-deep .fileShow table {
    border: 1px #000 solid;

    tbody {
        tr {
            td {
                border: 1px #000 solid;
                line-height: 30px;
            }
        }
    }
}

.text-left {
    padding: 0 !important;
}

::v-deep .xmqd {
    width: 100% !important;

    table {
        width: 100% !important;
        margin-left: 0 !important;

        // table-layout: fixed !important;
        td {
            width: none !important;
            padding: 5px 1px !important;
            word-break: break-all;
            word-wrap: wrap;
            white-space: normal;

            p {
                text-align: center !important;
            }
        }
    }

    img {
        width: 100% !important;
        margin-top: 20px;
    }
}

::v-deep .MsoNormalTable {
    width: 100% !important;
}
</style>