196 lines
6.7 KiB
Vue
196 lines
6.7 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="encryptName">
|
||
<el-input class="form-item" v-model="form.encryptName" clearable show-word-limit
|
||
placeholder="请输入档案加密名称" maxlength="20"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="档案加密类型" prop="encryptType" style="width: 100%;">
|
||
<el-select class="form-item" v-model="form.encryptType" filterable clearable
|
||
placeholder="请选择档案加密类型">
|
||
<el-option v-for="item in dict.type.file_encryption_type" :key="item.value" :label="item.label"
|
||
:value="item.label"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="档案加密参数" prop="encryptParams">
|
||
<el-input class="form-item" v-model="form.encryptParams" clearable show-word-limit
|
||
placeholder="请输入档案加密参数" maxlength="32"></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 {
|
||
addWhiteAPI,
|
||
updateWhiteAPI,
|
||
} from '@/api/system/white'
|
||
export default {
|
||
name: "WhiteForm",
|
||
dicts: ['file_encryption_type'],
|
||
props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
|
||
data() {
|
||
return {
|
||
lDialog: this.width > 500 ? "w700" : "w500",
|
||
dialogVisible: true,
|
||
isDisabled: true,
|
||
form: {
|
||
encryptName: '',
|
||
encryptType: null,
|
||
encryptParams: '',
|
||
},
|
||
loading: null,
|
||
rules: {
|
||
encryptName: [
|
||
{ required: true, message: '档案加密名称不能为空', trigger: 'blur' }
|
||
],
|
||
encryptType: [
|
||
{ required: true, message: '档案加密类型不能为空', trigger: 'change' }
|
||
],
|
||
encryptParams: [
|
||
{ required: true, message: '档案加密参数不能为空', trigger: 'blur' }
|
||
],
|
||
},
|
||
};
|
||
},
|
||
created() {
|
||
this.initFormData();
|
||
},
|
||
methods: {
|
||
/** 初始化表单数据 */
|
||
initFormData() {
|
||
if (this.isAdd === 'edit' && this.rowData) {
|
||
// 编辑模式：填充表单数据
|
||
this.form = {
|
||
id: this.rowData.id,
|
||
encryptName: this.rowData.encryptName || '',
|
||
encryptType: this.rowData.encryptType || null,
|
||
encryptParams: this.rowData.encryptParams || '',
|
||
};
|
||
} else {
|
||
// 新增模式：重置表单
|
||
this.form = {
|
||
encryptName: '',
|
||
encryptType: null,
|
||
encryptParams: '',
|
||
};
|
||
}
|
||
},
|
||
/*关闭弹窗 */
|
||
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 = {
|
||
encryptName: '',
|
||
encryptType: null,
|
||
encryptParams: '',
|
||
};
|
||
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') {
|
||
addWhiteAPI(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 {
|
||
updateWhiteAPI(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> |