碼上歡樂
相關內容    簡體    繁體

[前端]純 
直接將js包下載到本地使用script標簽引入，需要引入的包。需要的朋友可以點擊下面超鏈接復制到本地。
element的css包/js包，
vue的js包，
axios的js包，
qs的js包

對於一般的項目夠用了，比如我這樣的。

如果使用thymeleaf語言，在html標簽內可通過th標簽加${}表達式訪問model里的對象數據。但如果不想通過th標簽而是簡單地訪問model對象數據，
或是想在javascript代碼塊里訪問model中的數據，則要使用內聯的方法。

在<script>中使用 th:inline可以在js代碼里通過雙中括號使用后台變量
[[${session.user.name}]]
<script th:inline="javascript" type="application/javascript">

qs 區別
直接引用會報錯，需要加上window，qs改成Qs，這是與vue中不同的地方。其余都是相同的。
window.Qs.stringify(params)

這樣我們就可以少啟動一個服務了。
 
        
 
         
<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="css/elemen-ui.css" th:href="@{/css/elemen-ui.css}"/>
    <script type="text/javascript" src="js/axios.min.js" th:href="@{/js/axios.min.js}" charset="utf-8"></script>
    <script type="text/javascript" src="js/vue.min.js" th:href="@{/js/vue.min.js}" charset="utf-8"></script>
    <script type="text/javascript" src="js/element.js" th:href="@{/js/element.js}" charset="utf-8"></script>
    <title>檢修(非電類)工作票</title>
</head>
<body>
<div class="table_wrap" id="app">
    <!--startprint-->
    <table class="temperatureChart" id="PrintArea">
        <caption>
            <p style="font-size: 20px;font-weight: bold">檢修(非電類)工作票</p>
        </caption>
        <thead>
        </thead>
        <tbody>
        <tr>
            <td style="width: 20%;">工作單位</td>
            <td style="width: 40%;">剝離運行部</td>
            <td style="width: 20%;">編號</td>
            <td style="width: 20%;">{{inspectlog_code}}</td>
        </tr>
        <tr>
            <td>工作成員</td>
            <td><select name="equip_code" v-model="work_member" lay-verify="required" lay-search="">
                <option v-for="item in employee" v-bind:value="item.emp_code" value="">{{item.emp_name}}</option>
            </select>
            </td>
            <td>作業負責人</td>
            <td><select name="equip_code" v-model="work_timoneer" lay-verify="required" lay-search="">
                <option v-for="item in employee" v-bind:value="item.emp_code" value="">{{item.emp_name}}</option>
            </select></td>
        </tr>
        <tr>
            <td>工作設備/地點</td>
            <td><select name="equip_code" lay-verify="required" lay-search="">
                <option v-for="item in equip" v-bind:value="item.equip_code" value="">{{item.equip_desc}}</option>
            </select>/
                <select name="modules" v-model="work_address" lay-verify="required" lay-search="">
                    <option value="">剝離運行部</option>
                    <option value="1">一號檢修點</option>
                    <option value="2">二號檢修點</option>
                </select>
            </td>
            <td>作業人數</td>
            <td><select name="modules" v-model="work_empCount" lay-verify="required" lay-search="">
                <option value="1">1人</option>
                <option value="2">2人</option>
                <option value="3">3人</option>
                <option value="4">4人</option>
                <option value="5">5人</option>
                <option value="6">6人</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>工作內容</td>
            <td colspan="3">
                <input value="" style="display: inline-block;width:100%;text-align: left" v-model="inspect_desc"/></td>
        </tr>
        <tr>
            <td>計划作業時間</td>
            <td colspan="3">自<el-date-picker
                            v-model="start_date"
                            type="datetime"
                            placeholder="選擇日期時間"
                            default-value
                            format="yyyy年MM月dd日 HH:mm:ss"
                            prefix-icon="el-icon-date"
                            clear-icon="el-icon-circle-close"></el-date-picker>開始，至自<el-date-picker
                        v-model="stop_date"
                        type="datetime"
                        format="yyyy年MM月dd日 HH:mm:ss"
                        placeholder="選擇日期時間"
                        prefix-icon="el-icon-date"
                        clear-icon="el-icon-circle-close"
                        default-time="12:00:00">
                </el-date-picker>完結
            </td>
        </tr>
        <tr>
            <td colspan="3" style="text-align: left;">1.必須采取的安全措施</td>
            <td>選用划"〇"</td>
        </tr>
        <tr>
            <td colspan="3">勞動保護穿戴齊全、上下現場提醒司機不超員不超速，檢修作業時告知司機、掛好安全鎖、不違章操作</td>
            <td><select name="modules" v-model="safety_rule" lay-verify="required" lay-search="">
                <option value="1">〇</option>
                <option value="2">×</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>工作票簽發人:</td>
            <td><select name="equip_code" v-model="signature_code" lay-verify="required" lay-search="">
                <option v-for="item in employee" v-bind:value="item.emp_code" value="">{{item.emp_name}}</option>
            </select>
            </td>
            <td colspan="2">
                <el-date-picker
                        v-model="signature_date"
                        type="datetime"
                        placeholder="選擇日期時間"
                        default-value
                        format="yyyy年MM月dd日 HH:mm:ss"
                        prefix-icon="el-icon-date"
                        clear-icon="el-icon-circle-close">
                </el-date-picker>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
<script th:inline="javascript" type="application/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            list: [],
            id: "",
            inspectlog_code: "20200527",
            inspect_desc: "",
            start_date: "",
            stop_date: "",
            equip_code: "",
            equip: [[${equip}]],
            //使用thymeleaf標簽使用后台實體，綁定到vue的model
            employee: [[${employee}]],
        },
        methods: {
            add() {
                console.log("111")
                let obj = new Object();
                obj.id = this.id,
                    obj.inspectlog_code = this.inspectlog_code,
                    obj.inspect_dasc = this.inspect_dasc,
                    obj.start_date = this.start_date,
                    obj.stop_date = this.stop_date,
                    obj.work_timoneer = this.work_timoneer,
                    obj.work_address = this.work_address,
                    obj.work_empCount = this.work_empCount,
                axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
                function postRequest(url, params) {
                    return new Promise((resolve, reject) => {
                        axios.post(url, window.Qs.stringify(params))
                            .then(res => {
                                if (res.data > 0) {
                                    resolve(res.data);
                                } else {
                                    //Message.error(res.data.msg)
                                }
                            })
                            .catch(err => {
                                // reject(err.data)
                                //Message.error('服務器出錯了')
                            })
                    });
                }
                postRequest('ADD_Inspect',obj);
            }
        }
    })
</script>
</body>

</html>
 
        
   
 
 

      

     
 
      
     
 
      
 
 
     
 
      
     
 
     
 
    
 
    
 
    
 
   
 
   
 
    
 
    
 
      
     
免責聲明！
 
     
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
 
    
 
    

    
 
   
 
  
 
   
  
 
   
 
    猜您在找 
      【安裝】Vue( 直接使用