bottom-popup.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. <template>
  2. <view class="popup-page" v-show="showModalStatus">
  3. <view class="popup-box" v-show="showModalStatus">
  4. <view class="item-box" v-for="(item,index) in planList">
  5. <view class="radio-item" @click="toggleSelect(item,index)">
  6. <image class="icon" :src="`/static/${item.isChecked ? 'check-radio' : 'check-no'}.png`"></image>
  7. </view>
  8. <text :class="item.nameClass">{{item.name}}({{item.startDate}} ~ {{item.endDate}})</text>
  9. <view class="compeleted-box" v-if="item.isCompeleted">
  10. <text class="compeleted-text" >已完成</text>
  11. </view>
  12. <view class="continued-box" v-if="item.isContinued">
  13. <text class="continued-text" >进行中</text>
  14. </view>
  15. <image class="checked-pic" v-if="item.isContinued" src="../../../static/checkStatus.png"></image>
  16. </view>
  17. </view>
  18. <view class="btn-confirm" @click="saveChange">
  19. <text class="btn-text">确定</text>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. props:{
  26. situationID:String,
  27. },
  28. data() {
  29. return {
  30. currentType:this.type,//当前类型
  31. selectedPlanID:'',//选择的计划id
  32. showModalStatus:false,//查核计划选择弹框
  33. flag:-3,//是否为进行中计划,判断下一个未开始的查核计划
  34. planList:[],//查核计划列表
  35. arrUnstarted:[],//未开始计划数组
  36. // isCompeleted:false,//计划进行状态,是否已完成,状态的显示
  37. // isContinued:true,//是否进行中
  38. // planList:[
  39. // {
  40. // id:'1',
  41. // name:'第1次查核',
  42. // startDate:'2021-02-05',
  43. // endDate:'2021-02-10',
  44. // status:3,
  45. // },
  46. // {
  47. // id:'2',
  48. // name:'第2次查核',
  49. // startDate:'2021-02-05',
  50. // endDate:'2021-02-10',
  51. // status:2
  52. // },
  53. // {
  54. // id:'3',
  55. // name:'第3次查核',
  56. // startDate:'2021-02-05',
  57. // endDate:'2021-02-10',
  58. // status:1
  59. // },
  60. // {
  61. // id:'4',
  62. // name:'第4次查核',
  63. // startDate:'2021-02-05',
  64. // endDate:'2021-02-10',
  65. // status:1
  66. // },
  67. // ],//查核计划列表
  68. }
  69. },
  70. created: function() {
  71. this.$store.dispatch({
  72. type: 'situationDetail/commActions',
  73. payload: {
  74. key: 'planlList',
  75. data:{
  76. situationId:this.situationID
  77. }
  78. }
  79. }).then((data) => {
  80. if (data) {
  81. this.planList=data.map((item,index)=>{
  82. if(item.status==1){
  83. this.arrUnstarted.push(item);
  84. this.flag=this.arrUnstarted[0].id;
  85. }
  86. return {
  87. id:item.id,
  88. name:item.name,
  89. startDate:item.startDate,
  90. endDate:item.endDate,
  91. status:item.status,
  92. isCompeleted:item.status==3?true:false,
  93. isContinued:item.status==2?true:false,
  94. isChecked:false,
  95. nameClass:item.id==this.flag?'item-text':'disable-text',
  96. }
  97. });
  98. }
  99. });
  100. // this.planList=this.planList.map((item,index)=>{
  101. // if(item.status==2){
  102. // this.flag=index;
  103. // }
  104. // return {
  105. // id:item.id,
  106. // name:item.name,
  107. // startDate:item.startDate,
  108. // endDate:item.endDate,
  109. // status:item.status,
  110. // isCompeleted:item.status==3?true:false,
  111. // isContinued:item.status==2?true:false,
  112. // isChecked:false,
  113. // nameClass:index==this.flag+1?'item-text':'disable-text',
  114. // }
  115. // });
  116. },
  117. methods: {
  118. show(){
  119. this.showModalStatus=true;
  120. },
  121. hide(){
  122. this.showModalStatus=false;
  123. },
  124. hidePopupBox(){
  125. this.hide();
  126. },
  127. toggleSelect(item,index) {
  128. this.planList.map((item,index)=>{
  129. item.isChecked=false;
  130. });
  131. if(item.id==this.flag){
  132. this.planList[index].isChecked=true;
  133. this.selectedPlanID=item.id;
  134. }
  135. else{
  136. return;
  137. }
  138. },
  139. saveChange(){
  140. this.$store.dispatch({
  141. type: 'situationDetail/commActions',
  142. payload: {
  143. key: 'planlAdvance',
  144. data:{
  145. checkId:this.selectedPlanID
  146. }
  147. }
  148. }).then((data)=>{
  149. console.log(data);
  150. this.hide();
  151. });
  152. },
  153. },
  154. }
  155. </script>
  156. <style lang="less">
  157. .popup-page{
  158. height: 100%;
  159. width: 100%;
  160. position: fixed;
  161. top: 0rpx;
  162. left: 0rpx;
  163. // background: rgba(0,0,0,0.5);
  164. background-color: #FFFFFF;
  165. .popup-box{
  166. width: 100%;
  167. position: fixed;
  168. top: 0rpx;
  169. left: 0rpx;
  170. z-index: 2000;
  171. background-color: #FFFFFF;
  172. display: flex;
  173. flex-direction: column;
  174. overflow: hidden;
  175. .item-box{
  176. width: 100%;
  177. height: 87.5rpx;
  178. border: 0.62rpx solid #DADEE6;
  179. .radio-item {
  180. float: left;
  181. margin-left: 25rpx;
  182. margin-top: 30rpx;
  183. .icon {
  184. width: 25rpx;
  185. height: 25rpx;
  186. }
  187. }
  188. .item-text{
  189. font-size: 22.5rpx;
  190. font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  191. font-weight: 400;
  192. color: #292C33;
  193. line-height: 87.5rpx;
  194. margin-left: 25rpx;
  195. float: left;
  196. }
  197. .disable-text{
  198. font-size: 22.5rpx;
  199. font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  200. font-weight: 400;
  201. color: #666E80;
  202. line-height: 87.5rpx;
  203. margin-left: 25rpx;
  204. float: left;
  205. }
  206. .compeleted-box{
  207. width: 75rpx;
  208. height: 31.25rpx;
  209. border-radius: 8px;
  210. background: rgba(41, 204, 150, 0.1);
  211. text-align: center;
  212. float: left;
  213. margin-top: 28.12rpx;
  214. .compeleted-text{
  215. font-size: 17.5rpx;
  216. font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  217. font-weight: 500;
  218. color: #29CC96;
  219. line-height: 31.25rpx;
  220. }
  221. }
  222. .continued-box{
  223. width: 75rpx;
  224. height: 31.25rpx;
  225. border-radius: 8px;
  226. background: rgba(255, 204, 102, 0.1);
  227. text-align: center;
  228. float: left;
  229. margin-top: 28.12rpx;
  230. .continued-text{
  231. width: 75rpx;
  232. height: 31.25rpx;
  233. font-size: 17.5rpx;
  234. font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  235. font-weight: 500;
  236. color: #FFAA00;
  237. line-height: 31.25rpx;
  238. }
  239. }
  240. .checked-pic{
  241. width: 19.37rpx;
  242. height: 14.37rpx;
  243. float: right;
  244. margin-top: 36.87rpx;
  245. margin-right: 25rpx;
  246. }
  247. }
  248. }
  249. .btn-confirm {
  250. width: 750rpx;
  251. height: 75rpx;
  252. background: #3377FF;
  253. position: fixed;
  254. bottom: 0rpx;
  255. .btn-text {
  256. font-size: 22.5rpx;
  257. font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  258. font-weight: 400;
  259. color: #FFFFFF;
  260. line-height: 75rpx;
  261. margin-left: 352.5rpx;
  262. }
  263. }
  264. }
  265. </style>