You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
326 lines
9.2 KiB
326 lines
9.2 KiB
<template>
|
|
<div class="d-flex flex-wrap pb-3">
|
|
<!-- 添加 -->
|
|
<a-modal
|
|
:maskClosable="false"
|
|
@cancel="$emit('closeModal')"
|
|
destroyOnClose
|
|
footer
|
|
title="添加仪器"
|
|
v-model="visible"
|
|
width="700px"
|
|
>
|
|
<a-form :form="form" @submit="handleSubmit">
|
|
<!-- 仪器中文名 -->
|
|
<a-form-item
|
|
:label-col="formItemLayout.labelCol"
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
label="仪器中文名"
|
|
>
|
|
<a-input
|
|
placeholder="仪器中文名"
|
|
v-decorator="[
|
|
'name',
|
|
{
|
|
rules: [
|
|
{ required: true, message: '仪器中文名不能为空' },
|
|
{ whitespace: true, message: '仪器中文名不能为空' },
|
|
{ max: 140, massage: '仪器中文名最多140个字符' },
|
|
],
|
|
},
|
|
]"
|
|
/>
|
|
</a-form-item>
|
|
<!-- 仪器英文名 -->
|
|
<a-form-item
|
|
:label-col="formItemLayout.labelCol"
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
label="仪器英文名"
|
|
>
|
|
<a-input
|
|
placeholder="仪器英文名"
|
|
v-decorator="[
|
|
'englishname'
|
|
]"
|
|
/>
|
|
</a-form-item>
|
|
<!-- 国别 -->
|
|
<a-form-item
|
|
:label-col="formItemLayout.labelCol"
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
label="国别"
|
|
>
|
|
<a-input
|
|
placeholder="国别"
|
|
v-decorator="[
|
|
'countries'
|
|
]"
|
|
/>
|
|
</a-form-item>
|
|
<!-- 设备所属 -->
|
|
<a-form-item
|
|
:label-col="formItemLayout.labelCol"
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
label="设备所属"
|
|
>
|
|
<a-input
|
|
placeholder="设备所属"
|
|
v-decorator="[
|
|
'belonging'
|
|
]"
|
|
/>
|
|
</a-form-item>
|
|
<!-- 编号 -->
|
|
<a-form-item
|
|
:label-col="formItemLayout.labelCol"
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
label="编号"
|
|
>
|
|
<a-input
|
|
placeholder="编号"
|
|
v-decorator="[
|
|
'identifier'
|
|
]"
|
|
/>
|
|
</a-form-item>
|
|
<!-- 制造商 -->
|
|
<a-form-item
|
|
:label-col="formItemLayout.labelCol"
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
label="制造商"
|
|
>
|
|
<a-input
|
|
placeholder="制造商"
|
|
v-decorator="[
|
|
'manufactor'
|
|
]"
|
|
/>
|
|
</a-form-item>
|
|
<!-- 型号 -->
|
|
<a-form-item
|
|
:label-col="formItemLayout.labelCol"
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
label="型号"
|
|
>
|
|
<a-input
|
|
placeholder="型号"
|
|
v-decorator="[
|
|
'model'
|
|
]"
|
|
/>
|
|
</a-form-item>
|
|
<!-- 类型 -->
|
|
<a-form-item
|
|
:label-col="formItemLayout.labelCol"
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
label="类型"
|
|
>
|
|
<a-checkbox-group
|
|
v-decorator="[
|
|
'modelIds',
|
|
{
|
|
rules: [
|
|
{ required: true, message: '类型不能为空' },
|
|
],
|
|
},
|
|
]"
|
|
>
|
|
<a-checkbox :key="item.id" :value="item.id" v-for="item in typeLists">{{ item.name }}</a-checkbox>
|
|
</a-checkbox-group>
|
|
</a-form-item>
|
|
<!-- 价格 -->
|
|
<a-form-item
|
|
:label-col="formItemLayout.labelCol"
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
label="价格（万元）"
|
|
>
|
|
<a-input
|
|
placeholder="价格（万元）"
|
|
v-decorator="[
|
|
'money'
|
|
]"
|
|
/>
|
|
</a-form-item>
|
|
<!-- 性能指标 -->
|
|
<a-form-item
|
|
:label-col="formItemLayout.labelCol"
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
label="性能指标"
|
|
>
|
|
<a-input
|
|
placeholder="性能指标"
|
|
v-decorator="[
|
|
'performance'
|
|
]"
|
|
/>
|
|
</a-form-item>
|
|
<!-- 图片 -->
|
|
<a-form-item
|
|
:label-col="formItemLayout.labelCol"
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
label="图片"
|
|
>
|
|
<a-upload
|
|
:action="upload"
|
|
:before-upload="beforeUpload"
|
|
@change="handleChange"
|
|
list-type="picture"
|
|
name="files"
|
|
v-decorator="[
|
|
'picId',
|
|
{
|
|
rules: [
|
|
{ required: true, message: '图片不能为空' },
|
|
],
|
|
},
|
|
]"
|
|
>
|
|
<a-button v-show="fileList.length - 0 === 0">
|
|
<a-icon type="upload" />选择图片
|
|
</a-button>
|
|
</a-upload>
|
|
</a-form-item>
|
|
<!-- 规格 -->
|
|
<a-form-item
|
|
:label-col="formItemLayout.labelCol"
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
label="规格"
|
|
>
|
|
<a-input
|
|
placeholder="规格"
|
|
v-decorator="[
|
|
'specifications'
|
|
]"
|
|
/>
|
|
</a-form-item>
|
|
<!-- 所属单位 -->
|
|
<a-form-item
|
|
:label-col="formItemLayout.labelCol"
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
label="所属单位"
|
|
>
|
|
<a-select
|
|
placeholder="所属单位"
|
|
style="width:100%"
|
|
v-decorator="[
|
|
'research'
|
|
]"
|
|
>
|
|
<a-select-option
|
|
:key="index"
|
|
:value="type.id"
|
|
v-for="(type, index) in types"
|
|
>{{ type.name }}</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<!-- 用途 -->
|
|
<a-form-item
|
|
:label-col="formItemLayout.labelCol"
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
label="用途"
|
|
>
|
|
<a-textarea
|
|
placeholder="用途"
|
|
v-decorator="['purpose',{
|
|
rules: [
|
|
{ required: true, message: '用途不能为空' },
|
|
],
|
|
},]"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<a-form-item class="d-flex flex-row-reverse">
|
|
<a-button @click="$emit('closeModal')" class="mr-3">取消</a-button>
|
|
<a-button class="white--text" html-type="submit" type="primary">保存</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { upload, selInstrumentAdd } from 'config/api';
|
|
import { mapActions } from 'vuex';
|
|
|
|
const formItemLayout = {
|
|
labelCol: { span: 6 },
|
|
wrapperCol: { span: 16 },
|
|
};
|
|
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } };
|
|
|
|
export default {
|
|
name: 'TransferAdd',
|
|
props: { visible: { type: Boolean, default: false }, typeLists: { type: Array, default: () => [] } },
|
|
data() {
|
|
return {
|
|
formItemLayout,
|
|
tailItemLayout,
|
|
form: this.$form.createForm(this, { name: 'transfer-add' }),
|
|
upload: upload,
|
|
fileList: [],
|
|
//限制文件上传的格式和大小
|
|
beforeUpload: file => {
|
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
|
if (!isJpgOrPng) {
|
|
this.$message.error('仅支持 JPG/PNG 格式的图片!');
|
|
}
|
|
return isJpgOrPng;
|
|
},
|
|
types: [],
|
|
};
|
|
},
|
|
|
|
async created() {
|
|
const params = {
|
|
param: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
model: 2,
|
|
},
|
|
};
|
|
this.types = await this.getSelModelSearch(params);
|
|
},
|
|
|
|
methods: {
|
|
...mapActions(['getSelModelSearch']),
|
|
|
|
// 上传图片
|
|
handleChange(info) {
|
|
if (info.file.status === 'done') {
|
|
this.fileList.push(info.file.response.data[0].id);
|
|
} else if (info.file.status === 'removed') {
|
|
this.fileList = info.fileList;
|
|
}
|
|
},
|
|
|
|
// 提交表单
|
|
handleSubmit(e) {
|
|
e.preventDefault();
|
|
this.form.validateFieldsAndScroll(async (err, values) => {
|
|
if (!err) {
|
|
try {
|
|
const { fileList } = this;
|
|
const params = { param: values };
|
|
params.param.picId = fileList[0];
|
|
const res = await selInstrumentAdd(params);
|
|
const { data, msg, code } = res.data;
|
|
// 清除新建项目标志数据
|
|
if (code === 200) {
|
|
this.$message.success('添加成功');
|
|
this.$emit('handleTableChange');
|
|
} else {
|
|
throw msg;
|
|
}
|
|
this.$emit('closeModal');
|
|
} catch (error) {
|
|
this.$emit('closeModal');
|
|
this.$message.error(error || '添加仪器失败');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="stylus"></style>
|
|
|