PS：原项目代码的分享
这个vue 相关的 vue 代码
这是相关的页面显示的字段及配置 因为请假和调休有部分的相似性。在写请假和调休时候已经用到了，部分配置的功能，前台写VUE 组件后台传进来参数然后动态生成页面，但是当时考虑的比较少页面中参杂了部分逻辑代码导致不能够通用。
```python
return_vals = [{'str': '姓名', 'type_detail': 'text', 'pattern': '.?', 'field_name': 'create_user_name',
'required': True, 'value': user_row.name, 'disabled': "disabled", 'type': 'input',
'compute_value': False},
{'str': '开始时间', 'type_detail': 'datetime-local', 'field_name': 'start_time',
'value': leave_id and self.handling_time(leave_row.start_time) or '',
'required': True, 'type': 'input', 'compute_value': False},
{'str': '结束时间', 'type_detail': 'datetime-local', 'field_name': 'end_time',
'value': leave_id and self.handling_time(leave_row.end_time) or '',
'required': True, 'type': 'input', 'compute_value': False},
{'str': '时长', 'type_detail': 'number', 'pattern': '[0-9]*\.',
'value': leave_id and leave_row.hour_qty or '',
'compute_value': False,
'field_name': 'hour_qty', 'required': True, 'type': 'input', 'compute_value': False},
{'str': '详情', 'type_detail': 'textarea', 'field_name': 'note',
'value': leave_id and leave_row.note or '',
'required': True, 'type': 'textarea', 'compute_value': False},
{'str': 'ID', 'type_detail': 'textarea', 'field_name': 'id', 'value': leave_id,
'required': False, 'type': 'textarea', 'compute_value': False, 'invisible': True},
{'str': '修改时间', 'type_detail': 'textarea', 'field_name': 'write_date',
'value': leave_id and leave_row.write_date or False,
'required': False, 'type': 'textarea', 'compute_value': False, 'invisible': True},
]
```
```xml
% extends 'hr/weui_base.html' %>
<% block title %>主页<% endblock %>
<% block body %>
<script>
var router_type = '${type|safe}';
</script>
<div id="leave_work">
<div class="weui_tab tab-bottom">
<div class="weui_tab_bd">
<div class="weui_tab_bd_item" style="display: block;">
<div class="container">
<router-view class="view"></router-view>
</div>
</div>
</div>
<div class="weui_tabbar">
<template v-for="operation in all_operation">
<router-link :to="operation.link" class="weui_tabbar_item weui_bar_item_on"
v-show="show_num!='0'&&operation.link.params.approve_type=='unapprove'||
operation.link.params.approve_type=='all' ||!operation.link.params.approve_type || operation.link.params.approve_type=='approve'|| operation.link.params.approve_type=='other_approve'" >
<div class="weui_tabbar_icon">
<img :src="operation.img">
</div>
<div class="weui_tabbar_label">{{ operation.str }}
<span class="weui-badge" v-show="show_num!=0&&operation.link.params.approve_type=='unapprove'">
{{ show_num }}</span>
</div>
</router-link>
</template>
</div>
</div>
</div>
<toast-success v-bind:success_msg='success_msg'></toast-success>
<script type="text/x-template" id="container">
<transition name="slide">
<div class="container">
<!--BEGIN toast-->
<div id="toast" style="opacity: 100; display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">{{ success_msg }}</p>
</div>
</div>
<!--end toast-->
<div style="opacity: 100; display: none;" id="loading_toast">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-loading weui-icon_toast"></i>
<p class="weui-toast__content">{{ locading_msg }}</p>
</div>
</div>
<!--<loading_toast :loading='loading'></loading_toast>-->
<div class="page toast preview js_show">
<scroller
:on-refresh="refresh"
refresh-layer-color="#4b8bf4"
loading-layer-color="#ec4949"
:on-infinite="infinite">
<svg class="spinner" style="stroke: #4b8bf4;" slot="refresh-spinner" viewBox="0 0 64 64">
<g stroke-width="7" stroke-linecap="round">
<line x1="10" x2="10" y1="27.3836" y2="36.4931">
<animate attributeName="y1" dur="750ms" values="16;18;28;18;16;16"
repeatCount="indefinite">
</animate>
<animate attributeName="y2" dur="750ms" values="48;46;36;44;48;48"
repeatCount="indefinite">
</animate>
<animate attributeName="stroke-opacity" dur="750ms" values="1;.4;.5;.8;1;1"
repeatCount="indefinite">
</animate>
</line>
<line x1="24" x2="24" y1="18.6164" y2="45.3836">
<animate attributeName="y1" dur="750ms" values="16;16;18;28;18;16"
repeatCount="indefinite">
</animate>
<animate attributeName="y2" dur="750ms" values="48;48;46;36;44;48"
repeatCount="indefinite">
</animate>
<animate attributeName="stroke-opacity" dur="750ms" values="1;1;.4;.5;.8;1"
repeatCount="indefinite">
</animate>
</line>
<line x1="38" x2="38" y1="16.1233" y2="47.8767">
<animate attributeName="y1" dur="750ms" values="18;16;16;18;28;18"
repeatCount="indefinite">
</animate>
<animate attributeName="y2" dur="750ms" values="44;48;48;46;36;44"
repeatCount="indefinite">
</animate>
<animate attributeName="stroke-opacity" dur="750ms" values=".8;1;1;.4;.5;.8"
repeatCount="indefinite">
</animate>
</line>
<line x1="52" x2="52" y1="16" y2="48">
<animate attributeName="y1" dur="750ms" values="28;18;16;16;18;28"
repeatCount="indefinite">
</animate>
<animate attributeName="y2" dur="750ms" values="36;44;48;48;46;36"
repeatCount="indefinite">
</animate>
<animate attributeName="stroke-opacity" dur="750ms" values=".5;.8;1;1;.4;.5"
repeatCount="indefinite">
</animate>
</line>
</g>
</svg>
<div class="weui_cells" v-for="(record, index) in all_records">
<div class="weui_cell_bd">
<div class="weui-form-preview-bd" v-longtouch="longtouch_tree(index, record)">
<div class="weui-form-preview__item" v-for="field in record">
<label class="weui-form-preview-label"
v-if="!field.invisible">{{ field.label }}</label>
<span class="weui-form-preview-value"
v-if="!field.invisible&&!field.approve_flag">{{ field.value }}</span>
<div class="weui-form-preview-value icon_sp_area" v-if="field.approve_flag">
<i class="weui-icon-circle" v-if="field.value===0"></i>
<i class="weui-icon-success" v-else-if="field.value===1"></i>
<i class="weui-icon-cancel" v-else-if="field.value===-1"></i>
</div>
</div>
</div>
<div class="weui-form-preview__ft">
<button class="weui-form-preview__btn weui-form-preview__btn_default "
v-if="all_invisible"
v-on:click.prevent="refuse_work_or_leave(record[0].value, index)"
v-bind:value="record[0].value">拒绝
</button>
<button class="weui-form-preview__btn weui-form-preview__btn_primary"
v-if="all_invisible"
v-on:click.prevent="approver_work_or_leave(record[0].value, index)">通过
</button>
<button class="weui-form-preview__btn weui-form-preview__btn_primary"
v-if="record[1].value !== 1 && $route.params.approve_type=='all'"
v-on:click.prevent="change_approver_work_or_leave(record)">修改
</button>
</div>
</div>
</div>
<svg class="spinner" style="fill: #ec4949;" slot="infinite-spinner" viewBox="0 0 64 64">
<g>
<circle cx="16" cy="32" stroke-width="0" r="3">
<animate attributeName="fill-opacity" dur="750ms" values=".5;.6;.8;1;.8;.6;.5;.5"
repeatCount="indefinite">
</animate>
<animate attributeName="r" dur="750ms" values="3;3;4;5;6;5;4;3"
repeatCount="indefinite"></animate>
</circle>
<circle cx="32" cy="32" stroke-width="0" r="3.09351">
<animate attributeName="fill-opacity" dur="750ms" values=".5;.5;.6;.8;1;.8;.6;.5"
repeatCount="indefinite"></animate>
<animate attributeName="r" dur="750ms" values="4;3;3;4;5;6;5;4"
repeatCount="indefinite">
</animate>
</circle>
<circle cx="48" cy="32" stroke-width="0" r="4.09351">
<animate attributeName="fill-opacity" dur="750ms" values=".6;.5;.5;.6;.8;1;.8;.6"
repeatCount="indefinite">
</animate>
<animate attributeName="r" dur="750ms" values="5;4;3;3;4;5;6;5"
repeatCount="indefinite">
</animate>
</circle>
</g>
</svg>
</scroller>
</div>
</div>
</transition>
</script>
<script type="text/x-template" id="vue_grid">
<div class="weui_grids">
<div v-for="grid in all_grid">
<router-link class="weui_grid js_grid" :to="grid.link">
<div class="weui_grid_icon">
<img :src="grid.img_src" alt=""/>
</div>
<p class="weui_grid_label">{{ grid.show_str }}</p>
</router-link>
</div>
</div>
</script>
<script type="text/x-template" id="test_scroller">
<div class="weui_grids">
404
</div>
</script>
<script type="text/x-template" id="vue_cells">
<div class="weui_cells weui_cells_access">
<div v-for="operation in all_operation">
<router-link class="weui_cell" :to="operation.link"
<div class="weui_cell_bd weui_cell_primary">
<span style="vertical-align:middle">{{ operation.str }}</span>
<span v-show="show_num!=0&&operation.link.params.approve_type=='unapprove'"
class="weui-badge" style="margin-left: 5px;">{{ show_num }}</span>
</div>
<div class="weui_cell_ft">
</div>
</router-link>
</div>
</div>
</script>
<script type="text/x-template" id="vue_input_component">
<div v-bind:class="{'weui_cell_warn':required &&!value, 'weui_cell':true}">
<div class="weui_cell_hd"><label class="weui_label" v-bind:for="index">{{ input_str }}</label></div>
<div class="weui_cell_hd weui_cell_primary">
<input class="weui_input" v-if="input_type_detail=='text'" type="text" v-bind:id="index"
v-model="input_value" style="height: 40px"
:pattern="input_pattern"
:placeholder="input_str" :disabled="input_disabled"/>
<input class="weui_input" v-else-if="input_type_detail=='number'" type="number"
v-model="input_value" v-bind:id="index" style="height: 40px"
:pattern="input_pattern"
:placeholder="input_str" :disabled="input_disabled"/>
<input class="weui_input" v-else-if="input_type_detail=='datetime-local'"
type="datetime-local" style="height: 40px"
v-model="input_value" v-bind:id="index"
:pattern="input_pattern"
:placeholder="input_str" :disabled="input_disabled"/>
</div>
<div class="weui-cell__ft"><i
v-bind:class="{'weui-icon-warn': input_required &&input_required_error&&!input_value}"></i>
</div>
</div>
</script>
<script type="text/x-template" id="vue_form_detail">
<transition name="slide">
<div>
<div v-show="page_msg">
<div class="weui-msg">
<div class="weui-msg__icon-area">
<i class="weui-icon-success weui-icon_msg" v-if="html_type=='success'">
<i class="weui-icon-warn weui-icon_msg" v-if="html_type!='success'"></i>
</i></div>
<div class="weui-msg__text-area">
<h2 class="weui-msg__title">申请成功</h2>
<p class="weui-msg__desc">成功添加<a href="javascript:void(0);"></a></p>
</div>
<div class="weui-msg__opr-area">
<p class="weui-btn-area">
<a href="javascript:history.back();" class="weui-btn weui-btn_primary">返回</a>
</p>
</div>
</div>
</div>
<div class="weui_cells weui_cells_form" v-show="html_type=='normal'">
<template v-for="(field, index) in all_fields">
<template v-if="field.type=='input' && !field.invisible">
<vue_input_val
:required.sync="field.required"
:value.sync="field.value"
:pattern.sync="field.pattern"
:str.sync="field.str"
:index.sync="index"
:disabled.sync="field.disabled"
:type_detail.sync="field.type_detail"
:required_error.sync="required_error"
></vue_input_val>
</template>
<div v-else-if="field.type=='textarea' && !field.invisible" style="margin-top:0" class="weui_cells weui_cells_form">
<div v-bind:class="{'weui_cell_warn':field.required &&!field.value, 'weui_cell':true}">
<div class="weui_cell_bd weui_cell_primary">
<textarea class="weui_textarea" :placeholder="field.str" v-model="field.value"
rows="3"></textarea>
<div class="weui_textarea_counter"><span>{{ field.value | length }}</span>/200</div>
<div class="weui_cell__ft"><i
v-bind:class="{'weui-icon-warn': field.required &&required_error&&!field.value}"></i>
</div>
</div>
</div>
</div>
<template v-else-if="field.type=='checkbox' && !field.invisible">
<div class="page-bd">
<div class="weui-cells__title" v-if="field.value_range.length!=0">{{ field.str}}
</div>
<div v-else-if="field.value_range.length==0">没有可用的加班，不能进行调休!</div>
<div class="weui_cells weui_cells_checkbox">
<label class="weui_cell weui_check_label" v-bind:for="value.id"
v-for="(value, index) in field.value_range">
<div class="weui_cell_hd">
<input type="checkbox" class="weui_check" v-bind:id="value.id"
v-bind:value="index" v-model="field.value">
<i class="weui_icon_checked">
</i>
</div>
<div class="weui_cell_bd weui_cell_primary">
<p>{{ value.str }} </p>
</div>
</label>
<div class="weui_cell__ft"><i
v-bind:class="{'weui_icon_warn': field.required &&required_error&&!field.value}"></i>
</div>
</div>
</div>
</template>
<div class="weui-btn-area" v-show="all_fields.length ==index+1">
<button v-on:click.prevent="add_new_record" class="weui-btn weui-btn_primary">确认
</button>
</div>
</template>
</div>
</div>
</transition>
</script>
<script src="/dftg_weixin/static/src/js/hr/ask_for_leave.js?v1.0178"></script>
<% endblock %>
```
