|
|
@@ -0,0 +1,391 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <NavBar />
|
|
|
+ <van-row>
|
|
|
+ <van-col span="24"
|
|
|
+ ><van-field
|
|
|
+ v-model="orgName"
|
|
|
+ is-link
|
|
|
+ label-width="4em"
|
|
|
+ clearable
|
|
|
+ label="组织机构"
|
|
|
+ placeholder=""
|
|
|
+ @click="show = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model="show" round position="bottom" :close-on-click-overlay="false">
|
|
|
+ <van-cascader
|
|
|
+ v-model="cascaderValue"
|
|
|
+ title="组织机构"
|
|
|
+ :options="options"
|
|
|
+ @close="closeDialog"
|
|
|
+ @change="changeCascader"
|
|
|
+ @finish="onFinish"
|
|
|
+ :field-names="fieldNames"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-row>
|
|
|
+ <van-col span="12"
|
|
|
+ ><van-field
|
|
|
+ v-model="statusValue"
|
|
|
+ is-link
|
|
|
+ label-width="3em"
|
|
|
+ clearable
|
|
|
+ label="状态"
|
|
|
+ placeholder=""
|
|
|
+ @click="showStatus = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model="typeStatus" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ title="状态"
|
|
|
+ show-toolbar
|
|
|
+ :columns="columns"
|
|
|
+ @confirm="onConfirm"
|
|
|
+ @cancel="onCancel"
|
|
|
+ @change="onChange"
|
|
|
+ :close-on-click-overlay="false"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="12">
|
|
|
+ <van-field
|
|
|
+ v-model="currentDate"
|
|
|
+ clearable
|
|
|
+ label-width="3em"
|
|
|
+ label="月份"
|
|
|
+ placeholder=""
|
|
|
+ @click="showDate = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model="showDate" round position="bottom">
|
|
|
+ <van-datetime-picker
|
|
|
+ v-model="currentDate"
|
|
|
+ @cancel="onCancel"
|
|
|
+ @confirm="onDateConfirm"
|
|
|
+ type="year-month"
|
|
|
+ title="月份"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-row>
|
|
|
+ <van-col span="18"
|
|
|
+ ><van-field
|
|
|
+ v-model="typeValue"
|
|
|
+ is-link
|
|
|
+ label-width="3em"
|
|
|
+ clearable
|
|
|
+ label="类型"
|
|
|
+ placeholder=""
|
|
|
+ @click="typeStatus = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model="typeStatus" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ title="类型"
|
|
|
+ show-toolbar
|
|
|
+ :columns="typeColumns"
|
|
|
+ @confirm="onConfirm"
|
|
|
+ @cancel="onCancel"
|
|
|
+ @change="onChange"
|
|
|
+ :close-on-click-overlay="false"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-col>
|
|
|
+
|
|
|
+ <van-col span="6" class="btnf_box">
|
|
|
+ <van-button type="info" class="btn" @click="clearSearch" size="small">重置</van-button>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <!-- //卡片内容区域 -->
|
|
|
+ <van-panel title="每月例行培训学习" class="card" status="状态">
|
|
|
+ <template #header>
|
|
|
+ <div class="titleClass">
|
|
|
+ <div class="title">每月例行培训学习</div>
|
|
|
+ <div>
|
|
|
+ <van-button plain type="info" size="mini" @click="trainSign">培训登记</van-button>
|
|
|
+ <!-- <van-button plain type="info">签名</van-button> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="mainItem">
|
|
|
+ <div>单位名称</div>
|
|
|
+ <div>抚琴路支行</div>
|
|
|
+ </div>
|
|
|
+ <div class="mainItem">
|
|
|
+ <div>培训状态</div>
|
|
|
+ <div>待记录</div>
|
|
|
+ </div>
|
|
|
+ <div class="mainItem">
|
|
|
+ <div>培训类型</div>
|
|
|
+ <div>每月安全培训教育</div>
|
|
|
+ </div>
|
|
|
+ <div class="mainItem">
|
|
|
+ <div>培训时间</div>
|
|
|
+ <div>2023-05-01 18:33:12</div>
|
|
|
+ </div>
|
|
|
+ <div class="mainItem">
|
|
|
+ <div>签名情况</div>
|
|
|
+ <div class="condition" @click="signatureCondition">10/10</div>
|
|
|
+ </div>
|
|
|
+ </van-panel>
|
|
|
+ <!-- 卡片弹框 -->
|
|
|
+ <van-dialog v-model="conditionShow" title="签名情况" show-cancel-button>
|
|
|
+ <div class="conditionCls">
|
|
|
+ <div class="title">
|
|
|
+ 已签名人员(5人):
|
|
|
+ </div>
|
|
|
+ <div class="people">
|
|
|
+ 张三,张三张三张三张三
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ 未签名人员(5人):
|
|
|
+ </div>
|
|
|
+ <div class="people">
|
|
|
+ 张三,张三张三张三张三
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import NavBar from '@/components/NavBar'
|
|
|
+import { Col, Row, Cascader, Dialog, DatetimePicker, Icon, Picker } from 'vant'
|
|
|
+import { deptTreeList, selectListApp, registration } from '@/api/toConsult.js'
|
|
|
+import { Toast } from 'vant'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ orgName: '', //机构名称
|
|
|
+ orgId: '', //机构ID
|
|
|
+ show: false, //机构弹框显示隐藏
|
|
|
+ cascaderValue: '',
|
|
|
+ options: [], //机构数组
|
|
|
+ fieldNames: {
|
|
|
+ text: 'name',
|
|
|
+ value: 'id',
|
|
|
+ children: 'children'
|
|
|
+ },
|
|
|
+ typeValue: '', //类型值
|
|
|
+ statusValue: '', //状态值
|
|
|
+ typeStatus: false, //类型显示隐藏
|
|
|
+ showStatus: false, //状态显示隐藏
|
|
|
+ showDate: false, //月份显示隐藏
|
|
|
+ columns: ['待记录', '待签名', '已完成'], //状态数组
|
|
|
+ typeColumns: ['每月安全培训教育', '专项安全培训教育'], //类型数组
|
|
|
+ currentDate: '', //月份值
|
|
|
+ conditionShow: false, //机构弹框显示隐藏
|
|
|
+ show: false, //机构弹框显示隐藏
|
|
|
+ show: false //机构弹框显示隐藏
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ NavBar,
|
|
|
+ Dialog,
|
|
|
+ Icon,
|
|
|
+ DatetimePicker,
|
|
|
+ Picker,
|
|
|
+ Col,
|
|
|
+ Row,
|
|
|
+ Cascader
|
|
|
+ },
|
|
|
+
|
|
|
+ filters: {
|
|
|
+ statusFilter: function (value) {
|
|
|
+ let str = ''
|
|
|
+ // 0待调阅，1调阅中，2已调阅，3已超期
|
|
|
+ switch (value) {
|
|
|
+ case 0:
|
|
|
+ str = '待调阅'
|
|
|
+
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ str = '调阅中'
|
|
|
+ break
|
|
|
+
|
|
|
+ case 2:
|
|
|
+ str = '已调阅'
|
|
|
+ break
|
|
|
+
|
|
|
+ case 3:
|
|
|
+ str = '已超期'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ return str
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //清空查询条件
|
|
|
+ clearSearch() {
|
|
|
+ this.str = ''
|
|
|
+ this.cascaderValue = ''
|
|
|
+ this.value1 = ''
|
|
|
+ this.currentDate = ''
|
|
|
+ this.fieldValue = ''
|
|
|
+ this.selectListAppHandler()
|
|
|
+ },
|
|
|
+
|
|
|
+ //初始化
|
|
|
+ init() {
|
|
|
+ //获取组织机构数据
|
|
|
+ deptTreeList().then(res => {
|
|
|
+ let { code, data, msg } = res
|
|
|
+ if (code == 200) {
|
|
|
+ this.options = data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.selectListAppHandler()
|
|
|
+ },
|
|
|
+ selectListAppHandler() {
|
|
|
+ //获取任务列表
|
|
|
+ selectListApp({
|
|
|
+ status: this.str || '',
|
|
|
+ orgId: this.cascaderValue || '',
|
|
|
+ moth: this.currentDate || ''
|
|
|
+ }).then(res => {
|
|
|
+ let { code, data, msg } = res
|
|
|
+ if (code == 200) {
|
|
|
+ this.taskList = data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //关闭弹框事件
|
|
|
+ closeDialog() {
|
|
|
+ this.show = false
|
|
|
+ this.selectListAppHandler()
|
|
|
+ },
|
|
|
+ // 开始调阅事件
|
|
|
+ startMonitorHandler(taskId) {
|
|
|
+ this.taskId = taskId
|
|
|
+ this.showDialog = true
|
|
|
+ },
|
|
|
+ //已调阅事件
|
|
|
+ endMonitorHandler(status, taskId) {
|
|
|
+ // 0待调阅，1调阅中，2已调阅，3已超期
|
|
|
+ //跳转详情
|
|
|
+ if (status <= 1) return
|
|
|
+ this.$router.push('/consultInfo/' + taskId)
|
|
|
+ },
|
|
|
+
|
|
|
+ //级联选择当前任意层级触发
|
|
|
+ changeCascader(val) {
|
|
|
+ console.log(val)
|
|
|
+ let { selectedOptions } = val
|
|
|
+ //级联值
|
|
|
+ this.cascaderValue = selectedOptions[selectedOptions.length - 1].id
|
|
|
+ //输入框值
|
|
|
+ this.value1 = selectedOptions[selectedOptions.length - 1].name
|
|
|
+ },
|
|
|
+ onFinish() {},
|
|
|
+ //搜索选择状态时触发
|
|
|
+ onConfirm(value, index) {
|
|
|
+ this.fieldValue = value
|
|
|
+
|
|
|
+ switch (value) {
|
|
|
+ case '待调阅':
|
|
|
+ this.str = '0'
|
|
|
+
|
|
|
+ break
|
|
|
+ case '调阅中':
|
|
|
+ this.str = '1'
|
|
|
+ break
|
|
|
+
|
|
|
+ case '已调阅':
|
|
|
+ this.str = '2'
|
|
|
+ break
|
|
|
+
|
|
|
+ case '已超期':
|
|
|
+ this.str = '3'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ this.typeStatus = false
|
|
|
+ this.selectListAppHandler()
|
|
|
+ },
|
|
|
+ //月份选中触发
|
|
|
+ onDateConfirm() {
|
|
|
+ this.currentDate = this.newDate(this.currentDate)
|
|
|
+ this.showDate = false
|
|
|
+ this.selectListAppHandler()
|
|
|
+ },
|
|
|
+ //日期转换
|
|
|
+ newDate(time) {
|
|
|
+ var date = new Date(time)
|
|
|
+ var y = date.getFullYear()
|
|
|
+ var m = date.getMonth() + 1
|
|
|
+ m = m < 10 ? '0' + m : m
|
|
|
+ var d = date.getDate()
|
|
|
+ d = d < 10 ? '0' + d : d
|
|
|
+ return y + '-' + m + '-' + d
|
|
|
+ },
|
|
|
+ //查看签名情况
|
|
|
+ signatureCondition() {
|
|
|
+ this.conditionShow=true
|
|
|
+ },
|
|
|
+ //培训登记跳转
|
|
|
+ trainSign(){
|
|
|
+ this.$router.push('/Addtraining/'+'1111')
|
|
|
+ },
|
|
|
+ onChange(picker, value, index) {},
|
|
|
+ onCancel() {
|
|
|
+ this.show = false
|
|
|
+ this.typeStatus = false
|
|
|
+ this.showDate = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.btnf_box {
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.card {
|
|
|
+ margin: 20px;
|
|
|
+ margin-bottom: 0px;
|
|
|
+ box-shadow: 0 8px 12px #ebedf0;
|
|
|
+}
|
|
|
+.btn {
|
|
|
+ float: right;
|
|
|
+ margin-top: 24px;
|
|
|
+ margin-right: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.titleClass {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 30px;
|
|
|
+ flex: 1;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.mainItem {
|
|
|
+ display: flex;
|
|
|
+ font-size: 28px;
|
|
|
+ padding: 20px;
|
|
|
+ justify-content: space-between;
|
|
|
+ .condition {
|
|
|
+ color: #1989fa;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+}
|
|
|
+.conditionCls{
|
|
|
+ .title{
|
|
|
+ color: #1989fa;
|
|
|
+ margin-left: 30px;
|
|
|
+ // margin-top: 30px;
|
|
|
+ }
|
|
|
+ .people{
|
|
|
+ margin-left: 80px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ margin-top: 30px
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
coys