123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324 |
- <template>
- <div>
- <van-nav-bar
- title="打卡签到"
- style="position: fixed; top: 0; width: 100%"
- left-arrow
- @click-left="onClickLeft"
- />
- <van-tabs v-model="active" style="margin-top: 45px" @change="changeTab">
- <van-tab name="tab1" title="新增签到">
- <div style="margin: 5px; height: 500px">
- <van-field
- style="line-height: 60px; font-size: 18px"
- v-model="value"
- label="应急事件"
- clickable
- readonly
- @click="selectClick(1)"
- right-icon="arrow-down"
- />
- <van-popup v-model="showPicker" round position="bottom">
- <van-search
- v-if="searchFilterShow"
- v-model="searchFilter"
- input-align="center"
- show-action
- placeholder="请输入关键字"
- @search="onSearchFilter"
- >
- <template #action>
- <div @click="onSearchFilter">搜索</div>
- </template>
- </van-search>
- <van-picker
- show-toolbar
- :columns="columnsFilter"
- @cancel="showPicker = false"
- @confirm="onConfirm"
- />
- </van-popup>
- <van-field
- v-model="value1"
- label="签到点"
- style="line-height: 40px; font-size: 16px"
- required
- clickable
- readonly
- @click="selectClick(2)"
- right-icon="arrow-down"
- />
- <van-field
- v-model="value2"
- label="签到人"
- style="line-height: 40px; font-size: 16px"
- required
- clickable
- readonly
- @click="selectClick(3)"
- right-icon="arrow-down"
- />
- </div>
- <van-row
- type="flex"
- justify="center"
- style="width: 100%; background: white; position: fixed; bottom: 20px"
- >
- <van-col span="5">
- <van-button type="default" @click="onClickLeft">关闭</van-button>
- </van-col>
- <van-col span="5">
- <van-button color="#B2568C" type="primary" @click="submitData">
- 提交
- </van-button>
- </van-col>
- </van-row>
- </van-tab>
- <van-tab name="tab2" title="我的签到">
- <div style="margin: 5px">
- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
- <van-list
- v-model="loading"
- :finished="finished"
- finished-text="没有更多了"
- @load="onLoad"
- >
- <van-cell v-for="item in list" :key="item">
- <template #title>
- <van-row>
- <van-col span="4"> 应急事件: </van-col>
- <van-col span="20"> {{ item.yjsj }}</van-col>
- </van-row>
- <van-row>
- <van-col span="4">签 到 点:</van-col>
- <van-col span="20"> {{ item.qdd }}</van-col>
- </van-row>
- <van-row>
- <van-col span="4">签 到 人:</van-col>
- <van-col span="6"> {{ item.qdr }}</van-col>
- <van-col span="4">签到时间:</van-col>
- <van-col span="10"> {{ item.qdsj }}</van-col>
- </van-row>
- </template>
- </van-cell>
- </van-list>
- </van-pull-refresh>
- </div>
- </van-tab>
- </van-tabs>
- </div>
- </template>
- <script>
- import { mapGetters } from 'vuex'
- import { Toast } from 'vant'
- import cookies from '../plugin/axios/util.cookies'
- export default {
- name: 'Sign',
- data() {
- return {
- searchFilter: '',
- searchFilterShow: false,
- value: '',
- value1: '',
- value1Key: '',
- value2: '',
- value2Key: '',
- value2Type: '',
- page: 1,
- active: 'tab1',
- showPicker: false,
- showType: 1,
- columns: [],
- columnsFilter: [],
- yjs: [],
- qdds: [],
- qdrs: [],
- list: [],
- loading: false,
- finished: false,
- refreshing: false
- }
- },
- computed: {
- ...mapGetters(['gValue'])
- },
- watch: {
- gValue: function (n, o) {
- if (n) {
- this.querySelect()
- }
- }
- },
- mounted() {
- this.$store.dispatch('layout/gValue', null)
- this.querySelect()
- },
- methods: {
- onSearchFilter() {
- if (this.searchFilter) {
- this.columnsFilter = []
- const _this = this
- this.columns.forEach(v => {
- if (v.text.indexOf(_this.searchFilter) > -1) {
- _this.columnsFilter.push(v)
- }
- })
- } else {
- this.columnsFilter = this.columns
- }
- },
- changeTab(name) {
- if (name === 'tab2') {
- this.finished = false
- this.loading = true
- this.onLoad(1)
- }
- },
- submitData() {
- const postData = {
- yxid: this.gValue,
- qdd: this.value1Key,
- qdr: this.value2Key,
- qdrtype: this.value2Type
- }
- this.$apis.requestBase('sign', postData).then(res => {
- if (res.data && res.data.code === 200) {
- this.value2 = ''
- this.value2Key = ''
- this.value2Type = ''
- this.querySelect()
- Toast('签到成功')
- } else {
- Toast(res.data.msg)
- }
- })
- },
- selectClick(type) {
- this.searchFilter = ''
- if (type === 1) {
- this.searchFilterShow = false
- this.columns = this.yjs
- this.columnsFilter = this.yjs
- } else if (type === 2) {
- this.searchFilterShow = false
- this.columns = this.qdds
- this.columnsFilter = this.qdds
- } else if (type === 3) {
- this.searchFilterShow = true
- this.columns = this.qdrs
- this.columnsFilter = this.qdrs
- }
- this.showType = type
- this.showPicker = true
- },
- querySelect() {
- let tmp = this.gValue
- if (!this.yjs || this.yjs.length <= 0) {
- tmp = ''
- }
- const postData = {
- yxid: tmp
- }
- this.$apis.requestBase('selectAll', postData).then(res => {
- if (res.data.qdds) {
- this.qdds = res.data.qdds
- const SignValue1Key = cookies.get('SignValue1Key')
- if (SignValue1Key) {
- this.qdds.forEach(v => {
- if (v.value === SignValue1Key) {
- this.value1 = v.text
- this.value1Key = v.value
- }
- })
- }
- }
- if (res.data.qdrs) {
- this.qdrs = res.data.qdrs
- }
- if (res.data.yjs) {
- this.yjs = res.data.yjs
- if (this.yjs[0]) {
- this.onConfirm(this.yjs[0])
- }
- }
- })
- },
- onClickLeft: function () {
- this.$router.push('/')
- },
- onConfirm(value) {
- this.searchFilter = ''
- if (this.showType === 1) {
- this.$store.dispatch('layout/gValue', value.value)
- this.value = value.text
- } else if (this.showType === 2) {
- cookies.set('SignValue1Key', value.value)
- this.value1 = value.text
- this.value1Key = value.value
- } else if (this.showType === 3) {
- this.value2 = value.text
- this.value2Key = value.value
- this.value2Type = value.type
- }
- this.showPicker = false
- },
- onLoad(page) {
- // if (!this.gValue) {
- // this.finished = true
- // this.loading = false
- // return
- // }
- if (page) {
- this.page = page
- }
- page = this.page
- this.page += 1
- // 查询类型 queryType
- // 演习id=gValue
- // 排序情况= columns . sort
- // 搜索情况 this.value
- const postData = {
- // yxid: this.gValue,
- page: page
- }
- this.$apis.requestBase('mysign', postData).then(res => {
- if (res.data && res.data.length > 0) {
- if (page === 1) {
- this.list = res.data
- } else {
- this.list.push(res.data)
- }
- } else {
- if (page === 1) {
- this.list = []
- }
- this.finished = true
- }
- this.loading = false
- if (this.refreshing) {
- this.refreshing = false
- }
- })
- },
- onRefresh() {
- this.finished = false
- this.loading = true
- this.onLoad(1)
- }
- }
- }
- </script>
- <style lang="scss">
- .van-picker-column__item--selected {
- background-color: RGBA(178, 86, 140, 0.3);
- }
- </style>
|