vue-element简单使用

Posted 2022-03-09 two-bees

背景，因为公司对接的平台较多，不同的平台的问题也比较多，所以整理了常见的问题点形成后台工具给客服使用，这样就减少了人力消耗。但是因为公司前端忙不过来，所以有我这个后端人员来前后端一起处理。

之前都是原生php写的前端代码，而且也写过小程序，所以这里我就研究了下前端的vue的element框架来处理。

直接上代码吧

一、后台

因为vue的特殊规定需要后台传递对象，即

[,,]

中的数据其实就是我们php常用的数组

如下面的实际数据结构

code:"000000",
data:
[psnl_id: "81899211010382", psnl_state: "1", psnl_name: "线下", cert_no: "310106199407309921",…],
message:"请求成功"

二、js

define(["lib/ajax"], function(ajax) //这里是我们前端封装的调用
    var appName = "#" + $(".app-name").attr("data-path");
    new Vue(
        el: appName,
        data: function() 
            return 
                form: 
                    id_cash_number: ""
                ,
                tableCashInfo: []
            ;
        ,

        methods: 
            getData(v) 
        var param = Object.assign(, v);
        var _this = this;
        ajax.post("/api/complaint/get-cash-amount", param, function(res) 
            //console.log(res);
            //console.log(res.message);

            if(res.code == ‘000000‘)
                var cashInfo = res.data;
                //console.log(fundInfo);
                _this.tableCashInfo = cashInfo;
            else 
                _this.tableCashInfo = [];
                alert(res.message);
            
        );
    ,
    beginRepair(v)
        var param = Object.assign(, v);
        var _this = this;
        ajax.post("/api/complaint/forehead-repair", param, function(res) 
            //console.log(res);
            //return false;

            if(res.code == ‘000000‘)
                var cashInfo = res.data;
                _this.tableCashInfo = cashInfo;
            else 
                alert(res.message);
            
        );
    ,
    initSearch() 
        let obj = ;
        for (const key in this.form) 
            if (this.form.hasOwnProperty(key)) 
                const ele = this.form[key];
                if (ele) 
                    obj[key] = ele;
                
            
        
        return obj;
    ,
    searchFn() 
        //console.log(this.form);
        let thisobj = this.initSearch();

        if(!thisobj.id_card_number)
            alert(‘请输入身份证号‘);
            return false;
        

        this.getData(thisobj);
    ,
    repair(res) 
        if(!res)
            alert(‘身份证号不存在‘);
            return false;
        
        var mymessage = confirm("确定要修复额度吗？");
        if(mymessage == false)
            return false;
        

        let obj = ;//将值放到对象中
        obj[‘id_card_number‘] = res;

        this.beginRepair(obj);
    

);
);

三、前端

<div class="lib-main-wrap my-main-wrap lib-row" v-cloak>
        <p style="float: right;"><span style="color: red;">提示：</span>暂时只可修复总现金贷金额、已用现金额度在￥50以内的</p>
        <div class="userlist-wrap">
            <template>
                <el-form class=‘mb-20‘ ref="form" :model="form" label-width="auto" :inline=true label-position=‘left‘>
                    <el-form-item label="身份证号：">
                        <el-input type=‘number‘ maxlength=11 v-model="form.id_card_number" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click = searchFn>搜索</el-button>
                </el-form>
            </template>

            <template>
                <el-table :data="tableCashInfo" label="信用飞账单：" class="table-style mb-20">
                    <el-table-column prop="psnl_name" label="姓名" width="100"></el-table-column>
                    <el-table-column prop="cert_no" label="身份证号"></el-table-column>
                    <el-table-column prop="debit_amt" label="贷款金额"></el-table-column>
                    <el-table-column prop="cash_debit_amt" label="总现金贷款金额"></el-table-column>
                    <el-table-column prop="cash_amt" label="已用现金额度"></el-table-column>
                    <el-table-column prop="cert_no" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" @click ="repair(scope.row.cert_no)">额度修复</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="kk_status" label="扣款状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.kk_status  != ‘无重复‘" style="color:red">scope.row.kk_status</span>
                            <span v-else >scope.row.kk_status</span>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <el-pagination
                class="mt20"
                background
                layout="prev, pager, next"
                :current-page="pageinfo.currentPage"
                @current-change = sizeChangeFn
                :total="pageinfo.totalCount">
            </el-pagination>
        </div>
    </div>

公司以前不是前后端分离的，所以是在php文件上写前端代码

附上element的官方网站：

https://element.eleme.cn/#/en-US/component/installation

教程：https://cn.vuejs.org/v2/guide/