rose
4 years ago
6 changed files with 638 additions and 46 deletions
@ -0,0 +1,326 @@ |
|||||
|
<template> |
||||
|
<div class="d-flex flex-wrap pb-3"> |
||||
|
<!-- 添加 --> |
||||
|
<a-modal |
||||
|
:mask-closable="false" |
||||
|
@cancel="$emit('closeModal')" |
||||
|
destroy-on-close |
||||
|
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: 'ContactAdd', |
||||
|
props: { visible: { type: Boolean, default: false }, typeLists: { type: Array, default: () => [] } }, |
||||
|
data() { |
||||
|
return { |
||||
|
formItemLayout, |
||||
|
tailItemLayout, |
||||
|
form: this.$form.createForm(this, { name: 'contact-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> |
||||
@ -0,0 +1,193 @@ |
|||||
|
<template> |
||||
|
<div class="d-flex flex-wrap pb-3"> |
||||
|
<!-- 编辑 --> |
||||
|
<a-modal |
||||
|
:mask-closable="false" |
||||
|
@cancel="$emit('closeModal')" |
||||
|
destroy-on-close |
||||
|
footer |
||||
|
title="修改" |
||||
|
v-model="editVisible" |
||||
|
width="700px" |
||||
|
> |
||||
|
<div>测试能不能进的来</div> |
||||
|
<div>{{ editItem }}</div> |
||||
|
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"> |
||||
|
<a-form-model-item label="Activity name"> |
||||
|
<a-input v-model="form.name" /> |
||||
|
</a-form-model-item> |
||||
|
<a-form-model-item label="Activity zone"> |
||||
|
<a-select v-model="form.region" placeholder="please select your zone"> |
||||
|
<a-select-option value="shanghai"> |
||||
|
Zone one |
||||
|
</a-select-option> |
||||
|
<a-select-option value="beijing"> |
||||
|
Zone two |
||||
|
</a-select-option> |
||||
|
</a-select> |
||||
|
</a-form-model-item> |
||||
|
<a-form-model-item label="Activity time"> |
||||
|
<a-date-picker |
||||
|
v-model="form.date1" |
||||
|
show-time |
||||
|
type="date" |
||||
|
placeholder="Pick a date" |
||||
|
style="width: 100%;" |
||||
|
/> |
||||
|
</a-form-model-item> |
||||
|
<a-form-model-item label="Instant delivery"> |
||||
|
<a-switch v-model="form.delivery" /> |
||||
|
</a-form-model-item> |
||||
|
<a-form-model-item label="Activity type"> |
||||
|
<a-checkbox-group v-model="form.type"> |
||||
|
<a-checkbox value="1" name="type"> |
||||
|
Online |
||||
|
</a-checkbox> |
||||
|
<a-checkbox value="2" name="type"> |
||||
|
Promotion |
||||
|
</a-checkbox> |
||||
|
<a-checkbox value="3" name="type"> |
||||
|
Offline |
||||
|
</a-checkbox> |
||||
|
</a-checkbox-group> |
||||
|
</a-form-model-item> |
||||
|
<a-form-model-item label="Resources"> |
||||
|
<a-radio-group v-model="form.resource"> |
||||
|
<a-radio value="1"> |
||||
|
Sponsor |
||||
|
</a-radio> |
||||
|
<a-radio value="2"> |
||||
|
Venue |
||||
|
</a-radio> |
||||
|
</a-radio-group> |
||||
|
</a-form-model-item> |
||||
|
<a-form-model-item label="Activity form"> |
||||
|
<a-input v-model="form.desc" type="textarea" /> |
||||
|
</a-form-model-item> |
||||
|
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }"> |
||||
|
<a-button type="primary" @click="onSubmit"> |
||||
|
Create |
||||
|
</a-button> |
||||
|
<a-button style="margin-left: 10px;"> |
||||
|
Cancel |
||||
|
</a-button> |
||||
|
</a-form-model-item> |
||||
|
</a-form-model> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { upload, selInstrumentUpdate } 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: 'ContactEdit', |
||||
|
props: { |
||||
|
editVisible: { type: Boolean, default: false }, |
||||
|
typeLists: { type: Array, default: () => [] }, |
||||
|
editItem: { type: Object, default: () => {} }, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
formItemLayout, |
||||
|
tailItemLayout, |
||||
|
types: [], |
||||
|
labelCol: { span: 4 }, |
||||
|
wrapperCol: { span: 14 }, |
||||
|
form: { |
||||
|
name: '', |
||||
|
region: undefined, |
||||
|
date1: undefined, |
||||
|
delivery: false, |
||||
|
type: [], |
||||
|
resource: '', |
||||
|
desc: '', |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
oldTypes() { |
||||
|
const { typeLists, editItem } = this; |
||||
|
let arr = []; |
||||
|
for (let i = 0; i < typeLists.length; i++) { |
||||
|
const item = typeLists[i]; |
||||
|
const a = editItem.info.names.findIndex(a => a === item.name); |
||||
|
const index = arr.findIndex(c => c === a); |
||||
|
if (a !== -1 && index === -1) { |
||||
|
arr.push(item.id); |
||||
|
} |
||||
|
} |
||||
|
return arr; |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
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, editItem } = this; |
||||
|
// const params = { param: values }; |
||||
|
// params.param.id = editItem.id; |
||||
|
// params.param.picId = fileList[0]; |
||||
|
// const res = await selInstrumentUpdate(params); |
||||
|
// const { data, msg, code } = res.data; |
||||
|
// // 清除新建项目标志数据 |
||||
|
// if (code === 200) { |
||||
|
// this.$message.success('修改成功'); |
||||
|
// this.$emit('selInstrumentSearch'); |
||||
|
// } else { |
||||
|
// this.$message.error('修改失败'); |
||||
|
// throw msg; |
||||
|
// } |
||||
|
// this.$emit('closeModal'); |
||||
|
// } catch (error) { |
||||
|
// this.$emit('closeModal'); |
||||
|
// this.$message.error(error || '修改失败'); |
||||
|
// } |
||||
|
// } |
||||
|
// }); |
||||
|
// }, |
||||
|
|
||||
|
onSubmit() { |
||||
|
console.log('submit!', this.form); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="stylus"></style> |
||||
Loading…
Reference in new issue