sign.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. <template>
  2. <div>
  3. <van-nav-bar
  4. title="打卡签到"
  5. style="position: fixed; top: 0; width: 100%"
  6. left-arrow
  7. @click-left="onClickLeft"
  8. />
  9. <van-tabs v-model="active" style="margin-top: 45px" @change="changeTab">
  10. <van-tab name="tab1" title="新增签到">
  11. <div style="margin: 5px; height: 500px">
  12. <van-field
  13. style="line-height: 60px; font-size: 18px"
  14. v-model="value"
  15. label="应急事件"
  16. clickable
  17. readonly
  18. @click="selectClick(1)"
  19. right-icon="arrow-down"
  20. />
  21. <van-popup v-model="showPicker" round position="bottom">
  22. <van-search
  23. v-if="searchFilterShow"
  24. v-model="searchFilter"
  25. input-align="center"
  26. show-action
  27. placeholder="请输入关键字"
  28. @search="onSearchFilter"
  29. >
  30. <template #action>
  31. <div @click="onSearchFilter">搜索</div>
  32. </template>
  33. </van-search>
  34. <van-picker
  35. show-toolbar
  36. :columns="columnsFilter"
  37. @cancel="showPicker = false"
  38. @confirm="onConfirm"
  39. />
  40. </van-popup>
  41. <van-field
  42. v-model="value1"
  43. label="签到点"
  44. style="line-height: 40px; font-size: 16px"
  45. required
  46. clickable
  47. readonly
  48. @click="selectClick(2)"
  49. right-icon="arrow-down"
  50. />
  51. <van-field
  52. v-model="value2"
  53. label="签到人"
  54. style="line-height: 40px; font-size: 16px"
  55. required
  56. clickable
  57. readonly
  58. @click="selectClick(3)"
  59. right-icon="arrow-down"
  60. />
  61. </div>
  62. <van-row
  63. type="flex"
  64. justify="center"
  65. style="width: 100%; background: white; position: fixed; bottom: 20px"
  66. >
  67. <van-col span="5">
  68. <van-button type="default" @click="onClickLeft">关闭</van-button>
  69. </van-col>
  70. <van-col span="5">
  71. <van-button color="#B2568C" type="primary" @click="submitData">
  72. 提交
  73. </van-button>
  74. </van-col>
  75. </van-row>
  76. </van-tab>
  77. <van-tab name="tab2" title="我的签到">
  78. <div style="margin: 5px">
  79. <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  80. <van-list
  81. v-model="loading"
  82. :finished="finished"
  83. finished-text="没有更多了"
  84. @load="onLoad"
  85. >
  86. <van-cell v-for="item in list" :key="item">
  87. <template #title>
  88. <van-row>
  89. <van-col span="4"> 应急事件: </van-col>
  90. <van-col span="20">&nbsp;&nbsp;{{ item.yjsj }}</van-col>
  91. </van-row>
  92. <van-row>
  93. <van-col span="4">签&nbsp;&nbsp;到&nbsp;&nbsp;点:</van-col>
  94. <van-col span="20">&nbsp;&nbsp;{{ item.qdd }}</van-col>
  95. </van-row>
  96. <van-row>
  97. <van-col span="4">签&nbsp;&nbsp;到&nbsp;&nbsp;人:</van-col>
  98. <van-col span="6">&nbsp;&nbsp;{{ item.qdr }}</van-col>
  99. <van-col span="4">签到时间:</van-col>
  100. <van-col span="10">&nbsp;&nbsp;{{ item.qdsj }}</van-col>
  101. </van-row>
  102. </template>
  103. </van-cell>
  104. </van-list>
  105. </van-pull-refresh>
  106. </div>
  107. </van-tab>
  108. </van-tabs>
  109. </div>
  110. </template>
  111. <script>
  112. import { mapGetters } from 'vuex'
  113. import { Toast } from 'vant'
  114. import cookies from '../plugin/axios/util.cookies'
  115. export default {
  116. name: 'Sign',
  117. data() {
  118. return {
  119. searchFilter: '',
  120. searchFilterShow: false,
  121. value: '',
  122. value1: '',
  123. value1Key: '',
  124. value2: '',
  125. value2Key: '',
  126. value2Type: '',
  127. page: 1,
  128. active: 'tab1',
  129. showPicker: false,
  130. showType: 1,
  131. columns: [],
  132. columnsFilter: [],
  133. yjs: [],
  134. qdds: [],
  135. qdrs: [],
  136. list: [],
  137. loading: false,
  138. finished: false,
  139. refreshing: false
  140. }
  141. },
  142. computed: {
  143. ...mapGetters(['gValue'])
  144. },
  145. watch: {
  146. gValue: function (n, o) {
  147. if (n) {
  148. this.querySelect()
  149. }
  150. }
  151. },
  152. mounted() {
  153. this.$store.dispatch('layout/gValue', null)
  154. this.querySelect()
  155. },
  156. methods: {
  157. onSearchFilter() {
  158. if (this.searchFilter) {
  159. this.columnsFilter = []
  160. const _this = this
  161. this.columns.forEach(v => {
  162. if (v.text.indexOf(_this.searchFilter) > -1) {
  163. _this.columnsFilter.push(v)
  164. }
  165. })
  166. } else {
  167. this.columnsFilter = this.columns
  168. }
  169. },
  170. changeTab(name) {
  171. if (name === 'tab2') {
  172. this.finished = false
  173. this.loading = true
  174. this.onLoad(1)
  175. }
  176. },
  177. submitData() {
  178. const postData = {
  179. yxid: this.gValue,
  180. qdd: this.value1Key,
  181. qdr: this.value2Key,
  182. qdrtype: this.value2Type
  183. }
  184. this.$apis.requestBase('sign', postData).then(res => {
  185. if (res.data && res.data.code === 200) {
  186. this.value2 = ''
  187. this.value2Key = ''
  188. this.value2Type = ''
  189. this.querySelect()
  190. Toast('签到成功')
  191. } else {
  192. Toast(res.data.msg)
  193. }
  194. })
  195. },
  196. selectClick(type) {
  197. this.searchFilter = ''
  198. if (type === 1) {
  199. this.searchFilterShow = false
  200. this.columns = this.yjs
  201. this.columnsFilter = this.yjs
  202. } else if (type === 2) {
  203. this.searchFilterShow = false
  204. this.columns = this.qdds
  205. this.columnsFilter = this.qdds
  206. } else if (type === 3) {
  207. this.searchFilterShow = true
  208. this.columns = this.qdrs
  209. this.columnsFilter = this.qdrs
  210. }
  211. this.showType = type
  212. this.showPicker = true
  213. },
  214. querySelect() {
  215. let tmp = this.gValue
  216. if (!this.yjs || this.yjs.length <= 0) {
  217. tmp = ''
  218. }
  219. const postData = {
  220. yxid: tmp
  221. }
  222. this.$apis.requestBase('selectAll', postData).then(res => {
  223. if (res.data.qdds) {
  224. this.qdds = res.data.qdds
  225. const SignValue1Key = cookies.get('SignValue1Key')
  226. if (SignValue1Key) {
  227. this.qdds.forEach(v => {
  228. if (v.value === SignValue1Key) {
  229. this.value1 = v.text
  230. this.value1Key = v.value
  231. }
  232. })
  233. }
  234. }
  235. if (res.data.qdrs) {
  236. this.qdrs = res.data.qdrs
  237. }
  238. if (res.data.yjs) {
  239. this.yjs = res.data.yjs
  240. if (this.yjs[0]) {
  241. this.onConfirm(this.yjs[0])
  242. }
  243. }
  244. })
  245. },
  246. onClickLeft: function () {
  247. this.$router.push('/')
  248. },
  249. onConfirm(value) {
  250. this.searchFilter = ''
  251. if (this.showType === 1) {
  252. this.$store.dispatch('layout/gValue', value.value)
  253. this.value = value.text
  254. } else if (this.showType === 2) {
  255. cookies.set('SignValue1Key', value.value)
  256. this.value1 = value.text
  257. this.value1Key = value.value
  258. } else if (this.showType === 3) {
  259. this.value2 = value.text
  260. this.value2Key = value.value
  261. this.value2Type = value.type
  262. }
  263. this.showPicker = false
  264. },
  265. onLoad(page) {
  266. // if (!this.gValue) {
  267. // this.finished = true
  268. // this.loading = false
  269. // return
  270. // }
  271. if (page) {
  272. this.page = page
  273. }
  274. page = this.page
  275. this.page += 1
  276. // 查询类型 queryType
  277. // 演习id=gValue
  278. // 排序情况= columns . sort
  279. // 搜索情况 this.value
  280. const postData = {
  281. // yxid: this.gValue,
  282. page: page
  283. }
  284. this.$apis.requestBase('mysign', postData).then(res => {
  285. if (res.data && res.data.length > 0) {
  286. if (page === 1) {
  287. this.list = res.data
  288. } else {
  289. this.list.push(res.data)
  290. }
  291. } else {
  292. if (page === 1) {
  293. this.list = []
  294. }
  295. this.finished = true
  296. }
  297. this.loading = false
  298. if (this.refreshing) {
  299. this.refreshing = false
  300. }
  301. })
  302. },
  303. onRefresh() {
  304. this.finished = false
  305. this.loading = true
  306. this.onLoad(1)
  307. }
  308. }
  309. }
  310. </script>
  311. <style lang="scss">
  312. .van-picker-column__item--selected {
  313. background-color: RGBA(178, 86, 140, 0.3);
  314. }
  315. </style>