194 lines
6.6 KiB
Vue
194 lines
6.6 KiB
Vue
<template>
|
||
<!-- 小型弹窗，用于完成，删除，保存等操作 -->
|
||
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
|
||
:closeOnClickModal="false" @close="handleClose" :append-to-body="true">
|
||
<div>
|
||
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px">
|
||
<el-form-item label="数据分类类型" prop="dataClassType">
|
||
<el-select class="form-item" v-model="form.dataClassType" filterable clearable
|
||
placeholder="请选择数据分类类型">
|
||
<el-option v-for="item in dict.type.data_class_type" :key="item.value" :label="item.label"
|
||
:value="item.label"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="数据类型名称" prop="dataTypeName">
|
||
<el-input class="form-item" v-model="form.dataTypeName" clearable show-word-limit
|
||
placeholder="请输入数据类型名称" maxlength="32"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" class="form-item"
|
||
v-model="form.remark" clearable show-word-limit placeholder="请输入备注" maxlength="255"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
|
||
<el-button type="primary" class="search-btn" :disabled="disabled"
|
||
@click="submitForm('ruleForm')">确认</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</template>
|
||
<script>
|
||
import _ from 'lodash'
|
||
import {
|
||
addDataClassAPI,
|
||
updateDataClassAPI,
|
||
} from '@/api/data-collect/data-class-manage'
|
||
export default {
|
||
name: "DataClassForm",
|
||
props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
|
||
dicts: ['data_class_type'],
|
||
data() {
|
||
return {
|
||
lDialog: this.width > 500 ? "w700" : "w500",
|
||
dialogVisible: true,
|
||
isDisabled: true,
|
||
form: {
|
||
dataClassType: null,
|
||
dataTypeName: '',
|
||
remark: '',
|
||
},
|
||
loading: null,
|
||
rules: {
|
||
dataClassType: [
|
||
{ required: true, message: '请选择数据分类类型', trigger: 'change' }
|
||
],
|
||
dataTypeName: [
|
||
{ required: true, message: '数据类型名称不能为空', trigger: 'blur' }
|
||
],
|
||
},
|
||
};
|
||
},
|
||
created() {
|
||
this.initFormData();
|
||
},
|
||
methods: {
|
||
/** 初始化表单数据 */
|
||
initFormData() {
|
||
if (this.isAdd === 'edit' && this.rowData) {
|
||
// 编辑模式：填充表单数据
|
||
this.form = {
|
||
id: this.rowData.id,
|
||
dataClassType: this.rowData.dataClassType || '',
|
||
dataTypeName: this.rowData.dataTypeName || '',
|
||
remark: this.rowData.remark || '',
|
||
};
|
||
} else {
|
||
// 新增模式：重置表单
|
||
this.form = {
|
||
dataClassType: null,
|
||
dataTypeName: '',
|
||
remark: '',
|
||
};
|
||
}
|
||
},
|
||
/*关闭弹窗 */
|
||
handleClose() {
|
||
this.dialogVisible = false;
|
||
this.$emit("closeDialog");
|
||
setTimeout(() => {
|
||
this.dialogVisible = true;
|
||
});
|
||
},
|
||
/**确认弹窗 */
|
||
sureBtnClick() {
|
||
this.dialogVisible = false;
|
||
this.$emit("closeDialog");
|
||
setTimeout(() => {
|
||
this.dialogVisible = true;
|
||
});
|
||
},
|
||
/**重置表单*/
|
||
reset() {
|
||
this.form = {
|
||
id: null,
|
||
dataClassType: null,
|
||
dataTypeName: '',
|
||
remark: '',
|
||
};
|
||
this.resetForm("ruleForm");
|
||
},
|
||
handleReuslt(res) {
|
||
this.$modal.msgSuccess(res.msg);
|
||
this.reset();
|
||
this.$emit('handleQuery');
|
||
this.handleClose();
|
||
},
|
||
/**验证 */
|
||
submitForm(formName) {
|
||
this.$refs[formName].validate(valid => {
|
||
if (valid) {
|
||
// 显示遮罩层
|
||
this.loading = this.$loading({
|
||
lock: true,
|
||
text: "数据提交中，请稍候...",
|
||
background: 'rgba(0,0,0,0.5)',
|
||
target: this.$el.querySelector('.el-dialog') || document.body
|
||
})
|
||
let params = _.cloneDeep(this.form);
|
||
if (this.isAdd === 'add') {
|
||
addDataClassAPI(params).then(res => {
|
||
this.loading.close();
|
||
if (res.code === 200) {
|
||
this.handleReuslt(res);
|
||
} else {
|
||
this.$modal.msgError(res.msg);
|
||
}
|
||
}).catch(error => {
|
||
this.loading.close();
|
||
// this.$modal.msgError('提交失败，请重试');
|
||
});
|
||
} else {
|
||
updateDataClassAPI(params).then(res => {
|
||
this.loading.close();
|
||
if (res.code === 200) {
|
||
this.handleReuslt(res);
|
||
} else {
|
||
this.$modal.msgError(res.msg);
|
||
}
|
||
}).catch(error => {
|
||
this.loading.close();
|
||
// this.$modal.msgError('提交失败，请重试');
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.w700 .el-dialog {
|
||
width: 700px;
|
||
}
|
||
|
||
.w500 .el-dialog {
|
||
width: 500px;
|
||
}
|
||
|
||
.w500 .el-dialog__header,
|
||
.w700 .el-dialog__header {
|
||
// background: #eeeeee;
|
||
|
||
.el-dialog__title {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.yxq .el-range-separator {
|
||
margin-right: 7px !important;
|
||
}
|
||
|
||
.el-date-editor--daterange.el-input__inner {
|
||
width: 260px;
|
||
}
|
||
|
||
.form-item {
|
||
width: 100%;
|
||
}
|
||
|
||
.select-style {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
</style> |