selectVisitPerson.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
  1. <template>
  2. <view class="container">
  3. <uni-popup ref="popup" type="bottom" :maskClick="true">
  4. <view class="content">
  5. <text class="contentTitle">新增访查对象</text>
  6. <input class="input" type="text" focus="true" v-model="visiterInfo" placeholder-class="placeholder" placeholder="请填写访查对象信息" />
  7. <view class="bottomBtnGroup">
  8. <view class="cancel" @click="cancelAdd">取消</view>
  9. <view class="comfirm" @click="commitAdd">确定</view>
  10. </view>
  11. </view>
  12. </uni-popup>
  13. <view class="pageTitle">
  14. <text class="pageTitleLeft">访查对象</text>
  15. <text class="pageTitleRight" @click="manageHandle">{{edit?'完成':'管理'}}</text>
  16. </view>
  17. <view class="listWrap">
  18. <view class="list" v-for="(item,index) in investigationUsers" :key="index" @click="selectPersonHandle({...item,index})">
  19. <text class="name">{{item.investigationUserName}}</text>
  20. <view v-if="item.investigationStatus==1||item.investigationStatus==2" :class="[item.investigationStatus==1||item.investigationStatus==2?item.investigationStatus==1?'status done':'status checking':'status']">{{item.investigationStatus==1?'已完成':'进行中'}}</view>
  21. <text v-if="!edit&&current.investigationUserName ==item.investigationUserName " class="checked">当前选中</text>
  22. <text v-if="edit" class="delBtn" @click="delInvestigationUser(item,index)">删除</text>
  23. </view>
  24. </view>
  25. <view class="bottom" @click="addVisiter">
  26. + 新增访查对象
  27. <!-- <image src="" mode=""></image> -->
  28. </view>
  29. </view>
  30. </template>
  31. <script>
  32. import {mapState} from 'vuex';
  33. export default {
  34. data() {
  35. return {
  36. // status:1,
  37. edit:false,//是否编辑状态
  38. visiterInfo:'',
  39. current:null,//当前选中对象
  40. index:null,//当前选中的对象在列表中的下标
  41. };
  42. },
  43. computed:{
  44. ...mapState({
  45. investigationUsers:state=>state.checkMainPoints.investigationUsers,
  46. currentSelectedInvestigationUser:state=>state.checkMainPoints.currentSelectedInvestigationUser,
  47. }),
  48. },
  49. watch:{
  50. currentSelectedInvestigationUser:function (newVal,oldVal){
  51. const index = this.investigationUsers.findIndex(item=>item.investigationUserName == newVal.investigationUserName);
  52. this.current = newVal;
  53. this.index = index;
  54. },
  55. },
  56. onLoad({checkId,situationType,deptId}) {
  57. this.checkId = Number(checkId);
  58. this.situationType = situationType;
  59. this.deptId = deptId;
  60. this.current = this.currentSelectedInvestigationUser;
  61. const index = this.investigationUsers.findIndex(item=>item.investigationUserName == this.current.investigationUserName);
  62. if(index>=0){
  63. this.index = index;
  64. }else {
  65. this.index = 0
  66. }
  67. },
  68. onUnload(){
  69. console.log('页面卸载');
  70. this.$store.commit('checkMainPoints/comChangeState',{key:'currentSelectedInvestigationUser',data:this.current})
  71. },
  72. methods:{
  73. manageHandle(){
  74. if(!this.edit){
  75. this.edit = true;
  76. }else {
  77. this.edit = false;
  78. }
  79. },
  80. addVisiter(){
  81. this.$refs.popup.open();
  82. },
  83. cancelAdd(){
  84. this.$refs.popup.close();
  85. this.visiterInfo ='';
  86. },
  87. //添加受访者
  88. commitAdd(){
  89. this.$store.dispatch({
  90. type: 'selectVisitPerson/commActions',
  91. key: 'addInvestigationUser',
  92. data:{
  93. checkId:this.checkId,
  94. investigationUser:this.visiterInfo,
  95. deptId:Number(this.deptId)
  96. }
  97. }).then(data=>{
  98. if(data){
  99. uni.showModal({
  100. title: '提示',
  101. content: '添加成功,是否立即返回?',
  102. success:(res)=>{
  103. if (res.confirm) {
  104. this.cancelAdd();
  105. uni.navigateBack({
  106. delta: 1
  107. });
  108. this.reloadData(true);
  109. }
  110. if (res.cancel) {
  111. this.cancelAdd();
  112. this.reloadData();
  113. }
  114. }
  115. });
  116. }
  117. })
  118. },
  119. //删除受访者
  120. /**
  121. * @param {Object} item
  122. * @param {Number} index
  123. */
  124. delInvestigationUser(item,index){
  125. const {investigationUserName} = item;
  126. this.$store.dispatch({
  127. type: 'selectVisitPerson/commActions',
  128. key: 'delInvestigationUser',
  129. data:{checkId:this.checkId,investigationUser:investigationUserName}
  130. }).then(data=>{
  131. // console.log(index,this.index);
  132. if(index==this.index){
  133. //当删除的是当前选中的对象
  134. const prevInvestigationUser = this.index>0?this.investigationUsers[this.index-1]:{investigationUserName:'',investigationStatus:''};
  135. this.current = prevInvestigationUser;
  136. }
  137. this.reloadData();
  138. });
  139. },
  140. //操作后重新获取数据
  141. /**
  142. * @param {Boolean} bool 判断是否直接将最新添加设置当前选中
  143. */
  144. reloadData(bool){
  145. this.$store.dispatch({
  146. type: 'checkMainPoints/commActions',
  147. key: 'getInvestigationUsers',
  148. data:{checkId:this.checkId,situationType:this.situationType,deptId:this.deptId}
  149. }).then(data=>{
  150. this.$store.commit('checkMainPoints/comChangeState',{key:'investigationUsers',data:data});
  151. if(bool){
  152. this.$store.commit('checkMainPoints/comChangeState',{key:'currentSelectedInvestigationUser',data:data[data.length-1]})
  153. }
  154. //还未设置默认受访对象时
  155. if(!this.currentSelectedInvestigationUser||!this.currentSelectedInvestigationUser.investigationUserName){
  156. this.$store.commit('checkMainPoints/comChangeState',{key:'currentSelectedInvestigationUser',data:data[0]})
  157. }
  158. });
  159. },
  160. selectPersonHandle(item){
  161. this.current = item;
  162. this.index = item.index;
  163. }
  164. }
  165. }
  166. </script>
  167. <style lang="less">
  168. .container {
  169. .content {
  170. position: relative;
  171. height:45vh;
  172. padding: 0 40rpx;
  173. padding-top: 35rpx;
  174. border-radius: 25rpx 25rpx 0px 0px;
  175. background-color: #FFFFFF;
  176. .contentTitle {
  177. font-size: 30rpx;
  178. font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  179. font-weight: 400;
  180. color: #292C33;
  181. }
  182. .input {
  183. color:#292C33;
  184. height: 87.5rpx;
  185. margin-top: 35rpx;
  186. border-bottom: 0.62rpx solid #DADEE6;
  187. }
  188. .placeholder {
  189. font-size: 22.5rpx;
  190. font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  191. font-weight: 400;
  192. color: #A1A7B3;
  193. }
  194. .bottomBtnGroup {
  195. position: absolute;
  196. bottom: 0;
  197. left: 0;
  198. width: 100%;
  199. display: flex;
  200. flex-direction: row;
  201. .cancel {
  202. flex: 1;
  203. height:75rpx;
  204. text-align: center;
  205. line-height: 75rpx;
  206. font-size: 22.5rpx;
  207. font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  208. font-weight: 400;
  209. color: #3377FF;
  210. border-top:0.62rpx solid #DADEE6;
  211. }
  212. .comfirm {
  213. flex: 1;
  214. height:75rpx;
  215. text-align: center;
  216. line-height: 75rpx;
  217. font-size: 22.5rpx;
  218. font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  219. font-weight: 400;
  220. color: #FFFFFF;
  221. background-color:#3377FF;
  222. }
  223. }
  224. }
  225. .pageTitle {
  226. display: flex;
  227. width: 100%;
  228. flex-direction: row;
  229. justify-content:space-between;
  230. box-sizing: border-box;
  231. padding: 0 25rpx;
  232. padding-top:25rpx;
  233. padding-bottom:15rpx;
  234. .pageTitleLeft {
  235. font-size: 22.5rpx;
  236. font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  237. font-weight: 400;
  238. color: #666F80;
  239. }
  240. .pageTitleRight {
  241. font-size: 20rpx;
  242. font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  243. font-weight: 400;
  244. color: #3377FF;
  245. }
  246. }
  247. .listWrap {
  248. padding-left: 25rpx;
  249. margin-bottom: 15rpx;
  250. background-color: #FFFFFF;
  251. .list {
  252. position: relative;
  253. display: flex;
  254. height: 87.5rpx;
  255. flex-direction: row;
  256. justify-content: flex-start;
  257. align-items: center;
  258. border-bottom: 1px solid #DADEE6;
  259. .checked {
  260. position: absolute;
  261. top:32.5rpx;
  262. right: 25rpx;
  263. font-size: 22.5rpx;
  264. font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  265. font-weight: 400;
  266. color: #7A8599;
  267. }
  268. .delBtn {
  269. position: absolute;
  270. top:32.5rpx;
  271. right: 25rpx;
  272. font-size: 22.5rpx;
  273. font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  274. font-weight: 400;
  275. color: #FF3355;
  276. }
  277. .name {
  278. font-size: 22.5rpx;
  279. font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  280. font-weight: 400;
  281. color: #292C33;
  282. }
  283. .status {
  284. width: 75rpx;
  285. height: 31.25rpx;
  286. border-radius: 5rpx;
  287. font-size: 17.5rpx;
  288. font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  289. font-weight: 500;
  290. text-align: center;
  291. line-height: 31.25rpx;
  292. margin-left: 15rpx;
  293. &.done {
  294. color: #29CC96;
  295. background-color: rgba(41, 204, 150,0.1);
  296. }
  297. &.checking {
  298. color: #FFAA00;
  299. background:rgba(255, 204, 102,0.1);
  300. }
  301. }
  302. &:last-child {
  303. border: none;
  304. }
  305. }
  306. }
  307. .bottom {
  308. display: flex;
  309. justify-content: center;
  310. align-items: center;
  311. height: 75rpx;
  312. font-size: 22.5rpx;
  313. font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  314. font-weight: 400;
  315. color: #3377FF;
  316. background: #FFFFFF;
  317. }
  318. }
  319. </style>