123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264 |
- <template>
- <div style="background-color: #FFFFFF;">
- <cu-custom bgColor="bg-gradual-pink" :isBack="true">
- <block slot="backText">返回</block>
- <block slot="content" >工资发放情况</block>
- </cu-custom>
- <div class="ins">
- <div style="height: 3px;"></div>
- <input placeholder="🔍 搜索" style="text-align: center;" v-model="name" />
- </div>
- <br>
- <!-- <div class='month'>
- <ul style="list-style-type:none;">
-
- <li class='arrow' @click='pickPre(currentYear,currentMonth)'>上个月</li>
- <li class='year-month'>
- <span class='choose-year'>{{ currentYear }}年</span>
- <span class='choose-month'>{{ currentMonth }}月</span>
- </li>
- <li class='arrow' @click='pickNext(currentYear,currentMonth)'>下个月</li>
- </ul>
- <br>
- </div> -->
- <!-- <div>
- <span style="color: #0081FF;margin-left: 20px;font-size: 18px;">工资发放情况</span>
- <div style="width: 100%;height: 10px;"></div>
- </div> -->
- <div style="width: 100%;height: 10px;background-color:#F1F1F1 ;"></div>
-
- <view class="cu-list menu radius" >
- <view class="cu-item "v-for='(item,index) in data'>
- <navigator class="content" @click="details(item.id)" hover-class="none">
- <div style="margin-top: -10px;">
- <span class="imgs">
- <image :src="item.avatar" class="imgs"></image>
- </span>
- </div>
- <div style="margin-top: -40px;">
- <text style="margin-left: 20%;">{{item.realname}}</text>
- </div>
- <div style="margin-top: -25px;">
- <text class="text-grey" style="margin-left: 40%;">{{item.orgCodeTxt}}</text>
- <!-- <text class="text-grey" style="margin-left: 10%;color: #0081FF;">8000.00¥</text> -->
- </div>
-
- </navigator>
- </view>
- </view>
- </div>
- </template>
- <script>
- import api from '@/api/api'
- export default {
- data() {
- return {
- currentMonth: 1,
- currentYear: 1970,
- name:'',
- data:[],
- userUrl:'/sys/user/querywagesList'
- }
- },
- watch:{
- name:{
- handler(newVal, objVal) {
- this.querys(newVal);
- },
- }
- },
- created(){
- this.initData()
- this.querys(this.name)
- },
- methods:{
- initData: function(cur) {
- // var leftcount = 0 // 存放剩余数量
- var date
- if (cur) {
- date = new Date(cur)
- } else {
- var now = new Date()
- var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1))
- d.setDate(35)
- date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
- }
-
- this.currentYear = date.getFullYear()
- this.currentMonth = date.getMonth() + 1
-
- var str = this.formatDate(
- this.currentYear,
- this.currentMonth,
-
- )
-
- },
- pickPre: function(year, month) {
- var d = new Date(this.formatDate(year, month, 1))
- d.setDate(0)
- this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
- this.querys(this.name);
- },
-
- pickNext: function(year, month) {
- var d = new Date(this.formatDate(year, month, 1))
- var ds=this.formatDate(year, month, null);
- var nowDate = new Date();
- var dt=this.formatDate(nowDate.getFullYear(),nowDate.getMonth(),null);
-
- if(ds<=dt){
- d.setDate(35)
-
- this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
- this.querys(this.name);
- }
- },
- // 返回 类似 2016-01-02 格式的字符串
- formatDate: function(year, month, day) {
- var y = year
- var m = month
- if (m < 10) m = '0' + m
- var d = day
- if(day!=null &&day !=""){
- if (d < 10) d = '0' + d
- return y + '-' + m + '-' + d
- }else{
- return y + '-' + m
- }
-
-
- },
- details(item){
- this.$store.commit('SET_WAGESID',item);
- this.$Router.push({name:'wagesdetail2'})
- },
- query(){
- this.data=[];
- this.$http.get(this.userUrl,{params:{username:this.name}}).then(res=>{
- if(res.data.length>0){
- for(var i=0;i<res.data.length;i++){
- var s={
- id:res.data[i].id,
- realname:res.data[i].realname,
- post:res.data[i].post,
- avatar:(res.data[i].avatar && res.data[i].avatar.length > 0)? api.getFileAccessHttpUrl(res.data[i].avatar):'/static/avatar_boy.png',
- orgCodeTxt:res.data[i].orgCodeTxt,
- del:res.data[i].del
- }
- this.data.push(s)
- }
- }
- }).catch(err => {
- console.log(err);
- });
-
- },
- querys(s){
- this.data=[];
- this.$http.get(this.userUrl,{params:{username:s,depid:this.$store.getters.departId}}).then(res=>{
- if(res.data.length>0){
- for(var i=0;i<res.data.length;i++){
- var s={
- id:res.data[i].id,
- realname:res.data[i].realname,
- post:res.data[i].post,
- avatar:(res.data[i].avatar && res.data[i].avatar.length > 0)? api.getFileAccessHttpUrl(res.data[i].avatar):'/static/avatar_boy.png',
- orgCodeTxt:res.data[i].orgCodeTxt,
- del:res.data[i].del
- }
- this.data.push(s)
- }
- }
- }).catch(err => {
- console.log(err);
- });
- },
- ret(){
- this.$Router.push({name:'index'})
- }
-
-
- }
-
- }
-
-
- </script>
- <style>
- .month ul {
- margin: 0;
- padding: 0;
- display: flex;
- justify-content: space-between;
- height: 35px;
- }
-
- .year-month {
- display: flex;
- align-items: center;
- justify-content: space-around;
- margin-top: 10px;
- }
-
- .choose-month {
- text-align: center;
- font-size: 12px;
- }
-
- .arrow {
- padding: 15px;
- color: #999999;
- }
-
- .month ul li {
- font-size: 12px;
- text-transform: uppercase;
- letter-spacing: 3px;
- }
-
- #calendar {
- font-size: 12px;
- width: 100%;
- margin: 0 auto;
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
- 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-
- }
-
- .month {
- width: 100%;
- color: #333333;
- background: #ffffff;
- }
- .ins{
- background-color: #F1F1F1;
- width: 90%;
- height: 30px;
- margin:0 auto;
- border-radius:5px 5px 5px 5px;
- margin-top: 10px;
-
- }
- .s{
- list-style-type:none;
- margin-left: -40px;
- }
-
- .imgs{
- width: 40px;
- height: 40px;
- border-radius:5px 5px 5px 5px;
-
- }
- .top{
- background-color: #5677AC;
- width: 100%;
- height: 40px;
-
- }
-
- </style>
|