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

<template>
    <div class="VisaCommission-all">
        <div class="VisaCommission-hand">
            <el-select v-model="DiId" placeholder="团组选择" clearable filterable @change="groupchange"
                style="width: 250px;">
                <el-option v-for="item in groupInfoList" :key="item.id" :label="item.groupName"
                    :value="item.id">
                </el-option>
            </el-select>
            <el-button @click="preserve" type="primary">保存</el-button>
        </div>
        <!-- <div class="VisaCommission-tjyh">
            <el-button @click="vctjyh" type="primary">添加一行</el-button>
        </div> -->
        <div class="VisaCommission-table">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                label="国家"
                width="200">
                <template slot-scope="scope">
                    <el-autocomplete
                    class="inline-input"
                    v-model="scope.row.country"
                    :fetch-suggestions="querySearch"
                    @select="handleSelect(scope.row,$event,scope.$index)"
                    ></el-autocomplete>
                </template>
                </el-table-column>
                <el-table-column
                label="签证办理数量"
                width="180">
                <template slot-scope="scope">
                    <el-input-number style="width:100px" v-model="scope.row.quantity" :controls='false'>
                    </el-input-number>
                </template>
                </el-table-column>
                <el-table-column
                label="备注">
                <template slot-scope="scope">
                    <el-input
                    type="text"
                    placeholder="请输入内容"
                    v-model="scope.row.remark"
                    
                    show-word-limit
                    >
                    </el-input>
                </template>
                </el-table-column>
                <!-- <el-table-column
                label="操作"
                width="200">
                </el-table-column> -->
            </el-table>
            
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userId:'',
            DiId:'',
            groupInfoList:[],
            tableData: [],
            restaurants: [],
        }
    },
    methods:{
        //获取分类
        VisaCommissionInit() {
            var url = "/api/Groups/VisaCommissionInit"
            var that = this
            this.$axios({
                method: 'get',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.groupInfoList=res.data.data.groupData;
                    if (that.DiId=="") {
                        that.DiId=that.groupInfoList[0].id;
                    }
                    that.VisaCommissionItem();
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        //查询提成list
        VisaCommissionItem() {
            var url = "/api/Groups/VisaCommissionItem"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    portType:1,
                    currUserId:that.userId,
                    diId:that.DiId,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    var dataarr=res.data.data;
                    that.tableData=dataarr;
                    that.restaurants = dataarr.map((terminal) => {
                        return {
                            value: terminal.country,
                            id: terminal.id,
                            quantity: terminal.quantity,
                            remark: terminal.remark,
                        };
                    });
                    console.log(that.restaurants);
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        //团组切换
        groupchange(){
            this.VisaCommissionItem()
        },
        //添加一行
        vctjyh(){
            var newtblist={
                country: "",
                id: 0,
                quantity: 0,
                remark: ""
            }
            this.tableData.push(newtblist)
        },
        //保存
        preserve(){
            for(let j=0;j<this.tableData.length;j++){
                this.tableData[j].currUserId=this.userId;
                this.tableData[j].diId=this.DiId;
            }
            // console.log(this.tableData);
            this.VisaCommissionSave(this.tableData)
        },
        //保存api
        VisaCommissionSave(val) {
            var url = "/api/Groups/VisaCommissionSave"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    items:val
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                        offset: 50
                    });
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(row,evet,index) {
            row.quantity=evet.quantity;
            row.remark=evet.remark;
        }
    },
    mounted(){
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.VisaCommissionInit()
    }
}
</script>
<style>
.VisaCommission-all {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 830px;
}
.VisaCommission-hand{
    display: flex;
    justify-content: space-between;
}
.VisaCommission-tjyh{
    text-align: right;
    margin-top: 10px;
}
.VisaCommission-table{
    margin-top: 10px;
}
</style>