123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461 |
- <template>
- <view>
- <view class="content">
- <view class="section">
- <view class="title">申请人</view>
- <view class="inner">
- <view class="user">
- <!-- <view class="img">
- <view class="avatar" :style="{backgroundColor:bgColor[1]}">{{detail.staff.split('').pop()}}</view>
- </view> -->
- <view class="info">
- <view class="name">{{detail.staff}}</view>
- <view class="section">{{detail.staff_section}}</view>
- </view>
- </view>
- </view>
- </view>
- <view class="section">
- <view class="title">申请时间</view>
- <view class="inner">{{detail.created_at}}</view>
- </view>
- <view class="section">
- <view class="title">业务分类</view>
- <view class="inner">{{detail.classify}}</view>
- </view>
- <view class="section">
- <view class="title">业务名称</view>
- <view class="inner">{{detail.title}}</view>
- </view>
- <view class="section">
- <view class="title">业务介绍</view>
- <view class="inner">{{detail.introduce}}</view>
- </view>
- <view class="section" v-if="detail.filelist">
- <view class="title">需审核文件</view>
- <view class="inner">
- <view class="file_list">
- <view class="item" v-for="(item,index) in detail.filelist" :key="index"
- @click="open_file(item.path)">
- <view class="left">
- <view class="icon"></view>
- <view class="info">
- <view class="name">{{item.fileName}}</view>
- <!-- <view class="size">{{item.fileSize}}KB</view> -->
- </view>
- </view>
- <view class="right">
- <uni-icons type="arrowright"></uni-icons>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="section" v-if="detail.$photos">
- <view class="title">需审核图片</view>
- <view class="inner">
- <view class="img_list">
- <view class="item" v-for="item in detail.$photos">
- <image :src="item.path" @click="open_img(item.path)"></image>
- </view>
- </view>
- </view>
- </view>
- <view class="section">
- <view class="title">审批流程</view>
- <view class="inner">
- <view class="shenpi_list">
- <view class="item" v-for="(item,index) in detail.approval_list" :key="index">
- <view class="name">{{item.title}}</view>
- <view class="list">
- <view class="box" v-for="(item_2,index_2) in item.member" :key="index_2">
- <view class="label">{{item_2.title}}:{{item_2.name}}</view>
- <view v-if="!item_2.state" style="color: #F0AD4E;">待审核。</view>
- <view class="label" v-if="item_2.state == 2 && item_2.remark == ''"
- style="color: #E94C3D;">驳回。</view>
- <view class="label" v-if="item_2.state == 0 && item_2.remark == ''"
- style="color: #E94C3D;">驳回。</view>
- <view class="label" v-if="item_2.state == 1 && item_2.remark == ''"
- style="color: #17A086;">通过。</view>
- <view class="remark" v-if="item_2.state == 1" style="color: #17A086;">
- {{item_2.remark}}
- </view>
- <view class="remark"
- v-if="item_2.state == 2 || item_2.state == 0 || item_2.state == 3"
- style="color: #E94C3D;">{{item_2.remark}}</view>
- <view v-if="item_2.state == 1">
- <image :src="item_2.base_img" style="width: 300rpx; height: 90rpx;"></image>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="section">
- <view class="title">审批意见</view>
- <view class="inner">
- <view class="remark_text">
- <textarea value="" v-model="remark_text" placeholder="请输入审批意见。"
- style="height: 80px; padding: 10px;" />
- </view>
- </view>
- </view>
- </view>
- <view class="bottom">
- <view class="btn" style="background-color: #16A086;" @click="btn_shenhe(1)">通过</view>
- <view class="btn" style="background-color: #E94C3D;" @click="btn_shenhe(0)">驳回</view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- // 业务id
- id: 0,
- // 业务详情
- detail: {},
- // 审核留言
- remark_text: "",
- // 头像随即色
- bgColor: [],
- // 单据是否需要强制浏览类型 0 不强制 1 强制浏览
- is_browse: 0,
-
- // 职位是否需要强制浏览 1是 2否
- is_force: 2,
- // 职位浏览时长
- browse_duration: 0,
- // 是否浏览完成
- is_read: true,
-
- // 工号
- staff_num:""
- };
- },
- onLoad(option) {
- // console.log(option.id)
- // 设置业务id
- this.id = option.id
- // 设置标题
- uni.setNavigationBarTitle({
- title: option.title
- })
- // 获取业务详情
- this.get_worksheet_checkmei(option.id)
- this.staff_num = uni.getStorageSync('user').staff_num
- },
- methods: {
- // 获取业务详情
- get_worksheet_checkmei(id) {
- // 业务详情接口
- this.$api.worksheet_checkmei({
- id: id
- }).then((res) => {
- console.log(res.data.data)
- for (let i = 0; i < 2; i++) {
- // 获取随机色
- let r = parseInt(Math.random() * 256)
- let g = parseInt(Math.random() * 256)
- let b = parseInt(Math.random() * 256)
- // ES6 字符串拼接
- // this.bgColor = `rgba(${r},${g},${b},0.3)`
- let color = "rgba(" + r + "," + g + "," + b + "," + 0.3 + ")"
- // console.log(color)
- this.bgColor.push(color)
- }
- this.detail = res.data.data
- this.is_browse = res.data.data.is_browse
- if (this.is_browse == 1) {
- // 1 需要强制浏览
- this.is_read = false
- // 强制浏览限制时间
- this.$api.worksheet_force_query({
- staff_num: this.staff_num
- }).then((res) => {
- console.log(res.data.data)
- this.is_force = res.data.data.is_force
- // 1强制 2不强制
- if (this.is_force == 1) {
- this.browse_duration = res.data.data.browse_duration
-
- // 计时
- setTimeout(() => {
- this.is_read = true
- }, this.browse_duration*60000)
- } else if (this.is_force == 2) {
-
- }
- })
- }
- })
- },
- // 审核事件
- btn_shenhe(type) {
- // 判断是否浏览相应时长
- if (!this.is_read) {
- uni.showToast({
- icon: "none",
- title: "至少浏览" + this.browse_duration + "分钟、才可审批"
- })
- return
- }
- // 提交审核接口
- this.$api.worksheet_checkmei_tijiao({
- id: this.id,
- allow: type,
- remark: this.remark_text
- }).then((res) => {
- console.log(res.data)
- // 审核过
- if (res.data.code == 1) {
- uni.showToast({
- icon: "none",
- title: res.data.message
- })
- } else {
- // uni.switchTab({
- // url: "../../../tabbar/my/my"
- // })
- uni.navigateBack()
- }
- })
- },
- // 预览文件
- open_file(path) {
- uni.downloadFile({
- url: path,
- success: (res) => {
- var filePath = res.tempFilePath;
- uni.openDocument({
- filePath: filePath,
- success: (res) => {
- console.log('打开文档成功');
-
- }
- });
- }
- });
- },
- // 预览图片
- open_img(path) {
- const urls = [];
- urls.push(path)
- // console.log(urls[0])
- uni.previewImage({
- urls: urls,
- });
- }
- }
- }
- </script>
- <style lang="scss">
- page {
- margin-bottom: 40px;
- background-color: #F3F3F3;
- width: 749rpx;
- box-sizing: border-box;
- padding: 24rpx;
- }
- .content {
- width: 700rpx;
- min-height: 90vh;
- background-color: #FFFFFF;
- border-radius: 4px;
- box-sizing: border-box;
- padding: 25rpx;
- }
- .section {
- .title {
- padding-left: 8px;
- border-left: 2px solid #009FE8;
- font-weight: 700;
- }
- .inner {
- padding: 10px;
- .user {
- display: flex;
- align-items: center;
- .img {
- width: 66px;
- height: 66px;
- border-radius: 50%;
- overflow: hidden;
- image {
- width: 66px;
- height: 66px;
- }
- .avatar {
- width: 66px;
- height: 66px;
- text-align: center;
- line-height: 66px;
- color: #FFFFFF;
- font-size: 28px;
- }
- }
- .info {
- // margin-left: 12px;
- .name {
- font-size: 19px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #232627;
- line-height: 26px;
- }
- .section {
- margin-top: 4px;
- font-size: 14px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #232627;
- line-height: 19px;
- }
- }
- }
- .file_list {
- .item {
- height: 49px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-bottom: 1px solid #ECF0F1;
- padding: 8px 0;
- .left {
- display: flex;
- align-items: center;
- .icon {}
- .info {
- height: 49px;
- display: flex;
- flex-flow: column;
- justify-content: space-around;
- .name {
- font-size: 16px;
- font-family: MicrosoftYaHei;
- color: #2C3E50;
- }
- .size {
- font-size: 13px;
- font-family: MicrosoftYaHei;
- color: #BDC3C7;
- }
- }
- }
- .right {}
- }
- }
- .img_list {
- overflow: hidden;
- .item {
- float: left;
- width: 284rpx;
- height: 260rpx;
- margin-right: 40rpx;
- margin-bottom: 40rpx;
- image {
- width: 284rpx;
- height: 260rpx;
- }
- }
- .item:nth-child(2n) {
- margin-right: 0;
- }
- }
- .shenpi_list {
- width: 612rpx;
- .item {
- display: flex;
- .name {
- width: 200rpx;
- color: #009FE8;
- }
- .list {
- width: 412rpx;
- .box {
- margin-bottom: 8px;
- .label {}
- .remark {}
- }
- }
- }
- }
- .remark_text {
- border: 1px solid #BDC3C7;
- }
- }
- }
- .bottom {
- margin-top: 20px;
- display: flex;
- justify-content: space-around;
- .btn {
- padding: 8px 40px;
- color: #FFFFFF;
- border-radius: 60px;
- }
- }
- </style>
|