初始提交
This commit is contained in:
180
pages/my/personalSetting/components/commonText.vue
Normal file
180
pages/my/personalSetting/components/commonText.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<view class="common_v">
|
||||
<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
|
||||
:bottombar="false" top="120">
|
||||
<SwipeItem :list="commonWordsList" :buttons="actionData" @action="bindClick" ref="swipeItem" :marginB="20">
|
||||
<template v-slot="{ item }">
|
||||
<view class="action-item">
|
||||
{{item.commonWordsText}}
|
||||
</view>
|
||||
</template>
|
||||
</SwipeItem>
|
||||
</mescroll-uni>
|
||||
<view class="flowBefore-actions">
|
||||
<u-button class="buttom-btn" type="primary" @click='editCommonWord'>添加常用语</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="inputDialog" type="dialog">
|
||||
<uni-popup-dialog ref="inputClose" @confirm="confirm" mode="input" class="popup-dialog"
|
||||
borderRadius="20px 20px 20px 20px" beforeClose @close="close" title="审批常用语">
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<u-input v-model="commonWordsText" type="textarea" placeholder="请输入内容" :auto-height="false"
|
||||
maxlength="99999" height="150" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<textarea v-model="commonWordsText" :maxlength="99999" placeholder="请输入内容"
|
||||
style="padding: 20rpx 0; "></textarea>
|
||||
<!-- #endif -->
|
||||
</uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
commonWords,
|
||||
Create,
|
||||
Update,
|
||||
Delete
|
||||
} from "@/api/commonWords.js";
|
||||
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
||||
import resources from '@/libs/resources.js'
|
||||
import SwipeItem from "@/components/SwipeItem/index"
|
||||
export default {
|
||||
mixins: [MescrollMixin],
|
||||
components: {
|
||||
SwipeItem
|
||||
},
|
||||
props: {
|
||||
showCommonWords: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
downOption: {
|
||||
use: true,
|
||||
auto: true
|
||||
},
|
||||
upOption: {
|
||||
page: {
|
||||
num: 0,
|
||||
size: 30,
|
||||
time: null
|
||||
},
|
||||
empty: {
|
||||
use: true,
|
||||
icon: resources.message.nodata,
|
||||
tip: this.$t('common.noData'),
|
||||
fixed: true,
|
||||
top: "360rpx"
|
||||
},
|
||||
textNoMore: this.$t('app.apply.noMoreData')
|
||||
},
|
||||
actionData: [{
|
||||
style: {
|
||||
backgroundColor: '#1890ff'
|
||||
},
|
||||
value: 'edit',
|
||||
text: '编辑'
|
||||
},
|
||||
{
|
||||
style: {
|
||||
backgroundColor: '#F56C6C'
|
||||
},
|
||||
value: 'delete',
|
||||
text: '删除'
|
||||
}
|
||||
],
|
||||
commonWordsText: '',
|
||||
commonWordsData: {},
|
||||
commonWordsList: [],
|
||||
showAdd: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upCallback(page) {
|
||||
const query = {
|
||||
currentPage: page.num,
|
||||
pageSize: page.size,
|
||||
commonWordsType: 1
|
||||
}
|
||||
commonWords(query).then(res => {
|
||||
const curPageData = res.data.list || [] // 当前页数据
|
||||
if (page.num == 1) this.commonWordsList = []; // 第一页需手动制空列表
|
||||
this.mescroll.endSuccess(res.data.list.length);
|
||||
this.commonWordsList = this.commonWordsList.concat(curPageData); //追加新数据
|
||||
}).catch(() => {
|
||||
this.mescroll.endErr();
|
||||
})
|
||||
},
|
||||
bindClick(item) {
|
||||
if (item.btn.value == 'edit') this.editCommonWord(item.item)
|
||||
if (item.btn.value == 'delete') this.delCommonWord(item.item)
|
||||
},
|
||||
editCommonWord(item) {
|
||||
this.$refs.inputDialog.open()
|
||||
let data = {
|
||||
commonWordsText: "",
|
||||
enabledMark: 1,
|
||||
id: 0,
|
||||
sortCode: 0,
|
||||
systemIds: [],
|
||||
systemNames: [],
|
||||
};
|
||||
if (item.id) {
|
||||
this.commonWordsText = item.commonWordsText;
|
||||
this.commonWordsData = {
|
||||
...item,
|
||||
systemIds: [],
|
||||
systemNames: []
|
||||
};
|
||||
} else {
|
||||
this.commonWordsText = "";
|
||||
this.commonWordsData = data;
|
||||
}
|
||||
},
|
||||
delCommonWord(item) {
|
||||
Delete(item.id).then(res => {
|
||||
this.$u.toast(res.msg)
|
||||
this.mescroll.resetUpScroll()
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$refs.inputDialog.close()
|
||||
},
|
||||
confirm() {
|
||||
this.commonWordsData.commonWordsText = this.commonWordsText;
|
||||
this.commonWordsData.commonWordsType = 1
|
||||
if (!this.commonWordsText) return this.$u.toast(`审批常用语不能为空`);
|
||||
let funs = this.commonWordsData.id === 0 ? Create : Update;
|
||||
funs(this.commonWordsData).then((res) => {
|
||||
this.close()
|
||||
this.commonWordsText = "";
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
complete: () => {
|
||||
this.mescroll.resetUpScroll()
|
||||
},
|
||||
});
|
||||
}).catch(() => {
|
||||
this.close()
|
||||
this.mescroll.resetUpScroll()
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.action-item {
|
||||
width: 100%;
|
||||
min-height: 3.6rem;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
padding: 10rpx 20rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
256
pages/my/personalSetting/components/signList.vue
Normal file
256
pages/my/personalSetting/components/signList.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="page_v u-flex-col">
|
||||
<view>
|
||||
<view v-if="show" v-for="(item,index) in signImg" :key="index" :class="item.isDefault ? 'active' : '' "
|
||||
class="lists_box" @longpress="handleTouchStart(item,index)">
|
||||
<view class="signImgBox">
|
||||
<image :src="item.signImg" mode="scaleToFill" class="signImg"></image>
|
||||
</view>
|
||||
<view class="icon-checked-box" v-if="item.isDefault">
|
||||
<view class="icon-checked">
|
||||
<u-icon name="checkbox-mark" color="#fff" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sign-mask" v-if="!item.isDefault && item.isSet" :id="index">
|
||||
<view class="sign-mask-btn">
|
||||
<u-button @click.prevent="del(item.id,index)">删除</u-button>
|
||||
<u-button type="primary" @click.prevent="setDefault(item.id,index)">设为默认</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<JnpfSign ref="signRef" @change="signData" :showBtn="false" />
|
||||
<JnpfEmpty v-if="!show" />
|
||||
</view>
|
||||
<view class="flowBefore-actions">
|
||||
<u-button class="buttom-btn" type="primary" @click='showAction = true'>添加签名</u-button>
|
||||
</view>
|
||||
<u-action-sheet @click="handleAction" :list="actionList" :tips="{ text: '' , color: '#000' , fontSize: 30 }"
|
||||
v-model="showAction">
|
||||
</u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
pathToBase64
|
||||
} from '@/libs/file.js'
|
||||
import {
|
||||
getSignImgList,
|
||||
createSignImg,
|
||||
setDefSignImg,
|
||||
delSignImg
|
||||
} from '@/api/common'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
show: true,
|
||||
signImg: [],
|
||||
isSet: false,
|
||||
showAction: false,
|
||||
actionList: [{
|
||||
text: '在线签名',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
text: '图片上传',
|
||||
id: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
baseURL() {
|
||||
return this.define.comUploadUrl
|
||||
},
|
||||
token() {
|
||||
return uni.getStorageSync('token')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getSignImgList()
|
||||
},
|
||||
methods: {
|
||||
getSignImgList() {
|
||||
getSignImgList().then(res => {
|
||||
let signList = JSON.parse(JSON.stringify(res.data)) || []
|
||||
this.show = signList.length > 0 ? true : false
|
||||
this.signImg = signList.map(o => ({
|
||||
isSet: false,
|
||||
...o
|
||||
}))
|
||||
})
|
||||
},
|
||||
signData(e) {
|
||||
if (e) {
|
||||
let data = {
|
||||
'signImg': e,
|
||||
'isDefault': 0
|
||||
}
|
||||
createSignImg(data).then((res) => {
|
||||
this.getSignImgList()
|
||||
})
|
||||
}
|
||||
},
|
||||
handleTouchStart(item, index) {
|
||||
this.signImg.map((o, i) => {
|
||||
o.isSet = false
|
||||
})
|
||||
item.isSet = true
|
||||
},
|
||||
del(id, index) {
|
||||
delSignImg(id, index).then((res) => {
|
||||
this.signImg.splice(index, 1)
|
||||
})
|
||||
},
|
||||
setDefault(id, index) {
|
||||
let userInfo = uni.getStorageSync('userInfo')
|
||||
setDefSignImg(id).then((res) => {
|
||||
this.signImg.map((o, i) => {
|
||||
o.isDefault = false;
|
||||
if (index == i) {
|
||||
o.isDefault = true
|
||||
o.isSet = false
|
||||
userInfo.signImg = o.signImg
|
||||
uni.setStorageSync('userInfo', userInfo)
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
handleAction(e) {
|
||||
if (e == 0) {
|
||||
this.$refs.signRef.addSign();
|
||||
} else {
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'],
|
||||
success: (res) => {
|
||||
let tempFilePaths = res.tempFilePaths[0]
|
||||
// #ifdef H5
|
||||
let isAccept = new RegExp('image/*').test(res.tempFiles[0].type)
|
||||
if (!isAccept) return this.$u.toast(`请上传图片`)
|
||||
// #endif
|
||||
if ((res.tempFiles[0].size / 1024) > 500) return this.$u.toast('操作失败，图片大小超出500K')
|
||||
// #ifdef APP-HARMONY
|
||||
this.harmony(tempFilePaths)
|
||||
// #endif
|
||||
// #ifndef APP-HARMONY
|
||||
pathToBase64(tempFilePaths).then(base64 => {
|
||||
this.signData(base64)
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
harmony(tempFilePaths) {
|
||||
uni.uploadFile({
|
||||
url: this.baseURL + 'imgToBase64',
|
||||
filePath: tempFilePaths,
|
||||
name: 'file',
|
||||
header: {
|
||||
'Authorization': this.token
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
let res = JSON.parse(uploadFileRes.data)
|
||||
this.signData(res.data)
|
||||
},
|
||||
fail: (err) => {}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f0f2f6;
|
||||
}
|
||||
|
||||
.page_v {
|
||||
height: 100%;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.active {
|
||||
border: 1rpx solid #2979FF;
|
||||
color: #2979FF;
|
||||
|
||||
.icon-ym-organization {
|
||||
&::before {
|
||||
color: #2979FF !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sign-mask {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.sign-mask-btn {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.lists_box {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
border-radius: 8rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-color: #FFFFFF;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.signImgBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
||||
.signImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-checked-box {
|
||||
display: flex;
|
||||
width: 140rpx;
|
||||
height: 80rpx;
|
||||
position: absolute;
|
||||
transform: scale(0.9);
|
||||
right: -4rpx;
|
||||
bottom: -2rpx;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.icon-checked {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border: 40rpx solid #1890ff;
|
||||
border-left: 40rpx solid transparent;
|
||||
border-top: 40rpx solid transparent;
|
||||
border-bottom-right-radius: 12rpx;
|
||||
position: absolute;
|
||||
transform: scale(0.95);
|
||||
right: -8rpx;
|
||||
bottom: -6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
72
pages/my/personalSetting/index.vue
Normal file
72
pages/my/personalSetting/index.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<view class="personalData-v">
|
||||
<view class="notice-warp">
|
||||
<u-tabs :list="tabBars" :is-scroll="false" v-model="current" @change="tabChange" height="100">
|
||||
</u-tabs>
|
||||
</view>
|
||||
<view class="content">
|
||||
<signList ref="signList" v-if="current == 0"></signList>
|
||||
<commonText ref="commonText" v-if="current == 1"></commonText>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import signList from './components/signList.vue';
|
||||
import commonText from './components/commonText.vue';
|
||||
export default {
|
||||
components: {
|
||||
signList,
|
||||
commonText
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabBars: [{
|
||||
name: '个人签名'
|
||||
}, {
|
||||
name: '审批常用语'
|
||||
}],
|
||||
current: 0,
|
||||
baseInfo: {}
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.current = 0
|
||||
this.baseInfo = e.baseInfo && JSON.parse(decodeURIComponent(e.baseInfo))
|
||||
},
|
||||
methods: {
|
||||
tabChange(index) {
|
||||
this.current = index;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f0f2f6;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.notice-warp {
|
||||
height: 100rpx;
|
||||
|
||||
.search-box {
|
||||
padding: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 120rpx;
|
||||
}
|
||||
|
||||
.personalData-v {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 100rpx;
|
||||
|
||||
::v-deep .buttom-btn {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user