hlt_gis_admin/src/views/resource/plat/item/child/ResCarModal.vue

<template>
    <!-- 申请库弹窗 -->
    <BasicModal width="1440px" v-bind="$attrs" :title="title" :showOkBtn="false" :showCancelBtn="false">
    <!-- <a-modal :visible="true" :width="width" :maskClosable="false" :destroyOnClose="true" centered :title="title"
        :footer="null" wrapClassName="modal-wrap" @cancel="onClose"> -->
        <div class="modal-wrap">
            <div class="action-content">
                <div class="top-search">
                    <div class="left-search-input">
                        <div class="input">
                            <span>关键字</span>
                            <a-input allowClear v-model:value="searchValue" style="width: 200px;"
                                placeholder="请输入资源名称"></a-input>
                        </div>
                        <div class="input">
                            <span>审核状态</span>
                            <a-select allowClear v-model:value="selectValue" style="width: 200px" :options="statusOptions">
                            </a-select>
                        </div>
                        <div class="input">
                            <span>申请时间</span>
                            <!-- <a-date-picker v-model:value="searchTime" placeholder="申请时间" style="width: 200px" /> -->
                            <a-range-picker placeholder="申请时间" v-model:value="searchTime" />
                        </div>
                    </div>
                    <div class="right-btns">
                        <a-button style="margin-right: 15px;" @click="handleReset">重置</a-button>
                        <a-button type="primary" @click="handleSearch">查询</a-button>
                    </div>
                </div>

                <div class="bottom-table">
                    <BasicTable @register="registerTable" class="basic-table sqkList">
                        <template #toolbar>
                            <a-button :disabled="hasSelected" style="background-color: #fc8b01;color: #fff;"
                                @click="handleCreate">提交申请</a-button>
                        </template>
                        <template #tjsqsj="{ record }">
                            {{ record?.tjsqsj?.replace('.0', '') }}
                        </template>
                        <template #index="{ index }">
                            {{ index + 1 }}
                        </template>
                        <template #action="{ record }">
                            <TableAction :actions="[
                                {
                                    label: '移出',
                                    tooltip: '移出',
                                    onClick: handleDelete.bind(null, record),
                                    disabled: record.shzt != '未提交' && record.shzt != '审核不通过'
                                },
                                {
                                    label: '提交申请',
                                    disabled: record.shzt != '未提交' && record.shzt != '审核不通过',
                                    onClick: applyHandleEdit.bind(null, record),
                                },
                            ]">
                            </TableAction>
                        </template>
                    </BasicTable>
                </div>
            </div>
        </div>
    <!-- </a-modal> -->
    </BasicModal>
    <!-- 申请弹出框 -->
    <ApplyModal @register="registerModal" @success="applyHandleSuccess" :type="props.type" />
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, toRefs, computed, createVNode } from 'vue';
// 导入表格组件，表格事件
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { session } from '/@/utils/Memory';
import moment from 'moment';
//操作申请库资源
import { getResInCar, clearResInCar, deleteResInCar } from '/@/api/resource/plat';
//提交授权申请
import { queryFlowInfoPage, submitExamine } from '/@/api/resource/examine';
import ApplyModal from './applyModal/ApplyModal.vue';
import { useModal } from '/@/components/Modal';
import { columns } from "./ResCarModal.data";
import { list } from '/@/api/authorize/authorize';
import { BasicModal } from '/@/components/Modal';


