list.html 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  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. .top{margin-top: 64px;top:0;font-size: 14px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);color: #292929;padding: 15px;text-align: center;position: fixed;width: 100%;background-color: white;z-index: 666;}
  10. .menu{position: fixed;width: 100%;top: -148px;max-height: 250px;overflow: scroll; background-color:white;z-index:6;transition-duration: 0.3s;}
  11. .menu.active{top: 115px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);}
  12. .fs{color: #5a5858;font-size: 15px;}
  13. .mui-table-view-cell>a:not(.mui-btn).active{color: #00a0ea;}
  14. .mui-table-view-cell:after{background-color: #dbdbdb;}
  15. .mui-content{margin-top: 73px;padding: 10px;}
  16. .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;}
  17. .title{font-size: 18px;}
  18. .cn{color: #7e7e7e;padding-top: 8px;}
  19. .dc{padding-right: 10px;}
  20. .rmb{color: #FF5722;font-size: 15px;}
  21. .right{float: right;}
  22. .i{color: #00a0ea;}
  23. .save{color:white;padding-top: 12px;background-color: #00a0ea;border: 0px;}
  24. .flex{text-align: center;border-top: 1px solid #e2e2e2;margin-top: 3px;}
  25. .flex .f{padding: 10px 10px 0px 10px;font-size: 12px;}
  26. [v-cloak] {display: none;}
  27. </style>
  28. </head>
  29. <body>
  30. <div id="app" v-cloak>
  31. <header class="mui-bar mui-bar-nav">
  32. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  33. <h1 class="mui-title">职位列表</h1>
  34. <button class="save mui-pull-right" @click="type()">分类管理</button>
  35. </header>
  36. <div class="top" @click="show=!show">{{msg}} <i class="icon">&#xe601;</i></div>
  37. <div class="menu" :class="{active:show}">
  38. <ul class="mui-table-view">
  39. <li class="mui-table-view-cell"v-for="(item,index) in type_list" @click="c=index;msg=item.mName;show=false;positionId=item.id;vm.getData()">
  40. <a class="mui-navigate-right fs" :class="{active:c==index}">{{item.mName}}</a>
  41. </li>
  42. </ul>
  43. </div>
  44. <div class="mui-content">
  45. <div v-if="list.length>0">
  46. <div class="items" v-for="(item,index) in list">
  47. <div class="title omit">{{item.mName}} <span class="right rmb">{{item.gz=='true'?'面议':item.min+'-'+item.max+' 元/月'}}</span></div>
  48. <div class="cn">
  49. <span class="dc"><i class="icon i">&#xe662;</i> {{item.gzjy}}</span>
  50. <span class="dc"><i class="icon i">&#xe65e;</i> {{item.xl}}</span>
  51. <span class="dc"><i class="icon i">&#xe624;</i> 招{{item.nums}}人</span>
  52. <span class="right"><i class="icon">&#xe649;</i> {{item.mTime.substring(0,11)}}</span>
  53. </div>
  54. <div class="cn">
  55. <span class="dc">{{item.gzdw}}</span>
  56. <span class="right">{{item.gzdd}}</span>
  57. </div>
  58. <div class="cn">
  59. <div class="flex">
  60. <!--后台审核-->
  61. <div class="f" style="color: #FF5722;" v-show="item.shenhe==0"><i class="icon">&#xe648;</i> 待审核</div>
  62. <div class="f" style="color: #2ecd34;" v-show="item.shenhe==1"><i class="icon">&#xe60b;</i> 审核通过</div>
  63. <div class="f" style="color: #FF5722;" v-show="item.shenhe==2"><i class="icon">&#xe630;</i> 审核不过</div>
  64. <!--职位状态-->
  65. <div class="f" style="color: #03A9F4;" v-show="item.fb==0"><i class="icon">&#xe60b;</i> 发布</div>
  66. <div class="f" style="color: darkgray;" v-show="item.fb==1 "><i class="icon">&#xe60b;</i> 未发布</div>
  67. <div class="f" @click="obj=item;mui('#op').popover('show');"><i class="icon">&#xe607;</i> 操作</div>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. <div class="no_data" v-else>
  73. <i class="icon icon-48">&#xe65f;</i><br />没有数据
  74. </div>
  75. </div>
  76. <!--操作-->
  77. <div id="op" class="mui-popover mui-popover-action mui-popover-bottom">
  78. <ul class="mui-table-view">
  79. <li class="mui-table-view-cell" @click="preview()"><a>预览</a></li>
  80. <li class="mui-table-view-cell" @click="edit()"><a>编辑</a></li>
  81. <li class="mui-table-view-cell" @click="del()"><a>删除</a></li>
  82. </ul>
  83. <ul class="mui-table-view">
  84. <li class="mui-table-view-cell" style="color: red;"><a href="#op">取消</a></li>
  85. </ul>
  86. </div>
  87. <button class="btn add-c" @click="push()"><i class="icon icon-58">&#xe670;</i></button>
  88. <div class="mask" v-show="show" @click="show=false"></div>
  89. </div>
  90. <script src="../../js/mui.min.js"></script>
  91. <script src="../../js/app.js"></script>
  92. <script src="../../js/vue.min.js"></script>
  93. <script type="text/javascript">
  94. var vm = new Vue({
  95. el: "#app",
  96. data: {
  97. show:false,
  98. c:999,
  99. msg:'职位分类',
  100. positionId:'',
  101. type_list:[], //职位分类
  102. list: [],
  103. obj:{}
  104. },
  105. mounted: function() {
  106. mui.plusReady(function() {
  107. request(urls().position_type_list, {userId:getUser().id},function(res) {
  108. vm.type_list.push({mName:'全部分类',id:''});
  109. res.forEach(function(item){
  110. vm.type_list.push(item);
  111. });
  112. plus.nativeUI.closeWaiting();
  113. })
  114. vm.getData();
  115. })
  116. },
  117. methods: {
  118. //获取数据
  119. getData: function() {
  120. request(urls().position_list, {userId: getUser().id,positionId:vm.positionId},function(res) {
  121. vm.list = res;
  122. plus.nativeUI.closeWaiting();
  123. })
  124. },
  125. //职位分类
  126. type:function(){
  127. open('position_type_list', '/pages/postion_type/list.html', null,'slide-in-bottom');
  128. },
  129. //预览
  130. preview:function(){
  131. mui('#op').popover('toggle');
  132. open('position_detail', 'detail.html', {id:vm.obj.id}, 'slide-in-bottom');
  133. },
  134. //编辑
  135. edit:function(){
  136. mui('#op').popover('toggle');
  137. open('position_push', 'push.html', {type_list:vm.type_list,item:vm.obj},'slide-in-bottom');
  138. },
  139. //删除
  140. del:function(){
  141. mui('#op').popover('toggle');
  142. mui.confirm('是否删除该职位?', '提示', ['否', '是'], function(e) {
  143. if(e.index == 1) {
  144. request(urls().position_delete,{id:vm.obj.id},function(res) {
  145. vm.list.splice(vm.list.indexOf(vm.obj),1);
  146. plus.nativeUI.closeWaiting();
  147. })
  148. }
  149. })
  150. },
  151. //发布职位
  152. push: function() {
  153. open('position_push', 'push.html',{type_list:vm.type_list}, 'slide-in-bottom');
  154. }
  155. }
  156. })
  157. </script>
  158. </body>
  159. </html>