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