export default defineComponent({
    name: 'modal',
    components: { BasicTable, TableAction, ApplyModal, ExclamationCircleOutlined, BasicModal },
    props: {
        type: {
            type: String,
            default: '',
        }
    },
    setup(props, { emit }) {
        const data = reactive({
            width: '1440px',
            title: '申请库',
        })
        const searchValue = ref('')
        const selectValue = ref('')
        const searchTime = ref([])
        const statusOptions = [
            { label: "未提交", value: "未提交" },
            { label: "审核中", value: "审核中" },
            { label: "审核通过", value: "审核通过" },
            { label: "审核不通过", value: "审核不通过" },
        ]

        // 请求所有申请库中的资源
        const getAllData = async () => {
            var appList = await list();
            return new Promise((resolve) => {
                getResInCar({
                    keyword: searchValue.value,
                    shzt: selectValue.value,
                    sqsj: searchTime.value.length == 2 ? moment(searchTime.value[0]).format('YYYY-MM-DD') : '',
                    endSqsj: searchTime.value.length == 2 ? moment(searchTime.value[1]).format('YYYY-MM-DD') : '',
                    userId: session.getItem('userId'),
                }).then((res) => {
                    if (res?.datas?.length) {
                        let resData = [];
                        res.datas.map((item, index) => {
                            //筛掉接口服务
                            var type = item.applyCarInfo.workflowType;
                            if (type == props.type) {
                                console.log("查看每一个：", item)
                                if (item?.resInfo?.SERVICEID) {
                                    var shr = [];
                                    var shyj = [];
                                    if (item?.shlc?.length > 1) {
                                        item.shlc.map((i, index) => {
                                            var lx = item?.shzt == '审核中' ? true : index != item.shlc.length - 1;
                                            if (index != 0 && lx) {
                                                shr.push(i.USER_NAME)
                                                shyj.push(i.CHECKINFO)
                                            }
                                        })
                                    }
                                    var sqsj = null;
                                    if (item?.shlc?.length) sqsj = item.shlc[0].CHECKTIME;
                                    var app = appList.find((i) => i.KEY == item.systemkey);
                                    resData.push({
                                        resInCarId: item?.applyCarInfo?.id,
                                        serviceid: item?.resInfo?.SERVICEID,
                                        zylx: type === 'MAP' ? '地图资源' : type === 'SCENE' ? '场景资源' : '文件资源',
                                        zymc: item?.applyCarInfo?.resName,
                                        yyxt: app?.NAME || '',
                                        sqsj: sqsj,//item?.applyCarInfo?.createtime,
                                        sqr: item?.sqrname,
                                        shzt: item?.shzt,
                                        tjsqsj: item.tjsqsj,
                                        shr: shr.join(','),
                                        shyj: shyj.join(','),
                                    })
                                }
                            }
                        })
                        resolve(resData)
                    } else {
                        resolve([])
                    }
                }).catch((err) => {
                    resolve([])
                })
            })
        }

        //注册表格
        const [registerTable, { reload, getRowSelection, getSelectRowKeys, clearSelectedRowKeys }] = useTable({
            title: '资源列表',
            api: getAllData,		 //数据
            // dataSource: [],
            columns: columns,        //表头配置
            bordered: true,
            striped: true,
            useSearchForm: false,     //开启搜索区域
            // formConfig: formConfig,  //搜索字段配置
            actionColumn: {
                // width: 100,
                title: '操作',
                dataIndex: 'action',
                slots: { customRender: 'action' },
            },
            rowSelection: {
                type: 'checkbox',
                getCheckboxProps: (record) => {
                    if (record.shzt != '未提交' && record.shzt != '审核不通过') {
                        return { disabled: true }
                    } else {
                        return null
                    }
                }
            },
            pagination: {
                // pageSize: 10,
                hideOnSinglePage: false
            },
            rowKey: (record) => record.serviceid,
            canResize: false,
            showTableSetting: true,  // 显示表格设置
            tableSetting: {
                redo: true,
                size: true,
                setting: false,
                fullScreen: false
            },
            maxHeight: 400,
            minHeight: 400,
            showIndexColumn: false,
            indexColumnProps: { fixed: 'left' },
        });
        //判断是否选中数据
        const hasSelected = computed(() => {
            const rowSelection = getRowSelection();
            return !(rowSelection.selectedRowKeys?.length === 1);
        });
        //重置查询
        const handleReset = () => {
            searchValue.value = '';
            selectValue.value = '';
            searchTime.value = '';
            reload();
        }
        //条件查询
        const handleSearch = () => {
            reload();
        }
        //移除资源
        const handleDelete = (record) => {
            Modal.confirm({
                title: '移出提示',
                icon: createVNode(ExclamationCircleOutlined),
                content: '确定移出该资源？',
                centered: true,
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk: (() => {
                    let params = {
                        idList: [record.resInCarId]
                    }
                    deleteResInCar(params, record).then(res => {
                        reload();
                        eventBus.emit('platListCenter', { type: props.type })
                        eventBus.emit('addResToCarEventBus')
                    })
                })
            });
        }
        //添加申请
        const handleAdd = () => {
            console.log('开始申请');
            Modal.confirm({
                title: '申请提示',
                icon: createVNode(ExclamationCircleOutlined),
                content: '确定提交申请该资源？',
                centered: true,
                okText: '确定',
                cancelText: '取消',
                onOk: (() => {
                    queryFlowInfoPage({
                        page: 1,
                        rows: 1000000
                    }).then(flowRes => {
                        const rowKeys = getSelectRowKeys();
                        let ids = rowKeys.toString();
                        // console.log(flowRes);
                        let flag = 0
                        flowRes.forEach(item => {
                            if (item.FLOWNAME === judgeType(ids)) {
                                flag = 1
                                let params = {
                                    bussInfo: {
                                        bussname: judgeType(ids),//业务名称
                                        flowid: item.id,//流程id
                                        serverids: ids//资源id
                                    }
                                }
                                submitExamine(params).then(res => {
                                    if (res.resp_code === 0 && res.resp_msg === '提交成功') {
                                        message.success('申请成功')
                                        reload();
                                    } else {
                                        message.error('申请失败')
                                    }
                                })
                            }
                        })
                        clearSelectedRowKeys();
                        !flag && message.info('没有对应流程，请联系管理员');
                    })
                })
            });
        }
        const judgeType = (id) => {
            let resType = ''
            resType = id.indexOf('MR') > -1 ? '地图资源授权' : id.indexOf('ER') > -1 ? '场景资源授权' : '文件资源授权';
            // console.log(resType);
            return resType
        }
        // 关闭请求弹窗
        const onClose = (e) => {
            emit('closeModal')
        }
        //初始化请求所需数据
        onMounted(() => {

        })
        const [registerModal, { openModal }] = useModal();
        /**
         * 申请弹出框
         * @param record
         */
        function handleCreate() {
            var list = getSelectRowKeys();
            openModal(true, {
                isUpdate: false,
                sqzys: list
            });
        }
        /**
         * 申请弹出框
         * @param record
         */
        function applyHandleEdit(record) {
            if (record.serviceid) {
                openModal(true, {
                    record,
                    isUpdate: true,
                    sqzys: [record.serviceid],
                    type: record.shzt == '审核不通过' ? record : false
                });
            } else {
                message.error('选择的资源没有服务ID!')
            }
        }

        /**
         * 申请成功
         */
        function applyHandleSuccess() {
            reload();
        }
        return {
            props,
            registerModal,
            handleCreate,
            applyHandleEdit,
            applyHandleSuccess,
            searchValue,
            selectValue,
            searchTime,
            statusOptions,
            hasSelected,
            ...toRefs(data),
            registerTable,
            handleReset,
            handleSearch,
            handleDelete,
            handleAdd,
            onClose
        };
    },
});
</script>
<style>
.sqkList .ant-table-fixed-header .ant-table-scroll .ant-table-header{
    width: 1403px !important;
}
</style>
<style lang="less" scoped>
.modal-wrap .action-content .top-search {
    width: 100%;
    height: 74px;
    border-radius: 6px;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-wrap {
    .action-content {
        padding: 20px;
        max-height: 800px;
        overflow: auto;
        background-color: #eff0f5;

        .top-search {
            width: 100%;
            height: 74px;
            border-radius: 6px;
            background: #FFFFFF;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left-search-input {
                margin-left: 20px;
                display: flex;

                .input {
                    margin-right: 30px;

                    span {
                        margin-right: 10px;
                    }
                }
            }

            .right-btns {
                margin-right: 20px;
            }
        }

        .bottom-table {
            margin-top: 20px;

            .basic-table {
                height: 100%;

                ::v-deep .ant-table-title {
                    padding: 0 !important;

                    .vben-basic-title {
                        font-family: '阿里巴巴普惠体 2.0';
                        font-size: 16px;
                        font-weight: bold;
                        color: #333333;
                    }

                }
            }
        }
    }
}
</style>