list.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>职位列表</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link href="../../css/mui.min.css" rel="stylesheet" />
  8. <style>
  9. .mui-content{margin-top: 23px;padding: 10px;}
  10. .items{padding: 15px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);font-size: 12px;margin-top:10px;background-color: white;border-radius: 3px;}
  11. .title{font-size: 18px;}
  12. .cn{color: #7e7e7e;padding-top: 8px;}
  13. .dc{padding-right: 10px;}
  14. .rmb{color: #FF5722;font-size: 15px;}
  15. .right{float: right;}
  16. .i{color: #00a0ea;}
  17. .save{color:white;padding-top: 12px;}
  18. .flex{text-align: center;border-top: 1px solid #e2e2e2;margin-top: 3px;}
  19. .flex .f{padding: 10px 10px 0px 10px;font-size: 12px;}
  20. [v-cloak] {display: none;}
  21. </style>
  22. </head>
  23. <body>
  24. <div id="app" v-cloak>
  25. <header class="mui-bar mui-bar-nav">
  26. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  27. <h1 class="mui-title">职位列表</h1>
  28. <span class="save mui-pull-right" @click="push()">发布</span>
  29. </header>
  30. <div class="mui-content">
  31. <div v-if="list.length>0">
  32. <div class="items" v-for="(item,index) in list">
  33. <div class="title omit">{{item.mName}} <span class="right rmb">{{item.gz=='true'?'面议':item.min+'-'+item.max}}</span></div>
  34. <div class="cn">
  35. <span class="dc"><i class="icon i">&#xe662;</i> {{item.gzjy}}</span>
  36. <span class="dc"><i class="icon i">&#xe65e;</i> {{item.xl}}</span>
  37. <span class="dc"><i class="icon i">&#xe624;</i> 招{{item.nums}}人</span>
  38. <span class="right"><i class="icon">&#xe649;</i> {{item.mTime.substring(0,11)}}</span>
  39. </div>
  40. <div class="cn">
  41. <span class="dc">{{item.gzdw}}</span>
  42. <span class="right">{{item.gzdd}}</span>
  43. </div>
  44. <div class="cn">
  45. <div class="flex">
  46. <!--后台审核-->
  47. <div class="f" style="color: #FF5722;" v-show="item.shenhe==0"><i class="icon">&#xe648;</i> 待审核</div>
  48. <div class="f" style="color: #2ecd34;" v-show="item.shenhe==1"><i class="icon">&#xe60b;</i> 审核通过</div>
  49. <div class="f" style="color: #FF5722;" v-show="item.shenhe==2"><i class="icon">&#xe630;</i> 审核不过</div>
  50. <!--职位状态-->
  51. <div class="f" style="color: #03A9F4;" v-show="item.fb==0"><i class="icon">&#xe60b;</i> 发布</div>
  52. <div class="f" style="color: darkgray;" v-show="item.fb==1 "><i class="icon">&#xe60b;</i> 未发布</div>
  53. <div class="f" @click="obj=item;mui('#op').popover('show');"><i class="icon">&#xe607;</i> 操作</div>
  54. </div>
  55. </div>
  56. </div>
  57. </div>
  58. <div class="no_data" v-else>
  59. <i class="icon icon-48">&#xe65f;</i><br />没有数据
  60. </div>
  61. </div>
  62. <!--操作-->
  63. <div id="op" class="mui-popover mui-popover-action mui-popover-bottom">
  64. <ul class="mui-table-view">
  65. <li class="mui-table-view-cell" @click="preview()"><a>预览</a></li>
  66. <li class="mui-table-view-cell" @click="edit()"><a>编辑</a></li>
  67. <li class="mui-table-view-cell" @click="del()"><a>删除</a></li>
  68. </ul>
  69. <ul class="mui-table-view">
  70. <li class="mui-table-view-cell" style="color: red;"><a href="#op">取消</a></li>
  71. </ul>
  72. </div>
  73. </div>
  74. <script src="../../js/mui.min.js"></script>
  75. <script src="../../js/app.js"></script>
  76. <script src="../../js/vue.min.js"></script>
  77. <script type="text/javascript">
  78. var vm = new Vue({
  79. el: "#app",
  80. data: {
  81. list: [],
  82. obj:{}
  83. },
  84. mounted: function() {
  85. mui.plusReady(function() {
  86. vm.getData();
  87. })
  88. },
  89. methods: {
  90. //获取数据
  91. getData: function() {
  92. request(urls().position_list, {userId: getUser().id},function(res) {
  93. vm.list = res;
  94. plus.nativeUI.closeWaiting();
  95. })
  96. },
  97. //预览
  98. preview:function(){
  99. mui('#op').popover('toggle');
  100. open('position_detail', 'detail.html', {id:vm.obj.id}, 'slide-in-bottom');
  101. },
  102. //编辑
  103. edit:function(){
  104. mui('#op').popover('toggle');
  105. open('position_push', 'push.html', vm.obj,'slide-in-bottom');
  106. },
  107. //删除
  108. del:function(){
  109. mui('#op').popover('toggle');
  110. mui.confirm('是否删除该职位?', '提示', ['否', '是'], function(e) {
  111. if(e.index == 1) {
  112. request(urls().position_delete,{id:vm.obj.id},function(res) {
  113. vm.list.splice(vm.list.indexOf(vm.obj),1);
  114. plus.nativeUI.closeWaiting();
  115. })
  116. }
  117. })
  118. },
  119. //发布职位
  120. push: function() {
  121. open('position_push', 'push.html', null, 'slide-in-bottom');
  122. }
  123. }
  124. })
  125. </script>
  126. </body>
  127. </html>