jnpf-app-vue3-v6x/pages/my/personalSetting/components/commonText.vue

<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>