<template>
|
<div class="file-upload">
|
<a-row type="flex" class="row">
|
<a-col flex="5em" class="label">文件</a-col>
|
<a-col :flex="1">
|
<a-upload
|
class="upload"
|
:before-upload="beforeUpload"
|
@change="uploadChange"
|
accept=".doc,.docx">
|
<a-button type="primary">选择文件</a-button>
|
</a-upload>
|
</a-col>
|
</a-row>
|
<div style="height: 16px;"></div>
|
<a-form-model ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
|
<a-row :gutter="16">
|
<a-col :span="12">
|
<a-form-model-item label="名称：" prop="title">
|
<a-input v-model="form.title" allow-clear></a-input>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="版本号：" prop="title">
|
<a-input v-model="form.title" allow-clear></a-input>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="项目负责人：" prop="personCharge">
|
<a-select
|
placeholder=""
|
:value="form.personCharge"
|
style="width: 100%"
|
allow-clear
|
@change="handleChange">
|
<a-select-option v-for="item in filteredOptions" :key="item.name" :value="item.name" :disabled="!item.isHasMail">
|
{{ item.name }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="编制：" prop="mailList">
|
<a-select
|
placeholder=""
|
:value="selectedItems"
|
style="width: 100%"
|
allow-clear
|
@change="handleChange">
|
<a-select-option v-for="item in filteredOptions" :key="item.name" :value="item.name" :disabled="!item.isHasMail">
|
{{ item.name }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="制造：" prop="mailList">
|
<a-select
|
placeholder=""
|
:value="selectedItems"
|
style="width: 100%"
|
allow-clear
|
@change="handleChange">
|
<a-select-option v-for="item in filteredOptions" :key="item.name" :value="item.name" :disabled="!item.isHasMail">
|
{{ item.name }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="品保：" prop="mailList">
|
<a-select
|
placeholder=""
|
:value="selectedItems"
|
style="width: 100%"
|
allow-clear
|
@change="handleChange">
|
<a-select-option v-for="item in filteredOptions" :key="item.name" :value="item.name" :disabled="!item.isHasMail">
|
{{ item.name }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-model-item :label-col="{span:3}" :wrapper-col="{span:21}" label="文件说明：" prop="mailList">
|
<a-textarea placeholder="请输入文件说明" :rows="6" />
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
<div class="form-footer">
|
<a-button type="primary" @click="checkForm">确认上传</a-button>
|
</div>
|
</a-form-model>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "fileUpload",
|
props: {
|
users: {
|
type: Array,
|
default() {
|
return []
|
}
|
}
|
},
|
data() {
|
return {
|
labelCol: { span: 6 },
|
wrapperCol: { span: 18 },
|
form: {
|
personCharge: [],
|
title: "",
|
content: "",
|
},
|
rules: {},
|
selectedItems: [],
|
}
|
},
|
methods: {
|
beforeUpload() {
|
return false;
|
},
|
uploadChange(data) {
|
const { file, fileList } = data;
|
if (fileList.length > 1) {
|
fileList.shift();
|
}
|
if (fileList.length) {
|
this.file = fileList[0].originFileObj;
|
} else {
|
this.file = null;
|
}
|
},
|
handleChange(selectedItems) {
|
this.selectedItems = selectedItems;
|
let users = this.users;
|
let mailList = users.filter(o => this.selectedItems.includes(o.name));
|
this.form.mailList = mailList;
|
// console.log(this.form.mailList);
|
},
|
checkForm() {
|
|
}
|
},
|
computed: {
|
filteredOptions() {
|
let users = this.users;
|
return users.filter(o => !this.selectedItems.includes(o.name)).map(o=> {
|
o.isHasMail = o.mail?true:false;
|
return o;
|
});
|
},
|
},
|
mounted() {
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.label {
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
padding-right: 0.4em;
|
height: 32px;
|
&::after {
|
content: ":";
|
}
|
}
|
.form-footer {
|
text-align: right;
|
}
|
</style>
|
