detail.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. <template>
  2. <view class="detail-page" v-if="info">
  3. <view class="section">
  4. <image :src="statusImg" mode="aspectFill" class="status-img"></image>
  5. <!-- <view class="info-item" v-for="item in infoOpts" :key="item.key">
  6. <view class="label">{{item.name}}</view>
  7. <view class="content">
  8. <text v-if="item.key=='place'">{{info.Province}}{{info.City}}</text>
  9. <text>{{info[item.key]}}</text>
  10. </view>
  11. </view> -->
  12. <view class="info-item">
  13. <view class="label">申请人</view>
  14. <view class="content">
  15. <text>{{info.ApplyRealName}}</text>
  16. </view>
  17. </view>
  18. <view class="info-item">
  19. <view class="label">到达日期</view>
  20. <view class="content">
  21. <text>{{info.ArriveDate}}</text>
  22. </view>
  23. </view>
  24. <view class="info-item">
  25. <view class="label">返程日期</view>
  26. <view class="content">
  27. <text>{{info.ReturnDate}}</text>
  28. </view>
  29. </view>
  30. <view class="info-item">
  31. <view class="label">目的地</view>
  32. <view class="content">
  33. <text>{{info.Province}}{{info.City}}</text>
  34. </view>
  35. </view>
  36. <view class="info-item">
  37. <view class="label">出差事由</view>
  38. <view class="content">
  39. <text>{{info.Reason}}</text>
  40. </view>
  41. </view>
  42. <view class="info-item">
  43. <view class="label">交通工具</view>
  44. <view class="content">
  45. <text>{{info.Transportation.indexOf('其他')!=-1?info.Transportation.split('-')[1]:info.Transportation}}</text>
  46. </view>
  47. </view>
  48. <view class="info-item" v-if="info.PeerPeopleName">
  49. <view class="label">同行人</view>
  50. <view class="content">
  51. <text>{{info.PeerPeopleName}}</text>
  52. </view>
  53. </view>
  54. <view class="info-item">
  55. <view class="label">提交时间</view>
  56. <view class="content">
  57. <text>{{info.CreateTime}}</text>
  58. </view>
  59. </view>
  60. </view>
  61. <view class="section" v-if="info.Status!=='待审批'&&(info.ApproveTime||info.RefuseTime)">
  62. <view class="info-item">
  63. <view class="label">审批时间</view>
  64. <view class="content">{{info.ApproveTime||info.RefuseTime}}</view>
  65. </view>
  66. <view class="info-item" style="color:#C54322" v-if="info.Status==='已驳回'">
  67. <view class="label">驳回理由</view>
  68. <view class="content">{{info.RefuseReason}}</view>
  69. </view>
  70. </view>
  71. <view class="fix-bottom-wrap btns-wrap flex" v-if="info.ApplyAdminId==adminId&&info.Status=='待审批'">
  72. <button class="pass-btn" @click="handleRecall">撤回</button>
  73. </view>
  74. <view class="fix-bottom-wrap btns-wrap flex" v-if="info.ApplyAdminId==adminId&&info.Status=='已驳回'">
  75. <button class="pass-btn" @click="handleEdit">重新申请</button>
  76. </view>
  77. <view class="fix-bottom-wrap btns-wrap flex" v-if="info.ApplyAdminId==adminId&&info.Status=='已撤回'">
  78. <button class="refuse-btn" @click="handleDel">删除</button>
  79. <button class="pass-btn" @click="handleEdit">重新申请</button>
  80. </view>
  81. <view class="fix-bottom-wrap btns-wrap flex" v-if="info.IsApprove&&info.Status=='待审批'">
  82. <button class="pass-btn" @click="handlePass">通过</button>
  83. <button class="refuse-btn" @click="handleRefuse">驳回</button>
  84. </view>
  85. <van-dialog id="van-dialog" />
  86. </view>
  87. </template>
  88. <script>
  89. import {apiBusinessTripDetail,apiBusinessTripRecall,apiBusinessApplyApprove,apiDelApply} from '@/api/businessTrip/index'
  90. export default {
  91. computed:{
  92. adminId(){
  93. const userInfo=uni.getStorageSync('userInfo');
  94. return userInfo?JSON.parse(userInfo).AdminId:0
  95. }
  96. },
  97. data() {
  98. return {
  99. // infoOpts:[
  100. // {name:'申请人',key:'ApplyRealName'},
  101. // {name:'到达日期',key:'ArriveDate'},
  102. // {name:'返程日期',key:'ReturnDate'},
  103. // {name:'目的地',key:'place'},
  104. // {name:'出差事由',key:'Reason'},
  105. // {name:'交通工具',key:'Transportation'},
  106. // {name:'同行人',key:'PeerPeopleName'},
  107. // {name:'提交时间',key:'CreateTime'},
  108. // ],
  109. id:0,
  110. info:null,
  111. statusImg:'',
  112. }
  113. },
  114. onLoad(opt){
  115. this.id=opt.id
  116. },
  117. onShow(){
  118. this.getDetail()
  119. },
  120. methods: {
  121. getDetail(){
  122. this.info=null
  123. this.statusImg=''
  124. apiBusinessTripDetail({BusinessApplyId:this.id}).then(res=>{
  125. if(res.code===200){
  126. this.info=res.data
  127. if(this.info.Status==='已审批'){
  128. this.statusImg= require('../static/pass-icon.png')
  129. }else if(this.info.Status==='已驳回'){
  130. this.statusImg= require('../static/fail-icon.png')
  131. }else if(this.info.Status==='已过期'){
  132. this.statusImg= require('../static/cancel-icon.png')
  133. }else if(this.info.Status==='已撤回'){
  134. this.statusImg= require('../static/recall-icon.png')
  135. }
  136. }
  137. })
  138. },
  139. // 撤回
  140. handleRecall(){
  141. const that=this
  142. uni.showModal({
  143. title: '',
  144. content: '确定要撤回该出差申请吗?',
  145. success: function (res) {
  146. if (res.confirm) {
  147. console.log('用户点击确定');
  148. apiBusinessTripRecall({BusinessApplyId:Number(that.id)}).then(res=>{
  149. if(res.code===200){
  150. uni.$emit('businessApproveListUpdate')
  151. uni.navigateBack({
  152. delta: 1,
  153. fail:()=>{
  154. uni.switchTab({
  155. url: '/pages/index/index'
  156. })
  157. }
  158. });
  159. }
  160. })
  161. } else if (res.cancel) {
  162. console.log('用户点击取消');
  163. }
  164. }
  165. });
  166. },
  167. // 重新申请
  168. handleEdit(){
  169. uni.navigateTo({
  170. url:"/pages-approve/businessTrip/add?id="+this.id
  171. })
  172. },
  173. // 删除
  174. handleDel(){
  175. const that=this
  176. uni.showModal({
  177. title: '',
  178. content: '确定要删除该出差申请吗?',
  179. success: function (res) {
  180. if (res.confirm) {
  181. console.log('用户点击确定');
  182. apiDelApply({BusinessApplyId:Number(that.id)}).then(res=>{
  183. if(res.code===200){
  184. uni.$emit('businessApproveListUpdate')
  185. uni.showToast({
  186. title:"删除成功",
  187. icon:'success'
  188. })
  189. setTimeout(() => {
  190. uni.navigateBack({
  191. delta: 1,
  192. fail:()=>{
  193. uni.switchTab({
  194. url: '/pages/index/index'
  195. })
  196. }
  197. });
  198. }, 1500);
  199. }
  200. })
  201. } else if (res.cancel) {
  202. console.log('用户点击取消');
  203. }
  204. }
  205. });
  206. },
  207. //审批驳回
  208. handleRefuse(){
  209. uni.navigateTo({
  210. url:"./reason?id="+this.id
  211. })
  212. },
  213. //审批通过
  214. async handlePass(){
  215. const res=await apiBusinessApplyApprove({
  216. BusinessApplyId:Number(this.id),
  217. ApproveStatus:1,
  218. Remark:''
  219. })
  220. if(res.code===200){
  221. this.$dialog.alert({
  222. title: "处理成功",
  223. confirmButtonColor: "#5890FB",
  224. }).then(() => {
  225. // on close
  226. this.getDetail()
  227. // 更新列表
  228. uni.$emit('businessApproveListUpdate')
  229. });
  230. }
  231. },
  232. },
  233. }
  234. </script>
  235. <style lang="scss" scoped>
  236. .detail-page{
  237. padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
  238. padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
  239. }
  240. .section{
  241. margin-top: 20rpx;
  242. background-color: #fff;
  243. padding: 30rpx 34rpx;
  244. position: relative;
  245. .status-img{
  246. position: absolute;
  247. width: 222rpx;
  248. height: 222rpx;
  249. right: 0;
  250. top: 150rpx;
  251. z-index: 10;
  252. }
  253. }
  254. .info-item{
  255. font-size: 32rpx;
  256. display: flex;
  257. margin-bottom: 20rpx;
  258. .label{
  259. width: 150rpx;
  260. flex-shrink: 0;
  261. margin-right: 30rpx;
  262. text-align: right;
  263. }
  264. .content{
  265. flex: 1;
  266. }
  267. }
  268. .btns-wrap {
  269. justify-content: center;
  270. button {
  271. width: 260rpx;
  272. height: 70rpx;
  273. border-radius: 28px;
  274. border: none;
  275. margin: 0 15px;
  276. font-size: 15px;
  277. color: #fff;
  278. line-height: 70rpx;
  279. }
  280. .pass-btn {
  281. background-color: #3385FF;
  282. }
  283. .refuse-btn {
  284. background-color: #f55768;
  285. }
  286. }
  287. </style>