oa-system/src/components/Resource/InsCountry.vue

<template>
    <div class="InsCountry-all">
        <el-dialog width="830px" class="InsCountry-dialog" title="新增编辑" :visible.sync="dialogTableVisible"  :close-on-click-modal="false">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
                <div class="InsCountry-form">
                    <el-form-item label="国家名称" prop="countryName">
                        <el-input v-model="ruleForm.countryName"></el-input>
                    </el-form-item>
                    <el-form-item label="是否为申根国" prop="isSchengen">
                        <el-radio-group v-model="ruleForm.isSchengen">
                            <el-radio label="是申根国"></el-radio>
                            <el-radio label="不是申根国"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="保险费用" prop="cost">
                        <el-input-number class="append_unit" data-unit="CNY" :controls="false" v-model="ruleForm.cost" :precision="2">
                            
                        </el-input-number>
                    </el-form-item>
                    <el-form-item style="width:100%;" label="备注">
                        <el-input type="textarea" :rows="2" v-model="ruleForm.remark"></el-input>
                    </el-form-item>
                </div>
                <el-form-item style="text-align: right;width:100%;">
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                    <el-button @click="dialogTableVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <div>国家保险标准</div>
        <div class="InsCountry-search">
            <div>
                <el-input clearable size="small" style="width:250px;" v-model="searchinput" placeholder="请输入国家"></el-input>
                <el-button @click="InsuranceCostPageItem" size="small" type="primary">查询</el-button>
            </div>
            <el-button @click="InsCountryadd" size="small" type="primary">新增</el-button>
        </div>
        <div class="InsCountry-table">
            <el-table
            :data="tableData"
            border
            style="width: 100%">
                <el-table-column
                prop="countryName"
                label="国家"    
                width="180">
                </el-table-column>
                <el-table-column
                prop="cost"
                label="金额"
                width="180">
                <template slot-scope="scope">
                    {{ townum(scope.row.cost) }}
                </template>
                </el-table-column>
                <el-table-column
                prop="createTime"
                label="更新时间"
                width="180">
                </el-table-column>
                <el-table-column
                prop="createUserName"
                label="录入人"
                width="180">
                </el-table-column>
                <el-table-column
                prop="remark"
                label="备注">
                </el-table-column>
                <el-table-column
                label="操作"
                width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="upDate(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="del(scope.row)">删除</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,14, 15, 20, 30]"
                  :page-size="pagesize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            token:'',
            userid:'',
            tableData:[],
            searchinput:'',
            currentPage:1,
            pagesize:14,
            total:0,
            dialogTableVisible:false,
            ruleForm: {
                id:'',
                countryName:'',
                cost:0,
                isSchengen:'',
                remark: '',
            },
            rules: {
                countryName: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                cost: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                isSchengen: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
            },
        }
    },
    methods:{
        //保留两位小数
        townum(val){
            val=Number(val);
            return val.toFixed(2);
        },
        handleSizeChange(val) {
            this.currentPage=1;
            this.pagesize=val;
            this.InsuranceCostPageItem();
        },
        handleCurrentChange(val) {
            this.currentPage=val;
            this.InsuranceCostPageItem();
        },
        //获取表格
        InsuranceCostPageItem(){
            var url = "/api/Resource/InsuranceCostPageItem"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    portType:1,
                    pageIndex:that.currentPage,
                    pageSize:that.pagesize,
                    search:that.searchinput,
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.tableData=res.data.data;
                    that.total=res.data.count;
                }else{
                    that.$message({
                        message: '加载失败！原因：'+res.data.msg,
                        type: 'warning'
                    });
                }
            })
        },
        InsCountryadd(){
            this.dialogTableVisible=true;
            this.ruleForm={
                id:'',
                countryName:'',
                cost:0,
                isSchengen:'',
                remark: '',
            }
        },

        //编辑
        upDate(val){
            this.InsCountryadd();
            this.InsuranceCostInfo(val.id)
        },
        //获取详情
        InsuranceCostInfo(val){
            var url = "/api/Resource/InsuranceCostInfo"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    portType:1,
                    id:val,
                }
            }).then(function (res) {
                if(res.data.code==200){
                    let infobxbz=res.data.data
                    that.ruleForm.id=infobxbz.id;
                    that.ruleForm.countryName=infobxbz.countryName;
                    that.ruleForm.cost=infobxbz.cost;
                    that.ruleForm.isSchengen=infobxbz.isSchengen==1?'是申根国':'不是申根国';
                    that.ruleForm.remark=infobxbz.remark;
                }else{
                    that.$message({
                        message: '加载失败！原因：'+res.data.msg,
                        type: 'warning'
                    });
                }
            })
        },
        del(row) {
            this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var url = "/api/Resource/InsuranceCostSoftDel"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer '
                    },
                    data: {
                        portType:1,
                        currUserId: that.userid,
                        id: row.id,
                    }
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.dialogTableVisible=false;
                        that.$message({
                            message:res.data.msg,
                            type: 'success'
                        });
                        that.InsuranceCostPageItem();
                    } else {
                        that.$message.error(res.data.msg);
                    }
                }).catch(function (error) {
                    that.$message.error("出错！请联系信息部");
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '操作已取消！'
                });
            });
        },
        //新增api
        InsuranceCostOp(){
            var url = "/api/Resource/InsuranceCostOp"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    portType:1,
                    id:that.ruleForm.id==''?0:that.ruleForm.id,
                    currUserId:that.userid,
                    isSchengen:that.ruleForm.isSchengen=='是申根国'?1:0,
                    countryName:that.ruleForm.countryName,
                    cost:that.ruleForm.cost,
                    remark:that.ruleForm.remark,
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.dialogTableVisible=false
                    that.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    that.InsuranceCostPageItem();
                }else{
                    that.$message({
                        message: '加载失败！原因：'+res.data.msg,
                        type: 'warning'
                    });
                }
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.InsuranceCostOp();
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    mounted(){
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.InsuranceCostPageItem();
    },
}
</script>
<style>
.InsCountry-all {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 830px;
}
.InsCountry-search{
    display: flex;
    justify-content: space-between;
    margin: 10px 0 ;
}
.InsCountry-table .block{
    text-align: center;
    margin-top: 15px;
}
.InsCountry-dialog .el-form-item{
    width: 395px;
}
.InsCountry-dialog .el-select,.el-input,.el-input-number{
    width: 100%;
}
.InsCountry-form{
    display: flex;
    flex-wrap:wrap ;
}
</style>