249 lines
9.5 KiB
Vue
249 lines
9.5 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="所属案卷">
|
||
<el-input type="textarea" class="form-item" :value="belongName" :disabled="true"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="文件题名" prop="contentName">
|
||
<el-input type="textarea" class="form-item" v-model="form.contentName" clearable show-word-limit
|
||
placeholder="请输入文件题名" maxlength="64" :disabled="detailStatus"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="案卷期限" prop="term">
|
||
<el-input class="form-item" v-model="form.term" clearable show-word-limit
|
||
placeholder="请输入案卷期限" maxlength="32" :disabled="detailStatus"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="归档责任单位" prop="unitName">
|
||
<el-input class="form-item" v-model="form.unitName" clearable show-word-limit
|
||
placeholder="请输入归档责任单位" maxlength="32" :disabled="detailStatus"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="所属专业" prop="major">
|
||
<el-input class="form-item" v-model="form.major" clearable show-word-limit
|
||
placeholder="请输入所属专业" maxlength="32" :disabled="detailStatus"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="档案标识代码" prop="markCode">
|
||
<el-select class="form-item" v-model="form.markCode" :disabled="detailStatus" filterable clearable
|
||
placeholder="请选择档案标识代码">
|
||
<el-option v-for="item in dict.type.mark_code" :key="item.value" :label="item.label"
|
||
:value="item.label"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="文件分类标记" prop="classifyMark">
|
||
<el-select class="form-item" v-model="form.classifyMark" :disabled="detailStatus" filterable clearable>
|
||
<el-option v-for="item in classifyMarkList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||
</el-select>
|
||
</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" v-if="!detailStatus"
|
||
@click="submitForm('ruleForm')">确认</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</template>
|
||
<script>
|
||
import _ from 'lodash'
|
||
import {
|
||
addArchiveRightApi,
|
||
editArchiveRightApi,
|
||
} from '@/api/archivesManagement/index.js'
|
||
import {getClassifyMarkSelApi} from '@/api/select.js'
|
||
export default {
|
||
name: "FileAddTableData",
|
||
props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData","projectId"],
|
||
dicts: ['mark_code'],
|
||
data() {
|
||
return {
|
||
lDialog: this.width > 500 ? "w700" : "w500",
|
||
dialogVisible: true,
|
||
isDisabled: true,
|
||
getClassifyMarkSelApi,
|
||
classifyMarkList : [],
|
||
form: {
|
||
contentName: null,
|
||
term: null,
|
||
unitName: null,
|
||
major: null,
|
||
markCode: null,
|
||
classifyMark: null,
|
||
},
|
||
belongName:'',
|
||
loading: null,
|
||
detailStatus:false,
|
||
rules: {
|
||
contentName: [
|
||
{ required: true, message: '文件题名不能为空', trigger: 'blur' }
|
||
],
|
||
term: [
|
||
{ required: true, message: '案卷期限不能为空', trigger: 'blur' }
|
||
],
|
||
unitName: [
|
||
{ required: true, message: '归档责任单位不能为空', trigger: 'blur' }
|
||
],
|
||
major: [
|
||
{ required: true, message: '所属专业不能为空', trigger: 'blur' }
|
||
],
|
||
markCode: [
|
||
{ required: true, message: '请选择档案标识代码', trigger: 'change' }
|
||
],
|
||
classifyMark: [
|
||
{ required: true, message: '请选择文件分类标记', trigger: 'change' }
|
||
],
|
||
},
|
||
};
|
||
},
|
||
created() {
|
||
this.initFormData();
|
||
},
|
||
methods: {
|
||
/** 初始化表单数据 */
|
||
async initFormData() {
|
||
const res = await getClassifyMarkSelApi();
|
||
this.classifyMarkList = res.data;
|
||
this.belongName = this.rowData.belongName;
|
||
this.detailStatus = this.rowData.detailStatus;
|
||
if ((this.isAdd === 'edit' || this.isAdd === 'detail') && this.rowData) {
|
||
// 编辑模式：填充表单数据
|
||
this.form = {
|
||
id: this.rowData.id,
|
||
contentName: this.rowData.contentName || null,
|
||
term: this.rowData.term || null,
|
||
major: this.rowData.major || null,
|
||
unitName: this.rowData.unitName || null,
|
||
markCode: this.rowData.markCode || null,
|
||
classifyMark: this.rowData.classifyMark || null,
|
||
parentId:this.rowData.parentId || null,
|
||
level:4
|
||
};
|
||
} else {
|
||
// 新增模式：重置表单
|
||
this.form = {
|
||
contentName: null,
|
||
term: null,
|
||
unitName: null,
|
||
major: null,
|
||
markCode: null,
|
||
classifyMark: null,
|
||
parentId:this.rowData.id || null,
|
||
level:4
|
||
};
|
||
}
|
||
},
|
||
/*关闭弹窗 */
|
||
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 = {
|
||
contentName: null,
|
||
term: null,
|
||
unitName: null,
|
||
major: null,
|
||
markCode: null,
|
||
classifyMark: null,
|
||
parentId:null,
|
||
level:4
|
||
};
|
||
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') {
|
||
addArchiveRightApi(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 {
|
||
editArchiveRightApi(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> |