161 lines
4.1 KiB
Vue
161 lines
4.1 KiB
Vue
<!--
|
||
* @Author: zwq
|
||
* @Date: 2020-12-29 16:37:56
|
||
* @LastEditors: lb
|
||
* @LastEditTime: 2022-04-24 16:31:46
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<el-dialog
|
||
:visible.sync="visible"
|
||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||
:append-to-body="true"
|
||
width="30%"
|
||
class="dialog"
|
||
:close-on-click-modal="false"
|
||
@close="close"
|
||
>
|
||
<!-- <small-title slot="title">
|
||
{{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
|
||
</small-title> -->
|
||
|
||
<el-form
|
||
ref="dataForm"
|
||
class="dataForm"
|
||
:model="dataForm"
|
||
:rules="dataRules"
|
||
@keyup.enter.native="dataFormSubmit()"
|
||
>
|
||
<!-- label-width="100px" -->
|
||
<!-- 属性名 -->
|
||
<el-form-item :label="$t('module.basicData.equipment.AttributeName')" prop="attrName">
|
||
<el-input
|
||
v-model="dataForm.attrName"
|
||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.AttributeName')])"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
|
||
<!-- 属性值 -->
|
||
<el-form-item :label="$t('module.basicData.equipment.AttributeValue')" prop="attrValue">
|
||
<el-input
|
||
v-model="dataForm.attrValue"
|
||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.AttributeValue')])"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
|
||
<!-- 备注 -->
|
||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||
<el-input
|
||
v-model="dataForm.remark"
|
||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<el-row style="text-align: right">
|
||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||
<el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">
|
||
{{ 'btn.confirm' | i18nFilter }}
|
||
</el-button>
|
||
</el-row>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import { detail, update, add } from '@/api/basicData/Equipment/equipmentInfoAttr'
|
||
// import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||
|
||
export default {
|
||
components: {},
|
||
props: {
|
||
equipmentId: {
|
||
type: String,
|
||
default: () => {
|
||
return ''
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
visible: false,
|
||
btnLoading: false,
|
||
dataForm: {
|
||
id: 0,
|
||
attrName: '',
|
||
attrValue: '',
|
||
remark: ''
|
||
},
|
||
dataRules: {
|
||
attrName: [
|
||
{
|
||
required: true,
|
||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.AttributeName')]),
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
attrValue: [
|
||
{
|
||
required: true,
|
||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.AttributeValue')]),
|
||
trigger: 'blur'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
init(id) {
|
||
this.dataForm.id = id || ''
|
||
this.btnLoading = false
|
||
this.visible = true
|
||
this.$nextTick(() => {
|
||
this.$refs['dataForm'].resetFields()
|
||
if (this.dataForm.id) {
|
||
detail(this.dataForm.id).then(res => {
|
||
this.dataForm = res.data
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 表单提交
|
||
dataFormSubmit() {
|
||
this.btnLoading = true
|
||
this.$refs['dataForm'].validate(valid => {
|
||
if (valid) {
|
||
const ajaxAction = this.dataForm.id ? update : add
|
||
// 需要额外参数：equipmentId
|
||
ajaxAction({ ...this.dataForm, equipmentId: this.equipmentId }).then(res => {
|
||
this.$message({
|
||
message: this.$t('module.basicData.visual.success'),
|
||
type: 'success',
|
||
duration: 1500,
|
||
onClose: () => {
|
||
this.visible = false
|
||
this.$emit('refreshDataList')
|
||
}
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
close() {
|
||
this.visible = false
|
||
this.$emit('refreshDataList')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dialog >>> .el-dialog__body {
|
||
padding: 30px 24px;
|
||
}
|
||
|
||
.dialog >>> .el-form-item__label {
|
||
word-break: break-word;
|
||
}
|
||
</style>
|