try-vuejswithOverHead

todo: sumation,editable condition

by cactus77kiki

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>    
    <div id="vapp" style="margin:20px;">
      <h5>
        {{queryVal.queryYM}}  {{queryVal.queryKind}}  
      </h5>
      {{operateMode}}<br/>
      <table id="customers">
        <thead>
        <tr >
            <th >{{headerYearVal.ItemName}}</th>
            <th v-bind:colspan="headerYearVal.Currents.ColMerge" >{{headerYearVal.Currents.Text}}</th>
            <th v-bind:colspan="headerYearVal.Nexts.ColMerge" >{{headerYearVal.Nexts.Text}}</th>            
            <th v-for="row in headerYearVal.Years" >{{row}}</th>
          </tr>  
        </thead> 
        <tbody>
          <tr>
           <td class="monthtyle">{{headerMonthVal.ItemName}}</td>
           <td class="monthtyle" v-for="row in headerMonthVal.Currents">{{row}}</td>
           <td class="monthtyle" v-for="row in headerMonthVal.Nexts">{{row}}</td>
           <td class="monthtyle" v-for="row in headerMonthVal.Years">{{row}}</td>
         </tr>
        </tbody>
       <tbody v-for="item in dataVal">         
         <tr >             
           <td v-for="field in fieldVal" v-if="item[field].Display=='Y'">
           <span v-if="operateMode.mQuery">{{item[field].Value}}</span>
           <span v-else><input type="text" v-model="item[field].Value" style="width:50px;"/></span>
           </td>
            <!--<td v-bind:class="item.ItemKind == 0 ? 'textstyle': ''">{{item.ItemName}}</td>
            <td v-bind:class="item.ItemKind == 0 ?...

CSS

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

/*#customers tr:nth-child(even){background-color: #f2f2f2;}*/  /*隔行變色*/

#customers tr:hover {background-color: #ddd;}

#customers th {  
  text-align: center;
  background-color: #AED6F1 ;  /*header color*/
  /*color: white;*/
}
/*月份*/
.monthtyle{
  text-align: center;
  background-color: #AED6F1 ;
  font-weight: bold;
  /*text-decoration:underline;*/
}
/*小計*/
.substyle{
  background-color: #AED6F1 ;
  font-weight: bold;
}

JavaScript

var appinstance = new Vue({
            el: '#vapp',
            data: {
                activetab: 1,                
                queryVal:{},	//查詢模型
                headerYearVal: {},   //年份            
                headerMonthVal:{},   //月份            
                fieldVal:[],	//資料屬性
                dataVal: [],	//資料
                subVal:{},	//小計
            },
            computed: {
							  operateMode: function(){                	
                  let query = false, edit = false, add = false;
                	switch(this.activetab){
                  	case 1:
                  		query = true;                      
                    	break;
                    case 2:
                  		edit = true;                      
                    	break;  
                    case 3:
                  		add = true;                      
                    	break;  
                  }
                  return { mQuery: query, mEdit: edit, mAdd: add  };
                }
            },
            methods: {
                initialize() {
                    this.activetab = 1;
                    this.queryVal = { 
                    	queryKind: '1.行政人員',
                      queryYM: '202110',
                    };
                    //後端需一變數=7
                    this.headerYearVal = {
                    	ItemName:'年',
                    	Currents:{ Text: '2021', ColMerge: 2},
                    	Nexts:{ Text: '2022', ColMerge:12},
                    	Years:['2021','2022','2023'],
                    };
                    this.headerMonthVal =
                    {
                    	ItemName: '月',
                      Currents: [11,12],
                      Nexts: [1,2,3,4,5,6,7,8,9,10,11,12],
                      Years: ['','',''],
                    };
                    this.fieldVal = [
                    	'ItemName','ItemKind',
                      'CurrMon01','CurrMon02','CurrMon03','CurrMon04',
                     ...