spotCheckList.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <template>
  2. <view class="pageInfo">
  3. <!-- 自定义导航栏 -->
  4. <u-navbar title-color="#fff" back-icon-size="30" back-icon-color="#fff" :border-bottom="false" :background="background">
  5. <view class="slot-wrap">
  6. <view class="left-icon">
  7. 点检任务配置
  8. </view>
  9. <!-- 新增 -->
  10. <view class="right-icon" @click="openAddPage">
  11. <u-icon name="plus-circle" size="30" color="#fff" label="新增" label-color="#fff"></u-icon>
  12. <uni-font-icons type="icon-sousuo" size="16" color="#fff"></uni-font-icons>
  13. </view>
  14. </view>
  15. </u-navbar>
  16. <!-- 任务列表 -->
  17. <scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom">
  18. <view v-for="item in listData" :key="item.id" class="itemInfo">
  19. <view class="itemName">
  20. <span class="name">{{listData.name}}</span>
  21. <u-switch size="40" v-model="listData.status"></u-switch>
  22. </view>
  23. <view class="itemName">
  24. <span>{{listData.startDate}}- {{listData.endDate}}</span>
  25. <span>
  26. <u-button v-if="listData.status==1" type="warning" size="mini" style="margin-right: 15upx;" @click="handetail">查看</u-button>
  27. <u-button type="primary" size="mini" style="margin-right: 15upx;" @click="handedit">编辑</u-button>
  28. <u-button type="error" size="mini" @click="handelete(item)">删除</u-button>
  29. </span>
  30. </view>
  31. </view>
  32. </scroll-view>
  33. </view>
  34. </template>
  35. <script>
  36. import {getCheckTaskConfigList,delCheckTaskConfig,enableCheckTaskConfig,saveBackLog} from '../../api/checkTaskConfig.js'
  37. export default{
  38. data(){
  39. return{
  40. background: {
  41. // 渐变色
  42. backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(21, 102, 223))'
  43. },
  44. status: 'loadmore',
  45. noDataText: '暂无数据',
  46. listData:[
  47. // {name:'夏季活动',time:'2020-05-20',checked:true,controlStatus: false},
  48. // {name:'夏季活动',time:'2020-05-20',checked:false},
  49. // {name:'夏季活动',time:'2020-05-20',checked:true},
  50. // {name:'夏季活动',time:'2020-05-20',checked:false},
  51. ]
  52. }
  53. },
  54. watch: {
  55. checked(val) {
  56. // 等于false,意味着用户手动关闭了switch
  57. if (val == false) {
  58. if(this.listData.status == 0) {
  59. this.listData.status = 1;
  60. return ;
  61. }
  62. // 重新打开switch,并让它处于加载中的状态
  63. this.checked = true;
  64. this.loading = true;
  65. // 模拟向后端发起请求
  66. this.getRestultFromServer();
  67. }
  68. }
  69. },
  70. onLoad() {
  71. this.getListData()
  72. },
  73. methods:{
  74. // 列表数据
  75. getListData(){
  76. getCheckTaskConfigList({pageNo:1,pageSize:10}).then(res=>{
  77. console.log(res)
  78. if(res.status==200){
  79. this.listData=res.data[0].list[0]
  80. this.listData.startDate=this.listData.startDate.substring(0,11)
  81. this.listData.endDate=this.listData.endDate.substring(0,11)
  82. console.log(this.listData.startDate)
  83. }
  84. })
  85. },
  86. openAddPage(){
  87. console.log('-------------------')
  88. uni.navigateTo({
  89. url:'/pages/spotCheckConfigure/addSpotCheck'
  90. })
  91. },
  92. // 查看详情
  93. handetail(){
  94. uni.navigateTo({
  95. url:'/pages/spotCheckConfigure/spotCheckDetail/spotCheckDetail?id=${listData.id}'
  96. })
  97. },
  98. // 编辑
  99. handedit(){
  100. uni.navigateTo({
  101. url:'/pages/spotCheckConfigure/addSpotCheck'
  102. })
  103. },
  104. // 删除
  105. handelete(item){
  106. const _this=this
  107. clzConfirm({
  108. title: '提示',
  109. content: '确认删除,删除后数据将无法恢复?',
  110. // success: function(res) {
  111. // if (res.confirm || res.index == 0) {
  112. // _this.isClose = true
  113. // uni.navigateBack({
  114. // delta: 1
  115. // });
  116. // }
  117. // }
  118. });
  119. }
  120. }
  121. }
  122. </script>
  123. <style lang="scss">
  124. page{
  125. height: 100%;
  126. background-color: #eee;
  127. }
  128. .slot-wrap {
  129. display: flex;
  130. align-items: center;
  131. /* 如果您想让slot内容占满整个导航栏的宽度 */
  132. flex: 1;
  133. /* 如果您想让slot内容与导航栏左右有空隙 */
  134. padding: 0 30rpx 0 0;
  135. color: #fff;
  136. font-size: 28upx;
  137. .left-icon{
  138. flex-grow: 1;
  139. font-size: 32upx;
  140. }
  141. .right-icon{
  142. padding-left:50upx;
  143. }
  144. .uni-icons{
  145. margin-right: 10upx;
  146. }
  147. }
  148. .itemInfo{
  149. margin: 20upx;
  150. background-color: #fff;
  151. border-radius: 3px;
  152. .itemName{
  153. padding: 25upx 35upx;
  154. display: flex;
  155. justify-content: space-between;
  156. }
  157. .itemName:first-child{
  158. border-bottom: 1px solid #f8f8f8;
  159. }
  160. }
  161. </style>