oa-system/src/components/OP/FormCollection.vue

<template>
    <div class="formcollection-all">
        <el-dialog width="500px" title="表单收集详情" :visible.sync="formcollectionVisible">
            <div v-for="(item,index) in controlarr" :key="index" class="formcollection-info">
                <div class="formcollection-info-title">{{ item.fieldName }}:</div>
                <div v-if="item.fieldName=='出访国家（地、区）'||item.fieldName=='涉及城市'" class="formcollection-info-text">
                    <span v-for="(items,index) in item.newValue" :key="index">{{items+','}}</span>
                </div>
                <div v-else class="formcollection-info-text">{{ item.newValue }}</div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="formcollectionVisible = false">取 消</el-button>
                <el-button type="primary" @click="formcollectionVisible = false">确 定</el-button>
            </div>
        </el-dialog>
        <div style="padding: 10px;">
            <div class="formcollection-title">表单收集列表</div>
            <div class="formcollection-search">
                <el-input style="width: 250px;" placeholder="请输入内容" v-model="input" clearable>
                </el-input>
            </div>
            <div class="formcollection-table">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="name" label="表单名称" width="180">
                    </el-table-column>
                    <el-table-column prop="unitName" label="团队名称">
                    </el-table-column>
                    <el-table-column prop="visitDays" label="出访天数" width="180">
                    </el-table-column>
                    <el-table-column prop="visiPpNum" label="出访人数" width="180">
                    </el-table-column>
                    <el-table-column prop="visitCountrys" label="出访国家" width="180">
                    </el-table-column>
                    <el-table-column prop="operator" label="创建人" width="80">
                    </el-table-column>
                    <el-table-column prop="operationTime" label="创建时间" width="180">
                    </el-table-column>
                    <el-table-column label="操作" width="400">
                        <template slot-scope="scope">
                            <el-button v-for="(item,index) in scope.row.versionDetails"
                                @click="GroupOrderPreInfo(scope.row.id,item.id)" :key="index" :disabled="item.isNull"
                                size="mini" type="primary">{{item.name}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[10,15, 20]" :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper" :total="fctotal">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            input: '',
            tableData: [{
                id: 4,
                name: '安卓测试',
                unitName: '',
                visitDays: 0,
                visiPpNum: 0,
                operator: '舒庆',
                operationTime: '2025-02-21 17:34:42'
            }, {
                id: 3,
                name: '安卓测试',
                unitName: '',
                visitDays: 0,
                visiPpNum: 0,
                operator: '舒庆',
                operationTime: '2025-02-21 17:34:42'
            }, {
                id: 2,
                name: '安卓测试',
                unitName: '',
                visitDays: 0,
                visiPpNum: 0,
                operator: '舒庆',
                operationTime: '2025-02-21 17:34:42'
            }, {
                id: 1,
                name: '安卓测试',
                unitName: '',
                visitDays: 0,
                visiPpNum: 0,
                operator: '舒庆',
                operationTime: '2025-02-21 17:34:42'
            }],
            currentPage:1,
            pagesize:10,
            fctotal:0,
            formcollectionVisible:false,
            controlarr:[],
        }
    },
    methods:{
        handleSizeChange(val) {
            this.pagesize=val;
            this.GroupOrderPreInfoList()
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage=val;
            this.GroupOrderPreInfoList()
            console.log(`当前页: ${val}`);
        },
        //获取团组
        GroupOrderPreInfoList() {
            this.tableData=[];
            var url = "/api/Groups/GroupOrderPreInfoList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data: {
                    portType: 1,
                    pageIndex: that.currentPage,
                    pageSize: that.pagesize,
                    search:that.input,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.tableData=res.data.data;
                    that.fctotal=res.data.count;
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("获取团组失败");
            });
        },
        //获取表单
        GroupOrderPreInfo(formid,tempId) {
            this.formcollectionVisible=true;
            this.controlarr=[];
            var url = "/api/Groups/GroupOrderPreInfo/"+formid+"/"+tempId
            var that = this
            this.$axios({
                method: 'get',
                url: url,
            }).then(function (res) {
                if (res.data.code==200) {
                    that.controlarr=res.data.data.items;
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
    },
    mounted(){
        this.GroupOrderPreInfoList();
    }
}
</script>
<style>
.formcollection-all{
    background-color: #fff;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 830px;
}
.formcollection-title{
    font-size: 17px;
    font-weight: 600;
}
.formcollection-search{
    margin-top:10px ;
}
.formcollection-table{
    margin-top:10px ;
}
.formcollection-table .block{
    margin-top: 10px;
    text-align: center;
}
.formcollection-info{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.formcollection-info-title{
    font-weight: 600;
}
</style>