spotCheckList.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  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">{{item.name}}</span>
  21. <u-switch size="40" :value="item.status==1"></u-switch>
  22. </view>
  23. <view class="itemName">
  24. <span>{{item.startDate}} 至 {{item.endDate}}</span>
  25. <span>
  26. <u-button v-if="item.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. }
  48. },
  49. watch: {
  50. checked(val) {
  51. // 等于false,意味着用户手动关闭了switch
  52. if (val == false) {
  53. if(this.listData.status == 0) {
  54. this.listData.status = 1;
  55. return ;
  56. }
  57. // 重新打开switch,并让它处于加载中的状态
  58. this.checked = true;
  59. this.loading = true;
  60. // 模拟向后端发起请求
  61. this.getRestultFromServer();
  62. }
  63. }
  64. },
  65. onLoad() {
  66. this.getListData()
  67. },
  68. methods:{
  69. // 列表数据
  70. getListData(){
  71. getCheckTaskConfigList({pageNo:1,pageSize:10}).then(res=>{
  72. if(res.status==200){
  73. this.listData=res.data.list
  74. }
  75. })
  76. },
  77. openAddPage(){
  78. console.log('-------------------')
  79. uni.navigateTo({
  80. url:'/pages/spotCheckConfigure/addSpotCheck'
  81. })
  82. },
  83. // 查看详情
  84. handetail(){
  85. uni.navigateTo({
  86. url:'/pages/spotCheckConfigure/spotCheckDetail/spotCheckDetail?id=${listData.id}'
  87. })
  88. },
  89. // 编辑
  90. handedit(){
  91. uni.navigateTo({
  92. url:'/pages/spotCheckConfigure/addSpotCheck'
  93. })
  94. },
  95. // 删除
  96. handelete(item){
  97. const _this=this
  98. clzConfirm({
  99. title: '提示',
  100. content: '确认删除,删除后数据将无法恢复?',
  101. // success: function(res) {
  102. // if (res.confirm || res.index == 0) {
  103. // _this.isClose = true
  104. // uni.navigateBack({
  105. // delta: 1
  106. // });
  107. // }
  108. // }
  109. });
  110. },
  111. onreachBottom(){
  112. }
  113. }
  114. }
  115. </script>
  116. <style lang="scss">
  117. page{
  118. height: 100%;
  119. background-color: #eee;
  120. }
  121. .slot-wrap {
  122. display: flex;
  123. align-items: center;
  124. /* 如果您想让slot内容占满整个导航栏的宽度 */
  125. flex: 1;
  126. /* 如果您想让slot内容与导航栏左右有空隙 */
  127. padding: 0 30rpx 0 0;
  128. color: #fff;
  129. font-size: 28upx;
  130. .left-icon{
  131. flex-grow: 1;
  132. font-size: 32upx;
  133. }
  134. .right-icon{
  135. padding-left:50upx;
  136. }
  137. .uni-icons{
  138. margin-right: 10upx;
  139. }
  140. }
  141. .itemInfo{
  142. margin: 20upx;
  143. background-color: #fff;
  144. border-radius: 3px;
  145. .itemName{
  146. padding: 25upx 35upx;
  147. display: flex;
  148. justify-content: space-between;
  149. }
  150. .itemName:first-child{
  151. border-bottom: 1px solid #f8f8f8;
  152. }
  153. }
  154. </style>