dgtis-uniapp/pages/oa/universal/formCreate.vue

<template>
	<view class="container">
		<uni-forms ref="form" :rules="rules" :model="form" labelWidth="80px" :label-position="alignment">
			<uni-forms-item label="申请人">
				<uni-easyinput v-model="form.employeeName" disabled />
			</uni-forms-item>
			<uni-forms-item label="部门">
				<uni-easyinput v-model="form.deptName" disabled />
			</uni-forms-item>
			<uni-forms-item label="职位">
				<uni-easyinput v-model="form.position" disabled />
			</uni-forms-item>
			<uni-forms-item label="手机号">
				<uni-easyinput v-model="form.employeePhone" disabled />
			</uni-forms-item>
			<uni-forms-item label="事项标题" required name="title">
				<uni-easyinput maxlength="20" v-model="form.title" placeholder="请输入申请的简要标题" />
			</uni-forms-item>
			<uni-forms-item label="详细描述" required name="description">
				<uni-easyinput maxlength="200" type="textarea" v-model="form.description" placeholder="请输入详细描述" />
			</uni-forms-item>
			<uni-forms-item label="附件">
				<view class="upload-wrap">
					<button type="primary" size="mini" @click="handleUploadClick">点击上传</button>
					<xe-upload ref="XeUpload" :options="uploadOptions" @callback="handleUploadCallback"></xe-upload>
					<view class="mgb-16 file-wrap" v-for="(item, index) in fileList" :key="index">
					  <view class="btn-click file-line" @click="handlePreview(item)">
					    <view class="file-info">
					      <image :src="icons.file" mode="aspectFill" class="file-icon" />
					      <text class="file-name">{{ item.name || title[type] }}</text>
					    </view>
					    <image :src="icons.close" mode="aspectFill" class="file-icon"
					      @click.stop="handleDeleteFile(index)" />
					  </view>
					</view>
				</view>
				
			</uni-forms-item>
			<uni-forms-item label="备注">
				<uni-easyinput maxlength="200" type="textarea" v-model="form.remarks" placeholder="请输入备注" />
			</uni-forms-item>
		</uni-forms>
		<view class="button-group">
			<button type="primary" size="mini" @click="submit('form')">提交</button>
		</view>
	</view>
</template>

<script>
  	import { uploadFile } from "@/api/system/user"
	export default {
		data() {
			return {
				alignment:'top',
				uploadOptions: {},
				fileList: [],
				icons: {
				  close: '/static/icon_close.png',
				  file: '/static/icon_file.png',
				},
				// 表单数据
				form: {
					employeeName: undefined,
					deptName: undefined,
					position: undefined,
					employeePhone: undefined,
					title: undefined,
					fileIdList: undefined,
					remarks: undefined,
					peopleList: '',
				},
				// 校验规则
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '请输入申请的简要标题'
						}, ]
					},
					description: {
						rules: [{
							required: true,
							errorMessage: '请输入详细描述'
						}, ]
					}
				},
			}
		},
		onLoad() {},
		methods: {
			handleUploadClick() {
			  this.$refs.XeUpload.upload('file');
			},
			handleUploadCallback(e) {
			  console.log('UploadCallback', e);
			  let data = { filePath: e.data[0].tempFilePath}
			  uploadFile(data).then(response => {
				const tmpFiles = ([response.data] || []).map(({ id, url, name, type }) => {
				  return {
					id,
				    url,
				    name,
				    type,
				  };
				});
				this.fileList.push(...tmpFiles);
			  })
			},
			// 预览
			handlePreview(val) {
			  console.log('PreviewFile', val);
			  if (val.type == 'image/png' || val.type == 'image/jpg') {
			    return uni.previewImage({
			      current: 0,
			      urls: [val.url],
			    });
			  }else{
				  
			  }
			},
			handleDeleteFile(index) {
			  this.fileList.splice(index, 1);
			},
			submit(ref) {
				console.log(this.form);
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>
<style lang="scss" scoped>
.btn-click {
  transition: all 0.3s;
  opacity: 1;
}

.btn-click:active {
  opacity: 0.5;
}

.mgb-16 {
  margin-bottom: 16rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.upload-wrap {
  width: 100%;
  border-radius: 16rpx;
  background: white;
  // padding: 32rpx;

  .upload-btn {
    width: 100%;
    height: 176rpx;
    border: 2rpx dashed #AAAAAA;
    background: #FAFAFA;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .upload-icon {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 8rpx;
    }

    .upload-text {
      font-size: 26rpx;
      color: #9E9E9E;
      line-height: 40rpx;
    }
  }

  .file-wrap {
    .file-line {
      width: 100%;
      background: #F5F5F5;
      border-radius: 8rpx;
      padding: 16rpx;
      font-size: 26rpx;
      color: #1A1A1A;
      line-height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .file-info {
        width: 90%;
        display: flex;
        align-items: center;

        .file-name {
          max-width: 80%;
          padding-left: 16rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .file-icon {
        width: 40rpx;
        height: 40rpx;
        flex-shrink: 0;
      }

      .file-empty {
        color: #999999;
      }
    }
  }
}
</style>