aiot-app/pages/saleManage/businessOpportunity/components/personnelList.vue

<template>
	<view class="mainBox">
		<view v-for="(item, index) in tableList" :key="index" style="position: relative;">
			<myCard :item="item" :btnList="btnList" :index="index+1" :columns="columns" @del="del(index)">
				<uni-data-picker slot="linkId" v-model="item.linkId" placeholder="请选择" :localdata="linkList"
					:map="{text:'linkName',value:'id'}" @change="linkChange(item)">
				</uni-data-picker>
				<u--input placeholder="请输入" slot="goal" v-model="item.goal">
				</u--input>

				<uni-data-picker slot="influenceCode" v-model="item.influenceCode" @change="influenceChange(item)"
					placeholder="请选择" :localdata="influence_level_code">
				</uni-data-picker>
				<uni-data-picker slot="attitudeCode" v-model="item.attitudeCode" @change="attitudeChange(item)"
					placeholder="请选择" :localdata="attittude_code">
				</uni-data-picker>
			</myCard>

		</view>

		<u-toast ref="uToast"></u-toast>
		<view class="add" @click="add('add')">
			<u-icon name="plus" color="#fff"></u-icon>
		</view>
		<view style="height: 84rpx;" v-if="isDrawer"></view>
		<view class="footerButton" v-if="isDrawer">
			<u-button type="primary" @click="save" text="保存"></u-button>
		</view>

	</view>
</template>

<script>
	import {
		getByCode
	} from '@/api/pda/common.js'
	import myCard from '../../components/myCard.vue'
	export default {
		components: {
			myCard,
		},

		data() {
			return {
				tableList: [],
				btnList: [{
					name: '删除',
					apiName: 'del',
					btnType: 'error ',
					type: '2',
					pageUrl: '',

				}],
				columns: [
					[{
						label: '姓名：',
						prop: 'linkId',
						slot: 'linkId',

					}, {
						label: '职位：',
						prop: 'linkPost',
					}],
					[{
						label: '联系方式：',
						prop: 'linkMobilePhone',

					}],
					[{
						label: '影响力：',
						prop: 'influenceCode',
						slot: 'influenceCode',

					}, {
						label: '态度：',
						prop: 'attitudeCode',
						slot: 'attitudeCode',
					}],
					[{
						label: '项目目标/期望：',
						prop: 'goal',
						slot: 'goal',
						className: 'perce100',
					}],
					[{
						label: '操作：',
						prop: 'action',
						type: 'action',
						className: 'perce100',
					}],
				],
				influence_level_code: [],
				attittude_code: []
			}
		},
		props: {

			linkList: {
				default: []
			},
			isDrawer: {
				default: false
			}
		},
		created() {
			this.getByCode()
		},
		methods: {
			init(list) {
				if (list) {
					this.tableList = JSON.parse(JSON.stringify(list))
				}
			},

			del(index) {
				this.tableList.splice(index, 1);
			},
			getValue() {
				return this.tableList
			},
			getByCode() {
				const codeS = ['influence_level_code', 'attittude_code']
				codeS.forEach(async (code) => {
					const codeValue = await getByCode(code);
					this[code] = codeValue.map(item => {
						const key = Object.keys(item)[0]
						return {
							value: key,
							text: item[key]
						}
					})
				})

			},
			linkChange(e) {
				const data = this.linkList.find(item => item.id == e.linkId)
				e.linkPost = data.post
				e.linkMobilePhone = data.mobilePhone
			},
			attitudeChange(e) {
				const data = this.attittude_code.find(item => item.value == e.attitudeCode)
				e.attitudeName = data.text

			},
			influenceChange(e) {
				const data = this.influence_level_code.find(item => item.value == e.influenceCode)
				e.influenceName = data.text
			},

			save() {
				uni.$emit('setBusinessOpportunity')
			},
			add() {
				if (this.linkList.length == 0) {
					this.$refs.uToast.show({
						type: "error",
						message: "请先选择客户",
					})
					return
				}

				this.tableList.push({
					key: null,
					linkId: '',
					linkPost: '',
					linkMobilePhone: '',
					goal: '',
					influenceCode: '',
					influenceName: '',
					attitudeCode: '',
					attitudeName: ''
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.add {
		width: 96rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background: #3c9cff;
		position: fixed;
		bottom: 100rpx;
		right: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}

	.footerButton {
		width: 100%;
		height: 84rpx;
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 10;

		/deep/.u-button {
			height: 100%;
		}
		>view {
			flex: 1;

		}
	}

	.item {
		display: flex;
		flex-direction: column;
		padding: 16rpx;

		>view {
			padding-top: 14rpx;
		}

		.item_title {
			font-size: 32rpx;
			font-weight: 800;
			display: flex;
			align-items: center;

			.u-icon {
				margin-left: 12rpx;
			}
		}

		.item_list {
			display: flex;
			align-items: center;

			text {
				font-size: 28rpx;
			}

			.lable {
				color: #626060;
			}

			.value {
				color: #333;
				margin-left: 12rpx;
				flex: 1
			}
		}
	}

	/deep/.u-swipe-action-item__right__button__wrapper {
		background-color: #f56c6c !important;
	}

	/deep/.u-input {
		padding: 0 !important;
	}
</style>